/* Exhibit layout follows the original 1536 × 1024 artboard. */
:root{color-scheme:dark;--paper:#f5ecd9;--ink:#fbf5e8;--line:#9eb3ed;--blue:#1646ce}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#1137b4 url('./assets/images/exhibit-background.webp') center/cover fixed no-repeat;color:var(--ink);font:14px/1.5 'Segoe UI',Arial,sans-serif}main{position:relative;width:100%;max-width:1920px;min-height:640px;aspect-ratio:3/2;margin:auto;background:transparent}header{position:absolute;left:3.2%;right:3.2%;top:2.1%;display:flex;justify-content:space-between;align-items:flex-start;z-index:3;pointer-events:none}h1{font:190px/.8 Impact,'Arial Narrow',sans-serif;margin:0;letter-spacing:-6px;transform:scaleX(.6);transform-origin:left top;width:290px;color:var(--paper)}nav{display:flex;gap:40px;pointer-events:auto;padding-top:8px}nav a{min-height:44px;display:flex;align-items:center;color:var(--ink);text-decoration:none;font-size:14px}nav a:hover{text-decoration:underline}#stage{position:relative;perspective:2600px;touch-action:pan-y}#book{position:relative;width:100%;aspect-ratio:3/2;transform-style:preserve-3d}#book>.book-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.pocket{position:absolute;width:11.458333%;height:24.023438%;isolation:isolate;border-radius:5px}.pocket canvas,.pocket .base-preview{display:block;width:100%;height:100%;border-radius:5px;pointer-events:none}.pocket canvas{position:relative;z-index:1}.pocket .card-content{position:absolute;inset:0;width:100%;height:100%;clip-path:inset(2.919708% 3.278688% round 3px);translate:0 var(--card-lift,0%);rotate:var(--card-rotation,0deg);pointer-events:none}#book.material{width:28%;aspect-ratio:176/246;margin:auto;top:160px;filter:drop-shadow(8px 18px 18px #07143c80)}#book.material>img,#book.material .card-content{display:none}#book.material .pocket{left:0!important;top:0!important;width:100%;height:100%}body:has(#book.material) #stage{aspect-ratio:3/2}.hint{display:none}
button,input,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled,input:disabled,select:disabled{opacity:.45;cursor:default}:focus-visible{outline:2px solid #fff;outline-offset:5px}button,select{min-height:44px;border:1px solid #91a7e3;background:#163bb7;border-radius:6px;padding:8px 14px}label{display:flex;align-items:center;gap:12px;white-space:nowrap}input[type=range]{appearance:none;background:transparent;min-height:44px;margin:0;width:100%;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,#f5ecd9 var(--fill,0%),#8199db var(--fill,0%))}input[type=range]::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border:0;border-radius:50%;background:#f5ecd9;margin-top:-6.5px}input[type=range]::-moz-range-track{height:2px;background:#8199db}input[type=range]::-moz-range-progress{height:2px;background:#f5ecd9}input[type=range]::-moz-range-thumb{border:0;background:#f5ecd9;border-radius:50%;width:15px;height:15px}
.console{position:absolute;bottom:4.3%;left:3.2%;right:3.2%;display:flex;align-items:center;gap:24px;z-index:4}.console>.toolbar{order:3;margin-left:auto;display:flex;align-items:center;gap:24px}.view-switch{display:flex;border:1px solid #9bb0e4;border-radius:30px;overflow:hidden;width:212px;height:40px;align-items:center;padding:2px}.view-switch button{border:0;border-radius:24px;background:transparent;min-height:34px;flex:1;padding:4px 18px;font-size:12px}.view-switch button[aria-pressed=true]{background:var(--paper);color:#153aa8}.angle-buttons{display:flex;gap:0;align-items:center;border-left:1px solid #8ca4e0;padding-left:12px}.angle-buttons button{border:0;background:transparent;font-size:25px;padding:0;width:32px;min-height:44px}.angle-dial{display:block;width:38px;height:38px;border:1px solid #e4e7f7;border-radius:50%;position:relative;background:linear-gradient(90deg,transparent 49%,#a3b7e3 50%,transparent 52%),linear-gradient(transparent 49%,#a3b7e3 50%,transparent 52%)}#center{width:44px}.angle-dial:after{content:'';position:absolute;inset:15px;border-radius:50%;background:#eee5d7}.angle-dial:before{content:'';position:absolute;inset:4px;border-left:1px solid #a3b7e3;border-right:1px solid #a3b7e3;transform:rotate(-38deg);border-radius:50%}.auto-toggle{border:0;background:transparent;display:flex;align-items:center;gap:14px;padding:0;font-size:12px;white-space:nowrap}.auto-toggle:after{content:'';width:38px;height:22px;border:1px solid #e6e4ef;border-radius:20px;background:radial-gradient(circle at 10px 50%,#f4ead8 0 7px,transparent 8px)}.auto-toggle[aria-pressed=true]:after{background:#f4ead8 radial-gradient(circle at 27px 50%,#1c4ecd 0 7px,transparent 8px)}
.primary-controls{order:1;display:flex;gap:30px;flex:0 1 515px}.primary-controls label{display:grid;grid-template-columns:auto minmax(65px,1fr);gap:18px;font-size:12px;flex:1;min-width:0}.primary-controls output{display:none}.primary-controls input{grid-column:2;grid-row:1}details{order:2;border-left:1px solid #9bb0e4;padding-left:24px}summary{display:flex;align-items:center;gap:12px;min-height:44px;font-size:12px;cursor:pointer;list-style:none;white-space:nowrap}summary::-webkit-details-marker{display:none}.chevron{width:7px;height:7px;border-right:1px solid white;border-bottom:1px solid white;transform:rotate(45deg);margin-top:-4px}details[open] .chevron{transform:rotate(225deg);margin-top:4px}.advanced-content{position:absolute;bottom:62px;left:0;right:0;background:#092465f5;border:1px solid #728acd;border-radius:10px;padding:24px;max-height:65vh;overflow:auto;box-shadow:0 16px 40px #00123870}.advanced-content .toolbar{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.advanced-content .controls{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 32px;padding:20px 0}.advanced-content .controls label{display:grid;grid-template-columns:1fr auto}.advanced-content .controls input,.advanced-content .controls select{grid-column:1/-1;width:100%}.reflection input{accent-color:var(--paper);width:20px;height:20px}.comparison{border-top:1px solid #7189c0;padding-top:16px}#pocketLabel{position:absolute;bottom:64px;right:0;font-size:12px}footer{position:absolute;bottom:1%;right:3.2%;font-size:11px;color:#ccd8ff;opacity:.85}body:has(#status[data-ready=true]) footer{display:none}[hidden]{display:none!important}
@media(min-width:1600px){h1{font-size:12.37vw}}
@media(max-width:1250px){h1{font-size:15vw}.console{gap:16px}.console>.toolbar{gap:12px}.primary-controls{gap:16px}.primary-controls label{gap:10px}.view-switch{width:176px}.view-switch button{padding:4px 12px}details{padding-left:16px}.auto-toggle{gap:8px}.angle-buttons{padding-left:6px}}
@media(max-width:950px){main{min-height:760px}.console{flex-wrap:wrap;gap:12px;bottom:24px}.primary-controls{flex:1}.console>.toolbar{width:100%;justify-content:flex-end}.advanced-content{bottom:112px}#pocketLabel{bottom:115px}#book.material{width:32%;top:110px}.primary-controls label{font-size:13px}summary{font-size:13px}footer{bottom:4px}.view-switch{height:46px}.view-switch button{min-height:40px}nav{gap:24px}}
@media(max-width:600px){main{min-height:100svh;aspect-ratio:auto;padding-bottom:270px;background-size:auto 100%}header{position:relative;left:auto;right:auto;top:auto;padding:20px 20px 0}h1{font-size:90px;width:160px;letter-spacing:-3px}nav{gap:18px;padding:0}nav a{font-size:12px}#stage{margin-top:24px}#book{aspect-ratio:3/2}#book.material{width:65%;top:0;margin:0 auto 24px}body:has(#book.material) #stage{aspect-ratio:auto}.console{bottom:28px;left:20px;right:20px;gap:6px}.primary-controls{display:grid;grid-template-columns:1fr;flex:0 0 calc(100% - 100px);gap:4px}.primary-controls label{grid-template-columns:60px 1fr;gap:14px}.console>.toolbar{justify-content:space-between;gap:8px;margin-top:12px}.view-switch{width:165px}.angle-buttons{border:0;padding:0}.auto-toggle{font-size:11px;gap:6px}.auto-toggle:after{width:32px}.auto-toggle[aria-pressed=true]:after{background-position:-6px 0}.angle-buttons button{width:24px}#center{width:36px}.angle-dial{width:32px;height:32px}.angle-dial:after{inset:12px}details{padding-left:12px;margin-left:auto}.advanced-content{bottom:64px;max-height:65vh;padding:16px}.advanced-content .controls{grid-template-columns:1fr 1fr;gap:14px}#pocketLabel{bottom:194px}.view-switch button{font-size:11px;min-height:40px}footer{right:20px}.primary-controls input{min-height:44px}body:has(#book.material) main{padding-bottom:270px}.hint{display:none}}

.view-switch{height:44px}.view-switch button{min-height:44px}@media(max-width:600px){.angle-buttons{display:none}.console>.toolbar{flex-wrap:wrap}.auto-toggle{min-height:44px}.view-switch{width:160px}}
.advanced-content{bottom:calc(100% + 12px)}

.cover-copy{position:absolute;top:42.5%;font-size:clamp(5px,.65vw,12px);line-height:1.9;letter-spacing:1.4px;color:#c1cff0;opacity:.65;pointer-events:none}.cover-left{left:9.5%}.cover-right{left:87%}#book.material .cover-copy{display:none}
body{overflow-x:clip}
.cover-copy{letter-spacing:.09vw}

#center{position:relative}#schemeName{position:absolute;top:100%;left:0;right:0;font-size:9px;line-height:1.2;letter-spacing:.05em}.angle-dial{transition:transform .25s}#center[data-variant=B11] .angle-dial{transform:rotate(90deg)}footer{display:flex;align-items:center;gap:12px;max-width:94%}#retry{font-size:12px;min-height:32px;padding:4px 10px}

/* One quiet album-level loading indicator; each material reveals independently. */
#albumLoading{position:absolute;left:50%;bottom:12%;translate:-50% 0;width:190px;color:var(--paper);font-size:10px;letter-spacing:.1em;transition:opacity .35s;pointer-events:none}
#albumLoading>div{display:flex;justify-content:space-between;gap:24px;margin-bottom:10px}#loadCount{font-variant-numeric:tabular-nums;letter-spacing:0}
#loadProgress{appearance:none;display:block;width:100%;height:2px;border:0;background:#ffffff25;color:var(--paper)}#loadProgress::-webkit-progress-bar{background:#ffffff25}#loadProgress::-webkit-progress-value{background:var(--paper);transition:width .25s}#loadProgress::-moz-progress-bar{background:var(--paper)}
body:not([data-load=loading]) #albumLoading{opacity:0;visibility:hidden}body[data-load=loading] footer{display:none}
.pocket:not(.is-ready) .base-preview{opacity:.3;filter:grayscale(.65)}.pocket.is-ready>canvas:not(.scheme-transition){animation:material-reveal .35s ease-out}
@keyframes material-reveal{from{opacity:0}to{opacity:1}}
.pocket canvas.scheme-transition{position:absolute;inset:0;z-index:2;pointer-events:none;animation:none}
#schemeName{top:auto;bottom:calc(100% + 10px);left:50%;right:auto;translate:-50% 4px;padding:6px 9px;background:#092465ee;border:1px solid #9eb3ed55;border-radius:5px;font-size:10px;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,translate .15s}#schemeName:after{content:' · Switch scheme'}#center:hover #schemeName,#center:focus-visible #schemeName{opacity:1;visibility:visible;translate:-50% 0}
@media(max-width:950px){#albumLoading{bottom:160px}}@media(max-width:600px){#albumLoading{bottom:240px}}
@media(prefers-reduced-motion:reduce){.pocket.is-ready>canvas:not(.scheme-transition){animation:none}#albumLoading,#loadProgress::-webkit-progress-value{transition:none}}

#albumLoading{display:flex;flex-direction:column-reverse;gap:12px;width:min(300px,70vw);text-transform:uppercase;letter-spacing:.25em}#albumLoading>div{margin:0}#schemeName{border-radius:20px;padding:7px 12px}

/* Material view: a single work and its visual collection, not a numeric form. */
#book.material{width:24%;max-width:470px;top:min(6.5vw,150px);margin:auto}
#materialGallery{position:absolute;top:65%;left:50%;translate:-50% 0;width:min(1200px,78%);z-index:2;text-align:center}
#materialIndex{display:block;font-size:11px;letter-spacing:.15em;font-variant-numeric:tabular-nums;margin-bottom:18px}
.material-navigation{display:flex;align-items:center;gap:18px}.material-navigation>button{flex:0 0 44px;width:44px;min-height:44px;background:transparent;border:0;font-size:30px;padding:0;color:var(--paper)}
.material-thumbnails{position:relative;display:flex;flex:1;gap:16px;overflow-x:auto;scrollbar-width:none;padding:5px;min-width:0}.material-thumbnails::-webkit-scrollbar{display:none}
.material-thumb{flex:1 0 0;min-width:44px;aspect-ratio:176/246;padding:3px;border:1px solid transparent;border-radius:5px;background:transparent;transition:opacity .2s,transform .2s,border-color .2s;opacity:.55;min-height:44px;overflow:hidden}
.material-thumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px;pointer-events:none}.material-thumb:hover{opacity:1;transform:translateY(-3px)}.material-thumb[aria-pressed=true]{opacity:1;border-color:var(--paper);box-shadow:0 0 0 1px #f5ecd940}.material-thumb:focus-visible{outline-offset:1px}
body:has(#book.material) #albumLoading{bottom:12%}
@media(max-width:950px){#book.material{width:27%;top:100px}#materialGallery{top:62%;width:88%}.material-navigation{gap:8px}.material-thumbnails{gap:8px}#materialIndex{margin-bottom:10px}}
@media(max-width:600px){#book.material{width:55%;max-width:260px;top:0;margin:0 auto 24px}#materialGallery{position:relative;top:auto;left:auto;translate:none;width:calc(100% - 28px);margin:0 auto 24px}.material-thumbnails{gap:10px}.material-thumb{flex:0 0 48px}.material-navigation{gap:3px}body:has(#book.material) #albumLoading{bottom:235px}}
@media(prefers-reduced-motion:reduce){.material-thumb{transition:none}}

#materialGallery #albumLoading{position:relative;left:auto;top:auto;bottom:auto;translate:none;width:min(300px,100%);margin:0 auto 18px}
body:not([data-load=loading]) #materialGallery #albumLoading{display:none}
body[data-load=loading] #materialGallery #materialIndex{display:none}
#advanced{position:relative}
#labControls[hidden]{display:none!important}
.preset-popover{position:absolute;bottom:calc(100% + 14px);left:10px;width:250px;padding:10px;background:#092567ed;border:1px solid #d9e0f780;border-radius:14px;box-shadow:0 16px 40px #00134445;backdrop-filter:blur(16px);z-index:10}
.preset-popover button{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:10px;border:0;border-radius:8px;background:transparent;text-align:left;color:var(--paper);font-size:14px}
.preset-popover button:hover,.preset-popover button:focus-visible{background:#e8ecff14}
.preset-popover small{display:block;margin-top:5px;font-size:11px;color:#c2ccea}
.effect-swatch{flex:0 0 34px;height:34px;border-radius:50%;border:1px solid #f5ecd96b;background:linear-gradient(130deg,#889eca 10%,#f7e7a9 35%,#a4e7e8 45%,#b9a7d1 60%,#e9dcc6 80%)}
.effect-swatch.soft{filter:saturate(.45);background:conic-gradient(#e8dfd4,#bfc5e1,#d7efd9,#e3cce3,#e8dfd4)}
.effect-swatch.vivid{background:conic-gradient(from 30deg,#082277,#1777ef,#80eeeb,#efe2a7,#f872b9,#233ed2,#082277)}
.effect-swatch.fine{background:linear-gradient(130deg,#7c84ad 30%,#becbd3 44%,#fff2c1 47%,#85e5ef 50%,#ccafdb 54%,#8c99b5 65%)}
.effect-check{margin-left:auto;width:19px;height:19px;border-radius:50%;color:#163580;background:var(--paper);text-align:center;line-height:19px;opacity:0}
[aria-pressed=true]>.effect-check{opacity:1}
@media(max-width:950px){.preset-popover{left:auto;right:0}}
@media(max-width:600px){.preset-popover{width:240px}}

.preset-heading{display:block;padding:9px 10px 8px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#bac9ec}
.preset-popover .scheme-options{display:flex;margin:0 10px 10px;padding:3px;border:1px solid #a9bce36b;border-radius:24px}
.preset-popover .scheme-options button{justify-content:center;min-height:44px;padding:6px;border-radius:22px;font-size:12px}
.preset-popover .scheme-options button[aria-pressed=true]{background:var(--paper);color:#153aa8}
.preset-popover{max-height:70svh;overflow-y:auto}

.pocket canvas.layered-card{position:absolute;inset:auto 0 0;width:100%;height:132.116788%;border-radius:0}

/* The foil control is a quiet continuation of the material caption. */
.surface-info{display:flex;align-items:center;justify-content:center;gap:24px;margin:-6px 0 8px;font-size:12px;color:var(--paper)}
.foil-toggle{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 0 0 24px;border:0;border-radius:0;background:transparent;color:var(--paper);font-size:12px;white-space:nowrap}
.foil-toggle:before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:1px;background:#f5ecd959}
.foil-icon{width:22px;height:22px;stroke:currentColor;stroke-width:1;transition:opacity .24s,transform .24s}
.foil-track{position:relative;width:46px;height:24px;border:1px solid #f5ecd9aa;border-radius:24px;background:#081d6c26;transition:border-color .24s,background .24s,box-shadow .24s}
.foil-track:after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--paper);transform:translateX(0);transition:transform .26s cubic-bezier(.22,1,.36,1),opacity .24s;opacity:.6}
.foil-toggle[aria-checked=true] .foil-track:after{transform:translateX(22px);opacity:1}
.foil-toggle[aria-checked=true] .foil-track{border-color:var(--paper);background:#f5ecd910}
.foil-toggle[aria-checked=false] .foil-icon{opacity:.5;transform:translateY(1px)}
.foil-toggle:hover:not(:disabled) .foil-track,.foil-toggle:focus-visible .foil-track{box-shadow:0 0 15px #d5e3ff30;border-color:#fff}
@media(max-width:600px){.surface-info{gap:4px;flex-direction:column}.foil-toggle{padding-left:0}.foil-toggle:before{display:none}}
@media(min-width:601px){.surface-info{position:absolute;bottom:calc(100% + 4px);left:0;right:0;margin:0}}
@media(prefers-reduced-motion:reduce){.foil-icon,.foil-track,.foil-track:after{transition:none}}

/* Scale the desktop artboard as one composition, including its typography and controls. */
@media(min-width:951px){
 main{width:min(100%,150svh);max-width:none;container-type:inline-size}
 h1{font-size:12.369792cqw;letter-spacing:-.390625cqw;width:18.880208cqw}
 nav{gap:2.604167cqw;padding-top:.520833cqw}nav a{font-size:.911458cqw}
 #book.material{width:24%;max-width:none;top:6.5cqw}
 #materialGallery{width:78%;max-width:none}
 .material-navigation{gap:1.171875cqw}.material-navigation>button{flex-basis:2.864583cqw;width:2.864583cqw;font-size:1.953125cqw}
 .material-thumbnails{gap:1.041667cqw;padding:.325521cqw}
 #materialIndex{font-size:.716146cqw;margin-bottom:1.171875cqw}
 .surface-info{gap:1.5625cqw;font-size:.78125cqw;bottom:calc(100% + .260417cqw)}
 .foil-toggle{gap:.78125cqw;padding-left:1.5625cqw;font-size:.78125cqw;min-height:max(44px,2.864583cqw)}
 .foil-toggle:before{top:.520833cqw;bottom:.520833cqw}
 .foil-icon{width:1.432292cqw;height:1.432292cqw}
 .foil-track{width:2.994792cqw;height:1.5625cqw}
 .foil-track:after{width:1.041667cqw;height:1.041667cqw;left:.195313cqw;top:.195313cqw}
 .foil-toggle[aria-checked=true] .foil-track:after{transform:translateX(1.432292cqw)}
 .console,.console>.toolbar{gap:1.5625cqw}
 .primary-controls{flex-basis:33.528646cqw;gap:1.953125cqw}
 .primary-controls label{font-size:.78125cqw;gap:1.171875cqw}
 details{padding-left:1.5625cqw}summary,.auto-toggle{font-size:.78125cqw}
 .view-switch{width:13.802083cqw;height:max(44px,2.864583cqw);border-radius:999px}
 .view-switch button{font-size:.78125cqw;min-height:max(44px,2.864583cqw);border-radius:999px}
 .auto-toggle{gap:.911458cqw}
 .auto-toggle:after{width:2.473958cqw;height:1.432292cqw;background:radial-gradient(circle at .651042cqw 50%,#f4ead8 0 .455729cqw,transparent .520833cqw)}
 .auto-toggle[aria-pressed=true]:after{background:#f4ead8 radial-gradient(circle at 1.757813cqw 50%,#1c4ecd 0 .455729cqw,transparent .520833cqw)}
 input[type=range]::-webkit-slider-thumb{width:.976563cqw;height:.976563cqw;margin-top:calc(1px - .488281cqw)}
}

nav .create-link{border-bottom:1px solid var(--paper)}@media(max-width:600px){header nav{flex-direction:column;gap:0;align-items:flex-end}header h1{width:125px}header nav a{min-height:44px}}