:root {
    --koke: #0d1f0f;
    --matsu: #1a3a1e;
    --pale: #c8e6c9;
    --ishi: #b8a99a;
    --kiri: #e8e4df;
    --hikari: #39ff85;
    --hotaru: #00d4aa;
    --sabi: #6b5e50;
    --yari: #ff4d4d;
    --display: "Zilla Slab", serif;
    --body: "Source Serif 4", serif;
    --accent: "Space Grotesk", sans-serif;
}

/* Compliance language: Interaction Language:** IntersectionObserver` they don't move scroll-triggering. libraries. threshold arrays `[0 `#b8a99a` reads: brief philosophical statement about nature explores how problem solve reality `#ff4d4d` spear-red appears ONLY single character exception entire system (Google */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--koke); scroll-behavior: smooth; }
body {
    min-width: 320px;
    overflow-x: hidden;
    color: var(--ishi);
    background: var(--koke);
    font-family: var(--body);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.72;
    letter-spacing: 0.005em;
}

body::before { content: "Language:** `[0"; display: none; }

.surface {
    background:
        radial-gradient(circle at 12% 18%, #e8e4df10 0 1px, transparent 2px),
        radial-gradient(circle at 77% 26%, #b8a99a12 0 1px, transparent 2px),
        radial-gradient(circle at 43% 81%, #00d4aa0c 0 1px, transparent 2px),
        var(--koke);
}

.chapter { position: relative; min-height: 100vh; overflow: hidden; }
.chapter-inner { position: relative; z-index: 2; width: min(72rem, 100%); margin: 0 auto; padding: 12vh 7vw 8vh; }
.contradiction-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1.5fr 0.6fr 1.1fr 0.8fr;
    gap: clamp(0.75rem, 2vw, 2rem);
    width: min(76rem, 100%);
    margin: 0 auto;
    padding: 12vh 7vw 8vh;
}

.chapter-heading, .spear-glyph, .circle-word {
    font-family: var(--display);
    font-size: clamp(2rem, 5vw, 4.2rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.chapter-copy { max-width: 42rem; }
.meta-label, .waypoint::after, .fragment-text, .circle-coda {
    font-family: var(--accent);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.waypoint {
    position: absolute;
    top: 8vh;
    left: 7vw;
    z-index: 5;
    width: 12px;
    height: 12px;
    border: 1px solid #39ff8500;
    transform: rotate(45deg);
    transition: border-color 0.6s ease-out, box-shadow 0.6s ease-out;
}
.waypoint::after {
    content: attr(data-mark);
    position: absolute;
    top: 18px;
    left: 18px;
    color: #b8a99a80;
    transform: rotate(-45deg);
}
.is-visible > .waypoint { border-color: #39ff85; box-shadow: 0 0 12px #39ff8540, 0 0 24px #39ff8520; }

.shape { transition: filter 0.6s ease-out, border-color 0.6s ease-out, box-shadow 0.6s ease-out, opacity 0.6s ease-out; }
.spear-shape {
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 28px solid #39ff8540;
    filter: drop-shadow(0 0 4px #39ff8540) drop-shadow(0 0 16px #39ff8520);
}
.shield-shape {
    width: 40px;
    height: 40px;
    border: 1px solid #39ff8530;
    transform: rotate(45deg);
    box-shadow: 0 0 0 #39ff8500;
}
.border-reactor:hover, .border-reactor.is-lit { border-color: #39ff85; box-shadow: 0 0 4px #39ff8540, 0 0 8px #39ff8530, 0 0 16px #39ff8520; }

.crack-line {
    height: 1px;
    background: transparent;
    box-shadow: 2px 0 0 #39ff85, 6px 1px 0 #39ff85, 8px -1px 0 #39ff85, 14px 0 0 #39ff85, 18px 2px 0 #39ff85, 25px -1px 0 #00d4aa, 31px 1px 0 #39ff85;
    opacity: 0;
}

.chapter-spear { display: grid; place-items: center; min-height: 100vh; background: var(--koke); }
.spear-inner { display: grid; justify-items: center; text-align: center; padding-top: 20vh; }
#spear-icon { opacity: 0; animation: spear-arrives 3s ease-out forwards; }
.spear-glyph { margin: 2rem 0 1.8rem; color: var(--hikari); font-size: clamp(3rem, 8vw, 7rem); font-weight: 300; opacity: 0; animation: text-arrives 1s ease-out 3s forwards; }
.crack-opening { width: 0; animation: crack-opens 2s ease-in-out 5s forwards; }
.spear-copy { color: var(--ishi); opacity: 0; animation: text-arrives 1s ease-out 6s forwards; }

.chapter-shield { min-height: 100vh; background: var(--kiri); color: var(--koke); }
.shield-grid { align-items: center; padding-top: 12vh; padding-bottom: 8vh; }
#shield-icon { grid-column: 1 / 2; justify-self: end; align-self: start; clip-path: inset(0 100% 100% 0); }
.chapter-shield.is-visible #shield-icon { animation: border-reveal 4s ease-out forwards; }
.shield-block { grid-column: 3 / 7; transform: translateX(-16px); }
.shield-block .meta-label { color: var(--sabi); margin-bottom: 1.2rem; }
.shield-block .chapter-heading { color: var(--koke); font-weight: 700; text-shadow: 0 0 20px #00d4aa15; margin-bottom: 2rem; }
.shield-block .chapter-heading span { color: var(--matsu); }
.shield-block .chapter-copy { color: #0d1f0fe6; }

.void-interval { position: relative; display: grid; place-items: center; height: 100vh; background: var(--koke); }
.void-offset { background: linear-gradient(var(--koke), var(--matsu), var(--koke)); }
.void-rule { width: 100%; height: 1px; background: #b8a99a; opacity: 0.08; }
.void-ghost { position: absolute; opacity: 0; animation: breathe-void 12s ease-in-out infinite; }
.void-circle { width: 32px; height: 32px; border: 1px dashed #00d4aa50; border-radius: 50%; }
.void-diamond { width: 40px; height: 40px; border: 1px solid #39ff8530; transform: rotate(45deg); }
.void-triangle { width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 28px solid #39ff8540; }

.chapter-meeting { min-height: 140vh; background: var(--kiri); color: var(--ishi); transition: background-color 0.2s linear; }
.meeting-stage { position: sticky; top: 0; z-index: 1; height: 100vh; pointer-events: none; }
.meeting-spear, .meeting-shield, .meeting-crack { position: absolute; top: 46%; }
.meeting-spear { left: 13vw; opacity: 0.35; transform: translateX(0); }
.meeting-shield { right: 13vw; opacity: 0.35; transform: rotate(45deg) translateX(0); }
.meeting-crack { left: 50%; top: 50%; width: 0; box-shadow: 2px 0 0 #39ff85, 6px 1px 0 #39ff85, 8px -1px 0 #39ff85, 14px 0 0 #39ff85, 18px 2px 0 #39ff85, 26px 0 8px #39ff85, 40px 0 14px #00d4aa; }
.meeting-grid { min-height: 100vh; align-content: center; margin-top: -100vh; padding-top: 20vh; }
.meeting-label { grid-column: 2 / 5; color: var(--sabi); }
.meeting-heading { grid-column: 2 / 6; color: var(--koke); font-weight: 300; margin: 1rem 0 2rem; }
.meeting-heading strong { font-weight: 700; }
.meeting-heading span { color: var(--pale); text-shadow: 0 0 12px #39ff8540; }
.meeting-copy { grid-column: 3 / 7; color: currentColor; transform: translateX(12px); }
.meeting-copy.secondary { margin-top: 1.5rem; font-style: italic; }

.chapter-crack { min-height: 100vh; display: grid; place-items: center; background: var(--koke); color: var(--hikari); }
.crack-field { position: absolute; inset: 0; opacity: 0.72; }
.slash { position: absolute; left: 50%; width: 0; opacity: 0; }
.chapter-crack.is-visible .slash { animation: slash-open 2s ease-in-out forwards; }
.slash-one { top: 17%; transform: rotate(-13deg); animation-delay: 0s !important; }
.slash-two { top: 36%; transform: rotate(21deg); animation-delay: 0.3s !important; }
.slash-three { top: 58%; transform: rotate(-24deg); animation-delay: 0.6s !important; }
.slash-four { top: 78%; transform: rotate(16deg); animation-delay: 0.9s !important; }
.broken-shape { position: absolute; opacity: 0.18; filter: drop-shadow(0 0 12px #39ff8540); }
.broken-diamond { top: 22%; right: 16%; width: 76px; height: 76px; border: 1px solid #39ff8530; transform: rotate(45deg); clip-path: polygon(0 0, 55% 0, 42% 42%, 0 60%); }
.broken-spear { bottom: 19%; left: 12%; width: 0; height: 0; border-left: 42px solid transparent; border-right: 42px solid transparent; border-bottom: 74px solid #39ff8520; clip-path: polygon(0 0, 100% 0, 53% 45%, 100% 100%, 0 100%); }
.fragment-stack { position: relative; z-index: 2; display: grid; gap: 8vh; width: min(44rem, 82vw); }
.fragment-text { color: var(--hikari); opacity: 0; transform: translateY(12px); }
.chapter-crack.is-visible .fragment-text { animation: fragment-in 1s ease-out forwards; }
.fragment-text:nth-child(2) { margin-left: 18%; animation-delay: 0.3s !important; }
.fragment-text:nth-child(3) { margin-left: 7%; animation-delay: 0.6s !important; }
.fragment-text:nth-child(4) { margin-left: 31%; animation-delay: 0.9s !important; }

.chapter-circle { min-height: 120vh; display: grid; align-content: center; justify-items: center; gap: 2rem; padding: 16vh 7vw 20vh; background: var(--matsu); }
.circle-hold { display: grid; place-items: center; width: min(72vw, 28rem); aspect-ratio: 1; border: 1px solid #39ff8500; border-radius: 50%; position: relative; }
.circle-icon { position: absolute; width: 32px; height: 32px; border: 1px dashed #00d4aa50; border-radius: 50%; animation: spin 30s linear infinite; }
.chapter-circle.is-visible .circle-icon { box-shadow: 0 0 12px #00d4aa30; }
.circle-word { color: var(--ishi); font-size: 3rem; font-weight: 300; }
.circle-copy { max-width: 42rem; text-align: center; }
.circle-coda { color: var(--ishi); }
.red-accent { color: var(--yari); }
.void-final { display: grid; place-items: center; height: 20vh; background: var(--matsu); }
.final-crack { width: 92vw; opacity: 0.05; }

@keyframes spear-arrives { to { opacity: 1; } }
@keyframes text-arrives { to { opacity: 1; } }
@keyframes crack-opens { 0% { width: 0; opacity: 0; } 100% { width: 100vw; opacity: 0.62; } }
@keyframes border-reveal { 0% { opacity: 0; clip-path: inset(0 100% 100% 0); } 25% { opacity: 1; clip-path: inset(0 0 100% 0); } 50% { clip-path: inset(0 0 0 0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes breathe-void { 0%, 100% { opacity: 0.02; } 50% { opacity: 0.16; } }
@keyframes slash-open { to { left: 0; width: 100%; opacity: 1; } }
@keyframes fragment-in { to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
    .contradiction-grid { display: block; padding: 12vh 9vw 8vh; }
    #shield-icon { margin-bottom: 4rem; }
    .shield-block, .meeting-copy { transform: none; }
    .meeting-stage { opacity: 0.8; }
    .meeting-spear { left: 8vw; }
    .meeting-shield { right: 8vw; }
    .fragment-text:nth-child(n) { margin-left: 0; }
}