*{box-sizing:border-box}body{margin:0;font-family:Noto Sans SC,PingFang SC,Microsoft YaHei,sans-serif;background:#11100f;color:#f8f1df}button,input{font:inherit}.page-shell{min-height:100vh;padding:32px 16px 48px;color:var(--text-primary);background:var(--page-background);transition:background .26s ease,color .26s ease}.page-shell[data-theme=retro]{--page-background: radial-gradient(circle at top, rgba(243, 190, 88, .28), transparent 34%), linear-gradient(160deg, #201714 0%, #11100f 44%, #161d24 100%);--text-primary: #f8f1df;--text-secondary: #dccfbf;--text-muted: #c8b89f;--text-subtle: #c6b8a3;--accent-text: #e9c97a;--accent-strong: #f0cf8c;--panel-border: rgba(255, 240, 210, .14);--panel-background: rgba(13, 15, 18, .72);--panel-shadow: 0 20px 50px rgba(0, 0, 0, .28);--chip-background: rgba(255, 255, 255, .07);--chip-text: #f6ead1;--chip-active-background: linear-gradient(135deg, #f1ba51, #d77a2f);--chip-active-text: #20130c;--field-background: rgba(255, 255, 255, .06);--field-border: rgba(255, 255, 255, .12);--field-text: #fff7e9;--button-primary-background: linear-gradient(135deg, #f8cb6d, #df7e3b);--button-primary-text: #23150c;--button-secondary-background: rgba(255, 255, 255, .08);--button-secondary-text: #fbf1de;--board-tip-background: rgba(255, 255, 255, .07);--board-tip-text: #f7d995;--countdown-track: rgba(255, 255, 255, .08);--countdown-border: rgba(255, 255, 255, .08);--countdown-bar: linear-gradient(90deg, #f3b952 0%, #ff8956 100%);--countdown-strong: #ffd882;--kalimba-shell-background: radial-gradient(circle at 50% 82%, rgba(38, 23, 16, .9), transparent 18%), linear-gradient(180deg, #7c5135 0%, #6d442a 36%, #54311f 100%);--kalimba-shell-inner-top: rgba(255, 243, 222, .12);--kalimba-shell-inner-bottom: rgba(34, 16, 8, .22);--kalimba-bridge-background: linear-gradient(180deg, #d9b386 0%, #8d643e 100%);--tine-background: linear-gradient(180deg, #fbfaf7 0%, #c9d0d4 12%, #899198 100%);--tine-border: rgba(255, 255, 255, .24);--tine-text: #172029;--tine-solfege: rgba(18, 23, 29, .7);--tine-active-background: linear-gradient(180deg, #ffe9aa 0%, #f5b34b 24%, #cc6e2d 100%);--tine-active-ring: rgba(255, 220, 149, .25);--tine-active-text: #2a1609;--tine-active-solfege: rgba(42, 22, 9, .76);--sound-hole-background: radial-gradient(circle at 42% 38%, rgba(0, 0, 0, .1), transparent 24%), radial-gradient(circle, #1c0d08 0%, #26130b 58%, rgba(13, 5, 3, .92) 100%)}.page-shell[data-theme=modern]{--page-background: radial-gradient(circle at 12% 12%, rgba(177, 222, 255, .72), transparent 24%), radial-gradient(circle at 85% 10%, rgba(255, 255, 255, .94), transparent 28%), radial-gradient(circle at 50% 120%, rgba(194, 225, 255, .46), transparent 34%), linear-gradient(180deg, #fdfefe 0%, #eef5ff 40%, #f7faff 100%);--text-primary: #18212f;--text-secondary: #556273;--text-muted: #6a7990;--text-subtle: #718099;--accent-text: #6b88b8;--accent-strong: #4f6d9c;--panel-border: rgba(255, 255, 255, .7);--panel-background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .16));--panel-shadow: 0 18px 50px rgba(137, 163, 196, .16);--chip-background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .1));--chip-text: #5f7693;--chip-active-background: linear-gradient(180deg, rgba(244, 250, 255, .92), rgba(176, 217, 255, .68));--chip-active-text: #123b69;--field-background: rgba(255, 255, 255, .24);--field-border: rgba(255, 255, 255, .76);--field-text: #1e314e;--button-primary-background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(214, 233, 255, .18));--button-primary-text: #18406f;--button-secondary-background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .12));--button-secondary-text: #29486b;--board-tip-background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .14));--board-tip-text: #486282;--countdown-track: rgba(255, 255, 255, .24);--countdown-border: rgba(255, 255, 255, .72);--countdown-bar: linear-gradient(90deg, rgba(122, 187, 255, .88) 0%, rgba(208, 233, 255, .96) 100%);--countdown-strong: #33639a;--kalimba-shell-background: radial-gradient(circle at 50% 78%, rgba(196, 216, 239, .28), transparent 20%), linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(232, 241, 255, .2) 52%, rgba(215, 228, 245, .3) 100%);--kalimba-shell-inner-top: rgba(255, 255, 255, .82);--kalimba-shell-inner-bottom: rgba(131, 162, 201, .08);--kalimba-bridge-background: linear-gradient(180deg, rgba(255, 255, 255, .82) 0%, rgba(202, 216, 234, .56) 100%);--tine-background: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(238, 244, 251, .5) 14%, rgba(199, 211, 223, .6) 100%);--tine-border: rgba(255, 255, 255, .9);--tine-text: #2d3b4f;--tine-solfege: rgba(45, 59, 79, .62);--tine-active-background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(223, 240, 255, .72) 20%, rgba(140, 195, 255, .8) 100%);--tine-active-ring: rgba(143, 193, 255, .24);--tine-active-text: #163a63;--tine-active-solfege: rgba(22, 58, 99, .72);--sound-hole-background: radial-gradient(circle at 42% 38%, rgba(255, 255, 255, .34), transparent 24%), radial-gradient(circle, rgba(174, 191, 212, .92) 0%, rgba(140, 164, 191, .94) 58%, rgba(117, 141, 168, .98) 100%);--glass-specular: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .08));--glass-edge: rgba(255, 255, 255, .62);--chip-active-border: rgba(122, 184, 255, .92);--chip-active-shadow: 0 18px 38px rgba(102, 154, 214, .24)}.trainer{width:min(1080px,100%);margin:0 auto;display:grid;gap:20px}.hero{padding:12px 4px}.eyebrow{margin:0 0 8px;color:var(--accent-text);letter-spacing:.18em;text-transform:uppercase;font-size:12px}h1{margin:0;font-size:clamp(2.2rem,6vw,4.4rem);line-height:.98}.intro{width:min(700px,100%);margin:16px 0 0;color:var(--text-secondary);line-height:1.7}.panel{border:1px solid var(--panel-border);background:var(--panel-background);-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);border-radius:24px;box-shadow:var(--panel-shadow)}.page-shell[data-theme=modern] .panel,.page-shell[data-theme=modern] .chip,.page-shell[data-theme=modern] .primary,.page-shell[data-theme=modern] .secondary,.page-shell[data-theme=modern] .number-input,.page-shell[data-theme=modern] .board-tip,.page-shell[data-theme=modern] .note-item,.page-shell[data-theme=modern] .kalimba-shell{position:relative}.page-shell[data-theme=modern] .panel:before,.page-shell[data-theme=modern] .chip:before,.page-shell[data-theme=modern] .primary:before,.page-shell[data-theme=modern] .secondary:before,.page-shell[data-theme=modern] .number-input:before,.page-shell[data-theme=modern] .board-tip:before,.page-shell[data-theme=modern] .note-item:before,.page-shell[data-theme=modern] .kalimba-shell:before{content:"";position:absolute;top:1px;right:1px;bottom:1px;left:1px;border-radius:inherit;background:var(--glass-specular);pointer-events:none}.controls{padding:24px;display:grid;gap:20px}.field-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.field{display:grid;gap:12px}.label{font-size:14px;color:var(--text-muted)}.chip-row,.actions{display:flex;flex-wrap:wrap;gap:12px}.chip,.secondary,.primary{border:0;border-radius:999px;cursor:pointer;transition:transform .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease,border-color .18s ease}.chip{padding:12px 16px;background:var(--chip-background);color:var(--chip-text);border:1px solid transparent}.chip.active{background:var(--chip-active-background);color:var(--chip-active-text);transform:translateY(-1px)}.interval-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.range{width:min(100%,320px)}.number-input{width:88px;padding:10px 12px;border-radius:14px;border:1px solid var(--field-border);background:var(--field-background);color:var(--field-text);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.suffix{color:var(--text-secondary)}.primary,.secondary{padding:14px 20px}.primary{background:var(--button-primary-background);color:var(--button-primary-text);border:1px solid var(--field-border);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);box-shadow:inset 0 1px #ffffff70,0 12px 30px #5a769e1f}.secondary{background:var(--button-secondary-background);color:var(--button-secondary-text);border:1px solid var(--field-border);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);box-shadow:inset 0 1px #ffffff70,0 12px 30px #5a769e1a}.primary:hover,.secondary:hover,.chip:hover{transform:translateY(-1px)}.page-shell[data-theme=modern] .chip,.page-shell[data-theme=modern] .primary,.page-shell[data-theme=modern] .secondary{box-shadow:inset 0 1px #ffffffb8,inset 0 -1px #ffffff2e,0 12px 30px #6f8fb51f}.page-shell[data-theme=modern] .chip{border-color:#ffffff85}.page-shell[data-theme=modern] .chip.active,.page-shell[data-theme=modern] .primary:hover,.page-shell[data-theme=modern] .secondary:hover{border-color:var(--glass-edge);box-shadow:inset 0 1px #ffffffd6,inset 0 -1px #ffffff3d,0 16px 36px #6f8fb529}.page-shell[data-theme=modern] .chip.active{border-color:var(--chip-active-border);box-shadow:inset 0 1px #fffffff5,inset 0 -1px #84bfff47,0 0 0 1px #7ab8ff42,var(--chip-active-shadow)}.practice-card{padding:24px;display:grid;gap:20px;min-height:360px}.kalimba-board{padding:24px;display:grid;gap:24px}.board-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}.board-head h2{margin:0;font-size:1.4rem}.board-head p{margin:8px 0 0;color:var(--text-subtle);line-height:1.6}.board-tip{padding:10px 14px;border-radius:999px;background:var(--board-tip-background);color:var(--board-tip-text);border:1px solid var(--field-border);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}.kalimba-shell{position:relative;overflow:hidden;border-radius:28px;padding:32px 18px 36px;background:var(--kalimba-shell-background);border:1px solid var(--panel-border);box-shadow:inset 0 2px 0 var(--kalimba-shell-inner-top),inset 0 -12px 24px var(--kalimba-shell-inner-bottom)}.kalimba-bridge{position:absolute;left:50%;top:34px;width:min(88%,780px);height:16px;transform:translate(-50%);border-radius:999px;background:var(--kalimba-bridge-background);box-shadow:0 6px 14px #00000038}.tines{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:center;gap:8px;padding:18px 0 0}.tine{width:min(48px,calc((100vw - 96px) / 11));min-width:24px;padding:18px 4px 14px;border:1px solid var(--tine-border);border-radius:0 0 18px 18px;background:var(--tine-background);box-shadow:inset 0 1px #fffc,0 10px 24px #00000029;display:grid;align-content:space-between;justify-items:center;color:var(--tine-text);transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}.tine.active{transform:translateY(4px) scale(1.03);background:var(--tine-active-background);box-shadow:inset 0 1px #fffae0e6,0 0 0 2px var(--tine-active-ring),0 14px 28px #b962164d;color:var(--tine-active-text)}.tine-note,.tine-solfege{writing-mode:vertical-rl;text-orientation:mixed;-webkit-user-select:none;user-select:none}.tine-note{font-size:.85rem;font-weight:700}.tine-solfege{font-size:.95rem;color:var(--tine-solfege)}.tine.active .tine-solfege{color:var(--tine-active-solfege)}.sound-hole{width:120px;height:120px;margin:18px auto 0;border-radius:50%;background:var(--sound-hole-background);box-shadow:inset 0 8px 18px #00000061,0 4px 18px #0000002e}.countdown{display:grid;gap:10px}.countdown-head{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--text-secondary)}.countdown-head strong{color:var(--countdown-strong);font-size:1.1rem}.countdown-track{width:100%;height:12px;overflow:hidden;border-radius:999px;background:var(--countdown-track);border:1px solid var(--countdown-border)}.countdown-bar{height:100%;width:0;border-radius:inherit;background:var(--countdown-bar);transition:width .1s linear}.countdown-bar.active{box-shadow:0 0 18px #ffba5d59}.page-shell[data-theme=modern] .countdown-bar.active{box-shadow:0 0 18px #87bfff75}.card-head,.bank-head{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}.status{color:var(--accent-strong)}.meta,.hint,.empty p,.bank-head p{color:var(--text-subtle)}.prompt,.empty{min-height:240px;display:grid;place-items:center;text-align:center;align-content:center}.solfege,.note{margin:0;text-transform:uppercase}.solfege{font-size:clamp(4rem,12vw,8rem);font-weight:800;color:var(--accent-strong);line-height:.9}.note{font-size:clamp(2.4rem,7vw,4rem);font-weight:700}.hint{margin-top:14px}.note-bank{padding:24px}.note-grid{margin-top:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}.note-item{padding:16px;border-radius:18px;background:linear-gradient(180deg,var(--chip-background),rgba(255,255,255,.03));display:grid;gap:6px;border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.note-item strong{font-size:1.3rem;color:var(--accent-strong)}.note-item span{font-weight:600}.note-item small{color:var(--text-subtle)}@media(max-width:720px){.page-shell{padding:20px 14px 32px}.controls,.kalimba-board,.practice-card,.note-bank{padding:18px;border-radius:20px}.field-pair{grid-template-columns:1fr;gap:20px}.prompt,.empty{min-height:220px}.actions>button{flex:1 1 100%}.kalimba-shell{padding:24px 8px 28px}.tines{gap:4px}.tine{width:min(34px,calc((100vw - 56px) / 11));padding-top:14px}.sound-hole{width:88px;height:88px}}