@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=VT323&display=swap";:root{--bg-color: #1a1a1c;--surface: #2b2b2f;--surface-hover: #3a3a40;--surface-active: #151518;--text-primary: #ededed;--text-secondary: #8c8c93;--text-lcd: #a7f3d0;--accent-orange: #ff5e00;--accent-yellow: #facc15;--accent-green: #4ade80;--accent-blue: #3b82f6;--border-radius: 8px;--border-radius-sm: 4px;--shadow-sm: inset 0 2px 0 0 rgba(255, 255, 255, .1), 0 2px 4px 0 rgba(0, 0, 0, .5);--shadow-active: inset 0 2px 4px 0 rgba(0, 0, 0, .5), 0 0px 0px 0 rgba(0, 0, 0, 0)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--bg-color);color:var(--text-primary);display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;padding:16px;overflow:auto;user-select:none;-webkit-user-select:none}.te-button{background-color:var(--surface);border:1px solid #111;color:var(--text-primary);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);cursor:pointer;transition:all .05s ease-out;display:flex;align-items:center;justify-content:center;font-family:Inter,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.te-button:active{transform:translateY(2px) scale(.98);box-shadow:var(--shadow-active);background-color:var(--surface-active)}.te-button:hover:not(:active){background-color:var(--surface-hover)}.invisible{visibility:hidden}.lcd-text{font-family:VT323,monospace;font-size:2rem!important;color:var(--text-lcd);text-shadow:0 0 10px rgba(74,222,128,.8),0 0 20px rgba(74,222,128,.6),0 0 30px rgba(74,222,128,.4);line-height:1;margin-top:-4px}.app-container{width:100%;max-width:1320px;min-width:0;background-color:#1f1f22;background-image:radial-gradient(ellipse at 50% -50%,rgba(255,255,255,.06),transparent 70%),repeating-radial-gradient(circle at 0 0,#0000 0,#141417 1px,#0000 2px);border-radius:16px;padding:32px;box-shadow:0 24px 48px #000c,inset 0 1px 1px #ffffff26,inset 0 0 40px #00000080;display:flex;flex-direction:column;gap:20px;border:1px solid #111;position:relative}.app-container:before,.app-container:after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#0000 40%,#0006 45% 55%,#0000 60%),radial-gradient(ellipse at 50% 50%,#555,#333);box-shadow:inset 0 2px 2px #fff6,0 2px 4px #000000e6;border:1px solid #111}.app-container:before{top:12px;left:12px}.app-container:after{top:12px;right:12px}.header{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid #111;padding-bottom:16px;flex-wrap:wrap;gap:16px}.header-left{display:flex;flex-direction:column;gap:16px;justify-content:flex-end;align-items:flex-start}.brand{font-size:1.2rem;font-weight:800;letter-spacing:-.5px;color:var(--text-secondary);display:flex;align-items:center;gap:16px}.brand-text{display:flex;align-items:center;gap:8px}.oscilloscope{background:#030304;border-radius:4px;border:1px solid #111;box-shadow:inset 0 5px 10px #000,0 1px 1px #ffffff1a;margin-left:24px;position:relative;overflow:hidden}.oscilloscope:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.05) 0%,transparent 50%);pointer-events:none}.brand-dot{width:12px;height:12px;background-color:var(--accent-orange);border-radius:50%;box-shadow:inset 0 -2px #0000004d}.transport-section{display:flex;gap:14px;background-color:#111;padding:16px 20px;margin-left:8px;border-radius:8px;align-items:stretch;border:1px solid #333;flex-wrap:wrap;row-gap:10px;justify-content:flex-end}.transport-divider{width:1px;background:#222;margin:4px 2px;border-radius:1px}.transport-col{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:80px;margin-left:0!important;gap:8px}.transport-control-wrapper{flex:1;display:flex;align-items:center;justify-content:center;width:100%}.transport-col:has(.transport-btn){width:64px}.transport-col.knob-col{width:52px}.transport-btn{width:60px;height:46px;border-radius:6px}.transport-btn svg{width:22px;height:22px}.transport-btn.play{color:var(--accent-green)}.transport-btn.stop{color:var(--accent-orange)}.bpm-box{display:flex;align-items:center;justify-content:center;background:#0a0a0c;padding:0 16px;height:46px;border-radius:6px;border:2px solid #222;box-shadow:inset 0 4px 8px #000000e6,0 1px #ffffff1a;min-width:80px}.bpm-label{font-family:IBM Plex Mono,Courier New,monospace;font-size:10px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.12em;margin-top:4px;margin-bottom:12px;opacity:.8}.bpm-value{font-size:1.2rem}.pattern-bank{display:flex;gap:8px;align-items:center}.pattern-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.pattern-btn{width:38px;height:28px;border-radius:4px;background:#222;border:1px solid #000;box-shadow:inset 0 2px 2px #ffffff1a,0 2px 4px #00000080;color:#777;font-family:Inter,sans-serif;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.pattern-btn:active{transform:translateY(2px);box-shadow:inset 0 2px 4px #000c}.pattern-btn.active{background:#2a2a30;color:#fff;border-bottom:2px solid var(--accent-orange);box-shadow:inset 0 2px 2px #ffffff26,0 4px 12px #fa03}.pattern-btn.random-btn{width:44px;height:62px}.slider-control{display:flex;flex-direction:column;align-items:center;justify-content:center}.sequencer-grid{display:flex;flex-direction:column;gap:12px;min-height:500px;justify-content:flex-start}.lane{display:flex;align-items:center;gap:16px;background:#2a2a30;padding:8px 16px;border-radius:8px;border:1px solid #1a1a1c}.track-params-row{display:flex;gap:10px}.track-controls-row{display:flex;gap:12px;align-items:center}.param-group{display:flex;flex-direction:column;align-items:center;gap:6px}.param-group .param-label{font-size:10px;color:#666;font-family:IBM Plex Mono,Courier New,monospace;letter-spacing:.05em;text-transform:uppercase}.knob-container{border-radius:50%;background:#222;box-shadow:inset 0 2px 2px #ffffff0d,0 2px 4px #000c,0 4px 6px #0006;position:relative;cursor:grab;touch-action:none;border:1px solid #000;transition:transform .05s ease}.knob-container:active{cursor:grabbing;transform:scale(.95)}.knob-dial{width:100%;height:100%;border-radius:50%;position:relative}.knob-indicator{position:absolute;top:15%;left:50%;width:4px;height:4px;background:var(--text-secondary);transform:translate(-50%);border-radius:50%;box-shadow:0 0 2px #00000080}.lane-header{width:206px;flex-shrink:0;display:flex;flex-direction:column;gap:8px;padding-right:8px}.track-top-row{display:flex;justify-content:space-between;align-items:center}.track-title-group{display:flex;flex-direction:column;gap:6px}.track-name{font-weight:600;font-size:.85rem;color:var(--text-secondary)}.track-indicator{width:24px;height:4px;border-radius:2px;background:var(--text-secondary)}.steps-container{display:flex;gap:6px;flex:1}.step-btn{flex:1;min-width:16px;height:82px;border-radius:4px;background-color:#1e1e24;border:1px solid #111;box-shadow:var(--shadow-sm);cursor:pointer;transition:all .08s cubic-bezier(.175,.885,.32,1.275);position:relative}.step-btn:after{content:"";position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background-color:#ffffff0d;box-shadow:inset 0 1px 2px #00000080;transition:all .15s ease}.step-btn:active{transform:translateY(2px) scale(.95);box-shadow:var(--shadow-active);background-color:var(--surface-active)}.step-btn:hover:not(:active){background-color:#303036}.step-btn:focus-visible{outline:2px solid var(--accent-blue);outline-offset:4px}.step-btn.active{background-color:var(--surface-hover)}.step-btn.active:after{background-color:transparent;box-shadow:none}.step-btn.current{transform:scale(1.05);z-index:10;border-color:#555;box-shadow:0 0 12px #ffffff1a}.step-btn.current.active:after{background-color:#fff;box-shadow:0 0 8px #fff}.step-btn:nth-child(4n):not(:last-child){margin-right:10px}.lane .track-indicator{background-color:var(--track-color)}.lane .step-btn.active:after{background-color:var(--track-color);box-shadow:0 0 16px var(--track-color),inset 0 1px 2px #ffffffe6}@keyframes step-flash-fade{0%{background-color:#fff;box-shadow:0 0 24px #fff,inset 0 2px 4px #fff;transform:scale(1.8);opacity:1}15%{background-color:var(--track-color);box-shadow:0 0 16px var(--track-color),inset 0 1px 2px #ffffffe6;transform:scale(1.2);opacity:1}to{background-color:var(--track-color);box-shadow:0 0 16px var(--track-color),inset 0 1px 2px #ffffffe6;transform:scale(1);opacity:1}}.step-glow-anim{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;pointer-events:none;animation:step-flash-fade 4s cubic-bezier(.1,.9,.2,1) forwards;z-index:5}.step-modified-dot{position:absolute;bottom:6px;left:6px;width:6px;height:6px;border-radius:50%;background-color:var(--track-color, var(--accent-orange));opacity:.55;pointer-events:none}.step-editor-popover{position:fixed;z-index:200;background-color:var(--surface);border:1px solid #333;border-radius:8px;box-shadow:0 8px 24px #000c,inset 0 1px #ffffff0f;padding:10px 12px}.step-editor-row{display:flex;gap:14px;align-items:center;justify-content:space-between;height:100%}.step-editor-group{display:flex;flex-direction:column;align-items:center;gap:2px;font-family:Space Mono,monospace}.step-editor-label{font-size:9px;letter-spacing:.1em;color:var(--text-secondary);text-transform:uppercase}.step-editor-value{font-size:10px;color:var(--text-lcd)}.bpm-input{width:68px;background:transparent;border:none;outline:none;text-align:center;padding:0;font-family:VT323,monospace;-moz-appearance:textfield;appearance:textfield}.bpm-input::-webkit-outer-spin-button,.bpm-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.bpm-input:focus-visible{outline:1px solid var(--accent-green);outline-offset:4px;border-radius:2px}.engine-select{background:#16161a;color:var(--text-secondary);border:1px solid #000;border-bottom:2px solid var(--track-color, #333);border-radius:4px;padding:5px 4px;font-family:Space Mono,monospace;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;outline:none;cursor:pointer;width:80px;height:34px;box-shadow:inset 0 2px 2px #ffffff0a}.engine-select:hover{color:var(--text-primary);background:#1d1d22}.engine-select:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}.step-ruler{display:flex;align-items:center;gap:16px;padding:0 16px;margin-bottom:-4px}.step-ruler.no-header{padding:0;margin-bottom:2px}.step-ruler-spacer{width:206px;flex-shrink:0;padding-right:8px}.step-tick{flex:1;min-width:16px;text-align:center;font-family:Space Mono,monospace;font-size:10px;line-height:1;color:#4a4a52;letter-spacing:.05em;transition:color .1s ease}.step-tick.beat{color:var(--text-secondary);font-weight:700}.step-tick.current{color:var(--accent-green)}.step-tick:nth-child(4n):not(:last-child){margin-right:10px}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;background:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:28px;width:18px;border-radius:4px;background:linear-gradient(180deg,#e0e0e0,#a0a0a0);border:1px solid #333;cursor:pointer;margin-top:-12px;box-shadow:inset 0 2px 2px #fffc,0 4px 6px #0009;position:relative}input[type=range]::-webkit-slider-thumb:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6px;height:2px;background:#333}input[type=range]::-webkit-slider-thumb:active{background:linear-gradient(180deg,#d0d0d0,#909090);box-shadow:inset 0 1px 1px #ffffff80,0 2px 3px #0009}input[type=range]::-webkit-slider-runnable-track{width:100%;height:6px;cursor:pointer;background:repeating-linear-gradient(90deg,#08080a,#08080a 4px,#15151a 4px 6px);border-radius:3px;border:1px solid #1a1a1c;box-shadow:inset 0 2px 4px #000000e6}input[type=range]:focus{outline:none}.track-controls{display:flex;gap:8px;margin-top:6px}.track-ctrl-btn{font-family:Space Mono,monospace;font-size:.75rem;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:#202025;color:var(--text-secondary);border:1px solid #111;box-shadow:inset 0 2px #ffffff0d,0 2px 4px #00000080;cursor:pointer;text-transform:uppercase;font-weight:700;transition:all .05s ease-out;position:relative}.track-ctrl-btn:focus-visible{outline:2px solid var(--accent-blue);outline-offset:4px}.track-ctrl-btn:after{content:"";position:absolute;top:4px;right:4px;width:4px;height:4px;border-radius:50%;background-color:#ffffff0d;transition:all .1s ease}.track-ctrl-btn:active{transform:translateY(2px) scale(.95);box-shadow:inset 0 2px 4px #00000080,0 0 #0000;background:#18181c}.track-ctrl-btn:hover:not(:active){background-color:#2a2a30}.track-ctrl-btn.active.mute{color:#fff;border-color:#555;background-color:#1a1a1e;box-shadow:inset 0 0 12px #000000e6}.track-ctrl-btn.active.mute:after{background-color:#ff2a2a;box-shadow:0 0 12px #ff2a2a,inset 0 1px 2px #fffc}.track-ctrl-btn.active.solo{color:#fff;border-color:#555;background-color:#1a1a1e;box-shadow:inset 0 0 12px #000000e6}.track-ctrl-btn.active.solo:after{background-color:#fa0;box-shadow:0 0 12px #fa0,inset 0 1px 2px #fffc}.module-tabs{display:flex;gap:8px;background-color:#111;padding:8px;border-radius:8px;border:1px solid #222;margin-bottom:8px}.tab-btn{flex:1;padding:12px;background:#18181c;color:var(--text-secondary);border:1px solid #000;border-radius:4px;font-family:Space Mono,monospace;font-weight:700;font-size:.9rem;letter-spacing:1px;cursor:pointer;transition:all .15s ease;box-shadow:inset 0 2px 2px #ffffff0d,0 2px 4px #00000080}.tab-btn:hover{background:#202025;color:#fff}.tab-btn.active{background:#2a2a30;color:var(--accent-green);border-bottom:2px solid var(--accent-green);box-shadow:inset 0 2px 2px #ffffff26,0 4px 12px #4ade8033}.synth-module-container{display:flex;flex-direction:column;gap:16px;background:#2a2a30;padding:16px;border-radius:8px;border:1px solid #1a1a1c}.synth-header{display:flex;justify-content:space-between;align-items:center;background:#202025;padding:12px 16px;border-radius:6px;border:1px solid #111}.synth-header-right{display:flex;align-items:center;gap:16px}.synth-header-right .track-controls{margin-top:0}.synth-title-group{display:flex;flex-direction:column;gap:8px}.preset-select{background:#111;color:var(--text-primary);border:1px solid #333;padding:6px 12px;border-radius:4px;font-family:Space Mono,monospace;font-size:.8rem;outline:none;cursor:pointer}.preset-select:focus{border-color:var(--accent-blue)}.scale-pickers{display:flex;gap:6px;margin-top:6px}.scale-pickers .preset-select{padding:4px 8px;font-size:.7rem}.scale-select.scale-active{border-bottom:2px solid var(--accent-orange)}.synth-lane{background:transparent;padding:0;border:none}.step-note-label{font-family:Space Mono,monospace;font-size:.65rem;color:#ffffff80;position:absolute;bottom:6px;left:50%;transform:translate(-50%)}.step-btn.active .step-note-label{color:#fff;font-weight:700}.keyboard-container{display:flex;flex-direction:column;gap:12px;margin-top:12px;padding-top:16px;border-top:1px solid #333}.keyboard-controls{display:flex;gap:12px;align-items:center}.keyboard-controls button{background:#18181c;color:var(--text-primary);border:1px solid #000;padding:6px 12px;border-radius:4px;font-family:Space Mono,monospace;font-size:.8rem;cursor:pointer;transition:all .1s}.keyboard-controls button:hover{background:#222}.keyboard-controls button:active{background:#111;transform:translateY(1px)}.keyboard-controls button{min-width:30px}.keyboard-controls .kb-label{font-family:IBM Plex Mono,Courier New,monospace;font-size:10px;letter-spacing:.12em;color:var(--text-secondary);text-transform:uppercase}.keyboard-controls .kb-octave{font-family:Space Mono,monospace;font-size:.85rem;font-weight:700;color:var(--text-primary);min-width:14px;text-align:center}.keyboard-controls .kb-note{font-family:Space Mono,monospace;font-size:.85rem;font-weight:700;color:var(--accent-orange);margin-left:8px}.keyboard-controls .kb-hint{font-family:IBM Plex Mono,Courier New,monospace;font-size:10px;letter-spacing:.06em;color:#5c5c64;text-transform:uppercase}.piano-keyboard{position:relative;display:flex;height:120px;background:#111;border-radius:6px;padding:4px;border:1px solid #000;box-shadow:inset 0 2px 8px #000c}.piano-key{position:relative;border-radius:0 0 4px 4px;cursor:pointer;box-sizing:border-box}.white-key{flex:1;background:linear-gradient(180deg,#e4e4e4,#fff);border:1px solid #999;border-top:none;border-bottom:2px solid #ccc;z-index:1;margin:0 1px}.white-key:active,.white-key.active{background:linear-gradient(180deg,#ccc,#e4e4e4);transform:scaleY(.98);transform-origin:top}.black-key{width:4%;height:65%;background:linear-gradient(180deg,#333,#111);border:1px solid #000;border-radius:0 0 3px 3px;z-index:2;margin-left:-2%;margin-right:-2%;box-shadow:2px 2px 4px #00000080,inset 0 -2px 2px #ffffff1a}.black-key:active,.black-key.active{background:linear-gradient(180deg,#222,#000);transform:scaleY(.98);transform-origin:top;box-shadow:1px 1px 2px #00000080}.piano-key.dimmed{opacity:.35}.action-bar{display:flex;align-items:center;flex-wrap:wrap;row-gap:8px;gap:16px;background-color:#111;border:1px solid #222;border-radius:8px;padding:8px 12px}.action-group{display:flex;gap:6px;align-items:center}.action-group-right{margin-left:auto}.action-btn{padding:6px 12px;height:30px;gap:6px;font-family:Space Mono,monospace;font-size:.7rem;letter-spacing:.08em;color:var(--text-secondary)}.action-btn:hover:not(:active):not(:disabled){color:var(--text-primary)}.action-btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.action-btn svg{flex-shrink:0}.action-btn span{line-height:1}.shortcut-help-wrapper{position:relative;display:flex;align-items:center}.shortcut-help-btn{width:30px;height:30px;padding:0;font-family:Space Mono,monospace;font-weight:700;font-size:.95rem;color:var(--text-secondary)}.shortcut-help-btn:hover:not(:active){color:var(--accent-green)}.shortcut-help-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:50;min-width:240px;background-color:var(--surface);border:1px solid #333;border-radius:8px;box-shadow:0 8px 24px #000c,inset 0 1px #ffffff0f;padding:12px 14px}.shortcut-help-title{font-family:Space Mono,monospace;font-size:10px;letter-spacing:.15em;color:var(--text-lcd);text-transform:uppercase;margin-bottom:10px}.shortcut-help-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.shortcut-help-list li{display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:Space Mono,monospace;font-size:11px}.shortcut-keys{color:var(--accent-orange);letter-spacing:.05em;white-space:nowrap}.shortcut-label{color:var(--text-secondary);text-align:right}.song-view{display:flex;flex-direction:column;gap:12px;align-items:center;padding:16px}.song-grid{display:grid;grid-template-columns:repeat(8,60px);grid-template-rows:repeat(4,60px);gap:10px}.song-slot{width:60px!important;height:60px!important;font-size:1.3rem;font-weight:700}.song-slot.filled{background:#2a2a30;color:#fff}.song-hint{font-family:Space Mono,monospace;font-size:11px;color:var(--text-secondary);letter-spacing:.05em;margin:0;text-align:center}.mode-btn{font-family:Space Mono,monospace;font-weight:700;font-size:.7rem;letter-spacing:.08em;color:var(--text-secondary);width:60px;height:46px}.mode-btn.mode-song{color:var(--accent-orange);border-bottom:2px solid var(--accent-orange)}.confirm-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;background-color:#18181c;border:1px solid var(--accent-orange);border-radius:8px;padding:12px 16px;box-shadow:inset 0 2px 4px #00000080,0 0 16px #ff5e0026}.confirm-banner-message{font-family:Space Mono,monospace;font-size:11px;letter-spacing:.1em;color:var(--text-primary)}.confirm-banner-actions{display:flex;gap:8px}.confirm-btn{padding:6px 16px;height:30px;font-family:Space Mono,monospace;font-size:.7rem;letter-spacing:.08em;color:var(--text-secondary)}.confirm-btn-primary{color:var(--accent-orange);border-color:var(--accent-orange)}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%);background-color:var(--surface);border:1px solid #333;border-radius:6px;padding:10px 16px;box-shadow:0 8px 24px #000c,inset 0 1px #ffffff0f;z-index:100;pointer-events:none;animation:toast-slide-up .12s ease-out}.toast-text{font-family:Space Mono,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-lcd);text-shadow:0 0 6px rgba(167,243,208,.5)}@keyframes toast-slide-up{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}@media(max-width:1180px){body{padding:10px}.step-ruler{gap:10px;padding:0 12px}.step-tick:nth-child(4n):not(:last-child){margin-right:7px}.app-container{padding:22px;gap:16px}.transport-section{padding:12px 14px;gap:10px}.transport-col{width:66px}.lane{gap:10px;padding:8px 12px}.step-ruler-spacer{width:206px}.steps-container{gap:4px}.step-btn:nth-child(4n):not(:last-child){margin-right:7px}}@media(max-width:900px){body{padding:6px}.app-container{padding:16px}.oscilloscope{display:none}.lane-header,.step-ruler-spacer{width:186px}.step-ruler{gap:10px}.step-btn{height:72px}.tab-btn{padding:10px 6px;font-size:.78rem;letter-spacing:.5px}}.orientation-overlay{position:fixed;inset:0;z-index:9999;background-color:var(--bg-color);display:flex;align-items:center;justify-content:center;padding:24px;animation:orientation-fade-in .14s ease-out}.orientation-card{background-color:var(--surface);border:1px solid #111;border-radius:var(--border-radius);box-shadow:var(--shadow-sm);padding:28px 32px;max-width:320px;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}.orientation-icon{color:var(--accent-orange);display:flex;align-items:center;justify-content:center}.orientation-icon .rotate-phone{animation:orientation-rotate 2.6s cubic-bezier(.7,0,.3,1) infinite;transform-origin:32px 32px}.orientation-icon .rotate-arrow{color:var(--accent-yellow)}.orientation-title{font-family:Space Mono,monospace;font-size:15px;font-weight:700;letter-spacing:.16em;color:var(--text-primary)}.orientation-sub{font-family:Inter,sans-serif;font-size:12px;letter-spacing:.06em;color:var(--text-secondary);text-transform:uppercase}@keyframes orientation-fade-in{0%{opacity:0}to{opacity:1}}@keyframes orientation-rotate{0%,32%{transform:rotate(0)}58%,to{transform:rotate(-90deg)}}@media(prefers-reduced-motion:reduce){.orientation-icon .rotate-phone{animation:none}}@media(orientation:landscape)and (max-width:1024px){body{padding:4px;align-items:flex-start}}@media(orientation:landscape)and (max-width:932px){.app-container{zoom:.86}}@media(orientation:landscape)and (max-width:844px){.app-container{zoom:.78}}@media(orientation:landscape)and (max-width:750px){.app-container{zoom:.7}}@media(orientation:landscape)and (max-height:540px){body{padding:0;align-items:stretch;justify-content:stretch;min-height:0;height:100dvh;overflow:hidden}#root{width:100%;height:100dvh;display:flex}.app-container.mobile{zoom:1}}.app-container.mobile{display:grid;width:100%;flex:1 1 auto;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);grid-template-columns:76px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:0;padding:0;border-radius:0;max-width:none;height:100vh;height:100dvh;border:none;box-shadow:none;background-image:none;background-color:var(--bg-color);overflow:hidden}.app-container.mobile:before,.app-container.mobile:after{display:none}.app-container.mobile>.header,.app-container.mobile>.action-bar,.app-container.mobile>.module-tabs{display:none}.m-top{grid-column:1 / -1;grid-row:1;display:flex;align-items:center;gap:6px;padding:6px 8px;background:#111;border-bottom:1px solid #000;min-height:46px}.m-brand{width:10px;height:10px;border-radius:50%;background:var(--accent-orange);box-shadow:inset 0 -2px #0000004d,0 0 10px #ff5e0080;flex-shrink:0}.m-spacer{flex:1}.m-pill{font-family:Space Mono,monospace;font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--text-secondary);background:#1c1c21;border:1px solid #000;border-radius:6px;padding:8px 9px;min-height:34px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);cursor:pointer;white-space:nowrap;flex-shrink:0}.m-pill.icon{padding:8px}.m-pill:active{transform:translateY(1px);background:var(--surface-active)}.m-pill.on{color:var(--accent-green);border-bottom:2px solid var(--accent-green)}.m-pill:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}.m-pill:disabled{opacity:.4;pointer-events:none}.m-tbtn{width:44px;height:34px;border-radius:7px;background:var(--surface);border:1px solid #111;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:var(--text-secondary)}.m-tbtn.play{color:var(--accent-green)}.m-tbtn.stop{color:var(--accent-orange)}.m-tbtn:active{transform:translateY(1px);background:var(--surface-active)}.m-lcd{font-family:VT323,monospace;font-size:22px;line-height:1;color:var(--text-lcd);text-shadow:0 0 8px rgba(74,222,128,.7);background:#08080a;border:1px solid #222;border-radius:5px;padding:5px 8px 2px;flex-shrink:0}.m-bank-wrap{position:relative;flex-shrink:0}.m-bank-pop{position:absolute;top:calc(100% + 6px);left:0;max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);z-index:60;display:flex;gap:8px;background:#17171b;border:1px solid #2e2e34;border-radius:10px;padding:9px;box-shadow:0 14px 34px #000000bf}.m-bank-grid{display:grid;grid-template-columns:repeat(4,38px);gap:5px}.m-bank-side{display:flex;flex-direction:column;gap:5px}.m-bank-btn{width:38px;height:32px;border-radius:5px;background:#222;border:1px solid #000;box-shadow:var(--shadow-sm);color:#888;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer}.m-bank-btn.active{background:#2a2a30;color:#fff;border-bottom:2px solid var(--accent-orange)}.m-bank-side .m-bank-btn{width:38px}.m-rail{grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:5px;padding:6px 7px;background:#131316;border-right:1px solid #000;overflow:hidden}.m-rtab{flex:1;min-height:44px;border-radius:8px;background:#1a1a1f;border:1px solid #000;box-shadow:var(--shadow-sm);font-family:Space Mono,monospace;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--text-secondary);cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center}.m-rtab:active{transform:scale(.97);background:var(--surface-active)}.m-rtab.on{background:#2a2a30;color:var(--accent-green)}.m-rtab.on:after{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--accent-green)}.m-rtab:focus-visible{outline:2px solid var(--accent-blue);outline-offset:-2px}.m-panel{position:fixed;top:46px;right:0;bottom:0;width:min(340px,46vw);z-index:70;background:#141417;border-left:1px solid #2a2a30;box-shadow:-16px 0 40px #000000b3;display:flex;flex-direction:column;padding:8px 12px;padding-right:calc(12px + env(safe-area-inset-right));animation:m-panel-in .14s ease-out}@keyframes m-panel-in{0%{transform:translate(14px);opacity:0}to{transform:translate(0);opacity:1}}.m-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;flex-shrink:0}.m-panel-title{font-family:Space Mono,monospace;font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--text-lcd)}.m-panel-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;justify-content:space-evenly;-webkit-overflow-scrolling:touch}.m-panel-note{font-family:Space Mono,monospace;font-size:9px;line-height:1.6;letter-spacing:.04em;color:#6a6a74;text-transform:uppercase;margin-top:6px}.fader{margin-bottom:4px}.fader-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;line-height:1}.fader-name{font-family:Space Mono,monospace;font-size:9px;letter-spacing:.14em;color:var(--text-secondary)}.fader-value{font-family:Space Mono,monospace;font-size:11px;color:var(--text-lcd)}.fader-track{height:24px;border-radius:6px;position:relative;background:repeating-linear-gradient(90deg,#08080a,#08080a 4px,#15151a 4px 6px);border:1px solid #1a1a1c;box-shadow:inset 0 2px 5px #000000e6;cursor:pointer;touch-action:none}.fader-track:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}.fader-fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px 0 0 5px;background:linear-gradient(180deg,#4ade8038,#4ade8012);pointer-events:none}.fader-thumb{position:absolute;top:-3px;width:20px;height:30px;border-radius:5px;background:linear-gradient(180deg,#e6e6e6,#a0a0a0);border:1px solid #2a2a2a;box-shadow:inset 0 2px 2px #ffffffd9,0 3px 6px #000000b3;transform:translate(-50%);pointer-events:none}.m-channel{margin-bottom:6px}.m-channel-name{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}.m-channel-name>span:first-child{font-family:Space Mono,monospace;font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--text-primary);display:flex;align-items:center;gap:6px}.m-channel-name i{width:7px;height:7px;border-radius:50%;background:var(--tc)}.m-channel-val{font-family:Space Mono,monospace;font-size:10px;color:var(--text-lcd)}.m-channel .fader-row{display:none}.meter{height:7px;border-radius:3px;background:#0a0a0c;border:1px solid #1a1a1c;box-shadow:inset 0 1px 3px #000000e6;overflow:hidden;margin-bottom:5px;position:relative}.meter-fill{height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,var(--accent-green) 0%,var(--accent-green) 62%,var(--accent-yellow) 82%,var(--accent-orange) 100%)}.meter-peak{position:absolute;top:0;bottom:0;left:0;width:2px;background:#ffffffbf;opacity:0}.m-tempo-row{display:flex;gap:6px;margin-top:8px}.m-tempo-row .m-pill{flex:1}.m-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.m-act{height:54px;border-radius:8px;background:#1c1c21;border:1px solid #000;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-family:Space Mono,monospace;font-size:9px;letter-spacing:.08em;color:var(--text-secondary);cursor:pointer}.m-act:active{transform:translateY(1px);background:var(--surface-active)}.m-act:disabled{opacity:.4;pointer-events:none}.app-container.mobile>.sequencer-grid{grid-column:2;grid-row:2;min-height:0;padding:6px 8px;gap:5px;overflow:hidden}.app-container.mobile .lane{gap:6px;padding:4px 6px;min-height:0;flex:1;align-items:stretch}.app-container.mobile .lane-header{width:44px;flex-shrink:0;padding:0;gap:0;justify-content:center}.app-container.mobile .track-top-row,.app-container.mobile .track-controls-row{display:none}.app-container.mobile .lane-chip{width:44px;height:100%;border-radius:7px;background:#1c1c21;border:1px solid #000;border-left:3px solid var(--track-color);box-shadow:var(--shadow-sm);color:var(--text-secondary);font-family:Space Mono,monospace;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}.app-container.mobile .lane-chip.muted{opacity:.4}.app-container.mobile .lane-chip.soloed:after{content:"";position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:#fa0;box-shadow:0 0 8px #fa0}.app-container.mobile .step-btn{height:auto;align-self:stretch;min-width:14px}.app-container.mobile .steps-container{gap:3px;align-items:stretch}.app-container.mobile .step-btn:nth-child(4n):not(:last-child){margin-right:6px}.app-container.mobile .step-ruler{display:none}.app-container.mobile .synth-module-container{flex:1;padding:6px 8px;gap:6px;min-height:0;overflow:hidden}.app-container.mobile .synth-lane{flex:1;min-height:48px}.app-container.mobile .synth-lane .steps-container{align-items:stretch}.app-container.mobile .synth-header{padding:5px 8px;flex-shrink:0}.app-container.mobile .synth-title-group{flex-direction:row;align-items:center;gap:8px}.app-container.mobile .synth-title-group .track-name{font-size:.7rem}.app-container.mobile .scale-pickers{margin-top:0}.app-container.mobile .synth-header .track-params-row{display:none}.app-container.mobile .preset-select{padding:5px 8px;font-size:.7rem}.app-container.mobile .piano-keyboard{height:78px}.app-container.mobile .keyboard-container{margin-top:0;padding-top:6px;gap:5px;flex-shrink:0}.app-container.mobile .keyboard-controls{gap:8px}.app-container.mobile .keyboard-controls .kb-hint{display:none}.app-container.mobile .keyboard-controls button{padding:5px 10px;min-height:30px}.app-container.mobile .song-grid{grid-template-columns:repeat(8,44px);grid-template-rows:repeat(4,44px);gap:6px}.app-container.mobile .song-slot{width:44px!important;height:44px!important;font-size:1rem}.app-container.mobile .song-view{padding:6px;gap:6px}.install-hint{position:fixed;right:calc(10px + env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom));z-index:120;width:236px;background:#17171b;border:1px solid var(--accent-orange);border-radius:10px;padding:11px 13px 12px;box-shadow:0 14px 34px #000c,inset 0 1px #ffffff0d;animation:toast-slide-up .16s ease-out}.install-hint-close{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:6px;background:transparent;border:none;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer}.install-hint-title{font-family:Space Mono,monospace;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--accent-orange);margin-bottom:6px}.install-hint-body{font-size:11px;line-height:1.5;color:var(--text-secondary);margin-bottom:8px}.install-hint-steps{list-style:none;display:flex;flex-direction:column;gap:5px;margin:0;padding:0}.install-hint-steps li{display:flex;align-items:center;gap:7px;font-family:Space Mono,monospace;font-size:10.5px;letter-spacing:.04em;color:var(--text-primary)}.install-hint-steps svg{color:var(--accent-green);flex-shrink:0}.made-by{display:inline-flex;align-items:center;gap:6px;font-family:Space Mono,monospace;font-size:10px;letter-spacing:.1em;text-decoration:none;color:var(--text-secondary);padding:6px 10px;border-radius:6px;border:1px solid transparent;transition:color .12s ease,border-color .12s ease,background-color .12s ease;white-space:nowrap}.made-by-lead{opacity:.65}.made-by-name{color:var(--text-primary);font-weight:700}.made-by-arrow{color:var(--accent-orange);font-size:11px;transform:translateY(-1px);transition:transform .12s ease}.made-by:hover{color:var(--text-primary);background-color:#17171b;border-color:#2a2a30}.made-by:hover .made-by-arrow{transform:translate(1px,-2px)}.made-by:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}.made-by.compact{width:100%;justify-content:center;margin-top:10px;border-color:#232327;padding:9px 10px}