@font-face{font-family:AtlasSong;src:url(assets/song-400.woff2?v=9f32f8e2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:AtlasSong;src:url(assets/song-700.woff2?v=ff8c960f) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:AtlasDisplay;src:url(assets/display.ttf) format('truetype');font-weight:400;font-display:swap}
:root{--paper:#eee6d4;--ink:#20211e;--red:#ba3029;--line:#24251e35;--muted:#686253}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{height:100dvh;display:flex;flex-direction:column;background:#1b1d19;color:var(--ink);font-family:AtlasSong,serif;font-synthesis:none}button,input,textarea,select{font:inherit;color:inherit;font-synthesis:none}button{appearance:none;-webkit-appearance:none;border:1px solid var(--line);border-radius:0;background:transparent;padding:9px 12px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.5;cursor:wait}a{color:inherit;text-underline-offset:4px}button:hover:not(:disabled){background:#ba302912}button:focus-visible,a:focus-visible,textarea:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:3px}dialog button:focus:not(:focus-visible){outline:none}b,strong,h1,h2,h3{font-weight:700}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;vertical-align:middle;pointer-events:none;flex:none}[hidden]{display:none!important}
.reader-header{height:48px;flex:none;display:flex;align-items:center;gap:16px;padding:0 24px;color:var(--paper);font-size:12px}.wordmark{text-decoration:none;font-weight:700;letter-spacing:.02em}.wordmark span{font-size:10px;font-weight:400;opacity:.7;margin-left:12px}#language-toggle{margin-left:auto;border:none;padding:8px 4px}#open-contents{border:none;padding:8px}#book-stage{position:relative;display:flex;flex:1;min-height:0;align-items:center;justify-content:center;padding:4px 0;overflow:hidden}#book{position:relative;flex:none;box-shadow:0 16px 55px #0006}html.reader-loading #book{visibility:hidden}#load-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;color:var(--paper);text-align:center;padding:28px;line-height:1.8}#load-status button{color:var(--paper);border-color:#eee6d480}.reader-nav{height:54px;flex:none;display:flex;align-items:center;justify-content:center;gap:36px;color:var(--paper);position:relative;padding-bottom:4px}.reader-nav button{border:none;min-width:46px}.reader-nav>div:not(.progress){min-width:145px;text-align:center}.reader-nav span{font-size:13px}.reader-nav small{font-size:10px;display:block;line-height:1.5;opacity:.65;margin-top:2px;max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#eee6d418}.progress i{display:block;height:100%;background:var(--red);transition:width .25s}
.page{position:relative;background:var(--paper);background-image:url(assets/paper-grain.svg);color:var(--ink);overflow:hidden;font-size:16px}.page:after{content:'';position:absolute;inset:0;box-shadow:inset 11px 0 18px -15px #0008;pointer-events:none}.page>header{position:absolute;top:0;left:0;right:0;padding:25px 34px 0}.kicker{border-top:1px solid var(--line);padding-top:11px;font-size:10px;line-height:1.5;letter-spacing:.11em;text-transform:uppercase;color:var(--red)}.page h1{margin:18px 0 0;font-size:34px;line-height:1.3;letter-spacing:-.025em;overflow-wrap:break-word}.page-body{position:absolute;left:34px;right:34px;top:135px;bottom:41px;overflow:visible;display:flow-root;line-height:1.75}.page-body p{font-size:16px;line-height:1.85;margin:0 0 17px}.page-body p:last-child{margin-bottom:0}.page-body ul,.page-body ol{font-size:15px;line-height:1.75;padding-left:20px;margin:12px 0 18px}.page-body li{margin:0 0 9px}.page-body aside{border-left:3px solid var(--red);background:#daceb759;padding:15px 17px;font-size:15px;line-height:1.8;margin:18px 0}.page>footer{position:absolute;left:34px;right:34px;bottom:0;height:30px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);font-size:9px;letter-spacing:.07em;color:var(--muted)}.continuation h1{font-size:27px}.continuation .kicker{letter-spacing:.07em}.compact .page-body p{margin-bottom:12px}.compact .page-body aside{margin:12px 0;padding:12px 14px}.compact .page-body ul{margin:9px 0}.compact .page-body li{margin-bottom:6px}.page-body .small,.production-credits{font-size:12px!important;line-height:1.7!important;color:var(--muted)}.source-list{font-size:14px!important;line-height:1.65!important}.photo{width:100%;max-height:190px;object-fit:cover;margin:0 0 18px;display:block}.text-link{border:0;border-bottom:1px solid currentColor;font-size:13px;padding:4px 0;text-align:left;line-height:1.5}.page .section-number{font-family:AtlasDisplay;font-size:40px;color:var(--red)}
.cover{background:#b92e27;color:var(--paper)}.cover .kicker{color:var(--paper);border-color:#eee6d480}.cover>header{z-index:2}.cover h1{font-family:AtlasDisplay,AtlasSong,serif;font-size:105px;line-height:.95;letter-spacing:-.045em;font-weight:400;margin-top:20px}.cover h1 .cover-cn{display:block;font-family:AtlasSong;font-size:25px;font-weight:700;letter-spacing:.13em;line-height:1.5;margin-top:7px}.cover .page-body{z-index:2;bottom:38px}.cover .page-body p{max-width:90%;font-size:15px;color:var(--paper);line-height:1.75}.cover .page-body .cover-deck{font-size:25px;font-weight:700;line-height:1.45;margin:0 0 15px}.cover-art{position:absolute;left:0;right:0;bottom:0;height:43%;background:#171916;overflow:hidden}.cover-art img{width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1) contrast(1.2);opacity:.68}.cover-art:after{content:'';position:absolute;inset:0;background:linear-gradient(#b92e27,transparent 40%,#17191666)}.cover>footer{border-color:#eee6d450;color:var(--paper);z-index:3}.cover .cover-mark{font-size:11px;letter-spacing:.1em;position:absolute;bottom:17px;left:0;text-transform:uppercase}.end{background:#20221d;color:var(--paper)}.end .kicker{color:#eb6251;border-color:#eee6d460}.end h1{font-size:39px;line-height:1.35}.end .page-body p{line-height:1.9}.end .page-body aside{background:transparent;border:0;border-top:1px solid #eee6d460;padding:18px 0;font-size:13px;color:#dfbba0}.end>footer{border-color:#eee6d460;color:#d8cbb0}.end-brand{display:block;margin-top:22px;text-decoration:none}.brand-logo{display:block;width:58px;height:58px;margin-bottom:12px}.end-brand strong{font-size:25px;display:block}.end-brand span{font-size:14px;display:block;margin-top:5px}.measure{position:fixed;left:-20000px;top:0;visibility:hidden;pointer-events:none;z-index:-100}.measure .page{display:block;position:relative!important;transform:none!important;float:none!important}
#contents{display:grid;gap:0;margin:18px 0}#contents button{display:flex;gap:15px;align-items:center;text-align:left;border:0;border-bottom:1px solid var(--line);padding:13px 0;font-size:16px;font-weight:700}#contents small{font-size:11px;color:var(--red);font-weight:400;width:22px;flex:none}.inline-media{margin:12px 0 16px;display:grid;grid-template-columns:1fr auto;gap:7px 10px}.inline-media video,.inline-media .vod-shell{grid-column:1/-1;width:100%;aspect-ratio:16/9;height:auto!important;display:block;object-fit:contain;background:#121410}.inline-media video:fullscreen{width:100vw;height:100vh!important;max-height:none;object-fit:contain}.inline-media figcaption{font-size:11px;line-height:1.5;align-self:center}.fullscreen-button{font-size:11px;padding:5px 7px;align-self:start}.media-unavailable{grid-column:1/-1;font-size:13px;line-height:1.6;padding:10px 12px;background:#ddd2bb}.vod-shell .vod-start{color:#fff}.chapter-drums h1,.chapter-performance h1,.chapter-quiz h1{font-size:29px}.drum-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0;font-size:12px}.drum-controls button{padding:8px 10px}.drum-controls button:first-child,.primary{background:var(--ink);color:var(--paper)}.tempo-control{width:100%;display:flex;align-items:center;gap:10px;font-size:12px}.tempo-control input{flex:1;min-width:0;accent-color:var(--red)}.drum-presets{display:flex;gap:7px;margin:10px 0;font-size:12px}.drum-presets button{flex:1;padding:7px 3px}.drum-presets button.selected{background:var(--red);color:white;border-color:var(--red)}.grid-head,.drum-row{display:grid;grid-template-columns:25px repeat(16,minmax(0,1fr));gap:3px;margin:5px 0}.grid-head span{grid-column:span 4;text-align:center;font-size:11px}.grid-head .spacer{grid-column:auto}.drum-row button{height:38px;min-width:0;padding:0;position:relative;background:#d2c8b5;border:1px solid #8b816c60}.drum-row .label{font-size:11px;font-weight:700;border:0;background:transparent}.drum-row .label.muted{opacity:.5;text-decoration:line-through}.drum-row .cell.on{background:#272b26;border-color:#272b26}.drum-row[data-kind=hat] .cell.on{background:#987332}.drum-row[data-kind=snare] .cell.on{background:var(--red)}.drum-row .cell.bar{border-left:2px solid #66583c}.drum-row .cell.current:after{content:'';position:absolute;inset:-2px 0;border:2px solid var(--red);pointer-events:none}.drum-row .cell.current{filter:brightness(1.4)}.page-body .drum-status{font-size:12px;line-height:1.5;min-height:36px;margin:9px 0}.pads{display:flex;gap:8px;margin:16px 0}.pads button{flex:1;background:var(--red);color:var(--paper);font-size:28px;line-height:1.2;padding:20px 3px;border:0}.pads span,.pads small{display:block;font-size:12px;line-height:1.7}.pads small{font-size:10px;color:var(--paper)}.pads .flash{background:var(--red)}#practice-loop,#midi{font-size:13px;padding:8px 10px;margin-bottom:9px}#midi-info,#practice-status{font-size:12px;line-height:1.6;margin:5px 0 12px}.quiz-card{border-top:1px solid var(--line);padding:10px 0}.quiz-card h3{font-size:15px;line-height:1.4;margin:0 0 8px}.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:7px}.quiz-options button{font-size:13px;line-height:1.35;text-align:left;padding:8px 9px;min-height:42px}.quiz-options .correct{background:#365c3b20;border-color:#365c3b}.quiz-options .wrong{background:#ba302920;border-color:var(--red)}.quiz-feedback{font-size:13px;line-height:1.65;border-top:2px solid var(--red);padding:11px 0 0;min-height:123px}.quiz-feedback .text-link{display:block;font-size:12px;margin-top:6px}.quiz-feedback strong{color:var(--red)}#notes{display:block;width:100%;height:195px;padding:12px;resize:none;border:1px solid var(--line);background:#fff9ed;font-size:15px;line-height:1.8;margin:10px 0}.note-actions{display:flex;gap:8px;font-size:13px}.note-status{min-height:42px;font-size:12px!important;line-height:1.7!important;margin:10px 0!important}dialog{color:var(--ink);background:var(--paper);border:0;padding:24px;width:min(720px,94vw);max-height:88dvh;box-shadow:0 25px 100px #0008}dialog::backdrop{background:#171916cf;backdrop-filter:blur(8px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.dialog-head h2{margin:0;font-size:22px}.dialog-head button{border:0;padding:8px}#toc-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}#toc-list button{font-size:14px;line-height:1.5;text-align:left;padding:12px}#toc-list small{display:block;color:var(--red);font-size:10px;margin-bottom:5px}.reader-boundary-notice{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);padding:10px 18px;color:var(--paper);background:#1b1d19ee;border:1px solid #eee6d450;opacity:0;pointer-events:none;font-size:13px;white-space:nowrap;z-index:100}.reader-boundary-notice.shown{opacity:1}
@media(min-width:761px){.page:after{box-shadow:inset 14px 0 20px -18px #0009}.page[data-leaf]:nth-child(even):after{box-shadow:inset -14px 0 20px -18px #0009}.cover h1{font-size:130px}.cover .page-body .cover-deck{font-size:29px}.cover .page-body p{max-width:88%}}
@media(max-width:760px){.reader-header{height:44px;padding:0 15px;gap:13px;background:#1b1d19}.wordmark{font-size:12px}.wordmark span{display:none}.reader-nav{height:calc(49px + env(safe-area-inset-bottom));padding-bottom:calc(4px + env(safe-area-inset-bottom));gap:23px}#book-stage{padding:0}#book{box-shadow:none}.page>header{padding:20px 23px 0}.kicker{font-size:9px;padding-top:9px;letter-spacing:.065em}.page h1{font-size:30px;line-height:1.35;margin-top:14px}.page-body{left:23px;right:23px;bottom:32px}.page-body p{font-size:15px;line-height:1.8;margin-bottom:14px}.page-body ul,.page-body ol{font-size:14px;line-height:1.75;margin:10px 0 14px}.page-body li{margin-bottom:7px}.page-body aside{font-size:14px;line-height:1.75;padding:12px 14px;margin:14px 0}.page>footer{left:23px;right:23px;height:25px;font-size:8px}.continuation h1{font-size:24px}.cover h1{font-size:99px;line-height:1}.cover h1 .cover-cn{font-size:23px;line-height:1.5}.cover .page-body p{font-size:15px}.cover .page-body .cover-deck{font-size:25px}.end h1{font-size:33px}.end .page-body p{font-size:15px;line-height:1.85}.end-brand{margin-top:14px}.end-brand strong{font-size:24px}.brand-logo{width:48px;height:48px}.source-list{font-size:13px!important}.production-credits{font-size:12px!important}#contents button{font-size:15px;padding:11px 0}.chapter-drums h1,.chapter-performance h1,.chapter-quiz h1{font-size:27px}.chapter-drums .page-body p{font-size:14px;line-height:1.7;margin-bottom:11px}.chapter-quiz .page-body>p{font-size:14px;line-height:1.65;margin-bottom:10px}.grid-head,.drum-row{gap:2px}.drum-row button{height:36px}.drum-controls{gap:7px;font-size:12px}.drum-presets{font-size:12px;margin:8px 0}.drum-status{font-size:12px}.quiz-card{padding:9px 0}.quiz-card h3{font-size:14px;margin-bottom:7px}.quiz-options{gap:6px}.quiz-options button{font-size:13px;padding:7px 8px;min-height:40px}.quiz-feedback{font-size:13px;line-height:1.6;min-height:124px;padding-top:9px}.pads button{padding:17px 3px}#notes{height:185px}dialog{padding:20px;width:94vw}#toc-list{grid-template-columns:1fr}#toc-list button{font-size:14px}.inline-media{margin:10px 0 14px}.inline-media figcaption{font-size:10px}.fullscreen-button{font-size:11px;padding:4px 6px}}
@media(max-width:360px){.page>header{padding:17px 18px 0}.page-body{left:18px;right:18px}.page>footer{left:18px;right:18px}.page h1{font-size:27px;margin-top:12px}.cover h1{font-size:89px}.cover h1 .cover-cn{font-size:21px}.cover .page-body .cover-deck{font-size:23px}.cover .page-body p{font-size:14px}.continuation h1{font-size:23px}.chapter-drums h1,.chapter-performance h1,.chapter-quiz h1{font-size:26px}.page-body p{font-size:14.5px;line-height:1.8}.page-body ul{font-size:14px}.end h1{font-size:30px}.end .page-body p{font-size:14.5px}.drum-controls button{padding:7px 9px}.grid-head,.drum-row{grid-template-columns:23px repeat(16,minmax(0,1fr))}.drum-row button{height:33px}.quiz-card{padding:8px 0}.quiz-options button{font-size:12.5px;padding:6px 7px}.quiz-feedback{min-height:124px}.source-list{font-size:12.5px!important}.page-body .drum-status{margin:7px 0;min-height:36px}#notes{height:170px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Reserve actual font ink/descender space in heading boxes; audits still inspect every heading. */
.page h1{padding-bottom:3px}.page>header{padding-bottom:2px}
/* AtlasDisplay's capital ink extends below a 1em line; reserve it in the cover box. */
.cover h1{line-height:1.16;padding-bottom:8px}
/* Keep the three-question unit intact at 320px, without reducing reading text. */
@media(max-width:360px){.chapter-quiz .quiz-card{padding:6px 0}.chapter-quiz .quiz-card h3{margin-bottom:5px}.chapter-quiz .page-body>p{margin-bottom:8px}.chapter-quiz h1{font-size:25px;line-height:1.3}}

/* Keep the short introduction and usable note field together on the narrowest leaf. */
@media(max-width:360px){#notes{height:140px}}
/* The complete source playlist stays together; platform icons are external links. */
.chapter-playlist h1{font-size:29px}.chapter-playlist .page-body{line-height:1.3}
.chapter-playlist .page-body .playlist-intro{font-size:12px;line-height:1.5;margin:0 0 8px}
.page-body ol.playlist-tracks{padding:0;margin:0;list-style:none}
.page-body .playlist-tracks li{display:grid;grid-template-columns:18px minmax(0,1fr) 84px;align-items:center;gap:5px;margin:0;border-top:1px solid var(--line);padding:3px 0;min-height:36px}
.track-copy{min-width:0}.track-copy strong{display:block;font-size:14px;line-height:1.2}.track-copy>span{display:block;font-size:11px;line-height:1.2;color:var(--muted)}
.track-number{font-size:10px;color:var(--muted)}.track-platforms{display:grid;grid-template-columns:repeat(3,28px);gap:0}.track-platforms [data-platform="netease"]{grid-column:1}.track-platforms [data-platform="qq_music"]{grid-column:2}.track-platforms [data-platform="youtube"]{grid-column:3}.track-platforms a{display:flex;align-items:center;justify-content:center;width:28px;height:32px;border-radius:4px;text-decoration:none;touch-action:manipulation}.track-platforms img{display:block;width:19px;height:19px;object-fit:contain}.track-platforms a:hover{background:#ba302912}.track-platforms a:focus-visible{outline:2px solid var(--red);outline-offset:0}
.chapter-playlist .page-body .playlist-note{font-size:11px;line-height:1.5;margin:7px 0 0}
@media(max-width:360px){.chapter-playlist h1{font-size:25px}.page-body .playlist-tracks li{gap:4px;padding:2px 0}.track-copy strong{font-size:13px}.track-copy>span{font-size:10.5px}}

/* Approved 3:4 guide covers share a portrait viewport; fit the remaining page height. */
.chapter-guides .guide-video{width:var(--guide-player-width,100%);max-width:100%;margin-left:auto;margin-right:auto}
.chapter-guides .guide-video>.vod-shell,.chapter-guides .guide-video>video{aspect-ratio:3/4;height:auto!important;object-fit:contain}
.chapter-guides .guide-video>.vod-shell:fullscreen,.chapter-guides .guide-video>video:fullscreen{aspect-ratio:auto;width:100vw!important;height:100vh!important}

.related-genre-link{color:var(--red);text-decoration:underline;text-underline-offset:3px}.related-genre-link:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* Short mobile windows, including WeChat chrome: retain readable text and controls. */
@media(max-width:760px) and (max-height:740px){
 .page>header{padding-top:10px}.page h1{font-size:25px;line-height:1.2;margin-top:6px}.kicker{padding-top:5px}
 .page-body{bottom:28px}.page>footer{height:23px}.page-body p,.compact .page-body p{margin-bottom:8px;line-height:1.65}
 .page-body aside,.compact .page-body aside{margin:8px 0;padding:8px 10px;line-height:1.65}
 .cover h1{font-size:76px;line-height:1.1}.cover h1 .cover-cn{font-size:20px}.cover .page-body .cover-deck{font-size:22px}.end h1{font-size:27px}
 .chapter-drums h1,.chapter-performance h1,.chapter-quiz h1,.chapter-playlist h1{font-size:23px}
 .chapter-drums .page-body p{line-height:1.5;margin-bottom:7px}.drum-controls{margin:4px 0;gap:4px}.drum-controls button{padding:5px 8px}.drum-presets{margin:4px 0}.drum-presets button{padding:5px 3px}
 .grid-head,.drum-row{margin:3px 0}.drum-row button{height:28px}.page-body .drum-status{min-height:0;margin:5px 0;line-height:1.4}
 .chapter-quiz .page-body>p{margin-bottom:6px;line-height:1.45}.chapter-quiz .quiz-card{padding:5px 0}.chapter-quiz .quiz-card h3{line-height:1.3;margin-bottom:4px}.quiz-options button{padding:5px 7px;min-height:36px}.quiz-feedback{min-height:108px;padding-top:6px;line-height:1.4}.quiz-feedback .text-link{margin-top:3px;padding:2px 0}
 .page-body .playlist-tracks li{min-height:32px;padding:1px 0}.track-platforms a{height:30px}.chapter-playlist .page-body .playlist-intro{margin-bottom:4px}.chapter-playlist .page-body .playlist-note{margin-top:4px;line-height:1.3}
 #contents{margin:8px 0}#contents button{padding:7px 0}.pads{margin:8px 0}.pads button{padding:10px 3px}#notes{height:100px}
 .chapter-guides .guide-video{margin-top:6px;margin-bottom:6px}
}
@media(max-width:760px) and (max-height:640px){
 .chapter-playlist>header{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-top:10px}.chapter-playlist h1{order:-1;margin:0;font-size:23px}.chapter-playlist .kicker{border:0;letter-spacing:0;padding:0;font-size:8px}
 .page-body .playlist-tracks li{min-height:30px;padding:1px 0}.track-copy strong{font-size:13px;line-height:1.15}.track-copy>span{font-size:10.5px;line-height:1.1}.track-platforms a{height:28px}
 .chapter-playlist .page-body .playlist-intro,.chapter-playlist .page-body .playlist-note{line-height:1.2;margin:2px 0;font-size:11px}
 .chapter-drums .page-body p{line-height:1.45}.chapter-drums .drum-controls button{padding:4px 7px}.chapter-drums .drum-presets button{padding:4px 2px}
 .quiz-feedback{min-height:102px}.quiz-options button{padding-top:4px;padding-bottom:4px}
}
@media(max-width:760px) and (max-height:600px){
 .chapter-playlist>header{padding-top:7px}.chapter-playlist .page-body{bottom:22px}
 .chapter-drums .drum-controls,.chapter-drums .drum-presets{margin:2px 0}.chapter-drums .grid-head,.chapter-drums .drum-row{margin:2px 0}.chapter-drums .drum-row button{height:26px}
}
@media(max-width:760px) and (max-height:600px){.chapter-drums .page-body>p:last-child{margin-bottom:0}}
@media(max-width:760px) and (max-height:640px){.chapter-drums .page-body .drum-status{font-size:12px;line-height:1.4;margin:3px 0}}
@media(max-width:760px) and (max-height:640px){.chapter-playlist h1{flex-shrink:0}.chapter-playlist .kicker{max-width:30%;text-align:right}}
@media(max-width:760px) and (max-height:640px){.chapter-playlist .kicker{line-height:1.15}}
@media(max-width:760px) and (max-height:600px){.chapter-playlist .page-body .playlist-intro,.chapter-playlist .page-body .playlist-note{margin:0}}
@media(max-width:760px) and (max-height:640px){.end .page-body p{line-height:1.6}}
@media(max-width:760px) and (max-height:600px){.end-brand{display:grid;grid-template-columns:48px 1fr;gap:0 12px;align-items:center}.end-brand .brand-logo{grid-row:1/4;margin:0}.end-brand strong,.end-brand span{line-height:1.4;margin:0}}

/* Disco-specific diagrams preserve its bands, records and dance-floor context. */
.orbit-art{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;margin:16px 0;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.orbit-art span{font-size:13px}.orbit-art strong{grid-column:1/-1;font-size:26px;color:var(--red)}
.ancestry{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:center;margin:16px 0}.ancestry div{border-top:2px solid var(--red);padding:9px 3px}.ancestry small,.ancestry b{display:block}.ancestry small{font-size:11px}.ancestry b{font-size:17px}.ancestry>strong{grid-column:1/-1;font-size:29px;color:var(--red)}
.vinyl-art{display:flex;gap:24px;align-items:center;justify-content:center;margin:16px 0;height:120px}.vinyl-art i{display:block;flex:none;width:116px;height:116px;border-radius:50%;background:radial-gradient(circle,var(--paper) 0 3px,var(--red) 4px 20px,transparent 21px),repeating-radial-gradient(circle,#20211e 0 2px,#393b34 3px,#20211e 4px)}.vinyl-art b{font-size:36px}.vinyl-art small{display:block;font-size:10px}
.structure{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:10px 0}.structure button{padding:9px 3px;font-size:12px;line-height:1.4}.structure button.selected{background:var(--red);color:white}.arrangement-demo{margin:12px 0}.answer{border-left:2px solid var(--red);padding:10px 12px;background:#daceb740;font-size:13px;line-height:1.65;min-height:132px}
.roles{display:flex;gap:8px;border-top:1px solid var(--line);padding:12px 0}.roles b{flex:1;font-size:15px}.roles span{display:block;font-size:11px;font-weight:400;color:var(--muted)}
.pulse-art{height:90px;display:flex;align-items:center;gap:5px;margin:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.pulse-art i{flex:1;min-height:30px;height:45px;background:var(--ink)}.pulse-art i:nth-child(4n+1){height:72px;background:var(--red)}.pulse-art i:nth-child(even){height:35px}
.timeline{display:flex;gap:10px;margin:16px 0}.timeline b{flex:1;border-top:2px solid var(--red);padding-top:8px;font-size:20px}.timeline span{display:block;font-size:11px;font-weight:400}
.pulse-unit{margin:10px 0}.pulse-unit .inline-media{margin-top:0;margin-bottom:7px}.beats{display:flex;gap:7px}.beats b{flex:1;text-align:center;font-size:23px;line-height:1.5;background:#daceb7}.beats b.on{background:var(--red);color:#fff}.beats b:first-child.on{background:var(--ink)}.pulse-unit #beat-status{font-size:11px;margin:4px 0;line-height:1.5}
@media(max-width:360px){.structure{grid-template-columns:repeat(2,1fr)}.roles{gap:5px}.roles b{font-size:13px}.roles span{font-size:10px}}

/* A complete authored topic stays together on one leaf at every supported size. */
.page:not(.cover)>header{padding-top:18px}
.page:not(.cover) h1{font-size:30px;line-height:1.22;margin:10px 0 0}
.page:not(.cover) .page-body>p{line-height:1.65;margin-bottom:12px}
.page:not(.cover) .page-body aside{line-height:1.6;padding:10px 12px;margin:12px 0}
.root-paths{margin:12px 0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.root-paths p{font-size:14px!important;line-height:1.6!important;border-top:2px solid var(--red);padding-top:8px;margin:0!important}
.root-paths a{font-weight:700;text-decoration-thickness:1px}
.relation-list p{border-top:1px solid var(--line);padding-top:9px;margin-bottom:11px!important;font-size:14px!important;line-height:1.6!important}
.relation-list a{font-weight:700}
.orbit-art{grid-template-columns:repeat(3,1fr);margin:12px 0;padding:9px 0;gap:5px}
.orbit-art strong{font-size:22px}
.vinyl-art{height:92px;margin:10px 0;gap:22px}.vinyl-art i{width:88px;height:88px}.vinyl-art b{font-size:30px}
.arrangement-demo{margin:10px 0}.structure{grid-template-columns:repeat(4,1fr);margin:8px 0}.structure button{font-size:12px;padding:8px 2px}
.answer{min-height:100px;font-size:14px;line-height:1.55;padding:9px 10px}
.roles{margin:8px 0}.roles b{font-size:14px}.roles span{font-size:11px}
.chapter-sources .source-list{font-size:14px!important;line-height:1.55!important;margin:0 0 9px}
.chapter-sources .source-list li{margin-bottom:5px}
#contents{margin:10px 0}#contents button{padding:9px 0}
@media(max-width:760px){
 .page:not(.cover)>header{padding-top:14px}
 .page:not(.cover) h1{font-size:26px;line-height:1.22;margin-top:8px}
 .page:not(.cover) .kicker{padding-top:6px;line-height:1.35}
 .page:not(.cover) .page-body>p{font-size:15px;line-height:1.55;margin-bottom:10px}
 .page:not(.cover) .page-body aside{font-size:14px;line-height:1.55;padding:8px 10px;margin:10px 0}
 .inline-media:not(.guide-video){margin:5px 0 9px;gap:4px 8px}
 .inline-media:not(.guide-video)>video,.inline-media:not(.guide-video)>.vod-shell{width:min(100%,var(--excerpt-player-width,100%));justify-self:center}
 .root-paths{gap:10px;margin:10px 0}.root-paths p{font-size:14px!important}
 .chapter-sources .source-list{font-size:13px!important;line-height:1.5!important}
 .chapter-sources .source-list li{margin-bottom:4px}
 .chapter-hands .pads{margin:10px 0}.chapter-hands .pads button{padding:12px 3px}
 .chapter-hands #midi-info,.chapter-hands #practice-status{margin:4px 0;line-height:1.4}
 .chapter-notebook #notes{height:150px;margin:7px 0}
}
@media(max-width:760px) and (max-height:700px){
 .page:not(.cover)>header{padding-top:10px}
 .page:not(.cover) h1{font-size:24px;line-height:1.2;margin-top:6px}
 .page:not(.cover) .kicker{font-size:9px;padding-top:4px}
 .page:not(.cover) .page-body>p{font-size:15px;line-height:1.5;margin-bottom:8px}
 .page:not(.cover) .page-body aside{padding:7px 9px;margin:8px 0;line-height:1.45}
 .orbit-art{margin:8px 0;padding:5px 0;gap:2px}.orbit-art strong{font-size:18px}
 .vinyl-art{height:65px;margin:7px 0}.vinyl-art i{height:62px;width:62px}.vinyl-art b{font-size:27px}
 .pulse-art{height:48px;margin:9px 0}
 .timeline{margin:9px 0}.timeline b{font-size:14px}.timeline span{font-size:11px}
 .structure button{padding:7px 2px;font-size:11px;line-height:1.3}
 .arrangement-demo{margin:8px 0}.answer{min-height:91px;font-size:13px;line-height:1.45;padding:8px 9px}
 .root-paths{margin:8px 0}.root-paths p{font-size:13px!important;line-height:1.45!important}
 .relation-list p{padding-top:7px;margin-bottom:8px!important;font-size:14px!important;line-height:1.5!important}
 #contents button{padding:7px 0;font-size:15px}#contents{margin:8px 0}
 .chapter-pulse .beats b{font-size:20px;line-height:1.3}.chapter-pulse .pulse-unit{margin:6px 0}
 .chapter-pulse .page-body>p{font-size:14px;line-height:1.5}.chapter-pulse .page-body>p.small{font-size:11px!important;line-height:1.4!important}
 .chapter-notebook #notes{height:126px}.chapter-notebook .note-status{margin-top:5px!important}
 .chapter-hands .pads button{font-size:24px;padding:8px 3px}.chapter-hands .pads span{font-size:11px}
 .chapter-hands #practice-loop,.chapter-hands #midi{padding:6px 8px;margin-bottom:4px}
 .chapter-sources .source-list{font-size:13px!important;line-height:1.4!important}
 .chapter-sources .source-list li{margin-bottom:3px}
 .chapter-sources .page-body .small{font-size:11px!important;line-height:1.45!important}
}
@media(max-width:760px) and (max-height:700px){
 .roles{padding:5px 0;line-height:1.35}.roles span{line-height:1.35}
 .pulse-art i{height:26px;min-height:0}.pulse-art i:nth-child(4n+1){height:40px}.pulse-art i:nth-child(even){height:20px}
 .page:not(.cover) .page-body>p:last-child{margin-bottom:0}
 .chapter-pulse .page-body>p{font-size:14px;line-height:1.5}
}
@media(max-width:760px) and (max-height:700px){
 .inline-media:not(.guide-video){position:relative;grid-template-columns:1fr}
 .inline-media:not(.guide-video)>figcaption{grid-column:1/-1;text-align:center}
 .inline-media:not(.guide-video)>.fullscreen-button{position:absolute;right:calc((100% - min(100%,var(--excerpt-player-width,100%)))/2 + 4px);top:4px;background:#171916db;color:white;border-color:#ffffff50;z-index:2}
}
.inline-media:not(.guide-video)>video:fullscreen{width:100vw!important;height:100vh!important}

/* Secondary artworks and verified stills follow the complete text; titles never overlay art. */
.chapter-art{position:absolute;left:34px;right:34px;margin:0;pointer-events:none}
.chapter-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;mix-blend-mode:multiply}
.has-chapter-art .page-body>p{line-height:1.75;margin-bottom:14px}
@media(max-width:760px){.chapter-art{left:23px;right:23px}.has-chapter-art .page-body>p{line-height:1.55;margin-bottom:7px}}
@media(max-width:360px){.chapter-art{left:18px;right:18px}}
/* Excerpts fill their container unless complete-page content needs the height. */
.inline-media:not(.guide-video)>video,.inline-media:not(.guide-video)>.vod-shell{width:min(100%,var(--excerpt-player-width,100%));justify-self:center}

@media(max-width:760px) and (max-height:700px){.chapter-sources .source-list li{margin-bottom:1px}.chapter-arrangement .answer{min-height:0}}

@media(max-width:760px) and (max-height:700px){.page.has-chapter-art .page-body>p{line-height:1.5;margin-bottom:6px}}

.chapter-art.source-still img{object-fit:contain;object-position:left center;mix-blend-mode:normal}

/* Per-page reading comfort uses spare height, without compressing complete topics. */
.page[data-comfort="1"]{--comfort:1}.page[data-comfort="2"]{--comfort:2}.page[data-comfort="3"]{--comfort:3}.page[data-comfort="4"]{--comfort:4}
.page[data-comfort]{--body-size:calc(16px + var(--comfort)*1px);--body-leading:calc(1.65 + var(--comfort)*.05)}
.page[data-comfort]:not(.cover) h1{font-size:calc(30px + var(--comfort)*1px)}
.page[data-comfort]:not(.cover) .page-body>p:not(.small){font-size:var(--body-size);line-height:var(--body-leading);margin-bottom:calc(12px + var(--comfort)*4px)}
.page[data-comfort] .relation-list p{font-size:calc(14px + var(--comfort)*1px)!important;line-height:1.7!important;margin-bottom:calc(11px + var(--comfort)*4px)!important;padding-top:calc(9px + var(--comfort)*3px)}
.page[data-comfort] .source-list{font-size:calc(14px + var(--comfort)*1px)!important;line-height:1.7!important}
.page[data-comfort] .source-list li{margin-bottom:calc(5px + var(--comfort)*3px)}
.page[data-comfort] .page-body .small{font-size:calc(12px + var(--comfort)*.25px)!important;line-height:1.6!important}
.page[data-comfort] .answer{font-size:calc(14px + var(--comfort)*.5px);line-height:1.65;padding:calc(9px + var(--comfort)*2px) 12px;min-height:calc(100px + var(--comfort)*8px)}
.page[data-comfort] .structure button{font-size:calc(12px + var(--comfort)*.5px);padding:calc(8px + var(--comfort)*1px) 2px}
.page[data-comfort] #contents button{font-size:calc(16px + var(--comfort)*.5px);padding:calc(9px + var(--comfort)*3px) 0}
.page[data-comfort] .playlist-tracks li{padding:calc(3px + var(--comfort)*2px) 0;min-height:calc(36px + var(--comfort)*3px)}
.page[data-comfort] .track-copy strong{font-size:calc(14px + var(--comfort)*.5px)}
.page[data-comfort] .track-copy>span{font-size:calc(11px + var(--comfort)*.25px)}
.page[data-comfort] .quiz-card{padding:calc(10px + var(--comfort)*3px) 0}
.page[data-comfort] .quiz-card h3{font-size:calc(15px + var(--comfort)*.5px);line-height:1.5}
.page[data-comfort] .quiz-options button{font-size:calc(13px + var(--comfort)*.5px);padding:calc(8px + var(--comfort)*2px) 9px}
.page[data-comfort] .quiz-feedback{font-size:calc(13px + var(--comfort)*.5px);line-height:1.65;padding-top:calc(11px + var(--comfort)*2px)}
.page[data-comfort] #notes{height:calc(195px + var(--comfort)*40px);font-size:var(--body-size)}
.page[data-comfort] .drum-row button{height:calc(36px + var(--comfort)*5px)}
.page[data-comfort] .drum-controls{gap:calc(8px + var(--comfort)*1px);margin:calc(8px + var(--comfort)*2px) 0}
.page[data-comfort] .drum-presets{margin:calc(10px + var(--comfort)*2px) 0}
.page[data-comfort] .pads{margin:calc(16px + var(--comfort)*4px) 0}
.page[data-comfort] .pads button{padding:calc(20px + var(--comfort)*5px) 3px}
.page[data-comfort].chapter-hands #practice-status,.page[data-comfort].chapter-hands #midi-info{font-size:calc(12px + var(--comfort)*.5px);line-height:1.65;margin:12px 0}
.page[data-comfort] .pulse-art{height:calc(90px + var(--comfort)*8px);margin:calc(12px + var(--comfort)*3px) 0}
.page[data-comfort] .timeline{margin:calc(16px + var(--comfort)*5px) 0}
.page[data-comfort] .end-brand{margin-top:calc(22px + var(--comfort)*10px)}
@media(max-width:760px){.page[data-comfort]{--body-size:calc(15px + var(--comfort)*1px)}.page[data-comfort]:not(.cover) h1{font-size:calc(26px + var(--comfort)*1px)}.page[data-comfort] .source-list{font-size:calc(13px + var(--comfort)*1px)!important}}

/* The entire loop preview is the drum-lab destination, using its actual pattern. */
.pattern-preview{display:block;width:100%;text-align:left;padding:12px 13px;background:#e0d5bf;border:1px solid #82745f60;position:relative}
.pattern-preview:hover{background:#daceb7!important}.pattern-preview:focus-visible{outline-offset:3px}
.pattern-mini{display:block;position:relative;overflow:hidden;pointer-events:none}
.pattern-mini-row{display:grid;grid-template-columns:20px repeat(16,minmax(0,1fr));gap:3px;margin:4px 0;align-items:center}
.pattern-mini-row>span{font-size:10px;line-height:1;color:var(--muted)}
.pattern-mini-row i{height:17px;background:#c9bea8;border-left:1px solid transparent}
.pattern-mini-row i.bar{border-left-color:#8e7e63}.pattern-mini-row i.on{background:#252821}
.pattern-mini-row[data-kind=hat] i.on{background:#9b793d}.pattern-mini-row[data-kind=snare] i.on{background:var(--red)}
.pattern-mini:after{content:'';position:absolute;top:0;bottom:0;left:23px;width:2px;background:#ba302980;animation:pattern-sweep var(--preview-duration,2.069s) steps(16,end) infinite}
@keyframes pattern-sweep{from{left:23px}to{left:100%}}
.pattern-destination{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:13px;font-weight:700;line-height:1.4;color:var(--red)}
@media(max-width:760px) and (max-height:700px){
 .pattern-preview{display:flex;flex-direction:row-reverse;align-items:center;gap:9px;padding:5px 7px}
 .pattern-mini{flex:1;min-width:0}.pattern-mini-row{grid-template-columns:16px repeat(16,minmax(0,1fr));gap:1px;margin:2px 0}
 .pattern-mini-row i{height:9px}.pattern-mini-row>span{font-size:8px}.pattern-mini:after{animation-name:pattern-sweep-short;left:17px}
 @keyframes pattern-sweep-short{from{left:17px}to{left:100%}}
 .pattern-destination{display:block;flex:0 0 78px;font-size:11px;line-height:1.4;margin:0}
}
@media(prefers-reduced-motion:reduce){.pattern-mini:after{animation:none}}

.genre-link-symbol{width:14px;height:14px;margin-right:3px;vertical-align:-1px;stroke-width:1.6}
.page[data-comfort].end .page-body>p:not(.small){font-size:calc(18px + var(--comfort)*1px);line-height:1.75}
.page[data-comfort].end .brand-logo{width:calc(64px + var(--comfort)*8px);height:calc(64px + var(--comfort)*8px)}
.page[data-comfort].end .end-brand strong{font-size:calc(28px + var(--comfort)*2px)}
.page[data-comfort].end .end-brand span{font-size:calc(14px + var(--comfort)*1px)}
@media(max-width:760px) and (max-height:700px){.page.chapter-arrangement .page-body>p{margin-bottom:4px}.chapter-arrangement .arrangement-demo{margin:4px 0}}
/* A loop preview stays present even when an intermediate viewport needs compact layout. */
.page.compact .pattern-preview{display:flex;flex-direction:row-reverse;align-items:center;gap:9px;padding:5px 7px}
.page.compact .pattern-mini{flex:1;min-width:0}.page.compact .pattern-mini-row{grid-template-columns:16px repeat(16,minmax(0,1fr));gap:1px;margin:2px 0}
.page.compact .pattern-mini-row i{height:9px}.page.compact .pattern-mini-row>span{font-size:8px}
.page.compact .pattern-mini:after{animation-name:pattern-sweep-short;left:17px}
.page.compact .pattern-destination{display:block;flex:0 0 78px;font-size:11px;line-height:1.4;margin:0}
@keyframes pattern-sweep-short{from{left:17px}to{left:100%}}
@media(prefers-reduced-motion:reduce){.page.compact .pattern-mini:after{animation:none}}

.page[data-comfort="5"]{--comfort:5}.page[data-comfort="6"]{--comfort:6}

/* Short desktop windows need the same complete-topic density as short phones. */
@media(min-width:761px) and (max-height:740px){
 .page>header,.page:not(.cover)>header{padding-top:10px}
 .page:not(.cover) h1{font-size:24px;line-height:1.2;margin-top:6px}
 .page:not(.cover) .kicker{font-size:9px;padding-top:4px;line-height:1.35}
 .page-body{bottom:28px}.page>footer{height:23px}
 .page:not(.cover) .page-body>p{font-size:15px;line-height:1.5;margin-bottom:8px}
 .page:not(.cover) .page-body aside{font-size:14px;padding:7px 9px;margin:8px 0;line-height:1.45}
 .cover h1{font-size:76px;line-height:1.1}.cover h1 .cover-cn{font-size:20px}
 .cover .page-body .cover-deck{font-size:22px}.cover .page-body p{font-size:15px;line-height:1.65}
 #contents{margin:8px 0}#contents button{padding:7px 0;font-size:15px}
 .chapter-drums .page-body>p{font-size:14px;line-height:1.45;margin-bottom:7px}
 .drum-controls{margin:3px 0;gap:4px}.drum-controls button{padding:4px 7px}
 .drum-presets{margin:4px 0}.drum-presets button{padding:4px 2px}
 .grid-head,.drum-row{margin:3px 0}.drum-row button{height:28px}
 .page-body .drum-status{min-height:0;margin:3px 0;font-size:12px;line-height:1.4}
 .pads{margin:8px 0}.pads button{padding:10px 3px}
 #practice-loop,#midi{padding:6px 8px;margin-bottom:4px}#midi-info,#practice-status{margin:4px 0;line-height:1.4}
 .quiz-card{padding:5px 0}.quiz-card h3{font-size:14px;line-height:1.3;margin-bottom:4px}
 .quiz-options button{font-size:13px;padding:5px 7px;min-height:36px}
 .quiz-feedback{min-height:108px;padding-top:6px;font-size:13px;line-height:1.4}
 .quiz-feedback .text-link{margin-top:3px;padding:2px 0}
 #notes{height:126px;margin:7px 0}.note-status{margin:5px 0!important}
 .page-body .playlist-tracks li{min-height:32px;padding:1px 0}.track-platforms a{height:30px}
 .chapter-playlist .page-body .playlist-intro{margin-bottom:4px}.chapter-playlist .page-body .playlist-note{margin-top:4px;line-height:1.3}
 .chapter-sources .source-list{font-size:13px!important;line-height:1.4!important}.chapter-sources .source-list li{margin-bottom:1px}
 .chapter-sources .page-body .small{font-size:11px!important;line-height:1.45!important}
 .page.chapter-arrangement .page-body>p{margin-bottom:4px}.chapter-arrangement .arrangement-demo{margin:4px 0}
 .structure button{padding:7px 2px;font-size:11px;line-height:1.3}.answer{min-height:0;font-size:13px;line-height:1.45;padding:8px 9px}
 .pulse-art{height:48px;margin:9px 0}.pulse-art i{height:26px;min-height:0}.pulse-art i:nth-child(4n+1){height:40px}.pulse-art i:nth-child(even){height:20px}
 .timeline{margin:9px 0}.timeline b{font-size:14px}.timeline span{font-size:11px}
 .roles{padding:5px 0;line-height:1.35}.roles span{line-height:1.35}
 .relation-list p{padding-top:7px;margin-bottom:8px!important;font-size:14px!important;line-height:1.5!important}
 .inline-media:not(.guide-video){margin:5px 0 9px;gap:4px 8px}
 .chapter-pulse .beats b{font-size:20px;line-height:1.3}.chapter-pulse .pulse-unit{margin:6px 0}
 .chapter-pulse .page-body>p{font-size:14px;line-height:1.5}.chapter-pulse .page-body>p.small{font-size:11px!important;line-height:1.4!important}
}

/* Four genuine original-recording excerpts; compact audio-only controls. */
.arrangement-demo{position:relative}
.arrangement-vod-host{position:absolute!important;width:2px!important;height:2px!important;left:0;bottom:0;opacity:.001;overflow:hidden;pointer-events:none}
.arrangement-demo .structure button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:7px 4px;font-size:14px;line-height:1.15}
.section-icon{display:inline-flex;width:12px;height:12px;flex:0 0 12px}
.section-icon svg{width:100%;height:100%;fill:currentColor}
.section-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2px 8px;font:11px/1.45 Arial,sans-serif;margin:6px 0 3px;color:#514d48}
.section-progress{display:block;width:100%;height:3px;border:0;appearance:none;background:#d8d2c8;margin:0 0 9px;color:var(--red)}
.section-progress::-webkit-progress-bar{background:#d8d2c8}
.section-progress::-webkit-progress-value{background:#a72924}
.section-progress::-moz-progress-bar{background:#a72924}
.chapter-arrangement .answer{margin-top:0}
@media(max-width:360px){.arrangement-demo .structure button{font-size:12px;gap:3px}.section-meta{font-size:10px}.chapter-arrangement .kicker{font-size:9px;letter-spacing:.06em}}
@media(max-height:640px){.chapter-arrangement .pattern-preview{margin-top:5px}.section-progress{margin-bottom:6px}.section-meta{margin-top:4px}}

@media(min-width:761px) and (max-height:640px){.chapter-arrangement .answer{padding:6px 9px}.chapter-arrangement .pattern-preview{margin-bottom:5px}}

/* Window geometry, not a phone-only breakpoint: retain readable complete topics. */
@media(min-width:761px) and (max-height:620px){
 .reader-header{height:36px}.reader-nav{height:40px}#book-stage{padding:0}
 .page>header{padding-top:9px}.page-body{bottom:27px}.page>footer{height:22px}
 .cover h1{font-size:70px;line-height:1.16;margin-top:7px}.cover h1 .cover-cn{font-size:19px;margin-top:3px}
 .cover .page-body .cover-deck{font-size:22px;margin-bottom:9px}
 .cover .page-body p{font-size:15px;line-height:1.5;max-width:90%}
 .chapter-playlist>header{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
 .chapter-playlist h1{order:-1;margin:0!important}.chapter-playlist .kicker{border:0;padding:0;max-width:35%}
 .page-body .playlist-tracks li{min-height:28px}.track-platforms a{height:28px}
 .page-body .quiz-feedback{min-height:82px}
 .end-brand{display:grid;grid-template-columns:48px 1fr;gap:0 12px;align-items:center;margin-top:10px}
 .end-brand .brand-logo{grid-row:1/4;margin:0;width:48px;height:48px}.end-brand strong,.end-brand span{line-height:1.4;margin:0}
}

@media(min-width:761px) and (max-height:620px){
 .chapter-drums .tempo-control{width:auto;flex:1;min-width:170px}
 .chapter-playlist .playlist-tracks{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
 .chapter-playlist .playlist-tracks li{min-height:40px;padding:3px 0}
 .chapter-playlist .track-copy strong{font-size:14px}.chapter-playlist .track-copy>span{font-size:11px}
}

@media(min-width:761px) and (max-height:680px){
 .chapter-playlist .playlist-tracks{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
 .chapter-playlist .playlist-tracks li{min-height:40px;padding:3px 0}
}
@media(min-width:761px) and (max-height:620px){
 .chapter-quiz #quiz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
 .chapter-quiz .quiz-feedback{grid-column:1/-1;min-height:100px}
 .chapter-quiz .quiz-card{padding:6px 0}.chapter-quiz .quiz-options{gap:6px}
}

@media(min-width:761px) and (max-height:620px){
 .page:not(.cover)>header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-top:8px}
 .page:not(.cover) h1{order:-1;margin:0;font-size:22px;line-height:1.2}
 .page:not(.cover) .kicker{border:0;padding:0;max-width:24%;font-size:9px;text-align:right;flex-shrink:0}
 #notes{height:100px}.note-status{min-height:30px}
}

@media(min-width:761px) and (max-height:620px){.chapter-contents #contents{grid-template-columns:1fr 1fr;column-gap:24px}}

.layout-recovery #load-status{position:fixed;inset:0;z-index:200;background:#1b1d19;overflow:auto;justify-content:flex-start;padding:20px;gap:10px;font-size:14px;line-height:1.5}.layout-recovery #load-status p{margin:8px 0}.layout-recovery #load-status button{flex-shrink:0}

/* Percussion owns its touches; page gestures remain unchanged outside the pads. */
.pads,.pads button{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pads button:hover:not(:disabled),.pads button:active{background:var(--red)}

/* Closed first and last leaves occupy one real page, centered in a spread. */
#book[data-edge=front],#book[data-edge=back]{box-shadow:none}
#book[data-orientation=landscape][data-edge=front]{transform:translateX(calc(var(--leaf-width) / -2))}
#book[data-orientation=landscape][data-edge=back]{transform:translateX(calc(var(--leaf-width) / 2))}
#book[data-edge=front] .cover,#book[data-edge=back] .end{box-shadow:0 15px 35px #0003}