.ic-drum-sequencer,.ic-melody-editor,.ic-chord-player,.ic-phrase-player,.ic-piano-roll,.ic-piano-keyboard,.ic-band-player,.ic-quiz-block,.ic-ear-training-quiz,.ic-exercise,.ic-score-snippet{gap:var(--space-md);margin-block:var(--space-md);flex-direction:column;display:flex}.ic-drum-sequencer__controls,.ic-melody-editor__controls,.ic-chord-player__controls,.ic-phrase-player__controls,.ic-piano-roll__controls,.ic-ear-training-quiz__controls,.ic-band-player__controls{align-items:center;gap:var(--space-sm);flex-wrap:wrap;display:flex}.ic-transport-button,.ic-band-player__mute,.ic-exercise__play,.ic-melody-editor__reset,.ic-quiz-block__choice,.ic-ear-training-quiz__choice{justify-content:center;align-items:center;gap:var(--space-2xs);padding:var(--space-xs) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-surface);color:var(--color-text);font-size:var(--font-size-sm);cursor:pointer;line-height:1.4;transition:background-color .12s,border-color .12s,color .12s;display:inline-flex}.ic-transport-button:hover,.ic-band-player__mute:hover,.ic-exercise__play:hover,.ic-melody-editor__reset:hover,.ic-quiz-block__choice:hover,.ic-ear-training-quiz__choice:hover{border-color:var(--color-accent);color:var(--color-accent-hover)}.ic-transport-button{background-color:var(--color-accent);border-color:var(--color-accent);color:#fff;font-weight:700}.ic-transport-button:hover{background-color:var(--color-accent-hover);border-color:var(--color-accent-hover);color:#fff}.ic-transport-button[aria-pressed=true]{background-color:var(--color-accent-hover);border-color:var(--color-accent-hover)}.ic-exercise__play[aria-pressed=true]{background-color:var(--color-accent-hover);border-color:var(--color-accent-hover);color:#fff}.ic-transport-button:disabled,.ic-band-player__mute:disabled,.ic-exercise__play:disabled{opacity:.5;cursor:not-allowed}.ic-chord-player__tempo,.ic-band-player__volume{align-items:center;gap:var(--space-xs);font-size:var(--font-size-sm);color:var(--color-text-muted);display:inline-flex}.ic-chord-player__tempo input{width:5rem;padding:var(--space-2xs) var(--space-xs);border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-surface)}.ic-drum-sequencer{--ic-drum-label-w:7rem;--ic-drum-cell-min:1.75rem}.ic-drum-sequencer__grid{gap:var(--space-2xs);-webkit-overflow-scrolling:touch;padding-block:var(--space-2xs);flex-direction:column;display:flex;overflow-x:auto}.ic-drum-sequencer__row{align-items:center;gap:var(--space-2xs);flex-wrap:nowrap;display:flex}.ic-drum-sequencer__label{flex:0 0 var(--ic-drum-label-w);width:var(--ic-drum-label-w);font-size:var(--font-size-sm);color:var(--color-text-muted);text-align:end;white-space:nowrap;text-overflow:ellipsis;padding-inline-end:var(--space-xs);overflow:hidden}.ic-drum-sequencer__cell{min-width:var(--ic-drum-cell-min);aspect-ratio:1;border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-surface);color:var(--color-accent);font-size:var(--font-size-base);cursor:pointer;flex:1 1 0;justify-content:center;align-items:center;padding:0;line-height:1;transition:background-color .1s,border-color .1s,box-shadow .1s;display:flex}.ic-drum-sequencer__cell.is-off{background-color:var(--color-surface-alt)}.ic-drum-sequencer__cell.is-on{background-color:var(--color-accent);border-color:var(--color-accent);color:#fff}.ic-drum-sequencer__cell.is-current{border-color:var(--color-accent-hover);box-shadow:0 0 0 2px var(--color-accent-hover)}.ic-drum-sequencer__cell:not(:disabled):hover{border-color:var(--color-accent)}.ic-drum-sequencer__cell:disabled{cursor:default;opacity:.7}.ic-chord-player__list{gap:var(--space-xs);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.ic-chord-player__chord{padding:var(--space-xs) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-surface);font-variant-numeric:tabular-nums;margin:0}.ic-chord-player__chord.is-current{background-color:var(--color-accent);border-color:var(--color-accent);color:#fff;font-weight:700}.ic-phrase-player__events{gap:var(--space-xs);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.ic-phrase-player__event{padding:var(--space-2xs) var(--space-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-surface);font-size:var(--font-size-sm);margin:0}.ic-phrase-player__event.is-current{background-color:var(--color-accent);border-color:var(--color-accent);color:#fff;font-weight:700}.ic-phrase-player__position{color:var(--color-text-muted);font-size:var(--font-size-sm);font-variant-numeric:tabular-nums;margin:0}.ic-phrase-player__score,.ic-phrase-player__score-canvas{max-width:100%;overflow-x:auto}.ic-phrase-player__score-canvas{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-sm)}.ic-piano-roll__grid{--ic-roll-row-h:1.25rem;--ic-roll-beat-w:3rem;grid-template-rows:repeat(var(--ic-roll-rows,1), var(--ic-roll-row-h));grid-template-columns:repeat(var(--ic-roll-beats,1), var(--ic-roll-beat-w));width:max-content;max-width:100%;padding:var(--space-xs);background-color:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--radius-md);gap:1px;display:grid;position:relative;overflow-x:auto}.ic-piano-roll__note{grid-row:calc(var(--ic-roll-row,0) + 1) / span 1;grid-column:calc(var(--ic-roll-start,0) + 1) / span max(var(--ic-roll-span,1), 1);padding-inline:var(--space-2xs);background-color:var(--color-accent);border-radius:var(--radius-sm);color:#fff;align-items:center;font-size:.7rem;line-height:1;display:flex;overflow:hidden}.ic-piano-roll__note.is-current{background-color:var(--color-accent-hover);box-shadow:0 0 0 2px var(--color-accent-hover)}.ic-piano-roll__note-label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ic-piano-keyboard__keys{-webkit-overflow-scrolling:touch;padding:var(--space-xs);background-color:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--radius-md);flex-wrap:nowrap;gap:2px;display:flex;overflow-x:auto}.ic-piano-key{min-width:2.25rem;padding:var(--space-xs) var(--space-2xs) var(--space-sm);border:1px solid var(--color-border);border-radius:0 0 var(--radius-sm) var(--radius-sm);text-align:center;cursor:pointer;flex:none;font-size:.7rem;transition:background-color .1s}.ic-piano-key.is-white{background-color:var(--color-surface);color:var(--color-text)}.ic-piano-key.is-black{background-color:var(--color-text);color:var(--color-surface);min-width:1.75rem}.ic-piano-key.is-highlighted{background-color:var(--color-accent);border-color:var(--color-accent);color:#fff}.ic-piano-key:hover{border-color:var(--color-accent)}.ic-band-player__layers{gap:var(--space-xs);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.ic-band-player__layer{align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-surface);flex-wrap:wrap;display:flex}.ic-band-player__label{flex:0 0 7rem;font-weight:700}.ic-band-player__mute.is-muted{background-color:var(--color-surface-alt);color:var(--color-text-muted);border-color:var(--color-text-muted)}.ic-band-player__volume input{vertical-align:middle}.ic-band-player__step{padding:var(--space-2xs) var(--space-sm);border-radius:var(--radius-sm);background-color:var(--color-surface-alt);color:var(--color-text-muted);font-size:var(--font-size-sm);font-variant-numeric:tabular-nums}.ic-quiz-block__questions{gap:var(--space-lg);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.ic-quiz-block__question{padding:var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-surface)}.ic-quiz-block__prompt{margin-block:0 var(--space-sm);font-weight:700}.ic-quiz-block__choices,.ic-ear-training-quiz__choices{gap:var(--space-xs);flex-direction:column;display:flex}.ic-quiz-block__choice,.ic-ear-training-quiz__choice{text-align:start;justify-content:flex-start;width:100%}.ic-quiz-block__choice.is-selected,.ic-ear-training-quiz__choice.is-selected{border-color:var(--color-accent);background-color:var(--color-surface-alt);font-weight:700}.ic-quiz-block__feedback,.ic-ear-training-quiz__feedback{margin-block:var(--space-sm) 0;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-sm);border-inline-start:4px solid var(--color-border);background-color:var(--color-surface-alt);font-size:var(--font-size-sm)}.ic-quiz-block__feedback.is-correct,.ic-ear-training-quiz__feedback.is-correct{border-inline-start-color:var(--color-accent);color:var(--color-accent-hover)}.ic-quiz-block__feedback.is-incorrect,.ic-ear-training-quiz__feedback.is-incorrect{--ic-feedback-warning:#b3261e;border-inline-start-color:var(--ic-feedback-warning);color:var(--ic-feedback-warning)}.ic-ear-training-quiz__prompt{margin:0;font-weight:700}.ic-exercise__section{padding:var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-md);border-inline-start:4px solid var(--color-border);background-color:var(--color-surface)}.ic-exercise__section+.ic-exercise__section{margin-block-start:var(--space-md)}.ic-exercise__section--prompt{border-inline-start-color:var(--color-accent);background-color:var(--color-surface-alt)}.ic-exercise__section--work{border-inline-start-color:var(--color-text-muted)}.ic-exercise__section--answer{border-inline-start-color:var(--color-accent-hover)}.ic-exercise__heading{margin-block:0 var(--space-sm);font-size:var(--font-size-h4)}.ic-exercise__prompt{margin:0}.ic-exercise__compare{gap:var(--space-sm);flex-wrap:wrap;display:flex}.ic-score-snippet{max-width:100%}.ic-score-snippet__canvas{max-width:100%;padding:var(--space-sm);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow-x:auto}.ic-audio-note{padding:var(--space-xs) var(--space-md);border-inline-start:4px solid var(--color-border);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background-color:var(--color-surface-alt);color:var(--color-text-muted);font-size:var(--font-size-sm);margin:0}.ic-error-fallback{padding:var(--space-xs) var(--space-md);--ic-error-color:#b3261e;border-inline-start:4px solid var(--ic-error-color);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background-color:var(--color-surface-alt);color:var(--ic-error-color);font-size:var(--font-size-sm);margin:0}.ic-melody-editor{--ic-melody-label-w:3.5rem;--ic-melody-cell-min:1.75rem}.ic-melody-editor__toolbar{align-items:center;gap:var(--space-sm);flex-wrap:wrap;display:flex}.ic-melody-editor__mode{align-items:center;gap:var(--space-2xs);padding:var(--space-2xs) var(--space-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-surface);color:var(--color-text);font-size:var(--font-size-sm);cursor:pointer;transition:background-color .12s,border-color .12s,color .12s;display:inline-flex}.ic-melody-editor__mode:hover{border-color:var(--color-accent);color:var(--color-accent-hover)}.ic-melody-editor__mode[aria-pressed=true]{background-color:var(--color-accent);border-color:var(--color-accent);color:#fff;font-weight:700}.ic-melody-editor__cell.is-vel-mid span{font-size:.72em}.ic-melody-editor__cell.is-vel-soft span{font-size:.5em}.ic-melody-editor__velocity,.ic-melody-editor__length{align-items:center;gap:var(--space-2xs);font-size:var(--font-size-sm);color:var(--color-text-muted);display:inline-flex}.ic-melody-editor__velocity select,.ic-melody-editor__length select{padding:var(--space-2xs) var(--space-xs);border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-surface);color:var(--color-text);font-size:var(--font-size-sm)}.ic-melody-editor__grid{-webkit-overflow-scrolling:touch;padding-block:var(--space-2xs);flex-direction:column;gap:2px;display:flex;overflow-x:auto}.ic-melody-editor__row{flex-wrap:nowrap;align-items:stretch;gap:2px;display:flex}.ic-melody-editor__label{flex:0 0 var(--ic-melody-label-w);width:var(--ic-melody-label-w);font-size:var(--font-size-sm);color:var(--color-text-muted);white-space:nowrap;justify-content:flex-end;align-items:center;padding-inline-end:var(--space-xs);display:flex}.ic-melody-editor__cell{flex:var(--ic-melody-span,1) 1 0;min-width:calc(var(--ic-melody-cell-min) * var(--ic-melody-span,1) * 2);height:var(--ic-melody-cell-min);border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-surface);color:var(--color-accent);font-size:var(--font-size-sm);cursor:pointer;justify-content:center;align-items:center;padding:0;line-height:1;transition:background-color .1s,border-color .1s,box-shadow .1s;display:flex}.ic-melody-editor__cell.is-off{background-color:var(--color-surface-alt)}.ic-melody-editor__cell.is-highlighted.is-off{border-style:dashed;border-color:var(--color-accent)}.ic-melody-editor__cell.is-on{background-color:var(--color-accent);border-color:var(--color-accent);color:#fff}.ic-melody-editor__cell.is-selected{box-shadow:0 0 0 2px var(--color-accent-hover);border-color:var(--color-accent-hover)}.ic-melody-editor__cell.is-current{border-color:var(--color-accent-hover);box-shadow:0 0 0 1px var(--color-accent-hover)}.ic-melody-editor__cell:hover{border-color:var(--color-accent)}@media (width<=30rem){.ic-drum-sequencer{--ic-drum-label-w:5.5rem;--ic-drum-cell-min:1.5rem}.ic-melody-editor{--ic-melody-label-w:2.75rem;--ic-melody-cell-min:1.5rem}.ic-band-player__label{flex-basis:100%}}:root{--color-bg:#fbfaf7;--color-surface:#fff;--color-surface-alt:#f2f0ea;--color-text:#1f2328;--color-text-muted:#5b626b;--color-heading:#14181d;--color-accent:#2f6f4f;--color-accent-hover:#1f4d36;--color-border:#e2ded4;--color-code-bg:#f2f0ea;--space-3xs:.125rem;--space-2xs:.25rem;--space-xs:.5rem;--space-sm:.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem;--font-body:"Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "BIZ UDPGothic", Meiryo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-heading:var(--font-body);--font-mono:"SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", "Noto Sans Mono CJK JP", monospace;--font-size-base:1.0625rem;--font-size-sm:.875rem;--font-size-lg:1.1875rem;--font-size-h1:2.125rem;--font-size-h2:1.625rem;--font-size-h3:1.3125rem;--font-size-h4:1.0625rem;--line-height-body:1.85;--line-height-heading:1.35;--letter-spacing-body:.02em;--letter-spacing-heading:.01em;--measure:42rem;--layout-max-width:72rem;--sidebar-width:17rem;--radius-sm:4px;--radius-md:8px;--breakpoint-md:48rem}*,:before,:after{box-sizing:border-box}*{margin:0}html{text-size-adjust:100%;scroll-behavior:smooth}img,picture,video,canvas,svg{max-width:100%;height:auto;display:block}input,button,textarea,select{font:inherit;color:inherit}body{background-color:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:var(--font-size-base);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;overflow-wrap:break-word;word-break:normal;margin:0}h1,h2,h3,h4,h5,h6{color:var(--color-heading);font-family:var(--font-heading);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-heading);text-wrap:balance;font-weight:700}h1{font-size:var(--font-size-h1)}h2{font-size:var(--font-size-h2);padding-bottom:var(--space-xs);border-bottom:1px solid var(--color-border)}h3{font-size:var(--font-size-h3)}h4{font-size:var(--font-size-h4)}p,ul,ol,blockquote,pre,table,figure{margin-block:0 var(--space-md)}h1,h2,h3,h4{margin-block:var(--space-xl) var(--space-sm)}:where(.prose,.site-main)>:first-child{margin-block-start:0}p{line-height:var(--line-height-body)}a{color:var(--color-accent);text-underline-offset:.15em;text-decoration:underline 1px}a:hover,a:focus-visible{color:var(--color-accent-hover);text-decoration-thickness:2px}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}ul,ol{padding-inline-start:1.5em}li+li{margin-block-start:var(--space-2xs)}li>ul,li>ol{margin-block:var(--space-2xs) 0}code{font-family:var(--font-mono);background-color:var(--color-code-bg);border-radius:var(--radius-sm);padding:.1em .35em;font-size:.9em}pre code{font-size:inherit;background-color:#0000;border-radius:0;padding:0}pre{overflow-x:auto}blockquote{padding:var(--space-xs) var(--space-md);border-inline-start:4px solid var(--color-accent);background-color:var(--color-surface-alt);color:var(--color-text-muted);border-radius:0 var(--radius-sm) var(--radius-sm) 0}blockquote>:last-child{margin-block-end:0}hr{border:0;border-top:1px solid var(--color-border);margin-block:var(--space-xl)}table{border-collapse:collapse;width:100%;font-size:var(--font-size-sm)}th,td{padding:var(--space-xs) var(--space-sm);border:1px solid var(--color-border);text-align:start;vertical-align:top}thead th{background-color:var(--color-surface-alt);font-weight:700}.table-scroll{-webkit-overflow-scrolling:touch;overflow-x:auto}.skip-link{padding:var(--space-xs) var(--space-md);background-color:var(--color-accent);color:#fff;border-radius:var(--radius-sm);z-index:100;text-decoration:none;transition:transform .15s;position:absolute;inset-block-start:var(--space-xs);inset-inline-start:var(--space-xs);transform:translateY(-150%)}.skip-link:focus{transform:translateY(0)}.progress-badge{align-items:center;gap:var(--space-2xs);font-size:var(--font-size-sm);white-space:nowrap;line-height:1;display:inline-flex}.progress-badge__indicator{justify-content:center;inline-size:1em;display:inline-flex}.progress-badge--complete{color:var(--color-accent)}.progress-badge--incomplete{color:var(--color-text-muted)}.progress-badge--pending{color:var(--color-text-muted);opacity:.6}.toc__link--current .progress-badge{color:inherit}.toc__link--current .progress-badge--pending{opacity:.8}.course-progress{min-block-size:2.5rem;min-inline-size:12rem;color:var(--color-text-muted);font-size:var(--font-size-sm)}.course-progress--pending{opacity:.6;margin:0}.course-progress__text{margin-block:0 var(--space-2xs)}.course-progress__text strong{color:var(--color-accent)}.course-progress__bar{block-size:var(--space-xs);border-radius:var(--radius-sm);background-color:var(--color-surface-alt);overflow:hidden}.course-progress__fill{background-color:var(--color-accent);block-size:100%}.site-layout{grid-template-columns:var(--sidebar-width) minmax(0, 1fr);gap:var(--space-xl);max-width:var(--layout-max-width);padding:var(--space-lg) var(--space-lg) var(--space-3xl);margin-inline:auto;display:grid}.site-main{min-width:0}.prose{max-width:var(--measure)}.site-sidebar{min-width:0;max-height:calc(100vh - 2 * var(--space-lg));padding:var(--space-md);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-size-sm);align-self:start;position:sticky;inset-block-start:var(--space-lg);overflow-y:auto}.toc ul{padding-inline-start:0;list-style:none}.toc li+li{margin-block-start:var(--space-2xs)}.prev-next-nav{justify-content:space-between;gap:var(--space-md);border-top:1px solid var(--color-border);margin-block-start:var(--space-2xl);padding-block-start:var(--space-lg);display:flex}@media (width<=48rem){.site-layout{gap:var(--space-lg);padding:var(--space-md) var(--space-md) var(--space-2xl);grid-template-columns:minmax(0,1fr)}.site-sidebar{max-height:40vh;position:static;overflow-y:auto}.prose{max-width:100%}}@media (width<=30rem){:root{--font-size-base:1rem;--font-size-h1:1.75rem;--font-size-h2:1.4375rem;--font-size-h3:1.1875rem}.prev-next-nav{flex-direction:column}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}