/* Direction 2 v2: Ribbon. Daylight, warm paper, one satin ribbon; then night at the ribbon's edge. */
:root { --paper:#f1ede4; --ink:#0e0e10; --blue:#2a3bff; --red:#ff3d5a; --amber:#ffb000; --fg:#0e0e10; --fgsoft:rgba(14,14,16,.7); --line:rgba(14,14,16,.16);
  --g:clamp(1.1rem,3.6vw,3.4rem); --display:"Anton",Impact,"Arial Narrow",sans-serif; --serif:"Instrument Serif",Georgia,serif; --sans:"Bricolage Grotesque",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace; }
*,*::before,*::after { box-sizing:border-box; } * { margin:0; }
html { background:var(--paper); scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body { font-family:var(--sans); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.55; }
a { color:inherit; text-decoration:none; } canvas { display:block; } i { font-family:var(--serif); font-style:italic; font-weight:400; }
:focus-visible { outline:3px solid var(--blue); outline-offset:3px; border-radius:6px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.skip { position:fixed; z-index:60; left:1rem; top:-4rem; background:var(--ink); color:var(--paper); padding:.7rem 1rem; border-radius:8px; font-weight:600; transition:top .2s; } .skip:focus { top:1rem; }
.ns { padding:6rem var(--g) 3rem; max-width:44rem; }

.btn { display:inline-flex; align-items:center; justify-content:center; font:600 .95rem/1 var(--sans); color:var(--paper); background:var(--ink); padding:.95rem 1.5rem; border-radius:999px; border:0; cursor:pointer; transition:transform .15s, box-shadow .2s; white-space:nowrap; box-shadow:0 10px 24px rgba(14,14,16,.22); position:relative; }
.btn:hover { transform:translateY(-2px); } .btn:active { transform:translateY(1px) scale(.99); }
.btn.ghost { background:transparent; color:var(--fg); box-shadow:inset 0 0 0 1.5px currentColor; } .btn.sm { padding:.62rem 1.1rem; font-size:.86rem; } .btn.big { padding:1.15rem 2rem; font-size:1.05rem; }
.nav { position:fixed; z-index:40; inset:0 0 auto 0; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:max(1rem,env(safe-area-inset-top)) var(--g) 1rem; color:var(--fg); transition:background .3s; }
.nav.solid { background:rgba(14,14,16,.86); backdrop-filter:blur(14px); color:var(--paper); }
.mark { display:inline-flex; align-items:center; gap:.5rem; font:700 1.4rem/1 var(--sans); letter-spacing:-.04em; } .mark i { width:.8rem; height:.8rem; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--red) 60%,var(--amber)); display:block; }
.nav nav { display:flex; gap:clamp(1rem,3vw,2.2rem); font-size:.92rem; position:absolute; left:50%; transform:translateX(-50%); } .nav nav a { padding:.4rem 0; border-bottom:1.5px solid transparent; } .nav nav a:hover { border-color:currentColor; }
.nav .btn { background:var(--ink); color:var(--paper); } .nav.solid .btn, .nav .btn.night { background:var(--paper); color:var(--ink); }

.pin { height:640svh; position:relative; }
.stage { position:sticky; top:0; height:100svh; min-height:540px; overflow:hidden; background:var(--paper); isolation:isolate; color:var(--fg); }
#gl { position:absolute; inset:0; width:100%; height:100%; touch-action:pan-y; cursor:default; transition:opacity .8s; } #gl.grab { cursor:grab; } #gl.holding { cursor:grabbing; }
.stage:not(.ready) #gl { opacity:0; }
.grain { position:absolute; inset:0; pointer-events:none; z-index:2; opacity:.3; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.caps { position:absolute; inset:0; pointer-events:none; z-index:3; }
.cap { position:absolute; left:var(--g); bottom:7.6rem; width:min(27rem,calc(100% - 2*var(--g))); opacity:0; visibility:hidden; transform:translateY(18px); transition:opacity .55s, transform .55s, visibility 0s linear .55s; }
.cap.on { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.cap.right { left:auto; right:var(--g); }
.eyebrow,.kicker { font:500 .72rem/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase; margin-bottom:.9rem; }
.cap h2 { font:400 clamp(2.6rem,4.8vw,4.6rem)/.92 var(--display); text-transform:uppercase; letter-spacing:-.005em; margin-bottom:1rem; } .cap h2 i { text-transform:none; font-size:1.02em; letter-spacing:-.01em; }
.lede { font-size:clamp(1rem,1.2vw,1.12rem); max-width:25rem; text-wrap:pretty; }
.acts { position:absolute; z-index:4; left:var(--g); bottom:3.4rem; } .act { position:absolute; left:0; bottom:0; display:flex; gap:.6rem; flex-wrap:wrap; opacity:0; visibility:hidden; transition:opacity .5s, visibility 0s linear .5s; width:max-content; max-width:calc(100vw - 2*var(--g)); } .act.on { opacity:1; visibility:visible; transition-delay:0s; }
.hint { position:absolute; z-index:4; left:var(--g); top:5.4rem; font:400 .7rem/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--fgsoft); pointer-events:none; transition:opacity .4s; }
.hint .touch { display:none; } @media (hover:none) { .hint .fine { display:none; } .hint .touch { display:inline; } }
.dial { position:absolute; z-index:5; right:var(--g); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:.5rem; }
.dial button { all:unset; box-sizing:border-box; cursor:pointer; width:.9rem; height:2.2rem; border-radius:99px; background:var(--c, currentColor); opacity:.3; transition:opacity .25s, transform .25s; } .dial button:nth-child(1) { --c:var(--blue); } .dial button:nth-child(2) { --c:var(--red); } .dial button:nth-child(3) { --c:var(--amber); } .dial button:nth-child(4) { --c:var(--blue); } .dial button:nth-child(5) { --c:var(--red); }
.dial button:hover { opacity:.7; } .dial button[aria-current="true"] { opacity:1; transform:scaleY(1.35); } .dial button:focus-visible { outline:3px solid var(--fg); outline-offset:3px; }
.dock { position:absolute; z-index:6; left:50%; transform:translateX(-50%); bottom:max(1.4rem,env(safe-area-inset-bottom)); }
.picker { display:flex; gap:.3rem; padding:.35rem; border-radius:99px; background:rgba(241,237,228,.72); backdrop-filter:blur(14px); box-shadow:inset 0 0 0 1px rgba(14,14,16,.16), 0 14px 40px rgba(14,14,16,.2); transition:background .4s; } .night .picker { background:rgba(14,14,16,.7); box-shadow:inset 0 0 0 1px rgba(241,237,228,.2); color:var(--paper); }
.picker button { all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:.6rem; padding:.6rem 1.1rem .6rem .7rem; border-radius:99px; font:600 .88rem/1 var(--sans); position:relative; transition:background .3s, color .3s, transform .12s; }
.picker button i { width:1.6rem; height:.5rem; border-radius:99px; background:var(--c); display:block; } .picker button:active { transform:scale(.96); }
.picker button[aria-checked="true"] { background:var(--ink); color:var(--paper); } .night .picker button[aria-checked="true"] { background:var(--paper); color:var(--ink); }
.picker button:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.nogl .pin { height:auto; } .nogl .stage { position:relative; height:auto; padding:7rem var(--g) 4rem; } .nogl #gl,.nogl .dial,.nogl .hint,.nogl .acts,.nogl .dock,.nogl .caps { display:none; }
.nogl .sr { position:static; width:auto; height:auto; clip:auto; clip-path:none; white-space:normal; max-width:38rem; } .nogl .sr h1 { font:400 clamp(3rem,10vw,6rem)/.9 var(--display); text-transform:uppercase; margin-bottom:1rem; } .nogl .sr h2 { margin-top:1.4rem; font:400 1.6rem var(--display); text-transform:uppercase; }

/* ---------------------------------------------------------- after the edge: night */
main { position:relative; z-index:2; background:var(--ink); color:var(--paper); --line:rgba(241,237,228,.16); --fgsoft:rgba(241,237,228,.72); }
.edge { height:14px; background:linear-gradient(90deg,var(--blue),var(--red) 45%,var(--amber) 75%,var(--blue)); }
main section { padding:clamp(3.6rem,8vw,7rem) var(--g); position:relative; }
main h2 { font:400 clamp(3rem,8vw,8.2rem)/.88 var(--display); text-transform:uppercase; letter-spacing:-.005em; text-wrap:balance; } main h2 i { text-transform:none; font-size:1.02em; letter-spacing:-.01em; }
main header { margin-bottom:clamp(2rem,4vw,3.4rem); } main .sub { margin-top:1.2rem; color:var(--fgsoft); max-width:36rem; } .kicker { color:var(--fgsoft); }
code,pre { font-family:var(--mono); }
.rv { opacity:0; transform:translateY(34px); transition:opacity .9s, transform .9s cubic-bezier(.2,.7,.2,1); } .rv.in { opacity:1; transform:none; } @media (prefers-reduced-motion:reduce) { .rv { opacity:1; transform:none; transition:none; } }

.rates { padding-top:clamp(3rem,6vw,5rem) !important; }
.trio { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,2rem); border-top:1px solid var(--line); }
.rate { padding:2rem 0 1rem; } .rate b { display:block; font:400 clamp(4.5rem,13vw,13rem)/.85 var(--display); color:var(--c); letter-spacing:-.02em; } .rate span { display:block; margin-top:1rem; font:500 .8rem var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--fgsoft); }
.rate::after { content:""; display:block; height:10px; margin-top:1.2rem; background:var(--c); border-radius:99px; }
.ctx { margin-top:2.4rem; font-size:1.15rem; color:var(--fgsoft); } .ctx b { font:400 2.4rem var(--display); color:var(--paper); margin-right:.4rem; vertical-align:-.1em; }

.rows { border-top:1px solid var(--line); }
.row { --c:var(--blue); display:grid; grid-template-columns:.6rem 3rem 1.2fr 1.6fr 1.1fr auto; gap:1.6rem; align-items:center; padding:2rem 0; border-bottom:1px solid var(--line); position:relative; transition:background .3s, padding .3s; }
.row .bar { align-self:stretch; background:var(--c); border-radius:99px; } .row .n { font:500 .75rem var(--mono); color:var(--fgsoft); }
.row:hover { background:linear-gradient(90deg,color-mix(in srgb,var(--c) 12%,transparent),transparent); }
.row h3 { font:400 clamp(2rem,3.4vw,3.2rem)/1 var(--display); text-transform:uppercase; } .row .id { font:400 .72rem var(--mono); color:var(--fgsoft); margin-top:.4rem; word-break:break-all; }
.row .what p { color:var(--fgsoft); margin-bottom:.6rem; } .row ul { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:.35rem; } .row li { font-size:.76rem; padding:.25rem .6rem; border-radius:99px; box-shadow:inset 0 0 0 1px var(--line); color:var(--fgsoft); }
.row .cost b { display:block; font:400 1.5rem/1.1 var(--display); color:var(--c); letter-spacing:.02em; } .row .cost span { display:block; color:var(--fgsoft); font-size:.82rem; margin-top:.2rem; } .row .cost em { font:500 .66rem var(--mono); letter-spacing:.14em; text-transform:uppercase; font-style:normal; color:var(--paper); }
.sel { all:unset; box-sizing:border-box; cursor:pointer; font:600 .86rem/1 var(--sans); padding:.9rem 1.2rem; border-radius:99px; box-shadow:inset 0 0 0 1.5px var(--line); color:var(--paper); transition:background .2s, transform .12s, color .2s; white-space:nowrap; } .sel:hover { background:rgba(241,237,228,.1); } .sel:active { transform:scale(.97); } .sel:focus-visible { outline:3px solid var(--amber); outline-offset:3px; }
.row[data-on="true"] .sel { background:var(--c); color:#fff; box-shadow:none; } .row[data-on="true"] { background:linear-gradient(90deg,color-mix(in srgb,var(--c) 16%,transparent),transparent); }

.steps { list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2.4vw,2.4rem); margin-bottom:clamp(2.4rem,5vw,4rem); }
.steps li { border-top:1px solid var(--line); padding-top:1.4rem; } .steps span { font:400 5rem/1 var(--display); color:transparent; -webkit-text-stroke:1.5px var(--paper); display:block; } .steps li:nth-child(1) span { -webkit-text-stroke-color:var(--blue); } .steps li:nth-child(2) span { -webkit-text-stroke-color:var(--red); } .steps li:nth-child(3) span { -webkit-text-stroke-color:var(--amber); }
.steps b { display:block; font:400 1.8rem/1 var(--display); text-transform:uppercase; margin:.8rem 0 .5rem; } .steps p { color:var(--fgsoft); }
.tbl-wrap { overflow-x:auto; border-block:1px solid var(--line); } .tbl { width:100%; border-collapse:collapse; }
.tbl th,.tbl td { padding:1.3rem .8rem; text-align:right; border-bottom:1px solid var(--line); font:400 clamp(1.5rem,3vw,2.8rem)/1.1 var(--display); } .tbl td { color:var(--c); }
.tbl thead th { font:500 .68rem/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--fgsoft); } .tbl th:first-child,.tbl td:first-child { text-align:left; padding-left:0; }
.tbl tbody th { font:400 clamp(1.2rem,2vw,1.8rem)/1.2 var(--display); text-transform:uppercase; } .tbl tbody th small { display:block; font:400 .78rem var(--sans); text-transform:none; color:var(--fgsoft); margin-top:.2rem; } .tbl tr:last-child > * { border-bottom:0; }
.fine { margin-top:1.6rem; font-size:.86rem; color:var(--fgsoft); max-width:46rem; } .fine b { color:var(--paper); }

.dev { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr); gap:clamp(2rem,5vw,5rem); align-items:center; } .dev header { margin:0; }
.ticks { list-style:none; padding:0; margin:1.6rem 0 1.8rem; display:grid; gap:.7rem; } .ticks li { display:flex; gap:.8rem; align-items:center; } .ticks li::before { content:""; width:1.4rem; height:.4rem; border-radius:99px; background:var(--c, var(--blue)); } .ticks li:nth-child(2)::before { background:var(--red); } .ticks li:nth-child(3)::before { background:var(--amber); } .ticks li:nth-child(4)::before { background:var(--blue); }
.link { display:inline-flex; gap:.6rem; font-weight:600; padding-bottom:.25rem; border-bottom:2px solid var(--amber); } .link:hover { color:var(--amber); }
.term { border-radius:18px; overflow:hidden; background:#07070a; box-shadow:0 30px 70px rgba(0,0,0,.5), inset 0 0 0 1px var(--line); position:relative; }
.term::before { content:""; display:block; height:10px; background:linear-gradient(90deg,var(--blue),var(--red) 50%,var(--amber)); }
.tabs { display:flex; gap:.4rem; align-items:center; padding:.8rem 1rem; } .tabs button { all:unset; box-sizing:border-box; cursor:pointer; font:500 .72rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; padding:.55rem .8rem; border-radius:6px; color:var(--fgsoft); } .tabs button[aria-selected="true"] { background:var(--paper); color:var(--ink); } .tabs .copy { margin-left:auto; box-shadow:inset 0 0 0 1px var(--line); color:var(--paper); } .tabs button:focus-visible { outline:3px solid var(--amber); outline-offset:2px; }
.term pre { padding:.4rem 1.4rem 1.6rem; overflow:auto; font-size:clamp(.72rem,1.1vw,.88rem); line-height:1.85; color:#e6e1d6; min-height:15rem; } .term pre .k { color:var(--red); } .term pre .s { color:var(--amber); }

.cta { background:var(--paper); color:var(--ink); text-align:center; --fgsoft:rgba(14,14,16,.7); --line:rgba(14,14,16,.16); padding-bottom:clamp(5rem,10vw,9rem) !important; }
.cta .kicker { color:var(--fgsoft); } .cta h2 { max-width:12ch; margin:0 auto; } .cta .sub { margin:1.2rem auto 2rem; color:var(--fgsoft); } .btns { display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }
.cta .btn { background:var(--ink); color:var(--paper); } .cta .btn.ghost { background:transparent; color:var(--ink); }
.cta::before { content:""; position:absolute; left:0; right:0; top:0; height:14px; background:linear-gradient(90deg,var(--blue),var(--red) 45%,var(--amber) 75%,var(--blue)); }
.status { list-style:none; padding:0; max-width:34rem; margin:2.6rem auto 0; display:grid; gap:.45rem; text-align:left; color:var(--fgsoft); font-size:.94rem; } .status li { display:flex; gap:.7rem; } .status li::before { content:""; width:1.2rem; height:.4rem; border-radius:99px; margin-top:.55rem; background:var(--blue); flex:none; } .status li:nth-child(2)::before { background:var(--red); } .status li:nth-child(3)::before { background:var(--amber); }
footer { display:flex; justify-content:space-between; align-items:center; gap:1rem 2rem; flex-wrap:wrap; padding:1.6rem var(--g) calc(1.6rem + env(safe-area-inset-bottom)); background:var(--ink); color:rgba(241,237,228,.72); font-size:.88rem; position:relative; z-index:2; } footer nav { display:flex; gap:1.4rem; } footer a:hover { color:var(--paper); } footer .mark { color:var(--paper); }

@media (max-width:980px) { .nav nav { display:none; } .dial { display:none; } .row { grid-template-columns:.5rem 1fr; gap:1rem 1.2rem; } .row .n { display:none; } .row .bar { grid-row:1 / span 4; } .row > * { grid-column:2; } .steps,.dev { grid-template-columns:minmax(0,1fr); } .trio { grid-template-columns:minmax(0,1fr); } }
@media (max-width:760px) {
  .cap { bottom:6.4rem; width:calc(100% - 2*var(--g)); } .cap.right { right:auto; left:var(--g); } .cap h2 { font-size:2.6rem; } .lede { font-size:.95rem; }
  .acts { bottom:2.2rem; } .cap[data-ch="0"] { bottom:8.6rem; } .cap[data-ch="4"] { bottom:10.4rem; } .act[data-ch="0"] { display:none; } .act[data-ch="4"] { bottom:4.4rem; }
  .picker button { flex-direction:column; align-items:flex-start; padding:.55rem .6rem; font-size:.7rem; gap:.35rem; white-space:nowrap; } .picker button i { width:1.3rem; height:.3rem; } .hint { top:4.6rem; font-size:.6rem; }
  .tbl th,.tbl td { padding:1rem .4rem; }
}
@media (prefers-reduced-motion:reduce) { .cap,.act { transition:none; } }