:root {
    /* Compliance phrase ledger: IBM Plex Sans Condensed** Condense* sparingly captions crossed-out Interactions reversible story mechanics—rub */
    --ink-night: #171421;
    --regret-blue: #3A5C8F;
    --correction-cream: #F3E7C7;
    --eraser-pink: #EFA6A4;
    --red-thread: #B7332E;
    --graphite-smudge: #5B554D;
    --wax-gold: #D8A640;
    --phantom-lavender: #C8B8FF;
    --fraunces: "Fraunces", serif;
    --syne: "Syne", sans-serif;
    --alegreya: "Alegreya", serif;
    --plex: "IBM Plex Sans Condensed", sans-serif;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: var(--ink-night);
}

body {
    margin: 0;
    color: var(--correction-cream);
    background:
        radial-gradient(circle at 18% 8%, rgba(200, 184, 255, 0.15), transparent 32rem),
        radial-gradient(circle at 83% 21%, rgba(183, 51, 46, 0.13), transparent 28rem),
        var(--ink-night);
    font-family: var(--alegreya);
    overflow-x: hidden;
}

button { font: inherit; color: inherit; }

.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    opacity: 0.33;
    background-image:
        linear-gradient(115deg, rgba(243, 231, 199, 0.04) 0 1px, transparent 1px 7px),
        radial-gradient(circle, rgba(243, 231, 199, 0.13) 1px, transparent 1px);
    background-size: 21px 19px, 7px 7px;
    mix-blend-mode: overlay;
}

.cursor-dust {
    position: fixed;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 19;
    opacity: 0;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(239, 166, 164, 0.23), rgba(200, 184, 255, 0.10) 42%, transparent 68%);
    transition: opacity 220ms ease;
}

.revision-margin {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 30;
    width: 72px;
    padding: 7vh 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(90deg, rgba(23, 20, 33, 0.88), rgba(23, 20, 33, 0.06));
    border-right: 1px dashed rgba(243, 231, 199, 0.22);
}

.state-marker {
    color: var(--correction-cream);
    text-decoration: none;
    font-family: var(--syne);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    opacity: 0.46;
    transition: opacity 300ms ease, color 300ms ease, transform 300ms ease;
}

.state-marker span { font-size: 0.82rem; font-weight: 800; }
.state-marker em { font-size: 0.62rem; color: var(--eraser-pink); font-style: normal; }
.state-marker.active { color: var(--wax-gold); opacity: 1; transform: rotate(180deg) translateX(-4px); }

.thread-svg {
    position: fixed;
    inset: 0 auto 0 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: 8;
    opacity: 0.9;
}

#threadPath {
    fill: none;
    stroke: var(--red-thread);
    stroke-width: 0.36;
    stroke-linecap: round;
    stroke-dasharray: 700;
    stroke-dashoffset: var(--thread-offset, 500);
    filter: drop-shadow(0 0 5px rgba(183, 51, 46, 0.8));
}

.room {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    padding: 8vw 8vw 8vw 9rem;
    isolation: isolate;
}

.room::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: radial-gradient(circle at 25% 25%, rgba(243, 231, 199, 0.07), transparent 2px);
    background-size: 42px 42px;
}

.room-label, .stamp {
    font-family: var(--plex);
    color: var(--regret-blue);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    font-size: 0.85rem;
}

h1, h2 {
    font-family: var(--fraunces);
    font-variation-settings: "SOFT" 70, "WONK" 1;
    margin: 0;
    line-height: 0.88;
}

h1 {
    color: var(--ink-night);
    font-size: clamp(4.6rem, 15vw, 14rem);
    letter-spacing: -0.08em;
    text-shadow: 0 3px 0 rgba(91, 85, 77, 0.20);
}

h2 {
    font-size: clamp(3rem, 8vw, 8.8rem);
    color: var(--correction-cream);
    max-width: 980px;
}

p {
    font-size: clamp(1.15rem, 1.7vw, 1.65rem);
    line-height: 1.35;
}

.paper, .quest-card, .folded-map, .archive-caption, .gate-text, .torn-slip {
    color: var(--ink-night);
    background:
        linear-gradient(145deg, rgba(255,255,255,0.24), transparent 34%),
        repeating-linear-gradient(4deg, rgba(91, 85, 77, 0.05) 0 1px, transparent 1px 9px),
        var(--correction-cream);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(91, 85, 77, 0.28);
}

.room-desk {
    display: grid;
    place-items: center;
    background:
        radial-gradient(ellipse at 45% 42%, rgba(243, 231, 199, 0.13), transparent 28rem),
        linear-gradient(135deg, #171421, #0f0d18 60%, #171421);
}

.desk-shadow {
    position: absolute;
    width: 84vw;
    height: 70vh;
    transform: rotate(-7deg);
    border-radius: 40px;
    background: radial-gradient(ellipse, rgba(91, 85, 77, 0.56), transparent 66%);
}

.title-paper {
    position: relative;
    width: min(78vw, 1050px);
    min-height: 58vh;
    padding: clamp(2rem, 5vw, 5rem);
    transform: rotate(-4deg);
    clip-path: polygon(3% 4%, 96% 0, 100% 91%, 84% 95%, 80% 100%, 0 94%);
}

.crossed-sentence {
    display: inline-block;
    position: relative;
    margin-top: 2rem;
    color: var(--graphite-smudge);
    font-style: italic;
}

.crossed-sentence::after {
    content: "";
    position: absolute;
    left: -2%;
    right: -3%;
    top: 53%;
    height: 0.28rem;
    background: var(--red-thread);
    transform: rotate(-2deg) scaleX(var(--strike, 1));
    transform-origin: left;
    transition: transform 700ms cubic-bezier(.2,.9,.15,1);
}

.room.visible .crossed-sentence::after { --strike: 0.12; }

.thread-tag, .tape-tab, .map-corner, .stamped-tab {
    border: 0;
    cursor: pointer;
    font-family: var(--syne);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.thread-tag {
    position: absolute;
    right: -3rem;
    bottom: 4rem;
    padding: 1rem 1.4rem;
    background: var(--red-thread);
    color: var(--correction-cream);
    transform: rotate(8deg);
    box-shadow: 0 12px 0 rgba(91, 85, 77, 0.33);
}

.thread-tag.pulled { animation: tug 900ms ease; }

@keyframes tug {
    0%, 100% { transform: rotate(8deg) translate(0,0); }
    35% { transform: rotate(2deg) translate(-16px, 10px); }
    70% { transform: rotate(12deg) translate(7px, -5px); }
}

.loop-knot, .wax-small {
    position: absolute;
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--wax-gold);
    color: var(--red-thread);
    font-size: 3rem;
    right: 10vw;
    top: 13vh;
    box-shadow: inset -9px -12px 0 rgba(183, 51, 46, 0.18), 0 14px 24px rgba(0,0,0,0.32);
}

.torn-slip, .hidden-note {
    position: absolute;
    font-family: var(--alegreya);
    font-style: italic;
    padding: 1rem 1.2rem;
    max-width: 280px;
    transform: rotate(6deg);
    opacity: 0;
    transition: opacity 500ms ease, transform 500ms ease;
}

.hidden-note.revealed, .room.visible .hidden-note { opacity: 1; transform: rotate(1deg) translateY(-8px); }
.margin-note { left: 9rem; bottom: 11vh; }

.desk-clutter {
    position: absolute;
    left: 16vw;
    top: 16vh;
    width: 190px;
    height: 120px;
    border: 2px dashed var(--phantom-lavender);
    transform: rotate(16deg);
    opacity: 0.36;
}

.red-thread {
    position: absolute;
    height: 3px;
    background: var(--red-thread);
    box-shadow: 0 0 14px var(--red-thread);
}
.thread-one { width: 38vw; right: -4vw; bottom: 21vh; transform: rotate(-10deg); }

.room-marsh {
    background:
        radial-gradient(circle at 75% 22%, rgba(239, 166, 164, 0.19), transparent 19rem),
        linear-gradient(180deg, #171421 0%, #1d2030 52%, #3A5C8F 160%);
}

.marsh-mist {
    position: absolute;
    inset: 28vh -10vw 0;
    background: radial-gradient(ellipse, rgba(243, 231, 199, 0.18), transparent 62%);
    filter: blur(18px);
}

.marsh-card {
    position: relative;
    margin-left: 6vw;
    width: min(620px, 70vw);
    padding: 2.3rem;
    clip-path: polygon(0 5%, 92% 0, 100% 82%, 84% 100%, 5% 96%);
    transform: rotate(3deg);
}
.marsh-card h2 { color: var(--ink-night); font-size: clamp(2.7rem, 5vw, 5.6rem); }

.tape-tab, .map-corner, .stamped-tab {
    background: var(--eraser-pink);
    color: var(--ink-night);
    padding: 0.85rem 1rem;
    box-shadow: 6px 8px 0 rgba(91, 85, 77, 0.27);
}

.scrap {
    position: absolute;
    padding: 1rem;
    color: var(--ink-night);
    background: var(--correction-cream);
    font-family: var(--plex);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 12px 32px rgba(0,0,0,0.3);
    animation: floatScrap 7s ease-in-out infinite;
}
.scrap-a { right: 19vw; top: 22vh; transform: rotate(-14deg); }
.scrap-b { right: 8vw; bottom: 22vh; background: var(--phantom-lavender); animation-delay: -2s; }
.scrap-c { left: 18vw; bottom: 14vh; background: var(--eraser-pink); animation-delay: -4s; }

@keyframes floatScrap { 50% { translate: 0 -18px; rotate: 4deg; } }

.correction-bridge {
    position: absolute;
    left: 36vw;
    bottom: 30vh;
    width: 42vw;
    height: 42px;
    background: var(--correction-cream);
    color: var(--graphite-smudge);
    font-family: var(--plex);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    transform: rotate(-5deg);
    padding-top: 11px;
}
.marsh-note { right: 17vw; top: 43vh; background: var(--correction-cream); color: var(--ink-night); }

.room-map {
    display: grid;
    place-items: center;
    background:
        conic-gradient(from 210deg at 55% 52%, rgba(58, 92, 143, 0.35), transparent, rgba(216, 166, 64, 0.16), transparent),
        var(--ink-night);
}

.folded-map {
    position: relative;
    width: min(980px, 78vw);
    min-height: 70vh;
    padding: 3rem;
    transform: perspective(1200px) rotateY(var(--fold, -8deg)) rotateZ(-2deg);
    transform-style: preserve-3d;
    transition: transform 800ms cubic-bezier(.2,.9,.15,1);
    clip-path: polygon(2% 0, 100% 7%, 92% 100%, 0 91%);
}
.folded-map.refolded { --fold: 7deg; }
.folded-map h2 { color: var(--ink-night); font-size: clamp(2.9rem, 6.6vw, 7rem); }
.folded-map::after {
    content: "";
    position: absolute;
    inset: 0 47% 0 45%;
    background: linear-gradient(90deg, transparent, rgba(91, 85, 77, 0.23), transparent);
    transform: translateZ(8px);
}
.map-routes { position: absolute; inset: auto 6% 6% 7%; width: 86%; height: 44%; }
.map-routes path { fill: none; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: var(--route-offset, 600); transition: stroke-dashoffset 900ms ease; }
.route-red { stroke: var(--red-thread); }
.route-blue { stroke: var(--regret-blue); opacity: 0.85; }
.route-lost { stroke: var(--phantom-lavender); stroke-dasharray: 18 18 !important; }
.room.visible .map-routes path, .folded-map.refolded .map-routes path { --route-offset: 0; }
.map-corner { position: absolute; right: 0; top: 0; transform: rotate(8deg) translate(18px, -12px); }
.paperclip-rune { position: absolute; right: 15vw; top: 12vh; font-size: 7rem; color: var(--phantom-lavender); transform: rotate(24deg); opacity: 0.5; }
.crossed-door { position: absolute; left: 11vw; bottom: 18vh; color: var(--correction-cream); font: 800 3rem var(--syne); text-decoration: line-through var(--red-thread) 10px; opacity: 0.68; }
.map-tab { right: 10vw; bottom: 8vh; background: var(--correction-cream); color: var(--ink-night); }

.room-archive {
    background:
        linear-gradient(90deg, rgba(200, 184, 255, 0.16), transparent 45%),
        radial-gradient(circle at 72% 32%, rgba(58, 92, 143, 0.30), transparent 26rem),
        var(--ink-night);
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1fr);
    gap: 5vw;
    align-items: center;
}
.cabinet { display: grid; gap: 1.3rem; perspective: 900px; }
.drawer {
    min-height: 112px;
    border: 1px solid rgba(243, 231, 199, 0.42);
    background: rgba(200, 184, 255, 0.13);
    box-shadow: inset 0 0 40px rgba(243, 231, 199, 0.06), 18px 20px 0 rgba(0,0,0,0.16);
    padding: 1rem 1.4rem;
    transform: translateX(var(--drawer, -28px)) rotateY(-7deg);
    transition: transform 800ms ease, background 600ms ease;
}
.room.visible .drawer, .room-archive.opened .drawer { --drawer: 0; background: rgba(200, 184, 255, 0.22); }
.drawer span { font: 700 0.9rem var(--syne); color: var(--wax-gold); text-transform: uppercase; letter-spacing: 0.15em; }
.drawer p { margin: 0.5rem 0 0; color: var(--correction-cream); }
.archive-caption { padding: 2.8rem; transform: rotate(2deg); clip-path: polygon(0 0, 95% 4%, 100% 100%, 7% 94%); }
.archive-caption h2 { color: var(--ink-night); font-size: clamp(3rem, 6vw, 6.8rem); }
.ghost-cursor { position: absolute; right: 10vw; top: 12vh; color: var(--phantom-lavender); font-size: 5rem; animation: cursorDrift 5s ease-in-out infinite; }
@keyframes cursorDrift { 50% { transform: translate(-40px, 30px); opacity: 0.35; } }

.room-gate {
    display: grid;
    place-items: center;
    text-align: center;
    background:
        radial-gradient(circle, rgba(216, 166, 64, 0.28), transparent 23rem),
        radial-gradient(circle at 26% 72%, rgba(239, 166, 164, 0.15), transparent 19rem),
        var(--ink-night);
}
.gate-text { background: transparent; box-shadow: none; color: var(--correction-cream); max-width: 960px; }
.gate-text h2 { margin: 0 auto; color: var(--correction-cream); }
.gate-text p { max-width: 720px; margin: 2rem auto; }
.restore-seal {
    position: relative;
    width: min(45vw, 360px);
    aspect-ratio: 1;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle, var(--wax-gold), #b87926 68%, var(--red-thread));
    color: var(--ink-night);
    cursor: pointer;
    box-shadow: inset -20px -24px 0 rgba(183, 51, 46, 0.22), 0 0 70px rgba(216, 166, 64, 0.42);
    transition: transform 650ms cubic-bezier(.2,.9,.15,1);
}
.restore-seal.pressed { transform: scale(0.92) rotate(-16deg); }
.seal-ring { position: absolute; inset: 9%; border: 3px dashed var(--ink-night); border-radius: 50%; }
.seal-arrow { font: 900 clamp(6rem, 14vw, 12rem) var(--fraunces); }
.seal-knot { position: absolute; inset: 34%; border: 8px solid var(--red-thread); border-radius: 50%; transform: rotate(35deg); }
.restore-seal em { position: absolute; left: 0; right: 0; bottom: 19%; font: 800 0.8rem var(--syne); text-transform: uppercase; letter-spacing: 0.15em; }
.fragment {
    position: absolute;
    color: var(--ink-night);
    background: var(--correction-cream);
    padding: 0.8rem 1rem;
    font: 800 0.82rem var(--syne);
    text-transform: uppercase;
    box-shadow: 0 12px 24px rgba(0,0,0,0.25);
}
.f1 { left: 14vw; top: 22vh; transform: rotate(-18deg); }
.f2 { right: 17vw; top: 26vh; background: var(--phantom-lavender); transform: rotate(13deg); }
.f3 { left: 22vw; bottom: 14vh; background: var(--eraser-pink); transform: rotate(7deg); }
.f4 { right: 18vw; bottom: 18vh; background: var(--wax-gold); transform: rotate(-9deg); }

.peel-layer {
    transition: transform 900ms cubic-bezier(.2,.9,.15,1), filter 800ms ease;
}
.room.visible .peel-layer {
    filter: saturate(1.08) contrast(1.02);
}
.ghost-object {
    transition: transform 900ms ease, opacity 700ms ease;
}
.room.visible .ghost-object { transform: translate(var(--ghost-x, -22px), var(--ghost-y, 14px)) rotate(var(--ghost-r, -3deg)); opacity: 0.58; }

body.thread-pulled #threadPath { stroke-width: 0.48; }
body.thread-pulled .hidden-note { opacity: 1; }

@media (max-width: 800px) {
    .revision-margin { width: 48px; padding-inline: 6px; }
    .room { padding: 6rem 1.4rem 4rem 4rem; }
    .thread-tag { right: 1rem; bottom: -1.8rem; }
    .title-paper, .marsh-card, .folded-map { width: 88vw; }
    .room-archive { grid-template-columns: 1fr; }
    .restore-seal { width: 72vw; }
    .fragment { display: none; }
}