@media screen{
html,body{margin:0;min-height:100dvh}body .shell{width:100%;max-width:none;height:100dvh;padding:10px 18px;display:flex;flex-direction:column;gap:8px;min-height:0}
.topbar{flex:none;margin:0;min-height:48px}.brand-mark{height:36px;width:36px;font-size:27px}.brand{font-size:16px}.top-actions .icon-btn,.home-icon{min-height:36px;padding:5px 10px}
#overview:not(.hidden){display:flex;flex-direction:column;flex:1;min-height:0;gap:10px}.intro{display:block;flex:none;margin:0}.intro h1{font-size:30px;line-height:1.15;margin:0 0 3px}.intro p{font-size:13px;max-width:none}.intro .eyebrow,.intro-stamp,.shell>.hint{display:none}
.controls{flex:none;gap:8px;margin:0}.search{min-height:38px;flex-basis:240px;font-size:14px;padding:6px 12px}.filters{gap:5px}.filter{font-size:12px;padding:5px 10px}
#topicGrid{flex:1;min-height:0;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px}.topic{min-height:0;padding:14px;overflow:hidden}.topic .symbol{font-size:37px;min-height:35px}.topic h2{font-size:20px;margin:3px 0 6px}.topic p{font-size:13px;line-height:1.45}.topic .group{font-size:11px;margin-top:4px}.topic .open{font-size:12px;padding-top:5px}
[data-page-hidden]{display:none!important}.notes-pagebar{display:flex;align-items:center;justify-content:center;gap:15px;min-height:34px;flex:none;direction:ltr}.notes-pagebar button{font:600 13px system-ui;padding:5px 15px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}.notes-pagebar button:disabled{opacity:.3;cursor:default}.notes-pagebar span{font-size:12px}
.detail.active{display:flex;flex-direction:column;flex:1;min-height:0;gap:8px}.detail-head{margin:0;flex:none;align-items:center}.detail-head h1{font-size:30px;line-height:1.15;margin:2px 0 4px}.detail-head p{font-size:13px;line-height:1.4;max-width:950px}.detail-head .eyebrow{font-size:10px}.detail-actions{flex-wrap:nowrap;flex:none}.back-btn,.print-btn{min-height:34px;font-size:12px;padding:5px 10px}
.detail .panel{flex:1;min-height:0;display:flex;flex-direction:column;border-radius:14px}.panel-lead{padding:6px 14px;font-size:12px;flex:none}#detail .note-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}.note{padding:10px 14px;gap:12px;min-width:0;min-height:0;align-items:center;overflow:hidden}.note h3{font-size:17px}.note p{font-size:13px;line-height:1.45}.note .english{font-size:11px}.note .glyph{min-height:48px;font-size:35px}.detail-foot{padding:6px 14px;font-size:11px;flex:none;line-height:1.4}
.detail .ornament-note{grid-template-columns:150px minmax(0,1fr);gap:12px}.detail .ornament-score{width:150px;min-height:0!important}.ornament-score svg{max-width:100%;height:auto}.rhythm-lines{gap:3px;margin:4px 0}.rhythm-line{min-width:0;padding:3px 6px}.rhythm-line strong{font-size:13px}.rhythm-line small{font-size:10px}
.reference-tools{padding:6px 12px;font-size:12px;flex:none}.reference-tools p{font-size:12px;margin:0}.reference-table-wrap{flex:1;min-height:0;overflow:visible}.reference-table{font-size:14px}.reference-table th,.reference-table td{padding:5px 12px;line-height:1.4}.book-tools{padding:4px 12px;flex:none}.book-tools p,.book-tools a{font-size:12px;margin:0}.book-frame{flex:1;width:100%;height:auto;min-height:0}
@media(max-width:1000px){.controls{display:grid;grid-template-columns:1fr}.filters{justify-content:center}.topic h2{font-size:17px}.topic p{font-size:12px}.detail .ornament-note{grid-template-columns:120px minmax(0,1fr)}.detail .ornament-score{width:120px}.note p{font-size:12px}}
@media(max-width:649px){body .shell{padding:7px;gap:6px}.topbar{min-height:38px}.brand{gap:5px}.brand-mark{display:none}.brand span:last-child{font-size:12px}.brand-wrap{gap:5px}.top-actions{gap:4px}.top-actions .icon-btn,.home-icon{padding:4px 7px;min-height:32px}.intro h1{font-size:25px}.intro p{font-size:11px;line-height:1.35}#overview:not(.hidden){gap:7px}.filters{gap:3px}.filter{font-size:10px;padding:4px 7px}.search{font-size:12px;min-height:32px}#topicGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.topic{padding:11px}.topic h2{font-size:18px}.topic .symbol{font-size:35px}.topic p{font-size:12px}.detail-head{display:block}.detail-head h1{font-size:25px}.detail-head p{font-size:12px}.detail-head .eyebrow{display:none}.detail-actions{margin-top:5px;justify-content:flex-start}#detail .note-grid{grid-template-columns:1fr}.detail .note{padding:10px;grid-template-columns:50px minmax(0,1fr)}.detail .ornament-note{grid-template-columns:1fr;gap:5px;align-content:center}.detail .ornament-score{width:200px;max-width:100%;justify-self:center}.note h3{font-size:16px}.note p{font-size:13px}.reference-table{font-size:11px}.reference-table th,.reference-table td{padding:5px 6px}.detail-foot{font-size:10px;padding:5px 10px}.panel-lead{font-size:10px}.notes-pagebar{min-height:31px}.notes-pagebar button{font-size:12px;padding:4px 12px}}
@media(orientation:landscape) and (max-height:500px){body .shell{padding:5px 10px;gap:3px}.topbar{min-height:32px}.intro h1{font-size:21px}.intro p{display:none}.controls{display:flex}.search{min-height:29px;flex-basis:170px;font-size:11px}.filter{font-size:10px;padding:3px 5px}.filters{gap:3px}#overview:not(.hidden){gap:5px}#topicGrid{grid-template-rows:1fr;grid-template-columns:repeat(4,minmax(0,1fr))}.topic{padding:8px}.topic .symbol{font-size:26px;min-height:25px}.topic h2{font-size:15px}.topic p{font-size:10px}.topic .group,.topic .open{font-size:9px}.detail-head h1{font-size:21px}.detail-head p{font-size:10px}.detail-head .eyebrow{display:none}#detail .note-grid{grid-template-columns:1fr 1fr}.detail .ornament-note{grid-template-columns:100px minmax(0,1fr)}.detail .ornament-score{width:100px}.note{padding:6px 9px}.note h3{font-size:13px}.note p{font-size:10px}.note .english{font-size:9px}.note .glyph{font-size:26px;min-height:30px}.detail-foot{font-size:9px;padding:4px 10px}.panel-lead{font-size:10px;padding:3px 10px}.notes-pagebar{min-height:26px}.notes-pagebar button{font-size:10px;padding:3px 10px}.reference-table th,.reference-table td{font-size:10px;padding:3px 10px}}
}
@media print{[data-page-hidden]{display:revert!important}.notes-pagebar{display:none!important}}
.cards-fullscreen{border:1px solid #5aceef;border-radius:10px;background:#19445b;color:#fff;font:700 14px system-ui;min-height:38px;padding:8px 15px;cursor:pointer;white-space:nowrap}
.cards-fullscreen:focus-visible{outline:2px solid #8ee6ff;outline-offset:3px}
@media(max-width:649px){.cards-fullscreen{font-size:11px;min-height:32px;padding:5px 7px}}
@media print{.cards-fullscreen{display:none!important}}
/* Keep the palette at the physical left edge in both languages. */
.topbar{position:relative;padding-left:52px}
.top-actions #themeButton{position:absolute;left:0;top:50%;transform:translateY(-50%)}
@media(max-width:649px){.topbar{padding-left:39px}}
/* Palette at far left, fullscreen immediately to its right. */
.topbar{padding-left:0}
.top-actions{display:flex;direction:ltr;flex-direction:row}
.top-actions #themeButton{position:static;transform:none;order:0}
.top-actions .cards-fullscreen{order:1}
.top-actions #langSwitch{order:2}
html[dir=ltr] .topbar{flex-direction:row-reverse}
.theme-menu{left:0!important;right:auto!important;inset-inline-start:auto;inset-inline-end:auto}
@media(max-width:649px){.topbar{padding-left:0}}
.shell .topbar .top-actions{direction:ltr!important;flex-direction:row!important}.shell .topbar .top-actions #themeButton{order:0!important}.shell .topbar .top-actions .cards-fullscreen{order:1!important}.shell .topbar .top-actions #langSwitch{order:2!important}
.shell .topbar .top-actions{position:absolute;left:0;right:auto;top:50%;transform:translateY(-50%)}.shell .topbar .brand-wrap{margin-left:auto}
.cards-brand-logo{display:block;width:36px;height:36px;flex:none;object-fit:contain}@media(max-width:649px){.cards-brand-logo{width:25px;height:25px}.brand{gap:5px}}
/* Studio lockup: P logo physically to the right of the brand name. */
.shell .topbar .brand{direction:rtl;flex-direction:row}
.shell .topbar .brand{direction:ltr!important;flex-direction:row!important}.shell .topbar .brand .cards-brand-logo{order:0}.shell .topbar .brand>span{order:1}