:root{--copy-w:34;--bg:#000;--term-bar:#0a0a0a;--text:#f4f4f4;--muted:#8b939c;--accent:#ff2a2a;--ok:#4ade80;--link:#60a5fa;--gap:0px;--font-sans:"Noto Sans KR", system-ui, sans-serif;--font-display:"Anton", "Noto Sans KR", sans-serif;--font-mono:"JetBrains Mono", ui-monospace, monospace}*{box-sizing:border-box;margin:0}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font-sans);overscroll-behavior:none;overflow:hidden}#board{gap:var(--gap);z-index:10;grid-template-rows:repeat(3,1fr);display:grid;position:fixed;inset:0}.row{perspective:900px;background:#000;position:relative;overflow:hidden}.prism{transform-style:preserve-3d;transform:scale(var(--pull,1)) translateZ(calc(var(--apothem) * -1)) rotateX(var(--angle,0deg));will-change:transform;position:absolute;inset:0}.face{backface-visibility:hidden;transform:rotateX(calc(var(--i) * -120deg)) translateZ(var(--apothem));background:#000;position:absolute;inset:0}.shade{opacity:0;pointer-events:none;background:#000;position:absolute;inset:0}.copy{width:calc(var(--copy-w) * 1%);flex-direction:column;justify-content:center;gap:.5em;padding:0 clamp(16px,4vw,64px);display:flex;position:absolute;top:0;bottom:0}.side-left .copy{left:0}.side-right .copy{text-align:right;align-items:flex-end;right:0}.copy-label{font-family:var(--font-mono);color:var(--accent);letter-spacing:.2em;font-size:.8rem}.copy-title{letter-spacing:.01em;text-transform:uppercase;overflow-wrap:normal;font-family:Anton,Noto Sans KR,sans-serif;font-size:clamp(2.4rem,5.4vw,6.2rem);font-weight:400;line-height:.95}.copy-body{color:var(--muted);font-size:clamp(.85rem,1.1vw,1.05rem);line-height:1.6}.term{width:calc((100 - var(--copy-w)) * 1% - 14px);background:#000;border:1px solid #1c1c1c;border-radius:10px;flex-direction:column;display:flex;position:absolute;top:14px;bottom:14px;overflow:hidden}.side-left .term{right:14px}.side-right .term{left:14px}.term-bar{background:var(--term-bar);font-family:var(--font-mono);color:var(--muted);border-bottom:1px solid #1c1c1c;align-items:center;gap:6px;padding:7px 12px;font-size:.7rem;display:flex}.term-bar i{background:#3a3f46;border-radius:50%;width:10px;height:10px}.term-bar i:first-child{background:#ff5f57}.term-bar i:nth-child(2){background:#febc2e}.term-bar i:nth-child(3){background:#28c840}.term-bar span{margin-left:10px}.term-body{font-family:var(--font-mono);color:#d6dde5;flex:1;padding:10px 16px;font-size:clamp(.68rem,.9vw,.85rem);line-height:1.6;overflow:hidden}.side-right .term-body{padding-left:16px}.t-line{white-space:pre}.t-line.ok{color:var(--ok)}.t-line.link{color:var(--link)}.t-line.dim{color:var(--muted)}.t-path{color:#c084fc}.t-sign{color:var(--accent)}.t-cursor{vertical-align:-.2em;background:#d6dde5;width:.6em;height:1.1em;animation:1s step-end infinite blink;display:inline-block}@keyframes blink{50%{opacity:0}}.face{overflow:hidden}.finale-wrap{height:300%;left:0;right:0;top:calc(var(--slice) * -100%);display:none;position:absolute}.face-black.finale-on .finale-wrap{display:block}.term.term-full{width:auto;inset:14px}.term-full .term-body{padding:18px 24px;font-size:clamp(.72rem,1vw,.95rem)}.finale-copy{text-align:right;flex-direction:column;align-items:flex-end;gap:.5em;width:min(30%,420px);display:flex;position:absolute;top:50%;right:clamp(32px,6vw,96px);transform:translateY(-50%)}.t-line.accent{color:var(--accent);line-height:1.12}.t-line.banner{white-space:nowrap;margin:.15em 0 .3em}.t-banner{width:auto;height:clamp(3.5rem,7.5vw,8.5rem);display:block;overflow:visible}.t-banner .p{fill:#fff}.t-banner .s{fill:#4a4a4f}.t-banner .h{fill:var(--accent)}.t-banner .hs{fill:#7a0a10}.t-banner-px rect,.t-banner-heart rect{transform-box:fill-box;transform-origin:50%;animation:.35s cubic-bezier(.2,.9,.3,1.3) both px-in}.t-banner-heart{transform-box:fill-box;transform-origin:50% 55%;animation:1.2s ease-in-out .8s infinite heart-beat}.t-banner-shadow{animation:.6s ease-out .2s both px-fade}@keyframes px-in{0%{opacity:0;transform:scale(.2)}}@keyframes px-fade{0%{opacity:0}}@keyframes heart-beat{0%,60%,to{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(.96)}45%{transform:scale(1.1)}}#stage{z-index:20;pointer-events:none;width:100%;height:100%;position:fixed;inset:0}#steps{z-index:30;flex-direction:column;gap:10px;display:flex;position:fixed;top:50%;right:14px;transform:translateY(-50%)}#steps button{cursor:pointer;background:0 0;border:1px solid #ffffff80;border-radius:50%;width:10px;height:10px;padding:0;transition:background .2s,transform .2s}#steps button[aria-current]{background:var(--accent);border-color:var(--accent);transform:scale(1.3)}#steps button:focus-visible{outline:2px solid var(--link);outline-offset:3px}.hint{z-index:30;font-family:var(--font-mono);letter-spacing:.3em;color:var(--muted);flex-direction:column;align-items:center;gap:4px;font-size:.7rem;transition:opacity .4s;display:flex;position:fixed;bottom:18px;left:50%;transform:translate(-50%)}.hint span{animation:1.4s ease-in-out infinite nudge}@keyframes nudge{50%{transform:translateY(5px)}}body:not([data-step="0"]) .hint{opacity:0}@media (width<=767px){:root{--copy-w:42}.copy{padding:0 16px}.copy-title{font-size:clamp(1.5rem,7.4vw,2.6rem)}.term{opacity:.7;top:8px;bottom:8px}.side-left .term{right:8px}.side-right .term{left:8px}.term-body{padding:8px 10px;font-size:.6rem}.term-bar{padding:6px 10px;font-size:.6rem}.term.term-full{opacity:1;inset:8px}.term-full .term-body{padding:12px 14px;font-size:.66rem}.t-banner{height:clamp(2.4rem,10vw,4rem)}.finale-copy{text-align:center;align-items:center;width:auto;inset:auto 16px 7%;transform:none}.finale-copy .copy-title{font-size:clamp(1.8rem,9vw,2.8rem)}#steps{gap:8px;right:6px}#steps button{width:8px;height:8px}.hint{bottom:10px}}@media (prefers-reduced-motion:reduce){.t-cursor,.hint span,.t-banner rect,.t-banner g{animation:none!important}}
