/* The /demo threshold. A separate stylesheet rather than an inline block: the
   production CSP is `style-src 'self'`, which blocks inline <style> and style
   attributes outright, so an interstitial styled inline would render as
   unformatted text in production while looking perfect in local preview. */
:root { color-scheme:dark; --ink:#f2f5ee; --muted:#b5c0c2; --amber:#e6b75d; --line:rgba(225,239,237,.22); --void:#050b12; --display:"GT Sectra Display","GT Sectra",Georgia,"Times New Roman",serif; --sans:"Geist Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }
* { box-sizing:border-box; }
html { background:var(--void); }
body { margin:0; min-width:320px; min-height:100svh; display:grid; align-content:center; justify-items:center; padding:clamp(2rem,7vh,5rem) clamp(1.25rem,5vw,3rem); background:var(--void); color:var(--ink); font-family:var(--sans); }
body::before { position:fixed; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse 70% 60% at 22% 18%,rgb(230 183 93 / .07),transparent 62%),radial-gradient(ellipse 60% 55% at 82% 88%,rgb(120 170 190 / .06),transparent 60%); content:""; }
a { color:inherit; text-decoration:none; }

.sheet { position:relative; z-index:1; width:min(46rem,100%); }
.mark { display:flex; align-items:center; gap:.7rem; margin-bottom:clamp(1.6rem,4vh,2.6rem); font-family:Georgia,serif; font-size:1rem; letter-spacing:.02em; }
.mark img { width:26px; height:26px; }

.index { display:flex; align-items:center; gap:.8rem; margin:0 0 1.1rem; color:#d6dedb; font:600 .61rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; }
.index .coordinate { color:var(--amber); }
.index .rule { flex:1 1 auto; height:1px; background:linear-gradient(90deg,rgb(230 183 93 / .85),rgb(230 183 93 / .06)); }

h1 { margin:0 0 1.4rem; font-family:var(--display); font-size:clamp(2.2rem,5.2vw,3.6rem); font-weight:400; letter-spacing:-.05em; line-height:.94; }
.lede { max-width:38rem; margin:0 0 2rem; color:#eef2ed; font-size:clamp(.98rem,1.2vw,1.1rem); line-height:1.62; }

/* What a visitor can actually DO in there. Without this the demo is a room
   with no lights on: people land on a seeded environment, do not know which
   surfaces are real, and leave. */
.tour { display:grid; gap:0; margin:0 0 2rem; border-top:1px solid var(--line); }
.tour div { display:grid; grid-template-columns:2.2rem 1fr; gap:1rem; align-items:baseline; padding:.95rem .2rem; border-bottom:1px solid var(--line); }
.tour b { color:var(--amber); font:600 .68rem/1.5 var(--mono); letter-spacing:.1em; }
.tour p { margin:0; color:#dde4e1; font-size:.92rem; line-height:1.55; }
.tour p span { display:block; margin-top:.2rem; color:#9fabab; font-size:.84rem; }

.notice { display:grid; gap:.55rem; margin:0 0 2rem; padding:1.1rem 1.2rem; border:1px solid var(--line); border-left:1px solid var(--line); background:rgb(230 183 93 / .05); }
.notice b { color:var(--amber); font:600 .62rem/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.notice p { margin:0; color:#dde4e1; font-size:.88rem; line-height:1.6; }

.actions { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.go { display:inline-flex; min-height:48px; align-items:center; gap:1rem; padding:1rem 1.4rem; background:var(--amber); color:#17130c; font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; transition:background .2s,color .2s; }
.go:hover,.go:focus-visible { background:#f8d17e; color:#0d1114; }
.back { display:inline-flex; min-height:48px; align-items:center; color:var(--muted); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; transition:color .2s; }
.back:hover,.back:focus-visible { color:var(--amber); }

.disclosure { max-width:38rem; margin:2.2rem 0 0; color:#9fabab; font-size:.74rem; line-height:1.6; }

@media (max-width:600px) {
  h1 { font-size:clamp(1.9rem,8vw,2.6rem); }
  .tour div { grid-template-columns:1.9rem 1fr; gap:.75rem; }
  .actions { gap:.65rem; }
  .go,.back { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } }