:root{--bg:#111113;--side:#1a1a1d;--raised:#232327;--line:#2c2c31;--text:#ececf0;--muted:#8e8e96;--accent:#5b8cff;--changed:#f0b429;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0}.app{grid-template-rows:52px 1fr;grid-template-columns:1fr 300px;height:100vh;display:grid}.topbar{border-bottom:1px solid var(--line);grid-column:1/-1;align-items:center;gap:16px;padding:0 16px;display:flex}h1{letter-spacing:.02em;margin:0;font-size:16px}.actions{gap:8px;margin-left:auto;display:flex}.mode{background:var(--raised);border-radius:8px;padding:2px;display:flex}.mode button{color:var(--muted);background:0 0;border:none;border-radius:6px;padding:5px 12px}.mode button.on{background:var(--line);color:var(--text)}button,.button{background:var(--raised);color:var(--text);border:1px solid var(--line);font:inherit;cursor:pointer;text-align:center;border-radius:8px;padding:7px 14px;font-size:13px}button:hover:not(:disabled),.button:hover{border-color:#3a3a41}button:disabled{opacity:.4;cursor:default}button.primary:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}.button.disabled{opacity:.4;pointer-events:none}button.link{color:var(--accent);text-align:left;background:0 0;border:none;padding:0;font-size:12px}.stage{place-items:center;min-width:0;min-height:0;padding:24px;display:grid;position:relative;overflow:hidden}.stage canvas{display:block;box-shadow:0 0 0 1px #0006}.stage canvas[hidden]{display:none}.empty{font:inherit;cursor:pointer;text-align:center;color:var(--muted);border:1.5px dashed var(--line);background:0 0;border-radius:14px;padding:48px 64px}.empty p{margin:4px 0}.stage.pick{cursor:pointer}.stage.pick:hover .empty,.empty:focus-visible{border-color:var(--accent);color:var(--text);outline:none}.badge{background:#000a;border-radius:6px;padding:4px 10px;font-size:12px;position:absolute;top:20px;left:20px}.error{color:#ff6b6b}.side{background:var(--side);border-left:1px solid var(--line);flex-direction:column;min-height:0;display:flex}.side-scroll{flex-direction:column;flex:1;gap:4px;padding:8px 12px 16px;display:flex;overflow-y:auto}.panel-section{border-bottom:1px solid var(--line)}.panel-section header{align-items:center;display:flex}.panel-title{text-align:left;background:0 0;border:none;flex:1;align-items:center;gap:8px;padding:12px 4px;font-size:13px;font-weight:600;display:flex}.chevron{color:var(--muted);transition:transform .15s}.open .chevron{transform:rotate(90deg)}.eye{color:var(--muted);background:0 0;border:none;padding:6px;line-height:0}.eye:hover:not(:disabled){color:var(--text)}.off .panel-title{color:var(--muted)}.panel-body{flex-direction:column;gap:14px;padding:2px 4px 16px;display:flex}.dot{background:var(--changed);vertical-align:middle;border-radius:50%;width:6px;height:6px;margin-left:6px;display:inline-block}.slider-head{justify-content:space-between;align-items:center;margin-bottom:6px;font-size:12.5px;display:flex}.label{-webkit-user-select:none;user-select:none;cursor:default}.value{text-align:right;width:56px;color:var(--muted);font:inherit;font-variant-numeric:tabular-nums;background:0 0;border:1px solid #0000;border-radius:4px;padding:1px 4px;font-size:12.5px}.value:hover,.value:focus{border-color:var(--line);color:var(--text);outline:none}.value::-webkit-inner-spin-button{display:none}.value{appearance:textfield}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:16px;margin:0}input[type=range]:disabled{cursor:default;opacity:.5}input[type=range]::-webkit-slider-runnable-track{background:var(--track);border-radius:2px;height:4px}input[type=range]::-moz-range-track{background:var(--track);border-radius:2px;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:2px solid var(--side);background:#f4f4f6;border-radius:50%;width:14px;height:14px;margin-top:-5px;box-shadow:0 0 0 1px #0008}input[type=range]::-moz-range-thumb{border:2px solid var(--side);background:#f4f4f6;border-radius:50%;width:12px;height:12px}input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}.row{gap:8px;padding:12px 0 8px;display:flex}.row button{flex:1}.hint{border-top:1px solid var(--line);color:var(--muted);min-height:56px;padding:10px 14px;font-size:12px;line-height:1.45}.small{color:var(--muted);margin:0;font-size:12px;line-height:1.4}.score .big{font-variant-numeric:tabular-nums;font-size:28px;font-weight:600}.good{color:#4cd964}.ok{color:#fc0}.bad{color:#ff6b6b}@media (width<=760px){.app{grid-template-rows:52px 1fr auto;grid-template-columns:1fr}.side{border-left:none;border-top:1px solid var(--line);max-height:45vh}.mode{display:none}}.tabs{background:var(--raised);border-radius:8px;gap:2px;padding:2px;display:flex}.tabs button{color:var(--muted);white-space:nowrap;background:0 0;border:none;border-radius:6px;flex:1;padding:5px 2px;font-size:11.5px}.tabs button.on{background:var(--line);color:var(--text)}.tabs .dot{vertical-align:2px;width:5px;height:5px;margin-left:3px}.wheel-wrap{flex-direction:column;align-items:center;gap:6px;padding:4px 0;display:flex}.wheel{cursor:crosshair;touch-action:none;box-shadow:inset 0 0 0 1px #0006, 0 0 0 1px var(--line);background:radial-gradient(circle,#8a8a8a 0%,#8a8a8a00 72%),conic-gradient(from 90deg,#f33,#f3f,#33f,#3ff,#3f3,#ff3,#f33);border-radius:50%;position:relative}.wheel.disabled{opacity:.4;cursor:default}.wheel-centre{background:#0008;border-radius:50%;width:4px;height:4px;margin:-2px 0 0 -2px;position:absolute;top:50%;left:50%}.wheel-dot{pointer-events:none;background:0 0;border:2px solid #fff;border-radius:50%;width:14px;height:14px;margin:-7px 0 0 -7px;position:absolute;box-shadow:0 0 0 1px #000a}.wheel-readout{font-variant-numeric:tabular-nums}.curve{box-shadow:0 0 0 1px var(--line);cursor:crosshair;touch-action:none;aspect-ratio:1;background:#0d0d0f;border-radius:8px;display:block}.curve.disabled{opacity:.4;cursor:default}.row-tight{gap:8px;display:flex}.row-tight .button{flex:1;padding:7px 8px;font-size:12px}.row-between{justify-content:space-between;align-items:center;gap:8px;display:flex}.note{background:var(--raised);border-radius:8px;padding:8px 10px;font-size:12.5px}.note p{margin:0 0 4px}.note p:last-child{margin:0}button.link.pad{padding:10px 4px 0}.three-wheels{grid-template-columns:1fr 1fr;gap:10px 8px;padding:4px 0;display:grid}.mini-wheel{flex-direction:column;align-items:center;gap:6px;display:flex}.mini-wheel input[type=range]{width:112px}.mini-mid{grid-column:1/-1}.mini-label{color:var(--muted);font-size:12px}.tabs button svg{vertical-align:-2px}.side{position:relative}.side-resize{z-index:5;cursor:col-resize;touch-action:none;width:8px;position:absolute;top:0;bottom:0;left:-4px}.side-resize:hover,.side-resize:active{background:linear-gradient(90deg, transparent 3px, var(--accent) 3px, var(--accent) 5px, transparent 5px)}.grip{color:var(--muted);cursor:grab;opacity:.5;align-items:center;padding:6px 4px 6px 0;display:flex}.panel-section header:hover .grip{opacity:1}.grip:active{cursor:grabbing}.panel-section.drop-before{box-shadow:inset 0 2px 0 var(--accent)}.drop-end{min-height:14px}.drop-end.active{box-shadow:inset 0 2px 0 var(--accent)}.floating{background:var(--side);border:1px solid var(--line);resize:both;border-radius:10px;flex-direction:column;min-width:240px;min-height:160px;display:flex;position:fixed;overflow:hidden;box-shadow:0 12px 40px #000a,0 0 0 1px #0006}.floating-bar{border-bottom:1px solid var(--line);cursor:move;-webkit-user-select:none;user-select:none;touch-action:none;background:var(--raised);align-items:center;gap:2px;padding:6px 6px 6px 12px;display:flex}.floating-title{flex:1;font-size:13px;font-weight:600}.floating.off .floating-title{color:var(--muted)}.floating-body{flex-direction:column;flex:1;gap:14px;padding:12px 14px 16px;display:flex;overflow-y:auto}@media (width<=760px){.app{grid-template-columns:1fr!important}.side-resize,.grip{display:none}}.app{grid-template-rows:52px minmax(0,1fr) auto}.stage{grid-area:2/1}.side{grid-area:2/2/span 2}.filmstrip{border-top:1px solid var(--line);background:var(--bg);grid-area:3/1;min-width:0}.filmstrip-bar{justify-content:space-between;align-items:center;gap:8px;padding:6px 12px 0;display:flex}.filmstrip-actions{gap:6px;display:flex}.filmstrip-actions button{padding:4px 10px;font-size:12px}.filmstrip-row{scrollbar-width:thin;gap:6px;padding:8px 12px 10px;display:flex;overflow-x:auto}.thumb{background:var(--raised);cursor:pointer;outline-offset:1px;border-radius:6px;outline:2px solid #0000;flex:none;width:88px;height:66px;position:relative;overflow:hidden}.thumb img{object-fit:cover;width:100%;height:100%;display:block}.thumb.selected{outline-color:#5b8cff88}.thumb.active{outline-color:var(--accent)}.thumb-loading{background:linear-gradient(90deg, var(--raised), var(--line), var(--raised));background-size:200% 100%;animation:1.2s linear infinite shimmer;position:absolute;inset:0}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.thumb-dot{margin:0;position:absolute;top:6px;left:6px;box-shadow:0 0 0 1.5px #000a}.thumb-remove{color:#fff;background:#000b;border:none;border-radius:50%;width:18px;height:18px;padding:0;font-size:13px;line-height:18px;display:none;position:absolute;top:3px;right:3px}.thumb:hover .thumb-remove{display:block}.toast{color:var(--text);box-shadow:0 0 0 1px var(--line);text-align:center;background:#000d;border-radius:8px;max-width:80%;padding:8px 14px;font-size:12.5px;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}@media (width<=760px){.app{grid-template-rows:52px 1fr auto auto}.side{grid-area:4/1}.filmstrip-actions button:nth-child(n+3){display:none}}