@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Fira+Code:wght@400;700&display=swap";:root{--bg: #0c0c14;--bg-surface: #14141f;--fg: #e4e4ef;--accent: #a78bfa;--glow: #a78bfa40;--dim: #6b6b8a;--border: rgba(255, 255, 255, .06);--error: #f87171;--error-glow: #f8717180;--font: "Fira Code", monospace;--font-ui: "Inter", -apple-system, sans-serif;--radius: 8px;--radius-sm: 5px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;background:var(--bg);color:var(--fg);font-family:var(--font);overflow:hidden}#top-bar,#editor-container,#bottom-bar{position:relative}#app{display:flex;flex-direction:column;height:100vh;height:100dvh}#top-bar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding:10px 16px;flex-shrink:0;background:var(--bg);z-index:100}#brand{font-family:var(--font-ui);font-weight:600;font-size:16px;letter-spacing:1px;color:var(--fg);flex-shrink:0}#template-selector{display:flex;align-items:center;gap:0;position:absolute;left:50%;transform:translate(-50%)}#template-selector button{background:transparent;border:1px solid var(--border);color:var(--fg);font-family:var(--font-ui);cursor:pointer;transition:all .15s}#tpl-prev,#tpl-next{padding:6px 10px;font-size:10px;border-radius:var(--radius-sm)}#tpl-prev{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}#tpl-next{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}#tpl-prev:hover,#tpl-next:hover{background:#a78bfa1a;color:var(--accent)}#tpl-name{padding:6px 16px;font-size:12px;font-weight:500;letter-spacing:.5px;color:var(--dim);min-width:140px;text-align:center;white-space:nowrap}#tpl-name:hover{color:var(--fg);border-color:var(--accent)}#tpl-dropdown{position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:6px;background:#12121ef2;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--radius);min-width:220px;max-height:320px;display:flex;flex-direction:column;z-index:200;box-shadow:0 8px 32px #00000080;overflow:hidden}#tpl-dropdown.hidden{display:none}#tpl-search{background:transparent;border:none;border-bottom:1px solid var(--border);color:var(--fg);font-family:var(--font-ui);font-size:12px;padding:10px 14px;outline:none}#tpl-search::placeholder{color:var(--dim)}#tpl-list{overflow-y:auto;max-height:270px}.tpl-item{display:block;width:100%;background:transparent;border:none;border-bottom:1px solid var(--border);color:var(--dim);font-family:var(--font-ui);font-size:12px;padding:10px 14px;text-align:left;cursor:pointer;transition:all .1s}.tpl-item:last-child{border-bottom:none}.tpl-item:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--fg)}.tpl-item.active{color:var(--accent);background:#a78bfa0f}#viz-selector{position:relative;display:inline-flex}#viz-dropdown{position:absolute;top:100%;right:0;margin-top:6px;background:#12121ef2;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--radius);min-width:180px;max-height:400px;overflow-y:auto;z-index:200;box-shadow:0 8px 32px #00000080}#viz-dropdown.hidden{display:none}.viz-item{display:block;width:100%;background:transparent;border:none;border-bottom:1px solid var(--border);color:var(--dim);font-family:var(--font-ui);font-size:12px;padding:10px 14px;text-align:left;cursor:pointer;transition:all .1s}.viz-item:last-child{border-bottom:none}.viz-item:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--fg)}.viz-item.active{color:var(--accent);background:#a78bfa0f}#controls{display:flex;gap:6px}#controls button{background:var(--bg-surface);border:1px solid var(--border);color:var(--fg);font-family:var(--font-ui);padding:8px 14px;cursor:pointer;font-size:15px;border-radius:var(--radius-sm);transition:all .15s ease;position:relative}#controls button:hover{background:#a78bfa14;border-color:#a78bfa4d;color:var(--accent)}#controls button:active{background:#a78bfa26;transform:scale(.96)}#controls button.active-glow{background:#a78bfa1a;border-color:#a78bfa66;color:var(--accent);animation:btn-breathe 2s ease-in-out infinite}@keyframes btn-breathe{0%,to{border-color:#a78bfa66}50%{border-color:#a78bfab3;box-shadow:0 0 12px var(--glow)}}#controls button.loading{animation:btn-loading .5s linear infinite}@keyframes btn-loading{0%,to{opacity:1}50%{opacity:.3}}#main-area{flex:1 1 0;min-height:0;display:flex;flex-direction:column}#editor-container{flex:1 1 0;min-height:0;min-width:0;overflow:auto;transition:box-shadow .2s,border-color .1s}#editor-container .cm-editor{height:100%;background:var(--bg);font-size:15px}#editor-container .cm-content{caret-color:var(--fg);font-family:var(--font)}#editor-container .cm-cursor,#editor-container .cm-dropCursor{border-left-color:var(--fg);border-left-width:2px}#editor-container .cm-activeLine{background:color-mix(in srgb,var(--accent) 3%,transparent)}#editor-container .cm-gutters{background:var(--bg);color:var(--dim);border-right:1px solid var(--border)}#editor-container .cm-activeLineGutter{background:color-mix(in srgb,var(--accent) 7%,transparent)}#editor-container .cm-selectionBackground,#editor-container .cm-focused .cm-selectionBackground{background:color-mix(in srgb,var(--accent) 15%,transparent)!important}#editor-container .cm-focused{outline:none!important}#viz-panel{position:relative;overflow:hidden;background:var(--bg);flex-shrink:0}#visualizer{width:100%;height:100%;display:block}body.beat-flash #viz-panel{box-shadow:inset 0 0 30px var(--glow)}body.mode-vibewire #main-area{flex-direction:column}body.mode-vibewire #viz-panel{order:-1;width:100%;height:35%;min-height:140px;border-bottom:1px solid var(--border)}body.mode-vibewire #editor-container{flex:1 1 0;min-height:0}body.mode-code #main-area{flex-direction:column}body.mode-code #viz-panel{display:none}body.mode-code #editor-container{flex:1 1 0;min-height:0}body.mode-viz #main-area{flex-direction:column}body.mode-viz #editor-container{display:none}body.mode-viz #viz-panel{width:100%;flex:1 1 0;min-height:0}#layout-selector{position:relative;display:inline-flex}#btn-layout{font-size:16px!important;padding:8px 12px!important;display:flex;align-items:center;justify-content:center}#btn-layout svg{display:block}#layout-dropdown{position:absolute;top:100%;right:0;margin-top:6px;background:#12121ef2;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--radius);min-width:160px;z-index:200;box-shadow:0 8px 32px #00000080;overflow:hidden}#layout-dropdown.hidden{display:none}.layout-item{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:none;border-bottom:1px solid var(--border);color:var(--dim);font-family:var(--font-ui);font-size:12px;padding:10px 14px;text-align:left;cursor:pointer;transition:all .1s}.layout-item:last-child{border-bottom:none}.layout-item:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--fg)}.layout-item.active{color:var(--accent);background:#a78bfa0f}.layout-item svg{flex-shrink:0;opacity:.7}.layout-item.active svg{opacity:1}.layout-item:hover svg{opacity:1}#bottom-bar{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:16px;padding:8px 16px;border-top:1px solid var(--border);background:var(--bg);flex-shrink:0}#status{display:flex;flex-direction:row;gap:16px;font-size:12px;color:var(--dim);white-space:nowrap}#status{font-family:var(--font-ui)}#status-text{color:var(--fg);transition:color .15s}#status-text.error{color:var(--error)}.cm-error-line{background:color-mix(in srgb,var(--error) 12%,transparent)!important;box-shadow:inset 3px 0 0 var(--error),0 0 8px var(--error-glow);transition:background .15s ease-out}.cm-tooltip-hover{background:#12121ef2!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(248,113,113,.3)!important;border-radius:var(--radius-sm)!important;color:var(--error)!important;font-family:var(--font);font-size:12px;padding:10px 14px;max-width:450px;box-shadow:0 8px 24px #0006;white-space:pre-wrap;word-break:break-word;line-height:1.4;z-index:300}#editor-container{--bass-energy: 0;--mid-energy: 0;--high-energy: 0}[class*=cm-tok-]{transition:text-shadow .05s ease-out,filter .05s ease-out;border-radius:2px}.cm-tok-kick{color:#ff6b35;text-shadow:0 0 calc(var(--bass-energy) * 20px) #FF6B35,0 0 calc(var(--bass-energy) * 40px) #FF6B3580;filter:brightness(calc(.9 + var(--bass-energy) * .8))}.cm-tok-bass{color:#e63946;text-shadow:0 0 calc(var(--bass-energy) * 20px) #E63946,0 0 calc(var(--bass-energy) * 40px) #E6394680;filter:brightness(calc(.9 + var(--bass-energy) * .8))}.cm-tok-snare{color:#ff006e;text-shadow:0 0 calc(var(--mid-energy) * 16px) #FF006E,0 0 calc(var(--mid-energy) * 30px) #FF006E80;filter:brightness(calc(.9 + var(--mid-energy) * .7))}.cm-tok-clap{color:#b388ff;text-shadow:0 0 calc(var(--mid-energy) * 16px) #B388FF,0 0 calc(var(--mid-energy) * 30px) #B388FF80;filter:brightness(calc(.9 + var(--mid-energy) * .7))}.cm-tok-keys{color:#ffd166;text-shadow:0 0 calc(var(--mid-energy) * 16px) #FFD166,0 0 calc(var(--mid-energy) * 30px) #FFD16680;filter:brightness(calc(.9 + var(--mid-energy) * .7))}.cm-tok-synth{color:#7b68ee;text-shadow:0 0 calc(var(--mid-energy) * 16px) #7B68EE,0 0 calc(var(--mid-energy) * 30px) #7B68EE80;filter:brightness(calc(.9 + var(--mid-energy) * .7))}.cm-tok-string{color:#06d6a0;text-shadow:0 0 calc(var(--mid-energy) * 16px) #06D6A0,0 0 calc(var(--mid-energy) * 30px) #06D6A080;filter:brightness(calc(.9 + var(--mid-energy) * .7))}.cm-tok-hat{color:#00e5ff;text-shadow:0 0 calc(var(--high-energy) * 14px) #00E5FF,0 0 calc(var(--high-energy) * 24px) #00E5FF80;filter:brightness(calc(.9 + var(--high-energy) * .8))}.cm-tok-open{color:#73d2de;text-shadow:0 0 calc(var(--high-energy) * 14px) #73D2DE,0 0 calc(var(--high-energy) * 24px) #73D2DE80;filter:brightness(calc(.9 + var(--high-energy) * .8))}.cm-tok-fx{color:#ffbe0b;text-shadow:0 0 calc(var(--high-energy) * 14px) #FFBE0B,0 0 calc(var(--high-energy) * 24px) #FFBE0B80;filter:brightness(calc(.9 + var(--high-energy) * .8))}.cm-tok-note-low{color:#ff8a65;text-shadow:0 0 calc(var(--bass-energy) * 20px) #FF8A65,0 0 calc(var(--bass-energy) * 40px) #FF8A6580;filter:brightness(calc(.9 + var(--bass-energy) * .8))}.cm-tok-note-mid{color:#ce93d8;text-shadow:0 0 calc(var(--mid-energy) * 16px) #CE93D8,0 0 calc(var(--mid-energy) * 30px) #CE93D880;filter:brightness(calc(.9 + var(--mid-energy) * .7))}.cm-tok-note-high{color:#80deea;text-shadow:0 0 calc(var(--high-energy) * 14px) #80DEEA,0 0 calc(var(--high-energy) * 24px) #80DEEA80;filter:brightness(calc(.9 + var(--high-energy) * .8))}.bass-onset .cm-band-bass{filter:brightness(2)!important}.mid-onset .cm-band-mid{filter:brightness(1.8)!important}.high-onset .cm-band-high{filter:brightness(1.9)!important}.cm-foldGutter .cm-gutterElement{cursor:pointer;color:var(--dim);font-size:12px;padding:0 2px;transition:color .1s}.cm-foldGutter .cm-gutterElement:hover{color:var(--accent);text-shadow:0 0 6px var(--glow)}.cm-foldPlaceholder{background:#a78bfa14;border:1px solid rgba(167,139,250,.15);color:var(--accent);padding:0 8px;margin:0 4px;cursor:pointer;font-size:12px;font-family:var(--font);border-radius:var(--radius-sm);transition:all .15s}.cm-foldPlaceholder:hover{background:#a78bfa26;border-color:#a78bfa4d}.cm-play-gutter{width:20px;cursor:pointer}.cm-play-line{color:var(--dim);font-size:9px;line-height:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;transition:color .1s,text-shadow .1s}.cm-play-line:hover{color:var(--fg);text-shadow:0 0 6px var(--glow)}#editor-container.flash{box-shadow:inset 0 0 20px var(--glow)}#boot-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:10000;display:flex;justify-content:flex-start;align-items:flex-start;padding:40px;transition:opacity .4s ease-out}#boot-screen.hidden{opacity:0;pointer-events:none}#boot-log{font-family:var(--font);font-size:14px;color:#00ff41;line-height:1.8;white-space:pre-wrap;text-align:left;text-shadow:0 0 8px #00ff4180,0 0 2px #00ff41}#boot-log .boot-cursor{display:inline-block;width:8px;height:14px;background:#00ff41;box-shadow:0 0 6px #00ff41;animation:blink-cursor .6s step-end infinite;vertical-align:text-bottom;margin-left:2px}@keyframes blink-cursor{50%{opacity:0}}#boot-log .boot-ok{color:#00ff41}#boot-log .boot-dim{color:#0a5f1c}#boot-log .boot-title{color:#00ff41;font-size:20px;text-shadow:0 0 12px #00ff4180,0 0 4px #00ff41}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:5000}.modal.hidden{display:none}.modal-content{border:1px solid var(--border);background:#12121ef7;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:12px;padding:28px;min-width:320px;max-width:90vw;box-shadow:0 16px 48px #00000080}.modal-header{font-family:var(--font-ui);font-size:15px;font-weight:600;letter-spacing:.5px;margin-bottom:20px;color:var(--fg)}.modal-field{display:flex;align-items:center;gap:12px;margin-bottom:16px}.modal-field label{font-family:var(--font-ui);font-size:12px;color:var(--dim);min-width:70px}.field-unit{font-size:11px;color:var(--dim)}.btn-group{display:flex;gap:4px}.btn-group button{background:transparent;border:1px solid var(--border);color:var(--dim);font-family:var(--font-ui);font-size:13px;padding:6px 12px;cursor:pointer;border-radius:var(--radius-sm);transition:all .1s}.btn-group button.selected{border-color:#a78bfa66;color:var(--accent);background:#a78bfa14}.btn-group button:hover{border-color:var(--accent);color:var(--accent)}.modal-actions{display:flex;gap:8px;margin-top:20px}.modal-actions button{flex:1;background:transparent;border:1px solid var(--border);color:var(--fg);font-family:var(--font-ui);font-size:13px;padding:10px;cursor:pointer;border-radius:var(--radius-sm);transition:all .15s}.modal-actions button:hover{background:#a78bfa14;border-color:#a78bfa4d}.modal-actions button:first-child{font-weight:700}#export-progress{margin:16px 0;height:4px;background:var(--border);position:relative}#export-progress.hidden{display:none}#export-progress-bar{height:100%;background:var(--accent);box-shadow:0 0 8px var(--glow);width:0%;transition:width .3s}#export-progress-text{position:absolute;top:8px;left:0;font-size:11px;color:var(--dim)}.shortcuts-list{display:flex;flex-direction:column;gap:8px}.shortcut-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border)}.shortcut-row:last-child{border-bottom:none}.shortcut-row kbd{background:var(--border);color:var(--fg);padding:4px 10px;font-family:var(--font);font-size:12px;border:1px solid var(--dim);min-width:100px;text-align:center}.shortcut-row span{color:var(--dim);font-size:13px}.onboarding-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:8000;display:none}.onboarding-tooltip{position:fixed;z-index:8001;background:var(--bg);border:1px solid var(--fg);box-shadow:0 0 20px var(--glow);padding:16px 20px;max-width:320px;display:none}.onboarding-text{color:var(--fg);font-family:var(--font);font-size:14px;line-height:1.5;margin-bottom:12px}.onboarding-actions{display:flex;align-items:center;gap:8px}.onboarding-step{color:var(--dim);font-size:11px;font-family:var(--font);margin-right:auto}.onboarding-next,.onboarding-skip{background:transparent;border:1px solid var(--border);color:var(--fg);font-family:var(--font);font-size:12px;padding:6px 14px;cursor:pointer;transition:all .15s}.onboarding-next:hover{border-color:var(--fg);box-shadow:0 0 8px var(--glow)}.onboarding-skip{color:var(--dim)}.onboarding-skip:hover{color:var(--fg);border-color:var(--dim)}@media(max-width:768px){#top-bar{padding:8px 10px;justify-content:center}#brand{display:none}#template-selector{display:flex;position:static;transform:none}#tpl-name{min-width:120px;font-size:11px}#controls{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:8px;padding:10px 16px;background:var(--bg);border-top:1px solid var(--border);z-index:150}#controls button{padding:12px 18px;font-size:18px;min-width:46px;min-height:46px}#btn-layout{font-size:14px!important}#viz-dropdown,#layout-dropdown{top:auto;bottom:100%;margin-top:0;margin-bottom:4px}#bottom-bar{padding-bottom:56px}body.mode-vibewire #viz-panel{height:25%;min-height:80px}#editor-container .cm-editor{font-size:14px}#editor-container .cm-gutters{padding-left:2px}.cm-play-gutter{width:28px}.cm-play-line{font-size:12px}#status{width:100%;justify-content:space-between;font-size:11px}}@media(max-width:480px){#editor-container .cm-editor{font-size:13px}#controls button{padding:10px 14px;font-size:16px;min-width:42px;min-height:42px}#tpl-prev,#tpl-next{padding:6px 8px}}