:root{color:#f5edd7;background:#120f11;font-family:Trebuchet MS,Avenir Next,sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;width:100%}body{overflow:hidden}button{font:inherit}.app-shell{position:relative;width:100vw;height:100vh;background:radial-gradient(circle at top,rgba(134,237,255,.08),transparent 26%),radial-gradient(circle at bottom,rgba(255,209,104,.12),transparent 30%),linear-gradient(180deg,#191316,#100d0e)}.stage,.stage-placeholder{display:block;width:100%;height:100%}.stage-placeholder{position:relative;background:radial-gradient(circle at center,rgba(255,255,255,.03),transparent 28%),transparent}.stage-overlay-preview{position:absolute;top:0;right:0;bottom:0;left:0}.overlay-header{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none}.export-screen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:8;display:grid;place-items:center;background:radial-gradient(circle at top,rgba(134,237,255,.1),transparent 28%),radial-gradient(circle at bottom,rgba(255,211,109,.12),transparent 32%),#120f11}.export-artwork{position:absolute;top:0;right:0;bottom:0;left:0}.export-artwork svg{display:block;width:100%;height:100%}.export-message{position:relative;z-index:1;width:min(760px,calc(100vw - 48px));padding:clamp(24px,4vw,40px);border:1px solid rgba(255,255,255,.14);border-radius:28px;background:#0e0c1099;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 24px 80px #00000057;text-align:center}.export-message .panel-copy{margin-top:18px}.overlay-header .overlay-backdrop,.overlay-header .overlay-copy-left-lower,.overlay-header .overlay-copy-left-bottom,.overlay-header .overlay-copy-right-lower,.overlay-header .overlay-copy-right-bottom,.stage-overlay-preview .overlay-backdrop,.stage-overlay-preview .overlay-keycap,.stage-overlay-preview .overlay-keycaps,.stage-overlay-preview .overlay-info,.stage-overlay-preview .overlay-callout{display:none}.hud{position:absolute;top:24px;left:24px;right:24px;z-index:4;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.guest-pill,.saved-toast,.floating-error,.intro-card{border:1px solid rgba(255,255,255,.14);background:#0e0c10bd;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 24px 80px #00000057}.guest-pill{position:absolute;left:24px;bottom:24px;z-index:4;display:inline-flex;flex-direction:column;gap:4px;padding:14px 18px;border-radius:18px}.guest-pill span:last-child{color:#f5edd7b8;font-size:.9rem}.hud-actions{display:flex;gap:10px;align-items:center}.eyebrow{margin:0 0 10px;color:#86edff;font-size:.92rem;letter-spacing:.18em;text-transform:uppercase}h1,p{margin:0}h1{font-size:clamp(2.8rem,5.2vw,4.8rem);line-height:.92}.panel-copy{color:#f5edd7db;font-size:1.18rem;line-height:1.7}.intro-screen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:grid;place-items:center;padding:24px}.intro-card{width:min(680px,calc(100vw - 48px));padding:clamp(24px,4vw,42px);border-radius:28px}.intro-card h1{margin-top:18px;font-size:26px}.intro-card .panel-copy{margin-top:22px}.audio-progress{position:relative;height:12px;margin-top:34px;overflow:hidden;border-radius:999px;background:#ffffff14}.audio-progress-fill{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left center;background:linear-gradient(90deg,#ffd168eb,#86edfff2),linear-gradient(90deg,rgba(255,255,255,.25),transparent);box-shadow:0 0 24px #ffd1683d}.audio-progress.complete .audio-progress-fill{box-shadow:0 0 30px #86edff59}.hint-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;margin-top:30px;color:#f5edd7b8;font-size:1.02rem;line-height:1.65}.hint-item{display:flex;gap:12px;align-items:flex-start}.hint-keys{display:inline-flex;flex-wrap:wrap;gap:6px;min-width:92px}.hint-key{display:inline-flex;align-items:center;justify-content:center;min-width:36px;padding:.24rem .55rem;border-radius:10px;background:#fff;color:#111;font-size:.88rem;font-weight:700;line-height:1}.hint-key-icon{background:transparent;color:#fff;min-width:auto;padding:0;font-size:1.25rem;font-weight:600}.intro-help{margin-top:30px;color:#f5edd7a3;font-size:1rem;line-height:1.7}.start-button{margin-top:34px;min-width:220px;padding:1rem 1.5rem;font-size:1.15rem;font-weight:700;letter-spacing:.04em;background:radial-gradient(circle at top,rgba(255,255,255,.28),transparent 55%),linear-gradient(135deg,#ffd36d,#ecad56 52%,#86edff);box-shadow:0 16px 44px #ecad5657}button{padding:.84rem 1.15rem;border:0;border-radius:999px;background:linear-gradient(135deg,#ffd36d,#ecad56);color:#1a1714;cursor:pointer;transition:transform .14s ease,opacity .14s ease}button:hover{transform:translateY(-1px)}button:disabled{opacity:.55;cursor:wait}.icon-button{width:46px;height:46px;padding:0;border-radius:50%}.icon-button.active{background:linear-gradient(135deg,#86edff,#5cc9e3)}.saved-toast,.floating-error{position:absolute;right:24px;bottom:24px;z-index:5;max-width:min(420px,calc(100vw - 48px));padding:12px 14px;border-radius:14px}.saved-toast{color:#f8d171}.floating-error{color:#ffb4aa;background:#5c1614d1}.status-screen{display:grid;place-items:center;width:100vw;height:100vh;color:#f5edd7;background:#120f11}@media (max-width: 820px){.hud{top:12px;left:12px;right:12px;flex-direction:column;align-items:stretch}.hud-actions{flex-wrap:wrap}.guest-pill{left:12px;bottom:12px}.hint-list{grid-template-columns:1fr}.hint-keys{min-width:84px}.panel-copy{font-size:1.05rem}.hint-list,.intro-help{font-size:.95rem}.saved-toast,.floating-error{left:12px;right:12px;bottom:12px}}path[fill="#adadad"]{display:none}