.wonder-seed{position:absolute;z-index:7;transform:translate(-50%,-50%);width:46px;height:46px;border:0;background:transparent;color:#fff4cf;font:36px Georgia,serif;cursor:pointer;text-shadow:0 1px 5px #584a32;opacity:.72;transition:opacity .4s,transform .6s}
.wonder-seed:hover,.wonder-seed:focus-visible,.wonder-seed[data-discovering=true]{opacity:1;transform:translate(-50%,-50%) rotate(-14deg) scale(1.2);outline:1px solid #fff0c399;border-radius:50%;background:#344d4b50}
.wonder-seed[hidden],#pigment-palette[hidden],.found-places[hidden]{display:none}
#pigment-palette{position:absolute;z-index:9;bottom:30px;left:50%;transform:translateX(-50%) rotate(-1deg);display:flex;align-items:center;gap:13px;padding:15px 20px;border:1px solid #e8d4b6;border-radius:49% 43% 35% 30% / 22% 26% 35% 42%;background:linear-gradient(150deg,#faf0d7,#ead9b9);box-shadow:0 14px 30px #30261950;color:#534b3e;max-width:calc(100vw - 260px)}
#pigment-palette p{font:italic 18px/1.2 'EB Garamond',Georgia,serif;margin:0;max-width:135px}
.pigment-wells{display:flex;gap:9px}.pigment-wells button{padding:5px;border:1px solid #b8a58480;border-radius:50%;width:45px;height:45px;background:#c3b28d;box-shadow:inset 0 2px 5px #4e381d40;cursor:pointer}
.pigment-wells button span{display:block;width:100%;height:100%;border-radius:45% 55% 52% 48%;background:radial-gradient(ellipse at 35% 30%,#ffffff44,transparent 55%),var(--pigment);box-shadow:inset 0 -4px 7px #0003}
.pigment-wells button[aria-pressed=true]{outline:2px solid #445d51;outline-offset:3px;transform:translateY(-5px)}
.palette-undo,.palette-close{background:transparent;border:0;font:27px Georgia;color:#514a3e;cursor:pointer;min-width:34px;min-height:44px}.palette-close{position:absolute;top:-17px;right:-10px;border-radius:50%;background:#e5d5b9;width:34px;min-height:34px}
.found-places{position:absolute;left:34px;bottom:106px;z-index:7;width:52px;height:62px;border:4px solid #f5e9cf;border-bottom-width:14px;background:var(--album-photo) center/cover;box-shadow:0 3px 12px #0005;transform:rotate(-9deg);color:white;text-shadow:0 1px 3px black;font:18px Georgia;cursor:pointer}
#wonder-room{inset:0;box-sizing:border-box;border:0;max-width:none;max-height:none;width:100vw;height:100dvh;padding:0;background:transparent;color:#f5edda;overflow:hidden}
#wonder-room::backdrop{background:#172926b8;backdrop-filter:blur(5px)}
.wonder-veil{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#b0ad8a20,transparent 68%)}
.wonder-close{position:absolute;right:30px;top:25px;z-index:4;width:54px;height:54px;border:1px solid #e8d5b345;border-radius:50%;color:#f9efd9;background:#253d39c0;font:34px Georgia;cursor:pointer}
.wonder-heading{position:absolute;inset:5.5vh 80px auto;text-align:center;pointer-events:none}
.wonder-heading p{font:12px/1.4 system-ui;letter-spacing:.30em;text-transform:uppercase;color:#d6c6a8;margin:0 0 10px}
.wonder-heading h2{font:italic 36px/1.15 'EB Garamond',Georgia,serif;font-weight:400;margin:0}
.wonder-space{position:absolute;inset:19vh 8vw 24vh;display:grid;place-items:center;perspective:1600px}
.wonder-paper{--fold-angle:38deg;--fold-shade:.18;--tilt:0deg;--paper-scale:.95;position:relative;width:min(76vw,1080px,calc(56vh * 1.5));aspect-ratio:1.5;filter:drop-shadow(0 35px 24px #0007);transform:rotateX(var(--tilt)) rotateZ(-1deg) scale(var(--paper-scale));transform-style:preserve-3d;touch-action:none;cursor:ew-resize;transition:transform .65s ease,filter .65s;outline-offset:16px}
.photo-fold{position:absolute;top:0;height:100%;width:33.4%;background-image:linear-gradient(90deg,#fff1d800,rgba(20,27,20,var(--fold-shade))),var(--photograph);background-size:100% 100%,300% 100%;background-repeat:no-repeat;border-top:10px solid #eee3c7;border-bottom:28px solid #eee3c7;box-sizing:border-box;backface-visibility:hidden;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.fold-left{left:0;transform-origin:right;transform:rotateY(calc(-1 * var(--fold-angle)));background-position:0 0,0 0;border-left:10px solid #eee3c7}
.fold-middle{left:33.3%;background-position:0 0,50% 0}.fold-right{left:66.6%;transform-origin:left;transform:rotateY(var(--fold-angle));background-position:0 0,100% 0;border-right:10px solid #eee3c7}
.photo-fold:after{content:'';position:absolute;inset:0;box-shadow:inset 1px 0 1px #fffb, inset -1px 0 2px #342c2330;pointer-events:none}
.photo-emboss{position:absolute;bottom:6px;left:36%;font:12px Georgia,serif;color:#71604a;letter-spacing:.16em}
.wonder-lantern,.wonder-door{display:none}
.wonder-surface{position:absolute;inset:0;width:100%;height:100%;border-radius:2px;pointer-events:none}
#wonder-room:is([data-mode=shadow],[data-mode=city]) .photo-fold{display:none}
#wonder-room:is([data-mode=shadow],[data-mode=city]) .wonder-paper{cursor:grab;transform:rotateZ(-.6deg);border:9px solid #e5dec4;border-bottom-width:27px;background:#d0b483;box-sizing:content-box}
#wonder-room:is([data-mode=shadow],[data-mode=city]) .photo-emboss{bottom:-22px;left:0;width:100%;text-align:center;font-size:11px;z-index:2}
#wonder-room[data-mode=shadow]::backdrop{background:#2d241ee8}
#wonder-room[data-mode=city]::backdrop{background:#30392fe8}
.shadow-controls{position:absolute;left:-10%;right:-10%;top:calc(100% + 24px);display:flex;justify-content:center;align-items:center;gap:12px;font:13px Georgia;color:#e6d7b8;cursor:default;transform:rotateZ(.6deg)}
.shadow-controls[hidden]{display:none}
.shadow-controls button{border:1px solid #d9c5a34a;border-radius:20px;background:#372d2359;color:#e6d7b8;font:13px Georgia;min-height:35px;padding:6px 12px;cursor:pointer}
.shadow-controls button[aria-pressed=true]{background:#b69a6755;border-color:#eed5a0aa}
.shadow-controls label{display:flex;align-items:center;gap:7px;white-space:nowrap}.shadow-controls input{width:100px;accent-color:#ceb080}
@media(max-height:720px){.shadow-controls{top:calc(100% + 29px);gap:7px}.shadow-controls label{font-size:10px}.shadow-controls input{width:75px}.shadow-controls button{font-size:11px;min-height:29px;padding:5px 8px}}
@media(max-width:600px){.shadow-controls{left:-2%;right:-2%;top:calc(100% + 35px);flex-wrap:wrap;gap:7px}.shadow-controls button{font-size:12px}.shadow-controls label{font-size:11px;flex-basis:100%;justify-content:center}.shadow-controls input{width:115px}}
.wonder-shelf{position:absolute;left:2vw;top:23vh;display:flex;flex-direction:column;gap:14px;max-height:48vh;overflow:auto;padding:12px;scrollbar-width:thin}
.wonder-shelf[hidden]{display:none}
.wonder-shelf button{position:relative;width:64px;height:58px;flex-shrink:0;border:4px solid #dfd2b5;border-bottom-width:15px;transform:rotate(-5deg);background:var(--kept-image) center/cover;box-shadow:0 3px 9px #081e2780;cursor:pointer;transition:transform .25s}
.wonder-shelf button span{position:absolute;top:calc(100% + 3px);left:-4px;width:64px;font:7px/1.2 system-ui;color:#514e3f;white-space:nowrap}
.wonder-shelf button:hover,.wonder-shelf button[aria-current=true]{transform:rotate(2deg) scale(1.12);outline:1px solid #f3e6bc;outline-offset:3px}
#wonder-room:is([data-mode=rain],[data-mode=lens],[data-mode=river]) .photo-fold{display:none}
#wonder-room:is([data-mode=rain],[data-mode=lens],[data-mode=river]) .wonder-paper{cursor:crosshair;transform:rotateZ(-.6deg);border:9px solid #e5dec4;border-bottom-width:27px;background:#c2d4cb;box-sizing:content-box;box-shadow:0 0 0 1px #acb4a966,0 30px 80px #071c2370;overflow:visible}
#wonder-room:is([data-mode=rain],[data-mode=lens],[data-mode=river]) .photo-emboss{bottom:-22px;left:0;width:100%;text-align:center;font-size:11px;z-index:2}
#wonder-room[data-mode=rain]::backdrop{background:#203b3de0}
#wonder-room[data-mode=lens]::backdrop{background:#213a2ce0}
#wonder-room[data-mode=river]::backdrop{background:#182d3be0}
#wonder-room[data-mode=lantern] .wonder-paper{cursor:crosshair;background:var(--photograph) center/100% 100%;border:10px solid #d6c8a7;border-bottom-width:28px;box-sizing:border-box;transform:rotateZ(-.6deg);--lamp-x:50%;--lamp-y:50%}
#wonder-room[data-mode=lantern] .photo-fold{display:none}
#wonder-room[data-mode=lantern] .wonder-lantern{display:block;position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 175px 160px at var(--lamp-x) var(--lamp-y),transparent 10%,#14231d22 65%,#11221dd9 190%);mix-blend-mode:multiply}
#wonder-room[data-mode=lantern] .photo-emboss{bottom:-23px;left:30%;white-space:nowrap}
#wonder-room[data-mode=lantern] .wonder-door:not([hidden]){display:block;position:absolute;left:46%;top:56%;width:42px;height:45px;border:1px solid #ebd7a385;border-radius:50% 50% 5px 5px;background:#1d292152;color:#f8e8be;font-size:25px;cursor:pointer;box-shadow:0 0 18px #d1b37545}
#wonder-room[data-portrait=true] .wonder-paper{width:min(65vw,calc(56vh * .804));aspect-ratio:912/1135}
.wonder-paper.handling,.wonder-paper.handling .photo-fold{transition:none}
.wonder-paper.turning{transform:rotateY(87deg) rotateZ(3deg) scale(.94);filter:drop-shadow(0 20px 10px #0003)}
.wonder-paper.kept{animation:paper-kept 1s ease both}
.wonder-caption{position:absolute;left:5vw;right:5vw;bottom:4vh;text-align:center}
.wonder-invitation{font:italic 21px/1.3 'EB Garamond',Georgia,serif;color:#e4d4b8;margin:0 0 18px}
.wonder-buttons{display:flex;justify-content:center;align-items:center;gap:16px}
.wonder-buttons button{border:1px solid #d6c5a34d;background:#213c366b;color:#f6edd8;font:17px/1.2 'EB Garamond',Georgia,serif;min-height:48px;padding:12px 20px;border-radius:3px;cursor:pointer}.wonder-buttons button:hover{background:#58706580}.wonder-buttons button:disabled{opacity:.65;cursor:default}.wonder-buttons span{margin-left:16px;font-size:22px}.wonder-buttons .wonder-audio{font-size:25px;min-width:49px;padding:7px}
.photo-credit{font:11px/1.4 system-ui;color:#c6c3af;margin:15px auto 0;max-width:750px}.photo-credit summary{cursor:pointer;list-style:none;letter-spacing:.06em}.photo-credit a{color:#efe1c2}.photo-credit p{margin:5px}.photo-credit[open]{background:#20332ef2;padding:12px;position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:min(80vw,750px)}
#wonder-room.arriving .wonder-paper{animation:paper-arrive 1.25s cubic-bezier(.16,.8,.24,1) both}
#wonder-room.arriving .wonder-heading,#wonder-room.arriving .wonder-caption{animation:words-arrive 1.5s ease both}
@keyframes paper-arrive{from{opacity:0;transform:translate(calc(var(--origin-x,70vw) - 50vw),calc(var(--origin-y,70vh) - 47.5vh)) rotateY(-65deg) rotateZ(18deg) scale(.05)}45%{opacity:1}to{opacity:1;transform:rotateZ(-1deg) scale(var(--paper-scale))}}
@keyframes words-arrive{from{opacity:0;transform:translateY(10px)}65%{opacity:0}to{opacity:1;transform:none}}
@keyframes paper-kept{0%,100%{transform:rotateZ(-1deg) scale(1)}45%{transform:rotateZ(2deg) scale(.93)}}
@media(max-width:900px),(max-height:650px){.wonder-heading{top:4vh}.wonder-heading h2{font-size:27px}.wonder-space{inset:18vh 5vw 29vh}.wonder-paper{width:min(83vw,calc(49vh * 1.5))}.wonder-caption{bottom:3vh}.wonder-invitation{font-size:18px;margin-bottom:10px}.wonder-buttons button{font-size:16px;padding:9px 12px}.photo-credit{margin-top:9px}#pigment-palette{max-width:calc(100vw - 160px);gap:8px;padding:13px}#pigment-palette p{display:none}.pigment-wells{gap:7px}.pigment-wells button{width:39px;height:39px}}
@media(prefers-reduced-motion:reduce){#wonder-room *,.wonder-seed{animation:none!important;transition:none!important}}
@media(max-width:600px){.wonder-heading{inset:6vh 36px auto}.wonder-heading p{font-size:10px;letter-spacing:.16em}.wonder-heading h2{font-size:26px}.wonder-close{top:13px;right:14px;width:42px;height:42px}.wonder-space{inset:24vh 5vw 30vh}.wonder-paper{width:88vw}.wonder-caption{left:6vw;right:6vw;bottom:4vh}.wonder-buttons{gap:7px;flex-wrap:wrap}.wonder-buttons button{min-height:42px;font-size:15px;padding:8px 10px}.wonder-buttons span{margin-left:6px}.wonder-invitation{font-size:19px}.wonder-shelf{top:19vh;left:8vw;right:8vw;max-height:66px;flex-direction:row;gap:13px;padding:7px 10px}.wonder-shelf button{width:40px;height:39px;border-width:3px;border-bottom-width:9px}.wonder-shelf button span{display:none}}
body[data-reduced-motion=true] #wonder-room *{animation:none!important;transition:none!important}
#wonder-room:is([data-mode=passage],[data-mode=louvres]) .photo-fold{display:none}
#wonder-room:is([data-mode=passage],[data-mode=louvres]) .wonder-paper{cursor:grab;transform:rotateZ(-.6deg);border:9px solid #e5dec4;border-bottom-width:27px;background:#d8c49d;box-sizing:content-box}
#wonder-room:is([data-mode=passage],[data-mode=louvres]) .photo-emboss{bottom:-22px;left:0;width:100%;text-align:center;font-size:11px;z-index:2}
#wonder-room:is([data-mode=passage],[data-mode=louvres])::backdrop{background:#2b3029ed}
.passage-controls select{border:1px solid #d9c5a370;border-radius:4px;background:#383a2d;color:#f4e9d3;font:14px Georgia;padding:4px 8px;min-height:30px}
@media(max-width:600px){.passage-controls{gap:5px;top:calc(100% + 29px)}.passage-controls label{flex-basis:auto;white-space:normal}.passage-controls input{width:88px}.passage-controls button{font-size:11px;padding:5px 8px}}
/* Short desktop: leave a separate strip for the leaf controls above the caption. */
@media(min-width:901px) and (max-height:800px){
 #wonder-room:is([data-mode=passage],[data-mode=louvres]) .wonder-space{inset:120px 8vw 240px}
 #wonder-room:is([data-mode=passage],[data-mode=louvres]) .wonder-paper{width:min(76vw,calc((100vh - 360px) * 1.5))}
 #wonder-room:is([data-mode=passage],[data-mode=louvres]) .passage-controls{top:calc(100% + 23px);gap:12px}
 #wonder-room:is([data-mode=passage],[data-mode=louvres]) .passage-controls label{font-size:12px}
 #wonder-room:is([data-mode=passage],[data-mode=louvres]) .passage-controls button{font-size:12px;min-height:32px}
}

@media(min-width:901px) and (max-height:800px){
 #wonder-room:is([data-mode=rain],[data-mode=lens],[data-mode=river]) .wonder-space{inset:125px 8vw 215px}
 #wonder-room:is([data-mode=rain],[data-mode=lens],[data-mode=river]) .wonder-paper{width:min(76vw,calc((100vh - 370px) * 1.5))}
}

/* Keep the theatre controls between the framed canvas and its story caption. */
@media(min-width:901px) and (max-height:800px){
 #wonder-room:is([data-mode=shadow],[data-mode=city]) .wonder-space{inset:130px 8vw 245px}
 #wonder-room:is([data-mode=shadow],[data-mode=city]) .wonder-paper{width:min(76vw,calc((100vh - 405px) * 1.5))}
 #wonder-room:is([data-mode=shadow],[data-mode=city]) .shadow-controls{top:calc(100% + 24px)}
}
#wonder-room[data-mode=river] .wonder-buttons{gap:10px;flex-wrap:wrap}#wonder-room[data-mode=river] .river-still[aria-pressed=true]{background:#637a66;color:#fff3d8}