:root { --ink:#f2ecee; --muted:#948a8f; --paper:#0a0708; --panel:#141014; --line:rgba(255,255,255,.09); --red:#ff2f4d; --deep:#8d0f24; --ember:#ff8a3d; --bone:#e8dfe2; --go:#ff2f4d; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 82% -8%,#3d0a17 0,transparent 30rem),radial-gradient(circle at -5% 62%,#1a0d13 0,transparent 32rem),var(--paper); color:var(--ink); font-family:Manrope,system-ui,sans-serif; }
button,input,select { font:inherit; } button { cursor:pointer; } .shell { max-width:1440px; padding:42px clamp(20px,5vw,76px) 58px; margin:auto; }

/* hero */
.hero { display:grid; grid-template-columns:1fr auto; gap:14px 32px; align-items:end; margin-bottom:26px; }
.eyebrow { grid-column:1/-1; margin:0; color:#c8b3b8; font:500 11px/1.1 'DM Mono',monospace; letter-spacing:.14em; text-transform:uppercase; }
.eyebrow span { display:inline-block; width:8px; height:8px; margin-right:9px; border-radius:50%; background:var(--red); box-shadow:0 0 14px var(--red); animation:pulse 2.4s infinite; }
.hero-copy h1 { margin:0; font-size:clamp(2.9rem,6.6vw,5.9rem); letter-spacing:-.075em; line-height:.86; font-weight:800; }
.hero-copy em,.scene-card em { font-family:'Playfair Display',serif; font-style:italic; font-weight:600; color:var(--red); letter-spacing:-.05em; }
.hero-copy p { margin:18px 0 0; max-width:520px; color:var(--muted); line-height:1.6; font-size:14px; }
.hero-side { display:grid; gap:9px; justify-items:end; }
.consent-chip { border:1px solid rgba(255,47,77,.35); border-radius:999px; padding:9px 14px; color:#ffc7cf; font:11px 'DM Mono',monospace; white-space:nowrap; }
.seg { display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.seg button { border:0; background:#171114; color:#9c9195; padding:9px 15px; font:11px 'DM Mono',monospace; letter-spacing:.1em; transition:.18s; }
.seg button:hover { color:var(--ink); }
.seg button.active { background:var(--red); color:#170406; font-weight:500; }
.seg-note { margin:0; max-width:270px; text-align:right; color:#7e7378; font:10px/1.5 'DM Mono',monospace; }

/* terms */
.terms { display:flex; gap:15px; align-items:flex-start; padding:16px 18px; border:1px solid rgba(255,47,77,.2); border-radius:14px; background:linear-gradient(100deg,rgba(48,12,20,.6),rgba(21,15,18,.7)); margin-bottom:22px; }
.terms-mark { flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:var(--red); color:#1a0508; font:700 15px 'Playfair Display',serif; }
.terms-body { flex:1; min-width:0; }
.terms-body p { margin:0; color:#c6b9bd; font-size:13px; line-height:1.55; }
.terms-body strong { color:#fff; }
.terms-controls { display:flex; flex-wrap:wrap; gap:12px 18px; align-items:flex-end; margin-top:13px; }
.field { display:grid; gap:5px; }
.field span { color:#8d8287; font:9px 'DM Mono',monospace; letter-spacing:.14em; }
.field input { background:#0e0a0c; border:1px solid var(--line); border-radius:8px; color:#fff; outline:none; padding:8px 11px; font-size:13px; width:190px; }
.field input:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(255,47,77,.12); }
.check-label { margin-left:auto; font-size:12px; color:#d8cdd1; display:flex; gap:9px; align-items:center; max-width:330px; line-height:1.4; }
.check-label input { accent-color:var(--red); width:16px; height:16px; flex:none; }

/* settings */
.app-grid { display:grid; grid-template-columns:minmax(330px,.92fr) minmax(470px,1.4fr); align-items:start; gap:22px; }
.settings { display:grid; gap:14px; align-content:start; }
.panel { background:rgba(20,16,20,.86); border:1px solid var(--line); border-radius:16px; padding:20px; }
.section-heading { display:flex; align-items:center; gap:10px; }
.section-heading span { color:var(--red); font:11px 'DM Mono',monospace; }
.section-heading h2 { font-size:15px; letter-spacing:.02em; margin:0; text-transform:uppercase; }
.text-button { margin-left:auto; border:0; background:none; padding:0; color:#b9a3a8; font:11px 'DM Mono',monospace; }
.text-button:hover { color:var(--red); }
.helper { color:var(--muted); font-size:12px; line-height:1.5; margin:8px 0 13px; }
.choice-grid { display:flex; flex-wrap:wrap; gap:6px; }
.choice { border:1px solid var(--line); color:#a49aa0; background:#191418; padding:8px 11px; border-radius:8px; font-size:12px; transition:.15s; }
.choice:hover { border-color:#6b3540; color:var(--ink); }
.choice.selected { background:rgba(255,47,77,.14); border-color:rgba(255,47,77,.55); color:#fff; }
.tools .choice { display:flex; align-items:center; gap:6px; }
.tools i { color:var(--red); font-style:normal; font-size:15px; line-height:.5; }
.custom-add { display:flex; margin-top:11px; }
.custom-add input { background:#0e0a0c; border:1px solid var(--line); border-right:0; border-radius:8px 0 0 8px; color:#fff; outline:none; padding:9px 11px; min-width:0; flex:1; font-size:12px; }
.custom-add input:focus { border-color:var(--red); }
.custom-add button { border:0; border-radius:0 8px 8px 0; background:var(--red); color:#1a0508; font-size:19px; width:38px; }
.range-row { margin-top:15px; }
.range-row label,.select-row { display:flex; justify-content:space-between; font-size:12px; color:#e2d9dc; }
.range-row output { color:var(--red); font-family:'DM Mono',monospace; }
input[type="range"] { width:100%; margin:9px 0 2px; accent-color:var(--red); }
.toggle-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); }
.toggle-row:last-child { border-bottom:0; }
.toggle-row strong { display:block; font-size:12px; }
.toggle-row small { font-size:10px; color:var(--muted); line-height:1.4; }
.switch { width:36px; height:20px; position:relative; flex:none; }
.switch input { opacity:0; width:0; height:0; }
.switch span { position:absolute; inset:0; background:#3b3239; border-radius:99px; transition:.2s; }
.switch span:before { content:""; position:absolute; width:14px; height:14px; left:3px; top:3px; border-radius:50%; background:#fff; transition:.2s; }
.switch input:checked + span { background:var(--red); }
.switch input:checked + span:before { transform:translateX(16px); }
.select-row { align-items:center; padding:11px 0; border-bottom:1px solid var(--line); }
.select-row select { background:#191418; border:1px solid var(--line); color:#f1eaec; border-radius:6px; padding:6px 8px; font-size:11px; }

/* stage */
.stage { position:sticky; top:22px; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:22px; padding:22px; background:linear-gradient(160deg,rgba(40,12,20,.7),rgba(12,9,11,.96) 52%,rgba(26,10,16,.9)); box-shadow:0 26px 65px rgba(0,0,0,.5); display:flex; flex-direction:column; }
.stage-topline { display:flex; justify-content:space-between; color:#c0aeb3; font:10px 'DM Mono',monospace; letter-spacing:.12em; }
.stage.running .stage-topline span:first-child { color:var(--red); }
.progress-track { height:3px; border-radius:9px; background:rgba(255,255,255,.09); margin-top:10px; overflow:hidden; }
.progress-track div { width:0; height:100%; background:linear-gradient(90deg,var(--deep),var(--red)); transition:width .5s linear; }
.safebar { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:14px; padding:9px 13px; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:rgba(255,255,255,.03); font:10px 'DM Mono',monospace; letter-spacing:.1em; }
.safebar-key { color:#877b80; }
.safebar strong { color:#fff; font-weight:500; text-transform:uppercase; }
.safebar-sep { width:1px; height:13px; background:var(--line); }
.restraint-chip { margin-left:auto; padding:4px 9px; border-radius:99px; background:rgba(255,138,61,.13); border:1px solid rgba(255,138,61,.35); color:var(--ember); }

/* scene card */
.scene-card { position:relative; overflow:hidden; flex:1; min-height:330px; margin:16px 0 16px; padding:clamp(26px,5vw,54px); border-radius:16px; background:linear-gradient(140deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.09); display:flex; flex-direction:column; justify-content:center; }
.ambient { position:absolute; border-radius:50%; filter:blur(2px); pointer-events:none; transition:opacity .6s; }
.orb-one { width:340px; height:340px; right:-140px; top:-160px; background:radial-gradient(circle,rgba(255,47,77,.22),transparent 65%); }
.orb-two { width:300px; height:300px; bottom:-190px; left:-110px; background:radial-gradient(circle,rgba(141,15,36,.3),transparent 67%); }
.scan { position:absolute; inset:0; pointer-events:none; opacity:.05; background:repeating-linear-gradient(180deg,#fff 0 1px,transparent 1px 3px); }
.cue-label { position:relative; margin:0 0 14px; color:var(--red); font:11px 'DM Mono',monospace; letter-spacing:.16em; }
.scene-card h2 { position:relative; max-width:600px; margin:0; font-size:clamp(2.3rem,4.6vw,4.6rem); line-height:.95; letter-spacing:-.06em; }
.scene-card > p:not(.cue-label) { position:relative; max-width:430px; margin:20px 0 0; color:#c3b6ba; line-height:1.6; font-size:14px; }
.cue-counter { position:relative; align-self:flex-start; margin-top:18px; font:500 clamp(3.4rem,9vw,6rem)/1 'DM Mono',monospace; color:#fff; text-shadow:0 0 40px rgba(255,47,77,.7); animation:countbeat 1s ease-out infinite; }
.cue-details { position:relative; display:flex; gap:7px; margin-top:22px; flex-wrap:wrap; }
.cue-details span { background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.11); padding:7px 10px; border-radius:99px; color:#f2e9eb; font:10px 'DM Mono',monospace; letter-spacing:.06em; transition:.2s; }
.cue-details span.landed { border-color:var(--red); background:rgba(255,47,77,.18); box-shadow:0 0 22px rgba(255,47,77,.3); }
.next-strip { position:relative; display:flex; align-items:center; gap:11px; margin-top:22px; }
.next-bar { flex:1; max-width:280px; height:2px; background:rgba(255,255,255,.1); border-radius:9px; overflow:hidden; }
.next-bar i { display:block; width:0; height:100%; background:var(--red); }
#nextLabel { color:#8b7f84; font:9px 'DM Mono',monospace; letter-spacing:.12em; white-space:nowrap; }
.stage.running .scene-card { animation:breathe 5s ease-in-out infinite; }
.scene-card.jolt { animation:jolt .45s; }
body[data-view="lee"] .scene-card h2 { color:#c9bcc0; }

/* tempo */
.live-tempo-panel { position:relative; min-height:142px; padding:12px 20px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.09); border-radius:14px; background:linear-gradient(105deg,rgba(45,14,22,.6),rgba(16,12,15,.8)); }
.pulse-visual { --pulse-speed:0s; position:relative; width:148px; text-align:center; color:#f6dee2; pointer-events:none; }
.pulse-caption { display:block; margin-bottom:4px; color:#a2949a; font:9px 'DM Mono',monospace; letter-spacing:.14em; }
.pulse-core { position:relative; height:92px; display:grid; place-items:center; }
.pulse-core i { position:absolute; width:34px; height:34px; border:1px solid rgba(255,47,77,.8); border-radius:50%; opacity:0; }
.pulse-core i:first-child { width:35px; height:35px; opacity:1; background:radial-gradient(circle,#fff 0 16%,var(--red) 22%,#5c0a17 72%); box-shadow:0 0 26px rgba(255,47,77,.6); }
.pulse-visual strong { display:block; color:#fff; font:500 12px 'DM Mono',monospace; letter-spacing:.08em; }
.pulse-visual[data-tempo] .pulse-core i { animation:tempo-ring var(--pulse-speed) ease-out infinite; }
.pulse-visual[data-tempo] .pulse-core i:nth-child(2) { animation-delay:calc(var(--pulse-speed) / -3); }
.pulse-visual[data-tempo] .pulse-core i:nth-child(3) { animation-delay:calc(var(--pulse-speed) / -1.5); }
.pulse-visual[data-tempo="hold"] .pulse-core i { animation:none; }
.pulse-visual[data-tempo="hold"] .pulse-core i:first-child { transform:scale(1.3); box-shadow:0 0 44px rgba(255,47,77,.75); }
.pulse-visual[data-tempo="mercy"] { opacity:.4; }
.pulse-visual[data-tempo="mercy"] .pulse-core i { animation:none; }
.pulse-visual[data-tempo="mercy"] .pulse-core i:first-child { background:radial-gradient(circle,#bcb5b8 0 18%,#6c6267 22%,#3a343a 72%); box-shadow:none; }
.tempo-display { position:absolute; right:20px; bottom:16px; display:grid; grid-template-columns:auto auto; gap:3px 12px; align-items:center; color:#a2949a; font-size:10px; text-transform:uppercase; letter-spacing:.12em; }
.tempo-display strong { color:#fff; font:500 11px 'DM Mono',monospace; text-align:right; }
.tempo-dots { grid-column:1/-1; display:flex; gap:4px; justify-content:flex-end; }
.tempo-dots i { width:15px; height:3px; border-radius:6px; background:#4a4046; }
.tempo-dots i.active { background:var(--red); box-shadow:0 0 8px var(--red); }

/* controls */
.controls { display:grid; grid-template-columns:74px 1fr 74px; align-items:center; gap:14px; margin-top:16px; }
.circle-button { width:72px; height:72px; border-radius:50%; border:1px solid transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; transition:.2s; }
.circle-button span { font-size:14px; }
.circle-button small { font-size:10px; font-weight:700; letter-spacing:.06em; }
.circle-button.stop { background:var(--bone); border-color:#fff; color:#1a1216; justify-self:end; }
.circle-button.stop:not(:disabled):hover { background:#fff; transform:scale(1.05); }
.circle-button.go { width:96px; height:96px; justify-self:center; background:var(--go); border-color:#ff7085; color:#fff; box-shadow:0 0 0 7px rgba(255,47,77,.1),0 12px 30px rgba(255,47,77,.28); }
.circle-button.go:hover { transform:scale(1.04); box-shadow:0 0 0 11px rgba(255,47,77,.14),0 15px 34px rgba(255,47,77,.35); }
.circle-button.go.paused { background:var(--ember); border-color:#ffb383; box-shadow:0 0 0 7px rgba(255,138,61,.1); color:#2b1206; }
.circle-button:disabled { opacity:.3; cursor:not-allowed; }
.next-button { border:1px solid rgba(255,255,255,.14); border-radius:99px; color:#eee5e8; background:rgba(255,255,255,.06); padding:11px 12px; font-size:11px; white-space:nowrap; }
.next-button:hover:not(:disabled) { background:rgba(255,47,77,.16); border-color:rgba(255,47,77,.4); }
.next-button:disabled { opacity:.35; cursor:not-allowed; }

/* tally + footer bits */
.tally { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.tally div { border:1px solid var(--line); border-radius:10px; padding:9px 11px; background:rgba(255,255,255,.02); }
.tally span { display:block; color:#7f7378; font:9px 'DM Mono',monospace; letter-spacing:.11em; }
.tally strong { display:block; margin-top:4px; color:#fff; font:500 15px 'DM Mono',monospace; }
.tally strong.hot { color:var(--red); text-shadow:0 0 18px rgba(255,47,77,.55); }
.now-playing { margin:14px auto 0; color:#8d8085; font:10px 'DM Mono',monospace; display:flex; align-items:center; gap:8px; text-align:center; line-height:1.5; }
.live-dot { width:6px; height:6px; border-radius:50%; background:#5b5157; flex:none; }
.stage.running .live-dot { background:var(--red); box-shadow:0 0 9px var(--red); animation:pulse 1.2s infinite; }
.banner { position:absolute; left:0; right:0; top:0; padding:13px; text-align:center; background:var(--red); color:#fff; font:500 12px 'DM Mono',monospace; letter-spacing:.14em; transform:translateY(-100%); transition:transform .3s; z-index:5; }
.banner.show { transform:translateY(0); }

/* legend */
.legend { display:grid; grid-template-columns:minmax(210px,.7fr) 1.55fr; gap:28px; padding:24px; margin-top:22px; border-radius:16px; background:linear-gradient(110deg,rgba(40,14,21,.55),rgba(18,13,16,.7)); border:1px solid var(--line); }
.legend .eyebrow { margin-bottom:9px; }
.legend h2 { margin:0; font-size:21px; letter-spacing:-.04em; }
.legend-intro > p:last-child { margin:9px 0 0; color:#948a8f; font-size:12px; line-height:1.55; }
.legend-items { display:grid; grid-template-columns:repeat(3,minmax(150px,1fr)); gap:14px 18px; align-content:center; }
.legend-items article { display:flex; gap:10px; align-items:flex-start; }
.legend-items strong { display:block; color:#fbf6f8; font-size:11px; }
.legend-items p { margin:3px 0 0; color:#8f858a; font-size:10px; line-height:1.4; }
.ring { position:relative; width:24px; height:24px; flex:none; margin-top:2px; border-radius:50%; background:radial-gradient(circle,#fff 0 15%,var(--red) 22%,#4d0a15 70%); box-shadow:0 0 12px rgba(255,47,77,.45); }
.ring:after { content:""; position:absolute; inset:-5px; border:1px solid rgba(255,47,77,.45); border-radius:50%; animation:guide-pulse 1.5s ease-out infinite; }
.ring.steady:after { animation-duration:1s; } .ring.frenzy:after { animation-duration:.38s; } .ring.climb:after { animation-duration:.7s; } .ring.count:after { animation-duration:1s; } .ring.swap:after { animation-duration:.5s; } .ring.choice:after { animation-duration:1.5s; } .ring.lers:after { animation-duration:.85s; } .ring.sentence:after { animation-duration:.42s; }
.ring.hold:after { animation:none; opacity:.55; transform:scale(1.2); }
.ring.mercy { filter:grayscale(.85); opacity:.5; } .ring.mercy:after { display:none; }

/* care */
.care-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:22px; }
.care-grid article { border-top:1px solid rgba(255,47,77,.3); padding:16px 6px 0; }
.care-grid span { color:var(--red); font:10px 'DM Mono',monospace; }
.care-grid h3 { margin:8px 0 6px; font-size:14px; }
.care-grid p { margin:0; color:#8f858a; font-size:12px; line-height:1.55; }

.toast { position:fixed; left:50%; bottom:22px; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:var(--bone); color:#1b1216; padding:11px 16px; border-radius:99px; font-size:12px; font-weight:700; box-shadow:0 8px 30px rgba(0,0,0,.5); transition:.25s; z-index:20; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@keyframes pulse { 50% { transform:scale(1.5); opacity:.55; } }
@keyframes breathe { 50% { transform:scale(1.006); } }
@keyframes tempo-ring { 0% { transform:scale(.55); opacity:.85; } 100% { transform:scale(3.25); opacity:0; } }
@keyframes guide-pulse { to { transform:scale(1.7); opacity:0; } }
@keyframes countbeat { 0% { transform:scale(1.06); } 40% { transform:scale(1); } }
@keyframes jolt { 20% { transform:translateX(-6px); } 45% { transform:translateX(5px); } 70% { transform:translateX(-3px); } 100% { transform:translateX(0); } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

@media (max-width:1050px) { .legend-items { grid-template-columns:repeat(2,1fr); } .care-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:950px) { .app-grid { grid-template-columns:1fr; } .stage { position:relative; top:auto; } .settings { grid-template-columns:1fr 1fr; } .tune-panel { grid-column:1/-1; } .hero { grid-template-columns:1fr; } .hero-side { justify-items:start; } .seg-note { text-align:left; } .legend { grid-template-columns:1fr; gap:18px; } }
@media (max-width:600px) { .shell { padding:26px 15px 36px; } .settings { grid-template-columns:1fr; } .tune-panel { grid-column:auto; } .terms { flex-direction:column; } .check-label { margin:0; max-width:none; } .field input { width:100%; } .field { flex:1; min-width:150px; } .stage { padding:15px; } .scene-card { padding:26px 20px; min-height:280px; } .controls { grid-template-columns:60px 1fr 62px; gap:6px; } .circle-button.stop { width:58px; height:58px; } .circle-button.go { width:84px; height:84px; } .next-button { padding:9px 8px; font-size:10px; } .hero-copy h1 { font-size:3.2rem; } .tempo-display { right:14px; bottom:12px; } .legend-items,.care-grid { grid-template-columns:1fr; } .tally { grid-template-columns:1fr; } .live-tempo-panel { min-height:126px; } }