:root{--bg: #0f1419;--card: #1a2332;--text: #e7ecf3;--muted: #8b9cb3;--accent: #3d8bfd;--edge: #34c759;--source: #ff9f0a}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}.layout{max-width:1100px;margin:0 auto;padding:1.5rem}.header h1{margin:0 0 .25rem;font-size:1.5rem}.subtitle{margin:0;color:var(--muted);font-size:.95rem}.card{background:var(--card);border-radius:10px;padding:1rem 1.25rem;margin-bottom:1rem}.controls label{display:block;margin-bottom:.75rem;font-size:.85rem;color:var(--muted)}.controls input{display:block;width:100%;margin-top:.25rem;padding:.5rem .75rem;border:1px solid #2d3a4f;border-radius:6px;background:#0f1419;color:var(--text)}.bar.c2c{background:#a855f7}.label.c2c{color:#c084fc}.toggle{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;color:var(--muted)}.buttons{display:flex;gap:.5rem;flex-wrap:wrap}button{padding:.5rem 1.25rem;border:none;border-radius:6px;background:var(--accent);color:#fff;font-weight:600;cursor:pointer}button.secondary{background:#2d3a4f}button:disabled{opacity:.5;cursor:not-allowed}.main-grid{display:grid;grid-template-columns:1fr 320px;gap:1rem}@media(max-width:800px){.main-grid{grid-template-columns:1fr}}video{width:100%;max-height:420px;background:#000;border-radius:6px}.status-line{margin-top:.75rem;font-size:.9rem}.status-line.subtle{color:var(--muted);font-size:.8rem}.stats-panel h2{margin:0 0 1rem;font-size:1rem}.ratio-row{display:grid;grid-template-columns:90px 1fr 48px;align-items:center;gap:.5rem;margin-bottom:.5rem;font-size:.85rem}.bar-track{height:8px;background:#0f1419;border-radius:4px;overflow:hidden}.bar{height:100%;width:0%;transition:width .3s}.bar.edge{background:var(--edge)}.bar.source{background:var(--source)}.stats-detail{margin:1rem 0 0;font-size:.8rem;color:var(--muted)}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem;margin:1rem 0 0;font-size:.85rem}.metrics dt{color:var(--muted);margin:0}.metrics dd{margin:0;font-variant-numeric:tabular-nums;font-weight:600}.metrics dd.upload{color:#f472b6}.metrics dd.download{color:#c084fc}.info-text{margin:.5rem 0 1rem;font-size:.85rem;color:var(--muted);line-height:1.6}.info-text.example{margin-top:.5rem;padding:.5rem .75rem;background:#0f1419;border-radius:6px}.info ul{margin:.5rem 0 0;padding-left:1.25rem;font-size:.85rem;color:var(--muted)}.info code{color:var(--text)}.slice-priority-matrix{margin-top:.5rem;overflow-x:auto}.slice-priority-matrix table{width:max-content;min-width:100%;border-collapse:collapse;font-size:.8rem;font-variant-numeric:tabular-nums}.slice-priority-matrix th{width:5.5rem;padding:.35rem .4rem;text-align:left;color:var(--muted);font-weight:600;white-space:nowrap;vertical-align:middle;border-bottom:1px solid #2d3a4f}.slice-priority-matrix td{min-width:1.75rem;padding:.35rem .4rem;text-align:center;color:var(--text);border-bottom:1px solid #2d3a4f}.slice-priority-matrix #priority-edge-row td{color:var(--edge);font-weight:600}.slice-priority-matrix #measure-phase-row td{color:var(--muted);font-size:.75rem;font-weight:500}.slice-priority-matrix td.phase-measuring{color:#e6a23c}.slice-priority-matrix td.phase-locked{color:#3ecf8e}.slice-priority-matrix #priority-edge-row th,.slice-priority-matrix #priority-edge-row td{border-bottom:1px solid #2d3a4f}.slice-priority-matrix #measure-phase-row th,.slice-priority-matrix #measure-phase-row td{border-bottom:none}.slice-priority-hint{margin:.35rem 0 0;font-size:.72rem;color:var(--muted)}.toggle input:disabled+*,.toggle:has(input:disabled){opacity:.65;cursor:not-allowed}
