*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0c0c0e;--bg-elevated: #141416;--bg-surface: #1a1a1e;--border-subtle: #242428;--border-default: #2e2e34;--text-primary: #f0f0f0;--text-secondary: #b0b0b0;--text-muted: #707070;--text-faint: #505050;--accent: #e8e4d9;--accent-dim: rgba(232, 228, 217, .12);--accent-hover: rgba(232, 228, 217, .08);--focus-ring: rgba(232, 228, 217, .3);--text-subtle: #bbb;--text-dimmer: #999;--text-dim: #888;--text-dimmest: #ccc;--color-error: #ff4444;--color-warning: #ff9800;--color-info: #2196f3;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2.5rem;--space-2xl: 4rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 9999px}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text-primary)}#splash{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#020201}#splash.hidden{display:flex!important;pointer-events:none;opacity:0;transition:opacity .15s ease .38s}#splash-terminal{position:relative;max-width:560px;width:92%;border:1px solid #1c1812;border-radius:8px;overflow:hidden;background:#080806;box-shadow:0 0 80px #e8a8310d,0 0 160px #e8a83105,0 20px 60px #00000080;animation:termPowerOn .5s cubic-bezier(.16,1,.3,1)}@keyframes termPowerOn{0%{transform:scaleY(.005) scaleX(.8);filter:brightness(5);opacity:.5}40%{transform:scaleY(1.02) scaleX(1);filter:brightness(1.3);opacity:1}to{transform:scaleY(1) scaleX(1);filter:brightness(1);opacity:1}}#splash.hidden #splash-terminal{animation:crtOff .4s ease-in forwards}@keyframes crtOff{0%{transform:scale(1);opacity:1;filter:brightness(1)}40%{transform:scale(1.02,.008);opacity:1;filter:brightness(4)}70%{transform:scale(.3,.005);opacity:.7;filter:brightness(2)}to{transform:scale(0);opacity:0;filter:brightness(0)}}#splash-terminal:after{content:"";position:absolute;inset:0;z-index:20;pointer-events:none;animation:crtFlicker 6s linear infinite;background:transparent}@keyframes crtFlicker{0%,97%,to{opacity:0}97.5%{opacity:1;background:#e8a83104}98%{opacity:0}}.term-scanlines{position:absolute;inset:0;z-index:15;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.04) 2px,rgba(0,0,0,.04) 4px)}.term-glow{position:absolute;inset:-2px;z-index:-1;border-radius:10px;background:radial-gradient(ellipse at 50% 40%,rgba(232,168,49,.07) 0%,transparent 65%);pointer-events:none}.term-chrome{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#0c0b08;border-bottom:1px solid #1a1610}.term-dots{display:flex;gap:6px}.term-dots span{width:10px;height:10px;border-radius:50%}.term-dots span:nth-child(1){background:#ff5f57;opacity:.7}.term-dots span:nth-child(2){background:#febc2e;opacity:.7}.term-dots span:nth-child(3){background:#28c840;opacity:.7}.term-chrome-title{font-family:Space Mono,Courier New,monospace;font-size:.62rem;color:#5a4f35;letter-spacing:.03em}#splash-content{padding:20px 24px 16px;font-family:Space Mono,Courier New,monospace;font-size:.8rem;line-height:1.7;color:#e8a831;display:flex;flex-direction:column;max-width:none;width:auto}#term-boot{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid #1a1610}.term-line{opacity:0;transform:translateY(4px);animation:termLineIn .35s ease-out forwards;animation-delay:calc(var(--i, 0) * .28s + .15s)}@keyframes termLineIn{to{opacity:1;transform:translateY(0)}}.term-prompt{color:#ffd866;margin-right:6px;font-weight:700}.term-ellipsis{color:#5a4f35;letter-spacing:.2em}.term-ok{color:#5fff5f;font-weight:700}.term-title-line{margin-top:14px;display:flex;align-items:baseline;gap:12px}.term-main-title{font-family:Chakra Petch,Space Mono,monospace;font-size:clamp(1.3rem,4vw,1.7rem);font-weight:700;letter-spacing:.18em;color:#ffd866;text-shadow:0 0 20px rgba(255,216,102,.3),0 0 40px rgba(232,168,49,.15),0 0 80px rgba(232,168,49,.05)}.term-version{font-family:Space Mono,monospace;font-size:.65rem;color:#5a4f35;letter-spacing:.08em}#term-menu{position:relative;opacity:0;transform:translateY(8px);animation:termMenuIn .5s ease-out forwards;animation-delay:1.4s;padding-left:22px}@keyframes termMenuIn{to{opacity:1;transform:translateY(0)}}#nav-cursor{position:absolute;left:2px;top:0;color:#ffd866;font-size:1rem;font-weight:700;line-height:1;pointer-events:none;opacity:0;transition:top .22s cubic-bezier(.34,1.56,.64,1);text-shadow:0 0 10px rgba(255,216,102,.4);animation:navCursorIn .3s ease forwards;animation-delay:1.8s}@keyframes navCursorIn{to{opacity:1}}.term-section{margin-bottom:10px}.term-comment{color:#3d3520;font-size:.7rem;margin-bottom:2px;letter-spacing:.03em;font-style:italic}#splash-buttons,#mode-selector{display:flex;flex-direction:column}.term-item{display:flex;align-items:center;gap:8px;width:100%;padding:4px 8px;border:none;border-radius:3px;background:transparent;color:#c49428;font-family:Space Mono,Courier New,monospace;font-size:.8rem;cursor:pointer;text-align:left;line-height:1.6;letter-spacing:.02em;touch-action:manipulation;transition:color .15s ease,background .15s ease,text-shadow .2s ease}.term-item:hover{color:#ffd866;background:#e8a8310d}.term-item.nav-active{color:#ffd866;background:#e8a8310f;text-shadow:0 0 12px rgba(255,216,102,.2)}.term-item:focus-visible{outline:1px solid rgba(255,216,102,.4);outline-offset:1px}.term-radio{flex-shrink:0}.term-radio:before{content:"○";display:inline-block;font-size:.85em;width:1.2em;text-align:center;color:#5a4f35;transition:color .2s ease,text-shadow .2s ease}.term-item.selected .term-radio:before,.term-item.active .term-radio:before,.term-item[aria-checked=true] .term-radio:before{content:"◉";color:#ffd866;text-shadow:0 0 8px rgba(255,216,102,.4)}#audio-upload{display:none}#file-name{display:block;font-family:Space Mono,monospace;font-size:.68rem;color:#7a6830;min-height:1.2em;opacity:0;padding-left:8px;margin-top:2px;letter-spacing:.03em;transition:opacity .3s ease}#file-name:not(:empty){opacity:.8}#file-name.error{color:#ff5f57}#splash-step-mode{opacity:.15;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .5s cubic-bezier(.16,1,.3,1)}#splash-step-mode.unlocked{opacity:1;pointer-events:auto;-webkit-user-select:auto;user-select:auto}.badge{display:inline-block;font-family:Space Mono,monospace;font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;padding:1px 5px;border:1px solid #3d3520;border-radius:2px;color:#5a4f35;vertical-align:middle;margin-left:4px}.term-item[data-unavailable=true]{opacity:.4;cursor:not-allowed}.term-note{display:block;font-size:.65rem;color:#3d3520;margin-left:2.2em;font-style:italic}.term-divider-line{height:1px;background:linear-gradient(to right,#1a1610,#2a2518,#1a1610);margin:10px 0}.term-launch{justify-content:center;padding:10px 20px;margin-top:4px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;border:1px solid #1a1610;border-radius:3px;color:#3d3520;transition:border-color .3s ease,color .3s ease,background .3s ease,box-shadow .3s ease,text-shadow .3s ease}.term-launch:disabled{opacity:.3;cursor:not-allowed}.term-launch:not(:disabled){border-color:#5a4f35;color:#e8a831}.term-launch:not(:disabled):hover{border-color:#ffd866;color:#ffd866;background:#e8a8310f;box-shadow:0 0 20px #e8a8311a,0 0 40px #e8a8310a;text-shadow:0 0 10px rgba(255,216,102,.3)}.term-launch.nav-active:not(:disabled){border-color:#ffd866;color:#ffd866;text-shadow:0 0 10px rgba(255,216,102,.3)}#play-btn.is-ready{animation:launchGlow 2.5s ease-in-out infinite;border-color:#c49428;color:#ffd866}@keyframes launchGlow{0%,to{box-shadow:none;border-color:#5a4f35}50%{box-shadow:0 0 20px #e8a83126,0 0 40px #e8a8310f,inset 0 0 15px #e8a83108;border-color:#ffd866}}.term-statusbar{display:flex;align-items:center;gap:10px;padding-top:14px;margin-top:10px;border-top:1px solid #1a1610;font-size:.62rem;color:#3d3520;letter-spacing:.05em;opacity:0;animation:termLineIn .4s ease-out forwards;animation-delay:1.9s}.term-sep{opacity:.3}.term-vol-sep{margin-left:auto}.term-vol-label{flex-shrink:0;letter-spacing:.08em}.term-vol-slider{width:72px;flex-shrink:0;height:2px;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,#c49428 calc(var(--val, 80) * 1%),#2a2518 calc(var(--val, 80) * 1%));border-radius:1px;cursor:pointer;outline:none}.term-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:8px;border-radius:50%;background:#ffd866;box-shadow:0 0 6px #ffd86680;cursor:pointer}.term-vol-slider::-moz-range-thumb{width:8px;height:8px;border:none;border-radius:50%;background:#ffd866;box-shadow:0 0 6px #ffd86680;cursor:pointer}.term-vol-slider:focus-visible{outline:1px solid rgba(255,216,102,.4);outline-offset:3px}#image-group{display:flex;align-items:center;gap:.2rem;flex-shrink:0}#playback-image-upload{display:none}#change-image-label{cursor:pointer;font-size:.85rem;line-height:1;opacity:.5;transition:opacity .2s}#change-image-label:hover{opacity:1}.playback-remove-image{width:20px;height:20px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--text-muted);font-size:.9rem;line-height:1;cursor:pointer;transition:color .2s}.playback-remove-image:hover{color:var(--color-error)}#processing{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:var(--bg-primary)}#processing.hidden{display:none}#processing-content{text-align:center}#processing-content p{font-size:.875rem;color:var(--text-muted);margin-top:var(--space-lg)}.spinner{width:48px;height:48px;margin:0 auto;border:3px solid var(--border-subtle);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hidden{display:none!important}#sidebar{position:fixed;top:0;left:0;width:260px;height:100%;z-index:500;background:#0c0c0eeb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-right:1px solid var(--border-subtle);padding:4rem 1rem 2rem;overflow-y:auto;transform:translate(-100%);transition:transform .3s ease}#sidebar.open{transform:translate(0)}#sidebar h2{font-size:1rem;font-weight:600;letter-spacing:.08em;margin-bottom:1rem;color:var(--text-dimmer);text-transform:uppercase}#sidebar section{margin-bottom:1.2rem;padding-bottom:1rem;border-bottom:1px solid var(--border-subtle)}#sidebar section:last-child{border-bottom:none}#sidebar h3{font-size:.78rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:.6rem}.slider-group{margin-bottom:.6rem}.slider-group label{display:block;font-size:.75rem;color:var(--text-dim);margin-bottom:.2rem}.slider-group input[type=range]{-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:var(--border-subtle);outline:none}.slider-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg-primary)}#sidebar input[type=text]{width:100%;background:#ffffff14;border:1px solid rgba(255,255,255,.2);color:#fff;padding:4px 8px;border-radius:4px;font-size:13px;box-sizing:border-box}#pause-btn{position:relative;width:32px;height:32px;padding:0;border:1px solid var(--border-default);border-radius:5px;background:transparent;cursor:pointer;flex-shrink:0;transition:background .2s}#pause-btn:hover{background:var(--bg-surface)}#pause-btn:before{content:"";position:absolute;top:50%;left:50%;display:none;width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--text-subtle);transform:translate(-40%,-50%)}#pause-btn:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:none;width:10px;height:12px;border-left:3px solid var(--text-subtle);border-right:3px solid var(--text-subtle)}#pause-btn.is-playing:after{display:block}#pause-btn:not(.is-playing):before{display:block}#sidebar-audio-upload{display:none}#change-track-label{cursor:pointer;font-size:.85rem;line-height:1;opacity:.5;transition:opacity .2s}#change-track-label:hover{opacity:1}#track-name{font-size:.72rem;color:var(--text-dim);font-variant-numeric:tabular-nums;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#playback-bar{position:fixed;bottom:0;left:0;width:100%;z-index:500;display:flex;flex-direction:column;padding:.4rem 1rem .6rem;background:#0c0c0ef2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--border-subtle);transform:translateY(100%);transition:transform .3s ease}#playback-bar.visible{transform:translateY(0)}#bpm-group{display:flex;align-items:center;gap:4px;flex-shrink:0}#bpm-input{width:56px;text-align:center;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:4px;color:var(--text-primary);font-size:12px;font-family:inherit;padding:4px 2px;height:28px;box-sizing:border-box}#bpm-input:focus{outline:none;border-color:var(--accent)}#tap-tempo-btn,#beat-sync-btn{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:4px;color:var(--text-subtle);font-size:11px;font-family:inherit;font-weight:500;padding:4px 7px;height:28px;cursor:pointer;transition:all .15s}#tap-tempo-btn:hover,#beat-sync-btn:hover{background:var(--bg-surface);color:var(--text-primary);border-color:var(--accent)}@keyframes tap-flash{0%,to{opacity:1}50%{opacity:.4}}.tap-flash{animation:tap-flash .15s ease}#volume-group{position:relative;flex-shrink:0}#volume-btn{width:32px;height:32px;padding:0;border:1px solid var(--border-default);border-radius:5px;background:transparent;color:var(--text-subtle);font-size:1rem;line-height:1;cursor:pointer;transition:background .2s}#volume-btn:hover{background:var(--bg-surface)}#volume-popup{position:absolute;bottom:100%;left:50%;transform:translate(-50%) scaleY(0);transform-origin:bottom center;width:36px;padding:10px 0 8px;background:#0c0c0ef2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-subtle);border-radius:6px;display:flex;align-items:center;justify-content:center;height:128px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}#volume-group:hover #volume-popup{opacity:1;transform:translate(-50%) scaleY(1);pointer-events:auto}#volume-popup input[type=range]{-webkit-appearance:slider-vertical;appearance:slider-vertical;writing-mode:vertical-lr;direction:rtl;width:4px;height:100%;background:var(--border-subtle);outline:none;cursor:pointer}#volume-popup input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg-primary)}#track-info{display:flex;align-items:center;gap:.4rem;flex:1;justify-content:center;min-width:0}#scrubber-row{display:flex;align-items:center;gap:.5rem;width:100%;margin-bottom:.3rem}#controls-row{display:flex;align-items:center;gap:.75rem;width:100%}#scrubber-group{flex:1;min-width:0}#scrubber-group input[type=range]{-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:var(--border-subtle);outline:none;cursor:pointer;transition:background .2s}#scrubber-group input[type=range]:hover{background:var(--border-default)}#scrubber-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg-primary);transition:transform .15s,box-shadow .15s}#scrubber-group input[type=range]:hover::-webkit-slider-thumb{background:var(--text-primary)}#scrubber-group input[type=range]:active::-webkit-slider-thumb{transform:scale(1.5);box-shadow:0 0 6px var(--focus-ring)}#time-display{font-size:.68rem;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap}#randomize-btn{width:100%;padding:.5rem;margin-bottom:.5rem;border:none;border-radius:6px;background:var(--accent);color:var(--bg-primary);font-size:.85rem;font-weight:500;font-family:inherit;cursor:pointer;letter-spacing:.06em;transition:opacity .2s}#randomize-btn:hover{opacity:.85}#sidebar-toggle{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));z-index:600;background:#0c0c0eb3;border:1px solid var(--border-subtle);border-radius:6px;color:var(--text-dimmest);font-size:1.3rem;padding:.3rem .55rem;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s}#sidebar-toggle:hover{background:#1a1a1ee6}#viz-name-tag{display:block;font-size:.85rem;font-weight:600;letter-spacing:.02em;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;-webkit-user-select:none;user-select:none;margin-bottom:.3rem}#canvas-container{position:fixed;inset:0;z-index:0}#canvas-container canvas{display:block}#viz-selector{width:100%;padding:8px 28px 8px 12px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--text-primary);font-size:.8rem;font-family:inherit;cursor:pointer;outline:none;transition:border-color .2s;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23707070'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}#viz-selector:hover{border-color:var(--accent)}#viz-selector:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}#viz-selector option{background:var(--bg-elevated);color:var(--text-primary)}#sidebar::-webkit-scrollbar{width:4px}#sidebar::-webkit-scrollbar-track{background:transparent}#sidebar::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:2px}.skip-link{position:absolute;top:-40px;left:0;padding:8px 16px;background:var(--accent);color:var(--bg-primary);z-index:10000;transition:top .2s;font-size:.875rem;font-weight:500;text-decoration:none}.skip-link:focus{top:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}*:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}button:focus-visible,[role=button]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}#error-container{position:fixed;top:20px;right:20px;z-index:10000;display:flex;flex-direction:column;gap:10px}.error-toast{background:var(--color-error);color:#fff;padding:12px 20px;border-radius:8px;font-size:14px;max-width:400px;box-shadow:0 4px 12px #0000004d;opacity:0;transform:translate(100%);transition:all .3s ease}.error-toast--warning{background:var(--color-warning)}.error-toast--info{background:var(--color-info)}#file-name.error{color:var(--color-error)}.shortcuts-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.shortcuts-modal-content{background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:2rem;max-width:500px;max-height:80vh;overflow-y:auto}.shortcuts-modal-content h2{margin-bottom:1rem;font-size:1.25rem;font-weight:600}.shortcuts-list{line-height:2;margin-bottom:1.5rem}.shortcuts-list kbd{display:inline-block;padding:2px 8px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:4px;font-family:inherit;font-size:.875rem;min-width:28px;text-align:center}.shortcuts-modal .close-btn{padding:10px 24px;background:var(--accent);color:var(--bg-primary);border:none;border-radius:var(--radius-md);font-size:.875rem;font-weight:500;cursor:pointer;transition:opacity .2s}.shortcuts-modal .close-btn:hover{opacity:.85}#midi-btn{margin-bottom:3rem}.secondary-btn{width:100%;padding:.5rem;margin-top:.5rem;margin-bottom:1rem;border:1px solid var(--border-default);border-radius:6px;background:transparent;color:var(--text-secondary);font-size:.85rem;font-family:inherit;cursor:pointer;transition:all .2s}.secondary-btn:hover{background:var(--bg-surface);color:var(--text-primary);border-color:var(--accent)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:20px;border:1px solid #303042;border-radius:3px;background:transparent;color:#72728a;cursor:pointer;font-size:.78rem;font-family:inherit;letter-spacing:.04em;text-align:center;transition:background .2s,border-color .2s,color .2s}.btn:hover{background:#e8e4d90f;border-color:#50506a;color:#9898b0}.btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.spinner{animation:none}}@media(prefers-contrast:high){:root{--focus-ring: #ffffff;--accent: #ffffff;--text-primary: #ffffff;--border-default: #ffffff}}@media print{#splash,#processing,#sidebar,#sidebar-toggle,#playback-bar{display:none!important}#canvas-container{position:static}}