: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-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}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:0;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}.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)}.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}}#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-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-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}@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}.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}.stage-wrap{min-height:360px}.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}.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-wrap{aspect-ratio:4 / 3;min-height:280px}.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%)}.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}@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}}@media (prefers-reduced-motion: reduce){.loader{animation:none}}