:root {
    --ink: #24211D;
    --porcelain: #F7F0E4;
    --vellum: #EAE6D7;
    --sky: #6EA8D9;
    --green: #7FB88A;
    --gold: #E8B84A;
    --red: #C94E3F;
    --night: #161A2B;
    --active-bg: #F7F0E4;
    --active-ink: #24211D;
    --active-glow: #E8B84A;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--active-bg);
    color: var(--active-ink);
    font-family: "Recursive", "Inter", sans-serif;
    overflow-x: hidden;
    transition: background 900ms ease, color 900ms ease;
}

.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 60;
    opacity: .34;
    background-image: radial-gradient(circle at 20% 30%, rgba(36,33,29,.12) 0 1px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(36,33,29,.08) 0 1px, transparent 1px);
    background-size: 37px 41px, 23px 29px;
    mix-blend-mode: multiply;
}

.marginal-stamp {
    position: fixed;
    top: 28px;
    left: 32px;
    z-index: 70;
    font-family: "DM Mono", monospace;
    color: var(--active-ink);
    border: 1px solid currentColor;
    padding: 8px 12px;
    letter-spacing: .12em;
    font-size: 12px;
    transform: rotate(-3deg);
    opacity: .76;
    transition: color 800ms ease;
}

.chapter-rail {
    position: fixed;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 80;
    display: grid;
    gap: 18px;
}

.rail-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid var(--active-ink);
    background: transparent;
    color: var(--active-ink);
    position: relative;
    cursor: pointer;
    transition: background 500ms ease, transform 500ms ease, color 800ms ease, border-color 800ms ease;
}

.rail-dot span {
    position: absolute;
    right: 24px;
    top: -4px;
    font-family: "DM Mono", monospace;
    font-size: 11px;
    letter-spacing: .08em;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 400ms ease, transform 400ms ease;
}

.rail-dot.active { background: var(--active-glow); transform: scale(1.35); }
.rail-dot.active span, .rail-dot:hover span { opacity: .85; transform: translateX(0); }

.logic-sundial {
    position: fixed;
    left: 32px;
    bottom: 28px;
    z-index: 75;
    width: 124px;
    height: 124px;
    opacity: .9;
}

.dial-face {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--active-ink), transparent 40%);
    background: radial-gradient(circle, rgba(247,240,228,.44), transparent 63%);
    transition: border-color 800ms ease;
}

.dial-marker {
    position: absolute;
    left: 50%;
    top: 22%;
    width: 2px;
    height: 42px;
    background: var(--active-ink);
    transform: translateX(-50%);
    transition: background 800ms ease;
}

.dial-shadow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 48px;
    height: 2px;
    transform-origin: 0 50%;
    transform: rotate(125deg);
    background: linear-gradient(90deg, var(--active-ink), transparent);
    transition: background 800ms ease;
}

.dial-symbol {
    position: absolute;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    color: var(--active-ink);
    transition: color 800ms ease;
}
.dial-symbol.top { top: 8px; left: 55px; }
.dial-symbol.right { right: 8px; top: 55px; }
.dial-symbol.bottom { bottom: 8px; left: 55px; }
.dial-symbol.left { left: 8px; top: 55px; }

.chapter {
    min-height: 100vh;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 8vw;
    isolation: isolate;
}

.chapter-kicker {
    margin: 0 0 18px;
    font-family: "DM Mono", monospace;
    font-size: clamp(12px, 1.2vw, 15px);
    letter-spacing: .16em;
    text-transform: uppercase;
}

h1, h2 {
    font-family: "Literata", serif;
    font-weight: 500;
    line-height: .96;
    letter-spacing: -.055em;
    margin: 0;
}

h1 { font-size: clamp(58px, 9vw, 142px); max-width: 1040px; }
h2 { font-size: clamp(48px, 7.4vw, 116px); max-width: 980px; }

.premise-dawn {
    background: linear-gradient(180deg, #F7F0E4 0%, #EAE6D7 68%, #E8B84A 190%);
}

.horizon {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #24211D, transparent);
    opacity: .42;
}

.proposition-disc {
    position: absolute;
    width: clamp(180px, 28vw, 420px);
    height: clamp(180px, 28vw, 420px);
    border-radius: 50%;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle at 45% 40%, #F7F0E4 0 22%, #E8B84A 58%, rgba(232,184,74,.05) 70%);
    filter: blur(.2px);
    opacity: .72;
    animation: risePulse 7s ease-in-out infinite alternate;
}

.vellum-card {
    position: relative;
    z-index: 2;
    background: rgba(234,230,215,.38);
    border: 1px solid rgba(36,33,29,.18);
    box-shadow: 0 28px 90px rgba(36,33,29,.08);
    backdrop-filter: blur(3px);
}

.opening-card { padding: clamp(28px, 5vw, 70px); }

.proof-shadow {
    margin: 34px 0 0;
    font-family: "DM Mono", monospace;
    font-size: clamp(18px, 2.6vw, 34px);
    color: #C94E3F;
    text-shadow: 22px 28px 0 rgba(36,33,29,.14), 42px 56px 0 rgba(36,33,29,.07);
}

.notation-field span {
    position: absolute;
    font-family: "DM Mono", monospace;
    color: #24211D;
    opacity: .26;
    animation: wake 5s ease-in-out infinite alternate;
}
.notation-field span:nth-child(1) { left: 18%; top: 24%; }
.notation-field span:nth-child(2) { left: 76%; top: 19%; animation-delay: .3s; }
.notation-field span:nth-child(3) { left: 66%; top: 66%; animation-delay: .9s; }
.notation-field span:nth-child(4) { left: 26%; top: 73%; animation-delay: 1.2s; }
.notation-field span:nth-child(5) { left: 84%; top: 52%; animation-delay: 1.7s; }
.notation-field span:nth-child(6) { left: 44%; top: 16%; animation-delay: 2.1s; }

.margin-proof {
    position: absolute;
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: .06em;
    opacity: .56;
    writing-mode: vertical-rl;
}
.left-proof { left: 7vw; top: 28vh; }
.right-proof { right: 8vw; bottom: 18vh; }

.inference-noon {
    background: radial-gradient(circle at 50% 42%, #F7F0E4 0 18%, #E8B84A 38%, #6EA8D9 130%);
}

.beam {
    position: absolute;
    width: 145vw;
    height: 12vh;
    left: -20vw;
    background: rgba(247,240,228,.5);
    mix-blend-mode: screen;
    transform-origin: center;
}
.beam-a { transform: rotate(18deg); top: 28%; }
.beam-b { transform: rotate(-22deg); top: 48%; }
.beam-c { transform: rotate(42deg); top: 62%; opacity: .6; }

.corridor-grid {
    position: absolute;
    inset: 12%;
    background-image: linear-gradient(90deg, rgba(36,33,29,.12) 1px, transparent 1px), linear-gradient(rgba(36,33,29,.12) 1px, transparent 1px);
    background-size: 7vw 7vw;
    transform: perspective(700px) rotateX(58deg);
    opacity: .42;
}

.chapter-panel {
    position: relative;
    z-index: 2;
    max-width: 1050px;
}

.syllogism-stack {
    margin-top: 42px;
    display: grid;
    gap: 12px;
    max-width: 620px;
    font-family: "Recursive", sans-serif;
    font-variation-settings: "CASL" .2, "MONO" .5;
}
.syllogism-stack div {
    background: rgba(247,240,228,.58);
    border-left: 3px solid #7FB88A;
    padding: 14px 18px;
    box-shadow: 16px 16px 0 rgba(36,33,29,.08);
}
.syllogism-stack span { font-family: "DM Mono", monospace; color: #C94E3F; margin-right: 14px; }

.truth-window {
    position: absolute;
    right: 10vw;
    bottom: 10vh;
    display: grid;
    grid-template-columns: repeat(3, 58px);
    font-family: "DM Mono", monospace;
    background: rgba(22,26,43,.8);
    color: #F7F0E4;
    border: 1px solid rgba(247,240,228,.5);
}
.truth-window div { padding: 12px; border: 1px solid rgba(247,240,228,.14); text-align: center; }

.contradiction-dusk {
    background: linear-gradient(135deg, #E8B84A 0%, #C94E3F 46%, #161A2B 128%);
    color: #F7F0E4;
}

.argument {
    position: absolute;
    font-family: "DM Mono", monospace;
    font-size: clamp(18px, 2vw, 28px);
    background: rgba(36,33,29,.34);
    padding: 18px 28px;
    border: 1px solid rgba(247,240,228,.2);
    box-shadow: 40px 48px 0 rgba(22,26,43,.22);
}
.argument-one { left: 5vw; top: 20vh; transform: rotate(17deg); }
.argument-two { right: 5vw; bottom: 22vh; transform: rotate(-18deg); }

.crack {
    position: absolute;
    width: 4px;
    height: 92vh;
    top: 4vh;
    left: 50%;
    background: linear-gradient(#F7F0E4, transparent 18%, #24211D 32%, #F7F0E4 45%, transparent 62%, #24211D);
    transform: rotate(11deg);
    filter: drop-shadow(0 0 18px rgba(247,240,228,.4));
}

.mirror-panel {
    position: absolute;
    width: 26vw;
    height: 44vh;
    border: 1px solid rgba(247,240,228,.28);
    background: linear-gradient(135deg, rgba(110,168,217,.28), rgba(247,240,228,.08));
    display: grid;
    place-items: center;
    font-family: "DM Mono", monospace;
    font-size: clamp(20px, 3vw, 48px);
    backdrop-filter: blur(2px);
}
.mirror-left { left: 13vw; bottom: 10vh; transform: skewY(-7deg); }
.mirror-right { right: 13vw; top: 10vh; transform: skewY(7deg); }
.dusk-panel { text-align: center; }
.dusk-panel p:last-child { max-width: 660px; margin: 28px auto 0; font-size: 20px; line-height: 1.55; }

.theorem-night {
    background: radial-gradient(circle at 60% 34%, rgba(110,168,217,.28), transparent 28%), linear-gradient(180deg, #161A2B 0%, #24211D 100%);
    color: #F7F0E4;
}

.constellation {
    position: absolute;
    inset: 0;
}
.constellation::before {
    content: "";
    position: absolute;
    inset: 12% 10%;
    background: linear-gradient(27deg, transparent 18%, rgba(110,168,217,.35) 18% 18.2%, transparent 18.2%), linear-gradient(143deg, transparent 41%, rgba(232,184,74,.32) 41% 41.2%, transparent 41.2%), linear-gradient(98deg, transparent 62%, rgba(127,184,138,.28) 62% 62.2%, transparent 62.2%);
}
.constellation span {
    position: absolute;
    left: var(--x);
    top: var(--y);
    font-family: "DM Mono", monospace;
    color: #E8B84A;
    text-shadow: 0 0 18px #E8B84A;
    animation: star 3.6s ease-in-out infinite alternate;
}
.constellation span:nth-child(even) { color: #6EA8D9; text-shadow: 0 0 18px #6EA8D9; animation-delay: .8s; }

.lantern-grid {
    position: absolute;
    inset: auto 12vw 12vh auto;
    display: grid;
    grid-template-columns: repeat(3, 44px);
    gap: 18px;
}
.lantern-grid div {
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle, #7FB88A, rgba(127,184,138,.08) 68%);
    box-shadow: 0 0 28px #7FB88A;
    animation: lantern 4s ease-in-out infinite alternate;
}
.lantern-grid div:nth-child(2n) { background: radial-gradient(circle, #E8B84A, rgba(232,184,74,.08) 68%); box-shadow: 0 0 28px #E8B84A; animation-delay: 1s; }

.final-theorem {
    position: relative;
    z-index: 2;
    text-align: center;
}
.qed {
    margin-top: 34px;
    font-family: "Noto Serif KR", "Literata", serif;
    font-size: clamp(18px, 2vw, 28px);
    color: #EAE6D7;
}

@keyframes risePulse { from { transform: translateX(-50%) translateY(18px) scale(.96); } to { transform: translateX(-50%) translateY(-8px) scale(1.03); } }
@keyframes wake { from { transform: translateY(8px); opacity: .08; } to { transform: translateY(-6px); opacity: .38; } }
@keyframes star { from { opacity: .45; transform: scale(.86); } to { opacity: 1; transform: scale(1.2); } }
@keyframes lantern { from { opacity: .42; transform: translateY(8px); } to { opacity: 1; transform: translateY(-4px); } }

@media (max-width: 760px) {
    .chapter { padding: 24vw 8vw; }
    .logic-sundial { width: 86px; height: 86px; left: 18px; }
    .chapter-rail { right: 16px; }
    .truth-window, .mirror-panel { display: none; }
    .argument { font-size: 14px; }
    .marginal-stamp { left: 18px; top: 18px; }
}