:root{--brand:#4f46e5;--brand2:#06b6d4}
.tw{display:grid;gap:12px}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px}
.sw{height:64px;border-radius:12px;border:1px solid var(--line);cursor:pointer;position:relative}
.sw span{position:absolute;left:6px;bottom:4px;font-size:12px;background:rgba(0,0,0,.55);color:#fff;padding:1px 6px;border-radius:6px}
.fsc{position:fixed;inset:0;z-index:2147483646;cursor:pointer}
.fsc .fsh{position:absolute;top:12px;left:50%;transform:translateX(-50%);font:600 14px system-ui;transition:opacity .4s;pointer-events:none;text-shadow:0 0 4px rgba(0,0,0,.4)}
.kb{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.kbm{flex:1;min-width:640px;display:grid;gap:4px}.kbn{width:150px;display:grid;gap:4px;align-content:start;margin-top:34px}
.kr{display:flex;gap:4px}
.k{flex:1;min-width:0;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:6px;background:var(--card);font-size:12px;user-select:none;white-space:nowrap;overflow:hidden}
.k.ok{background:color-mix(in srgb,#22c55e 30%,var(--card));border-color:#22c55e}
.k.dn{background:#facc15;color:#000;border-color:#ca8a04}
.mpad{height:220px;border:2px dashed var(--brand);border-radius:16px;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;user-select:none;color:var(--muted);outline:0;transition:background .1s}
.mpad.hit{background:color-mix(in srgb,var(--brand) 15%,transparent)}
.mb.ok b{color:#16a34a}
.meter{height:18px;border-radius:9px;background:var(--line);overflow:hidden}.meter .bar{height:100%;width:0;background:linear-gradient(90deg,#22c55e,#facc15 70%,#ef4444);transition:width .06s}
.wave{width:100%;height:140px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.vwrap{background:#000;border-radius:14px;overflow:hidden;display:flex;justify-content:center;min-height:200px}.vid{max-width:100%;max-height:70vh}
.chk{display:inline-flex;align-items:center;gap:6px}
.dev{max-width:100%}