:root {
    --porcelain: #F4EFE6;
    --mint: #74C7B8;
    --mist: #BFE8EE;
    --plum: #4D3A6A;
    --ink: #111014;
    --paper: #F3D95B;
    --seal: #D63B2E;
}

/* Compliance phrases from DESIGN.md: IBM Plex Sans KR**; Space Grotesk**; Interaction ideas: hovering over a harsh word makes a droplet lens enlarge it and show a quieter alternative; sparse measuring marks. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--porcelain);
    background: var(--ink);
    font-family: "IBM Plex Sans KR", Inter, sans-serif;
    overflow-x: hidden;
}

button { font: inherit; }

.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    opacity: .24;
    background-image: radial-gradient(circle at 20% 30%, rgba(244,239,230,.16) 0 1px, transparent 1px), radial-gradient(circle at 72% 64%, rgba(191,232,238,.12) 0 1px, transparent 1px);
    background-size: 34px 34px, 51px 51px;
    mix-blend-mode: screen;
}

.temperature-orb {
    position: fixed;
    top: 28px;
    right: 34px;
    width: 72px;
    height: 72px;
    border: 1px solid rgba(191,232,238,.5);
    border-radius: 50%;
    display: grid;
    place-items: center;
    z-index: 15;
    color: var(--mist);
    font-family: "Space Grotesk", sans-serif;
    background: radial-gradient(circle at 42% 38%, rgba(116,199,184,.35), rgba(17,16,20,.75) 60%);
    box-shadow: 0 0 38px rgba(116,199,184,.18);
    transition: transform .5s ease, color .5s ease, border-color .5s ease;
}

.passage-rail {
    position: fixed;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-family: "Space Grotesk", sans-serif;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(244,239,230,.35);
}

.rail-mark {
    cursor: pointer;
    writing-mode: vertical-rl;
    transition: color .35s ease, transform .35s ease;
}

.rail-mark.is-current { color: var(--paper); transform: translateX(6px); }

.chamber {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(90px, .62fr) minmax(320px, 1.25fr) minmax(320px, 1fr);
    align-items: center;
    padding: 84px 8vw 84px 9vw;
    isolation: isolate;
}

.chamber::before {
    content: "";
    position: absolute;
    inset: 28px;
    border: 1px solid rgba(244,239,230,.12);
    border-radius: 34px;
    pointer-events: none;
}

.chamber-copy {
    position: relative;
    z-index: 3;
    max-width: 690px;
}

.offset-left { grid-column: 2 / 4; align-self: end; margin-bottom: 5vh; }
.offset-right { grid-column: 2 / 4; justify-self: end; text-align: right; }
.narrow { max-width: 560px; }

.kicker {
    margin: 0 0 18px;
    color: var(--mint);
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    letter-spacing: .23em;
    text-transform: uppercase;
}

h1, h2 {
    margin: 0;
    font-family: "Gowun Batang", serif;
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.045em;
}

h1 { font-size: clamp(56px, 9vw, 134px); max-width: 1040px; }
h2 { font-size: clamp(46px, 7vw, 102px); }

p {
    font-size: clamp(17px, 1.7vw, 24px);
    line-height: 1.7;
    color: rgba(244,239,230,.74);
}

.ritual-button {
    margin-top: 18px;
    border: 1px solid rgba(243,217,91,.72);
    background: var(--paper);
    color: var(--ink);
    border-radius: 999px;
    padding: 15px 25px;
    font-family: "Space Grotesk", sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .25s ease, background .25s ease, color .25s ease;
}

.ritual-button:hover { transform: translateY(-3px); background: var(--mint); }
.ritual-button.ghost { background: transparent; color: var(--paper); }

.chamber-gate { background: radial-gradient(circle at 72% 18%, rgba(77,58,106,.72), transparent 36%), linear-gradient(145deg, #111014 0%, #19131f 58%, #111014 100%); }
.porcelain-ring { position: absolute; width: 72vmin; height: 72vmin; border: 32px solid rgba(244,239,230,.055); border-radius: 50%; left: 50%; top: 45%; transform: translate(-50%, -50%); }
.low-wordmark { position: absolute; left: 9vw; bottom: 38px; font-family: "Space Grotesk", sans-serif; letter-spacing: .22em; color: rgba(244,239,230,.42); }
.gate-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.lip-seal { width: min(52vw, 620px); height: 260px; border-radius: 55% 55% 48% 48%; background: radial-gradient(ellipse at 50% 42%, rgba(214,59,46,.9), rgba(77,58,106,.7) 48%, rgba(17,16,20,.1) 70%); box-shadow: 0 0 120px rgba(214,59,46,.18); transform: rotate(-4deg); }
.lip-line { position: absolute; top: 50%; left: 18%; right: 18%; height: 2px; background: var(--ink); box-shadow: 0 0 16px rgba(17,16,20,.8); }
.sentence-strip, .final-strip { position: absolute; background: var(--porcelain); color: var(--ink); padding: 18px 34px; border-radius: 8px; box-shadow: 0 22px 70px rgba(0,0,0,.35); font-family: "Gowun Batang", serif; font-size: clamp(18px, 2vw, 30px); }
.sentence-strip { top: 42%; left: 33%; animation: driftStrip 7s ease-in-out infinite; }
.pin { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); top: 8px; left: 12px; }
.condensation i { position: absolute; width: 8px; height: 18px; border-radius: 999px; background: rgba(191,232,238,.48); filter: blur(.2px); animation: droplet 5s ease-in infinite; }
.condensation i:nth-child(1){left:28%;top:18%;}.condensation i:nth-child(2){left:62%;top:22%;animation-delay:.7s}.condensation i:nth-child(3){left:73%;top:48%;animation-delay:1.3s}.condensation i:nth-child(4){left:38%;top:62%;animation-delay:2s}.condensation i:nth-child(5){left:51%;top:12%;animation-delay:2.8s}.condensation i:nth-child(6){left:20%;top:45%;animation-delay:3.4s}

.chamber-steam { background: linear-gradient(155deg, #17151a, #223137 48%, #111014); }
.steam-field span { position: absolute; bottom: -12vh; width: 2px; height: 58vh; background: linear-gradient(to top, transparent, rgba(191,232,238,.42), transparent); border-radius: 50%; filter: blur(8px); animation: steamRise 9s ease-in-out infinite; }
.steam-field span:nth-child(1){left:18%;}.steam-field span:nth-child(2){left:34%;animation-delay:1s}.steam-field span:nth-child(3){left:52%;animation-delay:2.4s}.steam-field span:nth-child(4){left:71%;animation-delay:3.1s}.steam-field span:nth-child(5){left:86%;animation-delay:4.4s}
.heat-vessel { grid-column: 1 / 3; position: relative; height: 54vh; z-index: 2; }
.bowl { position: absolute; left: 12%; bottom: 6%; width: 430px; height: 190px; border-radius: 0 0 220px 220px; background: linear-gradient(180deg, rgba(244,239,230,.95), rgba(191,232,238,.6)); box-shadow: inset 0 18px 30px rgba(17,16,20,.16), 0 45px 80px rgba(0,0,0,.35); }
.heat-reading { position: absolute; left: 28%; top: 4%; color: var(--seal); font-family: "Space Grotesk", sans-serif; font-size: 112px; line-height: .8; }
.heat-reading small { display:block; font-size: 13px; letter-spacing: .35em; color: var(--mist); text-transform: uppercase; }
.hot-phrase { position: absolute; left: 18%; top: 38%; color: var(--seal); background: rgba(244,239,230,.88); padding: 14px 26px; border-radius: 999px; font-family: "Gowun Batang", serif; font-size: 32px; transform: rotate(-8deg); }

.chamber-tray { background: radial-gradient(circle at 18% 74%, rgba(116,199,184,.24), transparent 32%), linear-gradient(135deg, #111014, #241b31); }
.tray-table { grid-column: 2 / 4; position: relative; height: 62vh; }
.glass-tongue { position: absolute; inset: 8% 8% 16% 4%; border-radius: 48% 48% 44% 44%; background: linear-gradient(120deg, rgba(191,232,238,.55), rgba(244,239,230,.08)); border: 1px solid rgba(191,232,238,.56); transform: rotate(7deg); box-shadow: 0 40px 90px rgba(0,0,0,.35), inset 0 0 55px rgba(244,239,230,.08); }
.specimen-card { position: absolute; padding: 16px 24px; border-radius: 10px; font-family: "IBM Plex Sans KR", sans-serif; font-size: 22px; box-shadow: 0 22px 50px rgba(0,0,0,.28); }
.specimen-card.harsh { top: 18%; left: 12%; background: var(--seal); color: var(--porcelain); transform: rotate(-12deg); }
.specimen-card.rinsed { right: 18%; bottom: 24%; background: var(--porcelain); color: var(--ink); transform: rotate(5deg); }
.specimen-card.harsh::after { content: "quieter alternative: 지금 이 부분이 어려워"; position: absolute; left: 62%; top: -62%; width: 220px; min-height: 74px; border-radius: 50%; display: grid; place-items: center; padding: 20px; color: var(--ink); background: radial-gradient(circle, rgba(191,232,238,.96), rgba(191,232,238,.42) 58%, transparent 70%); opacity: 0; transform: scale(.62); transition: opacity .35s ease, transform .35s ease; box-shadow: 0 0 44px rgba(191,232,238,.5); }
.specimen-card.harsh:hover::after { opacity: 1; transform: scale(1.08); }
.red-thread { position: absolute; width: 46%; height: 2px; background: var(--seal); left: 25%; top: 52%; transform: rotate(-18deg); box-shadow: 0 0 14px rgba(214,59,46,.62); }
.brass-pin { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 5px rgba(243,217,91,.14); }
.brass-pin.one { left: 22%; top: 24%; }.brass-pin.two { right: 28%; bottom: 28%; }

.chamber-lantern { background: linear-gradient(160deg, #161118, #35264b 62%, #111014); }
.lantern-grid { grid-column: 1 / 3; display: flex; gap: 28px; align-items: center; min-height: 55vh; }
.context-lantern { width: 190px; height: 270px; border-radius: 95px 95px 42px 42px; border: 1px solid rgba(243,217,91,.28); display: grid; place-items: center; text-align: center; color: rgba(244,239,230,.65); background: radial-gradient(circle at 50% 35%, rgba(243,217,91,.18), rgba(77,58,106,.25) 55%, rgba(17,16,20,.6)); font-family: "Space Grotesk", sans-serif; cursor: pointer; transition: transform .35s ease, box-shadow .35s ease, color .35s ease; }
.context-lantern span { display: block; font-family: "Gowun Batang", serif; font-size: 48px; color: var(--paper); }
.context-lantern strong { display:block; margin-top: 10px; letter-spacing: .18em; text-transform: uppercase; }
.context-lantern.active { transform: translateY(-20px); color: var(--porcelain); box-shadow: 0 0 95px rgba(243,217,91,.26); }
.talismans { position: absolute; left: 11vw; bottom: 13vh; display: flex; gap: 18px; }
.talismans span { background: var(--porcelain); color: var(--seal); padding: 28px 16px; font-family: "Gowun Batang", serif; font-size: 26px; writing-mode: vertical-rl; box-shadow: 0 18px 48px rgba(0,0,0,.25); animation: talismanFloat 4s ease-in-out infinite; }
.talismans span:nth-child(2){animation-delay:.8s}.talismans span:nth-child(3){animation-delay:1.6s}

.chamber-release { background: radial-gradient(circle at 70% 42%, rgba(191,232,238,.28), transparent 34%), linear-gradient(145deg, #111014, #16292a); }
.release-window { grid-column: 2 / 4; position: relative; height: 64vh; border-radius: 42px; border: 1px solid rgba(191,232,238,.34); overflow: hidden; background: linear-gradient(180deg, rgba(191,232,238,.08), rgba(244,239,230,.02)); box-shadow: inset 0 0 80px rgba(191,232,238,.08); }
.window-glow { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(191,232,238,.46), transparent 66%); animation: glowPulse 5s ease-in-out infinite; }
.final-strip { left: 50%; top: 45%; transform: translate(-50%, -50%); white-space: nowrap; }
.verdict-stamp { position: absolute; right: 12%; bottom: 18%; color: var(--seal); border: 3px solid var(--seal); padding: 12px 18px; border-radius: 8px; font-family: "Space Grotesk", sans-serif; letter-spacing: .18em; transform: rotate(-8deg); background: rgba(244,239,230,.82); }

.is-cooled .sentence-strip { background: var(--mist); transform: translateY(32px) rotate(2deg); }
.is-cooled .lip-seal { filter: saturate(.65); }

@keyframes driftStrip { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-20px) rotate(3deg); } }
@keyframes droplet { 0% { transform: translateY(-20px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(90px); opacity: 0; } }
@keyframes steamRise { 0%,100% { transform: translateY(20px) scaleX(1); opacity: .2; } 50% { transform: translateY(-90px) scaleX(18); opacity: .72; } }
@keyframes talismanFloat { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
@keyframes glowPulse { 0%,100% { transform: scale(.86); opacity: .45; } 50% { transform: scale(1.1); opacity: .82; } }

@media (max-width: 900px) {
    .passage-rail { display: none; }
    .temperature-orb { right: 18px; top: 18px; width: 58px; height: 58px; }
    .chamber { grid-template-columns: 1fr; padding: 76px 24px; }
    .offset-left, .offset-right, .tray-table, .lantern-grid, .release-window, .heat-vessel { grid-column: 1; text-align: left; justify-self: stretch; }
    .sentence-strip { left: 9%; right: 9%; top: 36%; }
    .lip-seal { width: 84vw; height: 180px; }
    .lantern-grid { flex-direction: column; align-items: flex-start; }
    .context-lantern { width: 150px; height: 210px; }
    .final-strip { white-space: normal; width: 86%; text-align: center; }
}