:root{--bg: #17191c;--bg-raised: #1f2226;--bg-inset: #101214;--line: #2c3036;--text: #e8eaec;--text-dim: #9aa0a8;--chroma: #37d463;--chroma-deep: #1f9b45;--record: #ff4553;--radius: 14px;--display: "Futura", "Jost", "Avenir Next", system-ui, sans-serif;--body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}*{margin:0;padding:0;box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%;overscroll-behavior:none}body{background:var(--bg);color:var(--text);font-family:var(--body);display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;touch-action:manipulation}#topbar{display:flex;align-items:center;gap:16px;padding:10px 16px;border-bottom:1px solid var(--line);flex:none}#topbar h1{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:10px}.logo-chip{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--chroma),var(--chroma-deep));box-shadow:0 0 12px #37d46373}#status{flex:1;text-align:right;color:var(--text-dim);font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}button.primary{background:var(--chroma);color:#08120b;font-family:var(--display);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:15px;padding:10px 22px;border-radius:999px;flex:none}button.primary:disabled{background:var(--line);color:var(--text-dim)}button.primary.recording{background:var(--record);color:#fff}#layout{flex:1;display:flex;min-height:0}#stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;background:repeating-conic-gradient(#1b1e22,#1b1e22 25%,#16181b 0%,#16181b 50%) 0 0 / 28px 28px;min-width:0;min-height:0;overflow:hidden}#view{max-width:100%;max-height:100%;touch-action:none;box-shadow:0 8px 40px #0000008c}#view.eyedropping{cursor:crosshair;outline:3px dashed var(--chroma);outline-offset:-3px}#stage-hint{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:var(--text-dim);font-size:16px;padding:24px;pointer-events:none}#stage-hint strong{color:var(--text);font-family:var(--display);font-size:20px;letter-spacing:.02em}#record-veil{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:10px;background:#000000a6;border-radius:999px;padding:8px 16px;font-size:14px;font-variant-numeric:tabular-nums}.rec-dot{width:12px;height:12px;border-radius:50%;background:var(--record);animation:blink 1.1s ease-in-out infinite}@keyframes blink{50%{opacity:.25}}@media(prefers-reduced-motion:reduce){.rec-dot{animation:none}}#panel{width:296px;flex:none;border-left:1px solid var(--line);background:var(--bg-raised);min-height:0;display:flex}.panel-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px;display:flex;flex-direction:column;gap:20px}.group h2{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin-bottom:10px}.hint{color:var(--text-dim);font-size:13px;margin-bottom:10px}.slots{display:flex;flex-direction:column;gap:10px}.slot{display:flex;align-items:center;gap:12px;background:var(--bg-inset);border:1px solid var(--line);border-radius:var(--radius);padding:10px;cursor:pointer;min-height:68px}.slot.drop-target{border-color:var(--chroma);box-shadow:0 0 0 3px #37d46340}.thumb{width:64px;height:48px;flex:none;border-radius:8px;background:repeating-conic-gradient(#26292e,#26292e 25%,#1d2024 0%,#1d2024 50%) 0 0 / 12px 12px;background-size:12px 12px;border:1px solid var(--line);background-position:center}.thumb.has-media{background-size:cover!important;background-position:center;background-repeat:no-repeat}.thumb.thumb-green{background:linear-gradient(160deg,#3fdf6c,#23b04c);border-color:var(--chroma-deep)}.slot-info{flex:1;min-width:0}.slot-name{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.02em}.slot-sub{color:var(--text-dim);font-size:12px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.slot-clear{flex:none;width:34px;height:34px;border-radius:50%;background:var(--bg-raised);border:1px solid var(--line);color:var(--text-dim);font-size:14px}.key-row{display:flex;gap:8px;margin-bottom:12px}#swatch{width:44px;height:44px;flex:none;border-radius:10px;border:2px solid var(--line);padding:3px}#swatch span{display:block;width:100%;height:100%;border-radius:6px;background:#37d463}button.tool{background:var(--bg-inset);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:14px;min-height:44px}button.tool.active{border-color:var(--chroma);color:var(--chroma);background:#37d46314}.key-row .tool{flex:1}.slider{display:flex;align-items:center;gap:12px;padding:7px 0}.slider>span{width:74px;flex:none;font-size:13px;color:var(--text-dim)}input[type=range]{flex:1;-moz-appearance:none;appearance:none;-webkit-appearance:none;height:34px;background:transparent;min-width:0}input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--line)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--text);margin-top:-10px;box-shadow:0 1px 6px #00000080}input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--line)}input[type=range]::-moz-range-thumb{width:26px;height:26px;border:none;border-radius:50%;background:var(--text)}.transport{display:flex;align-items:center;gap:10px}#play-btn{width:48px;flex:none;font-size:16px}#timecode{flex:none;font-size:13px;color:var(--text-dim);font-variant-numeric:tabular-nums;min-width:40px;text-align:right}#fit-group .tool{width:100%}#drop-glow{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;border:4px solid var(--chroma);box-shadow:inset 0 0 60px #37d46359;z-index:50}@media(max-width:820px),(orientation:portrait){#layout{flex-direction:column}#panel{width:auto;height:42%;max-height:380px;border-left:none;border-top:1px solid var(--line)}}