/* Compact brass controls: one stationary button, one moving record. */
body:has(#app) .music-toggle .record-icon{display:block;width:26px;height:26px;flex:0 0 26px;overflow:visible;stroke-width:1}
.record-platter{transform-origin:14px 14px;animation:record-turn 3.6s linear infinite;animation-play-state:paused}
.record-rim{fill:#111b1d;stroke:#a18f6a}
.record-groove{stroke:#c3b18a;opacity:.26}
.record-glint{stroke:#d0bd92;opacity:.8;stroke-width:1.6}
.record-label{fill:#8e7950;stroke:#bfa673;stroke-width:.7}
.record-label-line{stroke:#182320;stroke-width:.9}
.record-spindle{fill:#142020;stroke:none}
.music-toggle[data-state="playing"] .record-platter{animation-play-state:running}
.music-toggle[data-state="loading"] .record-icon{opacity:.5}
@keyframes record-turn{to{transform:rotate(360deg)}}
body[data-motion="reduce"] .record-platter{animation:none}
@media(prefers-reduced-motion:reduce){.record-platter{animation:none}}

.language-picker{position:relative;display:inline-flex;align-items:center;min-width:0;flex:0 0 auto}
.language-picker select{appearance:none;-webkit-appearance:none;display:block;width:6.5rem;min-height:44px;padding:9px 25px 9px 11px;border:1px solid var(--chrome-line,#81908445);border-radius:2px;background:#111d21;color:#c9c3b2;font:400 .875rem/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Microsoft YaHei",sans-serif;cursor:pointer;color-scheme:dark}
.language-picker option{background:#172329;color:#d2cbbb}
.language-picker>svg{position:absolute;right:7px;width:16px;height:16px;fill:none;stroke:#bca982;stroke-width:1.3;pointer-events:none}
.language-picker select:focus-visible{outline:2px solid #c5b185;outline-offset:3px}
body:has(#app) .header-tools{min-width:0;align-self:center}
body:has(#app) .music-toggle{height:44px;min-height:44px}
html[lang="en"] .top nav a{letter-spacing:0;line-height:1.4}
html[lang="ja"] .top nav a{letter-spacing:.02em;line-height:1.6}
html[lang="en"] :is(.archive-progress,.murdle-progress) button{letter-spacing:0;overflow-wrap:normal;line-height:1.4}
html[lang="en"] :is(.murdle-panel-tabs,.murdle-workbench-tabs,.murdle-reference-tabs) button{letter-spacing:0;white-space:normal;line-height:1.4}
html[lang="en"] .murdle-grid caption{font-size:.875rem}
html[lang="en"] .catalog-filters{flex-wrap:wrap}
html[lang="en"] .source-path-links b{white-space:normal}

/* One responsive layout owns all mastheads. Area overrides deliberately beat
   the older page-specific grid-row/grid-column rules in shell/atmosphere. */
@media(max-width:1100px){
 body:has(#app) > .top{display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;grid-template-areas:"brand tools" "nav nav";gap:12px 16px !important;min-height:0;padding:18px 5% 6px !important}
 body:has(#app) > .top .brand{grid-area:brand !important;justify-self:start !important;min-width:0;max-width:100%;margin:0 !important}
 body:has(#app) > .top .header-tools{grid-area:tools !important;position:static;justify-self:end;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:0;max-width:100%}
 body:has(#app) > .top nav{grid-area:nav !important;display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;min-width:0;gap:4px !important;margin:0 !important;padding:6px 0 !important;align-items:stretch;overflow:visible}
 body:has(#app) > .top nav a{display:flex;align-items:center;justify-content:center;min-width:0;max-width:none;min-height:44px;margin:0 !important;padding:8px 5px !important;white-space:normal;overflow-wrap:anywhere;text-align:center;font-size:.875rem !important;line-height:1.5 !important;letter-spacing:0 !important}
 body:has(#app) .top .header-tools .music-label,body:has(#app) .top .header-tools .refresh-label{display:none}
 body:has(#app) .top .header-tools #music-toggle,body:has(#app) .top .header-tools #refresh-page{width:44px;min-width:44px;height:44px;padding:8px;gap:0}
}
@media(max-width:640px){
 /* Two quiet rows: compact identity and tools, then full-width navigation. */
 body:has(#app) > .top{grid-template-columns:minmax(0,1fr) auto !important;grid-template-areas:"brand tools" "nav nav";gap:12px 8px !important;padding:18px max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left)) !important;border-bottom:1px solid var(--chrome-line) !important}
 body:has(#app) > .top::after{display:none !important}
 body:has(#app) > .top .brand{justify-self:start !important;gap:6px !important;min-height:44px;letter-spacing:0}
 body:has(#app) > .top .brand-mark{display:grid !important;place-items:center;flex:0 0 24px;width:24px;height:32px;border:1px solid #baa37f88;border-radius:1px;font:500 15px/1 "Songti SC","Noto Serif CJK SC",serif;color:var(--chrome-accent)}
 body:has(#app) > .top .brand-copy{display:block !important;min-width:0}
 body:has(#app) > .top .brand-name{display:none}
 body:has(#app) > .top .brand small{align-items:flex-start !important;gap:5px !important;margin:0}
 body:has(#app) > .top .brand-wordmark{font-size:clamp(1.0625rem,5.2vw,1.375rem) !important;line-height:1 !important;letter-spacing:0 !important;white-space:nowrap;animation:none !important}
 body:has(#app) > .top .brand-parent{font-size:9px !important;line-height:1.2 !important;letter-spacing:.18em !important}
 body:has(#app) > .top .header-tools{justify-self:end;flex-wrap:nowrap;gap:2px}
 body:has(#app) > .top .language-picker select{width:84px;min-height:44px;padding:8px 20px 8px 6px;font-size:1rem;border-color:transparent;background:#10191f66}
 body:has(#app) > .top .language-picker>svg{right:3px;width:14px}
 body:has(#app) > .top .header-tools #music-toggle,body:has(#app) > .top .header-tools #refresh-page{border-color:transparent;background:transparent;color:var(--chrome-muted);box-shadow:none}
 body:has(#app) > .top .header-tools #music-toggle[data-state="playing"]{color:#d3bd92;background:#b8a27914}
 body:has(#app) > .top nav{padding:0 !important;border-top:0 !important;gap:8px !important;animation:none}
 body:has(#app) > .top nav a{position:relative;padding:10px 4px 12px !important;border:0 !important;background:transparent !important;border-radius:0;color:var(--chrome-muted);font-weight:500}
 body:has(#app) > .top nav a.active{color:#d6c4a2 !important}
 body:has(#app) > .top nav a.active::after{content:"";position:absolute;bottom:0;left:20%;right:20%;height:2px;background:#b6a17b;pointer-events:none}
 html[lang="ja"] body:has(#app) > .top nav{grid-template-columns:repeat(2,minmax(0,1fr))}
 html[lang="en"] :is(.archive-progress,.murdle-progress) button{font-size:.9375rem;padding-inline:5px}
}
@media(max-width:360px){
 body:has(#app) > .top{padding-right:max(12px,env(safe-area-inset-right)) !important;padding-left:max(12px,env(safe-area-inset-left)) !important;column-gap:6px !important}
}