@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/interactive-books/font-atkinson-hyperlegible-bc8825fd435d4aa8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/interactive-books/font-atkinson-hyperlegible-d64ba838ef5472bb.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/interactive-books/font-atkinson-hyperlegible-140e2bd25a7315c8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/interactive-books/font-caveat-891951df5e8b5b0f.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/interactive-books/font-caveat-891951df5e8b5b0f.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/interactive-books/font-fraunces-13cd664e0f8bff71.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/interactive-books/font-fraunces-7234ed860a9cc830.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/interactive-books/font-fraunces-7234ed860a9cc830.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/interactive-books/font-pacifico-99ec044ad9040a70.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root{
  color-scheme: light;
  --page:#E9E2D2; --paper:#FBF7EC; --paper-2:#F1EADB; --ink:#2A1F1A; --ink-2:#5A4A40; --muted:#75655A; --line:#D9CDB8;
  --accent:#C8412C; --accent-ink:#FFFFFF; --mint:#2F7D6E; --focus:#1F5FBF;
  --shadow:0 14px 34px rgba(42,31,26,.18),0 3px 8px rgba(42,31,26,.12);
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ color-scheme:dark; --page:#1A1614; --paper:#27211D; --paper-2:#312924; --ink:#F3ECE2; --ink-2:#D8CCBE; --muted:#A8998A; --line:#463A31; --accent:#F07A5F; --accent-ink:#1A1210; --mint:#7FC2B4; --focus:#8FB8F5; --shadow:0 14px 34px rgba(0,0,0,.5),0 3px 8px rgba(0,0,0,.4); }
}
:root[data-theme="dark"]{ color-scheme:dark; --page:#1A1614; --paper:#27211D; --paper-2:#312924; --ink:#F3ECE2; --ink-2:#D8CCBE; --muted:#A8998A; --line:#463A31; --accent:#F07A5F; --accent-ink:#1A1210; --mint:#7FC2B4; --focus:#8FB8F5; --shadow:0 14px 34px rgba(0,0,0,.5),0 3px 8px rgba(0,0,0,.4); }
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{margin:0}
body{background:var(--page);color:var(--ink);font-family:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.book{max-width:1400px;margin:0 auto;padding:14px clamp(10px,2.5vw,26px) 26px}
.book:fullscreen{max-width:none;width:100%;height:100%;padding:12px;background:#120E0C;display:flex;flex-direction:column;justify-content:center;gap:10px}
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:8px 16px;flex-wrap:wrap;margin:4px 2px 12px}
.book:fullscreen .top{display:none}
.top h1{margin:0;font-family:Pacifico,"Brush Script MT","Segoe Script",cursive;font-weight:400;font-size:clamp(1.6rem,1rem + 2.2vw,2.5rem);line-height:1.2;color:var(--accent)}
.top p{margin:0;color:var(--muted);font-weight:700}
.stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#E8D9BC;box-shadow:var(--shadow);container-type:inline-size;isolation:isolate;user-select:none;-webkit-user-select:none}
.book:fullscreen .stage{border-radius:6px;width:min(100%,calc((100vh - 110px) * 16 / 9));margin:0 auto}
.stage>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
#world{transition:opacity .35s}
.stage.fading #world{opacity:0}
.grain{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:var(--grain);background-size:260px;mix-blend-mode:multiply;opacity:.38}
.ov{position:absolute;inset:0;z-index:3}
.hs{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.45cqw;border:0;background:none;padding:0;cursor:pointer;color:#2A1F1A}
.hs i{position:relative;width:max(40px,4.4cqw);height:max(40px,4.4cqw);border-radius:50%;display:grid;place-items:center;background:#FFF6E4;border:max(3px,.32cqw) solid var(--c,#C8412C);color:var(--c,#C8412C);box-shadow:0 .4cqw 1cqw rgba(42,31,26,.32)}
.hs i::after{content:"";position:absolute;inset:-.6cqw;border-radius:50%;border:.3cqw solid var(--c,#C8412C);opacity:0;animation:pulse 2.3s ease-out infinite}
.hs i svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.hs span{font-size:max(11px,1.25cqw);font-weight:700;background:#FFF6E4;padding:.2cqw .9cqw;border-radius:99px;white-space:nowrap;box-shadow:0 .2cqw .6cqw rgba(42,31,26,.25)}
.hs.on i{background:var(--c,#C8412C);color:#fff}
@keyframes pulse{0%{transform:scale(.9);opacity:.85}100%{transform:scale(1.6);opacity:0}}
.cap{position:absolute;z-index:5;left:2.6cqw;right:2.6cqw;bottom:2.2cqw;padding:1.3cqw 2.2cqw 1.6cqw;border-radius:1.5cqw;background:rgba(255,250,240,.95);color:#2A1F1A;box-shadow:0 .5cqw 1.8cqw rgba(42,31,26,.32);opacity:0;transform:translateY(1cqw);transition:opacity .35s,transform .35s;pointer-events:none}
.cap.on{opacity:1;transform:none}
.cap b{display:inline-block;font-size:max(11px,1.55cqw);padding:.2cqw 1.1cqw;border-radius:99px;background:var(--c,#C8412C);color:#fff;margin-bottom:.55cqw}
.cap p{margin:0;font-size:max(15px,2.45cqw);line-height:1.38}
.cap.long p{font-size:max(14px,2.05cqw);line-height:1.34}
.cap.narr p{font-family:Fraunces,Georgia,serif;font-style:italic}
.cap.silent p{font-family:"Atkinson Hyperlegible",system-ui,sans-serif}
.panel{position:absolute;z-index:4;display:grid;gap:1cqw}
.builder{left:2.2cqw;top:3cqw;width:22cqw}
.builder h2{margin:0 0 .2cqw;padding:.8cqw 1.4cqw;border-radius:1.2cqw;background:#2E3B36;color:#FFF6E4;font-family:Pacifico,cursive;font-weight:400;font-size:max(14px,2.1cqw);line-height:1.3}
.bbtn{display:flex;align-items:center;gap:1cqw;min-height:44px;padding:1cqw 1.4cqw;border-radius:1.2cqw;border:.28cqw solid #fff;background:#FFF6E4;color:#2A1F1A;font-weight:700;font-size:max(13px,1.9cqw);cursor:pointer;text-align:left;box-shadow:0 .35cqw 0 rgba(42,31,26,.18)}
.bbtn i{flex:0 0 auto;width:2.6cqw;height:2.6cqw;min-width:18px;min-height:18px;border-radius:50%;background:var(--d);border:.2cqw solid rgba(42,31,26,.25)}
.bbtn:disabled{opacity:.45;cursor:default}
.bbtn.serve{background:#C8412C;color:#fff;border-color:#C8412C;justify-content:center}
.napkin{position:absolute;z-index:4;left:50%;top:43%;width:31cqw;aspect-ratio:1;transform:translate(-50%,-50%) rotate(-2deg);background:#FFFFFF;border-radius:1.2cqw;box-shadow:0 .8cqw 2cqw rgba(42,31,26,.35);padding:2.4cqw;outline:.25cqw dashed #E3D6C2;outline-offset:-1.1cqw}
.grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:100%;height:100%}
.cell{border:0;background:none;padding:0;cursor:pointer;font-family:Caveat,"Segoe Print",cursive;font-weight:700;font-size:8cqw;line-height:1;display:grid;place-items:center}
.cell:nth-child(-n+6){border-bottom:.5cqw solid #2A3B5A}
.cell:not(:nth-child(3n)){border-right:.5cqw solid #2A3B5A}
.cell.x{color:#C8412C}.cell.o{color:#2F5D9A}
.cell.x,.cell.o{animation:pop .35s cubic-bezier(.34,1.56,.64,1)}
.cell.win{background:rgba(242,193,78,.4)}
@keyframes pop{from{transform:scale(.3);opacity:0}}
.tag{position:absolute;z-index:4;padding:.6cqw 1.3cqw;border-radius:99px;background:#2E3B36;color:#FFF6E4;font-weight:700;font-size:max(12px,1.6cqw);transform:translateX(-50%)}
.again{position:absolute;z-index:4;left:77%;top:43%;transform:translate(-50%,-50%)}
.big{display:inline-flex;align-items:center;justify-content:center;gap:.8cqw;min-height:44px;padding:1.1cqw 2.2cqw;border-radius:99px;border:0;background:#C8412C;color:#fff;font-weight:700;font-size:max(14px,2cqw);cursor:pointer;box-shadow:0 .4cqw 0 rgba(0,0,0,.2)}
.big.alt{background:#FFF6E4;color:#2A1F1A}
.joke{position:absolute;z-index:4;right:3cqw;top:3cqw;width:14cqw;height:14cqw;min-width:90px;min-height:90px;border-radius:50%;border:.6cqw solid #FFF6E4;background:radial-gradient(circle at 35% 30%,#F06A5E,#B02A25 70%);color:#fff;font-weight:700;font-size:max(13px,2cqw);line-height:1.15;cursor:pointer;box-shadow:0 .7cqw 0 #7E1D19,0 1.2cqw 2.4cqw rgba(0,0,0,.3)}
.joke:active{transform:translateY(.5cqw);box-shadow:0 .2cqw 0 #7E1D19}
.react{position:absolute;z-index:4;right:2.5cqw;top:19.5cqw;display:flex;gap:1cqw}
.overlay{position:absolute;inset:0;z-index:7;display:grid;place-items:center;padding:3cqw;background:radial-gradient(ellipse at center,rgba(42,31,26,.08),rgba(42,31,26,.45))}
.overlay[hidden]{display:none}
.card{background:#FFF8EA;color:#2A1F1A;border-radius:2cqw;padding:3cqw 4.5cqw 3.4cqw;max-width:min(860px,82cqw);text-align:center;box-shadow:0 .8cqw 0 rgba(42,31,26,.15),0 2cqw 4cqw rgba(42,31,26,.35);transform:rotate(-.8deg)}
.card .k{margin:0 0 .4em;font-weight:700;color:#7A6A5E;font-size:max(12px,1.7cqw);letter-spacing:.04em}
.card h2{margin:0;font-family:Pacifico,cursive;font-weight:400;color:#C8412C;font-size:max(28px,6.4cqw);line-height:1.25}
.card h3{margin:.2em 0 .6em;font-family:Fraunces,Georgia,serif;font-size:max(18px,3.2cqw);line-height:1.2}
.card p{margin:0 auto 1.2em;max-width:44ch;font-size:max(13px,1.9cqw);line-height:1.45;color:#4F4038}
.card .q{font-family:Fraunces,Georgia,serif;font-size:max(20px,3.6cqw);line-height:1.25;color:#2A1F1A}
.card .row{display:flex;gap:1.2cqw;justify-content:center;flex-wrap:wrap}
.controls{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;margin-top:14px;padding:12px clamp(10px,2vw,18px);background:var(--paper);border-radius:16px;box-shadow:var(--shadow)}
.book:fullscreen .controls{margin:0 auto;width:min(100%,calc((100vh - 110px) * 16 / 9))}
.grp{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 20px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper-2);color:var(--ink);font-weight:700;font-size:1.05rem;cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:#fff}
.btn:disabled{opacity:.4;cursor:default}
.btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dots{display:flex;gap:8px;align-items:center}
.dot{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper-2);font-weight:700;cursor:pointer;color:var(--ink-2)}
.dot.cur{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media (max-width:720px){.btn .lbl{display:none}.btn{padding:0 14px}.dots{order:-1;width:100%;justify-content:center}}
.notes{position:fixed;z-index:40;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--paper);color:var(--ink);box-shadow:-18px 0 50px rgba(20,14,10,.3);transform:translateX(104%);visibility:hidden;transition:transform .4s,visibility 0s .4s;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.notes.open{transform:none;visibility:visible;transition:transform .4s,visibility 0s}
.notes header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 20px;border-bottom:1.5px solid var(--line)}
.notes h2{margin:0;font-family:Fraunces,Georgia,serif;font-size:1.4rem}
.notes .body{padding:16px 20px 24px;overflow:auto}
.notes .body h3{margin:0 0 6px;font-size:1.05rem;color:var(--accent)}
.notes .body p{margin:0 0 14px;font-size:1.06rem;line-height:1.55}
.notes .tip{padding:12px 14px;border-radius:12px;background:var(--paper-2)}
.spin{transform-box:fill-box;transform-origin:center;animation:spin 2.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bub{animation:rise 1.4s ease-in infinite}
@keyframes rise{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-70px);opacity:0}}
.eyes{transform-box:fill-box;transform-origin:center;animation:blink 5.6s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
.breathe{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 4.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.004,1.012)}}
.drift{animation:drift 40s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateX(60px)}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.gc-book-nav{background:#12304f;color:white;padding:8px max(16px,calc((100vw - 1350px)/2));font:16px/1.5 system-ui,sans-serif;display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px}
.gc-book-nav a{display:inline-flex;align-items:center;min-height:44px;color:#b4e9df;text-underline-offset:3px}
.gc-book-nav a:focus-visible{outline:3px solid white;outline-offset:3px}
.gc-book-nav .gc-share-button{margin-left:auto}
.gc-book-note{font:14px/1.5 system-ui,sans-serif;max-width:1350px;margin:12px auto;padding:0 16px}
.book{scroll-margin-top:12px}
.book-transcript{max-width:1350px;margin:20px auto;padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.book-transcript summary{cursor:pointer;min-height:44px;font-weight:bold;padding:8px}
.book-transcript p{max-width:75ch;line-height:1.6}
.notes{border:0;margin:0 0 0 auto;max-width:100vw;max-height:100%;height:100%}
.notes:not([open]){display:none}
.notes::backdrop{background:#0006}
[hidden]{display:none!important}
.controls .btn .lbl{display:inline}
.controls .btn{font-size:1rem;padding:8px 14px;line-height:1.3}
.controls .grp{max-width:100%}
.hs i{min-width:44px;min-height:44px}
@media(max-width:720px){
  .book{padding:12px 12px 22px}
  .top p{font-size:14px;line-height:1.5}
  .stage,.book:fullscreen .stage{aspect-ratio:auto;padding-top:56.25%;overflow:hidden;width:100%;background:var(--paper)}
  .stage>svg{inset:0 auto auto 0;width:100%;height:auto;aspect-ratio:16/9}
  .grain{height:auto;aspect-ratio:16/9;bottom:auto}
  .ov{position:relative;inset:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;padding:12px}
  .ov:empty{display:none}
  .hs{position:static;transform:none!important;flex:1 1 110px;flex-direction:row;gap:6px;text-align:left}
  .hs i{width:44px;height:44px;flex:0 0 44px}
  .hs span{font-size:14px;white-space:normal;padding:5px 8px;box-shadow:none}
  .cap{display:none;position:relative;inset:auto;margin:0 12px 12px;padding:16px;transform:none;opacity:1;border-radius:10px;box-shadow:none;border:1px solid var(--line)}
  .cap.on{display:block}
  .cap b{font-size:14px;padding:4px 9px;margin-bottom:8px}
  .cap p,.cap.long p{font-size:17px;line-height:1.5}
  .overlay{position:relative;inset:auto;padding:14px;background:var(--paper-2)}
  .card{max-width:100%;width:100%;padding:20px 14px;transform:none;border-radius:12px;box-shadow:none}
  .card .k{font-size:12px}.card h2{font-size:32px}.card h3{font-size:21px}.card p{font-size:16px;line-height:1.5}.card .q{font-size:23px}
  .card .row{gap:10px}
  .big{font-size:16px;line-height:1.4;padding:10px 16px;min-height:48px}
  .builder{position:static;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .builder h2,.builder .serve{grid-column:1/-1}
  .builder h2{font-size:23px;padding:12px}
  .bbtn{font-size:16px;line-height:1.3;padding:10px;gap:8px;min-height:52px;border-radius:8px}
  .napkin{position:relative;inset:auto!important;transform:none;width:min(260px,100%);padding:20px;border-radius:8px;flex:0 1 260px;margin:0 auto}
  .cell{font-size:60px;min-width:44px;min-height:44px}
  .tag{position:static;transform:none;flex:1 0 100%;font-size:16px;padding:10px;text-align:center;order:-1}
  .again{position:static;transform:none}
  .joke{position:static;width:100%;height:auto;min-height:52px;min-width:0;border-radius:12px;font-size:18px;padding:14px;box-shadow:none}
  .joke br{display:none}
  .react{position:static;display:flex;flex-wrap:wrap;gap:12px;width:100%;justify-content:center}
  .controls,.book:fullscreen .controls{width:100%;gap:12px;padding:12px}
  .controls .grp{width:100%;justify-content:center;gap:8px}
  .controls .grp:last-child{display:grid;grid-template-columns:1fr 1fr}
  .controls .btn{min-width:0;min-height:48px;justify-content:center;padding:10px 8px;font-size:15px}
  .controls .btn svg{flex-shrink:0;width:20px;height:20px}
  .dots{gap:8px}.dot{flex:0 0 44px}
  .book:fullscreen{display:block;overflow:auto;padding:12px;background:var(--page)}
}
@media(prefers-reduced-motion:reduce){.hs i::after{display:none}}