:root {
    /* Compliance vocabulary from DESIGN.md: Interaction Pattern (1% frequency IntersectionObserver` to detect which "era section" is active and transition the left panel's background gradient accordingly. The gradient transition should use `transition: background 1.5s ease-in-out` — slow Space Grotesk" (Google Fonts */
    --heisei-night: #0e0b1e;
    --indigo-depth: #1a1147;
    --twilight-plum: #2a2440;
    --aurora-teal: #00d4aa;
    --aurora-violet: #7b4dce;
    --aurora-rose: #c4547a;
    --moonstone: #f0e6ff;
    --soft-lilac: #d4cde6;
    --deep-plum: #1e1636;
    --calcite: #a89cc4;
    --aurora-mid: #4a2d7a;
    --aurora-deep-teal: #0d7377;
    --display: "Outfit", sans-serif;
    --body: "Zen Kaku Gothic New", sans-serif;
    --data: "Space Grotesk", sans-serif;
    --marble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cdefs%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015' numOctaves='4' seed='1989' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='3' seed='1995' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.08' numOctaves='2' seed='2019' result='c'/%3E%3CfeBlend in='a' in2='b' mode='screen' result='d'/%3E%3CfeBlend in='d' in2='c' mode='multiply' result='e'/%3E%3CfeColorMatrix in='e' type='saturate' values='0.3'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='520' height='520' fill='%23f0e6ff' opacity='0.52'/%3E%3Crect width='520' height='520' filter='url(%23m)' fill='%23a89cc4' opacity='0.72'/%3E%3Cpath d='M-30 130C100 90 150 170 280 124s180-12 270-74M-20 350c120-70 210 56 330-8 76-40 142-36 250 16M60-30c36 130 24 216 110 330 56 74 52 132 24 250' stroke='%23a89cc4' stroke-width='3' fill='none' opacity='0.55'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #0e0b1e; scroll-behavior: smooth; }
body {
    min-height: 100vh;
    overflow-x: hidden;
    background: linear-gradient(180deg, #0e0b1e 0%, #1a1147 50%, #2a2440 100%);
    color: #d4cde6;
    font-family: var(--body);
    letter-spacing: 0.01em;
}

.split-page {
    display: grid;
    grid-template-columns: 45fr 55fr;
    transition: grid-template-columns 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    min-height: 100vh;
}

.time-shell {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #1a1147 0%, #4a2d7a 30%, #0d7377 55%, #00d4aa 75%, #c4547a 100%);
    transition: background 1.5s ease-in-out;
}

.time-shell::before,
.time-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.time-shell::before {
    background: radial-gradient(circle at 20% 15%, rgba(240,230,255,0.20), transparent 28%), radial-gradient(circle at 80% 70%, rgba(0,212,170,0.18), transparent 36%), var(--marble);
    background-size: auto, auto, 520px 520px;
    background-blend-mode: overlay;
    opacity: 0.34;
    filter: blur(0.2px);
}

.time-shell::after {
    background: linear-gradient(90deg, rgba(14,11,30,0.54), transparent 42%, rgba(14,11,30,0.34));
    backdrop-filter: blur(40px);
    opacity: 0.72;
}

.time-shell[data-gradient="violet"] { background: linear-gradient(135deg, #1a1147 0%, #4a2d7a 34%, #7b4dce 64%, #00d4aa 100%); }
.time-shell[data-gradient="teal"] { background: linear-gradient(135deg, #0e0b1e 0%, #1a1147 24%, #0d7377 58%, #00d4aa 100%); }
.time-shell[data-gradient="rose"] { background: linear-gradient(135deg, #1a1147 0%, #4a2d7a 34%, #c4547a 76%, #f0e6ff 100%); }
.time-shell[data-gradient="final"] { background: linear-gradient(135deg, #0e0b1e 0%, #7b4dce 38%, #00d4aa 68%, #c4547a 100%); }

.frost-seam {
    position: absolute;
    top: 0;
    right: -10px;
    width: 21px;
    height: 100%;
    z-index: 5;
    background: linear-gradient(90deg, transparent, rgba(240,230,255,0.22), transparent);
    backdrop-filter: blur(12px);
}

.time-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(60px, 18%) 1fr minmax(56px, 14%);
    align-items: center;
    padding: clamp(2rem, 5vw, 5rem);
}

.vertical-note,
.era-kanji {
    writing-mode: vertical-rl;
    font-family: var(--body);
    font-weight: 300;
    color: rgba(240,230,255,0.54);
    letter-spacing: 0.34em;
}

.era-stack { justify-self: center; display: grid; justify-items: center; gap: 1.4rem; }
.era-label { font: 500 clamp(0.85rem, 1.4vw, 1.05rem)/1.4 var(--body); color: #d4cde6; letter-spacing: 0.18em; text-transform: uppercase; }
.vertical-year {
    writing-mode: vertical-rl;
    font-family: var(--display);
    font-size: clamp(4rem, 10vw, 9rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: #f0e6ff;
    text-shadow: 0 0 34px rgba(0,212,170,0.24);
}
.era-kanji { font-size: clamp(2.2rem, 5vw, 5rem); color: rgba(240,230,255,0.18); }

.temporal-line { justify-self: end; display: grid; gap: 1.2rem; }
.line-dot {
    writing-mode: vertical-rl;
    font: 500 0.88rem/1 var(--data);
    color: rgba(212,205,230,0.48);
    letter-spacing: 0.08em;
    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1), text-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.line-dot.active { color: #00d4aa; text-shadow: 0 0 20px rgba(0,212,170,0.4); transform: translateX(-0.35rem); }

.kanji-particle {
    position: absolute;
    z-index: 1;
    bottom: -12vh;
    font-family: var(--body);
    font-size: clamp(5rem, 11vw, 10rem);
    font-weight: 300;
    opacity: 0.15;
    color: #f0e6ff;
    animation: kanjiDrift 60s linear infinite;
}
.k1 { left: 12%; animation-delay: -8s; color: #00d4aa; }
.k2 { left: 50%; animation-delay: -31s; color: #7b4dce; }
.k3 { left: 74%; animation-delay: -48s; color: #c4547a; }
@keyframes kanjiDrift { from { transform: translateY(0) rotate(0.001deg); } to { transform: translateY(-122vh) rotate(0.001deg); } }

.story-shell { position: relative; padding: 10vh clamp(1.5rem, 6vw, 7rem) 14vh; }
.era-section { min-height: 92vh; display: grid; align-items: center; position: relative; }
.intro-section { min-height: 100vh; }
.closing-section { min-height: 105vh; }
.image-weight { grid-template-columns: minmax(0, 1fr) minmax(180px, 0.6fr); gap: clamp(1.5rem, 4vw, 4rem); }

.marble-card {
    position: relative;
    isolation: isolate;
    padding: clamp(2rem, 5vw, 4.8rem);
    max-width: 760px;
    color: #d4cde6;
    background: linear-gradient(135deg, rgba(240,230,255,0.13), rgba(123,77,206,0.08) 48%, rgba(0,212,170,0.07));
    border: 1px solid rgba(168,156,196,0.34);
    box-shadow: 0 30px 90px rgba(14,11,30,0.34), inset 0 1px 0 rgba(240,230,255,0.16);
    backdrop-filter: blur(16px);
    transform: translateZ(0);
    overflow: hidden;
    transition: border-color 0.8s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.marble-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--marble);
    background-size: 520px 520px;
    background-blend-mode: overlay;
    opacity: 0.40;
    mix-blend-mode: overlay;
}
.marble-card::after {
    content: "";
    position: absolute;
    inset: -40%;
    z-index: -2;
    background: radial-gradient(circle, rgba(0,212,170,0.15) 0%, transparent 70%);
    opacity: 0.72;
}
.marble-card.active-card { border-color: rgba(0,212,170,0.72); box-shadow: 0 36px 110px rgba(0,212,170,0.12), 0 30px 90px rgba(14,11,30,0.38), inset 0 1px 0 rgba(240,230,255,0.22); transform: translateY(-0.35rem) translateZ(0); }
.broad-card { max-width: 900px; }
.compact-card { max-width: 560px; }
.final-card { border-color: rgba(0,212,170,0.7); }

.eyebrow { margin-bottom: 1.35rem; font: 500 0.78rem/1.4 var(--data); color: #00d4aa; letter-spacing: 0.18em; text-transform: uppercase; text-shadow: 0 0 20px rgba(0,212,170,0.4); }
h2 { max-width: 12ch; margin-bottom: 1.35rem; font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 7vw, 7.4rem); line-height: 0.95; letter-spacing: -0.03em; color: #f0e6ff; }
.marble-card p:not(.eyebrow), .data-sentence { max-width: 64ch; font: 400 clamp(1rem, 1.5vw, 1.2rem)/1.85 var(--body); color: #d4cde6; }
.counter-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(1.5rem, 3vw, 2.6rem); }
.counter-block { position: relative; min-width: 160px; padding: 1.1rem 1.35rem; border-left: 1px solid rgba(0,212,170,0.55); background: rgba(14,11,30,0.22); }
.counter-block small { display: block; margin-top: 0.35rem; color: #a89cc4; font: 400 0.8rem/1.4 var(--body); letter-spacing: 0.08em; text-transform: uppercase; }
.counter, .era-indicator { font-family: var(--data); font-weight: 500; font-variant-numeric: tabular-nums; color: #00d4aa; letter-spacing: 0.05em; text-shadow: 0 0 20px rgba(0,212,170,0.4); }
.counter { position: relative; display: inline-block; font-size: clamp(1.5rem, 3vw, 2.5rem); }
.counter.completed::after { content: ""; position: absolute; inset: -0.55rem; border: 1px solid #00d4aa; border-radius: 999px; animation: counterPulse 600ms cubic-bezier(0.55, 0, 0.1, 1) forwards; }
.counter-block.rose { border-left-color: rgba(196,84,122,0.72); }
.data-sentence { margin-top: 2rem; }
@keyframes counterPulse { from { transform: scale(1); opacity: 0.6; } to { transform: scale(2.5); opacity: 0; } }

.kumiko { position: absolute; width: min(34vw, 280px); height: auto; right: 6%; bottom: 14%; opacity: 0.3; }
.kumiko.right { right: auto; left: 2%; bottom: 8%; }
.kumiko path { fill: none; stroke: #a89cc4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.aurora-object { min-height: 440px; position: relative; filter: blur(0.2px); }
.aurora-object span { position: absolute; inset: 10% 20%; border: 1px solid rgba(168,156,196,0.3); background: linear-gradient(135deg, rgba(240,230,255,0.16), rgba(0,212,170,0.10), rgba(196,84,122,0.13)); backdrop-filter: blur(20px); transform: rotate(45deg); box-shadow: 0 0 80px rgba(123,77,206,0.18); }
.aurora-object span:nth-child(2) { inset: 24% 5% 5% 32%; transform: rotate(0deg); opacity: 0.72; }
.aurora-object span:nth-child(3) { inset: 3% 42% 42% 2%; transform: rotate(72deg); opacity: 0.54; }

.scroll-progress { position: fixed; z-index: 20; left: 0; top: 0; width: 2px; height: 100vh; background: rgba(168,156,196,0.18); }
.progress-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0%; background: linear-gradient(180deg, #7b4dce, #00d4aa, #c4547a); box-shadow: 0 0 16px rgba(0,212,170,0.6); }
.progress-tip { position: absolute; left: 10px; transform: translateY(-50%); white-space: nowrap; padding: 0.4rem 0.6rem; color: #f0e6ff; background: rgba(30,22,54,0.82); border: 1px solid rgba(168,156,196,0.34); font: 400 0.75rem/1 var(--body); opacity: 0; transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; }
.scroll-progress:hover .progress-tip { opacity: 1; }
.tip-early { top: 18%; } .tip-mid { top: 52%; } .tip-late { top: 84%; }
.era-indicator { position: fixed; z-index: 20; left: 1rem; bottom: 1rem; display: grid; place-items: center; width: clamp(4.25rem, 8vw, 6rem); aspect-ratio: 1; border-radius: 999px; background: rgba(14,11,30,0.72); border: 1px solid rgba(0,212,170,0.42); backdrop-filter: blur(16px); font-size: clamp(1.1rem, 2vw, 1.55rem); }

@media (max-width: 768px) {
    .split-page { display: block; }
    .time-shell { height: 60px; z-index: 10; }
    .time-shell::before { opacity: 0.18; }
    .frost-seam, .vertical-note, .era-kanji, .temporal-line, .kanji-field { display: none; }
    .time-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 1rem 0 1.25rem; }
    .era-stack { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .era-label { font-size: 0.68rem; letter-spacing: 0.12em; }
    .vertical-year { writing-mode: horizontal-tb; font-size: 1.35rem; letter-spacing: 0.05em; }
    .story-shell { padding: 7vh 1rem 10vh; }
    .era-section { min-height: auto; padding: 14vh 0; }
    .image-weight { grid-template-columns: 1fr; }
    .marble-card { padding: 1.55rem; }
    .marble-card::before { opacity: 0.2; }
    h2 { max-width: 14ch; font-size: clamp(2.35rem, 14vw, 4.2rem); }
    .aurora-object { min-height: 240px; }
    .kumiko { width: 44vw; bottom: 2%; }
    .era-indicator { width: 3.7rem; left: auto; right: 0.85rem; bottom: 0.85rem; font-size: 0.95rem; }
}