:root{
  --orange:#f16622;
  --orange-strong:#b8400e;
  --orange-soft:#fde2d2;
  --ink:#0a0807;
  --paper:#f3efe9;
  --glass:rgba(18,14,12,.55);
  --line:rgba(243,239,233,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--ink);color:var(--paper);
  font-family:'Inter Tight',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}

/* header */
.top{position:fixed;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;gap:.55rem;
  padding:1.15rem 1.4rem;pointer-events:none}
.wordmark-link{pointer-events:auto;display:inline-flex}
.wordmark{height:20px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.92}
.crumb{font-size:.82rem;letter-spacing:.02em;color:rgba(243,239,233,.6);font-weight:600}

/* hint */
.hint{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;
  font-size:.9rem;letter-spacing:.04em;color:rgba(243,239,233,.66);text-align:center;
  pointer-events:none;transition:opacity .8s ease;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.hint span{color:var(--orange)}
.hint.gone{opacity:0}

/* HUD */
.hud{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:6;
  display:flex;align-items:center;gap:.5rem;max-width:min(92vw,720px);
  padding:.42rem .5rem;border:1px solid var(--line);border-radius:999px;
  background:var(--glass);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 12px 40px rgba(0,0,0,.45)}
.spacer{flex:1 1 auto;min-width:0}
.tabs{display:flex;gap:.15rem}
.tab{font:inherit;font-weight:600;font-size:.82rem;letter-spacing:.01em;color:rgba(243,239,233,.7);
  background:none;border:0;padding:.5rem .8rem;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:background .25s,color .25s}
.tab:hover{color:var(--paper)}
.tab.is-on{color:var(--ink);background:var(--paper)}
.ctrl{font:inherit;font-weight:700;font-size:.72rem;letter-spacing:.06em;color:rgba(243,239,233,.82);
  background:rgba(243,239,233,.06);border:1px solid var(--line);border-radius:999px;
  min-width:2.3rem;height:2.1rem;padding:0 .7rem;cursor:pointer;transition:.2s;display:inline-flex;
  align-items:center;justify-content:center}
.ctrl:hover{background:rgba(243,239,233,.12);color:var(--paper)}
.ctrl.is-on{background:var(--orange);border-color:var(--orange);color:#fff}
.play{font-size:.8rem}
.audio{display:flex;align-items:center;gap:.4rem}
.track{font:inherit;font-weight:600;font-size:.78rem;color:var(--paper);background:rgba(10,8,7,.6);
  border:1px solid var(--line);border-radius:999px;padding:.45rem .7rem;cursor:pointer;outline:none}
.track option{background:#14100e;color:var(--paper)}

/* loader */
.loader{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1.1rem;background:var(--ink);transition:opacity .9s ease}
.loader.gone{opacity:0;pointer-events:none}
.loader p{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,239,233,.5)}
.ring{width:38px;height:38px;border-radius:50%;border:2px solid rgba(243,239,233,.15);
  border-top-color:var(--orange);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.nowebgl{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;
  padding:2rem;text-align:center;background:var(--ink);color:rgba(243,239,233,.8)}
.nowebgl:not([hidden]){display:flex}

/* credit */
.credit{position:fixed;right:1.4rem;bottom:1.25rem;z-index:6;display:none;align-items:center;gap:.45rem;
  font-size:.72rem;color:rgba(243,239,233,.42)}
.credit img{filter:brightness(0) invert(1);opacity:.55}
.credit a{color:inherit}
@media(min-width:1024px){.credit{display:flex}}

@media(max-width:560px){
  .hud{gap:.3rem;padding:.36rem .4rem;bottom:1.1rem}
  .tab{padding:.5rem .6rem;font-size:.76rem}
  .crumb{display:none}
  .top{padding:.9rem 1rem}
}