:root{--panel:#080c16d1;--panel-strong:#080c16f0;--line:#ffffff24;--text:#eff4ff;--muted:#9aa9bf;--hot:#ff4fd8;--cold:#18d8ff;--warm:#ffd166;--green:#47ff91;--sidebar-w:360px;--bar-h:112px}*{box-sizing:border-box}html,body{width:100%;height:100%;color:var(--text);letter-spacing:0;background:#03050a;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}button,input,textarea{font:inherit}button{color:var(--text);border:1px solid var(--line);cursor:pointer;background:#ffffff12;border-radius:6px;min-height:32px;padding:0 10px;transition:background .12s,border-color .12s}button:hover{background:#ffffff21;border-color:#ffffff4d}button:focus-visible{outline:2px solid var(--cold);outline-offset:2px}.stage{background:#03050a;width:100vw;height:100vh;min-height:520px;position:relative}.visualizer-container{position:absolute;inset:0}.visualizer-container canvas{width:100%;height:100%;display:block}.comment-overlay{bottom:calc(var(--bar-h) + 20px);color:var(--cold);letter-spacing:.04em;pointer-events:none;white-space:nowrap;z-index:10;background:#080c16c7;border:1px solid #ffffff24;border-radius:8px;padding:7px 18px;font-size:13px;animation:.6s forwards comment-fade-in;position:absolute;left:50%;transform:translate(-50%)}@keyframes comment-fade-in{0%{opacity:0;transform:translate(-50%)translateY(6px)}to{opacity:1;transform:translate(-50%)translateY(0)}}body:after{content:"";pointer-events:none;z-index:2;mix-blend-mode:screen;opacity:.2;background:repeating-linear-gradient(#ffffff08,#ffffff08 1px,#0000 1px 4px);position:fixed;inset:0}.source-sidebar{top:0;left:0;bottom:var(--bar-h);width:var(--sidebar-w);z-index:3;background:var(--panel);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-right:1px solid var(--line);flex-direction:column;display:flex;position:absolute;overflow:hidden}.source-sidebar-code{scrollbar-width:thin;scrollbar-color:#ffffff1f transparent;flex:1;padding:6px 0;overflow:hidden auto}.source-sidebar-code::-webkit-scrollbar{width:4px}.source-sidebar-code::-webkit-scrollbar-thumb{background:#ffffff24;border-radius:2px}.source-line{border-left:2px solid #0000;align-items:baseline;gap:8px;padding:1px 10px 1px 4px;transition:background 80ms,border-color 80ms;display:flex}.source-line--active{border-left-color:var(--cold);background:#18d8ff2e;box-shadow:inset 0 0 12px #18d8ff14}.source-line-num{text-align:right;color:#fff3;-webkit-user-select:none;user-select:none;flex-shrink:0;width:28px;font:10px/1.55 SFMono-Regular,Consolas,monospace}.source-line--active .source-line-num{color:var(--cold)}.source-line-text{color:#c8d8f0;white-space:pre;text-overflow:ellipsis;min-width:0;font:11px/1.55 SFMono-Regular,Consolas,monospace;overflow:hidden}.source-line--active .source-line-text{color:#e8f4ff}.instrument-overlay{left:var(--sidebar-w);top:0;right:0;bottom:var(--bar-h);z-index:1;pointer-events:none;position:absolute}@keyframes instrument-drift{0%,to{transform:translate(-50%,-50%)translate(0)}33%{transform:translate(-50%, -50%) translate(var(--drift-x), var(--drift-y))}66%{transform:translate(-50%, -50%) translate(calc(var(--drift-y) * .6), calc(var(--drift-x) * -.4))}}.instrument-wrapper{pointer-events:none;animation:9s ease-in-out infinite instrument-drift;animation-delay:var(--drift-delay,0s);position:absolute}.instrument-card{pointer-events:none;transform-origin:50%;will-change:transform, filter;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:3px;width:116px;padding:8px 10px 10px;display:flex;position:relative;overflow:visible}@keyframes ripple-expand{0%{opacity:.9;transform:translate(-50%,-50%)scale(1)}40%{opacity:.6}to{transform:translate(-50%, -50%) scale(var(--ripple-scale,3));opacity:0}}.ripple-ring{pointer-events:none;width:100%;height:100%;animation:ripple-expand var(--ripple-duration,2s) ease-out forwards;border:3px solid;border-radius:12px;position:absolute;top:50%;left:50%}@keyframes flash-burst{0%{opacity:.9;transform:translate(-50%,-50%)scale(1)}60%{opacity:.35;transform:translate(-50%,-50%)scale(1.6)}to{opacity:0;transform:translate(-50%,-50%)scale(2.2)}}.flash-burst{pointer-events:none;background:currentColor;border-radius:12px;width:100%;height:100%;animation:.28s ease-out forwards flash-burst;position:absolute;top:50%;left:50%}.instrument-icon{fill:none;stroke:#000000a6;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;width:26px;height:26px}.instrument-name{color:#000000b8;text-transform:uppercase;letter-spacing:.04em;text-align:center;font-size:11px;font-weight:700}.instrument-freq{color:#00000080;letter-spacing:.02em;font-size:9px;font-weight:600}@keyframes motif-groove-bob{0%,to{transform:translate(-50%,-50%)translateY(0)scale(1)}25%{transform:translate(-50%,-50%)translateY(-2px)scale(1.015)}75%{transform:translate(-50%,-50%)translateY(1px)scale(.99)}}.instrument-overlay.motif-groove .instrument-wrapper{animation:.9375s ease-in-out infinite motif-groove-bob;animation-delay:var(--drift-delay,0s)}@keyframes motif-harmonic-swell{0%,to{transform:translate(-50%,-50%)scale(1)translateY(0)}50%{transform:translate(-50%,-50%)scale(1.025)translateY(-2px)}}.instrument-overlay.motif-harmonic .instrument-wrapper{animation:4s ease-in-out infinite motif-harmonic-swell;animation-delay:var(--drift-delay,0s)}@keyframes motif-plucked-scatter{0%{transform:translate(-50%,-50%)rotate(-.6deg)translateY(0)}33%{transform:translate(-50%,-50%)rotate(.5deg)translateY(-4px)}66%{transform:translate(-50%,-50%)rotate(-.3deg)translateY(-2px)}to{transform:translate(-50%,-50%)rotate(.7deg)translateY(0)}}.instrument-overlay.motif-plucked .instrument-wrapper{animation:2s ease-in-out infinite motif-plucked-scatter;animation-delay:var(--drift-delay,0s)}@keyframes motif-kalimba-wave{0%,to{transform:translate(-50%,-50%)translateY(0)scale(1)}50%{transform:translate(-50%,-50%)translateY(-7px)scale(1.015)}}.instrument-overlay.motif-kalimba .instrument-wrapper{animation:2.8s ease-in-out infinite motif-kalimba-wave;animation-delay:var(--wave-delay,0s)}@keyframes motif-climax-overlay{0%,to{transform:translate(0)}25%{transform:translate(-2px,-1px)}50%{transform:translate(2px,2px)}75%{transform:translate(-1px,2px)}}@keyframes motif-climax-shake{0%{transform:translate(-50%,-50%)translate(0)}20%{transform:translate(-50%,-50%)translate(-3px,-2px)}40%{transform:translate(-50%,-50%)translate(3px,2px)}60%{transform:translate(-50%,-50%)translate(-2px,3px)}80%{transform:translate(-50%,-50%)translate(3px,-2px)}to{transform:translate(-50%,-50%)translate(0)}}.instrument-overlay.motif-climax{animation:.35s linear infinite motif-climax-overlay}.instrument-overlay.motif-climax .instrument-wrapper{animation:.3s linear infinite motif-climax-shake;animation-delay:var(--drift-delay,0s)}@keyframes motif-farewell-drift{0%,to{opacity:1;transform:translate(-50%,-50%)translate(0)}50%{transform:translate(-50%, -50%) translate(var(--drift-x), calc(var(--drift-y) * 2));opacity:.75}}.instrument-overlay.motif-farewell .instrument-wrapper{animation:8s ease-in-out infinite motif-farewell-drift;animation-delay:var(--drift-delay,0s)}.bottom-bar{height:var(--bar-h);z-index:4;background:var(--panel-strong);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-top:1px solid var(--line);flex-direction:column;padding:0 16px;display:flex;position:absolute;bottom:0;left:0;right:0;box-shadow:0 -8px 32px #0006}.bottom-bar-seek{align-items:center;gap:10px;padding-top:8px;padding-bottom:4px;display:flex}.bottom-bar-time{color:var(--muted);text-align:center;-webkit-user-select:none;user-select:none;min-width:34px;font-size:11px;font-weight:600}.seek-track{background:#ffffff12;border-radius:6px;flex:1;height:48px;position:relative;overflow:hidden}.seek-fill{pointer-events:none;background:linear-gradient(90deg,#18d8ff40,#47ff912e);height:100%;position:absolute;top:0;left:0}.seek-thumb{pointer-events:none;background:#fff;border-radius:50%;width:12px;height:12px;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 6px #18d8ffb3}.seek-minimap{width:100%;height:100%;display:block;position:absolute;inset:0}.seek-input{opacity:0;cursor:pointer;appearance:none;width:100%;height:100%;position:absolute;inset:0}.bottom-bar-controls{flex:1;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;display:grid}.bottom-bar-stats{align-items:center;gap:12px;display:flex}.bstat{flex-direction:column;gap:1px;min-width:0;display:flex}.bstat-label{text-transform:uppercase;color:var(--muted);letter-spacing:.06em;-webkit-user-select:none;user-select:none;align-items:center;gap:4px;font-size:9px;font-weight:700;display:flex}.bstat-value{color:var(--text);font-size:15px;font-weight:700;line-height:1}.bottom-bar-transport{align-items:center;gap:8px;display:flex}.transport-btn{border-radius:8px;flex-shrink:0;place-items:center;width:36px;height:36px;padding:0;display:grid}.transport-btn svg{fill:currentColor;stroke:none;width:18px;height:18px}.play-btn{background:linear-gradient(135deg, var(--cold), var(--green));color:#061019;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;place-items:center;width:48px;height:48px;padding:0;transition:opacity .12s,transform 80ms;display:grid}.play-btn:hover{opacity:.88;transform:scale(1.06)}.play-btn svg{fill:currentColor;stroke:none;width:22px;height:22px}.bottom-bar-right{justify-content:flex-end;align-items:center;gap:10px;display:flex}.volume-control{align-items:center;gap:6px;display:flex}.volume-icon{width:18px;height:18px;fill:var(--muted);stroke:none;flex-shrink:0}.volume-slider{appearance:none;cursor:pointer;background:#ffffff2e;border:none;border-radius:2px;outline:none;width:72px;height:3px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--cold);cursor:pointer;border-radius:50%;width:13px;height:13px;box-shadow:0 0 6px #18d8ff99}.volume-slider::-moz-range-thumb{background:var(--cold);cursor:pointer;border:none;border-radius:50%;width:13px;height:13px}.audio-player{display:none}.welcome-screen{z-index:10;background:#03050a;justify-content:center;align-items:center;padding:24px;display:flex;position:absolute;inset:0}.welcome-card{border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:12px;gap:24px;width:min(860px,100%);padding:32px;display:grid;box-shadow:0 32px 80px #0000008c}.welcome-header{gap:6px;display:grid}.welcome-title{background:linear-gradient(90deg, var(--cold), var(--green));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:32px;line-height:1}.welcome-desc{color:var(--muted);margin:0;font-size:14px}.welcome-inputs{grid-template-columns:1fr 1fr;gap:16px;display:grid}.welcome-col{gap:8px;display:grid}.welcome-label-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.welcome-label{text-transform:uppercase;color:var(--muted);letter-spacing:.06em;font-size:11px;font-weight:700}.welcome-default-btn{min-height:24px;color:var(--cold);background:#18d8ff12;border-color:#18d8ff4d;border-radius:5px;padding:2px 10px;font-size:11px;font-weight:600}.welcome-default-btn:hover:not(:disabled){border-color:var(--cold);background:#18d8ff24}.welcome-default-btn:disabled{opacity:.45;cursor:not-allowed}.welcome-code{resize:vertical;color:#d7e6ff;border:1px solid var(--line);background:var(--panel-strong);border-radius:8px;height:260px;padding:12px;font:12px/1.5 SFMono-Regular,Consolas,Liberation Mono,monospace}.welcome-code:focus-visible{outline:2px solid var(--cold);outline-offset:2px}.welcome-drop{width:100%;height:260px;min-height:unset;border:1px dashed var(--line);cursor:pointer;color:var(--muted);background:#ffffff0a;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:16px;font-size:14px;transition:border-color .12s,background .12s;display:flex}.welcome-drop:hover{background:#ffffff12;border-color:#ffffff4d}.welcome-drop--over{border-color:var(--cold);color:var(--cold);background:#18d8ff12}.welcome-drop--loaded{border-style:solid;border-color:var(--green);color:var(--text);background:#47ff910f}.welcome-drop-icon{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;opacity:.7;width:36px;height:36px}.welcome-drop--loaded .welcome-drop-icon{stroke:var(--green);opacity:1}.welcome-drop-name{color:var(--text);text-overflow:ellipsis;white-space:nowrap;max-width:90%;font-size:13px;font-weight:600;overflow:hidden}.welcome-drop-hint{color:var(--muted);font-size:11px}.welcome-actions{justify-content:center;align-items:center;gap:12px;display:flex}.welcome-start{background:linear-gradient(90deg, var(--cold), var(--green));color:#061019;cursor:pointer;border:none;border-radius:10px;justify-self:center;min-width:180px;min-height:48px;font-size:16px;font-weight:700;transition:opacity .15s,transform .1s}.welcome-start:hover:not(:disabled){opacity:.88;transform:translateY(-1px)}.welcome-start:disabled{opacity:.3;cursor:not-allowed;color:var(--muted);background:#ffffff26}.end-dialog-backdrop{z-index:20;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#03050ab8;justify-content:center;align-items:center;animation:.5s forwards end-dialog-in;display:flex;position:fixed;inset:0}@keyframes end-dialog-in{0%{opacity:0}to{opacity:1}}.end-dialog-confetti{pointer-events:none;position:absolute;inset:0;overflow:hidden}@keyframes confetti-fall{0%{opacity:1;transform:translateY(-20px)translate(0)rotate(0)}80%{opacity:.9}to{transform:translateY(110vh) translateX(var(--fall-drift,0px)) rotate(var(--fall-rotation,360deg));opacity:0}}.confetti-piece{animation:confetti-fall var(--fall-duration,3s) ease-in var(--fall-delay,0s) forwards;position:absolute;top:-20px}.end-dialog-box{z-index:1;background:#080c16e6;border:1px solid #ffffff2e;border-radius:16px;flex-direction:column;align-items:center;gap:6px;padding:48px 60px;animation:.6s cubic-bezier(.34,1.56,.64,1) .15s both end-box-in;display:flex;position:relative;box-shadow:0 40px 100px #000000b3}@keyframes end-box-in{0%{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}.end-dialog-text{color:var(--text);text-align:center;letter-spacing:.01em;margin:0;font-size:28px;font-weight:700}.end-dialog-subtext{background:linear-gradient(90deg, var(--cold), var(--green));-webkit-text-fill-color:transparent;letter-spacing:.06em;text-transform:lowercase;-webkit-background-clip:text;background-clip:text;margin:0;font-size:22px;font-weight:400}.end-dialog-close{color:var(--muted);border-color:#ffffff1f;margin-top:24px;font-size:13px}@media (width<=900px){:root{--sidebar-w:0px}.source-sidebar{display:none}.welcome-inputs{grid-template-columns:1fr}.welcome-code,.welcome-drop{height:180px}.welcome-card{gap:16px;padding:20px}.bottom-bar-stats{gap:8px}}@media (width<=600px){:root{--bar-h:96px}.volume-control,.bstat:nth-child(3){display:none}}