@font-face{font-family:"Cinzel";src:url("../assets/fonts/cinzel/Cinzel.ttf") format("truetype");font-style:normal;font-weight:400 900;font-display:swap}
h1,h2,h3,h4,h5,h6{font-family:"Cinzel",Georgia,serif;letter-spacing:.06em}

*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#17111d;color:white;font-family:Georgia,serif}
#hud{position:absolute;top:16px;left:16px;z-index:3;background:#1b1026d9;padding:15px 18px;border:1px solid #dd9fbe;border-radius:12px;max-width:350px}
#hud h1{font-size:19px;margin:0 0 6px;color:#ffc7e5}#hud p{font:13px/1.5 system-ui;margin:0;color:#f8e6f0}
#prompt{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);background:#2a152ddd;border:1px solid #ffb5d5;border-radius:30px;padding:12px 20px;font:15px system-ui;display:none;z-index:4;text-align:center}
#start{position:absolute;inset:0;background:#120d1bcc;z-index:8;display:grid;place-items:center;text-align:center;padding:20px}
#start .panel{max-width:480px;background:#2b1937;border:1px solid #d59cbf;border-radius:20px;padding:28px;box-shadow:0 15px 70px #0008}
h2{color:#ffd2e9}button{border:0;background:#e12885;color:white;padding:13px 20px;border-radius:9px;cursor:pointer;font-weight:700;font-size:15px}
button:hover{background:#fa4a9f}
#modal{position:absolute;inset:0;z-index:7;background:#0e0919bb;display:none;align-items:center;justify-content:center;padding:18px}
#modal .panel{background:#fff8fc;color:#3c2340;border:3px solid #d99bbb;border-radius:17px;max-width:540px;width:100%;padding:27px;box-shadow:0 20px 80px #0009}
#modal h2{color:#9c2463;margin:8px 0}#modal p{font:16px/1.6 system-ui}#modal small{color:#865e78}
#mobile{position:absolute;bottom:15px;left:15px;z-index:4;display:none;gap:8px;align-items:end}
#mobile button{min-width:53px;min-height:53px;opacity:.8;touch-action:none}
#mobile .pad{display:grid;grid-template-columns:repeat(3,53px);gap:4px}
#mobile .pad button:first-child{grid-column:2}
#mobile .pad button:nth-child(2){grid-column:1;grid-row:2}
#mobile .pad button:nth-child(3){grid-column:2;grid-row:2}
#mobile .pad button:nth-child(4){grid-column:3;grid-row:2}
#mobile .look{display:flex;gap:5px}
#status{position:absolute;bottom:15px;right:15px;z-index:4;background:#1b1026a8;padding:8px 12px;border-radius:9px;font:12px system-ui}
@media(pointer:coarse){#mobile{display:flex}#status{bottom:135px}}

body{font-family:"Cormorant Garamond",Georgia,serif}canvas{display:block;touch-action:none}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible{outline:3px solid #d5af67;outline-offset:4px}#loading{position:fixed;top:0;right:15px;z-index:10;background:#2b1937;padding:12px}#error{position:fixed;inset:15%;z-index:20;background:#fff8fc;color:#3c2340;padding:28px;border:2px solid #d3ae69;overflow:auto}#error[hidden],#loading[hidden]{display:none}#sound{position:fixed;right:15px;top:15px;z-index:5;background:#1b1026dd;padding:10px;border:1px solid #dd9fbe;border-radius:10px}#sound input{width:85px}#sound button{padding:8px}#modal .panel{max-height:85dvh;overflow:auto}@media(max-width:650px){#hud{max-width:calc(100% - 30px);top:8px;font-size:12px}#hud p{font-size:11px}#sound{top:auto;bottom:52px}#mobile .look{flex-wrap:wrap;max-width:120px}#mobile .look button{min-width:45px;padding:8px}#status{font-size:10px;max-width:50%}}

#sound{font-size:12px}#sound small{display:block;margin-top:6px;color:#efcee0}#sound input{vertical-align:middle}#sound span{display:block}@media(max-width:650px){#sound{max-width:230px;font-size:11px}}
@media(max-width:650px){#sound{top:145px;bottom:auto;right:15px}#prompt{bottom:165px;max-width:90%;width:max-content}#status{bottom:15px}}@media(pointer:coarse){#sound{top:165px;bottom:auto}#status{bottom:140px}#prompt{bottom:185px}}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}#sound #musicIcon{display:inline;font-size:22px}#sound #musicToggle{min-width:44px;min-height:44px}#sound{display:flex;align-items:center;gap:8px}button:disabled{cursor:default}

#mobileDoors[hidden]{display:none}

.touchHelp{display:none}@media(pointer:coarse){.desktopHelp{display:none}.touchHelp{display:inline}}

#modal .returnHint{font-size:13px;color:#865e78;margin-bottom:0}

#modal.information-modal .panel{max-width:760px;background:#fffaf0;border:2px solid #c1a169;border-radius:4px;padding:32px}#modal.information-modal #description{font:20px/1.6 "Cormorant Garamond",Georgia,serif;white-space:pre-line;color:#503b33}#modal.information-modal h2{color:#684b32}@media(max-width:650px){#modal.information-modal .panel{padding:22px}#modal.information-modal #description{font-size:18px}}

#start .start-copyright{font-size:11px;line-height:1.4;margin:14px 0 0}

#start #enter{font-family:"Cinzel",serif}

/* Royal music control: native range behavior with a generous touch target. */








#sound{background:linear-gradient(135deg,#fff,#fff9f2);border:1px solid #d5af67;border-radius:16px;box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 4px #ead8b7,0 4px 18px #38223d33;padding:9px 12px;color:#6c4359}
#sound #musicToggle{background:linear-gradient(145deg,#fff,#fff0f7);border:1px solid #e4cba2;border-radius:12px;padding:6px;box-shadow:0 2px 5px #9b64701a}
#sound #musicToggle:hover:not(:disabled){background:#ffe7f3;border-color:#e12885}
#sound #musicIcon{display:block;width:32px;height:32px;object-fit:contain}
#sound #musicToggle:disabled{opacity:.75}
#sound small{color:#6c4359}







#sound{padding:6px 9px;gap:6px;border-radius:12px}
#sound #musicToggle{min-width:34px;min-height:34px;padding:5px;border-radius:9px}
#sound #musicIcon{width:24px;height:24px}

@media(pointer:coarse){#sound #musicToggle{min-width:44px;min-height:44px}}

#clockPreview{width:100%;height:auto;max-height:60dvh;object-fit:contain}
#clockPreview[hidden]{display:none}
#modal.clock-modal .panel{max-width:650px}


/* Ornate approach prompt, sized for both exhibit names and door guidance. */
#prompt{min-width:340px;max-width:min(560px,90vw);padding:15px 34px;background:linear-gradient(135deg,#fffefd,#fff1f8);color:#8b2359;border:1px solid #d5af67;border-radius:32px;box-shadow:inset 0 0 0 3px #fffaf5,inset 0 0 0 4px #ead8b7,0 5px 22px #38223d33;font:600 14px/1.6 "Cinzel",Georgia,serif;letter-spacing:.035em}
#prompt::before,#prompt::after{content:"◆";position:absolute;top:50%;transform:translateY(-50%);color:#e12885;font-size:12px;text-shadow:0 1px 2px #d5af6755}
#prompt::before{left:15px}#prompt::after{right:15px}
@media(max-width:650px){#prompt{min-width:min(340px,90vw);padding:12px 30px;font-size:12px}}

#conversationPanel[hidden]{display:none}
#modal.conversation-modal>.panel:not(#conversationPanel){display:none}
#modal #conversationPanel{max-width:740px;background:linear-gradient(135deg,#fffdf8,#fff1f8);border:2px solid #d5af67}
#conversationPanel h2{font-family:"Cinzel",serif}
#conversationPanel .conversation-help{font:14px/1.6 "Cormorant Garamond",serif;color:#76566a}
.conversation-questions{display:grid;gap:7px}
.conversation-questions button{text-align:left;background:#fff;color:#733153;border:1px solid #e3c8d5;font:16px/1.4 "Cormorant Garamond",serif;padding:10px 14px}
.conversation-questions button[aria-pressed="true"]{background:#fce4f0;border-color:#e12885;box-shadow:inset 3px 0 #e12885}
#conversationPanel .conversation-captions{min-height:3em;font:18px/1.6 "Cormorant Garamond",serif;border-top:1px solid #dfc5a2;padding-top:14px;white-space:pre-line}

#conversationPanel .conversation-captions{font-family:"Righteous","Cormorant Garamond",serif}

#conversationPanel .conversation-captions{font-family:"Righteous","Cormorant Garamond",serif;color:#fff;-webkit-text-stroke:1px #e12885;paint-order:stroke fill;text-shadow:1px 0 #e12885,-1px 0 #e12885,0 1px #e12885,0 -1px #e12885}

#conversationPanel .conversation-stop{display:none}
@media(pointer:coarse){#conversationPanel .conversation-stop{display:inline-block}}
#modal.conversation-answering{background:transparent;pointer-events:none}
#modal.conversation-answering #conversationPanel{background:transparent;border:0;box-shadow:none;max-height:none;overflow:visible}
#modal.conversation-answering #conversationPanel>h2,#modal.conversation-answering .conversation-help,#modal.conversation-answering .conversation-questions{display:none}
#modal.conversation-answering .conversation-captions{position:fixed;left:50%;bottom:7vh;transform:translateX(-50%);width:min(850px,90vw);max-height:48vh;overflow:auto;text-align:center;border:0;padding:12px 18px;font-size:22px;text-shadow:1px 0 #e12885,-1px 0 #e12885,0 1px #e12885,0 -1px #e12885,0 2px 6px #0006;pointer-events:auto}
#modal.conversation-answering .conversation-stop{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);pointer-events:auto}

/* Speaker-specific captions stay outside the question panel. */
#modal>.conversation-captions{display:none}
#modal.conversation-modal>.conversation-captions,.conversation-farewell:not([hidden]){display:block;position:fixed;z-index:9;left:50%;bottom:5vh;transform:translateX(-50%);width:min(880px,90vw);margin:0;text-align:center;font:24px/1.5 "Righteous","Cormorant Garamond",serif;color:#e12885;-webkit-text-stroke:1px white;paint-order:stroke fill;text-shadow:1px 0 white,-1px 0 white,0 1px white,0 -1px white,0 2px 6px #0006;pointer-events:none}
#modal>.conversation-captions:empty{display:none}
#modal.conversation-modal>.conversation-captions.question-caption{color:white;-webkit-text-stroke:1px #e12885;text-shadow:1px 0 #e12885,-1px 0 #e12885,0 1px #e12885,0 -1px #e12885,0 2px 6px #0006}
@media(pointer:coarse){#modal.conversation-modal>.conversation-captions{bottom:80px;font-size:20px}}

#sound{padding:5px;gap:0}

body.castle-overview #hud,body.castle-overview #sound,body.castle-overview #status,body.castle-overview #mobile,body.castle-overview #prompt{display:none!important}

#status:empty{display:none}

#bopdivaLink{position:fixed;right:16px;bottom:16px;z-index:4;width:64px;height:64px;border-radius:50%;display:block;filter:drop-shadow(0 2px 5px #38223d33)}
#bopdivaLink img{display:block;width:100%;height:100%;object-fit:contain}
#bopdivaLink:focus-visible{outline:3px solid #d5af67;outline-offset:4px}
body.castle-overview #bopdivaLink{display:none}
@media(max-width:650px){#bopdivaLink{width:52px;height:52px;right:12px;bottom:14px}}

#sound .music-icon-stack{display:grid;width:24px;height:24px}
#sound .music-icon-stack img{grid-area:1/1;width:24px;height:24px;object-fit:contain;transition:opacity .8s ease;pointer-events:none}
#sound #musicIcon{opacity:0}
#sound #musicMutedIcon{opacity:1}
#sound #musicToggle[aria-pressed="true"] #musicIcon{opacity:1}
#sound #musicToggle[aria-pressed="true"] #musicMutedIcon{opacity:0}
@media(prefers-reduced-motion:reduce){#sound .music-icon-stack img{transition:none}}

/* A royal invitation over the live castle view. */
#start{background:radial-gradient(ellipse at 50% 35%,#70466528,#1c102d99);backdrop-filter:blur(3px);overflow:auto}
#start .panel{position:relative;isolation:isolate;width:min(580px,100%);max-width:580px;margin:auto;padding:66px 48px 38px;color:#553b48;background:radial-gradient(ellipse at top,#fff 0%,#fff8fc 58%,#f7e8ef 100%);border:1px solid #b99a5a;border-radius:96px 96px 22px 22px;box-shadow:0 0 0 5px #fff9,0 0 0 6px #c1a46d,0 24px 90px #190b2b66,inset 0 0 40px #e7c99933}
#start .panel::before{content:"";position:absolute;inset:12px;border:1px solid #c4a36d;border-radius:84px 84px 12px 12px;pointer-events:none;z-index:-1}
#start .panel::after{content:"✦";position:absolute;top:21px;left:50%;transform:translateX(-50%);color:#e12885;font-size:25px;line-height:1;text-shadow:0 1px white,0 0 12px #e1288533;pointer-events:none}
#start h2{font-family:"Cinzel",serif;font-size:clamp(24px,4vw,35px);font-weight:600;line-height:1.35;letter-spacing:.055em;color:#9c1d5a;margin:0 0 24px;text-wrap:balance}
#start .panel>p:not(.start-copyright){font-size:20px;line-height:1.65;margin:0 auto 28px;max-width:420px;text-wrap:pretty}
#start #enter{min-width:176px;min-height:50px;padding:13px 34px;border:1px solid #b38c47;border-radius:4px;background:linear-gradient(120deg,#fff,#fff4fa);color:#a61d61;font-size:17px;font-weight:700;letter-spacing:.18em;box-shadow:0 0 0 3px #fff,0 0 0 4px #d4bb8b,0 5px 18px #9c47651a;transition:background .2s,box-shadow .2s}
#start #enter:hover:not(:disabled){background:#fce2ef;box-shadow:0 0 0 3px white,0 0 0 4px #b38c47,0 6px 24px #e1288526}
#start #enter:focus-visible{outline:3px solid #e12885;outline-offset:8px}
#start .start-copyright{color:#79616a;font-size:11px;margin-top:26px}
@media(max-width:480px){#start{padding:22px 16px}#start .panel{padding:62px 27px 30px;border-radius:76px 76px 20px 20px}#start .panel::before{border-radius:64px 64px 10px 10px}#start .panel>p:not(.start-copyright){font-size:18px;line-height:1.5}}
@media(prefers-reduced-motion:reduce){#start #enter{transition:none}}
#start .panel{width:min(900px,100%);max-width:900px}
@media(min-width:760px){#start h2{white-space:nowrap;font-size:clamp(24px,3.4vw,35px)}}

#start .panel{width:min(650px,100%);max-width:650px}
#start h2{white-space:normal}
#start h2 span{display:inline-block}

#start .start-logo{display:block;width:100%;max-width:550px;height:auto;margin:0 auto;object-fit:contain}
#start h2:has(.start-logo){line-height:1;margin-bottom:28px}
/* Softer invitation corners, with the inset gold border following the same curve. */
#start .panel{border-radius:36px 36px 22px 22px}
#start .panel::before{border-radius:24px 24px 12px 12px}
@media(max-width:480px){#start .panel{border-radius:30px 30px 20px 20px}#start .panel::before{border-radius:18px 18px 10px 10px}}

#start .keep-together{white-space:nowrap}
#start .panel::after{content:none}

#start .start-action{display:flex;justify-content:center;align-items:center;gap:26px}
#start .invitation-diamond{display:block;flex:0 0 24px;width:24px;height:36px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:conic-gradient(from 0deg at 50% 50%,#faffff 0deg 90deg,#abddef 90deg 180deg,#e6f7ff 180deg 270deg,#c5e9f7 270deg 360deg);filter:drop-shadow(0 1px 2px #7ca7bc55)}
@media(max-width:380px){#start .start-action{gap:16px}#start .invitation-diamond{flex-basis:18px;width:18px;height:28px}#start #enter{min-width:140px;padding-inline:24px}}

/* Top-view diamond: the central table holds the accessible button label. */
#start #enter.diamond-start{position:relative;display:grid;place-items:center;width:240px;height:150px;min-width:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;letter-spacing:.16em;color:#76334e;filter:drop-shadow(0 5px 8px #6b9cb93b);transition:filter .2s,transform .2s}
#start #enter.diamond-start svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#start #enter.diamond-start span{position:relative;font:700 19px "Cinzel",serif;letter-spacing:.16em;padding-left:.16em;text-shadow:0 1px white}
#start #enter.diamond-start:hover:not(:disabled){background:transparent;box-shadow:none;filter:drop-shadow(0 5px 13px #83c4e388);transform:translateY(-2px)}
#start #enter.diamond-start:focus-visible{outline:3px solid #e12885;outline-offset:7px;border-radius:14px}
#start .panel>p.diamond-instruction{font-size:16px;line-height:1.4;margin:16px auto 0;color:#725061}
#start .start-copyright{margin-top:22px}
@media(prefers-reduced-motion:reduce){#start #enter.diamond-start{transition:none}#start #enter.diamond-start:hover:not(:disabled){transform:none}}

#start #enter.diamond-start{width:120px;height:120px;border-radius:50%;filter:drop-shadow(0 5px 7px #93b8cd55)}
#start #enter.diamond-start img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
#start #enter.diamond-start:focus-visible{border-radius:50%}

#start #enter.diamond-start,#start #enter.diamond-start:hover:not(:disabled){filter:none;transform:none;overflow:hidden}
#start #enter.diamond-start::after{content:"";position:absolute;inset:-35%;background:linear-gradient(115deg,transparent 37%,#fff0 42%,#ffffffde 49%,#ffffff55 53%,transparent 61%);transform:translateX(-115%);pointer-events:none;border-radius:50%}
@media(hover:hover){#start #enter.diamond-start:hover:not(:disabled)::after{animation:diamond-sheen 1.15s ease-in-out both}}
@keyframes diamond-sheen{from{transform:translateX(-115%)}to{transform:translateX(115%)}}
@media(prefers-reduced-motion:reduce){#start #enter.diamond-start:hover:not(:disabled)::after{animation:none;transform:none;background:radial-gradient(ellipse,#fff6,transparent 65%)}}

#start .panel{overflow:hidden}
#start.invitation-departing{pointer-events:none;animation:invitation-fade .65s ease .95s forwards}
#start.invitation-departing .panel::after{content:"";position:absolute;z-index:3;inset:-70%;border-radius:0;background:linear-gradient(115deg,transparent 40%,#ffffff22 45%,#ffffffdd 50%,#ffffff33 55%,transparent 60%);transform:translateX(-100%);animation:invitation-sheen 1s ease-in-out forwards;pointer-events:none}
#start #enter.diamond-start:disabled{opacity:1}
@keyframes invitation-sheen{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes invitation-fade{to{opacity:0}}
@media(prefers-reduced-motion:reduce){#start.invitation-departing{animation:invitation-fade .18s linear forwards}#start.invitation-departing .panel::after{content:none}}
/* Begin the highlight at the diamond's edge immediately on pointer entry. */
@keyframes diamond-sheen{from{transform:translateX(-50%)}to{transform:translateX(50%)}}
@media(hover:hover){#start #enter.diamond-start:hover:not(:disabled)::after{animation:diamond-sheen .8s linear both}}
@media(prefers-reduced-motion:reduce){#start #enter.diamond-start:hover:not(:disabled)::after{animation:none}}

#start .invitation-sheen-overlay{position:absolute;inset:0;z-index:10;border-radius:inherit;overflow:hidden;pointer-events:none;opacity:0;background:linear-gradient(110deg,transparent 28%,#fff5 40%,#ffffffd9 50%,#fff5 60%,transparent 72%);background-size:250% 100%;background-position:160% 0;mix-blend-mode:normal}
#start.invitation-departing .panel::after{content:none}
#start.invitation-departing .invitation-sheen-overlay{animation:whole-invitation-sheen 1s linear forwards}
@keyframes whole-invitation-sheen{0%{opacity:1;background-position:160% 0}90%{opacity:1}100%{opacity:0;background-position:-60% 0}}
@media(prefers-reduced-motion:reduce){#start.invitation-departing .invitation-sheen-overlay{animation:none}}
/* The invitation dissolves gently after its full-card sheen. */
#start.invitation-departing{animation:royal-overlay-dissolve 1.05s cubic-bezier(.22,.61,.36,1) .8s forwards}
#start.invitation-departing .panel{transform-origin:center;animation:royal-invitation-dissolve 1.05s cubic-bezier(.22,.61,.36,1) .8s forwards}
@keyframes royal-overlay-dissolve{from{opacity:1;backdrop-filter:blur(3px)}to{opacity:0;backdrop-filter:blur(0)}}
@keyframes royal-invitation-dissolve{0%{opacity:1;transform:translateY(0) scale(1);filter:brightness(1)}25%{opacity:1;filter:brightness(1.06)}100%{opacity:0;transform:translateY(-10px) scale(1.025);filter:brightness(1.1)}}
@media(prefers-reduced-motion:reduce){#start.invitation-departing{animation:invitation-fade .18s linear forwards}#start.invitation-departing .panel{animation:none}}
/* A cool reflective band contrasts with the ivory surface, including its frame. */
#start .invitation-sheen-overlay{inset:0;border:2px solid transparent;background:linear-gradient(108deg,transparent 0%,transparent 30%,#b4dff44d 40%,#e9faffdd 47%,#fffffffa 50%,#bce8ff99 55%,transparent 66%,transparent 100%);background-size:300% 100%;background-position:150% 0;mix-blend-mode:normal}
#start.invitation-departing .invitation-sheen-overlay{animation:whole-invitation-sheen 1.05s ease-in-out forwards}
#start.invitation-departing .panel::before{animation:invitation-frame-light 1.05s ease-in-out both}
@keyframes whole-invitation-sheen{0%{opacity:0;background-position:150% 0}10%{opacity:1}85%{opacity:1}100%{opacity:0;background-position:-50% 0}}
@keyframes invitation-frame-light{0%,100%{border-color:#c4a36d;box-shadow:none}50%{border-color:#f3fcff;box-shadow:inset 0 0 12px #c5eaffaa,0 0 5px #fff}}
@media(prefers-reduced-motion:reduce){#start.invitation-departing .invitation-sheen-overlay,#start.invitation-departing .panel::before{animation:none}}

/* Diamond-blue invitation, with the light sweep sharing the crystal recording's duration. */
#start .panel{background:linear-gradient(140deg,#f4fcff 0%,#d7edf8 38%,#e8f6ff 66%,#c6e4f3 100%);box-shadow:0 0 0 5px #edfaffaa,0 0 0 6px #c1a46d,0 24px 90px #190b2b66,inset 0 0 40px #ffffff44}
#start.invitation-departing .invitation-sheen-overlay{animation-duration:var(--invitation-sheen-duration,1.332245s)}
#start.invitation-departing .panel::before{animation-duration:var(--invitation-sheen-duration,1.332245s)}
#start.invitation-departing{animation-duration:.8s;animation-delay:var(--invitation-sheen-duration,1.332245s)}
#start.invitation-departing .panel{animation-duration:.8s;animation-delay:var(--invitation-sheen-duration,1.332245s)}
@media(prefers-reduced-motion:reduce){#start.invitation-departing{animation-duration:.18s;animation-delay:0s}#start.invitation-departing .panel{animation:none}}
/* Emerald-cut invitation silhouette with a smooth central table. */
#start .panel{--gem-cut:34px;border:0;border-radius:0;clip-path:polygon(var(--gem-cut) 0,calc(100% - var(--gem-cut)) 0,100% var(--gem-cut),100% calc(100% - var(--gem-cut)),calc(100% - var(--gem-cut)) 100%,var(--gem-cut) 100%,0 calc(100% - var(--gem-cut)),0 var(--gem-cut));background:conic-gradient(from 0deg at 50% 50%,#f4fdff 0deg 45deg,#c0dfef 45deg 90deg,#ebfaff 90deg 135deg,#9ecbdf 135deg 180deg,#d2edf9 180deg 225deg,#f8feff 225deg 270deg,#b5d9eb 270deg 315deg,#e6f7ff 315deg 360deg);box-shadow:none;padding:66px 48px 38px}
#start .panel::before{inset:15px;border:1px solid #bb9c62;border-radius:0;clip-path:polygon(25px 0,calc(100% - 25px) 0,100% 25px,100% calc(100% - 25px),calc(100% - 25px) 100%,25px 100%,0 calc(100% - 25px),0 25px);background:linear-gradient(135deg,#f2fbff,#dbedf8 55%,#edfaff);box-shadow:inset 0 0 25px #fff8;z-index:-1}
#start .invitation-sheen-overlay{border-radius:0;border:0}
@media(max-width:480px){#start .panel{--gem-cut:25px;padding:56px 27px 30px}#start .panel::before{inset:10px;clip-path:polygon(19px 0,calc(100% - 19px) 0,100% 19px,100% calc(100% - 19px),calc(100% - 19px) 100%,19px 100%,0 calc(100% - 19px),0 19px)}}
/* Collection plaques retain serif body copy and Cinzel headings. */
#modal[data-finish]:not([data-finish=""])>.panel{--plaque-edge:#b49356;--plaque-text:#382a25;border:5px ridge var(--plaque-edge);border-radius:8px;padding:32px 36px;color:var(--plaque-text);box-shadow:inset 0 0 0 2px #ffffff80,inset 0 0 30px #00000012,0 20px 70px #0008}
#modal[data-finish]>.panel h2,#modal[data-finish]>.panel #category{color:inherit}
#modal[data-finish="bronze"]>.panel{--plaque-edge:#9a6038;background:linear-gradient(125deg,#e8c4a2,#c39369 36%,#edcbaa 51%,#be8b60 80%,#e0b48d);--plaque-text:#3f2517}
#modal[data-finish="silver"]>.panel{--plaque-edge:#929daa;background:linear-gradient(125deg,#f5f7fa,#ccd3dd 35%,#fff 52%,#c7cfd9 80%,#e9edf4)}
#modal[data-finish="gold"]>.panel{--plaque-edge:#b18a35;background:linear-gradient(125deg,#fff0bd,#e7c36b 36%,#fff5d1 52%,#dab454 80%,#f4d990)}
#modal[data-finish="platinum"]>.panel{--plaque-edge:#a5b0b8;background:linear-gradient(120deg,#faffff,#d6e0e5 32%,#fff 50%,#dbe5e9 73%,#f2fbff);box-shadow:inset 0 0 0 3px #faffff,inset 0 0 0 6px #b8c7ce,0 20px 70px #0008}
#modal[data-finish="pearl"]>.panel{--plaque-edge:#d4c8cf;background:radial-gradient(ellipse at 15% 10%,#fff 5%,transparent 65%),linear-gradient(125deg,#f7edf5,#fcfff9 38%,#e6f2fa 65%,#fff6eb);--plaque-text:#4c3b48;border-radius:24px}
#modal[data-finish="purple"]>.panel{--plaque-edge:#c5a767;--plaque-text:#fff7fc;background:radial-gradient(ellipse at top,#79529d,#48245f 65%,#351a49)}
#modal[data-finish="favorite"]>.panel{--plaque-edge:#f2b6d3;--plaque-text:#fff;background:linear-gradient(125deg,#b21c67,#e12885 40%,#c42273 75%,#a51859)}
#modal[data-finish="heirloom"]>.panel{--plaque-edge:#c4a05d;background:radial-gradient(ellipse at top,#fffdf6,#fff1dc 70%,#edd6ae);border-width:7px;border-radius:24px 24px 8px 8px}
#modal[data-finish="diamond"]>.panel,#modal #conversationPanel{border:12px solid #bddfed;border-radius:0;clip-path:polygon(28px 0,calc(100% - 28px) 0,100% 28px,100% calc(100% - 28px),calc(100% - 28px) 100%,28px 100%,0 calc(100% - 28px),0 28px);background:linear-gradient(130deg,#f5fdff,#dceffa 42%,#f2fbff 63%,#cce7f5);color:#453248;box-shadow:inset 0 0 0 2px #fff,inset 0 0 24px #b9dfefaa;max-height:85dvh}
#conversationPanel .conversation-questions button{position:relative;overflow:hidden;font-family:"Cinzel",serif;font-weight:600;background:#f8fdff;border:1px solid #b3d5e5;color:#593b50;border-radius:5px}
#conversationPanel .conversation-questions button[aria-pressed="true"]{background:#d8edf9;border-color:#e12885;box-shadow:inset 3px 0 #e12885}
#conversationPanel .conversation-questions button::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 25%,#ffffffdc 50%,transparent 75%);transform:translateX(-120%)}
#conversationPanel .conversation-questions button[aria-pressed="true"]::after{animation:question-jewel-sheen 1s ease-out both}
@keyframes question-jewel-sheen{to{transform:translateX(120%)}}
@media(max-width:480px){#modal[data-finish]:not([data-finish=""])>.panel{padding:24px 20px}#modal #conversationPanel{padding:22px 16px;border-width:9px}#conversationPanel .conversation-questions button{font-size:14px}}
@media(prefers-reduced-motion:reduce){#conversationPanel .conversation-questions button[aria-pressed="true"]::after{animation:none}}
/* Touch feedback follows the held question instead of requiring hover. */
@media(pointer:coarse){
 #conversationPanel .conversation-questions button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
 #conversationPanel .conversation-questions button::after,#conversationPanel .conversation-questions button[aria-pressed="true"]::after{animation:none;transform:translateX(-120%)}
 #conversationPanel .conversation-questions button:active::after{animation:question-jewel-sheen 1s ease-in-out infinite}
}
#modal.clock-modal[data-finish="diamond"]>.panel{border-color:#bddfed;--plaque-edge:#bddfed;box-shadow:inset 0 0 0 2px #fff,inset 0 0 24px #b9dfefaa}
@media(prefers-reduced-motion:reduce){#conversationPanel .conversation-questions button:active::after{animation:none}}
/* Gallery plaque edges follow their finish without gold edging. */
#modal[data-finish]:not([data-finish=""]):not(.clock-modal)>.panel{border:0;box-shadow:inset 0 0 0 1px #ffffff80,inset 0 0 24px #00000012,0 20px 70px #0008}
#modal[data-finish="purple"]>.panel,#modal[data-finish="purple"] #category,#modal[data-finish="purple"] #itemTitle,#modal[data-finish="purple"] #obtainedDate,#modal[data-finish="purple"] #description,#modal[data-finish="purple"] .returnHint{color:#fff5e6}
#modal[data-finish="favorite"]>.panel,#modal[data-finish="favorite"] #category,#modal[data-finish="favorite"] #itemTitle,#modal[data-finish="favorite"] #obtainedDate,#modal[data-finish="favorite"] #description,#modal[data-finish="favorite"] .returnHint{color:#fff5e6}

#conversationPanel .conversation-questions button[aria-pressed="true"]{box-shadow:none}
#modal{animation:royal-window-in .2s ease-out both}
#modal.window-fading-out{animation:royal-window-out .2s ease-in both;pointer-events:none}
@keyframes royal-window-in{from{opacity:0}to{opacity:1}}
@keyframes royal-window-out{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){#modal,#modal.window-fading-out{animation:none}}
/* Match the other windows: a simple 0.2-second opacity fade after the sheen. */
#start.invitation-departing{animation:royal-window-out .2s ease-in var(--invitation-sheen-duration,1.332245s) both}
#start.invitation-departing .panel{animation:none;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){#start.invitation-departing{animation:none;opacity:0}}

body{font-family:"Cormorant Garamond",Georgia,serif}
button,input,textarea,select,#hud p,#status,#loading,#conversationPanel .conversation-help{font-family:"Lora",Georgia,serif}
#modal #description{font-family:"Cormorant Garamond",Georgia,serif;font-size:22px;line-height:1.55}
#start .panel>p:not(.start-copyright){font-family:"Cormorant Garamond",Georgia,serif;font-size:22px}
#modal #obtainedDate,#modal .returnHint{font-family:"Lora",Georgia,serif}
#conversationPanel .conversation-questions button,#start #enter{font-family:"Cinzel",serif}
@media(max-width:480px){#modal #description,#start .panel>p:not(.start-copyright){font-size:20px}}
#modal.conversation-modal>.conversation-captions,.conversation-farewell:not([hidden]),#conversationPanel .conversation-captions{font-family:"Lora",Georgia,serif;font-weight:600;line-height:1.5;letter-spacing:.005em}
#start .start-copyright{font-family:"Lora",Georgia,serif;font-size:11px;font-weight:400}

#modal #description{white-space:pre-line}

.conversation-captions em{font-style:italic;font-weight:600}
/* Ivory headings contrast with the purple and pink jewel finishes. */
#modal[data-finish="purple"]>.panel #category,
#modal[data-finish="purple"]>.panel h2,
#modal[data-finish="purple"]>.panel h3,
#modal[data-finish="favorite"]>.panel #category,
#modal[data-finish="favorite"]>.panel h2,
#modal[data-finish="favorite"]>.panel h3{color:#fff5e6}

/* Supplied animated diamond loading indicator. */
#loading{top:16px;right:16px;margin:0;padding:0;background:transparent;pointer-events:none}
#loading img{display:block;width:48px;height:48px;object-fit:contain}
@media(max-width:650px){#loading img{width:40px;height:40px}}

/* Mobile controls share the guestbook's icy crystal facets. */
#mobile button{position:relative;background:transparent;border:0;border-radius:0;padding:0;opacity:1;color:#29475f;isolation:isolate;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#mobile button::before{content:"";position:absolute;inset:0;background:url('../assets/images/mobile-jewel.svg') center/contain no-repeat;z-index:-1;pointer-events:none;filter:drop-shadow(0 2px 3px #243d5855);transition:filter .15s}
#mobile .pad button{font-size:0;width:53px;height:53px}
#mobile .pad button:nth-child(1)::before{transform:rotate(-90deg)}
#mobile .pad button:nth-child(2)::before{transform:rotate(180deg)}
#mobile .pad button:nth-child(3)::before{transform:rotate(90deg)}
#mobile .look button{min-width:104px;min-height:62px;padding:12px 20px;font-family:"Cinzel",Georgia,serif;font-size:12px;text-shadow:0 1px #fff}
#mobile .look button::before{background-size:100% 100%}
#mobile button:active::before{filter:brightness(1.2) drop-shadow(0 0 6px #d5f1ff)}
#mobile button:focus-visible{outline:2px solid #e12885;outline-offset:2px}
#mobile button:disabled{opacity:.5}

/* Compass layout, with the middle left open. */
#mobile .pad{grid-template-rows:repeat(3,53px)}
#mobile .pad button:nth-child(1){grid-column:2;grid-row:1}
#mobile .pad button:nth-child(2){grid-column:1;grid-row:2}
#mobile .pad button:nth-child(3){grid-column:2;grid-row:3}
#mobile .pad button:nth-child(4){grid-column:3;grid-row:2}
#mobile .look button::before{background-image:url('../assets/images/mobile-view-jewel.svg')}

#mobile .look button{width:76px;min-width:76px;height:76px;min-height:76px;padding:12px;font-size:11px}
#mobile .look button::before{background-size:contain}

/* Center the interaction jewel within the mobile compass. */
#mobile{position:absolute}
#mobile .pad{grid-template-columns:repeat(3,60px);grid-template-rows:repeat(3,60px);gap:4px}
#mobile .pad button{align-self:center;justify-self:center}
#mobile .look{position:absolute;left:64px;top:64px;width:60px;max-width:none;display:block}
#mobile .look #mobileExamine,#mobile .look button:first-child{width:56px;min-width:56px;height:56px;min-height:56px;padding:8px;font-size:10px;margin:2px}
#mobile .look #mobileDoors{position:absolute;left:68px;top:64px;width:100px;min-width:100px;height:64px;min-height:64px;margin:0}

/* One shared grid keeps the select jewel exactly between all four arrows. */
#mobile{width:188px;height:188px;grid-template-columns:repeat(3,60px);grid-template-rows:repeat(3,60px);gap:4px;align-items:center;justify-items:center}
#mobile .pad,#mobile .look{display:contents}
#mobile .pad button:nth-child(1){grid-column:2;grid-row:1}
#mobile .pad button:nth-child(2){grid-column:1;grid-row:2}
#mobile .pad button:nth-child(3){grid-column:2;grid-row:3}
#mobile .pad button:nth-child(4){grid-column:3;grid-row:2}
#mobile .look button:first-child{grid-column:2;grid-row:2;margin:0}
#mobile .look #mobileDoors{left:196px;top:124px}
@media(pointer:coarse){#mobile{display:grid}}

#sound #accessibilityToggle{display:inline-grid;place-items:center;min-width:34px;min-height:34px;padding:6px;border-radius:9px;background:linear-gradient(145deg,#fff,#eaf4fa 52%,#d9e5ec);border:1px solid #d6e6ef;box-shadow:inset 0 1px 2px white}
#accessibilityToggle img{width:19px;height:19px;object-fit:contain}
@media(pointer:coarse){#sound #accessibilityToggle{min-width:44px;min-height:44px}}
#accessibleNavigation{width:min(620px,92vw);max-height:88dvh;overflow:auto;padding:30px;color:#29475f;background:linear-gradient(135deg,#fff 0%,#eaf9ff 38%,#d3e8f5 70%,#f8fdff);border:2px solid #b4d9ee;border-radius:14px;box-shadow:inset 0 0 0 6px #ffffff80,0 20px 60px #17263866}
#accessibleNavigation::backdrop{background:#101623a8}
#accessibleNavigation h2{color:#29475f;font:600 25px "Cinzel",Georgia,serif;margin:0 0 16px}
#accessibleNavigation p{font:18px/1.55 "Lora",Georgia,serif}
#accessibleNavigation .accessible-copy{white-space:pre-line}
#accessibleNavigation button{display:block;width:100%;margin:10px 0;padding:14px 22px;color:#29475f;background:linear-gradient(135deg,#fff,#d5f1ff 52%,#b4d9ee);border:1px solid #8bb8d0;border-radius:7px;font:600 15px/1.5 "Cinzel",Georgia,serif}
#accessibleNavigation button:hover{filter:brightness(1.05)}
#accessibleNavigation button:focus-visible{outline:3px solid #a91660;outline-offset:3px}

#accessibleNavigation[open]{animation:accessibility-fade-in .2s ease-out both}
#accessibleNavigation[open]::backdrop{animation:accessibility-fade-in .2s ease-out both}
#accessibleNavigation[open].accessibility-closing,#accessibleNavigation[open].accessibility-closing::backdrop{animation:accessibility-fade-out .2s ease-in both}
@keyframes accessibility-fade-in{from{opacity:0}to{opacity:1}}
@keyframes accessibility-fade-out{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){#accessibleNavigation[open],#accessibleNavigation[open]::backdrop,#accessibleNavigation[open].accessibility-closing,#accessibleNavigation[open].accessibility-closing::backdrop{animation:none}}

.test-label{position:fixed;z-index:40;pointer-events:none;background:#fff8fcdf;color:#8e205c;border:1px solid #c9ebfb;padding:5px 10px;border-radius:6px;font:600 11px "Cinzel",Georgia,serif;letter-spacing:.1em}.test-label-top{top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%)}.test-label-bottom{bottom:max(8px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%)}

#sound #accessibilityToggle{background:linear-gradient(145deg,#fff,#f8fbff 45%,#e5edf5);border:1px solid #e0c5d5;box-shadow:inset 0 1px 0 #fff,0 2px 7px #48354b12}

#sound #accessibilityToggle{background:linear-gradient(145deg,#fff,#fff0f7);border-color:#e4cba2;box-shadow:0 2px 5px #9b64701a}
#sound #accessibilityToggle:hover{background:#ffe7f3;border-color:#e12885}

/* Independent faceted diamond settings buttons, with no shared ivory box. */
#sound{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;gap:7px;overflow:visible}
#sound #musicToggle,#sound #accessibilityToggle{position:relative;display:grid;place-items:center;isolation:isolate;background:transparent;border:0;border-radius:50%;box-shadow:none;padding:9px;width:48px;height:48px;min-width:48px;min-height:48px}
#sound #accessibilityToggle{width:44px;height:44px;min-width:44px;min-height:44px}
#sound #musicToggle::before,#sound #accessibilityToggle::before{content:"";position:absolute;inset:0;z-index:-1;background:url('../assets/images/mobile-view-jewel.svg') center/contain no-repeat;filter:drop-shadow(0 2px 3px #243d5833);pointer-events:none}
#sound #musicToggle:hover:not(:disabled),#sound #accessibilityToggle:hover{background:transparent;border:0}
#sound button:hover::before{filter:brightness(1.08) drop-shadow(0 2px 4px #83bcd988)}
#sound button:focus-visible{outline:3px solid #a91660;outline-offset:3px}
#sound #accessibilityToggle img{width:19px;height:19px}

#modal.clock-modal>.panel{display:flex;flex-direction:column;max-height:calc(100dvh - 36px);overflow:hidden;padding:20px;min-height:0}
#modal.clock-modal #clockPreview{display:block;flex:1 1 auto;min-height:0;width:100%;height:auto;max-height:calc(100dvh - 230px);object-fit:contain}
#modal.clock-modal #itemTitle{flex:none;font-size:clamp(18px,3vw,26px);margin:6px 0}
#modal.clock-modal #description,#modal.clock-modal .returnHint{flex:none;font-size:14px;line-height:1.4;margin:6px 0}
@media(max-height:500px){#modal.clock-modal>.panel{padding:10px}#modal.clock-modal #clockPreview{max-height:calc(100dvh - 175px)}#modal.clock-modal #category{font-size:10px}}

/* Mobile: one context action in the center of the compass. */
#mobile{width:188px;grid-template-columns:repeat(3,60px)}
#mobile .look #mobileExamine,#mobile .look button:first-child{grid-column:2;grid-row:2;width:56px;min-width:56px;height:56px;min-height:56px;margin:0}
@media(pointer:coarse){#prompt{display:none!important}}

/* Touch visitors, including screen reader users, have an explicit exit. */
.mobile-window-close{display:none}
@media(pointer:coarse){
 #modal{padding-bottom:84px;box-sizing:border-box}
 .mobile-window-close,#modal .conversation-stop{font-family:'Cinzel',Georgia,serif;font-weight:700;color:#24465c;border:1px solid #d9f5ff;background:linear-gradient(135deg,#f8fdff,#b4d9ee 48%,#e8f8ff);clip-path:polygon(10% 0,90% 0,100% 25%,100% 75%,90% 100%,10% 100%,0 75%,0 25%);min-height:48px;padding:12px 26px;cursor:pointer}
 .mobile-window-close{display:block;position:fixed;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:30}
 #modal.conversation-modal .mobile-window-close{display:none}
 .mobile-window-close:focus-visible,#modal .conversation-stop:focus-visible{outline:3px solid #e12885;outline-offset:-5px}
}