/* Landing. Default: a plain stacked page (no script, no WebGL).
   html.seq: the fixed stage with the scroll-driven sequence. */
.landing .top{position:fixed;left:0;right:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;padding:22px 34px;justify-content:space-between}
.landing #gl{display:none}
.landing #stage{max-width:760px;margin:0 auto;padding:110px 28px 40px}
.landing .still{display:block;width:min(64vw,300px);height:auto;margin:0 auto 40px}
.cap{margin:0 0 56px}
.cap h1,.cap h2{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--deep);letter-spacing:-.005em}
.cap h2{font-size:27px;line-height:1.22}
.cap h1{font-size:38px;line-height:1.12}
.cap p{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--mute);max-width:300px}
.cap p.fig{color:var(--deep)}
.cap p.fig b{font-weight:500;font-variant-numeric:tabular-nums}
.cap .go{display:inline-block;margin-top:14px;font-size:12.5px}
.cmd{margin-top:26px;display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--deep);padding:0 0 9px;width:300px;max-width:100%}
.cmd input{flex:1;min-width:0;background:none;border:0;outline:0;font:inherit;font-size:15px;color:var(--deep);caret-color:var(--red)}
.cmd input::placeholder{color:var(--deep);opacity:.75}
.cmd button{background:none;border:0;font-size:12.5px;color:var(--ink);border-bottom:1px solid rgba(29,43,184,.3)}
.cmd button:hover{border-color:var(--ink)}
.cap .hint{display:none;margin-top:16px;font-size:11.5px;color:var(--mute)}
.carow{margin-top:16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:13px;font-variant-numeric:tabular-nums;color:var(--deep)}
.carow code{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;word-break:break-all}
.carow>a:first-child:not(.btn){border-color:var(--rule2);color:var(--deep);padding-bottom:3px}
.carow button{background:none;border:0;color:var(--ink)}
.carow .go{margin:0}
.go2{margin-top:20px}
#labs{display:none}
.landing .foot{border-top:1px solid var(--rule);padding:16px 0 0;margin-top:30px}

/* ---- the sequence ---- */
html.seq body{height:900vh;background:var(--bg)}
html.seq.fixed body{height:100vh;overflow:hidden}
html.seq #stage{position:fixed;inset:0;max-width:none;margin:0;padding:0;overflow:hidden;background:radial-gradient(120% 90% at 50% 45%,#F1EEE6 0%,#E8E4DA 55%,#DDD8CB 100%)}
html.seq #gl{display:block;position:absolute;inset:0;width:100%;height:100%}
html.seq .still{display:none}
html.seq .cap{position:absolute;z-index:5;margin:0;max-width:340px;opacity:0;pointer-events:none;will-change:opacity,transform}
html.seq .cap.on{pointer-events:auto}
.cap.r{text-align:left}
html.seq .cap.l{left:7.5vw;top:50%;margin-top:-100px}
html.seq .cap.r{right:7.5vw;top:50%;margin-top:-100px}
html.seq #c0{opacity:1;margin-top:-130px}
html.seq .cap .hint{display:block}
html.seq #c5{left:7.5vw;top:11vh}
html.seq #c6{left:50%;bottom:9vh;transform:translateX(-50%);max-width:none;text-align:center;width:max-content;max-width:92vw}
html.seq #c6 h2{font-size:30px}
html.seq #c6 .carow{justify-content:center}
html.seq #c7{left:50%;top:15vh;transform:translateX(-50%);max-width:none;text-align:center;width:max-content;max-width:92vw}
html.seq #c7 h2{font-size:32px}
html.seq .foot{position:absolute;left:34px;right:34px;bottom:24px;z-index:6;max-width:none;margin:0;opacity:0;pointer-events:none;padding:16px 0 0}
html.seq .foot.on{pointer-events:auto}
html.seq #labs{display:block}
.lab{position:absolute;z-index:4;left:0;top:0;font-size:11px;color:var(--deep);white-space:nowrap;opacity:0;pointer-events:none;letter-spacing:.01em;will-change:transform,opacity}
.lab.s{font-family:var(--serif);font-style:italic;font-size:12.5px}
.lab.red{color:var(--red)}.lab.g{color:var(--green)}.lab.m{color:var(--mute)}

@media(max-width:820px){
  .landing .top{padding:14px 18px}
  .landing .top .nl{display:none}
  html.seq .cap.l,html.seq .cap.r,html.seq #c5{left:6vw;right:6vw;top:auto;bottom:9vh;margin:0;max-width:none}
  html.seq #c0{bottom:8vh}
  html.seq .cap h2{font-size:22px}
  html.seq .cap h1{font-size:30px}
  html.seq .cap p{max-width:34ch}
  html.seq #c6{bottom:12vh}
  html.seq #c6 h2,html.seq #c7 h2{font-size:23px}
  html.seq #c7{top:12vh}
  .carow{gap:12px;font-size:12px}
  .carow code{font-size:10.5px}
  html.seq .foot{left:18px;right:18px;bottom:16px;flex-direction:column;align-items:flex-start;gap:8px}
  html.seq .foot .fl{gap:6px 16px}
    html.seq   .lab{font-size:10px}.lab.s{font-size:11px}
}
@media(max-height:560px){html.seq .cap p{display:none}}
@media(max-height:800px){html.seq #c5{top:9vh}html.seq #c5 .go{display:none}}

/* dark theme */
:root[data-theme=dark] .cmd button{border-bottom-color:rgba(142,162,255,.35)}
html[data-theme=dark].seq #stage{background:#050506}