/* СГЕНЕРИРОВАНО build.sh — не редактировать. Источник: sudba-design-system-92470100-a7e0-4965-ba70-9f99cb8e82ae */

/* ───── tokens/fonts.css ───── */
/* SUDBA webfonts.
   SUBSTITUTION: no brand font files were provided. Instrument Sans (core) and
   JetBrains Mono (technical/numeric) are the nearest Google Fonts matches to the
   moodboard's neo-grotesque + machined-data pairing. Replace with licensed files
   when available: drop woff2 into assets/fonts/ and swap the @import for @font-face. */
@import url("/css/fonts.css?v=f9a9f152");
:root{--font-core:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--font-display:var(--font-core)}

/* ───── tokens/colors.css ───── */
:root{
/* INK — the stage. Near-black canvas the whole brand sits on. */
--ink-000:#000000;--ink-050:#050506;--ink-100:#0B0B0D;--ink-200:#121215;--ink-300:#1A1A1F;--ink-400:#23232A;--ink-500:#2E2E36;--ink-600:#3C3C45;
/* STEEL — machined material. Sampled from the product photography. */
--steel-050:#F4F5F6;--steel-100:#E4E6E9;--steel-200:#C6CACE;--steel-300:#9EA4AA;--steel-400:#73797F;--steel-500:#4E5359;--steel-600:#33373B;
/* PAPER — the light stage, used for inverted editorial blocks only. */
--paper-000:#FFFFFF;--paper-100:#F2F2F0;--paper-200:#E5E5E1;
/* SIGNAL — the one accent: steel blue. A desaturated blue that sits inside the
   graphite family instead of arguing with it. Fills and rules only; too dark to
   be read as body text on ink. Never more than ~2% of a surface. */
--signal-400:#5A7FA8;--signal-500:#3E5C7E;--signal-600:#2A415A;--signal-700:#1B2C3E;--signal-wash:rgba(62,92,126,.20);--signal-glow:rgba(90,127,168,.42);
/* STATE — these DO carry text, so each one is legible on ink in its own right.
   state-info is a lifted blue; it is a status colour, not the brand accent. */
--state-live:#4ED17F;--state-warn:#FFB020;--state-fault:#FF4D3D;--state-info:#7EA9D4;
/* ALPHA — hairlines and fills that survive on any dark value */
--alpha-line-faint:rgba(255,255,255,.06);--alpha-line:rgba(255,255,255,.10);--alpha-line-strong:rgba(255,255,255,.18);
--alpha-fill:rgba(255,255,255,.04);--alpha-fill-hover:rgba(255,255,255,.08);--alpha-fill-active:rgba(255,255,255,.12);
--alpha-line-ink:rgba(0,0,0,.12);--alpha-fill-ink:rgba(0,0,0,.05);

/* ——— semantic aliases: use these, not the ramps ——— */
--bg-stage:var(--ink-000);--bg-page:var(--ink-100);--bg-inverse:var(--paper-100);
--surface-raised:var(--ink-200);--surface-card:var(--ink-300);--surface-input:var(--ink-200);--surface-well:var(--ink-050);
--surface-overlay:rgba(11,11,13,.72);--surface-glass:rgba(26,26,31,.62);
--text-display:var(--paper-000);--text-primary:#EDEEEF;--text-body:var(--steel-200);--text-muted:var(--steel-300);--text-faint:var(--steel-400);--text-disabled:var(--ink-600);
--text-accent:var(--signal-400);--text-on-signal:var(--paper-000);--text-on-paper:var(--ink-100);--text-on-paper-muted:var(--steel-500);
--border-hairline:var(--alpha-line);--border-strong:var(--alpha-line-strong);--border-faint:var(--alpha-line-faint);--border-focus:var(--signal-400);
/* accent roles: -fill sits behind something, -rule is a 1–2px line. Nothing else. */
--accent-fill:var(--signal-500);--accent-fill-hover:var(--signal-400);--accent-rule:var(--signal-400);
--fill-ghost:var(--alpha-fill);--fill-ghost-hover:var(--alpha-fill-hover);--fill-ghost-active:var(--alpha-fill-active);
}

/* ───── tokens/typography.css ───── */
:root{
/* weights — Instrument Sans ships 400..700; there is no hairline weight. Large
   display sizes read "light" through size + negative tracking, not thin strokes. */
--w-regular:400; /* @kind font */
--w-medium:500; /* @kind font */
--w-semibold:600; /* @kind font */
--w-bold:700; /* @kind font */
/* display — product names, cinematic hero type */
--fs-display-1:clamp(56px,9vw,148px); /* @kind font */
--fs-display-2:clamp(40px,6vw,96px); /* @kind font */
--fs-display-3:clamp(32px,4.2vw,64px); /* @kind font */
/* statement — heavy uppercase editorial slabs */
--fs-statement:clamp(28px,3.4vw,52px); /* @kind font */
/* headings */
--fs-h1:40px; /* @kind font */
--fs-h2:30px; /* @kind font */
--fs-h3:22px; /* @kind font */
--fs-h4:17px; /* @kind font */
/* body */
--fs-body-lg:19px; /* @kind font */
--fs-body:15px; /* @kind font */
--fs-body-sm:13.5px; /* @kind font */
/* label — tiny tracked uppercase eyebrows */
--fs-label-lg:12px; /* @kind font */
--fs-label:11px; /* @kind font */
--fs-label-sm:10px; /* @kind font */
/* mono — specs, counters, coordinates, prices */
--fs-mono-lg:15px; /* @kind font */
--fs-mono:12.5px; /* @kind font */
--fs-mono-sm:11px; /* @kind font */
--fs-metric:34px; /* @kind font */
/* line-height */
--lh-display:.92; /* @kind font */
--lh-statement:1.04; /* @kind font */
--lh-tight:1.15; /* @kind font */
--lh-heading:1.2; /* @kind font */
--lh-body:1.6; /* @kind font */
--lh-relaxed:1.75; /* @kind font */
--lh-label:1; /* @kind font */
/* tracking */
--tr-display:-.035em; /* @kind font */
--tr-tight:-.02em; /* @kind font */
--tr-normal:0; /* @kind font */
--tr-wide:.04em; /* @kind font */
--tr-label:.14em; /* @kind font */
--tr-label-loose:.22em; /* @kind font */
/* ——— semantic composites (font shorthand) ——— */
--type-display:var(--w-regular) var(--fs-display-1)/var(--lh-display) var(--font-display); /* @kind font */
--type-statement:var(--w-bold) var(--fs-statement)/var(--lh-statement) var(--font-display); /* @kind font */
--type-h1:var(--w-semibold) var(--fs-h1)/var(--lh-heading) var(--font-core); /* @kind font */
--type-h3:var(--w-semibold) var(--fs-h3)/var(--lh-tight) var(--font-core); /* @kind font */
--type-body:var(--w-regular) var(--fs-body)/var(--lh-body) var(--font-core); /* @kind font */
--type-label:var(--w-medium) var(--fs-label)/var(--lh-label) var(--font-core); /* @kind font */
--type-mono:var(--w-regular) var(--fs-mono)/1.4 var(--font-mono); /* @kind font */
}

/* ───── tokens/spacing.css ───── */
:root{
/* 4px base. The brand spends space freely — sections breathe at 96–160px. */
--sp-0:0px;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;--sp-32:128px;--sp-40:160px;--sp-48:192px;
/* layout */
--gutter:32px;--gutter-sm:20px;--max-w:1440px;--max-w-wide:1680px;
--max-w-text:64ch; /* @kind other */
--nav-h:72px;--grid-gap:24px;
--section-y:var(--sp-32); /* @kind spacing */
--section-y-sm:var(--sp-20); /* @kind spacing */
/* control geometry */
--ctl-h-sm:32px;--ctl-h:40px;--ctl-h-lg:52px;--ctl-px-sm:14px;--ctl-px:20px;--ctl-px-lg:28px;
--hit-min:44px;--icon-sm:14px;--icon:18px;--icon-lg:24px;
}

/* ───── tokens/radius.css ───── */
:root{
/* Capsules for anything you press; soft squares for anything that holds content. */
--r-xs:4px;--r-sm:10px;--r-md:16px;--r-lg:28px;--r-xl:40px;--r-full:999px;
--r-control:var(--r-full);--r-card:var(--r-md);--r-media:var(--r-lg);--r-tag:var(--r-xs);--r-modal:var(--r-lg);--r-input:var(--r-sm);
}

/* ───── tokens/elevation.css ───── */
:root{
/* On a black stage a drop shadow is invisible. SUDBA builds depth from LIGHT:
   a pooled floor glow under the subject, a specular sheen across metal, and a
   hairline top edge. True shadows appear only on paper surfaces and modals. */
--glow-pool:radial-gradient(ellipse 62% 42% at 50% 100%,rgba(255,255,255,.16),rgba(255,255,255,0) 72%); /* @kind other */
--glow-pool-tight:radial-gradient(ellipse 34% 26% at 50% 96%,rgba(255,255,255,.22),rgba(255,255,255,0) 70%); /* @kind other */
--glow-key:radial-gradient(ellipse 50% 60% at 22% 8%,rgba(255,255,255,.10),rgba(255,255,255,0) 70%); /* @kind other */
--sheen-metal:linear-gradient(105deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 38%,rgba(255,255,255,0) 56%); /* @kind other */
--sheen-edge:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 42%); /* @kind other */
--scrim-top:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,0)); /* @kind other */
--scrim-bottom:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,0)); /* @kind other */
--scrim-side:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,0) 62%); /* @kind other */
--blur-glass:blur(20px) saturate(1.08); /* @kind other */
--chrome-fill:linear-gradient(168deg,#FFFFFF 0%,#DDE2E7 22%,#939BA2 44%,#5C6369 51%,#A2AAB1 60%,#F2F5F7 80%,#B3BAC0 100%); /* @kind other */
/* MACHINED CONTROLS — every interactive element is a milled part: a light
   chamfer along the top edge, a dark one along the bottom, a shadow on the
   floor beneath it, and 1px of travel when pressed. */
--chrome-face:linear-gradient(180deg,#F7F9FA,#CDD3D9 48%,#AAB2B9 52%,#E2E7EB); /* @kind other */
--chrome-face-hover:linear-gradient(180deg,#FFFFFF,#D8DDE2 48%,#B4BCC3 52%,#EBEFF2); /* @kind other */
--chrome-face-pressed:linear-gradient(180deg,#AEB6BD,#D2D8DD 46%,#E8ECEF 54%,#BFC6CC); /* @kind other */
--accent-face:linear-gradient(180deg,#4E7096,#3E5C7E 48%,#35516F 52%,#46648A); /* @kind other */
--accent-face-hover:linear-gradient(180deg,#5A7FA8,#48688E 48%,#3E5C7E 52%,#527399); /* @kind other */
--accent-face-pressed:linear-gradient(180deg,#2A415A,#35516F 46%,#446289 54%,#314965); /* @kind other */
--bevel-raised:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -1px 0 rgba(0,0,0,.45),0 1px 0 rgba(0,0,0,.62),0 10px 22px -12px rgba(0,0,0,.92); /* @kind shadow */
--bevel-raised-light:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(0,0,0,.42),0 1px 0 rgba(0,0,0,.68),0 12px 24px -12px rgba(0,0,0,.95); /* @kind shadow */
--bevel-pressed:inset 0 3px 7px rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,255,255,.22); /* @kind shadow */
--bevel-hairline:inset 0 1px 0 rgba(255,255,255,.12); /* @kind shadow */
--well-inset:inset 0 2px 5px rgba(0,0,0,.8),inset 0 -1px 0 rgba(255,255,255,.06); /* @kind shadow */
--travel-press:translateY(1px) scale(.995); /* @kind other */
--glow-signal:0 0 0 1px var(--signal-glow),0 0 32px -8px var(--signal-glow); /* @kind shadow */
--edge-inset:inset 0 1px 0 rgba(255,255,255,.06); /* @kind shadow */
--shadow-lift:inset 0 1px 0 rgba(255,255,255,.06),0 12px 32px -12px rgba(0,0,0,.8); /* @kind shadow */
--shadow-modal:0 40px 120px -20px rgba(0,0,0,.9); /* @kind shadow */
--shadow-paper:0 1px 2px rgba(0,0,0,.06),0 12px 32px -16px rgba(0,0,0,.24); /* @kind shadow */
}

/* ───── tokens/motion.css ───── */
:root{
/* Cinematic, never springy. Nothing bounces; product hardware does not bounce. */
--ease-stage:cubic-bezier(.16,1,.3,1); /* @kind other */
--ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
--ease-exit:cubic-bezier(.4,0,1,1); /* @kind other */
--ease-linear:linear; /* @kind other */
--dur-1:120ms; /* @kind other */
--dur-2:240ms; /* @kind other */
--dur-3:420ms; /* @kind other */
--dur-4:720ms; /* @kind other */
--dur-cinematic:1200ms; /* @kind other */
--float-loop:6s; /* @kind other */
--sheen-loop:9s; /* @kind other */
--t-control:var(--dur-2) var(--ease-standard); /* @kind other */
--t-surface:var(--dur-3) var(--ease-stage); /* @kind other */
--t-stage:var(--dur-4) var(--ease-stage); /* @kind other */
--press-scale:.985; /* @kind other */
}
@keyframes sudba-float{0%,100%{transform:translate(var(--float-x,0),0)}50%{transform:translate(var(--float-x,0),-14px)}}
@keyframes sudba-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes sudba-fade{from{opacity:0}to{opacity:1}}
@keyframes sudba-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ───── tokens/base.css ───── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-page);color:var(--text-body);font:var(--type-body);letter-spacing:var(--tr-normal);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;text-wrap:pretty}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-display);font-family:var(--font-display);font-weight:var(--w-semibold);letter-spacing:var(--tr-tight);line-height:var(--lh-heading);text-wrap:balance}
p{margin:0}
a{color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--alpha-line-strong);transition:color var(--t-control),border-color var(--t-control)}
a:hover{color:var(--paper-000);border-bottom-color:var(--accent-rule)}
a:active{color:var(--steel-100);border-bottom-color:var(--signal-500)}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--signal-500);color:var(--paper-000)}
:focus-visible{outline:1px solid var(--border-focus);outline-offset:2px}
code,kbd,samp{font-family:var(--font-mono);font-size:.92em}
hr{border:0;border-top:1px solid var(--border-hairline);margin:var(--sp-8) 0}
img{max-width:100%;display:block}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}