*,:before,:after{box-sizing:border-box}:root{--bg:#0d1117;--surface:#161b22;--surface-2:#21262d;--border:#30363d;--accent:#3b82f6;--accent-dim:#3b82f626;--green:#22c55e;--red:#f87171;--text:#e6edf3;--text-muted:#7d8590;--mono:ui-monospace, "Cascadia Code", Consolas, monospace;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.5}body{min-height:100dvh;margin:0}#root{flex-direction:column;align-items:center;min-height:100dvh;display:flex}.page{flex-direction:column;gap:0;width:100%;max-width:900px;padding:0 16px 64px;display:flex}.site-header{text-align:center;padding:32px 0 24px}.site-title{letter-spacing:-.5px;color:var(--text);justify-content:center;align-items:center;gap:10px;font-size:26px;font-weight:700;display:flex}.site-icon{color:var(--accent);font-size:28px}.site-subtitle{color:var(--text-muted);margin:6px 0 0;font-size:14px}.url-bar{margin-bottom:16px;position:relative}.url-input{background:var(--surface);border:1px solid var(--border);width:100%;color:var(--text);font-size:15px;font-family:var(--mono);border-radius:10px;outline:none;padding:12px 44px 12px 16px;transition:border-color .15s}.url-input::placeholder{color:var(--text-muted);font-family:system-ui,sans-serif}.url-input:focus{border-color:var(--accent)}.clear-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 6px;font-size:14px;line-height:1;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.clear-btn:hover{color:var(--text);background:var(--surface-2)}.video-section{aspect-ratio:16/9;border:1px solid var(--border);background:#000;border-radius:10px;width:100%;overflow:hidden}.yt-player{width:100%;height:100%}.yt-player iframe{display:block}.yt-placeholder{width:100%;height:100%;color:var(--text-muted);text-align:center;justify-content:center;align-items:center;padding:24px;font-size:15px;display:flex}.yt-error{color:var(--red)}.video-volume-section{background:var(--surface);border:1px solid var(--border);border-radius:12px;align-items:flex-start;gap:16px;margin-top:10px;padding:16px 20px;display:flex}.metronome-section{margin-top:20px}.metronome{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px 28px}.metronome-header{align-items:center;gap:12px;margin-bottom:24px;display:flex}.metronome-header h2{letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin:0;font-size:15px;font-weight:600}.beat-dot{background:var(--accent);opacity:.25;border-radius:50%;flex-shrink:0;width:14px;height:14px;transition:box-shadow 40ms ease-out,opacity 40ms ease-out;box-shadow:0 0 #3b82f600}.beat-dot--flash{opacity:1;box-shadow:0 0 14px 4px #3b82f699}.beat-dot--accent{opacity:1;background:var(--green);box-shadow:0 0 18px 6px #22c55eb3}.beat-dot--idle{opacity:.15}.sync-label{color:var(--text-muted);font-variant-numeric:tabular-nums;margin-left:auto;font-size:13px}.sync-label--playing{color:var(--green)}.control-row{align-items:flex-start;gap:20px;margin-bottom:20px;display:flex}.control-row:last-child{margin-bottom:0}.control-label{width:56px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;padding-top:8px;font-size:13px;font-weight:600}.control-body{flex-direction:column;flex:1;gap:6px;display:flex}.control-value-row{align-items:center;gap:8px;display:flex}.step-btn{background:var(--surface-2);border:1px solid var(--border);width:32px;height:32px;color:var(--text);cursor:pointer;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;font-size:18px;line-height:1;transition:background .1s;display:flex}.step-btn:hover{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.step-btn:active{opacity:.7}.num-input{background:var(--surface-2);border:1px solid var(--border);width:72px;color:var(--text);font-size:18px;font-family:var(--mono);text-align:center;-moz-appearance:textfield;border-radius:6px;outline:none;padding:5px 8px;font-weight:600}.num-input::-webkit-inner-spin-button{-webkit-appearance:none}.num-input::-webkit-outer-spin-button{-webkit-appearance:none}.num-input:focus{border-color:var(--accent)}.num-input-wrapper{align-items:center;display:flex;position:relative}.num-input-wrapper .num-input{width:90px;padding-right:28px}.num-input-unit{font-size:11px;font-family:var(--mono);color:var(--text-muted,var(--text));opacity:.6;pointer-events:none;position:absolute;right:8px}.num-display{text-align:center;width:80px;font-size:18px;font-family:var(--mono);color:var(--text);font-weight:600}.slider{appearance:none;background:var(--surface-2);border:1px solid var(--border);cursor:pointer;border-radius:2px;outline:none;width:100%;height:4px}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);border:2px solid var(--bg);width:18px;height:18px;box-shadow:0 0 0 1px var(--accent);cursor:pointer;border-radius:50%;transition:box-shadow .1s}.slider::-webkit-slider-thumb:hover{box-shadow:0 0 0 4px #3b82f640}.slider::-moz-range-thumb{background:var(--accent);border:2px solid var(--bg);cursor:pointer;border-radius:50%;width:18px;height:18px}.slider-bounds{color:var(--text-muted);font-size:11px;font-family:var(--mono);justify-content:space-between;display:flex}.accent-row{flex-wrap:wrap;gap:12px}.accent-label{color:var(--text);font-size:14px}.beats-row{gap:6px;margin-left:8px}.step-btn--sm{width:24px;height:24px;font-size:14px}.num-display--sm{width:40px;font-size:14px}.toggle{cursor:pointer;flex-shrink:0;align-items:center;display:inline-flex;position:relative}.toggle input{opacity:0;width:0;height:0;position:absolute}.toggle-track{background:var(--surface-2);border:1px solid var(--border);border-radius:11px;align-items:center;width:40px;height:22px;padding:0 3px;transition:background .2s,border-color .2s;display:flex}.toggle input:checked+.toggle-track{background:var(--accent);border-color:var(--accent)}.toggle-thumb{background:var(--text-muted);border-radius:50%;flex-shrink:0;width:16px;height:16px;transition:transform .2s,background .2s}.toggle input:checked+.toggle-track .toggle-thumb{background:#fff;transform:translate(18px)}.site-footer{text-align:center;color:var(--text-muted);padding:24px 0 16px;font-size:13px}