:root{color:#eee9df;background:#0a0a0a;font-family:ui-rounded,Arial Rounded MT Bold,system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;font-weight:400;--ink: #0A0A0A;--ink2: #151517;--graphite: #5E5B57;--bone: #EEE9DF;--signal: #FF4D12;--ember: #FF8A3D;--dim: #3A3A3E}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;background:var(--ink)}button,select{font:inherit}.app-shell{width:min(1120px,calc(100% - 40px));margin:0 auto;padding:36px 0 56px}.topbar{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:16px}.topic-actions{display:flex;align-items:end;gap:8px}.eyebrow{margin:0 0 6px;color:var(--graphite);font:500 11px ui-monospace,Cascadia Mono,Segoe UI Mono,monospace;letter-spacing:.13em;text-transform:uppercase}h1{margin:0;font-size:clamp(26px,4vw,38px);letter-spacing:-.045em}.topic-picker-label{display:grid;gap:6px;color:var(--graphite);font-size:12px}.topic-picker-label select{min-width:190px;border:1px solid var(--dim);border-radius:4px;padding:10px 34px 10px 12px;color:var(--bone);background:var(--ink2)}.topic-picker-label select:disabled{opacity:.7}.generate-song{min-height:38px;border:1px solid var(--signal);border-radius:4px;padding:0 13px;color:var(--bone);background:var(--signal);font-weight:800;cursor:pointer}.generate-song:disabled{opacity:.65;cursor:progress}.topic-status{min-height:20px;margin:0 0 10px;color:var(--graphite);font:12px ui-monospace,Cascadia Mono,Segoe UI Mono,monospace}.generated-meta{margin:-4px 0 10px;color:var(--ember);font:11px ui-monospace,Cascadia Mono,Segoe UI Mono,monospace}.player{overflow:hidden;border:1px solid var(--dim);border-radius:8px;padding:12px;background:var(--ink2)}.canvas-wrap{position:relative;overflow:hidden;aspect-ratio:16 / 9;background:var(--ink)}canvas{display:block;width:100%;height:100%}.pause-card{position:absolute;inset:50% auto auto 50%;width:min(520px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;transform:translate(-50%,-50%);border:1px solid var(--graphite);border-radius:8px;padding:22px;color:var(--bone);background:var(--ink2)}.pause-card h2{margin:0 0 16px;font-size:clamp(18px,3vw,24px);line-height:1.3}.pause-options{display:grid;gap:8px}.pause-options button{border:1px solid var(--dim);border-radius:4px;padding:10px 12px;color:var(--bone);text-align:left;background:var(--ink);cursor:pointer}.pause-options button:hover:not(:disabled){border-color:var(--signal)}.pause-options button:disabled{cursor:default}.pause-feedback{min-height:0;margin:0;color:var(--ember);line-height:1.5}.pause-feedback:not(:empty){margin-top:14px}.lyric-line{position:relative;min-height:76px;display:grid;place-items:center;overflow:hidden;padding:14px clamp(16px,5vw,96px) 4px;font-size:clamp(28px,3vw,36px);font-weight:800;letter-spacing:-.02em;line-height:1.15;text-align:center}.lyric-base,.lyric-wipe{grid-area:1 / 1}.lyric-base{color:var(--bone);opacity:.35}.lyric-base[data-caption=true]{opacity:1}.lyric-wipe{width:100%;color:var(--bone);-webkit-text-stroke:.5px var(--signal);clip-path:inset(0 100% 0 0)}.scrubber-row{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;gap:12px;color:var(--graphite);font:12px ui-monospace,Cascadia Mono,Segoe UI Mono,monospace}.scrubber-row time:last-child{text-align:right}input[type=range]{width:100%;accent-color:var(--signal)}.controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;padding-top:14px}.controls button{min-height:38px;border:1px solid var(--dim);border-radius:4px;padding:0 13px;color:var(--bone);background:var(--ink);cursor:pointer}.controls button:hover{border-color:var(--ember)}.controls .play-button{min-width:84px;border-color:var(--signal);color:var(--bone);background:var(--signal);font-weight:800}.keyboard-hint{margin-left:8px;color:var(--graphite);font:12px ui-monospace,Cascadia Mono,Segoe UI Mono,monospace}.volume-control{display:flex;align-items:center;gap:8px;color:var(--graphite);font:12px ui-monospace,Cascadia Mono,Segoe UI Mono,monospace}.volume-control input{width:92px}.audio-status,.voice-message{margin:8px 0 0;color:var(--graphite);font:11px ui-monospace,Cascadia Mono,Segoe UI Mono,monospace;text-align:center}.voice-message{color:var(--ember)}.quiz-screen{width:min(900px,calc(100% - 40px));margin:48px auto;border:1px solid var(--dim);border-radius:8px;padding:clamp(24px,5vw,56px);color:var(--bone);background:var(--ink2)}.quiz-source,.quiz-progress{margin:0 0 24px;color:var(--ember);font:28px/1.4 ui-monospace,Cascadia Mono,Segoe UI Mono,monospace}.quiz-progress{color:var(--graphite)}.quiz-question{margin:0 0 28px;font-size:clamp(28px,4vw,40px);line-height:1.3}.quiz-options{display:grid;gap:12px}.quiz-options button,.quiz-action{min-height:60px;border:1px solid var(--dim);border-radius:5px;padding:12px 18px;color:var(--bone);font-size:28px;line-height:1.3;text-align:left;background:var(--ink);cursor:pointer}.quiz-options button:hover:not(:disabled),.quiz-action:hover{border-color:var(--signal)}.quiz-options button:disabled{cursor:default}.quiz-feedback,.quiz-result{min-height:0;margin:24px 0;font-size:28px;line-height:1.5}.quiz-feedback:not(:empty){color:var(--ember)}.quiz-action{min-width:150px;border-color:var(--signal);text-align:center;background:var(--signal);font-weight:800}.quiz-review{display:grid;gap:16px;margin:24px 0}.quiz-review-item{border-top:1px solid var(--dim);padding-top:16px}.quiz-review-item p{margin:0 0 12px;font-size:24px;line-height:1.4}.quiz-secondary{border-color:var(--dim);color:var(--bone);background:transparent}.quiz-action:disabled{border-color:var(--dim);color:var(--graphite);background:var(--ink);cursor:default}[hidden]{display:none!important}html[data-clean=true] body{width:1920px;height:1080px;min-width:0;min-height:0;overflow:hidden}html[data-clean=true] .app-shell,html[data-clean=true] .player,html[data-clean=true] .canvas-wrap{width:1920px;height:1080px;margin:0;padding:0;overflow:visible;border:0;border-radius:0}html[data-clean=true] .app-shell{max-width:none}html[data-clean=true] .topbar,html[data-clean=true] .topic-status,html[data-clean=true] .audio-status,html[data-clean=true] .voice-message,html[data-clean=true] .lyric-line,html[data-clean=true] .scrubber-row,html[data-clean=true] .controls{display:none}html[data-clean=true] canvas{width:1920px;height:1080px}@media(max-width:620px){.app-shell{width:min(100% - 24px,1120px);padding-top:24px}.topbar{align-items:start;flex-direction:column;gap:16px}.topic-picker-label,.topic-picker-label select{width:100%}.topic-actions{align-items:stretch;flex-direction:column;width:100%}.player{padding:8px}.keyboard-hint{width:100%;margin:2px 0 0;text-align:center}}