*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow-x:hidden}body{font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;min-height:100vh}button{font-family:inherit;border:none;outline:none;background:none;color:inherit;cursor:pointer}button:focus{outline:none}button:disabled{cursor:not-allowed}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0000001a}::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.piano-container{width:100%;display:flex;justify-content:center;padding:0 4px;box-sizing:border-box;filter:drop-shadow(0 8px 12px rgba(60,40,20,.25)) drop-shadow(0 2px 4px rgba(60,40,20,.15))}.piano{position:relative;width:100%;height:260px;-webkit-user-select:none;user-select:none}.white-keys-row{display:flex;width:100%;height:100%;gap:2px}.white-key{flex:1;height:100%;background:linear-gradient(180deg,#fdfbf7,#f8f4ed 60%,#f0ebe0);border:1px solid #d8d0c0;border-top:none;border-radius:0 0 8px 8px;box-shadow:inset 0 1px #fffc,inset 0 -2px 4px #a091781a;cursor:pointer;transition:all .1s ease;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;position:relative;overflow:hidden}.white-key:hover{background:linear-gradient(180deg,#fffdf9,#faf6ef 60%,#f2ede2)}.white-key.active{background:linear-gradient(180deg,#fff8e8,#fff0d0 40%,#ffe8b8);box-shadow:inset 0 1px #ffffffe6,inset 0 -4px 12px #ffc8644d,0 0 20px #ffc86466;transform:translateY(2px)}.white-key.nav-key{background:linear-gradient(180deg,#f5f0e8,#ede5d6 60%,#e5dcc8);color:#8a8275}.white-key.nav-key:hover{background:linear-gradient(180deg,#f8f3eb,#f0e8d8 60%,#e8dfcb)}.white-key.nav-key.active{background:linear-gradient(180deg,#e8e0d0,#ddd3c0 60%,#d0c5b0);box-shadow:inset 0 1px #fff9,inset 0 -2px 6px #a0917833;transform:translateY(2px)}.nav-icon{display:flex;align-items:center;justify-content:center;opacity:.4}.short-keys-row{position:absolute;top:0;left:0;width:100%;height:60%;pointer-events:none}.short-key{position:absolute;height:100%;background:linear-gradient(180deg,#f0ebe0,#e8e0d0 60%,#ddd3c0);border:1px solid #c8bfae;border-top:1px solid #b8afa0;border-radius:0 0 6px 6px;box-shadow:inset 0 1px #ffffff80,0 3px 6px #3c281426;cursor:pointer;transition:all .1s ease;pointer-events:auto;z-index:2}.short-key:hover{background:linear-gradient(180deg,#f4efe4,#ece4d4 60%,#e1d7c4)}.short-key.active{background:linear-gradient(180deg,#fff8e8,#fec 40%,#ffe4b0);box-shadow:inset 0 1px #fffc,inset 0 -3px 10px #ffbe5059,0 0 16px #ffc86466;transform:translateY(2px)}@media(max-width:600px){.piano{height:200px}}.short-key.block-key.block-subject{background:linear-gradient(180deg,#e8f0ff,#d0e0ff 60%,#b8d0ff);box-shadow:inset 0 1px #fffc,inset 0 -4px 12px #6496ff4d,0 0 16px #6496ff66}.short-key.block-key.block-action{background:linear-gradient(180deg,#e8ffe8,#d0ffd0 60%,#b8f0b8);box-shadow:inset 0 1px #fffc,inset 0 -4px 12px #64c8644d,0 0 16px #64c86466}.short-key.block-selected{background:linear-gradient(180deg,#fff0d8,#ffd8a0 40%,#ffc070)!important;box-shadow:inset 0 1px #ffffffe6,inset 0 -4px 16px #ffa03280,0 0 24px #ffa03299!important;transform:translateY(2px)}.function-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 8px}.func-btn{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border:1.5px solid #c8bfae;border-radius:14px;background:#fff6;color:#8a8275;cursor:pointer;transition:all .2s ease;flex-shrink:0}.func-btn:hover:not(.disabled){border-color:#8a8275;color:#5a5448;background:#ffffffb3}.func-btn:active:not(.disabled){transform:scale(.95)}.func-btn.active{border-color:#5a5448;color:#3a3528;background:#5a544814;box-shadow:0 0 0 2px #5a54481f}.func-btn.disabled{opacity:.3;cursor:not-allowed}.power-btn{width:60px;height:60px}.power-btn.active{border-color:#5a5448;color:#3a3528;background:#5a544814}.func-group{display:flex;gap:14px;flex:1;justify-content:center}.play-btn{width:68px;height:68px;border-radius:18px}.play-btn.playing{border-color:#5a5448;color:#3a3528;background:#5a544814;animation:pulse-play 1.5s ease-in-out infinite}@keyframes pulse-play{0%,to{box-shadow:0 0 #5a544800}50%{box-shadow:0 0 0 4px #5a54481a}}.play-btn.disabled{opacity:.3;cursor:not-allowed}@media(max-width:600px){.func-btn{width:46px;height:46px}.power-btn{width:50px;height:50px}.play-btn{width:58px;height:58px}.func-group{gap:8px}.function-bar{gap:14px}}.status-bar{display:flex;align-items:center;gap:12px;padding:4px 8px;min-height:24px}.led-indicator{width:10px;height:10px;border-radius:50%;background:#ccc;box-shadow:inset 0 1px 2px #0003;transition:all .3s ease;flex-shrink:0}.led-off{background:silver;box-shadow:inset 0 1px 2px #0003}.led-on{background:#5dbb63;box-shadow:0 0 8px #5dbb6399,inset 0 1px 1px #ffffff4d}.led-recording{background:#ff9800;box-shadow:0 0 10px #ff9800b3,inset 0 1px 1px #ffffff4d;animation:led-pulse 1s ease-in-out infinite}.led-analyzing{background:#42a5f5;box-shadow:0 0 10px #42a5f5b3,inset 0 1px 1px #ffffff4d;animation:led-pulse .6s ease-in-out infinite}.led-sample-ready{background:#ffb74d;box-shadow:0 0 8px #ffb74d99,inset 0 1px 1px #ffffff4d}.led-playing{background:#26c6da;box-shadow:0 0 10px #26c6dab3,inset 0 1px 1px #ffffff4d;animation:led-pulse 1.2s ease-in-out infinite}.led-error{background:#ef5350;box-shadow:0 0 10px #ef5350b3,inset 0 1px 1px #ffffff4d;animation:led-pulse .4s ease-in-out infinite}@keyframes led-pulse{0%,to{opacity:1}50%{opacity:.4}}.recording-indicator{display:flex;align-items:center;gap:8px}.rec-progress-bar{width:100px;height:4px;background:#0000001a;border-radius:2px;overflow:hidden}.rec-progress-fill{height:100%;background:#ff9800;border-radius:2px;transition:width .05s linear}.audio-level-bar{width:60px;height:4px;background:#0000001a;border-radius:2px;overflow:hidden}.audio-level-fill{height:100%;background:linear-gradient(90deg,#5dbb63,#ffeb3b,#ef5350);border-radius:2px;transition:width .05s linear}.generated-song-info{display:flex;align-items:center;gap:8px;font-size:12px}.generated-song-info .song-title{font-weight:600;color:#6b6353}.lang-toggle{margin-left:auto;padding:2px 10px;font-size:11px;font-weight:600;line-height:16px;border:1px solid rgba(0,0,0,.15);border-radius:10px;background:transparent;color:#9a9080;cursor:pointer;transition:all .2s ease;flex-shrink:0;-webkit-user-select:none;user-select:none}.lang-toggle:hover{border-color:#0000004d;color:#6b6353}.lang-toggle:active{transform:scale(.95)}.lang-toggle.lang-en{background:#5dbb631a;border-color:#5dbb634d;color:#5dbb63}.lang-toggle.lang-zh{background:#00000008}.settings{min-height:100vh;padding:24px 32px 72px;box-sizing:border-box;font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;background:linear-gradient(180deg,#f5f1ea,#ece4d8);color:#2b2620}.settings__loading{display:flex;align-items:center;justify-content:center;color:#7a5f3a;font-size:18px;padding:60px 0}.settings__header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-bottom:14px;border-bottom:1px solid #ddd0bb}.settings__title{display:flex;align-items:baseline;gap:16px}.settings__title h1{margin:0;font-size:20px;font-weight:600;color:#6b5230}.settings__back{font-size:13px;color:#8b6f47;text-decoration:none}.settings__back:hover{color:#6b5230}.settings__tabs{display:flex;gap:4px;margin:16px 0 0;border-bottom:2px solid #ddd0bb}.settings__tab{padding:8px 24px;font-size:14px;font-weight:500;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;background:transparent;color:#8a7c64;cursor:pointer;transition:all .15s}.settings__tab:hover{color:#6b5230}.settings__tab--active{color:#6b5230;border-bottom-color:#6b5230;font-weight:600}.settings__panel{padding-top:8px}.settings__toolbar{display:flex;align-items:center;gap:10px;padding:12px 0}.settings__count{font-size:12px;color:#a8843e}.settings__btn{padding:7px 16px;border:none;border-radius:7px;font-size:13px;cursor:pointer;transition:opacity .15s,transform .05s}.settings__btn:active{transform:scale(.97)}.settings__btn:disabled{opacity:.6;cursor:not-allowed}.settings__btn--primary{background:#6b5230;color:#fff}.settings__btn--ghost{background:transparent;color:#6b5230;border:1px solid #c8b89e}.settings__hint{margin:4px 0;font-size:12px;color:#8a7c64;line-height:1.6}.settings__hint code{background:#e2d8c6;padding:1px 5px;border-radius:3px;font-size:11px;color:#6b5230}.settings__section{margin-top:20px}.settings__section-title{margin:0 0 10px;font-size:14px;font-weight:700;padding-left:8px;border-left:3px solid #b59a6e}.settings__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:10px}.settings__grid--wide{grid-template-columns:1fr}.card{background:#fffdf9;border:1px solid #e6ddcd;border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:7px}.card--changed{border-color:#d4ad55}.card__head{display:flex;align-items:center;gap:8px}.card__desc{font-size:13px;font-weight:600;color:#4a3f33}.card__vars{font-family:Consolas,Menlo,monospace;font-size:11px;color:#b5722e;background:#f6ece0;padding:1px 6px;border-radius:3px}.card__btns{display:flex;align-items:center;gap:4px;margin-left:auto;flex-shrink:0}.card__field{display:flex;flex-direction:column;gap:4px}.card__lang{font-size:11px;font-weight:600;color:#8a7c64;background:#f0e8da;padding:4px 7px;border-radius:4px;flex-shrink:0;line-height:1.4;align-self:flex-start}.card__lang--en{color:#2a6da8;background:#e0ecf6}.card__textarea{width:100%;box-sizing:border-box;border:1px solid #e0d6c4;border-radius:5px;padding:6px 8px;font-size:13px;font-family:inherit;font-weight:400;color:#1f1a14;resize:vertical;line-height:1.5}.card__textarea:focus{outline:none;border-color:#8b6f47;box-shadow:0 0 0 2px #8b6f471f}.card__textarea--tall{font-family:Consolas,Menlo,PingFang SC,monospace;font-size:12px;line-height:1.6;min-height:280px}.card__preview{background:#f8f5ee;border:1px solid #e0d6c4;border-radius:5px;padding:8px 10px;font-family:Consolas,Menlo,PingFang SC,monospace;font-size:12px;line-height:1.6;color:#4a3f33;white-space:pre-wrap;word-break:break-word;max-height:400px;overflow-y:auto}.card__btn{padding:3px 10px;font-size:12px;border:1px solid #d8cdbb;border-radius:5px;background:#fff;color:#6b5230;cursor:pointer;line-height:1.4}.card__btn:hover{background:#f5efe5}.card__btn--link{border:none;background:transparent;color:#a8843e;padding:3px 4px}.card__btn--link:hover{background:transparent;text-decoration:underline}.card__field-btns{display:flex;gap:4px}.card__btn--confirm{background:#6b5230;color:#fff;border-color:#6b5230}.card__btn--confirm:hover{background:#5a4528}.card__btn--confirm:disabled{opacity:.6;cursor:not-allowed}.settings__toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%);background:#6b5230;color:#fff;padding:10px 24px;border-radius:8px;font-size:14px;box-shadow:0 4px 16px #0003;z-index:100}.settings__empty{text-align:center;padding:60px 20px;font-size:14px;color:#8a7c64}.lyrics-card{background:#fffdf9;border:1px solid #e6ddcd;border-radius:8px;padding:14px 16px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px}.lyrics-card__head{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.lyrics-card__title{font-size:15px;font-weight:600;color:#4a3f33}.lyrics-card__badge{font-size:11px;font-weight:500;padding:2px 8px;border-radius:10px}.lyrics-card__badge--humming{background:#8a5a8c1f;color:#8a5a8c}.lyrics-card__badge--blocks{background:#2d7a5f1f;color:#2d7a5f}.lyrics-card__blocks{font-size:12px;color:#6b5230;background:#f6ece0;padding:2px 8px;border-radius:4px}.lyrics-card__meta{font-size:11px;color:#a09889;margin-left:auto}.lyrics-card__body{padding:8px 12px;background:#f8f5ee;border-radius:6px;border-left:3px solid #d4ad55}.lyrics__section{font-size:12px;font-weight:700;color:#8a5a8c;text-transform:uppercase;letter-spacing:.5px;margin-top:8px;margin-bottom:2px}.lyrics__section:first-child{margin-top:0}.lyrics__line{font-size:14px;color:#3a3328;line-height:1.8}.lyrics-card__audio{width:100%;height:32px}.app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;box-sizing:border-box;font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;background-color:#8b6f47;background-image:repeating-linear-gradient(90deg,transparent 0px,rgba(0,0,0,.02) 1px,transparent 2px,transparent 5px),repeating-linear-gradient(88deg,transparent 0px,rgba(60,40,20,.04) 20px,transparent 40px,rgba(60,40,20,.03) 60px,transparent 80px,rgba(80,55,25,.05) 120px,transparent 140px),radial-gradient(ellipse 200px 40px at 20% 30%,rgba(60,40,20,.08),transparent),radial-gradient(ellipse 150px 30px at 70% 60%,rgba(60,40,20,.06),transparent),radial-gradient(ellipse 180px 35px at 40% 80%,rgba(80,55,25,.05),transparent),linear-gradient(180deg,#a08055,#8b6f47,#7a5f3a 80%,#6b5230)}.device-frame{width:100%;max-width:960px;background:linear-gradient(160deg,#faf6ee,#f5efe3 40%,#ede5d4);border-radius:24px;padding:28px 32px 32px;display:flex;flex-direction:column;gap:20px;box-shadow:0 30px 50px -10px #28190a66,0 15px 25px -5px #28190a4d,0 5px 10px -2px #28190a33,inset 0 2px #fffc,inset 0 -2px 4px #a08c6e26;border:1px solid rgba(180,160,130,.3);border-bottom:3px solid rgba(160,140,110,.25)}.device-top{display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 4px 8px;border-bottom:1px solid rgba(180,160,130,.15)}.logo-text{font-size:24px;font-weight:700;letter-spacing:1px;color:#6b6353}.nfc-slot{display:flex;align-items:center;gap:8px;width:266px;height:14px;position:relative}.nfc-slot-line{flex:1;height:6px;background:linear-gradient(180deg,#a89a82,#8a7c66 40%,#6b5e4a,#8a7c66 60%,#a89a82);border-radius:3px;box-shadow:inset 0 2px 3px #3c2d1966,inset 0 -1px 1px #ffffff4d,0 1px #ffffff80}.nfc-icon{color:#a89a82;flex-shrink:0}.desktop-settings-btn{position:fixed;bottom:20px;right:20px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#ffffff1f;color:#ffffff59;text-decoration:none;transition:all .2s ease;z-index:50}.desktop-settings-btn:hover{background:#fff3;color:#fff9;transform:scale(1.08)}.desktop-settings-btn:active{transform:scale(.95)}@media(max-width:768px){.app{padding:20px 10px}.device-frame{padding:18px 18px 22px;border-radius:18px}.logo-text{font-size:20px}.nfc-slot{width:210px}}@media(max-width:480px){.app{padding:10px 5px}.device-frame{padding:14px 12px 18px;border-radius:14px;gap:10px}.logo-text{font-size:18px}.nfc-slot{width:180px}}