:root{--bg: #080808;--surface: #0f0f0f;--surface2: #141414;--border: #1a1a1a;--border2: #252525;--text: #c8c0b0;--text-dim: #3a3530;--text-mid: #6a6058;--accent: #8b7355;--accent-bright: #c4a97a;--playing: #5a9e6a;--playing-dim: #2a4a32;--selection: #4a7a8a;--selection-dim: #1a3a42;--danger: #7a4040;--purple: #7a5a9a}*{box-sizing:border-box;margin:0;padding:0}html,body{background:#0a0a0a}body{color:var(--text);font-family:Space Mono,monospace;min-height:100vh;min-height:100dvh;font-size:12px;overflow-x:hidden}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");pointer-events:none;z-index:9999}#landing{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:calc(48px + env(safe-area-inset-top));padding-right:calc(24px + env(safe-area-inset-right));padding-bottom:calc(48px + env(safe-area-inset-bottom));padding-left:calc(24px + env(safe-area-inset-left));position:relative}.landing-title{font-family:Cormorant Garamond,serif;font-size:clamp(48px,8vw,96px);font-weight:300;letter-spacing:.1em;color:var(--text);margin-bottom:8px;animation:fadeUp 1s .2s both}.landing-sub{font-size:10px;letter-spacing:.3em;color:var(--text-mid);margin-bottom:80px;animation:fadeUp 1s .5s both;text-transform:uppercase}.choices{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:100%;max-width:640px;animation:fadeUp 1s .8s both}.choice-card{background:var(--surface);border:1px solid var(--border);padding:40px 32px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;min-height:160px}.choice-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,transparent 60%,rgba(139,115,85,.05));opacity:0;transition:opacity .3s}.choice-card:hover{border-color:var(--accent)}.choice-card:hover:before{opacity:1}.choice-num{font-size:10px;letter-spacing:.2em;color:var(--text-dim);margin-bottom:24px}.choice-title{font-family:Cormorant Garamond,serif;font-size:28px;font-weight:300;font-style:italic;color:var(--accent-bright);margin-bottom:12px;line-height:1.2}.choice-desc{font-size:11px;color:var(--text-mid);line-height:1.8;letter-spacing:.05em}.choice-arrow{position:absolute;bottom:24px;right:24px;font-size:18px;color:var(--text-dim);transition:all .2s}.choice-card:hover .choice-arrow{color:var(--accent-bright);transform:translate(3px,-3px)}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}#app{display:none;height:100vh;height:100dvh;flex-direction:column}#app.active{display:flex}.app-header{display:flex;align-items:center;gap:16px;padding-top:calc(12px + env(safe-area-inset-top));padding-right:calc(24px + env(safe-area-inset-right));padding-bottom:12px;padding-left:calc(24px + env(safe-area-inset-left));border-bottom:1px solid var(--border);flex-shrink:0}.app-logo{font-family:Cormorant Garamond,serif;font-size:20px;font-weight:300;color:var(--text)}.app-mode{font-size:10px;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase;padding:3px 8px;border:1px solid var(--border)}.app-back{margin-left:auto;background:none;border:1px solid var(--border);color:var(--text-mid);font-family:Space Mono,monospace;font-size:10px;letter-spacing:.1em;padding:8px 14px;min-height:36px;cursor:pointer;transition:all .15s}.app-back:hover{border-color:var(--accent);color:var(--accent-bright)}.mode-panel{display:none;flex:1;flex-direction:column;overflow:hidden;padding-bottom:env(safe-area-inset-bottom)}.mode-panel.active{display:flex}#mode-visual{padding-bottom:0}.yt-body{display:grid;grid-template-columns:1fr 320px;flex:1;overflow:hidden}.yt-main{padding:32px;display:flex;flex-direction:column;gap:24px;border-right:1px solid var(--border);overflow-y:auto}.yt-sidebar{display:flex;flex-direction:column;overflow:hidden}.mobile-notice{font-size:11px;color:var(--text-mid);line-height:1.6;padding:10px 14px;border:1px solid var(--border);border-left:2px solid var(--accent);background:var(--surface2)}.mobile-notice b{color:var(--accent-bright);font-weight:400}.now-playing-area{background:var(--surface);border:1px solid var(--border);padding:28px}.np-label{font-size:10px;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px}.dot{width:5px;height:5px;border-radius:50%;background:var(--text-dim);transition:background .3s;display:inline-block}.dot.on{background:var(--playing);animation:blink 2s infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.np-title{font-family:Cormorant Garamond,serif;font-size:22px;font-style:italic;font-weight:300;color:var(--accent-bright);min-height:28px;line-height:1.3}.progress-row{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:10px;color:var(--text-mid)}.prog-bar{flex:1;height:6px;background:var(--border2);cursor:pointer;position:relative;touch-action:none}.prog-fill{height:100%;background:var(--accent);width:0%;pointer-events:none;transition:width .4s linear}.controls-row{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}.btn{background:transparent;border:1px solid var(--border);color:var(--text);font-family:Space Mono,monospace;font-size:11px;letter-spacing:.08em;padding:10px 14px;min-height:36px;cursor:pointer;transition:all .15s;text-transform:uppercase;white-space:nowrap}.btn:hover{border-color:var(--accent);color:var(--accent-bright)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.on{border-color:var(--playing);color:var(--playing)}.btn.icon{width:44px;height:44px;min-height:44px;padding:0;font-size:14px;display:inline-flex;align-items:center;justify-content:center}.vol-row{display:flex;align-items:center;gap:8px;margin-left:auto;color:var(--text-dim);font-size:10px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:90px;height:6px;background:var(--border2);outline:none;touch-action:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:none}.add-row{display:flex;gap:8px;flex-wrap:wrap}input[type=text],input[type=number],input[type=search],select{flex:1;background:var(--surface);border:1px solid var(--border);color:var(--text);font-family:Space Mono,monospace;font-size:12px;padding:10px 12px;min-height:36px;outline:none;transition:border-color .15s}input[type=text]::placeholder{color:var(--text-dim)}input[type=text]:focus,input[type=number]:focus,input[type=search]:focus{border-color:var(--accent)}.playlist-wrap{flex:1;overflow-y:auto;padding:16px;border-top:1px solid var(--border)}.pl-header{display:flex;justify-content:space-between;margin-bottom:10px;font-size:10px;letter-spacing:.15em;color:var(--text-dim);text-transform:uppercase}.track{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surface);border:1px solid transparent;border-left:2px solid transparent;cursor:pointer;margin-bottom:1px;transition:all .1s;min-height:44px}.track:hover{border-color:var(--border)}.track.active{border-left-color:var(--playing);background:#0f1a0f}.track-n{font-size:10px;color:var(--text-dim);width:22px;text-align:right;flex-shrink:0}.track.active .track-n{color:var(--playing)}.track-t{flex:1;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track.active .track-t{color:var(--accent-bright)}.track-time{font-size:10px;color:var(--text-dim);flex-shrink:0}.track-del{background:none;border:none;color:transparent;cursor:pointer;font-size:16px;padding:6px 10px;min-width:36px;min-height:36px}.track:hover .track-del{color:var(--text-dim)}.track-del:hover{color:var(--danger)!important}@media (hover: none){.track-del{color:var(--text-dim)}}.empty{padding:24px;text-align:center;color:var(--text-dim);font-size:11px;border:1px dashed var(--border)}.editor-body{flex:1;display:grid;grid-template-rows:1fr auto;overflow:hidden;padding:24px;gap:20px}.drop-zone{border:1px dashed var(--border2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px;cursor:pointer;transition:all .2s;position:relative}.drop-zone:hover,.drop-zone.drag{border-color:var(--accent)}.drop-zone input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.drop-icon{font-family:Cormorant Garamond,serif;font-size:48px;font-weight:300;color:var(--text-dim)}.drop-text{font-size:11px;letter-spacing:.15em;color:var(--text-mid);text-transform:uppercase}.drop-sub{font-size:10px;color:var(--text-dim)}.waveform-panel{display:none;flex-direction:column;gap:16px;flex:1;overflow:hidden}.waveform-panel.visible{display:flex}.waveform-wrap{position:relative;background:var(--surface);border:1px solid var(--border);height:140px;cursor:crosshair;overflow:hidden;flex-shrink:0;touch-action:none}canvas#waveform{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.playhead{position:absolute;top:0;bottom:0;width:1px;background:var(--accent-bright);pointer-events:none;left:0%;transition:left .05s linear}.selection-overlay{position:absolute;top:0;bottom:0;background:#4a7a8a33;border-left:1px solid var(--selection);border-right:1px solid var(--selection);pointer-events:none;display:none}.time-ruler{display:flex;justify-content:space-between;font-size:9px;color:var(--text-dim);letter-spacing:.1em;padding:0 2px;flex-shrink:0}.controls-panel{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;flex-shrink:0}.ctrl-group{background:var(--surface);border:1px solid var(--border);padding:16px}.ctrl-label{font-size:9px;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase;margin-bottom:10px;display:flex;justify-content:space-between}.ctrl-val{color:var(--accent-bright)}.ctrl-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:var(--border2);outline:none;margin-bottom:10px;display:block}.ctrl-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer}.ctrl-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:none}.ctrl-btns{display:flex;gap:6px;flex-wrap:wrap}.edit-toolbar{display:flex;gap:8px;align-items:center;padding:12px 16px;background:var(--surface);border:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}.edit-toolbar-label{font-size:9px;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase;margin-right:8px}.sel-info{font-size:10px;color:var(--text-mid);margin-left:auto}.sel-info span{color:var(--selection)}.transport{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}.time-display{font-family:Space Mono,monospace;font-size:18px;color:var(--accent-bright);letter-spacing:.1em;min-width:80px}.total-time{font-size:11px;color:var(--text-dim)}.math-note{font-size:9px;color:var(--purple);letter-spacing:.08em;padding:4px 8px;border:1px solid rgba(122,90,154,.3);margin-left:auto}.history-panel{background:var(--surface);border:1px solid var(--border);padding:12px 16px;flex-shrink:0;max-height:80px;overflow-y:auto}.history-label{font-size:9px;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase;margin-bottom:6px}.history-item{font-size:10px;color:var(--text-mid);padding:2px 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between}.history-item:last-child{border-bottom:none}.history-item .h-op{color:var(--text)}.history-item .h-undo{cursor:pointer;color:var(--text-dim)}.history-item .h-undo:hover{color:var(--accent-bright)}.rec-wrap{flex:1;display:flex;flex-direction:column;padding:32px;gap:20px;overflow:hidden}.rec-status-bar{background:var(--surface);border:1px solid var(--border);padding:24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}.rec-status-label{font-size:10px;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase;margin-bottom:8px}.rec-status-val{font-family:Cormorant Garamond,serif;font-size:28px;font-weight:300;color:var(--accent-bright)}.rec-timer{font-family:Space Mono,monospace;font-size:32px;color:var(--text-mid);margin-left:auto}.rec-canvas-wrap{background:var(--surface);border:1px solid var(--border);position:relative;height:100px;flex-shrink:0}.rec-canvas-wrap canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.rec-live-label{position:absolute;top:8px;left:12px;font-size:9px;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase}.rec-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.rec-notice{font-size:10px;color:#f87;margin-left:8px}.rec-list-wrap{flex:1;overflow-y:auto}.rec-list-label{font-size:10px;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase;margin-bottom:10px}.rec-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);margin-bottom:2px;flex-wrap:wrap}.rec-item-name{font-size:11px;color:var(--accent-bright);min-width:80px}.rec-item-dur{font-size:10px;color:var(--text-mid)}.vs-toolbar{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#080808f2;border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}.vs-toolbar-2{display:flex;align-items:center;gap:8px;padding:6px 16px;background:#050514f7;border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}.vs-label{font-size:9px;letter-spacing:.15em;color:var(--text-dim);text-transform:uppercase}.vs-sep{width:1px;height:20px;background:var(--border)}.vs-canvas{flex:1;display:block;cursor:crosshair;touch-action:none}.vs-freq-bar{height:36px;background:#080808cc;border-top:1px solid var(--border);flex-shrink:0;position:relative;overflow:hidden}.vs-freq-bar canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.vs-color{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color .15s;flex-shrink:0}.vs-color.active{border-color:#fff}.vs-color:hover{border-color:#ffffff80}.vs-hud-toggle{display:none}.lp-body{display:grid;grid-template-columns:1fr 360px;flex:1;overflow:hidden}.lp-main{padding:32px;display:flex;flex-direction:column;gap:20px;overflow-y:auto;border-right:1px solid var(--border)}.lp-sidebar{display:flex;flex-direction:column;overflow:hidden}.lp-artwork-wrap{width:100%;max-width:360px;aspect-ratio:1 / 1;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin:0 auto;overflow:hidden;position:relative}.lp-artwork-wrap img{width:100%;height:100%;object-fit:cover}.lp-artwork-placeholder{font-family:Cormorant Garamond,serif;font-size:120px;font-weight:300;color:var(--text-dim)}.lp-title{font-family:Cormorant Garamond,serif;font-size:24px;font-weight:300;font-style:italic;color:var(--accent-bright);text-align:center;min-height:30px;line-height:1.3}.lp-artist{font-size:11px;color:var(--text-mid);text-align:center;letter-spacing:.1em}.lp-progress-row{display:flex;align-items:center;gap:10px;font-size:10px;color:var(--text-mid);margin-top:8px}.lp-controls{display:flex;justify-content:center;align-items:center;gap:12px}.lp-controls .btn.icon{width:56px;height:56px;font-size:18px}.lp-controls .btn.icon.big{width:64px;height:64px;font-size:22px}.lp-add-btn{position:relative;overflow:hidden}.lp-add-btn input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.lp-storage-info{font-size:9px;color:var(--text-dim);letter-spacing:.1em;padding:8px 16px;text-transform:uppercase;border-top:1px solid var(--border)}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border2)}@media (max-width: 640px){body{font-size:13px}#landing{padding-top:calc(32px + env(safe-area-inset-top));padding-right:calc(16px + env(safe-area-inset-right));padding-bottom:calc(32px + env(safe-area-inset-bottom));padding-left:calc(16px + env(safe-area-inset-left))}.landing-sub{margin-bottom:48px}.choices{grid-template-columns:1fr;max-width:420px}.choice-card{padding:28px 24px;min-height:130px}.choice-title{font-size:24px;margin-bottom:8px}.choice-num{margin-bottom:16px}.app-header{padding-top:calc(10px + env(safe-area-inset-top));padding-right:calc(16px + env(safe-area-inset-right));padding-bottom:10px;padding-left:calc(16px + env(safe-area-inset-left));gap:10px}.yt-body{grid-template-columns:1fr;grid-template-rows:auto 1fr}.yt-main{padding:16px;border-right:none;border-bottom:1px solid var(--border)}.vol-row{margin-left:0;width:100%;justify-content:flex-start}.editor-body{padding:12px;gap:12px}.controls-panel{grid-template-columns:1fr;gap:10px}.waveform-wrap{height:120px}.rec-wrap{padding:16px}.rec-timer{margin-left:0;font-size:26px}.rec-status-bar{padding:16px}.vs-toolbar,.vs-toolbar-2{padding:6px 10px;gap:6px}.vs-label{display:none}.vs-hud-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:transparent;border:1px solid var(--border);color:var(--text-mid);cursor:pointer;font-size:16px;margin-left:auto}.vs-toolbar-2.collapsed>*:not(.vs-hud-toggle){display:none}.lp-body{grid-template-columns:1fr;grid-template-rows:auto 1fr}.lp-main{padding:16px;border-right:none;border-bottom:1px solid var(--border)}.lp-artwork-wrap{max-width:260px}.lp-title{font-size:20px}.lp-controls .btn.icon{width:48px;height:48px;font-size:16px}.lp-controls .btn.icon.big{width:56px;height:56px;font-size:20px}.math-note{display:none}}