:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#30312f;background:#f7f6f2;font-synthesis:none;--orange:#df6546;--muted:#777972}*{box-sizing:border-box}body{margin:0}button,a,input,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit;cursor:pointer}button{color:inherit}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #df6546;outline-offset:5px}header{height:100px;max-width:1280px;margin:auto;padding:0 48px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;font-size:23px;font-weight:750}.brand-en{font-size:10px;letter-spacing:2px;border-left:1px solid #d9d9d0;margin-left:6px;padding-left:17px;color:#6c6e66}.logo{display:flex;gap:3px;align-items:center;height:30px}.logo i{width:5px;background:var(--orange);border-radius:4px;height:21px}.logo i:nth-child(2){height:30px}.logo i:nth-child(3){height:25px}.logo i:nth-child(4){height:16px}.help{background:none;border:0;font-size:13px}.help span{margin-left:12px;color:var(--orange)}main{max-width:1120px;margin:auto;padding:0 28px}.intro{padding:44px 0 40px;text-align:center}.eyebrow{font-size:12px;letter-spacing:3px;color:#74766c;margin-bottom:18px}h1{font-size:clamp(34px,4.4vw,55px);line-height:1.3;letter-spacing:-2px;margin:0;font-weight:750;position:relative;display:inline-block}h1>span:first-child{color:var(--orange)}.spark{position:absolute;right:-55px;top:-19px;color:var(--orange);font-size:43px;transform:rotate(12deg);font-weight:400}.intro p{font-size:14px;line-height:1.9;color:var(--muted);margin:19px 0 0}.mobile{display:none}.instrument{background:#eae9e2;padding:24px 28px 17px;border-radius:19px;border:1px solid #deded4;box-shadow:0 14px 30px #45423308,0 3px 0 #d9d8ce}.instrument-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;font-size:12px}.sound-label{display:flex;gap:10px;align-items:center;font-weight:600}.status-dot{width:6px;height:6px;background:#73927d;border-radius:50%}.small{font-size:10px;margin-left:8px;font-weight:400;color:#7b7e72;padding:4px 8px;border:1px solid #cccfc2;border-radius:4px}.volume{display:flex;gap:12px;align-items:center;color:#6c6f65}.volume input{width:85px;accent-color:#777e70;height:3px}.keys{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.key{height:238px;background:linear-gradient(100deg,#fffefb,#fbfaf6);border:1px solid #d5d5cc;border-bottom:6px solid #d8d8cf;border-radius:5px 5px 11px 11px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:29px;box-shadow:0 3px 4px #464a3510;touch-action:none;user-select:none;transition:transform .09s,background .09s}.key .note{font-size:38px;line-height:1.2;font-weight:500}.key .solfege{font-size:12px;color:#8b8b80;letter-spacing:1px;margin-top:12px}.key .letter{position:absolute;top:17px;left:17px;font-size:10px;color:#b0b1a5}.key.active{background:#e57c5e;border-color:#d26646;border-bottom-color:#ba5236;color:white;transform:translateY(4px);box-shadow:0 0 25px #df654627}.key.active .solfege,.key.active .letter{color:#fff8ea}.key.expected:not(.active):after{content:'';width:5px;height:5px;background:var(--orange);border-radius:50%;position:absolute;bottom:13px}.instrument-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:20px;font-size:10px;color:#75786c;gap:12px}kbd{font:inherit;background:#f4f4ef;border:1px solid #d2d4c8;padding:2px 5px;border-radius:3px}.divider{padding:0 12px;color:#b0b1a4}#played{color:#838477}.library{margin-top:47px}.library-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}h2{font-size:21px;letter-spacing:-.5px;margin:0}.library-heading p{font-size:12px;color:var(--muted);margin:10px 0 0}.library-note{font-size:12px;color:#8a8b7e}.song-layout{display:grid;grid-template-columns:222px 1fr;gap:24px}#songs{display:flex;flex-direction:column;gap:8px}.song{display:flex;align-items:center;text-align:left;gap:13px;padding:17px 16px;border:1px solid transparent;border-radius:9px;background:transparent;width:100%}.song.selected{background:#f0e9df;border-color:#e6dcd0}.song-index{font-size:12px;color:#97998a}.song.selected .song-index{color:var(--orange)}.song-name{font-size:14px;font-weight:600}.song-sub{display:block;font-size:10px;font-weight:400;color:#818475;margin-top:6px}.song-arrow{margin-left:auto;color:var(--orange);opacity:0}.song.selected .song-arrow{opacity:1}.score-panel{background:#fffefa;border:1px solid #e4e3d9;border-radius:12px;padding:23px 26px;min-width:0}.score-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.tag{font-size:9px;letter-spacing:1px;color:#899078}h3{margin:7px 0 0;font-size:18px}.playback{display:flex;gap:13px;align-items:center}select{border:0;background:transparent;color:#777b6f;font-size:11px;max-width:100px}.listen{background:var(--orange);border:0;border-radius:6px;padding:10px 16px;color:white;font-size:12px;white-space:nowrap}.listen:hover{background:#c95438}.score{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:16px;margin:26px 0 24px}.phrase{display:flex;gap:4px;align-items:center;justify-content:space-between;border-right:1px solid #ecebe1;padding-right:14px}.score-note{font-size:19px;min-width:23px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:5px;position:relative}.score-note.half:after{content:'';position:absolute;bottom:0;left:7px;right:7px;border-bottom:1px solid}.score-note.current{background:#f9e4d9;color:#c44e30}.score-note.done{color:#aaa99e}.score-note.dash{color:#a2a397;font-size:14px}.score-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:15px;border-top:1px solid #eeede5;font-size:10px;color:#888b7d}#restart{border:0;background:none;font-size:10px;color:#72776a;padding:5px}.closing{display:flex;justify-content:center;gap:20px;align-items:center;margin:42px 0 37px;color:#8b8d80;font-size:11px}.closing span{font-size:11px;letter-spacing:6px;color:#b0b0a0}footer{max-width:1184px;padding:22px 32px;margin:auto;border-top:1px solid #e4e4d9;display:flex;justify-content:space-between;font-size:10px;color:#939588}dialog{border:1px solid #deddd2;border-radius:16px;padding:36px;max-width:460px;width:calc(100% - 32px);background:#fffefa;color:#30312f}dialog::backdrop{background:#27282265;backdrop-filter:blur(4px)}dialog p{font-size:14px;line-height:1.9;color:#74776a}#close-guide{position:absolute;right:15px;top:10px;border:0;background:none;font-size:24px}@media(max-width:700px){header{height:76px;padding:0 22px}.brand-en{font-size:8px}.intro{padding:30px 0}.spark{font-size:28px;right:-26px;top:-13px}main{padding:0 18px}.intro p{font-size:12px}.mobile{display:block}.instrument{padding:18px 12px 15px;border-radius:13px}.instrument-top{margin-bottom:20px}.keys{gap:4px}.key{height:188px;padding-bottom:28px}.key .note{font-size:28px}.key .solfege{font-size:10px}.key .letter{left:9px;top:12px;font-size:9px}.volume{gap:5px;font-size:10px}.volume input{width:54px}.small{margin-left:0}.instrument-bottom{font-size:9px;justify-content:center}#played{display:none}.divider{padding:0 5px}.library{margin-top:35px}.library-note{display:none}h2{font-size:19px}.song-layout{grid-template-columns:1fr;gap:15px}#songs{flex-direction:row;gap:5px}.song{padding:12px 8px;gap:7px}.song-name{font-size:11px}.song-sub{font-size:9px}.song-index{font-size:10px}.song-arrow{display:none}.score-panel{padding:20px 15px}.score{column-gap:12px;row-gap:16px}.phrase{padding-right:7px;gap:0}.score-note{font-size:16px;min-width:18px}.score-note.half:after{left:4px;right:4px}.playback{gap:5px}.listen{padding:10px}.closing{flex-direction:column;gap:12px;margin:30px 0}footer{padding:20px;font-size:9px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}