:root{color-scheme:dark;--bg:#080b18;--panel:#12192d;--border:#2a3451;--text:#edf3ff;--muted:#9caac4;--green:#38dfda;--yellow:#edbf43;--sol:#40bd8b;--fa:#edbf43;--cyan:#38dfda;--violet:#a88aff;--paper:#fffef7}*{box-sizing:border-box}html{min-width:300px;scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 0 0,#1c1741 0,transparent 42%),radial-gradient(ellipse at 100% 60%,#0b2834 0,transparent 40%),var(--bg);color:var(--text);font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button:disabled{opacity:.45;cursor:wait;transform:none!important;box-shadow:none!important}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #b8a4ff;outline-offset:4px}[hidden]{display:none!important}.top{height:78px;display:flex;justify-content:space-between;align-items:center;padding:0 32px;border-bottom:1px solid #40436a;background:#0b1021ed;box-shadow:0 1px 24px #5943bc16}.brand{display:flex;align-items:center;gap:13px}.brand-icon{display:grid;place-items:center;width:44px;height:46px;font-size:31px;color:#efffff;border:1px solid #91f6f2;border-radius:13px;background:linear-gradient(145deg,#2ec7cf,#4261bd);box-shadow:inset 0 1px 2px #ffffff90,0 4px 0 #16365c,0 0 24px #28d9de40}.brand strong{font-size:16px;letter-spacing:1.8px}.brand em{font-size:9px;font-style:normal;letter-spacing:2px;color:#c7b6ff;border:1px solid #715cbd;padding:4px 6px;border-radius:5px;vertical-align:middle}.brand small{display:block;font-size:9px;letter-spacing:2.3px;color:#9da4c6;margin-top:4px}.top-right{display:flex;align-items:center;gap:8px;color:#a3b4ca;font-size:12px}.local-dot,.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 9px #38dfda99}.version{margin-left:10px;padding:4px 8px;background:#171c36;border:1px solid #39375c;border-radius:6px;color:#c2b2f7;font-size:11px}.layout{display:grid;grid-template-columns:350px minmax(0,1fr);gap:26px;max-width:1640px;padding:22px 30px;margin:auto;align-items:start}.sidebar{display:flex;flex-direction:column;gap:15px;max-height:calc(100dvh - 122px);overflow-y:auto;padding:0 7px 8px 0;scrollbar-width:thin;scrollbar-color:#454568 transparent;overscroll-behavior:contain}.editor-tabs{display:flex;gap:7px;position:sticky;top:0;z-index:9;background:#0c1022;padding:2px 0 12px}.editor-tabs button{flex:1;border:1px solid #3e4167;border-radius:9px;background:linear-gradient(#252c47,#161b30);box-shadow:inset 0 1px #ffffff0c,0 3px 0 #050813;color:#aab8d1;min-height:46px;padding:9px 6px;font-size:12px;white-space:nowrap}.editor-tabs button span{color:#b5a0f7;margin-right:3px}.editor-tabs button.active{color:#d5fffc;border-color:#41a6b1;background:linear-gradient(#204750,#163039);box-shadow:inset 0 1px #8fe7e944,0 3px 0 #07242b,0 0 18px #37dfd51a}.editor-tabs button.active span{color:#67f8e7}.panel{padding:19px;border:1px solid var(--border);background:linear-gradient(150deg,#182139,#111729 78%);border-radius:16px;box-shadow:inset 0 1px #ffffff05,0 8px 22px #00000020}.section-label{display:block;font-size:10px;font-weight:750;letter-spacing:1.65px;color:#aab6d2;margin:0 0 15px}.button,.import,.play-button,.icon-button,.palette-chip,.text-button{transition:transform .12s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease}.button{display:inline-flex;align-items:center;justify-content:center;border:1px solid #414e74;border-radius:9px;padding:10px 12px;min-height:44px;background:linear-gradient(#2a3654,#1c2740);color:#e0eafa;font-size:12px;font-weight:600;box-shadow:inset 0 1px #ffffff18,0 3px 0 #080f20;white-space:normal;line-height:1.3}.button:hover,.palette-chip:hover{border-color:#7191d1;background:linear-gradient(#344364,#24324d)}.button.quiet{background:linear-gradient(#19243b,#121b30);color:#b7c9e3}.button.full{width:100%;margin-top:10px}.row{display:flex;align-items:center;gap:10px}.row>.button{flex:1;padding:9px 5px}.import{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:48px;border:1px solid #99fff1;border-radius:10px;background:linear-gradient(135deg,#6cf3d9,#37cfda 65%,#5fbeef);color:#062b37;font-size:14px;font-weight:800;box-shadow:inset 0 1px 2px #ffffffb0,0 4px 0 #176477,0 7px 20px #36e1d22b;padding:11px}.import:hover{background:linear-gradient(135deg,#9affea,#5bdfeb);box-shadow:inset 0 1px #fff,0 4px 0 #176477,0 7px 30px #36e1d242}.import span{font-size:23px;line-height:1}.button:active,.import:active,.palette-chip:active,.editor-tabs button:active{transform:translateY(2px);box-shadow:inset 0 1px #ffffff0c,0 1px 0 #050813}.text-button{background:none;border:0;border-radius:6px;min-height:40px;color:#91dedd;font-size:12px;padding:7px 0;text-align:left}.text-button:hover{color:#d4fffa}.hint{font-size:12px;color:var(--muted);margin:12px 0;line-height:1.6}.file-label{padding:12px 0 14px;border-bottom:1px solid var(--border);font-size:12px;color:#c4d4ec;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field{display:block;font-size:12px;color:#c1cce0;margin:16px 0}.field>span{float:right;color:#94d8dd;font-variant-numeric:tabular-nums}.field.half{width:50%;min-width:0}.field>input[type=text],select{display:block;width:100%;margin-top:8px;border:1px solid #384361;background:#0b1225;color:#e2ebfb;border-radius:8px;min-height:43px;padding:10px;font-size:13px;box-shadow:inset 0 2px 6px #0003}select{cursor:pointer}.field>input::placeholder{color:#7888a4}.check{display:flex;gap:10px;align-items:center;min-height:36px;margin-top:9px;font-size:12px;color:#c0cee4}.check input,.hand input{width:17px;height:17px;margin:0;accent-color:var(--cyan);flex-shrink:0}.hands{display:flex;gap:10px}.hand{display:flex;gap:8px;align-items:center;padding:12px 10px;flex:1;border:1px solid #33435b;border-radius:9px;min-height:44px;background:#0d172a;color:#c9d5e8;font-size:12px}.hand i{width:8px;height:8px;border-radius:50%;background:var(--sol);box-shadow:0 0 8px var(--sol)}.hand.fa i{background:var(--fa);box-shadow:0 0 8px var(--fa)}.hand.sol input{accent-color:var(--sol)}.hand.fa input{accent-color:var(--fa)}input[type=range]{display:block;width:100%;height:28px;margin:7px 0 0;background:transparent;cursor:pointer;accent-color:var(--cyan);touch-action:pan-y}input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:6px;background:#34465e;box-shadow:inset 0 1px 2px #0005}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-5px}input[type=range]::-moz-range-track{height:5px;border-radius:6px;background:#34465e}input[type=range]::-moz-range-thumb{width:15px;height:15px;background:var(--cyan);border:2px solid #c8fffa;border-radius:50%}.volume{display:flex;gap:10px;align-items:center;color:#c1cce0;font-size:12px;margin-top:15px}.volume input{min-width:0;flex:1;margin:0}.volume output{min-width:35px;color:#97e1dc}.sound-name{color:#d4ddf0;font-size:13px;overflow-wrap:anywhere}.tempo-card{padding:16px;margin-top:16px;border:1px solid #36525f;background:radial-gradient(ellipse at top,#193040,#0b1526 75%);border-radius:12px}.tempo-card>.field{font-size:10px;letter-spacing:1.5px;color:#9bc2d1;margin:0 0 10px}.tempo-entry{display:flex;gap:10px;align-items:center}.tempo-entry input{min-width:0;width:100%;border:0;background:none;font-size:40px;letter-spacing:-1.5px;font-weight:650;color:#d4fff5;text-align:center;font-variant-numeric:tabular-nums;text-shadow:0 0 20px #55eadb24}.tempo-entry input:focus{outline:1px solid #62cecd;border-radius:8px}.tempo-entry .button{font-size:22px;flex-shrink:0;width:44px}.tempo-card .row{justify-content:space-between}.tempo-card .hint{font-size:11px}.tempo-card .hint:last-child{margin-bottom:0}.palette-panel{border-color:#3a416f;background:linear-gradient(150deg,#201e40,#111b2e)}.color-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}.color-card{min-width:0;padding:13px 10px;background:#0c1326;border:1px solid #3b4766;border-radius:11px}.color-card label{display:block;font-size:10px;letter-spacing:1px;font-weight:700;color:#c5d4eb}.color-card label span{display:block;font-size:10px;font-weight:400;letter-spacing:0;color:#7f91b3;margin:3px 0 10px}.color-edit{display:flex;gap:8px;align-items:center}.color-edit input[type=color]{border:1px solid #91a1be;border-radius:9px;width:37px;height:40px;padding:2px;background:#111b30;cursor:pointer;flex-shrink:0}.color-edit input[type=color]::-webkit-color-swatch-wrapper{padding:1px}.color-edit input[type=color]::-webkit-color-swatch{border:0;border-radius:5px}.hex-input{min-width:0;width:100%;border:0;border-bottom:1px solid #344159;border-radius:0;background:transparent;color:#dbe9ff;font:11px/1.5 ui-monospace,monospace;padding:9px 0}.palette-presets{display:flex;gap:6px;margin:15px 0}.palette-chip{display:flex;gap:4px;align-items:center;justify-content:center;flex:1;background:linear-gradient(#2b3050,#1b2038);border:1px solid #494b70;border-radius:8px;padding:10px 4px;min-height:43px;font-size:10px;color:#d7ddf3;box-shadow:inset 0 1px #ffffff15,0 3px 0 #090c1b}.palette-chip i{width:7px;height:14px;border-radius:3px}.palette-chip[aria-pressed=true]{border-color:#a68ae4;box-shadow:0 0 13px #a88aff22,inset 0 1px #ffffff15,0 3px 0 #090c1b}.workspace{min-width:0;position:sticky;top:18px}.preview-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:17px;min-height:48px}.preview-title{min-width:0}.preview-head .section-label{margin:0 0 5px;font-size:9px;letter-spacing:2px;color:#90a1bf}.preview-head .live-dot{margin-right:7px}.preview-format{margin-left:12px;color:#727d9d;font-size:8px;letter-spacing:1px}.preview-head h1{margin:0;max-width:410px;font-size:21px;font-weight:600;letter-spacing:-.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.preview-actions .button{font-size:11px;min-height:40px;padding:9px 11px}.aspect{font-size:11px;white-space:nowrap;color:#9cafd3;border:1px solid #323e5c;background:#111a2d;border-radius:7px;padding:7px 10px}.preview-area{position:relative;display:flex;align-items:center;justify-content:center;min-height:160px;padding:20px;overflow:hidden;border:1px solid #384664;border-radius:18px;background:radial-gradient(ellipse at 50% 15%,#263449 0,transparent 55%),linear-gradient(145deg,#171b31,#0b1522);box-shadow:inset 0 1px #6b83b21a,0 18px 45px #0003}.preview-area:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;background-image:linear-gradient(#88a0cc22 1px,transparent 1px),linear-gradient(90deg,#88a0cc22 1px,transparent 1px);background-size:35px 35px}.stage-wrap{position:relative;flex-shrink:0;box-shadow:0 10px 45px #0009,0 0 0 1px #ffffff25}.stage{position:absolute;left:0;top:0;width:900px;height:1600px;transform-origin:top left;background:var(--paper);color:#17212a;display:flex;flex-direction:column;overflow:hidden;contain:layout paint}.stage-top{height:42px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;margin:0 24px;border-bottom:1px solid #e8e7df;font-size:12px;letter-spacing:2px;color:#8a8e86}.stage-top strong{font-size:13px;color:#45564c}.stage-top #stageTempo{font-variant-numeric:tabular-nums;letter-spacing:1px;color:#4e6758}.stage-top div{letter-spacing:0;font-size:12px;display:flex;gap:7px;align-items:center}.legend-sol,.legend-fa{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--sol)}.legend-fa{background:var(--fa);margin-left:10px}.title-space{position:relative;height:170px;flex-shrink:0;overflow:hidden;text-align:center}.title-space #displayTitle{position:absolute;left:40px;right:40px;white-space:pre;font:600 34px/1.2 Arial,sans-serif;color:#263b30}.title-space #displayComposer{position:absolute;left:40px;right:40px;font:18px/22px Arial,sans-serif;color:#718074;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-scene{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--paper)}.sheet-viewport{height:100%;width:900px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain}.sheet-viewport::-webkit-scrollbar{display:none}.sheet-content{position:relative;width:900px;min-height:100%}#scoreHost{position:relative;width:900px;z-index:1}#scoreOverlay{position:absolute;inset:0;z-index:2;pointer-events:none}.measure-shade{position:absolute;border-radius:4px}.score-playhead{position:absolute;width:3px;background:#78b82a;box-shadow:0 0 8px #78b82a80}.score-trail{position:absolute;pointer-events:none}canvas{display:block;flex-shrink:0}#roll{position:absolute;z-index:3;inset:0;width:900px;height:100%;pointer-events:none;background:transparent}#piano{height:180px;width:900px}.stage-foot{height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 15px;background:#101a22;color:#718894;font-size:9px;letter-spacing:2px}.transport{display:flex;align-items:center;gap:18px;border:1px solid #394668;border-radius:13px;padding:12px 15px;margin-top:15px;background:linear-gradient(160deg,#202842,#11192d);box-shadow:inset 0 1px #fff1,0 7px 24px #0004}.controls{display:flex;gap:6px;align-items:center}.icon-button{width:34px;height:44px;border:1px solid transparent;border-radius:8px;color:#9aafd1;background:transparent;font-size:23px}.icon-button:hover{background:#2b3553;color:#e3eaff}.play-button{display:grid;place-items:center;width:46px;height:46px;border:1px solid #befff3;border-radius:50%;background:linear-gradient(145deg,#80f7d7,#32c5d4);color:#083443;font-size:18px;box-shadow:inset 0 2px #ffffff80,0 4px 0 #126174,0 0 21px #4ce9dd25}.play-button:active{transform:translateY(2px);box-shadow:0 2px 0 #126174}.timeline{flex:1;min-width:0}.timeline-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:#b9cce6;font-variant-numeric:tabular-nums}.timeline input{margin:0}.transport-state{font-size:11px;color:#85e3cf;min-width:58px;text-align:right}.workspace-foot{display:flex;justify-content:space-between;gap:12px;margin-top:12px;color:#8597b4;font-size:11px}.workspace-foot span:first-child{max-width:68%}.workspace-foot span:last-child{text-align:right;white-space:nowrap}.busy{position:absolute;z-index:12;inset:0;display:flex;align-items:center;justify-content:center;background:#0c1529ee;color:#9befdf;padding:25px;text-align:center}.diagnostics{font-size:12px;color:#b3c1d9}.diagnostics summary{cursor:pointer;min-height:28px}.diagnostics ul{padding-left:18px;color:#e1c598}.scope{font-size:11px;color:#8191af;margin:0 8px}.export-spec{font-size:15px;color:#d2dcff;font-weight:650;display:flex;align-items:center;gap:9px;flex-wrap:wrap}.export-spec span{font-size:9px;letter-spacing:1px;color:#bca7ff;background:#302852;padding:5px;border-radius:5px}.export-spec b{font-size:11px;color:#87f3d5}progress{width:100%;height:8px;accent-color:var(--cyan);margin-top:18px}.download{display:block;margin-top:14px}#exportVideo{background:linear-gradient(135deg,#bca1ff,#9583ef 60%,#79b9ef);color:#171839;border-color:#d3bfff;box-shadow:inset 0 1px #ffffffa0,0 4px 0 #504689,0 8px 25px #9875e330}#rangeWarning{color:#e0c68e}.toast{position:fixed;z-index:60;left:50%;bottom:25px;max-width:min(620px,90vw);padding:14px 20px;border:1px solid #68c7c0;border-radius:12px;background:#173337;color:#dafff3;box-shadow:0 12px 40px #0009;opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity .18s,transform .18s}.toast.show{opacity:1;transform:translate(-50%,0)}.exit-focus{display:none;position:absolute;z-index:30;top:max(12px,env(safe-area-inset-top));right:12px;width:44px}#previewArea:fullscreen,.focus-mode #previewArea{padding:0;border:0;border-radius:0;background:#060b14;position:fixed;inset:0;z-index:100}.focus-mode{overflow:hidden}#previewArea:fullscreen .exit-focus,.focus-mode .exit-focus{display:flex}#previewArea:fullscreen .stage-wrap,.focus-mode .stage-wrap{box-shadow:none}.preview-area.phone .stage-wrap{outline:7px solid #060c18;border-radius:3px;box-shadow:0 0 0 8px #56617c,0 16px 45px #0009}body.preparing .sidebar,body.preparing .transport,body.loading .sidebar,body.loading .transport,body.loading .preview-actions{pointer-events:none;opacity:.6}body.exporting .sidebar .panel:not(:has(#cancelExport)),body.exporting .transport,body.exporting .editor-tabs{pointer-events:none;opacity:.5}body.exporting .preview-actions{pointer-events:none}body.exporting .sidebar{user-select:none}
@media(min-width:1500px){.layout{grid-template-columns:380px minmax(0,1fr)}.panel{padding:22px}.hex-input{font-size:12px}}
@media(max-width:1100px){.layout{grid-template-columns:310px minmax(0,1fr);gap:18px;padding:18px}.top{padding:0 22px}.preview-head h1{font-size:18px;max-width:230px}.preview-format,.aspect{display:none}.preview-actions{gap:6px}.preview-actions .button{font-size:10px;padding:8px}.panel{padding:16px}.transport{gap:8px;padding:11px}.transport-state{display:none}.color-card{padding:12px 7px}.color-edit{gap:4px}.palette-chip{font-size:9px}.workspace-foot span:last-child{white-space:normal}.brand strong{font-size:14px}.preview-head{align-items:flex-start}}
@media(max-width:760px){body{padding-bottom:calc(165px + env(safe-area-inset-bottom));background:radial-gradient(ellipse at top,#1d1b3c,transparent 55%),#090e1e}.top{height:65px;padding:0 16px}.brand-icon{width:36px;height:38px;font-size:25px;border-radius:10px}.brand{gap:10px}.brand strong{font-size:13px;letter-spacing:1px}.brand small{font-size:8px;letter-spacing:1.5px}.brand em{font-size:8px}.top-right{font-size:0;gap:0}.top-right .local-dot{display:none}.version{font-size:10px;margin-left:0}.layout{display:flex;flex-direction:column;gap:18px;padding:14px 12px}.workspace{order:-1;width:100%;position:static}.sidebar{width:100%;max-height:none;overflow:visible;padding:0;gap:14px;overscroll-behavior:auto;scroll-margin-top:14px}.editor-tabs{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:35;height:calc(67px + env(safe-area-inset-bottom));padding:8px 12px calc(10px + env(safe-area-inset-bottom));gap:8px;background:#0a1125;border-top:1px solid #394460}.editor-tabs button{font-size:12px;min-height:44px;border-radius:9px}.editor-tabs button span{font-size:15px}.preview-head{gap:10px;margin-bottom:12px;align-items:center;min-height:39px}.preview-head h1{font-size:17px;max-width:210px}.preview-head .section-label{font-size:8px;letter-spacing:1.5px;margin-bottom:4px}.preview-actions .button{font-size:10px;min-height:38px;padding:8px}.preview-actions #phonePreview{display:none}.preview-area{padding:8px;border-radius:13px}.transport{position:fixed;bottom:calc(77px + env(safe-area-inset-bottom));left:12px;right:12px;margin:0;z-index:34;padding:9px 11px;gap:10px;border-color:#4c5a7e;background:linear-gradient(145deg,#26304b,#121c31);box-shadow:0 4px 24px #0007}.play-button{width:43px;height:43px}.icon-button{width:28px;height:43px}.controls{gap:3px}.timeline-meta{font-size:10px}.workspace-foot{font-size:10px;margin-top:8px;gap:8px}.workspace-foot span:first-child{max-width:65%}.panel{padding:20px;border-radius:14px}.field{font-size:13px;margin:18px 0}.field>input[type=text],select{font-size:16px;min-height:46px}.button{font-size:13px;min-height:44px}.check{font-size:13px;min-height:40px}.hint{font-size:12px}.color-cards{gap:12px}.color-card{padding:15px}.color-card label{font-size:11px}.color-edit{gap:10px}.color-edit input[type=color]{width:44px;height:44px}.hex-input{font-size:16px}.palette-chip{font-size:11px;min-height:44px}.text-button{min-height:44px}.toast{bottom:calc(160px + env(safe-area-inset-bottom));font-size:12px}.tempo-entry input{font-size:42px}.preview-area.phone .stage-wrap{outline:0;box-shadow:0 10px 25px #0006}.scope{margin-bottom:10px}.workspace-foot span:last-child{max-width:35%}.preview-mode-label{white-space:normal}}
@media(max-width:370px){.layout{padding:12px 9px}.top{padding:0 12px}.preview-head h1{max-width:165px;font-size:15px}.preview-actions .button{font-size:9px}.panel{padding:15px}.color-card{padding:11px}.color-edit{gap:6px}.hex-input{font-size:13px}.editor-tabs{padding-left:9px;padding-right:9px}.editor-tabs button{font-size:11px}.timeline-meta{font-size:9px}.controls{gap:1px}.transport{gap:6px;left:9px;right:9px}.icon-button{width:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before{transition:none!important;animation:none!important}}