:root {
    /* typography compliance tokens: JP* JP** labels fragments */
    --paper: #F3EBDD;
    --ink: #17130F;
    --seal: #8A1F17;
    --garden: #5A6F63;
    --tatami: #B7A37A;
    --indigo: #27384C;
    --screen: #D7CFC0;
    --serif: "Noto Serif JP", serif;
    --sans: "IBM Plex Sans JP", sans-serif;
    --mono: "JetBrains Mono", monospace;
    --mincho: "Shippori Mincho", serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    overflow-x: hidden;
    cursor: none;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background:
        linear-gradient(90deg, rgba(183, 163, 122, .13) 1px, transparent 1px) 0 0 / 13.6vw 100%,
        linear-gradient(0deg, rgba(183, 163, 122, .11) 1px, transparent 1px) 0 0 / 100% 22vh;
    mix-blend-mode: multiply;
}

.grain {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    opacity: .34;
    background:
        radial-gradient(circle at 12% 21%, rgba(23, 19, 15, .055) 0 1px, transparent 2px),
        radial-gradient(circle at 62% 78%, rgba(90, 111, 99, .07) 0 1px, transparent 2px),
        radial-gradient(circle at 82% 18%, rgba(183, 163, 122, .09) 0 1px, transparent 2px),
        repeating-linear-gradient(108deg, rgba(23, 19, 15, .025) 0 1px, transparent 1px 9px);
    background-size: 120px 120px, 160px 160px, 180px 180px, auto;
}

.ink-cursor {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    position: fixed;
    left: -50px;
    top: -50px;
    z-index: 101;
    pointer-events: none;
    background: radial-gradient(circle, rgba(23, 19, 15, .17), rgba(39, 56, 76, .08) 45%, transparent 68%);
    transform: translate3d(-50%, -50%, 0);
    filter: blur(3px);
}

.room-index {
    position: fixed;
    z-index: 80;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: 12px;
}

.room-index a {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--serif);
    font-size: 13px;
    border: 1px solid rgba(23, 19, 15, .18);
    background: rgba(243, 235, 221, .48);
    transition: transform .6s ease, background .6s ease, color .6s ease;
}

.room-index a.active {
    background: var(--seal);
    color: var(--paper);
    transform: rotate(5deg);
}

.scene {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(34px, 6vw, 86px);
}

.kicker, .code-note, code, pre {
    font-family: var(--mono);
}

.kicker {
    color: var(--seal);
    letter-spacing: .24em;
    text-transform: uppercase;
    font-size: 12px;
}

h1, h2 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 500;
    letter-spacing: -.035em;
}

p {
    line-height: 1.85;
    font-weight: 300;
}

.paper-gate {
    background:
        radial-gradient(circle at 73% 44%, rgba(39, 56, 76, .18), transparent 17%),
        linear-gradient(115deg, var(--paper), #eadfce 58%, var(--screen));
}

.shoji-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 51vw;
    z-index: 3;
    background:
        linear-gradient(90deg, rgba(183, 163, 122, .22) 1px, transparent 1px) 0 0 / 12vw 100%,
        linear-gradient(0deg, rgba(183, 163, 122, .2) 1px, transparent 1px) 0 0 / 100% 24vh,
        rgba(215, 207, 192, .72);
    box-shadow: inset 0 0 65px rgba(23, 19, 15, .06);
    transition: transform 1.4s cubic-bezier(.22, .72, .12, 1);
}

.panel-left { left: 0; transform: translateX(-8vw); }
.panel-right { right: 0; transform: translateX(8vw); }
.paper-gate.in-view .panel-left { transform: translateX(-35vw); }
.paper-gate.in-view .panel-right { transform: translateX(36vw); }

.moon-seam {
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    left: 58%;
    width: 2px;
    background: var(--indigo);
    box-shadow: 0 0 32px 8px rgba(39, 56, 76, .32);
    transform: scaleY(.24);
    transform-origin: center;
    transition: transform 1.8s ease, width 1.8s ease;
}

.paper-gate.in-view .moon-seam {
    transform: scaleY(.86);
    width: 9px;
}

.vertical-seal {
    position: absolute;
    z-index: 5;
    top: 14vh;
    left: 13vw;
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    gap: 18px;
    font-family: var(--serif);
    padding: 24px 12px;
    background: rgba(243, 235, 221, .78);
    border: 1px solid rgba(23, 19, 15, .16);
    box-shadow: 12px 18px 45px rgba(23, 19, 15, .08);
}

.vertical-seal span { font-size: clamp(18px, 2vw, 28px); letter-spacing: .12em; }
.vertical-seal i { color: var(--seal); font-style: normal; border: 2px solid var(--seal); padding: 8px 4px; }

.gate-note {
    position: absolute;
    z-index: 4;
    right: 13vw;
    bottom: 18vh;
    font-size: 12px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 1.2s .8s ease, transform 1.2s .8s ease;
}
.paper-gate.in-view .gate-note { opacity: .72; transform: translateY(0); }

.registration-cross { position: absolute; width: 44px; height: 44px; opacity: .36; }
.registration-cross::before, .registration-cross::after { content: ""; position: absolute; background: var(--ink); }
.registration-cross::before { left: 50%; top: 0; width: 1px; height: 100%; }
.registration-cross::after { top: 50%; left: 0; height: 1px; width: 100%; }
.cross-a { right: 18vw; top: 19vh; }
.chapter-glyph { position: absolute; right: 8vw; bottom: -6vh; font-family: var(--mincho); font-size: 29vw; color: rgba(39, 56, 76, .055); }

.borrowed-desk {
    background: linear-gradient(180deg, var(--paper) 0%, #eee4d4 64%, var(--screen) 100%);
}

.room-title {
    position: absolute;
    top: 12vh;
    left: 9vw;
    max-width: 560px;
}
.room-title h1 { font-size: clamp(42px, 7vw, 108px); line-height: .92; max-width: 820px; }

.desk-surface {
    position: absolute;
    left: 0;
    right: 8vw;
    bottom: 13vh;
    height: 31vh;
    background: linear-gradient(180deg, rgba(23, 19, 15, .92), #17130F);
    border-top: 7px solid var(--tatami);
    box-shadow: 0 -20px 60px rgba(39, 56, 76, .11);
}

.paper-slip {
    position: absolute;
    width: min(320px, 28vw);
    min-height: 180px;
    padding: 24px;
    background: rgba(243, 235, 221, .92);
    border: 1px solid rgba(183, 163, 122, .45);
    box-shadow: 10px 20px 30px rgba(23, 19, 15, .2);
    transform: translateY(18px) rotate(var(--r, -1deg));
    opacity: 0;
    transition: transform 1.1s cubic-bezier(.2, .8, .2, 1), opacity 1.1s ease;
}
.borrowed-desk.in-view .paper-slip { opacity: 1; transform: translateY(0) rotate(var(--r, -1deg)); }
.paper-slip strong { display: block; font-family: var(--serif); font-size: 21px; margin-bottom: 8px; }
.paper-slip p { margin: 0 0 14px; font-size: 14px; }
.paper-slip code { color: var(--indigo); font-size: 12px; }
.slip-one { left: 18vw; bottom: 14vh; --r: -2deg; transition-delay: .1s; }
.slip-two { left: 43vw; bottom: 20vh; --r: 3deg; transition-delay: .28s; }
.slip-three { right: 9vw; bottom: 10vh; --r: -4deg; transition-delay: .44s; }
.folded::after { content: ""; position: absolute; right: -1px; top: -1px; border-style: solid; border-width: 0 48px 48px 0; border-color: transparent var(--screen) transparent transparent; }
.slip-pin { position: absolute; top: 10px; right: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--seal); }

.ink-pool { position: absolute; width: 160px; height: 54px; left: 6vw; bottom: 8vh; background: radial-gradient(ellipse, rgba(23, 19, 15, .92), rgba(39, 56, 76, .48) 52%, transparent 72%); filter: blur(2px); }
.tool-silhouette { position: absolute; opacity: .32; }
.shears { right: 34vw; bottom: 4vh; width: 100px; height: 34px; border-top: 3px solid var(--screen); transform: rotate(-18deg); }
.shears::before, .shears::after { content:""; position:absolute; width:34px; height:34px; border:3px solid var(--screen); border-radius:50%; top:-17px; }
.shears::before { left:-20px; } .shears::after { left:12px; }
.brush { left: 8vw; bottom: 16vh; width: 170px; height: 8px; background: var(--tatami); transform: rotate(7deg); }
.brush::after { content:""; position:absolute; right:-24px; top:-10px; width:34px; height:28px; background: var(--ink); border-radius: 60% 20% 50% 50%; }

.rinji-stamp {
    position: absolute;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    background: var(--seal);
    color: var(--paper);
    font-family: var(--serif);
    font-weight: 700;
    border: 3px double rgba(243, 235, 221, .82);
    box-shadow: 0 8px 18px rgba(138, 31, 23, .23);
}
.stamp-desk { right: 8vw; top: 18vh; transform: rotate(9deg); }
.stamp-garden { left: 13vw; bottom: 17vh; transform: rotate(-12deg); }
.stamp-lantern { right: 17vw; bottom: 18vh; transform: rotate(5deg); }
.stamp-alcove { left: 50%; top: 49%; transform: translate(-50%, -50%) rotate(-4deg); width: 78px; height: 78px; }

.branch-garden {
    background:
        radial-gradient(circle at 68% 28%, rgba(90, 111, 99, .16), transparent 24%),
        linear-gradient(100deg, #efe5d4, var(--paper));
}
.garden-copy { position: absolute; left: 8vw; top: 12vh; max-width: 380px; z-index: 2; }
.garden-copy h2, .lantern-room-title h2, .alcove-content h2 { font-size: clamp(46px, 6vw, 92px); line-height: .92; }
.garden-copy p { font-size: 16px; }
.branch-diagram { position: absolute; inset: 7vh 5vw 5vh 22vw; width: 72vw; height: 86vh; }
.stem { fill: none; stroke: var(--garden); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; filter: drop-shadow(0 8px 5px rgba(90,111,99,.1)); transition: stroke-dashoffset 2s cubic-bezier(.3,.7,.2,1); }
.branch-garden.in-view .stem { stroke-dashoffset: 0; }
.branch-one { transition-delay: .3s; } .branch-two { transition-delay: .55s; } .branch-three { transition-delay: .75s; } .branch-four { stroke: var(--tatami); transition-delay: .95s; }
.commit-marks circle { fill: var(--paper); stroke: var(--seal); stroke-width: 3; opacity: 0; transition: opacity .8s 1.2s ease; }
.branch-garden.in-view .commit-marks circle { opacity: 1; }
.cut-mark { fill: none; stroke: var(--seal); stroke-width: 4; stroke-linecap: round; opacity: 0; transition: opacity .8s 1.7s ease; }
.branch-garden.in-view .cut-mark { opacity: 1; }
.branch-label { position: absolute; padding: 10px 14px; background: rgba(215, 207, 192, .62); border-left: 2px solid var(--garden); font-size: 12px; }
.label-a { right: 19vw; top: 28vh; } .label-b { right: 10vw; bottom: 32vh; } .label-c { left: 24vw; bottom: 17vh; border-left-color: var(--seal); }

.exception-lantern {
    color: var(--paper);
    background:
        radial-gradient(circle at 44% 45%, rgba(138, 31, 23, .16), transparent 28%),
        radial-gradient(circle at 72% 33%, rgba(215, 207, 192, .12), transparent 20%),
        linear-gradient(160deg, var(--ink), #211b16 55%, var(--indigo));
}
.exception-lantern::before { content:""; position:absolute; inset: 8vh 9vw; border: 1px solid rgba(215,207,192,.18); background: linear-gradient(90deg, transparent 49.8%, rgba(215,207,192,.12) 50%, transparent 50.2%); }
.lantern-room-title { position: absolute; left: 10vw; top: 12vh; z-index: 2; max-width: 520px; }
.lantern-field { position: absolute; inset: 0; }
.lantern {
    position: absolute;
    width: 230px;
    height: 315px;
    border-radius: 48% / 18%;
    background: radial-gradient(circle at 50% 42%, rgba(243, 235, 221, .9), rgba(183, 163, 122, .62) 47%, rgba(138,31,23,.2) 72%, transparent 75%);
    box-shadow: 0 0 54px rgba(183, 163, 122, .34), inset 0 0 35px rgba(138, 31, 23, .2);
    animation: lanternBreath 4.8s ease-in-out infinite;
}
.lantern-one { left: 45vw; top: 20vh; }
.lantern-two { right: 14vw; bottom: 14vh; width: 190px; height: 260px; animation-delay: -1.4s; }
.lantern::before, .lantern::after { content:""; position:absolute; left: 50%; transform: translateX(-50%); width: 48%; height: 10px; background: var(--ink); border: 1px solid rgba(215,207,192,.35); }
.lantern::before { top: -5px; } .lantern::after { bottom: -5px; }
.lantern-ribs { position:absolute; inset: 18px 22px; border-left: 1px solid rgba(23,19,15,.22); border-right: 1px solid rgba(23,19,15,.22); background: repeating-linear-gradient(0deg, transparent 0 38px, rgba(23,19,15,.16) 39px 41px); border-radius: 50%; }
.lantern pre { position:absolute; inset: 72px 28px auto; margin:0; color: rgba(23,19,15,.76); font-size: 12px; line-height: 1.75; white-space: pre-wrap; }
.lacquer-reflection { position:absolute; left: 20vw; bottom: 16vh; width: 48vw; height: 80px; display:grid; place-items:center; color: rgba(215,207,192,.48); background: radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%); transform: skewX(-14deg); }
@keyframes lanternBreath { 0%,100% { filter: brightness(.92); transform: translateY(0); } 50% { filter: brightness(1.16); transform: translateY(-9px); } }

.dismantling-alcove {
    min-height: 100vh;
    background: linear-gradient(90deg, var(--screen), var(--paper) 44%, #eadfce 100%);
}
.fold { position:absolute; top:0; bottom:0; width: 42vw; background: rgba(215,207,192,.72); box-shadow: inset 0 0 70px rgba(23,19,15,.08); transition: transform 1.4s cubic-bezier(.22,.72,.12,1); }
.fold-left { left:0; transform-origin:left center; } .fold-right { right:0; transform-origin:right center; }
.dismantling-alcove.in-view .fold-left { transform: perspective(900px) rotateY(18deg) translateX(-8vw); }
.dismantling-alcove.in-view .fold-right { transform: perspective(900px) rotateY(-18deg) translateX(8vw); }
.alcove-content { position:absolute; top: 15vh; left: 12vw; z-index:2; max-width: 620px; }
.alcove-content p { max-width: 430px; }
.inspect-link { display:inline-block; margin-top: 28px; color: var(--seal); text-decoration:none; font-family: var(--mono); border-bottom: 1px solid var(--seal); padding-bottom: 6px; }
.coordinates { position:absolute; right: 12vw; bottom: 13vh; display:grid; gap: 10px; font-size: 12px; color: rgba(23,19,15,.62); }

@media (max-width: 760px) {
    body { cursor: auto; }
    .ink-cursor { display: none; }
    .room-index { right: 10px; }
    .scene { padding: 28px; }
    .vertical-seal { left: 8vw; }
    .desk-surface { right: 0; height: 52vh; }
    .paper-slip { width: 74vw; min-height: 140px; }
    .slip-one { left: 8vw; bottom: 35vh; }
    .slip-two { left: 16vw; bottom: 20vh; }
    .slip-three { right: 8vw; bottom: 5vh; }
    .branch-diagram { inset: 30vh 0 4vh 0; width: 100vw; height: 66vh; }
    .branch-label { display: none; }
    .lantern-one { left: 18vw; top: 34vh; }
    .lantern-two { right: 8vw; bottom: 7vh; }
    .lacquer-reflection { left: 7vw; width: 82vw; }
}