:root{color-scheme:dark;--bg: #040208;--magenta: #ff2fd6;--cyan: #3df6ff;--ink: #f4ecff}*{box-sizing:border-box}html,body,#stage{width:100%;height:100%;margin:0;overflow:hidden}body{background:var(--bg);color:var(--ink);font-family:Helvetica Neue,Hiragino Sans,Noto Sans JP,sans-serif}#stage{position:relative}#booth{display:block;width:100%;height:100%}.grain,.scanlines{pointer-events:none;position:absolute;inset:0}.grain{opacity:.18;background-image:radial-gradient(rgba(255,255,255,.18) .5px,transparent .6px);background-size:3px 3px;mix-blend-mode:overlay}.scanlines{background:repeating-linear-gradient(to bottom,rgba(0,0,0,.12) 0,rgba(0,0,0,.12) 1px,transparent 3px,transparent 4px);opacity:.35}.hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:28px 32px;pointer-events:none}.hud__title{margin:0;letter-spacing:.28em;font-size:22px;font-weight:700;text-shadow:0 0 18px rgba(255,47,214,.55)}.hud__sub{margin:6px 0 0;font-size:11px;letter-spacing:.34em;color:var(--cyan);opacity:.8}.mix{pointer-events:none;position:absolute;top:92px;left:32px;width:min(278px,46vw);padding:12px 14px 14px;border:1px solid rgba(61,246,255,.28);background:#0402089e;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.mix[data-mix-cut=true]{border-color:#ff2fd6d9;box-shadow:0 0 18px #ff2fd647}.mix__kicker,.mix__source,.mix__note,.mix__asset,.mix__heard{margin:0}.mix__kicker{font-size:10px;letter-spacing:.28em;color:var(--cyan)}.mix__source{margin-top:4px;font-size:10px;letter-spacing:.08em;opacity:.75}.mix__track{display:flex;align-items:baseline;gap:10px;margin:10px 0 8px;font-size:28px;letter-spacing:.12em;text-shadow:0 0 16px rgba(255,47,214,.45)}.mix__track-label{font-size:11px;letter-spacing:.22em;color:var(--cyan)}.mix__meters{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:5px}.mix__meters li{display:grid;grid-template-columns:1.2em 1fr;align-items:center;gap:8px;font-size:11px;letter-spacing:.18em}.mix__meters b{display:block;height:6px;border-radius:99px;background:#ffffff14;overflow:hidden}.mix__meters i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--magenta),var(--cyan))}.mix__meters li[data-mix-active=true] span{color:var(--magenta)}.mix__params{display:grid;gap:6px;margin:0}.mix__params div{display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.12em}.mix__params dt{margin:0;color:var(--cyan)}.mix__params dd{margin:0}.mix__heard{margin-top:8px;font-size:10px;letter-spacing:.06em;line-height:1.45;color:var(--cyan)}.mix[data-mix-audible=true] .mix__heard{color:var(--ink);text-shadow:0 0 10px rgba(61,246,255,.45)}.mix__asset{margin-top:6px;font-size:10px;letter-spacing:.08em;opacity:.7}.mix__note{margin-top:8px;font-size:10px;letter-spacing:.06em;line-height:1.55;opacity:.82}.hud__controls{pointer-events:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px}.hud__toggle{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;min-width:9.5em;padding:8px 14px;border:1px solid rgba(61,246,255,.35);border-radius:999px;background:#0402088c;color:var(--cyan);font:inherit;font-size:12px;letter-spacing:.16em;white-space:nowrap;cursor:pointer}.hud__toggle:hover,.hud__toggle:focus-visible{border-color:#ff2fd6b3}.hud__toggle:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}.hud__toggle[data-mute-toggle][aria-pressed=false]{border-color:#ff2fd68c;color:var(--ink);box-shadow:0 0 18px #ff2fd647}.hud__clip{position:relative;overflow:hidden;min-width:12em;letter-spacing:.1em}.hud__render{min-width:13em}.hud__clip[aria-pressed=true],.hud__clip[data-clip-status=ready],.hud__render[aria-pressed=true],.hud__render[data-render-status=ready]{border-color:#ff2fd6cc;color:var(--ink);box-shadow:0 0 18px #ff2fd659}.hud__clip:disabled{cursor:wait;opacity:.8}.hud__clip:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:calc(var(--clip-progress, 0) * 100%);background:var(--magenta);box-shadow:0 0 8px var(--magenta);pointer-events:none}.hud__dot{width:10px;height:10px;border-radius:50%;background:var(--magenta);box-shadow:0 0 12px var(--magenta);transform-origin:center}#stage[data-app-render=true] .mix,#stage[data-app-render=true] .hud__brand,#stage[data-app-render=true] .grain,#stage[data-app-render=true] .scanlines{opacity:0}@media(max-width:720px){.mix{inset:70px auto auto 12px;width:min(228px,calc(100vw - 24px));padding:8px 10px 10px}.mix__track{margin:6px 0;font-size:20px}.mix__note{font-size:9px}.hud{padding:18px 16px}.hud__title{font-size:16px;letter-spacing:.18em}.hud__toggle{font-size:11px;padding:6px 10px;letter-spacing:.14em}.hud__clip{min-width:11em}.hud__render{min-width:12em}}