/* Layout: a flipbook. Each page fills the screen; one scroll, swipe or key press turns exactly one page. */
:root {
  --bg: #f1eee8; --ink: #1f1d1a; --muted: #67635a; --line: #d6d0c4; --accent: #4f5f27; --soft: #e5dfd2; --paper: #f8f6f1;
  --sun: #ebc35f; --leaf: #8a9b5c; --clay: #d27d5a; --sky: #7a9fc3;
  --violet: #4b3a8c; --violet-ink: #f3efff; --clayband: #b8573a; --clay-ink: #fff4ee;
  --acid: #f2e81c; --acid-ink: #111010; --grape: #9466f5; --grot: "Familjen Grotesk", "Zen Kaku Gothic New", "IBM Plex Sans KR", system-ui, sans-serif;
  --sunpage: #ecc964; --sunpage-ink: #221d12; --skypage: #a9c3dc; --skypage-ink: #18202a; --bookpage: #f9f6ef; --bookpage-ink: #1f1d1a;
  --code-bg: #24221e; --code-ink: #ece7dc; --code-dim: #9d978a; --code-num: #e6bf6a; --code-str: #b9cc8a;
  --serif: "Newsreader", "Zen Old Mincho", "Gowun Batang", Georgia, serif;
  --sans: "Instrument Sans", "Zen Kaku Gothic New", "Gowun Dodum", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg: #1b1a17; --ink: #ece7dc; --muted: #a8a296; --line: #3a3832; --accent: #bccb8f; --soft: #2a2823; --paper: #22211d;
  --sun: #9c8443; --leaf: #5f6e40; --clay: #91583f; --sky: #506d8a;
  --violet: #2e2554; --violet-ink: #ece6ff; --clayband: #6e3424; --clay-ink: #ffeee6;
  --sunpage: #5c4c22; --sunpage-ink: #f6edd2; --skypage: #2c4157; --skypage-ink: #e6eef7; --bookpage: #e9e4d8; --bookpage-ink: #1f1d1a;
  --code-bg: #111110; --code-ink: #ece7dc; --code-dim: #8d877b; --code-num: #e6bf6a; --code-str: #b9cc8a;
} }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1b1a17; --ink: #ece7dc; --muted: #a8a296; --line: #3a3832; --accent: #bccb8f; --soft: #2a2823; --paper: #22211d;
  --sun: #9c8443; --leaf: #5f6e40; --clay: #91583f; --sky: #506d8a;
  --violet: #2e2554; --violet-ink: #ece6ff; --clayband: #6e3424; --clay-ink: #ffeee6;
  --sunpage: #5c4c22; --sunpage-ink: #f6edd2; --skypage: #2c4157; --skypage-ink: #e6eef7; --bookpage: #e9e4d8; --bookpage-ink: #1f1d1a;
  --code-bg: #111110; --code-ink: #ece7dc; --code-dim: #8d877b; --code-num: #e6bf6a; --code-str: #b9cc8a;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
html { box-sizing: border-box; }
@media (min-width: 1000px) and (min-height: 700px) { html { font-size: 18px; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--serif); overflow: hidden; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:where(#book) :where(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, pre) { margin: 0; padding: 0; }
.emo { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-style: normal; line-height: 1; }

/* ---------- controls ---------- */
.top { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: var(--s3);
  padding: calc(env(safe-area-inset-top, 0px) + 10px) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
  font: 500 12.5px/1.2 var(--sans); color: var(--muted); pointer-events: none; }
.top > * { pointer-events: auto; }
.top .name { letter-spacing: .08em; text-transform: uppercase; }
.top .sp { flex: 1; }
.top button { white-space: nowrap; background: color-mix(in srgb, var(--bg) 78%, transparent); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; cursor: pointer; color: var(--ink); backdrop-filter: blur(6px); }
.on-dark .top, .on-dark .foot { color: rgb(255 255 255 / .78); }
.on-dark .top button { background: rgb(0 0 0 / .25); border-color: rgb(255 255 255 / .3); color: #fff; }
.foot { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: var(--s3);
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 12px) max(16px, env(safe-area-inset-left, 0px));
  font: 500 12.5px/1 var(--sans); color: var(--muted); pointer-events: none; }
.foot .bar { flex: 1; height: 2px; background: color-mix(in srgb, currentColor 25%, transparent); position: relative; border-radius: 2px; }
.foot .bar i { position: absolute; inset: 0 auto 0 0; background: currentColor; border-radius: 2px; transition: width .35s ease; }
.foot .count { font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; }
.foot .arrows { display: flex; gap: var(--s2); pointer-events: auto; }
.foot .arrows button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); background: none; color: inherit; cursor: pointer; display: grid; place-items: center; font-size: 14px; }

/* ---------- the book ---------- */
#book { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
#book::-webkit-scrollbar { display: none; }
.page { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 64px) max(20px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 72px) max(20px, env(safe-area-inset-left, 0px)); }
.col { width: 100%; max-width: 32rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.page.is-on .col { animation: rise .55s cubic-bezier(.2, .7, .2, 1); }
@keyframes rise { from { transform: translateY(18px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .page.is-on .col { animation: none; } #book { scroll-behavior: auto; } }

.kick { font: 500 .72rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s3); }
.kick b { color: var(--accent); font-weight: 600; }
.src { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 48px); text-align: center; font: .78rem/1 var(--sans); color: var(--muted); }
.src a { color: inherit; }
.cite { color: var(--accent); }

/* vignette */
.vig { width: 15rem; max-width: 70%; aspect-ratio: 8 / 5; position: relative; display: grid; place-items: center; margin-bottom: var(--s4); }
.vig svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vig .ems { position: relative; display: flex; gap: var(--s2); font-size: 2.9rem; transform: translateY(8%); }
.vig .ems .emo:nth-child(2) { transform: translateY(-16%) scale(1.1); }
.b-sun { fill: var(--sun); } .b-leaf { fill: var(--leaf); } .b-clay { fill: var(--clay); } .b-sky { fill: var(--sky); } .b-ground { fill: var(--soft); }

/* story */
.story-line { font-size: clamp(1.75rem, 6.6vw, 2.5rem); line-height: 1.25; text-wrap: balance; }
.story-line i { font-style: italic; }
.story-small { margin-top: var(--s4); font-size: 1.15rem; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.journey { margin-top: var(--s5); display: flex; gap: var(--s4); justify-content: center; flex-wrap: wrap; }
.stop { display: flex; flex-direction: column; align-items: center; gap: var(--s2); font: .85rem/1.3 var(--sans); color: var(--muted); width: 6rem; }
.stop .emo { font-size: 1.9rem; }

/* cover */
.cover h1 { font-size: clamp(2.6rem, 10vw, 3.6rem); line-height: 1.08; font-weight: 400; margin-bottom: var(--s3); text-wrap: balance; }
.cover h1 i { font-style: italic; }
.cover .hook { font-size: 1.35rem; font-style: italic; line-height: 1.4; }
.cover .hint { margin-top: var(--s6); font: .8rem/1 var(--sans); color: var(--muted); letter-spacing: .06em; }

/* letters */
.letters { display: flex; flex-direction: column; gap: var(--s4); width: 100%; max-width: 22rem; }
.letter { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); align-items: baseline; text-align: left; border-top: 1px solid var(--line); padding-top: var(--s3); }
.letter .l { font-size: 2.6rem; font-style: italic; line-height: 1; color: var(--accent); }
.letter .w { font-size: 1.35rem; line-height: 1.2; }
.letter .d { grid-column: 2; font: .92rem/1.5 var(--sans); color: var(--muted); margin-top: var(--s1); }

/* word */
.word .hero { font-size: clamp(3rem, 14vw, 4.6rem); line-height: 1; margin-bottom: var(--s3); font-weight: 400; }
.word .pos { font: .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s4); }
.word .def { font-size: 1.45rem; line-height: 1.4; text-wrap: balance; }
.word .eg { margin-top: var(--s5); font: .95rem/1.55 var(--sans); color: var(--muted); max-width: 22rem; }
.word .eg b { color: var(--ink); font-weight: 600; }

/* number */
.number .hero { font-size: clamp(2.9rem, 13vw, 5rem); line-height: 1; font-weight: 400; font-variant-numeric: lining-nums; letter-spacing: -.01em; }
.number .unit { font: .8rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: var(--s3) 0 var(--s5); }
.number .what { font-size: 1.35rem; line-height: 1.45; text-wrap: balance; }

/* quote */
.quote .hero { font-size: clamp(1.9rem, 7.4vw, 2.8rem); line-height: 1.25; font-style: italic; text-wrap: balance; }
.quote .hero::before { content: "“"; } .quote .hero::after { content: "”"; }
.quote .by { font: .8rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: var(--s4) 0 var(--s5); }
.quote .plain { font: 1rem/1.55 var(--sans); max-width: 24rem; }
.quote .plain span { display: block; font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s2); }

/* colour band: a sudden change */
.color { color: var(--violet-ink); background: var(--violet); }
.color.clay { background: var(--clayband); color: var(--clay-ink); }
.color .kick, .color .src { color: currentColor; opacity: .75; }
.color .kick b, .color .cite { color: inherit; }
.color .shout { font-size: clamp(2.3rem, 9.5vw, 4rem); line-height: 1.12; text-wrap: balance; }
.color .shout i { font-style: italic; }
.color .story-small { color: currentColor; opacity: .85; }

/* compare */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); width: 100%; text-align: left; margin-top: var(--s5); }
@media (max-width: 520px) { .pair { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } }
.pair > div { display: flex; flex-direction: column; gap: var(--s2); border-top: 1px solid var(--line); padding-top: var(--s3); }
.pair .emo { font-size: 1.7rem; }
.pair h3 { font: 600 .75rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.pair p { font-size: 1.1rem; line-height: 1.45; }

/* code */
.code .col { max-width: 36rem; }
.code pre { width: 100%; text-align: left; background: var(--code-bg); color: var(--code-ink); border-radius: 6px; padding: var(--s4); font: 400 .86rem/1.7 var(--mono); overflow-x: auto; }
.code pre .c { color: var(--code-dim); } .code pre .n { color: var(--code-num); } .code pre .s { color: var(--code-str); } .code pre .k { color: var(--code-ink); font-weight: 500; }
@media (max-width: 520px) { .code pre { font-size: .7rem; padding: var(--s3); } }
.code .cap { margin-top: var(--s4); font-size: 1.3rem; line-height: 1.4; text-wrap: balance; }
.code .cap small { display: block; margin-top: var(--s2); font: .9rem/1.5 var(--sans); color: var(--muted); }

/* photos (drawn stand-ins for real photos) */
.photo-full { padding: 0; color: #fff; background: #0d0b0a; }
.photo-full canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo-full .over { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s6) max(20px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 72px) max(20px, env(safe-area-inset-left, 0px)); background: linear-gradient(to top, rgb(0 0 0 / .62), transparent); }
.photo-full .over .col { margin: 0 auto; align-items: flex-start; text-align: left; max-width: 34rem; }
.photo-full .kick { color: rgb(255 255 255 / .75); }
.photo-full .kick b { color: #fff; }
.photo-full .story-line { color: #fff; }
.photo-full .story-small { color: rgb(255 255 255 / .82); }
.photo-full .src { color: rgb(255 255 255 / .7); bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 56px); right: max(20px, env(safe-area-inset-right, 0px)); left: auto; text-align: right; }
.photo-full .cite { color: #fff; }
.framed figure { width: 100%; display: flex; flex-direction: column; gap: var(--s3); }
.framed .frame { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 46svh; background: #120f0c; border-radius: 3px; overflow: hidden; }
.framed canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.framed figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); text-align: left; align-items: baseline; }
.framed figcaption b { font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.framed figcaption span { font-size: 1.15rem; line-height: 1.45; }

/* list of limits */
.rows { display: flex; flex-direction: column; gap: var(--s3); width: 100%; text-align: left; margin-top: var(--s5); }
.row { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s3); }
.row .emo { font-size: 1.4rem; }
.row h3 { font-size: 1.15rem; font-weight: 400; font-style: italic; line-height: 1.3; }
.row p { font: .95rem/1.5 var(--sans); color: var(--muted); margin-top: var(--s1); }

/* takeaway */
.take { list-style: none; display: flex; flex-direction: column; align-items: center; font-size: clamp(1.4rem, 5vw, 1.8rem); line-height: 1.35; }
.take li + li::before { content: ""; display: block; width: 1px; height: 32px; background: var(--line); margin: var(--s3) auto; }

/* end page: scrolls inside itself */
.end { align-items: flex-start; overflow-y: auto; }
.end .col { max-width: 38rem; align-items: stretch; text-align: left; gap: var(--s5); padding-bottom: var(--s5); }
.end h2 { font-size: 1.7rem; font-weight: 400; margin-bottom: var(--s3); }
.words { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
@media (max-width: 520px) { .words { grid-template-columns: minmax(0, 1fr); } }
.words dt { font-style: italic; font-size: 1.05rem; }
.words dd { font: .9rem/1.5 var(--sans); color: var(--muted); margin-top: 2px; }
.srcs { list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: var(--s3); font: .9rem/1.5 var(--sans); }
.srcs li { counter-increment: s; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); }
.srcs li::before { content: counter(s) "."; color: var(--accent); }
.srcs a { color: var(--accent); }
.srcnote { font: italic .9rem/1.5 var(--sans); color: var(--muted); }
.again { align-self: flex-start; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; font: 500 .85rem/1 var(--sans); }

/* term tips */
.term { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; position: relative; text-decoration: underline dotted currentColor; text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
.tip { display: none; position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 8px); z-index: 5; width: min(17rem, 80vw); text-align: left; font: 400 .92rem/1.45 var(--sans); padding: 10px 12px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 10px 30px rgb(0 0 0 / .12); }
.tip b { display: block; font: italic 400 1.05rem/1.3 var(--serif); margin-bottom: 2px; }
.term.open .tip { display: block; }
@media (hover: hover) { .term:hover .tip { display: block; } }
@media (max-width: 640px) { .tip { position: fixed; left: 12px; right: 12px; transform: none; top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 60px); width: auto; } }

/* ---------- type pages, storybook tone ---------- */
.sunp { background: var(--sunpage); color: var(--sunpage-ink); }
.skyp { background: var(--skypage); color: var(--skypage-ink); }
.sunp .kick, .skyp .kick, .sunp .src, .skyp .src { color: currentColor; opacity: .72; }
.sunp .kick b, .skyp .kick b, .sunp .cite, .skyp .cite { color: inherit; }

/* text wall: the whole story as one soft block */
.wall .col { max-width: 36rem; }
.wall .txt { height: 50svh; overflow: hidden; font: italic 400 clamp(.82rem, 3.2vw, 1rem)/1.45 var(--serif); text-align: justify; word-spacing: .3em; color: var(--muted); text-transform: lowercase; -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
.wall .txt mark { font-style: normal; color: var(--ink); background: color-mix(in srgb, var(--sun) 55%, transparent); padding: 0 .25em; border-radius: 2px; }
.wall .plain { margin-top: var(--s4); font-size: 1.3rem; line-height: 1.45; }

/* dictionary entry */
.dict .col { max-width: 28rem; align-items: flex-start; text-align: left; }
.dict .hw { font-size: clamp(3.6rem, 17vw, 6.2rem); line-height: .95; font-weight: 500; letter-spacing: -.02em; }
.dict .pr { font-size: 1.2rem; margin: var(--s3) 0; }
.dict .pr i { font-style: italic; }
.dict .rule { width: 100%; height: 1px; background: var(--ink); opacity: .6; margin-bottom: var(--s3); }
.dict .defs { display: flex; flex-direction: column; gap: var(--s2); font-size: 1.12rem; line-height: 1.55; }
.dict .defs i { font-style: italic; color: var(--accent); margin-right: .45em; }
.dict .vig { align-self: center; }

/* packed bag: tap to open */
.bag .box { width: 9rem; height: 9rem; border: 1.5px solid var(--muted); border-radius: 14px; display: grid; place-items: center; overflow: hidden; padding: 10px; transition: width .7s cubic-bezier(.2,.7,.2,1), height .7s cubic-bezier(.2,.7,.2,1), border-color .7s; max-width: 100%; }
.bag .packed { font: 500 12.5px/.86 var(--serif); letter-spacing: -.07em; text-align: justify; transition: font-size .7s cubic-bezier(.2,.7,.2,1), letter-spacing .7s, line-height .7s; }
.bag.open .box { width: min(32rem, 100%); height: 46svh; border-color: transparent; }
.bag.open .packed { font-size: clamp(1.7rem, 7vw, 2.9rem); letter-spacing: 0; line-height: 1.2; text-align: center; font-style: italic; font-weight: 400; }
.bag .open-btn { margin-top: var(--s4); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; cursor: pointer; font: 500 .85rem/1 var(--sans); }
.bag .story-small { margin-top: var(--s4); }
@media (prefers-reduced-motion: reduce) { .bag .box, .bag .packed { transition: none; } }

/* c² at full size */
.csq .col { max-width: 40rem; }
.csq .big { font-size: clamp(8rem, 44vw, 19rem); line-height: .8; font-style: italic; letter-spacing: -.04em; }
.csq .big sup { font-size: .45em; vertical-align: .9em; }
.csq .digits { font-size: clamp(1.45rem, 6.6vw, 3rem); line-height: 1.1; font-variant-numeric: lining-nums; word-break: break-all; margin-top: var(--s4); }
.csq .unit { font: .78rem/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; opacity: .75; margin-top: var(--s2); }

/* staggered blocks with crayon blobs */
.stagger .col { max-width: 30rem; align-items: stretch; text-align: left; gap: var(--s5); position: relative; z-index: 1; }
.stagger .blk { font-size: clamp(1.15rem, 4.4vw, 1.4rem); line-height: 1.35; max-width: 19rem; }
.stagger .blk b { display: block; font: 600 .7rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--s2); opacity: .75; }
.stagger .blk:nth-child(1) { transform: rotate(-2deg); }
.stagger .blk:nth-child(2) { margin-left: 16%; transform: rotate(1.4deg); }
.stagger .blk:nth-child(3) { margin-left: 5%; transform: rotate(-.8deg); }
.blobs { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* blackout */
.erase .col { max-width: 32rem; align-items: flex-start; text-align: left; }
.erase .poem { font-size: clamp(1.75rem, 7vw, 2.6rem); line-height: 1.32; }
.erase .x { background: var(--ink); color: transparent; border-radius: 3px; filter: url(#crayon); box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: color .3s, background .3s; }
.erase.show .x { background: transparent; color: var(--muted); filter: none; }
.erase .plain { margin-top: var(--s4); font-size: 1.1rem; line-height: 1.5; }
.erase .plain span { font-style: italic; color: var(--accent); margin-right: .35em; }
.erase .reveal { margin-top: var(--s4); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; cursor: pointer; font: 500 .85rem/1 var(--sans); }

/* vertical quote */
.vert .col { flex-direction: row; justify-content: center; align-items: stretch; gap: var(--s5); max-width: 36rem; height: min(100%, 36rem); text-align: left; }
.vert .v { writing-mode: vertical-rl; font-size: clamp(1.75rem, 6.2vw, 2.6rem); line-height: 1.4; font-style: italic; height: 100%; }
.vert .side { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s3); max-width: 12rem; min-width: 0; }
.vert .side p { font-size: 1.05rem; line-height: 1.45; }
.vert .side .kick { margin: 0; }

/* open book on the sky page */
.spread .bk { display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 42rem); aspect-ratio: 4 / 3; max-height: 66svh; transform: rotate(-2deg); box-shadow: 0 26px 44px -22px rgb(20 40 70 / .5); border-radius: 3px; overflow: hidden; }
.spread .lp { background: var(--bookpage); color: var(--bookpage-ink); padding: 8% 7%; font: 400 clamp(.66rem, 2.3vw, 1rem)/1.32 var(--serif); text-align: justify; hyphens: auto; display: flex; flex-direction: column; gap: .7em; overflow: hidden; border-right: 1px solid rgb(0 0 0 / .1); }
.spread .lp p:first-child::first-letter { font-size: 2.6em; float: left; line-height: .9; padding-right: .08em; font-style: italic; }
.spread .lp .sig { font-style: italic; opacity: .7; margin-top: auto; }
.spread .rp { background: #ecc964; color: #221d12; display: grid; place-items: center; position: relative; overflow: hidden; }
.spread .rp .rot { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; flex-direction: column; justify-content: center; gap: .2em; }
.spread .rp .rot b { font: 500 clamp(2.4rem, 10vw, 5rem)/.9 var(--serif); }
.spread .rp .rot span { font: italic 400 clamp(.8rem, 2.8vw, 1.2rem)/1.1 var(--serif); }
.spread .rp .pn { position: absolute; top: 7%; right: 8%; font: italic .7rem/1 var(--serif); }

/* footnotes */
.notes .col { max-width: 36rem; height: 100%; align-items: flex-start; text-align: left; justify-content: space-between; padding-bottom: var(--s3); }
.notes .claim { font-size: clamp(2.5rem, 10vw, 4.6rem); line-height: 1.08; margin-top: auto; text-wrap: balance; }
.notes .claim i { font-style: italic; }
.notes .claim sup { font: 600 .3em/1 var(--sans); vertical-align: 1.7em; margin-left: .06em; }
.notes ol { list-style: none; margin-top: auto; display: flex; flex-direction: column; gap: var(--s2); border-top: 1px solid currentColor; padding-top: var(--s3); font-size: 1rem; line-height: 1.5; max-width: 26rem; }
.notes ol b { font: 600 .8rem/1 var(--sans); margin-right: .55em; }

/* index: B for … */
.index .col { max-width: none; }
.index .ix { writing-mode: vertical-rl; transform: rotate(180deg); height: min(68svh, 38rem); display: flex; flex-direction: column; }
.index .it { display: flex; align-items: baseline; gap: .3em; font: 400 clamp(1.5rem, 6.2vw, 2.4rem)/1.12 var(--serif); background: none; border: 0; padding: 0 .05em; cursor: pointer; color: inherit; text-align: start; }
.index .it .l { width: 1.1em; font-weight: 500; }
.index .it .f { font-style: italic; opacity: .7; }
.index .it .w { flex: 1; }
.index .it .p { font: .62rem/1 var(--sans); letter-spacing: .06em; opacity: .75; }
.index .it:hover .w { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }


/* accents: two pages that break tone on purpose (acid yellow, violet, a bold grotesk) */
.accent-acid { background: var(--acid); color: var(--acid-ink); }
.accent-grape { background: var(--grape); color: var(--acid-ink); }
.accent-acid .kick, .accent-grape .kick, .accent-acid .src, .accent-grape .src { color: inherit; opacity: .8; font-family: var(--mono); }
.accent-acid .cite, .accent-grape .cite { color: inherit; }
body.on-accent .top, body.on-accent .foot { color: var(--acid-ink); }
body.on-accent .top button { background: transparent; border-color: currentColor; color: var(--acid-ink); }
.accent-grape .lp { font-family: var(--grot); font-weight: 500; letter-spacing: -.01em; line-height: 1.18; }
.accent-grape .lp p:first-child::first-letter { font-size: 1em; float: none; font-style: normal; padding: 0; }
.accent-grape .lp p:first-child::first-line { font-weight: 700; }
.accent-grape .lp .sig { font-style: normal; font-family: var(--mono); font-size: .8em; }
.accent-grape .rp { background: var(--acid); color: var(--acid-ink); }
.accent-grape .rp .rot b { font: 700 clamp(2.4rem, 11vw, 5.4rem)/.9 var(--grot); letter-spacing: -.03em; }
.accent-grape .rp .rot span { font: 600 clamp(.75rem, 2.7vw, 1.2rem)/1.1 var(--grot); font-style: normal; }
.accent-grape .rp .pn { font: .6rem/1 var(--mono); font-style: normal; }
.accent-grape .bk { box-shadow: 0 30px 50px -20px rgb(40 0 90 / .55); border-radius: 0; transform: rotate(-2.5deg); }
.accent-acid .it { font: 700 clamp(1.55rem, 6.4vw, 2.6rem)/1.05 var(--grot); letter-spacing: -.02em; }
.accent-acid .it .l { font-weight: 700; }
.accent-acid .it .f { font-style: normal; font-weight: 400; opacity: 1; }
.accent-acid .it .p { font: 9px/1 var(--mono); }

/* serif only: turn the sans helpers back into the storybook serif */
.serif-only .kick, .serif-only .stop, .serif-only .letter .d, .serif-only .word .eg, .serif-only .word .pos, .serif-only .number .unit,
.serif-only .quote .by, .serif-only .quote .plain, .serif-only .quote .plain span, .serif-only .pair h3, .serif-only .code .cap small,
.serif-only .framed figcaption b, .serif-only .row p, .serif-only .words dd, .serif-only .srcs, .serif-only .srcnote, .serif-only .src, .serif-only .tip
{ font-family: var(--serif); letter-spacing: 0; text-transform: none; font-style: italic; font-weight: 400; }
.serif-only .kick, .serif-only .word .pos, .serif-only .number .unit, .serif-only .quote .by { font-size: 1rem; }
.serif-only .quote .plain, .serif-only .row p, .serif-only .words dd, .serif-only .srcs { font-style: normal; font-size: 1.02rem; }
.serif-only .tip { font-style: normal; }

/* =================== example books: extra page types =================== */
.top .books { display: flex; gap: 4px; pointer-events: auto; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.top .books::-webkit-scrollbar { display: none; }
.top .books button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.on-dark .top .books button[aria-pressed="true"] { background: #ece7dc; color: #1f1d1a; border-color: #ece7dc; }
.on-accent .top .books button[aria-pressed="true"] { background: var(--acid-ink); color: var(--acid); border-color: var(--acid-ink); }
@media (max-width: 560px) { .top .name { display: none; } .top { gap: 8px; } }
.page .title { font-size: clamp(1.7rem, 6.4vw, 2.3rem); line-height: 1.2; text-wrap: balance; margin-bottom: var(--s5); }
.small2 { margin-top: var(--s4); font-size: 1.05rem; line-height: 1.5; color: var(--muted); text-wrap: pretty; max-width: 26rem; }

/* vertical timeline */
.tl { list-style: none; display: flex; flex-direction: column; text-align: left; width: 100%; max-width: 20rem; }
.tl li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: center; position: relative; padding-block: var(--s3); }
.tl li::before { content: ""; position: absolute; left: 1.3rem; top: 0; bottom: 0; width: 1.5px; background: var(--line); }
.tl li:first-child::before { top: 50%; } .tl li:last-child::before { bottom: 50%; }
.tl .dot { position: relative; z-index: 1; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 1.2rem; }
.tl li > span:last-child { padding-left: var(--s3); font-size: 1.2rem; line-height: 1.35; }

/* bars, drawn to scale */
.vbars { display: flex; align-items: flex-end; justify-content: center; gap: var(--s5); height: 34svh; margin: var(--s5) 0 var(--s3); }
.vbar { display: flex; flex-direction: column; align-items: center; gap: var(--s2); height: 100%; justify-content: flex-end; }
.vbar i { display: block; width: 4.2rem; background: var(--clay); border-radius: 3px 3px 0 0; filter: url(#crayon); }
.vbar:first-child i { background: var(--line); }
.vbar b { font-size: 1.6rem; font-weight: 400; }
.vbar span { font: .78rem/1.3 var(--sans); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.hbars { width: 100%; max-width: 28rem; display: flex; flex-direction: column; gap: var(--s4); text-align: left; margin-top: var(--s5); }
.hbar span { font: .78rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hbar .track { margin-top: var(--s2); height: 2.4rem; background: var(--soft); border-radius: 3px; position: relative; }
.hbar .track i { position: absolute; inset: 0 auto 0 0; background: var(--leaf); border-radius: 3px; filter: url(#crayon); }
.hbar .track b { position: absolute; left: calc(var(--w) + 10px); top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; }

/* skim: only a few words survive */
.skim .txt { font-size: clamp(1.9rem, 7.4vw, 2.9rem); line-height: 1.3; font-style: italic; text-wrap: balance; }
.skim .txt .sk { opacity: .16; filter: blur(1.2px); transition: opacity .5s, filter .5s; }
.skim.read .txt .sk { opacity: 1; filter: none; }
.skim .by { margin-top: var(--s3); font: .78rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pill { margin-top: var(--s4); background: none; border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; cursor: pointer; font: 500 .85rem/1 var(--sans); }

/* a crowd of helpers */
.crowd { display: grid; grid-template-columns: repeat(4, 3.2rem); gap: var(--s3); justify-content: center; margin: var(--s5) 0 var(--s3); }
.crowd .emo { font-size: 2.2rem; display: grid; place-items: center; }
.crowd .emo:nth-child(3n) { transform: rotate(-8deg) translateY(4px); } .crowd .emo:nth-child(4n+1) { transform: rotate(6deg); }
.crowd .emo:nth-child(7) { transform: scale(1.25); }

/* depth: a word that sinks */
.deep .word { display: flex; justify-content: center; align-items: flex-start; gap: .02em; font-size: clamp(3.4rem, 15vw, 6rem); font-style: italic; line-height: 1; height: 40svh; }
.deep .word span:nth-child(1) { margin-top: 0; } .deep .word span:nth-child(2) { margin-top: 6svh; } .deep .word span:nth-child(3) { margin-top: 13svh; } .deep .word span:nth-child(4) { margin-top: 21svh; } .deep .word span:nth-child(5) { margin-top: 29svh; }
.deep .fast { font: italic 400 1rem/1 var(--serif); letter-spacing: .3em; color: var(--muted); transform: skewX(-18deg); margin-top: var(--s3); }

/* code diff with a review note */
.diff .col { max-width: 36rem; }
.diff .box { width: 100%; text-align: left; background: var(--code-bg); color: var(--code-ink); border-radius: 6px; overflow: hidden; font: .82rem/1.75 var(--mono); }
.diff .ln { display: block; padding: 0 var(--s3); white-space: pre; overflow-x: auto; }
.diff .ln.del { background: rgb(210 90 70 / .22); } .diff .ln.add { background: rgb(140 180 90 / .22); }
.diff .ln.del::first-letter, .diff .ln.add::first-letter { font-weight: 700; }
.diff .note { margin: var(--s2) var(--s3) var(--s3) var(--s5); background: var(--paper); color: var(--ink); border-radius: 6px; padding: var(--s3); font: .92rem/1.45 var(--sans); white-space: normal; border-left: 3px solid var(--clay); }
.diff .note b { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s1); color: var(--clay); }
@media (max-width: 520px) { .diff .box { font-size: .68rem; } .diff .note { margin-left: var(--s3); } }
.diff .cap { margin-top: var(--s4); font-size: 1.2rem; line-height: 1.45; }
.diff .made { margin-top: var(--s2); font: .8rem/1.4 var(--sans); color: var(--muted); }

/* postcard */
.card-post { width: min(100%, 30rem); aspect-ratio: 3 / 2; max-height: 50svh; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 18px 40px -24px rgb(0 0 0 / .35); transform: rotate(-1.5deg); display: grid; grid-template-columns: 1.5fr 1fr; padding: var(--s4); gap: var(--s4); text-align: left; }
.card-post .msg { font: italic 400 clamp(.95rem, 3.6vw, 1.2rem)/1.45 var(--serif); border-right: 1px solid var(--line); padding-right: var(--s4); overflow: hidden; }
.card-post .side { display: flex; flex-direction: column; gap: var(--s3); }
.card-post .stampx { align-self: flex-end; width: 3.4rem; height: 4rem; border: 2px dashed var(--clay); display: grid; place-items: center; font-size: 1.6rem; }
.card-post .to { margin-top: auto; display: flex; flex-direction: column; gap: var(--s2); font: .8rem/1.2 var(--sans); }
.card-post .to span { border-bottom: 1px solid var(--line); padding-bottom: 4px; }

/* deck of cards */
.deck { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); width: 100%; max-width: 32rem; text-align: left; margin-top: var(--s4); }
.deck > div { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.deck > div:nth-child(1) { transform: rotate(-1.5deg); } .deck > div:nth-child(2) { transform: rotate(1deg) translateY(6px); } .deck > div:nth-child(3) { transform: rotate(.8deg); } .deck > div:nth-child(4) { transform: rotate(-1deg) translateY(6px); }
.deck .emo { font-size: 1.5rem; }
.deck h3 { font-size: 1.05rem; font-weight: 500; line-height: 1.25; }
.deck p { font: .86rem/1.45 var(--sans); color: var(--muted); }

/* stamp */
.stamp-wrap { position: relative; display: grid; place-items: center; margin-bottom: var(--s5); }
.stamp { font: 700 clamp(2.2rem, 10vw, 3.6rem)/1 var(--sans); letter-spacing: .12em; border: 5px solid currentColor; padding: .15em .35em; transform: rotate(-8deg); opacity: .9; filter: url(#crayon); }
.stamp-wrap::after { content: ""; position: absolute; left: -6%; right: -6%; top: 50%; height: 6px; background: currentColor; transform: rotate(-20deg); border-radius: 3px; }

/* split screen */
.split { padding: 0; display: grid; align-items: stretch; justify-content: stretch; grid-template-rows: 1fr 1fr; }
@media (min-width: 800px) { .split { grid-template-rows: none; grid-template-columns: 1fr 1fr; } }
.split .half { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: var(--s6) max(20px, env(safe-area-inset-right, 0px)) var(--s5) max(20px, env(safe-area-inset-left, 0px)); gap: var(--s2); }
.split .half.a { background: var(--paper); }
.split .half.b { background: var(--soft); }
.split .half.night { background: #0e0f14; color: #ecebe6; }
.split .half.day { background: #8fb6dc; color: #14202c; }
.split .emo.big { font-size: clamp(3rem, 12vw, 5rem); }
.split .v { font-size: clamp(2.4rem, 10vw, 4rem); line-height: 1; }
.split .l { font: .95rem/1.4 var(--sans); max-width: 16rem; opacity: .85; }
.split .cap { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); text-align: center; font: italic 1rem/1.4 var(--serif); padding: 0 20px; }

/* receipt */
.rcpt { width: min(100%, 21rem); background: #fbfaf5; color: #1d1c19; padding: var(--s4) var(--s4) var(--s5); font: .82rem/1.6 var(--mono); text-align: left; box-shadow: 0 20px 40px -26px rgb(0 0 0 / .4); transform: rotate(1.2deg);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 51% repeat-x, linear-gradient(#000 0 0) top / 100% 51% no-repeat;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 51% repeat-x, linear-gradient(#000 0 0) top / 100% 51% no-repeat; }
.rcpt h3 { font: 700 .9rem/1.3 var(--mono); text-align: center; letter-spacing: .14em; text-transform: uppercase; }
.rcpt .sub { text-align: center; font-size: .72rem; opacity: .7; margin-bottom: var(--s3); }
.rcpt hr { border: 0; border-top: 1.5px dashed #1d1c19; opacity: .5; margin: var(--s3) 0; }
.rcpt .r { display: flex; justify-content: space-between; gap: var(--s3); }
.rcpt .r b { font-weight: 700; white-space: nowrap; }
.rcpt .tot { font-size: 1rem; }
.rcpt .foot2 { font-size: .74rem; line-height: 1.5; opacity: .8; }

/* flip card */
.flip { width: 24rem; max-width: 100%; aspect-ratio: 4 / 5; max-height: 56svh; perspective: 1200px; background: none; border: 0; padding: 0; cursor: pointer; }
.flip .in { display: block; position: relative; width: 100%; height: 100%; transition: transform .7s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }
.flip.on .in { transform: rotateY(180deg); }
.flip .f, .flip .bk2 { position: absolute; color: var(--ink); inset: 0; backface-visibility: hidden; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--s3); padding: var(--s5) var(--s4); border: 1px solid var(--line); }
.flip .f { background: var(--paper); }
.flip .bk2 { background: var(--leaf); color: #15180e !important; transform: rotateY(180deg); }
.flip .q { font-size: clamp(1.6rem, 6.4vw, 2.2rem); line-height: 1.25; text-wrap: balance; }
.flip .hintf { font: .78rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.flip .a { font-size: clamp(3rem, 14vw, 5rem); line-height: 1; font-style: italic; }
.flip .ad { font: 1rem/1.5 var(--sans); max-width: 18rem; }
@media (prefers-reduced-motion: reduce) { .flip .in { transition: none; } }

/* fill in the blank */
.blank .line { font-size: clamp(2rem, 8vw, 3.2rem); line-height: 1.25; }
.blank .gap { display: inline-block; min-width: 3.2em; border-bottom: 2px dashed var(--accent); color: transparent; transition: color .4s; cursor: pointer; background: none; border-top: 0; border-left: 0; border-right: 0; font: inherit; font-style: italic; padding: 0; }
.blank.on .gap { color: var(--accent); }
.blank .opts { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s5); width: 100%; max-width: 18rem; text-align: left; opacity: 0; transition: opacity .4s; }
.blank.on .opts { opacity: 1; }
.blank .opt { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: var(--s3); font: .95rem/1 var(--sans); }
.blank .opt i { display: block; height: 10px; background: var(--sun); border-radius: 5px; }
.blank .opts small { font: .75rem/1.4 var(--sans); color: var(--muted); margin-top: var(--s2); }
@media (prefers-reduced-motion: reduce) { .blank .opts { transition: none; } }

/* tokens */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: var(--s5) 0 var(--s3); max-width: 30rem; }
.chips span { font: 500 clamp(1.15rem, 4.6vw, 1.6rem)/1 var(--mono); padding: .35em .45em; border-radius: 6px; white-space: pre; }
.chips span:nth-child(4n+1) { background: color-mix(in srgb, var(--sun) 60%, transparent); } .chips span:nth-child(4n+2) { background: color-mix(in srgb, var(--sky) 60%, transparent); }
.chips span:nth-child(4n+3) { background: color-mix(in srgb, var(--clay) 50%, transparent); } .chips span:nth-child(4n) { background: color-mix(in srgb, var(--leaf) 60%, transparent); }
.chips + .ids { font: .8rem/1.4 var(--mono); color: var(--muted); }

/* typewriter */
.tw .out { font-size: clamp(1.7rem, 6.6vw, 2.6rem); line-height: 1.3; min-height: 5.2em; text-align: left; width: 100%; max-width: 28rem; }
.tw .out .w.new { display: none; } .tw .out .w.new.on { display: inline; }
.tw .out .w.new.on { color: var(--accent); font-style: italic; }
.tw .out::after { content: "▍"; color: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tw .out .w.new { display: inline; } .tw .out::after { animation: none; } }

/* covered word */
.cover-word .txt { font-size: clamp(1.6rem, 6.4vw, 2.4rem); line-height: 1.4; text-wrap: balance; }
.cover-word .hid { position: relative; display: inline-block; color: transparent; }
.cover-word .hid::after { content: ""; position: absolute; inset: -.1em -.25em; background: var(--clay); border-radius: 40% 55% 45% 60% / 60% 45% 55% 40%; filter: url(#crayon); }
.cover-word .loop { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin-top: var(--s5); font: .82rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cover-word .loop span + span::before { content: "→"; margin-right: var(--s3); color: var(--accent); }

/* attention arcs */
.attn svg { width: 100%; max-width: 34rem; height: auto; overflow: visible; color: var(--ink); }
.attn .arc { fill: none; stroke: var(--clay); stroke-width: 3; stroke-linecap: round; }
.attn .arc.faint { stroke: var(--sky); stroke-width: 2; opacity: .8; }
.attn text { font-family: var(--serif); font-size: 25px; fill: currentColor; }
.attn text.hot { font-style: italic; fill: var(--clay); }

/* year in outline */
.year .y { font: 400 clamp(6rem, 33vw, 15rem)/.85 var(--serif); color: transparent; -webkit-text-stroke: 1.5px var(--ink); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.year .story-line { margin-top: var(--s4); }
.year.sky2 { background: var(--skypage); color: var(--skypage-ink); }
.year.sky2 .kick, .year.sky2 .src, .year.sky2 .story-small { color: inherit; opacity: .8; }

/* circles to scale */
.circles { display: flex; align-items: flex-end; justify-content: center; gap: var(--s5); margin: var(--s5) 0 var(--s3); }
.circles div { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.circles i { display: block; border-radius: 50%; background: var(--sky); filter: url(#crayon); }
.circles div:first-child i { background: var(--sun); }
.circles b { font-size: 1.4rem; font-weight: 400; }
.circles span { font: .75rem/1.3 var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; max-width: 9rem; text-align: center; }

/* sticky note */
.sticky { width: min(100%, 19rem); aspect-ratio: 1; background: #f3dc6b; color: #2a2510; padding: var(--s4); transform: rotate(2.5deg); box-shadow: 0 18px 30px -18px rgb(0 0 0 / .45); display: flex; flex-direction: column; justify-content: center; text-align: left; gap: var(--s3); position: relative; }
.sticky::before { content: ""; position: absolute; top: -12px; left: 50%; width: 5.5rem; height: 1.6rem; transform: translateX(-50%) rotate(-3deg); background: rgb(255 255 255 / .45); }
.sticky p { font: italic 400 clamp(1.3rem, 5.4vw, 1.7rem)/1.3 var(--serif); }
.sticky small { font: .85rem/1.4 var(--sans); }

/* timeline to scale */
.scale { width: 100%; max-width: 44rem; margin-top: var(--s5); position: relative; height: 15rem; }
.scale .axis { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--ink); opacity: .7; }
.scale .ev { position: absolute; top: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; width: 0; }
.scale .ev::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--clay); margin-top: -6px; }
.scale .ev b { position: absolute; font-weight: 400; font-size: 1.15rem; white-space: nowrap; }
.scale .ev span { position: absolute; font: .78rem/1.3 var(--sans); color: var(--muted); width: 6.6rem; text-align: center; }
.scale .ev.up b { bottom: 28px; } .scale .ev.up span { bottom: 52px; }
.scale .ev.dn b { top: 18px; } .scale .ev.dn span { top: 42px; }
.scale .yrs { position: absolute; left: 0; right: 0; bottom: -6px; display: flex; justify-content: space-between; font: .72rem/1 var(--sans); color: var(--muted); }

/* sketch map */
.map svg { width: 100%; max-width: 32rem; height: auto; overflow: visible; }
.map .sea { fill: var(--sky); opacity: .55; }
.map .land { fill: var(--leaf); opacity: .35; }
.map .route { fill: none; stroke: var(--clay); stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.map circle.pin { fill: var(--clay); }
.map text { font-family: var(--serif); font-size: 15px; fill: var(--ink); }
.map text.it { font-style: italic; font-size: 13px; fill: var(--muted); }

/* museum wall label */
.lbl { width: min(100%, 22rem); text-align: left; background: var(--paper); border: 1px solid var(--line); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.lbl .nm { font-size: 2rem; line-height: 1.1; }
.lbl .rl { font: italic 1rem/1.3 var(--serif); color: var(--muted); }
.lbl hr { border: 0; border-top: 1px solid var(--line); margin: var(--s2) 0; width: 100%; }
.lbl p { font: .95rem/1.5 var(--sans); }
.lbl .no { font: .7rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* many sides */
.sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); width: 100%; max-width: 28rem; margin-top: var(--s5); }
.sides div { border: 1px solid var(--line); border-radius: 999px; padding: var(--s3); font-size: 1.05rem; display: flex; gap: var(--s2); align-items: center; justify-content: center; }
.accent-acid .shout { font-family: var(--grot); font-weight: 600; letter-spacing: -.03em; font-size: clamp(3.4rem, 17vw, 8rem); line-height: .92; }
.split > .src { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 64px); text-align: center; }
.split .half.day + .src, .split .half.day ~ .src { color: #14202c; }
.vbar i { min-height: 4px; }
.skim .txt b { font-weight: 400; }
.tw .story-small, .attn .story-line { margin-top: var(--s4); }
.map .story-line { margin-bottom: var(--s4); }
.circles { align-items: flex-end; }
.tl { margin-top: var(--s4); }
.split .half { width: 100%; height: 100%; }
.page > .src { line-height: 1.4; padding-inline: max(20px, env(safe-area-inset-left, 0px)); text-wrap: balance; }
.page > .src .cite { font: italic .86rem/1.4 var(--serif); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.photo-full > .src { max-width: 20rem; padding-inline: 0; }

/* =================== paper + ink =================== */
body::after { content: ""; position: fixed; inset: 0; z-index: 20; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32  0 0 0 0 .27  0 0 0 0 .2  .9 0 0 0 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800' preserveAspectRatio='none'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='4' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .37  0 0 0 0 .26  .7 0 0 0 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.02 .2' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4  0 0 0 0 .33  0 0 0 0 .24  1.2 0 0 0 -.66'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgb(90 70 40 / .14) 100%);
  background-size: 260px 260px, 100% 100%, 300px 300px, 100% 100%; background-repeat: repeat, no-repeat, repeat, no-repeat;
  mix-blend-mode: multiply; opacity: .25; }
:root[data-theme="dark"] body::after { mix-blend-mode: screen; opacity: .08; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::after { mix-blend-mode: screen; opacity: .08; } }


/* fill-in-the-blank: the next scroll fills it in */
.blank .story-small { opacity: 0; transition: opacity .4s; }
.blank.on .story-small { opacity: 1; }
.blank .nudge { margin-top: var(--s4); font: .78rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: opacity .3s; }
.blank.on .nudge { opacity: 0; }
.year.sky2 .y { -webkit-text-stroke-color: var(--skypage-ink); }
.tl .dot .emo { font-size: 1.15rem; }
.map svg { border-radius: 12px; }
.map .route { stroke-linejoin: round; }
.cover-word .hid { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; transition: color .4s; }
.cover-word .hid::after { transition: opacity .5s; }
.cover-word.on .hid { color: var(--clay); font-style: italic; }
.cover-word.on .hid::after { opacity: 0; }
.split > .src { left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); background: var(--bg); color: var(--muted); padding: 8px 14px; border-radius: 14px; }
.split > .src .cite { color: var(--ink) !important; opacity: 1; }
.split .half.day { padding-bottom: 150px; }
@media (min-width: 800px) { .split .half.night, .split .half.day { padding-bottom: 120px; } }
.map svg { max-width: 44rem; } .map .col { max-width: 46rem; }

/* =================== colour palettes =================== */
:root[data-pal="sea"] { --bg: #eef1f2; --ink: #18222b; --muted: #5b6670; --line: #cfd7dc; --accent: #1f5a7a; --soft: #dfe6ea; --paper: #f6f8f9; --sun: #e9c46a; --leaf: #7fa58c; --clay: #e07a5f; --sky: #6b9ac4; --violet: #1f3a5a; --violet-ink: #eef4fa; --clayband: #c4573c; --skypage: #b8d4e3; --skypage-ink: #14202a; --sunpage: #f0d27a; --sunpage-ink: #221d12; }
@media (prefers-color-scheme: dark) { :root[data-pal="sea"]:not([data-theme="light"]) { --bg: #141a1f; --ink: #e4ebef; --muted: #93a1ac; --line: #2c363e; --accent: #8fc1dd; --soft: #1d252c; --paper: #192127; --sun: #8d7740; --leaf: #4f6d5a; --clay: #8e4c3a; --sky: #3f6585; --violet: #1a2c44; --violet-ink: #e6eef7; --clayband: #7a3626; --skypage: #24394b; --skypage-ink: #e6eef7; --sunpage: #5a4a22; --sunpage-ink: #f6edd2; } }
:root[data-pal="sea"][data-theme="dark"] { --bg: #141a1f; --ink: #e4ebef; --muted: #93a1ac; --line: #2c363e; --accent: #8fc1dd; --soft: #1d252c; --paper: #192127; --sun: #8d7740; --leaf: #4f6d5a; --clay: #8e4c3a; --sky: #3f6585; --violet: #1a2c44; --violet-ink: #e6eef7; --clayband: #7a3626; --skypage: #24394b; --skypage-ink: #e6eef7; --sunpage: #5a4a22; --sunpage-ink: #f6edd2; }
:root[data-pal="rose"] { --bg: #f5ede9; --ink: #2a1c1c; --muted: #76605c; --line: #e2d1cb; --accent: #a83a3a; --soft: #ecdcd5; --paper: #faf5f2; --sun: #f0b860; --leaf: #9aa77a; --clay: #d9826f; --sky: #9fb3d1; --violet: #6b2d3c; --violet-ink: #fbeef0; --clayband: #a8432c; --skypage: #e8c4bd; --skypage-ink: #2a1c1c; --sunpage: #f1c76d; --sunpage-ink: #2a1c12; }
@media (prefers-color-scheme: dark) { :root[data-pal="rose"]:not([data-theme="light"]) { --bg: #1e1617; --ink: #f1e4e1; --muted: #b09a96; --line: #3e2f2f; --accent: #e6a19a; --soft: #2a1f20; --paper: #241b1c; --sun: #8f6d36; --leaf: #5d6847; --clay: #8d4b3e; --sky: #55678a; --violet: #3d1a24; --violet-ink: #fbeef0; --clayband: #6e2c22; --skypage: #4a2a2b; --skypage-ink: #f6e6e3; --sunpage: #5c4524; --sunpage-ink: #f6ead8; } }
:root[data-pal="rose"][data-theme="dark"] { --bg: #1e1617; --ink: #f1e4e1; --muted: #b09a96; --line: #3e2f2f; --accent: #e6a19a; --soft: #2a1f20; --paper: #241b1c; --sun: #8f6d36; --leaf: #5d6847; --clay: #8d4b3e; --sky: #55678a; --violet: #3d1a24; --violet-ink: #fbeef0; --clayband: #6e2c22; --skypage: #4a2a2b; --skypage-ink: #f6e6e3; --sunpage: #5c4524; --sunpage-ink: #f6ead8; }
:root[data-pal="sun"] { --bg: #f4ecd8; --ink: #2b2213; --muted: #786a4f; --line: #e2d4b2; --accent: #b5531f; --soft: #ebdfc1; --paper: #f9f3e3; --sun: #f0b43c; --leaf: #8e9c4c; --clay: #cf6a3c; --sky: #6f97b5; --violet: #2f4a3a; --violet-ink: #f2efe2; --clayband: #b5531f; --skypage: #c9d9c0; --skypage-ink: #1f2a1c; --sunpage: #f0c45a; --sunpage-ink: #2b2213; }
@media (prefers-color-scheme: dark) { :root[data-pal="sun"]:not([data-theme="light"]) { --bg: #1d1810; --ink: #f1e6cc; --muted: #ab9d7f; --line: #3b3222; --accent: #f0a46c; --soft: #272014; --paper: #221c12; --sun: #8f6b24; --leaf: #5d6633; --clay: #8b4425; --sky: #45637a; --violet: #1c2c22; --violet-ink: #eef2e6; --clayband: #7a3a1c; --skypage: #2f3f2b; --skypage-ink: #e9f0e3; --sunpage: #5e4818; --sunpage-ink: #f6ebcf; } }
:root[data-pal="sun"][data-theme="dark"] { --bg: #1d1810; --ink: #f1e6cc; --muted: #ab9d7f; --line: #3b3222; --accent: #f0a46c; --soft: #272014; --paper: #221c12; --sun: #8f6b24; --leaf: #5d6633; --clay: #8b4425; --sky: #45637a; --violet: #1c2c22; --violet-ink: #eef2e6; --clayband: #7a3a1c; --skypage: #2f3f2b; --skypage-ink: #e9f0e3; --sunpage: #5e4818; --sunpage-ink: #f6ebcf; }
:root[data-pal="news"] { --bg: #efeee9; --ink: #141414; --muted: #5e5e5a; --line: #d2d1cb; --accent: #c8321e; --soft: #e2e1db; --paper: #f7f7f3; --sun: #d9d4c4; --leaf: #b7b6ae; --clay: #c8321e; --sky: #9a9a94; --violet: #161616; --violet-ink: #f2f1ec; --clayband: #c8321e; --skypage: #d8d7d0; --skypage-ink: #141414; --sunpage: #e6e1cf; --sunpage-ink: #141414; }
@media (prefers-color-scheme: dark) { :root[data-pal="news"]:not([data-theme="light"]) { --bg: #121212; --ink: #ecebe6; --muted: #9c9b96; --line: #2f2f2d; --accent: #ff6a4d; --soft: #1c1c1b; --paper: #191918; --sun: #4a4842; --leaf: #3e3e3b; --clay: #b83a26; --sky: #4b4b48; --violet: #000000; --violet-ink: #ecebe6; --clayband: #9e2e1c; --skypage: #2a2a28; --skypage-ink: #ecebe6; --sunpage: #3a3934; --sunpage-ink: #ecebe6; } }
:root[data-pal="news"][data-theme="dark"] { --bg: #121212; --ink: #ecebe6; --muted: #9c9b96; --line: #2f2f2d; --accent: #ff6a4d; --soft: #1c1c1b; --paper: #191918; --sun: #4a4842; --leaf: #3e3e3b; --clay: #b83a26; --sky: #4b4b48; --violet: #000000; --violet-ink: #ecebe6; --clayband: #9e2e1c; --skypage: #2a2a28; --skypage-ink: #ecebe6; --sunpage: #3a3934; --sunpage-ink: #ecebe6; }
:root[data-pal="linen"] { --bg: #fff1e5; --ink: #33302e; --muted: #66605c; --line: #e9d6c6; --accent: #7c4c30; --soft: #f2dfce; --paper: #fff7f0; --sun: #edbe5f; --leaf: #92a16b; --clay: #d68064; --sky: #8ca9ca; --violet: #5b3464; --violet-ink: #f8eef6; --clayband: #b04d33; --skypage: #c8c3cc; --skypage-ink: #221d22; --sunpage: #eec867; --sunpage-ink: #251d12; }
@media (prefers-color-scheme: dark) { :root[data-pal="linen"]:not([data-theme="light"]) { --bg: #211814; --ink: #efe5de; --muted: #aca096; --line: #44352e; --accent: #d1b694; --soft: #2f231e; --paper: #281e1a; --sun: #967940; --leaf: #5e6b44; --clay: #8f513e; --sky: #536a8a; --violet: #36203c; --violet-ink: #f4eaf2; --clayband: #6e3023; --skypage: #3b3540; --skypage-ink: #efe8ee; --sunpage: #5c4823; --sunpage-ink: #f6ecd5; } }
:root[data-pal="linen"][data-theme="dark"] { --bg: #211814; --ink: #efe5de; --muted: #aca096; --line: #44352e; --accent: #d1b694; --soft: #2f231e; --paper: #281e1a; --sun: #967940; --leaf: #5e6b44; --clay: #8f513e; --sky: #536a8a; --violet: #36203c; --violet-ink: #f4eaf2; --clayband: #6e3023; --skypage: #3b3540; --skypage-ink: #efe8ee; --sunpage: #5c4823; --sunpage-ink: #f6ecd5; }
body.serif-only #book { --sans: var(--serif); }
#palBtn i { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: -.02em; box-shadow: .45em 0 0 var(--clay), .9em 0 0 var(--sky); margin-right: calc(6px + .9em); }

/* real photos (one or two per book, as accents) */
.realfig .frame { background: var(--soft); }
.realfig .frame img, .still img.bleed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); text-align: center; padding: var(--s4); border: 1.5px dashed var(--line); color: var(--muted); }
.slot span { font-size: 2rem; } .slot b { font-weight: 500; font-size: 1.1rem; color: var(--ink); } .slot small { font-size: .9rem; max-width: 18rem; }
.still .slot { background: #1a1815; border-color: rgb(255 255 255 / .18); color: rgb(255 255 255 / .6); padding-bottom: 40svh; }
.still .slot b { color: #f3efe6; }
.credit { display: block; margin-top: var(--s2); font-size: .78rem; color: var(--muted); }
.still .credit { color: rgb(255 255 255 / .6); }

/* =================== header + home =================== */
.top { padding-block: calc(env(safe-area-inset-top, 0px) + 14px) 14px; }
.top .logo { font: 400 1.05rem/1 var(--serif); letter-spacing: -.005em; color: var(--ink); text-decoration: none; opacity: .9; }
.top .search-btn { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; background: none; border: 0; color: var(--ink); opacity: .75; backdrop-filter: none; }
.top .search-btn:hover, .top .logo:hover { opacity: 1; }
.on-dark .top .logo, .on-dark .top .search-btn { color: #fff; }
.on-dark .top button.search-btn { background: none; border: 0; }
.on-accent .top .logo, .on-accent .top .search-btn { color: var(--acid-ink); }
.on-accent .top button.search-btn { border: 0; }
.top .logo, .top .search-btn { transition: color .4s; }
.foot .review { display: flex; gap: 4px; pointer-events: auto; }
.foot .review button { white-space: nowrap; background: none; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 999px; padding: 4px 10px; cursor: pointer; color: inherit; font: inherit; font-size: 11.5px; }
@media (max-width: 560px) { .foot .review #themeBtn { display: none; } }
.is-home .foot .arrows, .is-home .foot .bar, .is-home .foot .count { visibility: hidden; }
.is-home .foot { background: none; }
#home { height: 100%; overflow-y: auto; }
.home-in { max-width: 60rem; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 96px) max(20px, env(safe-area-inset-right, 0px)) 120px max(20px, env(safe-area-inset-left, 0px)); }
.home-hello { font: italic 400 clamp(1.5rem, 5vw, 2.1rem)/1.25 var(--serif); max-width: 28rem; text-wrap: balance; }
.finder { margin-top: var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.finder .q { display: flex; align-items: center; gap: var(--s2); border-bottom: 1px solid var(--line); padding-bottom: var(--s2); color: var(--muted); max-width: 26rem; }
.finder input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 400 1.1rem/1.4 var(--serif); color: var(--ink); }
.finder input::placeholder { color: var(--muted); font-style: italic; }
.genres { display: flex; flex-wrap: wrap; gap: 6px; }
.genres button { font: 400 .9rem/1 var(--serif); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; }
.genres button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cards { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--s4) var(--s5); }
.card { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s3); align-items: start; text-decoration: none; color: var(--ink); padding-top: var(--s3); border-top: 1px solid var(--line); }
.card.soon { opacity: .5; }
.card .thumb { position: relative; width: 4.5rem; height: 4.5rem; display: grid; place-items: center; }
.card .thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.card .thumb .emo { position: relative; font-size: 1.7rem; }
.card .txt { display: flex; flex-direction: column; gap: var(--s1); }
.card .meta { font: .78rem/1.3 var(--serif); color: var(--muted); letter-spacing: .02em; }
.card .t { font: 400 1.3rem/1.2 var(--serif); }
.card .h { font: 400 .98rem/1.4 var(--serif); color: var(--muted); }
a.card:hover .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.empty { margin-top: var(--s5); color: var(--muted); font-style: italic; }
.site-foot { display: flex; gap: var(--s3); justify-content: center; margin-top: var(--s6); font: .76rem/1.4 var(--serif); color: var(--muted); opacity: .6; }
.site-foot a { color: inherit; }
.site-foot:hover { opacity: .9; }
.end .site-foot { justify-content: flex-start; margin-top: var(--s4); }
.still img.bleed { object-position: 48% 35%; }
.realfig .frame { aspect-ratio: 3 / 2; }
.credit a { color: inherit; }
/* photo on top, words underneath: text never sits on the photo */
.still { background: #0f0e0d; }
.still img.bleed { inset: 0 0 auto 0; height: 62%; object-position: 50% 45%; }
.still .over { top: 62%; background: none; display: flex; align-items: flex-start; padding-top: var(--s4); }
.still .over .col { max-width: 40rem; }
.still .over .story-line { font-size: clamp(1.4rem, 5vw, 2.1rem); }
@media (max-width: 560px) { .still img.bleed { height: 52%; object-position: 47% 50%; } .still .over { top: 52%; } }
.photo-full.still > .src { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 56px); left: 0; right: 0; max-width: none; text-align: center; padding-inline: 20px; }

/* =================== system sans for controls, form =================== */
:root { --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Hiragino Sans", "Apple SD Gothic Neo", "Segoe UI", system-ui, sans-serif; }
.finder { margin-top: 0; }
.finder input { font: 600 1.05rem/1.4 var(--ui); letter-spacing: -.01em; }
.finder input::placeholder { font-style: normal; }
.genres button { font: 600 .86rem/1 var(--ui); letter-spacing: -.005em; }
.top .hbtn { font: italic 400 .98rem/1 var(--serif); color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); white-space: nowrap; opacity: .78; transition: color .4s, opacity .2s; }
.top .hbtn:hover { opacity: 1; }
.on-dark .top .hbtn { color: #fff; } .on-accent .top .hbtn { color: var(--acid-ink); }
body:not(.is-home) .only-home, .is-home .only-book, .is-form .only-book, .is-form .only-home { display: none; }
.is-form .foot .arrows, .is-form .foot .bar, .is-form .foot .count { visibility: hidden; }
#form { height: 100%; overflow-y: auto; }
.sform { max-width: 34rem; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 96px) max(20px, env(safe-area-inset-right, 0px)) 120px max(20px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: var(--s4); font-family: var(--ui); }
.sform h1 { font: 400 clamp(1.8rem, 6vw, 2.4rem)/1.15 var(--serif); }
.sform fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.sform legend { font: 600 .9rem/1.3 var(--ui); margin-bottom: var(--s2); padding: 0; }
.sform .kind label { display: inline-flex; align-items: center; gap: var(--s2); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; cursor: pointer; font: 600 .92rem/1 var(--ui); }
.sform .kind input { accent-color: var(--ink); margin: 0; }
.sform .kind label:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.sform .kind label:has(input:checked) input { accent-color: var(--bg); }
.sform .f { display: flex; flex-direction: column; gap: var(--s2); }
.sform .f label { font: 600 .9rem/1.3 var(--ui); }
.sform .f small { font-weight: 500; color: var(--muted); }
.sform input:not([type=radio]), .sform textarea, .sform select { font: 500 1rem/1.4 var(--ui); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; width: 100%; }
.sform textarea { resize: vertical; }
.sform :is(input, textarea, select):focus { outline: 2px solid color-mix(in srgb, var(--ink) 35%, transparent); outline-offset: 1px; }
#form .only-topic, #form .only-edit { display: none; }
#form[data-kind="topic"] .only-topic, #form[data-kind="edit"] .only-edit { display: flex; }
.sform .actions { display: flex; align-items: center; gap: var(--s3); }
.sform .actions button { font: 600 1rem/1 var(--ui); background: var(--ink); color: var(--bg); border: 0; border-radius: 999px; padding: 12px 22px; cursor: pointer; }
.sform .actions a { font: 500 .95rem/1 var(--ui); color: var(--muted); }
.sform.done .f, .sform.done fieldset, .sform.done .actions { display: none !important; }
.sform .sent { font: italic 1.3rem/1.4 var(--serif); }

/* ================= Japanese & Korean typography ================= */
/* Latin stays in Newsreader; CJK falls through to a matching literary serif */
:root:lang(ja) { --serif: "Newsreader", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --ui: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif; }
:root:lang(ko) { --serif: "Newsreader", "Gowun Batang", "AppleMyungjo", "Nanum Myeongjo", serif;
  --ui: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif; }
/* never slant or embolden CJK glyphs by fake; Latin keeps its real italic */
:lang(ja) body, :lang(ko) body { font-synthesis: none; font-kerning: normal; }
/* proportional kana and half-width punctuation (palt), so ト, 「 and 。 carry no empty half-box */
:lang(ja) body { line-break: strict; text-spacing-trim: normal; text-autospace: ideograph-alpha; font-feature-settings: "palt"; letter-spacing: .05em; }
.nb { white-space: nowrap; }
:lang(ko) body { word-break: keep-all; overflow-wrap: break-word; text-autospace: no-autospace; }
/* phrase-aware breaks for headline-size Japanese */
/* the text pass puts <wbr> between phrases; keep-all stops breaks anywhere else */
:lang(ja) #book, :lang(ja) .cards { word-break: keep-all; overflow-wrap: break-word; }
:lang(ja) .tw .w { white-space: nowrap; }
/* emphasis: sesame dots in Japanese, dots in Korean (no italics for CJK) */
:lang(ja) em, :lang(ko) em { font-style: normal; background: linear-gradient(transparent 64%, color-mix(in srgb, var(--sun) 55%, transparent) 64%, color-mix(in srgb, var(--sun) 55%, transparent) 92%, transparent 92%); padding: 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:lang(ja) .color em, :lang(ko) .color em, :lang(ja) .photo-full em, :lang(ko) .photo-full em { background: linear-gradient(transparent 66%, color-mix(in srgb, currentColor 28%, transparent) 66%, color-mix(in srgb, currentColor 28%, transparent) 90%, transparent 90%); }
/* furigana */
:lang(ja) ruby { ruby-align: center; }
:lang(ja) rt { font-size: .4em; letter-spacing: .04em; color: var(--muted); font-weight: 400; ruby-position: over; position: relative; top: -.32em; line-height: 1; }
:lang(ja) .color rt, :lang(ja) .photo-full rt { color: inherit; opacity: .75; }

/* CJK glyphs fill the em box, so display sizes come down and leading opens up */
:lang(ja) .cover h1, :lang(ko) .cover h1 { font-size: clamp(2.1rem, 8.4vw, 3rem); line-height: 1.32; font-weight: 500; }
:lang(ja) .cover h1 { letter-spacing: .02em; font-feature-settings: "palt"; }
:lang(ja) .cover .hook, :lang(ko) .cover .hook { font-size: 1.15rem; line-height: 1.75; font-style: normal; }
:lang(ja) .story-line, :lang(ko) .story-line { font-size: clamp(1.45rem, 5.6vw, 2.1rem); line-height: 1.55; }
:lang(ja) .story-line { font-feature-settings: "palt"; letter-spacing: .06em; }
:lang(ko) .story-line, :lang(ko) .cover h1, :lang(ko) .shout { letter-spacing: -.01em; }
:lang(ja) .story-small, :lang(ko) .story-small { font-size: 1.02rem; line-height: 1.85; }
:lang(ja) .color .shout, :lang(ko) .color .shout { font-size: clamp(1.9rem, 8vw, 3.3rem); line-height: 1.38; }
:lang(ja) .color .shout { font-feature-settings: "palt"; letter-spacing: .04em; }
:lang(ja) .accent-acid .shout, :lang(ko) .accent-acid .shout { font-family: var(--ui); font-weight: 800; font-size: clamp(2.6rem, 13vw, 6rem); line-height: 1.12; letter-spacing: -.01em; }
:lang(ja) .skim .txt, :lang(ko) .skim .txt { font-size: clamp(1.5rem, 6vw, 2.3rem); line-height: 1.6; font-style: normal; }
:lang(ja) .quote .hero, :lang(ko) .quote .hero { font-size: clamp(1.45rem, 5.8vw, 2.2rem); line-height: 1.6; font-style: normal; }
:lang(ja) .quote .hero::before { content: "「"; } :lang(ja) .quote .hero::after { content: "」"; }
:lang(ja) .blank .line, :lang(ko) .blank .line { font-size: clamp(1.55rem, 6.2vw, 2.5rem); line-height: 1.6; }
:lang(ja) .cover-word .txt, :lang(ko) .cover-word .txt { font-size: clamp(1.5rem, 6vw, 2.2rem); line-height: 1.6; }
:lang(ja) .tw .out, :lang(ko) .tw .out { font-size: clamp(1.45rem, 5.6vw, 2.2rem); line-height: 1.6; }
:lang(ja) .tw .out .w.new.on, :lang(ko) .tw .out .w.new.on { font-style: normal; }
:lang(ja) .flip .q, :lang(ko) .flip .q { font-size: clamp(1.35rem, 5.4vw, 1.9rem); line-height: 1.55; }
:lang(ja) .flip .a, :lang(ko) .flip .a { font-size: clamp(2.4rem, 11vw, 4rem); font-style: normal; font-weight: 500; }
:lang(ja) .number .what, :lang(ko) .number .what { font-size: 1.15rem; line-height: 1.75; }
:lang(ja) .take, :lang(ko) .take { font-size: clamp(1.15rem, 4.4vw, 1.5rem); line-height: 1.6; }
:lang(ja) .sticky p, :lang(ko) .sticky p { font-size: clamp(1.1rem, 4.6vw, 1.4rem); line-height: 1.6; font-style: normal; }
:lang(ja) .card-post .msg, :lang(ko) .card-post .msg { font-style: normal; font-size: clamp(.86rem, 3.3vw, 1.05rem); line-height: 1.75; }
:lang(ja) .dict .hw, :lang(ko) .dict .hw { font-size: clamp(2.6rem, 12vw, 4.6rem); line-height: 1.15; letter-spacing: 0; }
:lang(ja) .dict .hw { font-feature-settings: "palt"; }
:lang(ja) .defs p, :lang(ko) .defs p { line-height: 1.75; }
:lang(ja) .lbl .nm, :lang(ko) .lbl .nm { font-size: 1.7rem; line-height: 1.3; }
:lang(ja) .lbl p, :lang(ko) .lbl p { line-height: 1.75; }
:lang(ja) .tl li > span:last-child, :lang(ko) .tl li > span:last-child { font-size: 1.05rem; line-height: 1.6; }
:lang(ja) .deck h3, :lang(ko) .deck h3 { line-height: 1.45; }
:lang(ja) .deck p, :lang(ko) .deck p, :lang(ja) .split .l, :lang(ko) .split .l { line-height: 1.7; }
:lang(ja) .stamp, :lang(ko) .stamp { font-family: var(--serif); font-weight: 700; letter-spacing: .2em; padding: .2em .25em .2em .45em; }
:lang(ja) .chips span, :lang(ko) .chips span { font-family: var(--mono), var(--ui); }
:lang(ja) :is(.kick, .by, .unit, .loop, .quote .plain span, .framed figcaption b), :lang(ko) :is(.kick, .by, .unit, .loop, .quote .plain span, .framed figcaption b) { letter-spacing: .06em; }
:lang(ja) .src, :lang(ko) .src, :lang(ja) .srcs, :lang(ko) .srcs { line-height: 1.6; }
:lang(ja) .tip, :lang(ko) .tip { line-height: 1.7; }
:lang(ja) .tip b, :lang(ko) .tip b { font-style: normal; font-weight: 500; }
:lang(ja) .attn text.hot, :lang(ko) .attn text.hot { font-style: normal; }
:lang(ja) .attn text, :lang(ko) .attn text { font-size: 23px; }
:lang(ja) .map text.it, :lang(ko) .map text.it { font-style: normal; }
:lang(ja) .map text, :lang(ko) .map text { font-size: 14px; letter-spacing: .02em; }
:lang(ja) .map text.it, :lang(ko) .map text.it { font-size: 12px; }
:lang(ja) .words dt, :lang(ko) .words dt, :lang(ja) .words dd, :lang(ko) .words dd { line-height: 1.7; }
:lang(ja) .card .t, :lang(ko) .card .t { font-size: 1.15rem; line-height: 1.5; }
:lang(ja) .card .t { font-feature-settings: "palt"; letter-spacing: .04em; }
:lang(ja) .card .h, :lang(ko) .card .h { font-size: .9rem; line-height: 1.7; }
:lang(ja) .finder input, :lang(ko) .finder input, :lang(ja) .genres button, :lang(ko) .genres button { letter-spacing: 0; }
:lang(ja) .sform, :lang(ko) .sform { line-height: 1.6; letter-spacing: .02em; }
/* the original English under a translated quote */
.orig { margin-top: var(--s3); font: italic 400 .92rem/1.45 "Newsreader", Georgia, serif; color: var(--muted); max-width: 26rem; letter-spacing: 0; text-wrap: pretty; }
.orig span { display: block; font: 500 .72rem/1 var(--ui); letter-spacing: .06em; font-style: normal; margin-bottom: 6px; opacity: .8; }
.skim .orig { opacity: 0; transition: opacity .4s; } .skim.read .orig { opacity: 1; }
.quote .orig { margin: 0 auto var(--s4); }
/* language switch in the faint footer */
.site-foot { flex-wrap: wrap; }
.site-foot .langs { display: inline-flex; gap: var(--s2); }
.site-foot .langs a { text-decoration: none; }
.site-foot .langs a[aria-current] { text-decoration: underline; text-underline-offset: .25em; }
.site-foot .langs::before { content: "·"; margin-right: var(--s1); }

/* Latin inside Japanese/Korean: Newsreader runs small next to full-box CJK, so lift it a touch */
:lang(ja) .lt { font-size: 1.07em; letter-spacing: 0; }
:lang(ko) .lt { font-size: 1.04em; letter-spacing: 0; }
/* chrome and labels in Japanese/Korean: system sans, a step bolder, a step smaller */
:lang(ja) .top .hbtn, :lang(ko) .top .hbtn { font: 600 .8rem/1 var(--ui); letter-spacing: .02em; opacity: .82; }
:lang(ja) .map text, :lang(ko) .map text { font-family: var(--ui); font-weight: 600; font-size: 12.5px; letter-spacing: 0; }
:lang(ja) .map text.it, :lang(ko) .map text.it { font-weight: 500; font-size: 11px; }
:lang(ja) .scale .ev span, :lang(ko) .scale .ev span { font: 500 .72rem/1.35 var(--ui); width: 8.6rem; }
/* city names sit on a land-coloured halo so the dotted route never runs through them */
.map text:not(.it) { paint-order: stroke; stroke: color-mix(in srgb, var(--leaf) 35%, var(--bg)); stroke-width: 4px; stroke-linejoin: round; }
:lang(ja) .scale .ev span { white-space: nowrap; width: auto; }
/* hanging punctuation (palt makes 。、「」 half a box; these take back that half plus the tracking) */
/* the overhang goes on the sentence box, not inside it, so it never makes a line wrap early */
:lang(ja) .sn.he { margin-right: -.55em; }
:lang(ja) .sn.hs { margin-left: -.5em; }
:lang(ja) .sn, :lang(ko) .sn { display: inline-block; text-wrap: balance; }
/* fill-in-the-blank: the dashed rule hugs the word, and option labels never wrap */
:lang(ja) .blank .gap, :lang(ko) .blank .gap { line-height: 1.1; padding: 0 .05em .08em; }
:lang(ja) .blank .opt, :lang(ko) .blank .opt { grid-template-columns: 6em minmax(0, 1fr); font-family: var(--ui); font-weight: 500; }
:lang(ja) .blank .opt span, :lang(ko) .blank .opt span { white-space: nowrap; }

/* =================== Qwen3-Coder book: new forms (swap, dots, balance) and variants =================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* cover: "A vs B" title card */
.cover h1.vs { display: flex; flex-direction: column; align-items: center; margin-bottom: 0; }
.vs__a, .vs__b { display: block; font-size: clamp(3.2rem, 15vw, 6rem); line-height: .95; font-weight: 400; }
.vs__v { display: block; font-style: italic; font-size: clamp(1.4rem, 5vw, 2rem); line-height: 1; color: var(--muted); margin: var(--s2) 0; }
:lang(ja) .cover h1.vs, :lang(ko) .cover h1.vs { font-size: inherit; line-height: inherit; }
:lang(ja) .vs__a, :lang(ja) .vs__b, :lang(ko) .vs__a, :lang(ko) .vs__b { line-height: 1.1; letter-spacing: 0; }
.vs-cover .hook { max-width: 22rem; margin-top: var(--s4); text-wrap: balance; }
.vs-cover .vig { width: 9rem; margin-bottom: var(--s3); }
/* split on paper: the two definitions */
.split.paper .half { color: var(--ink); }
.split.paper .l { font-size: 1.05rem; text-wrap: balance; }
.dict .hw.long { font-size: clamp(2.6rem, 12vw, 5rem); }
.stamp.long { font-size: clamp(1.5rem, 7.4vw, 3rem); }
/* label with a line above it */
.lbl-line { margin-bottom: var(--s4); }
.lbl p .term { font: inherit; }
/* code with a missing line */
.diff .ln.miss { color: var(--code-dim); font-style: italic; outline: 1px dashed var(--code-num); outline-offset: -3px; }
.diff .ln.miss em { float: right; font-style: normal; color: var(--code-num); padding-left: var(--s3); }
@media (max-width: 400px) { .diff .ln.miss em { float: none; display: block; padding-left: 0; } }
/* letters: numerals, a line above */
.letters-p .letters { margin-top: var(--s4); }
.letters-p .letter .l { font-variant-numeric: lining-nums; }

/* ---- swap: one sentence, one rolling word ---- */
.swap .col { max-width: 36rem; }
.swap__slot { display: grid; width: min(100%, 22rem); margin: var(--s3) 0; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink);
  font: italic 400 clamp(1.75rem, 6.6vw, 2.5rem)/1.25 var(--serif); text-wrap: balance; }
@media (min-width: 800px) { .swap__slot { width: min(100%, 34rem); } }
.swap__opt { grid-area: 1 / 1; justify-self: center; align-self: center; position: relative; z-index: 1; opacity: 0; transform: translateY(.35em);
  transition: opacity .38s cubic-bezier(.2, .7, .2, 1), transform .38s cubic-bezier(.2, .7, .2, 1); }
.swap__opt.was { transform: translateY(-.35em); }
.swap__opt.is-on { opacity: 1; transform: none; }
.swap__opt::before { content: ""; position: absolute; z-index: -1; inset: .1em -.3em; background: var(--sun); opacity: .55; border-radius: 40% 55% 45% 60% / 60% 45% 55% 40%; filter: url(#crayon);
  transform: scaleX(.2); transform-origin: left center; transition: transform .3s cubic-bezier(.2, .7, .2, 1) .12s; }
.swap__opt.is-on::before { transform: none; }
.swap__pips { display: flex; gap: var(--s2); justify-content: center; margin-bottom: var(--s4); }
.swap__pips i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .3s; }
.swap__pips i.on { background: var(--ink); }
.swap__count { font-size: 1rem; font-style: italic; color: var(--muted); }
.swap__after { opacity: 0; transition: opacity .4s; }
.swap[data-step="3"] .swap__after { opacity: 1; }
.swap .nudge { margin-top: var(--s4); font: .78rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: opacity .3s; }
.swap[data-step="3"] .nudge { opacity: 0; }
:lang(ja) .swap__slot, :lang(ko) .swap__slot { font-style: normal; font-size: clamp(1.45rem, 5.6vw, 2.1rem); line-height: 1.5; }
:lang(ja) .swap__opt { word-break: auto-phrase; } :lang(ko) .swap__opt { word-break: keep-all; }

/* ---- dots: every app is one dot ---- */
.dots .col { max-width: 36rem; }
.dots .story-line { margin-bottom: var(--s4); }
.dots svg .e { fill: none; stroke: color-mix(in srgb, var(--muted) 42%, var(--bg)); stroke-width: 1.2; }
.dots svg .f { fill: var(--clay); fill-opacity: 0; transition: fill-opacity .16s; transition-delay: calc(var(--i) * 4ms); }
.dots svg .wall { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linejoin: round; }
.dots svg .pile { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity .2s; }
.jars { display: flex; justify-content: center; gap: var(--s5); cursor: pointer; }
@media (max-width: 520px) { .jars { gap: var(--s4); } }
.jar { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.jar .jl { font-size: 1rem; line-height: 1.3; min-height: 2.6em; max-width: 9rem; text-wrap: balance; }
.jar svg { height: min(270px, 36svh); width: auto; overflow: visible; }
.jar figcaption { display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: 0; transition: opacity .3s .4s; }
.jar figcaption b { font-weight: 400; font-size: clamp(1.4rem, 5vw, 1.8rem); line-height: 1.1; font-variant-numeric: lining-nums; }
.jar figcaption span { font-size: 1rem; font-style: italic; color: var(--muted); }
.dots .story-small { margin-top: var(--s4); opacity: 0; transition: opacity .4s; }
.dots[data-step="1"] .jar:first-child .f, .dots[data-step="2"] .jar .f { fill-opacity: 1; }
.dots[data-step="1"] .jar:first-child :is(.pile, figcaption), .dots[data-step="2"] .jar :is(.pile, figcaption) { opacity: 1; }
.jars ~ .story-small { transition-delay: .7s; }
.dots[data-step="2"] .story-small { opacity: 1; }
/* sieve: one field of 1,840 */
.sieve { width: min(100%, 26rem); display: flex; flex-direction: column; gap: var(--s2); cursor: pointer; }
.sieve svg { width: 100%; max-height: 44svh; aspect-ratio: 46 / 40; overflow: visible; }
.sieve svg .e { stroke-width: 1; }
.sieve svg .b circle { fill: var(--clay); }
.sieve svg .b { opacity: 0; transition: opacity .16s; transition-delay: calc(var(--k) * 60ms); }
.sieve svg .ring { fill: none; stroke: var(--accent); stroke-width: 2.5; opacity: 0; transition: opacity .3s; }
.sieve .cap { font-size: 1rem; font-style: italic; line-height: 1.3; opacity: 0; transition: opacity .3s; }
.sieve .cap1 { align-self: flex-start; display: flex; align-items: flex-end; gap: var(--s2); }
.sieve .cap1 svg { width: 16px; height: 20px; aspect-ratio: auto; flex: none; }
.sieve .cap1 path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.sieve .cap2 { align-self: flex-end; color: var(--ink); }
.dots[data-step="1"] .sieve :is(.ring, .cap1), .dots[data-step="2"] .sieve :is(.ring, .cap1, .b, .cap2) { opacity: 1; }
.dots[data-step="2"] .sieve .cap2 { transition-delay: .7s; }

/* ---- balance: what's solid against what's not checked yet ---- */
.balance .col { max-width: 32rem; }
.balance__beam { width: min(100%, 26rem); height: auto; margin-top: var(--s4); overflow: visible; cursor: pointer; }
.balance__beam .ful { fill: var(--ink); }
.balance__beam .post, .balance__beam .beam { stroke: var(--ink); stroke-linecap: round; }
.balance__beam .post { stroke-width: 2; } .balance__beam .beam { stroke-width: 3; }
.balance__beam .str { stroke: var(--muted); stroke-width: 1; }
.balance__beam .pn { fill: var(--soft); stroke: var(--ink); stroke-width: 1.5; }
.balance__beam .arm { transform-box: view-box; transform-origin: 180px 40px; transition: transform .6s cubic-bezier(.3, 1.3, .5, 1); }
.balance__pans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); width: min(100%, 26rem); margin-top: calc(-1 * var(--s2)); }
.pan { transition: transform .6s cubic-bezier(.3, 1.3, .5, 1); }
.pan__h { font-size: 1.1rem; font-style: italic; text-align: center; margin-bottom: var(--s2); }
.pan ul { list-style: none; margin: 0; padding: 0; }
.pan li { font-size: 1rem; line-height: 1.3; padding: var(--s2) var(--s3); border-radius: 999px; margin-bottom: var(--s2); opacity: 0; transform: translateY(-24px);
  transition: opacity .42s, transform .42s cubic-bezier(.3, 1.3, .5, 1); }
@media (max-width: 400px) { .pan li { font-size: .95rem; } }
.pan li:nth-child(2) { transition-delay: .12s; } .pan li:nth-child(3) { transition-delay: .24s; }
.pan--l li { background: color-mix(in srgb, var(--leaf) 24%, var(--paper)); border: 1px solid var(--line); }
.pan--r li { background: transparent; border: 1.5px dashed var(--muted); }
.pan li:nth-child(odd) { --r: -1.2deg; } .pan li:nth-child(even) { --r: 1deg; }
.balance[data-step="1"] .pan--l li, .balance[data-step="2"] .pan li { opacity: 1; transform: rotate(var(--r)); }
.balance[data-step="1"] .arm { transform: rotate(-4deg); }
.balance[data-step="1"] .pan--l { transform: translateY(10px); } .balance[data-step="1"] .pan--r { transform: translateY(-10px); }
.balance__after { opacity: 0; transition: opacity .4s .6s; }
.balance[data-step="2"] .balance__after { opacity: 1; }
:lang(ja) .pan li, :lang(ko) .pan li { line-height: 1.55; border-radius: 1.2em; }

/* ---- bars that go both ways from zero ---- */
.hb2 .col { max-width: 34rem; }
.hb2__rows { width: 100%; max-width: 30rem; display: flex; flex-direction: column; gap: var(--s3); text-align: left; margin-top: var(--s4); }
.hb2__row { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); gap: var(--s2); align-items: center; }
.hb2__l { font-size: 1rem; line-height: 1.2; }
.hb2__t { position: relative; height: 1.6rem; }
.hb2__t::before { content: ""; position: absolute; top: calc(-1 * var(--s2)); bottom: calc(-1 * var(--s2)); left: var(--z); width: 1.5px; margin-left: -.75px; background: var(--ink); z-index: 1; }
.hb2__t i { position: absolute; top: 0; bottom: 0; border-radius: 3px; filter: url(#crayon-fine); transform: scaleX(0); transition: transform .3s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d) * 80ms + .2s); }
.hb2__t i.pos { background: var(--clay); transform-origin: left center; }
.hb2__t i.neg { background: var(--sky); transform-origin: right center; }
.hb2__t i.zero { width: 3px; margin-left: -1.5px; background: var(--ink); filter: none; border-radius: 0; z-index: 2; }
.hb2__t b { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.2rem; font-weight: 400; white-space: nowrap; font-variant-numeric: lining-nums; }
.page.is-on .hb2__t i { transform: none; }
.hb2 .story-small { margin-top: var(--s4); }
.hb2 .made { margin-top: var(--s2); font: italic .95rem/1.45 var(--serif); color: var(--muted); max-width: 26rem; }
@media (max-width: 520px) { .hb2__row { grid-template-columns: 6.6rem minmax(0, 1fr); } .hb2__l { font-size: .95rem; } .hb2__t b { font-size: 1.05rem; } .hb2 .story-small { font-size: 1.05rem; } }

/* ---- archive page (monochrome) ---- */
.still.archive img.bleed { filter: grayscale(1) sepia(.12) contrast(.92) brightness(1.02); }
.still.archive .credit { font: italic .8rem/1.4 var(--serif); color: rgb(255 255 255 / .6); }

@media (prefers-reduced-motion: reduce) {
  .swap__opt, .swap__opt::before, .dots svg .f, .sieve svg .b, .jar figcaption, .dots .story-small, .balance__beam .arm, .pan, .pan li, .balance__after, .hb2__t i { transition: none !important; }
  .swap__opt, .swap__opt.was { transform: none; }
  .pan li { transform: none !important; }
}

/* Japanese and Korean run taller: smaller figures so every step fits a 375×667 screen */
:lang(ja) .jar svg, :lang(ko) .jar svg { height: min(220px, 29svh); }
:lang(ja) .jar figcaption b, :lang(ko) .jar figcaption b { font-size: 1.15rem; }
:lang(ja) .dots .story-line, :lang(ko) .dots .story-line { margin-bottom: var(--s3); }
:lang(ja) :is(.dots, .hb2, .balance) .story-small, :lang(ko) :is(.dots, .hb2, .balance) .story-small { font-size: .98rem; line-height: 1.6; margin-top: var(--s3); }
:lang(ja) .sieve svg, :lang(ko) .sieve svg { max-height: 34svh; }
:lang(ja) .hb2__rows, :lang(ko) .hb2__rows { gap: var(--s2); margin-top: var(--s3); }
:lang(ja) .hb2 .made, :lang(ko) .hb2 .made { font-size: .85rem; line-height: 1.5; }
:lang(ja) .pan li, :lang(ko) .pan li { font-size: .9rem; line-height: 1.4; padding: var(--s1) var(--s3); }
@media (max-height: 700px) { .balance__beam { width: min(100%, 20rem); margin-top: var(--s3); } }
/* Korean: a sentence box swallows the space before it, so put the gap back */
:lang(ko) .sn + .sn { margin-left: .28em; }

/* ---------- Daylight Saving Time book ---------- */
.dst-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dst-after { opacity: 0; transition: opacity .45s .35s; }
.page.on .dst-after { opacity: 1; }
.dst-pill { display: inline-block; margin-top: var(--s3); transition: opacity .3s; pointer-events: none; }
.page.on .dst-pill { opacity: 0; }
.deck.three > div:nth-child(3) { grid-column: 1 / -1; justify-self: center; max-width: 50%; }
@media (max-width: 520px) { .deck.three > div:nth-child(3) { max-width: none; justify-self: stretch; } }
:lang(ja) .dst-stamp .stamp, :lang(ko) .dst-stamp .stamp { font-size: clamp(1.3rem, 6vw, 2.2rem); letter-spacing: .08em; }
.dst-stamp .stamp { font-size: clamp(1.6rem, 7vw, 2.8rem); max-width: 16ch; line-height: 1.1; text-align: center; }

/* clockjump: the missing hour */
.clockjump .cj-line { display: grid; }
.clockjump .cj-line > span { grid-area: 1 / 1; transition: opacity .4s; }
.clockjump .cj-line .b, .clockjump.on .cj-line .a { opacity: 0; }
.clockjump.on .cj-line .b { opacity: 1; }
.cj-btn { margin-top: var(--s4); background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; }
.cj-face { display: block; width: min(72vw, 40svh, 22rem); height: auto; aspect-ratio: 1; overflow: visible; }
.cj-face .rim { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.cj-face .tk { stroke: var(--muted); stroke-width: .8; } .cj-face .tk.big { stroke: var(--ink); stroke-width: 1.6; }
.cj-face .nums text { font: 15px var(--serif); fill: var(--ink); text-anchor: middle; }
.cj-wedge { fill: var(--clay); opacity: 0; transition: opacity .3s .15s; }
.cj-moon { font-size: 14px; text-anchor: middle; opacity: 0; transition: opacity .3s .15s; }
.clockjump.on .cj-wedge { opacity: .85; } .clockjump.on .cj-moon { opacity: 1; }
.cj-h { stroke: var(--ink); stroke-linecap: round; transform-box: view-box; transform-origin: 100px 100px; }
.cj-h.hr { stroke-width: 5; transform: rotate(59.75deg); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.cj-h.mn { stroke-width: 3; transform: rotate(357deg); transition: transform .2s ease-out; }
.cj-h.sec { stroke: var(--clay); stroke-width: 1; transform: rotate(180deg); }
.cj-face .hub { fill: var(--ink); }
.clockjump.is-on:not(.on) .cj-h.sec { animation: cjsec 29s steps(29) forwards; }
@keyframes cjsec { from { transform: rotate(180deg); } to { transform: rotate(354deg); } }
.clockjump.on .cj-h.hr { transform: rotate(90deg); }
.clockjump.on .cj-h.mn { transform: rotate(360deg); }
.clockjump.on .cj-h.sec { transform: rotate(360deg); transition: transform .2s; }
.clockjump.on .cj-face { animation: cjshiver .35s .2s; }
@keyframes cjshiver { 30% { transform: translateY(4px); } 60% { transform: translateY(-2px); } }
.cj-read { margin-top: var(--s3); font: 400 2rem/1 var(--serif); font-variant-numeric: tabular-nums lining-nums; }
.cj-read span { color: var(--accent); font-style: italic; opacity: 0; transition: opacity .3s .3s; }
.clockjump.on .cj-read span { opacity: 1; }
@media (max-height: 600px) { .cj-read { display: none; } }

/* sunstrip: the daylight ruler */
.sunstrip .col { max-width: 36rem; }
.sunstrip { --ss-night: color-mix(in srgb, var(--ink) 82%, var(--sky)); }
:root[data-theme="dark"] .sunstrip { --ss-night: color-mix(in srgb, var(--bg) 40%, #0e1220); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sunstrip { --ss-night: color-mix(in srgb, var(--bg) 40%, #0e1220); } }
.ss-cap { margin-top: var(--s4); font: italic 1rem/1.3 var(--serif); color: var(--muted); }
.ss-btn { position: relative; display: block; width: 100%; margin-top: var(--s4); background: none; border: 0; padding: 0 0 2.6rem; cursor: pointer; color: inherit; text-align: left; }
.ss-cap + .ss-btn { margin-top: var(--s2); }
.ss-band { position: relative; display: block; height: 4.5rem; border-radius: 6px; overflow: hidden; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.ss-band svg { position: absolute; inset: 0; width: 100%; height: 100%; } .ss-band ellipse { fill: var(--sun); opacity: .25; }
.ss-band .emo { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 2rem; }
.sunstrip.on .ss-band { animation: sspulse .7s cubic-bezier(.2,.7,.2,1); }
@keyframes sspulse { 50% { transform: scale(1.02); } }
.ss-ruler { position: relative; display: block; overflow-x: clip; overflow-y: visible; margin-top: var(--s2); height: 2.6rem; }
.ss-ruler .row { display: flex; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.sunstrip.on .ss-ruler .row { transform: translateX(calc(-100% / var(--n))); }
.ss-ruler .t { flex: 1 0 0; position: relative; height: 2.6rem; }
.ss-ruler .t i { position: absolute; left: 0; top: 0; width: 1px; height: .55rem; background: var(--muted); }
.ss-ruler .t b { position: absolute; left: 0; top: .75rem; transform: translateX(-50%); font: 400 .95rem/1.2 var(--serif); font-style: normal; color: var(--muted); white-space: nowrap; }
.ss-ruler .t:first-child b { transform: none; }
.ss-tag { position: absolute; left: 0; bottom: 0; display: grid; font: italic .9rem/1 var(--serif); }
.ss-tag > span { grid-area: 1 / 1; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); transition: opacity .4s; white-space: nowrap; }
.ss-tag .b, .sunstrip.on .ss-tag .a { opacity: 0; } .sunstrip.on .ss-tag .b { opacity: 1; }
.ss-note { margin-top: var(--s3); font: italic .85rem/1.4 var(--serif); color: var(--muted); }
@media (max-width: 520px) { .ss-band { height: 3.6rem; } .ss-band .emo { font-size: 1.6rem; } .ss-ruler .t b { font-size: .85rem; } }

/* melt: the melting poll */
.melt-btn { position: relative; margin-top: var(--s4); background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.melt-fig { position: relative; display: grid; grid-template-columns: 3rem 6rem 3rem; justify-items: center; }
.melt-fig .grid { position: relative; grid-column: 1; grid-row: 1; width: 100%; height: 34svh; }
.melt-fig .grid { justify-self: stretch; }
.melt-fig .grid i { position: absolute; left: 0; width: 12rem; border-top: 1px solid var(--line); }
.melt-fig .grid em { position: absolute; left: 0; top: -1rem; font: .75rem/1 var(--serif); font-style: normal; color: var(--muted); white-space: nowrap; }
.melt-fig .track { position: relative; z-index: 1; grid-column: 2; grid-row: 1; width: 6rem; height: 34svh; background: var(--soft); border-radius: 3px; }
.melt-fig .fill { position: absolute; left: 0; right: 0; bottom: 0; height: var(--a); background: var(--sun); border-radius: 3px; transition: height 1.1s .2s cubic-bezier(.5,0,.3,1), background-color 1.1s .2s; }
.melt-fig .fill::before { content: ""; position: absolute; inset: 0; background: inherit; border-radius: inherit; filter: url(#crayon); }
.melt.on .melt-fig .fill { height: var(--b); background: var(--clay); }
.melt-fig .val { position: absolute; left: 50%; bottom: calc(100% + .4rem); transform: translateX(-50%); font: 400 1.6rem/1 var(--serif); white-space: nowrap; font-variant-numeric: lining-nums; }
.melt-fig .val .ab { font-size: .95rem; font-style: italic; color: var(--muted); }
.melt-fig .drips { position: absolute; left: 0; top: 0; width: 100%; height: 2.6rem; overflow: visible; }
.melt-fig .drips path { fill: var(--clay); transform-box: fill-box; transform-origin: top; transform: scaleY(0); transition: transform .5s calc(var(--k) * 80ms); }
.melt.on .melt-fig .drips path { transform: scaleY(1); }
.melt-fig .pool { grid-column: 2; grid-row: 2; width: 8rem; margin-top: -.3rem; }
.melt-fig .pool ellipse { fill: var(--clay); opacity: 0; transition: opacity .6s 1s; }
.melt.on .melt-fig .pool ellipse { opacity: .5; }
.melt-fig .when { grid-column: 1 / -1; grid-row: 3; display: grid; margin-top: var(--s2); font: italic 1rem/1.2 var(--serif); color: var(--muted); }
.melt-fig .when > span { grid-area: 1 / 1; transition: opacity .4s .6s; }
.melt-fig .when .b, .melt.on .melt-fig .when .a { opacity: 0; } .melt.on .melt-fig .when .b { opacity: 1; }
.melt-fig .lab { grid-column: 1 / -1; grid-row: 4; font: .95rem/1.2 var(--serif); }
.melt-foot { margin-top: var(--s3); font: italic .85rem/1.4 var(--serif); color: var(--muted); }
@media (max-width: 520px) { .melt-fig .grid, .melt-fig .track { height: 30svh; } }
@media (max-width: 360px) { .melt-fig .grid i:not(:last-child) em { display: none; } }

/* billtrack: where the bill is stuck */
.billtrack .col { max-width: 36rem; }
.bt { position: relative; width: 100%; margin-top: var(--s4); }
.bt-stops { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.bt-stops::before { content: ""; position: absolute; left: 16.6%; right: 50%; top: 1.3rem; border-top: 2px solid var(--ink); opacity: .7; }
.bt-stops::after { content: ""; position: absolute; left: 50%; right: 16.6%; top: 1.3rem; border-top: 2px dashed var(--ink); opacity: .5; }
.bt-stops li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--s2); text-align: center; }
.bt-stops .dot { position: relative; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 1.2rem; }
.bt-stops .done .dot { border-color: var(--accent); } .bt-stops .stuck .dot { border-color: var(--clay); } .bt-stops .wait { opacity: .55; }
.bt-stops .badge { position: absolute; right: -.45rem; top: -.45rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); font: normal .7rem/1.1rem var(--serif); text-align: center; color: var(--accent); }
.bt-stops .wait .badge { display: none; }
.bt-stops .stuck .badge { color: var(--clay); opacity: 0; transform: scale(.8); transition: opacity .3s 1.2s, transform .3s 1.2s; }
.billtrack.on .bt-stops .stuck .badge { opacity: 1; transform: none; }
.bt-stops .tx { display: flex; flex-direction: column; gap: 2px; }
.bt-stops .tx b { font: italic 400 1.15rem/1.2 var(--serif); }
.bt-stops .tx span { font: 1rem/1.3 var(--serif); color: var(--muted); }
.bt-token { position: absolute; z-index: 2; left: 16.6%; top: -2.3rem; transform: translateX(-50%); width: 2.4rem; height: 2rem; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 10px 16px -10px rgb(0 0 0 / .45); cursor: pointer; font-size: 1.05rem; padding: 0;
  transition: left .9s ease-in-out; }
.billtrack.on .bt-token { left: 50%; animation: btwobble .6s .9s; }
@keyframes btwobble { 0% { margin-left: 6px; } 25% { rotate: 4deg; } 50% { rotate: -4deg; margin-left: 0; } 75% { rotate: 4deg; } 100% { rotate: 0deg; } }
.bt-q { margin-top: var(--s4); display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.bt-q .hero { font-size: 1.4rem; line-height: 1.3; font-style: italic; text-wrap: balance; }
.bt-q .hero::before { content: "“"; } .bt-q .hero::after { content: "”"; }
.bt-q .by { font-size: .95rem; color: var(--muted); }
.bt-q .plain { font: 1rem/1.5 var(--serif); max-width: 24rem; }
.bt-q .plain span { display: block; font: 600 .72rem/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s1); }
.billtrack .story-small { margin-top: var(--s3); }
@media (max-width: 639px) {
  .bt { max-width: 20rem; margin-inline: auto; }
  .bt-stops { grid-template-columns: 1fr; }
  .bt-stops::before { left: 1.3rem; right: auto; top: 1.3rem; height: 4.2rem; border-top: 0; border-left: 2px solid var(--ink); }
  .bt-stops::after { left: 1.3rem; right: auto; top: 5.5rem; height: 4.2rem; border-top: 0; border-left: 2px dashed var(--ink); }
  .bt-stops li { flex-direction: row; text-align: left; gap: var(--s3); height: 4.2rem; }
  .bt-stops .tx { flex-direction: row; flex-wrap: wrap; column-gap: var(--s2); align-items: baseline; }
  .bt-token { left: auto; right: 0; top: .3rem; transform: none; transition: top .9s ease-in-out; }
  .billtrack.on .bt-token { left: auto; top: 4.5rem; }
}
@media (max-height: 700px) { .billtrack .bt-q .plain, .billtrack .story-small { display: none; } .bt-q .hero { font-size: 1.2rem; } }

/* credit chips and the archive look (p8, p10, p13) */
.chip { position: absolute; right: 8px; bottom: 8px; z-index: 2; max-width: 70%; font: italic .78rem/1.2 var(--serif); padding: 4px 10px; border-radius: 999px; text-align: right;
  background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.chip.dark { background: rgb(0 0 0 / .45); color: #fff; border-color: rgb(255 255 255 / .2); }
.dst-still .chip { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 64px); right: 12px; }
.dst-fig .frame { aspect-ratio: 4 / 5; max-width: 26rem; margin-inline: auto; }
.dst-fig .frame img { object-fit: contain; }
.dst-fig .frame img, .dst-still img.bleed { filter: grayscale(1) contrast(1.04) sepia(.08); }
:root[data-theme="dark"] :is(.dst-fig .frame img, .dst-still img.bleed) { filter: grayscale(1) contrast(1.04) sepia(.08) brightness(.92); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.dst-fig .frame img, .dst-still img.bleed) { filter: grayscale(1) contrast(1.04) sepia(.08) brightness(.92); } }
.dst-still img.bleed { object-position: 50% 30%; }
@media (min-aspect-ratio: 1/1) { .dst-still img.bleed { object-fit: contain; background: var(--soft); } }
.dst-card .qcard { position: relative; background: var(--bookpage); color: var(--bookpage-ink); border: 1px solid var(--line); box-shadow: 0 18px 30px -20px rgb(0 0 0 / .45); transform: rotate(-1deg); padding: var(--s5) var(--s4) calc(var(--s5) + 1.4rem); margin-bottom: var(--s4); }
.dst-card .qcard .chip { position: absolute; background: color-mix(in srgb, var(--bookpage) 82%, transparent); color: var(--bookpage-ink); }

@media (prefers-reduced-motion: reduce) {
  .dst-after, .dst-pill, .clockjump .cj-line > span, .cj-wedge, .cj-moon, .cj-h, .cj-read span, .ss-band, .ss-ruler .row, .ss-tag > span,
  .melt-fig .fill, .melt-fig .drips path, .melt-fig .pool ellipse, .melt-fig .when > span, .bt-stops .stuck .badge, .bt-token { transition: none !important; animation: none !important; }
  .clockjump .cj-h.sec, .clockjump.on .cj-face, .sunstrip.on .ss-band, .billtrack.on .bt-token { animation: none !important; }
  .melt-fig .drips { display: none; }
}
/* JA / KO line breaking */
:lang(ko) :is(.sunstrip, .clockjump, .melt, .billtrack) .story-line { word-break: keep-all; line-break: strict; }
:lang(ja) :is(.sunstrip, .clockjump, .melt, .billtrack) .story-line { line-break: strict; }
:lang(ja) .bt-q .hero::before { content: "「"; } :lang(ja) .bt-q .hero::after { content: "」"; }

/* ---------- Why is the sky blue? book ---------- */
.sky-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sky-after { opacity: 0; transition: opacity .45s .35s; }
.page.on .sky-after { opacity: 1; }
.sky-pill { display: inline-block; margin-top: var(--s3); transition: opacity .3s; pointer-events: none; }
.page.on .sky-pill { opacity: 0; }
.sky-btn { display: block; margin: var(--s4) auto 0; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.sky-note { margin-top: var(--s2); font: italic .85rem/1.3 var(--serif); color: var(--muted); }

/* beam: a sunbeam through more or less air */
.sky-beam-pg .col { max-width: 36rem; }
.sky-beam { position: relative; width: 100%; }
.sky-beam .fig { position: relative; display: block; width: min(100%, calc(38svh * 16 / 9)); margin: 0 auto; }
.sky-beam svg { display: block; width: 100%; height: auto; }
.sky-beam .bsky { fill: #0d1220; transition: fill .15s; }
.sky-beam .air circle { fill: #fff; opacity: .55; }
.sky-beam .air { opacity: 0; transition: opacity .2s; }
.sky-beam .ray { stroke: #fff; stroke-width: 7; stroke-linecap: round; transition: stroke .15s; }
.sky-beam .sun { fill: #fff6d8; stroke: #f0c45a; stroke-width: 3; }
.sky-beam .arrive { fill: #fff; stroke: rgba(255,255,255,.7); stroke-width: 2; transition: fill .15s; }
.sky-beam .bd { opacity: 0; transform: translateY(14px); transform-box: fill-box; transition: opacity .35s calc(var(--j) * 40ms), transform .6s calc(var(--j) * 40ms) cubic-bezier(.2,.7,.2,1); }
.sky-beam .bd.on { opacity: .95; transform: none; }
.sky-beam-pg.is-on .bd.on { animation: skybob 3.2s calc(var(--j) * -.4s) ease-in-out infinite; }
@keyframes skybob { 50% { transform: translateY(-3px); } }
.sky-beam .tag { position: absolute; bottom: .35rem; font: 600 .72rem/1 var(--sans); letter-spacing: .04em; color: #fff; opacity: .85; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.sky-beam .sun-t { left: .6rem; } .sky-beam .eye-t { right: .6rem; }
.sky-range { display: flex; max-width: 26rem; margin-left: auto; margin-right: auto; align-items: center; gap: var(--s2); margin-top: var(--s3); font: 500 .78rem/1.2 var(--sans); color: var(--muted); }
.sky-range input { flex: 1; accent-color: var(--accent); min-width: 0; }
.sky-am { margin-top: var(--s2); font: 400 1.6rem/1 var(--serif); font-variant-numeric: tabular-nums lining-nums; color: var(--accent); min-height: 1.6rem; }

/* cyano: Saussure's ruler for blue */
.sky-cy { position: relative; display: block; width: min(70vw, 38svh, 20rem); aspect-ratio: 1; }
.sky-cy svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sky-cy .ring path { stroke: var(--paper); stroke-width: 1.2; }
.sky-cy .hole { fill: var(--ca); stroke: var(--ink); stroke-width: 1; transition: fill .9s .2s; }
.sky-cyano.on .sky-cy .hole { fill: var(--cb); }
.sky-cy .nums text { font: 600 11px var(--sans); fill: #fff; opacity: .9; text-anchor: middle; paint-order: stroke; stroke: rgba(10,20,50,.35); stroke-width: 2px; }
.sky-cy .hand { transform-box: view-box; transform-origin: 160px 160px; transform: rotate(var(--a)); transition: transform 1.1s cubic-bezier(.3,1.4,.4,1); }
.sky-cy .hand line { stroke: var(--paper); stroke-width: 3; stroke-linecap: round; } .sky-cy .hand circle { fill: var(--paper); }
.sky-cyano.on .sky-cy .hand { transform: rotate(calc(var(--b) + 8deg)); }
.sky-cyano.on .sky-cy { animation: skynudge .5s 1.1s; }
@keyframes skynudge { 30% { transform: rotate(2deg); } 60% { transform: rotate(-1deg); } }
.sky-cy .pin { position: absolute; left: 50%; transform: translateX(-50%); font: 600 .8rem/1.2 var(--sans); white-space: nowrap; transition: opacity .4s; }
.sky-cy .pin.a { top: 64%; color: #fff; } .sky-cy .pin.b { top: 64%; color: #eef4fa; opacity: 0; }
.sky-cyano.on .sky-cy .pin.a { opacity: 0; } .sky-cyano.on .sky-cy .pin.b { opacity: 1; transition-delay: .7s; }

/* skies: Earth and Mars, noon and sunset */
.sky-pair { display: flex; gap: var(--s4); justify-content: center; }
.sky-pair .w { display: grid; justify-items: center; gap: var(--s2); }
.sky-pair b { font: 600 .9rem/1 var(--sans); }
.sky-pair .win { position: relative; display: block; width: min(38vw, 26svh, 11rem); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 1.5px solid var(--ink); }
.sky-pair .win i { position: absolute; inset: 0; transition: opacity 1s, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.sky-pair .dusk { opacity: 0; }
.sky-skies.on .dusk { opacity: 1; } .sky-skies.on .day { opacity: 0; }
.sky-pair .win .sun { inset: auto; left: 50%; top: 22%; width: 18%; aspect-ratio: 1; margin-left: -9%; border-radius: 50%; background: #fffbe8; box-shadow: 0 0 18px 6px rgba(255,248,220,.8); }
.sky-skies.on .sun { transform: translateY(240%) scale(.85); }
.sky-pair .win .ground { inset: 74% 0 0; }
.w0 .day { background: linear-gradient(#3f7fd0, #9cc6ef 75%); }
.w0 .dusk { background: linear-gradient(#22345f, #8a5a8a 40%, #f08a3c 66%, #ffd27a 76%); }
.w0 .ground { background: #4f6d45; }
.w1 .day { background: linear-gradient(#b98a5f, #e2bd8e 75%); }
.w1 .dusk { background: radial-gradient(circle at 50% 70%, #cfe3f2 0 6%, #7fa6c9 16%, #5d6f86 34%, #3b3a40 60%, #2a2426); }
.w1 .ground { background: #8a4a2c; }
.sky-skies.on .w1 .sun { background: #f4f8ff; box-shadow: 0 0 22px 10px rgba(170,205,240,.9); }
.sky-when { display: grid; margin-top: var(--s3); font: italic 1.05rem/1.3 var(--serif); color: var(--muted); }
.sky-when > span { grid-area: 1 / 1; transition: opacity .4s; }
.sky-when .b, .sky-skies.on .sky-when .a { opacity: 0; } .sky-skies.on .sky-when .b { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sky-beam .bd, .sky-cy .hand, .sky-pair .win i, .sky-cy .hole { transition-duration: .01s; animation: none !important; } }
.color.sky2 { background: #2a5c96; color: #eef4fa; }
.color.sky2 .src, .color.sky2 .story-small { color: inherit; opacity: .85; }
.color.sky2 .src a { color: inherit; }
.color.night { background: #07090f; color: #e9edf5; }
.color.night .src, .color.night .story-small { color: inherit; opacity: .8; }
.color.night .src a { color: inherit; }

/* ---------- LLMs book ---------- */
.llm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:is(.taxp, .wordmap, .dice) .made { margin-top: var(--s2); font: italic .95rem/1.45 var(--serif); color: var(--muted); max-width: 26rem; }
:lang(ja) :is(.taxp, .wordmap, .dice) .made, :lang(ko) :is(.taxp, .wordmap, .dice) .made { font-size: .85rem; line-height: 1.5; }

/* tax: the same sentence, cut into tokens in three languages */
.tax { display: flex; flex-direction: column; gap: var(--s3); width: 100%; max-width: 30rem; margin-top: var(--s5); text-align: left; }
.tax__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--s3); align-items: baseline; padding: var(--s2) var(--s3); border-radius: 10px; }
.tax__row.me { background: color-mix(in srgb, var(--sun) 22%, transparent); }
.tax__l { font: 600 .8rem/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.tax__row.me .tax__l { color: var(--ink); }
.tax__n { font: 500 .85rem/1 var(--mono); justify-self: end; }
.tax__chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.tax__chips i { font: 500 clamp(.95rem, 3.8vw, 1.2rem)/1 var(--mono); font-style: normal; padding: .3em .4em; border-radius: 5px; white-space: pre; opacity: 0; transform: translateY(4px); }
.tax__chips i:nth-child(4n+1) { background: color-mix(in srgb, var(--sun) 60%, transparent); } .tax__chips i:nth-child(4n+2) { background: color-mix(in srgb, var(--sky) 60%, transparent); }
.tax__chips i:nth-child(4n+3) { background: color-mix(in srgb, var(--clay) 50%, transparent); } .tax__chips i:nth-child(4n) { background: color-mix(in srgb, var(--leaf) 60%, transparent); }
.page.taxp.is-on .tax__chips i { opacity: 1; transform: none; transition: opacity .25s, transform .25s; transition-delay: calc(var(--r) * .35s + var(--k) * .07s); }
html:not(.js) .tax__chips i { opacity: 1; transform: none; }

/* wordmap: a flat map of meaning; step 1 adds king − man + woman */
.wm-line { display: grid; }
.wm-line > span { grid-area: 1 / 1; transition: opacity .4s; }
.wm-line .b, .wordmap[data-step="1"] .wm-line .a { opacity: 0; }
.wordmap[data-step="1"] .wm-line .b { opacity: 1; }
.wm { width: 100%; max-width: 30rem; height: auto; margin-top: var(--s4); cursor: pointer; overflow: visible; }
.wm__grid line { stroke: var(--line); stroke-width: .25; }
.wm__blobs ellipse { opacity: .35; } .wm__blobs .g1 { fill: var(--sun); } .wm__blobs .g2 { fill: var(--sky); } .wm__blobs .g3 { fill: var(--leaf); }
.wm__d circle { fill: var(--ink); }
.wm__d text { font: 3.4px var(--serif); fill: var(--ink); text-anchor: middle; letter-spacing: 0; }
:lang(ja) .wm__d text, :lang(ko) .wm__d text { font-size: 3px; }
.wm__d.b circle { fill: var(--clay); } .wm__d.b text { font-style: italic; fill: var(--clay); }
.wm__a { stroke: var(--clay); stroke-width: .6; stroke-linecap: round; stroke-dasharray: 20; stroke-dashoffset: 20; opacity: 0; }
#wm-head path { fill: var(--clay); }
.wm__step2 .wm__d { opacity: 0; transition: opacity .35s calc(var(--k) * .12s); }
.wordmap[data-step="1"] .wm__step2 .wm__d { opacity: 1; }
.wordmap[data-step="1"] .wm__a { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset .6s .45s, opacity 0s .45s; }
.wordmap .wm__blobs, .wordmap .wm__d.a { transition: opacity .4s; }
.wordmap[data-step="1"] .wm__blobs { opacity: .45; } .wordmap[data-step="1"] .wm__d.a { opacity: .4; }
.wordmap .story-small { opacity: 0; transition: opacity .4s .5s; }
.wordmap[data-step="1"] .story-small { opacity: 1; }
html:not(.js) .wordmap .story-small, html:not(.js) .wm__step2 .wm__d { opacity: 1; }

/* dice: weighted odds for the next word, and a temperature switch */
.dice .line { font-size: clamp(2rem, 8vw, 3.2rem); line-height: 1.25; }
.dice__gap { display: inline-block; min-width: 3.4em; border-bottom: 2px dashed var(--accent); color: var(--accent); font-style: italic; text-align: left; }
.dice__gap.pop span { display: inline-block; animation: dicepop .45s cubic-bezier(.2,.7,.2,1); }
@keyframes dicepop { 0% { transform: translateY(-.4em) rotate(-6deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.dice__bars { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4); width: 100%; max-width: 20rem; text-align: left; }
.dice__opt { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 3rem; align-items: center; gap: var(--s3); font: .95rem/1 var(--sans); }
.dice__opt i { display: block; height: 10px; width: calc(var(--v) * 1%); min-width: 2px; background: var(--sun); border-radius: 5px; transition: width .45s cubic-bezier(.2,.7,.2,1); }
.dice__opt b { font: 500 .8rem/1 var(--mono); text-align: right; color: var(--muted); }
.dice__opt.hit span { font-weight: 700; } .dice__opt.hit i { background: var(--accent); }
.dice__ctl { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s4); }
.dice__ctl .pill { margin-top: 0; }
.dice__t { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.dice__t button { background: none; border: 0; border-radius: 999px; padding: 6px 10px; cursor: pointer; font: 500 .8rem/1 var(--sans); color: var(--muted); }
.dice__t button[aria-checked="true"] { background: var(--soft); color: var(--ink); }
.dice .made { font-size: .8rem; }
@media (max-height: 640px) { .dice .story-small { display: none; } }
@media (prefers-reduced-motion: reduce) { .dice__opt i, .dice__gap.pop span { transition: none; animation: none; } }

/* plan: the rhyme word is there before the line is written */
.plan__poem { margin-top: var(--s5); cursor: pointer; font: italic clamp(1.25rem, 5vw, 1.7rem)/1.45 var(--serif); text-align: left; max-width: 28rem; }
.plan__l2 { margin-top: 1.1em; }
.plan__l2 .w { opacity: 0; display: inline-block; border-bottom: 1.5px dotted var(--line); color: transparent; transition: opacity .3s calc(var(--k) * .18s), color .3s calc(var(--k) * .18s), border-color .3s calc(var(--k) * .18s); }
.plan .plan__l2 .w { opacity: 1; }
.plan[data-step="1"] .plan__l2 .w { color: var(--ink); border-color: transparent; }
.plan__pick { position: relative; display: inline-block; color: var(--clay); font-weight: 500; padding: 0 .15em; border-radius: 6px; background: color-mix(in srgb, var(--clay) 16%, transparent); }
.plan__pick .tag { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -4px); white-space: nowrap; font: 600 .65rem/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--clay); font-style: normal; }
.plan__gloss { margin-top: var(--s3); font: .95rem/1.5 var(--serif); color: var(--muted); max-width: 26rem; }
.plan .story-small { opacity: 0; transition: opacity .4s 1.2s; }
.plan[data-step="1"] .story-small { opacity: 1; }
html:not(.js) .plan .story-small { opacity: 1; } html:not(.js) .plan__l2 .w { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .plan__l2 .w, .plan .story-small, .wm__step2 .wm__d, .wm__a { transition: none !important; } }

/* ================= Inflation book: price basket, shrinking bar, money jar ================= */
.inf-btn { position: relative; margin-top: var(--s4); background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.inf-fig { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: var(--s4); }
.inf-ab { display: inline-grid; } .inf-ab > span { grid-area: 1 / 1; transition: opacity .4s .6s; }
.inf-ab .b, .page.on .inf-ab .a { opacity: 0; } .page.on .inf-ab .b { opacity: 1; }
.inf-cap { margin-top: var(--s3); font: italic 1rem/1.3 var(--serif); color: var(--muted); }

/* the price tag: a paper tag on a string */
.inf-tag { position: relative; display: grid; justify-items: center; gap: .2rem; min-width: 7.2rem; padding: .9rem 1rem .7rem 1.5rem; background: var(--bookpage); color: var(--bookpage-ink);
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%, 0 50%); filter: drop-shadow(0 6px 8px rgb(0 0 0 / .18)); transform: rotate(-4deg); transform-origin: 0 50%;
  transition: transform 1.2s .2s cubic-bezier(.5,0,.3,1), background-color 1.2s .2s; }
.inf-tag .hole { position: absolute; left: .7rem; top: 50%; width: .5rem; height: .5rem; margin-top: -.25rem; border-radius: 50%; background: var(--bg); }
.inf-tag b { font: 400 1.7rem/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.inf-tag small { font: .72rem/1.2 var(--sans); letter-spacing: .06em; color: color-mix(in srgb, var(--bookpage-ink) 65%, transparent); }
.infbasket.on .inf-tag { transform: rotate(-4deg) scale(1.1); background: color-mix(in srgb, var(--clay) 28%, var(--bookpage)); }

/* the basket and what is in it */
.inf-cart { position: relative; display: grid; justify-items: center; width: 13rem; }
.inf-items { font-size: 1.7rem; letter-spacing: .05em; margin-bottom: -1.3rem; position: relative; z-index: 0; white-space: nowrap; }
.inf-bk { position: relative; z-index: 1; width: 100%; }
.inf-bk .rim { fill: var(--clay); } .inf-bk .body { fill: var(--sun); }
.inf-bk .weave path { fill: none; stroke: var(--bookpage-ink); stroke-opacity: .22; stroke-width: 1.4; stroke-linecap: round; }

/* the coin: a dashed ring keeps last year's size */
.inf-coin { position: relative; display: grid; place-items: center; width: 4.6rem; height: 4.6rem; }
.inf-coin .ghost { position: absolute; inset: 0; border: 1.5px dashed var(--muted); border-radius: 50%; opacity: 0; transition: opacity .4s .3s; }
.inf-coin .disc { position: relative; display: grid; place-items: center; width: 100%; height: 100%; transition: transform 1.2s .2s cubic-bezier(.5,0,.3,1); }
.inf-coin .disc::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--sun); box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--clay) 55%, var(--sun)); filter: url(#crayon); }
.inf-coin .disc b { position: relative; }
.inf-coin .disc b { font: 600 .95rem/1 var(--sans); color: var(--bookpage-ink); white-space: nowrap; }
.infbasket.on .inf-coin .ghost { opacity: 1; }
.infbasket.on .inf-coin .disc { transform: scale(.8); }

/* the chocolate bar: ten squares, the last one goes */
.inf-bar { display: grid; grid-template-columns: repeat(5, 2.4rem); grid-auto-rows: 2.4rem; gap: 3px; }
.inf-bar i { position: relative; border-radius: 3px; border: 1.5px dashed transparent; transition: border-color .4s .6s; }
.inf-bar i::before { content: ""; position: absolute; inset: -1.5px; background: #6e4630; border-radius: 3px; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .2); filter: url(#crayon); transition: opacity .6s .3s, transform .6s .3s; }
.infshrink.on .inf-bar i.gone { border-color: var(--muted); }
.infshrink.on .inf-bar i.gone::before { opacity: 0; transform: scale(.6); }
.inf-wt { align-self: center; font: 400 1.5rem/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.infshrink .inf-fig { flex-wrap: wrap; }
.inf-tag.still { transform: rotate(3deg); }
.infshrink .inf-tag { min-width: 5.6rem; }

/* the jar: the note stays, what it buys shrinks */
.inf-jar { display: grid; justify-items: center; }
.inf-jar .lid { width: 5.6rem; height: .9rem; background: var(--clay); border-radius: 4px 4px 2px 2px; filter: url(#crayon); }
.inf-jar .glass { display: grid; place-items: center; width: 7.4rem; height: 9rem; margin-top: -2px; border: 2px solid var(--line); border-radius: 1.2rem 1.2rem 1.8rem 1.8rem; background: color-mix(in srgb, var(--sky) 18%, transparent); }
.inf-jar .note-bill { padding: .7rem .9rem; background: color-mix(in srgb, var(--leaf) 45%, var(--bookpage)); color: var(--bookpage-ink); font: 600 1.1rem/1 var(--sans); border-radius: 3px; transform: rotate(-8deg); white-space: nowrap; }
.inf-buys { display: grid; grid-template-columns: auto 8rem; grid-template-rows: auto auto; align-items: center; column-gap: var(--s2); align-self: center; }
.inf-buys .cart { font-size: 1.6rem; grid-row: 1 / 3; }
.inf-buys .track { height: 1.2rem; background: var(--soft); border-radius: 3px; overflow: hidden; }
.inf-buys .track i { display: block; height: 100%; width: var(--a); background: var(--sun); filter: url(#crayon); transition: width 1.2s .2s cubic-bezier(.5,0,.3,1), background-color 1.2s .2s; }
.infjar.on .inf-buys .track i { width: var(--b); background: var(--clay); }
.inf-buys .inf-n { font: 400 1.4rem/1.2 var(--serif); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }

/* four bars fit a phone */
.vbars.inf-home .vbar:first-child i { background: var(--sun); }
.vbars:has(.vbar:nth-child(4)) { gap: var(--s3); }
@media (max-width: 420px) {
  .vbars:has(.vbar:nth-child(4)) .vbar i { width: 3.4rem; }
  .inf-fig { gap: var(--s3); } .inf-cart { width: 10.5rem; } .inf-items { font-size: 1.35rem; margin-bottom: -1rem; }
  .inf-tag { min-width: 6rem; padding: .8rem .8rem .6rem 1.3rem; } .inf-tag b { font-size: 1.4rem; }
  .inf-coin { width: 3.8rem; height: 3.8rem; }
  .infbasket .inf-fig { flex-wrap: wrap; }
  .inf-bar { grid-template-columns: repeat(5, 2rem); grid-auto-rows: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .inf-ab > span, .inf-tag, .inf-coin .ghost, .inf-coin .disc, .inf-bar i, .inf-buys .track i { transition: none !important; }
}
:lang(ko) :is(.infbasket, .infshrink, .infjar) .story-line { word-break: keep-all; line-break: strict; }
:lang(ja) :is(.infbasket, .infshrink, .infjar) .story-line { line-break: strict; }

/* ---------- Systematized Winning book ---------- */
.win-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.win-after { opacity: 0; transition: opacity .45s .35s; }
.page.on .win-after { opacity: 1; }
.win-pill { display: inline-block; margin-top: var(--s3); transition: opacity .3s; pointer-events: none; }
.page.on .win-pill { opacity: 0; }

/* tally: a week of results, stamped in one day at a time */
.tally .col { max-width: 34rem; }
.wt-btn { display: block; width: 100%; margin-top: var(--s4); background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.wt { display: grid; gap: var(--s2); width: 100%; }
.wt-row { display: grid; grid-template-columns: 6.5rem repeat(var(--n), minmax(0, 1fr)); gap: var(--s2); align-items: center; }
.wt-head b { font: 600 .75rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; }
.wt-l { display: flex; align-items: center; gap: var(--s2); text-align: left; }
.wt-l .emo { font-size: 1.6rem; }
.wt-l small { font: 500 .8rem/1.2 var(--sans); color: var(--muted); }
.wt-row i { aspect-ratio: 1; display: grid; place-items: center; font-style: normal; font-size: clamp(1.1rem, 5vw, 1.7rem); border: 1.5px dashed var(--line); border-radius: 10px; background: var(--paper); }
.wt-row i { position: relative; }
.wt-row:not(.past) i .m { opacity: 0; }
.wt-row:not(.past) i::before { content: "?"; position: absolute; color: var(--muted); font: italic 1.1rem var(--serif); }
.tally.on .wt-row:not(.past) i .m { opacity: 1; display: inline-block; animation: wtstamp .35s calc(var(--i, 0) % 5 * .18s) both; }
.tally.on .wt-row:not(.past) i::before { content: none; }
.wt-row i.bad { border-style: solid; }
.tally.on .wt-row i.bad, .wt-row.past i.bad { border-color: var(--clay); background: color-mix(in srgb, var(--clay) 14%, var(--paper)); }
.tally.on .wt-row i.ok, .wt-row.past i.ok { border: 1.5px solid var(--leaf); background: color-mix(in srgb, var(--leaf) 16%, var(--paper)); }
.wt-row.past { opacity: .55; }
@keyframes wtstamp { 0% { transform: scale(1.5) rotate(-8deg); opacity: 0; } 70% { transform: scale(.94); opacity: 1; } 100% { transform: none; } }
.wt-key { display: flex; justify-content: center; gap: var(--s4); margin-top: var(--s3); font: 500 .8rem/1 var(--sans); color: var(--muted); }
.wt-count { margin-top: var(--s3); font: 400 clamp(1.4rem, 5.5vw, 1.9rem)/1.25 var(--serif); }
@media (max-width: 420px) { .wt-row { grid-template-columns: 4.6rem repeat(var(--n), minmax(0, 1fr)); gap: 6px; } .wt-l small { font-size: .7rem; } }

/* boxes: Newcomb's Problem, played */
.boxes .col { max-width: 36rem; }
.bx-guess { margin-top: var(--s2); font: italic 1rem/1.3 var(--serif); color: var(--muted); }
.bx { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); width: 100%; margin-top: var(--s4); }
.bx-pick { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s3) var(--s2); background: none; color: inherit; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .3s, transform .3s, opacity .3s; }
.bx-pick:hover { border-color: var(--ink); }
.bx-art { display: flex; align-items: flex-end; justify-content: center; gap: var(--s2); height: 6.5rem; }
.box { position: relative; display: grid; place-items: center; width: 4.6rem; height: 4.2rem; border-radius: 6px; }
.box.a { width: 4rem; height: 3.6rem; border: 2px solid var(--sky); background: color-mix(in srgb, var(--sky) 18%, transparent); }
.box.a .cash { font: 600 .75rem/1 var(--sans); color: var(--ink); }
.box.b { background: var(--clay); box-shadow: 0 10px 18px -12px rgb(0 0 0 / .5); }
.box.b .in { font-size: 1.8rem; opacity: 0; transition: opacity .3s .3s; }
.box.b .lid { position: absolute; left: -6%; right: -6%; top: -10px; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--clay) 80%, var(--ink)); transform-origin: 0 100%; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.boxes.on .box.b .lid { transform: rotate(-28deg) translateY(-6px); }
.boxes.on .box.b .in { opacity: 1; }
.bx-l { font: 600 .9rem/1.2 var(--sans); }
.bx-res { display: flex; flex-direction: column; gap: 4px; font-size: .95rem; line-height: 1.35; }
.bx-res b { font: 400 clamp(1.4rem, 6vw, 2rem)/1.1 var(--serif); color: var(--accent); }
.boxes.chosen .bx-pick:not(.picked) { opacity: .45; }
.bx-pick.picked { border-color: var(--accent); border-width: 2px; transform: translateY(-3px); }
@media (max-width: 420px) { .bx { gap: var(--s2); } .box { width: 3.6rem; height: 3.4rem; } .box.a { width: 3.2rem; height: 3rem; } .bx-art { height: 5.4rem; } }

/* ================= DeFi book: vend, hill, pool, health, peg, rules ================= */
:root { --defi-red: var(--clayband); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --defi-red: #e39070; } }
:root[data-theme="dark"] { --defi-red: #e39070; }
.defi-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.defi-made { margin-top: var(--s2); font: italic .95rem/1.45 var(--serif); color: var(--muted); max-width: 26rem; }
:lang(ja) .defi-made, :lang(ko) .defi-made { font-size: .85rem; line-height: 1.5; }
.defi-nudge { margin-top: var(--s3); font: .78rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: opacity .3s; }
.page[data-max="1"][data-step="1"] .defi-nudge, .page[data-max="2"][data-step="2"] .defi-nudge { opacity: 0; }
/* each stepped figure shows one layer at a time */
.pool__s, .health__v, .health__cap { grid-area: 1 / 1; transition: opacity .35s ease, transform .35s cubic-bezier(.2, .7, .2, 1); }
.page[data-step="0"] :is(.pool__s, .health__v, .health__cap):not(.s0),
.page[data-step="1"] :is(.pool__s, .health__v, .health__cap):not(.s1),
.page[data-step="2"] :is(.pool__s, .health__v, .health__cap):not(.s2) { opacity: 0; transform: translateY(6px); pointer-events: none; }

/* ---------- vend: the vending machine ---------- */
.vend__m { position: relative; width: min(13.5rem, 58vw); aspect-ratio: 200 / 280; margin: var(--s4) 0 0; }
.vend__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vend__svg .body { fill: var(--clay); }
.vend__svg .glass { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.vend__svg .panel { fill: var(--soft); }
.vend__svg .slot { fill: var(--ink); opacity: .75; }
.vend__svg .btn { fill: var(--sun); stroke: var(--ink); stroke-width: 1; }
.vend__svg .key { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.vend__svg .tray { fill: var(--ink); opacity: .82; }
.vend__glass { position: absolute; left: 13%; top: 9.3%; width: 56%; height: 53.6%; display: flex; flex-direction: column; justify-content: center; gap: var(--s3); padding: var(--s2); }
.vend__glass p { font: 600 .72rem/1.3 var(--mono); letter-spacing: .02em; text-align: left; }
.vend__glass .g1 { color: var(--accent); }
.vend__glass .emo { font-size: 1.15em; }
.vend__in, .vend__out { position: absolute; font-size: 1.6rem; opacity: 0; }
.vend__in { left: 74%; top: 2%; }
.vend__out { left: 32%; top: 72%; }
.vend.is-on .vend__in { animation: vend-in 1.1s .5s ease-in both; }
.vend.is-on .vend__out { animation: vend-out .9s 1.5s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes vend-in { 0% { opacity: 0; transform: translateY(-24px); } 30% { opacity: 1; } 80% { opacity: 1; transform: translateY(12px) scale(.8); } 100% { opacity: 0; transform: translateY(16px) scale(.6); } }
@keyframes vend-out { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vend.is-on .vend__in { animation: none; } .vend.is-on .vend__out { animation: none; opacity: 1; } }

/* ---------- hill: TVL over time ---------- */
.hill__fig { width: 100%; max-width: 30rem; margin-top: var(--s4); }
.hill__fig svg { width: 100%; height: auto; overflow: visible; }
.hill__fig .area { fill: var(--sun); opacity: .35; }
.hill__fig .ln { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hill.is-on .ln { animation: defi-draw 1.6s .2s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes defi-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.hill__fig .base, .hill__fig .tk { stroke: var(--muted); stroke-width: 1; }
.hill__fig .gl { stroke: var(--line); stroke-width: .8; stroke-dasharray: 2 3; }
.hill__fig text { font: 500 8.5px var(--sans); fill: var(--muted); }
.hill__fig .gv { font-size: 7.5px; }
.hill__fig .mk circle { fill: var(--clay); stroke: var(--bg); stroke-width: 1.5; }
.hill__fig .mk--now circle { fill: var(--accent); }
.hill__fig .mk text { font: 600 9.5px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.hill.is-on .mk { animation: defi-pop .4s both; animation-delay: calc(1.2s + var(--j) * .25s); }
@keyframes defi-pop { from { opacity: 0; } to { opacity: 1; } }
.hill__fig figcaption { font: .75rem/1 var(--sans); color: var(--muted); text-align: left; margin-top: var(--s1); }
@media (prefers-reduced-motion: reduce) { .hill.is-on .ln, .hill.is-on .mk { animation: none; } }

/* ---------- pool: x · y = k ---------- */
.pool__rule { margin-top: var(--s3); font: 600 .9rem/1.3 var(--sans); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: .35em .9em; }
.pool__fig { display: grid; margin-top: var(--s4); cursor: pointer; width: 100%; }
.jars2 { display: flex; align-items: flex-end; justify-content: center; gap: var(--s3); }
.pool__x { font-size: 1.6rem; color: var(--muted); padding-bottom: 2.2rem; }
.jar { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.jar__in { width: 8.2rem; height: 7.4rem; display: flex; flex-wrap: wrap-reverse; align-content: flex-start; justify-content: center; gap: 2px; padding: 6px;
  border: 2px solid var(--ink); border-top: 0; border-radius: 0 0 18px 18px; background: color-mix(in srgb, var(--paper) 70%, transparent); }
.jar__in .emo { font-size: 1.15rem; width: 1.4rem; text-align: center; }
.jar__in .part { opacity: .45; clip-path: inset(calc((1 - var(--p)) * 100%) 0 0 0); }
.jar b { font: 600 1.6rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.pool__cap { margin-top: var(--s3); font-size: 1.25rem; line-height: 1.35; min-height: 1.4em; }
.pool__after { margin-top: var(--s3); font-size: 1.05rem; }
@media (max-height: 700px) { .jar__in { height: 6.2rem; width: 7.6rem; } .jar__in .emo { font-size: 1rem; width: 1.2rem; } .pool__after { font-size: .98rem; } }

/* ---------- health: the loan gauge ---------- */
.health__fig { display: grid; justify-items: center; width: min(19rem, 86%); margin-top: var(--s4); cursor: pointer; }
.health__fig svg { grid-area: 1 / 1; width: 100%; height: auto; overflow: visible; }
.health__fig .z { fill: none; stroke-width: 18; stroke-linecap: butt; }
.health__fig .bad { stroke: var(--clay); } .health__fig .ok { stroke: var(--leaf); }
.health__fig .one { stroke: var(--ink); stroke-width: 2; }
.health__fig text { font: 600 9px var(--sans); fill: var(--muted); }
.health__fig .t1 { fill: var(--ink); font-size: 10px; }
.health__fig .needle { transform-origin: 100px 100px; transform: rotate(var(--a0)); transition: transform .9s cubic-bezier(.5, -0.3, .3, 1.3); }
.health[data-step="1"] .needle { transform: rotate(var(--a1)); }
.health__fig .needle line { stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.health__fig .hub { fill: var(--ink); }
.health__vals { display: grid; justify-items: center; margin-top: var(--s2); }
.health__v { font: 600 2.2rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.health__v.low { color: var(--defi-red); }
.health__caps { display: grid; margin-top: var(--s4); }
.health__cap { font-size: 1.2rem; line-height: 1.35; text-wrap: balance; }
.health__after { margin-top: var(--s3); font-size: 1.05rem; opacity: 0; transition: opacity .4s .5s; }
.health[data-step="1"] .health__after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .health__fig .needle { transition: none; } }

/* ---------- peg: two coins against $1 ---------- */
.peg__fig { display: flex; flex-direction: column; gap: var(--s3); width: 100%; max-width: min(26rem, 50svh); margin-top: var(--s4); cursor: pointer; text-align: left; }
.peg__c { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: var(--s2) var(--s3) var(--s3); transition: opacity .4s, transform .4s cubic-bezier(.2, .7, .2, 1); }
.peg[data-step="0"] .c1 { opacity: .15; transform: translateY(8px); }
.peg__h { font: .85rem/1.3 var(--sans); color: var(--muted); }
.peg__h b { color: var(--ink); font-weight: 600; }
.peg__c svg { width: 100%; height: auto; overflow: visible; display: block; margin: var(--s1) 0; }
.peg__c .one { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 4 4; }
.peg__c .onel { font: 600 8px var(--sans); fill: var(--accent); }
.peg__c .zero { stroke: var(--line); stroke-width: 1; }
.peg__c .ln { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.peg.is-on .c0 .ln, .peg[data-step="1"] .c1 .ln { animation: defi-draw 1.3s .3s cubic-bezier(.4, 0, .2, 1) forwards; }
.peg__c .low { fill: var(--clay); opacity: 0; transition: opacity .3s 1.2s; }
.peg.is-on .c0 .low, .peg[data-step="1"] .c1 .low { opacity: 1; }
.peg__low { font: 600 .85rem/1.3 var(--sans); color: var(--defi-red); }
.peg__after { font-size: 1rem; line-height: 1.35; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .peg__c .ln { stroke-dashoffset: 0; animation: none !important; } .peg__c .low { transition: none; } }
@media (max-height: 700px) { .peg .defi-nudge { display: none; } .peg__fig { gap: var(--s2); } .peg__after { font-size: .92rem; } .peg__c { padding: var(--s1) var(--s3) var(--s2); } }

/* ---------- rules: three countries' rulebooks ---------- */
.rules__list { display: flex; flex-direction: column; gap: var(--s2); width: 100%; max-width: 28rem; margin-top: var(--s4); text-align: left; }
.rules__c { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: var(--s2) var(--s3); }
.rules.is-on .rules__c { animation: rise .5s both; animation-delay: calc(var(--k) * .12s); }
.rules__h { font: 600 .95rem/1.3 var(--sans); display: flex; gap: var(--s2); align-items: center; margin-bottom: var(--s1); }
.rules__c ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.rules__c li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: var(--s2); align-items: baseline; }
.rules__c .st { font: 700 .62rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; text-align: center; padding: .25em .3em; border: 1.5px solid currentColor; border-radius: 4px; transform: rotate(-3deg); }
.rules__c .ok .st { color: var(--accent); }
.rules__c .wait .st { color: var(--defi-red); }
.rules__c .tx { font: .84rem/1.4 var(--sans); }
.rules__c .tx b { font-weight: 600; }
.rules .story-small { margin-top: var(--s3); font-size: 1.05rem; }
:lang(ja) .rules__c .st, :lang(ko) .rules__c .st { letter-spacing: 0; font-size: .66rem; }
:lang(ja) .rules__c li, :lang(ko) .rules__c li { grid-template-columns: 3.2rem minmax(0, 1fr); }
@media (max-height: 700px) { .rules .story-small { margin-top: var(--s2); font-size: .95rem; } .rules .story-line { font-size: 1.5rem; } .rules__c .tx { font-size: .78rem; } .rules__list { margin-top: var(--s3); } }

/* =================== newsletter sign-up =================== */
/* Uses the site tokens (--ink, --bg, --paper, --line, --muted, --accent, --ui, --serif, --s1..--s6) from site.css. */
.nl { width: 100%; max-width: 26rem; display: flex; flex-direction: column; align-items: center; gap: var(--s3); font-family: var(--ui); }
.nl .nl-row { position: relative; display: flex; align-items: center; width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 4px; transition: border-color .2s; }
.nl .nl-row:focus-within { border-color: var(--ink); }
.nl input[type=email] { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 500 1rem/1.4 var(--ui); color: var(--ink); padding: 10px 8px 10px 14px; }
.nl input[type=email]::placeholder { color: var(--muted); }
.nl button[type=submit] { flex: none; font: 600 .98rem/1 var(--ui); background: var(--ink); color: var(--bg); border: 0; border-radius: 999px; padding: 12px 20px; cursor: pointer; white-space: nowrap; }
.nl button[type=submit]:disabled { opacity: .55; cursor: default; }
.nl .nl-langs { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.nl .nl-langs legend { float: left; font: 500 .82rem/1 var(--ui); color: var(--muted); margin-right: var(--s1); padding: 0; }
.nl .nl-langs label { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; cursor: pointer; font: 600 .84rem/1 var(--ui); color: var(--muted); }
.nl .nl-langs input { position: absolute; opacity: 0; pointer-events: none; }
.nl .nl-langs label:has(input:checked) { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.nl .nl-langs label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.nl .nl-fine { font: 500 .8rem/1.4 var(--ui); color: var(--muted); }
.nl .nl-fine a { color: inherit; }
.nl .nl-msg { font: italic 400 1.15rem/1.45 var(--serif); text-wrap: balance; }
.nl .nl-msg.err { font: 500 .88rem/1.4 var(--ui); font-style: normal; color: var(--clayband); }
.nl .nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nl.is-done .nl-row, .nl.is-done .nl-langs, .nl.is-done .nl-fine { display: none; }
.nl label.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 380px) { .nl button[type=submit] { padding-inline: 14px; } }

/* 1. a flipbook page, just before the end page */
.page.nlp .nl { margin-top: var(--s5); }
.color .nl .nl-row { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .35); }
.color .nl input[type=email], .color .nl input::placeholder, .color .nl .nl-fine, .color .nl .nl-langs legend { color: currentColor; }
.color .nl button[type=submit] { background: currentColor; }
.color .nl button[type=submit] span { color: var(--violet); }

/* 2. a card in the home grid: as quiet as a story card, the form a small line under its text */
.card.nl-card { color: var(--ink); }
.card.nl-card .t { font-size: 1.12rem; }
.card.nl-card .h { font-size: .95rem; color: var(--muted); }
.card.nl-card .nl { align-items: stretch; max-width: 22rem; gap: var(--s1); margin-top: var(--s2); }
.card.nl-card .nl .nl-row { padding: 2px; background: none; }
.card.nl-card .nl input[type=email] { font-size: .88rem; padding: 6px 6px 6px 12px; }
.card.nl-card .nl button[type=submit] { font-size: .82rem; padding: 7px 13px; background: none; color: var(--ink); border: 1px solid var(--line); }
.card.nl-card .nl button[type=submit]:hover { border-color: var(--ink); }
.card.nl-card .nl .nl-msg { font-size: .95rem; }

/* 3. a line in the faint footer */
.site-foot .nl-link { font-style: italic; }

/* 4. the /newsletter/ page, in the suggestion form's layout */
.nlform h1 { font: 400 clamp(1.8rem, 6vw, 2.4rem)/1.15 var(--serif); text-wrap: balance; }
.nlform .what { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); font: 400 1.15rem/1.5 var(--serif); }
.nlform .nl { align-items: flex-start; max-width: 28rem; }
.nlform .nl-langs { justify-content: flex-start; }
.nlform .sample { font: 500 .95rem/1 var(--ui); color: var(--ink); }

/* JA / KO */
:lang(ja) .nl .nl-msg:not(.err), :lang(ko) .nl .nl-msg:not(.err) { font-style: normal; line-height: 1.75; font-size: 1.02rem; }

/* the suggestion form's input styles reach in here; keep the pill */
.nlform .nl input[type=email] { border: 0; background: none; border-radius: 0; outline: none; padding: 10px 8px 10px 14px; }
#nl { height: 100%; overflow-y: auto; }
.nlform .nl-done { font: 400 1.25rem/1.5 var(--serif); margin: 0; }
html:not(.js) #nl { display: none; }

/* The story as plain text, for readers and crawlers without JavaScript (see scripts/prerender.mjs). */
.js .prerender { display: none; }
html:not(.js) body { overflow: auto; }
html:not(.js) #home, html:not(.js) #book, html:not(.js) #form, html:not(.js) .foot, html:not(.js) .top .hbtn, html:not(.js) .search-btn { display: none; }
.prerender { max-width: 38rem; margin: 0 auto; padding: 5rem 16px 4rem; font: 400 1.1rem/1.6 var(--serif); }
.prerender h1 { font-weight: 400; font-size: 2rem; line-height: 1.2; margin: 0 0 2rem; }
.prerender h2 { font-weight: 400; font-size: 1.3rem; margin: 2.5rem 0 1rem; }
.prerender section { padding-block: 1.5rem; border-top: 1px solid var(--line); }
.prerender section p { margin: 0 0 .75rem; }
.prerender .from { font-size: .9rem; color: var(--muted); }
.prerender img { max-width: 100%; height: auto; border-radius: 3px; }
.prerender pre { overflow-x: auto; font: .85rem/1.6 var(--mono); background: var(--soft); padding: 1rem; border-radius: 6px; }
.prerender dfn { font-style: normal; border-bottom: 1px dotted currentColor; }
.prerender dt { font-weight: 500; margin-top: .75rem; }
.prerender dd { margin: 0; color: var(--muted); }
.prerender a { color: inherit; }
.prerender ul { padding-left: 1.2rem; }