.title-screen{padding:max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));background:radial-gradient(ellipse at center, var(--bg-panel) 0%, var(--bg-deep) 70%);z-index:var(--z-modal);box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:clamp(20px,5vw,32px);display:flex;position:fixed;inset:0}.title-screen__logo{font-family:var(--font-display);letter-spacing:.1em;color:var(--neon-cyan);text-shadow:var(--glow-cyan);margin:0;font-size:clamp(48px,10vw,128px);font-weight:900;animation:3s ease-in-out infinite title-pulse}.title-screen__subtitle{font-family:var(--font-mono);color:var(--text-secondary);letter-spacing:.2em;text-transform:uppercase;text-align:center;max-width:22rem;margin:0;font-size:clamp(11px,3vw,14px);line-height:1.5}.title-screen__cta{min-height:var(--touch-min);font-family:var(--font-display);letter-spacing:.15em;text-transform:uppercase;color:var(--neon-magenta);border:2px solid var(--neon-magenta);border-radius:var(--radius-md);background:0 0;padding:max(16px,1rem) max(32px,8vw);font-size:clamp(15px,4vw,18px);font-weight:700;transition:box-shadow .2s,transform .2s}.title-screen__cta:hover,.title-screen__cta:focus-visible{box-shadow:var(--glow-magenta);transform:translateY(-2px)}.title-screen__cta:active{transform:translateY(0)}@keyframes title-pulse{0%,to{text-shadow:0 0 20px var(--neon-cyan), 0 0 40px #00f0ff66}50%{text-shadow:0 0 30px var(--neon-cyan), 0 0 60px #00f0ffb3}}.transport-bar{padding:12px max(16px, env(safe-area-inset-right));padding-left:max(16px, env(safe-area-inset-left));padding-top:max(12px, env(safe-area-inset-top));background:var(--bg-panel);border-bottom:1px solid #ffffff0d;flex-wrap:wrap;align-items:center;gap:12px 16px;display:flex;position:relative}.mode-toggle{font-family:var(--font-display);letter-spacing:.15em;min-height:var(--touch-min);border-radius:var(--radius-sm);border:2px solid;padding:10px 18px;font-size:14px;font-weight:700;transition:box-shadow .15s}.mode-toggle--piano{color:var(--neon-cyan);border-color:var(--neon-cyan)}.mode-toggle--piano:hover{box-shadow:var(--glow-cyan)}.mode-toggle--drums{color:var(--neon-magenta);border-color:var(--neon-magenta)}.mode-toggle--drums:hover{box-shadow:var(--glow-magenta)}.voice-select{font-family:var(--font-mono);background:var(--bg-deep);color:var(--text-primary);min-height:var(--touch-min);border-radius:var(--radius-sm);border:1px solid #ffffff1a;padding:10px 14px;font-size:16px}.record-btn{min-height:var(--touch-min);border:2px solid var(--neon-magenta);border-radius:var(--radius-sm);font-family:var(--font-display);letter-spacing:.15em;color:var(--neon-magenta);align-items:center;gap:8px;margin-left:auto;padding:10px 18px;font-weight:700;display:flex}.transport-bar__library{font-family:var(--font-display);letter-spacing:.2em;min-height:var(--touch-min);min-width:var(--touch-min);border-radius:var(--radius-sm);border:2px solid var(--neon-cyan);color:var(--neon-cyan);padding:10px 14px;font-size:12px;font-weight:700;transition:box-shadow .15s;display:none}.transport-bar__library:hover{box-shadow:var(--glow-cyan)}@media (width<=767px){.transport-bar{grid-template-columns:1fr auto auto minmax(4.5rem,auto);grid-template-areas:"mode rec lib time""voice voice voice voice";align-items:center;gap:10px;display:grid}.mode-toggle{grid-area:mode;justify-self:start}.voice-select{grid-area:voice;width:100%}.record-btn{grid-area:rec;justify-self:end;margin-left:0}.transport-bar__library{grid-area:lib;justify-content:center;align-items:center;display:inline-flex}.elapsed{grid-area:time;justify-self:end}.transport-bar:not(:has(.voice-select)){grid-template-columns:1fr auto auto minmax(4.5rem,auto);grid-template-areas:"mode rec lib time"}}.record-btn__dot{background:var(--neon-magenta);border-radius:50%;width:10px;height:10px}.record-btn--active{box-shadow:var(--glow-magenta);animation:1s ease-in-out infinite rec-pulse}@keyframes rec-pulse{50%{box-shadow:0 0 30px var(--neon-magenta)}}.elapsed{font-family:var(--font-mono);color:var(--text-secondary);min-width:60px;font-size:14px}.recording-progress{background:var(--neon-magenta);height:2px;animation:60s linear forwards prog;position:absolute;bottom:0;left:0}@keyframes prog{to{width:100%}}.piano-scroll{-webkit-overflow-scrolling:touch;scrollbar-color:#00f0ff59 transparent;width:100%;max-width:min(900px,100%);margin:0 auto;overflow:auto visible}.piano-scroll::-webkit-scrollbar{height:6px}.piano-scroll::-webkit-scrollbar-thumb{background:#00f0ff59;border-radius:999px}.piano{flex-direction:column;width:min(900px,max(100%,32rem));margin:0 auto;display:flex;position:relative}.piano__whites{grid-template-columns:repeat(14,1fr);gap:4px;height:220px;display:grid}.piano-key{border-radius:var(--radius-sm);font-family:var(--font-mono);color:var(--text-secondary);flex-direction:column;justify-content:flex-end;align-items:center;padding:8px 4px;font-size:11px;transition:box-shadow 80ms,background 80ms,transform 80ms;display:flex;position:relative}.piano-key--white{background:linear-gradient(#00f0ff0d,#00f0ff26);border:1px solid #00f0ff40}.piano-key--white.piano-key--lit{background:var(--neon-cyan);color:var(--bg-deep);box-shadow:var(--glow-cyan);transform:translateY(2px)}.piano__blacks{pointer-events:none;grid-template-columns:repeat(28,1fr);height:140px;display:grid;position:absolute;top:0;left:0;right:0}.piano-key--black{border-radius:var(--radius-sm);z-index:1;pointer-events:auto;background:linear-gradient(#ff2bd633,#ff2bd60d);border:1px solid #ff2bd666;grid-column:span 2;margin:0 -10px}.piano-key--black.piano-key--lit{background:var(--neon-magenta);color:var(--bg-deep);box-shadow:var(--glow-magenta)}.piano-key__spacer{grid-column:span 2}.piano-key__note{opacity:.6;font-size:10px}.piano-key__char{font-weight:700}@media (width<=767px){.piano__whites{gap:2px;height:168px}.piano__blacks{height:108px}.piano-key{padding:6px 2px;font-size:10px}}@media (width<=767px) and (orientation:landscape){.piano__whites{height:120px}.piano__blacks{height:78px}.piano-key__note{display:none}}.drums{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(4,1fr);gap:14px;width:min(720px,100%);margin:0 auto;display:grid}.pad{aspect-ratio:1;border-radius:var(--radius-md);font-family:var(--font-display);letter-spacing:.1em;border:2px solid;flex-direction:column;justify-content:center;align-items:center;min-width:0;min-height:44px;font-weight:700;transition:box-shadow 60ms,background 60ms,transform 60ms;display:flex}.pad--lit{transform:scale(.97)}.pad__label{text-align:center;font-size:14px}.pad__key{font-family:var(--font-mono);opacity:.7;margin-top:8px;font-size:11px}@media (width<=767px){.drums{gap:10px;width:100%;padding:0 4px}.pad__label{font-size:12px}}@media (width<=480px){.drums{grid-template-rows:none;grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(72px,auto)}}.library-sidebar{background:var(--bg-panel);-webkit-overflow-scrolling:touch;border-left:1px solid #ffffff0d;width:280px;height:100%;padding:16px;overflow-y:auto}.library-sidebar__header{justify-content:space-between;align-items:center;gap:8px;margin-bottom:16px;display:flex}.library-sidebar__header h2{font-family:var(--font-display);letter-spacing:.2em;color:var(--neon-cyan);margin:0;font-size:14px}.library-sidebar__header button{min-width:var(--touch-min);min-height:var(--touch-min);border-radius:var(--radius-sm);justify-content:center;align-items:center;display:inline-flex}.library-sidebar__list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.library-sidebar__empty{font-family:var(--font-mono);color:var(--text-secondary);font-size:12px;line-height:1.5}.library-sidebar__collapsed{background:var(--bg-panel);width:32px;height:100%;color:var(--neon-cyan);flex-shrink:0}.library-sidebar__collapsed--wide{display:none}.library-sidebar__collapsed--narrow{display:inline}.recording-row{border-radius:var(--radius-sm);font-family:var(--font-mono);background:#ffffff05;align-items:center;gap:8px;padding:8px;font-size:13px;display:flex}.recording-row:hover{background:#ffffff0d}.recording-row__play{color:var(--neon-cyan);min-width:var(--touch-min);min-height:var(--touch-min);justify-content:center;align-items:center;display:inline-flex}.recording-row__name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.recording-row__input{border:1px solid var(--neon-cyan);color:var(--text-primary);border-radius:var(--radius-sm);background:0 0;flex:1;padding:2px 6px;font-family:inherit;font-size:16px}.recording-row__time{color:var(--text-secondary);flex-shrink:0;font-size:11px}.recording-row__edit,.recording-row__delete{min-width:var(--touch-min);min-height:var(--touch-min);justify-content:center;align-items:center;display:inline-flex}.recording-row__delete:hover{color:var(--neon-magenta)}@media (width<=767px){.library-sidebar{width:100%;height:auto;max-height:min(42vh,320px);padding-bottom:max(16px, env(safe-area-inset-bottom));border-top:1px solid #ffffff14;border-left:none;flex-shrink:0}.library-sidebar__collapsed{width:100%;height:auto;min-height:var(--touch-min);font-family:var(--font-display);letter-spacing:.25em;border-top:1px solid #ffffff14;justify-content:center;padding:12px 16px;font-size:11px}.library-sidebar__collapsed--narrow{display:none}.library-sidebar__collapsed--wide{display:inline}}.modal-backdrop{padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));background:var(--bg-overlay);z-index:var(--z-modal);box-sizing:border-box;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--bg-panel);border-radius:var(--radius-md);border:1px solid #00f0ff4d;width:min(100%,400px);min-width:0;max-width:calc(100vw - 32px);padding:24px;box-shadow:0 0 60px #00f0ff1a}.modal h2{font-family:var(--font-display);letter-spacing:.15em;color:var(--neon-cyan);margin:0 0 16px;font-size:16px}.modal__input{background:var(--bg-deep);border:1px solid var(--neon-cyan);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);font-family:var(--font-mono);margin-bottom:16px;padding:10px 12px}.modal__actions{justify-content:flex-end;gap:8px;display:flex}.modal__btn{font-family:var(--font-display);letter-spacing:.1em;min-height:var(--touch-min);border-radius:var(--radius-sm);border:1px solid;padding:10px 18px}.modal__btn--primary{color:var(--neon-cyan);border-color:var(--neon-cyan)}.modal__btn--primary:hover{box-shadow:var(--glow-cyan)}.modal__btn--danger{color:var(--neon-magenta);border-color:var(--neon-magenta)}.modal__btn--danger:hover{box-shadow:var(--glow-magenta)}.modal__btn--ghost{color:var(--text-secondary);border-color:#ffffff26}.bg-fx{z-index:var(--z-bg);pointer-events:none;position:fixed;inset:0;overflow:hidden}.bg-fx__grid{background-image:linear-gradient(#00f0ff0f 1px,#0000 1px),linear-gradient(90deg,#00f0ff0f 1px,#0000 1px);background-size:40px 40px;animation:8s ease-in-out infinite grid-fade;position:absolute;inset:0}.bg-fx__sweep{background:linear-gradient(90deg,#0000 0%,#ff2bd60f 50%,#0000 100%);animation:12s linear infinite sweep;position:absolute;inset:0}@keyframes grid-fade{50%{opacity:.4}}@keyframes sweep{0%{transform:translate(-100%)}to{transform:translate(100%)}}.particle-canvas{z-index:var(--z-canvas);pointer-events:none;position:fixed;inset:0}.studio{flex-direction:column;width:100%;max-width:100vw;height:100%;min-height:100dvh;display:flex;position:relative}.studio__main{z-index:var(--z-content);flex:1;min-height:0;display:flex;position:relative}.studio__instrument{flex:1;justify-content:center;align-items:center;min-width:0;padding:32px;display:flex}.studio__toast{bottom:calc(24px + env(safe-area-inset-bottom,0px));background:var(--bg-panel);border:1px solid var(--neon-magenta);max-width:calc(100vw - 32px);color:var(--text-primary);font-family:var(--font-mono);border-radius:var(--radius-sm);box-shadow:var(--glow-magenta);z-index:var(--z-modal);text-align:center;padding:10px 20px;font-size:13px;position:fixed;left:50%;transform:translate(-50%)}@media (width<=767px){.studio__main{flex-direction:column}.studio__instrument{flex:auto;padding:12px 8px}}:root{--font-display:"Orbitron", system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;--font-body:system-ui, -apple-system, sans-serif;--bg-deep:#0a0820;--bg-panel:#15102b;--bg-overlay:#0a0820d9;--text-primary:#f5f0ff;--text-secondary:#a89dd0;--neon-cyan:#00f0ff;--neon-magenta:#ff2bd6;--neon-yellow:#fff04a;--neon-lime:#39ff14;--glow-cyan:0 0 20px var(--neon-cyan), 0 0 40px #00f0ff66;--glow-magenta:0 0 20px var(--neon-magenta), 0 0 40px #ff2bd666;--glow-yellow:0 0 20px var(--neon-yellow), 0 0 40px #fff04a66;--glow-lime:0 0 20px var(--neon-lime), 0 0 40px #39ff1466;--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--z-bg:0;--z-canvas:1;--z-content:2;--z-modal:10;--z-drawer:8;--bp-tablet:768px;--bp-phone:480px;--touch-min:44px}*,:before,:after{box-sizing:border-box}html,body,#root{background:var(--bg-deep);height:100%;min-height:100dvh;color:var(--text-primary);font-family:var(--font-body);padding:0;padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0);padding-bottom:env(safe-area-inset-bottom,0);margin:0;overflow:hidden}@supports (height:100dvh){html,body,#root{height:100dvh}}button{color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:none;font-family:inherit}button:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:2px}