/* Keyware: dark minimal. Shared by / and /guide */
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --bg:#0b0b0c;--bg-2:#101012;--panel:#131315;--panel-2:#18181b;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.14);
  --fg:#f5f5f6;--fg-2:#b4b4bb;--fg-3:#7c7c85;--accent:#8b9cff;--accent-2:#c4b5fd;--glow:rgba(124,140,255,.20);
  --ok:#22c55e;--warn:#f87171;--radius:16px;--radius-sm:10px;--max:1160px;
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.1;letter-spacing:-.025em;margin:0;font-weight:650}
p{margin:0}
code{font-family:var(--mono);font-size:.88em;background:rgba(255,255,255,.06);border:1px solid var(--line);padding:.08em .4em;border-radius:6px;color:#e6e6ea;word-break:break-word}
strong{color:var(--fg);font-weight:600}
::selection{background:rgba(139,156,255,.35)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
.container--narrow{max-width:820px}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--fg);color:var(--bg);padding:10px 14px;border-radius:8px;font-weight:600;text-decoration:none;transition:top .2s}
.skip-link:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(11,11,12,.72);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.is-scrolled{border-bottom-color:var(--line)}
.nav__inner{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:650;letter-spacing:-.01em;font-size:17px}
.brand img{border-radius:7px}
.brand__tag{font-size:12px;font-weight:500;color:var(--fg-3);border:1px solid var(--line-2);border-radius:999px;padding:1px 8px;margin-left:2px}
.nav__links{display:flex;gap:4px;margin-left:auto}
.nav__links a{color:var(--fg-2);text-decoration:none;font-size:14px;padding:8px 12px;border-radius:8px;transition:color .2s,background .2s}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--fg);background:rgba(255,255,255,.05)}
@media (max-width:760px){.nav__links{display:none}.nav__inner>.btn{margin-left:auto}.nav__links--keep{display:flex;margin-left:auto}.nav__links--keep a{padding:8px 8px}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-weight:600;font-size:15px;text-decoration:none;border-radius:12px;padding:12px 18px;border:1px solid transparent;cursor:pointer;transition:transform .2s var(--ease),background .2s,border-color .2s,box-shadow .3s;white-space:nowrap}
.btn:active{transform:translateY(1px) scale(.99)}
.btn--sm{font-size:13.5px;padding:7px 13px;border-radius:9px}
.btn--lg{font-size:16px;padding:15px 24px;border-radius:14px}
.btn--primary{background:#fff;color:#09090b;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 10px 40px -10px rgba(139,156,255,.55),inset 0 -2px 0 rgba(0,0,0,.08)}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,255,255,.2),0 16px 50px -10px rgba(139,156,255,.75)}
.btn--light{background:#f4f4f5;color:#09090b}
.btn--light:hover{background:#fff}
.btn--ghost{background:rgba(255,255,255,.04);color:var(--fg);border-color:var(--line-2)}
.btn--ghost:hover{background:rgba(255,255,255,.08)}
.win{width:18px;height:18px;fill:currentColor}

/* Keycaps */
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:2.1em;height:2.1em;padding:0 .6em;font-family:var(--font);font-size:14px;font-weight:550;color:#ededf0;background:linear-gradient(#232327,#18181b);border:1px solid rgba(255,255,255,.12);border-bottom-color:rgba(0,0,0,.6);border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 0 #050506,0 3px 8px rgba(0,0,0,.35);line-height:1;white-space:nowrap;vertical-align:middle}
.kbd--sm{font-size:12px;height:1.9em;min-width:1.9em;padding:0 .5em;border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1.5px 0 #050506}
.kbd--hot{color:#fff;border-color:rgba(139,156,255,.6);background:linear-gradient(#2a2d44,#1b1d2c);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 0 #050506,0 0 24px rgba(139,156,255,.35)}

/* Reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* Hero */
.hero{position:relative;padding:88px 0 40px;text-align:center;overflow:hidden}
.hero__glow{position:absolute;inset:-200px 0 auto;height:820px;background:radial-gradient(600px 340px at 50% 38%,rgba(124,140,255,.22),transparent 70%),radial-gradient(400px 240px at 62% 30%,rgba(196,181,253,.10),transparent 70%);pointer-events:none;animation:breathe 9s ease-in-out infinite}
.hero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 30%,transparent 75%);pointer-events:none}
@keyframes breathe{50%{opacity:.75;transform:scale(1.04)}}
.hero__inner{position:relative}
.pill{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;color:var(--fg-2);text-decoration:none;border:1px solid var(--line-2);background:rgba(255,255,255,.03);padding:6px 14px 6px 10px;border-radius:999px;transition:border-color .2s,color .2s}
.pill:hover{color:var(--fg);border-color:rgba(255,255,255,.25)}
.pill__dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.hero__title{font-size:clamp(46px,8.4vw,96px);font-weight:700;letter-spacing:-.045em;line-height:1;margin:26px auto 22px;background:linear-gradient(180deg,#fff 30%,#a1a1aa);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.hero__sub{max-width:640px;margin:0 auto;color:var(--fg-2);font-size:clamp(16px,2vw,19px)}
.hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.hero__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;margin-top:18px;color:var(--fg-3);font-size:13.5px}
.hero__meta .sep{margin:0 10px;opacity:.6}
.hero__note{max-width:560px;margin:14px auto 0;color:var(--fg-3);font-size:13px;line-height:1.55}
.hero__note a{color:var(--fg-2)}
.hero__shot{position:relative;margin:64px auto 0;max-width:1040px}
.hero__shot::before{content:"";position:absolute;inset:8% 6% -4%;background:radial-gradient(closest-side,rgba(124,140,255,.25),transparent);filter:blur(40px);z-index:-1}
.keystrip{position:absolute;z-index:2;top:-22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;background:rgba(19,19,21,.85);backdrop-filter:blur(10px);border:1px solid var(--line-2);border-radius:14px;padding:8px 12px;box-shadow:0 20px 50px rgba(0,0,0,.5);white-space:nowrap}
.keystrip .plus,.keystrip .arrow{color:var(--fg-3);font-size:14px}
.keystrip .arrow{margin:0 4px}
.chip{font-size:13px;font-weight:550;background:rgba(139,156,255,.14);color:#dfe3ff;border:1px solid rgba(139,156,255,.35);padding:5px 10px;border-radius:8px}
.keystrip .kbd--hot{animation:press 2.6s var(--ease) infinite}
@keyframes press{0%,60%,100%{transform:none}66%{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 #050506,0 0 34px rgba(139,156,255,.7)}}
.frame{margin:0;border-radius:18px;padding:8px;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.02));border:1px solid var(--line);box-shadow:0 40px 120px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.6)}
.frame img{border-radius:12px;width:100%}
.frame figcaption{color:var(--fg-3);font-size:13px;text-align:center;padding:10px 8px 4px}

/* Marquee */
.marquee{border-block:1px solid var(--line);background:var(--bg-2);overflow:hidden;margin-top:72px;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee__track{display:flex;width:max-content;animation:marq 38s linear infinite}
.marquee ul{display:flex;gap:44px;list-style:none;margin:0;padding:22px 22px}
.marquee li{display:flex;align-items:center;gap:6px;color:var(--fg-3);font-size:14px}
.marquee em{font-style:normal;margin-left:8px;color:var(--fg-2)}
@keyframes marq{to{transform:translateX(-50%)}}

/* Sections */
.section{padding:120px 0;position:relative}
.section--tight{padding:72px 0}
.section__head{max-width:720px;margin:0 auto 56px;text-align:center}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.section h2{font-size:clamp(32px,4.6vw,54px);font-weight:680;letter-spacing:-.035em}
.lead{color:var(--fg-2);font-size:clamp(16px,1.8vw,18px);margin-top:18px}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{position:relative;background:linear-gradient(180deg,var(--panel),#0f0f11);border:1px solid var(--line);border-radius:var(--radius);padding:26px;overflow:hidden;transition:border-color .3s,transform .4s var(--ease)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(139,156,255,.09),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover{border-color:var(--line-2)}
.card:hover::after{opacity:1}
.card--wide{grid-column:span 2}
.card h3{font-size:18px;font-weight:620;letter-spacing:-.015em;margin:18px 0 8px}
.card p{color:var(--fg-2);font-size:15px}
.card__icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid var(--line-2)}
.card__icon svg{width:20px;height:20px;fill:none;stroke:#e4e4e7;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.chordviz{display:flex;gap:10px;margin-top:22px}
.chordviz .kbd{font-size:15px;height:46px;min-width:46px;padding:0 14px;animation:chord 3.4s var(--ease) infinite}
.chordviz .kbd:nth-child(2){animation-delay:.12s}.chordviz .kbd:nth-child(3){animation-delay:.24s}.chordviz .kbd:nth-child(4){animation-delay:.36s}
@keyframes chord{0%,55%,100%{transform:none}62%,80%{transform:translateY(2px);border-color:rgba(139,156,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 #050506,0 0 20px rgba(139,156,255,.35)}}
.holdbar{margin-top:22px;height:6px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.holdbar span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#6c7bff,#c4b5fd);animation:hold 3.2s var(--ease) infinite}
@keyframes hold{0%{width:0}70%,85%{width:100%}100%{width:0}}
.macro{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:6px;font-size:13px;color:var(--fg-2)}
.macro li{display:flex;gap:10px;padding:7px 10px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.macro b{font-weight:600;color:var(--fg);min-width:38px}
.cps{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:13px}
.cps__dot{width:10px;height:10px;border-radius:50%;background:var(--accent);animation:blink .1s steps(2) infinite}
.cps__val{font-weight:600}
.cps__mode{margin-left:auto;color:var(--fg-3);border:1px solid var(--line-2);padding:2px 8px;border-radius:99px}
@keyframes blink{50%{opacity:.25}}
.card--light{background:radial-gradient(500px 200px at 90% 0%,rgba(139,156,255,.14),transparent 70%),linear-gradient(180deg,var(--panel),#0f0f11)}
.ticks{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:18px 0 0}
.ticks li{font-size:13px;color:var(--fg);padding:5px 10px 5px 26px;border:1px solid var(--line-2);border-radius:99px;position:relative}
.ticks li::before{content:"";position:absolute;left:10px;top:50%;width:8px;height:4px;border-left:1.6px solid var(--ok);border-bottom:1.6px solid var(--ok);transform:translateY(-70%) rotate(-45deg)}
@media (max-width:960px){.bento{grid-template-columns:1fr 1fr}.card--wide{grid-column:span 2}}
@media (max-width:620px){.bento{grid-template-columns:1fr}.card--wide{grid-column:auto}.chordviz .kbd{height:40px;min-width:40px;padding:0 10px;font-size:13px}}

/* AI section */
.section--ai{overflow:hidden;border-block:1px solid var(--line);background:linear-gradient(180deg,#0d0d0f,var(--bg))}
.ai__glow{position:absolute;right:-10%;top:10%;width:720px;height:520px;background:radial-gradient(closest-side,var(--glow),transparent);filter:blur(30px);pointer-events:none}
.ai{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center;position:relative}
.ai__copy h2{font-size:clamp(32px,4.4vw,52px)}
.steps{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px}
.steps li{display:flex;gap:14px;align-items:flex-start;color:var(--fg-2)}
.steps span{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:13px;font-weight:650;color:var(--fg);background:rgba(255,255,255,.06);border:1px solid var(--line-2)}
.fine{margin-top:22px;color:var(--fg-3);font-size:13.5px}
.binder{background:linear-gradient(180deg,#151517,#111113);border:1px solid var(--line-2);border-radius:20px;padding:26px;box-shadow:0 40px 100px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.5),0 0 80px -20px rgba(139,156,255,.25)}
.binder__top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.binder__kicker{font-size:11.5px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3)}
.binder__title{font-size:20px;font-weight:650;margin-top:6px}
.seg{display:flex;background:#0b0b0c;border:1px solid var(--line-2);border-radius:9px;padding:3px;font-size:13px}
.seg span{padding:4px 14px;border-radius:6px;color:var(--fg-2)}
.seg .is-on{background:#fafafa;color:#09090b;font-weight:550}
.binder__input{margin-top:20px;min-height:104px;background:#0b0b0c;border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;font-size:15.5px;color:var(--fg);transition:border-color .3s,box-shadow .3s}
.binder__input.is-focus{border-color:rgba(139,156,255,.55);box-shadow:0 0 0 4px rgba(139,156,255,.12)}
.caret{display:inline-block;width:2px;height:1.15em;background:var(--accent);vertical-align:-3px;margin-left:1px;animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
.binder__row{display:flex;align-items:center;gap:14px;margin-top:14px}
.gen{cursor:default;transition:transform .15s,box-shadow .3s}
.gen.is-press{transform:scale(.96);box-shadow:0 0 0 6px rgba(139,156,255,.18)}
.gen.is-busy{opacity:.7}
.binder__hint{font-size:13px;color:var(--fg-3)}
.proposal{margin-top:16px;border:1px solid var(--line-2);background:#121214;border-radius:14px;padding:16px 18px;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);min-height:206px}
.proposal.is-on{opacity:1;transform:none}
.proposal dl{margin:12px 0 0;display:grid;gap:7px}
.proposal dl div{display:grid;grid-template-columns:76px 1fr;gap:12px;font-size:14px}
.proposal dt{color:var(--fg-3)}
.proposal dd{margin:0;color:var(--fg);word-break:break-all}
@media (max-width:900px){.ai{grid-template-columns:1fr;gap:44px}}

/* Profiles */
.profiles{max-width:880px;margin:0 auto}
.profiles__tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.profiles__tabs button{font:inherit;font-size:14.5px;font-weight:550;color:var(--fg-2);background:rgba(255,255,255,.03);border:1px solid var(--line-2);border-radius:10px;padding:9px 18px;cursor:pointer;transition:all .2s}
.profiles__tabs button:hover{color:var(--fg)}
.profiles__tabs button[aria-selected="true"]{background:#fafafa;color:#09090b;border-color:#fafafa}
.profiles__window{border:1px solid var(--line-2);border-radius:18px;background:linear-gradient(180deg,#141416,#0f0f11);overflow:hidden;box-shadow:0 40px 100px -40px rgba(0,0,0,.9)}
.winbar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--fg-3)}
.winbar i{width:10px;height:10px;border-radius:50%;background:#2a2a2e}
.winbar span{margin-left:10px}
.winbar b{color:var(--fg);font-weight:550;font-family:var(--mono);font-size:12.5px}
.profiles__panel{padding:10px}
.profiles__panel:not([hidden]){animation:fadeup .45s var(--ease)}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}}
.binds{list-style:none;margin:0;padding:0}
.binds li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border-radius:12px;flex-wrap:wrap}
.binds li+li{border-top:1px solid var(--line)}
.trg{display:flex;align-items:center;gap:5px;color:var(--fg-2);font-size:14px}
.act{color:var(--fg);font-size:14.5px}

/* Safety */
.safe{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.safe__item{padding:22px;border-radius:var(--radius);border:1px solid var(--line);background:var(--bg-2)}
.safe__item h3{font-size:16px;font-weight:620;margin-bottom:8px;letter-spacing:-.01em}
.safe__item p{color:var(--fg-2);font-size:14.5px}
@media (max-width:960px){.safe{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.safe{grid-template-columns:1fr}}

/* CTA */
.cta{position:relative;text-align:center;border:1px solid var(--line-2);border-radius:28px;padding:72px 32px 40px;overflow:hidden;background:linear-gradient(180deg,#121214,#0c0c0d)}
.cta__glow{position:absolute;left:50%;top:-180px;width:760px;height:420px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(124,140,255,.30),transparent);pointer-events:none}
.cta>*:not(.cta__glow){position:relative}
.cta__logo{margin:0 auto 26px;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.cta h2{font-size:clamp(32px,5vw,56px)}
.cta .lead{margin:16px auto 30px;max-width:520px}
.install{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}
.install li{display:flex;gap:14px;padding:20px;border-radius:14px;background:rgba(255,255,255,.025);border:1px solid var(--line)}
.install__n{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:650;font-size:14px;background:#fafafa;color:#09090b}
.install h3{font-size:15.5px;font-weight:620;margin:4px 0 6px;letter-spacing:-.01em}
.install p{color:var(--fg-2);font-size:14px}
@media (max-width:860px){.install{grid-template-columns:1fr}.cta{padding:56px 20px 24px}}

/* FAQ */
.faq{display:grid;gap:10px}
.faq details{border:1px solid var(--line);border-radius:14px;background:var(--bg-2);transition:border-color .2s,background .2s}
.faq details[open]{border-color:var(--line-2);background:#121214}
.faq summary{list-style:none;cursor:pointer;padding:20px 56px 20px 22px;font-weight:600;font-size:16.5px;position:relative;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:24px;top:50%;width:9px;height:9px;border-right:1.7px solid var(--fg-2);border-bottom:1.7px solid var(--fg-2);transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq__a{padding:0 22px 20px;color:var(--fg-2);display:grid;gap:12px;font-size:15.5px}
.faq__a ol,.faq__a ul{margin:0;padding-left:20px;display:grid;gap:6px}

/* Footer */
.footer{border-top:1px solid var(--line);padding:48px 0 56px;margin-top:40px}
.footer__inner{display:grid;grid-template-columns:1fr auto;gap:24px 40px;align-items:start}
.footer__brand p{color:var(--fg-3);font-size:14px;margin-top:10px}
.footer__links{display:flex;flex-wrap:wrap;gap:6px 22px}
.footer__links a{color:var(--fg-2);text-decoration:none;font-size:14px}
.footer__links a:hover{color:var(--fg)}
.footer__support{display:inline-flex;align-items:center;gap:6px}
.footer__support::before{content:"♥";color:#f472b6;font-size:12px}
.footer__legal{grid-column:1/-1;color:var(--fg-3);font-size:12.5px;border-top:1px solid var(--line);padding-top:22px}
@media (max-width:640px){.footer__inner{grid-template-columns:1fr}}

/* Mobile hero tweaks */
@media (max-width:620px){
  .hero{padding:56px 0 24px}
  .hero__cta .btn{width:100%}
  .hero__shot{margin-top:56px}
  .keystrip{top:-26px;padding:6px 8px;gap:4px}
  .keystrip .kbd{font-size:12px}
  .chip{font-size:12px;padding:4px 8px}
  .section{padding:84px 0}
  .section__head{margin-bottom:40px}
  .container{padding:0 18px}
  .binder{padding:18px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .marquee__track{animation:none}
}

/* ===================== Guide ===================== */
.container--guide{max-width:1240px}
.guide-hero{position:relative;overflow:hidden;padding:72px 0 48px;border-bottom:1px solid var(--line)}
.guide-hero .hero__glow{inset:-260px 0 auto;height:640px;background:radial-gradient(520px 260px at 30% 40%,rgba(124,140,255,.20),transparent 70%)}
.guide-hero .container{position:relative}
.guide-hero h1{font-size:clamp(40px,6vw,68px);font-weight:700;letter-spacing:-.04em;background:linear-gradient(180deg,#fff 30%,#a1a1aa);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.05em}
.guide-hero .lead{max-width:620px}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:36px}
.quick a{display:flex;flex-direction:column;gap:4px;text-decoration:none;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.025);transition:border-color .2s,background .2s,transform .3s var(--ease)}
.quick a:hover{border-color:var(--line-2);background:rgba(255,255,255,.05);transform:translateY(-2px)}
.quick b{font-weight:600;font-size:15px}
.quick span{color:var(--fg-3);font-size:13.5px}
@media (max-width:860px){.quick{grid-template-columns:1fr 1fr}}
.hide-sm{}
@media (max-width:520px){.hide-sm{display:none}.brand__tag{display:none}}

.guide{display:grid;grid-template-columns:230px minmax(0,1fr);gap:64px;padding-top:48px;padding-bottom:40px}
.toc{position:sticky;top:88px;align-self:start;max-height:calc(100vh - 110px);overflow:auto}
.toc__title{font-size:12px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--fg-3);margin-bottom:12px}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc a{display:block;padding:6px 0 6px 16px;margin-left:-1px;border-left:1px solid transparent;color:var(--fg-3);text-decoration:none;font-size:14px;transition:color .2s,border-color .2s}
.toc a:hover{color:var(--fg)}
.toc a[aria-current="true"]{color:var(--fg);border-left-color:var(--accent)}
.toc__toggle{display:none}
.doc{min-width:0;max-width:820px}
.doc__section{padding:28px 0 44px;border-bottom:1px solid var(--line)}
.doc__section:last-child{border-bottom:0}
.doc__kicker{font-family:var(--mono);font-size:12.5px;color:var(--accent);margin-bottom:8px}
.doc h2{font-size:clamp(28px,3.4vw,38px);font-weight:680;letter-spacing:-.03em;margin-bottom:16px}
.doc h3{font-size:18px;font-weight:620;letter-spacing:-.015em;margin:28px 0 10px}
.doc p,.doc li{color:var(--fg-2)}
.doc p+p{margin-top:12px}
.doc a:not(.btn){color:var(--fg);text-decoration-color:rgba(139,156,255,.6);text-underline-offset:3px}
.doc em{color:var(--fg);font-style:normal;font-weight:500}
.numbered{list-style:none;counter-reset:n;margin:24px 0 0;padding:0;display:grid;gap:8px}
.numbered>li{counter-increment:n;position:relative;padding:4px 0 18px 52px;border-left:1px dashed var(--line-2);margin-left:15px;padding-left:36px}
.numbered>li:last-child{border-left-color:transparent}
.numbered>li::before{content:counter(n);position:absolute;left:-16px;top:0;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#fafafa;color:#09090b;font-weight:700;font-size:14px}
.numbered h3{margin:4px 0 8px}
.shot{margin:22px 0 0;border-radius:16px;padding:6px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02));border:1px solid var(--line);box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.shot img{border-radius:11px;width:100%}
.shot figcaption{color:var(--fg-3);font-size:13px;padding:10px 6px 4px;text-align:center}
.shot--sm{max-width:520px}
.shot--tall{max-width:340px;justify-self:end}
.legend{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
.legend li{display:flex;gap:12px;font-size:14.5px}
.legend span{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#0b0b10;font-weight:700;font-size:12.5px;margin-top:1px}
.legend b{color:var(--fg);font-weight:600}
@media (max-width:640px){.legend{grid-template-columns:1fr}}
.smartscreen{margin-top:16px;max-width:430px;background:#1f4d8f;background:linear-gradient(180deg,#235aa6,#1b4a8c);border-radius:4px;padding:20px 22px;color:#fff;font-family:"Segoe UI",var(--font);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.smartscreen p{color:#fff!important;margin:0}
.ss__t{font-size:22px;font-weight:300;margin-bottom:10px!important}
.ss__b{font-size:13.5px;opacity:.92}
.ss__small{margin-top:10px!important;font-size:12.5px}
.ss__link{margin-top:8px!important;font-size:13.5px;text-decoration:underline;outline:2px solid #ffd54a;outline-offset:3px;display:inline-block;border-radius:2px}
.ss__btns{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.ss__btn{border:1px solid rgba(255,255,255,.85);padding:5px 18px;font-size:13px}
.ss__btn--hl{outline:2px solid #ffd54a;outline-offset:2px}
.tray{display:grid;grid-template-columns:300px 1fr;gap:28px;margin-top:20px;align-items:start}
.traymenu{list-style:none;margin:0;padding:6px;border-radius:10px;background:#202023;border:1px solid var(--line-2);box-shadow:0 24px 60px rgba(0,0,0,.6);font-family:"Segoe UI",var(--font)}
.traymenu li{display:flex;flex-direction:column;padding:8px 12px;border-radius:6px}
.traymenu li:hover{background:rgba(255,255,255,.06)}
.traymenu b{color:var(--fg);font-weight:500;font-size:14px}
.traymenu span{color:var(--fg-3);font-size:12px}
.traymenu .sep{border-top:1px solid var(--line);margin-top:4px;border-radius:0 0 6px 6px}
.tray__notes p{font-size:14.5px}
@media (max-width:760px){.tray{grid-template-columns:1fr}}
.table-wrap{overflow-x:auto;margin-top:18px;border:1px solid var(--line);border-radius:14px}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.tbl th,.tbl td{text-align:left;padding:14px 16px;vertical-align:top;border-bottom:1px solid var(--line)}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl thead th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);font-weight:600;background:rgba(255,255,255,.02)}
.tbl tbody th{color:var(--fg);font-weight:600;white-space:nowrap}
.tbl td{color:var(--fg-2)}
.tbl td:last-child{white-space:nowrap;color:var(--fg)}
.callout{margin-top:20px!important;padding:14px 16px;border-radius:12px;background:rgba(139,156,255,.07);border:1px solid rgba(139,156,255,.25);font-size:14.5px}
.callout b{color:var(--fg)}
.split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start}
.split--even{grid-template-columns:1fr 1fr;gap:18px}
.split .shot{margin-top:0}
.split--even .shot{margin-top:6px}
@media (max-width:860px){.split{grid-template-columns:1fr}.shot--tall{justify-self:center;max-width:380px;width:100%}}
@media (max-width:560px){.split--even{grid-template-columns:1fr}}
.defs{list-style:none;padding:0;margin:16px 0;display:grid;gap:10px}
.defs li{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);font-size:14.5px}
.defs b{color:var(--fg)}
.note{display:block;margin-top:6px;color:var(--fg-3);font-size:13px}
.steps-sm{margin:14px 0 0;padding-left:22px;display:grid;gap:8px}
.steps-sm li::marker{color:var(--fg-3);font-weight:600}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.acard{border:1px solid var(--line);border-radius:16px;padding:20px;background:linear-gradient(180deg,var(--panel),#0f0f11)}
.acard--wide{grid-column:span 2}
.acard h3{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:17px}
.acard__ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--line-2);font-size:14px;color:var(--fg)}
.acard>p{font-size:14.5px}
.ex{display:flex;align-items:center;gap:12px;margin-top:10px;padding:9px 12px;border-radius:10px;background:#0c0c0d;border:1px solid var(--line);font-size:13.5px;flex-wrap:wrap}
.ex__t{display:inline-flex;align-items:center;gap:4px;color:var(--fg-2)}
.ex__a{color:var(--fg);word-break:break-all}
.ex__t::after{content:"→";color:var(--fg-3);margin-left:8px}
.macro-ex{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;margin-top:4px}
.macro-ex .macro{margin-top:10px}
.exs{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:700px){.actions{grid-template-columns:1fr}.acard--wide{grid-column:auto}.macro-ex,.exs{grid-template-columns:1fr}}
.prompt{margin-top:14px;border:1px solid var(--line-2);border-radius:14px;overflow:hidden}
.prompt__in{padding:14px 16px;background:#0c0c0d;color:var(--fg)!important;font-size:15px;border-bottom:1px solid var(--line)}
.prompt__out{list-style:none;margin:0;padding:10px 16px 14px;display:grid;gap:8px;background:#121214}
.prompt__out li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--fg)}
.errline{margin-top:12px!important;padding:12px 14px;border-radius:10px;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.3);color:#fecaca!important;font-size:14px}
.mock{margin-top:16px;border:1px solid var(--line-2);border-radius:14px;padding:16px;background:#121214}
.mock--conflict{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.mock--conflict p{flex:1 1 300px;font-size:14px}
.warn{color:#fca5a5}
.mock--toast{position:relative;padding:18px 18px 74px;max-width:520px}
.bcard{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:12px;border:1px solid var(--line-2);background:#18181b;opacity:.45}
.bcard div{display:flex;flex-direction:column}
.bcard b{color:var(--fg);font-size:15px}
.bcard span{color:var(--fg-3);font-size:13px}
.trash{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;border:1px solid rgba(248,113,113,.5);background:rgba(248,113,113,.1)}
.trash svg{width:16px;height:16px;fill:none;stroke:#fca5a5;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.toast{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:16px;background:#fafafa;color:#09090b;border-radius:10px;padding:8px 10px 8px 14px;font-size:13.5px;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.toast b{padding:4px 10px;border-radius:6px;background:#e4e4e7}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.tcard{border:1px solid var(--line);border-radius:16px;padding:20px;background:linear-gradient(180deg,var(--panel),#0f0f11)}
.tcard__keys{display:flex;gap:6px;flex-wrap:wrap;min-height:40px;align-items:center}
.tcard h3{margin:14px 0 6px}
.tcard p{font-size:14px}
.pill-s{font-size:12.5px;border:1px solid var(--line-2);border-radius:99px;padding:5px 10px;color:var(--fg)}
@media (max-width:860px){.trio{grid-template-columns:1fr}}
.cases{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.case{border:1px solid var(--line);border-radius:16px;padding:20px;background:linear-gradient(180deg,var(--panel),#0f0f11)}
.case--wide{grid-column:span 2}
.case h3{margin:0;font-size:18px}
.case__sub{font-size:13.5px;color:var(--fg-3)!important;margin:4px 0 12px!important}
.case ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.case li{display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.case li>span:last-child{margin-left:auto;color:var(--fg);text-align:right;padding-left:12px}
.case .cols{grid-template-columns:1fr 1fr;column-gap:24px}
@media (max-width:760px){.cases{grid-template-columns:1fr}.case--wide{grid-column:auto}.case .cols{grid-template-columns:1fr}}
.trouble{display:grid;gap:12px;margin-top:18px}
.tr{border:1px solid var(--line);border-radius:14px;padding:16px 20px;background:var(--bg-2)}
.tr h3{margin:0 0 8px;font-size:16px}
.tr ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14.5px}
.cta--guide{margin-top:48px;padding:56px 24px 36px}
.cta--guide h2{font-size:clamp(28px,4vw,44px)}
.cta--guide .lead{margin:12px auto 26px}

@media (max-width:980px){
  .guide{grid-template-columns:1fr;gap:0;padding-top:20px}
  .toc__toggle{display:flex;align-items:center;justify-content:space-between;width:100%;font:inherit;font-size:14px;font-weight:600;color:var(--fg);background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;padding:12px 16px;cursor:pointer;position:sticky;top:72px;z-index:20}
  .toc__toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .3s}
  .toc__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
  .toc{position:static;max-height:none;display:none;margin-top:8px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
  .toc.is-open{display:block}
  .toc__title{display:none}
  .doc{max-width:none}
}
.notfound{min-height:100vh;display:grid;place-items:center}
.notfound__logo{margin:0 auto 24px;border-radius:18px}
.notfound__title{font-size:clamp(40px,7vw,72px);margin:0 0 16px}
.doc__intro{font-size:17px;color:var(--fg-2)}
.legend--one{grid-template-columns:1fr;margin-top:0}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 16px}
.flow__step{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);font-size:14px}
.flow__app{font-family:var(--mono);font-size:12.5px;color:var(--fg-3)}
.flow__arrow{color:var(--accent);line-height:1}
.flow b{color:var(--fg);font-weight:600}
@media (max-width:700px){.flow{grid-template-columns:1fr 1fr}}
.case li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.case__t{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;color:var(--fg-2)}
.case li>.case__a{margin-left:0;text-align:right;padding-left:0;color:var(--fg)}
.doc ol+p,.doc ul+p,.doc .flow+p{margin-top:14px}
@media (max-width:420px){.case li{grid-template-columns:1fr;gap:6px}.case li>.case__a{text-align:left}}
@media (max-width:480px){.profiles__tabs{flex-wrap:nowrap;gap:4px}.profiles__tabs button{padding:8px 12px;font-size:13.5px}}
/* Thanks page (/thanks) */
.thanks{padding:72px 0 40px}
.thanks .cta{padding-top:64px}
.thanks__status{display:inline-flex;align-items:center;gap:10px;margin:0 auto 22px;padding:6px 14px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--fg-2);font-size:13.5px}
.thanks__spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.18);border-top-color:var(--accent);animation:kwspin .9s linear infinite}
.thanks__status.is-done .thanks__spin{animation:none;border-color:var(--ok)}
@keyframes kwspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.thanks__spin{animation:none}}
.thanks__again{margin-top:14px;color:var(--fg-3);font-size:14px}
.thanks__again a{color:var(--fg);text-underline-offset:3px}
.thanks__grid{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;margin-top:16px}
.thanks__grid .card h2{font-size:22px;font-weight:640;letter-spacing:-.02em;margin:16px 0 8px}
.thanks__grid .card p{margin-bottom:18px}
.thanks__soon{opacity:.75;cursor:not-allowed}
.thanks__soon:hover{transform:none}
.helps{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.helps a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.025);text-decoration:none;color:var(--fg);font-size:14.5px;font-weight:550;transition:border-color .2s,background .2s}
.helps a:hover{border-color:var(--line-2);background:rgba(255,255,255,.05)}
.helps svg{width:18px;height:18px;flex:none;fill:none;stroke:#e4e4e7;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.helps span{color:var(--fg-3);font-weight:450;margin-left:auto;font-size:13px}
@media (max-width:860px){.thanks__grid{grid-template-columns:1fr}.thanks .install{grid-template-columns:1fr}}
@media (max-width:560px){.thanks{padding:40px 0 24px}.thanks .cta{padding:48px 20px 24px}.helps span{display:none}}
.thanks__title{font-size:clamp(34px,5.4vw,56px);font-weight:680;letter-spacing:-.035em}
.thanks .container--narrow{max-width:1000px}.helps span{white-space:nowrap}