:root {
    /* IBM Plex Sans KR** for compact Korean-informed labels; Interaction is framed as scientific inspection—resin magnifiers. */
    --heartwood: #12100B;
    --bark: #5C3A24;
    --cambium: #6F8F4E;
    --sap: #F2E8C9;
    --lichen: #8FB7B3;
    --spore: #C79B39;
    --mycelium: #4A3557;
    --serif: "Instrument Serif", serif;
    --kr: "IBM Plex Sans KR", sans-serif;
    --field: "Alegreya Sans", sans-serif;
    --hand: "Nanum Pen Script", cursive;
}

* { box-sizing: border-box; }

html,
body {
    margin: 0;
    min-height: 100%;
    overflow: hidden;
    background: var(--heartwood);
    color: var(--sap);
    font-family: var(--field);
}

button { font: inherit; color: inherit; }

.tree-kernel {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: radial-gradient(circle at 24% 48%, rgba(92, 58, 36, .36), transparent 38%), var(--heartwood);
}

.grain-field,
.grain-field::before,
.grain-field::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.grain-field {
    z-index: 30;
    opacity: .23;
    mix-blend-mode: screen;
    background-image: repeating-linear-gradient(98deg, transparent 0 13px, rgba(242, 232, 201, .05) 14px 15px), repeating-radial-gradient(ellipse at 18% 45%, rgba(199, 155, 57, .12) 0 1px, transparent 2px 18px);
}

.grain-field::before {
    content: "";
    background: radial-gradient(circle at 66% 22%, rgba(143, 183, 179, .08), transparent 28%), radial-gradient(circle at 42% 81%, rgba(74, 53, 87, .23), transparent 42%);
}

.chamber {
    position: absolute;
    inset: 0;
    min-height: 100vh;
    opacity: 0;
    transform: scale(1.03);
    pointer-events: none;
    transition: opacity 900ms ease, transform 1200ms cubic-bezier(.2,.8,.2,1);
    overflow: hidden;
}

.chamber.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.ring-index {
    position: fixed;
    right: 36px;
    top: 32px;
    z-index: 50;
    width: 128px;
    height: 128px;
    border: 1px solid rgba(242, 232, 201, .22);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(92, 58, 36, .42), rgba(18, 16, 11, .72));
    transition: transform 800ms cubic-bezier(.2,.8,.2,1);
}

.index-orbit {
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    border: 1px dashed rgba(199, 155, 57, .42);
}

.index-mark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--bark);
    cursor: pointer;
}

.index-mark:nth-child(1) { transform: rotate(-90deg) translate(54px); }
.index-mark:nth-child(2) { transform: rotate(-18deg) translate(54px); }
.index-mark:nth-child(3) { transform: rotate(54deg) translate(54px); }
.index-mark:nth-child(4) { transform: rotate(126deg) translate(54px); }
.index-mark:nth-child(5) { transform: rotate(198deg) translate(54px); }

.index-mark span {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--kr);
    font-size: 9px;
    letter-spacing: .12em;
    color: rgba(242, 232, 201, .62);
    text-transform: uppercase;
}

.index-mark.is-active { background: var(--cambium); box-shadow: 0 0 18px rgba(111, 143, 78, .9); }

.bark-gate { background: radial-gradient(circle at 12% 50%, #5C3A24 0 28%, #12100B 63%); }

.trunk-edge {
    position: absolute;
    left: -30vw;
    top: -14vh;
    width: 72vw;
    height: 132vh;
    border-radius: 48%;
    background: repeating-linear-gradient(93deg, #3a2418 0 11px, #5C3A24 12px 20px, #2d1c13 21px 32px), radial-gradient(ellipse at 55% 50%, rgba(242, 232, 201, .12), transparent 50%);
    box-shadow: inset -30px 0 70px rgba(18, 16, 11, .95), 44px 0 90px rgba(18, 16, 11, .88);
    transition: transform 1300ms cubic-bezier(.15,.86,.2,1), clip-path 1300ms cubic-bezier(.15,.86,.2,1);
}

.bark-gate.opened .trunk-edge { transform: translateX(-18vw); clip-path: inset(0 38% 0 0 round 49%); }

.bark-seam {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(transparent, var(--sap), transparent);
    opacity: .36;
}
.seam-left { right: 30%; }
.seam-right { right: 25%; opacity: .18; }

.resin {
    position: absolute;
    width: 22px;
    height: 28px;
    border-radius: 50% 50% 48% 48%;
    background: radial-gradient(circle at 35% 25%, #F2E8C9, #C79B39 45%, rgba(199,155,57,.28) 75%);
    box-shadow: 0 0 24px rgba(199,155,57,.58);
    cursor: crosshair;
}
.bead-one { right: 25%; top: 23%; }
.bead-two { right: 17%; top: 50%; width: 16px; height: 20px; }
.bead-three { right: 31%; top: 70%; width: 12px; height: 16px; }

.hero-engraving {
    position: absolute;
    left: 30vw;
    top: 28vh;
    width: min(760px, 62vw);
}

.specimen-label,
.chamber-kicker {
    font-family: var(--kr);
    font-size: 12px;
    letter-spacing: .22em;
    color: var(--lichen);
    text-transform: uppercase;
}

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

h1 {
    font-size: clamp(64px, 12vw, 168px);
    line-height: .82;
    color: var(--sap);
    text-shadow: 0 1px 0 #5C3A24, 0 0 38px rgba(242, 232, 201, .16);
}

.knot-a { position: relative; color: transparent; -webkit-text-stroke: 1px var(--sap); }
.knot-a::after { content: ""; position: absolute; left: 35%; top: 38%; width: .22em; height: .2em; border-radius: 50%; background: var(--heartwood); box-shadow: inset 0 0 0 1px var(--spore); }

.field-copy {
    max-width: 600px;
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.18;
    color: rgba(242, 232, 201, .78);
}

.inspect-button {
    margin-top: 18px;
    padding: 13px 18px;
    border: 1px solid rgba(199, 155, 57, .45);
    background: rgba(92, 58, 36, .36);
    color: var(--sap);
    font-family: var(--kr);
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
}

.magnifier {
    position: fixed;
    z-index: 60;
    min-width: 140px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(199, 155, 57, .55);
    background: radial-gradient(circle at 24% 20%, rgba(242,232,201,.9), rgba(199,155,57,.74) 48%, rgba(92,58,36,.72));
    color: var(--heartwood);
    font-family: var(--kr);
    font-size: 11px;
    letter-spacing: .08em;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.8);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
}

.magnifier.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.ring-ledger { background: radial-gradient(ellipse at 38% 50%, rgba(92,58,36,.82), rgba(18,16,11,.98) 68%); }
.tilted-disc { position: absolute; left: -90px; top: 3vh; width: min(820px, 70vw); height: min(820px, 90vh); transform: rotate(-9deg); transition: transform 180ms ease-out; }
.ring-svg { width: 100%; height: 100%; filter: drop-shadow(0 24px 50px rgba(0,0,0,.5)); }
.growth-ring { fill: none; stroke: rgba(242,232,201,.55); stroke-width: 3; stroke-dasharray: 1900; stroke-dashoffset: 1900; animation: drawRing 2.8s ease forwards; }
.r2 { stroke: rgba(199,155,57,.52); animation-delay: .2s; }
.r3 { stroke: rgba(92,58,36,.9); stroke-width: 5; animation-delay: .42s; }
.r4 { stroke: rgba(242,232,201,.35); animation-delay: .65s; }
.r5 { stroke: rgba(111,143,78,.55); animation-delay: .9s; }
.scar-line { fill: none; stroke: var(--spore); stroke-width: 2; stroke-dasharray: 700; stroke-dashoffset: 700; animation: drawRing 3s 1.1s ease forwards; }
@keyframes drawRing { to { stroke-dashoffset: 0; } }
.ring-note { position: absolute; padding: 8px 12px; border: 1px solid rgba(242,232,201,.25); background: rgba(18,16,11,.62); font-family: var(--kr); font-size: 12px; letter-spacing: .08em; color: var(--sap); }
.note-memory { left: 37%; top: 28%; transform: rotate(13deg); }
.note-recovery { left: 52%; top: 61%; transform: rotate(-18deg); color: var(--spore); }
.note-state { left: 10%; top: 49%; transform: rotate(24deg); }
.note-time { left: 42%; top: 78%; transform: rotate(4deg); }

.vellum,
.bark-plaque,
.seed-note {
    border: 1px solid rgba(242, 232, 201, .24);
    background: linear-gradient(135deg, rgba(242,232,201,.12), rgba(242,232,201,.035));
    backdrop-filter: blur(8px);
    box-shadow: 0 20px 60px rgba(0,0,0,.34);
}
.ledger-vellum { position: absolute; right: 9vw; top: 27vh; width: min(410px, 36vw); padding: 34px; }
h2 { font-size: clamp(42px, 6vw, 86px); line-height: .9; color: var(--sap); }
.vellum p:not(.chamber-kicker), .bark-plaque p:not(.chamber-kicker), .seed-note p:not(.chamber-kicker) { font-size: 20px; line-height: 1.35; color: rgba(242,232,201,.76); }
.hand-note { font-family: var(--hand); color: var(--spore) !important; font-size: 30px !important; transform: rotate(-4deg); }

.cambium-bus { background: radial-gradient(circle at 52% 45%, rgba(111,143,78,.18), transparent 36%), #12100B; }
.bus-plate { position: absolute; left: 7vw; top: 12vh; width: 72vw; height: 70vh; border-radius: 50%; border: 1px solid rgba(92,58,36,.6); background: radial-gradient(ellipse, rgba(92,58,36,.45), transparent 66%); }
.bus-svg { width: 100%; height: 100%; overflow: visible; }
.bus-channel { fill: none; stroke: var(--cambium); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 12 18; filter: drop-shadow(0 0 12px rgba(111,143,78,.66)); animation: busPulse 3.8s linear infinite; }
.c2 { stroke: var(--lichen); animation-duration: 4.5s; }
.c3 { stroke: rgba(242,232,201,.5); animation-duration: 5.2s; }
@keyframes busPulse { to { stroke-dashoffset: -120; } }
.bus-node { transform: translate(var(--x), var(--y)); }
.bus-node circle { fill: #12100B; stroke: var(--spore); stroke-width: 2; }
.bus-node text { x: 18px; y: 4px; fill: var(--sap); font: 13px "IBM Plex Sans KR"; letter-spacing: .08em; }
.packet { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--spore); box-shadow: 0 0 16px var(--spore); offset-rotate: 0deg; }
.p1 { offset-path: path("M102 322 C210 210 309 245 410 318 S640 430 787 248"); animation: packetMove 4s linear infinite; }
.p2 { offset-path: path("M152 457 C298 366 315 112 518 168 S670 280 815 144"); animation: packetMove 5.4s 1s linear infinite; }
.p3 { offset-path: path("M94 177 C235 266 394 95 529 302 S706 471 820 386"); animation: packetMove 4.7s .4s linear infinite; }
@keyframes packetMove { to { offset-distance: 100%; } }
.bark-plaque { position: absolute; right: 8vw; bottom: 12vh; width: min(430px, 38vw); padding: 34px; border-left: 6px solid var(--cambium); }

.root-mesh { background: radial-gradient(circle at 50% 10%, rgba(92,58,36,.42), transparent 25%), radial-gradient(circle at 62% 65%, rgba(74,53,87,.62), transparent 52%), #12100B; }
.underground-field { position: absolute; inset: 0; }
.root-svg { width: 100%; height: 100%; }
.root-line, .root-hair { fill: none; stroke: var(--lichen); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1100; stroke-dashoffset: 1100; animation: drawRoot 4s ease forwards; filter: drop-shadow(0 0 10px rgba(143,183,179,.5)); }
.root-b { stroke: var(--cambium); animation-delay: .3s; }
.root-c { stroke: rgba(242,232,201,.58); animation-delay: .6s; }
.root-hair { stroke-width: 2; stroke: rgba(143,183,179,.54); animation-delay: 1.1s; }
@keyframes drawRoot { to { stroke-dashoffset: 0; } }
.fungus { fill: var(--mycelium); stroke: var(--lichen); stroke-width: 2; animation: fungusPulse 2.4s ease-in-out infinite; }
.f2 { animation-delay: .5s; } .f3 { animation-delay: 1s; } .f4 { animation-delay: 1.5s; }
@keyframes fungusPulse { 50% { fill: var(--spore); filter: drop-shadow(0 0 18px rgba(199,155,57,.8)); } }
.root-label { position: absolute; font-family: var(--kr); font-size: 13px; color: var(--lichen); letter-spacing: .1em; }
.rl-one { left: 21vw; top: 49vh; } .rl-two { right: 12vw; top: 55vh; } .rl-three { left: 57vw; bottom: 16vh; }
.root-vellum { position: absolute; left: 7vw; top: 14vh; width: min(420px, 38vw); padding: 32px; }

.seed-console { background: radial-gradient(circle at 50% 48%, rgba(199,155,57,.14), transparent 36%), #12100B; }
.seed-tray { position: absolute; left: 8vw; top: 22vh; width: 58vw; height: 46vh; border: 1px solid rgba(242,232,201,.18); border-radius: 44px; background: linear-gradient(130deg, rgba(92,58,36,.36), rgba(18,16,11,.5)); display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 42px; }
.seed-capsule { position: relative; border: 1px solid rgba(199,155,57,.48); border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 45% 22%, #F2E8C9, #C79B39 26%, #5C3A24 72%); cursor: pointer; min-height: 190px; box-shadow: inset 0 -28px 42px rgba(18,16,11,.48), 0 16px 34px rgba(0,0,0,.32); transition: transform 360ms ease, border-radius 520ms ease; }
.seed-capsule span { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-family: var(--kr); letter-spacing: .18em; text-transform: uppercase; font-size: 12px; color: var(--heartwood); }
.seed-capsule.is-open { transform: translateY(-18px) rotate(-2deg); border-radius: 58% 42% 54% 46%; box-shadow: 0 0 34px rgba(199,155,57,.45), inset 0 -20px 28px rgba(18,16,11,.35); }
.seed-note { position: absolute; right: 8vw; top: 26vh; width: min(440px, 35vw); padding: 34px; }
.spore-field i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--spore); box-shadow: 0 0 16px var(--spore); animation: sporeDrift 9s linear infinite; }
.spore-field i:nth-child(1) { left: 20%; bottom: 13%; animation-delay: 0s; }
.spore-field i:nth-child(2) { left: 46%; bottom: 20%; animation-delay: 1.2s; }
.spore-field i:nth-child(3) { left: 74%; bottom: 10%; animation-delay: 2.4s; }
.spore-field i:nth-child(4) { left: 86%; bottom: 32%; animation-delay: 3.2s; }
.spore-field i:nth-child(5) { left: 12%; bottom: 46%; animation-delay: 4.4s; }
.spore-field i:nth-child(6) { left: 58%; bottom: 55%; animation-delay: 5.1s; }
@keyframes sporeDrift { to { transform: translateY(-80vh) translateX(30px); opacity: 0; } }

@media (max-width: 760px) {
    .ring-index { right: 16px; top: 16px; transform: scale(.78); }
    .hero-engraving { left: 10vw; top: 30vh; width: 82vw; }
    .trunk-edge { left: -58vw; width: 112vw; }
    .ledger-vellum, .bark-plaque, .root-vellum, .seed-note { left: 7vw; right: auto; top: auto; bottom: 7vh; width: 86vw; padding: 22px; }
    .tilted-disc { left: -220px; width: 760px; }
    .bus-plate { left: -16vw; width: 120vw; }
    .seed-tray { left: 6vw; top: 11vh; width: 88vw; height: 54vh; grid-template-columns: repeat(2, 1fr); padding: 24px; }
    .seed-capsule { min-height: 120px; }
}