*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,sans-serif;background:#0f0f0f;color:#e8e8e8;min-height:100vh}.app-layout{max-width:1400px;margin:0 auto;padding:1rem 1.5rem}.app-header{margin-bottom:1rem}.app-header h1{font-size:1.4rem;font-weight:700}.app-header p{font-size:.8rem;color:#888;margin-top:.15rem}.columns{display:grid;grid-template-columns:360px 1fr;gap:1rem;align-items:start}@media(max-width:900px){.columns{grid-template-columns:1fr}}.col-left{display:flex;flex-direction:column;gap:.75rem}.col-right{display:flex;flex-direction:column;gap:.75rem;position:sticky;top:1rem}.card{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:10px;padding:1rem;display:flex;flex-direction:column;gap:.6rem}.video-card{padding:.75rem}.card h2{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#888}.row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.btn{padding:.4rem .9rem;border-radius:6px;border:none;font-size:.8rem;font-weight:500;cursor:pointer;transition:opacity .15s}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{background:#4ade80;color:#0f0f0f}.btn.secondary{background:#2a2a2a;color:#e8e8e8;border:1px solid #3a3a3a}.dot{width:8px;height:8px;border-radius:50%;background:#555;flex-shrink:0}.dot.on{background:#4ade80;box-shadow:0 0 6px #4ade80}.error{color:#f87171;font-size:.8rem}video{width:100%;border-radius:8px;background:#000}canvas{width:100%;height:80px;border-radius:6px;background:#111;display:block}input[type=range]{height:6px;cursor:pointer}.pos-value{font-size:1.8rem;font-weight:700;font-variant-numeric:tabular-nums}.pos-bar-wrap{height:8px;background:#2a2a2a;border-radius:4px;overflow:hidden}.pos-bar{height:100%;background:#4ade80;border-radius:4px;transition:width .1s}