/* Locale, media recovery and optional sound share the SHUHAI visual system. */
[hidden]{display:none!important}
.language-picker{position:relative}
#language-button{width:auto;gap:7px;padding:8px;font-size:12px;min-height:44px}
.locale-flag{display:block;width:24px;height:16px;border-radius:2px;box-shadow:0 0 0 1px #173f3220;flex-shrink:0}
#language-options{position:absolute;right:0;top:calc(100% + 10px);width:225px;background:var(--paper);border:1px solid var(--line);box-shadow:0 12px 30px #173f3220;padding:8px;z-index:60}
#language-options button{display:flex;gap:12px;align-items:center;width:100%;min-height:48px;padding:10px;text-align:left;font-size:15px}
#language-options button>span:last-child{margin-left:auto;font-size:11px;color:var(--muted)}
#language-options button:hover,#language-options button[aria-checked=true]{background:#e3e8dc}
.boot-state,.page-state{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:50px 7%;gap:14px}
.boot-state h1,.page-state h1{font-size:clamp(30px,5vw,54px)}
.page-state>svg,.media-status>svg{width:45px;height:45px}
.state-spinner{display:block;width:24px;height:24px;border:2px solid #c9d1c2;border-top-color:var(--green);border-radius:50%;animation:state-spin .9s linear infinite}
@keyframes state-spin{to{transform:rotate(360deg)}}
.media-host{position:relative}
.media-status{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;text-align:center;background:#eae8de;color:var(--green);padding:15px;z-index:4;overflow:hidden}
.media-status p{font-size:14px!important;margin:0!important}
.media-status button{padding:10px 16px;min-height:44px;border:1px solid #9aa98f;background:var(--paper);font-size:13px}
.image-unavailable{visibility:hidden}
#connection-state{position:fixed;bottom:15px;left:50%;transform:translateX(-50%);max-width:calc(100% - 110px);width:max-content;padding:14px 20px;background:var(--green);color:white;z-index:90;box-shadow:0 5px 20px #173f3233;font-size:14px;display:flex;gap:20px;align-items:center}
#connection-state button{border-bottom:1px solid currentColor;min-height:44px;flex-shrink:0}
.music-entry{position:fixed;left:16px;bottom:16px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--paper);border:1px solid var(--line);box-shadow:0 3px 12px #173f3217;z-index:25}
.music-entry svg{width:19px;height:19px;fill:none;stroke:var(--green);stroke-width:1.3}
#music-dialog{max-width:460px}
#music-dialog .dialog-heading{align-items:start}
#music-dialog p{font-size:16px;line-height:1.6}
#music-dialog button:disabled{opacity:.55;cursor:default}
.music-volume{display:block;margin-top:22px;font-size:14px}
body:has(dialog[open]) .music-entry{visibility:hidden}
html:not([lang=en]) .hero-copy h1{font-size:clamp(40px,4.5vw,68px);overflow-wrap:break-word}
html:not([lang=en]) .signature-heading h2{font-size:clamp(34px,3.9vw,57px)}
.product-card,.story-purpose-controls button,.quote-layout>*,.header-tools{min-width:0}
.story-purpose-controls{flex-wrap:wrap}
.story-purpose-controls button{white-space:normal}
.category-grid h3,.product-card h3{overflow-wrap:anywhere}
.card-interior,.book-object{transition-duration:280ms;transition-timing-function:cubic-bezier(.22,.61,.36,1)}
#main{animation:page-arrive 180ms ease-out}
@keyframes page-arrive{from{transform:translateY(3px)}to{transform:none}}
@media(max-width:1050px) and (min-width:721px){header{gap:12px;padding-inline:3%}header .wordmark img{width:175px}nav{gap:15px}nav a{font-size:13px}}
@media(max-width:720px){
 header .wordmark img{width:138px}header{padding-inline:4%;gap:4px}#language-button{padding:4px;gap:4px;font-size:10px}.header-tools{gap:0}.header-tools>.icon-button{width:40px;min-width:40px}#language-button .locale-flag{width:21px;height:14px}
 #language-options{position:fixed;right:4%;top:78px;max-height:70dvh;overflow:auto}
 html:not([lang=en]) .hero-copy h1{font-size:43px}
 html:not([lang=en]) .signature-heading h2{font-size:34px}
 .story-purpose-controls button{font-size:14px;padding:10px 7px}
 .signature-pin{overflow:visible}.signature-story .story-purpose-detail{min-height:0}
 .product-card .shop-link{gap:8px}.shop-link svg{flex-shrink:0}
 #connection-state{font-size:12px;gap:10px;padding:10px 12px}
 #music-dialog .dialog-heading h2{font-size:28px}
}
@media(max-width:360px){header .wordmark img{width:111px}.header-tools>.icon-button{width:37px;min-width:37px}}
@media(prefers-reduced-motion:reduce){#main,.state-spinner{animation:none}.card-interior,.book-object{transition:none}.state-spinner{border-style:dotted}}
.field-error{display:block;font-size:12px;color:#903d32;margin-top:6px;line-height:1.5}
[aria-invalid=true]{border-color:#903d32;outline:1px solid #903d32}
.form-errors{padding:14px;border-left:3px solid #903d32;background:#f1e6dc;color:#713126;font-size:14px}
/* Keep image recovery clear of the modal close control. */
.image-dialog:has(>.media-status){min-height:360px}
.image-dialog>.media-status{inset:65px 15px 45px}
.image-dialog>.close{z-index:6}