:root {
    --ink: #080712;
    --parchment: #E8D8B0;
    --vermilion: #D94B3D;
    --teal: #4EE3C1;
    --silver: #B9C0D4;
    --bruise: #35204A;
    --gold: #F2B84B;
    --title: "Cinzel Decorative", serif;
    --prose: "Cormorant Garamond", serif;
    --label: "Space Grotesk", sans-serif;
    --mono: "IBM Plex Mono", monospace;
}

/* Design font tokens: IBM Plex Mono sparingly for transcript fragments; Space Grotesk** for interface labels. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--ink);
    color: var(--parchment);
    overflow-x: hidden;
    font-family: var(--prose);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 18%, rgba(78, 227, 193, .13), transparent 24rem),
        radial-gradient(circle at 75% 30%, rgba(217, 75, 61, .11), transparent 18rem),
        radial-gradient(circle at 50% 100%, rgba(53, 32, 74, .85), transparent 35rem),
        linear-gradient(120deg, rgba(53, 32, 74, .38), transparent 35%, rgba(8, 7, 18, .7));
    z-index: 0;
}

.stage-noise {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .24;
    background-image:
        linear-gradient(90deg, rgba(232, 216, 176, .025) 1px, transparent 1px),
        linear-gradient(rgba(232, 216, 176, .018) 1px, transparent 1px);
    background-size: 9px 9px, 13px 13px;
    mix-blend-mode: screen;
}

.punctuation-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}

.punctuation-field span {
    position: absolute;
    color: var(--teal);
    font-family: var(--mono);
    opacity: .16;
    animation: firefly 9s linear infinite;
    text-shadow: 0 0 12px var(--teal);
}

.quest-rail {
    position: fixed;
    right: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 8;
    display: grid;
    gap: .75rem;
}

.rail-mark {
    width: 2.2rem;
    height: 2.2rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(185, 192, 212, .35);
    border-radius: 50%;
    color: var(--silver);
    font-family: var(--label);
    font-size: .75rem;
    background: rgba(8, 7, 18, .65);
    transition: .4s ease;
}

.rail-mark.active {
    color: var(--ink);
    background: var(--gold);
    box-shadow: 0 0 24px rgba(242, 184, 75, .46);
}

.imitation-quest { position: relative; z-index: 2; }

.chamber {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 5rem);
    display: grid;
    isolation: isolate;
    border-bottom: 1px solid rgba(185, 192, 212, .14);
}

.chamber::after {
    content: "";
    position: absolute;
    inset: 1.1rem;
    border: 1px solid rgba(185, 192, 212, .16);
    clip-path: polygon(0 0, 100% 0, 100% 42%, 97% 42%, 97% 100%, 0 100%);
    pointer-events: none;
    z-index: -1;
}

.maze-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.maze-line {
    fill: none;
    stroke: var(--silver);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .5;
    filter: drop-shadow(0 0 7px rgba(185, 192, 212, .25));
}

.maze-line.gold { stroke: var(--gold); opacity: .75; }
.maze-line.faint { opacity: .22; stroke-dasharray: 7 14; }
.draw-line { stroke-dasharray: 1500; stroke-dashoffset: 1500; transition: stroke-dashoffset 1.6s ease-out; }
.chamber.in-view .draw-line { stroke-dashoffset: 0; }

.chapter {
    color: var(--gold);
    font-family: var(--label);
    text-transform: uppercase;
    letter-spacing: .26em;
    font-size: .75rem;
}

h1, h2 {
    margin: .35rem 0 0;
    font-family: var(--title);
    font-weight: 700;
    letter-spacing: .035em;
    text-shadow: 0 0 22px rgba(242, 184, 75, .15);
}

h1 { font-size: clamp(2.8rem, 9vw, 8.7rem); }
h2 { font-size: clamp(2rem, 5.8vw, 5rem); }

.gate {
    grid-template-rows: auto 1fr auto;
    align-items: center;
    background: radial-gradient(circle at center 70%, rgba(232, 216, 176, .06), transparent 25rem);
}

.curtain {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 19vw;
    background: repeating-linear-gradient(90deg, rgba(53, 32, 74, .94), rgba(53, 32, 74, .94) 24px, rgba(28, 15, 42, .95) 25px, rgba(28, 15, 42, .95) 46px);
    z-index: -1;
    filter: drop-shadow(0 0 24px rgba(8, 7, 18, .9));
}
.left-curtain { left: 0; transform: skewX(-5deg); }
.right-curtain { right: 0; transform: skewX(5deg); }

.gate-inscription { align-self: end; text-align: center; max-width: 1100px; margin: 0 auto; }
.engraved { font-size: clamp(1.25rem, 2.2vw, 2rem); margin: .75rem auto 0; max-width: 46rem; color: var(--silver); font-style: italic; }

.question-card {
    justify-self: center;
    width: min(38rem, 82vw);
    padding: 1.4rem 1.8rem;
    color: var(--ink);
    background: linear-gradient(140deg, var(--parchment), #cdb987);
    border: 2px solid rgba(242, 184, 75, .6);
    box-shadow: 0 18px 40px rgba(0,0,0,.38), inset 0 0 35px rgba(53, 32, 74, .15);
    transform: rotate(-1.2deg);
    position: relative;
    transition: transform .45s ease;
}
.question-card.stamped { transform: rotate(1deg) scale(1.03); }
.question-card p { font-size: 1.45rem; margin: 0 0 1rem; }
.seal {
    position: absolute;
    right: -1rem;
    top: -1rem;
    width: 3.8rem;
    height: 3.8rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--vermilion);
    color: var(--parchment);
    font-family: var(--title);
    box-shadow: 0 0 0 5px rgba(217, 75, 61, .25);
}

.ink-button, .verdict-dial button {
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--parchment);
    font-family: var(--label);
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: .8rem 1rem;
    cursor: pointer;
}

.door-pair {
    align-self: start;
    justify-self: center;
    display: flex;
    gap: clamp(1rem, 7vw, 7rem);
    perspective: 900px;
}

.quest-door {
    width: clamp(8rem, 20vw, 15rem);
    height: clamp(14rem, 34vw, 24rem);
    background: linear-gradient(100deg, #20122c, var(--bruise));
    color: var(--parchment);
    border: 2px solid rgba(185, 192, 212, .35);
    border-radius: 9rem 9rem .6rem .6rem;
    position: relative;
    font-family: var(--title);
    font-size: 3rem;
    box-shadow: inset -18px 0 22px rgba(8, 7, 18, .45), 0 0 35px rgba(78, 227, 193, .05);
    cursor: pointer;
    transition: transform .65s ease, box-shadow .65s ease;
}
.quest-door::before {
    content: attr(data-pronouns);
    position: absolute;
    top: 1.4rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--label);
    font-size: .72rem;
    letter-spacing: .16em;
    color: var(--silver);
    white-space: nowrap;
}
.quest-door i {
    position: absolute;
    right: 1.3rem;
    top: 52%;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 16px var(--gold);
}
.quest-door.open { transform: rotateY(-18deg); box-shadow: inset -18px 0 22px rgba(8, 7, 18, .45), 0 0 45px rgba(78, 227, 193, .22); }
.floor-prompt { justify-self: center; font-family: var(--mono); color: var(--teal); letter-spacing: .18em; }

.section-title { max-width: 48rem; z-index: 2; }
.diagonal-title { transform: rotate(-3deg); align-self: start; justify-self: end; margin-right: 7vw; }

.corridor { background: linear-gradient(155deg, rgba(8,7,18,.2), rgba(53,32,74,.48)); }
.lantern-path {
    align-self: center;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}
.dialogue-slip {
    grid-column: span 4;
    min-height: 12rem;
    background: rgba(232, 216, 176, .94);
    color: var(--ink);
    padding: 2.2rem 1.2rem 1rem;
    position: relative;
    transform: rotate(var(--tilt, -2deg));
    box-shadow: 0 20px 40px rgba(0,0,0,.35);
    transition: .4s ease;
}
.dialogue-slip:nth-child(2) { --tilt: 3deg; margin-top: 6rem; }
.dialogue-slip:nth-child(3) { --tilt: -4deg; margin-top: 2rem; }
.dialogue-slip:nth-child(4) { --tilt: 2deg; margin-top: 8rem; }
.dialogue-slip.tall { grid-column: span 3; }
.dialogue-slip.narrow { grid-column: span 2; }
.dialogue-slip:hover, .dialogue-slip.swapped { transform: rotate(1deg) translateY(-10px); filter: drop-shadow(0 0 18px rgba(78,227,193,.2)); }
.dialogue-slip p { font-size: clamp(1.25rem, 2vw, 1.8rem); margin: 0; }
.dialogue-slip b {
    position: absolute;
    right: .8rem;
    bottom: .7rem;
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--vermilion);
}
.thread { position: absolute; top: -8rem; left: 50%; height: 8rem; border-left: 1px solid rgba(185,192,212,.45); }
.chess-knight { position: absolute; left: 8vw; bottom: 7vh; font-size: clamp(5rem, 18vw, 15rem); color: rgba(242,184,75,.15); }

.mirror-room { place-items: center; background: radial-gradient(circle at 60% 35%, rgba(185,192,212,.12), transparent 28rem); }
.mirror-title { position: absolute; left: 7vw; top: 10vh; }
.mirror-pair { display: flex; gap: clamp(1rem, 7vw, 8rem); align-items: center; }
.mirror-bubble {
    width: min(34rem, 40vw);
    padding: 2rem;
    border: 1px solid rgba(185,192,212,.56);
    background: linear-gradient(145deg, rgba(232,216,176,.08), rgba(53,32,74,.6));
    box-shadow: inset 0 0 60px rgba(185,192,212,.08), 0 0 38px rgba(8,7,18,.7);
    transition: transform .9s ease;
}
.right-bubble { transform: scaleX(-1); }
.right-bubble > * { transform: scaleX(-1); }
.mirror-room.in-view .left-bubble { animation: driftLeft 5s ease-in-out infinite alternate; }
.mirror-room.in-view .right-bubble { animation: driftRight 5.7s ease-in-out infinite alternate; }
.mask-icon { color: var(--teal); font-family: var(--mono); font-size: 1.7rem; }
.mirror-bubble p { font-size: clamp(1.6rem, 3vw, 3rem); margin: 1rem 0; }
.mirror-bubble em { color: var(--silver); font-family: var(--label); font-size: .9rem; }
.mirror-shards div { position: absolute; border: 1px solid rgba(185,192,212,.32); background: rgba(185,192,212,.04); }
.shard-one { width: 14rem; height: 18rem; right: 14vw; top: 11vh; clip-path: polygon(30% 0, 100% 15%, 76% 100%, 0 70%); }
.shard-two { width: 11rem; height: 10rem; left: 20vw; bottom: 16vh; clip-path: polygon(0 0, 85% 20%, 100% 90%, 20% 100%); }
.shard-three { width: 7rem; height: 17rem; right: 42vw; bottom: 9vh; clip-path: polygon(50% 0, 100% 100%, 0 76%); }
.emblem { position: absolute; bottom: 8vh; display: flex; align-items: center; gap: 1rem; opacity: .82; }
.emblem span { width: 3.4rem; height: 4.2rem; border: 1px solid var(--silver); border-radius: 50% 50% 45% 45%; background: rgba(232,216,176,.07); }
.emblem svg { width: 10rem; height: 5rem; stroke: var(--gold); fill: none; stroke-width: 4; }

.witness { background: linear-gradient(90deg, rgba(53,32,74,.55), rgba(8,7,18,.82)); align-items: center; }
.witness-title { position: absolute; top: 8vh; right: 10vw; text-align: right; }
.witness-stage { width: min(76rem, 88vw); min-height: 34rem; margin: 9vh auto 0; position: relative; border: 2px solid rgba(185,192,212,.28); background: rgba(8,7,18,.58); box-shadow: 0 0 60px rgba(0,0,0,.55); }
.scrim { position: absolute; inset: 0 0 38%; background: linear-gradient(90deg, transparent, rgba(232,216,176,.1), transparent), repeating-linear-gradient(90deg, rgba(185,192,212,.08) 0 2px, transparent 2px 12px); }
.hidden-respondent { position: absolute; left: 50%; top: 20%; width: 8rem; height: 11rem; transform: translateX(-50%); border-radius: 50% 50% 46% 46%; background: rgba(78,227,193,.12); box-shadow: 0 0 45px rgba(78,227,193,.22); }
.railings { position: absolute; left: 0; right: 0; bottom: 32%; height: 5rem; background: repeating-linear-gradient(90deg, rgba(232,216,176,.3) 0 4px, transparent 4px 54px), linear-gradient(var(--parchment), var(--parchment)) center top/100% 2px no-repeat, linear-gradient(var(--parchment), var(--parchment)) center bottom/100% 2px no-repeat; opacity: .55; }
.oath-ribbon { position: absolute; left: -2rem; top: 5rem; background: var(--vermilion); color: var(--parchment); padding: .7rem 2rem; transform: rotate(-4deg); font-family: var(--label); letter-spacing: .08em; }
.question-stack { position: absolute; left: 2rem; bottom: 2rem; display: grid; gap: .7rem; width: min(28rem, 42vw); }
.evidence-card { text-align: left; background: var(--parchment); color: var(--ink); border: 0; padding: 1rem; font-family: var(--label); cursor: pointer; transform: rotate(-1deg); transition: .3s ease; }
.evidence-card.active { background: var(--gold); transform: rotate(1deg) translateX(1rem); }
.transcript { position: absolute; right: 2rem; bottom: 2.5rem; max-width: 34rem; font-family: var(--mono); color: var(--teal); font-size: clamp(1rem, 2vw, 1.45rem); border-left: 2px solid var(--teal); padding-left: 1rem; }
.transcript::after { content: "▌"; animation: blink 1.1s steps(2) infinite; }

.ledger { background: radial-gradient(circle at 30% 55%, rgba(242,184,75,.1), transparent 25rem); align-items: center; }
.ledger-title { transform: rotate(2deg); }
.ledger-sheet { width: min(58rem, 86vw); justify-self: end; background: var(--parchment); color: var(--ink); padding: 2rem; box-shadow: 0 22px 60px rgba(0,0,0,.44); transform: rotate(.7deg); }
.ledger-row { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed rgba(53,32,74,.38); padding: 1rem 0; font-family: var(--label); }
.ledger-row span { font-size: clamp(1rem, 2vw, 1.55rem); }
.crossed span { text-decoration: line-through var(--vermilion) 3px; }
.stamp { border: 2px solid currentColor; padding: .35rem .55rem; transform: rotate(-6deg); font-family: var(--mono); text-transform: uppercase; font-size: .75rem; align-self: center; }
.wrong { color: var(--vermilion); }
.maybe { color: var(--teal); }
.gold-stamp { color: #8a6018; }
.marginalia { margin-top: 1rem; font-family: var(--prose); color: var(--bruise); font-size: 1.3rem; font-style: italic; }
.quill-cursor { position: absolute; left: 17vw; bottom: 15vh; font-size: 4rem; color: var(--gold); }
.cursor-arrow { color: var(--teal); margin-left: -1rem; }

.unmasking { place-items: center; background: radial-gradient(circle, rgba(78,227,193,.1), transparent 31rem), linear-gradient(180deg, rgba(53,32,74,.3), rgba(8,7,18,1)); }
.final-title { text-align: center; }
.orbit { width: min(34rem, 78vw); aspect-ratio: 1; border: 1px dashed rgba(185,192,212,.38); border-radius: 50%; position: relative; display: grid; place-items: center; margin: 2rem 0; animation: slowTurn 28s linear infinite; }
.orbit-item { position: absolute; font-family: var(--mono); color: var(--gold); text-shadow: 0 0 14px rgba(242,184,75,.5); }
.mask-a { top: 0; left: 47%; }.key { right: 3%; top: 45%; }.feather { bottom: 5%; left: 45%; }.cursor { left: 2%; top: 46%; color: var(--teal); }.slip { left: 14%; top: 14%; color: var(--parchment); }
.final-voice { width: 62%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(8,7,18,.8); border: 1px solid rgba(78,227,193,.35); box-shadow: 0 0 55px rgba(78,227,193,.14); animation: counterTurn 28s linear infinite; }
.final-voice p { text-align: center; font-size: clamp(1.4rem, 3vw, 2.5rem); margin: 0; padding: 1rem; }
.verdict-dial { display: flex; align-items: center; gap: 1.2rem; }
.dial-face { width: 8rem; height: 8rem; border-radius: 50%; border: 2px solid var(--silver); display: grid; place-items: center; color: var(--teal); font-family: var(--title); background: rgba(53,32,74,.55); transition: transform .55s cubic-bezier(.2,.8,.2,1); }

@keyframes blink { 50% { opacity: 0; } }
@keyframes firefly { from { transform: translateY(8vh) scale(.6); } to { transform: translateY(-18vh) scale(1.2); } }
@keyframes driftLeft { to { transform: translate(-16px, 10px) rotate(-1.5deg); } }
@keyframes driftRight { to { transform: scaleX(-1) translate(-20px, -12px) rotate(1.4deg); } }
@keyframes slowTurn { to { transform: rotate(360deg); } }
@keyframes counterTurn { to { transform: rotate(-360deg); } }

@media (max-width: 820px) {
    .quest-rail { display: none; }
    .door-pair, .mirror-pair { flex-direction: column; }
    .mirror-bubble { width: 84vw; }
    .lantern-path { display: block; }
    .dialogue-slip, .dialogue-slip.tall, .dialogue-slip.narrow { margin: 1.2rem auto; width: 82vw; }
    .witness-title, .mirror-title { position: relative; top: auto; right: auto; left: auto; text-align: left; }
    .question-stack, .transcript { position: relative; width: auto; left: auto; right: auto; bottom: auto; margin: 1rem; }
    .witness-stage { padding-top: 20rem; }
}