:root {
  --bg: #04050a;
  --ink: #e9ecf5;
  --ink-2: #9aa1b8;
  --ink-3: #5d6378;
  --line: rgba(233, 236, 245, .14);
  --glass: rgba(10, 12, 22, .55);
  --accent: #9fd8ff;
  --red: #ff2b3a;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --disp: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --bg: #04050a; }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; }
body { font-family: var(--mono); -webkit-font-smoothing: antialiased; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
#stageWrap { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#stage { position: absolute; left: 50%; top: 50%; transform-origin: 0 0; overflow: hidden; background: var(--bg); }
.render #stage { left: 0; top: 0; transform: none !important; }
.render #ui, .render #about { display: none !important; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------------- HUD (designed in px on a 1080 short side) */
#hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--mono); color: var(--ink); text-transform: uppercase; letter-spacing: .06em; }
.hud-0 #hud { display: none; }
.hud-1 .beat-only { display: none !important; }

.hd { position: absolute; top: 40px; left: 44px; right: 44px; display: flex; justify-content: space-between; align-items: flex-start; }
.hd-l { display: flex; flex-direction: column; gap: 8px; }
.hd-l b { font-weight: 700; font-size: 19px; letter-spacing: .16em; display: flex; align-items: center; gap: 12px; }
.rec { width: 11px; height: 11px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px var(--red); }
.sub { font-size: 13px; color: var(--ink-2); letter-spacing: .1em; }
.hd-r { text-align: right; display: flex; flex-direction: column; gap: 8px; font-variant-numeric: tabular-nums; }
#clock { font-size: 19px; font-weight: 500; letter-spacing: .08em; }
#rate { font-size: 13px; color: var(--ink-2); }
.tag { display: none; font-size: 12px; letter-spacing: .14em; color: var(--accent); border: 1px solid currentColor; padding: 5px 9px 4px; border-radius: 2px; }

.card { position: absolute; background: var(--glass); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px 16px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.card-k { font-size: 11px; letter-spacing: .16em; color: var(--ink-2); display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-k i { font-style: normal; color: var(--accent); }

#stim { left: 44px; bottom: 40px; width: 490px; height: 253px; display: grid; grid-template-columns: 196px 1fr; column-gap: 18px; align-items: start; }
#stim .card-k { grid-column: 1 / -1; }
#stimImg { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; border: 1px solid var(--line); background: #000; }
.stim-meta { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 0; }
.stim-meta .big { font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: .04em; margin-bottom: 4px; }
.stim-meta .row { display: flex; justify-content: space-between; gap: 8px; }
.stim-meta .row span:last-child { color: var(--ink); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; margin-right: 6px; border: 1px solid rgba(255,255,255,.25); }
.blink { animation: blink .5s steps(2) infinite; }
.render .blink { animation: none; }
@keyframes blink { 50% { opacity: .25; } }
.prm { font-size: 11px; color: var(--ink-2); }
.prm .row { display: flex; justify-content: space-between; margin-bottom: 5px; }
.prm .row b { color: var(--ink); font-weight: 500; }
.prm .bar { height: 4px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.prm .bar i { display: block; height: 100%; width: 0; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.prm.on .row span { color: var(--accent); }

/* 3D-anchored region labels */
#labels { position: absolute; inset: 0; }
#labels svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lab { position: absolute; white-space: nowrap; font-size: 12px; letter-spacing: .14em; color: var(--ink); padding-bottom: 8px; }
.lab.r { transform: translate(0, -100%); text-align: left; }
.lab.l { transform: translate(-100%, -100%); text-align: right; }
.lab .v { display: block; color: var(--ink-2); font-size: 11px; margin-top: 4px; font-variant-numeric: tabular-nums; }

#rasterBox { position: absolute; left: 550px; right: 44px; bottom: 40px; height: 253px; background: var(--glass); border: 1px solid var(--line); border-radius: 6px; }
#trace, #raster { position: absolute; left: 0; width: 100%; }
#trace, #raster { left: 16px; width: calc(100% - 32px); }
#trace { top: 44px; height: 44px; }
#raster { top: 98px; height: 138px; }
.raster-k { position: absolute; top: 15px; left: 16px; right: 16px; display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); letter-spacing: .14em; }

/* beats */
#beat { position: absolute; left: 44px; right: 44px; bottom: 314px; text-align: center; text-transform: none; letter-spacing: 0; }
#beat .w { font-family: var(--disp); font-weight: 800; font-size: 104px; line-height: .9; letter-spacing: -.035em; text-transform: uppercase; text-shadow: 0 0 40px rgba(0,0,0,.7); }
#beat .w.m { font-size: 72px; }
#beat .w.s { font-size: 50px; line-height: .98; letter-spacing: -.02em; }
#beat .cap { font-family: var(--disp); font-weight: 500; font-size: 27px; color: var(--ink-2); margin-bottom: 14px; letter-spacing: -.005em; text-shadow: 0 0 20px rgba(0,0,0,.8); }
#beat .chip { display: inline-flex; align-items: center; gap: 16px; margin-top: 18px; font-family: var(--mono); font-size: 30px; font-weight: 700; letter-spacing: .06em; padding: 10px 20px 10px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--glass); }
#beat .chip i { width: 46px; height: 46px; border-radius: 4px; display: block; box-shadow: 0 0 30px var(--accent); }
#beat .red { color: var(--red); text-shadow: 0 0 30px rgba(255, 43, 58, .6); }
#beat .pop { animation: pop .35s cubic-bezier(.2,1.4,.3,1) both; }
.render #beat .pop { animation: none; }
@keyframes pop { from { transform: scale(.86); opacity: 0; } }

/* ---- 9:16: brain on top, beats in the middle, stimulus + raster stacked below */
.f-9x16 .hd { top: 64px; }
.f-9x16 #stim { left: 44px; right: 44px; width: auto; height: auto; bottom: 340px; grid-template-columns: 300px 1fr; column-gap: 26px; padding: 18px 22px 22px; }
.f-9x16 .stim-meta { font-size: 19px; gap: 16px; padding-top: 4px; }
.f-9x16 .stim-meta .big { font-size: 56px; margin-bottom: 10px; }
.f-9x16 .prm { font-size: 17px; }
.f-9x16 .prm .row { margin-bottom: 8px; }
.f-9x16 .prm .bar { height: 6px; }
.f-9x16 .card-k { font-size: 15px; margin-bottom: 16px; }
.f-9x16 .sw { width: 16px; height: 16px; }
.f-9x16 .raster-k { font-size: 14px; }
.f-9x16 .hd-l b, .f-9x16 #clock { font-size: 24px; }
.f-9x16 .sub, .f-9x16 #rate { font-size: 16px; }
.f-9x16 #rasterBox { left: 44px; right: 44px; bottom: 64px; height: 246px; }
.f-9x16 #raster { height: 132px; }
.f-9x16 #beat { bottom: 760px; }
.f-9x16 #beat .w { font-size: 132px; }
.f-9x16 #beat .w.m { font-size: 92px; }
.f-9x16 #beat .w.s { font-size: 62px; }
.f-9x16 #beat .cap { font-size: 32px; }
.f-9x16 .lab { font-size: 14px; }
.f-9x16 .lab .v { font-size: 13px; }
/* ---- 4:5 */
.f-4x5 #stim, .f-4x5 #rasterBox { bottom: 48px; }
.f-4x5 #beat { bottom: 330px; }
/* ---- 16:9: stimulus card as a left column */
.f-16x9 #stim { top: 150px; bottom: auto; width: 300px; height: auto; grid-template-columns: 1fr; row-gap: 14px; }
.f-16x9 #rasterBox { left: 400px; right: 400px; }
.f-16x9 #beat { left: 400px; right: 400px; bottom: 318px; }

/* ---------------------------------------------------------------- controls (view mode only) */
#ui { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #070810; font-family: var(--disp); font-size: 14px; }
.seg { display: inline-flex; background: #0d0f1a; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button, .btn { appearance: none; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-weight: 500; padding: 7px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #05060a; }
.btn { border: 1px solid var(--line); background: #0d0f1a; color: var(--ink); }
.btn:hover, .seg button:hover { color: var(--ink); }
#play { width: 40px; height: 36px; padding: 0; display: inline-grid; place-items: center; }
#scrubWrap { flex: 1 1 260px; position: relative; height: 28px; display: flex; align-items: center; min-width: 200px; }
#scrub { width: 100%; accent-color: var(--ink); }
#ticks { position: absolute; left: 0; right: 0; top: 0; height: 6px; pointer-events: none; }
#ticks i { position: absolute; top: 0; width: 2px; height: 6px; background: var(--accent); }
#ftime { font-family: var(--mono); font-size: 12px; color: var(--ink-2); min-width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.lbl { color: var(--ink-3); font-size: 12px; margin-right: -6px; }

#about { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: #080a12; border-left: 1px solid var(--line); transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); overflow-y: auto; padding: 28px 28px 60px; font-family: var(--disp); z-index: 5; }
#about.open { transform: none; }
#about h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 18px; line-height: 1.05; }
#about h3 { font-size: 13px; font-family: var(--mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 26px 0 10px; }
#about p, #about li { font-size: 15px; line-height: 1.5; color: #c9cddb; }
#about ul { padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
#about b { color: var(--ink); font-weight: 700; }
#about a { color: var(--accent); }
#about .num { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 4px; }
#about .num div { border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
#about .num b { display: block; font-size: 24px; letter-spacing: -.02em; }
#about .num span { font-size: 12.5px; color: var(--ink-2); line-height: 1.35; display: block; margin-top: 4px; }
#closeAbout { position: absolute; top: 18px; right: 18px; }

#loading { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--ink-2); text-transform: uppercase; }

@media (max-width: 640px) {
  #ui { gap: 8px; padding: 10px 16px; font-size: 13px; }
  .seg button { padding: 6px 10px; }
  .lbl { display: none; }
}