@font-face{font-family:"Fell SC";src:url(/assets/fonts/fell-sc.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Fell Italic";src:url(/assets/fonts/fell-italic.woff2) format("woff2");font-style:italic;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/assets/fonts/plex-mono.woff2) format("woff2");font-display:swap}

:root{
  --void:#050304;
  --bone:#d9cbb3;
  --ash:#6f665c;
  --clot:#8a0a0f;
  --ember:#c4161c;
  --pad:clamp(18px,3.4vw,44px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--void);overflow:hidden}
body{
  color:var(--bone);
  font:13px/1.5 "Plex Mono",ui-monospace,monospace;
  -webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  cursor:none;
}
#void{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}

.hud{position:fixed;inset:0;pointer-events:none;padding:var(--pad);
  transition:opacity 2.4s ease}
body.is-loading .hud{opacity:0}

.eyebrow{position:absolute;top:var(--pad);left:var(--pad);display:flex;align-items:center;gap:12px;
  text-transform:uppercase;letter-spacing:.32em;font-size:10.5px;color:var(--ash)}
.mark{width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 12px var(--ember);
  animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}

.status{position:absolute;top:calc(var(--pad) + 30px);left:var(--pad);display:flex;gap:12px;
  text-transform:uppercase;letter-spacing:.32em;font-size:10.5px}
.status-label{color:#3d3832}
.status-value{color:var(--ash);transition:color .6s}
.status-value[data-level="2"]{color:var(--bone)}
.status-value[data-level="3"]{color:var(--ember);text-shadow:0 0 14px rgba(196,22,28,.6)}

.sound{position:absolute;top:var(--pad);right:var(--pad);pointer-events:auto;cursor:pointer;
  background:none;border:1px solid #2a2622;color:var(--ash);
  font:inherit;font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;
  padding:9px 14px 9px 16px;transition:color .3s,border-color .3s}
.sound:hover,.sound[aria-pressed="true"]{color:var(--bone);border-color:#4a433b}
.sound:focus-visible{outline:1px solid var(--ember);outline-offset:3px}

.title-block{position:absolute;left:var(--pad);bottom:calc(var(--pad) + 34px);max-width:min(92vw,980px)}
.title{position:relative;margin:0;font:400 clamp(54px,11.5vw,184px)/.82 "Fell SC",Georgia,serif;
  letter-spacing:-.01em;color:var(--bone);opacity:.9;
  text-shadow:0 0 40px rgba(0,0,0,.9)}
.title::before,.title::after{content:attr(data-text);position:absolute;inset:0;opacity:0;pointer-events:none}
.title::before{color:var(--ember);transform:translate(-3px,0)}
.title::after{color:#4fd6d0;transform:translate(3px,0);mix-blend-mode:screen}
body.glitch .title::before{opacity:.75;clip-path:inset(18% 0 52% 0)}
body.glitch .title::after{opacity:.35;clip-path:inset(61% 0 9% 0)}
body.glitch .title{transform:translateX(2px) skewX(-3deg)}

.lede{margin:22px 0 0 .3em;font:italic 400 clamp(17px,1.7vw,22px)/1.35 "Fell Italic",Georgia,serif;color:var(--ash);max-width:34ch}

.hint{position:absolute;right:var(--pad);bottom:var(--pad);margin:0;display:flex;gap:14px;align-items:center;
  text-transform:uppercase;letter-spacing:.28em;font-size:10px;color:#4a433b;transition:opacity 1.2s}
.hint span{white-space:nowrap}
.hint .dot{width:3px;height:3px;background:#4a433b;border-radius:50%}
.hint.gone{opacity:0}

.whisper{position:fixed;left:0;top:0;pointer-events:none;z-index:3;
  font:italic 400 clamp(16px,1.5vw,21px)/1.2 "Fell Italic",Georgia,serif;color:var(--bone);
  white-space:nowrap;opacity:0;transition:opacity 1.6s ease;text-shadow:0 0 18px rgba(0,0,0,1),0 0 2px rgba(0,0,0,1)}
.whisper.on{opacity:.82}
.whisper.loud{color:var(--ember);font-family:"Fell SC",Georgia,serif;font-style:normal;letter-spacing:.06em}

.veil{position:fixed;inset:0;background:#000;pointer-events:none;opacity:0;z-index:4;transition:opacity .08s}
.veil.black{opacity:1}

.fallback{position:fixed;inset:auto var(--pad) var(--pad) var(--pad);margin:0;color:var(--ash);font-size:12px}

@media (max-width:640px){
  .eyebrow{font-size:9.5px;letter-spacing:.2em;gap:10px;max-width:calc(100% - 128px)}
  .status{font-size:9.5px;letter-spacing:.2em}
  .sound{font-size:9.5px;letter-spacing:.2em;padding:8px 10px 8px 12px}
  .hint{left:var(--pad);right:auto;bottom:calc(var(--pad) - 4px);font-size:9px;letter-spacing:.2em;gap:10px}
  .title-block{bottom:calc(var(--pad) + 40px)}
  .lede{margin-top:16px}
  .status{top:calc(var(--pad) + 26px)}
}
.for-touch{display:none}
@media (hover:none){
  body{cursor:auto}
  .for-mouse{display:none}
  .for-touch{display:inline}
}
@media (prefers-reduced-motion:reduce){
  .mark{animation:none;opacity:.7}
  body.glitch .title{transform:none}
}