:root{
  --font-sans:"Outfit",ui-sans-serif,system-ui,sans-serif;
  --font-display:"Newsreader",ui-serif,Georgia,serif;
  --text-micro:.6875rem;
  --text-caption:.8125rem;
  --text-body:clamp(1rem,.95rem + .25vw,1.0625rem);
  --text-lede:clamp(1.15rem,1.02rem + .5vw,1.4rem);
  --text-title:clamp(1.5rem,1.15rem + 1.2vw,2.3rem);
  --text-display:clamp(2.2rem,1.3rem + 3.4vw,4.2rem);
  --radius-sm:.75rem;--radius-md:1.25rem;--radius-lg:1.75rem;
  --ease-smooth:cubic-bezier(.22,1,.36,1);
  --c-spent:#8f877c;
  --c-gone:#a4442a;
  --c-back:#4a5a46;
}
html[data-theme="paper"][data-scheme="light"]{--c-bg:#f3eee4;--c-fg:#1a1714;--c-muted:#6f675c;--c-faint:#8f877c;--c-surface:#e8e0d2;--c-accent:#1a1714;--c-accent-fg:#f3eee4;--c-swatch:#f3eee4;--c-shadow:0 22px 54px rgba(28,22,16,.25)}
html[data-theme="paper"][data-scheme="dark"]{--c-bg:#13110e;--c-fg:#ede6d8;--c-muted:#a3988a;--c-faint:#8a7f72;--c-surface:#1e1a16;--c-accent:#ede6d8;--c-accent-fg:#13110e;--c-swatch:#f3eee4;--c-shadow:0 22px 54px rgba(0,0,0,.5)}
html[data-theme="night"][data-scheme="light"]{--c-bg:#eef0ee;--c-fg:#141518;--c-muted:#6a6e74;--c-faint:#8a8e94;--c-surface:#e2e4e1;--c-accent:#2c323c;--c-accent-fg:#eef0ee;--c-swatch:#0e0f12;--c-shadow:0 22px 54px rgba(18,20,24,.25)}
html[data-theme="night"][data-scheme="dark"]{--c-bg:#0c0d10;--c-fg:#e6e7ea;--c-muted:#8e939a;--c-faint:#6e737a;--c-surface:#15171c;--c-accent:#d0d4dc;--c-accent-fg:#0c0d10;--c-swatch:#0e0f12;--c-shadow:0 22px 54px rgba(0,0,0,.5)}
html[data-theme="heritage"][data-scheme="light"]{--c-bg:#eeeee6;--c-fg:#1a2116;--c-muted:#6a7264;--c-faint:#8a9182;--c-surface:#e2e4d8;--c-accent:#3f4f3c;--c-accent-fg:#eeeee6;--c-swatch:#4a5a46;--c-shadow:0 22px 54px rgba(22,28,18,.25)}
html[data-theme="heritage"][data-scheme="dark"]{--c-bg:#11140f;--c-fg:#e4e6da;--c-muted:#8a9182;--c-faint:#6e7568;--c-surface:#1a1e16;--c-accent:#b4c0a6;--c-accent-fg:#11140f;--c-swatch:#4a5a46;--c-shadow:0 22px 54px rgba(0,0,0,.5)}
html[data-theme="quiet"][data-scheme="light"]{--c-bg:#f1f3f5;--c-fg:#1a1d21;--c-muted:#6a7078;--c-faint:#8a9098;--c-surface:#e5e9ed;--c-accent:#3e4852;--c-accent-fg:#f1f3f5;--c-swatch:#c5ccd3;--c-shadow:0 22px 54px rgba(20,24,28,.25)}
html[data-theme="quiet"][data-scheme="dark"]{--c-bg:#0f1114;--c-fg:#e6eaee;--c-muted:#8a9098;--c-faint:#6e747c;--c-surface:#171a1e;--c-accent:#b8c0c8;--c-accent-fg:#0f1114;--c-swatch:#c5ccd3;--c-shadow:0 22px 54px rgba(0,0,0,.5)}
html[data-theme="earth"][data-scheme="light"]{--c-bg:#f4ebe3;--c-fg:#271c16;--c-muted:#7a675c;--c-faint:#9a877c;--c-surface:#e8dcd2;--c-accent:#9a5538;--c-accent-fg:#f4ebe3;--c-swatch:#c48468;--c-shadow:0 22px 54px rgba(36,22,16,.25)}
html[data-theme="earth"][data-scheme="dark"]{--c-bg:#15110e;--c-fg:#f0e4d8;--c-muted:#a89082;--c-faint:#8a7468;--c-surface:#201a16;--c-accent:#c88868;--c-accent-fg:#15110e;--c-swatch:#c48468;--c-shadow:0 22px 54px rgba(0,0,0,.5)}
html[data-scheme="dark"]{--c-spent:#6f675c;--c-gone:#c05a3a;--c-back:#7d9070}
html[data-reading="sepia"]{
  --c-bg:#efe4cf;--c-fg:#3a2f22;--c-muted:#7a6a52;--c-surface:#e6d8bf;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;background:var(--c-bg);color:var(--c-fg);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{min-height:100dvh;background:var(--c-bg);color:var(--c-fg);font-family:var(--font-sans);font-weight:400;line-height:1.55;overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{text-wrap:balance;font-family:var(--font-display);font-weight:400}
p{text-wrap:pretty}
::selection{background:color-mix(in oklab,var(--c-fg) 22%,transparent)}

.book{height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;scroll-behavior:smooth}
.page{height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;overflow-y:auto;display:flex;flex-direction:column;padding:3.2rem 1.6rem 2rem 1.2rem;max-width:42rem;margin:0 auto;position:relative;scrollbar-width:none}
.page::-webkit-scrollbar{display:none}
.page-inner{width:100%;margin:auto 0;padding:1.2rem 0}
.kicker{font-size:var(--text-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--c-faint);margin-bottom:1rem}
.display{font-size:var(--text-display);line-height:1.05;font-weight:400}
.title{font-size:var(--text-title);line-height:1.15;margin-bottom:.9rem}
.lede{font-size:var(--text-lede);font-family:var(--font-display);line-height:1.45;color:var(--c-muted)}
.body{font-size:var(--text-body);line-height:1.7}
.body + .body{margin-top:.85rem}
.muted{color:var(--c-muted)}
.faint{color:var(--c-faint)}
.serif{font-family:var(--font-display)}
.small{font-size:var(--text-caption)}
.gone{color:var(--c-gone)}
.back{color:var(--c-back)}

.frame{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--c-shadow)}
.card{background:var(--c-surface);border-radius:var(--radius-md);padding:1.15rem 1.25rem}
.card + .card{margin-top:.75rem}

.ctl{display:flex;align-items:center;gap:.9rem;margin:1rem 0}
.ctl label{font-size:var(--text-caption);color:var(--c-muted);white-space:nowrap}
.ctl output{font-size:var(--text-caption);font-weight:500;min-width:3.4rem;text-align:right}
input[type=range]{flex:1;appearance:none;height:2px;background:color-mix(in oklab,var(--c-fg) 25%,transparent);border-radius:2px;outline:none}
input[type=range]::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:50%;background:var(--c-fg);cursor:pointer;border:none}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--c-fg);cursor:pointer;border:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;font-family:var(--font-sans);font-size:var(--text-caption);font-weight:500;padding:.35rem .7rem;border-radius:999px;border:1px solid color-mix(in oklab,var(--c-fg) 35%,transparent);background:transparent;color:var(--c-fg);cursor:pointer;transition:background .2s var(--ease-smooth)}
.btn:hover{background:color-mix(in oklab,var(--c-fg) 8%,transparent)}
.btn:focus-visible{outline:2px solid var(--c-fg);outline-offset:2px}
.btn-solid{background:var(--c-accent);color:var(--c-accent-fg);border-color:var(--c-accent)}
.btn-solid:hover{background:color-mix(in oklab,var(--c-accent) 88%,var(--c-bg))}
.btn-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem}

#grid{width:100%;display:block;margin:.5rem 0}
.legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:var(--text-micro);color:var(--c-muted);margin-top:.4rem}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:.35rem;vertical-align:-1px}

.factlist p{padding-left:0}

.thinkers{display:flex;gap:.6rem;margin:1rem 0;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.thinkers::-webkit-scrollbar{display:none}
.thinkers .btn{flex:0 0 calc((100% - 1.2rem)/3);scroll-snap-align:center;font:500 .8125rem/1.2 var(--font-sans);padding:.3rem .4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;box-sizing:border-box}
.thinkers .btn[aria-pressed="true"]{background:var(--c-accent);color:var(--c-accent-fg);border-color:var(--c-accent)}

.field{width:100%;font:inherit;font-size:var(--text-caption);padding:.8rem 1rem;border-radius:var(--radius-sm);border:1px solid color-mix(in oklab,var(--c-fg) 25%,transparent);background:transparent;color:var(--c-fg);margin-bottom:.6rem}
.field:focus-visible{outline:2px solid var(--c-fg);outline-offset:1px}
.err{font-size:var(--text-micro);color:var(--c-gone);min-height:1em;margin-bottom:.4rem}

.pgdots{position:fixed;right:.55rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.45rem;z-index:30}
.pgdots span{width:9px;height:9px;border-radius:50%;background:color-mix(in oklab,var(--c-fg) 28%,transparent);transition:background .2s}
.pgdots span.on{background:var(--c-fg)}

.sliver{position:fixed;left:0;top:50%;transform:translateY(-50%);width:7px;height:74px;border-radius:0 6px 6px 0;background:color-mix(in oklab,var(--c-accent) 65%,var(--c-bg));border:none;cursor:pointer;z-index:40;padding:0;transition:background .3s var(--ease-smooth)}
.sliver:focus-visible{outline:2px solid var(--c-fg)}
.overlay{position:fixed;inset:0;background:color-mix(in oklab,var(--c-bg) 55%,transparent);backdrop-filter:blur(3px);z-index:50;display:flex;align-items:center;opacity:0;pointer-events:none;transition:opacity .3s var(--ease-smooth)}
.overlay.open{opacity:1;pointer-events:auto}
.overlay-panel{background:var(--c-bg);color:var(--c-fg);max-width:26rem;width:calc(100% - 3.5rem);margin-left:0;padding:2.2rem 1.8rem;border-radius:0 var(--radius-lg) var(--radius-lg) 0;box-shadow:var(--c-shadow);transform:translateX(-102%);transition:transform .35s var(--ease-smooth)}
.overlay.open .overlay-panel{transform:translateX(0)}

.notice{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);background:var(--c-surface);color:var(--c-muted);font-size:var(--text-micro);letter-spacing:.06em;padding:.55rem 1.1rem;border-radius:999px;z-index:60;opacity:1;pointer-events:none;white-space:nowrap}
.notice.fade{transition:opacity 6s linear;opacity:0}

#install-btn{position:fixed;right:1.6rem;bottom:1.2rem;z-index:45;box-shadow:var(--c-shadow);display:none}
#install-btn.show{display:inline-flex}

.sharegrid{display:none}
.hero-img{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--c-shadow);margin-top:1.6rem;max-height:34vh}
.hero-img img{width:100%;height:100%;object-fit:cover}

.timeline p{display:flex;gap:1rem;align-items:baseline}
.timeline p span:first-child{font-size:var(--text-micro);color:var(--c-faint);min-width:6.4rem;letter-spacing:.05em}

@media (prefers-reduced-motion:reduce){
  html,.book{scroll-behavior:auto}
  .overlay,.overlay-panel,.btn{transition:none}
}
@media (max-width:480px){
  .pgdots{display:none}
}



.ctrl-dd{appearance:none;-webkit-appearance:none;font:500 .8125rem/1.2 var(--font-sans);padding:.3rem .6rem;border-radius:999px;border:1px solid color-mix(in oklab,var(--c-fg) 35%,transparent);background:var(--c-bg);color:var(--c-fg);cursor:pointer;text-align:center;box-sizing:border-box;transition:background .2s var(--ease-smooth)}
.ctrl-dd:hover{background:color-mix(in oklab,var(--c-fg) 8%,transparent)}
.ctrl-dd:focus-visible{outline:2px solid var(--c-fg);outline-offset:2px}
.langdd{padding:.3rem .55rem}
.themedd{padding:.3rem .55rem}
.thinker-row{display:flex;align-items:center;gap:.4rem;margin:1rem 0}
.thinker-row .thinkers{flex:1;min-width:0;margin:0}
.thinkerdd{flex:0 0 auto;max-width:34%;text-overflow:ellipsis}

.ctrl-corner{position:fixed;right:max(1.4rem,env(safe-area-inset-right));top:max(1.1rem,env(safe-area-inset-top));z-index:46;display:flex;gap:.45rem;align-items:center}

.page-inner,.page-inner *{max-width:100%;min-width:0}
.page-inner canvas,.page-inner img{max-width:100%;height:auto}
.thinkerdd{max-width:11ch}

@media (min-width:720px){.thinkers .btn{flex:0 0 calc((100% - 2.4rem)/5)}}

.sliver2{top:calc(50% + 96px);background:color-mix(in oklab,var(--c-fg) 30%,var(--c-bg))}

.ctrl-corner{opacity:0;pointer-events:none;transition:opacity .25s var(--ease-smooth)}
.ctrl-corner.show,.ctrl-corner:focus-within{opacity:1;pointer-events:auto}