:root {
  --bg: #111215;
  --ink: #141519;
  --paper: #f7f4ee;
  --muted: #8d8f97;
  --dim: #5d5f66;
  --scan: #33f0a8;
  --msg: #ffb04a;
  --bak: #86a6ff;
  --line: rgba(247, 244, 238, 0.14);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--paper); font-family: var(--font); overflow: hidden; -webkit-font-smoothing: antialiased; }
body { touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#stage { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; }
#overlay { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
body.no-cursor, body.no-cursor * { cursor: none !important; }

/* ------------------------------------------------ labels */
.lab { position: absolute; left: 0; top: 0; white-space: normal; width: max-content; will-change: transform, opacity; line-height: 1.1; }
.lab-t { font-size: 1.6em; font-weight: 600; letter-spacing: -0.015em; color: var(--paper); }
.lab-s { font-size: 0.78em; font-weight: 500; color: var(--muted); letter-spacing: 0.04em; margin-top: 0.3em; font-variant: all-small-caps; font-size: 0.95em; }
.lab-s:empty { display: none; }
.lab.big .lab-t { font-size: 2.3em; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.lab.huge .lab-t { font-size: 5em; font-weight: 700; letter-spacing: -0.03em; }
.lab[data-tone='msg'] .lab-t { color: var(--msg); }
.lab[data-tone='bak'] .lab-t { color: var(--bak); }
.lab[data-tone='scan'] .lab-t { color: var(--scan); }
.lab.legend .lab-t { font-size: 1.35em; display: flex; align-items: center; gap: 0.35em; }
.sw { display: inline-block; width: 0.95em; height: 0.95em; border-radius: 0.18em; }
.sw.d { background: #b4560b; box-shadow: inset 0 0 0 0.08em rgba(255,255,255,.12); }
.sw.l { background: #ffd59a; margin-left: .2em; }
.dot { color: var(--dim); margin: 0 .15em; }

/* ------------------------------------------------ widgets */
.letters, .message, .tally, .slot, .meter { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.letters { font-weight: 600; letter-spacing: 0; white-space: pre; text-align: center; position: absolute; left: 0; top: 0; width: 0; height: 0; }
.letters .lt { position: absolute; left: 0; top: 0; color: var(--paper); line-height: 1; }
.letters .lt.hot { color: var(--msg); }
.letters-bits { position: absolute; left: 0; top: 0; color: var(--msg); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .04em; white-space: nowrap; }
.message { font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }
.msg-c { display: inline-block; width: .08em; height: .9em; background: var(--scan); margin-left: .06em; vertical-align: -0.08em; }
.msg-ok { font-size: .32em; font-weight: 600; color: var(--scan); letter-spacing: .08em; text-transform: uppercase; margin-top: .3em; display: flex; align-items: center; gap: .45em; }
.message[style*='center'] .msg-ok { justify-content: center; }
.tick, .cross { display: inline-block; width: 1em; height: 1em; border-radius: 50%; background: var(--scan); position: relative; flex: none; }
.tick::after { content: ''; position: absolute; left: .33em; top: .17em; width: .25em; height: .5em; border: solid var(--bg); border-width: 0 .13em .13em 0; transform: rotate(45deg); }
.cross { background: var(--paper); }
.cross::before, .cross::after { content: ''; position: absolute; left: .45em; top: .2em; width: .12em; height: .6em; background: var(--bg); transform: rotate(45deg); }
.cross::after { transform: rotate(-45deg); }

.tally { width: 13em; text-align: left; }
.tally-bar { display: flex; height: 1.1em; border-radius: .3em; overflow: hidden; gap: .18em; }
.tb.msg { background: #ff9d2e; }
.tb.bak { background: #4f7cff; }
.tally-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: .2em .45em; align-items: baseline; margin-top: .55em; }
.tn { font-size: 1.7em; font-weight: 700; font-variant-numeric: tabular-nums; }
.tn.msg { color: var(--msg); }
.tn.bak { color: var(--bak); }
.tl { color: var(--muted); font-weight: 500; }
.tally-icons { display: flex; gap: .7em; margin-top: .7em; font-size: 2.2em; color: var(--bak); }
.ic { display: inline-flex; transition: none; }

.slot { display: grid; gap: .32em; text-align: left; width: 15em; }
.slot-row { display: grid; grid-template-columns: 2.3em 1fr 3.2em; gap: .55em; align-items: center; opacity: .45; transition: opacity .08s; }
.slot-row.on { opacity: 1; }
.slot-row.win { opacity: 1; }
.slot-cv { width: 2.3em; height: 2.3em; border-radius: .3em; background: #2a2c31; image-rendering: pixelated; }
.slot-bar { height: .55em; background: rgba(255,255,255,.08); border-radius: .3em; overflow: hidden; }
.slot-fill { height: 100%; background: var(--muted); border-radius: .3em; }
.slot-row.on .slot-fill { background: var(--paper); }
.slot-row.win .slot-fill { background: var(--scan); }
.slot-row.win .slot-n { color: var(--scan); }
.slot-n { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.slot-cap { color: var(--muted); font-size: .85em; font-weight: 600; margin-top: .3em; font-variant: all-small-caps; letter-spacing: .05em; line-height: 1.2; }
.slot-cap small { font-weight: 500; }

.meter { text-align: right; }
.m-k { color: var(--muted); font-weight: 600; font-variant: all-small-caps; letter-spacing: .06em; font-size: 1.25em; }
.m-v { font-size: 5.2em; font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.meter[data-ok='0'] .m-v { color: var(--dim); }
.m-s { display: flex; align-items: center; gap: .45em; justify-content: flex-end; font-weight: 600; font-size: 1.3em; margin-top: .25em; color: var(--scan); }
.m-s[data-ok='0'] { color: var(--paper); }
.m-c { color: var(--muted); font-size: .95em; margin-top: .35em; font-weight: 500; }
.meter[style*='-50%'] { text-align: center; }
.meter[style*='-50%'] .m-s { justify-content: center; }


/* ------------------------------------------------ landing */
#landing { position: absolute; inset: 0; display: none; pointer-events: none; }
body[data-mode='landing'] #landing { display: block; }
.hero { position: absolute; left: max(5vw, 24px); top: 50%; transform: translateY(-50%); pointer-events: auto; max-width: 34rem; }
h1 { font-size: clamp(42px, 6.4vw, 104px); line-height: .95; letter-spacing: -0.045em; margin: 0; font-weight: 700; }
.kicker { color: var(--muted); font-size: clamp(16px, 1.5vw, 21px); margin: .9em 0 1.6em; font-weight: 500; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.watch-wrap { position: relative; display: inline-flex; }
.start-hint { position: absolute; left: 50%; top: calc(100% + 12px); padding: .42em .9em; border-radius: 999px; background: var(--scan); color: #04140d; font-size: 14px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; translate: -50% 0; animation: hintIn .5s ease 1.4s forwards, bob 1.8s ease-in-out 1.9s infinite; }
.start-hint::before { content: ''; position: absolute; left: 50%; bottom: 100%; translate: -50% 0; border: 6px solid transparent; border-bottom-color: var(--scan); }
.start-hint .on-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .start-hint .on-pointer { display: none; } .start-hint .on-touch { display: inline; } }
@keyframes hintIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bob { 0%, 100% { translate: -50% 0; } 50% { translate: -50% 4px; } }
.btn { display: inline-flex; align-items: center; gap: .6em; border-radius: 999px; padding: .95em 1.5em; font-weight: 600; font-size: 17px; transition: transform .15s ease, background .2s; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--paper); color: var(--ink); }
.btn.primary small { color: #6b6c72; font-weight: 500; font-size: .8em; }
/* Until the film's sound has loaded, the Watch button fills up and counts the percent. */
.btn.primary { position: relative; overflow: hidden; isolation: isolate; }
.btn.primary::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(51,240,168,.5); transform-origin: left center; transform: scaleX(var(--load, 0)); opacity: 0; transition: transform .35s ease, opacity .5s ease; }
body.loading .btn.primary::before { opacity: 1; }
body.loading:not(.live) .btn.primary::before { transform: scaleX(.08); animation: loadPulse .9s ease-in-out infinite alternate; }
@keyframes loadPulse { from { opacity: .25; } to { opacity: 1; } }
.sub { display: inline-grid; margin-left: .2em; }
.sub > small { grid-area: 1 / 1; transition: opacity .3s ease; font-variant-numeric: tabular-nums; }
.sub .busy, body.loading .sub .ready { opacity: 0; }
body.loading .sub .busy { opacity: 1; }
body.starting .start-hint { display: none; }
body.starting #watch { box-shadow: 0 0 0 3px rgba(51,240,168,.6); }
.btn.ghost { background: rgba(247,244,238,.08); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.ghost:hover { background: rgba(247,244,238,.14); }
.btn.small { padding: .8em 1.3em; }
.play { width: 0; height: 0; border-left: .78em solid currentColor; border-top: .48em solid transparent; border-bottom: .48em solid transparent; margin-left: .1em; }
/* ------------------------------------------------ film controls */
#controls { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: none; align-items: center; gap: 12px; padding: 8px 10px; background: rgba(17,18,21,.72); backdrop-filter: blur(12px); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); opacity: 0; transition: opacity .35s; }
body[data-mode='film']:not(.film-mode) #controls { display: flex; }
body.show-controls #controls { opacity: 1; }
#scrub { position: relative; width: min(38vw, 420px); height: 22px; cursor: pointer; }
#scrub::before { content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 3px; background: rgba(255,255,255,.15); border-radius: 2px; }
#scrub .fill { position: absolute; left: 0; top: 10px; height: 3px; width: calc(var(--k, 0) * 100%); background: var(--paper); border-radius: 2px; }
#beats { display: flex; gap: 4px; }
.chip { width: 26px; height: 26px; border-radius: 50%; font-size: 12px; font-weight: 600; color: var(--muted); background: rgba(255,255,255,.06); }
.chip.on { background: var(--paper); color: var(--ink); }
.ctl { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--paper); }
.ctl svg { width: 20px; height: 20px; }
#mute { position: absolute; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); background: rgba(17,18,21,.6); box-shadow: inset 0 0 0 1px var(--line); width: 44px; height: 44px; }
#mute .off { display: none; }
body.muted #mute .on { display: none; }
body.muted #mute .off { display: block; }
body.film-mode #mute, body.film-mode #controls { display: none !important; }
#loading { position: absolute; left: 0; top: 0; height: 2px; width: 100%; pointer-events: none; }
#loading div { height: 100%; width: calc(var(--load, 1) * 100%); background: var(--scan); opacity: 0; transition: width .2s, opacity .3s; }
body.waiting #loading div { opacity: 1; }

/* ------------------------------------------------ end card + gate */
#end { position: absolute; inset: 0; display: none; pointer-events: none; }
body.ended:not(.film-mode) #end { display: block; }
.end-inner { animation: endIn .8s cubic-bezier(.2,.8,.2,1) .25s both; }
@keyframes endIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.end-panel { max-width: none; }
.end-panel h2 { margin: 0; font-size: clamp(40px, 5.6vw, 96px); line-height: .95; letter-spacing: -0.045em; font-weight: 700; white-space: nowrap; }
.end-sub { margin: .9em 0 1.4em; max-width: 24em; color: var(--muted); font-size: clamp(16px, 1.4vw, 20px); line-height: 1.45; }
body.ended #controls { display: none !important; }
.btn.go { background: var(--scan); color: #04140d; font-weight: 700; animation: glow 2.4s ease-in-out 1.4s infinite; box-shadow: 0 10px 30px -10px rgba(51,240,168,.6); }
.btn.go:hover { background: #63f6c0; }
.btn.go .arrow { display: inline-block; transition: transform .2s ease; }
.btn.go:hover .arrow { transform: translateX(4px); }
@keyframes glow { 0%, 100% { box-shadow: 0 10px 30px -10px rgba(51,240,168,.55), 0 0 0 0 rgba(51,240,168,.25); } 50% { box-shadow: 0 12px 36px -8px rgba(51,240,168,.75), 0 0 0 7px rgba(51,240,168,0); } }
#gate { position: absolute; inset: 0; display: none; align-items: end; justify-content: center; background: transparent; cursor: pointer; }
body[data-mode='filmgate'] #gate { display: flex; }
.gate-btn { color: var(--dim); font-size: 12px; letter-spacing: .04em; padding: 0 0 18px; opacity: .8; }

/* ------------------------------------------------ playground */
#make-ui[hidden] { display: none !important; }

@media (max-aspect-ratio: 23/20) {
  .hero { left: 50%; top: auto; bottom: max(64px, calc(env(safe-area-inset-bottom) + 48px)); transform: translateX(-50%); text-align: center; width: calc(100% - 40px); }
  h1 { font-size: clamp(40px, 12vw, 72px); }
  .kicker { margin: .6em 0 1.2em; }
  .cta { justify-content: center; }
  #landing .hero .cta { margin-top: 52px; }
  .end-panel h2 { font-size: clamp(36px, 10.5vw, 64px); }
  .end-sub { margin: .7em auto .9em; font-size: 15px; }
  .start-hint { top: auto; bottom: calc(100% + 12px); }
  .start-hint::before { bottom: auto; top: 100%; border-bottom-color: transparent; border-top-color: var(--scan); }
  @keyframes bob { 0%, 100% { translate: -50% 0; } 50% { translate: -50% -4px; } }
  .btn { font-size: 16px; }
  #scrub { width: 34vw; }
  #beats { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .end-inner, .btn.go, body.loading .btn.primary::before { animation: none; }
  .start-hint { animation: none; opacity: 1; }
}

.sampling { position: absolute; inset: 0; }
.sd { position: absolute; left: 0; top: 0; border-radius: 50%; background: var(--scan); box-shadow: 0 0 0 2px rgba(17,18,21,.55); }

.ratio { position: absolute; left: 0; top: 0; background: rgba(17,18,21,.92); padding: 1em 1.2em 0.9em; border-radius: .8em; box-shadow: 0 .6em 2em rgba(0,0,0,.35); }
.ratio-strip { display: flex; height: 1.5em; gap: 0; border-radius: .15em; box-shadow: 0 0 0 .1em rgba(247,244,238,.25); }
.rs.d { background: #0e0f12; }
.rs.l { background: var(--paper); }
.rs { transition: box-shadow .05s; position: relative; z-index: 0; }
.ratio-nums { display: flex; margin-top: .45em; font-size: 1.6em; font-weight: 700; font-variant-numeric: tabular-nums; }
.ratio-nums span { text-align: center; flex-basis: 0; transition: opacity .1s; }
.ratio-cap { color: var(--muted); font-size: .95em; margin-top: .5em; font-weight: 500; font-variant: all-small-caps; letter-spacing: .05em; }

/* ------------------------------------------------ playground */
.mk { position: absolute; inset: 0; pointer-events: none; }
.mk > * { pointer-events: auto; }
.mk-top { position: absolute; top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); }
.mk-back { display: inline-flex; align-items: center; gap: .35em; height: 44px; padding: 0 1em 0 .7em; border-radius: 999px; background: rgba(17,18,21,.6); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; font-size: 15px; }
.mk-back svg { width: 18px; height: 18px; }
.mk-status { position: absolute; left: max(4vw, 24px); top: 50%; transform: translateY(-58%); width: min(26vw, 300px); }
.st-state { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; font-size: 17px; color: var(--scan); }
.st-state[data-s='building'] { color: var(--muted); }
.st-state[data-s='building'] .tick { background: var(--dim); }
.st-state[data-s='dead'] { color: var(--paper); }
.st-state[data-s='dead'] .tick { background: var(--paper); }
.st-text { font-size: clamp(22px, 2.4vw, 34px); font-weight: 600; letter-spacing: -0.02em; margin: .25em 0 .6em; word-break: break-word; max-height: 3.6em; overflow: hidden; }
.st-dmg { display: flex; align-items: baseline; gap: .1em; }
.st-n { font-size: clamp(56px, 7vw, 104px); font-weight: 700; letter-spacing: -0.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.st-pct { font-size: clamp(26px, 3vw, 44px); font-weight: 700; }
.st-k { margin-left: .5em; color: var(--muted); font-weight: 600; font-variant: all-small-caps; letter-spacing: .06em; font-size: 18px; }
.st-cap { color: var(--muted); font-size: 14px; margin-top: .5em; font-weight: 500; }
.st-best { color: var(--scan); font-size: 15px; margin-top: .35em; font-weight: 600; }
.st-best:empty, .st-cap:empty { display: none; }
.mk-dock { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(620px, calc(100vw - 32px)); padding: 12px; border-radius: 22px; background: rgba(17,18,21,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--line), 0 20px 50px rgba(0,0,0,.35); display: grid; gap: 10px; }
.mk-input { display: flex; gap: 8px; }
.mk-input input { flex: 1; min-width: 0; height: 48px; border-radius: 14px; border: 0; padding: 0 16px; font: 500 17px var(--font); color: var(--paper); background: rgba(247,244,238,.08); box-shadow: inset 0 0 0 1px var(--line); outline: none; }
.mk-input input:focus { box-shadow: inset 0 0 0 1.5px var(--scan); }
.mk-go { height: 48px; padding: 0 20px; border-radius: 14px; background: var(--paper); color: var(--ink); font-weight: 700; font-size: 16px; }
.mk-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tool { display: inline-flex; align-items: center; gap: .45em; height: 42px; padding: 0 14px; border-radius: 12px; font-weight: 600; font-size: 15px; color: var(--muted); background: rgba(247,244,238,.05); }
.tool svg { width: 18px; height: 18px; }
.tool.on { color: var(--ink); background: var(--paper); }
.t-xray.on { background: rgba(247,244,238,.16); color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--paper); }
.mk-tools .sep { flex: 1; }
.mk-level { display: flex; align-items: center; gap: 6px; }
.lv-k { color: var(--muted); font-weight: 600; font-size: 13px; font-variant: all-small-caps; letter-spacing: .06em; margin-right: 4px; }
.lv { height: 32px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); background: rgba(247,244,238,.05); }
.lv.on { background: rgba(134,166,255,.2); color: var(--bak); box-shadow: inset 0 0 0 1.5px var(--bak); }
.mk-legend { display: none; gap: 12px; flex-wrap: wrap; justify-content: center; font-size: 13px; font-weight: 600; color: var(--muted); padding: 2px 0 2px; }
.xray-on .mk-legend { display: flex; }
.mk-legend span { display: inline-flex; align-items: center; gap: 3px; }
.mk-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.mk-legend i + i { margin-right: 4px; }
.mk-dead { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.9); opacity: 0; pointer-events: none; text-align: center; padding: 26px 30px; border-radius: 24px; background: rgba(17,18,21,.88); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line), 0 30px 80px rgba(0,0,0,.5); transition: opacity .35s, transform .45s cubic-bezier(.2,1.4,.4,1); }
.mk.dead .mk-dead { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; transition-delay: .35s; }
.d-k { color: var(--muted); font-weight: 600; font-variant: all-small-caps; letter-spacing: .08em; font-size: 15px; }
.d1 { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; margin-top: .2em; }
.d2 { font-size: 18px; color: var(--scan); font-weight: 600; margin-top: .35em; }
.d-btns { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.mk-toast { position: absolute; left: 50%; top: 18%; transform: translateX(-50%) translateY(10px); opacity: 0; transition: .25s; background: var(--paper); color: var(--ink); font-weight: 600; padding: .6em 1.1em; border-radius: 18px; font-size: 15px; line-height: 1.35; text-align: center; width: max-content; max-width: min(calc(100vw - 32px), 520px); pointer-events: none; }
.mk-toast.on { opacity: 1; transform: translateX(-50%); }
#make-ui > .mk-toast.on { pointer-events: auto; user-select: text; -webkit-user-select: text; }
@media (max-aspect-ratio: 23/20) {
  .mk-status { left: 50%; top: auto; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 196px); transform: translateX(-50%); width: calc(100vw - 32px); display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'n state' 'n text' 'n cap' 'n best'; column-gap: 14px; align-items: center; }
  .st-dmg { grid-area: n; flex-direction: column; align-items: center; }
  .st-k { margin: 0; font-size: 14px; }
  .st-state { grid-area: state; font-size: 15px; }
  .st-text { grid-area: text; font-size: 20px; margin: .1em 0 .1em; max-height: 2.4em; }
  .st-cap { grid-area: cap; margin: 0; font-size: 12px; }
  .st-best { grid-area: best; margin: 0; font-size: 13px; }
  .st-n { font-size: 64px; }
  .st-pct { font-size: 28px; }
  .tool { padding: 0 11px; font-size: 14px; }
  .mk-dead { top: 36%; width: calc(100vw - 40px); }
}
#make-ui, #make-ui > * { pointer-events: none; }
#make-ui > .mk-top, #make-ui > .mk-dock, #make-ui.dead > .mk-dead { pointer-events: auto; }

.d-why { font-size: 17px; font-weight: 600; color: var(--paper); margin-top: .5em; }
.d-why small { display: block; color: var(--muted); font-weight: 500; font-size: 13px; font-variant: all-small-caps; letter-spacing: .05em; margin-top: .15em; }