:root{color-scheme:light;--paper:#f6f3ec;--ink:#272b29;--muted:#69716a;--line:#d9ddd3;--accent:#bc452e;--green:#2b654b;font-family:system-ui,-apple-system,'Segoe UI','Noto Sans JP',sans-serif;background:var(--paper);color:var(--ink)}
.midi-import{border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:.78rem;margin:0 0 16px}.midi-import summary,#fret-details summary{cursor:pointer;font-weight:650}.midi-inputs{display:grid;grid-template-columns:1fr 1.5fr;gap:18px;margin-top:18px}.midi-inputs input{min-width:0;max-width:100%;font-size:.78rem}.midi-inputs input[type=url]{border:1px solid var(--line);padding:11px;border-radius:7px;background:#fffdf8}.midi-inputs form{display:flex;gap:8px;align-items:end}.midi-inputs form label{flex:1;min-width:0}.midi-options{display:flex;align-items:end;gap:15px;flex-wrap:wrap;margin:17px 0}.midi-options>label:first-child{flex:1;min-width:150px;max-width:430px}.check-label{flex-direction:row;align-items:center;gap:8px;min-height:43px;font-size:.75rem}.check-label input{accent-color:var(--green);width:17px;height:17px}.song-credit{font-size:.65rem;color:var(--muted);line-height:1.9;margin:0 0 20px}.song-credit a{text-decoration:underline}.chord-panel{background:#edece2;border:1px solid var(--line);border-radius:15px;padding:20px;margin:0 0 24px}.chord-example{display:flex;gap:28px;align-items:center}.chord-example>div:first-child{flex:0 0 160px}.chord-example h2{text-align:center}.chord-example h2 strong{font-size:1.5rem;color:var(--green)}.chord-example p{font-size:.75rem;line-height:1.9;margin:8px 0}.chord-example .small{font-size:.68rem}#chord-diagram svg{display:block;width:160px;height:140px}#chord-diagram line{stroke:#8d978b;stroke-width:1}#chord-diagram .nut{stroke-width:4}#chord-diagram circle{fill:var(--green)}#chord-diagram text{text-anchor:middle;font:11px system-ui;fill:var(--ink)}#chord-diagram .finger{fill:white;font-weight:700}#fret-details{border-top:1px solid #ced3c7;padding-top:15px;font-size:.8rem}#fret-details[open]{margin-top:12px}#fret-details .small{margin:15px 0 8px}.fret-row{display:grid;grid-template-columns:40px repeat(5,minmax(35px,1fr));gap:5px;margin:5px 0;align-items:center}.fret-row>span{font-size:.7rem;color:var(--muted)}.fret-row button{position:relative;background:#fffdf8;padding:8px 0;min-height:40px}.fret-row button[aria-pressed=true]{background:var(--green);color:#fff;border-color:var(--green)}.fret-actions{display:flex;justify-content:space-between;gap:8px;margin-top:13px}.fret-actions>div{display:flex;gap:6px}.fret-actions button{min-width:45px}.score{max-height:440px;overflow:auto}.chord-score{display:grid;grid-template-columns:repeat(6,minmax(35px,1fr));gap:5px}.chord-score button{padding:12px 0;font-size:1rem;background:#f3f0e5}.chord-score small{display:block;font-size:.6rem;font-weight:400;margin-top:6px}.chord-score .current{background:#f5dfd3;outline:1px solid #cf8069}.chord-score .passed{opacity:.45}.chord-score .preview{outline:2px solid var(--green);background:#e1eadb}.chord-score .outside{opacity:.22}.backing{margin-top:2px}.setup:has(#style-label:not([hidden])){grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
@media(max-width:650px){.midi-inputs{grid-template-columns:1fr;gap:18px}.midi-inputs form{gap:7px}.midi-inputs form button{padding:11px;font-size:.75rem}.chord-panel{padding:16px}.chord-example{gap:12px;align-items:start}.chord-example>div:first-child{flex-basis:130px}#chord-diagram svg{width:130px;height:130px}.chord-example p{font-size:.66rem}.chord-example .small{font-size:.62rem}.fret-row{grid-template-columns:30px repeat(5,minmax(30px,1fr));gap:4px}.fret-actions button{padding:10px 12px}.midi-options{gap:12px}.midi-options select{font-size:.74rem}.midi-options .check-label{width:100%}}
.tab-column.preview,.kunkun .preview{outline:2px solid var(--green);outline-offset:-2px;background:#e1eadb}.tab-column.preview em{background:#e1eadb}
@media(max-width:650px){.intro{padding:23px 0 17px!important}.intro .edition{display:none}.intro h1{font-size:3rem;margin-bottom:10px}.intro .lead{font-size:.8rem;line-height:1.7}.intro .lead br{display:none}.setup{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.setup:has(label[hidden]){grid-template-columns:1fr}.setup label{min-width:0}.setup select{font-size:.75rem;padding-right:22px}.listening .target{height:94px}}
*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,select{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #df9b39;outline-offset:4px}button{border:1px solid var(--line);background:transparent;color:inherit;border-radius:9px;padding:11px 16px;font-size:.88rem;font-weight:650}button:hover:not(:disabled){border-color:var(--accent)}[hidden]{display:none!important}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}.page{max-width:1120px;margin:auto;padding:0 34px}.topbar{display:flex;justify-content:space-between;align-items:center;min-height:76px;border-bottom:1px solid var(--line);gap:12px;font-size:.78rem}.topbar>div{display:flex;align-items:center;gap:12px}.topbar span{font-size:.7rem;color:var(--muted)}.topbar button{font-size:.72rem;padding:7px 10px}.intro{display:flex;justify-content:space-between;align-items:center;padding:48px 0 30px}.eyebrow{font-size:.67rem;letter-spacing:.17em;font-weight:750;color:var(--accent);margin:0 0 14px}h1{font-size:clamp(2.9rem,6vw,4.5rem);font-weight:650;letter-spacing:-.05em;line-height:1.12;margin:0 0 18px}.lead{font-size:.95rem;line-height:1.9;margin:0;color:var(--muted)}.edition{font-size:.65rem;letter-spacing:.13em;text-align:right;line-height:2;color:var(--muted)}.instrument-switch{display:flex;gap:6px;margin:0 0 23px;padding:5px;background:#e9e9df;border-radius:13px;max-width:380px}.instrument-switch button{flex:1;border-color:transparent;padding:12px}.instrument-switch button[aria-pressed=true]{background:#fff;box-shadow:0 2px 6px #27302810}.instrument-switch span{font-size:.64rem;opacity:.6;padding-left:8px}.setup{display:flex;gap:16px;align-items:end}label{display:flex;flex-direction:column;gap:7px;font-size:.72rem;color:var(--muted)}select{border:1px solid var(--line);background:#fffdf8;color:var(--ink);border-radius:7px;padding:10px 34px 10px 11px;font-size:.86rem;max-width:100%;min-height:43px}.setup>label:first-child{flex:1;max-width:430px}.lesson-detail{font-size:.8rem;color:var(--muted);line-height:1.8;margin:14px 0 24px;min-height:23px}.workspace{display:grid;grid-template-columns:345px minmax(0,1fr);gap:22px;align-items:start}.listening{background:var(--ink);color:#f6f3ec;border-radius:18px;padding:24px}.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}h2{font-size:.8rem;font-weight:600;margin:0}.card-top>span{font-size:.65rem;color:var(--muted)}.listening .card-top>span{color:#b7c3b4}.target{height:138px;display:flex;justify-content:center;align-items:center;gap:17px}.target>span:first-child{font-size:6rem;font-weight:550;line-height:1}.target>span:last-child{font-size:1.25rem;color:#bdc9bc}.target.kanji>span:first-child{font-family:serif;font-size:5.7rem}.position{text-align:center;margin:0 0 14px;font-size:.85rem;min-height:1.4em}.reference{display:block;color:#dce9d9;border-color:#586055;margin:0 auto;font-size:.76rem;padding:8px 15px}.tuner{display:flex;align-items:center;gap:11px;margin:23px 0 11px;font-size:.63rem;color:#aab6a5}.tuner-track{position:relative;flex:1;height:25px;background:linear-gradient(90deg,#ffffff08 42%,#8cbf842e 42%,#8cbf842e 58%,#ffffff08 58%);border-radius:4px}.tuner-track i{position:absolute;left:50%;top:0;height:25px;width:1px;background:#90af86}.tuner-track b{position:absolute;top:3px;left:50%;width:4px;height:19px;background:#e5ab68;border-radius:3px;transform:translateX(-50%);transition:left .1s}.heard{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.66rem;color:#b0bbab}.heard strong{font-size:1.1rem;color:#fff;min-width:45px;text-align:center}.level{height:3px;margin-top:12px;background:#ffffff18;overflow:hidden;border-radius:2px}.level span{display:block;background:#94bf87;height:100%;width:0;transition:width .1s}#feedback{font-size:.82rem;line-height:1.8;min-height:3.6em;margin:16px 0 14px;color:#e5eadf}.primary{background:#dfb17c;border-color:#dfb17c;color:#242b23}.secondary{border-color:#77826f;color:#eef1e9}.start-buttons{display:grid;gap:9px}.transport{display:flex;gap:9px;margin-top:10px}.transport button{flex:1;border-color:#586055;color:#d5decf;font-size:.75rem;padding:9px}.mic-note{color:#a9b6a3;font-size:.62rem;line-height:1.8;margin:16px 0 0}.score-card{min-width:0;background:#fffdf8;border:1px solid var(--line);border-radius:18px;padding:24px}progress{appearance:none;width:100%;height:3px;border:0;border-radius:2px;margin:16px 0;background:#e9eade}progress::-webkit-progress-bar{background:#e9eade}progress::-webkit-progress-value{background:var(--green)}progress::-moz-progress-bar{background:var(--green)}.small{font-size:.72rem;color:var(--muted);line-height:1.8;margin:0 0 20px}.score{margin:0 0 23px;overflow-x:auto;padding:4px 3px 10px;scrollbar-width:thin}.tab-block{display:grid;grid-template-columns:25px repeat(6,minmax(35px,1fr));row-gap:0;min-width:260px;margin-bottom:15px}.tab-label{font-size:.62rem;color:var(--muted);display:flex;align-items:center;justify-content:start}.tab-column{display:grid;grid-template-rows:repeat(6,27px);border:0;padding:0;border-radius:8px;background:transparent;min-width:0;font-weight:600}.tab-column>span{position:relative;display:grid;place-items:center;font-size:.92rem}.tab-column>span:before{content:'';height:1px;left:0;right:0;background:#d2d7cb;position:absolute;top:50%;z-index:0}.tab-column em{position:relative;z-index:1;background:#fffdf8;padding:0 6px;font-style:normal;min-width:20px}.tab-column.current{background:#f5dfd3;outline:1px solid #cf8069}.tab-column.current em{background:#f5dfd3;color:#a33f29}.tab-column.passed{opacity:.4}.tab-column.outside{opacity:.22}.kunkun{display:grid;grid-template-rows:repeat(4,72px);grid-auto-flow:column;grid-auto-columns:70px;direction:rtl;justify-content:start;gap:0;min-width:0}.kunkun button{border:1px solid #deded1;border-radius:0;font-family:serif;font-size:1.8rem;padding:8px;direction:ltr;background:#fcfaf3}.kunkun button small{display:block;font:10px system-ui;color:var(--muted);margin-top:2px}.kunkun .current{background:#f5dfd3;box-shadow:inset 0 0 0 2px #cf8069;color:#a33f29}.kunkun .passed{color:#a2ad9d}.kunkun .outside{opacity:.3}.loop{border-top:1px solid var(--line);padding:16px 0;display:flex;align-items:center;justify-content:space-between;gap:10px}.loop>label{flex-direction:row;align-items:center;font-size:.8rem;color:var(--ink);white-space:nowrap}.loop input{accent-color:var(--green);width:16px;height:16px}.loop>div{display:flex;gap:7px;align-items:end}.loop>div>span{padding-bottom:12px;color:var(--muted)}.loop select{padding:7px 20px 7px 9px;min-height:37px;width:66px}.demo{display:flex;align-items:end;gap:12px;padding:16px 0;border-top:1px solid var(--line)}.demo>button{flex:1;min-height:43px;font-size:.76rem;padding:10px 8px}.demo select{font-size:.75rem;padding-right:23px}.practice-note{font-size:.7rem;color:var(--muted);line-height:1.9;margin:15px 0 0}.touch-panel{border-top:1px solid var(--line);padding:16px 0 4px}.touch-panel>p{font-size:.72rem;line-height:1.8;color:var(--muted);margin:0 0 12px}#touch-keys{display:flex;flex-wrap:wrap;gap:7px}#touch-keys button{background:#f3f0e5;min-width:52px;font-size:.82rem}#touch-keys small{display:block;font-size:.6rem;font-weight:400;color:var(--muted);margin-top:5px}.help{margin:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:19px 0;font-size:.8rem}.help summary{cursor:pointer;font-weight:600}.help>div{max-width:760px;line-height:2;color:var(--muted);padding-top:8px}.help label{max-width:250px}footer{display:flex;justify-content:space-between;gap:15px;padding:10px 0 35px;font-size:.64rem;color:var(--muted);letter-spacing:.08em}@media(max-width:850px){.workspace{grid-template-columns:300px minmax(0,1fr);gap:15px}.page{padding:0 22px}.listening,.score-card{padding:20px}.loop{align-items:start;flex-direction:column}.loop>div{align-self:end}}@media(max-width:650px){.page{padding:0 18px}.topbar{min-height:61px}.topbar span{font-size:.6rem}.intro{padding:29px 0 24px}.edition{font-size:.52rem;align-self:start;padding-top:7px}.eyebrow{font-size:.58rem}h1{margin-bottom:13px}.lead{font-size:.85rem}.instrument-switch{max-width:none;margin-bottom:19px}.setup{flex-direction:column;align-items:stretch;gap:12px}.setup>label:first-child{max-width:none}.lesson-detail{margin:12px 0 18px;font-size:.75rem}.workspace{grid-template-columns:1fr;gap:17px}.listening{padding:21px}.target{height:110px}.target>span:first-child{font-size:5rem}.target.kanji>span:first-child{font-size:4.7rem}.start-buttons{grid-template-columns:1fr 1fr}.tuner{margin-top:18px}#feedback{min-height:1.8em;margin:12px 0}.mic-note{text-align:center}.score-card{padding:20px 17px}.loop{flex-direction:row;align-items:center}.loop>div{align-self:auto}.score{margin-bottom:14px}.help{margin-top:23px}.topbar>div{gap:6px}.kunkun{grid-auto-columns:66px;grid-template-rows:repeat(4,70px)}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}