:root{color-scheme:dark;background:#000;color:#eee;font-family:"Helvetica Neue",Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:#000}
button,select,input,summary{font:inherit}
button,select,summary{touch-action:manipulation}
button,a,select,summary{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button,select{color:#eee;background:#ffffff0b;border:1px solid #ffffff30;border-radius:4px}
button{min-height:36px;padding:6px 10px;font-size:11px;white-space:nowrap}
button:hover{background:#ffffff16}
button[aria-pressed=true]{border-color:#e6e6e6;background:#dedede;color:#111}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:3px}
[hidden]{display:none!important}
.exhibit-page{width:min(calc(100% - 32px),560px);margin:0 auto;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}
.exhibit-heading{position:relative;display:grid;grid-template-columns:74px minmax(0,1fr) 38px;align-items:center;gap:8px;min-height:54px;margin-bottom:8px}
.exhibit-heading h1{font-size:14px;letter-spacing:.05em;font-weight:500;margin:0;text-align:center;padding-right:36px}
.home{color:#bbb;text-decoration:none;font-size:11px;min-height:44px;display:flex;align-items:center}
.home:hover{color:#fff}
.exhibit-music{width:36px;height:36px;min-height:36px;border-radius:50%;padding:0;font-size:16px}
.music-status{position:absolute;z-index:3;right:0;top:44px;padding:8px;background:#111;color:#bbb;font-size:11px}
.scene-frame{position:relative;width:100%;aspect-ratio:4/5;background:#000;border:1px solid #ffffff26;border-radius:4px;overflow:hidden;isolation:isolate}
.scene-frame::after{content:"";position:absolute;inset:7px;pointer-events:none;z-index:2;background:linear-gradient(#ffffff70,#ffffff70) left top/11px 1px,linear-gradient(#ffffff70,#ffffff70) left top/1px 11px,linear-gradient(#ffffff70,#ffffff70) right top/11px 1px,linear-gradient(#ffffff70,#ffffff70) right top/1px 11px,linear-gradient(#ffffff70,#ffffff70) left bottom/11px 1px,linear-gradient(#ffffff70,#ffffff70) left bottom/1px 11px,linear-gradient(#ffffff70,#ffffff70) right bottom/11px 1px,linear-gradient(#ffffff70,#ffffff70) right bottom/1px 11px;background-repeat:no-repeat}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;opacity:0;transition:opacity 1.2s ease;background:#000}
canvas:active{cursor:grabbing}
.ready canvas{opacity:1}
.viewer-controls{position:relative;width:100%;margin-top:10px;padding:10px 12px;background:#0a0a0a;border:1px solid #ffffff1c;border-radius:5px;font-size:11px;opacity:0;transition:opacity .6s ease;pointer-events:none}
.ready .viewer-controls{opacity:1;pointer-events:auto}
.appearance-row{display:flex;gap:8px;align-items:flex-end}
.palette-label{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;color:#aaa;font-size:9px;letter-spacing:.04em}
.palette-label select{width:100%;min-height:36px;padding:5px 6px;font-size:11px;letter-spacing:normal;background:#141414;color:#eee}
.color-modes{display:flex;gap:4px}
.camera-row{display:flex;gap:6px;margin-top:7px}
.camera-row button{flex:1;min-width:0;font-size:11px;padding:6px 4px}
details{margin-top:6px;border-top:1px solid #ffffff20}
summary{cursor:pointer;min-height:28px;padding:8px 0 4px;font-size:10px;color:#bbb;width:fit-content}
.customize-content{padding-top:8px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:20px}
.customize-content label{display:flex;align-items:center;gap:5px;font-size:11px}
.customize-content small{font-size:9px;color:#999}
.customize-content output{margin-left:auto;font-variant-numeric:tabular-nums}
.customize-content input{width:100%;height:28px;accent-color:#ddd;margin:2px 0;cursor:pointer}
.customize-content p{color:#999;font-size:10px;margin:0 0 9px}
.customize-content label[for=colorSpread],#colorSpread,#spreadHelp{grid-column:1}
.customize-content label[for=sparkAmount]{grid-column:2;grid-row:1}
#sparkAmount{grid-column:2;grid-row:2}
.customize-content #reset{grid-column:1/-1;justify-self:start;margin-top:2px;font-size:11px}
#interactionHint{font-size:10px;color:#aaa;line-height:1.4;margin:4px 0 0}
.loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:calc(100% - 36px);font-size:12px;line-height:1.5;letter-spacing:.02em;color:#bbb;text-shadow:0 1px 8px #000}
.no-script{text-align:center;font-size:12px}
.no-script a{color:#fff}
@media(min-width:701px) and (min-height:600px){.exhibit-page{width:min(calc(100% - 32px),560px,calc((100svh - 250px)*.8))}}
@media(max-width:480px){.exhibit-page{width:calc(100% - 24px)}.viewer-controls{padding:9px}.appearance-row{gap:6px}.color-modes button{padding-inline:8px}.camera-row{gap:4px}.camera-row button{font-size:10px}.customize-content{display:block}.customize-content #reset{margin-top:3px}}
@media(prefers-reduced-motion:reduce){canvas,.viewer-controls{transition-duration:.15s}}