/* TYPE ZIP — The years before you. Family album / editorial edition. */
:root{--paper-base:#f5f2e9;--paper:#f5f2e9;--card:#fffdf7;--ink:#233c32;--muted:#62695e;--line:rgba(35,60,50,.16);--stamp:#bd522e;--viz-you:#bd522e;--stamp-glow:transparent;--tone-w:#a87937;--tone-h:#74749a;--good:#347650;--story:"Gowun Batang","Shippori Mincho","AppleMyungjo",serif}
body{padding:0 max(22px,env(safe-area-inset-right)) 64px max(22px,env(safe-area-inset-left));line-height:1.7;background:var(--paper)}
.wrap{max-width:1160px}
#intro{gap:38px;padding-top:0}
.brandline{padding:25px 0 23px;border-bottom:1px solid var(--line);gap:12px}
.album-brand{text-decoration:none;font:700 12px/1.3 var(--mono);letter-spacing:.12em;white-space:nowrap}
.intro-date{display:none}
.brand-right{gap:14px;align-items:center}
.lang-switch{padding:4px;border-color:var(--line);background:transparent}
.lang-switch button{min-height:36px;padding:8px 13px;font-size:12px}
.brand-right .eyebrow{font-size:10px;letter-spacing:.03em}
.intro-stage{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.9fr);gap:72px;align-items:start;padding:4px 0 10px}
.intro-stage>*{min-width:0}
.intro-story{padding-top:8px}
.story-kicker{font:500 11px/1.4 var(--mono);letter-spacing:.18em;color:var(--stamp);margin-bottom:24px}
#introTitle{font-size:clamp(39px,5.5vw,68px);letter-spacing:-.045em;line-height:1.22;margin:12px 0 20px}
html[lang=ja] #introTitle{font-size:clamp(36px,4.8vw,59px);letter-spacing:-.035em}
.hook{font:400 16px/1.65 var(--story);color:var(--muted)}
.intro-story .lede{font:400 16px/1.9 var(--ui);max-width:470px;color:var(--muted);text-wrap:pretty}
.memory-photo{margin:30px 7px 21px 0;padding:11px 11px 0;background:#fffdf7;color:#233c32;transform:rotate(-1.6deg);box-shadow:0 7px 24px rgba(35,60,50,.10);border:1px solid rgba(35,60,50,.10)}
.memory-photo img{display:block;width:100%;height:245px;object-fit:cover;object-position:50% 64%;filter:saturate(.85)}
.memory-photo figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:12px 3px 13px;font:400 13px/1.6 var(--story)}
.memory-photo figcaption span{font:400 9px/1.6 var(--ui);color:#737469;align-self:center}
.story-invitation{display:flex;gap:18px;align-items:flex-start;padding:13px 3px}
.story-invitation>span{font:500 10px/1.7 var(--ui);color:var(--stamp);padding-top:3px;flex-shrink:0}
.story-invitation p{font:400 14px/1.75 var(--story);color:var(--muted)}
.setup{padding:28px;border-radius:4px;background:var(--card);border:1px solid var(--line);box-shadow:0 8px 32px rgba(35,60,50,.035);gap:22px}
.setup-title .eyebrow{font-size:9px;letter-spacing:.12em;color:var(--muted)}
.setup-title h2{font:700 23px/1.5 var(--story);letter-spacing:-.03em;margin:9px 0 5px}
.setup-title p:last-child{font-size:12px;color:var(--muted)}
.field{gap:8px}
.field>label,.field>.lab{font-size:13px}
.field .hint,.support-note{font-size:11px;line-height:1.75;color:var(--muted)}
.seg{gap:7px}
.seg button{border-width:1px;border-radius:6px;font-size:12px;min-height:42px;padding:9px 13px}
.seg button:hover{border-color:var(--ink)}
.seg:has([data-role]){display:grid;grid-template-columns:1fr 1fr}
.seg [data-role]{min-height:46px;font-size:14px}
.seg [data-role][aria-pressed=true]::after{content:' ✓';margin-left:9px;opacity:.7}
select,input[type=text],textarea{border-radius:5px;font-size:15px;min-height:48px;background:var(--paper);border-width:1px}
.generation-preview{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
.generation-years{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);gap:10px;align-items:center}
.generation-years>div:last-child{text-align:right}
.generation-years>div>span{display:block;font-size:10px;color:var(--muted)}
.generation-years b{display:block;font:500 31px/1.5 var(--mono);letter-spacing:-.055em}
.generation-gap{text-align:center;font-size:10px;color:var(--muted)}
.generation-gap i{display:block;font:400 24px/1.1 var(--ui);color:var(--stamp)}
.generation-insight{font:400 13px/1.7 var(--story);margin-top:11px}
.generation-insight strong{font-weight:700;color:var(--stamp)}
.memory-bar{height:7px;border-radius:2px;background:var(--line);overflow:hidden;display:flex;margin-top:12px}
.memory-bar span{display:block;background:var(--ink);height:100%}
.memory-bar i{display:block;background:var(--stamp);opacity:.45;height:100%}
.memory-caption{font-size:10px;color:var(--muted);margin-top:6px}
.btn{border-radius:6px;min-height:54px;font-size:15px;letter-spacing:-.015em}
.btn-ink:hover{background:var(--stamp)}
#startBtn{min-height:58px;box-shadow:0 4px 13px rgba(35,60,50,.12)}
.start-hint{font-size:11px;text-align:center;color:var(--muted);margin-top:-13px}
.personalize{border-top:1px solid var(--line);padding-top:16px}
.personalize>summary{cursor:pointer;font-size:12px;font-weight:500;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.personalize>summary::after{content:'＋';font-size:19px;color:var(--stamp)}
.personalize[open]>summary::after{content:'−'}
.personalize-body{display:flex;flex-direction:column;gap:18px;padding-top:18px}
.known>summary{font-size:12px!important}
.support-note{border-top:1px dashed var(--line);padding-top:12px;margin-top:-5px;font-size:10px}
.experience-path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0;gap:35px}
.experience-path>div{min-width:0;padding-right:20px}
.experience-path>div+div{border-left:1px solid var(--line);padding-left:30px}
.experience-path span{font:500 10px/1.5 var(--mono);letter-spacing:.07em;color:var(--stamp)}
.experience-path h3{font:700 18px/1.6 var(--story);margin:10px 0 7px}
.experience-path p{font-size:13px;line-height:1.85;color:var(--muted)}
.intro-data{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:80px;align-items:center;padding:24px 0 20px}
.intro-data>*{min-width:0}
.data-heading h2{font-size:29px;letter-spacing:-.035em;margin:13px 0 16px}
.data-heading>p:not(.eyebrow){font-size:14px;line-height:1.9;color:var(--muted)}
.data-heading .eyebrow{font-size:10px;letter-spacing:.1em;color:var(--stamp)}
.data-source{display:block;font-size:10px;color:var(--muted);margin-top:22px}
.intro-viz{border:1px solid var(--line);background:var(--card);padding:23px;border-radius:4px;margin:0}
.warnline{max-width:850px;font-size:12px;line-height:1.9;border-left:2px solid var(--stamp);margin:0}
.about-details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
.about-details>summary{font-size:14px;font-weight:700;cursor:pointer}
.about{max-width:780px;padding-top:22px;gap:16px}
.about h2{font-size:21px}
.about p{font-size:13px;line-height:1.9}
.tz-foot{font-size:11px;margin-top:32px!important;padding-top:20px!important}
#game,#ending,#letter,#reply{max-width:720px;margin-inline:auto}
#game{padding-top:0;gap:20px}
.topbar{margin-inline:0;background:var(--paper);padding-inline:0}
.topbar .in{max-width:720px;flex-wrap:wrap;row-gap:10px}
.progress{max-width:none;height:4px}
.yearbox .stamp{font-size:25px;filter:none}
.yearbox .age{font:500 16px/1.3 var(--ui)}
.controls{gap:6px}
.controls button{min-width:42px;height:40px;font-size:12px;border-radius:5px}
.who{border-radius:5px;padding:22px;background:var(--card);border-color:var(--line)}
.who-name{font-size:26px}
.stats{gap:14px 24px;padding:14px 0 8px;border-top:1px solid var(--line)}
.stat{font-size:12px;grid-template-columns:34px 1fr}
.stat .bar{height:5px;border-radius:2px}
.stat .bar span{border-radius:2px}
.focus{border-top:1px solid var(--line);padding-top:15px;margin-top:7px}
.focus .lab{font-size:11px}
details.panel{border-radius:5px;background:var(--card)}
details.panel>summary{font-size:13px;padding:16px 18px}
.yr{grid-template-columns:4.5rem minmax(0,1fr);padding:22px 0;gap:5px 20px;animation:rise .35s ease both}
.yr .stamp{font-size:16px}
.yr .yage{font-size:10px}
.ln{font-size:16px;line-height:1.95}
.ln.chapter{border-radius:4px;padding:18px 20px;background:var(--card);border-left:3px solid var(--ink)}
.ln.secret{border-radius:4px;padding:15px 18px}
.sheet-wrap{background:rgba(13,30,22,.45);backdrop-filter:blur(5px)}
.sheet{border-radius:8px!important;box-shadow:0 15px 60px rgba(0,0,0,.18);max-width:620px!important;padding:28px!important;max-height:90dvh;overflow-y:auto}
.sheet .eyebrow{font-size:11px;color:var(--stamp)}
.sheet .q{font-size:23px!important;line-height:1.65!important;letter-spacing:-.025em}
.sheet .data{font-size:14px!important;line-height:1.85}
.opt{border-radius:5px!important;padding:16px 18px!important;font-size:15px!important}
.opt:hover{border-color:var(--ink);background:color-mix(in srgb,var(--stamp) 5%,var(--card))}
#ending{padding-top:35px;gap:28px}
.end-hero{padding-bottom:24px;border-bottom:1px solid var(--line);gap:14px}
.end-hero h1{font-size:clamp(34px,6vw,50px)}
.viz-block{border:1px solid var(--line);border-radius:5px;background:var(--card);padding:25px;margin:5px 0}
.viz-block>h2{font-size:23px}
.viz-lede{font:400 14px/1.9 var(--ui);color:var(--muted);margin:12px 0 22px}
.vz-contact svg{background:color-mix(in srgb,var(--card) 70%,var(--paper));padding:5px 0}
.vz-key{gap:8px 16px!important;font-size:10px}
.vz-people{gap:20px!important}
.vz-person figcaption .v b{font-size:32px}
.facts{padding-top:6px;gap:0 30px}
.fact{padding:18px 0}
.fact .k{font-size:11px}
.fact .v{font:700 21px/1.5 var(--story)}
.callout{border-radius:5px;padding:22px}
.truth>div,.mylines li,.asks .aa{border-radius:5px}
.asks li{border-bottom:1px solid var(--line);padding:0 0 20px}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--paper-base:#18271f;--paper:#18271f;--card:#21342a;--ink:#eeeee2;--muted:#b8c2b5;--line:rgba(238,238,226,.18);--stamp:#f2a574;--viz-you:#f2a574;--tone-w:#d7b66a;--tone-h:#a7a2cd;--good:#91c99e}}
:root[data-theme=dark]{--paper-base:#18271f;--paper:#18271f;--card:#21342a;--ink:#eeeee2;--muted:#b8c2b5;--line:rgba(238,238,226,.18);--stamp:#f2a574;--viz-you:#f2a574;--tone-w:#d7b66a;--tone-h:#a7a2cd;--good:#91c99e}
@media(min-width:1000px){.setup{margin-top:8px}.intro-stage{gap:78px}.intro-story .lede{font-size:17px}}
@media(max-width:850px){.intro-stage{gap:35px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.setup{padding:22px}.memory-photo img{height:210px}.intro-data{gap:35px}.intro-story .lede{font-size:14px}.story-invitation{flex-direction:column;gap:6px}.generation-years{grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);gap:6px}.experience-path{gap:20px}.experience-path>div+div{padding-left:20px}.experience-path h3{font-size:16px}}
@media(max-width:650px){body{padding-inline:20px}#intro{gap:27px}.brandline{padding:19px 0}.album-brand{font-size:10px;letter-spacing:.07em}.brand-right{gap:6px}.brand-right .eyebrow{display:none}.lang-switch button{padding:7px 10px;font-size:11px}.intro-stage{display:flex;flex-direction:column;gap:27px;padding-top:0}.intro-story{width:100%;padding-top:0}.story-kicker{margin-bottom:15px;font-size:9px}#introTitle{font-size:44px;margin:9px 0 13px}html[lang=ja] #introTitle{font-size:40px}.hook{font-size:14px}.intro-story .lede{font-size:14px;max-width:100%}.memory-photo{margin:22px 4px 8px 0}.memory-photo img{height:210px}.memory-photo figcaption{font-size:11px}.story-invitation{display:none}.setup{width:100%;padding:23px;gap:21px}.setup-title h2{font-size:22px}.experience-path{grid-template-columns:1fr;padding:4px 0;gap:0}.experience-path>div{padding:18px 0!important;display:grid;grid-template-columns:82px minmax(0,1fr);gap:4px 14px;border-left:0!important}.experience-path>div+div{border-top:1px solid var(--line)}.experience-path span{grid-row:1 / span 2;padding-top:5px;letter-spacing:0}.experience-path h3{font-size:17px;margin:0}.experience-path p{font-size:12px}.experience-path p br{display:none}.intro-data{display:flex;flex-direction:column;align-items:stretch;gap:22px;padding:0}.data-heading h2{font-size:26px;margin:11px 0}.data-heading>p:not(.eyebrow){font-size:13px}.data-source{margin-top:12px}.intro-viz{padding:20px}.warnline{font-size:11px}.about-details>summary{font-size:13px}.who{padding:18px}.who-name{font-size:23px}.controls{gap:4px}.controls button{min-width:40px}.yearbox .stamp{font-size:23px}.yearbox .age{font-size:14px}.yr{grid-template-columns:3.1rem minmax(0,1fr);gap:4px 14px}.yr .stamp{font-size:13px}.ln{font-size:15px}.sheet{padding:23px!important}.sheet .q{font-size:21px!important}.viz-block{padding:20px}.facts{gap:0 18px}.fact .v{font-size:19px}}
@media(max-width:360px){body{padding-inline:15px}.setup{padding:19px}#introTitle{font-size:39px}.memory-photo img{height:185px}.memory-photo figcaption span{display:none}.controls button{min-width:37px;padding:0 6px}.topbar .in{gap:8px}.generation-years b{font-size:28px}.setup .seg button{padding:9px 10px;font-size:11px}.viz-block{padding:16px}.sheet .q{font-size:19px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){.memory-bar span{background:CanvasText}.memory-photo{border:1px solid CanvasText}.generation-gap i{color:CanvasText}}