:root{--bg-matte: #111319;--panel-bg: rgba(22, 25, 35, .82);--panel-border: rgba(255, 255, 255, .08);--panel-border-hover: rgba(255, 255, 255, .18);--panel-shadow: 0 12px 32px rgba(0, 0, 0, .45);--pastel-sage: #98d8aa;--pastel-coral: #f4978e;--pastel-lavender: #b8c0ff;--pastel-rose: #f8b4d9;--pastel-amber: #ffd166;--pastel-blue: #a0c4ff;--text-primary: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", monospace}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}html,body{width:100vw;height:100vh;overflow:hidden;background-color:var(--bg-matte);font-family:var(--font-sans);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{position:relative;width:100%;height:100%;overflow:hidden}#webcam{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none}#output-canvas{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.app-header{position:absolute;top:0;left:0;right:0;height:68px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;background:#111319bf;border-bottom:1px solid var(--panel-border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:20}.brand-group{display:flex;align-items:center;gap:12px}.brand-badge{width:36px;height:36px;border-radius:10px;background:#ffffff0d;border:1px solid var(--panel-border);display:flex;align-items:center;justify-content:center;color:var(--pastel-sage)}.icon-brand{width:20px;height:20px}.brand-info{display:flex;flex-direction:column}.brand-name{font-size:16px;font-weight:700;letter-spacing:-.3px;color:var(--text-primary)}.brand-tag{font-size:10px;color:var(--text-muted);font-weight:500;letter-spacing:.5px}.header-center{display:flex;align-items:center;gap:14px}.status-chip{display:flex;align-items:center;gap:10px;background:var(--panel-bg);border:1px solid var(--panel-border);padding:6px 14px;border-radius:30px;transition:border-color .2s ease,background-color .2s ease}.status-chip.active{border-color:#98d8aa66;background:#16201cd9}.beat-led{width:10px;height:10px;border-radius:50%;background:#3f4756;transition:transform .08s ease,background-color .1s ease}.beat-led.pulse{background:var(--pastel-sage);box-shadow:0 0 8px #98d8aa99;transform:scale(1.25)}.status-meta{display:flex;flex-direction:column}.status-title{font-size:11px;font-weight:600;color:var(--text-primary)}.status-subtitle{font-size:9px;color:var(--text-muted)}.chord-selector-matrix{display:flex;gap:6px}.matrix-chord-btn{padding:5px 12px;border-radius:8px;background:#ffffff0a;border:1px solid var(--panel-border);font-size:11px;font-weight:600;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .18s ease}.matrix-chord-btn:hover{background:#ffffff14;color:var(--text-primary);border-color:var(--panel-border-hover)}.matrix-chord-btn.active{background:#ffffff1f;color:#fff;border-color:#ffffff4d}.header-actions{display:flex;align-items:center;gap:12px}.action-pill{display:flex;align-items:center;gap:8px;background:var(--panel-bg);border:1px solid var(--panel-border);padding:7px 14px;border-radius:20px;color:var(--text-primary);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.action-pill:hover{border-color:var(--panel-border-hover);background:#1e2330e6}.btn-icon{width:14px;height:14px}.performance-pill{display:flex;flex-direction:column;align-items:flex-end;font-family:var(--font-mono)}.fps-val{font-size:11px;color:var(--pastel-sage);font-weight:600}.engine-tag{font-size:9px;color:var(--text-muted)}.sidebar-panel{position:absolute;top:84px;display:flex;flex-direction:column;gap:12px;z-index:15}.left-panel{left:20px}.right-panel{right:20px}.control-box{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:16px;padding:14px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--panel-shadow);display:flex;flex-direction:column;gap:10px;width:185px}.box-header{display:flex;align-items:center;gap:8px;color:var(--text-muted)}.box-icon{width:13px;height:13px}.box-title{font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}.pill-segmented-control{display:flex;background:#00000040;border:1px solid var(--panel-border);border-radius:10px;padding:3px;gap:2px}.segment-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 4px;border-radius:7px;border:none;background:transparent;color:var(--text-muted);font-size:10px;font-weight:600;cursor:pointer;transition:all .18s ease}.segment-icon{width:11px;height:11px}.segment-btn.active{background:#ffffff1f;color:var(--text-primary)}.primary-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;border-radius:10px;background:var(--pastel-sage);color:#11141a;border:none;font-size:12px;font-weight:700;cursor:pointer;transition:transform .15s ease,opacity .2s ease}.primary-btn:hover{opacity:.92;transform:translateY(-1px)}.primary-btn.active{background:var(--pastel-coral);color:#11141a}.secondary-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;border-radius:10px;background:#ffffff0a;border:1px solid var(--panel-border);color:var(--text-primary);font-size:11px;font-weight:600;cursor:pointer;transition:all .18s ease}.secondary-btn:hover{background:#ffffff14;border-color:var(--panel-border-hover)}.tempo-row{display:flex;align-items:center;justify-content:space-between;padding-top:4px}.tempo-title{font-size:11px;color:var(--text-secondary)}.stepper-group{display:flex;gap:4px}.stepper-btn{width:24px;height:24px;border-radius:6px;background:#ffffff0f;border:1px solid var(--panel-border);color:var(--text-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease}.stepper-btn:hover{background:#ffffff1f}.step-icon{width:12px;height:12px}.preset-menu{display:flex;flex-direction:column;gap:6px}.preset-card{padding:8px 10px;border-radius:10px;background:#ffffff08;border:1px solid var(--panel-border);color:var(--text-secondary);font-size:11px;font-weight:600;cursor:pointer;transition:all .18s ease;text-align:left}.preset-card:hover{background:#ffffff0f;color:var(--text-primary)}.preset-card.active{background:#b8c0ff1f;border-color:#b8c0ff59;color:var(--text-primary)}.preset-name{display:block;font-size:11px;font-weight:600}.preset-sub{display:block;font-size:9px;color:var(--text-muted);margin-top:2px}.app-footer{position:absolute;bottom:0;left:0;right:0;height:38px;display:flex;align-items:center;justify-content:center;background:#111319bf;border-top:1px solid var(--panel-border);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:20}.footer-shortcuts{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--text-muted)}.shortcut-item kbd{background:#ffffff14;border:1px solid var(--panel-border);border-radius:4px;padding:1px 5px;font-family:var(--font-mono);font-size:9px;color:var(--text-primary)}.sep{color:#ffffff26}.modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#0a0c10e0;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:center;z-index:100;transition:opacity .25s ease}.modal-backdrop.hidden{opacity:0;pointer-events:none}.modal-card{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:20px;padding:36px;max-width:480px;width:90%;text-align:center;box-shadow:var(--panel-shadow);display:flex;flex-direction:column;align-items:center;gap:16px}.modal-badge{width:48px;height:48px;border-radius:14px;background:#98d8aa1f;border:1px solid rgba(152,216,170,.25);display:flex;align-items:center;justify-content:center;color:var(--pastel-sage)}.modal-icon{width:24px;height:24px}.modal-title{font-size:22px;font-weight:800;letter-spacing:-.4px;color:var(--text-primary)}.modal-desc{font-size:13px;color:var(--text-secondary);line-height:1.5}.instructions-card{display:flex;flex-direction:column;gap:12px;width:100%;text-align:left;background:#00000040;border:1px solid var(--panel-border);border-radius:14px;padding:16px}.inst-row{display:flex;align-items:flex-start;gap:12px;font-size:12px;color:var(--text-primary);line-height:1.4}.inst-index{width:20px;height:20px;border-radius:50%;background:#ffffff1a;color:var(--pastel-sage);font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}.start-action-btn{width:100%;padding:13px 20px;border-radius:12px;background:var(--pastel-sage);border:none;color:#11141a;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s ease,opacity .2s ease}.start-action-btn:hover{opacity:.92;transform:translateY(-1px)}.security-caption{font-size:10px;color:var(--text-muted)}