@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap";:root{--text-primary:#0d0d0d;--bg-base:#b0b4bf;--bg-grad1a:#fffc;--bg-grad1b:#d7dae2e0;--bg-grad2a:#afb5c3d1;--bg-grad2b:#b0b4bf;--button-bg:#0000001f;--button-bg-hover:#00000029;--button-disabled:#00000012;--icon-muted:#0d0d0d8c;--slider-track:#0000002e;--slider-track-hover:#0000003d;--slider-thumb:#2c2f35;--slider-thumb-hover:#1f2228;--switch-track:#333;--switch-track-shadow:inset 0 2px 6px #00000040,0 4px 12px #00000059;--switch-knob:#f7f7fb;--play-bg:#111114;--play-bg-hover:#1a1b1f;--play-text:#f7f7fb;--play-border:#111114;--pause-text:#0d0d0d;--pause-border:#0d0d0d;--pause-bg:#0000000f;--pause-bg-hover:#0000001a;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,Helvetica Neue,Arial,sans-serif;font-weight:300;line-height:1.4}.theme-day{--text-primary:#0d0d0d;--bg-base:#b0b4bf;--bg-grad1a:#fffc;--bg-grad1b:#d7dae2e0;--bg-grad2a:#afb5c3d1;--bg-grad2b:#b0b4bf;--button-bg:#0000001f;--button-bg-hover:#00000029;--button-disabled:#00000012;--icon-muted:#0d0d0d8c;--slider-track:#0000002e;--slider-track-hover:#0000003d;--slider-thumb:#2c2f35;--slider-thumb-hover:#1f2228;--switch-track:#333;--switch-track-shadow:inset 0 2px 6px #00000040,0 4px 12px #00000059;--pause-hover-bg:#1111140f;--play-bg:#111114;--play-bg-hover:#1a1b1f;--play-text:#f7f7fb;--play-border:#111114;--pause-text:#0d0d0d;--pause-border:#0d0d0d;--pause-bg:#0000000f;--pause-bg-hover:#0000001a}.theme-night{--text-primary:#f5f5f7;--bg-base:#0f1013;--bg-grad1a:#28282cbf;--bg-grad1b:#16161af2;--bg-grad2a:#141418d9;--bg-grad2b:#0c0d11;--button-bg:#ffffff14;--button-bg-hover:#ffffff1f;--button-disabled:#ffffff0d;--icon-muted:#f5f5f78c;--slider-track:#fff3;--slider-track-hover:#ffffff42;--slider-thumb:#f5f5f7;--slider-thumb-hover:#e6e7eb;--switch-track:#ccc;--switch-track-shadow:inset 0 2px 6px #0000001f,0 4px 12px #00000029;--switch-knob:#0f0f12;--pause-hover-bg:#ffffff14;--play-bg:#ffffffe6;--play-bg-hover:#fff;--play-text:#111114;--play-border:#ffffffe6;--pause-text:#f5f5f7;--pause-border:#f5f5f7;--pause-bg:#ffffff14;--pause-bg-hover:#ffffff1f}*{box-sizing:border-box}body{background-color:var(--bg-base);background:radial-gradient(120% 120% at 50% 20%,var(--bg-grad1a),var(--bg-grad1b)),radial-gradient(100% 80% at 50% 80%,var(--bg-grad2a),var(--bg-grad2b));min-height:100vh;color:var(--text-primary);margin:0}#root{width:100vw;height:100vh}.canvas-shell{width:100vw;height:100vh;position:relative}.canvas-stage{width:100vw;height:100vh;animation:.8s ease-out 1.4s both canvasFadeIn}@keyframes canvasFadeIn{0%{opacity:0}to{opacity:1}}.loading-screen{background:var(--bg-base);background:radial-gradient(120% 120% at 50% 20%,var(--bg-grad1a),var(--bg-grad1b)),radial-gradient(100% 80% at 50% 80%,var(--bg-grad2a),var(--bg-grad2b));z-index:1000;justify-content:center;align-items:center;animation:.9s ease-out 1.1s forwards fadeOut;display:flex;position:fixed;inset:0}.loading-dots{align-items:center;gap:12px;display:flex}.dot{background:var(--text-primary);opacity:0;border-radius:50%;width:7px;height:7px;animation:2s ease-in-out dotAppear}.dot:first-child{animation-delay:0s}.dot:nth-child(2){animation-delay:.15s}.dot:nth-child(3){animation-delay:.3s}.dot:nth-child(4){animation-delay:.45s}.dot:nth-child(5){animation-delay:.6s}@keyframes dotAppear{0%{opacity:0}50%{opacity:.6}to{opacity:0}}@keyframes fadeOut{to{opacity:0;pointer-events:none}}.ui-overlay{pointer-events:none;color:var(--text-primary);mix-blend-mode:normal;z-index:5;flex-direction:column;justify-content:space-between;padding:56px 40px 60px;display:flex;position:fixed;inset:0}.theme-toggle{pointer-events:auto;color:var(--text-primary);align-items:center;gap:12px;font-size:14px;display:flex;position:absolute;top:24px;right:24px}.theme-label{opacity:.7;letter-spacing:.02em}.theme-switch{cursor:pointer;pointer-events:auto;font:inherit;color:var(--text-primary);background:0 0;border:none;align-items:center;gap:10px;padding:0;display:inline-flex}.theme-switch-track{background:var(--switch-track);border:1px solid var(--switch-track);width:80px;height:40px;box-shadow:none;border-radius:999px;justify-content:center;align-items:center;padding:5px;transition:background .2s,box-shadow .2s,border-color .2s;display:inline-flex;position:relative}.theme-switch-knob{background:var(--switch-knob);border-radius:50%;width:30px;height:30px;transition:transform .2s,background .2s,box-shadow .2s;position:absolute;left:5px;box-shadow:0 6px 16px #0000001f}.theme-switch.night .theme-switch-knob{background:var(--play-text);transform:translate(40px);box-shadow:0 6px 16px #0000001f}.theme-switch-text{opacity:.8;font-size:14px;font-weight:400}.hero-title{letter-spacing:.16em;text-align:center;text-transform:uppercase;opacity:.3;pointer-events:none;white-space:nowrap;margin-top:60px;font-size:clamp(32px,6vw,80px);font-weight:300;animation:3s cubic-bezier(.25,.46,.45,.94) 2s both slideInFromTop;transform:translateY(0)}@keyframes slideInFromTop{0%{opacity:0;transform:translateY(-40px)}to{opacity:.3;transform:translateY(0)}}.controls-container{opacity:0;flex-direction:column;align-items:center;gap:30px;animation:3s cubic-bezier(.25,.46,.45,.94) 2s both flyInFromBottom;display:flex;transform:translateY(60px)}@keyframes flyInFromBottom{0%{opacity:0;transform:translateY(60px)}to{opacity:1;transform:translateY(0)}}.controls-bar{pointer-events:auto;justify-content:center;align-items:center;gap:32px;width:min(92vw,720px);min-width:320px;max-width:720px;display:flex}.select-wrapper{flex:2;position:relative}.ui-btn.disabled{opacity:.5;cursor:not-allowed}.play-wrapper{flex:1;position:relative}.play-tooltip{color:#0f1115;white-space:nowrap;opacity:0;pointer-events:none;background:#fffffff2;border-radius:10px;padding:10px 14px;font-size:13px;transition:opacity .15s;position:absolute;bottom:100%;left:50%;transform:translate(-50%,-12px);box-shadow:0 10px 30px #00000073}.play-wrapper:hover .play-tooltip{opacity:1}.reminder-pop{color:#0f1115;white-space:nowrap;background:#fffffff2;border-radius:10px;padding:10px 14px;font-size:13px;animation:.3s ease-in-out .3s backwards fadeIn;position:absolute;bottom:100%;left:50%;transform:translate(-50%,-12px);box-shadow:0 10px 30px #00000073}.ui-btn{background:var(--button-bg);width:100%;min-width:180px;color:var(--text-primary);letter-spacing:.03em;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:none;border-radius:14px;padding:14px 18px;font-family:inherit;font-size:16px;font-weight:400;transition:transform .15s,box-shadow .15s,border-color .15s,background .15s}.ui-btn:hover:not(:disabled){background:var(--button-bg-hover);transform:translateY(-1px);box-shadow:0 10px 30px #0003}.ui-btn:active:not(:disabled){transform:translateY(0)}.ui-btn:disabled{opacity:.65;background:var(--button-disabled);cursor:not-allowed}.ui-btn.primary{border:1.5px solid var(--text-primary);color:var(--text-primary);background:0 0}.ui-btn.primary:hover:not(:disabled){background:var(--button-bg);box-shadow:none}.ui-btn.ghost{background:var(--play-bg);border:1px solid var(--play-border);color:var(--play-text)}.ui-btn.ghost:hover:not(:disabled){background:var(--play-bg-hover);border-color:var(--play-bg-hover)}.ui-btn.playing{background:var(--pause-bg);color:var(--pause-text);box-shadow:none;border:none}.ui-btn.playing:hover:not(:disabled){background:var(--pause-bg-hover)}.ui-btn.glow,.ui-btn.glow-green{background:var(--button-bg-hover);animation:none;box-shadow:0 0 0 1px #00000026,0 10px 30px #0000001f}@keyframes slowGlow{0%,to{box-shadow:0 0 4px #ffffff14,0 0 8px #ffffff0d,0 8px 24px #00000059}50%{box-shadow:0 0 10px #ffffff29,0 0 18px #ffffff1a,0 8px 24px #00000059}}@keyframes slowGlowGreen{0%,to{box-shadow:0 0 8px #4dffae26,0 0 16px #4dffae14,0 8px 24px #00000059}50%{box-shadow:0 0 14px #4dffae4d,0 0 24px #4dffae2e,0 8px 24px #00000059}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.reminder-pop{animation:.3s ease-in-out .3s backwards fadeIn}.volume-control{pointer-events:auto;justify-content:center;align-items:center;gap:16px;width:min(92vw,720px);min-width:320px;max-width:720px;padding:0 24px;display:flex}.volume-icon{color:var(--icon-muted);opacity:.7;flex-shrink:0;transition:opacity .15s}.volume-icon.clickable{cursor:pointer}.volume-icon.clickable:hover,.volume-control:hover .volume-icon{opacity:1}.volume-slider{appearance:none;background:var(--slider-track);border-radius:2px;outline:none;flex:1;height:4px;transition:background .15s}.volume-slider:hover{background:var(--slider-track-hover)}.volume-slider::-webkit-slider-thumb{appearance:none;background:var(--slider-thumb);cursor:pointer;border-radius:50%;width:16px;height:16px;transition:transform .15s,box-shadow .15s}.volume-slider::-webkit-slider-thumb:hover{background:var(--slider-thumb-hover);transform:scale(1.2);box-shadow:0 0 8px #00000040}.volume-slider::-moz-range-thumb{background:var(--slider-thumb);cursor:pointer;border:none;border-radius:50%;width:16px;height:16px;transition:transform .15s,box-shadow .15s}.volume-slider::-moz-range-thumb:hover{background:var(--slider-thumb-hover);transform:scale(1.2);box-shadow:0 0 8px #00000040}@media (max-width:768px){.canvas-stage{transform:translateY(-70px)}.ui-overlay{padding:20px 8px 24px}.theme-toggle{gap:8px;font-size:12px;top:12px;right:12px}.theme-switch-track{width:52px;height:26px;padding:4px}.theme-switch-knob{width:18px;height:18px;left:4px}.theme-switch.night .theme-switch-knob{transform:translate(24px)}.theme-switch-text{font-size:12px}.hero-title{letter-spacing:.12em;margin-top:60px;font-size:clamp(22px,6.5vw,36px);transform:translateY(0)}.controls-container{gap:20px;padding:0 8px}.controls-bar{gap:16px;width:100%;max-width:480px;padding:0 8px}.volume-control{width:100%;max-width:480px;padding:0 8px}}