/*
 * Koditor's site (ADR-0067): one stylesheet for every page, from the design "Layers", Night only
 * by the brand guide's "Night first" (docs/brand/README.md). Shared parts first, then each page's,
 * scoped by the class its body carries (p-home, p-buy…). No inline style anywhere: the
 * Content-Security-Policy allows only this file.
 */

/*
 * The brand's typefaces, served from the site itself: Fontsource's variable builds 5.3.0, Latin
 * and Latin Extended, under the SIL Open Font License 1.1 (fonts/*-OFL.txt).
 */
@font-face {
    font-family: Figtree;
    font-style: normal;
    font-display: swap;
    font-weight: 300 900;
    src: url("/assets/fonts/figtree-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: Figtree;
    font-style: normal;
    font-display: swap;
    font-weight: 300 900;
    src: url("/assets/fonts/figtree-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/assets/fonts/geist-mono-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/assets/fonts/geist-mono-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens */
:root{
  --surface:#0E0B1C; --raised:#17132B; --line:#2C2648; --text:#F3F0FF; --muted:#A9A3C4; --soft:#CFCAE6;
  --accent:#7C95FF; --on-accent:#0E0B1C; --deep:#120E27;
  --add:#4FD08A; --chg:#5B8CFF;
  --k-kw:#C3A6FF; --k-ty:#7FDCF7; --k-str:#FFBE7A; --k-fn:#9DB4FF;
  --sans:"Figtree", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --head:72px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--head) + 16px);scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--text);font:400 16px/24px var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--surface)}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:1200px;margin-inline:auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
@media (max-width:600px){.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}
main,footer{position:relative;z-index:1;overflow-x:clip}
.skip{position:absolute;left:16px;top:-48px;z-index:50;padding:10px 16px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* The horizon light, one layer per pair of the mark, crossfaded by section */
.glow{position:fixed;inset:0;z-index:0;pointer-events:none}
.glow i{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.glow .g1{background:radial-gradient(90% 46% at 50% 108%,rgba(46,91,255,.34) 0%,rgba(68,220,255,.15) 34%,transparent 68%),radial-gradient(60% 30% at 50% 100%,rgba(68,220,255,.16),transparent 70%)}
.glow .g2{background:radial-gradient(90% 46% at 50% 108%,rgba(255,61,170,.30) 0%,rgba(140,77,255,.20) 34%,transparent 68%),radial-gradient(60% 30% at 50% 100%,rgba(140,77,255,.18),transparent 70%)}
.glow .g3{background:radial-gradient(90% 46% at 50% 108%,rgba(255,166,61,.28) 0%,rgba(255,61,110,.18) 34%,transparent 68%),radial-gradient(60% 30% at 50% 100%,rgba(255,61,110,.16),transparent 70%)}
body[data-glow="1"] .g1,body[data-glow="2"] .g2,body[data-glow="3"] .g3{opacity:1}

/* Header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.top>.wrap{display:flex;align-items:center;gap:24px;height:var(--head)}
.logo{display:inline-flex;color:var(--text)}
.logo img{display:block}
.top .logo img{height:38px;width:127px}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{font:500 15px/20px var(--sans);color:var(--muted);text-decoration:none;padding:8px 14px;border-radius:999px}
.nav a:hover{color:var(--text);background:var(--raised)}
.nav a[aria-current]{color:var(--text);background:var(--raised)}
.top-end{display:flex;align-items:center;gap:8px}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;border-radius:999px;font:600 15px/1 var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.pill-accent{background:var(--accent);color:var(--on-accent)}
.pill-accent:hover{background:#93A7FF}
.pill-line{border-color:var(--line);color:var(--text);background:transparent}
.pill-line:hover{background:var(--raised)}
.pill-line[aria-current]{background:var(--raised)}
.pill-sm{height:36px;padding:0 16px;font-size:14px}
.pill-lg{height:50px;padding:0 26px;font-size:16px}

/* The menu below 820 points: a details element, so it opens without the script too */
.menu{display:none}
.menu>summary{list-style:none;gap:10px}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary .bars{position:relative;width:14px;height:10px}
.menu>summary .bars::before,.menu>summary .bars::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:1px;background:currentColor;transition:transform .2s}
.menu>summary .bars::before{top:1px}
.menu>summary .bars::after{bottom:1px}
.menu[open]>summary .bars::before{transform:translateY(3px) rotate(45deg)}
.menu[open]>summary .bars::after{transform:translateY(-3px) rotate(-45deg)}
.menu-panel{position:absolute;left:0;right:0;top:100%;border-bottom:1px solid var(--line);background:var(--surface);padding:8px 0 20px}
.menu-panel nav{display:grid;gap:2px}
.menu-panel a{display:block;padding:12px 0;border-bottom:1px solid var(--line);font:600 20px/28px var(--sans);letter-spacing:-.01em;color:var(--soft);text-decoration:none}
.menu-panel a[aria-current]{color:var(--text)}
.menu-panel a[aria-current]::after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 3px 10px;border-radius:50%;background:var(--accent)}
.menu-panel .pill{margin-top:20px;width:100%}

/* Sections */
.section{padding-block:120px}
.head{display:grid;gap:14px;max-width:640px}
.head h2{font:700 clamp(30px,3.6vw,44px)/1.12 var(--sans);letter-spacing:-.028em}
.head p{color:var(--muted);font-size:17px;line-height:26px}
.fine{font:400 14px/20px var(--sans);color:var(--muted);margin-top:16px}
.fine a{color:var(--text);text-underline-offset:3px}

/* A screenshot on its lit stage */
.stage-shot{position:relative;aspect-ratio:1600/1040;max-width:100%;border-radius:20px;overflow:hidden;background:#07060E}
.stage-shot img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .45s ease}
.stage-shot img.on{opacity:1}

/* Ticks */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:8px;color:var(--text)}
.checks li{padding-left:24px;position:relative}
.checks li::before{content:"";position:absolute;left:2px;top:7px;width:10px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}

/* Questions */
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font:600 18px/26px var(--sans);cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:9px;height:9px;margin-right:6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-3px);transition:transform .25s}
.qa details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.qa details p{color:var(--muted);padding:0 40px 20px 0;max-width:66ch}
.qa details p a{color:var(--text);text-underline-offset:3px}

/* Questions beside their heading */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start}
.faq .head p a{color:var(--text);text-underline-offset:3px}

/* Footer */
footer{border-top:1px solid var(--line);padding-block:56px 40px;background:var(--surface)}
.foot{display:grid;grid-template-columns:minmax(0,5fr) repeat(2,minmax(0,2fr));gap:40px}
.foot .logo img{height:32px;width:107px}
.foot-brand p{color:var(--muted);margin-top:14px}
.foot h2{font:600 14px/20px var(--sans);margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot ul a{color:var(--muted);text-decoration:none;font-size:15px}
.foot ul a:hover,.foot ul a[aria-current]{color:var(--text)}
.legal{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px 32px;padding-top:24px;margin-top:8px;border-top:1px solid var(--line);font-size:13px;line-height:20px;color:var(--muted)}
.legal address{font-style:normal;text-align:right}
.legal a{color:var(--text);font-weight:600;text-decoration:none}
.legal a:hover{color:var(--accent)}

/* Inner pages: a page's opening, copy beside a screenshot, steps in order, short facts and the closing band */
.page-head{position:relative;isolation:isolate;padding-block:clamp(56px,9vh,104px) clamp(40px,6vh,72px)}
.page-head::before{content:"";position:absolute;inset:-30% 0 auto;height:130%;z-index:-1;pointer-events:none;
  background:radial-gradient(44% 56% at 24% 34%,rgba(43,34,89,.85),transparent 70%)}
.page-head h1{font:700 clamp(40px,5.2vw,64px)/1.04 var(--sans);letter-spacing:-.032em;max-width:15ch}
.page-head .lead{font-size:clamp(17px,1.5vw,19px);line-height:1.55;color:var(--muted);max-width:50ch;margin-top:20px;text-wrap:pretty}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.split>*{min-width:0}
figure{margin:0}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.panel{border:1px solid var(--line);border-radius:16px;background:rgba(23,19,43,.78)}
.notice{max-width:520px;margin-top:28px;padding:14px 18px;border-radius:12px;border:1px solid var(--accent);background:rgba(124,149,255,.1);font-size:15px;line-height:22px;color:var(--text)}
.notice b{font-weight:600}
.notice small{display:block;color:var(--muted);font-size:14px;line-height:20px;margin-top:4px}
.notice a{color:var(--text);text-underline-offset:3px}
.link{display:inline-block;color:var(--accent);font-weight:600;text-decoration:none}
.link:hover{text-decoration:underline}
.seq{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.seq li{display:grid;gap:10px;align-content:start;padding:28px;border:1px solid var(--line);border-radius:16px;background:rgba(14,11,28,.72);transition:border-color .35s,background .35s}
.seq .n{display:grid;place-items:center;width:32px;height:32px;border-radius:999px;border:1px solid var(--line);font:600 14px/1 var(--sans);color:var(--muted);transition:background .35s,border-color .35s,color .35s}
.seq h3{font:600 20px/28px var(--sans);letter-spacing:-.012em;margin-top:6px}
.seq p{color:var(--muted)}
.seq li.on{border-color:var(--accent);background:rgba(23,19,43,.9)}
.seq li.on .n{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.facts{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:20px}
.facts li{display:grid;gap:4px;border-top:1px solid var(--line);padding-top:16px}
.facts b{font:600 18px/26px var(--sans);letter-spacing:-.01em}
.facts span{color:var(--muted)}
kbd{font:500 .88em/1 var(--mono);padding:3px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;background:var(--raised);color:var(--text);white-space:nowrap}
code{font:400 .9em/1 var(--mono);color:var(--soft);background:var(--raised);border:1px solid var(--line);padding:2px 6px;border-radius:6px;overflow-wrap:anywhere}
.band{position:relative;z-index:1;padding-block:0 120px}
.band-inner{display:flex;align-items:center;gap:28px;padding:36px 40px;border:1px solid var(--line);border-radius:20px;background:rgba(23,19,43,.82)}
.band .icon{flex:none;width:72px;height:72px}
.band h2{font:700 clamp(24px,2.6vw,32px)/1.2 var(--sans);letter-spacing:-.022em}
.band p{color:var(--muted);margin-top:6px}
.band .actions{margin:0 0 0 auto;flex:none}

/* Guides and legal text: an index held at the left beside the prose */
.guides{display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px;align-items:start}
.toc{position:sticky;top:calc(var(--head) + env(safe-area-inset-top,0px) + 32px)}
.toc h2{font:700 clamp(30px,3.6vw,44px)/1.12 var(--sans);letter-spacing:-.028em}
.toc ol{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:2px;border-left:1px solid var(--line)}
.toc a{display:block;margin-left:-1px;padding:8px 0 8px 16px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;font:500 15px/20px var(--sans);transition:color .25s,border-color .25s}
.toc a:hover{color:var(--text)}
.toc a.on{color:var(--text);border-left-color:var(--accent)}
.toc-sm h2{font:600 14px/20px var(--sans);letter-spacing:0;color:var(--muted)}
.toc-sm ol{margin-top:12px}
.prose{min-width:0}
.prose section{padding-block:28px;border-top:1px solid var(--line)}
.prose section:first-child{border-top:0;padding-top:4px}
.prose h2{font:700 clamp(24px,2.4vw,28px)/1.25 var(--sans);letter-spacing:-.02em}
.prose h3{font:600 24px/32px var(--sans);letter-spacing:-.018em}
.prose p{color:var(--soft);max-width:64ch;margin-top:12px}
.prose p a,.prose li a{color:var(--text);text-underline-offset:3px}
.prose .note{color:var(--muted);font-size:15px;line-height:22px}
.prose ul,.prose ol{margin:12px 0 0;padding-left:22px;color:var(--soft);max-width:62ch;display:grid;gap:6px}
.prose li::marker{color:var(--muted)}
.prose b,.prose strong{color:var(--text);font-weight:600}
pre{margin:16px 0 0;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--deep);overflow-x:auto;max-width:64ch}
pre code{background:none;border:0;padding:0;font-size:14px;line-height:22px;color:var(--text)}
.summary{padding:24px 28px;margin-bottom:12px}
.summary h2{font:600 15px/20px var(--sans);color:var(--muted);letter-spacing:0}
.summary ul{margin-top:12px}
.todo{margin-top:14px;padding:12px 16px;border:1px dashed rgba(255,190,122,.55);border-radius:12px;background:rgba(255,190,122,.06);color:var(--soft);font-size:15px;line-height:22px;max-width:64ch}
.todo b{color:var(--k-str);font-weight:600}
.section.legal-sec{padding-top:8px}
.doc-meta{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:20px;color:var(--muted);font-size:15px}
.chip-draft{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;border:1px dashed rgba(255,190,122,.6);color:var(--k-str);font:600 12px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:rgba(14,11,28,.72);margin-top:16px}
.data{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;line-height:22px}
.data th{text-align:left;font:600 13px/18px var(--sans);color:var(--muted);padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.data td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--soft)}
.data td:first-child{color:var(--text)}
.data tr:last-child td{border-bottom:0}

/* An address with no page, and the page while the site is being updated */
.lost{position:relative;isolation:isolate;min-height:min(calc(100svh - var(--head)),760px);display:flex;align-items:center;padding-block:72px;text-align:center}
.lost::before{content:"";position:absolute;inset:-10% 0 auto;height:110%;z-index:-1;background:radial-gradient(42% 40% at 50% 34%,rgba(43,34,89,.9),transparent 70%)}
.lost .wrap{width:100%}
.lost .icon{display:block;width:88px;height:88px;margin:0 auto 28px}
.lost .lost-code{font:600 14px/20px var(--mono);color:var(--muted);letter-spacing:.08em}
.lost h1{font:700 clamp(36px,5vw,56px)/1.06 var(--sans);letter-spacing:-.03em;max-width:16ch;margin:12px auto 0}
.lost .lead{color:var(--muted);font-size:clamp(17px,1.5vw,19px);line-height:1.55;max-width:46ch;margin:18px auto 0}
.lost .actions{justify-content:center}

/* ---------- Home ---------- */

/* The hero fills the first screen under the header, whatever the window's height, and its parts shrink with that height too. */
.hero{position:relative;display:flex;align-items:center;min-height:min(calc(100svh - var(--head)),880px);padding-block:clamp(28px,5vh,72px);text-align:center;isolation:isolate}
.hero>.wrap{width:100%}
.hero::before{content:"";position:absolute;inset:-10% 0 auto;height:110%;z-index:-1;
  background:radial-gradient(42% 40% at 50% 28%,rgba(43,34,89,.9),transparent 70%)}
.hero-mark{display:block;width:clamp(72px,min(15vw,15vh),150px);height:auto;margin:0 auto clamp(18px,3.6vh,36px);overflow:visible}
.hero-mark g{isolation:isolate}
.hero-mark rect{opacity:.14;mix-blend-mode:screen;animation:light 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.hero-mark .b2{animation-delay:.35s}
.hero-mark .b3{animation-delay:.7s}
@keyframes light{0%{opacity:.14}18%{opacity:.7}26%{opacity:.3}40%{opacity:.85}52%{opacity:.55}100%{opacity:1}}
.hero h1{font:700 clamp(34px,min(5.6vw,7.6vh),72px)/1.04 var(--sans);letter-spacing:-.03em;max-width:15ch;margin-inline:auto}
.hero .lead{font-size:clamp(16px,min(1.5vw,2.3vh),19px);line-height:1.55;color:var(--muted);max-width:58ch;margin:clamp(12px,2.4vh,24px) auto 0;text-wrap:pretty}
.cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(18px,3.6vh,36px)}
.cta .pill{height:50px;padding:0 26px;font-size:16px}

/* Five layers */
.ex-inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
.ex-copy h2{font:700 clamp(30px,3.4vw,40px)/1.15 var(--sans);letter-spacing:-.025em}
.ex-lead{color:var(--muted);margin-top:14px;max-width:44ch}
.steps{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:6px}
.steps button{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;padding:12px 16px 12px 12px;border-radius:14px;border:1px solid transparent;background:transparent;color:var(--muted);font:inherit;cursor:pointer;transition:background .3s,border-color .3s}
.steps button:hover{background:rgba(23,19,43,.6)}
.steps .n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:999px;border:1px solid var(--line);font:600 13px/1 var(--sans);color:var(--muted);transition:background .3s,border-color .3s,color .3s}
.steps b{display:block;font:600 18px/28px var(--sans);letter-spacing:-.01em;color:var(--muted);transition:color .3s}
.steps .d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.steps .d>span{overflow:hidden;font-size:15px;line-height:22px;color:var(--soft)}
.steps .d>span>span{display:block;padding-top:4px}
.steps .on{background:var(--raised);border-color:var(--line)}
.steps .on .n{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.steps .on b{color:var(--text)}
.steps .on .d{grid-template-rows:1fr}
.explode.static .steps .d{grid-template-rows:1fr}
.explode.static .steps b{color:var(--text)}
.explode.static .steps button{cursor:default}
.stage{position:relative;height:560px;display:grid;place-items:center;perspective:1800px;perspective-origin:50% 40%}
.stack{position:relative;width:600px;height:380px;transform-style:preserve-3d;will-change:transform;transform:rotateX(16deg) rotateZ(-8deg)}
/* Only opacity and transform change while scrolling, so the compositor alone moves the planes: the edges and fills are layers of their own that fade. */
.plane{position:absolute;inset:0;border-radius:12px;will-change:transform,opacity;transition:opacity .35s}
.plane::before,.plane::after{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;opacity:0;transition:opacity .35s}
.plane::before{border:1px solid rgba(124,149,255,.45);background:rgba(23,19,43,.16)}
.plane::after{border:1px solid var(--accent);background:rgba(23,19,43,.42)}
.stack.apart .plane::before{opacity:1}
.stack.apart .plane:not(.on){opacity:.42}
.stack .plane.on::after{opacity:1}
.stack .plane.on::before{opacity:0}
.plane>*{position:absolute;z-index:1}
.tag{position:absolute;left:calc(100% + 18px);top:50%;transform:translateY(-50%);font:600 13px/1 var(--sans);padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--raised);color:var(--muted);opacity:0;transition:opacity .35s;white-space:nowrap}
.stack.apart .tag{opacity:1}
.plane.on .tag{color:var(--text);border-color:var(--accent)}
.stack .p-bytes{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.hex{position:absolute;left:60px;top:76px;right:16px;font:400 11px/22px var(--mono);color:#8A84B8;opacity:0;transition:opacity .4s;white-space:pre;overflow:hidden}
.stack.apart .hex{opacity:1}
.hex b{font-weight:400;color:var(--muted)}
.code,.gut{font:400 13px/22px var(--mono);white-space:pre}
.code{position:absolute;left:60px;top:74px;color:var(--text)}
.kw{color:var(--k-kw)} .ty{color:var(--k-ty)} .st{color:var(--k-str)} .fn{color:var(--k-fn)}
.gut{position:absolute;left:0;top:74px;width:36px;text-align:right;color:#6E68A0}
.gut .cur{color:var(--text)}
.mk{position:absolute;left:42px;width:3px;border-radius:2px}
.mk.add{background:var(--add);top:162px;height:44px}
.mk.chg{background:var(--chg);top:272px;height:22px}
.fold{position:absolute;left:47px;width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg)}
.fold.f1{top:120px} .fold.f2{top:230px}
.curline{position:absolute;left:0;right:0;height:22px;background:rgba(124,149,255,.07)}
.caret{position:absolute;width:2px;height:20px;background:var(--accent);border-radius:1px;animation:blink 1.1s steps(1) infinite;font:400 13px/22px var(--mono)}
.sel{position:absolute;height:22px;background:rgba(124,149,255,.28);border-radius:3px;font:400 13px/22px var(--mono);left:calc(60px + 8ch)}
/* The three carets' lines, 6 to 8 of the sample, each selection ending at its caret */
.r1{top:140px} .r2{top:162px} .r3{top:184px}
.caret.r1{top:141px;left:calc(60px + 12ch)} .caret.r2{top:163px;left:calc(60px + 16ch)} .caret.r3{top:185px;left:calc(60px + 18ch)}
.sel.r1{width:4ch} .sel.r2{width:8ch} .sel.r3{width:10ch}
@keyframes blink{50%{opacity:0}}
.chrome{position:absolute;inset:0;border-radius:12px;border:1px solid var(--line);overflow:hidden}
.titlebar{position:absolute;inset:0 0 auto;height:36px;background:var(--raised);display:flex;align-items:center;gap:8px;padding:0 14px}
.lights{display:flex;gap:7px}
.lights i{width:11px;height:11px;border-radius:50%}
.lights i:nth-child(1){background:#FF5F57}.lights i:nth-child(2){background:#FEBC2E}.lights i:nth-child(3){background:#28C840}
.tb-pill{margin-left:14px;height:20px;width:66px;border:1px solid var(--line);border-radius:999px}
.tb-pill+.tb-pill{margin-left:4px;width:46px}
.tabs{position:absolute;top:36px;left:0;right:0;height:30px;background:var(--deep);display:flex;align-items:flex-end;gap:4px;padding:0 10px;border-bottom:1px solid var(--line)}
.tab{font:500 12px/1 var(--sans);color:var(--muted);height:24px;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:7px 7px 0 0;background:#1D1836}
.tab.on{height:28px;background:var(--surface);color:var(--text)}
.tab .dot{width:6px;height:6px;border-radius:50%;background:var(--muted)}
.status{position:absolute;inset:auto 0 0;height:28px;border-top:1px solid var(--line);background:var(--raised);display:flex;align-items:center;gap:16px;padding:0 14px;font:500 11px/1 var(--sans);color:var(--muted)}
.status span:first-child{margin-right:auto}

/* Speed */
.race{margin-top:56px;padding:32px;border:1px solid var(--line);border-radius:16px;background:rgba(23,19,43,.7)}
.race-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.race-label{font:600 18px/24px var(--sans)}
.race-time{font:700 clamp(40px,6vw,72px)/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bar{position:relative;height:14px;margin-top:20px;border-radius:999px;background:var(--deep);overflow:hidden;border:1px solid var(--line)}
.bar i{position:absolute;inset:0 auto 0 0;width:100%;border-radius:999px;background:linear-gradient(90deg,#44DCFF,#2E5BFF);transform-origin:left;transform:scaleX(0)}
.race-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:18px;flex-wrap:wrap}
.race-foot p{color:var(--muted);max-width:60ch}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:56px}
.trio div,.mine div{border-top:1px solid var(--line);padding-top:20px}
.trio h3,.mine h3{font:600 20px/28px var(--sans);letter-spacing:-.012em}
.trio p,.mine p{color:var(--muted);margin-top:8px}

/* Screenshots: the list of shots on the left, one stage on the right */
.shots{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:center;margin-top:48px}
.shot-list{margin:0}
.shot-list button{display:block;padding:12px 16px}

/* Your files stay on your Mac */
.mine{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:48px}

/* Try and keep */
.offer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:56px;background:rgba(14,11,28,.72)}
.offer>div{padding:40px;display:flex;flex-direction:column;gap:14px;min-width:0}
.offer>div+div{border-left:1px solid var(--line);background:rgba(23,19,43,.8)}
.offer .icon{width:72px;height:72px}
.offer h3{font:700 32px/38px var(--sans);letter-spacing:-.025em}
.offer .price{font:700 64px/68px var(--sans);letter-spacing:-.03em}
.offer .price small{font:500 18px/24px var(--sans);letter-spacing:0;color:var(--muted);margin-left:6px}
.offer p{color:var(--muted)}
.offer .pill{align-self:flex-start;margin-top:auto}

/* What's in 1.0 */
.rel{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--line)}
.rel li{display:grid;grid-template-columns:160px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.rel .k{font-weight:600}
.rel span:last-child{color:var(--muted)}
.more{margin-top:20px}

/* ---------- Download ---------- */
.specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:40px 0 0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(14,11,28,.72)}
.specs div{padding:24px 28px;border-top:1px solid var(--line);border-left:1px solid var(--line);margin:-1px 0 0 -1px}
.specs dt{font:500 14px/20px var(--sans);color:var(--muted)}
.specs dd{margin:6px 0 0;font:600 20px/28px var(--sans);letter-spacing:-.012em}

/* ---------- Buy ---------- */
.buy-top{align-items:start}
.buy-top .lead{max-width:44ch}
.trial{display:flex;gap:14px;align-items:center;margin-top:36px;padding-top:24px;border-top:1px solid var(--line);max-width:460px}
.trial img{flex:none;width:48px;height:48px}
.trial p{color:var(--muted);font-size:15px;line-height:22px}
.trial a{color:var(--text);font-weight:600;text-underline-offset:3px}
.card{padding:36px;display:grid;gap:20px;max-width:440px;justify-self:end;width:100%}
.card-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.card-top span{font:600 15px/20px var(--sans);color:var(--muted)}
.card .price{font:700 72px/1 var(--sans);letter-spacing:-.035em}
.card .price small{font:500 18px/24px var(--sans);letter-spacing:0;color:var(--muted);margin-left:8px}
.card .pill{width:100%}
.card .fine{margin-top:-6px;text-align:center}
.pill[aria-disabled=true]{opacity:.5;cursor:not-allowed}

/* ---------- Changelog ---------- */
.releases{padding-block:8px 120px}
.release{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;padding-block:48px;border-top:1px solid var(--line)}
.release:first-child{border-top:0;padding-top:16px}
.rel-meta{align-self:start;position:sticky;top:calc(var(--head) + env(safe-area-inset-top,0px) + 32px);display:grid;gap:8px;justify-items:start}
.rel-meta h2{font:700 48px/1 var(--sans);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.rel-meta p{color:var(--muted);font-size:15px}
.chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:var(--raised);font:600 12px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--soft)}
.chip-accent{border-color:var(--accent);color:var(--text)}
.rel-body{display:grid;gap:28px;min-width:0}
.rel-lead p{font-size:19px;line-height:28px;color:var(--soft);max-width:56ch}
.rel-shot{max-width:880px}
.rel-lead ul{margin:0;padding-left:20px;color:var(--soft);display:grid;gap:8px}
.groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 48px}
.groups h3{font:600 18px/26px var(--sans);letter-spacing:-.01em;padding-bottom:12px;border-bottom:1px solid var(--line)}
.groups ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.groups li{position:relative;padding-left:20px;color:var(--muted)}
.groups li::before{content:"";position:absolute;left:2px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.groups p{color:var(--muted);margin-top:14px}
.rel-foot{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.empty{color:var(--muted);font-size:17px}

/* ---------- Support ---------- */
.sup-top{align-items:start}
.topics{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-width:520px}
.topics a{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);color:var(--soft);font:500 14px/1 var(--sans);text-decoration:none}
.topics a:hover{background:var(--raised);color:var(--text)}
.contact{padding:36px;display:grid;gap:14px;max-width:520px;justify-self:end;width:100%}
.contact h2{font:600 15px/20px var(--sans);color:var(--muted)}
.mail{font:700 clamp(24px,2.6vw,30px)/1.2 var(--sans);letter-spacing:-.02em;overflow-wrap:anywhere}
.mail a{text-decoration:none;color:var(--text)}
.mail a:hover{color:var(--accent)}
.contact .langs{color:var(--muted)}
.contact h3{font:600 16px/24px var(--sans);margin-top:12px;padding-top:20px;border-top:1px solid var(--line)}
.contact .checks{color:var(--soft)}
.contact .fine{margin-top:4px}
.help-split .stage-shot{order:-1}
.cmds{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 20px;margin:16px 0 0;max-width:64ch;align-items:baseline}
.cmds dt{white-space:nowrap}
.cmds dd{margin:0;color:var(--soft)}

/* ---------- Narrower screens ---------- */
@media (min-width:980px){
  .explode.live{height:300vh}
  .explode.live .ex-sticky{position:sticky;top:calc(var(--head) + env(safe-area-inset-top,0px));height:calc(100vh - var(--head));display:flex;align-items:center}
  .explode.live .stage{height:calc(100vh - 140px);max-height:700px}
}
@media (max-width:979px){
  .faq{grid-template-columns:1fr;gap:28px}
  .split{grid-template-columns:1fr;gap:32px}
  .seq{grid-template-columns:1fr;gap:12px}
  .stage-shot{border-radius:14px}
  .guides{grid-template-columns:1fr;gap:24px}
  .toc{position:static}
  .toc ol{display:flex;flex-wrap:wrap;gap:8px;border-left:0}
  .toc a{margin:0;padding:0 14px;height:36px;display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;font-size:14px}
  .toc a.on{border-color:var(--accent)}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
  /* minmax(0,…): the stack's fixed width would otherwise widen the column past a phone's screen and clip the copy. */
  .ex-inner{grid-template-columns:minmax(0,1fr)}
  .explode{padding-block:24px 72px}
  .stage{height:440px;order:-1}
  /* The stack keeps its 600 px and is scaled down; equal negative margins keep it centred in a narrower stage. */
  .stack{margin-inline:calc((100% - 600px) / 2)}
  .shots{grid-template-columns:1fr;gap:24px}
  .shots .stage-shot{order:-1}
  .card,.contact{justify-self:start}
  .help-split .stage-shot{order:0}
  .release{grid-template-columns:1fr;gap:20px}
  .rel-meta{position:static;grid-auto-flow:column;align-items:center;justify-content:start;gap:12px}
  .rel-meta h2{font-size:36px}
}
@media (max-width:820px){
  .nav{display:none}
  .menu{display:block}
  .top-end{margin-left:auto}
  .section{padding-block:80px}
  .legal address{text-align:left}
  .band{padding-block:0 80px}
  .band-inner{flex-direction:column;align-items:flex-start;gap:20px}
  .band .actions{margin:0}
  .mine,.offer,.trio{grid-template-columns:1fr}
  .mine,.trio{gap:24px}
  .offer>div+div{border-left:0;border-top:1px solid var(--line)}
  .specs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .releases{padding-block:0 80px}
  .groups{grid-template-columns:1fr;gap:28px}
}
@media (max-width:560px){
  :root{--head:64px}
  .top .logo img{height:32px;width:107px}
  .top-end>.pill-accent{display:none}
  .qa details p{padding-right:0}
  .band-inner{padding:24px 20px}
  .seq li{padding:22px 20px}
  .stage{height:330px}
  .offer>div,.race{padding:24px 20px}
  .offer .price{font-size:52px;line-height:56px}
  .rel li{grid-template-columns:1fr;gap:2px}
  .card,.contact{padding:24px 20px}
  .card .price{font-size:56px}
  .rel-meta{grid-auto-flow:row}
  .cmds{grid-template-columns:1fr;gap:4px}
  .cmds dd{margin-bottom:10px}
}
@media (max-width:420px){.specs{grid-template-columns:1fr}.specs div{padding:18px 20px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .glow i,.seq li,.seq .n,.toc a,.stage-shot img,.menu>summary .bars::before,.menu>summary .bars::after{transition:none}
  .hero-mark rect{animation:none;opacity:1}
  .caret{animation:none}
}