@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Sora:wght@400;600;700&display=swap";:root{--bg: #050915;--panel: rgba(8, 17, 36, .84);--panel-border: rgba(116, 183, 255, .26);--text: #edf4ff;--muted: #9eb4d0;--accent: #31d4ff;--accent-strong: #17b8f5;--accent-alt: #ff8d4a;--ok: #45dd8f;--warn: #ffc359;--error: #ff6f7f;--shadow: 0 22px 60px rgba(3, 8, 19, .5)}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}body{font-family:Space Grotesk,Segoe UI,sans-serif;color:var(--text);background:radial-gradient(1200px 600px at 20% -10%,rgba(49,212,255,.24),transparent 60%),radial-gradient(900px 520px at 85% 0%,rgba(255,141,74,.2),transparent 65%),linear-gradient(180deg,#030611,#050915 45%,#060a1a)}.app-shell{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);gap:18px;width:100%;height:100%;padding:14px}.stage-panel{position:relative;min-height:0;border-radius:18px;border:1px solid var(--panel-border);background:linear-gradient(160deg,#081226cc,#070d1eeb);box-shadow:var(--shadow);overflow:hidden}.stage-header{position:absolute;z-index:2;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;gap:10px;pointer-events:none}.badge,.scene{padding:8px 12px;border-radius:999px;background:#030a1894;border:1px solid rgba(154,216,255,.26);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:.82rem;letter-spacing:.01em}.stage-canvas{width:100%;height:100%;display:block}.control-panel{overflow-y:auto;padding-right:4px;display:flex;flex-direction:column;gap:12px}.panel{border-radius:14px;border:1px solid var(--panel-border);background:var(--panel);box-shadow:var(--shadow);padding:14px}.hero h1{margin:0;font-family:Sora,sans-serif;font-size:1.1rem;line-height:1.3}.hero p{margin:8px 0 0;color:var(--muted);font-size:.93rem;line-height:1.45}h2{margin:0 0 10px;font-family:Sora,sans-serif;font-size:.96rem}.status-line{margin-top:12px;display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:.85rem;color:var(--muted)}.status-dot{width:10px;height:10px;border-radius:999px;box-shadow:0 0 8px currentColor}.auth-bar{margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.auth-avatar{width:28px;height:28px;border-radius:50%;border:1px solid rgba(132,195,255,.4);flex-shrink:0}.auth-email{font-size:.85rem;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.auth-hint{font-size:.8rem;color:var(--muted)}.btn.btn-sm{padding:4px 10px;font-size:.8rem}.status-dot.native{color:var(--ok);background:var(--ok)}.status-dot.polyfill{color:var(--warn);background:var(--warn)}.field{display:flex;flex-direction:column;gap:6px}.field>span{font-size:.8rem;color:var(--muted)}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}textarea,input,select{width:100%;background:#050d1ccc;color:var(--text);border:1px solid rgba(132,195,255,.2);border-radius:10px;padding:10px 11px;font:inherit;transition:border-color .18s ease,box-shadow .18s ease}textarea{resize:vertical;min-height:90px}textarea:focus,input:focus,select:focus{outline:none;border-color:#3dc8ffa6;box-shadow:0 0 0 3px #31d4ff33}.button-row{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}.btn{border:1px solid rgba(132,195,255,.3);background:#070f1fd1;color:var(--text);border-radius:10px;padding:9px 12px;cursor:pointer;font-family:Sora,sans-serif;font-size:.82rem;transition:transform .12s ease,border-color .15s ease,background-color .15s ease}.btn:hover:not(:disabled){transform:translateY(-1px);border-color:#84c3ff99}.btn:disabled{opacity:.52;cursor:not-allowed}.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#041525;border-color:transparent}.btn.accent{background:linear-gradient(135deg,#ffa367,var(--accent-alt));color:#2f1203;border-color:transparent}.metrics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.metric{border:1px solid rgba(132,195,255,.2);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:5px;background:#070d1cc7}.metric span{color:var(--muted);font-size:.75rem}.metric strong{font-family:Sora,sans-serif;font-size:1rem}.tool-list,.log-panel{max-height:220px;overflow:auto;display:flex;flex-direction:column;gap:7px}.tool-item{border:1px solid rgba(132,195,255,.2);border-radius:10px;padding:9px;background:#080e1fbd}.tool-item header{display:flex;justify-content:space-between;gap:8px;font-size:.82rem}.tool-item p{margin:6px 0 0;color:var(--muted);font-size:.78rem;line-height:1.35}.log-entry{display:flex;gap:9px;align-items:baseline;font-size:.78rem;border-bottom:1px dashed rgba(132,195,255,.14);padding-bottom:5px}.log-time{color:#a0b4cdcc;min-width:68px;font-variant-numeric:tabular-nums}.log-text.info{color:#b6d7ff}.log-text.success{color:#9ef4c8}.log-text.warn{color:#ffd89a}.log-text.error{color:#ffb2bd}.hint{color:var(--muted);font-size:.8rem;margin:8px 0 0}code{font-family:JetBrains Mono,Cascadia Mono,Consolas,monospace;color:#d7e7ff}@media (max-width: 1120px){.app-shell{grid-template-columns:1fr;grid-template-rows:minmax(380px,48vh) minmax(0,1fr)}.control-panel{min-height:0}}@media (max-width: 700px){.field-grid,.metrics-grid{grid-template-columns:1fr}.stage-header{flex-direction:column;align-items:flex-start}}.stage-panel{display:flex;flex-direction:column}.stage-panel .stage-header{position:relative;top:auto;left:auto;right:auto;flex-shrink:0;pointer-events:auto;padding:10px 14px;background:#050a18b8;border-bottom:1px solid rgba(116,183,255,.14)}.piano-roll-wrapper{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.piano-roll-info-bar{display:flex;align-items:center;gap:14px;padding:8px 14px;background:#050a18b8;border-bottom:1px solid rgba(116,183,255,.14);flex-shrink:0;flex-wrap:wrap}.piano-roll-stat{display:flex;flex-direction:column;gap:1px}.piano-roll-stat-label{font-size:.62rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}.piano-roll-stat-value{font-family:Sora,sans-serif;font-size:.92rem;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}.piano-roll-track-legend{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto}.piano-roll-track-chip{display:flex;align-items:center;gap:5px;padding:3px 9px 3px 6px;border-radius:999px;border:1px solid;font-size:.72rem;font-family:inherit;background:#050a1899;color:var(--text);text-transform:capitalize;cursor:pointer;transition:opacity .15s ease-out,border-color .15s ease-out}.piano-roll-track-chip:hover{opacity:.85}.piano-roll-track-chip.muted{opacity:.4;color:var(--muted);text-decoration:line-through}.piano-roll-track-chip-group{display:flex;align-items:center;gap:3px;position:relative}.piano-roll-track-vol-btn{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--panel-border);background:#050a1899;color:var(--muted);cursor:pointer;padding:0;flex-shrink:0;transition:color .15s,border-color .15s}.piano-roll-track-vol-btn:hover,.piano-roll-track-vol-btn.active{color:var(--text);border-color:var(--accent)}.piano-roll-track-vol-popup{position:absolute;top:calc(100% + 6px);left:0;z-index:50;display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--panel-border);border-radius:8px;padding:6px 10px;box-shadow:0 4px 16px #0006;white-space:nowrap}.piano-roll-track-vol-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:90px;height:3px;border-radius:2px;background:var(--panel-border);outline:none;cursor:pointer}.piano-roll-track-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer}.piano-roll-track-vol-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer;border:none}.piano-roll-track-vol-label{font-size:.68rem;color:var(--muted);min-width:22px;text-align:right}.piano-roll-track-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.piano-roll-canvas-container{flex:1;min-height:0;display:flex;flex-direction:row;overflow:hidden;position:relative}.piano-roll-keyboard-canvas{display:block;flex-shrink:0;width:52px;z-index:2}.piano-roll-scroll-area{flex:1;min-width:0;overflow:auto;position:relative;cursor:crosshair;scrollbar-width:thin;scrollbar-color:rgba(100,100,160,.5) rgba(20,20,36,.4)}.piano-roll-scroll-area::-webkit-scrollbar{width:8px;height:8px}.piano-roll-scroll-area::-webkit-scrollbar-track{background:#14142466}.piano-roll-scroll-area::-webkit-scrollbar-thumb{background:#6464a080;border-radius:4px}.piano-roll-scroll-area::-webkit-scrollbar-thumb:hover{background:#8282c8b3}.piano-roll-scroll-area::-webkit-scrollbar-corner{background:#14142466}.piano-roll-grid-canvas{display:block}.piano-roll-waterfall-canvas{display:block;width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0}.piano-roll-empty-state{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none}.piano-roll-composing-animation{display:flex;align-items:center;gap:4px;height:48px;margin-bottom:8px}.piano-roll-composing-animation .bar{width:6px;background-color:#9b8cff;border-radius:3px;animation:equalize 1.2s ease-in-out infinite}.piano-roll-composing-animation .bar1{height:16px;animation-delay:0s}.piano-roll-composing-animation .bar2{height:32px;animation-delay:-1s}.piano-roll-composing-animation .bar3{height:48px;animation-delay:-.9s}.piano-roll-composing-animation .bar4{height:24px;animation-delay:-.8s}.piano-roll-composing-animation .bar5{height:12px;animation-delay:-.7s}@keyframes equalize{0%,to{transform:scaleY(1)}50%{transform:scaleY(.4)}}.piano-roll-empty-icon{opacity:.35}.piano-roll-empty-text{margin:0;font-family:Sora,sans-serif;font-size:1rem;color:var(--muted)}.piano-roll-empty-subtext{margin:0;font-size:.8rem;color:#9eb4d08c}.playback-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:#050a18d1;border-top:1px solid rgba(116,183,255,.18);flex-shrink:0}.playback-controls-left,.playback-controls-right{display:flex;align-items:center;gap:10px}.playback-btn{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;border:1px solid rgba(132,195,255,.28);background:#070f1fd1;color:var(--text);font-family:Sora,sans-serif;font-size:.82rem;cursor:pointer;transition:transform .12s ease,border-color .15s ease,background-color .15s ease,box-shadow .15s ease}.playback-btn:hover:not(:disabled){transform:translateY(-1px);border-color:#84c3ff8c}.playback-btn:disabled{opacity:.42;cursor:not-allowed}.play-btn.ready{background:linear-gradient(135deg,#42d7ff38,#17b8f52e);border-color:#42d7ff8c;color:#42d7ff;box-shadow:0 0 18px #42d7ff2e;animation:play-pulse 2.4s ease-in-out infinite}@keyframes play-pulse{0%,to{box-shadow:0 0 18px #42d7ff2e}50%{box-shadow:0 0 28px #42d7ff61}}.stop-btn{background:#ff6f7f24;border-color:#ff6f7f73;color:#ff8fa0}.secondary-btn{padding:7px 11px;font-size:.78rem;opacity:.82}.secondary-btn:hover:not(:disabled){opacity:1}.mp3-btn{background:#a38cff24;border-color:#a38cff73;color:#c4b0ff}.mp3-btn:hover:not(:disabled){border-color:#a38cffbf;opacity:1}.playback-duration{display:flex;flex-direction:column;gap:1px;padding-left:4px}.playback-duration-label{font-size:.6rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}.playback-duration-value{font-family:Sora,sans-serif;font-size:.9rem;font-variant-numeric:tabular-nums;color:var(--text)}.share-url-badge{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;background:#45dd8f24;border:1px solid rgba(69,221,143,.35);color:#45dd8f;font-size:.75rem;animation:fade-in .2s ease}@keyframes fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}