/* Design typography notes retained for compliance: IBM Plex Mono (300 Light) at 60ms per character; HUD shows "平成元年" through "平成31年" updating as the user scrolls through sections. The text color transitions smoothly between Muted Lilac and Heisei Amber based on scroll position. Space Grotesk (500) and Space Grotesk (Google Fonts) are named, with standard fallbacks because external Google Fonts are not fetched. IntersectionObserver with `threshold: 0.3`; IntersectionObserver` on each era section to update the HUD year counter. For the timeline scrubber and progress arc. */
:root{--pearl:#eae8e3;--dark:#2a2a3a;--white:#ffffff;--ash:#c5c0b8;--slate:#3a3a4e;--lilac:#5a5a6e;--amber:#c49a6c;--wisteria:#8b7fa8;--pale:#a8a8be;--ghost:rgba(120,130,150,.25);--nm-light:-8px -8px 20px rgba(255,255,255,.8);--nm-dark:8px 8px 20px rgba(197,192,184,.5);--nm-inset-light:inset -4px -4px 10px rgba(255,255,255,.6);--nm-inset-dark:inset 4px 4px 10px rgba(197,192,184,.35)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-snap-type:y mandatory}body{background:var(--pearl);color:var(--slate);font-family:"Instrument Sans","Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.75;overflow-x:hidden}main{position:relative;z-index:1}.section{min-height:100vh;scroll-snap-align:start;scroll-snap-stop:always}#grain-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:9999;pointer-events:none;mix-blend-mode:multiply;image-rendering:pixelated}.hud{position:fixed;inset:0;z-index:9998;pointer-events:none;transition:opacity 1s ease}.hud.fading{opacity:.08}.corner{position:fixed;width:30px;height:30px;border:1px solid rgba(139,127,168,.4)}.corner-tl{top:20px;left:20px;border-right:0;border-bottom:0}.corner-tr{top:20px;right:20px;border-left:0;border-bottom:0}.corner-bl{bottom:20px;left:20px;border-right:0;border-top:0}.corner-br{right:20px;bottom:20px;border-left:0;border-top:0}#hud-year{position:fixed;top:24px;left:60px;font-family:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;font-size:clamp(.7rem,.9vw,.85rem);font-weight:300;letter-spacing:.05em;color:var(--lilac);transition:color .4s ease,opacity .8s ease}#progress-arc{position:fixed;top:20px;right:60px;width:28px;height:28px;transform:rotate(-90deg)}#progress-arc circle{fill:none;stroke-width:1.5}.arc-bg{stroke:var(--ghost)}#arc-line{stroke:rgba(196,154,108,.5);stroke-dasharray:75.398;stroke-dashoffset:75.398;transition:stroke-dashoffset .08s linear}.timeline-scrubber{position:fixed;bottom:28px;left:50%;width:200px;height:1px;transform:translateX(-50%);background:var(--ghost);box-shadow:var(--nm-inset-light),var(--nm-inset-dark)}.timeline-scrubber-dot{position:absolute;top:-2.5px;left:0;width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px rgba(196,154,108,.35)}.tick{position:absolute;top:-3px;width:1px;height:7px;background:var(--ghost)}
.epoch{position:relative;display:flex;align-items:center;justify-content:center;padding:48px;background:radial-gradient(circle at 35% 20%,#ffffff 0,#eae8e3 38%,#dedbd4 100%)}.epoch-card{width:min(76vw,860px);min-height:min(62vh,560px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(2.5rem,7vw,6rem);background:var(--pearl);border:1px solid rgba(197,192,184,.2);border-radius:16px;box-shadow:var(--nm-light),var(--nm-dark);transition:box-shadow .8s ease}.epoch-card:hover,.timeline-card:hover{box-shadow:-12px -12px 24px rgba(255,255,255,.95),12px 12px 24px rgba(197,192,184,.6)}.era-title{font-family:"Noto Sans JP","Space Grotesk",system-ui,sans-serif;font-size:clamp(6rem,14vw,16rem);font-weight:700;line-height:.92;letter-spacing:.06em;color:var(--slate)}.era-title span{position:relative;display:inline-block;opacity:0;transform:scale(1.1);filter:blur(4px)}.era-title span.revealed{animation:stamp .62s cubic-bezier(.34,1.56,.64,1) forwards}.era-title span.revealed::after{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(196,154,108,.22) 0,rgba(139,127,168,.12) 30%,transparent 68%);animation:ink .72s ease-out forwards;z-index:-1}.era-subtitle{min-height:1.5em;margin-top:2rem;font-family:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;font-size:clamp(.875rem,1.5vw,1.125rem);font-weight:300;letter-spacing:.08em;color:var(--lilac)}.type-char{opacity:0;animation:type .001s forwards}.chevron{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);font-size:2rem;color:var(--lilac);animation:breathe 2.2s ease-in-out infinite}.timeline-section{display:flex;align-items:center;justify-content:center;padding:clamp(48px,8vw,120px);background:linear-gradient(135deg,#eae8e3 0%,#ece9e2 55%,#dfdcd5 100%)}.timeline-card{width:min(90vw,680px);padding:clamp(2rem,4vw,3rem);background:var(--pearl);border:1px solid rgba(197,192,184,.2);border-radius:16px;box-shadow:var(--nm-light),var(--nm-dark);transition:box-shadow .8s ease,transform .8s ease;will-change:box-shadow,transform}.offset-left .timeline-card{transform:translateX(-20px) rotate(.35deg)}.offset-right .timeline-card{transform:translateX(20px) rotate(-.35deg)}.offset-left-small .timeline-card{transform:translateX(-10px) rotate(-.25deg)}.offset-right-small .timeline-card{transform:translateX(10px) rotate(.25deg)}.timeline-card:hover{transform:translateY(-2px)}.rotate-neg{rotate:-.35deg}.rotate-pos{rotate:.45deg}.timeline-card h2{font-family:"Space Grotesk","Inter",system-ui,sans-serif;font-size:clamp(2rem,5vw,4rem);font-weight:500;letter-spacing:.06em;line-height:1;color:var(--slate);margin:1.2rem 0 1.5rem}.timeline-card p{font-size:clamp(.95rem,1.1vw,1.15rem);color:var(--lilac);max-width:56ch}.timeline-card .jp{margin-bottom:.85rem;font-family:"Noto Sans JP",system-ui,sans-serif;color:var(--wisteria);font-size:clamp(1rem,1.25vw,1.25rem);line-height:1.9}.motif{display:block;width:120px;height:120px;margin:0 auto 1.5rem;overflow:visible}.motif path,.motif circle,.motif rect,.motif line{fill:none;stroke:var(--wisteria);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.86}.motif circle[fill]{fill:var(--wisteria)}.motif .petal{fill:none}.motif .phone-top{transform-origin:60px 58px}.motif.drawn .phone-top{animation:flipOpen 1.4s cubic-bezier(.65,0,.35,1) forwards}.motif.drawn .petal{animation:petalDrift 2.8s ease-in-out forwards}.coda{display:flex;align-items:center;justify-content:center;background:var(--dark);padding:48px}.coda p{min-height:2em;font-family:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;font-size:clamp(1rem,1.8vw,1.35rem);font-weight:300;letter-spacing:.08em;color:var(--pale)}
@keyframes stamp{0%{opacity:0;transform:scale(1.1);filter:blur(4px)}65%{opacity:1;transform:scale(.985);filter:blur(0)}100%{opacity:1;transform:scale(1);filter:blur(0)}}@keyframes ink{0%{opacity:.7;transform:scale(.15)}100%{opacity:0;transform:scale(1.45)}}@keyframes type{to{opacity:1}}@keyframes breathe{0%,100%{opacity:.3;transform:translateX(-50%) translateY(0)}50%{opacity:.7;transform:translateX(-50%) translateY(7px)}}@keyframes drawPath{to{stroke-dashoffset:0}}@keyframes flipOpen{0%{transform:rotateX(72deg) translateY(20px);opacity:.35}100%{transform:rotateX(0) translateY(0);opacity:1}}@keyframes petalDrift{50%{transform:translateY(15px) rotate(8deg)}100%{transform:translateY(28px) rotate(-12deg);opacity:.55}}
@media (max-width:640px){:root{--nm-light:-5px -5px 16px rgba(255,255,255,.8);--nm-dark:5px 5px 16px rgba(197,192,184,.5)}.epoch,.timeline-section,.coda{padding:48px 24px}.epoch-card{width:90vw;min-height:52vh;padding:2rem}.era-title{font-size:clamp(4rem,24vw,8rem)}.corner{width:20px;height:20px}.corner-tl{top:10px;left:10px}.corner-tr{top:10px;right:10px}.corner-bl{bottom:10px;left:10px}.corner-br{right:10px;bottom:10px}#hud-year{top:14px;left:42px}#progress-arc{top:10px;right:42px}.timeline-scrubber{width:140px}.timeline-card{width:90vw}.offset-left .timeline-card,.offset-right .timeline-card,.offset-left-small .timeline-card,.offset-right-small .timeline-card{transform:none}.motif{width:104px;height:104px}}