/* Selected V1 finish: smoked crystal panels, with stacked dialogue typography. */
:root{
  --surface-radius:11px;
  --surface-blur:18px;
  --surface-saturation:.82;
  --surface-fill:linear-gradient(145deg,#e4e9e613,transparent 34%,#b5c0c80a),rgba(16,27,34,.39);
  --surface-shadow:0 20px 55px #0003,inset 0 1px 0 #f2ead050,inset 0 -1px 0 #c5d4db16,inset 1px 0 0 #f1e7ce2a,inset -1px 0 0 #dee8e41a;
}
.panel,.toast{border-color:transparent;border-radius:var(--surface-radius);background:var(--surface-fill);box-shadow:var(--surface-shadow);backdrop-filter:blur(var(--surface-blur)) saturate(var(--surface-saturation));-webkit-backdrop-filter:blur(var(--surface-blur)) saturate(var(--surface-saturation))}
.panel{padding:27px 30px 30px;animation:crystal-arrive .38s cubic-bezier(.16,1,.3,1);overflow:hidden}
.settings-panel{overflow:auto;scrollbar-width:thin;scrollbar-color:#c5af8e33 transparent}
.panel-top{margin-bottom:18px}.panel-top .micro{color:#c1c5ba}.panel-top .icon-button{width:28px;height:28px;margin-right:-4px;background:#ebe2d00c;border:1px solid #f0e3c811;color:#c2b9ab}
.panel h2{font-size:30px;letter-spacing:1.5px}.panel-subtitle{color:#bab8aa;line-height:1.9}.setting-line{color:#e0d8c9}.panel-footnote{border-color:#ecddc416;color:#b5b8ac}
.switch{flex-shrink:0;border-color:#ddd0b566;background:#14202922}.toggle-line small{color:#c2c6ba}
.setting-options{border:1px solid #e6d4b61c;background:#12202a26;border-radius:5px;padding:3px;gap:3px}.setting-options button{border:0;border-radius:3px;padding:9px 3px;color:#b4b6ad}.setting-options button+button{border-left:0}.setting-options button[aria-pressed=true]{background:#d8bd971c;box-shadow:inset 0 1px 0 #eed9b524;color:#eddbc0}
.save-button{border-radius:6px;border-color:#ead9be39;background:#e2d0b614;box-shadow:inset 0 1px 0 #eddcc317;color:#e5d1af}.save-button:hover{background:#d8bd972d}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:#e1d4bb29;border-radius:2px}input[type=range]::-webkit-slider-thumb{box-shadow:0 0 0 5px #d8bd970b,0 2px 8px #0005;background:#e3ccab}
/* Same crystal fill and lit edge, while preserving the preferred two-line layout. */
.toast{--surface-blur:22px;--surface-fill:linear-gradient(120deg,#cad4d517,transparent),rgba(18,29,35,.45);display:block;padding:15px 25px 17px;min-width:255px;max-width:min(540px,85vw);bottom:19vh;text-align:left;transition:opacity .3s,transform .35s}
.toast small{display:block;margin:0 0 6px;padding:0;border:0;font-size:8px;letter-spacing:1.6px;color:#c0ad8f;line-height:1.7}
.toast small::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:#d6bd98;margin-right:8px;vertical-align:middle}
.toast>span{display:block;font-size:12px;line-height:1.7;letter-spacing:.8px;color:#f0e7d8;overflow-wrap:anywhere}
@keyframes crystal-arrive{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media(min-width:2300px){.toast>span{font-size:13px}}
@media(max-height:750px){.panel{padding:18px 23px 23px}.panel h2{font-size:25px}.panel-top{margin-bottom:10px}.setting-line{margin-top:15px}.panel-footnote{margin-top:18px}.toast{bottom:17vh}}
@media(max-aspect-ratio:4/3){.toast{bottom:12vh;min-width:min(255px,85vw)}}
@media(prefers-reduced-motion:reduce){.panel{animation:none}}
@supports not (backdrop-filter:blur(1px)){.panel,.toast{background:rgba(17,26,31,.92)}}
/* A single, quiet control beside playback. The menu shares the crystal finish. */
.playback{position:relative;gap:17px}
.playback-mode{position:relative;margin-left:-15px;margin-right:-6px}
.mode-button{position:relative;width:27px;height:36px;padding:4px;color:#b5ad9e;border-radius:6px;transition:background .2s,color .2s}
.mode-button>svg{width:12px;height:12px;transform:rotate(90deg);transition:transform .25s var(--ease)}
.mode-button:hover,.mode-button[aria-expanded=true]{color:#f2dfbf;background:#d8bd9710}
.mode-button[aria-expanded=true]>svg{transform:rotate(-90deg)}
.mode-dot{position:absolute;bottom:4px;left:12px;width:3px;height:3px;border-radius:50%;background:var(--gold);opacity:0;transition:opacity .25s}
body[data-playback-mode=single] .mode-dot,body[data-playback-mode=all] .mode-dot,body[data-playback-mode=favorites] .mode-dot,body[data-playback-mode^=global-] .mode-dot{opacity:.85}
.mode-menu{position:absolute;z-index:30;bottom:calc(100% + 17px);left:-47px;width:286px;max-width:calc(100vw - 32px);padding:18px 9px 9px;border-radius:12px;border:1px solid #e6d4b618;background:linear-gradient(145deg,#ebead614,transparent 44%),rgba(15,25,31,.7);box-shadow:var(--surface-shadow);backdrop-filter:blur(24px) saturate(.85);-webkit-backdrop-filter:blur(24px) saturate(.85);animation:mode-arrive .24s var(--ease);transform-origin:48px bottom}
.mode-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 13px 13px;color:#cfc6b5;font-size:10px;letter-spacing:1.5px}
.mode-heading .micro{font:italic 9px Georgia,serif;letter-spacing:1px;color:#a99b83;white-space:nowrap}
.mode-menu button[role=menuitemradio]{width:100%;display:flex;align-items:center;gap:13px;padding:13px 12px;text-align:left;border-radius:7px;border:1px solid transparent;transition:background .2s,border-color .2s}
.mode-menu button[role=menuitemradio]:hover,.mode-menu button[role=menuitemradio]:focus-visible{background:#ede2ce0a;color:#f0e7d8}
.mode-menu button[role=menuitemradio]:focus-visible{outline:1px solid #e8cda260;outline-offset:-2px}
.mode-menu button[role=menuitemradio][aria-checked=true]{background:linear-gradient(105deg,#d8bd9719,#d8bd9705);border-color:#dfc39c20}
.mode-menu .mode-symbol{width:18px;height:18px;color:#b4ac9b}
.mode-menu strong{display:block;color:#dcd5c7;font-size:11px;font-weight:400;letter-spacing:1px;line-height:1.5}
.mode-menu small{display:block;margin-top:5px;color:#a5a99f;font-size:9px;letter-spacing:.25px;line-height:1.65}
.mode-menu em{display:inline-block;margin-left:5px;font:italic 11px Georgia,serif;color:#bfa785}
.mode-menu .mode-check{width:13px;height:13px;margin-left:auto;opacity:0;stroke-width:1.4;color:#e8cda2}
.mode-menu [aria-checked=true] .mode-check{opacity:1}
.mode-menu [aria-checked=true] .mode-symbol,.mode-menu [aria-checked=true] strong{color:#e8d2af}
.mode-menu [aria-disabled=true]{opacity:.48;cursor:default}
.mode-footnote{margin:11px 13px 4px;padding-top:12px;border-top:1px solid #e7d2b514;color:#a69f91;font-size:9px;letter-spacing:1px;line-height:1.8}
.bottom-bar{z-index:15}
body.has-panel .bottom-bar{z-index:10}
.timeline-label{gap:10px;white-space:nowrap}
body[data-playback-mode=single] #timelineState,body[data-playback-mode=all] #timelineState,body[data-playback-mode=favorites] #timelineState,body[data-playback-mode^=global-] #timelineState{color:#d8c09d}
#autoOptions.is-dormant{opacity:.4;pointer-events:none}
#autoOptions.is-dormant button{cursor:default}
.auto-loop-note{font-size:9px;color:#b9ad99;letter-spacing:.4px;margin:9px 0 0;line-height:1.7}
#film,#filmNext{opacity:0;z-index:1}
#film.visible{opacity:1}
#filmNext{pointer-events:none}
#curtain{z-index:3}.scene-shade,.edge-light{z-index:4;pointer-events:none}
/* A nonzero, sub-pixel blend keeps this one prepared surface in composition.
   At .001 the maximum 8-bit channel contribution is less than one level. */
#loopPlate{z-index:3;opacity:0;background:#0b1117;pointer-events:none;will-change:opacity}
#loopPlate.is-primed{opacity:.001}
body.is-loop-transition .timeline-track{opacity:.6}
/* Keep the wardrobe dim through automatic handoffs; hover/focus still reveals it. */
body.is-loop-transition:not(.is-idle):not(.is-immersed) .wardrobe:not(:hover):not(:focus-within){opacity:.26}
@keyframes mode-arrive{from{opacity:0;transform:translateY(7px) scale(.98)}to{opacity:1;transform:none}}
@media(max-aspect-ratio:4/3){.playback{gap:10px}.playback-mode{margin-left:-8px;margin-right:-4px}.mode-menu{left:-44px}.timeline-display{min-width:83px}.bottom-bar{gap:10px}}
@media(max-width:480px){.playback{gap:7px}.playback-mode{margin-left:-5px;margin-right:-4px}.mode-button{width:24px}.mode-dot{left:11px}.timeline-display{min-width:74px}.bottom-bar{gap:5px}.view-tools{gap:4px}#momentButton{gap:5px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.mode-menu{animation:none}.mode-button>svg{transition:none}}
@supports not (backdrop-filter:blur(1px)){.mode-menu{background:rgba(15,25,31,.96)}}
/* The creator credit follows both ways of hiding the interface. */
.credit{transition:opacity .8s var(--ease),visibility .8s}
body.is-idle .credit,body.is-immersed .credit{opacity:0;visibility:hidden;pointer-events:none}
/* Return where immersion was entered, independent of the movable left column. */
#wakeButton{left:auto;right:var(--wake-right,var(--margin));bottom:var(--wake-bottom,6.5vh);padding:10px 0;gap:9px;font-size:var(--wake-font-size,13px);letter-spacing:var(--wake-letter-spacing,1px);white-space:nowrap}
#wakeButton.is-edge-tight>svg{display:none}

.mode-divider{height:1px;margin:7px 13px;background:#e7d2b514}
#modeMenu{max-height:var(--mode-menu-height,82vh);overflow-y:auto;scrollbar-width:thin}
#modeMenu.is-below{bottom:auto;top:calc(100% + 17px);transform-origin:48px top}

/* Optional left-column positioning; never transforms the full header/footer. */
.brand,.now-playing{position:relative;left:var(--left-offset,0px)}
.wardrobe{left:calc(var(--margin) + var(--left-offset,0px))}
.layout-setting{margin-top:23px;padding-top:19px;border-top:1px solid #ecddc416}
.layout-button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:0;text-align:left;color:#e0d8c9;font-size:11px;letter-spacing:.5px}
.layout-button small{display:block;margin-top:7px;color:#b4b6ad;font-size:9px;letter-spacing:.25px;line-height:1.7}
.layout-button>svg{width:13px;height:13px;color:#cfba99;transition:transform .25s var(--ease)}
.layout-button[aria-expanded=true]>svg{transform:rotate(90deg)}
.layout-controls{margin-top:17px;padding:1px 13px 10px;border:1px solid #e6d4b61c;border-radius:6px;background:linear-gradient(125deg,#d8bd970b,transparent),#12202a26}
.layout-controls .setting-line{margin:14px 0 10px;font-size:10px}
.layout-controls output{font:10px "Microsoft YaHei",sans-serif;white-space:nowrap;color:#dcc5a4}
.layout-range-row{display:flex;align-items:center;gap:10px}
.layout-range-row button{display:flex;align-items:center;justify-content:center;flex:0 0 23px;height:27px;border-radius:4px;background:#e7d5b60a;color:#cbb995}
.layout-range-row button:disabled{opacity:.3;cursor:default}
.layout-range-row button svg{width:11px;height:11px}
#layoutLeft svg{transform:rotate(180deg)}
.layout-range-row input{min-width:0}
.layout-note{font-size:9px;line-height:1.8;color:#aaaFA6;margin:13px 0}
.layout-actions{display:flex;align-items:center;gap:12px;padding-top:10px;border-top:1px solid #ecddc412}
.layout-actions>span{flex:1}
.layout-actions button{padding:5px 0;font-size:10px;color:#bcb4a4;white-space:nowrap}
.layout-actions #layoutDone{border:1px solid #ead9be39;border-radius:4px;background:#e2d0b614;color:#e5d1af;padding:6px 12px}
.layout-actions button:hover{color:#fff0d4}
/* The temporary positioning preview must also override loop/transition dimming. */
body.is-layout-adjusting .wardrobe{opacity:1!important;transition:opacity .2s}
.layout-guide{position:fixed;z-index:16;top:4vh;bottom:3vh;left:calc(var(--margin) + var(--left-offset,0px) - 10px);width:1px;background:linear-gradient(180deg,transparent,#e6cd9b70 12%,#e6cd9b40 88%,transparent);pointer-events:none}
.layout-guide::before,.layout-guide::after{content:"";position:absolute;left:-2px;width:5px;height:5px;border:1px solid #e6cd9b99;border-radius:50%;background:#14202a}
.layout-guide::before{top:9%}.layout-guide::after{bottom:7%}
.layout-guide span{position:absolute;top:8%;left:13px;font-size:8px;letter-spacing:2px;white-space:nowrap;color:#d5bc91}

/* Only the central cluster moves; status and immersion remain anchored. */
.playback{top:var(--playback-offset,0px)}
#playbackPositionUp svg{transform:rotate(-90deg)}
#playbackPositionDown svg{transform:rotate(90deg)}
body.is-layout-adjusting .playback{outline:1px dashed #e6cd9b40;outline-offset:10px;border-radius:5px}

/* Standard preserves the original design through QHD; at 4K its text matches the prior comfortable tier.
   CSS viewport scaling already accounts for browser/OS zoom: never multiply by DPR. */
:root{--reading-base:clamp(1px,min(.0520833333vw,.0925925926vh),2px);--gentle-base:clamp(1px,min(.0390625vw,.0694444444vh),1.5px);--gentle-reading-base:clamp(1px,min(calc(.0625vw - .6px),calc(.1111111111vh - .6px)),1.8px);--wardrobe-step:clamp(1px,min(calc(.01171875vw + .7px),calc(.0208333333vh + .7px)),1.15px)}
body{--text-factor:1;--reading-unit:calc(var(--reading-base) * var(--text-factor));--read-main:calc(15 * var(--reading-unit));--read-secondary:calc(13 * var(--reading-unit));--read-small:calc(12 * var(--reading-unit));--read-micro:calc(10 * var(--reading-unit))}
body[data-text-size=larger]{--text-factor:1.15}
body[data-text-size=large]{--text-factor:1.3}
/* Gentle tiers keep the original visual hierarchy and the name/heart row. */
body{--gentle-factor:1;--gentle-unit:calc(var(--gentle-reading-base) * var(--gentle-factor));--gentle-copy:11;--gentle-name:10;--gentle-note:9;--gentle-page:12;--gentle-brand:13;--gentle-brand-small:8;--gentle-credit:8;--credit-factor:1}
body[data-text-size=comfortable]{--gentle-factor:1.2;--credit-factor:1.2}
body[data-text-size=larger]{--credit-factor:1.35}
body[data-text-size=large]{--credit-factor:1.5}
@media(min-width:2300px){body{--gentle-copy:13;--gentle-name:12;--gentle-note:11;--gentle-page:14;--gentle-brand:17;--gentle-brand-small:10;--gentle-credit:9}}
:where(.is-reading-gentle) .intro,:where(.is-reading-gentle) .collection-heading,:where(.is-reading-gentle) .now-playing p,:where(.is-reading-gentle) .text-button{font-size:calc(var(--gentle-copy) * var(--gentle-unit))}
:where(.is-reading-gentle) .look-short{font-size:calc(var(--gentle-name) * var(--gentle-unit) * var(--wardrobe-name-factor,1));letter-spacing:.04em;white-space:nowrap}
:where(.is-reading-gentle) .favorite-button{flex-shrink:0}
:where(.is-reading-gentle) #lookName,:where(.is-reading-gentle) #randomText{font-size:calc(13 * var(--gentle-unit))}
:where(.is-reading-gentle) #lookEnglish,:where(.is-reading-gentle) .panel-subtitle,:where(.is-reading-gentle) .setting-options button,:where(.is-reading-gentle) .moment-look,:where(.is-reading-gentle) .subtle-button{font-size:calc(10 * var(--gentle-unit))}
:where(.is-reading-gentle) .chapter-name,:where(.is-reading-gentle) .collection-note{font-size:calc(var(--gentle-note) * var(--gentle-unit))}
:where(.is-reading-gentle) .random-hint,:where(.is-reading-gentle) .secret-tag,:where(.is-reading-gentle) .frame-controls{font-size:calc(9 * var(--gentle-unit))}
:where(.is-reading-gentle) .page-tabs button{font-size:calc(var(--gentle-page) * var(--gentle-unit))}
:where(.is-reading-gentle) .page-tabs button,:where(.is-reading-gentle) .page-arrow{min-width:calc(25 * var(--gentle-base));height:calc(28 * var(--gentle-base))}
:where(.is-reading-gentle) .wardrobe-pages{height:auto;min-height:calc(32 * var(--gentle-base))}
:where(.is-reading-gentle) .selection-meta{gap:12px;flex-wrap:wrap}
:where(.is-reading-gentle) .random-button{padding:calc(15 * var(--gentle-base)) calc(17 * var(--gentle-base))}
:where(.is-reading-gentle) .lock-veil>span{font-size:calc(10 * var(--gentle-unit));letter-spacing:.1em}
:where(.is-reading-gentle) .now-playing{min-width:0}
:where(.is-reading-gentle) .now-playing>div{max-width:calc(100% - 15px)}
:where(.is-reading-gentle) .now-playing p{max-width:calc(360 * var(--gentle-unit))}
:where(.is-reading-gentle) .now-playing .micro,:where(.is-reading-gentle) .panel-top .micro,:where(.is-reading-gentle) .toast small{font-size:calc(8 * var(--gentle-unit));letter-spacing:.12em}
:where(.is-reading-gentle) .panel{padding:calc(27 * var(--gentle-base)) calc(30 * var(--gentle-base)) calc(30 * var(--gentle-base));max-width:calc(100vw - 2 * var(--margin))}
:where(.is-reading-gentle) .settings-panel{width:calc(240 * var(--gentle-base) + 100 * var(--gentle-unit));max-height:80vh;overflow:auto}
:where(.is-reading-gentle) .panel h2{font-size:calc(30 * var(--gentle-base))}
:where(.is-reading-gentle) .setting-line,:where(.is-reading-gentle) .setting-line output,:where(.is-reading-gentle) .layout-button,:where(.is-reading-gentle) .wake-button,:where(.is-reading-gentle) .moment-reading{font-size:calc(11 * var(--gentle-unit))}
:where(.is-reading-gentle) .setting-line{margin:calc(22 * var(--gentle-base)) 0 calc(12 * var(--gentle-base));gap:12px}
:where(.is-reading-gentle) .toggle-line small,:where(.is-reading-gentle) .layout-button small,:where(.is-reading-gentle) .layout-note,:where(.is-reading-gentle) .auto-loop-note{font-size:calc(9 * var(--gentle-unit));line-height:1.8}
:where(.is-reading-gentle) .setting-options button{padding:calc(10 * var(--gentle-base)) 3px}
:where(.is-reading-gentle) .layout-setting{margin-top:calc(23 * var(--gentle-base));padding-top:calc(19 * var(--gentle-base))}
:where(.is-reading-gentle) .layout-controls .setting-line,:where(.is-reading-gentle) .layout-controls output,:where(.is-reading-gentle) .layout-actions button{font-size:calc(10 * var(--gentle-unit))}
:where(.is-reading-gentle) .layout-actions{flex-wrap:wrap}
:where(.is-reading-gentle) .layout-guide span{font-size:calc(8 * var(--gentle-unit))}
:where(.is-reading-gentle) .view-tools{min-width:0}
:where(.is-reading-gentle) .playback{flex-shrink:0}
:where(.is-reading-gentle) .icon-button{width:calc(36 * var(--gentle-base));height:calc(36 * var(--gentle-base));flex-shrink:0}
:where(.is-reading-gentle) .icon-button svg,:where(.is-reading-gentle) .text-button svg{width:calc(18 * var(--gentle-base));height:calc(18 * var(--gentle-base))}
:where(.is-reading-gentle) .panel-top .icon-button{width:calc(28 * var(--gentle-base));height:calc(28 * var(--gentle-base))}
:where(.is-reading-gentle) .timeline-display{width:calc(170 * var(--gentle-base))}
:where(.is-reading-gentle) .timeline-label{font-size:calc(8 * var(--gentle-unit))}
:where(.is-reading-gentle) .timeline-label span:first-child{font-size:calc(10 * var(--gentle-unit))}
:where(.is-reading-gentle) .mode-button{width:calc(27 * var(--gentle-base));height:calc(36 * var(--gentle-base))}
:where(.is-reading-gentle) .mode-button>svg{width:calc(12 * var(--gentle-base));height:calc(12 * var(--gentle-base))}
:where(.is-reading-gentle) .mode-dot{left:50%;margin-left:-1.5px}
:where(.is-reading-gentle) .mode-menu{width:calc(286 * var(--gentle-unit));padding:calc(18 * var(--gentle-base)) calc(9 * var(--gentle-base)) calc(9 * var(--gentle-base));max-height:75vh;overflow:auto}
:where(.is-reading-gentle) .mode-menu button[role=menuitemradio]{padding:calc(13 * var(--gentle-base)) calc(12 * var(--gentle-base))}
:where(.is-reading-gentle) .mode-heading{font-size:calc(10 * var(--gentle-unit));letter-spacing:.1em}
:where(.is-reading-gentle) .mode-heading .micro,:where(.is-reading-gentle) .mode-menu small,:where(.is-reading-gentle) .mode-footnote{font-size:calc(9 * var(--gentle-unit));letter-spacing:.04em}
:where(.is-reading-gentle) .mode-menu strong,:where(.is-reading-gentle) .mode-menu em{font-size:calc(11 * var(--gentle-unit))}
:where(.is-reading-gentle) .toast{padding:calc(15 * var(--gentle-base)) calc(25 * var(--gentle-base)) calc(17 * var(--gentle-base));min-width:min(calc(255 * var(--gentle-unit)),85vw);max-width:min(calc(540 * var(--gentle-unit)),85vw)}
:where(.is-reading-gentle) .toast>span{font-size:calc(13 * var(--gentle-unit))}
:where(.is-reading-gentle) .moment-panel{width:max(clamp(340px,29vw,460px),calc(360 * var(--gentle-unit)));max-height:75vh;overflow:auto}
:where(.is-reading-gentle) #momentTime{font-size:calc(43 * var(--gentle-base))}
:where(.is-reading-gentle) .moment-controls{flex-wrap:wrap;gap:10px}
:where(.is-reading-gentle) .frame-controls button{font-size:calc(17 * var(--gentle-base));width:calc(29 * var(--gentle-base));height:calc(29 * var(--gentle-base))}
:where(.is-reading-gentle) .save-button{font-size:calc(12 * var(--gentle-unit));padding:calc(15 * var(--gentle-base)) calc(16 * var(--gentle-base))}
:where(.is-reading-gentle) .brand-type{font-size:calc(var(--gentle-brand) * var(--gentle-base))}
:where(.is-reading-gentle) .brand-type>span{font-size:calc(var(--gentle-brand-small) * var(--gentle-base))}
:where(.is-reading-gentle) .credit{font-size:calc(var(--gentle-credit) * var(--gentle-reading-base) * var(--credit-factor))}
.wardrobe.is-reading-constrained{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d8bd9733 transparent}
@media(max-height:850px) and (min-aspect-ratio:4/3){:where(.is-reading-gentle) .intro{margin-bottom:12px}:where(.is-reading-gentle) .selection-meta{padding:8px 0}:where(.is-reading-gentle) .random-button{padding:12px 15px}}
@media(max-aspect-ratio:4/3){:where(.is-reading-gentle) .timeline-display{width:75px}:where(.is-reading-gentle) .playback{gap:8px}:where(.is-reading-gentle) .moment-panel{top:12vh;bottom:auto}}
/* Enlarged captions get their own line; standard keeps the original name and heart row. */
:where(.is-reading-enlarged) .intro,:where(.is-reading-enlarged) .collection-heading,:where(.is-reading-enlarged) #lookName,:where(.is-reading-enlarged) #randomText{font-size:var(--read-main)}
:where(.is-reading-enlarged) .intro{font-size:var(--read-secondary);line-height:1.7;letter-spacing:.04em;color:#c8c5bb;text-wrap:balance}
:where(.is-reading-enlarged) .eyebrow{font-size:var(--read-micro);letter-spacing:.15em}
:where(.is-reading-enlarged) .collection-heading{letter-spacing:.08em}
:where(.is-reading-enlarged) .look-bottom{display:block;min-height:1.5em;margin-top:10px}
:where(.is-reading-enlarged) .look-short{display:block;font-size:calc(min(12 * var(--reading-unit),30px) * var(--wardrobe-name-factor,1));line-height:1.5;letter-spacing:0;color:#c9c7bf}
:where(.is-reading-enlarged) .favorite-button{position:absolute;right:5px;top:5px;z-index:2;width:clamp(26px,1vw,36px);height:clamp(26px,1vw,36px);padding:6px;border:1px solid #e5d3b62b;border-radius:50%;background:#101a23c4;color:#e3d4bd}
:where(.is-reading-enlarged) .favorite-button svg{width:100%;height:100%}
:where(.is-reading-enlarged) .favorite-button:hover{background:#20303fe8;border-color:#e5d3b680}
:where(.is-reading-enlarged) .favorite-button[aria-pressed=true]{background:#243039e8}
:where(.is-reading-enlarged) .secret-tag{font-size:var(--read-micro);height:auto;line-height:1.6}
:where(.is-reading-enlarged) .lock-veil>span{font-size:var(--read-small);letter-spacing:.08em}
:where(.is-reading-enlarged) .chapter-name,:where(.is-reading-enlarged) .random-hint,:where(.is-reading-enlarged) .collection-note{font-size:var(--read-small);letter-spacing:.02em;color:#c0bbae}
:where(.is-reading-enlarged) .wardrobe-pages{height:auto;min-height:calc(32 * var(--reading-unit));gap:8px}
:where(.is-reading-enlarged) .page-tabs{gap:6px}:where(.is-reading-enlarged) .page-tabs button{font-size:var(--read-secondary);min-width:calc(25 * var(--reading-base));height:calc(32 * var(--reading-unit))}
:where(.is-reading-enlarged) .page-arrow{width:calc(28 * var(--reading-base));height:calc(32 * var(--reading-unit))}
:where(.is-reading-enlarged) .page-arrow svg{width:calc(14 * var(--reading-base));height:calc(14 * var(--reading-base))}
:where(.is-reading-enlarged) .selection-meta{gap:12px;flex-wrap:wrap}
:where(.is-reading-enlarged) #lookName{letter-spacing:.1em}:where(.is-reading-enlarged) #lookEnglish{font-size:var(--read-small);letter-spacing:.04em}
:where(.is-reading-enlarged) .random-button{gap:12px;padding:calc(12 * var(--reading-unit)) 16px}
:where(.is-reading-enlarged) #randomText{letter-spacing:.12em}:where(.is-reading-enlarged) .random-hint{white-space:nowrap}
:where(.is-reading-enlarged) .random-button>svg{width:calc(18 * var(--reading-base));height:calc(18 * var(--reading-base))}
:where(.is-reading-enlarged) .collection-note{line-height:1.6;align-items:baseline}
/* Reading surfaces expand with their contents rather than clipping enlarged text. */
:where(.is-reading-enlarged) .panel{padding:calc(24 * var(--reading-base));max-width:calc(100vw - 2 * var(--margin));scrollbar-width:thin}
:where(.is-reading-enlarged) .settings-panel{width:calc(350 * var(--reading-unit));max-height:80vh}
:where(.is-reading-enlarged) .panel h2{font-size:calc(28 * var(--reading-unit));letter-spacing:.05em}
:where(.is-reading-enlarged) .panel-subtitle{font-size:var(--read-secondary);line-height:1.7;margin-bottom:calc(14 * var(--reading-base))}
:where(.is-reading-enlarged) .panel-top{margin-bottom:calc(12 * var(--reading-base));gap:10px}
:where(.is-reading-enlarged) .panel-top .micro{font-size:var(--read-micro);letter-spacing:.09em}
:where(.is-reading-enlarged) .panel-top .icon-button{width:calc(30 * var(--reading-base));height:calc(30 * var(--reading-base));flex-shrink:0}
:where(.is-reading-enlarged) .panel-top .icon-button svg{width:calc(18 * var(--reading-base));height:calc(18 * var(--reading-base))}
:where(.is-reading-enlarged) .setting-line{font-size:var(--read-main);line-height:1.5;letter-spacing:.02em;margin:calc(14 * var(--reading-base)) 0 calc(8 * var(--reading-base))}
:where(.is-reading-enlarged) .setting-line output{font-size:var(--read-secondary)}
:where(.is-reading-enlarged) .toggle-line{gap:12px}:where(.is-reading-enlarged) .toggle-line small{font-size:var(--read-small);line-height:1.6;color:#c5c7be}
:where(.is-reading-enlarged) .toggle-line input{width:calc(36 * var(--reading-base));height:calc(28 * var(--reading-base))}
:where(.is-reading-enlarged) .switch{width:calc(30 * var(--reading-base));height:calc(16 * var(--reading-base))}
:where(.is-reading-enlarged) .switch:before{width:calc(10 * var(--reading-base));height:calc(10 * var(--reading-base));left:calc(2 * var(--reading-base));top:calc(2 * var(--reading-base))}
:where(.is-reading-enlarged) .toggle-line input:checked+.switch:before{transform:translateX(calc(14 * var(--reading-base)))}
:where(.is-reading-enlarged) .setting-options{gap:4px;padding:4px;flex-wrap:wrap}
:where(.is-reading-enlarged) .setting-options button{font-size:var(--read-secondary);padding:calc(7 * var(--reading-base)) 6px;min-height:calc(36 * var(--reading-base));line-height:1.5}
:where(.is-reading-enlarged) input[type=range]{height:calc(28 * var(--reading-base))}
:where(.is-reading-enlarged) input[type=range]::-webkit-slider-runnable-track{height:calc(2 * var(--reading-base))}
:where(.is-reading-enlarged) input[type=range]::-webkit-slider-thumb{width:calc(12 * var(--reading-base));height:calc(12 * var(--reading-base));margin-top:calc(-5 * var(--reading-base))}
:where(.is-reading-enlarged) .auto-loop-note{font-size:var(--read-small);line-height:1.7;margin-top:calc(10 * var(--reading-unit))}
:where(.is-reading-enlarged) .layout-setting{margin-top:calc(18 * var(--reading-base));padding-top:calc(14 * var(--reading-base))}
:where(.is-reading-enlarged) .layout-button{font-size:var(--read-main);line-height:1.5;letter-spacing:.02em}
:where(.is-reading-enlarged) .layout-button small,:where(.is-reading-enlarged) .layout-note{font-size:var(--read-small);line-height:1.7;color:#c0c1b7}
:where(.is-reading-enlarged) .layout-button>svg{width:calc(15 * var(--reading-base));height:calc(15 * var(--reading-base));flex-shrink:0}
:where(.is-reading-enlarged) .layout-controls{padding:1px calc(12 * var(--reading-unit)) calc(10 * var(--reading-unit))}
:where(.is-reading-enlarged) .layout-controls .setting-line,:where(.is-reading-enlarged) .layout-controls output,:where(.is-reading-enlarged) .layout-actions button{font-size:var(--read-secondary)}
:where(.is-reading-enlarged) .layout-actions{flex-wrap:wrap;gap:calc(10 * var(--reading-unit))}
:where(.is-reading-enlarged) .layout-actions #layoutDone{padding:calc(6 * var(--reading-unit)) calc(12 * var(--reading-unit))}
:where(.is-reading-enlarged) .layout-range-row button{flex-basis:calc(28 * var(--reading-base));height:calc(32 * var(--reading-base))}
:where(.is-reading-enlarged) .layout-range-row button svg{width:calc(14 * var(--reading-base));height:calc(14 * var(--reading-base))}
:where(.is-reading-enlarged) .layout-guide span{font-size:var(--read-micro);letter-spacing:.08em}
/* Playback and dialogue remain readable at physical 4K and at scaled desktops. */
:where(.is-reading-enlarged) .now-playing{min-width:0}:where(.is-reading-enlarged) .now-playing>div{max-width:calc(100% - 15px)}
:where(.is-reading-enlarged) .now-playing .micro{font-size:var(--read-micro);letter-spacing:.1em}
:where(.is-reading-enlarged) .now-playing p{font-size:calc(16 * var(--reading-unit));max-width:calc(360 * var(--reading-unit));line-height:1.65;letter-spacing:.02em}
:where(.is-reading-enlarged) .text-button,:where(.is-reading-enlarged) .wake-button{font-size:var(--read-main);letter-spacing:.03em}
:where(.is-reading-enlarged) .text-button svg{width:calc(19 * var(--reading-base));height:calc(19 * var(--reading-base))}
:where(.is-reading-enlarged) .view-tools{min-width:0;gap:calc(14 * var(--reading-base))}
:where(.is-reading-enlarged) .icon-button{width:calc(36 * var(--reading-base));height:calc(36 * var(--reading-base));flex-shrink:0}
:where(.is-reading-enlarged) .icon-button svg{width:calc(20 * var(--reading-base));height:calc(20 * var(--reading-base))}
:where(.is-reading-enlarged) .playback{gap:calc(14 * var(--reading-base));flex-shrink:0}
:where(.is-reading-enlarged) .timeline-display{width:calc(130 * var(--reading-unit))}
:where(.is-reading-enlarged) .timeline-label,:where(.is-reading-enlarged) .timeline-label span:first-child{font-size:var(--read-small);letter-spacing:.02em}
:where(.is-reading-enlarged) .mode-button{width:calc(28 * var(--reading-base));height:calc(36 * var(--reading-base))}
:where(.is-reading-enlarged) .mode-button>svg{width:calc(12 * var(--reading-base));height:calc(12 * var(--reading-base))}
:where(.is-reading-enlarged) .mode-dot{left:50%;margin-left:-1.5px}
:where(.is-reading-enlarged) .mode-menu{width:calc(320 * var(--reading-unit));max-height:calc(82vh - 30px);overflow-y:auto;scrollbar-width:thin;padding:calc(17 * var(--reading-unit)) calc(10 * var(--reading-unit)) calc(9 * var(--reading-unit))}
:where(.is-reading-enlarged) .mode-heading{font-size:var(--read-secondary);letter-spacing:.04em;padding:0 calc(12 * var(--reading-unit)) calc(12 * var(--reading-unit));flex-wrap:wrap}
:where(.is-reading-enlarged) .mode-heading .micro{font-size:var(--read-micro);letter-spacing:.03em}
:where(.is-reading-enlarged) .mode-menu button[role=menuitemradio]{padding:calc(12 * var(--reading-unit));gap:calc(12 * var(--reading-base))}
:where(.is-reading-enlarged) .mode-menu strong,:where(.is-reading-enlarged) .mode-menu em{font-size:var(--read-main);letter-spacing:.03em}
:where(.is-reading-enlarged) .mode-menu small,:where(.is-reading-enlarged) .mode-footnote{font-size:var(--read-small);line-height:1.7;letter-spacing:.02em;color:#c1c2b7}
:where(.is-reading-enlarged) .mode-menu .mode-symbol{width:calc(20 * var(--reading-base));height:calc(20 * var(--reading-base))}
:where(.is-reading-enlarged) .mode-menu .mode-check{width:calc(14 * var(--reading-base));height:calc(14 * var(--reading-base))}
:where(.is-reading-enlarged) .toast{min-width:min(calc(280 * var(--reading-unit)),85vw);max-width:min(calc(620 * var(--reading-unit)),85vw);padding:calc(16 * var(--reading-unit)) calc(24 * var(--reading-unit))}
:where(.is-reading-enlarged) .toast>span{font-size:calc(16 * var(--reading-unit));line-height:1.7;letter-spacing:.03em}
:where(.is-reading-enlarged) .toast small{font-size:var(--read-small);letter-spacing:.05em;margin-bottom:calc(7 * var(--reading-unit))}
:where(.is-reading-enlarged) .moment-panel{width:calc(410 * var(--reading-unit));max-height:75vh;overflow:auto}
:where(.is-reading-enlarged) .moment-reading,:where(.is-reading-enlarged) .moment-look,:where(.is-reading-enlarged) .frame-controls,:where(.is-reading-enlarged) .subtle-button{font-size:var(--read-secondary);letter-spacing:.03em}
:where(.is-reading-enlarged) #momentTime{font-size:calc(42 * var(--reading-unit))}
:where(.is-reading-enlarged) .moment-controls{flex-wrap:wrap;gap:10px}
:where(.is-reading-enlarged) .frame-controls{gap:calc(9 * var(--reading-base))}
:where(.is-reading-enlarged) .frame-controls button{font-size:calc(22 * var(--reading-base));width:calc(32 * var(--reading-base));height:calc(32 * var(--reading-base))}
:where(.is-reading-enlarged) .save-button{font-size:var(--read-main);letter-spacing:.05em;padding:calc(14 * var(--reading-unit))}
:where(.is-reading-enlarged) .brand-type{font-size:calc(15 * var(--reading-base));letter-spacing:.25em}
:where(.is-reading-enlarged) .brand-type>span{font-size:calc(10 * var(--reading-base));letter-spacing:.12em}
:where(.is-reading-enlarged) .credit{font-size:calc(var(--gentle-credit) * var(--gentle-reading-base) * var(--credit-factor));letter-spacing:.04em}
@media(max-height:850px) and (min-aspect-ratio:4/3){:where(.is-reading-enlarged) .intro{margin-bottom:12px}:where(.is-reading-enlarged) .selection-meta{padding:8px 0}:where(.is-reading-enlarged) .random-button{padding:10px 12px}:where(.is-reading-enlarged) .collection-note{margin-top:8px}body:where(.is-reading-enlarged)[data-text-size=large] .eyebrow{display:none}body:where(.is-reading-enlarged)[data-text-size=large] h1{margin-top:0;margin-bottom:10px}}
@media(max-aspect-ratio:4/3){:where(.is-reading-enlarged) .playback{gap:8px}:where(.is-reading-enlarged) .timeline-display{width:calc(94 * var(--reading-unit));min-width:74px}:where(.is-reading-enlarged) .view-tools{gap:5px}:where(.is-reading-enlarged) .moment-panel{top:12vh;bottom:auto}:where(.is-reading-enlarged) .mode-menu{left:-65px}:where(.is-reading-enlarged) .panel{max-width:88vw}:where(.is-reading-enlarged) .brand-type{font-size:13px}:where(.is-reading-enlarged) .brand-type>span{font-size:9px}}

/* Midpoint typography: average the actual comfortable and large endpoints per text role.
   The existing larger layout spacing stays generous; panel widths also interpolate. */
body[data-text-size=larger]{--mid-comfort:calc(1.2 * var(--gentle-reading-base));--mid-large:calc(1.3 * var(--reading-base))}
:where(body[data-text-size=larger]) .intro{font-size:calc((var(--gentle-copy) * var(--mid-comfort) + 13 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) .collection-heading,:where(body[data-text-size=larger]) .text-button{font-size:calc((var(--gentle-copy) * var(--mid-comfort) + 15 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) .look-short{font-size:calc((var(--gentle-name) * var(--mid-comfort) + min(12 * var(--mid-large), 30px)) / 2 * var(--wardrobe-name-factor,1))}
:where(body[data-text-size=larger]) #lookName,:where(body[data-text-size=larger]) #randomText{font-size:calc((13 * var(--mid-comfort) + 15 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) #lookEnglish,:where(body[data-text-size=larger]) .lock-veil>span{font-size:calc((10 * var(--mid-comfort) + 12 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) .panel-subtitle,:where(body[data-text-size=larger]) .setting-options button,:where(body[data-text-size=larger]) .moment-look,:where(body[data-text-size=larger]) .subtle-button,:where(body[data-text-size=larger]) .layout-controls .setting-line,:where(body[data-text-size=larger]) .layout-controls output,:where(body[data-text-size=larger]) .layout-actions button,:where(body[data-text-size=larger]) .mode-heading{font-size:calc((10 * var(--mid-comfort) + 13 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) .chapter-name,:where(body[data-text-size=larger]) .collection-note{font-size:calc((var(--gentle-note) * var(--mid-comfort) + 12 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) .random-hint,:where(body[data-text-size=larger]) .toggle-line small,:where(body[data-text-size=larger]) .layout-button small,:where(body[data-text-size=larger]) .layout-note,:where(body[data-text-size=larger]) .auto-loop-note,:where(body[data-text-size=larger]) .mode-menu small,:where(body[data-text-size=larger]) .mode-footnote{font-size:calc((9 * var(--mid-comfort) + 12 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) .secret-tag,:where(body[data-text-size=larger]) .mode-heading .micro{font-size:calc((9 * var(--mid-comfort) + 10 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) .frame-controls{font-size:calc((9 * var(--mid-comfort) + 13 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) .page-tabs button{font-size:calc((var(--gentle-page) * var(--mid-comfort) + 13 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) .now-playing p{font-size:calc((var(--gentle-copy) * var(--mid-comfort) + 16 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) .now-playing .micro,:where(body[data-text-size=larger]) .panel-top .micro,:where(body[data-text-size=larger]) .layout-guide span{font-size:calc((8 * var(--mid-comfort) + 10 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) .toast small,:where(body[data-text-size=larger]) .timeline-label{font-size:calc((8 * var(--mid-comfort) + 12 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) .panel h2{font-size:calc((30 * var(--gentle-base) + 28 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) .setting-line,:where(body[data-text-size=larger]) .layout-button,:where(body[data-text-size=larger]) .wake-button,:where(body[data-text-size=larger]) .mode-menu strong,:where(body[data-text-size=larger]) .mode-menu em{font-size:calc((11 * var(--mid-comfort) + 15 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) .setting-line output,:where(body[data-text-size=larger]) .moment-reading{font-size:calc((11 * var(--mid-comfort) + 13 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) .layout-controls .setting-line output{font-size:calc((10 * var(--mid-comfort) + 13 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) .timeline-label span:first-child{font-size:calc((10 * var(--mid-comfort) + 12 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) .toast>span{font-size:calc((13 * var(--mid-comfort) + 16 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) #momentTime{font-size:calc((43 * var(--gentle-base) + 42 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) .frame-controls button{font-size:calc((17 * var(--gentle-base) + 22 * var(--reading-base)) / 2)}
:where(body[data-text-size=larger]) .save-button{font-size:calc((12 * var(--mid-comfort) + 15 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) .brand-type{font-size:calc((var(--gentle-brand) * var(--gentle-base) + 15 * var(--reading-base)) / 2)}
:where(body[data-text-size=larger]) .brand-type>span{font-size:calc((var(--gentle-brand-small) * var(--gentle-base) + 10 * var(--reading-base)) / 2)}
:where(body[data-text-size=larger]) .eyebrow{font-size:calc((var(--gentle-note) * 1px + 10 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) .settings-panel{width:calc((240 * var(--gentle-base) + 100 * var(--mid-comfort) + 350 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) .mode-menu{width:calc((286 * var(--mid-comfort) + 320 * var(--mid-large)) / 2)}
:where(body[data-text-size=larger]) .moment-panel{width:calc((max(clamp(340px,29vw,460px),360 * var(--mid-comfort)) + 410 * var(--mid-large)) / 2)}

/* The accepted QHD widths (520/540/560/580) define modest per-tier growth.
   Scale cover dimensions and grid gaps together; titles and reading fonts stay independent. */
body{--wardrobe-tier:1;--clock-tier:1;--clock-unit:calc(var(--gentle-base) * var(--clock-tier))}
body[data-text-size=comfortable]{--wardrobe-tier:calc(540 / 520);--clock-tier:1.125}
body[data-text-size=larger]{--wardrobe-tier:calc(560 / 520);--clock-tier:1.25}
body[data-text-size=large]{--wardrobe-tier:calc(580 / 520);--clock-tier:1.375}
@media(min-aspect-ratio:4/3){
  .wardrobe{--wardrobe-width:clamp(310px,24vw,435px);--wardrobe-cover-height:clamp(90px,7.1vw,136px);--wardrobe-gap:12px;--wardrobe-heading-gap:13px;--wardrobe-label-gap:10px;width:calc(var(--wardrobe-width) * var(--wardrobe-tier))}
  .wardrobe .looks{gap:calc(var(--wardrobe-gap) * var(--wardrobe-tier))}
  .wardrobe .look-image{height:calc(var(--wardrobe-cover-height) * var(--wardrobe-tier))}
  .wardrobe .collection-heading{margin-bottom:calc(var(--wardrobe-heading-gap) * var(--wardrobe-tier))}
  .wardrobe .look-bottom{margin-top:calc(var(--wardrobe-label-gap) * var(--wardrobe-tier))}
}
@media(min-width:2300px) and (min-aspect-ratio:4/3){.wardrobe{--wardrobe-width:520px;--wardrobe-cover-height:162px}}
@media(max-height:850px) and (min-aspect-ratio:4/3){.wardrobe{--wardrobe-width:clamp(300px,25vw,360px);--wardrobe-cover-height:clamp(74px,11vh,106px);--wardrobe-gap:11px;--wardrobe-heading-gap:10px;--wardrobe-label-gap:6px}}
@media(max-height:620px) and (min-aspect-ratio:4/3){.wardrobe{--wardrobe-width:285px;--wardrobe-cover-height:65px}}
/* Above QHD, retain the approved 15% screen compensation as the base for all tiers.
   Real layout boxes keep click targets, vertical fitting and horizontal position bounds aligned. */
@media(min-width:2561px) and (min-height:1441px) and (min-aspect-ratio:4/3){
  .wardrobe{--wardrobe-width:calc(520 * var(--wardrobe-step));--wardrobe-cover-height:calc(162 * var(--wardrobe-step));--wardrobe-gap:calc(12 * var(--wardrobe-step));--wardrobe-heading-gap:calc(13 * var(--wardrobe-step));--wardrobe-label-gap:calc(10 * var(--wardrobe-step))}
  .wardrobe h1{font-size:calc(68 * var(--wardrobe-step));margin:calc(25 * var(--wardrobe-step)) 0 calc(18 * var(--wardrobe-step))}
  .wardrobe .intro{margin-bottom:calc(34 * var(--wardrobe-step))}
  .wardrobe .look-index{font-size:calc(14 * var(--wardrobe-step));top:calc(8 * var(--wardrobe-step));left:calc(8 * var(--wardrobe-step))}
  .wardrobe .look-check{width:calc(17 * var(--wardrobe-step));height:calc(17 * var(--wardrobe-step));right:calc(7 * var(--wardrobe-step));bottom:calc(7 * var(--wardrobe-step))}
  .wardrobe .look-check svg{width:calc(11 * var(--wardrobe-step));height:calc(11 * var(--wardrobe-step))}
  :where(.is-reading-gentle) .wardrobe .favorite-button{width:calc(25 * var(--wardrobe-step));height:calc(26 * var(--wardrobe-step));padding:calc(5 * var(--wardrobe-step))}
  :where(.is-reading-gentle) .wardrobe .favorite-button svg{width:calc(13 * var(--wardrobe-step));height:calc(13 * var(--wardrobe-step))}
  .wardrobe .wardrobe-pages{margin:calc(12 * var(--wardrobe-step)) 0 calc(3 * var(--wardrobe-step))}
  .wardrobe .selection-meta{padding:calc(12 * var(--wardrobe-step)) 0 calc(22 * var(--wardrobe-step))}
  .wardrobe .collection-note{margin-top:calc(13 * var(--wardrobe-step))}
}
/* Georgia's numerals vary in width on some systems even with tabular-nums.
   Let the caption justify to the actual time width instead of calibrating for one HH:MM. */
.clock{align-items:flex-end;gap:calc(6 * var(--clock-unit))}
.clock>span:first-child{font-size:calc(32 * var(--clock-unit));line-height:1.1;letter-spacing:calc(1 * var(--clock-unit));font-variant-numeric:tabular-nums;white-space:nowrap}
.clock-caption{align-self:stretch;font-size:calc(9 * var(--clock-unit));line-height:1.5;letter-spacing:0;text-align:justify;text-align-last:justify;white-space:nowrap}
@media(max-width:480px){body{--clock-unit:calc(.75px * var(--clock-tier))}}

/* Scale only wardrobe contents. The outer box keeps real dimensions for fitting,
   horizontal bounds and idle transforms; header/footer remain independent. */
.wardrobe-content{display:flow-root;zoom:var(--wardrobe-composition-scale,1)}
@media(min-aspect-ratio:4/3){
  .wardrobe{width:calc(var(--wardrobe-width) * var(--wardrobe-tier) * var(--wardrobe-composition-scale,1));margin-top:calc(-1 * var(--wardrobe-lift,0px))}
}
.now-playing{top:var(--companion-top,0px);height:var(--companion-height,auto)}
.credit{left:auto;right:var(--creator-right,var(--margin));bottom:var(--creator-bottom,3.25vh);white-space:nowrap}

/* A quiet footer action, with confirmation kept inside the existing crystal panel. */
.reset-setting{margin-top:23px;padding-top:18px;border-top:1px solid #ecddc416}
.reset-button{min-height:28px;color:#b9b4a8;transition:color .2s}
.reset-button:hover,.reset-button[aria-expanded=true]{color:#e5d1af}
.reset-button>svg{width:14px;height:14px;opacity:.75}
.reset-button[aria-expanded=true]>svg{transform:none}
.reset-confirm{margin-top:12px;padding:1px 14px 12px;border:1px solid #e6d4b624;border-radius:7px;background:linear-gradient(125deg,#d8bd9710,transparent),#12202a30;animation:reset-confirm-arrive .25s var(--ease)}
/* A translated child briefly extends the scroll area even when its layout fits. */
@keyframes reset-confirm-arrive{from{opacity:0}to{opacity:1}}
.reset-confirm .reset-copy{margin:12px 0;color:#ccc6b8;letter-spacing:.25px}
.reset-actions{justify-content:flex-end;gap:20px;padding-top:9px}
.reset-actions button{min-height:30px;padding:5px 7px}
.reset-actions #confirmReset{padding:6px 13px;border:1px solid #ead9be39;border-radius:4px;background:#e2d0b614;color:#e5d1af}
.reset-actions #confirmReset:hover{background:#d8bd9726}
.reset-feedback{margin:10px 0 0;color:#dfbfa8}
@media(prefers-reduced-motion:reduce){.reset-confirm{animation:none}}

/* Infrequent visual preferences stay folded beneath everyday settings. */
.personalization-setting>summary{list-style:none;cursor:pointer}
.personalization-setting>summary::-webkit-details-marker{display:none}
.personalization-setting>summary:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
.personalization-setting>summary>svg{fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.personalization-setting[open]>summary>svg{transform:rotate(90deg)}
.personalization-setting .toggle-line{margin:20px 0 0}

.quality-options button:disabled { cursor: default; opacity: .55; }

/* Custom timing follows the existing settings typography and gold accent. */
.auto-custom { margin-top: 12px; }
.auto-custom-row { display: flex; align-items: center; gap: 9px; font-size: 11px; color: #c5c7be; }
.auto-custom-row input { min-width: 0; width: 76px; flex: 1; padding: 8px 10px; border: 1px solid #e6d4b638; border-radius: 4px; background: #12202a66; color: #eddbc0; font: inherit; font-variant-numeric: tabular-nums; }
.auto-custom-row input:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.auto-custom-row button { padding: 8px 12px; border: 1px solid #ead9be39; border-radius: 4px; background: #e2d0b614; color: #e5d1af; font: inherit; white-space: nowrap; }
.auto-custom-row :disabled { opacity: .5; cursor: default; }
.auto-custom .layout-note { margin: 8px 0 0; }
.auto-custom-feedback { color: #e8bba9; }
:where(.is-reading-gentle) .auto-custom-row { font-size: calc(10 * var(--gentle-unit)); }
:where(.is-reading-enlarged) .auto-custom-row { font-size: var(--read-secondary); }
:where(body[data-text-size=larger]) .auto-custom-row { font-size: calc((10 * var(--mid-comfort) + 13 * var(--mid-large)) / 2); }

/* Three peer collections share the same interface and familiar controls. */
.wardrobe-collections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 23px;padding:4px;border:1px solid #dfccb224;border-radius:5px;background:linear-gradient(110deg,#d7c4ad0a,#11171c30);box-shadow:inset 0 1px 0 #fff8eb0a}
.wardrobe-collections button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:38px;padding:8px 5px;border-radius:3px;color:#b5b1aa;font-size:11px;letter-spacing:1px;white-space:nowrap;transition:background .25s,color .25s,box-shadow .25s}
.wardrobe-collections button>span{font:italic 10px Georgia,serif;opacity:.45}
.wardrobe-collections button:hover{background:#ead4b10b;color:#eee0ce}
.wardrobe-collections button[aria-pressed=true]{background:#d8bd9718;box-shadow:inset 0 -1px 0 #ddc29b80;color:#eedab8}
.wardrobe-collections button[aria-pressed=true]>span{opacity:.8}
/* All collections inherit the original four-column portrait layout and heading.
   The two new collections use pre-cropped covers aligned to sit-02. */
.wardrobe[data-collection]:not([data-collection=classic]) .look-select img{object-fit:cover;object-position:center;filter:saturate(.82) brightness(.78)}
.wardrobe[data-collection]:not([data-collection=classic]) .look-select:hover img{transform:none;filter:saturate(.95) brightness(1)}
.wardrobe[data-collection]:not([data-collection=classic]) .look-card.active img{filter:saturate(.95) brightness(1)}
/* Older private covers are already blurred in their images. Keep new closed
   covers blurred on hover/focus too; only the picture, not the lock or name. */
.wardrobe[data-collection] .look-card.is-locked.blur-cover .look-select img{filter:blur(8px) saturate(.5) brightness(.55);transform:scale(1.12)}
body:not(.is-reading-enlarged) .wardrobe .look-card.is-locked .look-bottom{min-height:26px}
@media(min-width:2561px) and (min-height:1441px) and (min-aspect-ratio:4/3){body:not(.is-reading-enlarged) .wardrobe .look-card.is-locked .look-bottom{min-height:calc(26 * var(--wardrobe-step))}}
@media(min-width:2300px){.wardrobe-collections button{font-size:13px;min-height:44px}.wardrobe-collections button>span{font-size:12px}}
:where(.is-reading-gentle) .wardrobe-collections button{font-size:calc(11 * var(--gentle-unit));min-height:calc(38 * var(--gentle-base))}
:where(.is-reading-enlarged) .wardrobe-collections button{font-size:clamp(13px,1vw,22px);min-height:44px}
@media(max-height:850px){.wardrobe-collections{margin-bottom:16px}.wardrobe-collections button{min-height:32px;font-size:10px;gap:5px}}
@media(max-aspect-ratio:4/3){.wardrobe-collections{margin-bottom:16px}.wardrobe-collections button{font-size:11px;gap:5px}}
@media(prefers-reduced-motion:reduce){.wardrobe-collections button{transition:none}}

/* Discoverable controls in the existing smoked-glass composition. */
.playback .playback-mode{margin-left:-7px;margin-right:0;flex-shrink:0}
.playback .mode-button{width:auto;min-width:100px;padding:6px 10px;gap:8px;font-size:11px;letter-spacing:.06em;white-space:nowrap;color:#d8c5a9;border:1px solid #d8bd9726;background:#d8bd9708}
.playback .mode-button>svg{flex-shrink:0}
.playback .mode-menu{left:0;transform-origin:left bottom}
:where(.is-reading-gentle) .playback .mode-button{font-size:calc(11 * var(--gentle-unit));padding:calc(6 * var(--gentle-base)) calc(10 * var(--gentle-base))}
:where(.is-reading-enlarged) .playback .mode-button{font-size:var(--read-small);padding:calc(6 * var(--reading-base)) calc(10 * var(--reading-base))}
.selection-current{display:flex;align-items:baseline;gap:9px;min-width:0}
#selectionState{font-size:9px;font-weight:400;color:#a8a496;letter-spacing:.04em;white-space:nowrap}
.browse-return{font-size:10px;letter-spacing:.04em;color:var(--gold);padding:3px 0;line-height:1.2}
.browse-return:hover{text-decoration:underline;text-underline-offset:4px}
.collection-heading{min-height:20px}
:where(.is-reading-gentle) #selectionState,:where(.is-reading-gentle) .browse-return{font-size:calc(9 * var(--gentle-unit))}
:where(.is-reading-enlarged) #selectionState,:where(.is-reading-enlarged) .browse-return{font-size:var(--read-small)}
/* The header never enters the scrolling settings body. */
.panel.settings-panel{display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(145deg,#e4e9e60c,transparent 38%),rgba(16,27,34,.84)}
.settings-panel .setting-options{background:#0911158c;border-color:#d8bd9740}
.settings-panel .setting-options button{color:#cac9bd}
.settings-panel .setting-options button[aria-pressed=true]{color:#f5dfba;background:#d8bd9729;box-shadow:inset 0 -2px #e2c59c}
.settings-panel .switch{border-color:#aaa797;background:#09111580}
.settings-panel input:checked+.switch{background:#d8bd9730}
.settings-panel input[type=range]::-webkit-slider-runnable-track{background:#d8bd9766}
.settings-panel input[type=range]::-moz-range-track{background:#d8bd9766}
.settings-panel>.panel-top{flex-shrink:0}
.settings-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d8bd9770 transparent;padding-right:6px}
.sound-setting{margin-bottom:8px}
.sound-setting .switch{flex-shrink:0}
.sound-setting small{line-height:1.7}
.sound-setting+.setting-line{margin-top:12px}
/* Keep covers and actions intact; reclaim decorative space first. */
.wardrobe.is-wardrobe-compact .eyebrow{display:none}
.wardrobe.is-wardrobe-compact h1{font-size:28px;line-height:1.3;margin:0 0 10px;letter-spacing:.04em}
.wardrobe.is-wardrobe-compact h1 br{display:none}
.wardrobe.is-wardrobe-compact .intro{margin-bottom:12px}
.is-reading-enlarged .wardrobe.is-wardrobe-compact .intro{display:none}
.wardrobe.is-wardrobe-compact .wardrobe-collections{margin-bottom:12px}
.wardrobe.is-wardrobe-compact .selection-meta{padding:8px 0}
.wardrobe.is-reading-constrained{scrollbar-color:#d8bd9799 #111b2244;scrollbar-gutter:stable}
@media(max-height:620px){.wardrobe.is-wardrobe-compact h1{font-size:23px}.wardrobe.is-wardrobe-compact .intro{display:none}}
@media(max-width:1500px){.playback .timeline-display{width:90px;min-width:60px}.playback{flex-shrink:0}.view-tools{min-width:90px}}
@media(max-aspect-ratio:4/3){.playback .mode-button{min-width:0;padding:6px;font-size:11px}.playback .timeline-display{width:65px;min-width:0}.bottom-bar{flex-wrap:wrap;row-gap:8px}.playback{flex-shrink:1}}
@media(max-width:600px){.playback .timeline-display{display:none}.playback{gap:8px}.playback .playback-mode{margin-left:0}.playback #momentButton{font-size:10px}.selection-meta #lookEnglish{display:none}}
/* A remembered random pool is separate from favorites and the playback mode. */
.random-options{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:10px;line-height:1.5;color:#b6afa1;letter-spacing:.04em}
.random-options>div{display:flex;border:1px solid #d8bd9730;border-radius:4px;overflow:hidden;background:#101b224d}
.random-options button{padding:6px 10px;white-space:nowrap;color:#bcb9ae}
.random-options button+button{border-left:1px solid #d8bd9726}
.random-options button[aria-pressed=true]{color:#efd8b5;background:#d8bd971c;box-shadow:inset 0 -1px #ddc29b80}
.random-options button:disabled{opacity:.45;cursor:default}
.random-options button:focus-visible{outline-offset:-2px}
#randomFavoriteCount{font-family:Georgia,serif;margin-left:3px}
:where(.is-reading-gentle) .random-options{font-size:calc(10 * var(--gentle-unit))}
:where(.is-reading-enlarged) .random-options{font-size:var(--read-small)}
.playback .primary-control.has-retry{width:auto;min-width:36px;padding:6px 9px;gap:6px;font-size:12px;white-space:nowrap;color:#efd8b5;border:1px solid #d8bd9740;border-radius:5px}
/* One compact, dismissible hint anchored to the mode selector. No modal or focus grab. */
.first-use-hint{position:absolute;bottom:calc(100% + 20px);left:0;z-index:25;width:360px;max-width:calc(100vw - 32px);padding:17px 20px;border:1px solid #d8bd9738;border-radius:9px;background:linear-gradient(140deg,#d8bd9709,transparent),rgba(16,27,34,.94);box-shadow:0 10px 35px #0003;color:#d7d1c5;font-size:12px;line-height:1.8;letter-spacing:.03em}
.first-use-hint>div{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:8px}
.first-use-hint strong{font-weight:400;color:#e8d1af;font-size:13px}
.first-use-hint button{font-size:inherit;padding:4px 8px;color:#e8d1af;border:1px solid #d8bd9740;border-radius:4px;background:#d8bd9712;white-space:nowrap}
.first-use-hint p{margin:3px 0}
:where(.is-reading-gentle) .first-use-hint{font-size:calc(12 * var(--gentle-unit));width:calc(360 * var(--gentle-base))}
:where(.is-reading-enlarged) .first-use-hint{font-size:var(--read-small);width:calc(320 * var(--reading-unit))}
.first-use-hint strong{font-size:1.08em}

/* An offline reading view inside settings; its header stays outside the scroll area. */
.settings-panel{--help-space:var(--gentle-base);--help-unit:var(--gentle-unit)}
:where(.is-reading-enlarged) .settings-panel{--help-space:var(--reading-base);--help-unit:var(--reading-unit)}
:where(body[data-text-size=larger]) .settings-panel{--help-unit:calc((var(--mid-comfort) + var(--mid-large)) / 2)}
.settings-header{gap:12px}
.settings-header-actions{display:flex;align-items:center;gap:calc(12 * var(--help-space));flex-shrink:0}
.settings-header .micro{min-width:0}
.help-entry,.help-back{font-size:calc(11 * var(--help-unit));line-height:1.5;letter-spacing:.04em;color:var(--gold);padding:6px 0;white-space:nowrap}
.help-entry:hover{text-decoration:underline;text-underline-offset:4px}
.help-back{display:flex;align-items:center;gap:calc(8 * var(--help-space))}
.help-back svg{width:calc(12 * var(--help-space));height:calc(12 * var(--help-space));transform:rotate(180deg)}
.panel.settings-panel.is-help-view{width:calc(270 * var(--help-space) + 150 * var(--help-unit))}
.help-body{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d8bd9770 transparent;padding-right:calc(8 * var(--help-space));font-size:calc(12 * var(--help-unit));line-height:1.85;letter-spacing:.025em;color:#d0cec3}
.help-body h2:focus{outline:none}
.help-body>h2{margin-bottom:calc(22 * var(--help-space))}
.help-section{padding:calc(17 * var(--help-space)) 0;border-top:1px solid #d8bd9726}
.help-section h3{display:flex;align-items:baseline;gap:calc(11 * var(--help-space));font-size:calc(13 * var(--help-unit));font-weight:400;line-height:1.65;color:#f0dec2;margin:0 0 calc(9 * var(--help-space))}
.help-number{font:italic .88em Georgia,serif;color:#bca37e;letter-spacing:.06em}
.help-body p{margin:calc(7 * var(--help-space)) 0}
.help-body dl{margin:calc(12 * var(--help-space)) 0}
.help-body dl>div{display:grid;grid-template-columns:5em minmax(0,1fr);gap:calc(10 * var(--help-space));margin:calc(6 * var(--help-space)) 0}
.help-body dt,.help-body .help-label{color:#dec8a6}
.help-body dd{margin:0}
.help-body .help-note{font-size:.92em;color:#aeb3aa}
.help-more{border-top:1px solid #d8bd9726}
.help-more details{border-bottom:1px solid #d8bd9726}
.help-more summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(14 * var(--help-space)) 0;color:#e4d6bf;cursor:pointer;list-style:none;font-size:calc(12 * var(--help-unit))}
.help-more summary::-webkit-details-marker{display:none}
.help-more summary svg{width:calc(13 * var(--help-space));height:calc(13 * var(--help-space));flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.4;transform:rotate(90deg);transition:transform .18s ease}
.help-more details[open]>summary svg{transform:rotate(-90deg)}
.help-more summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.help-answer{padding:0 0 calc(12 * var(--help-space))}
.help-reminders{margin-top:calc(18 * var(--help-space));font-size:.92em;color:#aeb3aa}
.help-reminders strong{display:block;font-weight:400;color:#d7c19f;margin-bottom:calc(3 * var(--help-space))}
.help-reminders p+p{margin-top:calc(13 * var(--help-space))}
.first-use-hint .first-use-help{display:flex;align-items:center;gap:10px;width:max-content;padding:5px 0 0;margin-top:6px;border:0;border-radius:0;background:none;color:#e8d1af}
.first-use-hint .first-use-help:hover{text-decoration:underline;text-underline-offset:4px}
@media(prefers-reduced-motion:reduce){.help-more summary svg{transition:none}}

/* Keep the established glass, width and four typography tiers in glass.css,
   interaction.css and readability.css. Only new controls and scroll behavior live here. */
#settingsPanel{--settings-space:var(--gentle-base)}
body.is-reading-enlarged #settingsPanel{--settings-space:var(--reading-base)}
#settingsPanel.settings-panel{overflow:hidden}
#settingsPanel [hidden]{display:none!important}
#settingsPanel .settings-body{overflow-x:hidden;padding-bottom:3px}
/* Reserve the gutter before overflow; keep the rail in the right padding. */
#settingsPanel .settings-body,#settingsPanel .help-body{overflow-y:scroll;scrollbar-gutter:stable;margin-right:calc(-18 * var(--settings-space));padding-right:calc(18 * var(--settings-space))}
@supports(scrollbar-gutter:stable){#settingsPanel .settings-body,#settingsPanel .help-body{overflow-y:auto}}
#settingsPanel .settings-sr-only{position:absolute;width:1px!important;height:1px!important;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;font-size:1px!important}
#settingsPanel .settings-volume .setting-line{margin-top:12px}
/* The five choices follow the original single-row segmented control. */
#settingsPanel #autoOptions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
#settingsPanel #autoLabel{align-items:baseline;flex-wrap:wrap;row-gap:4px}
#settingsPanel .auto-timing-note{margin:8px 0 0}
#settingsPanel .auto-unit-options{display:flex;align-items:stretch;flex-shrink:0;padding:2px;border:1px solid #e6d4b61c;border-radius:4px;background:#12202a26}
#settingsPanel .auto-unit-options button{padding:5px 6px;border:0;border-radius:2px;background:none;color:#b4b6ad}
#settingsPanel .auto-unit-options button[aria-pressed=true]{background:#d8bd971c;color:#eddbc0;box-shadow:inset 0 -1px #e2c59c}
#settingsPanel .auto-custom-row{gap:calc(7 * var(--settings-space))}
#settingsPanel .auto-custom-row>input{width:0;flex:1;padding:8px 7px}
#settingsPanel #applyCustomInterval{padding:8px 10px;flex-shrink:0;min-width:calc(3em + 22px)}
#settingsPanel #applyCustomInterval[data-applied=true]{color:#aaaFA6;background:transparent;border-color:#e6d4b61c;opacity:1;cursor:default}
/* Position controls remain inline; their labels use the existing type scale. */
#settingsPanel .personalization-setting>.layout-setting{border:0;padding-top:0}
#settingsPanel #layoutLabel{margin-bottom:0}
#settingsPanel #layoutControls{margin-top:12px}
#settingsPanel #layoutControls .setting-line{flex-wrap:wrap;row-gap:5px}
#settingsPanel #layoutControls button:disabled{cursor:default;opacity:.35}

/* Smoke glass / warm ink / restrained gold, shared with the normal composition. */
.island-bar,.island-drawer-heading,.island-reply,.island-position-note{display:none}
.layout-switch{gap:8px!important;letter-spacing:.04em}
.top-right>.layout-switch{margin-right:8px}
.layout-switch>svg{width:16px;height:16px}
.layout-switch:not(:disabled):is(:hover,:focus-visible){color:var(--gold)}
.layout-preference{padding-bottom:4px}
.layout-preference .setting-line{margin-top:0!important}
/* The classic wardrobe reveals on interaction or an explicit user pause.
   Mouse-click focus alone must not keep it bright after leaving. */
#wardrobePanel{--wardrobe-opacity:.26}
#wardrobePanel:is(:hover,:active),#wardrobePanel:has(:focus-visible){--wardrobe-opacity:1}
body[data-layout=normal].is-user-paused #wardrobePanel{--wardrobe-opacity:1}
body[data-layout=normal]:not(.has-panel):not(.is-idle):not(.is-immersed) #wardrobePanel{opacity:var(--wardrobe-opacity)}
body[data-layout=island]{--island-unit:1px;--island-width:calc(464 * var(--island-unit));--island-edge:clamp(24px,2.5vw,120px);--island-bottom:clamp(30px,5.2vh,150px);--island-height:190px;--island-fill:linear-gradient(135deg,#e4e9e610,transparent 50%),rgba(16,27,34,.78)}
body[data-layout=island][data-text-size=comfortable]{--island-width:calc(484 * var(--island-unit))}
body[data-layout=island][data-text-size=larger]{--island-width:calc(514 * var(--island-unit))}
body[data-layout=island][data-text-size=large]{--island-width:calc(544 * var(--island-unit))}
body[data-layout=island] .topbar{left:auto;justify-content:flex-end}
body[data-layout=island] .brand,body[data-layout=island] .clock,body[data-layout=island] .top-divider,body[data-layout=island] .look-caption,body[data-layout=island] .credit{display:none}
body[data-layout=island] .scene-shade{background:linear-gradient(0deg,#050c1024,transparent 25%);opacity:1}
body[data-layout=island] .bottom-bar{
  left:auto;right:var(--island-edge);bottom:var(--island-bottom);top:auto;
  width:min(var(--island-width),calc(100vw - 2 * var(--island-edge)));max-width:none;
  display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;
  border:1px solid #d3d9d42e;border-radius:23px;
  background:var(--island-fill);backdrop-filter:blur(24px) saturate(.82);
  box-shadow:0 14px 48px #0003,inset 0 1px 0 #f2ead02a;
  z-index:30;overflow:visible;isolation:isolate;
}
body[data-layout=island] .bottom-bar .now-playing{
  position:relative;left:auto;top:auto;bottom:auto;transform:none;
  width:auto;height:auto;min-width:0;margin:0;padding:calc(19 * var(--island-unit)) calc(23 * var(--island-unit)) calc(17 * var(--island-unit));
  display:block;border-bottom:1px solid #d8bd971c;
}
body[data-layout=island] .now-playing>div{width:100%;max-width:none}
body[data-layout=island] .now-playing .status-dot,body[data-layout=island] #statusLabel{display:none}
body[data-layout=island] .now-playing p{
  margin:0;max-width:none;line-height:1.8;letter-spacing:.04em;color:var(--ink);
  text-wrap:pretty;overflow-wrap:anywhere;white-space:pre-line;text-shadow:none;-webkit-text-stroke:0;
  max-height:32vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d8bd9755 transparent;
}
body[data-layout=island] .island-reply{font-size:var(--island-dialogue-font,13px)}
body[data-layout=island].is-island-reply .island-reply{display:block}
body[data-layout=island].is-island-reply #statusText{display:none}
body[data-layout=island] #toast.is-dialogue-toast{display:none}
body[data-layout=island] .island-bar{display:flex;align-items:center;gap:calc(14 * var(--island-unit));min-height:calc(80 * var(--island-unit));padding:calc(13 * var(--island-unit)) calc(17 * var(--island-unit)) calc(11 * var(--island-unit))}
.island-opener{display:flex;align-items:center;gap:calc(12 * var(--island-unit));text-align:left;min-width:0;padding:0;flex:1}
.island-opener img{width:calc(39 * var(--island-unit));height:calc(39 * var(--island-unit));object-fit:cover;object-position:center 30%;border-radius:50%;box-shadow:0 0 0 1px #e5d2b638;flex-shrink:0}
.island-opener>span{display:grid;gap:5px;min-width:0}
.island-opener strong{font-size:var(--island-name-font,15px);font-weight:500;letter-spacing:.06em;white-space:nowrap}
.island-opener small{display:flex;gap:7px;align-items:center;font-size:var(--island-note-font,11px);color:#c2beb3;white-space:nowrap}
.island-opener small svg{width:10px;height:10px;transform:rotate(-90deg);transition:transform .25s}
.island-opener[aria-expanded=true] small svg{transform:rotate(90deg)}
.island-actions{display:flex;gap:calc(4 * var(--island-unit));align-items:center}
body[data-layout=island] .island-actions .icon-button,body[data-layout=island] .island-actions .text-button{width:calc(30 * var(--island-unit));height:calc(30 * var(--island-unit));padding:0;min-width:0;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0}
body[data-layout=island] .island-actions svg{width:calc(15 * var(--island-unit));height:calc(15 * var(--island-unit))}
body[data-layout=island] .island-actions #playButton svg{width:calc(17 * var(--island-unit));height:calc(17 * var(--island-unit))}
body[data-layout=island] .island-actions #playButton{width:calc(39 * var(--island-unit));height:calc(39 * var(--island-unit));border:1px solid #d8bd9752;margin-right:calc(4 * var(--island-unit));color:var(--ink);background:#d8bd9705}
body[data-layout=island] .island-actions #playButton.has-retry{width:auto;min-width:39px;padding:0 8px;gap:4px;font-size:11px;white-space:nowrap}
body[data-layout=island] .island-actions button:hover{background:#eee6d812;color:var(--gold)}
body[data-layout=island] .island-actions #immerseButton>span{display:none}
body[data-layout=island] .island-actions #settingsButton{position:relative;margin-left:calc(10 * var(--island-unit))}
body[data-layout=island] .island-actions #settingsButton::before{content:"";position:absolute;left:calc(-7 * var(--island-unit));top:calc(8 * var(--island-unit));height:calc(14 * var(--island-unit));border-left:1px solid #d8bd9730;pointer-events:none}
body[data-layout=island] .island-actions #settingsButton[aria-expanded=true]{color:var(--gold);background:#d8bd9712}
.island-favorite[aria-pressed=true]{color:var(--gold)}
.island-favorite[aria-pressed=true] svg{fill:currentColor}
body[data-layout=island] .bottom-bar .view-tools{display:none}
body[data-layout=island] .bottom-bar .playback{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;margin:0 calc(20 * var(--island-unit));padding:calc(11 * var(--island-unit)) 0 calc(15 * var(--island-unit));gap:calc(17 * var(--island-unit));align-items:center;border-top:1px solid #d8bd9718;justify-content:space-between}
body[data-layout=island] .playback .playback-mode{margin:0}
body[data-layout=island] .playback .mode-button{border:0;padding:0 calc(10 * var(--island-unit));min-width:0;height:32px;background:none;color:#d8c5a9}
body[data-layout=island] .playback .timeline-display{width:auto;min-width:50px;flex:1}
body[data-layout=island] #momentButton{flex-shrink:0}
body[data-layout=island] .playback #modeMenu{left:-21px;right:auto;bottom:calc(100% + var(--island-menu-rise,170px));top:auto;max-height:min(70vh,calc(100vh - var(--island-bottom) - var(--island-height) - 36px));max-width:min(var(--island-width),calc(100vw - 2 * var(--island-edge)));border-radius:16px;background:linear-gradient(135deg,#e4e9e60d,transparent 50%),rgba(16,27,34,.96);box-shadow:0 18px 55px #0004}
/* The compact drawer stays clear while open. Closing always fades it to zero
   before removing visibility, independently of playback and interaction. */
body[data-layout=island] #wardrobePanel{
  display:flex;flex-direction:column;
  position:fixed;left:auto;right:var(--island-edge);top:auto!important;bottom:calc(var(--island-bottom) + var(--island-height) + 13px)!important;
  width:min(var(--island-width),calc(100vw - 2 * var(--island-edge)));height:auto;margin:0;padding:calc(20 * var(--island-unit));
  max-height:calc(100vh - var(--island-bottom) - var(--island-height) - 40px)!important;overflow:hidden;
  transform:none;opacity:0;visibility:hidden;pointer-events:none;z-index:31;
  border:1px solid #d3d9d42e;border-radius:19px;background:var(--island-fill);
  backdrop-filter:blur(24px) saturate(.82);box-shadow:0 15px 45px #0003,inset 0 1px 0 #f2ead023;
  transition:opacity .22s ease,visibility 0s linear .22s;scrollbar-width:thin;scrollbar-color:#d8bd9755 transparent;
}
body[data-layout=island].is-wardrobe-open:not(.has-panel):not(.is-idle):not(.is-immersed) #wardrobePanel{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
/* Keep focus outlines and transparent hit areas inside the scroll viewport.
   The matching negative margin preserves the original card size and position. */
body[data-layout=island] .wardrobe-content{zoom:1;transform:none;min-height:0;padding:6px;margin:-6px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
body[data-layout=island] .wardrobe .eyebrow,body[data-layout=island] .wardrobe h1,body[data-layout=island] .wardrobe .intro,body[data-layout=island] .wardrobe .selection-meta{display:none}
body[data-layout=island] .island-drawer-heading{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;margin-bottom:17px;gap:10px}
.island-drawer-title{font-size:var(--island-name-font,15px);letter-spacing:.12em}
.island-drawer-actions{display:flex;gap:13px;align-items:center}
.island-drawer-actions .layout-switch{font-size:var(--island-note-font,11px);color:#bfb8ac}
.island-drawer-actions .layout-switch:not(:disabled):is(:hover,:focus-visible){color:var(--gold)}
.island-drawer-actions .icon-button{width:calc(24 * var(--island-unit))!important;height:calc(24 * var(--island-unit))!important}
body[data-layout=island] .wardrobe .wardrobe-collections{margin-top:0;margin-bottom:19px}
body[data-layout=island] .wardrobe .looks{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
body[data-layout=island] .wardrobe .look-image{height:auto;aspect-ratio:3/4;border-radius:7px}
body[data-layout=island] .wardrobe .look-bottom{margin-top:8px}
body[data-layout=island] .wardrobe .look-short{letter-spacing:0}
body[data-layout=island] .wardrobe .collection-heading>span{display:none}
body[data-layout=island] .wardrobe .collection-heading{margin-bottom:0}
body[data-layout=island] .wardrobe .collection-heading:has(#showCurrent:not([hidden])){margin-bottom:12px;justify-content:flex-end}
body[data-layout=island] .wardrobe .wardrobe-pages{margin:12px 0 13px}
body[data-layout=island] .wardrobe .random-button{padding:12px 14px}
body[data-layout=island] .wardrobe .collection-note{margin-top:11px}
body[data-layout=island] #momentPanel{left:auto;right:var(--island-edge);bottom:calc(var(--island-bottom) + var(--island-height) + 14px);top:auto;width:var(--island-width);max-height:calc(100vh - var(--island-bottom) - var(--island-height) - 35px);z-index:40}
/* Settings share the drawer's alignment and rise from the control island. */
body[data-layout=island] #settingsPanel{right:var(--island-edge);top:auto;bottom:calc(var(--island-bottom) + var(--island-height) + 18px);width:min(var(--island-width),calc(100vw - 2 * var(--island-edge)));max-height:min(80vh,calc(100vh - var(--island-bottom) - var(--island-height) - var(--island-edge) - 18px));border-radius:19px;transform-origin:bottom right;z-index:40}
/* Let longer timer labels use spare room from shorter labels in the narrow panel. */
body[data-layout=island] #settingsPanel #autoOptions{grid-template-columns:repeat(5,auto)}
.overflow-pager{flex-shrink:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid #d8bd9726;font-size:var(--island-note-font,11px);color:var(--muted)}
#settingsPager{margin-top:calc(12 * var(--settings-space));padding-top:calc(10 * var(--settings-space));font-size:calc(11 * var(--help-unit))}
.overflow-pager button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:34px;padding:5px 10px;border:1px solid #d8bd9730;border-radius:6px;background:#d8bd9706;color:#d8c5a9;font-size:inherit;white-space:nowrap;transition:color .2s,background .2s,opacity .2s}
#settingsPager button{min-height:max(34px,calc(26 * var(--help-unit)))}
.overflow-pager button:not(:disabled):is(:hover,:focus-visible){color:var(--gold);background:#d8bd9717;border-color:#d8bd9770}
.overflow-pager button:disabled{opacity:.3;cursor:default}
.overflow-pager button svg{width:12px;height:12px}
.overflow-pager button:first-child svg{transform:rotate(-90deg)}
.overflow-pager button:last-child svg{transform:rotate(90deg)}
.overflow-pager>span{font-size:.9em;letter-spacing:.03em;white-space:nowrap}
#modeMenu{display:flex;flex-direction:column;overflow:hidden}
#modeMenu .mode-heading{flex-shrink:0}
#modeMenu .mode-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
#modePager{font-size:inherit;margin:6px 5px 0;padding-top:6px}
@media(max-height:850px){
  body[data-layout=island] #wardrobePanel{padding:14px}
  body[data-layout=island] .island-drawer-heading{margin-bottom:10px}
  body[data-layout=island] .wardrobe .wardrobe-collections{margin-bottom:10px}
  body[data-layout=island] .wardrobe .collection-heading:not(:has(#showCurrent:not([hidden]))){display:none}
  body[data-layout=island] .wardrobe .look-image img{object-fit:contain;background:#0b141a99}
  body[data-layout=island] .wardrobe .wardrobe-pages{margin:8px 0}
  #wardrobePager{margin-top:8px;padding-top:8px}
}
body[data-layout=island] .layout-controls,body[data-layout=island] .layout-guide{display:none!important}
body[data-layout=island] .island-position-note{display:block;font-size:var(--island-note-font,11px);line-height:1.8;color:var(--muted)}
body[data-layout=island] #wakeButton{right:var(--island-edge);bottom:var(--island-bottom);font-size:var(--island-control-font,13px)}
body[data-layout=island] #firstUseHint{left:-21px;bottom:calc(var(--island-height) + 15px)}
body[data-layout=island].is-idle .bottom-bar,body[data-layout=island].is-immersed .bottom-bar{opacity:0;visibility:hidden;pointer-events:none}
body[data-layout=island].is-idle .scene-shade,body[data-layout=island].is-immersed .scene-shade{opacity:0}
@media(prefers-reduced-motion:reduce){body[data-layout] #wardrobePanel{transition:none}}

/* Approved B cover: pearl infinity seal and lower-edge signature, no extra frame. */
.companion-art{position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;color:#e0e8e6;background:linear-gradient(0deg,#0b1924c9,transparent 38%)}
.companion-art svg{display:block;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.companion-card .look-index,.companion-card .look-check{z-index:2}
.companion-seal{position:absolute;top:9px;right:9px;display:flex;align-items:center;justify-content:center;width:25px;height:25px;border:1px solid #e4ebe17a;border-radius:50%;background:#15212b8c;box-shadow:inset 0 0 0 3px #d6e5e00a}
.companion-seal svg{width:17px;height:9px}
:where(.is-reading-enlarged) .companion-seal{top:calc(11px + clamp(26px,1vw,36px))}
.companion-sign{position:absolute;left:9px;bottom:10px;font:400 10px/1 "SimSun",serif;letter-spacing:1px;white-space:nowrap;box-sizing:border-box;color:#e0e8e6;text-shadow:0 1px 5px #0009;padding-top:7px}
.companion-sign::before{content:"";position:absolute;top:0;left:0;width:16px;height:1px;background:#dbe5dd9e}

/* Shared feedback, using the existing ink, smoke glass and gold palette. */
/* Keep frame-picker controls stationary throughout the entrance. */
body[data-layout=normal] #momentPanel{animation-name:moment-fade-in}
@keyframes moment-fade-in{from{opacity:0}to{opacity:1}}
body[data-layout] .playback #modeButton:not(:disabled):is(:hover,:focus-visible),
body[data-layout] .playback #modeButton[aria-expanded=true]{color:#f2dfbf;background:#d8bd9714;border-color:#d8bd9766}
body[data-layout] .playback #modeButton[aria-expanded=true]{box-shadow:inset 0 -1px #d8bd97a6}
body[data-layout=island] .island-actions #playButton:not(:disabled):is(:hover,:focus-visible){color:var(--gold);background:#d8bd971c;border-color:#d8bd97a6}
body[data-layout] .icon-button#settingsButton[aria-expanded=true]{color:var(--gold);background:#d8bd971c;box-shadow:inset 0 0 0 1px #d8bd9740}
body[data-layout] #closeSettings:not(:disabled):is(:hover,:focus-visible){color:var(--gold);background:#d8bd971c;border-color:#d8bd9766}
.settings-panel .setting-options button:not(:disabled):not([aria-pressed=true]):is(:hover,:focus-visible){color:var(--gold);background:#d8bd9714}
.settings-panel .toggle-line{cursor:pointer}
.settings-panel .toggle-line:hover .switch{border-color:var(--gold);background:#d8bd9714}
.island-opener:not(:disabled):is(:hover,:focus-visible),
.island-opener:not(:disabled):is(:hover,:focus-visible) small{color:var(--gold)}
.island-opener strong,.island-opener small{transition:color .18s ease}
.island-opener[aria-expanded=true] small svg{color:var(--gold)}
body[data-layout=island].is-spinning #islandShuffle{opacity:1;color:var(--gold);cursor:progress}
body.is-spinning #islandShuffle svg{animation:turn 1.4s linear infinite}
body.is-spinning #islandWardrobeHint{color:var(--gold)}
/* Grow hit areas into existing gaps, without growing the visible symbols. */
body:not(.is-reading-enlarged) .favorite-button{position:relative}
.favorite-button::after{content:"";position:absolute;inset:-4px 0 -4px -8px}
body[data-layout=island] .island-actions button{position:relative}
body[data-layout=island] .island-actions button::after{content:"";position:absolute;inset:-2px}
body[data-layout=island] .island-actions button:not(#playButton)::after{inset:-5px -2px}
.island-drawer-actions .icon-button,#closeSettings{position:relative}
.island-drawer-actions .icon-button::after{content:"";position:absolute;inset:-6px}
#closeSettings::after{content:"";position:absolute;inset:-3px}
.wardrobe-pages .page-arrow{min-width:32px;min-height:32px}
/* Unavailable is different from waiting: keep the explanatory text, not hover glow. */
body.has-panel :is(.bottom-bar,.topbar) button:disabled{cursor:default}
#modeMenu [role=menuitemradio][aria-disabled=true]:is(:hover,:focus-visible){color:var(--ink);background:transparent;cursor:default}
body[data-layout] .island-actions button:disabled:not([aria-busy=true]){color:var(--muted);background:transparent;transform:none;cursor:default}
.interaction-tip{position:fixed;z-index:80;pointer-events:none;max-width:min(280px,calc(100vw - 24px));margin:0;padding:7px 11px;border:1px solid #d8bd9740;border-radius:7px;color:var(--ink);background:rgba(16,27,34,.96);box-shadow:0 5px 20px #0002;font-family:inherit;font-size:13px;line-height:1.5;letter-spacing:.03em;text-align:center;overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){body.is-spinning #islandShuffle svg{animation:none}.island-opener strong,.island-opener small{transition:none}}