/* WRAITH Hub — design B "Graphite minimal". Tokens and components follow platform/design/b-graphite.
   Fonts: Onest and JetBrains Mono (SIL OFL 1.1) from /static/fonts/fonts.css, system fallbacks below.
   No external CDNs (CSP: self only). */

:root{
  color-scheme:dark;
  --g-0:#070708; --g-1:#0B0B0D; --g-2:#111114; --g-3:#17171B; --g-4:#1E1E23; --g-5:#27272E;
  --line-1:rgba(255,255,255,.055); --line-2:rgba(255,255,255,.085); --line-3:rgba(255,255,255,.13); --line-4:rgba(255,255,255,.2);
  --text-1:#EDEDF0; --text-2:#A6A6B0; --text-3:#8A8A94; --text-4:#5C5C66;
  --amber:#F0A83C; --amber-hi:#F7BD63; --amber-lo:#D9922C; --amber-ink:#1A1206;
  --amber-a08:rgba(240,168,60,.08); --amber-a16:rgba(240,168,60,.16); --amber-a32:rgba(240,168,60,.32);
  --ok:#4CCB8A; --ok-a12:rgba(76,203,138,.12); --ok-a32:rgba(76,203,138,.32);
  --err:#F06A72; --err-a12:rgba(240,106,114,.12); --err-a40:rgba(240,106,114,.4);
  --font:"Onest",system-ui,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --t-11:11px; --t-12:12px; --t-13:13px; --t-14:14px; --t-15:15px; --t-16:16px;
  --t-18:18px; --t-20:20px; --t-24:24px; --t-32:32px; --t-40:40px; --t-56:56px; --t-76:76px;
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-full:999px;
  --sh-1:0 1px 2px rgba(0,0,0,.45);
  --sh-2:inset 0 1px 0 rgba(255,255,255,.035),0 10px 30px -14px rgba(0,0,0,.75);
  --sh-window:0 0 0 1px rgba(255,255,255,.1),0 48px 120px -30px rgba(0,0,0,.95),0 14px 36px -14px rgba(0,0,0,.7);
  --ring:0 0 0 1px var(--g-1),0 0 0 3px rgba(240,168,60,.65);
  --ease:cubic-bezier(.2,.7,.2,1); --dur:160ms;
  --pad:24px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
html{scroll-padding-top:80px}
body{background:var(--g-1);color:var(--text-1);font:400 var(--t-15)/1.55 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6,p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{display:block;max-width:100%}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:.92em;letter-spacing:-.01em}
.muted{color:var(--text-2)}
.faint{color:var(--text-3)}
.c-amber{color:var(--amber)}
.c-ok{color:var(--ok)}
.c-err{color:var(--err)}
:focus-visible{outline:none;box-shadow:var(--ring)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- Icons, logo ---------- */
.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.i-sm{width:14px;height:14px}
.i-lg{width:20px;height:20px}
.i-fill{fill:currentColor;stroke:none}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:var(--t-15);letter-spacing:-.01em;color:var(--text-1)}
.logo svg{width:28px;height:28px;flex:none}
.logo span{color:var(--text-3);font-weight:500}

/* ---------- Buttons, links ---------- */
.btn{--h:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);padding:0 16px;
  border-radius:var(--r-md);border:1px solid transparent;background:transparent;color:var(--text-1);
  font:500 var(--t-14)/1 var(--font);letter-spacing:-.005em;white-space:nowrap;cursor:pointer;user-select:none;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-xs{--h:26px;padding:0 8px;font-size:var(--t-12);border-radius:var(--r-sm);gap:6px}
.btn-sm{--h:32px;padding:0 12px;font-size:var(--t-13);border-radius:var(--r-sm)}
.btn-lg{--h:48px;padding:0 22px;font-size:var(--t-15);border-radius:10px}
.btn-icon{width:var(--h);padding:0}
.btn-block{width:100%}
.btn-primary{background:var(--amber);color:var(--amber-ink);font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.4)}
.btn-primary:hover{background:var(--amber-hi)}
.btn-primary:active{background:var(--amber-lo)}
.btn-contrast{background:var(--text-1);color:var(--g-1);font-weight:600;box-shadow:inset 0 -1px 0 rgba(0,0,0,.12)}
.btn-contrast:hover{background:#fff}
.btn-secondary{background:var(--g-3);border-color:var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.btn-secondary:hover{background:var(--g-4);border-color:var(--line-3)}
.btn-ghost{color:var(--text-2)}
.btn-ghost:hover{background:var(--g-3);color:var(--text-1)}
.btn-danger{color:var(--err);border-color:rgba(240,106,114,.28)}
.btn-danger:hover{background:var(--err-a12);border-color:var(--err-a40)}
.btn:focus-visible{box-shadow:var(--ring)}
.btn[disabled]{background:var(--g-3);border-color:var(--line-1);color:var(--text-4);box-shadow:none;cursor:not-allowed;transform:none}
.link{color:var(--text-1);text-decoration:underline;text-decoration-color:var(--line-4);text-underline-offset:3px;transition:text-decoration-color var(--dur)}
.link:hover{text-decoration-color:var(--text-1)}
.link-amber{color:var(--amber)}
.link-amber:hover{color:var(--amber-hi);text-decoration:underline;text-underline-offset:3px}
form.inline{display:inline}

/* ---------- Form controls ---------- */
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.label{font-size:var(--t-13);font-weight:500;color:var(--text-2)}
.input-wrap{position:relative;display:flex;align-items:center}
.input{width:100%;height:40px;padding:0 12px;background:var(--g-2);border:1px solid var(--line-3);border-radius:var(--r-md);
  color:var(--text-1);font:400 var(--t-14)/1 var(--font);outline:none;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.input::placeholder{color:var(--text-3)}
.input:hover{border-color:var(--line-4)}
.input:focus{border-color:rgba(240,168,60,.75);box-shadow:0 0 0 3px var(--amber-a16)}
.input.is-error{border-color:var(--err);box-shadow:0 0 0 3px var(--err-a12)}
.input[readonly]{color:var(--text-3);background:var(--g-1)}
.input-sm{height:32px;padding:0 10px;font-size:var(--t-13);border-radius:var(--r-sm)}
.input-xs{height:26px;padding:0 6px;font-size:var(--t-12);border-radius:var(--r-sm);width:64px}
.input-lg{height:48px;font-size:var(--t-15);padding:0 14px;border-radius:10px}
.input-mono{font-family:var(--mono);font-size:var(--t-14);letter-spacing:.06em}
textarea.input{height:auto;min-height:96px;padding:10px 12px;line-height:1.5;resize:vertical}
textarea.input-mono{font-size:var(--t-13);letter-spacing:0}
select.input{appearance:none;padding-right:32px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat}
input[type=file].input{padding:7px 10px;height:auto}
.input-wrap .input{padding-right:40px}
.input-btn{position:absolute;right:4px;width:32px;height:32px;display:grid;place-items:center;border:0;background:transparent;color:var(--text-3);border-radius:var(--r-sm);cursor:pointer}
.input-btn:hover{color:var(--text-1);background:var(--g-4)}
.hint{font-size:var(--t-12);color:var(--text-3);line-height:1.45}
.error-msg{display:flex;align-items:flex-start;gap:6px;font-size:var(--t-13);line-height:1.45;color:var(--err)}
.error-msg .i{width:14px;height:14px;margin-top:2px}
.check{display:inline-flex;align-items:center;gap:10px;font-size:var(--t-13);color:var(--text-2);cursor:pointer;user-select:none}
.check input{appearance:none;margin:0;width:16px;height:16px;border-radius:var(--r-xs);border:1px solid var(--line-4);background:var(--g-2);display:grid;place-items:center;cursor:pointer}
.check input:checked{background:var(--amber);border-color:var(--amber)}
.check input:checked::after{content:"";width:8px;height:4px;border:2px solid var(--amber-ink);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.alert{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:var(--r-lg);font-size:var(--t-14);line-height:1.5;border:1px solid}
.alert .i{margin-top:3px}
.alert-ok{color:var(--ok);background:var(--ok-a12);border-color:rgba(76,203,138,.24)}
.alert-err{color:var(--err);background:var(--err-a12);border-color:rgba(240,106,114,.26)}
.alert-warn{color:var(--amber-hi);background:var(--amber-a08);border-color:rgba(240,168,60,.26)}

/* ---------- Badges, dots, kbd, toggles, bars ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--r-sm);font:500 var(--t-12)/1 var(--font);white-space:nowrap;color:var(--text-2);border:1px solid var(--line-3);background:transparent}
.badge .i{width:12px;height:12px}
.badge-solid{background:var(--g-3);border-color:var(--line-2)}
.badge-amber{color:var(--amber-hi);background:var(--amber-a08);border-color:rgba(240,168,60,.24)}
.badge-ok{color:var(--ok);background:var(--ok-a12);border-color:rgba(76,203,138,.22)}
.badge-err{color:var(--err);background:var(--err-a12);border-color:rgba(240,106,114,.24)}
.badge-mono{font-family:var(--mono);font-size:11px;letter-spacing:.02em}
.dot{width:6px;height:6px;border-radius:50%;background:var(--text-3);flex:none}
.dot-ok{background:var(--ok);box-shadow:0 0 0 3px var(--ok-a12)}
.dot-amber{background:var(--amber);box-shadow:0 0 0 3px var(--amber-a16)}
.dot-err{background:var(--err);box-shadow:0 0 0 3px var(--err-a12)}
.dot-flat{box-shadow:none}
.kbd{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:var(--r-xs);border:1px solid var(--line-3);border-bottom-width:2px;background:var(--g-3);font:500 11px/1 var(--mono);color:var(--text-2)}
.toggle{position:relative;width:28px;height:16px;border-radius:var(--r-full);background:var(--g-5);flex:none}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--text-3)}
.toggle.on{background:var(--amber)}
.toggle.on::after{transform:translateX(12px);background:var(--amber-ink)}
.bar{position:relative;height:4px;border-radius:var(--r-full);background:var(--g-5);overflow:hidden}
.bar > i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--amber)}
.w-50{width:50%}
.slots{display:flex;gap:4px;margin-top:8px}
.slots i{flex:1;height:4px;border-radius:var(--r-full);background:var(--g-5)}
.slots i.on{background:var(--amber)}
.vr{width:1px;align-self:stretch;background:var(--line-2)}
.card{background:var(--g-2);border:1px solid var(--line-2);border-radius:var(--r-xl)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 var(--t-12)/1 var(--mono);color:var(--text-3);letter-spacing:.02em}
.eyebrow b{color:var(--amber);font-weight:500}
.eyebrow::before{content:"";width:16px;height:1px;background:var(--line-4)}
.glyph{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center}
.glyph svg{width:100%;height:100%}
.glyph-locked,.glyph-letter{background:var(--g-3);border:1px solid var(--line-2);color:var(--text-3)}
.glyph-letter{font-weight:600;font-size:var(--t-18);color:var(--text-2)}
.glyph-locked .i{width:18px;height:18px}

/* ================= Site layout ================= */
.wrap{width:100%;max-width:calc(1200px + 2 * var(--pad));margin:0 auto;padding:0 var(--pad)}
.hdr{position:sticky;top:0;z-index:20;background:var(--g-1);border-bottom:1px solid var(--line-1)}
.hdr-in{height:64px;display:flex;align-items:center;gap:48px}
.nav{display:flex;gap:4px}
.nav a{height:32px;display:inline-flex;align-items:center;padding:0 12px;border-radius:var(--r-sm);font-size:var(--t-14);color:var(--text-2);transition:color var(--dur),background var(--dur)}
.nav a:hover{color:var(--text-1);background:var(--g-3)}
.nav a.is-active{color:var(--text-1)}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.acc{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 10px 0 4px;border-radius:var(--r-full);border:1px solid var(--line-2);background:var(--g-2);font-size:var(--t-14);font-weight:500;transition:border-color var(--dur)}
.acc:hover{border-color:var(--line-4)}
.ava{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:50%;background:linear-gradient(180deg,#2A2A31,#18181C);border:1px solid var(--line-3);font-size:11px;font-weight:600;color:var(--text-1)}
.acc .i{color:var(--text-3)}

/* Hero */
.hero{position:relative;padding:88px 0 0;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line-1) 1px,transparent 1px),linear-gradient(90deg,var(--line-1) 1px,transparent 1px);
  background-size:80px 80px;background-position:center -1px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 75%)}
.hero::after{content:"";position:absolute;left:50%;top:420px;width:1400px;max-width:100vw;height:700px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(ellipse at center,rgba(240,168,60,.07),transparent 62%)}
.hero .wrap{position:relative;z-index:1}
.hero-top{display:grid;grid-template-columns:1fr 372px;gap:64px;align-items:end}
.pill{display:inline-flex;align-items:center;gap:10px;max-width:100%;height:32px;padding:0 12px 0 4px;margin-bottom:32px;border-radius:var(--r-full);border:1px solid var(--line-2);background:var(--g-2);font-size:var(--t-13);color:var(--text-2);transition:border-color var(--dur),color var(--dur)}
.pill .badge{height:24px;border-radius:var(--r-full);padding:0 10px}
.pill:hover{border-color:var(--line-4);color:var(--text-1)}
.pill-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h-display{font-size:clamp(40px,6vw,var(--t-76));line-height:1.02;font-weight:600;letter-spacing:-.045em}
.h-display span{color:var(--text-3)}
.lead{font-size:var(--t-18);line-height:1.55;color:var(--text-2);letter-spacing:-.005em}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.cta-meta{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:var(--t-13);color:var(--text-3)}

/* Hero visual: map + HTML overlays positioned in % of the 1200×556 map */
.hv{position:relative;margin-top:72px;border-radius:var(--r-2xl);background:#0C0C0F;border:1px solid var(--line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 60px 120px -40px rgba(0,0,0,.9);overflow:hidden}
.hv-bar{height:44px;display:flex;align-items:center;gap:16px;padding:0 16px 0 18px;border-bottom:1px solid var(--line-2);background:var(--g-2)}
.hv-bar-l{display:flex;align-items:center;gap:10px;font-size:var(--t-13);font-weight:500;white-space:nowrap}
.hv-bar-l svg.g{width:20px;height:20px}
.hv-bar-l .sep{color:var(--text-4)}
.hv-tabs{display:flex;gap:2px;margin:0 auto;padding:3px;border-radius:var(--r-md);background:var(--g-1);border:1px solid var(--line-1)}
.hv-tabs span{height:24px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;border-radius:5px;font-size:var(--t-12);color:var(--text-3)}
.hv-tabs span.on{background:var(--g-4);color:var(--text-1);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.hv-bar-r{display:flex;gap:14px;font:400 var(--t-12)/1 var(--mono);color:var(--text-3)}
.hv-bar-r b{font-weight:500;color:var(--text-2)}
.hv-map{position:relative;aspect-ratio:1200/556}
.hv-map > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ruler-x,.ruler-y{position:absolute;z-index:2;pointer-events:none}
.ruler-x{left:0;right:0;top:0;height:8px;background:repeating-linear-gradient(90deg,var(--line-3) 0 1px,transparent 1px 20px)}
.ruler-x::after{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:repeating-linear-gradient(90deg,var(--line-4) 0 1px,transparent 1px 100px)}
.ruler-y{top:0;bottom:0;left:0;width:8px;background:repeating-linear-gradient(180deg,var(--line-3) 0 1px,transparent 1px 20px)}
.ruler-y::after{content:"";position:absolute;top:0;bottom:0;left:0;width:14px;background:repeating-linear-gradient(180deg,var(--line-4) 0 1px,transparent 1px 100px)}
.coord{position:absolute;z-index:3;height:18px;display:inline-flex;align-items:center;padding:0 6px;border-radius:var(--r-xs);background:var(--amber);color:var(--amber-ink);font:500 10.5px/1 var(--mono)}
.coord-x{left:50.33%;top:2.88%}
.coord-y{left:1.33%;top:61.7%}
.hud{position:absolute;z-index:3;background:rgba(17,17,20,.96);border:1px solid var(--line-3);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.hud-h{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line-2);font-size:var(--t-13);font-weight:500}
.hud-h .i{color:var(--amber)}
.hud-h .r{margin-left:auto;font:500 var(--t-12)/1 var(--mono);color:var(--text-2)}
.hud-b{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px}
.hud-row{display:flex;align-items:center;justify-content:space-between;font-size:var(--t-12);color:var(--text-3)}
.hud-row b{font:500 var(--t-12)/1 var(--mono);color:var(--text-1)}
.hud-route{left:32px;top:32px;width:264px}
.hud-ctl{right:24px;top:32px;width:248px}
.hud-ctl .hud-h svg.g{width:20px;height:20px}
.hud-ctl .hud-h .r{display:inline-flex;align-items:center;gap:6px;font-family:var(--font);font-weight:500;color:var(--ok)}
.hud-t{display:flex;align-items:center;gap:10px;font-size:var(--t-13);color:var(--text-1)}
.hud-t .kbd{margin-left:auto}
.hud-t.off{color:var(--text-3)}
.tag{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 10px;border-radius:var(--r-sm);background:var(--g-2);border:1px solid var(--line-3);font-size:var(--t-12);color:var(--text-1);white-space:nowrap;box-shadow:var(--sh-1)}
.tag b{font:500 var(--t-12)/1 var(--mono);color:var(--amber)}
.tag-err b{color:var(--err)}
.tag-res{left:57.83%;top:71.94%}
.tag-fight{left:61.67%;top:16.9%}
.tag-lap{left:53.6%;top:56.2%}
.legend{position:absolute;z-index:3;left:32px;bottom:20px;display:flex;gap:20px;font:400 var(--t-12)/1 var(--mono);color:var(--text-3)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend svg{width:12px;height:12px}
.scale{position:absolute;z-index:3;right:24px;bottom:20px;display:flex;align-items:center;gap:10px;font:400 var(--t-12)/1 var(--mono);color:var(--text-3)}
.scale i{display:block;width:80px;height:6px;border:1px solid var(--line-4);border-top:0}

/* Facts */
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:96px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.fact{padding:32px 28px 32px 0;display:flex;flex-direction:column;gap:10px}
.fact + .fact{padding-left:28px;border-left:1px solid var(--line-2)}
.fact .ico{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--g-2);color:var(--text-1);margin-bottom:6px}
.fact h3{font-size:var(--t-15);font-weight:600;letter-spacing:-.01em}
.fact p{font-size:var(--t-14);color:var(--text-3);line-height:1.5}

/* Sections */
.sec{padding:128px 0 0}
.sec-head{display:grid;grid-template-columns:1fr 420px;gap:64px;align-items:end;margin-bottom:48px}
.h2{font-size:clamp(32px,4.2vw,var(--t-56));line-height:1.05;font-weight:600;letter-spacing:-.04em;margin-top:20px}
.h2 span{color:var(--text-3)}
.sec-head p{font-size:var(--t-16);color:var(--text-2);line-height:1.6}

/* Product bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(288px,auto);gap:24px}
.pc{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--g-2);border:1px solid var(--line-2);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.pc:hover{border-color:var(--line-4);box-shadow:var(--sh-2)}
.pc-feature{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;padding:40px 40px 0}
.pc-art{position:absolute;top:0;right:0;width:440px;height:420px;pointer-events:none;transition:transform 600ms var(--ease);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
.pc-art-in{position:absolute;inset:0;-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 50%,transparent 100%)}
.pc-art-in img{width:100%;height:100%;object-fit:cover}
.pc-feature:hover .pc-art{transform:translate(-6px,4px)}
.pc-top{position:relative;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pc-top .glyph{width:56px;height:56px}
.pc-top .ver{margin-left:auto}
.pc-badges{display:flex;gap:8px;flex-wrap:wrap}
.pc-name{position:relative;margin-top:36px;font-size:clamp(40px,4.2vw,var(--t-56));line-height:1;font-weight:600;letter-spacing:-.04em}
.pc-tagline{position:relative;margin-top:14px;font-size:var(--t-20);line-height:1.4;color:var(--text-1);letter-spacing:-.015em;max-width:420px}
.pc-desc{position:relative;margin-top:12px;font-size:var(--t-15);line-height:1.6;color:var(--text-3);max-width:420px}
.pc-feats{position:relative;margin-top:auto;padding-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:20px 32px;padding-bottom:32px}
.feat{display:flex;gap:14px;align-items:flex-start}
.feat .ico{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--g-3);border:1px solid var(--line-2);color:var(--amber)}
.feat h4{font-size:var(--t-14);font-weight:600;letter-spacing:-.005em;line-height:1.35}
.feat p{font-size:var(--t-13);color:var(--text-3);line-height:1.45;margin-top:2px}
.pc-foot{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;min-height:64px;margin:auto -40px 0;padding:12px 24px 12px 40px;border-top:1px solid var(--line-2);background:rgba(255,255,255,.012)}
.pc-feats + .pc-foot{margin-top:0}
.reqs{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:var(--t-13);color:var(--text-3)}
.reqs span{display:inline-flex;align-items:center;gap:8px}
.reqs .i{color:var(--text-2)}
.pc-foot .btn{margin-left:auto}
.pc-plain{padding:28px;display:flex;flex-direction:column;gap:10px}
.pc-plain h3{margin-top:auto;font-size:var(--t-24);font-weight:600;letter-spacing:-.02em}
.pc-plain p{font-size:var(--t-14);color:var(--text-3);line-height:1.5}
.pc-soon{padding:28px;display:flex;flex-direction:column}
.hatch{position:absolute;inset:0 0 auto 0;height:132px;border-bottom:1px solid var(--line-1);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px 9px);
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.4));mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.4))}
.pc-soon .ph{position:relative;width:56px;height:56px;border-radius:14px;border:1px dashed var(--line-4);display:grid;place-items:center;color:var(--text-3);background:var(--g-2)}
.pc-soon .badge{position:absolute;top:28px;right:28px}
.pc-soon h3{margin-top:auto;padding-top:32px;font-size:var(--t-20);font-weight:600;letter-spacing:-.02em;color:var(--text-2)}
.pc-soon p{margin-top:8px;font-size:var(--t-14);color:var(--text-3);line-height:1.5}

/* Steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{display:flex;flex-direction:column;padding:24px;border-radius:var(--r-xl);background:var(--g-2);border:1px solid var(--line-2)}
.step-vis{height:176px;border-radius:var(--r-lg);background:var(--g-1);border:1px solid var(--line-1);padding:20px;display:flex;flex-direction:column;justify-content:center;gap:10px;position:relative;overflow:hidden}
.step-vis::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:12px 12px;
  -webkit-mask-image:radial-gradient(ellipse at center,transparent 30%,#000 90%);mask-image:radial-gradient(ellipse at center,transparent 30%,#000 90%)}
.step-vis > *{position:relative}
.step-meta{display:flex;align-items:center;gap:12px;margin-top:24px}
.step-n{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-3);font:500 var(--t-12)/1 var(--mono);color:var(--text-2)}
.step:last-child .step-n{border-color:var(--amber);color:var(--amber)}
.step-meta .ln{flex:1;height:1px;background:linear-gradient(90deg,var(--line-3),transparent)}
.step h3{margin-top:16px;font-size:var(--t-20);font-weight:600;letter-spacing:-.02em}
.step p{margin-top:8px;font-size:var(--t-14);line-height:1.55;color:var(--text-3)}
.mini-field{height:34px;display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:7px;background:var(--g-2);border:1px solid var(--line-3);font-size:var(--t-12);color:var(--text-2);overflow:hidden;white-space:nowrap}
.mini-field .i{width:14px;height:14px;color:var(--text-3)}
.mini-field.focus{border-color:rgba(240,168,60,.75);box-shadow:0 0 0 3px var(--amber-a16)}
.mini-field.mono{font-family:var(--mono);letter-spacing:.04em;color:var(--text-1)}
.mini-field .ok{margin-left:auto;color:var(--ok)}
.mini-btn{height:30px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;border-radius:7px;font-size:var(--t-12);font-weight:600}
.mini-btn.contrast{background:var(--text-1);color:var(--g-1)}
.mini-btn.primary{background:var(--amber);color:var(--amber-ink)}
.mini-btn .i{width:12px;height:12px}
.mini-row{display:flex;align-items:center;gap:10px;font-size:var(--t-12);color:var(--text-2)}
.mini-row .st{width:18px;height:18px;display:grid;place-items:center;border-radius:50%;flex:none}
.mini-row .st .i{width:11px;height:11px;stroke-width:2.2}
.mini-row .st.ok{background:var(--ok-a12);color:var(--ok)}
.mini-row .st.wait{border:1.5px solid var(--amber-a32);border-top-color:var(--amber);animation:spin 1s linear infinite}
.mini-row .r{margin-left:auto;font:400 11px/1 var(--mono);color:var(--text-3)}
.mini-prod{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;background:var(--g-2);border:1px solid var(--line-2)}
.mini-prod svg.g{width:28px;height:28px}
.mini-prod b{font-size:var(--t-13);font-weight:600}
.mini-prod .badge{margin-left:auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* Download block */
.dl{position:relative;display:grid;grid-template-columns:520px 1fr;min-height:400px;border-radius:var(--r-2xl);background:var(--g-2);border:1px solid var(--line-2);overflow:hidden}
.dl::before{content:"";position:absolute;right:-120px;top:-160px;width:760px;height:620px;background:radial-gradient(ellipse at center,rgba(240,168,60,.08),transparent 62%);pointer-events:none}
.dl-copy{position:relative;padding:56px}
.dl-copy .h2{font-size:clamp(30px,3.2vw,var(--t-40));margin-top:20px}
.dl-copy > p{margin-top:16px;font-size:var(--t-16);color:var(--text-2);line-height:1.6}
.dl-copy .cta{margin-top:32px}
.dl-list{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-direction:column;gap:10px}
.dl-list li{display:flex;align-items:center;gap:10px;font-size:var(--t-14);color:var(--text-2)}
.dl-list .i{color:var(--ok)}
.dl-copy .dl-hash{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:400 var(--t-12)/1.5 var(--mono);color:var(--text-3)}
.dl-hash b{color:var(--text-2);font-weight:400}
.dl-copy .dl-sha{margin-top:6px;overflow-wrap:anywhere}
.dl-sha b{word-break:break-all}
.dl-shot{position:relative}
.mw{position:absolute;left:24px;top:56px;width:700px;height:470px;border-radius:10px;background:var(--g-1);box-shadow:var(--sh-window);overflow:hidden;display:flex;flex-direction:column}
.mw-bar{height:36px;display:flex;align-items:center;gap:8px;padding-left:12px;border-bottom:1px solid var(--line-1);font-size:var(--t-12);color:var(--text-2)}
.mw-bar svg.l{width:16px;height:16px}
.mw-bar .ctl{margin-left:auto;display:flex}
.mw-bar .ctl span{width:36px;height:36px;display:grid;place-items:center;color:var(--text-3)}
.mw-bar .ctl svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:1}
.mw-body{flex:1;display:grid;grid-template-columns:180px 1fr}
.mw-side{border-right:1px solid var(--line-1);padding:12px 8px;display:flex;flex-direction:column;gap:4px}
.mw-side .lbl{font:500 10px/1 var(--mono);color:var(--text-3);padding:6px 8px}
.mw-side .lbl + .lbl,.mw-side .mw-item + .lbl{margin-top:8px}
.mw-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:7px;font-size:var(--t-12)}
.mw-item svg.g{width:22px;height:22px}
.mw-item.on{background:var(--g-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.mw-item .lk{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--g-3);color:var(--text-3)}
.mw-item .lk .i{width:11px;height:11px}
.mw-item small{display:block;font-size:10.5px;color:var(--text-3)}
.mw-item.off{color:var(--text-3)}
.mw-main{padding:16px;display:flex;flex-direction:column;gap:12px}
.mw-banner{position:relative;height:150px;border-radius:10px;border:1px solid var(--line-2);background:#0D0D10;overflow:hidden;padding:16px;display:flex;flex-direction:column;justify-content:flex-end}
.mw-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 25%,#000 70%);mask-image:linear-gradient(90deg,transparent 25%,#000 70%)}
.mw-banner b{position:relative;font-size:var(--t-24);font-weight:600;letter-spacing:-.03em}
.mw-banner small{position:relative;font-size:var(--t-12);color:var(--text-2)}
.mw-act{display:flex;align-items:center;gap:12px}
.mw-act .mini-btn{height:34px;padding:0 16px;font-size:var(--t-13)}
.mw-act span{font-size:11.5px;color:var(--text-3)}
.mw-path{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;border-radius:7px;border:1px solid var(--line-1);background:var(--g-2);font:400 11px/1 var(--mono);color:var(--text-3);white-space:nowrap;overflow:hidden}
.mw-path .i{width:13px;height:13px}
.mw-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:4px}
.mw-cols h6{margin:0 0 6px;font-size:var(--t-12);font-weight:600;color:var(--text-1)}
.mw-cols p{font-size:11.5px;line-height:1.5;color:var(--text-3)}

/* FAQ */
.faq{display:grid;grid-template-columns:400px 1fr;gap:96px}
.faq-head .h2{font-size:clamp(30px,3.2vw,var(--t-40))}
.faq-head p{margin-top:16px;font-size:var(--t-15);color:var(--text-2);line-height:1.6}
.faq-list{border-top:1px solid var(--line-2)}
.faq-list details{border-bottom:1px solid var(--line-2)}
.faq-list summary{list-style:none;display:flex;align-items:center;gap:16px;padding:22px 0;cursor:pointer;font-size:var(--t-16);font-weight:500;letter-spacing:-.01em;transition:color var(--dur)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:#fff}
.faq-list summary .pm{margin-left:auto;width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:var(--r-sm);border:1px solid var(--line-2);color:var(--text-2);transition:color var(--dur),border-color var(--dur)}
.faq-list summary:hover .pm{border-color:var(--line-4)}
.faq-list summary .pm svg{transition:transform var(--dur) var(--ease)}
.faq-list details[open] summary .pm{color:var(--amber);border-color:rgba(240,168,60,.4)}
.faq-list details[open] summary .pm svg{transform:rotate(45deg)}
.faq-list details p{padding:0 64px 24px 0;margin-top:-6px;font-size:var(--t-15);color:var(--text-2);line-height:1.65}

/* Footer */
.ftr{margin-top:128px;border-top:1px solid var(--line-2)}
.ftr-top{display:grid;grid-template-columns:1fr 180px 180px 180px;gap:48px;padding:56px 0 48px}
.ftr-brand p{margin-top:16px;max-width:300px;font-size:var(--t-14);color:var(--text-3);line-height:1.6}
.ftr h5{margin:0 0 16px;font-size:var(--t-13);font-weight:500;color:var(--text-1)}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ftr li a{font-size:var(--t-14);color:var(--text-3);transition:color var(--dur)}
.ftr li a:hover{color:var(--text-1)}
.ftr-bot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;min-height:64px;padding:16px 0;border-top:1px solid var(--line-1);font-size:var(--t-13);color:var(--text-3)}
.ftr-bot .st{display:inline-flex;align-items:center;gap:10px;color:var(--text-2)}
.ftr-bot .legal{margin-left:auto}

/* Simple pages (download, error) */
.page{padding:72px 0 0}
.page-narrow{max-width:640px;margin:0 auto;text-align:center}
.page-narrow .h2{margin-top:16px}
.page-narrow p{margin-top:16px;color:var(--text-2);font-size:var(--t-16);line-height:1.6}
.page-narrow .cta{justify-content:center}
.err-code{font:500 var(--t-14)/1 var(--mono);color:var(--amber)}
.dl-steps{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.dl-steps li{padding:20px;border-radius:var(--r-lg);background:var(--g-2);border:1px solid var(--line-2);font-size:var(--t-14);color:var(--text-2);line-height:1.5}
.dl-steps li b{display:block;margin-bottom:10px;font:500 var(--t-12)/1 var(--mono);color:var(--amber)}

/* ================= Sign in / registration ================= */
.auth-stage{min-height:calc(100vh - 65px);display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:48px var(--pad);
  background-image:radial-gradient(1200px 600px at 50% 40%,rgba(255,255,255,.025),transparent 70%),linear-gradient(var(--line-1) 1px,transparent 1px),linear-gradient(90deg,var(--line-1) 1px,transparent 1px);
  background-size:auto,48px 48px,48px 48px;background-position:center;background-color:var(--g-0)}
.auth{display:flex;width:min(960px,100%);min-height:560px;overflow:hidden;border-radius:12px;background:var(--g-1);box-shadow:var(--sh-window)}
.brand{position:relative;width:400px;flex:none;overflow:hidden;background:#0C0C0F;border-right:1px solid var(--line-2)}
.brand > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 50%,rgba(0,0,0,.2) 75%,transparent);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 50%,rgba(0,0,0,.2) 75%,transparent)}
.brand::after{content:"";position:absolute;left:50%;top:44%;width:520px;height:420px;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(240,168,60,.08),transparent 60%);pointer-events:none}
.brand-copy{position:absolute;z-index:2;left:40px;right:40px;bottom:40px}
.brand-copy h2{font-size:28px;line-height:1.12;font-weight:600;letter-spacing:-.035em}
.brand-copy h2 span{color:var(--text-3)}
.brand-copy p{margin-top:14px;font-size:var(--t-14);color:var(--text-2);line-height:1.55}
.brand-prods{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.bp{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 6px;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--g-2);font-size:var(--t-13);font-weight:500}
.bp svg.g{width:22px;height:22px}
.bp.soon{color:var(--text-3);border-style:dashed;padding-left:12px;font-weight:400}
.form-side{position:relative;flex:1;display:grid;place-items:center;padding:56px 40px}
.auth-form{width:360px;max-width:100%;display:flex;flex-direction:column}
.auth-form h1{font-size:var(--t-32);line-height:1.1;font-weight:600;letter-spacing:-.035em}
.auth-form > p{margin-top:8px;font-size:var(--t-14);color:var(--text-2)}
.fields{display:flex;flex-direction:column;gap:18px;margin-top:32px}
.auth-form .error-msg{margin-top:16px}
.auth-form .btn-primary{margin-top:24px;width:100%}
.auth-form .alt{margin-top:20px;text-align:center;font-size:var(--t-14);color:var(--text-3)}
.auth-form .alt a{margin-left:4px}

/* ================= Account ================= */
.app{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--line-1);background:var(--g-1);padding:0 16px 16px}
.side > .logo{height:64px;padding:0 8px}
.snav{display:flex;flex-direction:column;gap:2px;margin-top:16px}
.snav-lbl{padding:16px 10px 8px;font:500 var(--t-11)/1 var(--mono);color:var(--text-3);letter-spacing:.02em}
.snav-lbl:first-child{padding-top:0}
.snav a{position:relative;display:flex;align-items:center;gap:12px;height:36px;padding:0 10px;border-radius:var(--r-md);font-size:var(--t-14);color:var(--text-2);white-space:nowrap;transition:background var(--dur),color var(--dur)}
.snav a .i{color:var(--text-3);transition:color var(--dur)}
.snav a:hover{background:var(--g-3);color:var(--text-1)}
.snav a:hover .i{color:var(--text-1)}
.snav a.on{background:var(--g-3);color:var(--text-1);box-shadow:inset 0 0 0 1px var(--line-2)}
.snav a.on .i{color:var(--amber)}
.snav a .count{margin-left:auto;font:500 var(--t-11)/1 var(--mono);color:var(--text-3)}
.side-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--r-lg);border:1px solid var(--line-2);background:var(--g-2)}
.side-foot .ava{width:32px;height:32px;font-size:var(--t-12)}
.me{min-width:0;flex:1}
.me b{display:block;font-size:var(--t-13);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me small{display:block;font-size:var(--t-12);color:var(--text-3)}
.main{min-width:0}
.topbar{position:sticky;top:0;z-index:10;height:64px;display:flex;align-items:center;gap:16px;padding:0 56px;background:var(--g-1);border-bottom:1px solid var(--line-1)}
.crumbs{display:flex;align-items:center;gap:8px;font-size:var(--t-14);color:var(--text-3)}
.crumbs .i{width:14px;height:14px;color:var(--text-4)}
.crumbs b{font-weight:500;color:var(--text-1)}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:16px}
.srv{display:inline-flex;align-items:center;gap:10px;font-size:var(--t-13);color:var(--text-2);white-space:nowrap}
.content{max-width:1120px;padding:48px 56px 96px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px 32px;margin-bottom:32px}
.page-head h1{font-size:var(--t-40);line-height:1.1;font-weight:600;letter-spacing:-.035em}
.page-head p{margin-top:10px;font-size:var(--t-15);color:var(--text-2);overflow-wrap:anywhere}
.page-head p .mono{color:var(--text-1)}
.ph-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:var(--t-13);color:var(--text-3)}
.ph-meta span{display:inline-flex;align-items:center;gap:8px}
.flash{margin-bottom:24px}
.sec-t{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:48px 0 16px}
.sec-t h2{font-size:var(--t-20);font-weight:600;letter-spacing:-.02em}
.sec-t span{font-size:var(--t-14);color:var(--text-3)}
.card-h{display:flex;align-items:flex-start;gap:16px;padding:24px 24px 0}
.card-h h3{font-size:var(--t-16);font-weight:600;letter-spacing:-.01em}
.card-h p{margin-top:4px;font-size:var(--t-13);color:var(--text-3)}
.card-h .r{margin-left:auto}
.keybar{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr minmax(0,480px);gap:24px 32px;align-items:center;padding:28px}
.keybar::before{content:"";position:absolute;left:-80px;top:-140px;width:520px;height:360px;background:radial-gradient(ellipse at center,rgba(240,168,60,.07),transparent 65%);pointer-events:none}
.keybar-l{position:relative;display:flex;gap:20px;align-items:flex-start}
.ktile{width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:12px;border:1px solid rgba(240,168,60,.28);background:linear-gradient(180deg,rgba(240,168,60,.12),rgba(240,168,60,.03));color:var(--amber)}
.ktile .i{width:22px;height:22px}
.keybar h3{font-size:var(--t-20);font-weight:600;letter-spacing:-.02em}
.keybar p{margin-top:6px;font-size:var(--t-14);color:var(--text-2);line-height:1.5;max-width:420px}
.keyform{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0}
.keyform-row{display:flex;gap:8px}
.keyform .input{flex:1;min-width:0}
.prods{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.prod{display:flex;flex-direction:column;transition:border-color var(--dur)}
.prod:hover{border-color:var(--line-3)}
.prod-h{display:flex;align-items:center;gap:16px;padding:24px}
.prod-h .glyph{width:52px;height:52px}
.prod-h h3{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:var(--t-20);font-weight:600;letter-spacing:-.02em}
.prod-h p{margin-top:2px;font-size:var(--t-14);color:var(--text-3)}
.prod-stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-2)}
.ps{padding:20px 24px;display:flex;flex-direction:column;gap:6px}
.ps + .ps{border-left:1px solid var(--line-2)}
.ps-l{font-size:var(--t-13);color:var(--text-3)}
.ps b{font:500 var(--t-24)/1.2 var(--font);letter-spacing:-.02em}
.ps small{font-size:var(--t-12);color:var(--text-3)}
.prod-f{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:auto;padding:14px 16px 14px 24px;border-top:1px solid var(--line-2);font-size:var(--t-13);color:var(--text-3)}
.prod-f .btns{margin-left:auto;display:flex;gap:8px}
.prod.is-locked .prod-h h3{color:var(--text-2)}
.locked-body{flex:1;margin:0 24px 24px;border-radius:var(--r-lg);border:1px dashed var(--line-3);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;padding:24px;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 1px,transparent 1px 9px)}
.locked-body p{font-size:var(--t-14);color:var(--text-2);line-height:1.5;max-width:340px}
.acols{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;margin-top:24px;align-items:stretch}
.acols-b{grid-template-columns:1fr 1fr}
.dev-list{margin:20px 0 0;padding:0;list-style:none;border-top:1px solid var(--line-2)}
.dev{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 24px;border-bottom:1px solid var(--line-1)}
.dev-ico{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:var(--g-3);border:1px solid var(--line-2);color:var(--text-2)}
.dev-ico .i{width:18px;height:18px}
.dev-n{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font:500 var(--t-14)/1.3 var(--mono);letter-spacing:-.01em;overflow-wrap:anywhere}
.dev-s{margin-top:4px;font-size:var(--t-13);color:var(--text-3)}
.dev-t{font-size:var(--t-13);color:var(--text-2);text-align:right}
.dev-t small{display:block;font-size:var(--t-12);color:var(--text-3)}
.note{display:flex;align-items:center;gap:10px;padding:14px 24px 16px;font-size:var(--t-13);color:var(--text-3)}
.empty{padding:20px 24px;font-size:var(--t-14);color:var(--text-3)}
.lnch{padding:24px;display:flex;flex-direction:column;gap:20px}
.lnch-h{display:flex;gap:16px;align-items:center}
.lnch-h svg.l{width:52px;height:52px;flex:none}
.lnch-h b{display:block;font:500 var(--t-15)/1.3 var(--mono);overflow-wrap:anywhere}
.lnch-h small{display:block;margin-top:2px;font-size:var(--t-13);color:var(--text-3)}
.lnch ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.lnch li{display:flex;gap:10px;align-items:center;font-size:var(--t-14);color:var(--text-2)}
.lnch li .i{color:var(--ok)}
.lnch .push{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.sec-body{padding:20px 24px 24px;font-size:var(--t-14);color:var(--text-2);line-height:1.6}
.danger-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;padding:16px 24px;border-top:1px solid var(--line-2)}
.danger-row b{display:block;font-size:var(--t-14);font-weight:500}
.danger-row small{display:block;margin-top:2px;font-size:var(--t-13);color:var(--text-3)}
.danger-row form,.danger-row > .btn{margin-left:auto}
.act{list-style:none;margin:20px 0 0;padding:0 24px 12px}
.act li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line-1)}
.act li:first-child{border-top:0}
.act .ai{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-md);background:var(--g-3);border:1px solid var(--line-2);color:var(--text-2)}
.act .ai.amber{color:var(--amber)}
.act .ai.err{color:var(--err)}
.act b{display:block;font-size:var(--t-14);font-weight:500}
.act small{display:block;margin-top:2px;font-size:var(--t-12);color:var(--text-3)}
.act .ip{font:400 var(--t-12)/1 var(--mono);color:var(--text-3)}

/* ================= Admin: same tokens, dense ================= */
.adm-hdr{position:sticky;top:0;z-index:20;background:var(--g-1);border-bottom:1px solid var(--line-1)}
.adm-hdr-in{display:flex;align-items:center;flex-wrap:wrap;gap:8px 24px;min-height:56px;padding:8px var(--pad)}
.adm-hdr .logo svg{width:24px;height:24px}
.adm-tag{font:500 var(--t-11)/1 var(--mono);color:var(--amber);border:1px solid rgba(240,168,60,.3);border-radius:var(--r-xs);padding:3px 6px}
.adm-nav{display:flex;flex-wrap:wrap;gap:2px}
.adm-nav a{height:30px;display:inline-flex;align-items:center;padding:0 10px;border-radius:var(--r-sm);font-size:var(--t-13);color:var(--text-2)}
.adm-nav a:hover{background:var(--g-3);color:var(--text-1)}
.adm-nav a.on{background:var(--g-3);color:var(--text-1);box-shadow:inset 0 0 0 1px var(--line-2)}
.adm-user{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:var(--t-13);color:var(--text-3)}
.adm{padding:28px var(--pad) 64px;max-width:1440px;margin:0 auto}
.adm h1{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:var(--t-24);font-weight:600;letter-spacing:-.02em;margin-bottom:16px}
.adm h2{font-size:var(--t-16);font-weight:600;letter-spacing:-.01em;margin-bottom:12px}
.adm .sub{margin:-8px 0 16px;font-size:var(--t-13);color:var(--text-3)}
.adm-card{background:var(--g-2);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:16px;margin:16px 0}
.adm-card > :last-child{margin-bottom:0}
.adm-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:24px}
.adm-stat{background:var(--g-2);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:14px 16px}
.adm-stat b{display:block;font:500 var(--t-24)/1.2 var(--mono)}
.adm-stat span{font-size:var(--t-12);color:var(--text-3)}
.adm-stat.warn b{color:var(--amber)}
.frow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:8px 0}
.frow .field{min-width:0}
.frow .grow{flex:1;min-width:200px}
.frow > .input{width:auto;min-width:160px}
.frow > .input.grow{min-width:200px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.fstack{display:flex;flex-direction:column;gap:14px}
.adm-login{max-width:400px;margin:64px auto}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--g-2);margin:8px 0 16px}
.tbl{width:100%;border-collapse:collapse;font-size:var(--t-13)}
.tbl th{position:sticky;top:0;text-align:left;font-weight:500;font-size:var(--t-12);color:var(--text-3);background:var(--g-3);padding:8px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.tbl td{padding:7px 10px;border-bottom:1px solid var(--line-1);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:rgba(255,255,255,.015)}
.tbl a{color:var(--amber)}
.tbl a:hover{text-decoration:underline}
.tbl .mono{font-size:var(--t-12);color:var(--text-2)}
.tbl td.wrap-any{overflow-wrap:anywhere;max-width:420px}
.tbl tr.dim td{color:var(--text-4)}
.tbl tr.dim td a{color:var(--text-3)}
.tbl tr.bad td{color:var(--err)}
.acts{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.keys-out{width:100%;font:500 var(--t-15)/1.6 var(--mono);letter-spacing:.04em}

/* ================= Screens of the product (index #inside) ================= */
.shots{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:start}
.shots-r{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.shots-tabs{display:flex;flex-direction:column;gap:6px}
.shots-tab{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-lg);border:1px solid transparent;color:var(--text-2);cursor:pointer;transition:background var(--dur),border-color var(--dur),color var(--dur)}
.shots-tab:hover{background:var(--g-2);color:var(--text-1)}
.shots-tab .i{flex:none;color:var(--text-3)}
.shots-tab span{display:flex;flex-direction:column;gap:2px;min-width:0}
.shots-tab b{font-weight:500;color:inherit}
.shots-tab small{font-size:var(--t-12);color:var(--text-3)}
.shots-more{display:inline-flex;align-items:center;gap:6px;margin:12px 14px 0;font-size:var(--t-14);color:var(--amber)}
.shots-more:hover{color:var(--amber-hi)}
.shots-stage{min-width:0}
.shot{display:none;margin:0}
.shot img{display:block;width:100%;height:auto;border-radius:var(--r-xl);border:1px solid var(--line-3);box-shadow:0 24px 64px rgba(0,0,0,.45)}
.shot figcaption{display:flex;flex-direction:column;gap:4px;margin-top:16px;font-size:var(--t-15);line-height:1.6;color:var(--text-2);max-width:760px}
.shot figcaption b{font-weight:600;color:var(--text-1)}
#shot-boy:checked ~ .shots-stage .shot-boy,
#shot-avtosbor:checked ~ .shots-stage .shot-avtosbor,
#shot-esp:checked ~ .shots-stage .shot-esp,
#shot-prokachka:checked ~ .shots-stage .shot-prokachka,
#shot-nastroyki:checked ~ .shots-stage .shot-nastroyki{display:block}
#shot-boy:checked ~ .shots-tabs [for=shot-boy],
#shot-avtosbor:checked ~ .shots-tabs [for=shot-avtosbor],
#shot-esp:checked ~ .shots-tabs [for=shot-esp],
#shot-prokachka:checked ~ .shots-tabs [for=shot-prokachka],
#shot-nastroyki:checked ~ .shots-tabs [for=shot-nastroyki]{background:var(--amber-a08);border-color:rgba(240,168,60,.28);color:var(--amber-hi)}
#shot-boy:checked ~ .shots-tabs [for=shot-boy] .i,
#shot-avtosbor:checked ~ .shots-tabs [for=shot-avtosbor] .i,
#shot-esp:checked ~ .shots-tabs [for=shot-esp] .i,
#shot-prokachka:checked ~ .shots-tabs [for=shot-prokachka] .i,
#shot-nastroyki:checked ~ .shots-tabs [for=shot-nastroyki] .i{color:var(--amber)}
#shot-boy:focus-visible ~ .shots-tabs [for=shot-boy],
#shot-avtosbor:focus-visible ~ .shots-tabs [for=shot-avtosbor],
#shot-esp:focus-visible ~ .shots-tabs [for=shot-esp],
#shot-prokachka:focus-visible ~ .shots-tabs [for=shot-prokachka],
#shot-nastroyki:focus-visible ~ .shots-tabs [for=shot-nastroyki]{outline:2px solid var(--amber);outline-offset:2px}
@media (max-width:900px){
  .shots{grid-template-columns:minmax(0,1fr);gap:16px}
  .shots-tabs{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:4px;scrollbar-width:none}
  .shots-tab{flex:none;padding:8px 12px;border-color:var(--line-2)}
  .shots-tab small{display:none}
  .shots-more{display:none}
}

/* ================= Instructions (/docs) ================= */
.docs{display:grid;grid-template-columns:260px minmax(0,1fr) 220px;gap:48px;max-width:1360px;margin:0 auto;padding:32px var(--pad) 0;align-items:start}
.docs-nosidetoc{grid-template-columns:260px minmax(0,1fr)}
.docs-side{position:sticky;top:80px;max-height:calc(100vh - 96px);overflow:auto;padding:16px;border-radius:var(--r-xl);background:var(--g-2);border:1px solid var(--line-2)}
.docs-menu{display:none}
.docs-search{display:flex;align-items:center;gap:8px;height:38px;padding:0 8px 0 12px;border:1px solid var(--line-3);border-radius:var(--r-md);background:var(--g-1);color:var(--text-3)}
.docs-search:focus-within{border-color:rgba(240,168,60,.75);box-shadow:0 0 0 3px var(--amber-a16)}
.docs-search-in{flex:1;min-width:0;height:100%;background:transparent;border:0;outline:none;color:var(--text-1);font:400 var(--t-14)/1 var(--font)}
.docs-search-in::placeholder{color:var(--text-3)}
.docs-search-in::-webkit-search-cancel-button{display:none}
.docs-keys{display:flex;gap:3px}
kbd{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:var(--r-xs);border:1px solid var(--line-3);border-bottom-width:2px;background:var(--g-3);font:500 11px/1 var(--mono);color:var(--text-2);vertical-align:1px}
.docs-nav{margin-top:20px;display:flex;flex-direction:column;gap:18px}
.docs-sec{display:flex;flex-direction:column;gap:2px}
.docs-sec-t{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;padding:0 10px 6px;font:600 var(--t-12)/1.3 var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--text-1)}
.docs-sec-t small{font-weight:500;text-transform:none;letter-spacing:0;color:var(--text-3)}
.docs-link{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-md);font-size:var(--t-14);line-height:1.35;color:var(--text-2);transition:background var(--dur),color var(--dur)}
.docs-link:hover{background:var(--g-3);color:var(--text-1)}
.docs-link .i{color:var(--text-3)}
.docs-link.on{background:var(--amber-a08);color:var(--amber-hi);box-shadow:inset 0 0 0 1px rgba(240,168,60,.22)}
.docs-link.on .i{color:var(--amber)}
.docs-main{min-width:0;max-width:800px}
.docs-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.docs-crumbs{display:flex;align-items:center;gap:6px;font:600 var(--t-12)/1 var(--font);letter-spacing:.05em;text-transform:uppercase}
.docs-crumbs a{color:var(--amber)}
.docs-crumbs a:hover{color:var(--amber-hi)}
.docs-crumbs span{color:var(--text-3)}
.docs-crumbs .i{color:var(--text-4)}
.docs-actions{display:flex;gap:6px}
.docs-h1{display:flex;align-items:center;gap:14px;margin-top:16px;font-size:clamp(28px,3.4vw,40px);line-height:1.12;font-weight:600;letter-spacing:-.03em}
.docs-h1-ico{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-3);color:var(--text-2)}
.docs-h1-ico .i{width:20px;height:20px}
.docs-lead{margin-top:12px;font-size:var(--t-16);color:var(--text-2);line-height:1.6}
.docs-body{margin-top:24px;font-size:var(--t-15);line-height:1.7;color:var(--text-1);overflow-wrap:break-word}
.docs-body h2{margin:52px 0 14px;padding-top:24px;border-top:1px solid var(--line-2);font-size:var(--t-24);line-height:1.25;font-weight:600;letter-spacing:-.02em;scroll-margin-top:84px}
.docs-body h2:first-child{margin-top:8px;padding-top:0;border-top:0}
.docs-body h3{margin:32px 0 10px;font-size:var(--t-18);line-height:1.3;font-weight:600;letter-spacing:-.01em;scroll-margin-top:84px}
.docs-body h4{margin:24px 0 8px;font-size:var(--t-16);font-weight:600}
.docs-body p{margin:12px 0}
.docs-body ul,.docs-body ol{margin:12px 0;padding-left:24px}
.docs-body li{margin:6px 0;padding-left:2px}
.docs-body li::marker{color:var(--text-3)}
.docs-body ol > li::marker{font-family:var(--mono);font-size:.9em}
.docs-body a{color:var(--amber-hi);text-decoration:underline;text-decoration-color:rgba(240,168,60,.4);text-underline-offset:3px}
.docs-body a:hover{text-decoration-color:var(--amber-hi)}
.docs-body a.ext::after{content:"\2197";font-size:.8em;margin-left:2px;text-decoration:none;display:inline-block}
.docs-body strong{font-weight:600;color:#fff}
.docs-body code{font-family:var(--mono);font-size:.86em;padding:2px 6px;border-radius:var(--r-xs);background:var(--g-3);border:1px solid var(--line-2);color:var(--text-1)}
.docs-body pre{position:relative;margin:16px 0;padding:14px 16px;border-radius:var(--r-lg);background:var(--g-2);border:1px solid var(--line-2);overflow:auto}
.docs-body pre code{padding:0;border:0;background:none;font-size:var(--t-13);line-height:1.65;white-space:pre}
.docs-copy{position:absolute;top:8px;right:8px;opacity:.75}
.docs-body pre:hover .docs-copy{opacity:1}
.docs-table{margin:18px 0;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow-x:auto}
.docs-body table{width:100%;border-collapse:collapse;font-size:var(--t-14);line-height:1.55}
.docs-body th,.docs-body td{padding:10px 14px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top}
.docs-body th{font-weight:500;color:var(--text-2);background:var(--g-2);white-space:nowrap}
.docs-body tr:last-child td{border-bottom:0}
.docs-body td code{white-space:nowrap}
.docs-body img{display:block;max-width:100%;height:auto;margin:18px 0;border-radius:var(--r-lg);border:1px solid var(--line-2)}
.docs-body hr{border:0;border-top:1px solid var(--line-2);margin:32px 0}
.docs-body blockquote{margin:16px 0;padding:2px 16px;border-left:2px solid var(--line-4);color:var(--text-2)}
.callout{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:12px;margin:18px 0;padding:14px 16px;border-radius:var(--r-lg);border:1px solid var(--line-3);background:var(--g-2)}
.callout > .i{grid-column:1;margin-top:4px;color:var(--text-2)}
.callout > :not(.i){grid-column:2}
.callout > p{margin:0}
.callout > p + p{margin-top:8px}
.callout-tip{border-color:rgba(76,203,138,.24);background:var(--ok-a12)}
.callout-tip > .i{color:var(--ok)}
.callout-warning{border-color:rgba(240,168,60,.32);background:var(--amber-a08)}
.callout-warning > .i{color:var(--amber)}
.callout-danger{border-color:rgba(240,106,114,.32);background:var(--err-a12)}
.callout-danger > .i{color:var(--err)}
.docs-pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px}
.docs-pg{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:var(--r-lg);border:1px solid var(--line-2);background:var(--g-2);color:var(--text-1);font-weight:500;transition:border-color var(--dur)}
.docs-pg:hover{border-color:var(--line-4)}
.docs-pg > span{display:flex;flex-direction:column;gap:2px}
.docs-pg small{font-size:var(--t-12);font-weight:400;color:var(--text-3)}
.docs-pg .i{color:var(--text-3)}
.docs-pg-next{grid-column:2;justify-content:flex-end;text-align:right}
.docs-flip{transform:rotate(180deg)}
.docs-updated{margin-top:20px;font-size:var(--t-13);color:var(--text-3)}
.docs-toc{position:sticky;top:80px;max-height:calc(100vh - 96px);overflow:auto;font-size:var(--t-13)}
.docs-toc-t{display:flex;align-items:center;gap:8px;margin-bottom:12px;font:600 var(--t-12)/1 var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--text-1)}
.docs-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.docs-toc a{display:block;padding:6px 10px;border-radius:var(--r-md);color:var(--text-2);line-height:1.4;transition:background var(--dur),color var(--dur)}
.docs-toc li.lv3 a{padding-left:22px;color:var(--text-3)}
.docs-toc a:hover{color:var(--text-1);background:var(--g-3)}
.docs-toc a.on{color:var(--amber-hi);background:var(--amber-a08)}
.docs-results{list-style:none;padding:0;margin:24px 0;display:flex;flex-direction:column;gap:10px}
.docs-results a{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:var(--r-lg);border:1px solid var(--line-2);background:var(--g-2);transition:border-color var(--dur)}
.docs-results a:hover{border-color:var(--line-4)}
.docs-results b{font-weight:600}
.docs-res-path{font-size:var(--t-12);color:var(--amber)}
.docs-res-snip{font-size:var(--t-14);color:var(--text-2);line-height:1.55}
.docs-res-snip mark{background:var(--amber-a16);color:var(--amber-hi);border-radius:2px}
@media (max-width:1200px){
  .docs{grid-template-columns:240px minmax(0,1fr);gap:40px}
  .docs-toc{display:none}
}
@media (max-width:900px){
  .docs,.docs-nosidetoc{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:16px}
  .docs-side{position:static;max-height:none;padding:0;border:0;background:none;overflow:visible}
  .docs-side-in{display:none}
  .docs-menu{display:block;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--g-2)}
  .docs-menu > summary{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 14px;cursor:pointer;font-weight:500}
  .docs-menu > summary::-webkit-details-marker{display:none}
  .docs-menu-cur{flex-basis:100%;font-size:var(--t-12);font-weight:400;color:var(--text-3)}
  .docs-menu[open] > summary{border-bottom:1px solid var(--line-2)}
  .docs-menu > .docs-search,.docs-menu > .docs-nav{margin:12px 14px}
  .docs-menu > .docs-nav{margin-bottom:16px}
  .docs-keys{display:none}
  .docs-pager{grid-template-columns:1fr}
  .docs-pg-next{grid-column:auto}
  .docs-body h2{font-size:var(--t-20)}
}

/* ================= Responsive ================= */
@media (max-width:1100px){
  .hero-top{grid-template-columns:1fr;gap:28px;align-items:start}
  .sec-head{grid-template-columns:1fr;gap:16px}
  .hud-ctl,.tag-fight{display:none}
  .faq{grid-template-columns:1fr;gap:32px}
  .dl{grid-template-columns:1fr}
  .dl-shot{height:420px}
  .mw{left:56px;top:0}
  .topbar{padding:0 32px}
  .content{padding:40px 32px 80px}
  .keybar{grid-template-columns:1fr}
  .acols,.acols-b{grid-template-columns:1fr}
}
@media (max-width:900px){
  .bento{grid-template-columns:1fr 1fr}
  .pc-feature{grid-column:span 2;grid-row:auto}
  .steps{grid-template-columns:1fr}
  .step-vis{height:auto;min-height:150px}
  .ftr-top{grid-template-columns:1fr 1fr;gap:32px}
  .ftr-brand{grid-column:span 2}
  .dl-steps{grid-template-columns:1fr 1fr}
  .prods{grid-template-columns:1fr}
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;padding:0 var(--pad) 12px;border-right:0;border-bottom:1px solid var(--line-1)}
  .snav{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;margin-top:0;gap:4px;scrollbar-width:none}
  .snav-lbl{display:none}
  .side-foot{display:none}
  .topbar{position:static}
  .brand{display:none}
}
@media (max-width:720px){
  :root{--pad:16px}
  .hdr-in{gap:16px}
  .nav{display:none}
  .hero{padding-top:48px}
  .pill{margin-bottom:24px}
  .lead{font-size:var(--t-16)}
  .cta .btn-lg{flex:1}
  .hv{margin-top:40px;border-radius:var(--r-lg)}
  .hv-tabs,.hv-bar-r,.hud,.tag,.legend,.scale,.coord,.ruler-x,.ruler-y{display:none}
  .facts{grid-template-columns:1fr 1fr;margin-top:48px}
  .fact{padding:20px 12px 20px 0}
  .fact + .fact{padding-left:0;border-left:0}
  .fact:nth-child(even){padding-left:16px;border-left:1px solid var(--line-2)}
  .fact:nth-child(n+3){border-top:1px solid var(--line-2)}
  .sec{padding-top:80px}
  .sec-head{margin-bottom:28px}
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .pc-plain,.pc-soon{min-height:220px}
  .pc-feature{grid-column:auto;padding:24px 24px 0}
  .pc-art{width:260px;height:260px;opacity:.6}
  .pc-name{margin-top:24px}
  .pc-tagline{font-size:var(--t-18)}
  .pc-feats{grid-template-columns:1fr;gap:16px}
  .pc-foot{margin:0 -24px;padding:12px 24px}
  .pc-foot .btn{margin-left:0}
  .dl-copy{padding:28px 24px}
  .dl-shot{display:none}
  .faq-list details p{padding-right:0}
  .ftr{margin-top:80px}
  .ftr-top{grid-template-columns:1fr 1fr}
  .ftr-bot .legal{margin-left:0}
  .dl-steps{grid-template-columns:1fr}
  .topbar{padding:0 var(--pad);height:56px}
  .crumbs{display:none}
  .content{padding:28px var(--pad) 64px}
  .page-head h1{font-size:var(--t-32)}
  .keybar{padding:20px}
  .keyform-row{flex-direction:column}
  .keyform .input{flex:none;width:100%}
  .prod-h{padding:20px}
  .ps{padding:16px 20px}
  .dev{grid-template-columns:40px minmax(0,1fr);padding:14px 20px}
  .dev-t{grid-column:2;text-align:left}
  .act{padding:0 20px 8px}
  .act .ip{display:none}
  .act li{grid-template-columns:32px minmax(0,1fr)}
  .auth-stage{padding:24px var(--pad);place-items:start center}
  .auth{min-height:0}
  .form-side{padding:32px 20px}
  .adm-user{margin-left:0}
}