:root{--blue: #2E5AA8;--blue-2: #1B3D78;--gold: #E0A53C;--gold-2: #B07D1E;--rose: #E5707E;--rose-2: #C24858;--bg: #EEF3FA;--surface: #F4F8FD;--card: #FFFFFF;--ink: #1B2A45;--ink-soft: #5E6E89;--line: #DCE6F2;--ok: #2E9E7B;--warn: var(--gold);--err: #D9534F;--s1: 4px;--s2: 8px;--s3: 16px;--s4: 24px;--s5: 32px;--r-sm: 10px;--r-md: 14px;--r-lg: 22px;--shadow-card: 0 4px 18px rgba(27, 61, 120, .08);--shadow-hover: 0 10px 30px rgba(27, 61, 120, .16);--fz-1: 12px;--fz-2: 14px;--fz-3: 16px;--fz-4: 20px;--fz-5: 30px;--font-display: Georgia, "Times New Roman", "Songti SC", "STSong", serif;--motion-fast: .12s;--motion-base: .2s;--motion-slow: .32s;--ease: cubic-bezier(.4, 0, .2, 1);--cream: var(--bg);--amber: var(--gold);--amber-2: var(--gold-2);--terra: var(--rose);--esp: var(--ink)}:root[data-theme=dark]{--bg: #121A28;--surface: #1A2434;--card: #1F2A3C;--ink: #E7EDF6;--ink-soft: #97A7C2;--line: #2C3850;--cream: var(--bg);--esp: var(--ink)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Microsoft YaHei,sans-serif;font-size:var(--fz-3);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}a{color:var(--blue);text-decoration:none}.app{min-height:100%;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--blue);border-bottom:3px solid var(--gold);position:sticky;top:0;z-index:10;box-shadow:0 2px 16px #1b3d7838}.brand{font-weight:700;color:#fff;font-size:var(--fz-4);letter-spacing:.5px;display:flex;align-items:center;gap:8px}.brand:before{content:"♪";color:var(--gold);font-size:1.25em;line-height:1}.brand small{color:#c9d8ef;font-weight:400;font-size:var(--fz-1);margin-left:2px}.nav{display:flex;gap:var(--s2);margin-left:auto;flex-wrap:wrap}.nav a{padding:var(--s1) var(--s3);border-radius:999px;color:#dce7f6;font-weight:500;transition:background var(--motion-fast),color var(--motion-fast)}.nav a:hover{background:#ffffff24;color:#fff}.nav a.active{background:var(--gold);color:#3a2600}.page{padding:var(--s4);max-width:1100px;width:100%;margin:0 auto;flex:1}.h1{font-size:var(--fz-5);font-weight:700;margin:0 0 var(--s3);color:var(--blue-2)}.muted{color:var(--ink-soft)}.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:var(--s4);margin-bottom:var(--s3);border:1px solid var(--line)}.grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}a.card{display:block;position:relative;padding:var(--s3) 56px var(--s3) var(--s4);transition:transform var(--motion-fast),box-shadow var(--motion-fast),border-color var(--motion-fast)}a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--blue)}a.card b{color:var(--blue-2);font-size:var(--fz-3)}a.card .muted{margin-top:4px;font-size:var(--fz-1)}a.card:after{content:"▶";position:absolute;top:var(--s3);right:var(--s3);width:32px;height:32px;border-radius:50%;background:var(--gold);color:#3a2600;display:flex;align-items:center;justify-content:center;font-size:11px;padding-left:2px;transition:transform var(--motion-fast),background var(--motion-fast),color var(--motion-fast)}a.card:hover:after{transform:scale(1.14);background:var(--gold-2);color:#fff}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;cursor:pointer;min-height:46px;padding:0 var(--s4);border-radius:999px;font-size:var(--fz-3);font-weight:600;background:var(--gold);color:#3a2600;box-shadow:0 3px 12px #e0a53c52;transition:transform var(--motion-fast),background var(--motion-fast),color var(--motion-fast)}.btn:hover{background:var(--gold-2);color:#fff}.btn:active{transform:scale(.97)}.btn.secondary{background:transparent;color:var(--blue);border:2px solid var(--blue);box-shadow:none}.btn.secondary:hover{background:var(--blue);color:#fff}.btn.ghost{background:transparent;color:var(--ink-soft);box-shadow:none}.btn.ghost:hover{background:var(--surface);color:var(--ink)}.dot{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--fz-2);color:var(--ink-soft)}.dot:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--ok)}.dot.warn:before{background:var(--warn)}.dot.err:before{background:var(--err)}.staff-wrap{position:relative;background:#fff;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-card)}.staff-img{width:100%;display:block}.bar-hl{position:absolute;border:2.5px solid var(--gold-2);background:var(--gold);opacity:.26;border-radius:var(--r-sm);transition:left var(--motion-base) var(--ease),top var(--motion-base) var(--ease),width var(--motion-base) var(--ease),height var(--motion-base) var(--ease);pointer-events:none}.bar-hl.lh{border-color:var(--rose-2);background:var(--rose)}.controls{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}.statusbar{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;margin-top:var(--s2);padding:var(--s2) var(--s3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}.undo-zone{position:fixed;left:0;right:0;bottom:0;height:40vh;background:linear-gradient(to top,rgba(229,112,126,.16),transparent);display:flex;align-items:flex-end;justify-content:center;padding-bottom:var(--s4)}.inp{min-height:44px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:var(--fz-3)}.inp:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #2e5aa826}.todo{color:var(--rose-2);font-size:var(--fz-2)}.empty{text-align:center;color:var(--ink-soft);padding:var(--s5)}table th{color:var(--ink-soft)}table td{border-top:1px solid var(--line)}ul{padding-left:var(--s4)}li{margin:var(--s1) 0}.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s2)}.chip{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink-soft);font-size:var(--fz-2);transition:all var(--motion-fast) var(--ease)}.chip:hover{border-color:var(--blue);color:var(--blue)}.chip.on{background:var(--blue);color:#fff;border-color:var(--blue)}.lv-section{margin-top:var(--s4)}.lv-head{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2);flex-wrap:wrap}.lv-head b{color:var(--blue-2);font-size:var(--fz-3)}.lv-desc{font-size:12.5px}.lv-badge{background:var(--blue);color:#fff;font-weight:600;font-size:var(--fz-2);padding:3px 10px;border-radius:var(--r-sm);white-space:nowrap}.lv-badge.sm{background:#fbefd6;color:var(--gold-2);font-size:var(--fz-1);padding:2px 8px}:root[data-theme=dark] .lv-badge.sm{background:#e0a53c29}.hero{position:relative;overflow:hidden;isolation:isolate;color:#fff;border-radius:var(--r-lg);padding:30px 26px 24px;margin-bottom:var(--s4);background:radial-gradient(135% 105% at 50% 138%,#e0a53c4d,#e0a53c00 58%),linear-gradient(162deg,#0f2750,#1b3d78 48%,#2e5aa8);box-shadow:0 14px 34px #0f275057}.hero:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:.6;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.4px);background-size:5px 5px}.hero-motif{position:absolute;top:4px;right:6px;width:200px;height:auto;pointer-events:none;opacity:.9}.note-star{position:absolute;color:var(--gold);pointer-events:none;line-height:1;text-shadow:0 0 10px rgba(224,165,60,.65);animation:floatNote 6.5s var(--ease) infinite}.hero-greet{font-size:27px;font-weight:700;letter-spacing:.4px;position:relative;animation:riseIn .5s var(--ease) both}.hero-greet:after{content:"";display:block;width:48px;height:3px;background:var(--gold);border-radius:2px;margin-top:8px;box-shadow:0 0 10px #e0a53c8c}.hero-sub{color:#cbdbf3;font-size:var(--fz-2);margin-top:9px;animation:riseIn .5s var(--ease) both;animation-delay:.07s}.streak-pill{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s3);padding:6px 14px;border-radius:999px;font-size:var(--fz-2);font-weight:600;background:#e0a53c33;color:#f4ce82;border:1px solid rgba(224,165,60,.55);animation:riseIn .5s var(--ease) both;animation-delay:.14s}.streak-pill .num{font-family:var(--font-display);font-size:18px;font-weight:700;margin:0 1px}.hero-cta{display:block;margin-top:var(--s4);border-radius:var(--r-md);padding:13px 20px;position:relative;overflow:hidden;background:linear-gradient(135deg,#f0b84e,#e0a53c);color:#3e2a06;box-shadow:0 8px 22px #e0a53c6b;transition:transform var(--motion-fast),box-shadow var(--motion-base);animation:riseIn .5s var(--ease) both;animation-delay:.22s}.hero-cta:after{content:"";position:absolute;top:0;left:-60%;width:50%;height:100%;transform:skew(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transition:left var(--motion-slow) var(--ease)}.hero-cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px #e0a53c80}.hero-cta:hover:after{left:120%}.hero-cta .cta-main{display:block;font-size:var(--fz-3);font-weight:700}.hero-cta .cta-sub{display:block;font-size:var(--fz-1);color:#6e5114;margin-top:3px}@keyframes riseIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes floatNote{0%,to{transform:translateY(0) rotate(0);opacity:.4}50%{transform:translateY(-9px) rotate(7deg);opacity:.85}}.sec-label{color:var(--blue-2);font-weight:600;font-size:var(--fz-2);margin:2px 0 var(--s2);display:flex;align-items:center;gap:6px}.sec-label:before{content:"♪";color:var(--gold-2);font-size:14px}.stat-num,.lv-badge{font-family:var(--font-display)}@media (prefers-reduced-motion: reduce){.note-star{animation:none;opacity:.6}.hero-greet,.hero-sub,.streak-pill,.hero-cta{animation:none}.hero-cta:after{display:none}a.card:hover{transform:none}}