:root{--bg-0: #0a0c16;--bg-1: #0f1327;--bg-2: #151a33;--bg-gradient: radial-gradient(1200px 800px at 12% -10%, rgba(105, 130, 255, .18), transparent 60%), radial-gradient(900px 700px at 110% 10%, rgba(180, 120, 255, .16), transparent 60%), radial-gradient(800px 600px at 50% 110%, rgba(90, 200, 220, .1), transparent 60%), linear-gradient(180deg, #080a14 0%, #0b0f22 100%);--panel-bg: rgba(20, 24, 48, .56);--panel-bg-strong: rgba(24, 28, 56, .78);--panel-border: rgba(170, 185, 255, .14);--panel-border-strong: rgba(190, 205, 255, .24);--panel-shadow: 0 12px 40px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255,255,255,.04);--accent: #8ab4ff;--accent-2: #c8a6ff;--accent-3: #7fe0e8;--accent-gradient: linear-gradient(135deg, #8ab4ff 0%, #c8a6ff 100%);--success: #6ee7b7;--warning: #fcd34d;--danger: #fb7185;--ok: #86efac;--text-0: #eef1ff;--text-1: #c7cdef;--text-2: #8b92bf;--text-3: #4b5282;--text-muted: #5f6692;--r-sm: 8px;--r-md: 14px;--r-lg: 20px;--r-xl: 28px;--r-pill: 999px;--gap-sm: 6px;--gap-md: 10px;--gap-lg: 18px;--gap-xl: 28px;--pad-sm: 8px 10px;--pad-md: 10px 14px;--pad-lg: 14px 18px;--t-fast: .12s cubic-bezier(.2,.8,.2,1);--t-med: .24s cubic-bezier(.2,.8,.2,1);--t-slow: .48s cubic-bezier(.2,.8,.2,1);--focus-ring: 0 0 0 2px rgba(138, 180, 255, .35), 0 0 0 4px rgba(200, 166, 255, .18);--header-h: 58px;--footer-h: 36px;color-scheme:dark}*,*:before,*:after{box-sizing:border-box}[hidden]{display:none!important}.hidden:not(.overlay){display:none!important}html,body{margin:0;padding:0;min-height:100%;background:var(--bg-0);color:var(--text-0);font-family:Inter,PingFang SC,Microsoft YaHei,system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}body{position:relative;background-image:var(--bg-gradient);background-attachment:fixed;min-height:100vh}.sr-only,.sr-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fx-layer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1;overflow:hidden;display:none}.fx-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.fx-particles,.fx-trail{position:absolute;top:0;right:0;bottom:0;left:0}.fx-vignette{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(120% 80% at 50% 50%,transparent 50%,rgba(0,0,0,.55) 100%)}.fx-ambient-glow{position:absolute;top:-20%;left:-10%;right:-10%;height:50%;background:radial-gradient(closest-side,rgba(138,180,255,.22),transparent 70%),radial-gradient(closest-side at 80% 40%,rgba(200,166,255,.18),transparent 70%);filter:blur(10px);animation:ambientGlow 18s ease-in-out infinite alternate;transition:filter .2s ease,box-shadow .2s ease,opacity .2s ease}.fx-ambient-glow.active{filter:blur(15px) brightness(1.4) saturate(1.3);box-shadow:0 0 40px #8ab4ff66,0 0 80px #c8a6ff4d,inset 0 0 60px #7fe0e833;opacity:.9}.fx-canvas{pointer-events:none}@keyframes ambientGlow{0%{transform:translate3d(-1%,0,0) scale(1);opacity:.85}to{transform:translate3d(1.2%,1.2%,0) scale(1.04);opacity:1}}.app-shell{position:relative;z-index:2;display:grid;grid-template-rows:var(--header-h) 1fr var(--footer-h);max-height:100vh;padding:clamp(6px,.8vw,12px);gap:clamp(6px,.8vw,10px);overflow:hidden}.app-header{display:grid;grid-template-columns:1.3fr 1fr auto;align-items:center;gap:var(--gap-sm);padding:6px 10px;background:var(--panel-bg);backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);border:1px solid var(--panel-border);border-radius:var(--r-lg);box-shadow:var(--panel-shadow)}.header-left{display:flex;align-items:center;gap:var(--gap-lg);min-width:0}.brand{display:flex;align-items:center;gap:10px}.brand-mark{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center}.brand-text{display:flex;flex-direction:column;line-height:1.05}.brand-title{font-weight:700;letter-spacing:.4px;font-size:14px;background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}.brand-sub{color:var(--text-2);font-size:11px;margin-top:2px;letter-spacing:.5px}.mode-selector{display:flex;gap:6px;padding:4px;background:#0a0e1e8c;border:1px solid var(--panel-border);border-radius:var(--r-pill);overflow-x:auto;scrollbar-width:none;max-width:min(560px,52vw)}.mode-selector::-webkit-scrollbar{display:none}.mode-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid transparent;background:transparent;color:var(--text-1);padding:6px 11px;font-size:11.5px;font-weight:600;letter-spacing:.3px;border-radius:var(--r-pill);cursor:pointer;transition:background var(--t-med),color var(--t-med),border-color var(--t-med),transform var(--t-fast),box-shadow var(--t-med);white-space:nowrap}.mode-btn:hover:not(:disabled){color:var(--text-0);background:#8ab4ff14}.mode-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}.mode-btn[aria-selected=true],.mode-btn.active{color:#0b0f22;background:var(--accent-gradient);border-color:#ffffff40;box-shadow:0 6px 20px #8ab4ff38,inset 0 1px #ffffff40}.mode-btn:disabled{color:var(--text-muted);background:#ffffff05;cursor:not-allowed;border-color:var(--panel-border);opacity:.85}.header-center{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;background:#0a0e1e8c;border:1px solid var(--panel-border);border-radius:var(--r-pill);color:var(--text-1);font-size:11.5px}.pill-label{color:var(--text-2);font-size:11px;letter-spacing:.3px}.pill-value{color:var(--text-0);font-weight:600}.pill-dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted);box-shadow:0 0 0 3px #5f66922e;transition:background var(--t-med),box-shadow var(--t-med)}#status-run-pill[data-state=running] .pill-dot{background:var(--ok);box-shadow:0 0 0 3px #86efac40}#status-run-pill[data-state=paused] .pill-dot{background:var(--warning);box-shadow:0 0 0 3px #fcd34d40}#status-run-pill[data-state=error] .pill-dot{background:var(--danger);box-shadow:0 0 0 3px #fb718547}#status-run-pill[data-state=warn] .pill-dot{background:var(--warning);box-shadow:0 0 0 3px #fcd34d40}#status-ctx-pill[data-state=ready] .pill-value{color:var(--ok)}#status-ctx-pill[data-state=generating] .pill-value{color:var(--accent-2)}.header-right{display:flex;align-items:center;gap:10px}.btn{--btn-h: 34px;--btn-bg: rgba(20, 24, 48, .6);--btn-bg-hover: rgba(34, 40, 72, .75);--btn-bg-active: rgba(20, 24, 48, .9);--btn-fg: var(--text-0);--btn-border: var(--panel-border-strong);-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--btn-h);padding:0 12px;background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-border);border-radius:var(--r-pill);font-weight:600;font-size:12px;letter-spacing:.2px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--t-med),color var(--t-med),border-color var(--t-med),transform var(--t-fast),box-shadow var(--t-med),opacity var(--t-med)}.btn:hover:not(:disabled){background:var(--btn-bg-hover)}.btn:active:not(:disabled){background:var(--btn-bg-active);transform:translateY(1px)}.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}.btn--sm{--btn-h: 28px;padding:0 8px;font-size:11.5px}.btn--ghost{--btn-bg: transparent;--btn-bg-hover: rgba(138,180,255,.08);--btn-border: var(--panel-border);--btn-fg: var(--text-1)}.btn--ghost:hover:not(:disabled){color:var(--text-0)}.btn--primary{--btn-bg: var(--accent-gradient);--btn-bg-hover: var(--accent-gradient);--btn-border: transparent;--btn-fg: #0b0f22;box-shadow:0 6px 22px #8ab4ff40,inset 0 1px #ffffff47}.btn--primary:hover:not(:disabled){box-shadow:0 8px 28px #c8a6ff47,inset 0 1px #ffffff4d}.btn--primary[aria-pressed=true]{background:linear-gradient(135deg,#6b8ee0,#a885e0);box-shadow:0 4px 14px #c8a6ff59,inset 0 1px #fff3}.btn--primary[aria-pressed=true] .btn-text:before{content:"■ ";color:#0b0f22;opacity:.85}.btn--danger{--btn-bg: linear-gradient(135deg, #fb7185, #f97316);--btn-bg-hover: linear-gradient(135deg, #fb7185, #f97316);--btn-border: transparent;--btn-fg: #230a11;box-shadow:0 6px 22px #fb718547,inset 0 1px #fff3}.btn--success{--btn-bg: linear-gradient(135deg, #6ee7b7, #60a5fa);--btn-bg-hover: linear-gradient(135deg, #6ee7b7, #60a5fa);--btn-border: transparent;--btn-fg: #052a22;box-shadow:0 6px 22px #6ee7b738,inset 0 1px #fff3}.btn:disabled{background:#14183066;color:var(--text-muted);border-color:#828cb42e;cursor:not-allowed;opacity:.9;box-shadow:none!important;filter:grayscale(.2)}a.btn{text-decoration:none}a.btn[aria-disabled=true]{pointer-events:none;background:#14183066;color:var(--text-muted);border-color:#828cb42e}.app-main{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:clamp(6px,.8vw,10px);min-height:0;overflow:hidden}.stage-column{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}.stage-panel{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.panel{background:var(--panel-bg);backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);border:1px solid var(--panel-border);border-radius:var(--r-lg);box-shadow:var(--panel-shadow);padding:8px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:4px}.panel-title{margin:0;font-size:14px;letter-spacing:.4px;color:var(--text-0);font-weight:600}.panel-tools{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.select-label{font-size:11px;color:var(--text-2)}select,input[type=file],input[type=range],input[type=text],input[type=number],textarea{font-family:inherit;color:var(--text-0)}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0a0e1ea6;border:1px solid var(--panel-border-strong);border-radius:var(--r-pill);padding:5px 26px 5px 10px;font-size:11.5px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12'><path d='M2 4 L6 9 L10 4' stroke='%238b92bf' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 10px center;color:var(--text-0);transition:border-color var(--t-med),box-shadow var(--t-med);min-height:32px}select:focus-visible{outline:none;box-shadow:var(--focus-ring);border-color:var(--accent)}.stage-wrap{position:relative;flex:1;min-height:280px;max-height:calc(100vh - 280px);border-radius:var(--r-md);background:radial-gradient(600px 400px at 30% 20%,rgba(138,180,255,.1),transparent 60%),radial-gradient(500px 340px at 80% 80%,rgba(200,166,255,.1),transparent 60%),#06080f;border:1px solid var(--panel-border);overflow:hidden}.stage-video,.stage-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)}.stage-canvas{pointer-events:none;z-index:2}.stage-hint{position:absolute;left:14px;right:14px;bottom:12px;display:flex;justify-content:space-between;gap:10px;pointer-events:none;opacity:.92}.stage-hint-grid{display:contents}.stage-hint-cell{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;background:#080a148c;border:1px solid var(--panel-border);border-radius:var(--r-pill);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.stage-hint-desc{color:var(--text-1);font-size:11.5px}.tag,.stage-hint-tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--r-pill);font-size:11px;font-weight:600;letter-spacing:.3px}.tag--left{background:#8ab4ff29;color:#9fc0ff;border:1px solid rgba(138,180,255,.28)}.tag--right{background:#c8a6ff29;color:#d4b8ff;border:1px solid rgba(200,166,255,.3)}.stage-foot{display:flex}.chord-strip{flex:1;height:24px;border-radius:var(--r-pill);background:repeating-linear-gradient(90deg,rgba(138,180,255,.06) 0 1px,transparent 1px 40px),#0a0e1e8c;border:1px solid var(--panel-border);position:relative;overflow:hidden}.instructions-strip{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0}.instr-card{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px;padding:6px 8px;background:#0a0e1e80;border:1px solid var(--panel-border);border-radius:var(--r-md);font-size:10.5px;line-height:1.4}.instr-card--left{border-left:3px solid rgba(138,180,255,.4)}.instr-card--right{border-left:3px solid rgba(200,166,255,.4)}.instr-title{font-weight:700;color:var(--text-0);font-size:11.5px;width:100%;margin-bottom:2px}.instr-row{color:var(--text-1);white-space:nowrap}.tech-note{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding:4px 0 0;font-size:10.5px;color:var(--text-muted);letter-spacing:.3px}.autoplay-toggle-inline{display:inline-flex;align-items:center;cursor:pointer;margin-right:4px}.autoplay-toggle-inline input{display:none}.autoplay-track{width:36px;height:20px;border-radius:10px;background:#0a0e1e99;border:1px solid var(--panel-border-strong);position:relative;transition:background var(--t-med),border-color var(--t-med)}.autoplay-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--text-2);transition:transform var(--t-med),background var(--t-med)}.autoplay-toggle-inline input:checked+.autoplay-track{background:#8ab4ff40;border-color:var(--accent)}.autoplay-toggle-inline input:checked+.autoplay-track .autoplay-thumb{transform:translate(16px);background:var(--accent)}.autoplay-toggle-inline input:focus-visible+.autoplay-track{box-shadow:var(--focus-ring)}.hide-video-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:3px 8px 3px 3px;border-radius:var(--r-pill);background:#0a0e1e8c;border:1px solid var(--panel-border);transition:background var(--t-fast),border-color var(--t-fast)}.hide-video-toggle:hover{background:#0a0e1ebf;border-color:var(--panel-border-strong)}.hide-video-toggle input{display:none}.hide-video-track{position:relative;display:inline-block;width:30px;height:16px;border-radius:8px;background:#5f669240;border:1px solid rgba(170,185,255,.12);transition:background var(--t-fast),border-color var(--t-fast);flex-shrink:0}.hide-video-thumb{position:absolute;top:1px;left:1px;width:12px;height:12px;border-radius:50%;background:var(--text-3);transition:transform var(--t-fast),background var(--t-fast);box-shadow:0 1px 2px #00000059}.hide-video-label{font-size:11px;font-weight:500;color:var(--text-1);letter-spacing:.2px;white-space:nowrap}.hide-video-toggle input:checked+.hide-video-track{background:#7fe0e840;border-color:#7fe0e873}.hide-video-toggle input:checked+.hide-video-track .hide-video-thumb{transform:translate(14px);background:var(--accent-3)}.hide-video-toggle input:checked~.hide-video-label{color:var(--accent-3)}.hide-video-toggle input:focus-visible+.hide-video-track{box-shadow:var(--focus-ring)}.stage-video.video-hidden{opacity:0;visibility:hidden}.stage-wrap.video-only-skeleton .stage-canvas{background:radial-gradient(800px 500px at 30% 20%,rgba(138,180,255,.08),transparent 60%),radial-gradient(600px 420px at 70% 80%,rgba(200,166,255,.08),transparent 60%),linear-gradient(180deg,#080b18,#0a0e20)}.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--r-pill);font-size:10.5px;font-weight:600;background:#0a0e1e8c;border:1px solid var(--panel-border);color:var(--text-1)}.badge--status{letter-spacing:.2px}.badge[data-status=online],#camera-status-badge[data-status=online]{color:var(--ok);border-color:#86efac59;background:#6ee7b714}.badge[data-status=offline]{color:var(--text-muted)}.badge[data-status=analyzing],#export-status[data-status=recording],#export-status[data-status=analyzing]{color:var(--warning);border-color:#fcd34d66;background:#fcd34d14}.badge[data-status=ready],#export-status[data-status=done]{color:var(--ok)}.badge[data-status=error]{color:var(--danger);border-color:#fb718573;background:#fb718514}#export-status[data-status=recording]:before{content:"● ";color:var(--danger);animation:recPulse 1.4s ease-in-out infinite}@keyframes recPulse{0%,to{opacity:1}50%{opacity:.3}}.controls-column{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0;overflow-y:auto;padding-right:2px}.controls-column::-webkit-scrollbar{width:8px}.controls-column::-webkit-scrollbar-thumb{background:#8ab4ff26;border-radius:4px}.controls-column::-webkit-scrollbar-track{background:transparent}.controls-panel{display:flex;flex-direction:column;gap:10px;min-width:0}.controls-panel .mode-panel{background:var(--panel-bg-strong);border:1px solid var(--panel-border);border-radius:var(--r-md);padding:16px;display:flex;flex-direction:column;gap:12px}.controls-panel .mode-panel h3{margin:0;font-size:13px;color:var(--text-0);letter-spacing:.4px;display:flex;align-items:center;gap:8px}.controls-panel .mode-panel h3:before{content:"";width:6px;height:16px;border-radius:3px;background:var(--accent-gradient)}.controls-panel .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.controls-panel .stack{display:flex;flex-direction:column;gap:10px}input[type=range]{--track: rgba(130,140,180,.35);--fill: var(--accent-gradient);-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:linear-gradient(90deg,#8ab4ff,#c8a6ff);background:linear-gradient(90deg,#8ab4ff59,#c8a6ff59);border-radius:999px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #8ab4ff;box-shadow:0 2px 8px #8ab4ff73;cursor:pointer;transition:transform var(--t-fast),box-shadow var(--t-med)}input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.08)}input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px #c8a6ff40,0 2px 8px #8ab4ff73}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #8ab4ff;cursor:pointer}.field{display:flex;flex-direction:column;gap:6px;min-width:0}.field>label{color:var(--text-2);font-size:11.5px;letter-spacing:.3px}.field-row{display:flex;align-items:center;gap:10px}.field-row>:last-child{color:var(--text-1);font-size:12px}.music-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.state-cell{background:#0a0e1e8c;border:1px solid var(--panel-border);border-radius:var(--r-md);padding:4px 6px;display:flex;flex-direction:column;gap:2px;min-width:0}.state-cell--wide{grid-column:1 / -1}.state-label{color:var(--text-2);font-size:11px;letter-spacing:.3px}.state-value{color:var(--text-0);font-weight:600;font-size:14px}.bar{width:100%;height:8px;border-radius:999px;background:#828cb438;overflow:hidden;position:relative}.bar-fill{height:100%;width:0%;background:var(--accent-gradient);border-radius:999px;transition:width var(--t-med)}.bar-fill--left{background:linear-gradient(90deg,#7ec4ff,#8ab4ff)}.bar-fill--right{background:linear-gradient(90deg,#c8a6ff,#e0b4ff)}.beat-dots{display:flex;gap:8px;align-items:center}.beat-dots>span{width:10px;height:10px;border-radius:50%;background:#828cb459;transition:background var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast)}.beat-dots>span.on{background:var(--accent);transform:scale(1.15);box-shadow:0 0 10px #8ab4ffb3}.beat-dots>span.on.accent{background:var(--accent-2);box-shadow:0 0 14px #c8a6ffcc;transform:scale(1.3)}.hands-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.hand-card{background:#0a0e1e8c;border:1px solid var(--panel-border);border-radius:var(--r-md);padding:8px;display:flex;flex-direction:column;gap:6px}.hand-card--left{border-top:3px solid rgba(138,180,255,.6)}.hand-card--right{border-top:3px solid rgba(200,166,255,.6)}.hand-card-head{display:flex;align-items:center;justify-content:space-between}.hand-presence{font-size:11.5px;color:var(--text-muted);padding:3px 8px;border-radius:var(--r-pill);background:#ffffff08;border:1px solid var(--panel-border)}.hand-presence[data-visible=true]{color:var(--ok);border-color:#86efac59;background:#6ee7b714}.hand-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.hand-list li{display:flex;flex-direction:column;gap:6px}.hand-row{display:flex;justify-content:space-between;color:var(--text-1);font-size:12.5px}.hand-row :last-child{color:var(--text-0);font-weight:600}.export-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:8px;align-items:center}.export-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.export-info .state-cell{padding:4px 6px}.export-actions{display:grid;grid-template-columns:1fr 1fr;gap:4px}.export-actions>*:nth-child(3),.export-actions>*:nth-child(4){grid-column:span 1}.app-footer{display:flex;align-items:center;justify-content:space-between;padding:0 8px;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--r-lg);color:var(--text-2);font-size:11px;backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%)}.footer-left,.footer-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.footer-item{display:inline-flex;align-items:center;gap:4px}.footer-item:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--text-muted);transition:background var(--t-med),box-shadow var(--t-med)}.footer-item[data-state=on]:before{background:var(--ok);box-shadow:0 0 0 3px #86efac40}.footer-item[data-state=loading]:before{background:var(--warning);box-shadow:0 0 0 3px #fcd34d40}.footer-item[data-state=off]:before{background:var(--text-muted)}.footer-item[data-state=error]:before{background:var(--danger);box-shadow:0 0 0 3px #fb718547}.footer-label{color:var(--text-muted)}.footer-value{color:var(--text-1);font-weight:500}.footer-item--alert[data-level=warn] .footer-value{color:var(--warning)}.footer-item--alert[data-level=error] .footer-value{color:var(--danger)}.footer-item--alert[data-level=ok] .footer-value{color:var(--ok)}#controls-panel>#remix-panel,#controls-panel>#style-panel,#controls-panel>#looper-panel,#controls-panel>#humming-panel,#controls-panel>#multi-panel{background:var(--panel-bg-strong);border:1px solid var(--panel-border);border-radius:var(--r-md);padding:16px;display:flex;flex-direction:column;gap:12px}#controls-panel>#remix-panel h3,#controls-panel>#style-panel h3,#controls-panel>#looper-panel h3,#controls-panel>#humming-panel h3,#controls-panel>#multi-panel h3{margin:0;font-size:13px;color:var(--text-0);letter-spacing:.4px;display:flex;align-items:center;gap:8px}#controls-panel>#remix-panel h3:before,#controls-panel>#style-panel h3:before,#controls-panel>#looper-panel h3:before,#controls-panel>#humming-panel h3:before,#controls-panel>#multi-panel h3:before{content:"";width:6px;height:16px;border-radius:3px;background:var(--accent-gradient)}#style-selector{display:flex;flex-direction:column;gap:12px;width:100%}#style-selector .style-label{color:var(--text-1);font-size:12.5px;letter-spacing:.3px;display:inline-flex;align-items:center;gap:8px}#style-selector .style-label:before{content:"🎵";font-size:14px;filter:saturate(.9)}#style-selector .style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}#style-selector .style-card{padding:12px 14px;border-radius:var(--r-md);background:#0a0e1e8c;border:1px solid var(--panel-border);color:var(--text-1);cursor:pointer;transition:transform var(--t-fast),border-color var(--t-med),background var(--t-med),box-shadow var(--t-med);display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}#style-selector .style-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#8ab4ff14,#c8a6ff0f);opacity:0;transition:opacity var(--t-med);pointer-events:none}#style-selector .style-card:hover:not(.selected){transform:translateY(-1px);border-color:#8ab4ff4d;background:#8ab4ff0d}#style-selector .style-card:hover:not(.selected):before{opacity:1}#style-selector .style-card.selected{border-color:transparent;background:linear-gradient(135deg,#8ab4ff2e,#c8a6ff2e),#0a0e1e8c;box-shadow:0 6px 22px #8ab4ff2e,inset 0 1px #ffffff0d}#style-selector .style-card.selected:after{content:"已选择";position:absolute;top:8px;right:10px;font-size:10px;padding:2px 8px;border-radius:var(--r-pill);background:var(--accent-gradient);color:#0b0f22;font-weight:700;letter-spacing:.3px}#style-selector .style-name{color:var(--text-0);font-size:14px;font-weight:700;letter-spacing:.3px}#style-selector .style-mood{color:var(--accent-2);font-size:11.5px;font-weight:600;letter-spacing:.3px}#style-selector .style-bpm{color:var(--text-2);font-size:11.5px;font-variant-numeric:tabular-nums}#style-selector .style-desc{color:var(--text-1);font-size:12px;line-height:1.55;margin-top:2px}#style-selector .style-instruments{color:var(--text-2);font-size:11px;padding-top:4px;border-top:1px dashed var(--panel-border);margin-top:2px;line-height:1.5}#style-selector .style-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;background:#0a0e1e80;border:1px solid var(--panel-border);border-radius:var(--r-pill);color:var(--text-1);font-size:12px}#style-selector .status-label{color:var(--text-2)}#style-selector .status-value{color:var(--text-0);font-weight:700}#style-selector .status-section{color:var(--accent);font-weight:700}#style-selector .status-divider{color:var(--text-muted)}@media (max-width: 767px){#style-selector .style-grid{grid-template-columns:1fr}}#chord-conductor-panel{display:flex;flex-direction:column;gap:12px;width:100%}#chord-conductor-panel .cc-label{color:var(--text-1);font-size:12.5px;letter-spacing:.3px;display:inline-flex;align-items:center;gap:8px}#chord-conductor-panel .cc-degrees{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}#chord-conductor-panel .cc-degree-card{padding:10px 6px;border-radius:var(--r-md);background:#0a0e1e8c;border:1px solid var(--panel-border);color:var(--text-1);cursor:default;transition:transform var(--t-fast),border-color var(--t-med),background var(--t-med),box-shadow var(--t-med);display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;overflow:hidden;text-align:center}#chord-conductor-panel .cc-degree-card:hover:not(.selected){transform:translateY(-1px);border-color:#8ab4ff4d;background:#8ab4ff0d}#chord-conductor-panel .cc-degree-card.selected{border-color:transparent;background:linear-gradient(135deg,#8ab4ff2e,#c8a6ff2e),#0a0e1e8c;box-shadow:0 6px 22px #8ab4ff2e,inset 0 1px #ffffff0d}#chord-conductor-panel .cc-degree-card.selected:after{content:"●";position:absolute;top:4px;right:6px;font-size:8px;color:var(--accent)}#chord-conductor-panel .cc-degree-label{color:var(--text-0);font-size:14px;font-weight:700;letter-spacing:.3px}#chord-conductor-panel .cc-degree-name{color:var(--text-2);font-size:10.5px}#chord-conductor-panel .cc-degree-mood{color:var(--accent-2);font-size:10px;font-weight:600;letter-spacing:.2px}#chord-conductor-panel .cc-status{display:flex;flex-direction:column;gap:6px;padding:10px 14px;background:#0a0e1e80;border:1px solid var(--panel-border);border-radius:var(--r-pill);color:var(--text-1);font-size:12px}#chord-conductor-panel .cc-status-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}#chord-conductor-panel .status-label{color:var(--text-2)}#chord-conductor-panel .cc-progression{color:var(--text-0);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.5px}#chord-conductor-panel .cc-section{color:var(--accent);font-weight:700}#chord-conductor-panel .cc-density{color:var(--accent-2);font-weight:700}#chord-conductor-panel .status-divider{color:var(--text-muted)}#chord-conductor-panel .cc-hint{color:var(--text-2);font-size:11.5px;line-height:1.5;padding:6px 10px;border-top:1px dashed var(--panel-border)}@media (max-width: 767px){#chord-conductor-panel .cc-degrees{grid-template-columns:repeat(3,1fr)}}.cc-onboarding-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background:#080a16c7;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px}.cc-onboarding-card{max-width:540px;width:100%;background:linear-gradient(135deg,#141830f5,#1e1a34f5);border:1px solid var(--panel-border);border-radius:var(--r-lg);box-shadow:0 20px 60px #00000080,inset 0 1px #ffffff0d;padding:24px;display:flex;flex-direction:column;gap:16px}.cc-onboarding-title{color:var(--text-0);font-size:17px;font-weight:700;letter-spacing:.5px;display:flex;align-items:center;gap:8px}.cc-onboarding-steps{display:flex;flex-direction:column;gap:12px}.cc-step{display:flex;align-items:flex-start;gap:12px;color:var(--text-1);font-size:13px;line-height:1.6}.cc-step-icon{font-size:20px;flex-shrink:0;line-height:1.4}.cc-step strong{color:var(--text-0);font-weight:700}.cc-onboarding-note{color:var(--text-2);font-size:12px;line-height:1.55;padding:10px 12px;background:#8ab4ff0f;border-radius:var(--r-md);border-left:3px solid var(--accent)}.cc-onboarding-close{align-self:flex-end;padding:8px 18px;border:none;border-radius:var(--r-pill);background:var(--accent-gradient);color:#0b0f22;font-weight:700;font-size:13px;cursor:pointer;transition:transform var(--t-fast),box-shadow var(--t-med);letter-spacing:.3px}.cc-onboarding-close:hover{transform:translateY(-1px);box-shadow:0 6px 18px #8ab4ff59}.cc-onboarding-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#remix-panel .remix-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--panel-border)}#remix-panel .remix-label{font-size:14px;font-weight:700;color:var(--text-0);letter-spacing:.5px}#remix-panel .remix-source{font-size:11.5px;color:var(--text-2);padding:3px 10px;border-radius:var(--r-pill);background:#0a0e1e80;border:1px solid var(--panel-border)}#remix-panel .remix-guide-replay{font-size:11px;color:var(--text-2);background:none;border:1px solid var(--panel-border);border-radius:var(--r-pill);padding:2px 10px;cursor:pointer;opacity:.7;transition:opacity .2s}#remix-panel .remix-guide-replay:hover{opacity:1;color:var(--accent);border-color:var(--accent)}#remix-panel .remix-guide{margin:10px 0;border:1px solid var(--panel-border);border-radius:var(--r-md);background:#14183066;overflow:hidden}#remix-panel .remix-guide.hidden{display:none}#remix-panel .remix-guide-header{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#181c3880;border-bottom:1px solid var(--panel-border)}#remix-panel .remix-guide-icon{font-size:14px}#remix-panel .remix-guide-title{font-size:12px;font-weight:600;color:var(--text-0);flex:1;margin:0}#remix-panel .remix-guide-actions{display:flex;gap:6px}#remix-panel .remix-guide-collapse,#remix-panel .remix-guide-skip{font-size:11px;color:var(--text-2);background:none;border:1px solid var(--panel-border);border-radius:var(--r-sm);padding:2px 8px;cursor:pointer;transition:color .2s,border-color .2s}#remix-panel .remix-guide-collapse:hover{color:var(--text-1);border-color:var(--text-2)}#remix-panel .remix-guide-skip:hover{color:var(--warning);border-color:var(--warning)}#remix-panel .remix-guide-body{padding:8px 12px}#remix-panel .remix-guide-step{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);opacity:.45;transition:opacity .3s}#remix-panel .remix-guide-step:last-child{border-bottom:none}#remix-panel .remix-guide-step.active{opacity:1}#remix-panel .remix-guide-step.completed{opacity:.65}#remix-panel .remix-guide-step-num{display:flex;align-items:center;justify-content:center;width:22px;height:22px;min-width:22px;border-radius:50%;font-size:11px;font-weight:600;background:#ffffff14;color:var(--text-2);transition:background .3s,color .3s}#remix-panel .remix-guide-step.active .remix-guide-step-num{background:var(--accent-gradient);color:var(--bg-0)}#remix-panel .remix-guide-step.completed .remix-guide-step-num{background:#6ee7b733;color:var(--success)}#remix-panel .remix-guide-step-content{flex:1;min-width:0}#remix-panel .remix-guide-step-content h4{font-size:12px;font-weight:600;color:var(--text-0);margin:0 0 2px}#remix-panel .remix-guide-step-content p{font-size:11px;color:var(--text-2);margin:0;line-height:1.5}#remix-panel .remix-guide-progress{margin-top:6px}#remix-panel .remix-guide-progress-bar{height:4px;border-radius:2px;background:#ffffff14;overflow:hidden;margin-bottom:3px}#remix-panel .remix-guide-progress-fill{height:100%;background:var(--accent-gradient);border-radius:2px;transition:width .3s ease}#remix-panel .remix-guide-progress-text{font-size:10px;color:var(--text-muted)}#remix-panel .remix-guide-error{margin-top:6px;padding:6px 8px;background:#fb71851a;border:1px solid rgba(251,113,133,.25);border-radius:var(--r-sm)}#remix-panel .remix-guide-error p{font-size:11px;color:var(--danger);margin:0}#remix-panel .remix-guide-highlight{outline:2px solid var(--accent);outline-offset:2px;animation:remix-guide-pulse 2s ease-in-out infinite}@keyframes remix-guide-pulse{0%,to{outline-color:var(--accent)}50%{outline-color:var(--accent-2)}}#humming-panel .humming-guide-replay{font-size:11px;color:var(--text-2);background:none;border:1px solid var(--panel-border);border-radius:var(--r-pill);padding:2px 10px;cursor:pointer;transition:color var(--t-fast),border-color var(--t-fast)}#humming-panel .humming-guide-replay:hover{color:var(--text-0);border-color:var(--text-2)}#humming-panel .humming-guide{background:#0a0e1e73;border:1px solid var(--panel-border);border-radius:var(--r-md);overflow:hidden}#humming-panel .humming-guide.hidden{display:none}#humming-panel .humming-guide-header{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#8ab4ff0f;border-bottom:1px solid var(--panel-border)}#humming-panel .humming-guide-icon{font-size:14px}#humming-panel .humming-guide-title{flex:1;font-size:13px;color:var(--text-0);margin:0}#humming-panel .humming-guide-actions{display:flex;gap:6px}#humming-panel .humming-guide-collapse,#humming-panel .humming-guide-skip{font-size:11px;padding:2px 8px;border-radius:var(--r-pill);background:none;border:1px solid transparent;cursor:pointer;color:var(--text-2);transition:color var(--t-fast),border-color var(--t-fast)}#humming-panel .humming-guide-collapse:hover{color:var(--text-1);border-color:var(--text-2)}#humming-panel .humming-guide-skip:hover{color:var(--warning);border-color:var(--warning)}#humming-panel .humming-guide-body{padding:6px 12px}#humming-panel .humming-guide-step{display:flex;align-items:flex-start;gap:10px;padding:6px 0;border-bottom:1px solid var(--panel-border);opacity:.5;transition:opacity var(--t-fast)}#humming-panel .humming-guide-step:last-child{border-bottom:none}#humming-panel .humming-guide-step.active{opacity:1}#humming-panel .humming-guide-step.completed{opacity:.65}#humming-panel .humming-guide-step-num{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:#0a0e1e99;border:1px solid var(--panel-border);color:var(--text-2);flex-shrink:0}#humming-panel .humming-guide-step.active .humming-guide-step-num{background:var(--accent-gradient);color:#0b0f22;border-color:transparent}#humming-panel .humming-guide-step.completed .humming-guide-step-num{background:#8ab4ff26;border-color:var(--accent);color:var(--accent)}#humming-panel .humming-guide-step-content{flex:1;min-width:0}#humming-panel .humming-guide-step-content h4{font-size:12px;color:var(--text-0);margin:0 0 3px}#humming-panel .humming-guide-step-content p{font-size:11px;color:var(--text-2);margin:0;line-height:1.5}#humming-panel .humming-guide-timer{font-size:11px;color:var(--accent);margin-top:4px;font-weight:600}#humming-panel .humming-guide-notes-info{font-size:11px;color:var(--accent-2);margin-top:4px;font-weight:600}#humming-panel .humming-guide-error{font-size:11px;color:var(--warning);margin-top:4px;padding:4px 8px;background:#ff8c6414;border-radius:var(--r-sm)}#humming-panel .humming-guide-highlight{outline:2px solid var(--accent);outline-offset:2px;animation:remix-guide-pulse 2s ease-in-out infinite}#remix-panel .remix-section-title{font-size:12px;font-weight:600;color:var(--text-1);letter-spacing:.4px;margin-top:4px;padding-bottom:4px;border-bottom:1px dashed var(--panel-border)}#remix-panel .remix-info{font-size:12px;color:var(--text-1);padding:8px 12px;background:#0a0e1e80;border-radius:var(--r-sm);border:1px solid var(--panel-border)}#remix-panel .remix-info .bpm-value{color:var(--accent);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}#remix-panel .remix-info .key-value{color:var(--text-0);font-weight:600}#remix-panel .remix-bars{display:flex;gap:2px;align-items:flex-end;height:28px;padding:4px 6px;background:#0a0e1e66;border-radius:var(--r-sm);overflow:hidden}#remix-panel .remix-bars .bar{flex:1;background:var(--accent-gradient);border-radius:2px 2px 0 0;min-width:2px;transition:height var(--t-fast)}#remix-panel .remix-imported{display:flex;flex-direction:column;gap:8px}#remix-panel .remix-imported-file{display:flex;flex-direction:column;gap:6px;align-items:flex-start}#remix-panel .remix-import-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r-pill);background:var(--accent-gradient);color:#0b0f22;font-size:12.5px;font-weight:700;border:none;cursor:pointer;transition:transform var(--t-fast),box-shadow var(--t-med)}#remix-panel .remix-import-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px #8ab4ff40}#remix-panel .remix-import-hint{font-size:11px;color:var(--text-2)}#remix-panel .remix-loading{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#0a0e1e80;border-radius:var(--r-sm);border:1px solid var(--panel-border);font-size:12px;color:var(--text-1)}#remix-panel .remix-loading-spinner{width:16px;height:16px;border:2px solid var(--panel-border-strong);border-top-color:var(--accent);border-radius:50%;animation:remix-spin .8s linear infinite}@keyframes remix-spin{to{transform:rotate(360deg)}}#remix-panel .remix-error{padding:8px 12px;background:#fb71851a;border:1px solid rgba(251,113,133,.3);border-radius:var(--r-sm);color:var(--danger);font-size:12px}#remix-panel .remix-file-info{display:flex;flex-direction:column;gap:4px;padding:8px 12px;background:#0a0e1e80;border-radius:var(--r-sm);border:1px solid var(--panel-border)}#remix-panel .remix-file-name{font-size:12.5px;color:var(--text-0);font-weight:600}#remix-panel .remix-file-meta{font-size:11px;color:var(--text-2)}#remix-panel .remix-player{display:flex;flex-direction:column;gap:8px;padding:10px 12px;background:#0a0e1e8c;border-radius:var(--r-md);border:1px solid var(--panel-border)}#remix-panel .remix-player-controls{display:flex;gap:6px}#remix-panel .remix-player-btn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);background:#8ab4ff1f;border:1px solid var(--panel-border);color:var(--text-0);font-size:14px;cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast)}#remix-panel .remix-player-btn:hover{background:#8ab4ff38;border-color:#8ab4ff66}#remix-panel .remix-debug-preview-btn{width:auto;min-width:52px;padding:0 8px;font-size:12px}#remix-panel .remix-debug-preview-btn.active{background:#6ee7b72e;border-color:#6ee7b773;color:var(--ok)}#remix-panel .remix-debug-preview-btn:disabled{opacity:.45;cursor:not-allowed}#remix-panel .remix-clear-btn{margin-left:auto;color:var(--danger)}#remix-panel .remix-clear-btn:hover{background:#fb718526;border-color:#fb718566}#remix-panel .remix-progress-wrap{display:flex;flex-direction:column;gap:4px}#remix-panel .remix-progress-bar{height:5px;background:#0a0e1eb3;border-radius:var(--r-pill);overflow:hidden}#remix-panel .remix-progress-fill{height:100%;background:var(--accent-gradient);border-radius:var(--r-pill);transition:width .1s linear}#remix-panel .remix-time{display:flex;gap:4px;font-size:11px;color:var(--text-2);font-variant-numeric:tabular-nums}#remix-panel .remix-time-sep{color:var(--text-muted)}#remix-panel .remix-volume-row{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-2)}#remix-panel .remix-volume-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;border-radius:var(--r-pill);background:#0a0e1eb3;outline:none;cursor:pointer}#remix-panel .remix-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent-gradient);cursor:pointer;border:none}#remix-panel .remix-volume-value{min-width:32px;text-align:right;color:var(--text-1);font-variant-numeric:tabular-nums}#remix-panel .remix-analysis{display:flex;flex-direction:column;gap:8px;padding:10px 12px;background:#0a0e1e8c;border-radius:var(--r-md);border:1px solid var(--panel-border)}#remix-panel .remix-analysis-title{font-size:13px;font-weight:700;color:var(--text-0)}#remix-panel .remix-analysis-controls{display:flex;gap:6px}#remix-panel .remix-analysis-btn{padding:6px 12px;border-radius:var(--r-pill);background:#8ab4ff1f;border:1px solid var(--panel-border);color:var(--text-0);font-size:12px;cursor:pointer;transition:background var(--t-fast)}#remix-panel .remix-analysis-btn:hover{background:#8ab4ff38}#remix-panel .remix-analysis-apply-btn{background:var(--accent-gradient);color:#0b0f22;font-weight:700;border:none}#remix-panel .remix-analysis-apply-btn:hover{box-shadow:0 4px 14px #8ab4ff40}#remix-panel .remix-analysis-progress{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--text-2)}#remix-panel .remix-analysis-progress-bar{height:5px;background:#0a0e1eb3;border-radius:var(--r-pill);overflow:hidden}#remix-panel .remix-analysis-progress-fill{height:100%;background:var(--accent-gradient);border-radius:var(--r-pill);transition:width .15s linear}#remix-panel .remix-analysis-result{display:flex;flex-direction:column;gap:6px}#remix-panel .remix-analysis-result-row{display:flex;align-items:center;gap:8px;font-size:12px}#remix-panel .remix-analysis-label{min-width:52px;color:var(--text-2)}#remix-panel .remix-analysis-value{color:var(--accent);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}#remix-panel .remix-analysis-confidence{font-size:10.5px;color:var(--text-2)}#remix-panel .remix-analysis-chords{display:flex;flex-direction:column;gap:4px;padding:8px;background:#0a0e1e80;border-radius:var(--r-sm)}#remix-panel .remix-analysis-chords-title{font-size:11.5px;font-weight:600;color:var(--text-1)}#remix-panel .remix-analysis-chords-list{display:flex;flex-wrap:wrap;gap:4px}#remix-panel .remix-analysis-chords-list .chord-item{padding:3px 8px;border-radius:var(--r-sm);background:#8ab4ff1f;border:1px solid var(--panel-border);font-size:11px;color:var(--text-0);font-weight:600;font-variant-numeric:tabular-nums}#remix-panel .remix-analysis-warning{padding:6px 10px;background:#fcd34d1a;border:1px solid rgba(252,211,77,.3);border-radius:var(--r-sm);color:var(--warning);font-size:11.5px}#remix-panel .remix-analysis-actions{display:flex;gap:6px;flex-wrap:wrap}#remix-panel .remix-analysis-error{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fb71851a;border:1px solid rgba(251,113,133,.3);border-radius:var(--r-sm);color:var(--danger);font-size:12px}#remix-panel .remix-overlay-status{padding:8px 12px;background:#0a0e1e80;border-radius:var(--r-sm);border:1px solid var(--panel-border);font-size:12px;color:var(--text-1)}#remix-panel .remix-manual-info{display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:#0a0e1e8c;border-radius:var(--r-md);border:1px solid var(--panel-border)}#remix-panel .remix-manual-title{font-size:12px;font-weight:600;color:var(--text-1)}#remix-panel .remix-manual-row{display:flex;align-items:center;gap:8px;font-size:12px}#remix-panel .remix-manual-row label{min-width:48px;color:var(--text-2);font-size:11.5px}#remix-panel .remix-manual-input{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0a0e1ea6;border:1px solid var(--panel-border-strong);color:var(--text-0);padding:5px 10px;border-radius:var(--r-sm);font-size:12px;transition:border-color var(--t-med),box-shadow var(--t-med)}#remix-panel .remix-manual-input:focus{outline:none;box-shadow:0 0 0 2px #8ab4ff4d;border-color:var(--accent)}#remix-panel .remix-manual-unit{font-size:11px;color:var(--text-2)}#remix-panel .remix-manual-hint{font-size:11px;color:var(--text-2);padding-top:4px;border-top:1px dashed var(--panel-border)}#remix-panel .remix-rec-badge{font-size:10.5px;padding:2px 8px;border-radius:var(--r-pill);font-weight:600;letter-spacing:.3px}#remix-panel .remix-rec-badge.rec{background:#fb718526;color:var(--danger);animation:remix-rec-pulse 1.2s ease-in-out infinite}#remix-panel .remix-rec-badge.paused{background:#fcd34d26;color:var(--warning)}#remix-panel .remix-rec-badge.done{background:#86efac26;color:var(--ok)}@keyframes remix-rec-pulse{0%,to{opacity:1}50%{opacity:.5}}#remix-panel .remix-rec-result{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;background:#86efac14;border:1px solid rgba(134,239,172,.25);border-radius:var(--r-sm);font-size:11px;color:var(--text-1)}#remix-panel .remix-rec-download{padding:3px 10px;border-radius:var(--r-pill);background:var(--accent-gradient);color:#0b0f22;font-size:11px;font-weight:700;border:none;cursor:pointer;transition:transform var(--t-fast)}#remix-panel .remix-rec-download:hover{transform:translateY(-1px)}#remix-panel .remix-overlay-hint{font-size:11px;color:var(--text-2);padding:4px 8px;background:#0a0e1e66;border-radius:var(--r-sm);text-align:center}#controls-panel .btn,#controls-panel button{height:auto;min-height:38px}#controls-panel .row{gap:10px}#controls-panel input[type=text],#controls-panel input[type=number]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0a0e1ea6;border:1px solid var(--panel-border-strong);color:var(--text-0);padding:8px 12px;border-radius:var(--r-pill);font-size:12.5px;min-height:38px;transition:border-color var(--t-med),box-shadow var(--t-med)}#controls-panel input[type=text]:focus-visible,#controls-panel input[type=number]:focus-visible{outline:none;box-shadow:var(--focus-ring);border-color:var(--accent)}#controls-panel textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0a0e1ea6;border:1px solid var(--panel-border-strong);color:var(--text-0);padding:10px 12px;border-radius:var(--r-md);font-size:12.5px;resize:vertical;min-height:80px}#controls-panel textarea:focus-visible{outline:none;box-shadow:var(--focus-ring);border-color:var(--accent)}#controls-panel .track-item{padding:10px 12px;background:#0a0e1e8c;border:1px solid var(--panel-border);border-radius:var(--r-md);display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}#controls-panel .track-item .track-status{font-size:11.5px;padding:2px 8px;border-radius:var(--r-pill);background:#8ab4ff14;color:var(--accent);border:1px solid rgba(138,180,255,.25)}#controls-panel .recording-timer{font-variant-numeric:tabular-nums;color:var(--danger);font-weight:700}#controls-panel .humming-note-display{display:flex;align-items:baseline;gap:10px;padding:14px 16px;background:radial-gradient(300px 160px at 50% 0%,rgba(200,166,255,.12),transparent 70%),#0a0e1e99;border:1px solid var(--panel-border);border-radius:var(--r-md)}#controls-panel .humming-note-value{color:var(--accent-2);font-size:28px;font-weight:800;letter-spacing:.5px}#controls-panel .humming-frequency,#controls-panel .humming-confidence{color:var(--text-2);font-size:12px;font-variant-numeric:tabular-nums}.upload-box{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px;border:1.5px dashed rgba(138,180,255,.35);border-radius:var(--r-md);background:radial-gradient(400px 200px at 50% 0%,rgba(138,180,255,.08),transparent 70%),#0a0e1e66;transition:border-color var(--t-med),background var(--t-med)}.upload-box:hover{border-color:var(--accent);background:#8ab4ff0d}.upload-box.is-dragover{border-color:var(--accent-2);background:#c8a6ff14}.upload-box input[type=file]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.upload-box .upload-title{color:var(--text-0);font-weight:600}.upload-box .upload-hint{color:var(--text-2);font-size:11.5px}.progress{width:100%;height:8px;border-radius:999px;background:#828cb438;overflow:hidden}.progress>div{height:100%;width:0%;background:var(--accent-gradient);transition:width var(--t-med)}.kv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.kv-grid .state-cell{padding:10px 12px}.parts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}.part-toggle{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:#0a0e1e99;border:1px solid var(--panel-border);border-radius:var(--r-pill);cursor:pointer;font-size:12px;color:var(--text-1);transition:background var(--t-med),color var(--t-med),border-color var(--t-med);-webkit-user-select:none;user-select:none}.part-toggle input{accent-color:#8ab4ff}.part-toggle[aria-checked=true]{color:var(--text-0);border-color:#8ab4ff59;background:#8ab4ff14}.playback-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}.time-text{color:var(--text-2);font-variant-numeric:tabular-nums;font-size:12px}.theremin-panel{gap:12px}.theremin-header{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-0);letter-spacing:.4px}.theremin-icon{font-size:16px;filter:saturate(.8)}.theremin-title{font-weight:600}.theremin-status{margin-left:auto;padding:3px 10px;border-radius:999px;font-size:11px;background:#828cb42e;color:var(--text-2);transition:background .3s,color .3s}.theremin-status[data-state=playing]{background:#7fffd438;color:#7fffd4}.theremin-status[data-state=idle]{background:#828cb42e;color:var(--text-2)}.theremin-body{display:flex;flex-direction:column;gap:10px}.theremin-readout{display:flex;flex-direction:column;gap:6px;font-size:12px}.theremin-readout-row{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:10px}.theremin-readout-label{color:var(--text-2);font-size:11px;letter-spacing:.4px}.theremin-readout-value{color:var(--text-0);font-variant-numeric:tabular-nums;font-size:13px}.theremin-readout-note{color:#7fffd4;font-size:11px;margin-left:8px}.theremin-bar{height:6px;background:#828cb42e;border-radius:999px;overflow:hidden}.theremin-bar-fill{height:100%;background:linear-gradient(90deg,#8ab4ff,#c8a6ff);width:0%;transition:width .12s ease-out}.theremin-bar-fill--tone{background:linear-gradient(90deg,#ffb47a,#ffd97a)}.theremin-bar-fill--vib{background:linear-gradient(90deg,#7affb4,#7affd4)}.theremin-bar-fill--rate{background:linear-gradient(90deg,#b4a6ff,#d4a6ff)}.theremin-scale-row{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-2);padding:4px 0}.theremin-scale-label{letter-spacing:.4px}.theremin-scale-select{flex:1;padding:4px 8px;border-radius:var(--r-sm);background:#828cb41f;border:1px solid rgba(130,140,180,.22);color:var(--text-0);font-size:11px;font-family:inherit;cursor:pointer;outline:none;transition:border-color .2s;position:relative;z-index:10}.theremin-scale-select option{background:#1a1f2a;color:var(--text-0);padding:4px 8px}.theremin-scale-select:hover{border-color:#8ab4ff80}.theremin-scale-select:focus{border-color:#8ab4ffb3}.theremin-toggles-row{display:flex;align-items:center;gap:16px;font-size:11px;color:var(--text-2);padding:4px 0}.theremin-toggle-item{display:flex;align-items:center;gap:8px}.theremin-toggle-label{letter-spacing:.4px;min-width:48px}.theremin-switch{position:relative;display:inline-block;width:36px;height:20px}.theremin-switch input{opacity:0;width:0;height:0}.theremin-switch-slider{position:absolute;cursor:pointer;top:0;right:0;bottom:0;left:0;background:#828cb440;border-radius:20px;transition:.3s}.theremin-switch-slider:before{content:"";position:absolute;height:14px;width:14px;left:3px;bottom:3px;background:var(--text-0);border-radius:50%;transition:.3s}.theremin-switch input:checked+.theremin-switch-slider{background:#8ab4ff99}.theremin-switch input:checked+.theremin-switch-slider:before{transform:translate(16px)}.theremin-viz{width:100%;height:100px;border-radius:var(--r-sm);background:#14182099;border:1px solid rgba(130,140,180,.12)}.theremin-range-row{display:flex;align-items:center;gap:10px;padding:6px 0 4px}.theremin-range-bar{position:relative;flex:1;height:8px;border-radius:4px;background:linear-gradient(to right,#8ab4ff14,#8ab4ff38,#8ab4ff14);border:1px solid rgba(130,140,180,.15);overflow:hidden}.theremin-range-bar:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:repeating-linear-gradient(to right,rgba(130,140,180,.18) 0,rgba(130,140,180,.18) 1px,transparent 1px,transparent 20%);pointer-events:none}.theremin-range-indicator{position:absolute;top:0;bottom:0;background:linear-gradient(to bottom,#8ab4ffe6,#8ab4ff80);border-radius:3px;transition:left .35s cubic-bezier(.2,.8,.2,1),width .35s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 6px #8ab4ff80}.theremin-range-label{font-size:10.5px;color:var(--text-2);letter-spacing:.4px;min-width:54px;text-align:right;transition:color .2s,text-shadow .2s}.theremin-range-label.flash{color:#c9e0ff;text-shadow:0 0 4px rgba(138,180,255,.8)}.theremin-help{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--text-2);padding-top:6px;border-top:1px solid rgba(130,140,180,.12)}.theremin-help strong{color:var(--text-0);font-weight:600}.theremin-help-tip{color:var(--text-3);font-size:10px;margin-top:2px}.replica-panel{gap:12px}.replica-header{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-0);letter-spacing:.4px}.replica-icon{font-size:16px;filter:saturate(.8)}.replica-title{font-weight:600}.replica-status{margin-left:auto;padding:3px 10px;border-radius:999px;font-size:11px;background:#828cb42e;color:var(--text-2);transition:background .3s,color .3s}.replica-status[data-state=analyzing]{background:#ffc85a38;color:#ffc85a}.replica-status[data-state=ready]{background:#7fffb438;color:#7affb4}.replica-status[data-state=playing]{background:#7fffd438;color:#7fffd4}.replica-status[data-state=error]{background:#ff7f7f38;color:#ff9d9d}.replica-body{display:flex;flex-direction:column;gap:10px}.replica-song-row{display:flex;align-items:center;gap:10px;margin-bottom:6px}.replica-song-row label{font-size:12px;color:var(--text-1);white-space:nowrap}.replica-song-row select{flex:1;min-width:0;padding:6px 10px;border-radius:var(--r-sm);background:#080d1c;border:1px solid rgba(138,180,255,.3);color:var(--text-0);color-scheme:dark;font-size:12px;cursor:pointer}.replica-song-row select option{background:#080d1c;color:var(--text-0)}.replica-upload-row{display:flex;align-items:center;gap:10px}.replica-file-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-sm);background:#8ab4ff1f;border:1px solid rgba(138,180,255,.3);color:var(--text-0);font-size:12px;cursor:pointer;transition:background .2s}.replica-file-btn:hover{background:#8ab4ff38}.replica-play-btn{margin-left:auto;padding:7px 16px;border-radius:var(--r-sm);background:linear-gradient(90deg,#8ab4ff,#c8a6ff);border:none;color:#0d1326;font-size:12px;font-weight:600;cursor:pointer;transition:opacity .2s}.replica-play-btn:disabled{opacity:.4;cursor:not-allowed}.replica-play-btn:hover:not(:disabled){filter:brightness(1.08)}.replica-info{font-size:12px;color:var(--text-1)}.replica-info-hint{color:var(--text-2);font-size:11px;line-height:1.5}.replica-info-hint--error{color:#ff9d9d}.replica-info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:4px}.replica-info-item{display:flex;flex-direction:column;gap:2px;padding:6px 8px;background:#828cb41a;border-radius:var(--r-sm)}.replica-info-item span{font-size:10px;color:var(--text-3);letter-spacing:.4px}.replica-info-item strong{font-size:13px;color:var(--text-0);font-variant-numeric:tabular-nums;font-weight:600}.replica-analysis-note{margin-top:8px;color:var(--text-2);font-size:10.5px;line-height:1.5}.replica-help{font-size:11px;color:var(--text-2);line-height:1.5;padding-top:6px;border-top:1px solid rgba(130,140,180,.12)}@media (min-width: 1920px){:root{--header-h: 64px;--footer-h: 40px}.app-shell{padding:14px 20px;gap:14px}.app-main{gap:16px}.panel{padding:14px 18px}.stage-wrap{max-height:calc(100vh - 240px)}}@media (max-width: 1365px){.app-main{grid-template-columns:minmax(0,7fr) minmax(0,3fr)}.stage-wrap{max-height:calc(100vh - 260px)}.header-center .pill{font-size:11px}.export-grid{grid-template-columns:1fr}.panel{padding:6px 10px}}@media (max-width: 1023px){:root{--header-h: auto;--footer-h: auto}.app-shell{grid-template-rows:auto 1fr auto;padding:10px;gap:10px;max-height:none;overflow:visible}.app-header{grid-template-columns:1fr;gap:10px}.header-left{flex-direction:column;align-items:flex-start;gap:10px}.mode-selector{max-width:100%}.header-right{justify-content:flex-start}.app-main{grid-template-columns:1fr;gap:12px;overflow:visible}.stage-column,.stage-panel{overflow:visible;min-height:auto}.stage-wrap{min-height:360px;max-height:none}.controls-column{overflow-y:visible;padding-right:0}.hands-grid{grid-template-columns:1fr 1fr}.export-info{grid-template-columns:repeat(3,1fr)}}@media (max-width: 767px){:root{--r-lg: 16px;--r-md: 12px;--pad-md: 12px 14px}body{font-size:13px}.app-shell{padding:8px;gap:8px;max-height:none;overflow:visible}.app-main{overflow:visible}.app-header{padding:12px}.brand-title{font-size:14px}.mode-selector{max-width:100%;padding:4px;gap:4px;-webkit-overflow-scrolling:touch}.mode-btn{padding:8px 10px;font-size:11.5px}.header-center{justify-content:flex-start}.pill{padding:6px 10px;font-size:11px}.stage-column,.stage-panel{overflow:visible;min-height:auto}.stage-wrap{aspect-ratio:4 / 3;min-height:280px;max-height:none}.stage-hint{left:8px;right:8px;bottom:8px;flex-direction:column;gap:6px}.stage-hint-cell{align-self:flex-start}.panel{padding:12px;border-radius:var(--r-md)}.panel-title{font-size:13px}.panel-tools{width:100%;justify-content:flex-start}.music-grid{grid-template-columns:repeat(2,1fr)}.state-cell{padding:10px}.state-cell--wide{grid-column:1 / -1}.hands-grid{grid-template-columns:1fr}.export-info{grid-template-columns:1fr 1fr}.export-info .state-cell:nth-child(3){grid-column:1 / -1}.export-actions{grid-template-columns:1fr 1fr}.btn{--btn-h: 44px;font-size:13px}.btn--sm{--btn-h: 34px}.app-footer{flex-direction:column;align-items:flex-start;padding:10px 12px;gap:8px}.footer-left,.footer-right{gap:10px}}@media (max-width: 374px){.music-grid,.export-info,.export-actions{grid-template-columns:1fr}.mode-btn{padding:7px 9px;font-size:11px}}.app-shell,.app-main,.controls-column,.stage-column,.panel{max-width:100%}*{max-width:100%!important}.stage-wrap,.stage-canvas,.stage-video,.fx-canvas,.fx-layer{max-width:none!important}:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:6px}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,[role=tab]:focus-visible{box-shadow:var(--focus-ring)}.mode-selector[role=tablist]{scroll-snap-type:x mandatory}.mode-btn[role=tab]{scroll-snap-align:start}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.fx-ambient-glow{animation:none}.badge[data-status=recording]:before{animation:none}}@media (forced-colors: active){.panel,.app-header,.app-footer{border:1px solid CanvasText}.btn{border:1px solid ButtonText}}#controls-panel>*:not([style*="display:none"]):not([aria-hidden=true]){display:flex!important;flex-direction:column}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(800px 500px at 50% 0%,rgba(138,180,255,.22),transparent 60%),radial-gradient(700px 500px at 50% 100%,rgba(200,166,255,.2),transparent 60%),#040610d1;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:opacity var(--t-slow),visibility var(--t-slow)}.overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.overlay-card{max-width:520px;width:100%;background:var(--panel-bg-strong);border:1px solid var(--panel-border-strong);border-radius:var(--r-xl);padding:28px;box-shadow:0 30px 80px #0000008c,inset 0 1px #ffffff0d;display:flex;flex-direction:column;gap:18px}.overlay-title{margin:0;font-size:20px;letter-spacing:.5px;background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}.overlay-title--error{background:linear-gradient(135deg,#fb7185,#f97316);-webkit-background-clip:text;background-clip:text;color:transparent}.overlay-desc{margin:0;color:var(--text-1);font-size:13.5px;line-height:1.7}.overlay-desc--error{color:#f8c6cc}.overlay-actions{display:flex;gap:10px;flex-wrap:wrap}.overlay-actions .btn{flex:1 1 160px}.overlay-option{display:inline-flex;align-items:center;gap:10px;color:var(--text-1);font-size:12.5px;padding:8px 12px;background:#0a0e1e80;border:1px solid var(--panel-border);border-radius:var(--r-pill);cursor:pointer;align-self:flex-start}.overlay-option input{accent-color:#8ab4ff}.overlay--loading .overlay-card{max-width:360px;align-items:center;text-align:center}.loader{width:44px;height:44px;border-radius:50%;border:3px solid rgba(138,180,255,.15);border-top-color:var(--accent);border-right-color:var(--accent-2);animation:spin 1.1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.overlay-loading-text{color:var(--text-1);font-size:13px;letter-spacing:.3px}.state-sub{color:var(--text-2);font-size:11.5px;margin-left:6px;font-weight:500}.state-value-sm{color:var(--text-1);font-size:11.5px;margin-top:2px;font-variant-numeric:tabular-nums}.instr-row{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--text-1);font-size:12.5px}.gesture-banner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 12px;background:#0a0e1e8c;border:1px solid var(--panel-border);border-radius:var(--r-md)}.gesture-icon{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;background:#8ab4ff1a;border:1px solid rgba(138,180,255,.25);border-radius:12px}.hand-card--right .gesture-icon{background:#c8a6ff1a;border-color:#c8a6ff47}.gesture-meta{display:flex;flex-direction:column;gap:2px;min-width:0}.gesture-text{color:var(--text-0);font-weight:600;font-size:13px}.gesture-coord{color:var(--text-2);font-size:11px;font-variant-numeric:tabular-nums}.position-stage{position:relative;width:64px;height:44px;border-radius:8px;background:linear-gradient(0deg,#8ab4ff0f,#c8a6ff0f),#0a0e1eb3;border:1px solid var(--panel-border);overflow:hidden}.position-dot{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px #8ab4ffcc;transition:left var(--t-med),top var(--t-med)}.hand-card--right .position-dot{background:var(--accent-2);box-shadow:0 0 8px #c8a6ffcc}.fingers-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;align-items:end;height:54px;padding:0 4px}.finger{height:100%;background:#0a0e1e99;border:1px solid var(--panel-border);border-radius:8px 8px 4px 4px;overflow:hidden;display:flex;align-items:flex-end}.finger-fill{width:100%;background:linear-gradient(180deg,var(--accent) 0%,rgba(138,180,255,.35) 100%);border-radius:6px 6px 3px 3px;transition:height var(--t-med)}.hand-card--right .finger-fill{background:linear-gradient(180deg,var(--accent-2) 0%,rgba(200,166,255,.35) 100%)}.finger-chord-hand-state{min-height:122px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px solid rgba(138,180,255,.3);border-radius:var(--r-md);background:#0a0e1e8c}.hand-card--right .finger-chord-hand-state{border-color:#c8a6ff52}.fc-hand-state-label,.fc-hand-state-detail{color:var(--text-2);font-size:12px}.fc-hand-state-number{color:var(--accent);font-size:38px;line-height:1;font-variant-numeric:tabular-nums}.hand-card--right .fc-hand-state-number{color:var(--accent-2)}@media (min-width: 1024px){#app-shell.mode-finger-chord{height:100vh;max-height:100vh}#app-shell.mode-finger-chord .app-main{grid-template-columns:minmax(0,4fr) minmax(280px,1fr)}#app-shell.mode-finger-chord .stage-wrap{min-height:0;max-height:none}}#app-shell.mode-finger-chord #instructions-panel{display:none}#app-shell.mode-finger-chord #finger-chord-panel{flex:0 0 auto}.fc-panel{gap:10px}.fc-grid{display:flex;flex-direction:column;gap:8px}.fc-col{display:flex;align-items:center;gap:10px;min-width:0}.fc-col-title{flex:0 0 96px;color:var(--text-1);font-size:12px;font-weight:600;white-space:nowrap}.fc-map{display:flex;align-items:center;gap:5px;min-width:0;overflow-x:auto;padding:1px 1px 4px;scrollbar-width:thin}.fc-map-item{flex:0 0 auto;padding:4px 6px;border:1px solid var(--panel-border);border-radius:6px;color:var(--text-2);font-size:11px;line-height:1.2;white-space:nowrap;background:#0a0e1e73}.fc-map-item b{color:var(--accent);font-variant-numeric:tabular-nums}.fc-col:nth-child(2) .fc-map-item b{color:var(--accent-2)}.fc-octave-control{display:flex;align-items:center;gap:6px;min-width:0;padding:5px 7px;border:1px solid var(--panel-border);border-radius:7px;background:#0a0e1e59}.fc-octave-label,.fc-octave-hint{color:var(--text-2);font-size:10.5px;white-space:nowrap}.fc-octave-value{min-width:48px;color:var(--text-0);font-size:12px;font-weight:650;text-align:center}.fc-octave-btn{min-width:28px;padding-inline:7px;font-size:15px;line-height:1}.fc-octave-hint{margin-left:auto}.fc-source-control{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0;padding:6px 7px;border:1px solid var(--panel-border);border-radius:7px;background:#0a0e1e59}.fc-source-status{min-width:140px;flex:1 1 180px;color:var(--text-2);font-size:10.5px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fc-status{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.fc-row{display:flex;align-items:baseline;justify-content:space-between;gap:5px;min-width:0;padding:6px 8px;border:1px solid var(--panel-border);border-radius:7px;background:#0a0e1e59}.fc-label{color:var(--text-2);font-size:10.5px;white-space:nowrap}.fc-value{color:var(--text-0);font-size:12px;font-weight:650;overflow:hidden;text-overflow:ellipsis}@media (max-width: 640px){.fc-col{align-items:flex-start;flex-direction:column;gap:4px}.fc-col-title{flex-basis:auto}.fc-map{width:100%}.fc-status{grid-template-columns:repeat(2,minmax(0,1fr))}.fc-octave-hint{display:none}.fc-source-status{flex-basis:100%;white-space:normal}}.hand-status{font-size:11.5px;padding:3px 8px;border-radius:var(--r-pill);border:1px solid var(--panel-border)}.hand-status.off{color:var(--text-muted);background:#ffffff08}.hand-status.on{border-color:#86efac59;background:#6ee7b714}.hand-status.on.left{color:#7ecfff}.hand-status.on.right{color:#d4b8ff}.export-panel.disabled{opacity:.65;filter:grayscale(.35)}.export-panel.disabled .btn{pointer-events:none}.export-hint{color:var(--text-2);font-size:12px;margin-top:2px;min-height:1.2em}.export-hint.error{color:var(--danger)}.export-state.recording{color:var(--warning);font-weight:700}.export-state.recording:before{content:"● ";color:var(--danger)}.stack-sm{display:flex;flex-direction:column;gap:4px}.welcome-step.hidden{display:none}.entry-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.entry-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 12px 14px;background:#12162ca6;border:1px solid var(--panel-border);border-radius:var(--r-lg);cursor:pointer;color:var(--text-0);font-family:inherit;font-size:13px;text-align:center;transition:border-color var(--t-med),background var(--t-med),transform var(--t-med),box-shadow var(--t-med);outline:none}.entry-card:hover{background:#1e2440b8;border-color:var(--panel-border-strong);transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.entry-card:focus-visible{box-shadow:var(--focus-ring);border-color:var(--accent)}.entry-card:active{transform:translateY(0)}.entry-card.selected{border-color:var(--accent);background:#8ab4ff1f;box-shadow:0 0 0 1px #8ab4ff4d}.entry-card-icon{font-size:28px;line-height:1}.entry-card-title{font-size:14px;font-weight:600;letter-spacing:.3px}.entry-card-desc{font-size:11.5px;color:var(--text-2);line-height:1.4}.welcome-privacy{margin:0;font-size:11.5px;color:var(--text-muted);text-align:center;padding:8px 0 0;border-top:1px solid var(--panel-border)}.device-preflight{display:flex;flex-direction:column;gap:6px;padding:8px 12px;border-radius:var(--r-sm);background:#0f143273;border:1px solid var(--panel-border);font-size:12px;line-height:1.5}.device-status{display:flex;flex-wrap:wrap;gap:4px 10px}.dev-item{display:inline-flex;align-items:center;gap:3px;color:var(--text-2)}.dev-label{color:var(--text-muted)}.dev-ok{color:var(--ok);font-weight:500}.dev-limited{color:var(--warning);font-weight:500}.dev-no{color:var(--danger);font-weight:500}.device-permission-note{color:var(--text-muted);font-size:11.5px;min-height:1.2em}.device-permission-status{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;line-height:1.5}.device-denied-note{color:var(--danger);font-size:11px;padding:4px 8px;border-radius:var(--r-sm);background:#fb718514;border:1px solid rgba(251,113,133,.15)}.device-recorder-note{color:var(--warning);font-size:11px;padding:4px 8px;border-radius:var(--r-sm);background:#fcd34d14;border:1px solid rgba(252,211,77,.15)}.overlay--onboarding{z-index:200}.onboarding-card{max-width:400px;gap:14px;text-align:center}.onboarding-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.onboarding-title{margin:0;font-size:16px;font-weight:600;color:var(--text-0)}.onboarding-step-counter{font-size:12px;color:var(--text-muted);white-space:nowrap}.onboarding-progress{width:100%;height:4px;border-radius:2px;background:#ffffff14;overflow:hidden}.onboarding-progress-bar{height:100%;border-radius:2px;background:var(--accent-gradient);transition:width .3s ease}.onboarding-step{outline:none}.onboarding-body{display:flex;flex-direction:column;align-items:center;gap:8px}.onboarding-step-icon{font-size:36px;line-height:1}.onboarding-step-title{margin:0;font-size:17px;font-weight:600;color:var(--text-0)}.onboarding-step-desc{margin:0;font-size:13px;color:var(--text-2);line-height:1.5}.onboarding-substeps{display:flex;gap:12px;margin-top:4px}.onboarding-substep{font-size:12px;padding:3px 10px;border-radius:var(--r-pill);border:1px solid var(--panel-border);color:var(--text-muted);transition:all var(--t-fast)}.onboarding-substep.active{border-color:var(--accent);color:var(--accent);background:#8ab4ff1a}.onboarding-substep.done{border-color:var(--ok);color:var(--ok);background:#6ee7b714}.onboarding-stable-feedback{font-size:11.5px;color:var(--text-muted);margin-top:2px}.onboarding-stable{font-weight:600;color:var(--text-1)}.onboarding-hint{font-size:12px;color:var(--warning);padding:6px 10px;border-radius:var(--r-sm);background:#fcd34d14;border:1px solid rgba(252,211,77,.15)}.onboarding-footer{display:flex;justify-content:center;gap:10px}.onboarding-skip-btn{font-size:12px;padding:6px 16px;border-radius:var(--r-pill);background:none;border:1px solid var(--panel-border);color:var(--text-2);font-family:inherit;cursor:pointer;transition:all var(--t-fast)}.onboarding-skip-btn:hover{color:var(--text-0);border-color:var(--text-muted);background:#ffffff0a}.onboarding-complete{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0}.onboarding-complete-icon{font-size:40px;line-height:1}.onboarding-complete-title{margin:0;font-size:18px;font-weight:600;color:var(--ok)}.onboarding-complete-desc{margin:0;font-size:13px;color:var(--text-2)}.onboarding-done-btn{font-size:13px;padding:8px 24px}@media (prefers-reduced-motion: reduce){.onboarding-progress-bar{transition:none}}.welcome-back-btn{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;padding:6px 12px;background:none;border:1px solid transparent;border-radius:var(--r-pill);color:var(--text-2);font-family:inherit;font-size:12.5px;cursor:pointer;transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast);outline:none}.welcome-back-btn:hover{color:var(--text-0);background:#8ab4ff14}.welcome-back-btn:focus-visible{box-shadow:var(--focus-ring);border-color:var(--accent)}#btn-home{gap:4px;font-size:12px;opacity:.7;transition:opacity var(--t-fast)}#btn-home:hover{opacity:1}.welcome-library-row{margin-top:6px;text-align:center}.welcome-library-btn{font-size:13px;color:var(--text-2);padding:6px 16px;border-radius:var(--r-pill);background:#8ab4ff0f;border:1px solid var(--panel-border);transition:background var(--t-fast),color var(--t-fast)}.welcome-library-btn:hover,.welcome-library-btn:focus-visible{color:var(--text-0);background:#8ab4ff24;border-color:var(--accent)}.btn--success{background:linear-gradient(135deg,#4ade80,#22c55e);color:#052e16;font-weight:600;border:1px solid rgba(74,222,128,.4)}.btn--success:hover,.btn--success:focus-visible{background:linear-gradient(135deg,#6ee7b7,#4ade80);box-shadow:0 0 14px #4ade8059}.overlay--library{z-index:150}.library-card{max-width:480px;max-height:80vh;gap:0}.library-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--panel-border);flex-shrink:0}.library-header .overlay-title{margin:0;font-size:18px}.library-close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--panel-border);border-radius:var(--r-sm);color:var(--text-2);font-size:16px;cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}.library-close-btn:hover,.library-close-btn:focus-visible{background:#8ab4ff1f;color:var(--text-0)}.library-body{flex:1;overflow-y:auto;padding-top:14px;min-height:0}.library-loading{text-align:center;color:var(--text-muted);font-size:13px;padding:32px 0}.library-error{text-align:center;padding:24px 0;color:var(--danger);font-size:13px;line-height:1.7}.library-empty{text-align:center;padding:32px 0;color:var(--text-muted);font-size:13px}.library-empty-icon{font-size:36px;display:block;margin-bottom:10px;opacity:.6}.library-list{display:flex;flex-direction:column;gap:8px}.library-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:#0a0e1e80;border:1px solid var(--panel-border);border-radius:var(--r-md);transition:background var(--t-fast),border-color var(--t-fast)}.library-item:hover,.library-item:focus-visible{background:#8ab4ff14;border-color:var(--accent);outline:none}.library-item-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.library-item-title{font-size:14px;font-weight:600;color:var(--text-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.library-item-meta{display:flex;gap:8px;font-size:11px;color:var(--text-2);flex-wrap:wrap}.library-item-mode{color:var(--accent)}.library-item-status{padding:0 6px;border-radius:var(--r-pill);font-size:10px;line-height:18px}.library-item-status.draft{background:#fcd34d1f;color:var(--warning)}.library-item-status.completed{background:#6ee7b71f;color:var(--success)}.library-item-actions{display:flex;gap:4px;flex-shrink:0}.library-item-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;border-radius:var(--r-sm);font-size:13px;cursor:pointer;opacity:.5;transition:opacity var(--t-fast),background var(--t-fast),border-color var(--t-fast)}.library-item-btn:disabled{opacity:.25;cursor:not-allowed;pointer-events:none}.library-item:hover .library-item-btn:not(:disabled),.library-item:focus-within .library-item-btn:not(:disabled){opacity:.8}.library-item-btn:hover:not(:disabled),.library-item-btn:focus-visible:not(:disabled){opacity:1;background:#8ab4ff1f;border-color:var(--accent);outline:none}.library-item-btn--delete:hover:not(:disabled),.library-item-btn--delete:focus-visible:not(:disabled){background:#fb718524;border-color:var(--danger)}.library-item-badge{display:inline-block;padding:1px 6px;font-size:10px;border-radius:var(--r-pill);background:#8ab4ff1f;color:var(--accent);margin-left:4px}.library-player{margin:0 0 8px;padding:12px 14px;background:#ffffff0a;border:1px solid var(--panel-border);border-radius:var(--r-md);display:flex;flex-direction:column;gap:8px;animation:library-player-slide .2s ease}@keyframes library-player-slide{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.library-player-status{font-size:12px;color:var(--text-muted)}.library-player-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.library-player-buttons{display:flex;gap:4px;flex-shrink:0}.library-player-btn{width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--panel-border);background:#ffffff0f;color:var(--text-1);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all var(--t-fast)}.library-player-btn:hover:not(:disabled),.library-player-btn:focus-visible:not(:disabled){background:#ffffff1f;border-color:var(--accent);color:var(--text-0)}.library-player-btn:disabled{opacity:.4;cursor:not-allowed}.library-player-progress{display:flex;align-items:center;gap:6px;flex:1;min-width:120px}.library-player-time{font-size:11px;color:var(--text-muted);white-space:nowrap;min-width:32px;text-align:center}.library-player-seek{flex:1;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff14;border-radius:2px;outline:none;cursor:pointer}.library-player-seek::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer}.library-player-seek::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:var(--accent);cursor:pointer}.library-player-seek:disabled{opacity:.4;cursor:not-allowed}.library-player-volume-wrap{display:flex;align-items:center;gap:4px;flex-shrink:0}.library-player-volume-icon{font-size:12px;opacity:.6}.library-player-volume{width:60px;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff14;border-radius:2px;outline:none;cursor:pointer}.library-player-volume::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--text-muted);cursor:pointer}.library-player-volume::-moz-range-thumb{width:10px;height:10px;border:none;border-radius:50%;background:var(--text-muted);cursor:pointer}.library-player-volume:disabled{opacity:.4;cursor:not-allowed}.library-player-missing{font-size:12px;color:var(--text-muted);padding:4px 0;text-align:center}.library-item-btn--edit:hover:not(:disabled),.library-item-btn--edit:focus-visible:not(:disabled){background:#8ab4ff24;border-color:var(--accent)}.library-item-btn--play:hover:not(:disabled),.library-item-btn--play:focus-visible:not(:disabled){background:#8ab4ff24;border-color:var(--accent)}.overlay--result{z-index:160;background:#040610e0}.result-card{max-width:420px;gap:0}.result-header{display:flex;align-items:center;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--panel-border)}.result-header .overlay-title{margin:0;font-size:20px}.result-icon{font-size:28px;line-height:1}.result-body{display:flex;flex-direction:column;gap:14px;padding-top:16px}.result-field{display:flex;flex-direction:column;gap:6px}.result-label{font-size:12px;color:var(--text-2);font-weight:500}.result-input{width:100%;padding:10px 14px;background:#0a0e1e99;border:1px solid var(--panel-border);border-radius:var(--r-md);color:var(--text-0);font-size:15px;font-family:inherit;transition:border-color var(--t-fast);box-sizing:border-box}.result-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #8ab4ff26}.result-meta{display:flex;gap:16px;font-size:13px;color:var(--text-2)}.result-meta strong{color:var(--text-1);font-weight:600}.result-error{padding:10px 14px;background:#fb718514;border:1px solid rgba(251,113,133,.2);border-radius:var(--r-md);color:var(--danger);font-size:13px;line-height:1.5}.result-actions{display:flex;flex-wrap:wrap;gap:8px}.result-actions .btn{flex:1 1 auto;min-width:100px}.result-actions .btn--primary{flex:2 1 140px}@media (max-width: 767px){.overlay{padding:12px}.overlay-card{padding:20px;border-radius:var(--r-lg);gap:14px}.overlay-title{font-size:17px}.overlay-actions{flex-direction:column}.overlay-actions .btn{flex:1 1 auto}.gesture-banner{grid-template-columns:auto 1fr}.position-stage{display:none}.fingers-row{height:46px}.entry-cards{grid-template-columns:1fr;gap:10px}.entry-card{flex-direction:row;gap:12px;padding:14px 16px;text-align:left}.entry-card-icon{font-size:24px;flex-shrink:0}.entry-card-title{font-size:13px}.entry-card-desc{font-size:11px}.library-card{max-width:100%;max-height:90vh}.library-item{padding:10px 12px}.library-item-btn{opacity:.7}.result-card{max-width:100%}.result-actions{flex-direction:column}.result-actions .btn{flex:1 1 auto;min-width:auto}}@media (prefers-reduced-motion: reduce){.loader{animation:none}}#looper-panel{gap:14px;padding:18px 20px;max-height:calc(100vh - 200px);overflow-y:auto}#looper-panel .looper-header{display:flex;flex-direction:column;gap:10px;padding-bottom:12px;border-bottom:1px solid rgba(138,180,255,.12)}#looper-panel .looper-title-bar{display:flex;align-items:center;gap:10px}#looper-panel .looper-icon{font-size:20px;filter:saturate(.8)}#looper-panel .looper-title{font-size:14px;font-weight:700;letter-spacing:.5px;color:var(--text-0)}#looper-panel .beat-indicator{margin-left:auto;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;background:#8ab4ff1a;color:var(--accent);border:1px solid rgba(138,180,255,.25);transition:all .1s ease}#looper-panel .beat-indicator.beat-flash{background:#8ab4ff59;color:#fff;transform:scale(1.05);box-shadow:0 0 12px #8ab4ff66}#looper-panel .looper-info-row{display:flex;flex-wrap:wrap;gap:8px}#looper-panel .info-chip{padding:3px 10px;border-radius:999px;font-size:11px;font-weight:500;background:#828cb426;color:var(--text-2);border:1px solid var(--panel-border)}#looper-panel .info-chip--time{background:#7fffd41a;color:#7fffd4;border-color:#7fffd440}#looper-panel .info-chip--bpm{background:#fcd34d1a;color:#fcd34d;border-color:#fcd34d40}#looper-panel .info-chip--playing{background:#22c55e1f;color:#22c55e;border-color:#22c55e4d;animation:pulse-playing 1.5s ease-in-out infinite}@keyframes pulse-playing{0%,to{opacity:1}50%{opacity:.7}}#looper-panel .looper-tap-tempo{display:flex;flex-direction:column;gap:10px;padding:12px;background:#0a0e1e80;border-radius:var(--r-md);border:1px solid var(--panel-border)}#looper-panel .tap-tempo-row{display:flex;align-items:center;gap:10px}#looper-panel .tap-label{font-size:12px;font-weight:500;color:var(--text-2);min-width:60px}#looper-panel .tap-options{display:flex;gap:6px;flex-wrap:wrap}#looper-panel .tap-option{padding:5px 12px;border-radius:999px;font-size:12px;font-weight:500;background:#828cb41f;color:var(--text-1);border:1px solid var(--panel-border);cursor:pointer;transition:all .2s ease}#looper-panel .tap-option:hover{background:#8ab4ff26;border-color:#8ab4ff59}#looper-panel .tap-option.active{background:#8ab4ff40;color:var(--accent);border-color:var(--accent)}#looper-panel .tap-option.tap-custom{font-style:italic;opacity:.7}#looper-panel .bpm-slider{flex:1;max-width:150px;accent-color:#8ab4ff}#looper-panel .bpm-value{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent);min-width:40px;text-align:right}#looper-panel .looper-recording-mode{padding:10px 12px;background:#0a0e1e80;border-radius:var(--r-md);border:1px solid var(--panel-border)}#looper-panel .mode-row{display:flex;align-items:center;gap:10px}#looper-panel .mode-label{font-size:12px;font-weight:500;color:var(--text-2)}#looper-panel .mode-options{display:flex;gap:4px}#looper-panel .mode-option{padding:4px 12px;border-radius:999px;font-size:11px;font-weight:500;background:transparent;color:var(--text-2);border:1px solid var(--panel-border);cursor:pointer;transition:all .2s ease}#looper-panel .mode-option:hover{color:var(--text-0);background:#828cb41a}#looper-panel .mode-option.active{background:#8ab4ff33;color:var(--accent);border-color:var(--accent)}#looper-panel .looper-controls{display:flex;gap:8px;flex-wrap:wrap}#looper-panel .looper-btn{flex:1;min-width:55px;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border-radius:var(--r-md);font-size:13px;font-weight:600;border:1px solid var(--panel-border);cursor:pointer;transition:all .2s ease;background:#828cb41a;color:var(--text-1)}#looper-panel .looper-btn:hover:not(.disabled){transform:translateY(-1px);box-shadow:0 4px 12px #0003}#looper-panel .looper-btn:active:not(.disabled){transform:translateY(0)}#looper-panel .looper-btn.disabled{opacity:.4;cursor:not-allowed}#looper-panel .looper-btn .btn-icon{font-size:15px}#looper-panel .record-btn{background:#e03a3a26;border-color:#e03a3a66;color:#ef4444}#looper-panel .record-btn:hover:not(.disabled){background:#e03a3a40}#looper-panel .play-btn{background:#22c55e26;border-color:#22c55e66;color:#22c55e}#looper-panel .play-btn:hover:not(.disabled){background:#22c55e40}#looper-panel .stop-btn{background:#fb923c26;border-color:#fb923c66;color:#fb923c}#looper-panel .stop-btn:hover:not(.disabled){background:#fb923c40}#looper-panel .clear-btn{background:#828cb41a}#looper-panel .undo-btn,#looper-panel .redo-btn{flex:0 0 auto;padding:10px 12px}#looper-panel .looper-gesture-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#0a0e1e99;border-radius:var(--r-md);border:1px solid var(--panel-border)}#looper-panel .gesture-switch-label{position:relative;display:inline-block;width:42px;height:24px;cursor:pointer}#looper-panel .gesture-switch-label input{opacity:0;width:0;height:0}#looper-panel .switch-track{position:absolute;top:0;right:0;bottom:0;left:0;background:#828cb44d;border-radius:999px;transition:background .3s ease}#looper-panel .switch-track:before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:var(--text-1);border-radius:50%;transition:transform .3s ease,background .3s ease}#looper-panel .gesture-switch-label input:checked+.switch-track{background:#8ab4ff66}#looper-panel .gesture-switch-label input:checked+.switch-track:before{transform:translate(18px);background:var(--accent)}#looper-panel .gesture-text{font-size:13px;font-weight:500;color:var(--text-1)}#looper-panel .gesture-indicators{display:flex;gap:10px;align-items:center;margin-left:auto}#looper-panel .gesture-indicator{padding:4px 10px;border-radius:999px;font-size:11px;font-weight:500;background:#828cb426;color:var(--text-2);transition:all .2s ease}#looper-panel .gesture-indicator.ready{background:#22c55e33;color:#22c55e;animation:pulse-ready .6s ease-in-out}@keyframes pulse-ready{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}#looper-panel .gesture-hint{font-size:11px;color:var(--text-3)}#looper-panel .playhead-container{position:relative;width:100%;height:4px;background:#828cb433;border-radius:999px;overflow:hidden}#looper-panel .playhead-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:999px;transition:width .05s linear}#looper-panel .recording-overlay{position:relative;display:flex;flex-direction:column;gap:10px;padding:14px 16px;background:#e03a3a1a;border:1px solid rgba(224,58,58,.3);border-radius:var(--r-md)}#looper-panel .recording-indicator-active{display:flex;align-items:center;gap:12px}#looper-panel .recording-pulse{width:12px;height:12px;background:#ef4444;border-radius:50%;animation:record-pulse 1s ease-in-out infinite}@keyframes record-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.6}}#looper-panel .recording-label{font-size:13px;font-weight:700;color:#ef4444;letter-spacing:1px}#looper-panel .recording-time{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-0);margin-left:auto}#looper-panel .recording-progress{position:absolute;left:0;bottom:0;width:100%;height:3px;background:#828cb426;border-radius:0 0 var(--r-md) var(--r-md);overflow:hidden}#looper-panel .recording-progress-fill{height:100%;width:0%;background:#ef4444;transition:width .1s linear}#looper-panel .recording-actions{display:flex;gap:8px}#looper-panel .rec-action-btn{flex:1;padding:8px 14px;border-radius:var(--r-sm);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;background:#e03a3a33;color:#ef4444;border:1px solid rgba(224,58,58,.4)}#looper-panel .rec-action-btn:hover{background:#e03a3a59}#looper-panel .rec-action-btn.rec-cancel{background:#828cb426;color:var(--text-2);border-color:var(--panel-border)}#looper-panel .rec-action-btn.rec-cancel:hover{background:#828cb440;color:var(--text-1)}#looper-panel .processing-indicator{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#fcd34d1a;border:1px solid rgba(252,211,77,.3);border-radius:var(--r-md);font-size:13px;color:var(--warning);font-weight:500}#looper-panel .processing-spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#looper-panel .recording-countdown{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;background:#ef44441a;border:2px solid rgba(239,68,68,.5);border-radius:var(--r-md);animation:countdown-pulse .5s ease-in-out infinite alternate}#looper-panel .countdown-number{font-size:48px;font-weight:700;color:var(--danger);line-height:1;text-shadow:0 0 20px rgba(239,68,68,.5)}#looper-panel .countdown-label{font-size:14px;color:var(--text-secondary);font-weight:500}#looper-panel .countdown-cancel-btn{padding:6px 16px;background:#ef444433;border:1px solid rgba(239,68,68,.4);border-radius:var(--r-sm);color:var(--danger);font-size:12px;cursor:pointer;transition:all .2s ease}#looper-panel .countdown-cancel-btn:hover{background:#ef44444d}@keyframes countdown-pulse{0%{transform:scale(1);opacity:.9}to{transform:scale(1.02);opacity:1}}#looper-panel .track-list-container{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto;padding-right:4px}#looper-panel .track-list-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:6px;border-bottom:1px solid rgba(138,180,255,.08)}#looper-panel .track-list-header span:first-child{font-size:12px;font-weight:600;color:var(--text-1)}#looper-panel .track-list-hint{font-size:10px;color:var(--text-3)}#looper-panel .track-item{display:flex;flex-direction:column;gap:10px;padding:12px 14px;background:#0a0e1e8c;border:1px solid var(--panel-border);border-radius:var(--r-md);transition:all .2s ease}#looper-panel .track-item:hover{border-color:#8ab4ff4d}#looper-panel .track-item.is-recording{border-color:#ef4444;box-shadow:0 0 15px #e03a3a33}#looper-panel .track-item.is-playing{border-color:#22c55e66}#looper-panel .track-item.is-muted{opacity:.65}#looper-panel .track-header{display:flex;align-items:center;gap:10px}#looper-panel .track-number{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-size:13px;font-weight:700;background:#8ab4ff26;color:var(--accent)}#looper-panel .track-name{flex:1;font-size:13px;font-weight:500;color:var(--text-1);padding:4px 8px;border-radius:var(--r-sm);cursor:text;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#looper-panel .track-name:hover{background:#8ab4ff14}#looper-panel .track-name:focus{outline:none;background:#8ab4ff1f;box-shadow:0 0 0 1px #8ab4ff4d}#looper-panel .track-status{padding:3px 10px;border-radius:999px;font-size:11px;font-weight:500;background:#828cb426;color:var(--text-2)}#looper-panel .track-status.playing{background:#22c55e26;color:#22c55e}#looper-panel .track-status.recording{background:#e03a3a26;color:#ef4444;animation:blink-recording .8s ease-in-out infinite}@keyframes blink-recording{0%,to{opacity:1}50%{opacity:.5}}#looper-panel .track-status.ready{background:#8ab4ff26;color:var(--accent)}#looper-panel .track-status.muted{background:#828cb433;color:var(--text-3)}#looper-panel .waveform-canvas{width:100%;height:32px;background:#00000040;border-radius:var(--r-sm);display:block}#looper-panel .waveform-empty{display:flex;align-items:center;justify-content:center;width:100%;height:32px;background:#00000026;border-radius:var(--r-sm);font-size:11px;color:var(--text-3)}#looper-panel .track-controls{display:flex;align-items:center;gap:8px}#looper-panel .track-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--r-sm);background:#828cb426;border:1px solid var(--panel-border);cursor:pointer;transition:all .2s ease;font-size:13px}#looper-panel .track-btn:hover{background:#8ab4ff33;border-color:#8ab4ff4d}#looper-panel .track-btn.mute-btn.active{background:#fcd34d33;border-color:#fcd34d4d}#looper-panel .track-btn.delete-btn{color:var(--text-3)}#looper-panel .track-btn.delete-btn:hover{background:#e03a3a33;color:#ef4444;border-color:#e03a3a4d}#looper-panel .track-btn.move-btn{background:#828cb41a}#looper-panel .track-btn.record-btn{background:#e03a3a33;color:#ef4444;border-color:#e03a3a59}#looper-panel .track-volume{display:flex;align-items:center;gap:6px;flex:1;min-width:0}#looper-panel .volume-slider{flex:1;accent-color:#8ab4ff;height:4px}#looper-panel .volume-value{font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-2);min-width:30px;text-align:right}#looper-panel .gesture-help-row{margin-top:auto;padding:12px 14px;background:#0a0e1e80;border-radius:var(--r-md);border:1px solid var(--panel-border)}#looper-panel .gesture-help-title{font-size:12px;font-weight:600;color:var(--text-1);margin-bottom:8px}#looper-panel .gesture-help-items{display:flex;flex-wrap:wrap;gap:6px}#looper-panel .gesture-help-items span{padding:3px 10px;border-radius:999px;font-size:10px;background:#828cb41f;color:var(--text-2);white-space:nowrap}#looper-panel .gesture-help-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}#looper-panel .gesture-help-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-2)}#looper-panel .gesture-help-item .gesture-icon{font-size:14px;flex-shrink:0}#looper-panel .instrument-mode-hint{margin-top:8px;padding:8px 12px;background:#3b82f61a;border:1px solid rgba(59,130,246,.3);border-radius:var(--r-sm);font-size:11px;color:#60a5fa;text-align:center}#looper-panel .track-instrument-icon{font-size:18px;flex-shrink:0}#looper-panel .track-inst-loading{font-size:10px;padding:2px 8px;border-radius:999px;background:#fcd34d26;color:var(--warning);white-space:nowrap}#looper-panel .track-status-badge{font-size:10px;padding:2px 8px;border-radius:999px;background:#828cb426;color:var(--text-2);white-space:nowrap}#looper-panel .track-status-badge.status-recording{background:#ef444433;color:#ef4444;animation:rec-pulse 1s ease-in-out infinite}#looper-panel .track-status-badge.status-playing{background:#22c55e33;color:#22c55e}#looper-panel .track-status-badge.status-ready{background:#3b82f626;color:#60a5fa}#looper-panel .track-note-count{font-size:10px;padding:2px 8px;border-radius:999px;background:#a855f726;color:#c084fc;white-space:nowrap}#looper-panel .instrument-track-preview{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px}#looper-panel .inst-preview-item{padding:3px 10px;border-radius:999px;font-size:11px;background:#828cb41a;color:var(--text-2);border:1px solid var(--panel-border)}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.5}}#looper-panel .empty-state{display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 20px;text-align:center}#looper-panel .empty-visual{font-size:40px;opacity:.4}#looper-panel .empty-text{font-size:14px;font-weight:500;color:var(--text-1)}#looper-panel .empty-hint{font-size:12px;color:var(--text-3);max-width:200px;line-height:1.5}@media (max-width: 640px){#looper-panel{padding:14px;gap:12px}#looper-panel .looper-controls{flex-wrap:wrap}#looper-panel .looper-btn{min-width:60px;font-size:12px;padding:8px 10px}#looper-panel .tap-options{flex:1;justify-content:center}#looper-panel .tap-option{padding:4px 10px;font-size:11px}#looper-panel .gesture-help-items{flex-direction:column;gap:4px}#looper-panel .gesture-help-items span{width:100%}#looper-panel .track-controls{flex-wrap:wrap}}