:root{--primary:#3b82f6;--primary-hover:#2563eb;--primary-soft:#eff6ff;--primary-border:#93c5fd;--ink:#0f172a;--text:#334155;--muted:#64748b;--faint:#94a3b8;--line:#e2e8f0;--bg:#f1f5f9;--surface:#fff;--surface-2:#f8fafc;--success:#16a34a;--success-soft:#dcfce7;--warn:#f59e0b;--danger:#dc2626;--danger-soft:#fee2e2;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:999px;--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--shadow-sm:0 1px 3px #0f172a0f, 0 1px 2px #0f172a0a;--shadow-md:0 6px 20px #0f172a1a;--font:"Pretendard", "Apple SD Gothic Neo", -apple-system, "Inter", system-ui, sans-serif;--fs-xs:12px;--fs-sm:13px;--fs-base:14px;--fs-md:16px;--fs-lg:18px;--fs-xl:22px;--fs-2xl:28px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;line-height:1.5}button{font-family:inherit;transition:background .15s,border-color .15s,color .15s,transform .1s,box-shadow .15s}button:active{transform:translateY(1px)}:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.signs-panel,.harmony-section,.harmony-staff-wrap{box-shadow:var(--shadow-sm)}.signs-stage{box-shadow:var(--shadow-md)}.home,.screen{flex-direction:column;align-items:center;height:100%;padding:32px 24px 48px;display:flex;overflow-y:auto}.home-hero{text-align:center;max-width:520px;margin:24px 0 32px}.home-logo{font-size:56px}.home-hero h2{color:#1a1d23;margin:8px 0 6px;font-size:28px;font-weight:800}.home-hero p{color:#64748b;margin:0;font-size:15px;line-height:1.6}.role-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;width:100%;max-width:760px;display:grid}.role-card{color:#1a1d23;background:#fff;border:2px solid #e2e8f0;border-radius:16px;flex-direction:column;align-items:center;gap:6px;padding:28px 20px;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex}.role-card:hover{border-color:#3b82f6;transform:translateY(-3px);box-shadow:0 12px 28px #0206171a}.role-card .role-icon{font-size:40px}.role-card .role-title{font-size:17px;font-weight:700}.role-card .role-desc{color:#64748b;font-size:13px}.role-card.trial{background:linear-gradient(135deg,#eff6ff,#fff)}.screen-head{text-align:center;margin-bottom:24px}.screen-head h2{margin:0 0 6px;font-size:24px;font-weight:800}.screen-head p{color:#64748b;margin:0;font-size:14px}.card-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;width:100%;max-width:760px;display:grid}.lesson-card{color:#1a1d23;background:#fff;border:2px solid #e2e8f0;border-radius:16px;flex-direction:column;gap:6px;padding:24px;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex}.lesson-card:hover{border-color:#3b82f6;transform:translateY(-3px);box-shadow:0 12px 28px #0206171a}.lesson-card .lesson-icon{font-size:36px}.lesson-card .lesson-title{font-size:18px;font-weight:700}.lesson-card .lesson-desc{color:#64748b;font-size:13px;line-height:1.5}.lesson-card .lesson-badge{color:#2563eb;background:#eff6ff;border-radius:999px;align-self:flex-start;padding:2px 10px;font-size:11px;font-weight:700}.entry-box{flex-direction:column;gap:12px;width:100%;max-width:360px;display:flex}.entry-input{text-align:center;letter-spacing:.04em;border:1.5px solid #e2e8f0;border-radius:12px;padding:14px 16px;font-family:inherit;font-size:16px}.entry-input:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px #3b82f626}.entry-btn{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:12px;padding:14px;font-family:inherit;font-size:16px;font-weight:700}.entry-btn:hover{background:#2563eb}.entry-note{color:#94a3b8;text-align:center;margin:0;font-size:12px;line-height:1.5}.entry-err{color:#dc2626;text-align:center;margin:-4px 0 0;font-size:12px;line-height:1.5}.shared-pill{color:#1e40af;background:#dbeafe;border-radius:999px;margin-top:8px;padding:4px 12px;font-size:11px;font-weight:700;display:inline-block}.teach{max-width:960px;margin:0 auto}.teach-actions{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px;display:flex}.te-btn{color:#475569;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:10px;padding:9px 16px;font-family:inherit;font-size:13px;font-weight:600;transition:all .15s}.te-btn:hover{color:#3b82f6;border-color:#3b82f6}.te-btn.primary{color:#fff;background:#3b82f6;border-color:#3b82f6}.te-btn.primary:hover{background:#2563eb}.te-btn.green{color:#fff;background:#22c55e;border-color:#22c55e}.te-btn.green:hover{background:#16a34a}.te-btn.danger{color:#dc2626;border-color:#fecaca}.te-btn.danger:hover{background:#fef2f2;border-color:#ef4444}.te-btn.small{padding:6px 12px;font-size:12px}.teach-empty{text-align:center;color:#94a3b8;background:#f8fafc;border-radius:12px;max-width:600px;margin:0 auto;padding:48px 16px;font-size:14px}.teach-card{background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;flex-direction:column;gap:6px;padding:16px;transition:border-color .15s,box-shadow .15s;display:flex}.teach-card:hover{border-color:#3b82f6;box-shadow:0 8px 20px #0206170f}.tc-head{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.tc-icon{font-size:28px}.tc-badge{color:#2563eb;background:#eff6ff;border-radius:999px;padding:2px 10px;font-size:11px;font-weight:700}.tc-title{color:#1a1d23;font-size:16px;font-weight:700}.tc-desc{color:#64748b;min-height:36px;font-size:13px;line-height:1.5}.tc-missions{color:#94a3b8;font-size:11px}.tc-actions{gap:6px;margin-top:8px;display:flex}.teach-toast{color:#fff;z-index:9999;background:#111827eb;border-radius:999px;padding:10px 22px;font-size:13px;font-weight:600;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 10px 24px #0000002e}.modal-bg{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:9990;background:#080a129e;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-card{background:#fff;border-radius:16px;width:100%;max-width:480px;max-height:90vh;padding:24px;overflow-y:auto;box-shadow:0 24px 60px #0000004d}.modal-card h3{margin:0 0 8px;font-size:18px;font-weight:700}.modal-desc{color:#64748b;margin:0 0 16px;font-size:13px;line-height:1.5}.modal-actions{justify-content:flex-end;gap:8px;margin-top:16px;display:flex}.share-url{resize:vertical;word-break:break-all;box-sizing:border-box;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:8px;width:100%;padding:10px;font-family:SF Mono,Menlo,monospace;font-size:11px}.form-card{max-width:540px}.form-row{margin-bottom:14px;display:block}.form-label{color:#475569;margin-bottom:6px;font-size:12px;font-weight:700;display:block}.form-input{box-sizing:border-box;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;width:100%;padding:9px 12px;font-family:inherit;font-size:14px}.form-input:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px #3b82f626}textarea.form-input{resize:vertical;min-height:48px;line-height:1.5}.form-icon-row{flex-direction:column;gap:8px;display:flex}.form-icon-input{text-align:center;max-width:80px;font-size:24px}.form-icon-presets{flex-wrap:wrap;gap:4px;display:flex}.icon-chip{cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;width:36px;height:36px;font-size:18px;transition:all .1s}.icon-chip:hover{border-color:#3b82f6}.icon-chip.on{background:#eff6ff;border-color:#3b82f6}.form-missions{flex-direction:column;gap:6px;display:flex}.mission-row{align-items:center;gap:6px;display:flex}.mission-row .form-input{flex:1}.mission-del{color:#64748b;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;flex-shrink:0;width:32px;height:32px;font-size:18px;line-height:1}.mission-del:hover{color:#dc2626;background:#fef2f2;border-color:#ef4444}@media (width<=600px){.home-hero h2{font-size:24px}.home,.screen{padding:24px 16px 40px}}.rhythm{box-sizing:border-box;gap:20px;width:100%;height:100%;padding:20px;display:flex}.rhythm-stage{background:#0a0a0e;border-radius:16px;flex:1;justify-content:center;align-items:center;min-width:0;display:flex;position:relative;overflow:hidden}.rhythm-video{object-fit:contain;width:100%;height:100%;transform:scaleX(-1)}.rhythm-canvas{object-fit:contain;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.rhythm-overlay{color:#fff;text-align:center;background:linear-gradient(135deg,#2563eb,#7c3aed);flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;display:flex;position:absolute;inset:0}.rhythm-overlay p{max-width:360px;font-size:16px;font-weight:500;line-height:1.5}.rhythm-overlay-icon{font-size:56px}.rhythm-hint{opacity:.7;font-size:12px}.rhythm-lost{color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0f172ad1;border-radius:999px;padding:16px 28px;font-size:22px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.rhythm-hud{color:#e2e8f0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0f172a99;border-radius:999px;align-items:center;gap:8px;padding:6px 12px;font-size:12px;display:flex;position:absolute;top:12px;left:12px}.hud-dot{background:#64748b;border-radius:50%;width:8px;height:8px}.hud-dot.on{background:#22c55e;box-shadow:0 0 8px #22c55e99}.hud-fps{opacity:.6;font-variant-numeric:tabular-nums}.rhythm-score{gap:8px;font-size:13px;font-weight:700;display:flex;position:absolute;top:12px;right:12px}.rhythm-score .sc{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0f172a99;border-radius:999px;padding:6px 12px}.sc.perfect{color:#4ade80}.sc.good{color:#fbbf24}.sc.miss{color:#f87171}.sc.combo{color:#93c5fd}.rhythm-panel{background:#fff;border:1px solid #e2e8f0;border-radius:16px;flex-shrink:0;width:320px;padding:20px;overflow-y:auto}.rhythm-panel h2{margin:0 0 4px;font-size:18px}.rhythm-panel h2 span{color:#94a3b8;font-size:11px;font-weight:500}.panel-desc{color:#475569;margin:0 0 16px;font-size:13px;line-height:1.6}.ctrl-row{align-items:center;gap:10px;margin-bottom:12px;display:flex}.ctrl-row label{color:#475569;flex-shrink:0;width:64px;font-size:13px}.ctrl-row select{background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;flex:1;padding:8px 10px;font-family:inherit;font-size:13px}.ctrl-row input[type=range]{accent-color:#3b82f6;flex:1}.ctrl-val{font-variant-numeric:tabular-nums;color:#3b82f6;text-align:right;width:36px;font-size:13px;font-weight:600}.toggle{cursor:pointer;color:#64748b;background:#fff;border:1.5px solid #e2e8f0;border-radius:999px;padding:6px 16px;font-family:inherit;font-size:13px;font-weight:600}.toggle.on{color:#fff;background:#f59e0b;border-color:#f59e0b}.level-desc{color:#64748b;background:#f8fafc;border-radius:8px;margin:-4px 0 12px;padding:8px 10px;font-size:12px;line-height:1.5}.ctrl-actions{gap:8px;margin:16px 0;display:flex}.btn-primary{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:10px;flex:1;padding:12px 16px;font-family:inherit;font-size:15px;font-weight:700;transition:background .15s}.btn-primary:hover:not(:disabled){background:#2563eb}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-ghost{color:#64748b;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:10px;padding:12px 16px;font-family:inherit;font-size:14px;font-weight:600}.guide{color:#475569;background:#f8fafc;border-radius:12px;padding:14px;font-size:12px;line-height:1.6}.guide ol{margin:8px 0 0;padding-left:18px}.guide li{margin-bottom:4px}.rhythm-result{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#080a129e;justify-content:center;align-items:center;padding:20px;display:flex;position:absolute;inset:0}.result-card{text-align:center;background:#fff;border-radius:16px;width:360px;max-width:100%;padding:28px 30px;box-shadow:0 24px 60px #0006}.result-grade{margin-bottom:4px;font-size:56px;font-weight:900;line-height:1}.result-grade.g-A{color:#22c55e}.result-grade.g-B{color:#3b82f6}.result-grade.g-C{color:#f59e0b}.result-grade.g-D{color:#ef4444}.result-score{color:#1a1d23;font-size:22px;font-weight:800}.result-msg{color:#475569;margin:6px 0 16px;font-size:14px}.result-stats{flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:12px;display:flex}.result-stats .rs{background:#f1f5f9;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:700}.rs.perfect{color:#16a34a}.rs.good{color:#d97706}.rs.miss{color:#dc2626}.rs.combo{color:#2563eb}.result-tendency{color:#334155;margin-bottom:12px;font-size:13px}.result-tendency .rt-ms{color:#94a3b8;margin-left:4px}.result-reflection{color:#1e40af;text-align:left;background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;margin-bottom:16px;padding:12px;font-size:13px;line-height:1.6}.spinner{border:4px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:36px;height:36px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=860px){.rhythm{flex-direction:column}.rhythm-panel{width:100%}}.melody{box-sizing:border-box;gap:20px;width:100%;height:100%;padding:20px;display:flex}.melody-stage{background:#0a0a0e;border-radius:16px;flex:1;justify-content:center;align-items:center;min-width:0;display:flex;position:relative;overflow:hidden}.melody-video{object-fit:contain;width:100%;height:100%;transform:scaleX(-1)}.melody-canvas{object-fit:contain;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.melody-overlay{color:#fff;text-align:center;background:linear-gradient(135deg,#0ea5e9,#6366f1);flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;display:flex;position:absolute;inset:0}.melody-overlay p{max-width:360px;font-size:16px;font-weight:500;line-height:1.5}.melody-overlay-icon{font-size:56px}.melody-hint{opacity:.75;font-size:12px}.melody-lost{color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0f172ad1;border-radius:999px;padding:16px 28px;font-size:22px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.melody-hud{color:#e2e8f0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0f172a99;border-radius:999px;align-items:center;gap:8px;padding:6px 12px;font-size:12px;display:flex;position:absolute;top:12px;left:12px}.melody-hud .hud-dot{background:#64748b;border-radius:50%;width:8px;height:8px}.melody-hud .hud-dot.on{background:#22c55e;box-shadow:0 0 8px #22c55e99}.melody-hud .hud-fps{opacity:.6;font-variant-numeric:tabular-nums}.melody-panel{background:#fff;border:1px solid #e2e8f0;border-radius:16px;flex-shrink:0;width:320px;padding:20px;overflow-y:auto}.melody-panel h2{margin:0 0 4px;font-size:18px}.melody-panel h2 span{color:#94a3b8;font-size:11px;font-weight:500}.melody-panel .panel-desc{color:#475569;margin:0 0 16px;font-size:13px;line-height:1.6}.melody-panel .ctrl-row{align-items:center;gap:10px;margin-bottom:12px;display:flex}.melody-panel .ctrl-row label{color:#475569;flex-shrink:0;width:48px;font-size:13px}.melody-panel .ctrl-row select{background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;flex:1;padding:8px 10px;font-family:inherit;font-size:13px}.melody-panel .ctrl-actions{margin:12px 0}.melody-history{background:#f8fafc;border-radius:12px;margin-bottom:16px;padding:12px}.mh-label{color:#475569;margin-bottom:8px;font-size:12px;font-weight:700}.mh-chips{flex-wrap:wrap;align-items:center;gap:6px;min-height:30px;display:flex}.mh-empty{color:#94a3b8;font-size:12px}.mh-chip{color:#0369a1;background:#e0f2fe;border-radius:8px;padding:4px 10px;font-size:14px;font-weight:700}.melody-panel .reflection{color:#1e40af;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;margin-bottom:16px;padding:14px;font-size:13px;line-height:1.6}.melody-panel .reflection-label{margin-bottom:4px;font-weight:700}.melody-panel .guide{color:#475569;background:#f8fafc;border-radius:12px;padding:14px;font-size:12px;line-height:1.6}.melody-panel .guide ol{margin:8px 0 0;padding-left:18px}.melody-panel .guide li{margin-bottom:4px}.melody .btn-primary{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:10px;padding:12px 16px;font-family:inherit;font-size:15px;font-weight:700}.melody .btn-primary:hover{background:#2563eb}.melody .btn-ghost{color:#64748b;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:10px;padding:12px 16px;font-family:inherit;font-size:14px;font-weight:600}.melody .spinner{border:4px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:36px;height:36px;animation:.8s linear infinite spin}@media (width<=860px){.melody{flex-direction:column}.melody-panel{width:100%}}.signs{box-sizing:border-box;gap:20px;width:100%;height:100%;padding:20px;display:flex}.signs-stage{background:#0a0a0e;border-radius:16px;flex:1;justify-content:center;align-items:center;min-width:0;display:flex;position:relative;overflow:hidden}.signs-video{object-fit:contain;width:100%;height:100%;transform:scaleX(-1)}.signs-canvas{object-fit:contain;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.signs-overlay{color:#fff;text-align:center;background:linear-gradient(135deg,#3b82f6,#2563eb);flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;display:flex;position:absolute;inset:0}.signs-overlay p{max-width:360px;font-size:16px;font-weight:500;line-height:1.5}.signs-overlay-icon{font-size:56px}.signs-hint{opacity:.8;font-size:12px;line-height:1.5}.signs-lost{color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0f172ad1;border-radius:999px;padding:16px 28px;font-size:22px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.signs-hud{color:#e2e8f0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0f172a99;border-radius:999px;align-items:center;gap:8px;padding:6px 12px;font-size:12px;display:flex;position:absolute;top:12px;left:12px}.signs-hud .hud-dot{background:#64748b;border-radius:50%;width:8px;height:8px}.signs-hud .hud-dot.on{background:#22c55e;box-shadow:0 0 8px #22c55e99}.signs-hud .hud-fps{opacity:.6;font-variant-numeric:tabular-nums}.signs-panel{background:#fff;border:1px solid #e2e8f0;border-radius:16px;flex-shrink:0;width:320px;padding:20px;overflow-y:auto}.signs-panel h2{margin:0 0 4px;font-size:18px}.signs-panel h2 span{color:#94a3b8;font-size:11px;font-weight:500}.signs-panel .panel-desc{color:#475569;margin:0 0 16px;font-size:13px;line-height:1.6}.signs-panel .ctrl-row{align-items:center;gap:10px;margin-bottom:12px;display:flex}.signs-panel .ctrl-row label{color:#475569;flex-shrink:0;width:48px;font-size:13px}.signs-panel .ctrl-row select{background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;flex:1;padding:8px 10px;font-family:inherit;font-size:13px}.signs-panel .ctrl-actions{margin:12px 0}.signs-guide-card{background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;margin-bottom:14px;padding:12px 14px}.sg-label{color:#1e40af;margin-bottom:6px;font-size:12px;font-weight:700}.sg-list{color:#1e40af;flex-direction:column;gap:4px;font-size:13px;display:flex}.sg-sign{margin-right:4px;font-size:16px}.sg-baseline{color:#1e40af;border-top:1px dashed #bfdbfe;margin-top:8px;padding-top:8px;font-family:SF Mono,Menlo,monospace;font-size:11px}.signs-history{background:#f8fafc;border-radius:12px;margin-bottom:16px;padding:12px}.sh-label{color:#475569;margin-bottom:8px;font-size:12px;font-weight:700}.sh-chips{flex-wrap:wrap;align-items:center;gap:6px;min-height:30px;display:flex}.sh-empty{color:#94a3b8;font-size:12px}.sh-chip{color:#1e40af;background:#dbeafe;border-radius:8px;padding:4px 10px;font-size:14px;font-weight:700}.signs-panel .reflection{color:#1e40af;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;margin-bottom:16px;padding:14px;font-size:13px;line-height:1.6}.signs-panel .reflection-label{margin-bottom:4px;font-weight:700}.signs-panel .guide{color:#475569;background:#f8fafc;border-radius:12px;padding:14px;font-size:12px;line-height:1.6}.signs-panel .guide ol{margin:8px 0 0;padding-left:18px}.signs-panel .guide li{margin-bottom:4px}.signs .btn-primary{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:10px;padding:12px 16px;font-family:inherit;font-size:15px;font-weight:700}.signs .btn-primary:hover{background:#2563eb}.signs .btn-ghost{color:#64748b;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:10px;padding:12px 16px;font-family:inherit;font-size:14px;font-weight:600}.signs .spinner{border:4px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:36px;height:36px;animation:.8s linear infinite spin}@media (width<=860px){.signs{flex-direction:column}.signs-panel{width:100%}}.compose-layout{flex-direction:column;height:100%;display:flex}.compose-layout .signs{flex:1;height:auto;min-height:0}.staff-strip{background:#fff;border-top:2px solid #e2e8f0;flex-direction:column;flex:none;display:flex}.compose-staff-scroll{white-space:nowrap;overflow-x:auto}.compose-staff-scroll .staff-container{min-height:150px}.staff-strip-actions{background:#f8fafc;border-top:1px solid #eef2f7;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 12px;display:flex}.compose-meta{color:#64748b;margin-right:auto;font-size:12px}.staff-btn{color:#334155;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:6px 10px;font-size:13px;font-weight:600}.staff-btn:disabled{opacity:.4;cursor:default}.staff-btn.primary{color:#fff;background:#3b82f6;border-color:#3b82f6}.staff-btn.danger{color:#b91c1c;background:#fee2e2;border-color:#fecaca}.game-target{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:12px;align-items:center;gap:14px;min-height:104px;margin:4px 0 10px;padding:12px 14px;display:flex}.game-sign-img{object-fit:contain;background:#1e293b;border-radius:10px;width:84px;height:84px;padding:4px}.game-target-name{flex-direction:column;line-height:1.1;display:flex}.game-target-name b{color:#0f172a;font-size:44px}.game-target-name span{color:#64748b;font-size:15px}.game-done{color:#16a34a;font-size:18px;font-weight:800}.game-progress{color:#475569;margin:2px 0 6px;font-size:14px}.game-progress b{color:#0f172a;font-size:16px}.game-dots{flex-wrap:wrap;gap:5px;margin-bottom:12px;display:flex}.game-dot{background:#cbd5e1;border-radius:50%;width:11px;height:11px}.game-dot.ok{background:#16a34a}.game-dot.cur{background:#3b82f6;box-shadow:0 0 0 3px #3b82f640}.follow-strip{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:4;pointer-events:none;background:#0f172a8c;border-radius:16px;align-items:flex-end;gap:10px;padding:8px 12px;display:flex;position:absolute;top:14px;left:50%;transform:translate(-50%)}.follow-cell{opacity:.6;flex-direction:column;align-items:center;transition:transform .15s,opacity .15s;display:flex}.follow-cell img{object-fit:contain;background:#1e293b;border-radius:10px;width:56px;height:56px;padding:3px}.follow-cell span{color:#fff;margin-top:3px;font-size:14px;font-weight:700}.follow-cell.cur{opacity:1;transform:scale(1.28)}.follow-cell.cur img{box-shadow:0 0 0 3px #3b82f6}.follow-cell.cur span{color:#93c5fd}.follow-cell.cur.hit img{box-shadow:0 0 0 4px #22c55e}.follow-cell.cur.hit span{color:#4ade80}.karaoke-row{white-space:nowrap;scrollbar-width:thin;align-items:center;gap:2px;padding:10px 14px;display:flex;overflow-x:auto}.kara{color:#cbd5e1;border-radius:10px;flex:none;padding:2px 8px;font-size:30px;font-weight:800;transition:color .12s,background .12s,transform .12s}.kara.done{color:#94a3b8}.kara.on{color:#fff;background:#3b82f6;transform:scale(1.12)}.kara-line{margin-left:18px}.kara-line:first-child{margin-left:0}.game-problem,.game-correct{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;width:100%;display:flex}.game-correct{padding-top:12px;position:relative}.game-correct-badge{color:#fff;background:#16a34a;border-radius:999px;padding:3px 12px;font-size:13px;font-weight:800;position:absolute;top:-8px;left:50%;transform:translate(-50%);box-shadow:0 2px 6px #00000026}.game-staff{background:#fff;border-radius:10px;max-width:100%;padding:4px;overflow-x:auto}.follow-staff{z-index:4;background:#fffffff5;border-radius:12px;max-width:94%;padding:4px 10px;position:absolute;bottom:14px;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 4px 14px #00000040}.chordkar{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:4;pointer-events:none;background:#0f172a8c;border-radius:12px;flex-direction:column;align-items:center;gap:4px;padding:8px 18px;display:flex;position:absolute;top:12px;left:50%;transform:translate(-50%)}.chordkar-chord{color:#fbbf24;font-size:26px;font-weight:900}.chordkar-lyric{gap:4px;font-size:22px;font-weight:800;display:flex}.chordkar-lyric span{color:#cbd5e1;padding:0 4px}.chordkar-lyric span.done{color:#94a3b8}.chordkar-lyric span.on{color:#fff;background:#3b82f6;border-radius:8px}.harmony{flex-direction:column;gap:18px;max-width:720px;margin:0 auto;padding:16px;display:flex}.harmony-head h2{margin:0 0 4px;font-size:24px}.harmony-head h2 span{color:#64748b;margin-left:8px;font-size:14px;font-weight:600}.harmony-head p{color:#64748b;margin:0;font-size:14px}.harmony-section{background:#fff;border:2px solid #e2e8f0;border-radius:16px;padding:16px}.hm-label{margin-bottom:12px;font-weight:800}.hm-voicing{gap:8px;margin-bottom:14px;display:flex}.hm-tog{color:#64748b;cursor:pointer;background:#f8fafc;border:2px solid #e2e8f0;border-radius:999px;padding:8px 14px;font-weight:700}.hm-tog.on{color:#2563eb;background:#eff6ff;border-color:#60a5fa}.hm-degrees{grid-template-columns:repeat(7,1fr);gap:8px;display:grid}@media (width<=560px){.hm-degrees{grid-template-columns:repeat(4,1fr)}}.hm-deg{cursor:pointer;background:#f8fafc;border:2px solid #e2e8f0;border-radius:12px;flex-direction:column;align-items:center;gap:4px;padding:14px 4px;transition:transform .1s,background .15s,border-color .15s;display:flex}.hm-deg b{color:#1e293b;font-size:20px}.hm-deg span{color:#64748b;font-size:12px}.hm-deg.on{background:#dcfce7;border-color:#4ade80;transform:scale(1.06)}.hm-notes{color:#475569;text-align:center;margin-top:12px;font-size:14px}.hm-topline{color:#475569;align-items:center;gap:8px;margin-bottom:12px;font-size:14px;display:flex}.hm-progs{flex-wrap:wrap;gap:8px;display:flex}.hm-prog{cursor:pointer;background:#fff;border:2px solid #cbd5e1;border-radius:12px;padding:12px 18px;font-size:15px;font-weight:700}.hm-prog.on{color:#fff;background:#3b82f6;border-color:#3b82f6}.harmony-staff-wrap{background:#fff;border:2px solid #e2e8f0;border-radius:12px;min-height:120px;margin-top:12px;overflow-x:auto}.harmony-staff{display:inline-block}.cf-block{margin-bottom:12px}.cf-section{color:#64748b;margin-bottom:6px;font-size:13px;font-weight:700}.cf-row{grid-template-columns:repeat(8,1fr);gap:6px;display:grid}.cf-cell{background:#f8fafc;border:2px solid #e2e8f0;border-radius:10px;flex-direction:column;align-items:center;gap:2px;padding:10px 2px;transition:transform .12s,background .12s,border-color .12s;display:flex}.cf-cell b{color:#1e293b;font-size:17px}.cf-cell span{color:#64748b;font-size:12px}.cf-cell.cur{background:#dbeafe;border-color:#3b82f6;transform:scale(1.1);box-shadow:0 0 0 3px #3b82f640}.hm-deg.target{background:#fffbeb;border-color:#f59e0b;animation:1s ease-in-out infinite tpulse;box-shadow:0 0 0 3px #f59e0b59}@keyframes tpulse{0%,to{box-shadow:0 0 0 3px #f59e0b40}50%{box-shadow:0 0 0 6px #f59e0b1f}}.harmony-flow{gap:10px;width:100%;max-width:100%;height:100%;margin:0;padding:12px 16px;overflow:hidden}.harmony-flow .harmony-head{flex-shrink:0}.harmony-flow .harmony-head h2{font-size:20px}.harmony-flow .harmony-head p{font-size:13px}.harmony-flow .harmony-section{padding:12px 14px}.harmony-flow .hm-label{margin-bottom:8px}.harmony-flow .hf-flow{flex-shrink:0}.harmony-flow .cf-block{margin-bottom:8px}.harmony-flow .cf-block:last-child{margin-bottom:0}.harmony-flow .cf-cell{padding:8px 2px}.harmony-flow .hf-body{flex:1;gap:10px;min-height:0;display:flex}.harmony-flow .hf-play{flex-direction:column;flex:1;min-width:0;display:flex}.harmony-flow .hf-play .hm-degrees{flex:1;min-height:0;margin-top:4px}.harmony-flow .hf-play .hm-deg{padding:8px 4px}.harmony-flow .harmony-staff-wrap{flex-shrink:0;min-height:90px;max-height:120px;margin-top:8px}.harmony-flow .hf-side{flex-direction:column;flex-shrink:0;gap:10px;width:300px;display:flex;overflow-y:auto}@media (width<=900px){.harmony-flow{height:auto;overflow:visible}.harmony-flow .hf-body{flex-direction:column}.harmony-flow .hf-side{width:auto}.harmony-flow .hf-play .hm-degrees{flex:none}}.guide-current{background:#f1f5f9;border:2px solid #e2e8f0;border-radius:12px;align-items:center;gap:12px;margin-bottom:14px;padding:14px 16px;transition:background .2s,border-color .2s;display:flex}.guide-current.ok{background:#dcfce7;border-color:#4ade80}.guide-current .gc-emoji{font-size:40px;line-height:1}.guide-current .gc-text{flex-direction:column;gap:2px;display:flex}.guide-current .gc-text b{font-size:20px}.guide-current .gc-text span{color:#64748b;font-size:14px}.guide-progress{flex-wrap:wrap;gap:6px;margin-bottom:14px;display:flex}.guide-progress .gp-dot{color:#94a3b8;background:#f1f5f9;border:2px solid #e2e8f0;border-radius:999px;justify-content:center;align-items:center;min-width:34px;height:34px;padding:0 8px;font-size:14px;font-weight:700;display:inline-flex}.guide-progress .gp-dot.cur{color:#2563eb;background:#eff6ff;border-color:#60a5fa}.guide-progress .gp-dot.done{color:#16a34a;background:#dcfce7;border-color:#4ade80}.guide-refs{pointer-events:none;justify-content:center;align-items:center;gap:2%;display:flex;position:absolute;left:0;right:0;transform:translateY(-50%)}.guide-ref{opacity:.92;filter:drop-shadow(0 0 4px #000000e6);width:auto;max-width:40%;height:22vh;transition:filter .2s,transform .2s}.guide-ref.flip{transform:scaleX(-1)}.guide-refs.ok .guide-ref{filter:drop-shadow(0 0 10px #22c55e)drop-shadow(0 0 4px #22c55e);transform:scale(1.06)}.guide-refs.ok .guide-ref.flip{transform:scaleX(-1)scale(1.06)}.guide-flash{color:#4ade80;text-shadow:0 2px 12px #00000080;pointer-events:none;font-size:clamp(28px,6vw,56px);font-weight:900;animation:.3s ease-out guide-pop;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes guide-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(.6)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.app{flex-direction:column;height:100dvh;display:flex}.app-header{background:#fff;border-bottom:1px solid #e2e8f0;flex-shrink:0;align-items:center;gap:12px;min-height:52px;padding:10px 20px;display:flex}.hdr-back{color:#475569;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:10px;flex-shrink:0;width:34px;height:34px;font-size:18px;line-height:1}.hdr-back:hover{color:#3b82f6;border-color:#3b82f6}.hdr-logo{color:inherit;align-items:center;gap:8px;text-decoration:none;display:flex}.hdr-mark{font-size:22px}.hdr-title{font-size:16px;font-weight:700}.hdr-title em{color:#94a3b8;margin-left:4px;font-size:11px;font-style:normal;font-weight:400}.app-main{background:#f1f5f9;flex:1;min-height:0;display:flex}.app-main>*{flex:1;min-width:0;min-height:0}.instr-row{flex-wrap:wrap;gap:6px;margin-bottom:14px;display:flex}.instr-btn{color:#475569;cursor:pointer;background:#f8fafc;border:2px solid #e2e8f0;border-radius:999px;align-items:center;gap:4px;padding:7px 11px;font-size:13px;font-weight:700;display:inline-flex}.instr-btn .instr-emoji{font-size:15px}.instr-btn.on{color:#2563eb;background:#eff6ff;border-color:#60a5fa}.hdr-wide{color:#475569;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:10px;margin-left:auto;padding:8px 14px;font-size:13px;font-weight:700}.hdr-wide:hover{color:#3b82f6;border-color:#3b82f6}.app.wide .signs-panel,.app.wide .hf-side{display:none}.instr-btn:hover{border-color:var(--primary-border);background:var(--surface)}.instr-btn.on{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-hover)}.hdr-wide:hover,.app-header{box-shadow:var(--shadow-sm)}