:root{--paper:#eee7d8;--ink:#253b42;--red:#925b40;--muted:#5a625e;--line:#253b4238}body,.reader-header{background:#253b42}button,a,input{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid var(--red);outline-offset:2px}.page h1{text-wrap:balance}.page-body p{text-wrap:pretty}.cover,.end{background:#253b42;color:var(--paper)}.cover h1{font-size:clamp(64px,9vw,110px);line-height:1.1;letter-spacing:-.06em}.cover h1 .cover-cn{font-size:24px;letter-spacing:.2em}.cover .page-body{display:flex;flex-direction:column}.cover .page-body p{font-size:19px;max-width:90%}.cover-art{display:none}.bebop-cover-art{flex:1;min-height:100px;position:relative;margin-top:20px;background:url(assets/cover-art.svg) center/contain no-repeat}.cover .kicker,.end .kicker{color:#d4a373}.cover .page-body p:first-child{font-size:25px;line-height:1.6}.page[data-comfort] .page-body p{max-width:100%}.editorial-diagram{width:100%;height:100%;object-fit:contain}.chapter-art img{object-fit:contain}.chapter-art.editorial-photo img{object-fit:cover;mix-blend-mode:normal}.chapter-art.editorial-photo{display:flex;flex-direction:column}.chapter-art.editorial-photo img{height:0;flex:1;min-height:0}.chapter-art figcaption{font-size:10px;line-height:1.5;display:flex;gap:8px;justify-content:space-between}.chapter-art.editorial-photo figcaption{padding-top:4px}.credits-link{font-size:13px}.source-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.source-links a{font-size:12px}.chapter-sources .page-body p{font-size:14px;line-height:1.7}.bebop-workbench{display:flex;flex-direction:column;gap:12px;min-height:0}.bebop-transport{display:grid;grid-template-columns:70px 1fr auto;gap:6px;align-items:center}.bebop-transport button{font-size:13px;min-height:44px;padding:7px}.bebop-transport select{grid-column:1/-1;font-size:13px;background:transparent;border:1px solid var(--line);padding:7px;min-width:0;height:36px}.transport-play{background:var(--red);color:var(--paper)}.transport-position{text-align:center;line-height:1.3;min-width:0}.transport-position b{font-size:16px;font-weight:400;display:block}.transport-position small{font-size:11px;display:block;margin-top:3px}.bebop-tracks{display:grid;gap:10px;min-height:0}.bebop-part{display:grid;grid-template-columns:70px minmax(0,1fr) 42px;gap:6px;align-items:center;min-width:0;padding-bottom:9px;border-bottom:1px solid var(--line)}.part-label{border-left:3px solid var(--track-color);padding-left:5px;align-self:stretch;display:flex;flex-direction:column;justify-content:center}.part-power{border:0;text-align:left;font-size:13px;line-height:1.3;padding:4px 0;min-height:30px}.part-label>small{font-size:10px;line-height:1.3;color:var(--muted)}[data-part=drums]{--track-color:#997747}[data-part=bass]{--track-color:#466d65}[data-part=piano]{--track-color:#836a86}[data-part=sax]{--track-color:#ab6244}.part-solo{font-size:12px;padding:6px 2px;min-height:44px}.bebop-preview{border:1px dashed var(--line);padding:7px 3px;min-width:0;position:relative;display:block;width:100%;min-height:50px}.score-roll{display:block;fill:none;stroke:none;width:100%;height:44px}.bebop-part[data-part=drums] .score-roll{height:68px}.score-roll text{font-family:Arial,sans-serif;font-size:9px;fill:var(--muted);stroke:none}.score-roll .bar-line{stroke:#253b424d;stroke-width:1}.score-roll .sub-line{stroke:#253b4219;stroke-width:.6}.score-roll .midi-note{fill:var(--track-color);stroke:none}.score-roll .lane-ride{fill:#997747}.score-roll .lane-pedal{fill:#798f82}.score-roll .lane-snare{fill:#ab6244}.score-roll .lane-kick{fill:#466d65}.score-roll .roll-playhead{stroke:var(--red);stroke-width:2}.edit-hint{position:absolute;right:3px;top:-2px;font-size:8px;color:var(--red);background:var(--paper);line-height:1.3}.bebop-part.is-muted .midi-note{opacity:.22}.bebop-part.is-muted .part-label{border-left-style:dotted}.part-solo[aria-pressed=true],.follow-toggle[aria-pressed=true],.editor-toolbar button[aria-pressed=true],.bebop-editor header button[aria-pressed=true]{background:var(--red);color:var(--paper)}.bebop-status{font-size:11px!important;line-height:1.4!important;margin:0!important;color:var(--muted)}.chapter-band .page-body{display:flex;flex-direction:column}.chapter-band .page-body>p{font-size:14px!important;line-height:1.5!important;margin-bottom:12px!important}.chapter-band .bebop-workbench{flex:1}.chapter-band .bebop-tracks{flex:1;grid-template-rows:1.25fr repeat(3,1fr)}.chapter-band .bebop-part{height:100%}.chapter-band .bebop-status{margin-top:auto!important}.pads{gap:8px;margin:12px 0}.pads button{background:var(--red);color:var(--paper);min-height:70px;font-size:25px}.pads button.flash{filter:brightness(1.65);box-shadow:0 0 20px #d5a46a99}.bebop-editor{width:min(940px,calc(100vw - 20px));max-width:calc(100vw - 12px);padding:18px;max-height:calc(100dvh - 20px);overflow:auto}.bebop-editor header{display:flex;align-items:center;gap:8px;margin-bottom:14px}.bebop-editor header strong{flex:1;font-size:20px}.bebop-editor button{min-height:44px;font-size:13px}.editor-toolbar{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.editor-toolbar select{font-size:13px;min-height:44px;min-width:90px;max-width:160px;background:transparent;border:1px solid var(--line)}.bebop-counts,.bebop-grid{display:grid;grid-template-columns:24px repeat(16,minmax(0,1fr));gap:4px;align-items:center;margin-top:8px}.bebop-counts small{font-size:11px;text-align:center}.bebop-grid>small{font-size:11px}.bebop-grid button{padding:0;min-width:0;min-height:48px;position:relative;background:#253b4207;border:1px solid #253b422a}.bebop-grid button:nth-child(4n+2){border-left:2px solid #253b4280}.bebop-grid button.on{background:#925b400d;border-color:#925b4060}.bebop-grid button.on:after{content:'';position:absolute;left:2px;right:2px;bottom:5px;height:65%;background:var(--note-color,#ab6244);opacity:.8;border-radius:1px}.bebop-grid[data-lane=ride]{--note-color:#997747}.bebop-grid[data-lane=pedal]{--note-color:#798f82}.bebop-grid[data-lane=kick],.bebop-grid[data-lane=bass]{--note-color:#466d65}.bebop-grid[data-lane=piano]{--note-color:#836a86}.bebop-grid button.current{outline:2px solid var(--ink);outline-offset:1px;z-index:1}.editor-status{font-size:12px;line-height:1.5;margin:12px 0 0}.bebop-editor::backdrop{background:#182b32c9;backdrop-filter:blur(7px)}
#relation-list.relation-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}#relation-list.relation-cards a{position:relative;display:flex;flex-direction:column;gap:5px;padding:10px 18px 10px 10px;border:1px solid var(--line);text-decoration:none;min-width:0;background:#ffffff18}#relation-list a small{font-size:9px;color:var(--red);letter-spacing:.04em}#relation-list a b{font-size:13px;line-height:1.35}#relation-list a span{font-size:10px;line-height:1.45;color:var(--muted)}#relation-list a i{position:absolute;right:5px;top:8px;font-size:12px;font-style:normal}.chapter-relations .page-body>p{font-size:14px;line-height:1.6}.quiz-feedback{min-height:90px}.quiz-options button[aria-pressed=true]{border-color:var(--red);background:#925b401c}.quiz-options{grid-template-columns:1fr 1fr}.quiz-card h3{font-size:14px}.quiz-options button{font-size:12px;line-height:1.4}.chapter-quiz .page-body .quiz-feedback{font-size:13px}.chapter-band .page-body,.chapter-drums .page-body{min-height:0}#notebook{height:85%;display:flex;flex-direction:column}#notebook textarea{flex:1;min-height:90px}.chapter-playlist .track-platforms a{min-width:36px}#contents button{font-size:17px}
@media(max-height:740px){.page-body p{line-height:1.6}.bebop-workbench{gap:7px}.bebop-tracks{gap:5px}.bebop-part{padding-bottom:5px}.chapter-band .page-body>p{margin-bottom:6px!important}.bebop-part[data-part=drums] .score-roll{height:58px}.score-roll{height:35px}.bebop-preview{min-height:42px;padding:4px 3px}.bebop-transport select{height:30px;padding:3px}.bebop-transport button{min-height:38px}.pads{margin:6px 0}.pads button{min-height:56px;padding:12px 3px}.chapter-relations .page-body>p{font-size:13px;line-height:1.45;margin-bottom:8px}#relation-list.relation-cards{gap:5px;margin-top:8px}#relation-list.relation-cards a{padding:6px 16px 6px 7px;gap:2px}#relation-list a b{font-size:12px}#relation-list a span{font-size:10px}.quiz-card{padding:7px 0}.quiz-feedback{min-height:65px;padding-top:7px}.quiz-options button{padding:6px;font-size:12px}.cover .page-body p:first-child{font-size:21px}.cover h1{font-size:72px}.bebop-cover-art{margin-top:10px}.chapter-sources .page-body p{font-size:13px;line-height:1.55}}
@media(max-width:360px){.bebop-part{grid-template-columns:58px minmax(0,1fr) 37px;gap:4px}.part-power{font-size:12px}.bebop-editor{padding:10px}.bebop-counts,.bebop-grid{gap:2px;grid-template-columns:20px repeat(16,minmax(0,1fr))}.bebop-counts small{font-size:10px}.bebop-editor header strong{font-size:17px}.editor-toolbar{gap:4px}.editor-toolbar button{padding:6px}.chapter-relations .page-body>p{font-size:12px}.cover h1{font-size:64px}}
@media(min-width:761px) and (max-height:600px){.chapter-band .bebop-tracks{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px}.chapter-band .bebop-transport{grid-template-columns:70px 1fr auto 120px}.chapter-band .bebop-transport select{grid-column:auto}.chapter-band .bebop-part{grid-template-columns:65px minmax(0,1fr) 40px}.chapter-band .page-body{bottom:30px}#relation-list.relation-cards{grid-template-columns:repeat(4,1fr)}#relation-list a span{font-size:10px}.chapter-quiz .quiz-feedback{min-height:48px}.chapter-quiz .quiz-card{padding:4px 0}.chapter-playlist .playlist-tracks{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.chapter-playlist .playlist-tracks li{min-height:44px!important}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
/* Keep the final line of serif display glyphs and the complete short-window page. */
.cover h1{line-height:1.25}.cover .bebop-cover-art{min-height:60px}
@media(min-width:761px) and (max-height:600px){.cover h1{font-size:60px;line-height:1.2}.cover .page-body p:first-child{font-size:20px}.cover .page-body p{margin-bottom:8px}.bebop-cover-art{margin-top:5px;min-height:35px}.chapter-drums .bebop-workbench{gap:4px}.chapter-drums .pads{margin:4px 0}.chapter-drums .pads button{min-height:44px;padding:6px 3px}.chapter-drums .bebop-part{padding-bottom:4px}.chapter-drums .bebop-transport select{height:28px}#notebook{height:74%}}
.page.chapter-notebook .page-body{display:flex;flex-direction:column}.page.chapter-notebook #notebook{flex:1;height:auto;min-height:0}.page.chapter-notebook .note-status{min-height:0;margin-bottom:0!important}.page.chapter-notebook #notes{height:0;min-height:80px}
.chapter-relations.compact #relation-list.relation-cards a{padding:5px 16px 5px 7px;gap:2px}.chapter-relations.compact #relation-list{gap:5px}.chapter-relations.compact .page-body>p{font-size:13px;line-height:1.4;margin-bottom:7px}
@media(max-width:360px) and (max-height:640px){.page:not(.cover) h1{font-size:23px;line-height:1.25;margin-top:8px}.page>header{padding-top:12px}.page-body p,.page.compact .page-body p{font-size:14px;line-height:1.45;margin-bottom:7px}.chapter-band .bebop-workbench{gap:5px}.chapter-band .bebop-transport{grid-template-columns:60px 1fr auto}.chapter-band .bebop-transport button{min-height:36px}.chapter-band .bebop-tracks{gap:4px}.chapter-band .bebop-part{padding-bottom:4px}.chapter-band .bebop-preview{min-height:35px}.chapter-band .score-roll{height:30px}.chapter-band .bebop-part[data-part=drums] .score-roll{height:51px}.chapter-band .page-body>p{font-size:13px!important;line-height:1.35!important}.chapter-relations .page-body>p{font-size:12px!important;line-height:1.4!important}.chapter-relations #relation-list.relation-cards a{padding:4px 13px 4px 5px;gap:1px}.chapter-relations #relation-list a b{font-size:11px;line-height:1.25}.chapter-relations #relation-list a small{font-size:8px;line-height:1.25}.chapter-relations #relation-list a span{font-size:9px;line-height:1.25}.chapter-drums .bebop-workbench{gap:5px}.chapter-drums .pads{margin:4px 0}.chapter-drums .pads button{min-height:44px;padding:7px}.chapter-quiz .quiz-card h3{font-size:12px;line-height:1.3}.chapter-quiz .quiz-options button{font-size:11px;line-height:1.25;padding:5px;min-height:38px}.chapter-quiz .quiz-card{padding:5px 0}.chapter-quiz .quiz-feedback{min-height:50px;font-size:11px!important;line-height:1.4!important}.chapter-sources .page-body p{font-size:12px!important;line-height:1.4!important}.source-links{gap:5px;margin-top:6px}.source-links a,.credits-link{font-size:11px}}
@media(max-width:360px) and (max-height:640px){.chapter-band .bebop-workbench{gap:3px}.chapter-relations #relation-list.relation-cards{gap:4px}.chapter-relations #relation-list.relation-cards a{padding-top:3px;padding-bottom:3px}}
.bebop-grid button.on:after{height:var(--strength-height,65%)}
#drum-practice .bebop-tracks{gap:4px}#drum-practice .bebop-grid,#drum-practice .bebop-counts{margin:0;gap:2px;grid-template-columns:22px repeat(16,minmax(0,1fr))}#drum-practice .bebop-grid button{min-height:34px}#drum-practice .bebop-transport{grid-template-columns:80px 1fr}#drum-practice .bebop-counts small{font-size:10px}
@media(max-height:640px){#drum-practice .bebop-grid button{min-height:26px}#drum-practice .bebop-tracks{gap:3px}#drum-practice .bebop-grid button.on:after{bottom:3px}.chapter-drums .page-body>p{margin-bottom:7px}}

/* Guide source is 9:16: fit the frame to the image, without cropping. */
.chapter-guides .guide-video>.vod-shell,.chapter-guides .guide-video>video{aspect-ratio:9/16;height:auto!important}
/* Four audible drum lanes remain visible even on short screens. */
#drum-practice.bebop-workbench{gap:7px}
#drum-practice .bebop-tracks{gap:5px}
#drum-practice .bebop-grid{height:28px}
#drum-practice .bebop-grid button{min-height:0;height:28px}
#drum-practice .pads button{height:64px;min-height:64px;padding:10px 3px}
@media(max-height:640px){#drum-practice .bebop-grid,#drum-practice .bebop-grid button{height:23px}#drum-practice .pads button{height:48px;min-height:48px}}
@media(max-height:640px){
#drum-practice.bebop-workbench{gap:3px}
#drum-practice .bebop-tracks{gap:2px}
#drum-practice .pads{margin:0}
#drum-practice .bebop-status{margin:0!important;font-size:10px!important;line-height:1.2!important}
.chapter-drums .page-body>p{font-size:12px!important;line-height:1.45!important;margin:0 0 5px!important}
}