:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;background:#000;color:#eeece7}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}main{height:100dvh;position:relative;padding-left:96px;padding-bottom:68px}button,select{font:inherit;color:inherit;cursor:pointer;border:1px solid #343028;border-radius:9px;background:#141310;padding:8px 12px;font-size:12px}button:hover{background:#28251f;border-color:#978568}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #d6bb8d;outline-offset:3px}button:disabled{opacity:.4;cursor:wait}[hidden],.off{display:none!important}.exhibit{position:relative;width:100%;height:100%;background:radial-gradient(ellipse at center,#25241f 0%,#10100e 32%,#000 65%)}model-viewer{position:absolute;inset:0;width:100%;height:100%;--progress-bar-color:#d6bb8d;--min-hotspot-opacity:1;touch-action:none}#load{position:absolute;left:0;right:0;top:45%;text-align:center;font-size:13px;color:#bbb}.gesture{display:none}#views{position:absolute;left:12px;top:12px;bottom:68px;width:70px;display:flex;flex-direction:column;justify-content:center;gap:6px;z-index:5}.view{flex:0 1 80px;min-height:0;width:70px;display:flex;flex-direction:column;align-items:center;padding:4px;font-size:10px;background:#080808;color:#b9b1a2}.view img{display:block;width:58px;height:calc(100% - 16px);min-height:0;object-fit:contain;flex:1}.view span{flex:0 0 14px}.view[aria-pressed=true]{border-color:#cbb38b;background:#17140f;color:#ead9bb}.bottom-controls{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:96px;right:0;display:flex;justify-content:center;align-items:center;gap:10px;z-index:6}.overlay{display:flex;align-items:center;gap:9px;padding:6px;background:#10100fde;border:1px solid #29261f;border-radius:14px;backdrop-filter:blur(10px)}.overlay button,.light summary{height:36px;min-width:36px;padding:0;display:grid;place-items:center;background:transparent;border:1px solid transparent;border-radius:8px;font-size:19px}.overlay button:hover,.light summary:hover{background:#2b2720}.overlay #notes{font-size:11px;display:flex;gap:6px;padding:0 9px;white-space:nowrap}#notes span{color:#c8ad83}#notes[aria-pressed=true]{border-color:#6f6048}.zoom{display:flex;gap:0;border:1px solid #443a2c;border-radius:9px;overflow:hidden}.zoom button{border-radius:0}.zoom button+button{border-left:1px solid #443a2c}#speak[aria-pressed=true]{background:#dbc49f;color:#211a11}.light{position:relative}.light summary{list-style:none;cursor:pointer}.light summary::-webkit-details-marker{display:none}.light>div{position:absolute;right:0;bottom:49px;width:210px;padding:16px;background:#171510;border:1px solid #39342b;border-radius:12px}.light label{display:flex;flex-direction:column;gap:8px;font-size:12px;margin:8px 0}.light input{width:100%;accent-color:#d6bb8d}.label-controls{display:flex;align-items:center;gap:7px;font-size:10px;color:#aaa}.label-controls.single-page{display:none}.label-controls button{padding:4px 8px}.bone-anchor{width:0;height:0;pointer-events:none}.bone-lines,.bone-captions{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.bone-lines{overflow:hidden}.bone-lines polyline{fill:none;stroke:#ed3333;stroke-width:1.5;opacity:.8}.bone-lines circle{fill:#ed3333}.bone-caption{position:absolute;pointer-events:auto;background:#fff;color:#111;border:1px solid #fff;font-size:12px;line-height:1.2;font-weight:600;padding:6px 9px;max-width:172px;box-shadow:0 2px 8px #0005;border-radius:6px}.bone-caption:hover,.bone-caption[aria-pressed=true]{background:#fff;color:#111;border-color:#ed3333;box-shadow:0 0 0 1px #ed3333}.bone-captions{z-index:2}#annotation-info{position:absolute;bottom:82px;left:calc(50% + 48px);transform:translateX(-50%);width:min(440px,80vw);max-height:35dvh;overflow:auto;z-index:8;background:#151410f5;border:1px solid #51442f;border-radius:12px;margin:0;padding:16px;color:#ddd;font-size:13px;line-height:1.5}#annotation-info button{float:right;padding:0 7px;font-size:20px}#annotation-info p{margin:7px 0}#annotation-info a{font-size:11px}a{color:inherit}footer{position:absolute;right:12px;bottom:2px;font-size:9px;color:#777;z-index:9}footer summary{cursor:pointer}footer details[open]{position:absolute;bottom:20px;right:0;width:min(360px,90vw);max-height:45dvh;overflow:auto;background:#171612;border:1px solid #39342b;border-radius:12px;padding:16px}footer p{line-height:1.5}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:700px){main{padding-left:0;padding-bottom:78px}#views{display:none}.bottom-controls{left:0;bottom:max(20px,env(safe-area-inset-bottom));gap:5px}.overlay{gap:5px;padding:5px}.overlay button,.light summary{height:34px;min-width:34px}.overlay #notes{padding:0 7px}.bone-caption{font-size:10px;max-width:104px;padding:5px 6px}#annotation-info{left:50%;bottom:85px}.label-controls{gap:3px;font-size:9px}.label-controls button{padding:3px 6px}}@media(max-height:450px){main{padding-bottom:62px}.bottom-controls{bottom:12px}.bone-caption{font-size:10px;padding:4px 6px}.view{font-size:9px}#views{gap:3px}.label-controls{gap:4px}}
@media(max-width:380px){.bottom-controls .label-controls{position:absolute;bottom:56px;right:10px;background:#141310;border-radius:8px;padding:4px}}

/* Reference: compact, object-adjacent measurement tags in the chair stage. */
.bone-caption{font-size:11px;line-height:1.15;font-weight:500;padding:4px 7px;max-width:156px;border-radius:3px;border:1px solid #ddd;background:#fffffff5;box-shadow:0 1px 3px #0002;letter-spacing:.05px}.bone-lines polyline{stroke:#e45e55;stroke-width:.8;opacity:.72}.bone-lines circle{fill:#e45e55;r:1.7;opacity:.8}.bone-lines .occluded{opacity:.17}.bone-caption:hover,.bone-caption[aria-pressed=true]{border-color:#e45e55;box-shadow:0 0 0 1px #e45e5555}.exhibit{background:transparent}@media(max-width:700px){.bone-caption{font-size:10px;max-width:102px;padding:4px 5px}}

.bone-caption,.bone-caption:hover,.bone-caption[aria-pressed=true]{background:var(--bone-color,#fff);color:#080b12;border-color:var(--bone-color,#fff);box-shadow:0 1px 5px #0004;font-weight:600}.bone-caption[aria-pressed=true]{outline:1px solid #fff;outline-offset:2px}

#teeth[aria-pressed=true]{background:#bffff4;color:#10221f;border-color:#bffff4}@media(max-width:380px){.overlay{gap:3px}.overlay button,.light summary{min-width:30px}.overlay #notes{padding:0 5px}}

.canvas-tools{position:absolute;right:14px;bottom:12px;z-index:7;display:flex;flex-direction:column;gap:12px}.canvas-tools .zoom{flex-direction:column;background:#141310df;backdrop-filter:blur(8px)}.canvas-tools button{width:40px;height:40px;padding:0;font-size:22px}.canvas-tools .zoom button+button{border-left:0;border-top:1px solid #443a2c}.canvas-tools #reset{background:#141310df}#annotation-info{pointer-events:auto}@media(max-width:700px){.canvas-tools{right:8px;bottom:8px}.canvas-tools button{width:34px;height:34px}}

/* Explanation follows the selected surface point, independently of caption layout. */
#annotation-info{position:absolute;left:0;top:0;bottom:auto;transform:none;width:210px;max-width:calc(100% - 24px);max-height:none;overflow:visible;padding:0 0 0 9px;border:0;border-left:2px solid var(--selection-color);border-radius:0;background:transparent;box-shadow:none;font-size:12px;line-height:1.4;color:#eee;text-shadow:0 1px 3px #000;pointer-events:none}
#annotation-info p{margin:0}#annotation-info .annotation-meta{font-size:10px;color:#aaa;margin-bottom:4px}
footer{left:12px;right:12px;bottom:max(7px,env(safe-area-inset-bottom));display:flex;justify-content:center;flex-wrap:wrap;gap:4px 18px;font-size:10px;line-height:1.4;color:#aaa}footer a{text-decoration-color:#555;text-underline-offset:2px}
main{padding-bottom:92px}.bottom-controls{bottom:37px}#views{bottom:92px}
@media(max-width:700px){#annotation-info{width:170px;font-size:11px}main{padding-bottom:106px}.bottom-controls{bottom:48px}footer{font-size:9px;gap:3px 12px}}

#annotation-info{padding:7px 9px;background:#080808df;border-radius:3px;max-height:calc(100% - 16px)}

/* Viewer navigation and a fixed, compact selection description. */
main{padding:34px 66px 96px 12px}
.canvas-tools{right:12px;bottom:12px;gap:10px}
.canvas-tools .overlay{flex-direction:column;padding:0;gap:8px;border:0;background:none;backdrop-filter:none}
.canvas-tools .overlay button{background:#141310df;border:1px solid #343028;width:40px;height:40px}
#views{left:12px;top:auto;bottom:12px;width:auto;height:68px;flex-direction:row;gap:5px;justify-content:flex-start}
.view{flex:none;width:48px;height:68px;font-size:9px}.view img{width:40px}
footer{left:auto;right:12px;top:10px;bottom:auto;justify-content:flex-end;gap:4px 14px;font-size:10px;max-width:calc(100% - 24px)}
#annotation-info{left:50%;top:auto;bottom:12px;transform:translateX(-50%);width:280px;max-width:calc(100% - 110px);max-height:80px;overflow:auto;padding:9px 12px;background:#ffffffe0;color:#171717;text-shadow:none;font-size:13px;border-left:3px solid var(--selection-color);border-radius:6px;pointer-events:auto}
#annotation-info .annotation-meta{font-size:10px;color:#555}
@media(min-width:701px) and (max-width:1050px){#views{display:grid;grid-template-columns:repeat(3,42px);height:92px;gap:4px}.view{width:42px;height:44px}.view img{width:34px}main{padding-bottom:112px}#annotation-info{width:250px}}
@media(max-width:700px){main{padding:48px 50px 100px 4px}#views{display:none}.canvas-tools{right:8px;bottom:12px}.canvas-tools .overlay button,.canvas-tools button{width:34px;height:34px}footer{font-size:9px;gap:3px 10px}#annotation-info{left:12px;transform:none;width:calc(100% - 70px);max-width:none;font-size:12px;bottom:12px}}

.bone-caption.selection-dimmed,.bone-lines .selection-dimmed{opacity:.25}
#annotation-info{background:color-mix(in srgb,var(--selection-color) 16%,transparent);color:#fff;border:1px solid color-mix(in srgb,var(--selection-color) 22%,transparent);border-radius:10px;padding:10px 14px;backdrop-filter:blur(12px);box-shadow:0 4px 18px #0003;line-height:1.45}
#annotation-info .annotation-meta{color:#ffffffb3;letter-spacing:.15px}

#annotation-info{max-height:120px}

/* Unboxed explanation in the space reserved below the skull. */
main{padding-bottom:112px}
#annotation-info{left:calc(50% - 27px);bottom:20px;transform:translateX(-50%);width:clamp(240px,calc(100% - 720px),420px);max-width:none;max-height:none;overflow:visible;background:none;border:0;border-radius:0;padding:0;box-shadow:none;backdrop-filter:none;text-align:center;color:#fff;line-height:1.5}
#annotation-info .annotation-meta{font-size:11px;color:#bbb;margin-bottom:5px}
@media(min-width:701px) and (max-width:1050px){#annotation-info{width:300px}}
@media(max-width:700px){main{padding-bottom:116px}#annotation-info{left:calc(50% - 23px);width:calc(100% - 78px);bottom:20px;font-size:12px}}

#rotation[aria-pressed=true] .play-glyph,#rotation[aria-pressed=false] .pause-glyph{display:none}
#rotation[aria-pressed=true]{color:#ead9bb;border-color:#6f6048}

#language{font:inherit;font-size:10px;padding:2px 5px;max-width:148px;background:#101010;border:1px solid #353535;color:#ccc;border-radius:4px}
footer{align-items:center}html[data-text-direction=rtl] .bone-caption{direction:rtl}#annotation-info{overflow-wrap:anywhere}
@media(max-width:700px){footer{max-width:calc(100% - 24px);line-height:1.35}#language{font-size:9px;max-width:120px}main{padding-top:62px;padding-bottom:138px}#annotation-info{font-size:12px}}

/* Broad, soft backlight behind the model, fading across the full stage. */
main{background:radial-gradient(ellipse 42% 58% at 48% 46%,#766044 0%,#493a33 32%,#302432 55%,#1b1725 76%,transparent 100%),radial-gradient(ellipse 85% 80% at 50% 40%,#211b30 0%,#0b0b12 75%,#08090e 100%)}
@media(max-width:700px){main{background:radial-gradient(ellipse 64% 43% at 46% 44%,#766044 0%,#493a33 32%,#302432 55%,#1b1725 76%,transparent 100%),radial-gradient(ellipse 100% 75% at 50% 40%,#211b30 0%,#0b0b12 75%,#08090e 100%)}}

/* Papel picado and flowers frame the stage; all ornament remains non-interactive. */
.fiesta-frame{position:fixed;inset:18px;pointer-events:none;z-index:10;overflow:hidden;user-select:none}
.papel-garland{position:absolute;inset:0 0 auto;height:78px;background:url('./assets/papel-picado.svg') repeat-x center top;background-size:480px 78px;filter:drop-shadow(0 5px 8px #0006);opacity:.94}
.flower-corner{position:absolute;top:5px;width:100px;height:70px}
.corner-left{left:5px;transform:rotate(-14deg)}.corner-right{right:5px;transform:scaleX(-1) rotate(-14deg)}
.flower-corner img{position:absolute;width:51px;left:0;top:0;filter:drop-shadow(0 2px 2px #5b260b)}
.flower-corner img:nth-child(2){left:33px;top:-4px;width:44px;transform:rotate(23deg)}
.flower-corner img:nth-child(3){left:1px;top:35px;width:38px;transform:rotate(-18deg)}
.ofrenda-corner{position:absolute;left:15px;bottom:12px;width:154px;height:98px;opacity:.88}
.ofrenda-skull{position:absolute;left:50px;bottom:9px;width:43px;transform:rotate(-10deg)}
.ofrenda-bloom{position:absolute;width:48px;bottom:0}.bloom-one{left:4px;bottom:8px;transform:rotate(18deg)}.bloom-two{left:93px;bottom:2px;width:42px}.bloom-three{left:31px;bottom:-10px;width:39px;filter:hue-rotate(310deg)}
main{padding-top:120px;padding-bottom:112px}
#views{position:absolute;left:calc(50% - 27px);top:78px;bottom:auto;transform:translateX(-50%);width:max-content;max-width:calc(100% - 48px);height:auto;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;padding:0;z-index:6}

#views .view{display:block;flex:none;width:auto;min-height:34px;height:auto;padding:6px 9px;font-size:12px;line-height:20px;background:transparent;border:0;border-bottom:1px solid transparent;border-radius:0;color:#cbbecf;transition:color .15s,border-color .15s}
#views .view:hover{color:#fff;border-bottom-color:#da6f9b}
#views .view[aria-pressed=true]{color:#ffcf7f;background:none;border-bottom-color:#ffbc62}
footer{top:80px;right:20px;max-width:max(180px,calc(50% - 300px));gap:3px 10px;font-size:9px}
@media(max-width:1050px){main{padding-top:140px}#views{top:96px}footer{top:73px;right:20px;max-width:calc(100% - 40px);font-size:9px}}
@media(max-width:700px){.papel-garland{height:52px;background-size:340px 55px}.flower-corner{transform:scale(.7);transform-origin:top left}.corner-right{transform:scale(-.7,.7);transform-origin:top right}.ofrenda-corner{display:none}footer{top:56px;right:12px;max-width:calc(100% - 24px);gap:3px 8px}#views{left:50%;top:116px;max-width:calc(100% - 20px);gap:1px;display:flex}#views .view{font-size:10px;padding:5px 5px;min-height:32px}main{padding-top:156px;padding-bottom:138px}}
@media(max-width:360px){#views .view{font-size:9px;padding:5px 4px}}
@media(max-height:500px) and (min-width:701px){.papel-garland{height:42px;background-size:340px 55px}.flower-corner,.ofrenda-corner{display:none}#views{top:48px}footer{top:45px;max-width:220px}main{padding-top:90px;padding-bottom:80px}}

/* Leave breathing room around the festive frame and its controls. */
#language{max-width:174px}main{padding-top:140px}#views{top:98px}footer{top:100px}
@media(max-width:1050px){main{padding-top:160px}#views{top:120px}footer{top:92px}}
@media(max-width:700px){.fiesta-frame{inset:12px}.flower-corner{top:4px}footer{top:66px}#views{top:132px}main{padding-top:172px}#language{max-width:148px}}
@media(max-height:500px) and (min-width:701px){.fiesta-frame{inset:10px}main{padding-top:100px}#views{top:58px}footer{top:55px}}

/* Full-size canvas; navigation, explanation and credits float above it. */
main{padding:0}
.exhibit{position:absolute;inset:0;width:100%;height:100%}
#views{left:50%;top:112px}
#language{position:absolute;right:24px;top:120px;z-index:11;max-width:174px;padding:5px 8px}
footer{left:24px;right:auto;top:auto;bottom:12px;max-width:calc(100% - 100px);justify-content:flex-start;align-items:flex-end;gap:4px 12px;text-shadow:0 1px 4px #000}
#annotation-info{left:50%;bottom:64px;width:min(540px,calc(100% - 180px));transform:translateX(-50%);max-height:35dvh;overflow:auto;z-index:8;text-shadow:0 1px 5px #000,0 1px 12px #000;pointer-events:auto}
.ofrenda-corner{bottom:62px}
@media(max-width:700px){main{padding:0}#language{top:82px;right:18px;max-width:148px}#views{top:122px;left:50%}footer{left:14px;bottom:12px;max-width:calc(100% - 76px);font-size:9px;gap:3px 9px}#annotation-info{left:calc(50% - 22px);bottom:88px;width:calc(100% - 84px);font-size:12px}}
@media(max-height:500px) and (min-width:701px){main{padding:0}#views{top:65px}#language{top:66px}footer{top:auto;bottom:12px;max-width:calc(100% - 100px)}#annotation-info{bottom:46px}}

/* Two readable text sizes, with a protected header beneath the garland. */
:root{--text-main:16px;--text-secondary:14px;--header-start:116px;--stage-start:168px}
.exhibit{top:var(--stage-start);bottom:0;height:calc(100% - var(--stage-start));overflow:hidden}
#language{top:var(--header-start);font-size:var(--text-main);line-height:1.4;max-width:220px;min-height:38px;padding:6px 10px}
#views{top:var(--header-start);gap:4px}
#views .view{font-size:var(--text-main);line-height:1.4;min-height:38px;padding:6px 10px}
.bone-caption{font-size:var(--text-main);line-height:1.25;max-width:220px;padding:5px 8px}
#annotation-info{font-size:var(--text-main);line-height:1.5;width:min(660px,calc(100% - 180px));bottom:86px}
#annotation-info .annotation-meta{font-size:var(--text-secondary);line-height:1.4;color:#ddd}
footer{font-size:var(--text-secondary);line-height:1.4;gap:4px 14px;color:#c4bcc9}
#load{font-size:var(--text-main)}
.ofrenda-corner{bottom:100px}
@media(max-width:1000px){:root{--stage-start:218px}#views{top:calc(var(--header-start) + 48px)}}
@media(max-width:700px){:root{--header-start:84px;--stage-start:220px}#language{font-size:var(--text-main);max-width:210px}#views{top:132px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:calc(100% - 32px);max-width:420px;gap:2px 8px}#views .view{font-size:var(--text-main);padding:5px 6px;min-height:36px}.bone-caption{font-size:var(--text-secondary);max-width:140px;padding:5px 6px}footer{font-size:var(--text-secondary);gap:3px 10px}#annotation-info{font-size:var(--text-main);width:calc(100% - 88px);bottom:116px}#annotation-info .annotation-meta{font-size:var(--text-secondary)}}
@media(max-height:500px) and (min-width:701px){:root{--header-start:72px;--stage-start:168px}#views{top:120px}#language{top:72px}#annotation-info{bottom:64px}}
/* Shared 40px content inset; the top gap starts below the bunting. */
:root{--content-inset:40px;--header-start:136px;--stage-start:188px}
.fiesta-frame{left:40px;right:40px;bottom:40px}
.exhibit{left:var(--content-inset);right:var(--content-inset);bottom:var(--content-inset);width:auto;height:calc(100% - var(--stage-start) - var(--content-inset))}
#language{right:40px}.canvas-tools{right:40px;bottom:40px}
footer{left:40px;bottom:40px;max-width:calc(100% - 140px)}
#annotation-info{bottom:110px}
@media(max-width:1000px){:root{--stage-start:238px}}
@media(max-width:700px){:root{--header-start:104px;--stage-start:240px}.fiesta-frame{left:40px;right:40px;bottom:40px}#language{right:40px}#views{top:152px;width:calc(100% - 80px)}.canvas-tools{right:40px;bottom:40px}footer{left:40px;bottom:40px;max-width:calc(100% - 130px)}.bone-caption{max-width:120px}#annotation-info{bottom:160px;width:calc(100% - 130px)}}
@media(max-height:500px) and (min-width:701px){:root{--header-start:92px;--stage-start:188px}#views{top:140px}#language{top:92px}footer{bottom:40px}#annotation-info{bottom:94px}}

/* Edge-to-edge bunting, with flowers in the empty side margins. */
:root{--garland-top:18px;--garland-height:78px;--stage-start:calc(var(--garland-top) + var(--garland-height) + 40px)}
.fiesta-frame{inset:var(--garland-top) 0 0}
.papel-garland{height:var(--garland-height)}
.flower-corner{display:block;top:calc(var(--garland-height) + 58px);width:32px;height:112px;transform:none}
.corner-left{left:4px}.corner-right{right:4px}
.flower-corner img{width:30px;left:0;top:0}
.flower-corner img:nth-child(2){width:25px;left:3px;top:35px;transform:rotate(23deg)}
.flower-corner img:nth-child(3){width:28px;left:1px;top:68px;transform:rotate(-18deg)}
.corner-right{top:calc(var(--garland-height) + 190px)}
.ofrenda-corner{display:block;left:4px;bottom:170px;width:32px;height:132px;opacity:.88}
.ofrenda-skull{left:4px;bottom:44px;width:25px}
.ofrenda-bloom{width:30px;left:0;bottom:90px}
.bloom-two{left:3px;bottom:6px;width:27px}.bloom-three{left:2px;bottom:112px;width:24px}
#views{top:auto;left:auto;right:104px;bottom:40px;transform:none;width:max-content;max-width:calc(100% - 144px);display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px}
#views .view,#views .view:hover,#views .view[aria-pressed=true]{border:0;background:none}
#views .view[aria-pressed=true]{color:#ffcf7f}
footer{max-width:calc(100% - 660px)}
@media(max-width:1000px){footer{bottom:92px;max-width:calc(100% - 144px)}}
@media(max-width:700px){
 :root{--garland-top:12px;--garland-height:52px}
 #views{right:86px;bottom:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:calc(100% - 126px);max-width:420px;gap:0}
 #views .view{padding:5px 2px;min-height:34px}
 footer{bottom:126px;max-width:calc(100% - 130px)}
 .ofrenda-corner{bottom:190px}
 #annotation-info{bottom:220px}
}
@media(max-height:500px) and (min-width:701px){:root{--garland-top:10px;--garland-height:42px}.ofrenda-corner{bottom:44px}.corner-right{top:calc(var(--garland-height) + 58px)}}

/* Decorative spacing belongs to the initial camera, never to the drawing surface. */
.exhibit{inset:0;width:100%;height:100%;background:transparent;overflow:visible}
model-viewer{inset:0;width:100%;height:100%;background:transparent}

/* Quiet controls, richer decoration. Everything remains an overlay. */
.papel-garland{background-image:url('./assets/papel-picado.svg?v=playful');background-repeat:repeat-x;left:-5px;right:-5px;animation:garland-drift 8s ease-in-out infinite alternate}
@keyframes garland-drift{from{transform:translateX(-3px)}to{transform:translateX(3px)}}
.flower-corner img:nth-child(2),.bloom-two{filter:hue-rotate(300deg) saturate(1.4)}
.flower-corner img:nth-child(3){filter:hue-rotate(325deg)}
.fiesta-extra{position:absolute;width:28px;pointer-events:none;filter:drop-shadow(0 2px 3px #0005)}
.extra-1{left:3px;top:39%;filter:hue-rotate(305deg)}
.extra-2{left:8px;top:43%;width:22px;filter:hue-rotate(330deg)}
.extra-3{left:6px;top:29%;width:26px;transform:rotate(12deg)}
.extra-4{right:4px;top:55%;filter:hue-rotate(300deg)}
.extra-5{right:8px;top:59%;width:23px;filter:hue-rotate(325deg)}
.extra-6{right:5px;top:47%;width:28px;transform:rotate(-12deg)}
.extra-7{right:4px;bottom:44px;filter:hue-rotate(300deg)}
.extra-8{left:4px;bottom:44px;filter:hue-rotate(305deg)}
.extra-9{right:6px;bottom:82px;width:26px;transform:rotate(8deg)}
.language-compact{position:absolute;left:40px;bottom:40px;width:44px;height:40px;z-index:12;border:1px solid #ffffff26;border-radius:12px;background:#17131bcc;display:grid;place-items:center}
#language-flag{font-size:24px;line-height:1}
.language-compact #language{position:absolute;inset:0;width:100%;height:100%;max-width:none;min-height:0;opacity:0;cursor:pointer}
.language-compact:focus-within{outline:2px solid #ffcf7f;outline-offset:3px}
footer{left:40px;bottom:92px;max-width:min(380px,calc(100% - 140px));font-size:11px;line-height:1.5;gap:1px 9px;color:#aea5b6}
#views .view{color:#c1b5c9}#views .view:hover{color:white}#views .view[aria-pressed=true]{color:#ffcf7f}
@media(max-width:700px){
 #views{right:86px;bottom:40px;width:calc(100% - 180px);max-width:none;gap:0 4px}
 #views .view{font-size:14px;min-height:34px;padding:4px 0}
 footer{bottom:122px;font-size:11px;max-width:calc(100% - 130px)}
 #annotation-info{bottom:200px}
}
@media(max-height:500px) and (min-width:701px){footer{bottom:86px;max-width:calc(100% - 150px)}.extra-1,.extra-2,.extra-4,.extra-5{display:none}}
@media(prefers-reduced-motion:reduce){.papel-garland{animation:none}}

/* Credits sit above the paper flags; the bottom ornaments stay below controls. */
:root{--garland-top:40px}
footer{top:7px;bottom:auto;left:20px;right:20px;max-width:none;justify-content:flex-end;align-items:center;font-size:11px;line-height:1.4;gap:2px 10px}
.papel-garland{background-image:url('./assets/papel-picado.svg?v=fiesta-bottom');animation:garland-drift 3.6s ease-in-out infinite alternate;left:-12px;right:-12px}
@keyframes garland-drift{from{transform:translateX(-8px)}to{transform:translateX(8px)}}
.fiesta-bottom{position:absolute;left:8px;right:8px;bottom:3px;height:28px;display:flex;justify-content:space-around;align-items:center;gap:8px}
.fiesta-bottom img{width:27px;height:27px;object-fit:contain;transform:rotate(var(--tilt));filter:drop-shadow(0 1px 2px #0005)}
.fiesta-bottom img:nth-child(3n){filter:hue-rotate(310deg)}
.fiesta-bottom img:nth-child(3n+1){filter:hue-rotate(335deg)}
@media(max-width:700px){:root{--garland-top:62px}footer{left:12px;right:12px;top:7px;justify-content:center;max-width:none}.fiesta-bottom{gap:4px}.fiesta-bottom img{width:22px;height:24px}.fiesta-bottom img:nth-child(4n){display:none}}
@media(max-height:500px) and (min-width:701px){:root{--garland-top:38px}footer{top:6px;bottom:auto;max-width:none}}
@media(prefers-reduced-motion:reduce){.papel-garland{animation:none}}

/* A continuous cord and individually suspended paper flags, with room to swing. */
.fiesta-frame{overflow:visible}
.papel-garland{position:absolute;left:0;right:auto;top:0;width:100%;height:110px;overflow:visible;background:none;animation:none;filter:drop-shadow(0 3px 4px #0003);opacity:1}
.hanging-paper{transform-origin:0 0;animation:paper-swing var(--duration) ease-in-out var(--delay) infinite alternate}
@keyframes paper-swing{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
.scattered-ornaments{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.scattered-ornaments img{position:absolute;height:auto;max-height:30px;object-fit:contain}
@media(max-width:700px){.papel-garland{height:86px}}
@media(prefers-reduced-motion:reduce){.hanging-paper{animation:none}}


.bone-caption,.bone-caption:hover,.bone-caption[aria-pressed=true]{font-family:inherit;font-weight:600}
.bone-caption{line-height:1.3;letter-spacing:0;overflow-wrap:anywhere;hyphens:auto}
.fiesta-frame{opacity:.5}

.bone-captions,.bone-lines{opacity:0;transition:opacity .45s ease;pointer-events:none}
.labels-ready .bone-captions,.labels-ready .bone-lines{opacity:1}
.exhibit:not(.labels-ready) .bone-caption{pointer-events:none}
#views{left:50%;right:auto;bottom:40px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 190px);display:flex;flex-wrap:nowrap;gap:6px}
#views .view{width:62px;height:64px;min-height:0;padding:3px;border-radius:9px;border:1px solid transparent;background:#ffffff06}
#views .view img{display:block;width:100%;height:100%;object-fit:contain}
#views .view:hover{background:#ffffff12}
#views .view[aria-pressed=true]{background:#ffffff18;border:1px solid #ffffff70}
@media(max-width:700px){#views{bottom:42px;gap:2px;max-width:calc(100% - 170px)}#views .view{width:calc((100vw - 180px)/6);height:42px;padding:0;flex-shrink:0}}
@media(prefers-reduced-motion:reduce){.bone-captions,.bone-lines{transition:none}}

#views{gap:2px}
#views .view{display:flex;flex-direction:column;align-items:center;width:60px;height:76px;padding:2px;font-size:12px;line-height:16px}
#views .view img{width:52px;height:52px;flex:none;filter:contrast(1.2)}
#views .view span{display:block;flex:none;white-space:nowrap}
@media(max-width:700px){#views{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;bottom:40px;width:198px;max-width:calc(100% - 172px)}#views .view{width:100%;height:61px;font-size:11px;line-height:15px;padding:0}#views .view img{width:42px;height:42px}}

/* Consistent, quiet overlay controls. Keyboard focus remains visible. */
#views .view,#views .view:hover,#views .view[aria-pressed=true]{color:#fff;font-weight:600;border:0;box-shadow:none}
#views .view:hover,#views .view[aria-pressed=true]{background:#ffffff18}
.canvas-tools button,.canvas-tools .overlay button,.canvas-tools #reset,.canvas-tools .zoom button{border:0;border-radius:0;background:#ffffff08;color:#fff;box-shadow:none}
.canvas-tools .zoom{border:0;border-radius:0;background:none;gap:2px;backdrop-filter:none}
.canvas-tools .zoom button+button{border:0}
.canvas-tools button:hover,.canvas-tools .overlay button:hover,.canvas-tools #reset:hover,.canvas-tools button[aria-pressed=true]{background:#ffffff18;color:#fff;border:0}
.canvas-tools #teeth[aria-pressed=true],.canvas-tools #speak[aria-pressed=true],.canvas-tools #labels-toggle[aria-pressed=true]{background:#ffffff18;color:#fff;border:0}
.canvas-tools button,.canvas-tools .overlay button{width:40px;height:40px}
@media(max-width:700px){.canvas-tools button,.canvas-tools .overlay button{width:36px;height:36px}}

/* Keep the view strip on one row; scale annotations for the available viewport. */
#views{display:flex;flex-wrap:nowrap;width:max-content;max-width:calc(100% - 180px);gap:2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
#views .view{flex:0 0 52px;width:52px;height:60px;font-size:11px;line-height:14px;padding:1px}
#views .view img{width:42px;height:42px}
@media(max-width:1100px){.bone-caption{font-size:12px;line-height:1.25;padding:4px 6px;max-width:160px}}
@media(max-width:700px){
 .bone-caption{font-size:11px;max-width:116px;padding:4px 5px}
 #views{display:flex;width:max-content;max-width:calc(100% - 170px);bottom:40px;gap:1px}
 #views .view{flex:0 0 40px;width:40px;height:51px;font-size:10px;line-height:13px;padding:0}
 #views .view img{width:34px;height:34px}
}
#views{justify-content:flex-start}

/* Full-screen language selection; flat local flags, no native select overlay. */
.language-compact{width:60px;height:46px;border:0;border-radius:0;background:none}
.language-compact #language{position:static;opacity:1;width:100%;height:100%;padding:5px;display:grid;place-items:center;border:0;border-radius:0;background:#ffffff0c;cursor:pointer}
.language-compact #language:hover{background:#ffffff20}
#language-flag{display:block;width:48px;height:36px;object-fit:contain}
#language-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;color:#fff;background:radial-gradient(ellipse at 50% 40%,#282035 0%,#100e18 75%);box-sizing:border-box}
#language-dialog::backdrop{background:#100e18}
.language-screen{height:100%;max-width:1300px;margin:auto;padding:clamp(16px,3vw,40px);box-sizing:border-box;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:16px}
.language-screen header{display:flex;align-items:center;justify-content:space-between}
#language-heading{font:600 clamp(22px,3vw,32px)/1.2 system-ui;margin:0}
#language-close{color:#fff;background:#ffffff0b;border:0;border-radius:0;font:32px/1 system-ui;width:44px;height:44px;cursor:pointer}
#language-grid{min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:clamp(8px,1.5vw,20px)}
.language-card{min-height:0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px;color:#fff;background:#ffffff05;border:1px solid #ffffff10;border-radius:12px;font:500 clamp(16px,2vw,23px)/1.3 system-ui;cursor:pointer}
.language-card img{display:block;object-fit:contain;width:auto;height:calc(100% - 42px);max-height:110px;max-width:70%;filter:drop-shadow(0 4px 10px #0004)}
.language-card:hover,.language-card[aria-pressed=true]{background:#ffffff12;border-color:#ffffff50}
.language-card:focus-visible,#language-close:focus-visible,#language-auto:focus-visible{outline:2px solid #e2bdf4;outline-offset:2px}
#language-auto{justify-self:center;background:none;color:#c4bdcc;border:0;font:400 15px/1.4 system-ui;padding:8px;cursor:pointer}
@media(max-width:600px){.language-screen{gap:10px;padding:16px}.language-card{padding:8px;gap:6px;font-size:16px}#language-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:8px}.language-card{flex-direction:row;justify-content:flex-start}.language-card img{width:44px;height:33px;max-width:34%;flex-shrink:0}.language-card span{overflow-wrap:anywhere}}
@media(max-height:500px) and (min-width:601px){.language-screen{padding:12px;gap:8px}#language-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}.language-card{font-size:15px;padding:6px;gap:6px}.language-card img{max-height:60px}.language-screen header{height:36px}}

/* Brief, staggered entrances; independent of the skull's growing animation. */
@keyframes overlay-arrive{from{opacity:0;scale:.94}to{opacity:1;scale:1}}
@keyframes decoration-arrive{from{opacity:0}to{opacity:.5}}
footer,.language-compact,.canvas-tools button,#views .view{
 animation:overlay-arrive .42s cubic-bezier(.2,.7,.25,1) var(--appear-delay,0s) backwards;
}
footer{--appear-delay:0s}
.fiesta-frame{animation:decoration-arrive .65s ease-out .08s backwards}
.canvas-tools #rotation{--appear-delay:.08s}
.canvas-tools #teeth{--appear-delay:.14s}
.canvas-tools #speak{--appear-delay:.20s}
.canvas-tools #labels-toggle{--appear-delay:.26s}
.canvas-tools #zoom-in{--appear-delay:.32s}
.canvas-tools #zoom-out{--appear-delay:.38s}
.canvas-tools #reset{--appear-delay:.44s}
.language-compact{--appear-delay:.24s}
#views .view:nth-child(1){--appear-delay:.12s}
#views .view:nth-child(2){--appear-delay:.18s}
#views .view:nth-child(3){--appear-delay:.24s}
#views .view:nth-child(4){--appear-delay:.30s}
#views .view:nth-child(5){--appear-delay:.36s}
#views .view:nth-child(6){--appear-delay:.42s}
@media(prefers-reduced-motion:reduce){footer,.language-compact,.canvas-tools button,#views .view,.fiesta-frame{animation:none}}