:root {
    --design-font-regex-token: "Grotes Grotesk Groteskk Groteskkk Groteskkkk Grotesk* Grotesk**";
    --proof-paper: #F4F0E6;
    --acid-vellum: #D8FF3E;
    --ink-black: #111015;
    --logic-blue: #2457FF;
    --contradiction-red: #E23D3D;
    --bruise-violet: #4B2A7B;
    --pale-static: #C8C3B8;
    --display: "Space Grotesk", sans-serif;
    --editorial: "Newsreader", serif;
    --mono: "JetBrains Mono", monospace;
    --kr: "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--proof-paper);
    color: var(--ink-black);
    font-family: var(--display);
    overflow-x: hidden;
}

.paper-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: .18;
    background-image: radial-gradient(var(--ink-black) .55px, transparent .55px), radial-gradient(var(--pale-static) .7px, transparent .7px);
    background-position: 0 0, 9px 13px;
    background-size: 31px 31px, 43px 43px;
    mix-blend-mode: multiply;
}

.cursor-dust {
    position: fixed;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.72);
    background: radial-gradient(circle, rgba(216,255,62,.65) 0 2px, transparent 3px), radial-gradient(circle at 70% 30%, rgba(226,61,61,.45) 0 2px, transparent 3px), radial-gradient(circle at 32% 78%, rgba(36,87,255,.38) 0 2px, transparent 3px);
    filter: blur(.2px);
    transition: opacity .2s ease;
}

.scene-rail {
    position: fixed;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    display: grid;
    gap: 18px;
    font: 600 11px/1 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.scene-rail a {
    color: var(--ink-black);
    text-decoration: none;
    writing-mode: vertical-rl;
    padding: 8px 5px;
    border-left: 1px solid var(--pale-static);
    background: rgba(244,240,230,.58);
    transition: color .25s ease, transform .25s ease, background .25s ease;
}

.scene-rail a.active, .scene-rail a:hover {
    color: var(--contradiction-red);
    background: var(--acid-vellum);
    transform: translateX(5px) rotate(-2deg);
}

.act {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(38px, 6vw, 86px) clamp(30px, 7vw, 112px);
}

.scene-label, .margin-id, .proof-prefix {
    font: 600 12px/1.4 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.blueprint-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(36,87,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(36,87,255,.14) 1px, transparent 1px), linear-gradient(117deg, transparent 0 49.5%, rgba(75,42,123,.12) 50%, transparent 50.5%);
    background-size: 7.5vw 7.5vw, 7.5vw 7.5vw, 100% 100%;
    opacity: .72;
}

.act-premise {
    display: grid;
    place-items: center;
}

.margin-id {
    position: absolute;
    top: 42px;
    right: 44px;
    color: var(--logic-blue);
}

.theorem-block {
    position: relative;
    max-width: 1030px;
    width: 72vw;
    z-index: 1;
    transform: translateX(2vw);
}

.proof-prefix {
    display: block;
    margin-bottom: 18px;
    color: var(--bruise-violet);
}

h1, h2 {
    margin: 0;
    font-family: var(--display);
    letter-spacing: -.07em;
    line-height: .86;
}

h1 {
    font-size: clamp(78px, 17vw, 246px);
    text-shadow: -4px 4px 0 rgba(36,87,255,.13);
}

h2 { font-size: clamp(52px, 9.4vw, 146px); }

.definition {
    position: relative;
    max-width: 780px;
    margin: 24px 0 0 auto;
    font: italic 600 clamp(23px, 3vw, 43px)/1.08 var(--editorial);
}

.crossed {
    position: relative;
    display: inline-block;
}

.crossed::after {
    content: "";
    position: absolute;
    left: -6%;
    right: -8%;
    top: 52%;
    height: 5px;
    background: var(--contradiction-red);
    transform: rotate(-7deg);
}

.replacement {
    position: absolute;
    right: 8%;
    bottom: -38px;
    color: var(--contradiction-red);
    font: 700 18px/1 var(--mono);
    transform: rotate(-6deg);
}

.wrong-brackets {
    position: absolute;
    left: 9vw;
    bottom: 4vh;
    color: var(--bruise-violet);
    font: 700 clamp(120px, 18vw, 260px)/.7 var(--display);
    opacity: .24;
    letter-spacing: -.25em;
}

.logic-knot {
    position: absolute;
    fill: none;
    pointer-events: none;
    z-index: 0;
}

.logic-knot path {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 5;
    stroke-dasharray: 880;
    stroke-dashoffset: 880;
    animation: drawKnot 5.5s ease-in-out infinite alternate;
}

.premise-knot { right: 4vw; top: 10vh; width: 42vw; opacity: .82; }
.compiler-knot { right: -5vw; bottom: 2vh; width: 58vw; opacity: .72; }
.blue-path { stroke: var(--logic-blue); }
.red-path, .red-slash { stroke: var(--contradiction-red); animation-delay: .7s; }
.violet-path { stroke: var(--bruise-violet); animation-delay: .35s; }

@keyframes drawKnot { to { stroke-dashoffset: 0; } }

.stamp {
    position: absolute;
    z-index: 1;
    font: 900 clamp(30px, 5vw, 78px)/1 var(--kr);
    border: 5px solid currentColor;
    padding: .12em .23em .18em;
    transform: rotate(-13deg);
    opacity: .83;
    mix-blend-mode: multiply;
}

.stamp-red { right: 13vw; bottom: 13vh; color: var(--contradiction-red); }
.stamp-violet { left: 14vw; bottom: 12vh; color: var(--bruise-violet); transform: rotate(10deg); }

.act-counter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
    background: linear-gradient(100deg, var(--proof-paper) 0 48%, rgba(75,42,123,.12) 48.2% 100%);
}

.fold-line {
    position: absolute;
    top: -15vh;
    bottom: -15vh;
    left: calc(var(--fold, .5) * 100%);
    width: 7px;
    z-index: 3;
    background: var(--ink-black);
    transform: rotate(var(--fold-angle, 0deg));
    box-shadow: -12px 0 0 var(--logic-blue), 15px 0 0 var(--contradiction-red);
    transition: left .18s linear, transform .18s linear;
}

.reading {
    position: relative;
    min-height: 100vh;
    padding: clamp(46px, 8vw, 112px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
}

.reading-doc { align-items: flex-start; }
.reading-rebuttal {
    align-items: flex-end;
    text-align: right;
    background: linear-gradient(135deg, rgba(75,42,123,.08), rgba(226,61,61,.08));
}

.editorial {
    max-width: 480px;
    font: italic 400 clamp(22px, 2.6vw, 36px)/1.05 var(--editorial);
}

.proof-slip {
    position: relative;
    width: min(430px, 80vw);
    padding: 26px;
    background: var(--proof-paper);
    border: 1px solid var(--ink-black);
    box-shadow: 12px 14px 0 var(--logic-blue);
    transform: rotate(-3deg);
    clip-path: polygon(0 0, 94% 0, 100% 12%, 96% 100%, 8% 98%, 0 88%);
}

.proof-slip span, .proof-slip b { display: block; font: 700 12px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.proof-slip code { display: block; margin: 18px 0; font: 600 17px/1.4 var(--mono); color: var(--logic-blue); }
.slip-red { box-shadow: -12px 14px 0 var(--contradiction-red); transform: rotate(4deg); }
.slip-red code { color: var(--contradiction-red); }

.merge-ribbon, .final-ribbon {
    font: 700 14px/1 var(--mono);
    letter-spacing: .08em;
    background: var(--ink-black);
    color: var(--proof-paper);
    padding: 14px 18px;
    transform: rotate(1deg);
}
.ribbon-red { background: var(--contradiction-red); transform: rotate(-2deg); }
.diagonal-caption {
    position: absolute;
    left: 50%;
    bottom: 8vh;
    z-index: 4;
    font: 700 13px/1 var(--mono);
    color: var(--bruise-violet);
    transform: translateX(-50%) rotate(-10deg);
    background: var(--acid-vellum);
    padding: 10px 14px;
}

.act-compiler {
    background: radial-gradient(circle at 80% 70%, rgba(75,42,123,.28), transparent 36%), linear-gradient(162deg, var(--ink-black), #211436 62%, var(--bruise-violet));
    color: var(--proof-paper);
}

.compiler-field {
    position: relative;
    z-index: 2;
    width: min(920px, 82vw);
    margin: 5vh 0 0 6vw;
}

.diagnostics {
    display: grid;
    gap: 12px;
    margin: 34px 0;
    font: 500 clamp(14px, 1.5vw, 19px)/1.35 var(--mono);
}

.diagnostics p {
    width: fit-content;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid rgba(200,195,184,.42);
    background: rgba(244,240,230,.06);
    transform: translateX(var(--drift, 0px)) rotate(var(--tilt, 0deg));
    transition: transform .4s ease, background .4s ease;
}

.diagnostics span { color: var(--acid-vellum); }

.gate-row { display: flex; gap: 13px; flex-wrap: wrap; }
.gate {
    border: 1px solid var(--pale-static);
    background: transparent;
    color: var(--proof-paper);
    padding: 17px 26px;
    font: 700 18px/1 var(--mono);
    cursor: pointer;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.gate:hover, .gate.is-inverted { background: var(--acid-vellum); color: var(--ink-black); transform: rotate(-4deg) translateY(6px); }

.floating-code {
    position: absolute;
    z-index: 1;
    font: 700 clamp(13px, 1.8vw, 22px)/1 var(--mono);
    color: var(--pale-static);
    opacity: .72;
}
.code-a { right: 6vw; top: 18vh; transform: rotate(8deg); }
.code-b { left: 14vw; bottom: 13vh; color: var(--acid-vellum); transform: rotate(-3deg); }
.code-c { right: 17vw; bottom: 23vh; color: var(--contradiction-red); transform: rotate(13deg); }

.act-unresolved {
    display: grid;
    place-items: center;
    text-align: center;
    background: linear-gradient(90deg, var(--proof-paper) 0 50%, rgba(75,42,123,.2) 50% 100%), repeating-linear-gradient(-38deg, transparent 0 27px, rgba(36,87,255,.13) 28px 29px);
}

.emblem {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, auto);
    align-items: center;
    gap: clamp(2px, 1vw, 16px);
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(86px, 15vw, 220px);
    line-height: .8;
    filter: drop-shadow(14px 16px 0 rgba(36,87,255,.12));
}

.emblem span { display: inline-block; transition: transform .45s cubic-bezier(.2,.8,.2,1), color .45s ease; }
.emblem-lambda { color: var(--ink-black); }
.emblem-branch { color: var(--contradiction-red); transform: translateY(-.06em) rotate(7deg); }
.emblem-brace { color: var(--bruise-violet); }
.emblem.disagreeing .brace-left { transform: translateX(28px) rotate(18deg); color: var(--contradiction-red); }
.emblem.disagreeing .brace-right { transform: translateX(-28px) rotate(-18deg); color: var(--logic-blue); }
.emblem.disagreeing .emblem-lambda { transform: scale(.9, 1.22) rotate(-5deg); }
.emblem.disagreeing .emblem-branch { transform: translateY(.12em) rotate(-16deg); color: var(--acid-vellum); }

.act-unresolved h2 { max-width: 1120px; margin-top: 28px; }
.dual-ending { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: min(920px, 82vw); margin: 28px auto; }
.dual-ending p { margin: 0; padding: 18px; font: italic 600 clamp(22px, 3vw, 42px)/1 var(--editorial); border: 1px solid var(--ink-black); }
.accepted { color: var(--logic-blue); background: rgba(36,87,255,.08); transform: rotate(-2deg); }
.rejected { color: var(--contradiction-red); background: rgba(226,61,61,.08); transform: rotate(2deg); }
.final-ribbon { background: var(--bruise-violet); }
.acid-flash { position: absolute; right: 8vw; top: 16vh; padding: 13px 15px; background: var(--acid-vellum); font: 700 15px/1 var(--mono); transform: rotate(12deg); animation: blinkFlash 2.4s steps(2, end) infinite; }

.disagree::before, .disagree::after {
    content: attr(data-split);
    position: absolute;
    inset: auto auto 100% 0;
    font: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
}
.theorem-block.disagree::before, .theorem-block.disagree::after { content: attr(data-split); font: 700 clamp(78px, 17vw, 246px)/.86 var(--display); letter-spacing: -.07em; top: 34px; bottom: auto; }
.disagree:hover::before, .disagree.is-disagreeing::before { opacity: .62; color: var(--logic-blue); transform: translate(10px, -6px); }
.disagree:hover::after, .disagree.is-disagreeing::after { opacity: .62; color: var(--contradiction-red); transform: translate(-10px, 7px); }

@keyframes blinkFlash { 50% { opacity: .18; transform: rotate(-8deg) translateX(-9px); } }

@media (max-width: 780px) {
    .scene-rail { display: none; }
    .act { padding: 34px 22px; }
    .theorem-block { width: 90vw; transform: none; }
    .act-counter { grid-template-columns: 1fr; }
    .reading { min-height: 50vh; padding: 48px 26px; }
    .fold-line { transform: rotate(90deg); left: 50%; top: 47%; bottom: auto; height: 7px; width: 120vw; }
    .dual-ending { grid-template-columns: 1fr; }
    .floating-code { display: none; }
}