:root{
  --ink:#f4f6f8;
  --fog:#c9cdd4;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#c9cdd4}
body{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
#c{position:fixed;inset:0;width:100vw;height:100vh;display:block}

/* ---- blocky glitch wordmark (top-left) ---- */
.brand{
  position:fixed;top:34px;left:40px;z-index:5;
  display:flex;gap:6px;
  filter:drop-shadow(0 2px 6px rgba(120,130,140,.5));
}
.brand .b{
  width:34px;height:44px;
  display:grid;place-items:center;
  font-weight:700;font-size:30px;line-height:1;color:#fff;
  background:#111418;
  clip-path:polygon(0 12%,18% 12%,18% 0,82% 0,82% 12%,100% 12%,100% 88%,82% 88%,82% 100%,18% 100%,18% 88%,0 88%);
  animation:glitch 4.5s steps(1,end) infinite;
}
.brand .b.l{background:#1c2026}
@keyframes glitch{
  0%,92%{transform:none;opacity:1}
  93%{transform:translateX(-3px) scaleY(.96);opacity:.85}
  95%{transform:translateX(2px);opacity:1}
  97%{transform:none;opacity:.9}
  100%{transform:none;opacity:1}
}

/* ---- HUD annotation boxes ---- */
.hud{
  position:fixed;z-index:5;
  background:rgba(255,255,255,.82);
  color:#20242b;
  font-size:10.5px;line-height:1.5;letter-spacing:.02em;
  padding:8px 10px;
  border:1px solid rgba(20,24,30,.12);
  box-shadow:0 6px 22px rgba(40,50,60,.18);
  max-width:230px;
}
.hud b{font-weight:700}
.hud .k{color:#6b7280;text-transform:uppercase;letter-spacing:.14em;font-size:9px}
.hud .v{font-weight:700;color:#20242b}
.hud-tl{top:150px;left:40px}
.hud-tr{top:34px;right:40px;width:220px}
.hud-bl{left:40px;bottom:40px;background:rgba(17,20,24,.86);color:#eef1f4;border-color:rgba(255,255,255,.12)}
.hud-bl .v{color:#fff}

#hint{
  position:fixed;bottom:38px;left:50%;transform:translateX(-50%);
  z-index:5;font-size:10px;letter-spacing:.42em;color:rgba(255,255,255,.9);
  text-shadow:0 1px 4px rgba(80,90,100,.6)
}
#credits{
  position:fixed;bottom:12px;right:14px;z-index:5;
  font-size:9.5px;letter-spacing:.06em;color:rgba(60,68,78,.75)
}
#loading{
  position:fixed;inset:0;z-index:9;display:grid;place-items:center;
  background:var(--fog);color:#4b535d;font-size:12px;letter-spacing:.3em;
  transition:opacity .6s ease
}
#loading.done{opacity:0;pointer-events:none}