/* Neutral optical workbench: the supplied colored spheres are the only saturated surfaces. */
/* Size the complete square canvas against BOTH available axes, including toolbar padding. */
.stage .orb-pair{container-type:size}
.stage .orb-view{width:min(490px,100cqh,100%)}
@media(min-width:1500px){.stage .orb-view{width:min(550px,100cqh,100%)}}
:root{font-family:"PingFang SC","Hiragino Sans GB",-apple-system,BlinkMacSystemFont,sans-serif;color:#28383c;background:#f7f9f9;font-synthesis:none;--line:#e0e6e6;--muted:#78898e;--ink:#28383c;--accent:#526d75}*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button,a,input{outline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #557c90}button:disabled{opacity:.4;cursor:wait}button{transition:background .16s,color .16s,border-color .16s}a{color:inherit;text-decoration:none}button svg{flex-shrink:0}button:hover{filter:brightness(.98)}.app{max-width:1680px;margin:auto;padding:0 40px}.topbar{height:85px;display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:600;letter-spacing:.02em}.brand-light{font-weight:400;color:#8d9a9d}.brand-orb{display:block;width:25px;height:25px;border:1px solid #b9cbd1;border-radius:50%;box-shadow:inset 3px -3px 6px #d0e0e5,inset -3px 3px 5px white;background:#e5edf0}.local-badge{display:flex;align-items:center;gap:7px;margin-left:auto;color:var(--muted);font-size:11px}.local-badge i{width:5px;height:5px;background:#7a9690;border-radius:50%}.outline{display:flex;align-items:center;justify-content:center;gap:7px;background:transparent;border:1px solid #d9e1e2;padding:9px 12px;border-radius:7px;font-size:12px;color:#52676d;min-height:37px}.outline.active,.outline:hover{background:#eaf0f2;border-color:#b8c9ce}main{padding-top:27px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:28px;align-items:start}.app:not(.with-panel) .workspace{grid-template-columns:1fr}.preview-column{min-width:0}.heading{display:flex;align-items:center;justify-content:space-between;min-height:63px;margin-bottom:19px;gap:16px}.eyebrow{font-family:"SFMono-Regular",Consolas,monospace;font-size:10px;letter-spacing:.15em;color:#8a9ba0;margin-bottom:7px}h1{display:flex;align-items:center;gap:13px;font-size:25px;letter-spacing:.015em;font-weight:550;margin:0}.version{font-size:10px;color:#728b94;letter-spacing:.06em;border:1px solid #dce6e9;border-radius:4px;padding:4px 7px;font-weight:400}.stage{position:relative;height:490px;min-height:390px;overflow:hidden;border:1px solid #e1e7e9;border-radius:12px;background:#ebeff2;color:#61757e;isolation:isolate;transition:background .2s}.bg-white{background:#ffffff}.bg-night{background:#000000;color:#ced8dd;border-color:#35434c}.bg-check{background-color:#e8edef;background-image:linear-gradient(45deg,#dce3e6 25%,transparent 25%),linear-gradient(-45deg,#dce3e6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dce3e6 75%),linear-gradient(-45deg,transparent 75%,#dce3e6 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.stage-tools{position:absolute;top:20px;left:23px;right:23px;display:flex;justify-content:space-between;align-items:center;z-index:2}.stage-status{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.03em}.stage-status i{width:5px;height:5px;border-radius:50%;background:#94a6ae}.stage-status i.live{background:#658f81;box-shadow:0 0 0 3px #92bbad22}.backgrounds{display:flex;gap:9px}.swatch{width:17px;height:17px;border-radius:50%;border:2px solid #ffffffaa;box-shadow:0 0 0 1px #9aadb133;position:relative}.swatch.on:after{content:"";position:absolute;inset:-5px;border:1px solid currentColor;border-radius:50%;opacity:.65}.swatch.white{background:#ffffff}.swatch.night{background:#000000}.swatch.check{background:repeating-conic-gradient(#c6d1d6 0 25%,#f4f7f7 0 50%) 0/8px 8px}.orb-pair{display:flex;align-items:center;justify-content:center;height:100%;padding:30px 20px 35px;gap:10px}.orb-view{position:relative;margin:0;width:min(490px,100%);aspect-ratio:1;flex-shrink:1;min-width:0}.orb-view canvas{display:block;width:100%;height:100%}.orb-view.original img{position:absolute;width:92.38%;height:92.38%;left:3.81%;top:3.81%}.comparing .orb-view{max-width:430px}.comparing .orb-pair{padding:20px 12px 46px;gap:0}.orb-view figcaption{position:absolute;bottom:1%;left:0;right:0;text-align:center;font-size:11px;color:inherit}.orb-view figcaption span{display:block;font-size:9px;opacity:.6;margin-top:5px}.stage-bottom{position:absolute;bottom:17px;left:23px;right:20px;display:flex;align-items:center;justify-content:space-between;gap:15px}.color-caption{display:flex;align-items:center;gap:9px;font-size:10px;max-width:75%;line-height:1.7}.palette{display:flex;gap:3px;flex-shrink:0}.palette i{display:block;width:8px;height:8px;border-radius:50%}.stage-actions{display:flex;align-items:center;gap:9px;flex-shrink:0}.text-button{padding:8px 4px;font-size:10px;color:inherit;background:none;border:0;touch-action:none;user-select:none}.icon-button{border:0;border-radius:6px;background:transparent;color:inherit;min-width:30px;min-height:34px;display:flex;align-items:center;justify-content:center;padding:6px}.icon-button:hover{background:#8ba0aa14}.loading{position:absolute;inset:0;display:grid;place-items:center;font-size:12px}.fallback{position:absolute;inset:0;display:grid;place-items:center}.fallback img{width:92.38%}.fallback span{position:absolute;bottom:7%;font-size:12px}.transport{background:#fff;border:1px solid var(--line);border-radius:10px;margin-top:15px;padding:17px 22px 15px}.transport-top{display:flex;align-items:center;justify-content:space-between;gap:14px}.audio-label{display:flex;align-items:center;gap:10px}.audio-mark{background:#eef3f4;color:#78939b;border:1px solid #e4ecef;border-radius:7px;width:31px;height:31px;display:grid;place-items:center;font-size:12px}.audio-label strong{display:block;font-size:12px;font-weight:500}.audio-label small{display:block;font-size:9px;color:#95a2a6;margin-top:3px}.meter{display:flex;align-items:center;gap:8px;font-size:9px;color:#8d9c9f}.meter>div{height:3px;width:55px;background:#e5ecee}.meter i{display:block;height:100%;background:#698c90}.meter b{min-width:16px;font-size:10px;font-family:monospace;font-weight:400}.player-row{display:flex;align-items:center;gap:13px;margin-top:14px}.play{display:grid;place-items:center;border:0;color:#fff;background:#506a73;width:35px;height:35px;flex-shrink:0;border-radius:50%}.time{font-family:"SFMono-Regular",Consolas,monospace;font-size:10px;color:#7c8d94;min-width:49px}.duration{color:#a0adb1}.waveform{height:36px;flex:1;min-width:30px;position:relative}.waveform svg{position:absolute;inset:0;width:100%;height:100%}.waveform input{opacity:0;position:absolute;inset:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}.waveform:focus-within{outline:2px solid #557c90;outline-offset:4px;border-radius:4px}.playhead{position:absolute;top:0;height:100%;width:1px;background:#6c8288;pointer-events:none}.loop{background:none;border:1px solid transparent;color:#8b9ba0;font-size:10px;border-radius:5px;padding:6px}.loop.active{border-color:#cedfe3;background:#edf3f4;color:#3e6977}.voices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:20px}.voice{position:relative;display:flex;align-items:center;gap:7px;min-width:0;border:1px solid var(--line);border-radius:8px;background:transparent;text-align:left;padding:10px 7px}.voice.selected{background:#fff;border-color:#a0b5bc;box-shadow:0 2px 8px #8fa5ad0a}.voice img{width:40px;height:40px;flex-shrink:0}.voice strong{font-size:11px;font-weight:500;white-space:nowrap;display:block}.voice small{font-family:monospace;display:block;font-size:8px;color:#91a0a4;margin-top:5px;white-space:nowrap}.selected-dot{position:absolute;top:7px;right:7px;width:4px;height:4px;background:#6a8791;border-radius:50%}.controls{border:1px solid var(--line);border-radius:12px;background:#fff;margin-top:82px;overflow:hidden}.controls-title{display:flex;align-items:center;justify-content:space-between;padding:21px 22px 6px}.controls-title small{font-family:monospace;font-size:8px;color:#9aa9ad;letter-spacing:.1em}.controls-title h2{font-size:17px;font-weight:550;margin:4px 0 0}.quiet{border:0;background:transparent;font-size:10px;color:#8c9da3;padding:7px}.controls .twk-body{padding:6px 22px 21px;gap:15px}.panel-intro{color:#92a0a5;font-size:10px;line-height:1.8;margin:0 0 1px}.controls .twk-sect{color:#6e878f;font-size:10px;letter-spacing:.05em;border-top:1px solid #edf1f2;padding-top:17px;margin-top:1px}.controls .twk-lbl{font-size:11px;color:#6c7c83}.controls .twk-lbl>span:first-child{font-weight:400}.controls .twk-val{font-family:monospace;font-size:10px;color:#91a3ab}.controls .twk-slider{height:3px;margin:6px 0;background:#dee6e9;cursor:pointer}.controls .twk-slider::-webkit-slider-thumb{width:12px;height:12px;background:#fdfefe;border:1px solid #9cafb8;box-shadow:0 1px 3px #71899422}.controls .twk-row{gap:6px}.controls .twk-seg{background:#edf2f3}.controls .twk-seg button{font-size:9px;color:#758c94;min-height:28px;cursor:pointer}.controls .twk-toggle{width:29px;height:16px;cursor:pointer;background:#d4dfe2}.controls .twk-toggle i{height:12px;width:12px;top:2px;left:2px}.controls .twk-toggle[data-on="1"]{background:#708d96}.controls .twk-toggle[data-on="1"] i{transform:translateX(13px)}.tiny-note{font-size:9px;line-height:1.8;color:#a0adb2;margin:0}.panel-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.controls .twk-btn{height:32px;padding:0 8px;border-radius:5px;background:#536d76;font-size:10px;cursor:pointer}.controls .twk-btn.secondary{background:#eff3f4;color:#7c9098}.autosave{display:flex;gap:4px;align-items:center;justify-content:center;font-size:9px;color:#a4b0b4}.autosave svg{width:12px;height:12px}footer{display:flex;justify-content:space-between;gap:15px;font-size:9px;color:#a0adb2;border-top:1px solid var(--line);margin-top:27px;padding:18px 0 22px}.footer-sep{padding:0 10px}.notice{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:100;padding:15px 20px;background:#314a54;color:#fff;border-radius:9px;font-size:12px;box-shadow:0 8px 30px #233a4a22;max-width:90vw;cursor:pointer}.notice span{margin-left:18px;opacity:.6;font-size:10px}@media(min-width:1500px){.stage{height:570px}.orb-view{width:550px}.controls .twk-body{gap:18px}}@media(max-width:1150px){.app{padding:0 24px}.workspace{gap:20px;grid-template-columns:minmax(0,1fr) 265px}.stage{height:450px}.voice{flex-direction:column;text-align:center;gap:3px;padding:9px 4px}.voice img{width:39px;height:39px}.color-caption{max-width:60%}.controls .twk-body{padding-left:18px;padding-right:18px}}@media(max-width:900px){.workspace{grid-template-columns:1fr!important}.controls{margin-top:0}.controls .twk-body{display:grid;grid-template-columns:1fr 1fr;gap:18px 30px}.controls .twk-sect,.controls .panel-intro,.controls .tiny-note,.controls .panel-actions,.controls .autosave{grid-column:1/-1}.stage{height:470px}.voice{flex-direction:row;text-align:left}.orb-view{max-width:475px}.controls-title{padding-left:18px}.controls .twk-body{padding-bottom:22px}}@media(max-width:600px){.app{padding:0 16px}.topbar{height:70px;gap:12px}.brand{font-size:14px;gap:8px}.brand-orb{width:22px;height:22px}.local-badge{display:none}.topbar>.outline{margin-left:auto;font-size:11px;min-height:38px;padding:8px}.topbar>.outline svg{width:15px}.heading{margin:0 0 17px;min-height:60px}.eyebrow{font-size:8px;letter-spacing:.08em}h1{font-size:23px;gap:8px}.version{font-size:9px;padding:3px 5px}.heading>.outline{padding:8px;font-size:10px}.heading>.outline svg{width:14px}main{padding-top:18px}.stage{height:396px;min-height:0}.stage-tools{top:17px;left:16px;right:18px}.orb-pair{padding:25px 0 43px}.stage-bottom{left:15px;right:10px;bottom:9px}.color-caption{max-width:64%;gap:6px;font-size:8px}.palette{gap:2px}.palette i{width:6px;height:6px}.stage-actions{gap:0}.text-button{font-size:9px}.stage-status{font-size:9px}.stage .icon-button{min-height:44px;min-width:32px}.transport{padding:15px 13px 12px}.audio-label strong{font-size:11px}.audio-label small{font-size:8px}.audio-mark{display:none}.meter{gap:5px;font-size:8px}.meter>div{width:32px}.player-row{gap:7px}.play{width:34px;height:34px}.player-row>.icon-button{min-width:25px;padding:3px}.time{font-size:9px;min-width:43px}.loop{font-size:9px;padding:5px}.voices{gap:5px;margin-top:15px}.voice{flex-direction:column;padding:7px 2px;text-align:center;gap:3px}.voice img{width:43px;height:43px}.voice strong{font-size:9px}.voice small{font-size:7px;margin-top:4px}.controls{border-radius:9px}.controls .twk-body{gap:19px 20px}.controls .twk-lbl{font-size:10px}.controls .twk-slider{margin:12px 0}.controls .twk-slider::-webkit-slider-thumb{width:18px;height:18px}.controls .twk-seg button{min-height:38px}.controls .twk-toggle{box-shadow:0 0 0 10px transparent}.comparing .orb-pair{padding:45px 0 70px}.comparing .orb-view figcaption{bottom:-20%;font-size:10px}.comparing .orb-view figcaption span{font-size:8px}footer{font-size:8px;flex-direction:column;gap:8px;margin-top:22px}.notice{width:90vw;font-size:11px}.notice span{display:block;margin:6px 0 0}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}