:root{color-scheme:light;--paper:#f2f0e8;--ink:#191b17;--muted:#696c60;--accent:#f36343;--acid:#d7ff48;--line:#d6d6ca;--mono:ui-monospace,SFMono-Regular,monospace}
*{box-sizing:border-box}body{margin:0;min-width:320px;color:var(--ink);background:var(--paper);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif}button,input,select{font:inherit}button,select,.upload{cursor:pointer}button{color:inherit}button:disabled{cursor:wait;opacity:.55}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible,.upload:focus-within{outline:3px solid var(--accent);outline-offset:3px}a{color:inherit}button{transition:background .15s}button:hover:not(:disabled){background:#e3e8d7}[hidden]{display:none!important}.shell{max-width:1400px;margin:auto;padding:0 36px}.topbar{height:78px;border-bottom:1px solid var(--ink);display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;display:flex;align-items:center;gap:10px;font-size:20px;font-weight:750}.brand small{font:11px var(--mono);letter-spacing:1.2px;color:var(--muted)}.brand-mark{height:26px;width:30px;border:1px solid var(--ink);padding:4px;display:flex;align-items:flex-end;gap:3px}.brand-mark i{width:5px;background:var(--accent);height:60%}.brand-mark i:nth-child(2){height:100%}.brand-mark i:nth-child(3){height:35%}.privacy{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}.privacy i{width:8px;height:8px;background:var(--acid);border:1px solid var(--ink);border-radius:50%}.intro{display:flex;justify-content:space-between;align-items:flex-end;padding:46px 0 38px;gap:36px}.eyebrow{font:10px/1.5 var(--mono);letter-spacing:1.5px;color:var(--accent);margin:0 0 12px}.intro h1{margin:0;font:600 clamp(38px,5.2vw,68px)/1.18 "Songti SC",serif;letter-spacing:-2px}.intro-copy{color:var(--muted);line-height:1.9;font-size:14px;margin:0 0 4px}.intro-copy span{display:block;font:11px var(--mono);margin-top:18px}.studio{display:grid;grid-template-columns:minmax(0,1fr) 360px;border:1px solid var(--ink);box-shadow:8px 8px 0 var(--acid);background:#e8e7df}.visual-column{min-width:0;padding:22px}.stage-heading{display:flex;justify-content:space-between;gap:8px;font:11px var(--mono);padding:0 0 14px}.stage-heading #workName{max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-stage{position:relative;aspect-ratio:8/5;background:#111;overflow:hidden}.image-stage canvas{display:block;width:100%;height:100%}.regions{position:absolute;inset:0;display:grid;grid-template-columns:repeat(32,1fr)}.region{padding:0;background:transparent;border:0;border-right:1px solid #fff2;outline-offset:-2px;min-width:0}.region:hover:not(:disabled),.region.selected{background:#d7ff4830;box-shadow:inset 0 0 0 1px #d7ff48}.region.active{background:#d7ff4844;box-shadow:inset 0 0 0 1px var(--acid)}.region.rest{border-right-color:#ffffff10}.regions.old{grid-template-columns:repeat(24,1fr);grid-template-rows:repeat(5,1fr)}.centroids{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.centroids polyline{fill:none;stroke:#d7ff48;stroke-width:.4;opacity:.6}.centroids circle{fill:#d7ff48;stroke:#151b12;stroke-width:.35}.centroids circle.selected{fill:var(--accent);r:1.5}.scan{position:absolute;top:0;bottom:0;width:2px;background:var(--acid);box-shadow:0 0 10px #d7ff48;pointer-events:none}.scan span{position:absolute;left:5px;top:12px;background:var(--acid);color:var(--ink);padding:5px;font:10px var(--mono);white-space:nowrap}.scan.end span{left:auto;right:5px}.drop-hint{position:absolute;inset:0;display:grid;place-items:center;background:#191b17bb;color:white;font-size:22px;pointer-events:none}.stage-caption{display:flex;gap:16px;align-items:center;color:var(--muted);font-size:10px;margin:12px 0 28px}.stage-caption span:last-child{margin-left:auto}.legend{display:inline-block;width:8px;height:8px;margin-right:5px;background:var(--acid);border:1px solid #78805e}.legend.point{border-radius:50%}.timeline-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:12px}.timeline-heading span{font:10px var(--mono);color:var(--muted)}.timeline-frame{position:relative;background:#f5f5ef;border:1px solid var(--line);padding-left:28px;height:132px}.timeline-frame>span{position:absolute;left:5px;font:9px var(--mono);color:var(--muted)}.pitch-top{top:6px}.pitch-bottom{bottom:6px}#timeline{display:block;width:100%;height:130px;overflow:hidden}#timeline .grid{stroke:#d2d4c7;stroke-width:.5}#timeline .note{fill:#8c9480;cursor:pointer}#timeline .note.active{fill:var(--accent)}#timeline .note.selected{stroke:var(--ink);stroke-width:1}#timeline .rest{fill:#e3e2d8}#timeline .playhead{stroke:var(--accent);stroke-width:1.4;pointer-events:none}.timeline-scale{margin:8px 0 0 28px;display:flex;justify-content:space-between;font:10px var(--mono);color:var(--muted)}.control-panel{padding:24px;background:var(--paper);border-left:1px solid var(--ink)}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.panel-heading h2{margin:0;font:600 25px "Songti SC",serif}.panel-heading .eyebrow{font-size:9px;margin-bottom:8px}.status{font-size:10px;border:1px solid var(--ink);padding:5px 7px;background:var(--acid);max-width:100px;line-height:1.5}.status.playing{background:var(--accent);color:white}.mode-tabs{display:flex;border:1px solid var(--line);padding:3px;gap:3px}.mode-tabs button{flex:1;border:0;background:transparent;padding:9px 5px;font-size:12px}.mode-tabs button[aria-pressed=true]{background:var(--ink);color:white}.mode-tabs small{font-size:8px;display:block;margin-top:3px;opacity:.65}.metrics{display:grid;grid-template-columns:1fr 1fr;margin:20px 0 0;border-bottom:1px solid var(--line);gap:18px 10px;padding-bottom:18px}.metrics dt,.selection-metrics dt{color:var(--muted);font-size:10px;margin-bottom:6px}.metrics dd{font-size:12px;font-weight:650;margin:0}.mapping-hint{font-size:11px;line-height:1.8;color:var(--muted);min-height:40px;margin:12px 0}.settings{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:12px}.settings select{border:0;background:#e5e6da;padding:5px 7px;margin-left:5px;font-size:11px}.switch-label{display:flex;gap:5px;align-items:center}.switch-label input{accent-color:var(--ink);width:15px;height:15px}.backing-status{font-size:10px;color:var(--muted);line-height:1.5;margin:10px 0 16px;min-height:15px}.play{display:flex;width:100%;align-items:center;gap:12px;padding:16px 15px;background:var(--ink);color:white;border:0;font-size:14px}.play:hover:not(:disabled){background:#343d29}.play small{margin-left:auto;color:var(--acid);font:12px var(--mono)}.progress input{width:100%;accent-color:var(--accent);margin:16px 0 7px}.progress>div{display:flex;justify-content:space-between;align-items:center;font:10px var(--mono)}.progress button{border:0;background:transparent;font-size:10px;padding:4px}.comparison{border-top:1px solid var(--line);margin-top:20px;padding-top:16px}.section-label{font-size:11px;font-weight:600;margin-bottom:10px}.comparison-buttons{display:flex;gap:8px}.comparison-buttons button{flex:1;border:1px solid var(--ink);padding:9px 0;background:transparent;font-size:11px}.comparison p{font-size:10px;line-height:1.7;color:var(--muted);margin:8px 0 0}.image-actions{display:flex;gap:8px;margin-top:18px}.image-actions>*:not(input){flex:1;border:1px solid var(--line);padding:10px 0;text-align:center;font-size:11px;background:transparent}.upload:hover{background:#e3e8d7}.sample-label{display:block;font-size:10px;color:var(--muted);margin:16px 0 8px}#sample{width:100%;border:1px solid var(--line);padding:9px;background:transparent;font-size:11px}.credit{font-size:9px;color:var(--muted);line-height:1.6;margin:8px 0 0}.inspection{margin-top:32px;border:1px solid var(--line);padding:22px;display:grid;grid-template-columns:1fr 1.2fr;gap:24px}.inspection h3{font-size:17px;margin:0 0 8px}.inspection .eyebrow{font-size:9px;margin-bottom:8px}.inspection p:last-child{font-size:11px;color:var(--muted);line-height:1.6;margin:0}.selection-metrics{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0}.selection-metrics dd{font:11px/1.7 var(--mono);margin:0}.acceptance{padding:22px 0;margin:12px 0 0}.acceptance summary{cursor:pointer;font-size:12px;font-weight:600}.acceptance-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:16px}.acceptance-grid p{font-size:11px;line-height:1.9;color:var(--muted);margin:0}.acceptance-grid b{display:block;color:var(--ink);font-size:11px;font-weight:550;margin-bottom:6px}footer{border-top:1px solid var(--line);display:flex;gap:24px;padding:22px 0 30px;font-size:10px;color:var(--muted)}footer span{margin-right:auto}footer a{text-decoration:none}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:90%;padding:12px 20px;background:var(--ink);color:white;font-size:12px;box-shadow:0 3px 16px #0002;z-index:20}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1200px){.studio{grid-template-columns:minmax(0,1fr) 380px}.visual-column{padding:26px}.control-panel{padding:28px}.stage-caption{margin-bottom:34px}}
@media(max-width:850px){.shell{padding:0 20px}.intro{padding-top:32px}.intro h1{font-size:44px}.intro-copy{font-size:12px}.studio{grid-template-columns:minmax(0,1fr) 310px}.control-panel{padding:18px}.visual-column{padding:16px}.stage-caption{flex-wrap:wrap;gap:8px}.stage-caption span:last-child{margin-left:0}.inspection{grid-template-columns:1fr 1fr;gap:15px}.acceptance-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.shell{padding:0 16px}.topbar{height:64px}.brand{font-size:18px}.brand small{font-size:9px}.privacy{font-size:9px}.privacy i{width:6px;height:6px}.intro{display:block;padding:30px 0 25px}.intro h1{font-size:42px}.intro h1 br{display:none}.intro-copy{margin-top:18px;font-size:12px}.intro-copy br:first-child{display:none}.intro-copy span{margin-top:10px}.studio{display:block;box-shadow:5px 5px 0 var(--acid)}.visual-column{padding:14px}.stage-heading{font-size:9px}.stage-caption{margin-bottom:18px;font-size:9px}.timeline-frame{height:108px}#timeline{height:106px}.control-panel{border-left:0;border-top:1px solid var(--ink);padding:22px}.panel-heading{margin-bottom:16px}.metrics{margin-top:15px;gap:14px}.mapping-hint{min-height:0}.inspection{display:block;padding:18px;margin-top:24px}.selection-metrics{margin-top:18px}.acceptance-grid{gap:16px}footer{flex-wrap:wrap;gap:12px}footer span{width:100%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}