:root{color-scheme:light;--page: #f6f7f3;--surface: #fff;--ink: #25382e;--muted: #626d63;--line: #e0e5de;--green: #216b53;--green-hover: #17503e;--green-soft: #eaf1e9;--green-pale: #f3f6ef;--orange: #ae5837;--orange-soft: #f8eee7;--ochre: #8b692b;--memory: #eef2e8;--memory-ink: #355332;--board: #fbfcf8;--position: #eaf1e5;--on-accent: #fff;--string: #aeb7a7;--fret: #d4ddcd;--black-key: #26312b;--white-key: #fff;--radius: 3px;--font: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;font-family:var(--font);color:var(--ink);background:var(--page);font-synthesis:none}:root[data-theme=dark]{color-scheme:dark;--page: #171e1a;--surface: #202923;--ink: #e0e8de;--muted: #a8b4a8;--line: #38443a;--green: #8dc5a6;--green-hover: #abdabb;--green-soft: #2c3e31;--green-pale: #27332a;--orange: #e5a17c;--orange-soft: #3c2d26;--ochre: #ddbd75;--memory: #2a3528;--memory-ink: #c4d6b8;--board: #1c251e;--position: #2d3c2c;--on-accent: #152c20;--string: #6d7b69;--fret: #47543f;--black-key: #141b17;--white-key: #dce2d8}*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--line) var(--page)}body{margin:0;min-width:1120px;font-size:13px;line-height:1.7}button,input,select{font:inherit;color:inherit}button{cursor:pointer;background:none;border:0;transition:background-color .16s,color .16s,border-color .16s}button:disabled{opacity:.42;cursor:default}a{color:inherit;text-decoration:none}button,select,input{accent-color:var(--green)}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,[role=button]:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--green);outline-offset:4px}::selection{background:var(--green-soft);color:var(--green)}input{caret-color:var(--green)}h1,h2,h3,p{margin:0}h1,h2{text-wrap:balance}h2{font-size:15px;font-weight:600}h3{font-size:15px}small{font-size:11px}strong{font-weight:600}svg{flex-shrink:0}em{color:var(--green);font-style:normal}kbd{display:inline-block;font:11px/1.55 ui-monospace,monospace;padding:1px 5px;border:1px solid var(--line);border-radius:2px;color:var(--muted);background:var(--page);white-space:nowrap}select{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:6px 9px;font-size:12px}.muted{color:var(--muted)}.orange{color:var(--orange);fill:var(--orange)!important}.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:8px 13px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);font-size:12px;white-space:nowrap}.button:hover:not(:disabled){background:var(--green-pale);border-color:var(--green)}.button-primary{background:var(--green);border-color:var(--green);color:var(--on-accent)}.button-primary:hover:not(:disabled){background:var(--green-hover);color:var(--on-accent)}.button-primary kbd{color:inherit;background:transparent;border-color:currentColor;opacity:.8}.button-danger{color:var(--orange)}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius);color:var(--muted)}.icon-button:hover:not(:disabled){color:var(--green);background:var(--green-soft)}.text-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:4px 0;font-size:12px;color:var(--muted)}.text-button:hover:not(:disabled){color:var(--green)}.text-link{color:var(--green);text-decoration:underline;text-underline-offset:3px}.skip-link{position:fixed;top:-70px;left:16px;z-index:100;background:var(--surface);padding:12px}.skip-link:focus{top:10px}.app-shell{max-width:1920px;margin:0 auto;min-height:100vh}.site-header{height:76px;display:flex;align-items:center;gap:30px;padding:0 30px;border-bottom:1px solid var(--line);background:var(--surface)}.brand{display:flex;align-items:center;gap:12px;min-width:185px}.brand-mark{color:var(--green);stroke-width:1.6}.brand>span{font-size:19px;font-weight:650;letter-spacing:1px;line-height:1.3}.brand small{display:block;margin-top:5px;font-size:9px;color:var(--muted);letter-spacing:2.3px;font-weight:500}.header-breadcrumb{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}.header-breadcrumb strong{font-weight:400;color:var(--ink)}.header-actions{margin-left:auto;display:flex;align-items:center;gap:14px}.local-label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11px}.app-layout{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:calc(100vh - 76px)}.sidebar{border-right:1px solid var(--line);padding:29px 16px 20px;display:flex;flex-direction:column}.sidebar-label{display:flex;justify-content:space-between;padding:0 8px;color:var(--muted);font-size:11px;margin-bottom:20px}.sidebar-label span{opacity:.85}.tool-link{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid transparent;border-radius:var(--radius);font-weight:600}.tool-link>svg:last-child{margin-left:auto}.tool-link.active{background:var(--green-soft);border-color:var(--line);color:var(--green)}.tool-link:hover{background:var(--green-pale)}.subnav{padding:7px 0 20px 22px}.subnav a{display:flex;align-items:center;gap:12px;padding:10px 7px;color:var(--muted);font-size:12px}.subnav a>span{font-size:10px;font-variant-numeric:tabular-nums}.subnav a>svg{margin-left:auto}.subnav a.active,.subnav a:hover{color:var(--green)}.subnav a.active{font-weight:600}.sidebar-reference{margin:35px 8px 0;border-top:1px solid var(--line);padding-top:20px}.sidebar-reference h2{font-size:12px}.sidebar-reference h2 span{display:block;font-size:10px;font-weight:400;color:var(--muted);margin-top:4px}.sidebar-reference p{font-size:11px;color:var(--muted);line-height:1.9}.solfege-reference{font-family:Georgia,serif;font-size:14px;color:var(--green);margin:17px 0 11px;word-spacing:1px;white-space:nowrap}.sidebar-bottom{display:flex;align-items:flex-start;gap:10px;margin:auto 8px 0;padding-top:50px;color:var(--muted);font-size:11px}.sidebar-bottom svg{margin-top:3px;color:var(--green)}.sidebar-bottom small{display:block;font-size:10px;margin-top:3px}.workspace{min-width:0;display:flex;flex-direction:column;outline:none}.workspace-content{padding:29px 34px 20px;flex:1;max-width:1550px;width:100%;margin:0 auto}.utility-bar{min-height:53px;padding:8px 34px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}.audio-controls,.utility-actions{display:flex;align-items:center;gap:14px}.audio-controls{gap:10px}.audio-status{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--muted)}.audio-status i{width:5px;height:5px;border-radius:50%;background:var(--ochre)}.audio-status .ready{background:var(--green)}.audio-controls input{width:65px;height:3px}.utility-divider{height:15px;border-left:1px solid var(--line);margin:0 2px}.compact-stat{font-size:11px;color:var(--muted);white-space:nowrap}.compact-stat strong{font-size:13px;color:var(--ink);margin-left:5px;font-variant-numeric:tabular-nums}.page-intro{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-bottom:25px}.page-intro h1{font-size:30px;font-weight:650;letter-spacing:-.8px;line-height:1.45}.page-intro p{font-size:13px;color:var(--muted);margin-top:8px;max-width:75ch;line-height:1.85}.key-badge{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);padding:8px 11px;border-radius:2px;font-size:11px;color:var(--green);white-space:nowrap}.key-badge span{color:var(--muted);border-left:1px solid var(--line);padding-left:9px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;gap:14px}.panel-heading p{font-size:11px;color:var(--muted);margin-top:4px}.panel-heading>.muted{font-size:11px}.panel-title{display:flex;align-items:center;gap:12px}.small-tag{display:inline-flex;font-size:10px;padding:2px 7px;border:1px solid var(--line);border-radius:2px;color:var(--muted);white-space:nowrap}.warm-tag{color:var(--ochre);background:var(--orange-soft)}.training-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.training-row{display:grid;grid-template-columns:30px 205px minmax(0,1fr) 88px;align-items:center;gap:19px;width:100%;padding:26px 24px;text-align:left}.training-row+.training-row{border-top:1px solid var(--line)}.training-row:hover{background:var(--green-pale)}.training-number{font-family:Georgia,serif;font-size:22px;color:var(--green)}.training-row-title strong{display:block;font-size:16px}.training-row-title small{display:block;margin-top:6px;color:var(--muted)}.training-row-desc{color:var(--muted);font-size:12px;line-height:1.85;max-width:50ch}.row-action{display:flex;gap:8px;align-items:center;color:var(--green);font-size:12px}.free-piano{margin-top:24px}.panel-foot{padding:15px 22px;color:var(--muted);font-size:11px;border-top:1px solid var(--line)}.piano{position:relative;height:172px;margin:0 22px 20px;border:1px solid var(--string);border-top:5px solid var(--black-key);border-radius:2px;overflow:hidden;background:var(--black-key)}.piano-key{position:absolute;top:0;display:flex;align-items:flex-end;justify-content:center;padding:0 0 15px;border-radius:0 0 2px 2px;font-size:14px}.piano-key.white{height:100%;background:var(--white-key);color:#314637;border-right:1px solid #acb8a7}.piano-key.black{height:62%;z-index:1;background:var(--black-key);color:#d8e2d8;border:1px solid #425045;padding-bottom:11px;font-size:11px}.piano-key small{display:block;font-size:10px;opacity:.72;margin-top:3px}.piano-key:disabled{opacity:1}.piano-key:disabled span{opacity:.35}.piano-key.sounding,.piano-key.answer-key{background:#bbd9bb;color:#163b28}.piano-key.wrong-key{background:#e9c0a8;color:#66371f}.piano-key.black.sounding,.piano-key.black.answer-key{background:#427650;color:#fff}.piano-key:active:not(:disabled){transform:translateY(2px)}.piano-key:hover:not(:disabled){filter:brightness(.95)}.piano-key:focus-visible{outline-offset:-4px;z-index:3}.practice-note{margin-top:27px;padding:2px 0}.practice-note h2{color:var(--green);font-size:14px}.practice-note p{color:var(--muted);font-size:12px;margin-top:6px}.training-settings{display:flex;align-items:center;flex-wrap:wrap;gap:22px;padding:15px 20px;border-bottom:1px solid var(--line);background:var(--green-pale)}.training-settings label,.transport label{display:inline-flex;align-items:center;gap:8px;font-size:12px}.check-control{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:11px}.check-control input{width:13px;height:13px;margin:0}.piano-toggle{margin-left:auto}.training-stage{display:flex;align-items:center;gap:18px;padding:30px 22px;min-height:143px}.stage-mark{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);color:var(--green);background:var(--green-pale)}.stage-mark.incorrect{color:var(--orange);background:var(--orange-soft)}.stage-copy{flex:1}.stage-copy h2{font-size:19px}.stage-copy p{color:var(--muted);margin-top:7px;font-size:12px}.training-stage .button{min-height:40px}.training-transport{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;min-height:49px;padding:9px 20px;font-size:11px;gap:20px}.training-transport>div{display:flex;gap:17px}.training-piano{margin-top:22px}.training-piano .piano{height:164px}.answer-panel{margin-top:23px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-heading>span{color:var(--muted);font-size:11px}.note-grid{display:flex;gap:8px}.note-option{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;padding:14px 5px 10px;gap:4px;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);font-size:11px;color:var(--muted)}.note-name{font-family:Georgia,serif;font-size:21px;color:var(--ink);line-height:1.25}.note-option kbd{font-size:10px;margin-top:4px}.note-option.accidental{background:var(--green-pale)}.note-option:hover:not(:disabled),.note-option.active-note{border-color:var(--green)}.note-option.correct{border-color:var(--green);background:var(--green-soft)}.note-option.incorrect{border-color:var(--orange);background:var(--orange-soft)}.analysis-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:23px;padding:20px 22px;background:var(--memory);border-radius:var(--radius)}.analysis-panel h2{color:var(--green)}.analysis-panel p{color:var(--muted);margin-top:6px;font-size:12px}.shortcut-foot{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:28px;font-size:10px;color:var(--muted)}.shortcut-foot>span{margin:0 6px}.segmented{display:inline-flex;background:var(--page);padding:3px;border:1px solid var(--line);border-radius:var(--radius);gap:2px}.segmented button{font-size:11px;padding:5px 9px;border-radius:2px;color:var(--muted)}.segmented button.selected{background:var(--surface);color:var(--green)}.segmented button:hover{color:var(--green)}.lesson-tabs{display:flex;gap:9px;margin-bottom:18px}.lesson-tabs button{flex:1;display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius);font-size:12px}.lesson-tabs button>span{color:var(--muted);font-size:10px}.lesson-tabs button svg{margin-left:auto;opacity:.45}.lesson-tabs .selected{color:var(--green);background:var(--green-soft);border-color:var(--green)}.lesson-tabs button:hover{background:var(--green-pale)}.pattern-tabs{display:grid;grid-template-columns:repeat(5,1fr);padding:0 22px;gap:8px}.pattern-tabs button{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 8px;border:1px solid var(--line);border-radius:var(--radius)}.pattern-tabs strong{font:500 20px/1.2 Georgia,serif}.pattern-tabs strong span{font:11px var(--font)}.pattern-tabs small{color:var(--muted);font-size:10px}.pattern-tabs button.selected{background:var(--green-soft);color:var(--green);border-color:var(--green)}.pattern-tabs button:hover{background:var(--green-pale)}.board-context{display:flex;justify-content:space-between;align-items:center;padding:16px 22px 8px;font-size:11px;color:var(--muted)}.board-context strong{color:var(--ink);margin-right:10px}.board-scroll{overflow-x:auto;padding:0 10px}.fretboard{display:block;width:100%;min-width:820px;max-height:360px}.board-ground{fill:var(--board);stroke:var(--line)}.position-region{fill:var(--position)}.diagram-label{fill:var(--muted);font:11px var(--font)}.position-label{fill:var(--green);font:600 12px var(--font)}.fret-line{stroke:var(--fret)}.string-line{stroke:var(--string)}.fret-dot{fill:var(--fret)}.string-label{font-size:11px;fill:var(--muted)}.string-name{fill:var(--green);font:15px Georgia,serif}.board-note{cursor:pointer;transition:transform .44s cubic-bezier(.16,1,.3,1)}.board-note .hit-target{fill:transparent}.board-note .note-disc{fill:var(--green);stroke:var(--surface);stroke-width:1.5}.board-note text,.cycle-note text{fill:var(--on-accent);font:550 12px var(--font);text-anchor:middle;dominant-baseline:central;pointer-events:none}.board-note.root .note-disc{fill:var(--orange)}.board-note.other .note-disc{fill:var(--surface);stroke:var(--fret);stroke-width:1}.board-note.other text{fill:var(--muted);font-size:10px}.board-note:hover .note-disc,.board-note:focus-visible .note-disc{stroke:var(--ink);stroke-width:2}.board-note.playing .note-disc{fill:var(--ochre);stroke:var(--ink);stroke-width:2}.board-note.playing text{fill:var(--on-accent)}.ghost-note{fill:none;stroke:var(--orange);stroke-dasharray:3 3;opacity:.7}.correction-arrow{fill:none;stroke:var(--orange);stroke-width:1.3}.board-legend{display:flex;justify-content:space-between;align-items:center;padding:8px 22px 14px;font-size:10px;color:var(--muted)}.board-legend>div{display:flex;gap:20px}.board-legend span{display:inline-flex;align-items:center;gap:6px}.legend-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green)}.legend-dot.root{background:var(--orange)}.legend-dot.other{border:1px solid var(--string);background:var(--surface)}.transport{display:flex;align-items:center;gap:18px;border-top:1px solid var(--line);padding:13px 22px}.transport label{color:var(--muted);font-size:11px}.transport select{font-size:11px}.sound-status{font-size:10px;color:var(--muted)}.reset-board{margin-left:auto}.lesson-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr);gap:17px;margin-top:20px}.explanation-panel{padding:20px 22px 0;display:flex;flex-direction:column}.lesson-heading{display:flex;align-items:center;gap:10px;margin-bottom:16px}.lesson-heading h2{font-size:14px}.lesson-index{padding:2px 5px;font-size:10px;color:var(--green);background:var(--green-soft)}.lesson-heading>span:last-child{color:var(--muted);font-size:10px;margin-left:auto}.lesson-content{flex:1}.lesson-content p{font-size:13px;line-height:1.85;color:var(--muted);margin-bottom:12px}.lesson-content strong{color:var(--ink)}.lesson-content .inline-note{display:flex;align-items:flex-start;gap:7px;color:var(--muted);font-size:11px;margin-top:18px}.inline-note svg{margin-top:3px;color:var(--green)}.intervals{display:flex;align-items:center;justify-content:space-between;margin:22px 0}.interval-item{display:flex;align-items:center;flex:1}.interval-item:last-child{flex:none}.interval-item>div{text-align:center}.interval-item b{display:block;font:23px Georgia,serif}.interval-item small{font-size:10px;color:var(--muted);display:block;margin-top:4px}.interval-item>span{flex:1;text-align:center;color:var(--muted);font-size:9px;white-space:nowrap}.lesson-pagination{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:11px 0;margin-top:18px}.lesson-pagination>div{display:flex;gap:5px}.lesson-pagination i{width:17px;height:3px;border-radius:1px;background:var(--line)}.lesson-pagination i.active{background:var(--green)}.memory-panel{border-radius:var(--radius);padding:20px 22px;background:var(--memory);color:var(--memory-ink)}.memory-heading{display:flex;align-items:center;justify-content:space-between}.memory-heading h2{font-size:13px}.memory-phrase{font-size:26px;font-weight:600;letter-spacing:2px;margin-top:13px}.memory-phrase em{display:block;font-size:15px;margin-top:1px;letter-spacing:3px;color:var(--memory-ink);font-weight:400}.memory-sequence{display:flex;flex-direction:column;gap:3px;position:relative;margin:17px 0}.memory-sequence span{width:100px;font-size:11px;padding:1px 8px;background:var(--position);border:1px solid var(--line);border-radius:2px}.memory-sequence .short{width:64px;background:var(--green-soft)}.memory-sequence svg{position:absolute;left:121px;top:43px}.memory-panel>p:not(.memory-phrase){font-size:12px;line-height:1.8}.memory-panel>small{display:block;font-size:10px;margin-top:14px;padding-top:11px;border-top:1px solid var(--line);color:var(--muted);line-height:1.8}.correction-controls{margin-top:5px}.connection-row{display:flex;gap:6px;margin:20px 0}.connection-row button{display:inline-flex;align-items:center;gap:9px;padding:6px 9px;border:1px solid var(--line);border-radius:var(--radius);font-family:Georgia,serif}.connection-row .selected{color:var(--green);background:var(--green-soft);border-color:var(--green)}.cycle-panel{display:grid;grid-template-columns:minmax(280px,360px) minmax(220px,320px);justify-content:center;align-items:center;gap:40px;padding:10px 24px 24px}.cycle-diagram{display:block;width:100%}.cycle-window{fill:var(--green-pale);stroke:var(--orange);stroke-width:1.5}.cycle-note circle{fill:var(--green-soft);stroke:var(--fret)}.cycle-note text{fill:var(--green)}.cycle-note.selected{cursor:pointer}.cycle-note.selected circle{fill:var(--green);stroke:var(--surface);stroke-width:1.5}.cycle-note.selected text{fill:var(--on-accent)}.cycle-note.selected.root circle{fill:var(--orange)}.cycle-note.playing circle{fill:var(--ochre);stroke:var(--ink);stroke-width:2}.cycle-short{fill:var(--orange-soft)}.cycle-long{fill:var(--position)}.cycle-group-label{fill:var(--ink);font-size:13px}.cycle-reading h3{font-size:17px;margin-bottom:20px}.cycle-reading dl{display:grid;grid-template-columns:40px 1fr;gap:20px 12px;font-size:13px;line-height:1.85}.cycle-reading dt{color:var(--green);font-weight:600}.cycle-reading dd{margin:0;color:var(--muted)}.cycle-reading p{font-size:12px;color:var(--muted);line-height:1.9;margin-top:18px}.cycle-reading strong{color:var(--ink)}.cycle-selection{border-top:1px solid var(--line);padding-top:20px}.page-footer{display:flex;justify-content:space-between;gap:18px;margin-top:19px;color:var(--muted);font-size:10px}.site-footer{padding:17px 34px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted);border-top:1px solid var(--line)}.site-footer .text-button{font-size:10px}.notice{margin:14px 20px;padding:10px 14px;background:var(--orange-soft);border:1px solid var(--line);color:var(--orange);font-size:12px;border-radius:var(--radius)}.loading-state{padding:80px 24px;text-align:center;color:var(--muted)}.modal{width:min(620px,calc(100vw - 100px));max-height:calc(100vh - 90px);overflow-y:auto;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink)}.modal-wide{width:820px}.modal::backdrop{background:#0c181180}.modal-heading{display:flex;align-items:center;justify-content:space-between;padding:17px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:2}.modal-body{padding:22px}.help-content p{font-size:12px;line-height:1.9;color:var(--muted);margin:9px 0 15px}.help-content h3{margin-top:23px;color:var(--green);font-size:14px}.help-content h3:first-child{margin-top:0}.help-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:12px}.help-row span{text-align:right;color:var(--muted)}.history-modes{display:flex}.history-modes button{flex:1;padding:8px}.history-summary{display:flex;align-items:center;padding:22px 3px;gap:42px}.history-summary div{display:flex;flex-direction:column}.history-summary div>span{font-size:11px;color:var(--muted)}.history-summary strong{font-size:24px;font-weight:550;font-variant-numeric:tabular-nums}.history-summary small{font-size:11px;margin-left:6px;color:var(--muted);font-weight:400}.history-summary>p{margin-left:auto;color:var(--muted);font-size:11px}.history-controls{display:flex;align-items:center;justify-content:space-between}.history-paging{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.history-chart{display:block;width:100%;margin:17px 0;overflow:visible}.history-chart text{fill:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}.chart-grid{stroke:var(--line);stroke-dasharray:3 4}.chart-line{stroke:var(--green);stroke-width:2}.chart-point{fill:var(--green)}.history-chart .chart-empty{font-size:12px}.history-table{width:100%;border-collapse:collapse;font-size:11px;font-variant-numeric:tabular-nums}.history-table th{font-weight:500;color:var(--muted);background:var(--page)}.history-table th,.history-table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}.history-table td:not(:first-child),.history-table th:not(:first-child){text-align:right}.history-table .small-tag{margin-left:8px;font-size:9px}.history-note{color:var(--muted);font-size:11px;margin-top:16px;line-height:1.9}@media(min-width:1500px){.workspace-content{padding:33px 42px 24px}.page-intro h1{font-size:34px}.training-row{padding:31px 27px}.piano{height:195px}.utility-bar{padding-left:42px;padding-right:42px}}@media(max-width:1200px){.app-layout{grid-template-columns:195px minmax(0,1fr)}.site-header{padding:0 24px}.brand{min-width:160px}.workspace-content,.utility-bar{padding-left:23px;padding-right:23px}.utility-actions{gap:10px}.training-row{grid-template-columns:26px 180px minmax(0,1fr) 76px;gap:14px;padding:23px 20px}.training-row-title strong{font-size:15px}.pattern-tabs button{gap:7px}.sound-status{max-width:235px}.lesson-grid{grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr)}.interval-item>span{font-size:8px}.header-breadcrumb{font-size:11px}}.sidebar-heading-row{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:15px}.sidebar-heading-row .sidebar-label{margin-bottom:0}.sidebar-toggle{flex-shrink:0}.app-layout.sidebar-collapsed{grid-template-columns:64px minmax(0,1fr)}.sidebar-collapsed .sidebar{padding:29px 10px 20px}.sidebar-collapsed .sidebar-heading-row{justify-content:center}.sidebar-collapsed .sidebar-label,.sidebar-collapsed .subnav,.sidebar-collapsed .sidebar-reference,.sidebar-collapsed .sidebar-bottom,.sidebar-collapsed .tool-link>span,.sidebar-collapsed .tool-link>svg:last-child{display:none}.sidebar-collapsed .tool-link{justify-content:center;padding:12px 0;margin-bottom:9px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}