body{margin:0}a{color:var(--nn-accent);text-underline-offset:.22em}main,.brand{width:min(1040px,calc(100% - 64px));margin-inline:auto}.brand{display:flex;justify-content:space-between;gap:24px;padding-block:28px;font-size:14px}.brand a{padding-block:8px}.skip{position:absolute;left:16px;top:-100px}.skip:focus{top:8px;z-index:2;background:var(--nn-sheet-color);padding:12px}.intro{padding-block:72px 48px;max-width:800px}.intro h1{font-size:clamp(36px,5vw,58px);line-height:1.3;letter-spacing:-.035em;margin:0 0 20px;text-wrap:balance}.intro>p{line-height:1.8;margin:0 0 28px}.intro .nn-button{min-width:200px;min-height:60px}.intro #status{font-size:14px;margin-top:16px;min-height:26px}.birth,.ending{padding:40px 48px}.birth h2,.ending h2,.share h2{font-size:22px;margin:0 0 12px}.birth-year{font-size:112px;color:var(--nn-accent);line-height:1.2}.birth-year span{font-size:40px}dl{margin:24px 0 0}.birth dl{display:grid;grid-template-columns:1fr 1fr;gap:16px 48px}.birth dl>div{display:grid;grid-template-columns:90px 1fr;gap:16px;border-bottom:1px solid var(--nn-border);padding-bottom:16px}dt{font-size:14px;color:var(--nn-text)}dd{margin:0}.chapters{margin-block:48px}.chapter{display:grid;grid-template-columns:180px 1fr;gap:40px;padding-block:32px;border-bottom:1px solid var(--nn-border)}.chapter-time{display:flex;flex-direction:column;gap:8px}.chapter-time strong{font-size:30px;color:var(--nn-accent);font-weight:500}.chapter-time small{font-size:13px}.chapter h2{font-size:24px;line-height:1.5;margin:0 0 16px;letter-spacing:-.02em}.chapter p{max-width:65ch;line-height:1.9;margin:0 0 16px}.chapter details{font-size:13px}.chapter summary{cursor:pointer;padding-block:12px;min-height:44px}.chapter details a{display:inline-block;margin-right:16px;padding-block:8px}.chapter details code{overflow-wrap:normal}.chapter li{margin-block:8px}.fact{padding:16px;background-color:var(--nn-sheet-color);background-image:var(--nn-texture-paper);font-size:14px}.fact small{font-size:12px}.ending-text{font-size:26px;line-height:1.7}.ending>p:last-child{font-size:13px;line-height:1.9}.scores{display:flex;gap:48px;margin-bottom:28px}.scores dd{font-size:42px;color:var(--nn-accent)}.scores dd small{font-size:16px}.share{display:grid;grid-template-columns:1fr 320px;gap:64px;margin-block:64px;align-items:start}.share p{line-height:1.8}.actions{display:flex;flex-wrap:wrap;gap:12px}canvas{display:block;width:100%;height:auto;box-shadow:var(--nn-shadow-panel)}#manual{display:block;margin-top:24px}#manual input{margin-top:8px}.tool-sponsor{display:flex;flex-wrap:wrap;align-items:center;gap:var(--nn-space-20);border-block:1px solid var(--nn-border);padding:var(--nn-space-24) 0}.tool-sponsor small{width:100%;font-size:var(--nn-font-body-xs)}.tool-sponsor h2{font-size:var(--nn-font-body-lg);margin:0 0 var(--nn-space-12)}.tool-sponsor p{font-size:var(--nn-font-body-sm)}.notes{margin-block:32px 80px;font-size:14px;line-height:1.9}.notes summary{min-height:44px;cursor:pointer}.game-link{padding:40px;margin-bottom:80px}.game-link h2{font-size:28px}.game-link span{font-size:14px}.reveal .chapter{animation:appear 200ms cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--order)*65ms)}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:699px){main,.brand{width:calc(100% - 40px)}.brand{font-size:12px;gap:12px;padding-block:16px}.intro{padding-block:40px 24px}.intro h1{font-size:36px}.birth,.ending{padding:24px}.birth-year{font-size:88px}.birth dl{grid-template-columns:1fr;gap:14px}.birth dl>div{grid-template-columns:75px 1fr;gap:12px}.chapter{grid-template-columns:1fr;gap:16px;padding-block:28px}.chapter-time{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:12px}.chapter-time strong{font-size:24px}.chapter h2{font-size:21px}.share{grid-template-columns:1fr;gap:24px;margin-block:40px}.share canvas{max-width:340px;margin-inline:auto}.scores{gap:28px}.ending-text{font-size:22px}.game-link{padding:24px}.game-link h2{font-size:24px}}@media(prefers-reduced-motion:reduce){.reveal .chapter{animation:none}*{scroll-behavior:auto!important}}

/* Watercolor scene rhythm; the common components retain their semantics. */
.intro{max-width:880px}.intro h1{font-size:clamp(48px,6vw,78px);letter-spacing:0}.brand{font-size:12px;opacity:.85}.chapter{border:0;margin-bottom:28px;padding:28px;background-color:var(--nn-sheet-color);background-image:radial-gradient(ellipse at 0 0,var(--stage-color),transparent 65%),var(--nn-texture-paper);border-radius:5px 18px 8px 13px}.chapter-time>span{font-size:32px}.scene{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;margin-bottom:28px;border-radius:3px 14px 6px 11px}.scene-placeholder{height:30px;background:radial-gradient(ellipse at 20% 50%,var(--stage-color),transparent 70%);margin-bottom:18px}.chapter h2{font-size:23px}.share h2{font-size:36px}@media(max-width:699px){.chapter{padding:20px}.intro h1{font-size:48px}.scene{margin-bottom:20px}.chapter-time>span{font-size:28px}}

.scene-placeholder{height:auto;display:flex;align-items:center;gap:12px;margin:0 0 18px;background:none;color:var(--nn-text)}
.scene-placeholder svg{width:80px;height:72px;flex:none;transform:rotate(-3deg)}
.scene-placeholder figcaption{font-size:12px;opacity:.7}

/* The visible result is the very canvas that is saved, without card seams. */
.scroll-result{max-width:850px;margin:0 auto 24px}.scroll-result canvas{box-shadow:0 8px 28px #463d3520;border-radius:7px 18px 5px 11px}.result-heading{font-size:24px;font-weight:500;line-height:1.6}.probability{font-size:16px}.scroll-result>p:last-of-type{font-size:14px}.probability-details,.story-transcript,.cohort{max-width:850px;margin:20px auto;padding:16px 20px;background-image:var(--game-paper-wash),var(--game-paper-texture);line-height:1.9}.probability-details summary,.story-transcript>summary,.cohort summary{cursor:pointer;min-height:44px;display:list-item}.probability-details li{margin:10px 0}.cohort p{overflow-wrap:normal}.story-transcript .birth,.story-transcript .ending{padding:20px 0}.story-transcript .chapters{margin:0}.share canvas{max-width:320px}.actions button{min-height:48px;white-space:normal;line-height:1.5}#manual[hidden]{display:none}.story-transcript .ending{background-image:var(--game-paper-wash),var(--game-paper-texture)}@media(max-width:699px){.result-heading{font-size:20px}.probability{font-size:14px}.probability-details,.story-transcript,.cohort{padding:14px}.share canvas{max-width:335px}}
/* 08: one continuous brush line, alternating life scenes and smaller historical notes. */
#card[hidden]{display:none}.scroll-result{max-width:none}.scroll-result>h2,.scroll-result>p{max-width:850px;margin-inline:auto}.life-timeline{position:relative;margin-top:var(--nn-space-48,48px);isolation:isolate}.life-timeline::before{content:"";position:absolute;inset:0 auto 0 50%;width:9px;transform:translateX(-50%) rotate(.1deg);background:var(--games-sand);background-image:var(--game-paper-texture);border-radius:47% 33% 42% 36%;opacity:.85;z-index:-1}.timeline-event{position:relative;display:grid;grid-template-columns:1fr 160px 1fr;align-items:start;padding-block:32px 40px}.year-knot{grid-column:2;grid-row:1;text-align:center;padding:16px 4px;background-color:var(--games-paper);background-image:var(--game-paper-wash),var(--game-paper-texture);border-radius:45% 48% 40% 49%;border:3px solid var(--games-sand);margin-top:16px}.year-knot strong{display:block;font-size:36px;line-height:1.4;font-weight:800;color:var(--games-blue)}.year-knot span{font-size:15px}.timeline-body{grid-row:1;min-width:0;padding:16px 24px}.left .timeline-body{grid-column:1}.right .timeline-body{grid-column:3}.timeline-body h3,.life-finish h3{font-family:'Nanum Pen Script',cursive;font-size:36px;line-height:1.3;font-weight:400;margin:0 0 12px}.timeline-body p,.timeline-note p,.life-finish p{line-height:1.9}.timeline-body small,.life-context{font-size:14px}.timeline-art{width:100%;aspect-ratio:3/2;object-fit:contain;display:block;margin-block:20px}.timeline-note{position:relative;max-width:560px;margin-inline:auto;padding-block:12px 28px}.timeline-note::before{content:"";position:absolute;left:calc(50% - 8px);top:0;width:16px;height:16px;border-radius:48% 43% 45% 50%;background:var(--games-blue)}.timeline-note-body{padding:24px;background-color:var(--games-paper);background-image:var(--game-paper-wash),var(--game-paper-texture);margin-top:16px}.timeline-note h3{font-size:19px;line-height:1.7;margin:0}.timeline-note summary{cursor:pointer;min-height:44px;align-content:center}.timeline-note a{overflow-wrap:normal}.life-finish{max-width:760px;margin-inline:auto;padding:40px 24px;background-image:var(--game-paper-wash),var(--game-paper-texture)}.life-title{font-family:'Nanum Pen Script',cursive;font-size:40px}.life-finish dl>div{display:grid;grid-template-columns:80px 1fr;gap:16px;margin-block:16px}
@media(max-width:1100px){.life-timeline::before{left:28px}.timeline-event{grid-template-columns:100px minmax(0,1fr);padding-block:24px}.year-knot{grid-column:1;font-size:16px;padding:14px 2px;border-width:2px}.year-knot strong{font-size:25px}.year-knot span{font-size:12px}.left .timeline-body,.right .timeline-body{grid-column:2;padding:16px}.timeline-note{max-width:none;margin-left:100px}.timeline-note::before{left:-79px;top:32px}.timeline-note-body{padding:16px;margin-top:0}.life-finish{padding-inline:16px}.timeline-body h3{font-size:30px}.timeline-art{margin-block:16px}.timeline-body p{font-size:16px}.timeline-body .life-context{font-size:13px}.timeline-note h3{font-size:18px}.timeline-note p{font-size:15px}}
@media(max-width:500px){.timeline-event{grid-template-columns:76px minmax(0,1fr)}.year-knot strong{font-size:22px}.year-knot span{font-size:11px}.timeline-note{margin-left:76px}.timeline-note::before{left:-55px}.left .timeline-body,.right .timeline-body{padding-right:0;padding-left:12px}.timeline-body h3{font-size:28px}.life-title{font-size:32px}}

.life-timeline::before{width:10px;background-color:transparent;background-image:linear-gradient(90deg,transparent,var(--games-clay) 28%,var(--games-sand) 67%,transparent);opacity:.9}