@import url('../ui-tokens.css?v=20261107-labs-fit1');
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:16px}body{--paper:#f1e8d4;--ink:#283f42;--accent:#c74b35;--soft:#d9e5cc;--edge:#bba680;margin:0;background:var(--paper);color:var(--ink);font-family:Arimo,Arial,sans-serif;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23746645' opacity='.05' filter='url(%23n)' d='M0 0h150v150H0z'/%3E%3C/svg%3E")}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}button:disabled,input:disabled{opacity:.45;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:none;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}header{display:flex;align-items:center;justify-content:space-between;padding:24px 5vw;border-bottom:1px solid var(--edge)}.wordmark{font:bold 30px Gelasio,Georgia,serif;letter-spacing:-1px}.wordmark span{display:block;font:9px Arimo,Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;margin-top:5px}header>a:last-child{font-size:12px}.world-picker{display:flex;justify-content:center;gap:8px;padding:16px 24px;border-bottom:1px dashed var(--edge)}.world-picker button{padding:12px 22px;background:transparent;border:1px solid transparent;border-radius:2px;color:var(--ink);font-size:13px}.world-picker button span{font:10px Cousine,monospace;opacity:.7;margin-right:8px}.world-picker button[aria-pressed=true]{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--edge);transform:rotate(-1deg)}main{max-width:1400px;margin:auto}.welcome{display:grid;grid-template-columns:.9fr 1.1fr;min-height:620px;padding:38px 5vw 48px;gap:35px;align-items:center}.issue{font:10px Cousine,monospace;letter-spacing:1.8px;text-transform:uppercase}.welcome h1{font:700 clamp(50px,6.5vw,88px)/.97 Gelasio,Georgia,serif;letter-spacing:-4px;margin:26px 0;color:var(--ink)}.intro{font-size:17px;line-height:1.6;max-width:330px}.begin{display:inline-flex;gap:40px;align-items:center;background:var(--accent);color:#fff8e8;border:2px solid var(--ink);box-shadow:4px 5px 0 var(--ink);padding:16px 22px;font-weight:bold;margin-top:20px;transform:rotate(-2deg)}.begin span{font-size:26px;line-height:1}.age-note{display:block;font-size:10px;margin-top:20px}.artboard{position:relative;aspect-ratio:1/1.12;max-height:590px;transform:rotate(2deg);border:9px solid #e1c69c;box-shadow:5px 9px 0 #a2845e,14px 21px 35px #4c3e2720;background:#ddc8a4}.artboard:before,.artboard:after{content:'';position:absolute;width:100px;height:30px;background:#c5a978a0;z-index:2;top:-20px;left:30px;transform:rotate(-12deg)}.artboard:after{left:auto;right:24px;top:auto;bottom:-20px;transform:rotate(9deg)}.world-art{width:100%;height:100%;background-image:url('worlds-art.png');background-size:300% 100%;background-position:0 50%;background-repeat:no-repeat}.sticker{position:absolute;right:-24px;top:26px;display:grid;place-content:center;width:104px;height:104px;border-radius:50%;background:#ecc353;color:#2c403d;font:italic bold 23px/1 Gelasio,Georgia,serif;text-align:center;transform:rotate(12deg);box-shadow:2px 4px #614a2820}.character-note{position:absolute;bottom:18px;left:16px;padding:8px 12px;background:#fff4dce8;font:11px Cousine,monospace;color:#354743;transform:rotate(-3deg)}.experiment{margin:15px 5vw 50px;scroll-margin-top:20px}.experiment-heading{display:flex;align-items:center;justify-content:space-between;padding:0 0 20px}.experiment-heading h2{font:bold 42px Gelasio,Georgia,serif;letter-spacing:-1px;margin:10px 0 0}.ticket{display:flex;align-items:center;gap:10px;background:var(--soft);border:1px dashed var(--ink);padding:12px 18px;transform:rotate(4deg);font-size:12px}.ticket b{font:32px Cousine,monospace;letter-spacing:3px}.exhibit{border:10px solid #c3a57b;background:#e3cfaa;box-shadow:0 7px 0 #9c7b55,0 15px 35px #4c3e271a;padding:14px}.window{height:480px;position:relative;border:3px solid #394547;background:#0b1220;overflow:hidden;border-radius:30px 30px 7px 7px;box-shadow:inset 0 3px 12px #0007}iframe{border:0;display:block;width:100%;height:100%}.window-tag{position:absolute;left:16px;top:14px;font:9px Cousine,monospace;color:#e1e7df;letter-spacing:1.8px;pointer-events:none}.result{position:absolute;bottom:14px;left:16px;right:16px;pointer-events:none;color:#e4c57e;font:13px Cousine,monospace}.actions{display:flex;gap:12px;padding:20px 0}.actions button{border:2px solid var(--ink);background:#f7ecd3;color:var(--ink);padding:14px 24px;font-weight:bold;box-shadow:0 4px 0 var(--ink);min-height:48px}.actions #turn{background:var(--accent);color:#fff8eb;flex:1}.actions #play{min-width:120px}.actions button:active{transform:translateY(3px);box-shadow:0 1px var(--ink)}.knobs{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:20px 16px;border:1px dashed #9b805b;background:#f0e2c7}.knobs label>span{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:bold}.knobs output{font:14px Cousine,monospace;background:#fff7e5;padding:5px 8px;border:1px solid #ac9774;min-width:72px;text-align:center}.knobs input{width:100%;min-height:44px;margin:8px 0;accent-color:var(--accent)}.knobs small{display:flex;justify-content:space-between;font-size:10px}.knobs small span{margin-left:10px}details{padding:18px 5px 4px;font-size:12px;line-height:1.6}summary{cursor:pointer;font-weight:bold}details p{max-width:740px}details a{text-decoration:underline}.postcard{text-align:center;padding:70px 24px 80px;border-bottom:1px dashed var(--edge)}.postcard>span{display:inline-block;border:2px solid var(--accent);border-radius:50%;padding:18px 10px;transform:rotate(-12deg);font:11px Cousine,monospace;color:var(--accent)}.postcard h2{font:italic 46px/1.1 Gelasio,Georgia,serif;letter-spacing:-1px}.postcard a{font-size:13px;text-decoration:underline}.desktop-shots{padding:32px 5vw 48px}.desktop-shots h2{font:28px Gelasio,Georgia,serif}.desktop-shots p{font-size:12px}.desktop-shots>div{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.desktop-shots img{width:100%;aspect-ratio:1.5;object-fit:cover;object-position:top;background:var(--soft);border:1px solid var(--edge)}.desktop-shots a span{display:block;font-size:12px;margin-top:8px}footer{padding:24px 5vw;display:flex;justify-content:space-between;font-size:10px;border-top:1px solid var(--edge)}
#loading{position:absolute;inset:0;background:#0b1220;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#ede5d0;font:12px Cousine,monospace}#loading[hidden]{display:none}.rocket{position:relative;width:70px;height:140px;animation:rumble .15s infinite alternate;margin-bottom:35px}.hull{position:absolute;top:30px;left:14px;width:42px;height:76px;background:#f2e5c9;border:2px solid #d3b48a;border-radius:50% 50% 10% 10%;z-index:2}.hull span{position:absolute;width:24px;height:24px;border:4px solid #c45544;border-radius:50%;background:#80bac0;top:18px;left:7px}.nose{position:absolute;top:3px;left:14px;border-left:21px solid transparent;border-right:21px solid transparent;border-bottom:40px solid #d65740;z-index:3}.fin{position:absolute;top:75px;width:25px;height:40px;background:#d65740;transform:skewY(-35deg)}.fin.left{left:0}.fin.right{right:0;transform:skewY(35deg)}.fire{position:absolute;top:103px;left:23px;background:#e7b84c;width:24px;height:35px;clip-path:polygon(0 0,100% 0,70% 70%,50% 100%,30% 70%);animation:flame .2s infinite alternate}@keyframes rumble{to{transform:translate(1px,-2px) rotate(1deg)}}@keyframes flame{to{transform:scaleY(1.5);background:#f18b49}}
body[data-world=plush]{--paper:#ece6f1;--ink:#413b61;--accent:#516d78;--soft:#d6d6e9;--edge:#c1b5ce;background-image:none}.plush-unused{display:none}body[data-world=plush] .welcome h1{font-family:Arimo,Arial,sans-serif;font-weight:900;font-size:clamp(48px,5.8vw,80px);letter-spacing:-5px}body[data-world=plush] .artboard{transform:none;border:12px solid #ddd3e7;border-radius:47% 47% 36% 36%;box-shadow:inset 3px 4px 9px #fff8,0 12px 24px #63557a33}body[data-world=plush] .world-art{background-position:50% 50%;border-radius:46% 46% 35% 35%}body[data-world=plush] .artboard:before,body[data-world=plush] .artboard:after{display:none}body[data-world=plush] .sticker{background:#f0daa1;border-radius:40%;box-shadow:inset 2px 3px #fff5,0 5px 10px #51445220}body[data-world=plush] .begin,body[data-world=plush] .actions button{border:0;border-radius:28px;box-shadow:inset 0 3px #fff5,0 5px 0 #364b59;transform:none}body[data-world=plush] .exhibit{border:12px solid #c8bfd8;border-radius:36px;background:#ded7e8;box-shadow:inset 3px 4px 6px #fff6,0 6px 0 #b6aac9}body[data-world=plush] .window{border-radius:26px;border-color:#a99bb8}body[data-world=plush] .knobs{border:0;border-radius:20px;background:#eee8f2}body[data-world=plush] .knobs output{border:0;border-radius:10px;background:#fff9e8}body[data-world=plush] .ticket{border:0;border-radius:20px;transform:rotate(-4deg)}
body[data-world=odd]{--paper:#f2cf47;--ink:#252556;--accent:#d83f25;--soft:#eee5cf;--edge:#a48733;background-image:none}body[data-world=odd] .welcome h1{font-family:Anton,Impact,'Arial Black',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(52px,6vw,86px);letter-spacing:-1px;line-height:.95}body[data-world=odd] .artboard{border:12px solid #292855;box-shadow:10px 10px 0 #d9452b;transform:rotate(-2deg)}body[data-world=odd] .world-art{background-position:100% 50%}body[data-world=odd] .artboard:before{background:repeating-linear-gradient(45deg,#292855 0 7px,#eee5cf 7px 14px);top:-25px;width:120px}body[data-world=odd] .artboard:after{display:none}body[data-world=odd] .sticker{background:#d9452b;color:#fff0d7;border-radius:0;clip-path:polygon(50% 0,61% 14%,80% 5%,84% 25%,100% 30%,89% 49%,100% 66%,80% 72%,78% 95%,58% 87%,45% 100%,35% 83%,14% 90%,17% 67%,0 58%,13% 42%,3% 24%,24% 23%,29% 4%);width:125px;height:125px}body[data-world=odd] .exhibit{border:12px solid #292855;background:#eee5cf;box-shadow:10px 10px #d9452b}body[data-world=odd] .window{border-radius:0;border:5px solid #d9452b}body[data-world=odd] .knobs{border:2px solid #292855;background:#f4cc42}body[data-world=odd] .ticket{border:4px solid #292855;background:#df432b;color:#fff4d8;transform:none;box-shadow:5px 5px #292855}body[data-world=odd] .ticket b{background:#fff1d4;color:#292855;padding:4px 8px}body[data-world=odd] .postcard{background:#292855;color:#fff1d4;margin-top:70px}body[data-world=odd] .postcard>span{color:#f2cf47;border-color:#f2cf47}
@media(max-width:700px){header{padding:16px 20px}.wordmark{font-size:25px}header>a:last-child{font-size:10px}.world-picker{padding:12px 10px;gap:5px}.world-picker button{flex:1;padding:10px 5px;font-size:11px;min-height:44px}.world-picker button span{display:block;margin:0 0 4px}.welcome{display:flex;flex-direction:column;gap:24px;padding:30px 24px 40px;min-height:0}.welcome-copy{width:100%;position:relative}.issue{font-size:9px;letter-spacing:1px}.welcome h1{font-size:55px;letter-spacing:-3px;margin:18px 0}.intro{font-size:14px;max-width:290px;margin:0}.begin{padding:12px 18px;font-size:13px;margin-top:20px}.age-note{display:none}.artboard{width:92%;aspect-ratio:1.1;max-height:340px;border-width:7px}.sticker{width:80px;height:80px;right:-20px;top:18px;font-size:18px}.character-note{font-size:9px;bottom:12px;left:8px}.experiment{margin:15px 14px 40px}.experiment-heading{padding:0 10px 16px}.experiment-heading h2{font-size:30px}.ticket{padding:8px;gap:5px;font-size:10px}.ticket b{font-size:24px}.exhibit{border-width:7px;padding:8px}.window{height:350px;border-radius:20px 20px 5px 5px}.actions{gap:7px;padding:14px 0}.actions button{padding:12px 8px;font-size:12px;min-height:44px}.actions #play{min-width:66px}.knobs{grid-template-columns:1fr;gap:20px;padding:16px 10px}.knobs label>span{font-size:13px}.knobs output{font-size:12px;min-width:62px}.postcard{padding:40px 24px}.postcard h2{font-size:35px}.desktop-shots{padding:24px 20px}.desktop-shots>div{grid-template-columns:1fr;gap:24px}footer{padding:20px;gap:14px;flex-direction:column}body[data-world=plush] .welcome h1{font-size:52px;letter-spacing:-3px}body[data-world=plush] .exhibit{border-width:8px;border-radius:25px}body[data-world=odd] .welcome h1{font-size:57px}body[data-world=odd] .exhibit{border-width:7px;box-shadow:6px 6px #d9452b}body[data-world=odd] .sticker{width:96px;height:96px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rocket,.fire{animation:none}}
/* Preserve the illustrated character proportions in every material. */
.artboard{width:min(100%,340px);aspect-ratio:2/3;max-height:none;justify-self:center;}
@media(max-width:700px){.artboard{width:86%;max-width:280px;aspect-ratio:2/3;max-height:none;}}
/* A cutout theatre between chapters; no transform reaches the numerical model. */
#journey{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;padding:0;margin:0;overflow:hidden;background:#f0e3c9;color:#283f42;overscroll-behavior:none;touch-action:none}
#journey::backdrop{background:#283f42}
#journey[data-material=plush]{background:#ded7ec;color:#413b61}
.journey-landscape{position:absolute;inset:0;overflow:hidden}
.journey-moon{position:absolute;right:12%;top:17%;width:110px;height:110px;background:#efc95b;border-radius:50%;box-shadow:5px 7px 0 #c0a05833}
.journey-hill{position:absolute;bottom:-28%;left:-20%;width:105%;height:65%;background:#a8bd97;border:8px solid #d3bd99;border-radius:50% 70% 0 0;transform:rotate(-12deg);box-shadow:0 -8px 0 #c9ad82}
.journey-hill.front{left:30%;bottom:-35%;background:#ce8066;transform:rotate(13deg)}
[data-material=plush] .journey-hill{background:#b6a3cb;border:12px solid #c7b7d5;box-shadow:inset 0 8px 14px #fff4;filter:drop-shadow(0 -3px 2px #fff4)}
[data-material=plush] .journey-hill.front{background:#e5cf95;border-color:#ead7ab}
#pip-puppet{position:absolute;left:calc(50% - 170px);top:calc(50% - 150px);width:340px;height:300px;will-change:transform;filter:drop-shadow(0 14px 12px #302d4428)}
.pip-sprite{width:100%;height:100%;background:url('pip-sprites.png') 0 50%/200% 100% no-repeat}
.pip-sprite[data-material=plush]{background-position:100% 50%}
#journey[data-direction=back] .pip-sprite{transform:scaleX(-1)}
.journey-page{position:absolute;inset:-15%;background:linear-gradient(100deg,#f8f0de,#e0cfab 90%,#ad9477);box-shadow:20px 0 50px #302b4933;z-index:2;will-change:transform}
.journey-caption{position:absolute;bottom:10%;left:24px;right:24px;text-align:center;z-index:3}
.journey-caption>span{font:10px Cousine,monospace;letter-spacing:3px}
.journey-caption h2{font:bold 36px/1.1 Gelasio,Georgia,serif;margin:14px 0}
#skip-journey{position:absolute;right:20px;top:20px;border:1px solid currentColor;padding:12px 16px;background:#fff9;color:inherit;border-radius:4px;min-height:44px;z-index:4}
@media(max-width:700px){#pip-puppet{width:260px;height:230px;left:calc(50% - 130px);top:calc(50% - 115px)}.journey-caption h2{font-size:27px}.journey-moon{width:75px;height:75px;top:20%}}
#pip-puppet{height:340px;top:calc(50% - 170px)}
@media(max-width:700px){#pip-puppet{height:260px;top:calc(50% - 130px)}}

/* One viewport for the experiment; presentation never changes the model timestep. */
#leave-experiment{display:none}
body[data-exploring=true]{overflow:hidden}
body[data-exploring=true]>header,body[data-exploring=true]>.world-picker,
body[data-exploring=true] .welcome,body[data-exploring=true] .postcard,
body[data-exploring=true] .desktop-shots,body[data-exploring=true]>footer{display:none}
body[data-exploring=true] main{max-width:1100px;height:100dvh}
body[data-exploring=true] .experiment{height:100%;margin:0;padding:12px;display:flex;flex-direction:column;gap:10px}
body[data-exploring=true] .experiment-heading{padding:0;min-height:44px;gap:12px}
body[data-exploring=true] .experiment-heading .issue,body[data-exploring=true] .ticket{display:none}
body[data-exploring=true] .experiment-heading h2{font-size:24px;margin:0}
body[data-exploring=true] #leave-experiment{display:block;min-height:44px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);padding:8px 12px;border-radius:8px}
body[data-exploring=true] .exhibit{flex:1;min-height:0;border-width:6px;padding:8px;display:grid;grid-template-rows:minmax(120px,1fr) auto auto auto;position:relative;box-shadow:none}
body[data-exploring=true] .window{height:auto;min-height:0;border-width:2px;border-radius:16px}
body[data-exploring=true] .actions{padding:10px 0;gap:8px}
body[data-exploring=true] .actions button{padding:9px 12px;min-height:44px}
body[data-exploring=true] .knobs{grid-template-columns:1fr 1fr;gap:18px;padding:10px;border-radius:10px}
body[data-exploring=true] .knobs label>span{font-size:12px;flex-wrap:wrap;gap:4px}
body[data-exploring=true] .knobs output{font-size:12px;min-width:48px;padding:3px}
body[data-exploring=true] .knobs input{margin:0;min-height:44px}
body[data-exploring=true] details{padding:5px 6px 0}
body[data-exploring=true] summary{min-height:36px;display:flex;align-items:center}
body[data-exploring=true] details[open]{position:absolute;z-index:5;bottom:0;left:0;right:0;max-height:60%;overflow:auto;padding:12px 18px;background:var(--paper);border:2px solid var(--ink);border-radius:14px}
body[data-exploring=true] details[open] summary:after{content:'Close ×';margin-left:auto;padding-left:12px}
@media(max-width:700px){body[data-exploring=true] .experiment{padding:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}body[data-exploring=true] .knobs{gap:12px;padding:8px}body[data-exploring=true] .knobs small{font-size:9px}body[data-exploring=true] .experiment-heading h2{font-size:21px}body[data-exploring=true] .actions button{font-size:12px}body[data-exploring=true] .result{font-size:11px}}
@media(max-height:500px) and (min-width:600px){body[data-exploring=true] .exhibit{grid-template-columns:minmax(0,1fr) 250px;grid-template-rows:auto 1fr auto;gap:8px}body[data-exploring=true] .window{grid-row:1/4}body[data-exploring=true] .knobs{grid-template-columns:1fr;gap:4px}body[data-exploring=true] .actions{padding:0}body[data-exploring=true] .actions #play{min-width:0}}

#retry-model{min-height:44px;padding:10px 18px;background:#f1e8d4;color:#283f42;border:1px solid #283f42;border-radius:8px}
/* Chapter-opening spread: art and invitation share a page rather than a card stack. */
body:not([data-exploring=true]) .welcome{margin:24px 4vw 40px;border:1px solid var(--edge);border-radius:8px 18px 18px 8px;background:linear-gradient(90deg,#fff8e844 49.4%,#4e43351a 50%,#fff8e844 51%);box-shadow:3px 4px 0 var(--paper),4px 5px 0 var(--edge);}
body:not([data-exploring=true]) .postcard,body:not([data-exploring=true]) .desktop-shots{display:none}
@media(max-width:700px){body:not([data-exploring=true]) .welcome{margin:18px 14px 32px;padding:24px 20px;background:#fff8e833;}body:not([data-exploring=true]) .welcome .artboard{order:-1;width:66%;max-width:210px;}body:not([data-exploring=true]) .welcome h1{font-size:42px;letter-spacing:-2px;margin:12px 0}body:not([data-exploring=true]) .welcome .intro{font-size:14px}body:not([data-exploring=true]) .welcome .sticker{display:none}}
body:not([data-exploring=true]) .experiment{display:none}
body[data-exploring=true] .knobs{border:1px dashed var(--edge)}
body[data-exploring=true] .knobs output{border:1px solid var(--edge)}
@media(min-width:701px){body:not([data-exploring=true]) .welcome{min-height:0;padding:32px 4vw;grid-template-columns:1fr 1fr;}body:not([data-exploring=true]) .welcome h1{font-size:clamp(42px,4.2vw,68px);letter-spacing:-2px}body:not([data-exploring=true]) .artboard{width:280px}body:not([data-exploring=true]) .intro{font-size:15px}}
body[data-exploring=true] .actions button{height:44px;line-height:20px;border:2px solid var(--ink);padding:8px 12px}
body[data-exploring=true] .knobs output{height:24px;line-height:16px}
/* Book shell: one page on phones, facing pages on larger screens. */
#book-cover,.experiment-note{display:none}
body[data-page=cover]>header,body[data-page=cover]>.world-picker,body[data-page=cover]>footer,body[data-page=cover] .welcome{display:none}
body[data-page=cover] main{padding:32px 20px;min-height:100svh;display:grid;place-items:center}
body[data-page=cover] #book-cover{display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(100%,440px);min-height:min(680px,88svh);padding:36px 28px;background:#7d344e;color:#f8e7b5;border-radius:5px 22px 22px 5px;border-left:18px solid #59283d;box-shadow:7px 5px 0 #eadfc6,10px 7px 0 #ab956d,15px 18px 32px #49382430;text-align:center;outline:1px solid #c69a62;outline-offset:-26px}
.cover-series{font:10px Cousine,monospace;letter-spacing:2px}#book-cover h1{font:bold 60px Gelasio,Georgia;margin:20px 0}.cover-picture{width:160px;height:220px;background:url('worlds-art.png') 0 50%/300% 100%;border-radius:80px 80px 12px 12px;border:3px solid #d3b57b}#book-cover p{font:italic 20px Gelasio,Georgia;margin:24px 0}#open-book{min-height:48px;padding:12px 22px;background:#f8e7b5;color:#59283d;border:0;border-radius:3px;font-weight:bold;cursor:pointer}
#close-book{border:0;background:transparent;color:var(--ink);padding:10px 0;min-height:44px;text-decoration:underline;cursor:pointer}.welcome-copy #close-book{margin-bottom:10px}
main{transform-origin:50% 50%}
@media(min-width:1000px){body[data-exploring=true] main{max-width:1440px}body[data-exploring=true] .experiment{display:grid;grid-template-columns:minmax(260px,.7fr) minmax(0,1fr);grid-template-rows:44px minmax(0,1fr);gap:12px;padding:20px;background:linear-gradient(90deg,#fff8e833 41%,#7a644322 42%,#fff8e833 43%)}body[data-exploring=true] .experiment-heading{grid-column:1/3}body[data-exploring=true] .experiment-note{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;min-height:0}body[data-exploring=true] .experiment-note h2{font:36px/1.1 Gelasio,Georgia;margin:16px 0}.book-illustration{width:min(65%,210px);aspect-ratio:2/3;background:url('worlds-art.png') 0 50%/300% 100%;border-radius:48% 48% 5px 5px}body[data-world=plush] .book-illustration{background-position:50% 50%}body[data-world=odd] .book-illustration{background-position:100% 50%}.experiment-note p{font:20px/1.4 Gelasio,Georgia}.experiment-note small{font-size:11px;max-width:230px}.exhibit{min-width:0}}
@media(max-width:700px){body[data-page=cover] main{padding:20px}.cover-series{font-size:9px}#book-cover h1{font-size:48px}.cover-picture{height:190px;width:140px}body:not([data-exploring=true]) .welcome{padding-top:18px}.welcome-copy #close-book{margin-bottom:0}}
@media(prefers-reduced-motion:reduce){main{transform:none!important}}

/* An opened book is the viewport, not a card inside a scrolling website. */
html:has(body[data-page]){scroll-behavior:auto}
body[data-page=chapter]{overflow:hidden}
body[data-page=chapter]>header,body[data-page=chapter]>footer{display:none}
body[data-page=chapter] main{max-width:none;width:100%;height:100dvh}
body[data-page=chapter] .world-picker{position:fixed;bottom:0;left:0;right:0;z-index:8;background:var(--paper);padding:8px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom));border:0;border-top:1px solid var(--edge);height:72px}
body[data-page=chapter] .welcome{position:relative;width:100%;height:100%;margin:0;padding:0 0 72px;gap:0;border:0;border-radius:0;box-shadow:none;display:grid;grid-template-columns:1fr 1fr;background:var(--paper)}
body[data-page=chapter] .welcome-copy{padding:clamp(24px,5vw,90px);z-index:2;align-self:center}
body[data-page=chapter] .welcome .artboard{width:100%;height:100%;max-height:none;max-width:none;aspect-ratio:auto;transform:none;border:0;border-radius:0;box-shadow:none;order:0}
body[data-page=chapter] .world-art{border-radius:0;background-size:300% auto;background-position-y:top}
body[data-page=chapter] .artboard:before,body[data-page=chapter] .artboard:after,body[data-page=chapter] .sticker,body[data-page=chapter] .character-note,body[data-page=chapter] .age-note{display:none}
body[data-page=chapter] #close-book{position:fixed;top:12px;left:24px;margin:0;z-index:4}
.opening-cover{position:fixed;z-index:20;transform-origin:left center;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 28px;background:#7d344e;color:#f8e7b5;border-radius:5px 22px 22px 5px;border-left:18px solid #59283d;outline:1px solid #c69a62;outline-offset:-26px;text-align:center;backface-visibility:hidden}
.opening-cover h1{font:bold 60px Gelasio,Georgia;margin:20px 0}.opening-cover p{font:italic 20px Gelasio,Georgia;margin:24px 0}.opening-cover button{min-height:48px;padding:12px 22px;background:#f8e7b5;color:#59283d;border:0;border-radius:3px;font-weight:bold}
@media(max-width:700px){
 body[data-page=chapter] .welcome{display:block;padding:0}
 body[data-page=chapter] .welcome .artboard{position:absolute;inset:0 0 72px;height:auto;width:100%;opacity:1}
 body[data-page=chapter] .welcome-copy{position:absolute;bottom:72px;left:0;right:0;width:100%;padding:50px 24px 24px;background:linear-gradient(transparent,var(--paper) 28%)}
 body[data-page=chapter] .welcome h1{font-size:38px;margin:8px 0;letter-spacing:-1px}
 body[data-page=chapter] .intro{font-size:13px;line-height:1.45;max-width:310px}
 body[data-page=chapter] .issue{display:none}
 body[data-page=chapter] .begin{margin-top:12px;min-height:44px}
 body[data-page=chapter] #close-book{background:var(--paper);padding:8px 12px;border-radius:4px;left:16px}
 .opening-cover h1{font-size:48px}
}
@media(max-height:500px) and (min-width:701px){body[data-page=chapter] .welcome-copy{padding:36px 24px 12px}body[data-page=chapter] .welcome h1{font-size:32px;margin:8px 0}body[data-page=chapter] .issue,body[data-page=chapter] .intro{display:none}}

/* Odditorium shares the journey choreography with its own wooden sprite. */
#journey[data-material=odd]{background:#f2cf47;color:#252556}
[data-material=odd] .journey-hill{background:#d9452b;border:10px solid #292855;border-radius:20% 40% 0 0;box-shadow:0 -8px 0 #eee5cf}
[data-material=odd] .journey-hill.front{background:#eee5cf;border-color:#292855}
[data-material=odd] .journey-moon{background:#eee5cf;border:8px solid #292855;border-radius:12%;transform:rotate(15deg)}

.pip-sprite[data-material=odd]{background-image:url('pip-wood-rigid-v3.png');background-size:90% auto;background-position:50% 50%}

/* Printed cloth cover: a mounted illustration and an opening tab. */
body[data-page=cover] #book-cover,.opening-cover{outline:0;background-color:#7d344e;background-image:repeating-linear-gradient(0deg,transparent 0 2px,#f8e7b507 2px 3px),repeating-linear-gradient(90deg,transparent 0 3px,#30132212 3px 4px);border-radius:3px 12px 12px 3px;position:relative}
.opening-cover{position:fixed}
#book-cover h1,.opening-cover h1{letter-spacing:-3px;margin:0 0 26px}
.cover-picture{border-radius:3px;border:7px solid #efdbad;transform:rotate(-3deg);box-shadow:3px 6px 0 #4f263b55;width:180px;height:245px}
#book-cover p,.opening-cover p{font:600 22px/1.2 Gelasio,Georgia,serif;max-width:210px;margin:30px 0 34px;text-wrap:balance}
#open-book,.opening-cover button{align-self:flex-end;border-radius:2px 0 0 2px;background:#efdbad;padding:14px 22px;box-shadow:3px 4px 0 #4f263b55;transform:rotate(-2deg);font-size:14px}
@media(max-width:700px){.cover-picture{width:156px;height:210px}#book-cover h1,.opening-cover h1{margin-bottom:22px}#book-cover p,.opening-cover p{font-size:21px;margin:24px 0 28px}}
/* Marginalia belongs to the book, leaving the live flock at center stage. */
#ask-pip{position:absolute;right:22px;top:22px;z-index:3;min-height:44px;padding:10px 18px;border:2px solid var(--ink);border-radius:50% 50% 50% 8%;background:var(--paper);color:var(--ink);font:bold 18px Gelasio,Georgia;box-shadow:3px 4px 0 #283f4226;transform:rotate(4deg)}
#pip-whisper{position:absolute;right:18px;top:76px;z-index:3;max-width:230px;margin:0;padding:16px 18px;background:var(--paper);color:var(--ink);font:italic 20px/1.2 Gelasio,Georgia;border:1px solid var(--edge);border-radius:4px;box-shadow:4px 5px 0 #283f4226}
.pip-guide{position:absolute;top:12px;left:12px;right:12px;display:flex;align-items:center;gap:10px;pointer-events:none;color:#f1e8d4;max-width:360px}
.pip-guide-portrait{flex:none;width:44px;height:44px;background:url('pip-sprites.png') 0 50%/200% 100% no-repeat}
body[data-world=plush] .pip-guide-portrait{background-position:100% 50%}
body[data-world=odd] .pip-guide-portrait{background-image:url('pip-wood-rigid-v3.png');background-size:contain;background-position:center}
.pip-guide p{margin:0;font:15px/1.25 Gelasio,Georgia;text-shadow:0 1px 4px #000;max-width:280px}
body[data-page=chapter] .welcome-copy:after{content:'01 / THE FLOCK';display:block;margin-top:26px;font:10px Cousine,monospace;letter-spacing:2px;opacity:.6}
body[data-page=chapter] .begin{border-radius:0 16px 0 0}
body[data-exploring=true] .exhibit{border-radius:3px 22px 3px 3px}
@media(max-width:700px){body[data-page=chapter] .welcome-copy:after{display:none}.pip-guide{top:10px;left:10px;right:10px;gap:6px}.pip-guide-portrait{width:32px;height:32px}.pip-guide p{font-size:12px;max-width:230px}#ask-pip{right:14px;top:14px;font-size:16px}#pip-whisper{top:70px;right:14px;max-width:200px;font-size:18px}}
@media(max-height:500px){#pip-whisper{top:68px;font-size:15px;max-width:190px}.pip-guide-portrait{width:28px;height:28px}.pip-guide p{font-size:12px}}
/* Chapter identity is independent of paper, plush and wooden material choices. */
.waves-entry{display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:12px 16px;margin:12px 0 0 14px;border:2px solid var(--ink);color:var(--ink);background:var(--paper);font-weight:bold;box-shadow:3px 4px 0 var(--edge)}
.next-chapter{display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid var(--ink);border-radius:50%;font-size:24px}
#waves{display:none}body[data-page=waves]{overflow:hidden}body[data-page=waves]>header,body[data-page=waves]>.world-picker,body[data-page=waves]>footer,body[data-page=waves] .welcome{display:none}
body[data-page=waves] main{width:100%;height:100dvh;max-width:1440px}
body[data-page=waves] #waves{height:100%;padding:16px;display:grid;grid-template-columns:.7fr 1fr;grid-template-rows:44px minmax(0,1fr);gap:12px;background:linear-gradient(90deg,#fff8e833 41%,#7a644322 42%,#fff8e833 43%)}
.wave-heading{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px}.wave-heading a{display:grid;place-items:center;min-height:44px;padding:8px 10px;border:1px solid var(--ink);border-radius:8px;font-size:13px}.wave-heading h2{font:bold 24px Gelasio,Georgia;margin:0}
.wave-story{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-width:0}.wave-story h2{font:36px/1.1 Gelasio,Georgia}.wave-story p{font:22px/1.3 Gelasio,Georgia}.wave-story small{font-size:13px;line-height:1.5}
.wave-paper-wheel{position:relative;width:180px;height:180px;border:14px solid #c74b35;border-radius:50%;background:var(--paper);box-shadow:4px 6px 0 var(--edge);transform:rotate(-30deg)}.wave-paper-wheel:before{content:'';position:absolute;top:50%;left:50%;width:50%;height:6px;background:var(--ink)}.wave-paper-wheel span{position:absolute;right:-14px;top:calc(50% - 12px);width:24px;height:24px;border-radius:50%;background:#efc95b;border:3px solid var(--ink)}
.wave-instrument{min-height:0;min-width:0;position:relative;display:grid;grid-template-rows:minmax(130px,1fr) auto auto auto;padding:8px;border:6px solid var(--edge);background:var(--paper);border-radius:3px 22px 3px 3px}
.wave-stage{min-height:0;background:#0b1220;color:#f1e8d4;display:grid;grid-template-rows:auto minmax(0,1fr) auto;border-radius:14px;overflow:hidden}.wave-stage>p{margin:0;padding:10px 14px;font:14px Gelasio,Georgia}#wave-canvas{width:100%;height:100%;min-height:0;display:block}.wave-readout{display:flex;justify-content:space-between}.wave-readout output{font:14px Cousine,monospace;color:#f3d27b}
.wave-actions{display:flex;gap:8px;padding:10px 0}.wave-actions button{min-height:44px;padding:8px 14px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font-weight:bold}#wave-add{flex:1;background:var(--accent);color:#fff8e8}
.wave-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:8px;border:1px dashed var(--edge)}.wave-controls label{font-size:12px;font-weight:bold}.wave-controls output{float:right;font:12px Cousine,monospace}.wave-controls input{display:block;width:100%;min-height:44px;margin:0;accent-color:var(--accent)}
.wave-instrument details{padding:4px 6px}.wave-instrument summary{min-height:36px;display:flex;align-items:center}.wave-instrument details[open]{position:absolute;bottom:0;left:0;right:0;max-height:70%;overflow:auto;z-index:3;background:var(--paper);padding:12px;border:2px solid var(--ink)}
@media(max-width:999px){body[data-page=waves] #waves{grid-template-columns:1fr;padding:8px;background:none}.wave-story{display:none}.wave-heading h2{font-size:19px}.wave-heading a{font-size:11px;padding:6px}.wave-controls{gap:8px}.wave-actions button{padding:8px;font-size:12px}}
@media(max-width:700px){.waves-entry{font-size:13px;margin-left:8px;padding:12px}.begin{gap:14px!important}body[data-exploring=true] .experiment-heading h2{font-size:18px}body[data-exploring=true] .experiment-heading{gap:6px}.wave-heading h2{font-size:17px}}
@media(max-height:500px) and (min-width:600px){.wave-instrument{grid-template-columns:1fr 250px;grid-template-rows:auto 1fr auto;gap:8px}.wave-stage{grid-row:1/4}.wave-actions{padding:0}.wave-controls{grid-template-columns:1fr;gap:0}}

/* The illustrated wheel and plotted wheels operate the same phase. */
.wave-paper-wheel{transform:none;cursor:grab;touch-action:none;user-select:none;flex-shrink:0}
.wave-paper-wheel:before{display:none}
.wave-paper-wheel .wheel-arm{position:absolute;inset:0;width:auto;height:auto;border:0;border-radius:0;background:none;transform:rotate(var(--wheel-angle,0rad));pointer-events:none}
.wheel-arm:before{content:'';position:absolute;top:calc(50% - 3px);left:50%;width:50%;height:6px;background:var(--ink)}
.wheel-arm i{position:absolute;right:-12px;top:calc(50% - 12px);width:24px;height:24px;border-radius:50%;background:#efc95b;border:3px solid var(--ink)}
.wave-paper-wheel[data-dragging],#wave-canvas[data-dragging]{cursor:grabbing}
.wave-paper-wheel:focus,#wave-canvas:focus{outline:none}.wave-paper-wheel:focus-visible{filter:drop-shadow(0 0 3px var(--accent))}#wave-canvas:focus-visible{filter:brightness(1.15)}
#wave-canvas{touch-action:none;cursor:grab}
/* Contents: four illustrated entries per spread; sketches never masquerade as chapters. */
#contents{display:none}body[data-page=contents]{overflow:hidden}body[data-page=contents]>header,body[data-page=contents]>footer,body[data-page=contents] .welcome{display:none}
body[data-page=contents] main{width:100%;height:100dvh;max-width:1440px}
body[data-page=contents] #contents{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) 52px;gap:14px;padding:24px 36px 88px;background:linear-gradient(90deg,#fff8e833 49%,#7a644322 50%,#fff8e833 51%)}
body[data-page=contents]>.world-picker{position:fixed;bottom:0;left:0;right:0;z-index:8;background:var(--paper);height:68px;padding:8px;border-top:1px solid var(--edge);border-bottom:0}
.contents-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.contents-heading h1{font:bold 40px Gelasio,Georgia;margin:0}.contents-heading>a{padding:10px 0;min-height:44px}.contents-heading>span{font:italic 18px Gelasio,Georgia}
#chapter-list{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:20px 60px;min-height:0}
.chapter-card{display:grid;grid-template-columns:40% 1fr;grid-template-rows:auto auto auto;align-content:center;gap:8px 20px;text-align:left;background:transparent;border:0;border-bottom:1px dashed var(--edge);padding:12px;color:var(--ink);min-width:0;cursor:pointer}
.chapter-drawing{grid-row:1/4;align-self:center;color:var(--accent);transform:rotate(-5deg)}.chapter-drawing svg{width:100%;max-height:150px;filter:drop-shadow(2px 3px 0 #bba68055)}.chapter-number{font:10px Cousine,monospace;letter-spacing:1px}.chapter-card strong{font:25px/1.05 Gelasio,Georgia}.chapter-card>span:last-child{font-size:13px;line-height:1.35}.chapter-card:hover .chapter-drawing{transform:rotate(0)}
.contents-pagination{display:flex;align-items:center;justify-content:center;gap:26px}.contents-pagination button{min-height:44px;padding:8px 14px;border:1px solid var(--ink);color:var(--ink);background:var(--paper);border-radius:3px}.contents-pagination button:disabled{cursor:default}.contents-pagination output{font:12px Cousine,monospace}
#chapter-sketch{max-width:min(520px,90vw);max-height:85dvh;padding:30px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:6px 8px 0 var(--edge);overflow:auto}#chapter-sketch::backdrop{background:#15252acc}#chapter-sketch h2{font:30px Gelasio,Georgia}#chapter-sketch p{line-height:1.5}.sketch-source{font-size:12px}#chapter-sketch button{min-height:44px;padding:10px 16px;background:var(--ink);color:var(--paper);border:0}
.contents-link{position:fixed;top:12px;left:120px;padding:12px;min-height:44px;background:var(--paper);z-index:4;border-radius:4px;font-size:13px}
@media(max-width:700px){body[data-page=contents] #contents{padding:12px 16px 80px;gap:8px;background:none;grid-template-rows:auto minmax(0,1fr) 44px}.contents-heading{flex-wrap:wrap;gap:2px}.contents-heading h1{font-size:27px;order:2;width:100%;margin-bottom:6px}.contents-heading>span{font-size:14px}#chapter-list{gap:10px 16px}.chapter-card{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px;padding:0 2px}.chapter-drawing{width:75px;align-self:center}.chapter-drawing svg{max-height:70px}.chapter-card strong{font-size:20px}.chapter-card>span:last-child{font-size:11px}.chapter-number{font-size:9px}.contents-pagination{gap:14px}.contents-pagination button{font-size:12px}}
@media(max-height:500px) and (min-width:701px){body[data-page=contents] #contents{padding:8px 24px 76px;gap:4px;grid-template-rows:44px minmax(0,1fr) 44px}.contents-heading h1{font-size:28px}.chapter-card{padding:2px;gap:3px 12px}.chapter-card strong{font-size:20px}.chapter-drawing svg{max-height:65px}}
/* Shared chapter shell; each study owns its actual mathematical behavior. */
#study{display:none}body[data-page=study]{overflow:hidden}body[data-page=study]>header,body[data-page=study]>.world-picker,body[data-page=study]>footer,body[data-page=study] .welcome{display:none}
body[data-page=study] main{width:100%;height:100dvh;max-width:1440px}
body[data-page=study] #study{height:100%;display:grid;grid-template-columns:.55fr 1fr;grid-template-rows:44px minmax(0,1fr);gap:12px;padding:16px;background:linear-gradient(90deg,#fff8e833 34%,#7a644322 35%,#fff8e833 36%)}
.study-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;grid-column:1/-1}.study-heading a{min-height:44px;display:grid;place-items:center;padding:8px 12px;border:1px solid var(--ink);border-radius:8px}.study-heading h2{font:bold 26px Gelasio,Georgia;margin:0}.study-story{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.study-story h2{font:36px Gelasio,Georgia}.study-story p{font:22px/1.5 Gelasio,Georgia}.study-story .pip-guide-portrait{width:150px;height:150px}
.study-instrument{display:grid;grid-template-rows:minmax(140px,1fr) auto auto auto;min-height:0;min-width:0;padding:8px;border:6px solid var(--edge);border-radius:3px 22px 3px 3px;background:var(--paper);position:relative}
.study-stage{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#0b1220;color:#f1e8d4;border-radius:14px;overflow:hidden}.study-stage p{margin:0;padding:12px 14px;font:16px Gelasio,Georgia}#study-canvas{display:block;width:100%;height:100%;min-height:0}.study-stage output{font:12px Cousine,monospace;color:#f3d27b;padding:10px 12px;min-height:34px}
.study-actions{display:flex;gap:8px;padding:8px 0}.study-actions button{min-height:44px;padding:8px 18px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font-weight:bold}#study-play{flex:1;background:var(--accent);color:#fff8e8}
.study-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:8px;border:1px dashed var(--edge)}.study-controls label{font-size:12px}.study-controls output{float:right;font:12px Cousine,monospace}.study-controls input{width:100%;min-height:44px;margin:0;display:block;accent-color:var(--accent)}.study-instrument details{padding:4px 6px}.study-instrument summary{min-height:36px;display:flex;align-items:center}.study-instrument details[open]{position:absolute;bottom:0;left:0;right:0;max-height:70%;overflow:auto;background:var(--paper);padding:12px;border:2px solid var(--ink);z-index:3}
@media(max-width:999px){body[data-page=study] #study{grid-template-columns:1fr;padding:8px;background:none}.study-story{display:none}.study-heading h2{font-size:20px}.study-heading a{font-size:12px;flex-shrink:0}.study-stage p{font-size:14px}.study-stage output{font-size:10px}.study-controls{gap:8px}.study-controls label{font-size:11px}}
@media(max-height:500px) and (min-width:600px){.study-instrument{grid-template-columns:1fr 240px;grid-template-rows:auto 1fr auto;gap:8px}.study-stage{grid-row:1/4}.study-actions{padding:0}.study-controls{grid-template-columns:1fr;gap:0}}
/* One manipulable stage; native sliders remain available underneath. */
.study-stage{position:relative}#study-canvas{touch-action:none;cursor:grab}#study-canvas[data-dragging="true"]{cursor:grabbing}#study-canvas:focus{outline:none}#study-canvas:focus-visible{filter:brightness(1.15)}#study-canvas:focus-visible+#study-hint{color:#f3d27b}#study-hint{position:absolute;bottom:44px;left:12px;right:12px;text-align:center;font:12px/1.3 Gelasio,Georgia,serif;color:#c7d5d9;pointer-events:none}#study-canvas[data-dragging="true"]+ #study-hint{color:#f3d27b}
/* Chapter frontispieces share the book's typesetting, not its experiment logic. */
#study-story-toggle{display:none}.study-story{padding:20px 24px;gap:20px;min-height:0}.study-story h2{font:600 clamp(25px,2.65vw,44px)/1.08 Gelasio,Georgia,serif;margin:0}.study-story .issue{font-size:11px;letter-spacing:2px}.study-paper-art{width:min(100%,320px);height:auto;max-height:30vh;flex-shrink:1;overflow:visible}.study-paper-art>g{filter:drop-shadow(3px 5px 0 #b5a17c)}.study-story blockquote{font:clamp(22px,2vw,32px)/1.15 Gelasio,Georgia,serif;margin:0;max-width:350px}.study-story p{font:16px/1.5 Arimo,Arial,sans-serif;margin:0;max-width:290px}
@media(max-width:999px){#study-story-toggle{display:block;min-height:44px;padding:8px 10px;background:var(--paper);border:1px solid var(--ink);border-radius:8px;color:var(--ink);font-size:12px;flex-shrink:0}.study-heading{gap:8px}.study-heading h2{font-size:clamp(15px,4vw,20px)}#study[data-story="true"] .study-story{display:flex;grid-column:1/-1;overflow:auto;gap:18px;padding:20px 12px}#study[data-story="true"] .study-instrument{display:none}.study-story h2{font-size:32px}.study-paper-art{max-height:32vh}.study-story blockquote{font-size:26px}.study-story p{font-size:15px}}
@media(max-height:500px) and (max-width:999px){#study[data-story="true"] .study-story{display:grid;grid-template-columns:1fr 1fr;text-align:left;gap:8px 20px;padding:8px 20px}.study-story .issue{grid-column:1/-1}.study-paper-art{grid-column:2;grid-row:2/5;max-height:52vh}.study-story h2{font-size:24px}.study-story blockquote{font-size:20px}}
#chapter-navigation{position:fixed;bottom:0;left:0;right:0;height:calc(48px + env(safe-area-inset-bottom));padding:2px 16px calc(2px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;background:var(--paper);border-top:1px solid var(--edge);z-index:8}#chapter-navigation[hidden]{display:none}#chapter-navigation button{min-height:44px;min-width:100px;background:transparent;color:var(--ink);border:0;font:15px Gelasio,Georgia,serif;cursor:pointer}#chapter-navigation button:disabled{opacity:.35;cursor:default}#chapter-position{font:12px Cousine,monospace}body[data-chapter-navigation=true] main{height:calc(100dvh - 48px - env(safe-area-inset-bottom));min-height:0}
.study-paper-art[role=slider]{touch-action:none;cursor:grab}.study-paper-art:focus{outline:none}.study-paper-art[role=slider]:focus-visible>g{filter:drop-shadow(3px 5px 0 var(--edge)) drop-shadow(0 0 2px var(--accent))}.study-paper-art[data-dragging=true]{cursor:grabbing}.story-manipulation{font:12px Gelasio,Georgia,serif!important;color:var(--ink)}
/* Pip reads the experiment; the character never owns it. */
.pip-wind[hidden]{display:none}.pip-wind{display:flex;align-items:center;justify-content:center;gap:10px;height:64px;padding:0 12px;color:#f1e8d4;font:14px Gelasio,Georgia,serif}.pip-wind-art{display:block;width:68px;height:60px;flex-shrink:0;transform:rotate(var(--pip-lean,0deg));transform-origin:50% 85%}.pip-wind-art .pip-sprite{display:block}#study[data-model=migration] .study-stage{grid-template-rows:auto 64px minmax(0,1fr) auto}
#pip-page-turn{position:fixed;bottom:54px;right:12px;width:88px;height:78px;z-index:12;pointer-events:none}#pip-page-turn[data-direction=back]{right:auto;left:12px}#pip-page-turn .pip-sprite{display:block;position:relative}.pip-page-corner{position:absolute;right:0;bottom:0;width:35px;height:35px;background:linear-gradient(135deg,transparent 49%,#d7c9a9 50%,#fff4d7 65%);filter:drop-shadow(-2px -2px 2px #283f4333)}
body[data-world=plush] .pip-wind .pip-sprite,body[data-world=plush] #pip-page-turn .pip-sprite{background-position:100% 50%}body[data-world=odd] .pip-wind .pip-sprite,body[data-world=odd] #pip-page-turn .pip-sprite{background:url('pip-wood-rigid-v3.png') center/contain no-repeat}
@media(prefers-reduced-motion:reduce){.pip-wind-art{transform:none}#pip-page-turn{display:none}}
/* A rider at the wheel's dot, counter-rotated so Pip stays upright. */
.wave-paper-wheel .wheel-arm .pip-wheel-seat{position:absolute;right:-22px;top:calc(50% - 46px);width:44px;height:39px;background:none;border:0;border-radius:0;transform:rotate(calc(-1 * var(--wheel-angle,0rad)));pointer-events:none}.wave-paper-wheel .pip-wheel-seat .pip-sprite{position:static;display:block;width:100%;height:100%;border:0;border-radius:0;background:url('pip-sprites.png') 0 50%/200% 100% no-repeat;transform:none}body[data-world=plush] .wave-paper-wheel .pip-wheel-seat .pip-sprite{background-position:100% 50%}body[data-world=odd] .wave-paper-wheel .pip-wheel-seat .pip-sprite{background:url('pip-wood-rigid-v3.png') center/contain no-repeat}

/* A suspended paper toy: fixed framing, tactile mounts, no autonomous decoration. */
#study[data-model=pendulums] .study-paper-art{cursor:grab;touch-action:none;width:min(100%,400px);background:radial-gradient(ellipse at 50% 82%,#b9a98422,transparent 58%)}
#study[data-model=pendulums] .study-paper-art>g{filter:drop-shadow(2px 3px 1px #80684855)}
#study[data-model=pendulums] .study-paper-art[data-dragging=true]{cursor:grabbing}
#study[data-model=pendulums] .study-paper-art:focus-visible>g{filter:drop-shadow(2px 3px 1px #80684855) drop-shadow(0 0 2px #779679)}

/* Keyboard cues stay on controls and artwork, never around the scene bounds. */
input:focus-visible,select:focus-visible{outline:none;filter:brightness(.85)}

.tile-puzzle-toggle,.tile-puzzle-tools button{min-height:44px;padding:8px 14px;border:0;border-radius:3px;background:#e4c995;color:var(--ink);font:15px Gelasio,Georgia,serif;box-shadow:0 3px 0 #bba680;cursor:pointer}
.tile-puzzle{width:min(100%,360px)}.tile-puzzle[hidden]{display:none}.tile-puzzle-board{width:100%;max-height:32vh;display:block;touch-action:none;overflow:visible}
.tile-puzzle-board polygon{stroke:#f1e8d4;stroke-width:1.5;stroke-linejoin:round}.tile-coral{fill:#c65a42}.tile-gold{fill:#d4a447}.tile-slot{fill:#d7c7a5}
.tile-pieces>g{cursor:grab;filter:drop-shadow(1px 2px 1px #71552c55);outline:none}.tile-pieces>g[aria-pressed=true]:not([data-placed=true]){filter:drop-shadow(2px 4px 1px #71552c88)}.tile-pieces>g:focus-visible polygon{stroke:var(--ink);stroke-width:2}.tile-pieces>g[data-placed=true]{filter:none;cursor:default}.tile-puzzle[data-dragging=true] .tile-pieces>g{cursor:grabbing}
.tile-puzzle-tools{display:flex;justify-content:center;gap:10px}.tile-puzzle output{display:block;font:14px Gelasio,Georgia,serif;margin-top:12px;min-height:32px}

/* Book composition: a left-hand opening, an illustration, then a marginal note.
   Keep the experiment frame fixed; asymmetry belongs inside the printed page. */
.study-story{align-items:flex-start;justify-content:flex-start;text-align:left;padding:clamp(20px,3.5vh,44px) clamp(20px,3vw,44px);gap:16px}
.study-story .issue{font-size:10px;letter-spacing:1.5px;margin-bottom:8px}
.study-story h2{font-size:clamp(28px,2.65vw,42px);line-height:1.08;letter-spacing:-.8px;max-width:95%;text-wrap:balance}
.study-story .study-paper-art{align-self:flex-end;width:100%;max-height:43vh;min-height:140px;flex:1;margin:10px -8px 0 0}
.study-story .story-manipulation{align-self:flex-end;text-align:right;font-style:italic!important;margin-right:8px}
.study-story-note{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:end;width:100%;margin-top:auto;padding-top:16px}
.study-story-note blockquote{font:italic clamp(19px,1.65vw,25px)/1.2 Gelasio,Georgia,serif;max-width:230px}
.study-story-note p{font:12px/1.55 Arimo,Arial,sans-serif;max-width:170px;color:#4d5c56;padding-bottom:3px}
.study-story .tile-puzzle{align-self:flex-end;margin-right:-8px;width:100%;max-width:400px}
.study-story .tile-puzzle-toggle{align-self:flex-end;font-size:13px;min-height:44px}
.study-story .tile-puzzle-tools{justify-content:flex-start}.study-story .tile-puzzle output{text-align:left}
@media(max-width:999px){
 #study[data-story=true] .study-story{align-items:flex-start;justify-content:flex-start;text-align:left;gap:12px;padding:22px 20px 24px}
 .study-story h2{font-size:clamp(28px,8vw,38px);max-width:94%}
 .study-story .study-paper-art{min-height:130px;max-height:39vh;margin:4px -8px 0 0}
 .study-story-note{gap:18px;padding-top:12px}.study-story-note blockquote{font-size:21px}.study-story-note p{font-size:12px}
 .study-story .tile-puzzle-board{max-height:29vh}
}
@media(max-height:500px) and (max-width:999px){
 #study[data-story=true] .study-story{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr;gap:6px 24px;padding:8px 20px;align-items:center}
 .study-story .issue{grid-column:1;margin:0}.study-story h2{grid-column:1;font-size:25px}
 .study-story .study-paper-art,.study-story .tile-puzzle{grid-column:2;grid-row:1/4;margin:0;min-height:0;max-height:47vh}
 .study-story .story-manipulation,.study-story .tile-puzzle-toggle{grid-column:2;grid-row:4;justify-self:end;margin:0}
 .study-story-note{grid-column:1;grid-row:3;display:block;margin:0;padding:0}.study-story-note blockquote{font-size:18px}.study-story-note p{font-size:11px;margin-top:8px}
 .study-story .tile-puzzle-board{max-height:28vh}.tile-puzzle output{margin:4px 0;min-height:0;font-size:11px}
}

@media(min-width:1000px){body[data-page=study] #study{grid-template-columns:1fr 1fr;gap:24px;background:linear-gradient(90deg,#fff8e833 49%,#7a644322 50%,#fff8e833 51%)}}

.tile-puzzle[data-complete=true] #pip-tile-puzzle>svg{animation:pip-puzzle-hop .5s ease-out}
@keyframes pip-puzzle-hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-9px) rotate(-8deg)}}
.tile-puzzle-tools{flex-wrap:wrap}.tile-puzzle-tools [hidden]{display:none}
.tile-puzzle[data-complete=true] .tile-pieces>g{filter:none}
@media(prefers-reduced-motion:reduce){.tile-puzzle[data-complete=true] #pip-tile-puzzle>svg{animation:none}}

.tile-discoveries polygon{fill:transparent;stroke:transparent;pointer-events:all;cursor:pointer;outline:none}
.tile-discoveries polygon[aria-pressed=true]{fill:#f5d47733;stroke:#283f42;stroke-width:2.5;stroke-linejoin:round;pointer-events:none}
.tile-discoveries polygon:focus-visible{stroke:#283f42;stroke-width:2.5}
.tile-puzzle[data-found="1"] #pip-tile-puzzle>svg{animation:pip-discovery-bow .55s ease-in-out;transform-origin:50% 100%}
@keyframes pip-discovery-bow{0%,100%{transform:rotate(0)}50%{transform:rotate(16deg)}}
@media(prefers-reduced-motion:reduce){.tile-puzzle[data-found="1"] #pip-tile-puzzle>svg{animation:none}}

#chapter-navigation #discovery-bookmark{min-width:66px;background:#dfbd7e;align-self:stretch;border-radius:0 0 8px 8px;font-size:13px}
.discovery-notebook{width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;padding:40px 32px 24px;border:0;background:var(--paper);color:var(--ink);box-shadow:8px 8px 0 #bba680;text-align:left}
.discovery-notebook::backdrop{background:#172d3255}.notebook-close{display:block;margin:0 0 24px auto;min-height:44px;border:0;background:transparent;color:var(--ink);font:15px Gelasio,Georgia}
.discovery-notebook h2{font:32px/1.1 Gelasio,Georgia;margin:20px 0}.discovery-notebook svg{display:block;width:100%;height:210px}.discovery-notebook polygon{fill:#d4a44744;stroke:#283f42;stroke-width:1.5;stroke-linejoin:round}
.discovery-notebook p{font:22px/1.3 Gelasio,Georgia}.discovery-notebook small{display:block;font:13px/1.5 Gelasio,Georgia}.discovery-notebook a{display:block;padding:16px 0;min-height:44px;text-decoration:underline}.discovery-notebook .notebook-storage{margin-top:24px;font:11px Arimo,Arial;color:#52615b}
@media(max-width:600px){#chapter-navigation{padding-left:8px;padding-right:8px;gap:6px}#chapter-navigation button{min-width:70px;font-size:13px}#chapter-position{font-size:10px}}

/* A separate leaf turns around the gutter; the book itself stays planted. */
.turning-page{position:fixed;z-index:11;pointer-events:none;transform-style:preserve-3d}
.turning-page-front,.turning-page-back{position:absolute;inset:0;backface-visibility:hidden;background-color:var(--paper);background-image:linear-gradient(90deg,#75614025,transparent 9%,#fff9e833 75%,#75614020);box-shadow:8px 2px 24px #352b2433;border-radius:0 6px 12px 0}
.turning-page-back{transform:rotateY(180deg);background-image:linear-gradient(90deg,#75614030,transparent 22%,#fff9e855 85%)}
.turning-page[data-direction=back] .turning-page-front,.turning-page[data-direction=back] .turning-page-back{border-radius:6px 0 0 12px;box-shadow:-8px 2px 24px #352b2433}
/* Small paper folds advertise dragging without covering the study controls. */
.page-corner{position:fixed;z-index:10;width:var(--control-target-min);height:var(--control-target-min);padding:0;border:0;touch-action:none;cursor:grab;background:linear-gradient(135deg,transparent 48%,#bba68088 50%,#fff7e3 55%);clip-path:polygon(100% 0,100% 100%,0 100%)}
.page-corner[data-edge=top]{transform:scaleY(-1);clip-path:none;background:none}
.page-corner[data-side=left]{transform:scaleX(-1)}
.page-corner[data-side=left][data-edge=top]{transform:scale(-1)}
.page-corner:active{cursor:grabbing}.page-corner:focus-visible{filter:brightness(.8)}
.page-corner[hidden]{display:none}

/* Reset stays beside the illustration, including the mobile story view. */
.story-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;flex-shrink:0}
.study-story .story-controls .story-manipulation{margin:0;text-align:left;align-self:center}
#study-story-reset{min-height:44px;flex-shrink:0;padding:8px 14px;border:0;border-radius:3px;background:#e4c995;color:var(--ink);font:15px Gelasio,Georgia,serif;box-shadow:0 3px 0 #bba680;cursor:pointer}
#study-story-reset:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(max-height:500px) and (max-width:999px){.story-controls{grid-column:2;grid-row:4}.story-controls .story-manipulation{font-size:11px!important}#study-story-reset{font-size:12px;padding:8px}}

/* Birds: one paper landscape, with the live model floating inside the illustration. */
body[data-exploring=true] .experiment{padding:16px 20px 6px;gap:8px;background:none}
body[data-exploring=true] .experiment-heading{position:relative;z-index:2;gap:10px}
body[data-exploring=true] .experiment-heading h2{font:600 clamp(22px,4vw,34px)/1 Gelasio,Georgia;letter-spacing:-1px}
body[data-exploring=true] #leave-experiment,body[data-exploring=true] .next-chapter{border:0;background:transparent;border-radius:0;padding:8px 0;font-size:12px;min-width:44px}
body[data-exploring=true] .next-chapter{font-size:26px}
body[data-exploring=true] .exhibit{border:0;border-radius:0;background:transparent;padding:0;box-shadow:none;gap:0;grid-template-rows:minmax(120px,1fr) auto auto auto}
body[data-exploring=true] .window{border:0;border-radius:48% 48% 3px 3px / 12% 12% 3px 3px;background:#eee5cd url('flock-landscape.svg') center/cover;box-shadow:none;isolation:isolate}
body[data-exploring=true] #model{position:absolute;inset:0;z-index:1}
body[data-exploring=true] .pip-guide{top:auto;bottom:17px;left:16px;right:16px;align-items:flex-end;z-index:2;color:#283f42;gap:8px}
body[data-exploring=true] .pip-guide-portrait{width:80px;height:90px;filter:drop-shadow(2px 5px 2px #283f4225);transform:rotate(-8deg)}
body[data-exploring=true] .pip-guide p{font:italic 15px/1.2 Gelasio,Georgia;text-shadow:none;background:#faf1dce8;padding:10px 12px;border-radius:2px 12px 12px 0;max-width:210px;box-shadow:0 2px 0 #89795722}
body[data-exploring=true] .result{z-index:2;top:20px;bottom:auto;left:24px;color:#415950;font:11px/1.4 Cousine,monospace;max-width:65%}
body[data-exploring=true] .actions{padding:12px 0 8px;gap:12px;align-items:center}
body[data-exploring=true] .actions button{border:0;background:transparent;box-shadow:none;border-radius:0;font:15px Gelasio,Georgia;color:var(--ink);padding:8px;min-width:60px;min-height:44px}
body[data-exploring=true] .actions #turn{background:#bd543d;color:#fff5df;border-radius:50% 46% 44% 49% / 8% 12% 8% 12%;box-shadow:0 3px 0 #8e402c;flex:1}
body[data-exploring=true] .actions #play{min-width:60px}
body[data-exploring=true] .knobs{border:0;border-top:1px solid #bba68066;border-radius:0;background:none;padding:10px 4px 0;gap:24px}
body[data-exploring=true] .knobs label>span{font:13px Gelasio,Georgia;gap:3px}
body[data-exploring=true] .knobs output{border:0;background:none;padding:0;min-width:0;font:11px Cousine,monospace;color:#6b796c}
body[data-exploring=true] .knobs small{display:none}
body[data-exploring=true] .knobs input{accent-color:#657f6b}
body[data-exploring=true] details{padding:0 4px;font-size:11px}
body[data-exploring=true] summary{font-weight:normal;opacity:.8}
body[data-exploring=true] #loading{background:#eee5cd;color:#283f42}
@media(min-width:1000px){body[data-exploring=true] .experiment{grid-template-columns:.65fr 1fr;padding:24px 5vw;gap:16px 6vw}body[data-exploring=true] .experiment-note{align-items:flex-start;text-align:left;padding:24px 0}body[data-exploring=true] .experiment-note h2{font:clamp(36px,4vw,64px)/1.02 Gelasio,Georgia;letter-spacing:-2px}.experiment-note .book-illustration{display:none}body[data-exploring=true] .experiment-note p{font:italic 24px/1.3 Gelasio,Georgia;max-width:280px}body[data-exploring=true] .window{min-height:200px}}
@media(max-width:360px){body[data-exploring=true] .experiment{padding:10px 12px 4px}body[data-exploring=true] .experiment-heading h2{font-size:22px}body[data-exploring=true] .pip-guide-portrait{width:58px;height:65px}body[data-exploring=true] .pip-guide p{font-size:13px}body[data-exploring=true] .knobs{gap:12px}}
@media(max-height:500px) and (min-width:600px){body[data-exploring=true] .exhibit{grid-template-columns:minmax(0,1fr) 240px;grid-template-rows:auto 1fr auto;gap:6px 18px}body[data-exploring=true] .window{grid-row:1/4}body[data-exploring=true] .knobs{grid-template-columns:1fr;padding-top:0;gap:0}body[data-exploring=true] .pip-guide-portrait{width:50px;height:56px}body[data-exploring=true] .pip-guide p{font-size:12px}body[data-exploring=true] .result{top:12px}}
body[data-exploring=true] .result{top:40px;left:30px;right:30px;max-width:none;text-align:center}
@media(max-height:500px) and (min-width:600px){body[data-exploring=true] .result{top:26px;font-size:10px}}

/* The controls sit on the same paper ground as Pip, rather than in a panel. */
body[data-exploring=true] .exhibit{background:#e6d2a7;border-radius:48% 48% 3px 3px / 8% 8% 3px 3px}
body[data-exploring=true] .window{border-radius:48% 48% 0 0 / 12% 12% 0 0}
body[data-exploring=true] .actions{padding:8px 14px 4px;gap:8px}
body[data-exploring=true] .actions #play,body[data-exploring=true] .actions #reset{background:#f4e6c7;border-radius:50%;box-shadow:0 3px 0 #b69c70;min-width:56px}
body[data-exploring=true] .actions #turn{background-color:#b9533c;background-image:repeating-linear-gradient(5deg,transparent 0 3px,#fff2 4px,transparent 5px);transform:rotate(-1deg)}
body[data-exploring=true] .actions button:active{transform:translateY(2px);box-shadow:0 1px 0 #987b51}
body[data-exploring=true] .knobs{margin:4px 14px 0;padding:8px 0 0;border-top:1px solid #9d825b44}
body[data-exploring=true] .knobs input{appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize;height:44px}
body[data-exploring=true] .knobs input::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:#9e8059;box-shadow:0 1px 0 #fff7df}
body[data-exploring=true] .knobs input::-webkit-slider-thumb{-webkit-appearance:none;width:25px;height:25px;margin-top:-10px;border-radius:50%;background:#708770;border:5px solid #f4e6c7;box-shadow:0 2px 0 #8c7755,0 0 0 1px #8c775544}
body[data-exploring=true] .knobs input::-moz-range-track{height:5px;background:#9e8059}
body[data-exploring=true] .knobs input::-moz-range-thumb{width:15px;height:15px;border:5px solid #f4e6c7;border-radius:50%;background:#708770}
body[data-exploring=true] .knobs input:focus-visible{outline:2px solid #526e60;outline-offset:1px;border-radius:4px}
body[data-exploring=true] .exhibit>details{padding:0 16px 4px}
@media(min-width:1000px){body[data-exploring=true] main{max-width:none}body[data-exploring=true] .experiment{grid-template-columns:minmax(220px,.36fr) minmax(0,1fr);padding:20px 3vw 10px;gap:12px 3vw}body[data-exploring=true] .experiment-note h2{font-size:clamp(34px,3.4vw,58px)}body[data-exploring=true] .window{background-size:100% 100%}body[data-exploring=true] .pip-guide-portrait{width:100px;height:110px}body[data-exploring=true] .pip-guide p{font-size:19px;max-width:300px}body[data-exploring=true] .knobs{gap:48px}body[data-exploring=true] .actions{padding-top:12px}}
@media(max-height:500px) and (min-width:600px){body[data-exploring=true] .exhibit{background:transparent;border-radius:0}body[data-exploring=true] .actions{padding:4px 0}body[data-exploring=true] .knobs{margin:0;padding:4px 0}body[data-exploring=true] .exhibit>details{padding:0}}
/* Birds and scenery are now rendered together through the same 3D camera. */
body[data-exploring=true] .window{background:#eee5cd;background-image:none}
/* Safari's visible toolbar can leave a landscape content area below 300px. */
@media(max-height:500px) and (min-width:600px){
 body[data-exploring=true] .experiment{padding:4px 12px;gap:4px}
 body[data-exploring=true] .experiment-heading{min-height:44px}
 body[data-exploring=true] .experiment-heading h2{font-size:23px}
 body[data-exploring=true] .exhibit{grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:44px auto minmax(0,1fr);gap:4px 12px}
 body[data-exploring=true] .window{min-height:0}
 body[data-exploring=true] .knobs{grid-template-columns:1fr 1fr;gap:12px}
 body[data-exploring=true] .knobs label>span{font-size:11px}
 body[data-exploring=true] .pip-guide{bottom:8px;left:8px}
 body[data-exploring=true] .pip-guide-portrait{width:42px;height:46px}
 body[data-exploring=true] .pip-guide p{font-size:11px;max-width:180px;padding:6px}
 body[data-exploring=true] summary{min-height:32px}
 body[data-page=waves] #waves{padding:4px 12px;gap:4px}
 .wave-instrument{grid-template-rows:44px auto minmax(0,1fr);padding:4px;gap:4px}
 .wave-controls{grid-template-columns:1fr 1fr;gap:8px;padding:4px}
 .wave-stage{min-height:0}
 .wave-stage>p{font-size:11px;padding:4px 8px}
}
/* A quiet paper label stays legible when the shared-camera sky moves behind it. */
body[data-exploring=true] #result{display:inline-block;padding:4px 9px;background:#f1e8d4e8;border-radius:2px;font-size:10px}
body[data-exploring=true] #turn span{font-family:Gelasio,Georgia,serif;font-variant-emoji:text}
@media(max-height:500px) and (min-width:600px){body[data-exploring=true] .result{top:12px;left:12px;right:auto;max-width:60%;text-align:left}}
/* Birds hints are optional; the character is the quiet reopen control. */
.pip-guide #pip-dialogue{position:relative;min-width:0;max-width:270px;pointer-events:auto}
.pip-guide #pip-dialogue[hidden]{display:none}
body[data-exploring=true] .pip-guide #pip-dialogue p{padding-right:42px;max-width:none}
.pip-guide #pip-dialogue-close{position:absolute;right:0;top:0;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--ink);font:24px Gelasio,Georgia;cursor:pointer;touch-action:manipulation}
.pip-guide #pip-dialogue-toggle{pointer-events:auto;border:0;padding:0;background-color:transparent;cursor:pointer;touch-action:manipulation}
.pip-guide #pip-dialogue-toggle:focus-visible,.pip-guide #pip-dialogue-close:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media(max-width:600px){.pip-guide #pip-dialogue{max-width:230px}}
/* Shared optional Pip asides across the book's three materials. */
.pip-optional-hint{display:flex;align-items:center;gap:8px;min-width:0}
.pip-optional-hint>.pip-guide-portrait{width:44px;height:48px;flex:none;border:0;padding:0;background-color:transparent;cursor:pointer}
.pip-optional-dialogue{position:relative;min-width:0;padding-right:36px}
.pip-optional-dialogue[hidden],#pip-whisper-dialogue[hidden]{display:none}
.pip-optional-dialogue blockquote{margin:0}
.pip-hint-close{position:absolute;right:0;top:0;width:44px;height:44px;border:0;background:transparent;color:var(--ink);font:24px Gelasio,Georgia;cursor:pointer;touch-action:manipulation}
.pip-optional-hint button:focus-visible,.pip-hint-close:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wave-story>.pip-optional-hint{max-width:350px}
.wave-story .pip-optional-dialogue p{font:italic 22px/1.3 Gelasio,Georgia;margin:0}
#pip-whisper-dialogue{position:absolute;right:18px;top:76px;z-index:3;max-width:230px;background:var(--paper);border:1px solid var(--edge);border-radius:4px;box-shadow:4px 5px 0 #283f4226}
#pip-whisper-dialogue #pip-whisper{position:static;margin:0;padding:16px 42px 16px 18px;border:0;box-shadow:none;background:none}
@media(max-width:700px){#pip-whisper-dialogue{top:70px;right:14px;max-width:220px}.study-story-note .pip-optional-hint{max-width:100%}.study-story-note .pip-optional-dialogue blockquote{font-size:17px}}
@media(max-height:500px){#pip-whisper-dialogue{top:68px}.study-story-note .pip-optional-hint>.pip-guide-portrait{width:40px;height:44px}}
/* On the introduction, world choices sit above chapter navigation. */
body[data-page=chapter][data-chapter-navigation=true] .world-picker{bottom:calc(48px + env(safe-area-inset-bottom))}
/* The live chapters share the crafted page, with a material recipe per world. */
body{--scene-paper:#eee5cd;--scene-ground:#e6d2a7;--scene-edge:#b69c70}
body[data-world=plush]{--paper:#eee8ee;--scene-paper:#f1ebef;--scene-ground:#ded3df;--scene-edge:#ad9cb4}
body[data-world=odd]{--paper:#eee4cf;--ink:#343144;--accent:#b65738;--scene-paper:#f2e6ce;--scene-ground:#dbc49b;--scene-edge:#9d7c50}
body[data-page=study] main,body[data-page=waves] main{max-width:none}
body[data-page=study] #study,body[data-page=waves] #waves{padding:16px 20px 6px;gap:8px;background:none}
.study-instrument,.wave-instrument{border:0!important;border-radius:3px!important;padding:0!important;box-shadow:none!important;background:var(--scene-ground)!important;gap:0}
.study-stage,.wave-stage{background:var(--scene-paper)!important;color:var(--ink);border-radius:48% 48% 0 0 / 5% 5% 0 0;box-shadow:none}
.study-stage>p,.wave-stage>p{color:var(--ink);font:14px/1.3 Gelasio,Georgia,serif;padding:14px 18px 6px}
.study-stage output,.wave-readout,.wave-readout output{color:var(--ink)!important;font:11px/1.4 Cousine,monospace}
.study-stage output{padding:8px 16px}
.study-heading,.wave-heading{min-height:44px}
.study-heading h2,.wave-heading h2{font:600 clamp(20px,3vw,32px)/1.05 Gelasio,Georgia;letter-spacing:-.7px}
.study-heading a,.wave-heading a,#study-story-toggle{border:0;background:transparent;box-shadow:none;padding:8px 0;color:var(--ink);min-height:44px;border-radius:0;font:12px Gelasio,Georgia}
.study-actions,.wave-actions{padding:10px 12px 6px;gap:10px}
.study-actions button,.wave-actions button{border:0!important;min-height:44px;padding:8px 14px;background:var(--paper);color:var(--ink);font:15px Gelasio,Georgia;border-radius:50%;box-shadow:0 3px 0 var(--scene-edge)}
#study-play,#wave-add{background-color:var(--accent);background-image:repeating-linear-gradient(5deg,transparent 0 3px,#fff2 4px,transparent 5px);color:#fff7e5;border-radius:50% 46% 44% 49% / 8% 12% 8% 12%;box-shadow:0 3px 0 var(--scene-edge)}
.study-controls,.wave-controls{margin:4px 14px 0;padding:10px 0 0;border:0;border-top:1px solid #9d825b44;background:none;gap:24px}
.study-controls label,.wave-controls label{font:13px Gelasio,Georgia;color:var(--ink)}
.study-controls output,.wave-controls output{font:11px Cousine,monospace;color:var(--ink);background:none;border:0}
.study-controls input,.wave-controls input{appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize;min-height:44px;margin:0;width:100%;accent-color:var(--accent)}
.study-controls input::-webkit-slider-runnable-track,.wave-controls input::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:var(--scene-edge);box-shadow:0 1px 0 #fff7df}
.study-controls input::-webkit-slider-thumb,.wave-controls input::-webkit-slider-thumb{-webkit-appearance:none;width:25px;height:25px;margin-top:-10px;border-radius:50%;background:var(--ink);border:5px solid var(--paper);box-shadow:0 2px 0 var(--scene-edge)}
.study-instrument details,.wave-instrument details{padding:2px 14px 4px;font-size:11px}
.study-instrument summary,.wave-instrument summary{font-weight:normal;min-height:36px}
.study-instrument details[open],.wave-instrument details[open]{background:var(--paper);padding:12px 16px;box-shadow:0 -4px 20px #283f4222;border:0}
.study-controls input:focus-visible,.wave-controls input:focus-visible{outline:2px solid var(--ink);outline-offset:1px;border-radius:4px}
.study-actions button:active,.wave-actions button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--scene-edge)}
@media(min-width:1000px){body[data-page=study] #study,body[data-page=waves] #waves{grid-template-columns:minmax(280px,.7fr) minmax(0,1fr);gap:12px 4vw;padding:20px 3vw 10px}.wave-story{align-items:flex-start;text-align:left;padding:24px 0}.wave-story h2{font:clamp(36px,4vw,60px)/1.04 Gelasio,Georgia;letter-spacing:-1.5px}.wave-story .wave-paper-wheel{align-self:center;width:210px;height:210px}.wave-story small{font:13px/1.5 Gelasio,Georgia;max-width:280px}.study-story{padding:12px 16px}}
@media(max-width:600px){body[data-page=study] #study,body[data-page=waves] #waves{padding:8px 12px 4px}.study-heading h2,.wave-heading h2{font-size:20px}.study-controls,.wave-controls{gap:12px;margin:4px 10px 0}.study-controls label,.wave-controls label{font-size:12px}.study-stage>p,.wave-stage>p{font-size:12px;padding:12px 12px 4px}}
@media(max-height:500px) and (min-width:600px){body[data-page=study] #study,body[data-page=waves] #waves{padding:4px 12px;gap:4px}.study-instrument,.wave-instrument{grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:44px auto minmax(0,1fr);gap:4px 12px;background:transparent!important}.study-stage,.wave-stage{grid-row:1/4;min-height:0}.study-actions,.wave-actions{padding:0;gap:6px}.study-controls,.wave-controls{grid-template-columns:1fr 1fr;margin:0;padding:6px 0 0;gap:12px}.study-controls label,.wave-controls label{font-size:11px}.study-stage>p,.wave-stage>p{font-size:11px;padding:8px 12px 4px}}
body[data-exploring=true] .exhibit{background:var(--scene-ground)}
body[data-exploring=true] .window{background:var(--scene-paper)}
body[data-world=plush] .study-instrument,body[data-world=plush] .wave-instrument{border-radius:18px!important}
body[data-world=plush] #study-play,body[data-world=plush] #wave-add{border-radius:18px;background-image:repeating-linear-gradient(0deg,transparent 0 2px,#fff1 2px 3px);box-shadow:0 3px 0 var(--scene-edge),inset 0 2px 0 #fff4}
body[data-world=odd] #study-play,body[data-world=odd] #wave-add{background-image:repeating-linear-gradient(3deg,transparent 0 5px,#4c2f231c 6px,transparent 7px)}
#study-hint,#study-canvas:focus-visible+#study-hint,#study-canvas[data-dragging=true]+#study-hint{color:var(--ink);background:var(--scene-paper);padding:3px 8px;justify-self:center}
body[data-world=plush] .study-stage,body[data-world=plush] .wave-stage{background-image:repeating-linear-gradient(0deg,transparent 0 3px,#88738f06 3px 4px),repeating-linear-gradient(90deg,transparent 0 3px,#88738f06 3px 4px)!important}
body[data-world=odd] .study-stage,body[data-world=odd] .wave-stage{background-image:repeating-linear-gradient(3deg,transparent 0 12px,#7e542d08 13px,transparent 14px)!important}

/* Keep gesture instructions in their own row at short landscape heights. */
.study-stage{grid-template-rows:auto minmax(0,1fr) auto auto}
#study[data-model=migration] .study-stage{grid-template-rows:auto 64px minmax(0,1fr) auto auto}
#study-hint{position:static;justify-self:center;padding:3px 8px;margin:0;max-width:100%}
/* Material worlds: stitched cloth and a horizontally ruled workshop notebook. */
body[data-world=odd] .study-stage,body[data-world=odd] .wave-stage{
 background-image:repeating-linear-gradient(0deg,transparent 0 23px,#71889838 23px 24px)!important;
 background-size:100% 24px;background-position:0 0;
 border-radius:2px;
}
body[data-world=plush] .study-stage,body[data-world=plush] .wave-stage{
 border-radius:26px 26px 14px 14px;
 box-shadow:inset 0 3px 8px #fff8,inset 0 -3px 6px #89768f16;
}
body[data-world=plush] .study-actions button,body[data-world=plush] .wave-actions button{
 border-radius:20px;box-shadow:0 3px 0 var(--scene-edge),inset 0 0 0 3px var(--scene-paper),inset 0 0 0 4px #88738f44;
}
body[data-world=plush] .study-controls input::-webkit-slider-thumb,body[data-world=plush] .wave-controls input::-webkit-slider-thumb{
 background:var(--accent);border:6px solid var(--paper);box-shadow:0 2px 3px #423c5633,inset 0 0 0 1px #fff8;
}
body[data-world=odd] .study-actions button,body[data-world=odd] .wave-actions button{
 background-color:#dfbd83;background-image:repeating-linear-gradient(0deg,transparent 0 5px,#7d512221 5px 6px);color:#3d3529;box-shadow:0 3px 0 #956f44,inset 0 1px 0 #fff6;
}
body[data-world=odd] .study-controls input::-webkit-slider-thumb,body[data-world=odd] .wave-controls input::-webkit-slider-thumb{
 background:#65482e;border:6px solid #dcb47a;box-shadow:0 2px 0 #9d7c50,inset 0 0 0 2px #f2d19a;
}
.wave-stage{position:relative}
/* Keep canvas intrinsic pixel dimensions out of grid track sizing in Safari. */
.study-viewport{position:relative;min-width:0;min-height:0;grid-row:2}
.study-viewport>#study-canvas{position:absolute;inset:0;width:100%;height:100%}
/* Migration now shares the live passenger instead of adding a separate strip. */
#study[data-model=migration] .study-stage{grid-template-rows:auto minmax(0,1fr) auto auto}
.study-stage>.pip-live,.wave-stage>.pip-live{
 position:absolute;left:0;top:0;z-index:2;width:44px;height:44px;min-height:44px;min-width:44px;
 margin:0;padding:0;border:0;border-radius:0;background-color:transparent;
 transform:none;cursor:pointer;filter:drop-shadow(1px 2px 1px #283f4228);
}
.pip-live-dialogue{position:absolute;left:12px;right:12px;bottom:54px;z-index:3;padding:12px 44px 12px 14px;background:var(--paper);color:var(--ink);box-shadow:0 3px 0 var(--scene-edge);border-radius:3px 16px 16px 16px;font:italic 15px/1.35 Gelasio,Georgia}
.pip-live-dialogue p{margin:0;padding:0;font:inherit}
.pip-live:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Printed navigation: one folded vector, independent of the platform's fonts. */
.book-mark{display:block;width:28px;height:16px;flex:none;overflow:visible;pointer-events:none;filter:drop-shadow(0 1px 0 #283f4218)}
.book-mark--back{transform:scaleX(-1)}
.book-mark--launch{transform:rotate(-28deg)}
.book-mark--up{transform:rotate(-90deg)}
[data-book-mark]{display:inline-flex;align-items:center}
#chapter-navigation #chapter-previous,#chapter-navigation #chapter-next{display:inline-flex;align-items:center;gap:9px;padding:0 10px;font:italic 15px Gelasio,Georgia,serif;min-height:44px}
#chapter-navigation #chapter-next{justify-content:flex-end}
#chapter-position{font:italic 13px Gelasio,Georgia,serif;font-variant-numeric:tabular-nums;letter-spacing:.6px;color:var(--ink);opacity:.75}
.contents-pagination button,.contents-heading>a,#close-book,#leave-experiment,.study-heading>a,.wave-heading>a{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.study-heading .book-mark,.wave-heading .book-mark,#leave-experiment .book-mark,.contents-heading .book-mark,#close-book .book-mark{width:19px;height:14px}
.experiment-heading .next-chapter .book-mark{width:36px;height:24px}
.begin .book-mark,.waves-entry .book-mark{width:31px;height:20px}
#turn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
#turn .book-mark{width:25px;height:18px}
header a:last-child,.exhibit details>a,.exhibit details a,.postcard>a,.desktop-shots a>span{display:inline-flex;align-items:center;gap:7px}
.exhibit summary,.study-instrument summary,.wave-instrument summary{list-style:none;display:flex;align-items:center;gap:8px}
.exhibit summary::-webkit-details-marker,.study-instrument summary::-webkit-details-marker,.wave-instrument summary::-webkit-details-marker{display:none}
summary>.book-mark--disclosure{width:16px;height:12px;transition:transform 160ms ease-out;opacity:.8}
details[open]>summary>.book-mark--disclosure{transform:rotate(90deg)}
@media(hover:hover) and (pointer:fine){
 #chapter-navigation #chapter-previous:not(:disabled):hover,#chapter-navigation #chapter-next:not(:disabled):hover{color:var(--accent)}
}
@media(max-width:360px){#chapter-navigation #chapter-previous,#chapter-navigation #chapter-next{gap:5px;padding:0 4px;font-size:13px}.book-mark{width:24px}}
@media(prefers-reduced-motion:reduce){summary>.book-mark--disclosure{transition:none}}

.tile-puzzle-tools button,#skip-journey,.discovery-notebook a{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.tile-puzzle-tools .book-mark{width:23px;height:18px}
.contents-pagination button{border:0;background:var(--scene-ground,#e8d3a7);box-shadow:0 2px 0 var(--scene-edge,var(--edge));border-radius:2px 9px 2px 4px;font:italic 14px Gelasio,Georgia,serif;padding:8px 16px}
.contents-pagination button:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px 0 var(--scene-edge,var(--edge))}
.contents-heading>a,#close-book{font:italic 14px Gelasio,Georgia,serif}
.contents-pagination output{white-space:nowrap;flex:none;font:italic 13px Gelasio,Georgia,serif;letter-spacing:.5px}
.contents-pagination button{white-space:nowrap;min-width:0}
.exhibit summary,.study-instrument summary,.wave-instrument summary{font:italic 13px/1.3 Gelasio,Georgia,serif}
@media(max-width:360px){.contents-pagination{gap:12px}.contents-pagination button{padding:8px 10px;font-size:13px}.contents-pagination .book-mark{width:22px}}
.discovery-notebook svg.book-mark{width:28px;height:16px}

/* Picture-book furniture: warm cutouts and pencil details, with steady hit areas. */
.book-mark{--mark-fill:#edc15e;color:var(--ink);filter:drop-shadow(0 1px 0 #8c6a3528)}
#chapter-navigation #chapter-previous,#chapter-navigation #chapter-next{font-style:normal;font-weight:700;gap:8px}
#chapter-navigation .book-mark{width:32px;height:19px}
#chapter-position{font-style:normal;font-weight:700;opacity:.85;position:relative}
#chapter-position::after{content:'';position:absolute;width:20px;left:calc(50% - 10px);bottom:-5px;border-bottom:2px solid var(--edge);border-radius:50%;transform:rotate(-4deg);pointer-events:none}
#chapter-navigation #discovery-bookmark{position:relative;font:700 14px Gelasio,Georgia,serif;border-radius:2px 3px 1px 2px}
#discovery-bookmark::after{content:'';position:absolute;bottom:-1px;left:calc(50% - 7px);border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:6px solid var(--paper);pointer-events:none}
.contents-pagination button{font-style:normal;font-weight:700;border-radius:7px 4px 9px 5px}
.contents-pagination output{font-style:normal;font-weight:700}
.contents-heading>a,#close-book{font-style:normal;font-weight:700}
#contents-title{position:relative}
.contents-star{position:absolute;right:-21px;top:-9px;transform:rotate(11deg);pointer-events:none}
.contents-star .book-mark{width:32px;height:24px;color:var(--accent);--mark-fill:#edc15e;filter:none}
@media(max-width:600px){.contents-star{right:-12px;top:-14px}.contents-star .book-mark{width:27px;height:21px}}
@media(max-width:360px){#chapter-navigation #chapter-previous,#chapter-navigation #chapter-next{font-size:13px;gap:5px}#chapter-navigation .book-mark{width:26px;height:17px}}

/* Front matter follows the same crafted book language as the experiments. */
body[data-page=chapter] .intro{font:18px/1.5 Gelasio,Georgia,serif;max-width:34ch}
body[data-page=chapter] .welcome-copy>.issue{margin:0 0 18px;font-size:10px;letter-spacing:1.3px}
body[data-page=chapter] .begin,body[data-page=chapter] .waves-entry{font:700 16px Gelasio,Georgia,serif;border:0;min-height:48px;padding:12px 16px;box-shadow:0 3px 0 var(--scene-edge,var(--edge));border-radius:7px 3px 9px 4px;transform:none}
body[data-page=chapter] .waves-entry{background:var(--scene-ground,#e7d2ac);color:var(--ink)}
body[data-page=chapter][data-world=plush] .begin,body[data-page=chapter][data-world=plush] .waves-entry{border-radius:22px}
body[data-page=chapter][data-world=odd] .begin,body[data-page=chapter][data-world=odd] .waves-entry{border-radius:3px 5px 2px 3px}
body[data-page=chapter] #close-book,body[data-page=chapter] .contents-link{background:var(--paper);color:var(--ink);border-radius:6px 3px 7px 3px;box-shadow:0 2px 0 #283f421a;font:700 13px Gelasio,Georgia,serif;min-height:44px;text-decoration:none;padding:8px 12px}
#open-book,.opening-cover button{font:700 16px Gelasio,Georgia,serif;border-radius:4px 2px 6px 2px;text-decoration:none}
.chapter-card{border-bottom:0}
.chapter-number{font:10px Gelasio,Georgia,serif;letter-spacing:1.1px;color:var(--ink);opacity:.75}
.world-picker button span{font:italic 10px Gelasio,Georgia,serif;letter-spacing:.4px}
@media(max-width:700px){body[data-page=chapter] .intro{font-size:15px;line-height:1.45;max-width:32ch}body[data-page=chapter] .begin,body[data-page=chapter] .waves-entry{font-size:14px;padding:10px 14px}}
@media(max-height:500px) and (min-width:701px){body[data-page=chapter] .intro,body[data-page=chapter] .issue{display:none}}

body[data-page=chapter] .welcome h1{font:700 clamp(42px,4.2vw,68px)/.98 Gelasio,Georgia,serif;letter-spacing:-2px;text-transform:none}
body[data-page=chapter] .welcome .intro{font:18px/1.5 Gelasio,Georgia,serif;max-width:34ch}
@media(max-width:700px){body[data-page=chapter] .welcome h1{font-size:38px;letter-spacing:-1px}body[data-page=chapter] .welcome .intro{font-size:15px;line-height:1.45;max-width:32ch}}
@media(max-height:500px) and (min-width:701px){body[data-page=chapter] .welcome h1{font-size:32px}body[data-page=chapter] .welcome .intro{display:none}}

/* Staircase keeps step, rotation and reveal independently adjustable. */
#study[data-model=stairs] .study-controls label:last-child{grid-column:1/-1}

/* Public-name trial: a storybook title shared with the opening leaf. */
#book-cover h1,.opening-cover h1{font-size:clamp(26px,7.5vw,42px);line-height:1.1;letter-spacing:-1.3px;white-space:nowrap;max-width:100%}

/* The detailed lab is a visible chapter action, not a hidden explanation link. */
.chapter-lab-link{display:inline-flex;align-items:center;justify-content:center;min-height:var(--control-target-min);padding:8px 12px;font:700 14px Gelasio,Georgia,serif;text-decoration:underline;text-underline-offset:4px;white-space:nowrap;color:var(--ink);flex-shrink:0}
.chapter-lab-link[hidden]{display:none!important}
.experiment-heading>div{min-width:0;flex:1}
.study-actions{flex-wrap:wrap}
.study-actions .chapter-lab-link{margin-left:auto}

.wave-heading h2{min-width:0;flex:1}
@media(max-width:700px){body[data-exploring=true] .experiment-heading h2{font-size:18px}.experiment-heading .chapter-lab-link,.wave-heading .chapter-lab-link{padding:8px;min-width:var(--control-target-min)}}

/* Fixed corners cannot grow over the prompt on tall, narrow screens. */
body[data-world=paper] .study-stage,body[data-world=paper] .wave-stage{border-radius:var(--paper-stage-corner) var(--paper-stage-corner) 0 0}

/* Keep the small folded-paper drawing, with a full finger-sized top grip. */
.page-corner[data-edge=top]::before{content:'';position:absolute;right:0;bottom:0;width:min(var(--page-corner-fold-size),100%);height:min(var(--page-corner-fold-size),100%);background:linear-gradient(135deg,transparent 48%,#bba68088 50%,#fff7e3 55%);clip-path:polygon(100% 0,100% 100%,0 100%);pointer-events:none}

/* Keep chapter controls outside the corner grips, in both directions. */
body[data-page=study] .study-heading,body[data-page=waves] .wave-heading,body[data-page=experiment] .experiment-heading{padding-top:var(--page-heading-inset);min-height:calc(var(--control-target-min) + var(--page-heading-inset))}
body[data-page=experiment] .experiment,body[data-page=waves] #waves,body[data-page=study] #study{grid-template-rows:auto minmax(0,1fr)}
body[data-world=paper] .study-stage>p,body[data-world=paper] .wave-stage>p{padding-inline:var(--paper-prompt-inset)}