:root{color-scheme:dark;--bg:#101413;--panel:#191f1c;--line:#343d36;--text:#f0f3ed;--muted:#abb6ab;--accent:#c4ee9a}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif}main{max-width:1240px;margin:auto;padding:28px 36px}header,.brand,.section-title,.panel-bottom,.piano-footer,.record-top,.record-controls,footer,.actions,.volume{display:flex;align-items:center;justify-content:space-between;gap:18px}header{margin-bottom:30px}.brand{justify-content:flex-start;gap:14px}.logo{background:var(--accent);color:var(--bg);font-size:32px;font-weight:900;width:46px;text-align:center;border-radius:12px;line-height:46px}h1{font-size:26px;margin:0;letter-spacing:2px}h1 small{font-size:14px;color:var(--muted);font-weight:400;letter-spacing:1px;margin-left:14px}.tuning,.eyebrow{font-size:12px;letter-spacing:1.5px;color:var(--muted)}section{margin-bottom:22px}h2{font-size:20px;letter-spacing:1px;margin:0}.notes-panel,.record-panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px}.section-title{margin-bottom:18px}label{font-size:14px}form label{display:block;color:var(--muted);margin-bottom:8px}.input-row{display:flex;gap:12px}input[type=text],#noteInput{min-width:0;flex:1;background:#101613;border:1px solid #475247;border-radius:10px;padding:13px 16px;color:var(--text);font:20px/1.5 ui-monospace,monospace}button{font:inherit;font-size:14px;border:1px solid #49534b;background:#222b25;color:var(--text);border-radius:9px;padding:10px 20px;cursor:pointer;transition:background .12s,transform .12s}button:hover{background:#364339}button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button.primary{background:var(--accent);color:#172015;border-color:var(--accent);font-weight:600}button:disabled{opacity:.4;cursor:default}.hint{font-size:14px;color:var(--muted);margin:10px 0 18px}.note-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0}.note{min-width:94px;min-height:92px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#242e27;border:1px solid #4b5b4b;border-bottom:4px solid #56694d;border-radius:12px;touch-action:none;user-select:none}.note strong{font:26px/1.5 ui-monospace,monospace}.note small{font-size:12px;color:#b5c4b1}.note.active{background:var(--accent);color:#111b10;transform:translateY(2px)}.note.active small{color:#32462b}.panel-bottom{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}.piano-panel{padding:22px 0 10px}.piano-panel>.section-title{padding:0 5px}.piano-panel .hint{margin:4px 0 0}.quiet{background:transparent}.piano-scroll{overflow-x:auto;border:8px solid #29312b;border-top:16px solid #29312b;border-radius:10px;background:#29312b;scrollbar-color:#84927d #29312b;scrollbar-width:thin;padding-bottom:10px}.keyboard{height:204px;position:relative;width:2392px;user-select:none}.key{position:absolute;top:0;border-radius:0 0 5px 5px;padding:0;display:flex;justify-content:center;align-items:flex-end;touch-action:none;user-select:none;font:12px/1.5 ui-monospace,monospace}.white{height:204px;width:46px;background:linear-gradient(#fdfdf7,#e3e7dc);border:1px solid #949e90;color:#4b5748;padding-bottom:13px}.black{height:126px;width:28px;background:linear-gradient(90deg,#131914,#343d34,#141a15);border:1px solid #060b07;border-bottom:5px solid #080c09;color:#c5cebf;z-index:2;padding-bottom:10px;font-size:12px}.white:hover{background:#e3eed7}.black:hover{background:#43513f}.key.active{background:var(--accent);color:#1b2a13;border-color:#819b67}.piano-footer{padding:14px 5px;color:var(--muted);font-size:14px}.volume{gap:10px}.volume input{width:100px;accent-color:var(--accent)}.record-top .section-title{justify-content:flex-start;margin-bottom:0}.record-top .hint{margin-bottom:16px}.switch-label{display:flex;align-items:center;gap:10px;cursor:pointer;white-space:nowrap}.switch-label input{position:absolute;opacity:0;width:44px;height:26px}.switch{width:44px;height:26px;background:#4a544b;border-radius:20px;position:relative}.switch:after{content:"";position:absolute;left:4px;top:4px;width:18px;height:18px;background:#e9efe5;border-radius:50%;transition:.15s}.switch-label input:checked+.switch{background:var(--accent)}.switch-label input:checked+.switch:after{left:22px;background:#24301b}.switch-label input:focus-visible+.switch{outline:3px solid white;outline-offset:3px}.record-controls{border-top:1px solid var(--line);padding-top:18px}#recordStatus{font-size:14px;color:var(--muted)}.timeline{display:flex;gap:7px;overflow-x:auto;min-height:80px;align-items:center;padding:14px 0}.event{flex-shrink:0;padding:6px 12px;border-left:3px solid var(--accent);background:#29352a;border-radius:4px;font-size:14px}.event small{display:block;font:12px/1.6 ui-monospace,monospace;color:var(--muted)}.empty{font-size:14px;color:var(--muted)}footer{font-size:12px;color:#9aa799;margin:30px 4px 10px}#errors{font-size:14px;color:#ffc58e}button{ -webkit-tap-highlight-color:transparent}@media(max-width:650px){main{padding:20px 16px}header{margin-bottom:24px}.tuning{display:none}h1 small{display:block;margin:0;font-size:12px}h1{font-size:23px;line-height:1.3}.notes-panel,.record-panel{padding:20px 16px}.section-title{gap:8px}.eyebrow{font-size:12px;letter-spacing:0}.input-row{flex-wrap:wrap}#noteInput{width:100%;flex-basis:100%;font-size:18px}.input-row .primary{width:100%}.note-buttons{gap:8px}.note{min-width:calc((100% - 24px)/4);padding:8px;min-height:80px}.note strong{font-size:22px}.panel-bottom{align-items:flex-start;gap:8px;flex-direction:column}.record-top{align-items:flex-start;flex-direction:column;gap:2px}.record-top .section-title{gap:14px}.record-controls{margin-top:18px;flex-wrap:wrap}.actions{gap:8px;width:100%}.actions button{flex:1}.piano-footer{align-items:flex-start;gap:10px;flex-wrap:wrap}footer{align-items:flex-start;flex-direction:column;gap:5px}.quiet{padding:8px 12px}.keyboard{height:190px}.white{height:190px}}

.instrument-panel{display:flex;align-items:center;gap:16px;padding:18px 22px;background:var(--panel);border:1px solid var(--line);border-radius:14px}.instrument-panel label{font-size:16px;white-space:nowrap}.instrument-panel select{font:inherit;color:var(--text);background:#263427;border:1px solid #617455;border-radius:8px;padding:10px 38px 10px 14px;min-width:150px}.instrument-panel select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.instrument-panel p{color:var(--muted);font-size:14px;margin:0}@media(max-width:650px){.instrument-panel{flex-wrap:wrap;padding:16px}.instrument-panel select{flex:1}.instrument-panel p{flex-basis:100%}}

.instrument-panel{flex-wrap:wrap}.sample-info{flex-basis:100%;font-size:14px;color:var(--accent)}.sample-info button{margin-left:12px}footer a{color:var(--muted)}

[hidden]{display:none!important}.notation-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0}.notation-toolbar select,.notation-toolbar input{font:inherit;color:var(--text);background:#263427;border:1px solid #617455;border-radius:8px;padding:8px 12px}.notation-toolbar input{width:90px}#scorePaper{background:#fff;color:#172015;border-radius:10px;padding:18px;overflow:auto;margin:18px 0;min-height:120px}#scorePaper svg{min-width:620px}#scorePaper>p{margin:5px 0 16px}.jianpu-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:22px}.jianpu-cell{display:inline-flex;flex-direction:column;align-items:center;position:relative;min-width:28px;padding:7px 2px}.jianpu-number{font:24px/1.6 Georgia,serif;white-space:pre}.jianpu-number.eighth{border-bottom:1.5px solid}.jianpu-number.sixteenth{border-bottom:4px double}.octave-dots{font:14px/14px sans-serif;min-height:14px}.jianpu-tie{position:absolute;top:-6px;right:-18px;font-size:30px}.jianpu-bar{font-size:36px;margin:0 10px}.voice-label{font-size:14px;color:#53624d}

.header-tools{display:flex;align-items:center;gap:18px}#languageToggle{white-space:nowrap;padding:8px 14px}html[lang=en] h1{letter-spacing:0}html[lang=en] .record-top{flex-wrap:wrap}

.scale-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.scale-card{padding:18px;border:1px solid var(--line);border-radius:12px;background:#141b16}.scale-card h3{font-size:17px;margin:0 0 8px;line-height:1.5}.scale-style{font-size:14px;color:var(--muted);margin:6px 0}.scale-notes{font:18px/1.6 ui-monospace,monospace;overflow-wrap:anywhere;color:var(--accent)}#scaleStatus{font-size:14px;color:var(--accent)}@media(max-width:650px){.scale-grid{grid-template-columns:1fr}}
/* Keep touch performance controls out of iOS text selection and callout menus. */
.note,.note *,.key,.key *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}