*{box-sizing:border-box;margin:0;padding:0}body{background:#000;width:100vw;height:100vh;position:relative;overflow:hidden}#webcam{object-fit:fill;z-index:0;width:100vw;height:100vh;transition:filter .3s;position:absolute;top:0;left:0;transform:scaleX(-1)}#intro{z-index:50;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#e9e9ec;background:#08080ae6;justify-content:center;align-items:center;padding:20px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:flex;position:fixed;inset:0;overflow-y:auto}#intro.hidden{display:none}#intro-card{background:#17181c;border:1px solid #ffffff14;border-radius:16px;width:100%;max-width:440px;padding:32px 30px;box-shadow:0 20px 60px #00000080}#intro-card h1{letter-spacing:-.5px;color:#fff;margin-bottom:4px;font-size:28px;font-weight:600}.intro-tagline{color:#9a9aa2;margin-bottom:24px;font-size:14px}.intro-head{text-transform:uppercase;letter-spacing:1px;color:#7a7a82;margin-bottom:12px;font-size:12px}#intro-card ul{color:#cfcfd4;flex-direction:column;gap:10px;font-size:14px;line-height:1.5;list-style:none;display:flex}#intro-card li{padding-left:16px;position:relative}#intro-card li:before{content:"";background:#6a6a72;border-radius:50%;width:5px;height:5px;position:absolute;top:9px;left:2px}#intro-card b{color:#fff;font-weight:600}.intro-record{color:#d6d6da;background:#ff464614;border:1px solid #ff5a5a40;border-radius:10px;align-items:flex-start;gap:12px;margin:20px 0;padding:14px 16px;font-size:13.5px;line-height:1.5;display:flex}.intro-record b{color:#ff9a9a}.rec-dot{background:#ff4d4d;border-radius:50%;flex-shrink:0;width:12px;height:12px;margin-top:4px;animation:1.4s ease-in-out infinite rec-pulse;box-shadow:0 0 10px #ff3c3cb3}.intro-notes{color:#9a9aa2;flex-direction:column;gap:8px;margin-bottom:22px;font-size:12.5px;line-height:1.45;display:flex}.intro-notes b{color:#c4c4ca;font-weight:600}#start-btn{color:#111114;cursor:pointer;background:#fff;border:none;border-radius:10px;width:100%;padding:14px;font-family:inherit;font-size:15px;font-weight:600;transition:transform .1s,background .15s}#start-btn:hover{background:#e6e6ea}#start-btn:active{transform:scale(.99)}.intro-fine{text-align:center;color:#5a5a62;margin-top:14px;font-size:11px}.intro-mobile{color:#ffd27a;background:#ffb43c1a;border:1px solid #ffb43c40;border-radius:8px;margin-bottom:18px;padding:10px 12px;font-size:12.5px;line-height:1.4}.intro-mobile.hidden{display:none}#msg{z-index:60;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#e9e9ec;background:#08080aeb;justify-content:center;align-items:center;padding:20px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:flex;position:fixed;inset:0}#msg.hidden{display:none}#msg-card{text-align:center;background:#17181c;border:1px solid #ffffff14;border-radius:16px;width:100%;max-width:420px;padding:30px 28px}#msg-spinner{border:3px solid #ffffff26;border-top-color:#fff;border-radius:50%;width:34px;height:34px;margin:0 auto 18px;animation:.8s linear infinite spin}#msg-spinner.hidden{display:none}@keyframes spin{to{transform:rotate(360deg)}}#msg-title{color:#fff;margin-bottom:10px;font-size:19px;font-weight:600}#msg-body{color:#b8b8be;font-size:13.5px;line-height:1.55}#msg-btn{color:#111114;cursor:pointer;background:#fff;border:none;border-radius:10px;margin-top:20px;padding:12px 22px;font-family:inherit;font-size:14px;font-weight:600}#msg-btn.hidden{display:none}#help-toggle{z-index:10;color:#fff;cursor:pointer;background:#0009;border:1px solid #ffffff26;border-radius:8px;padding:8px 12px;font-family:monospace;font-size:13px;position:absolute;bottom:16px;right:132px}#webcam.dimmed{filter:brightness(.4)contrast(.9)}#particles{z-index:1;pointer-events:none;width:100vw;height:100vh;position:absolute;top:0;left:0}#hud{z-index:2;color:#fff;pointer-events:none;justify-content:space-between;width:100%;padding:16px;font-family:monospace;font-size:14px;display:flex;position:absolute;top:0;left:0}#status,#fps{background:#00000080;border-radius:4px;padding:6px 12px}#metro-bar{z-index:10;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;background:#000000b3;border:1px solid #ffffff1a;border-radius:10px;align-items:center;gap:14px;padding:10px 18px;font-family:monospace;font-size:13px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}#metro-toggle{min-width:60px;padding:6px 12px;font-size:12px}#metro-toggle.active{background:#00d9ff4d;border-color:#00d9ff}#click-toggle{font-size:12px}#click-toggle.active{background:#00d9ff40;border-color:#00d9ff}#click-toggle:not(.active){opacity:.4}#countin{z-index:5;pointer-events:none;color:#00d9ffd9;text-shadow:0 0 40px #00d9ff99;justify-content:center;align-items:center;width:100vw;height:100vh;font-family:monospace;font-size:22vh;font-weight:700;display:none;position:absolute;top:0;left:0}#countin.show{display:flex}.metro-bpm{align-items:center;gap:6px;display:flex}#bpm-display{text-align:center;color:#00d9ff;min-width:64px;font-weight:700}.metro-btn{color:#fff;cursor:pointer;background:#ffffff14;border:1px solid #ffffff26;border-radius:4px;justify-content:center;align-items:center;width:24px;height:24px;font-family:monospace;font-size:14px;display:flex}.metro-btn:hover{background:#ffffff26}.metro-beats{align-items:center;gap:6px;display:flex}.beat-dot{background:#ffffff1f;border:1px solid #fff3;border-radius:50%;width:12px;height:12px;transition:background 50ms,transform 50ms}.beat-dot.active{background:#00d9ff;border-color:#00d9ff;transform:scale(1.3)}.beat-dot.downbeat{background:#f60;border-color:#f60;transform:scale(1.4)}.metro-quantize{align-items:center;gap:6px;display:flex}.metro-quantize label{color:#ffffff80;white-space:nowrap;font-size:11px}.metro-quantize label span{color:#00d9ff}.metro-quantize input[type=range]{appearance:none;background:#ffffff26;border-radius:2px;outline:none;width:60px;height:3px}.metro-quantize input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#00d9ff;border-radius:50%;width:12px;height:12px}#looper-bar{z-index:10;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;background:#000000b3;border:1px solid #ffffff1a;border-radius:10px;align-items:center;gap:10px;padding:8px 14px;font-family:monospace;font-size:13px;display:flex;position:absolute;bottom:72px;left:50%;transform:translate(-50%)}#looper-bar .setting-btn{flex:none;min-width:56px}#loop-record{color:#ff8a8a;background:#ff2d2d38;border-color:#ff5a5a99;min-width:70px;font-weight:700}#loop-record:hover{background:#ff2d2d57}#loop-record.active{color:#fff;background:#ff2d2d73;border-color:#ff2d2d;animation:1s ease-in-out infinite rec-pulse}#loop-play.active{color:#00d9ff;background:#00d9ff4d;border-color:#00d9ff}#loop-clear.has-data{color:#ff8a8a;background:#ff2d2d38;border-color:#ff5a5a99}#loop-clear.has-data:hover{color:#fff;background:#ff2d2d61}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.55}}.loop-bars{align-items:center;gap:6px;display:flex}.loop-bars label{color:#ffffff80;font-size:11px}#loop-bars-display{text-align:center;color:#00d9ff;min-width:14px;font-weight:700}.loop-progress{background:#ffffff1f;border-radius:2px;width:90px;height:4px;overflow:hidden}#loop-progress-fill{background:#00d9ff;border-radius:2px;width:0%;height:100%}#settings-toggle{z-index:10;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0009;border:1px solid #ffffff26;border-radius:6px;padding:8px 14px;font-family:monospace;font-size:13px;transition:background .15s;position:absolute;bottom:16px;right:16px}#settings-toggle:hover{background:#ffffff26}#settings{z-index:10;overscroll-behavior:contain;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;background:#000000bf;border:1px solid #ffffff1a;border-radius:10px;width:360px;max-width:calc(100vw - 32px);max-height:calc(100vh - 80px);padding:16px;font-family:monospace;font-size:12px;transition:opacity .2s,transform .2s;position:absolute;bottom:56px;right:16px;overflow-y:auto}#settings.collapsed{opacity:0;pointer-events:none;transform:translateY(10px)}.settings-header{letter-spacing:.5px;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:14px;font-weight:700;display:flex}.settings-header button{color:#ffffff80;cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:18px}.settings-header button:hover{color:#fff}.setting{margin-bottom:14px}.setting label{color:#ffffffb3;justify-content:space-between;align-items:center;margin-bottom:4px;font-size:12px;display:flex}.setting label span{color:#00d9ffe6;font-weight:700}.setting input[type=range]{appearance:none;background:#ffffff26;border-radius:2px;outline:none;width:100%;height:4px}.setting input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#00d9ff;border-radius:50%;width:14px;height:14px}.setting-hint{color:#ffffff4d;margin-top:2px;font-size:10px}.setting input[type=checkbox]{accent-color:#00d9ff;margin-right:6px}.setting select{color:#fff;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff26;border-radius:5px;width:100%;padding:5px 8px;font-family:monospace;font-size:12px}.settings-divider{border-top:1px solid #ffffff1a;margin:10px 0}.settings-section-label{color:#fff6;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-size:11px}.layout-buttons{gap:8px;display:flex}.setting-btn{color:#00d9ff;cursor:pointer;background:#00d9ff26;border:1px solid #00d9ff4d;border-radius:5px;flex:1;padding:6px 10px;font-family:monospace;font-size:12px;transition:background .15s}.setting-btn:hover{background:#00d9ff40}.setting-btn.secondary{color:#ffffff80;background:#ffffff0d;border-color:#ffffff26}.setting-btn.secondary:hover{color:#ffffffb3;background:#ffffff1a}.setting-btn.active{background:#00d9ff4d;border-color:#00d9ff}.zone-sens-row label{text-transform:capitalize;align-items:center;gap:6px;display:flex}.zone-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px;display:inline-block}.zone-sens-val{margin-left:auto}.zone-remove{color:#ff7878e6;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff26;border-radius:4px;flex-shrink:0;width:18px;height:18px;margin-left:auto;font-family:monospace;font-size:13px;line-height:1}.zone-remove:hover{background:#ff3c3c40;border-color:#ff505099}.zone-ctl{align-items:center;gap:8px;margin-top:4px;display:flex}.zone-ctl-label{color:#ffffff73;flex-shrink:0;width:56px;font-size:10px}.zone-ctl-label span{color:#00d9ff}.zone-ctl input[type=range]{flex:1}#zone-sensitivity-controls .setting{margin-bottom:10px}