@font-face{font-family:Oxanium;src:url('assets/fonts/oxanium-variable.ttf') format('truetype');font-style:normal;font-weight:200 800;font-display:swap}
:root{--display:Oxanium,Arial,sans-serif}
.icon{display:inline-block;flex-shrink:0;width:18px;height:18px;vertical-align:middle;pointer-events:none}
[data-icon]{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
header nav button{display:inline-flex;align-items:center;gap:8px}
header nav button span,.intro button span{margin-left:0;color:inherit}
header nav button:last-child{border:0;justify-content:center;font-family:inherit}
header nav .icon,.intro .icon,#listen-link .icon,#music-external .icon{width:13px;height:13px}
.intro{width:clamp(210px,22vw,330px)}
.intro h1{font-family:var(--display);font-size:clamp(30px,3vw,46px);font-weight:400;letter-spacing:0;line-height:1.15}
.intro h1 em{font-style:normal;font-weight:300;color:#a9bed5;font-size:.94em}
.intro button{display:inline-flex;align-items:center;gap:20px}
.edition{letter-spacing:3px}
.artifact-label{width:100%;gap:8px;line-height:1.3;top:calc(100% + 16px)}
.artifact-label strong{font-family:var(--display);font-weight:400;letter-spacing:.15px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.artifact-label i,.artifact .discover,.artifact .object-badge{display:none!important}
.artifact-face{transition:filter .22s,box-shadow .22s}
.artifact:hover{filter:drop-shadow(0 14px 24px #0008)}
@media(hover:hover) and (pointer:fine){
  .artifact:hover .artifact-face{filter:brightness(1.17);box-shadow:0 0 38px color-mix(in srgb,var(--color) 32%,transparent)}
}
.artifact:focus-visible .artifact-face,.artifact:active .artifact-face{filter:brightness(1.13)}
.selection strong,.set-index button{font-family:var(--display)}
.explorer-tools button,.object-tools button,.close-dialog,#close-music{display:inline-flex;align-items:center;justify-content:center}
.explorer-tools .icon,.object-tools .icon{width:18px;height:18px}
.close-dialog .icon{width:20px;height:20px}
#close-music .icon{width:15px;height:15px}
#loading{font-family:var(--display);font-size:20px}
dialog h2{font-family:var(--display);letter-spacing:0;font-weight:400;line-height:1.2}
#detail{width:min(1180px,calc(100% - 48px));max-height:calc(100dvh - 48px)}
#detail[open]{display:grid;grid-template-columns:61.8% 38.2%}
.detail-art{min-height:0;justify-content:center}
.detail-art>img{width:100%;height:auto;max-height:calc(100dvh - 48px);aspect-ratio:1;object-fit:contain}
#detail-object{width:min(100%,calc(100dvh - 48px));max-height:none;aspect-ratio:1;margin:auto}
.detail-info{padding:44px 28px 28px;min-width:0}
.detail-info h2{font-size:clamp(25px,2.7vw,38px);letter-spacing:.01em;overflow-wrap:anywhere;margin:14px 0 16px}
.detail-subtitle{font-size:11px}
#listen-here{display:flex;align-items:center;justify-content:center;gap:12px;min-height:58px;font-family:var(--display);font-size:14px;letter-spacing:.4px;color:#e3edf7;background:#aec9e413;border-color:#b7cfe65c}
#listen-here:hover{background:#aec9e425}
#listen-here .icon{width:25px;height:25px}
#listen-link,#music-external{display:inline-flex;align-items:center;gap:6px}
#listen-link{font-size:10px;color:#8fa6c1}
.music-active footer{grid-template-columns:minmax(0,min(52vw,640px)) 1fr;background:#08101eea;gap:30px}
.music-active .set-index{justify-self:end}
#music-dock{max-width:640px}
#music-slot{background:#0b1424;border:1px solid #a7c9ec20;border-radius:4px;overflow:visible}
#music-slot iframe{border-radius:3px}
#music-status{font-size:9px;line-height:1.5;color:#8299b4}
.music-heading{gap:14px}
#playing-artwork{font-family:var(--display);font-size:11px}
#music-external{font-size:9px}
.set-index nav{justify-content:center}
.set-index button{min-height:32px}
.design-credit{font-size:8px}
@media(orientation:portrait){
  header{height:94px;padding:0 36px}
  .edition,.coordinate{display:none}
  .intro{top:118px;left:36px;width:calc(100% - 72px)}
  .intro .eyebrow{margin:0;font-size:7px}
  .intro h1{font-size:clamp(30px,4.5vw,42px);margin:13px 0 12px;line-height:1.12}
  .intro>p:not(.eyebrow){font-size:11px;line-height:1.65}
  .intro button{margin-top:10px;padding:8px 0;font-size:10px}
  footer,.music-active footer{display:grid;grid-template-columns:1fr;gap:12px;padding:12px 28px calc(22px + env(safe-area-inset-bottom,0px));min-height:0}
  .music-active #music-dock{grid-row:2;max-width:none}
  .music-active .set-index{grid-row:1;justify-self:stretch}
  .set-index{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px}
  .index-label{display:block;font-size:7px;letter-spacing:2px}
  .set-index nav{margin:0;gap:7px;justify-content:center;width:100%}
  .set-index button,.music-active .set-index button{width:clamp(26px,calc((100vw - 96px)/10),42px);height:34px;font-size:10px;padding:0}
  .selection{min-width:0}
  .hint{display:none}
  .explorer-tools{right:28px;bottom:calc(var(--footer-height,140px) + 16px)}
  .design-credit{right:28px;bottom:calc(1px + env(safe-area-inset-bottom,0px))}
  #detail[open]{display:block}
  #detail{width:calc(100% - 40px);max-height:calc(100dvh - 32px)}
  .detail-art>img{max-height:55dvh;width:100%;aspect-ratio:1}
  #detail-object{width:min(100%,55dvh);max-height:none}
  .detail-info{padding:30px}
  .detail-info h2{font-size:32px}
}
@media(max-width:599px) and (orientation:portrait){
  header{height:78px;padding:0 16px;gap:10px}
  .brand{width:132px;flex-shrink:0}.brand .brand-wordmark{width:132px}
  header nav{gap:10px}header nav button{font-size:8px;gap:6px}#objects-toggle{padding:7px 6px}
  .intro{left:24px;top:100px;width:calc(100% - 48px)}
  .intro .eyebrow{font-size:6px}.intro h1{font-size:28px;margin:11px 0 9px}
  .intro>p:not(.eyebrow){font-size:9px}.intro button{font-size:9px;margin-top:5px;padding:6px 0}
  footer,.music-active footer{padding-left:20px;padding-right:20px;gap:10px}
  .set-index nav{gap:4px}.set-index button,.music-active .set-index button{font-size:8px;width:calc((100vw - 80px)/10)}
  .explorer-tools{right:20px}.design-credit{right:20px;font-size:7px}
  #music-status{font-size:8px}.music-heading{gap:8px}#playing-artwork{font-size:10px}
  #detail{width:calc(100% - 24px);max-height:calc(100dvh - 24px)}
  .detail-info{padding:24px}.detail-info h2{font-size:28px}
}
@media(orientation:landscape) and (max-width:1050px){
  .music-active footer{grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);gap:20px;padding-left:24px;padding-right:24px}
  .music-active .set-index nav{gap:4px}.music-active .set-index button{width:26px;font-size:8px}
  .detail-info{padding:36px 22px 24px}.detail-info h2{font-size:27px}
}
@media(orientation:landscape) and (max-height:560px){
  header{height:66px}.brand{height:54px}.brand-wordmark{width:160px}.brand .brand-caption{font-size:5px}
  .intro{top:96px}.intro h1{font-size:25px}.intro>p:not(.eyebrow){display:none}
  .intro button{margin-top:8px}.coordinate{display:none}
  .explorer-tools{bottom:calc(var(--footer-height,140px) + 8px)}
}
@media(prefers-reduced-motion:reduce){.artifact-face{transition:none}}