/* Attention: the centre ring, the hachido stage badge, the gallery-finish toggle and the visit card. */
#attention-ring{position:fixed;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;pointer-events:none;opacity:0;transition:opacity .6s ease,transform .6s ease;transform:scale(.9);z-index:5;--p:0}
#attention-ring.show{opacity:.9;transform:scale(1)}
#attention-ring svg{width:100%;height:100%;overflow:visible}
#attention-ring circle{fill:none;stroke-width:1.2}
#attention-ring .track{stroke:#f3ead633}
#attention-ring .fill{stroke:#d7bd84;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p));transform:rotate(-90deg);transform-origin:50% 50%;filter:drop-shadow(0 0 3px #d7bd8488);transition:stroke-dashoffset .12s linear}
#attention-ring text{font:italic 400 22px 'Cormorant Garamond',Georgia,serif;fill:#d7bd84;opacity:calc(var(--p) * .9)}
#attention-ring.done{opacity:1;transform:scale(1.9);transition:transform 1.3s cubic-bezier(.2,.7,.2,1),opacity 1.3s ease}
#attention-ring.done text{opacity:1}
#attention-ring.done circle{opacity:0;transition:opacity 1.2s}
#attention-stage{position:fixed;left:24px;bottom:78px;display:flex;align-items:center;gap:10px;padding:6px 10px;background:#0c0d0e8c;border:1px solid #a9936840;border-radius:3px;color:#d8cfbd;font-size:11px;line-height:1;font-family:inherit;letter-spacing:.14em;text-transform:lowercase;cursor:pointer;z-index:6;backdrop-filter:blur(4px)}
#attention-stage:hover,#attention-stage:focus-visible{border-color:#a99368}
#attention-stage .dots{display:flex;gap:4px}
#attention-stage i{display:block;width:5px;height:5px;border-radius:50%;border:1px solid #a99368aa}
#attention-stage i.on{background:#d7bd84;border-color:#d7bd84}
#attention-stage .name{font-style:italic;font-family:'Cormorant Garamond',Georgia,serif;font-size:15px;letter-spacing:.02em;color:#e9dcc0}
#attention-stage .count{opacity:.6}
#attention-stage.rise{animation:stage-rise 2.4s ease}
@keyframes stage-rise{0%{box-shadow:0 0 0 0 #d7bd8400}20%{box-shadow:0 0 0 6px #d7bd8455;border-color:#d7bd84}100%{box-shadow:0 0 0 14px #d7bd8400}}
#finish-toggle{font-size:14px;padding:8px 10px;background:#11111399;color:#d7bd84;min-width:0}
#finish-toggle[aria-pressed=false]{color:#8b8579}
#museum.hovering{cursor:pointer}
#visit-dialog{max-width:min(92vw,620px);background:#141516;color:#e9e5dc;border:1px solid #a9936866;padding:28px 30px}
#visit-dialog::backdrop{background:#050506c0}
#visit-dialog h2{font:400 34px/1.1 'Cormorant Garamond',Georgia,serif;margin:.2rem 0 1rem}
#visit-dialog .eyebrow{font-size:10px;letter-spacing:.24em;color:#c6af82;margin:0}
#visit-dialog dl{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin:0 0 18px}
#visit-dialog dt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#a79f90}
#visit-dialog dd{margin:3px 0 0;font:400 24px/1.1 'Cormorant Garamond',Georgia,serif;color:#f1e7cf}
#visit-held{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px}
#visit-held a{display:block;width:62px;height:62px;border:1px solid #a9936855;overflow:hidden}
#visit-held img{width:100%;height:100%;object-fit:cover;display:block}
#visit-dialog .visit-note{font-size:13px;line-height:1.6;color:#bdb5a8;margin:0 0 20px}
#visit-dialog .tour-actions{display:flex;gap:10px;flex-wrap:wrap}
#visit-dialog .tour-actions button{padding:12px 18px}
#visit-dialog #visit-leave{background:#cfbd97;color:#151615;border-color:#bba477}
@media (max-width:700px){#attention-stage{left:12px;bottom:70px}#attention-stage .count{display:none}}
@media (prefers-reduced-motion:reduce){#attention-ring,#attention-ring.done{transition:none}#attention-stage.rise{animation:none}}
#tour-guide:not([hidden])~#attention-stage{display:none}
#shutter-flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:90}
#shutter-flash.go{animation:shutter .38s ease-out}
@keyframes shutter{0%{opacity:.55}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){#shutter-flash.go{animation:none}}
#lost-dialog{max-width:min(92vw,560px);background:#e7e1d5;color:#263d35;border:1px solid #a99368;padding:26px 28px}
#lost-dialog h2{font:400 32px/1.1 'Cormorant Garamond',Georgia,serif;margin:.2rem 0 1rem}
#lost-dialog .eyebrow{font-size:10px;letter-spacing:.22em;color:#8d7a52;margin:0}
#lost-dialog ul{margin:0 0 1rem;padding-left:1.1rem;line-height:1.7;font-size:15px}
#lost-dialog .lost-note{font-size:12px;color:#5d6660}
#lost-dialog .lost-close{float:right;color:#e5ddca;margin:0 0 .6rem 1rem}#lost-dialog ul{margin-bottom:.2rem}
#reticle{position:fixed;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#e9dcc0;box-shadow:0 0 0 1px #0008;pointer-events:none;z-index:6}
#focus-ring{position:fixed;width:54px;height:54px;margin:-27px 0 0 -27px;border:2px solid #d7bd84;border-radius:50%;box-shadow:0 0 0 2px #0009,0 0 14px #d7bd8488;pointer-events:none;z-index:7;transition:left .18s,top .18s}
#focus-label{position:fixed;transform:translate(-50%,34px);background:#0c0d0ee6;color:#e9dcc0;border:1px solid #a9936866;padding:4px 9px;font-size:12px;border-radius:3px;pointer-events:none;z-index:7;white-space:nowrap;max-width:70vw;overflow:hidden;text-overflow:ellipsis}
#eighth-frame{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:200;background:#b9b7a9}
body.in-eighth header,body.in-eighth #attention-stage,body.in-eighth #attention-ring{visibility:hidden}