:root {
    /* Compliance tokens from DESIGN typography parser: Interaction Specifics* Specifics:** Intersection Observer API for scroll-triggered path-draw animations */
    --parchment: #f5f0e8;
    --umber: #2c2418;
    --clay: #c4784a;
    --bronze: #8b7355;
    --ochre: #d4a54a;
    --moss: #7a8b6a;
    --charcoal: #2c2418;
    --light-text: #e8ddd0;
    --dark-text: #5a4a3a;
    --warm-beige: #d4c8b8;
    --display: "Baloo 2", system-ui, sans-serif;
    --body: "Nunito", system-ui, sans-serif;
    --annotation: "Caveat", cursive;
    --kanji: "Noto Serif JP", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--parchment); }
body { font-family: var(--body); overflow-x: hidden; color: var(--dark-text); background: var(--parchment); }
button { font: inherit; }

.progress-indicator { position: fixed; right: 1.5rem; top: 50%; transform: translateY(-50%); z-index: 50; display: flex; flex-direction: column; gap: 16px; }
.dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 1.5px solid var(--bronze); background: transparent; cursor: pointer; transition: transform .3s cubic-bezier(.25,.1,.25,1), background-color .3s, border-color .3s, box-shadow .3s; }
.dot.active { background: var(--clay); border-color: var(--clay); box-shadow: 0 0 0 5px rgba(196,120,74,.11), 0 0 16px rgba(196,120,74,.38); }
.dot:hover { transform: scale(1.35); }

.panel { min-height: 100vh; width: 100%; position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 8vw, 6rem); overflow: hidden; isolation: isolate; }
.panel-content { width: 100%; max-width: 720px; position: relative; z-index: 8; }
.panel-thesis { background: var(--parchment); color: var(--umber); }
.panel-thesis .panel-content { text-align: left; }
.panel-antithesis { background: var(--umber); color: var(--light-text); }
.panel-antithesis .panel-content { text-align: right; }
.panel-synthesis { background: linear-gradient(90deg, var(--parchment) 0%, #e8ddd0 42%, #5a4a3a 58%, var(--umber) 100%); text-align: center; }
.panel-synthesis .panel-content { max-width: 620px; text-align: center; }

.headline { font-family: var(--display); font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--umber); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); text-wrap: balance; }
.panel-antithesis .headline { color: var(--parchment); }
.body-text { font-family: var(--body); font-size: clamp(1rem, 1.8vw, 1.25rem); font-weight: 400; line-height: 1.65; margin-bottom: clamp(1rem, 2vw, 1.5rem); color: var(--dark-text); }
.panel-antithesis .body-text { color: var(--warm-beige); }
.body-text em { font-weight: 600; color: var(--clay); font-style: normal; }
.annotation { font-family: var(--annotation); font-size: clamp(.85rem, 1.4vw, 1.1rem); font-weight: 400; color: var(--bronze); opacity: .6; margin-top: 1.25rem; }
.note-left { transform: rotate(-2.2deg); }
.note-right { transform: rotate(2deg); }

.kanji-watermark { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); z-index: 1; font-family: var(--kanji); font-weight: 700; font-size: clamp(4rem, 12vw, 10rem); line-height: 1; white-space: nowrap; color: currentColor; opacity: .08; pointer-events: none; }
.bubble-container { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.tessellation { position: absolute; left: 0; width: 100%; height: 76px; z-index: 2; opacity: .72; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='44' viewBox='0 0 80 44'%3E%3Cg fill='none' stroke='%238b7355' stroke-width='1' opacity='.12'%3E%3Cpath d='M0 0l20 22L0 44M40 0L20 22l20 22M40 0l20 22-20 22M80 0L60 22l20 22M20 22h40'/%3E%3C/g%3E%3C/svg%3E"); }
.tessellation.top { top: 0; }
.tessellation.bottom { bottom: 0; transform: rotate(180deg); }

.margin-geometry { position: absolute; z-index: 4; width: min(38vw, 420px); opacity: .42; pointer-events: auto; transition: transform .3s, filter .3s; }
.thesis-geometry { right: clamp(-3rem, 3vw, 5rem); top: 16%; }
.antithesis-geometry { left: clamp(-3rem, 3vw, 5rem); bottom: 12%; }
.margin-geometry:hover, .collision-svg:hover, .ship-illustration:hover, .zeno-arrow:hover, .timeline-illustration:hover { transform: scale(1.05); filter: drop-shadow(0 8px 20px rgba(196,120,74,.22)); }
.margin-geometry:hover .draw-path, .collision-svg:hover .draw-path, .ship-illustration:hover .draw-path, .zeno-arrow:hover line, .timeline-illustration:hover .timeline-path { stroke: var(--clay); }

.collision-zone { height: 120px; width: 100%; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(90deg, var(--parchment) 0%, var(--bronze) 50%, var(--umber) 100%); }
.collision-zone:before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 50%, rgba(245,240,232,.18), transparent 18%), radial-gradient(circle at 70% 50%, rgba(44,36,24,.2), transparent 20%); }
.collision-svg { width: 170px; height: 90px; position: relative; z-index: 2; overflow: visible; transition: transform .3s, filter .3s; }
.collision-fill { fill: var(--bronze); opacity: .55; }
.collision-shield { fill: none; stroke: var(--bronze); stroke-width: 3; opacity: .68; }
.collision-spear-line { stroke: var(--bronze); stroke-width: 3; stroke-linecap: round; opacity: .68; }

.draw-path { fill: none; stroke: var(--bronze); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: var(--path-length, 900); stroke-dashoffset: var(--path-length, 900); transition: stroke .3s; }
.draw-path.drawn { animation: pathDraw 3s cubic-bezier(.25,.1,.25,1) forwards; }
@keyframes pathDraw { to { stroke-dashoffset: 0; } }
.spear-icon { fill: var(--clay); opacity: .4; }
.shield-icon { fill: none; stroke: var(--bronze); stroke-width: 4; opacity: .5; }
.ouroboros { stroke-width: 2; }

.typewriter-text { min-height: 8em; font-family: var(--annotation); font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1.45; color: var(--warm-beige); }
.glitch-target.glitch { animation: glitch .48s steps(2, end) 3; }
@keyframes glitch { 0%,100%{transform:translate(0)} 20%{transform:translate(-3px,2px) skewX(2deg)} 40%{transform:translate(3px,-1px)} 60%{transform:translate(-1px,-2px) skewX(-2deg)} 80%{transform:translate(2px,1px)} }

.ship-illustration { width: min(100%, 520px); height: auto; margin: 1rem 0 1.25rem; overflow: visible; transition: transform .3s, filter .3s; }
.ship-hull { stroke: var(--bronze); fill: rgba(212,165,74,.16); }
.ship-plank { fill: var(--ochre); stroke: var(--bronze); stroke-width: 2; transition: fill .6s ease, transform .6s ease; }
.ship-plank.swapped { fill: var(--clay); transform: translateY(-3px); }
.mast { stroke: var(--bronze); fill: rgba(139,115,85,.14); }
.wave { stroke: var(--moss); stroke-width: 2; opacity: .65; }
.ghost-ship { fill: none; stroke: var(--clay); stroke-width: 2; opacity: 0; transform: translate(44px, -12px); transition: opacity 1s ease, transform 1s ease; }
.ghost-ship.visible { opacity: .32; transform: translate(82px, -26px); }

.zeno-arrow { width: min(100%, 520px); height: auto; margin: 1rem 0 1.25rem; overflow: visible; transition: transform .3s, filter .3s; }
.zeno-track { stroke: var(--bronze); stroke-width: 2; stroke-dasharray: 7 9; opacity: .4; }
.zeno-half { stroke: var(--light-text); stroke-width: 1.5; opacity: .35; }
#zeno-arrow line { stroke: var(--bronze); stroke-width: 5; stroke-linecap: round; }
#zeno-arrow polygon { fill: var(--bronze); }
#zeno-arrow.active { animation: zenoMove 5.4s cubic-bezier(.25,.1,.25,1) forwards; }
@keyframes zenoMove { 0%{transform:translateX(0)} 45%{transform:translateX(180px)} 68%{transform:translateX(270px)} 82%{transform:translateX(315px)} 93%{transform:translateX(337px)} 100%{transform:translateX(348px)} }

.timeline-illustration { width: min(100%, 540px); height: auto; margin: 1rem 0; overflow: visible; transition: transform .3s, filter .3s; }
.timeline-illustration .timeline-path { stroke-width: 3; }
.timeline-illustration .knot { stroke: var(--clay); stroke-width: 2; }
.timeline-illustration circle { fill: var(--clay); opacity: .78; }
.timeline-illustration text { font-family: var(--annotation); font-size: 22px; fill: var(--bronze); opacity: .72; }

.omnipotence-headline { font-size: clamp(2.6rem, 6.7vw, 5.6rem); }
.word-swap { display: inline-grid; min-width: 3.25em; vertical-align: baseline; color: var(--ochre); }
.word-swap span { grid-area: 1 / 1; animation: swapCannot 3.2s infinite; }
.word-swap span + span { animation-name: swapCan; color: var(--clay); }
@keyframes swapCannot { 0%,44%,100%{opacity:1; transform:translateY(0)} 52%,92%{opacity:0; transform:translateY(-.16em)} }
@keyframes swapCan { 0%,44%,100%{opacity:0; transform:translateY(.16em)} 52%,92%{opacity:1; transform:translateY(0)} }

.synthesis-headline { font-family: var(--kanji); font-size: clamp(2.2rem, 5vw, 4.3rem); background: linear-gradient(90deg, var(--umber), var(--clay), var(--light-text)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.synthesis-text, .synthesis-subtext { font-weight: 300; color: var(--warm-beige); text-shadow: 0 1px 18px rgba(44,36,24,.26); }
.synthesis-text { font-size: clamp(1.1rem, 2vw, 1.45rem); color: var(--umber); }
.synthesis-subtext:first-of-type { color: var(--dark-text); }
.synthesis-motifs { position: absolute; inset: 7% 7% auto auto; width: 86%; height: 86%; z-index: 2; opacity: .16; pointer-events: auto; }
.panel-synthesis .kanji-watermark { opacity: .06; }

svg .bubble-reflection { fill: #ffffff; opacity: .05; }

@media (max-width: 760px) {
    .progress-indicator { right: .75rem; opacity: .7; }
    .panel { padding: clamp(1.5rem, 6vw, 3rem); }
    .panel-antithesis .panel-content { text-align: left; }
    .margin-geometry { width: 70vw; opacity: .18; }
    .thesis-geometry, .antithesis-geometry { right: -20vw; left: auto; top: 8%; bottom: auto; }
    .headline { font-size: clamp(2.1rem, 12vw, 3.6rem); }
    .collision-svg { width: 145px; }
    .typewriter-text { min-height: 11em; }
}