*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:#f7e7d1;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-tap-highlight-color:transparent}
body[data-screen="room"]{background:#f7e7d1}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:12px;top:12px;z-index:60;background:#fff;color:#2b1850;padding:10px 14px;border-radius:10px;font-weight:700;transform:translateY(-200%)}
.skip-link:focus{transform:none;outline:3px solid #7a3cff}
#app{position:fixed;inset:0}
.screen{position:absolute;inset:0;overflow:hidden;background:#f7e7d1}
#entrance-screen{background:#e8d4bd}
.screen>.fit,.screen>h1{z-index:1}
.fit{position:absolute;left:0;top:0;transform-origin:0 0}
img{user-select:none;-webkit-user-drag:none}
#ui-layer{position:fixed;left:0;top:0;width:100vw;height:100vh;transform-origin:0 0;pointer-events:none;z-index:50}
#ui-layer>*{pointer-events:none}
#ui-layer button,#ui-layer .modal-backdrop,#ui-layer .modal{pointer-events:auto}
.toolbar{position:absolute;top:max(.6rem,env(safe-area-inset-top));right:max(.6rem,env(safe-area-inset-right));display:flex;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 1.2rem);gap:.15rem;padding:.2rem;border-radius:999px;background:rgba(255,250,240,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tb{width:3rem;height:3rem;min-width:44px;min-height:44px;border-radius:50%;border:0;background:transparent;color:rgba(60,35,100,.78);font-size:1.15rem;font-weight:800;cursor:pointer;display:grid;place-items:center;padding:0}
.tb:hover{background:rgba(255,255,255,.55);color:#3c2364}
.tb[aria-pressed="true"][data-state="off"],.tb[data-state="off"]{color:rgba(60,35,100,.5)}
.tb svg{width:1.35rem;height:1.35rem}
.tb:focus-visible,.modal-btn:focus-visible{outline:4px solid #ffd54a;outline-offset:2px;background:rgba(255,255,255,.7)}
.tb[data-state="off"]{opacity:.8}
  .captions{position:absolute;left:50%;bottom:max(1rem,env(safe-area-inset-bottom));transform:translateX(-50%);max-width:min(90%,45rem);background:rgba(0,0,0,.82);color:#fff;font-size:1.3rem;line-height:1.35;padding:10px 18px;border-radius:12px;z-index:55;display:none;text-align:center}
.captions.on{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(30,15,60,.55);display:grid;place-items:center;z-index:100;padding:20px}
.modal{background:#fffaf0;color:#2b1850;border:4px solid #d9a72b;border-radius:22px;padding:26px 28px;max-width:440px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.modal h2{margin:0 0 10px;font-size:1.5rem}
.modal p{margin:0 0 18px;font-size:1.15rem;line-height:1.45}
.modal-btn{min-height:48px;padding:.65rem 1.6rem;border-radius:999px;border:3px solid #d9a72b;background:#6a2bd9;color:#fff;font-size:1.1rem;font-weight:800;cursor:pointer}
.modal-btn:hover{background:#7d41ee}
html.calm *,html.calm *::before,html.calm *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
@media (prefers-reduced-motion:reduce){html:not(.calm-off) .starli-wrap{animation:none!important}}
.dev-readout{position:fixed;left:8px;bottom:8px;z-index:90;background:#000c;color:#fff;font:14px monospace;padding:6px 10px;border-radius:6px}
.pan-btn:disabled{opacity:.25;cursor:default}
.pan-btn:focus-visible{outline:4px solid #ffd54a;outline-offset:2px}
#ui-layer.ui-bottom .toolbar{width:max-content;flex-wrap:nowrap;top:auto;bottom:max(.6rem,env(safe-area-inset-bottom));right:auto;left:50%;transform:translateX(-50%);justify-content:center;background:rgba(255,250,240,.55)}
#pan-ui{width:max-content;position:absolute;left:50%;bottom:calc(max(.6rem,env(safe-area-inset-bottom)) + 5.1rem);transform:translateX(-50%);display:flex;align-items:center;gap:.4rem;pointer-events:none}
#pan-ui[hidden]{display:none}
.pan-btn{width:3rem;height:3rem;min-width:44px;min-height:44px;border-radius:50%;border:0;background:rgba(255,250,240,.5);color:rgba(60,35,100,.8);display:grid;place-items:center;padding:0;cursor:pointer;pointer-events:auto;animation:pan-nudge 2.4s ease-in-out 3}
#pan-left{animation-name:pan-nudge-l}
.pan-btn:disabled{opacity:.3;animation:none;cursor:default}
.pan-btn:focus-visible{outline:4px solid #ffd54a;outline-offset:2px}
.pan-track{position:relative;width:5.5rem;height:.4rem;border-radius:1rem;background:rgba(255,250,240,.55)}
.pan-thumb{position:absolute;top:0;bottom:0;border-radius:1rem;background:rgba(90,50,150,.7)}
@keyframes pan-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes pan-nudge-l{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
#pan-v{position:absolute;right:max(.6rem,env(safe-area-inset-right));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:.4rem;pointer-events:none;width:max-content}
#pan-v[hidden]{display:none}
#pan-v .pan-track{width:.4rem;height:4.5rem}
#pan-v #pan-up{animation-name:pan-nudge-up}
#pan-v #pan-down{animation-name:pan-nudge-down}
@keyframes pan-nudge-up{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes pan-nudge-down{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
#ui-layer:not(.ui-bottom) #pan-ui{bottom:max(.6rem,env(safe-area-inset-bottom))}
#pan-v .pan-thumb{left:0;right:0;bottom:auto}

.credits{position:absolute;left:max(12px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));margin:0;font:600 12px/1.2 Poppins,system-ui,sans-serif;color:#fff;text-shadow:0 1px 3px rgba(40,30,70,.7);opacity:.85;pointer-events:none;letter-spacing:.02em}
main#app:has(#entrance-screen:not([hidden])) ~ #ui-layer .credits{display:none}

/* Credits ("Illustrations by AUG") are kept for the About page, not shown on every screen. */
#credits{display:none!important}