*{box-sizing:border-box;}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;}

#ascii-field{position:fixed;inset:0;width:100vw;height:100vh;z-index:100;display:block;background:var(--bg);}

/* surface sits ABOVE the timeline overlay (z400) so the "timeline" nav button stays
   clickable while the timeline is open (click it again to close). It is pointer-events:none,
   so only the nav button itself catches clicks; the rest passes through to the overlay. */
.surface{position:fixed;inset:0;z-index:410;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;gap:var(--s2);padding:var(--s4);pointer-events:none;}
/* keep the name subdued (as the dark veil used to make it) when the timeline is open */
body.timeline-open .mark{opacity:.36;transition:opacity var(--m-slow) var(--ease-out);}

/* the name: delicate, wide-tracked, weightless -- light, not a heavy box */
.mark{font-family:var(--sans);text-transform:uppercase;font-weight:400;font-size:11px;letter-spacing:.36em;
  margin:0;padding-left:.36em;color:var(--gfl4);opacity:.82;background:transparent;}

/* nav: minimal floating labels, no boxes; they spread and brighten when touched (tactile) */
.nav{display:flex;align-items:center;gap:var(--s2);pointer-events:auto;margin-top:var(--s2);}
.nav-sep{color:var(--gfl8);font-family:var(--mono);font-size:10px;}
.navlink{pointer-events:auto;cursor:pointer;background:transparent;color:var(--gfl6);
  font-family:var(--sans);font-size:9px;letter-spacing:.22em;text-transform:lowercase;
  border:0;padding:6px 9px;opacity:.6;
  transition:opacity var(--m-normal) var(--ease-out),color var(--m-normal) var(--ease-out),
    letter-spacing var(--m-normal) var(--ease-out);}
.navlink:hover{opacity:1;color:var(--text);letter-spacing:.26em;}
.navlink[aria-expanded="true"]{opacity:1;color:var(--text);}

/* the audio-activation hint: anchored top, centered, lowercase mono, a slow breath; fades on first interaction */
.hint{position:fixed;top:var(--s3);left:0;right:0;z-index:300;margin:0;text-align:center;pointer-events:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--gfl6);text-transform:lowercase;
  animation:hintbreath 4s var(--ease-in-out) infinite;transition:opacity var(--m-slow) var(--ease-out);}
.hint.gone{opacity:0;animation:none;}
@keyframes hintbreath{0%,100%{opacity:.30}50%{opacity:.62}}

/* ambient audio: one-time field bloom on first interaction + subtle volume control */
#ascii-field.bloom{animation:fieldbloom 8s var(--ease-out);}
@keyframes fieldbloom{0%{filter:brightness(2.3)}100%{filter:brightness(1)}}
/* volume: a delicate hairline with a tiny dot, fully custom (no garish native chrome) */
.vol{position:fixed;right:var(--s4);bottom:var(--s4);z-index:600;opacity:0;pointer-events:none;
  display:flex;align-items:center;transition:opacity var(--m-slow) var(--ease-out);}
.vol.ready{opacity:.4;pointer-events:auto;}
.vol:hover{opacity:.9;}
.vol input{-webkit-appearance:none;appearance:none;width:96px;height:12px;background:transparent;cursor:pointer;margin:0;}
.vol input:focus{outline:none;}
.vol input::-webkit-slider-runnable-track{height:1px;background:var(--gfl6);border:0;border-radius:0;}
.vol input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:7px;height:7px;border:0;border-radius:50%;
  background:var(--gfl3);margin-top:-3px;}
.vol input::-moz-range-track{height:1px;background:var(--gfl6);border:0;}
.vol input::-moz-range-thumb{width:7px;height:7px;border:0;border-radius:50%;background:var(--gfl3);}