@font-face{font-family:"Barlow Condensed";src:url(/fonts/barlow-condensed-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(/fonts/plex-sans.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(/fonts/plex-sans-medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/fonts/plex-mono.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --void:#080A09; --char:#20272A; --cyan:#00BCD8; --mint:#BEF5E9; --mauve:#BC69AF; --yellow:#E7D32D;
  --ink:#cdd6d3;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--void)}
body{
  font-family:"Plex Sans",system-ui,sans-serif;color:var(--ink);
  background:var(--void);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.booting #scroll,body.booting #caption,body.booting #hud{opacity:0}

.skip{position:fixed;left:12px;top:-60px;z-index:50;background:var(--void);color:var(--mint);
  border:1px solid var(--cyan);padding:8px 14px;font:500 14px/1 "Plex Mono",monospace;
  border-radius:2px;transition:top .18s}
.skip:focus{top:12px;outline:2px solid var(--cyan);outline-offset:2px}

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

#grain{position:fixed;inset:0;z-index:2;pointer-events:none;mix-blend-mode:soft-light;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;animation:boil 1.1s steps(3) infinite}
@keyframes boil{0%{background-position:0 0}33%{background-position:-70px 30px}66%{background-position:40px -60px}100%{background-position:-20px 20px}}

/* film-style caption: tiny bold yellow, bottom center */
#caption{position:fixed;left:0;right:0;bottom:8.5vh;z-index:6;margin:0;text-align:center;
  pointer-events:none;padding:0 6vw}
#caption figcaption{display:inline-block;font-weight:700;font-size:clamp(15px,1.9vw,22px);
  letter-spacing:.01em;color:var(--yellow);line-height:1.25;
  text-shadow:0 1px 0 rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.6);
  opacity:0;transform:translateY(6px)}
#caption.on figcaption{opacity:1;transform:none;transition:opacity .32s ease,transform .32s cubic-bezier(.2,.9,.25,1)}

#hud{position:fixed;right:14px;bottom:14px;z-index:8;display:flex;gap:8px}
#hud button{font:400 12px/1 "Plex Mono",monospace;color:var(--ink);background:rgba(8,10,9,.55);
  border:1px solid rgba(190,245,233,.22);padding:7px 10px;border-radius:2px;cursor:pointer;
  letter-spacing:.04em;backdrop-filter:blur(4px)}
#hud button:hover{border-color:var(--cyan);color:var(--mint)}
#hud button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

#scroll{position:relative;z-index:4}
.beat{height:120vh}
.beat:first-child{height:110vh}

/* the enter / form */
.enter{position:relative;z-index:5;min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:12vh 6vw 14vh;background:linear-gradient(180deg,rgba(8,10,9,0) 0%,rgba(8,10,9,.72) 22%,var(--void) 55%)}
.enter-inner{width:100%;max-width:520px}
.wordmark{font-family:"Barlow Condensed";font-weight:700;text-transform:lowercase;
  font-size:clamp(48px,10vw,104px);line-height:.92;letter-spacing:.01em;color:var(--mint);
  margin:0 0 6vh;text-align:center;
  text-shadow:0 0 30px rgba(0,188,216,.28)}
#knock .line{display:flex;flex-direction:column;gap:6px;margin:0 0 20px}
#knock label{font:400 12px/1 "Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(190,245,233,.62)}
#knock input{background:transparent;border:0;border-bottom:1px solid rgba(190,245,233,.28);
  color:var(--mint);font:400 17px/1.4 "Plex Sans",sans-serif;padding:8px 2px;border-radius:0}
#knock input:focus{outline:0;border-bottom-color:var(--cyan);box-shadow:0 1px 0 var(--cyan)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.do{display:flex;align-items:center;gap:16px;margin-top:34px}
#knock button{font:400 14px/1 "Plex Mono",monospace;letter-spacing:.12em;text-transform:lowercase;
  color:var(--void);background:var(--mint);border:0;padding:13px 30px;border-radius:2px;cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.9,.25,1),background .16s}
#knock button:hover{background:var(--cyan);transform:translateY(-1px)}
#knock button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
#knock-note{font:400 13px/1 "Plex Mono",monospace;color:var(--yellow);letter-spacing:.03em}
.enter footer{display:flex;justify-content:space-between;gap:18px;margin-top:9vh;
  font:400 12px/1.5 "Plex Mono",monospace;letter-spacing:.04em;color:rgba(190,245,233,.5)}
.enter footer a{color:rgba(190,245,233,.5);text-decoration:none;border-bottom:1px solid transparent}
.enter footer a:hover{color:var(--mint);border-bottom-color:var(--cyan)}

.lost{min-height:70vh;display:flex;align-items:center;justify-content:center;color:var(--mint);
  font:700 clamp(24px,4vw,44px)/1 "Barlow Condensed";text-transform:lowercase}

.fallback{min-height:100vh;display:flex;flex-direction:column;gap:24px;align-items:center;justify-content:center;padding:8vw}
.fallback img{max-width:100%;height:auto;border:1px solid rgba(0,188,216,.25)}
.fallback p{font-family:"Barlow Condensed";font-weight:700;font-size:clamp(22px,4vw,40px);color:var(--mint);text-transform:lowercase;margin:0}

/* reduced motion / no-webgl static path */
body.still #stage,body.still #grain{position:fixed}
body.still #scroll{z-index:4}
body.still .beat{height:auto}
body.no3d #stage{display:none}

@media (max-width:520px){
  #caption{bottom:11vh}
  .enter{padding:10vh 7vw 12vh}
}
@media (prefers-reduced-motion:reduce){
  #grain{animation:none}
}