.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{display:flex;flex-direction:column;gap:var(--space-md);margin-block:var(--space-md)}.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{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm)}.ic-transport-button,.ic-band-player__mute,.ic-exercise__play,.ic-melody-editor__reset,.ic-quiz-block__choice,.ic-ear-training-quiz__choice{display:inline-flex;align-items:center;justify-content: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);line-height:1.4;cursor:pointer;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.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-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{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:var(--font-size-sm);color:var(--color-text-muted)}.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{display:flex;flex-direction:column;gap:var(--space-2xs);overflow-x:auto;-webkit-overflow-scrolling:touch;padding-block:var(--space-2xs)}.ic-drum-sequencer__row{display:flex;align-items:center;gap:var(--space-2xs);flex-wrap:nowrap}.ic-drum-sequencer__label{flex:0 0 var(--ic-drum-label-w);width:var(--ic-drum-label-w);padding-inline-end:var(--space-xs);font-size:var(--font-size-sm);color:var(--color-text-muted);text-align:end;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ic-drum-sequencer__cell{flex:1 1 0;min-width:var(--ic-drum-cell-min);aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;padding:0;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);line-height:1;cursor:pointer;transition:background-color .1s ease,border-color .1s ease,box-shadow .1s ease}.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{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin:0;padding:0;list-style:none}.ic-chord-player__chord{margin:0;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}.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{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin:0;padding:0;list-style:none}.ic-phrase-player__event{margin:0;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)}.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{margin:0;color:var(--color-text-muted);font-size:var(--font-size-sm);font-variant-numeric:tabular-nums}.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;position:relative;display:grid;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));gap:1px;width:max-content;max-width:100%;overflow-x:auto;padding:var(--space-xs);background-color:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--radius-md)}.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);display:flex;align-items:center;padding-inline:var(--space-2xs);background-color:var(--color-accent);border-radius:var(--radius-sm);color:#fff;font-size:.7rem;line-height:1;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;overflow:hidden;text-overflow:ellipsis}.ic-piano-keyboard__keys{display:flex;flex-wrap:nowrap;gap:2px;overflow-x:auto;-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)}.ic-piano-key{flex:0 0 auto;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);font-size:.7rem;text-align:center;cursor:pointer;transition:background-color .1s ease}.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{display:flex;flex-direction:column;gap:var(--space-xs);margin:0;padding:0;list-style:none}.ic-band-player__layer{display:flex;flex-wrap:wrap;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)}.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{display:flex;flex-direction:column;gap:var(--space-lg);margin:0;padding:0;list-style:none}.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{display:flex;flex-direction:column;gap:var(--space-xs)}.ic-quiz-block__choice,.ic-ear-training-quiz__choice{justify-content:flex-start;text-align: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{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.ic-score-snippet{max-width:100%}.ic-score-snippet__canvas{max-width:100%;overflow-x:auto;padding:var(--space-sm);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}.ic-audio-note{margin:0;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)}.ic-error-fallback{margin:0;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)}.ic-melody-editor{--ic-melody-label-w: 3.5rem;--ic-melody-cell-min: 1.75rem}.ic-melody-editor__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm)}.ic-melody-editor__mode{display:inline-flex;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 ease,border-color .12s ease,color .12s ease}.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{display:inline-flex;align-items:center;gap:var(--space-2xs);font-size:var(--font-size-sm);color:var(--color-text-muted)}.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{display:flex;flex-direction:column;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-block:var(--space-2xs)}.ic-melody-editor__row{display:flex;align-items:stretch;gap:2px;flex-wrap:nowrap}.ic-melody-editor__label{flex:0 0 var(--ic-melody-label-w);width:var(--ic-melody-label-w);display:flex;align-items:center;justify-content:flex-end;padding-inline-end:var(--space-xs);font-size:var(--font-size-sm);color:var(--color-text-muted);white-space:nowrap}.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);display:flex;align-items:center;justify-content:center;padding:0;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);line-height:1;cursor:pointer;transition:background-color .1s ease,border-color .1s ease,box-shadow .1s ease}.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(max-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: #ffffff;--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{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}input,button,textarea,select{font:inherit;color:inherit}body{margin:0;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}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);font-weight:700;text-wrap:balance}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-decoration:underline;text-underline-offset:.15em;text-decoration-thickness: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);font-size:.9em;background-color:var(--color-code-bg);padding:.1em .35em;border-radius:var(--radius-sm)}pre code{background-color:transparent;padding:0;font-size:inherit;border-radius: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{width:100%;border-collapse:collapse;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{overflow-x:auto;-webkit-overflow-scrolling:touch}.skip-link{position:absolute;inset-block-start:var(--space-xs);inset-inline-start:var(--space-xs);padding:var(--space-xs) var(--space-md);background-color:var(--color-accent);color:#fff;border-radius:var(--radius-sm);text-decoration:none;transform:translateY(-150%);transition:transform .15s ease;z-index:100}.skip-link:focus{transform:translateY(0)}.progress-badge{display:inline-flex;align-items:center;gap:var(--space-2xs);font-size:var(--font-size-sm);line-height:1;white-space:nowrap}.progress-badge__indicator{display:inline-flex;justify-content:center;inline-size:1em}.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-inline-size:12rem;min-block-size:2.5rem;color:var(--color-text-muted);font-size:var(--font-size-sm)}.course-progress--pending{margin:0;opacity:.6}.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{block-size:100%;background-color:var(--color-accent)}.site-layout{display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);gap:var(--space-xl);max-width:var(--layout-max-width);margin-inline:auto;padding:var(--space-lg) var(--space-lg) var(--space-3xl)}.site-main{min-width:0}.prose{max-width:var(--measure)}.site-sidebar{min-width:0;align-self:start;position:sticky;inset-block-start:var(--space-lg);max-height:calc(100vh - 2 * var(--space-lg));overflow-y:auto;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)}.toc ul{list-style:none;padding-inline-start:0}.toc li+li{margin-block-start:var(--space-2xs)}.prev-next-nav{display:flex;justify-content:space-between;gap:var(--space-md);margin-block-start:var(--space-2xl);padding-block-start:var(--space-lg);border-top:1px solid var(--color-border)}@media(max-width:48rem){.site-layout{grid-template-columns:minmax(0,1fr);gap:var(--space-lg);padding:var(--space-md) var(--space-md) var(--space-2xl)}.site-sidebar{position:static;max-height:40vh;overflow-y:auto}.prose{max-width:100%}}@media(max-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}}