:root{
  --outer-1:#a6a6a6; --outer-2:#6c6c6c;
  --panel-1:#e2e2e2; --panel-2:#c2c2c2;
  --ink:#141414; --muted:#4c4c4c; --faint:rgba(20,20,20,.38); --hair:rgba(20,20,20,.28);
  --bezel:rgba(255,255,255,.4); --chip:rgba(255,255,255,.55);
  --accent:#ffb21f; --grain-blend:multiply; --grain-op:.09;
  --gap:clamp(8px,2.2vw,30px);
  --pad:clamp(16px,2.2vw,30px);
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --outer-1:#2b2b2b; --outer-2:#0f0f0f; --panel-1:#2a2a2a; --panel-2:#161616;
    --ink:#ededed; --muted:#a9a9a9; --faint:rgba(237,237,237,.38); --hair:rgba(237,237,237,.26);
    --bezel:rgba(255,255,255,.08); --chip:rgba(40,40,40,.75); --grain-blend:overlay; --grain-op:.14;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --outer-1:#2b2b2b; --outer-2:#0f0f0f; --panel-1:#2a2a2a; --panel-2:#161616;
  --ink:#ededed; --muted:#a9a9a9; --faint:rgba(237,237,237,.38); --hair:rgba(237,237,237,.26);
  --bezel:rgba(255,255,255,.08); --chip:rgba(40,40,40,.75); --grain-blend:overlay; --grain-op:.14;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-snap-type:y mandatory;background:var(--outer-2)}
body{margin:0;font-family:Lato,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--outer-2)}
.backdrop{position:fixed;inset:0;z-index:0;background:
  repeating-linear-gradient(100deg,rgba(255,255,255,.035) 0 2px,transparent 2px 9px),
  linear-gradient(165deg,var(--outer-1),var(--outer-2))}
.underglow{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + var(--gap) - 90px);width:min(80vw,1100px);height:160px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,var(--accent) 0%,transparent 68%);opacity:.6;filter:blur(28px);z-index:0;transition:background .6s}
.spacer{height:100vh;height:100svh;scroll-snap-align:start}

.frame{position:fixed;z-index:1;overflow:hidden;
  top:calc(env(safe-area-inset-top,0px) + var(--gap));bottom:calc(env(safe-area-inset-bottom,0px) + var(--gap));
  left:calc(env(safe-area-inset-left,0px) + var(--gap));right:calc(env(safe-area-inset-right,0px) + var(--gap));
  border-radius:clamp(12px,1.5vw,22px);
  background:radial-gradient(120% 95% at 50% 38%,var(--panel-1),var(--panel-2));
  box-shadow:0 0 0 clamp(4px,.55vw,8px) var(--bezel),inset 0 1px 0 rgba(255,255,255,.5),0 40px 70px -30px rgba(0,0,0,.5)}
.frame::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(130% 110% at 50% 45%,transparent 55%,rgba(0,0,0,.14) 100%)}
.frame::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:calc(var(--grain-op) * .6);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block}

.ui{position:absolute;inset:0;padding:var(--pad);pointer-events:none;z-index:3}
.ui a,.ui button,.tune{pointer-events:auto}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.brand{position:absolute;top:var(--pad);left:var(--pad);margin:0;font:500 clamp(.95rem,1.25vw,1.15rem)/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.02em}
.ver{position:absolute;top:calc(var(--pad) + 2.6em);left:var(--pad);font:500 .66rem/1 "JetBrains Mono",ui-monospace,monospace;color:var(--muted)}
.nav{position:absolute;top:var(--pad);right:var(--pad);display:flex;flex-direction:column;align-items:flex-end;gap:.32rem;margin:0;padding:0;list-style:none}
.nav a{color:var(--ink);text-decoration:none;font-size:.82rem;display:inline-flex;gap:.45em;align-items:center}
.nav a:hover{text-decoration:underline;text-underline-offset:3px}

/* HUD details */
.hud{transition:opacity .4s}
.hud-off .hud{opacity:0;visibility:hidden}
.clock{position:absolute;top:var(--pad);left:50%;transform:translateX(-50%);font-size:.62rem;color:var(--muted);display:flex;gap:1.6rem;white-space:nowrap}
.clock b{font-weight:500;color:var(--ink)}
.marks span{position:absolute;width:11px;height:11px;transform:translate(-50%,-50%)}
.marks span::before,.marks span::after{content:"";position:absolute;background:var(--faint)}
.marks span::before{left:5px;top:0;width:1px;height:11px}
.marks span::after{top:5px;left:0;width:11px;height:1px}
.edge{position:absolute;left:calc(var(--pad) * .55);top:30%;bottom:30%;width:1px;background:var(--hair)}
.edge i{position:absolute;left:-2px;width:5px;height:1px;background:var(--faint)}
.readout{position:absolute;right:var(--pad);bottom:calc(var(--pad) + 2.9rem);display:grid;grid-template-columns:auto auto;gap:.22rem .9rem;font-size:.6rem;color:var(--muted);text-align:right}
.readout dt{color:var(--faint)}
.readout dd{margin:0;color:var(--ink);min-width:7ch}

/* slides */
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.slide.is-active{opacity:1;visibility:visible;transition:opacity .4s ease,visibility 0s}
.slide .headline{position:absolute;left:var(--pad);margin:0;font:300 clamp(2rem,4.3vw,4.6rem)/.98 Saira,"Arial Narrow",sans-serif;display:flex;flex-direction:column}
.ln{display:block;overflow:hidden;padding:0 .12em .07em 0;margin-bottom:-.07em}
.ln > span{display:inline-block;transform:translateY(108%);transition:transform .95s cubic-bezier(.2,.75,.1,1) calc(var(--d) * 75ms + 120ms)}
.slide.is-active .ln > span{transform:none}
.headline i{font-style:italic;font-weight:300}
.slide[data-align="bottom"] .headline{bottom:calc(var(--pad) + 2.4rem)}
.slide[data-align="middle"] .headline{top:50%;transform:translateY(-50%)}
.slide[data-align="top"] .headline{top:calc(var(--pad) + 4.6rem)}
.meta{position:absolute;right:calc(var(--pad) + clamp(70px,9vw,150px));top:50%;width:min(30ch,28vw);transform:translateY(-1.2rem);padding:1rem 1.1rem;margin:-1rem -1.1rem;border-radius:14px;background:color-mix(in srgb,var(--panel-1) 72%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.letter{display:block;font:300 clamp(1.1rem,1.6vw,1.5rem)/1 Saira,sans-serif;letter-spacing:.35em;margin-bottom:1.5rem}
.body{margin:0 0 1rem;font-size:.8rem;line-height:1.6;color:var(--muted)}
.feats{list-style:none;margin:0;padding:.75rem 0 0;border-top:1px solid var(--hair);display:grid;gap:.42rem}
.feats li{display:flex;justify-content:space-between;gap:1rem;font-size:.72rem}
.feats li span:last-child{color:var(--muted);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.62rem}
.feats li, .body, .letter{opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease}
.slide.is-active .letter{transition-delay:.25s}.slide.is-active .body{transition-delay:.35s}
.slide.is-active .feats li:nth-child(1){transition-delay:.45s}.slide.is-active .feats li:nth-child(2){transition-delay:.52s}.slide.is-active .feats li:nth-child(3){transition-delay:.59s}
.slide.is-active .feats li,.slide.is-active .body,.slide.is-active .letter{opacity:1;transform:none}
.counter{position:absolute;right:var(--pad);top:50%;transform:translateY(-1.2rem);font:500 .64rem/1 "JetBrains Mono",ui-monospace,monospace;color:var(--muted);text-align:right}
.bar{display:block;width:72px;height:1px;background:var(--hair);margin:.7rem 0 0 auto;position:relative}
.bar i{position:absolute;left:0;top:-.5px;height:2px;background:var(--ink);width:0}
.cta{position:absolute;left:50%;bottom:var(--pad);transform:translateX(-50%);padding:.48rem 1.6rem;border:1px solid var(--hair);border-radius:999px;color:var(--ink);text-decoration:none;font-size:.74rem;background:var(--chip);white-space:nowrap;transition:background .25s,border-color .25s}
.cta:hover{border-color:var(--ink);background:var(--chip)}
.hint{position:absolute;left:50%;bottom:calc(var(--pad) + 2.9rem);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.4rem;font-size:.58rem;color:var(--muted)}
.hint i{width:1px;height:22px;background:linear-gradient(var(--ink),transparent);animation:drip 1.8s ease-in-out infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

.pager{position:absolute;left:var(--pad);bottom:var(--pad);display:flex;gap:.25rem}
.icon-btn{appearance:none;border:0;background:none;color:var(--ink);font:400 1.2rem/1 Saira,sans-serif;width:2rem;height:2rem;display:grid;place-items:center;border-radius:50%;cursor:pointer}
.icon-btn:hover{background:var(--chip)}
.icon-btn:disabled{opacity:.25;cursor:default;background:none}
.dots{position:absolute;right:var(--pad);top:50%;margin-top:2.4rem;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.dots span{width:14px;height:1px;background:var(--hair);transition:width .4s,background .4s}
.dots span.on{width:28px;background:var(--ink)}

.tune-btn{position:absolute;right:var(--pad);bottom:var(--pad);appearance:none;border:1px solid var(--hair);background:var(--chip);color:var(--ink);border-radius:999px;padding:.42rem .95rem;font:500 .68rem/1 "JetBrains Mono",ui-monospace,monospace;cursor:pointer}
.tune{position:absolute;right:var(--pad);bottom:calc(var(--pad) + 2.6rem);width:min(300px,calc(100% - 2*var(--pad)));max-height:calc(100% - 7rem);overflow:auto;padding:1.1rem 1.1rem 1rem;border-radius:16px;background:var(--chip);border:1px solid var(--hair);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 40px -18px rgba(0,0,0,.4);font-size:.78rem;z-index:5}
.tune[hidden]{display:none}
.tune h2{margin:0 0 .9rem;font:400 1rem/1 Saira,sans-serif}
.row{margin:0 0 .95rem;border:0;padding:0}
.row legend,.row label.lbl{display:flex;justify-content:space-between;width:100%;margin-bottom:.45rem;color:var(--muted)}
.swatches{display:flex;gap:.5rem}
.swatches input,.seg input{position:absolute;opacity:0;pointer-events:none}
.swatches label{width:26px;height:26px;border-radius:50%;background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);display:block}
.swatches input:checked + label{outline:2px solid var(--ink);outline-offset:2px}
.swatches input:focus-visible + label{outline:2px dashed var(--ink);outline-offset:3px}
input[type=range]{width:100%;accent-color:var(--ink)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--hair);border-radius:999px;overflow:hidden}
.seg label{text-align:center;padding:.38rem 0;cursor:pointer}
.seg input:checked + label{background:var(--ink);color:var(--panel-1)}
.seg input:focus-visible + label{outline:2px dashed var(--ink);outline-offset:-3px}
.check{display:flex;align-items:center;gap:.5rem;color:var(--muted);cursor:pointer}
.check input{accent-color:var(--ink);width:15px;height:15px}
.reset{appearance:none;background:none;border:0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0;font:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:720px), (max-aspect-ratio:4/5){
  .nav{gap:.2rem}.nav a{font-size:.74rem}
  .clock,.readout,.edge,.marks,.dots,.letter,.feats{display:none}
  .slide .headline,.slide[data-align] .headline{top:auto;transform:none;bottom:calc(var(--pad) + 9.2rem);font-size:clamp(1.9rem,9vw,2.8rem)}
  .meta{left:var(--pad);right:auto;top:auto;bottom:calc(var(--pad) + 3.4rem);width:auto;max-width:34ch;transform:none}
  .counter{top:calc(var(--pad) + 5.6rem);transform:none}
  .hint{display:none}
  .body{font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){
  .ln > span,.feats li,.body,.letter{transition:none!important;transform:none!important}
  .slide:not(.is-active) .feats li,.slide:not(.is-active) .body,.slide:not(.is-active) .letter{opacity:0}
  .hint i{animation:none}
}