/* Approved N16 / Charter / Scan drift composition. */
body { font-size:18px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.site-masthead,.landing { width:calc(100% - 96px); max-width:944px; margin-inline:auto; }
.site-masthead { margin-bottom:0; }
.hero { position:relative; display:flex; flex-direction:column; align-items:center; padding:26px 0; isolation:isolate; }
.lockup { position:relative; height:257px; display:flex; align-items:center; justify-content:center; gap:46px; width:100%; margin-bottom:18px; }
.orb-well { position:relative; width:226px; height:226px; flex:none; }
.orb-well canvas,.orb-fallback { position:absolute; width:326px; height:326px; max-width:none; left:-50px; top:-50px; }
.orb-fallback img { display:block; width:100%; }
.orb-well canvas { opacity:0; }
.orb-well[data-ready=true] canvas { opacity:1; }
.orb-well[data-ready=true] .orb-fallback { visibility:hidden; }
.identity,.hero-mark { position:relative; width:290px; flex:none; }
.hero-mark { height:176px; display:flex; align-items:center; justify-content:center; }
.logomark { display:block; width:290px; filter:grayscale(1) contrast(8); mix-blend-mode:multiply; }
.ink-motion { position:absolute; pointer-events:none; display:none; }
.hero-mark[data-ink-ready=true]>.logomark { opacity:0; }
.hero-mark[data-ink-ready=true]>.ink-motion { display:block; }
.landing-copy { text-align:center; max-width:100%; }
.landing-copy p:first-child { font:var(--fitted-tagline,24px)/1.4 var(--serif); letter-spacing:-.018em; margin:3px 0 0; white-space:nowrap; }
.landing-copy p:last-child { margin:7px 0 0; font:10px/1.5 var(--serif); letter-spacing:.02em; color:var(--muted); }
.landing-bottom { max-width:562px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:20px 0; }
.repl { font:13px/1.85 var(--mono); color:var(--ink); white-space:nowrap; }
.repl span { color:var(--muted); }
.repl .result { color:var(--accent); }
.tour-link { font:16px/1.5 var(--serif); text-decoration:none; display:flex; align-items:center; gap:8px; color:var(--accent); white-space:nowrap; min-height:32px; }
.tour-link:hover { text-decoration:underline; }
.tour-cue { width:36px; flex:none; filter:grayscale(1) contrast(8); mix-blend-mode:multiply; transform:scaleX(-1); transition:translate .18s ease; }
.tour-link:hover .tour-cue { translate:2px 0; }
.project-footer { margin-top:60px; padding:19px 0; border-top:1px solid var(--line); font:12px/1.5 var(--serif); color:var(--muted); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.project-footer>span { margin-left:auto; }
.project-footer a { color:inherit; text-decoration-color:var(--line); }
@media(prefers-color-scheme:dark) {
  .logomark,.tour-cue { filter:grayscale(1) contrast(8) invert(1); mix-blend-mode:screen; }
  .ink-motion { filter:invert(1); }
}
@media(max-width:760px) {
  .site-masthead,.landing { width:calc(100% - 50px); }
  .lockup { height:225px; gap:27px; }
  .orb-well { width:173px; height:173px; }
  .orb-well canvas,.orb-fallback { width:253px; height:253px; left:-40px; top:-40px; }
  .identity,.hero-mark { width:222px; height:147px; }
  .logomark { width:222px; }
  .landing-copy p:first-child { font-size:var(--fitted-tagline,20px); }
  .landing-bottom { max-width:422px; gap:16px; }
  .repl { font-size:11px; }
  .tour-link { font-size:14px; }
  .tour-cue { width:30px; }
  .project-footer { margin-top:40px; }
}
@media(max-width:480px) {
  .site-masthead,.landing { width:calc(100% - 44px); }
  .hero { padding:24px 0; }
  .lockup { height:182px; gap:18px; margin-bottom:8px; }
  .orb-well { width:116px; height:116px; }
  .orb-well canvas,.orb-fallback { width:178px; height:178px; left:-31px; top:-31px; }
  .identity,.hero-mark { width:158px; height:110px; }
  .logomark { width:158px; }
  .landing-copy p:first-child { font-size:var(--fitted-tagline,clamp(11px,3.35vw,15px)); letter-spacing:-.025em; }
  .tour-link { font-size:13px; gap:6px; }
  .tour-cue { width:24px; }
  .landing-bottom { max-width:100%; gap:12px; padding-block:17px; }
  .repl { font-size:9.25px; }
  .project-footer { font-size:11px; margin-top:38px; }
}
@media(max-width:350px) {
  .site-masthead,.landing { width:calc(100% - 32px); }
  .lockup { gap:12px; }
  .identity,.hero-mark,.logomark { width:145px; }
  .repl { font-size:8.1px; }
  .tour-link { font-size:12px; }
  .tour-cue { width:21px; }
  .landing-bottom { gap:8px; }
}
@media(prefers-reduced-motion:reduce) { .tour-cue { transition:none; } .tour-link:hover .tour-cue { translate:none; } }
/* The exporter uses the production renderer and hides surrounding page content. */
body[data-export=true] .site-masthead,body[data-export=true] .landing-copy,body[data-export=true] .landing-bottom,body[data-export=true] .project-footer { display:none; }
body[data-export=true] .landing { width:880px; max-width:none; margin:0; padding:0; }
body[data-export=true] .hero { padding:12px 0; height:232px; width:880px; }
body[data-export=true] .lockup { height:208px; gap:33px; margin-bottom:0; }
body[data-export=true] .orb-well { width:170px; height:170px; }
body[data-export=true] .orb-well canvas,body[data-export=true] .orb-fallback { width:252px; height:252px; left:-41px; top:-41px; }
body[data-export=true] .hero-mark,body[data-export=true] .identity { width:238px; height:145px; }
body[data-export=true] .logomark { width:238px; }