:root {
  /* Design phrase lock: few cyan circuit filaments crawling in from outside the frame. Use CSS pseudo-elements. Space Grotesk** Grotes* for `munju.club` wordmark. */
  --carbon: #070706;
  --plaster: #24201B;
  --cyan: #00F5FF;
  --violet: #9B5CFF;
  --green: #B6FF3B;
  --rust: #D66A2E;
  --bone: #E8DDC7;
  --space: "Space Grotesk", "Arial Narrow", system-ui, sans-serif;
  --urban: "Urbanist", system-ui, sans-serif;
  --body: "Noto Sans KR", system-ui, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--bone);
  font-family: var(--body);
  background:
    radial-gradient(circle at 78% 8%, rgba(155,92,255,.11), transparent 34rem),
    radial-gradient(circle at 2% 38%, rgba(214,106,46,.13), transparent 28rem),
    linear-gradient(118deg, var(--carbon), #0d0b09 48%, var(--carbon));
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  z-index: 2;
  background-image:
    repeating-linear-gradient(97deg, rgba(232,221,199,.035) 0 1px, transparent 1px 17px),
    repeating-linear-gradient(7deg, rgba(36,32,27,.9) 0 2px, transparent 2px 9px);
  mix-blend-mode: overlay;
}

.grain {
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 3;
  opacity: .22;
  background:
    radial-gradient(circle at 10% 20%, rgba(232,221,199,.24) 0 1px, transparent 1px 10px),
    radial-gradient(circle at 80% 70%, rgba(214,106,46,.20) 0 1px, transparent 1px 13px),
    radial-gradient(circle at 40% 30%, rgba(0,245,255,.13) 0 1px, transparent 1px 15px);
  animation: driftGrain 11s steps(7) infinite;
}

.probe {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  pointer-events: none;
  box-shadow: 0 0 22px rgba(0,245,255,.7), inset 0 0 9px rgba(0,245,255,.5);
  opacity: .78;
}

.probe::after {
  content: "";
  position: absolute;
  width: 44px;
  height: 1px;
  left: 12px;
  top: 8px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  transform: rotate(-22deg);
}

.zone {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(232,221,199,.08);
}

.zone::after {
  content: attr(data-zone);
  position: absolute;
  right: clamp(18px, 4vw, 64px);
  bottom: clamp(18px, 4vw, 64px);
  font: 800 12vw/1 var(--urban);
  color: transparent;
  -webkit-text-stroke: 1px rgba(232,221,199,.09);
  transform: rotate(-5deg);
  z-index: -1;
}

h1, h2 { font-family: var(--space); margin: 0; letter-spacing: -.08em; }
h2 { font-size: clamp(4.8rem, 14vw, 14rem); line-height: .76; color: var(--bone); text-shadow: 0 0 28px rgba(155,92,255,.16); }

.field-note {
  max-width: 28rem;
  margin: 0;
  font-size: clamp(.95rem, 1.2vw, 1.18rem);
  line-height: 1.55;
  color: rgba(232,221,199,.78);
  font-weight: 400;
}

.corner-label, .tag, .alcove, .whisper, .door-mark {
  font-family: var(--urban);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  line-height: 1.55;
}

.corner-label b, .alcove b { color: var(--green); font-weight: 700; }

.zone-door {
  background:
    linear-gradient(90deg, rgba(36,32,27,.8) 0 37%, transparent 37%),
    radial-gradient(circle at 14% 76%, rgba(214,106,46,.15), transparent 28rem),
    var(--carbon);
}

.wordmark {
  position: absolute;
  left: clamp(22px, 7vw, 110px);
  top: 31vh;
  font-size: clamp(4.3rem, 15vw, 15.6rem);
  line-height: .78;
  transform: rotate(-3.2deg) skewX(-2deg);
  color: var(--bone);
  text-shadow: -2px 0 var(--rust), 0 0 30px rgba(0,245,255,.14);
}

.wordmark i { color: var(--cyan); font-style: normal; margin: 0 -.06em; text-shadow: 0 0 24px var(--cyan); }
.wordmark span:last-child { display: inline-block; transform: translateY(.12em); color: rgba(232,221,199,.9); }

.door-note { position: absolute; left: 49vw; top: 60vh; transform: rotate(1.5deg); }
.door-mark { position: absolute; right: 9vw; top: 15vh; color: var(--green); transform: rotate(2deg); }
.zone-door .corner-label { position: absolute; left: 5vw; bottom: 7vh; color: rgba(232,221,199,.68); }

.scar { position: absolute; background: var(--rust); opacity: .65; filter: blur(.2px); }
.scar-a { left: 42%; top: 12%; width: 2px; height: 42vh; transform: rotate(17deg); box-shadow: 0 0 18px rgba(214,106,46,.45); }
.scar-b { right: 18%; bottom: 11%; width: 24vw; height: 1px; transform: rotate(-8deg); }

.trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.live-line, .ghost-line, .wave, .kintsugi, .gather-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.live-line { stroke: var(--cyan); stroke-width: 3; stroke-dasharray: 170 32 18 22; filter: drop-shadow(0 0 10px rgba(0,245,255,.82)); animation: current 6s linear infinite; }
.ghost-line { stroke: rgba(182,255,59,.65); stroke-width: 2; stroke-dasharray: 40 18; }
.solder { fill: var(--rust); stroke: var(--bone); stroke-width: 1; filter: drop-shadow(0 0 12px rgba(214,106,46,.75)); }

.zone-signal { background: linear-gradient(102deg, var(--plaster) 0 44%, var(--carbon) 44%); }
.plaster-field { position: absolute; left: 2vw; top: 9vh; width: 38vw; height: 78vh; background: rgba(232,221,199,.035); clip-path: polygon(0 4%, 96% 0, 100% 92%, 8% 100%); border: 1px solid rgba(232,221,199,.10); }
.data-ribbon { position: absolute; left: 26vw; right: -3vw; top: 36vh; height: 32vh; transform: rotate(-2.5deg); background: rgba(7,7,6,.72); border-top: 1px solid rgba(0,245,255,.26); border-bottom: 1px solid rgba(182,255,59,.20); box-shadow: 0 0 42px rgba(0,245,255,.09); }
.wave-svg { width: 100%; height: 100%; overflow: visible; }
.wave-one { stroke: var(--cyan); stroke-width: 4; stroke-dasharray: 80 13 9 20; filter: drop-shadow(0 0 12px rgba(0,245,255,.8)); animation: current 5s linear infinite; }
.wave-two { stroke: var(--violet); stroke-width: 2; stroke-dasharray: 28 12; opacity: .85; }
.scatter circle { fill: var(--green); filter: drop-shadow(0 0 10px rgba(182,255,59,.75)); transform-origin: center; animation: tremor 1.8s ease-in-out infinite alternate; }
.zone-signal h2 { position: absolute; left: 8vw; top: 15vh; transform: rotate(2deg); color: rgba(232,221,199,.94); }
.signal-note { position: absolute; right: 9vw; top: 18vh; transform: rotate(-1deg); }
.tag { position: absolute; color: var(--green); background: rgba(7,7,6,.64); padding: .55rem .7rem; border: 1px solid rgba(182,255,59,.24); }
.tag-kr { left: 48vw; top: 24vh; transform: rotate(-4deg); }
.tag-lat { right: 8vw; bottom: 20vh; transform: rotate(3deg); color: var(--cyan); }
.node-cluster { position: absolute; left: 60vw; top: 55vh; width: 260px; height: 170px; }
.node-cluster::before { content: ""; position: absolute; inset: 24px 22px; border: 1px dashed rgba(0,245,255,.35); transform: skewY(-8deg); }
.spring-node { position: absolute; width: 24px; height: 24px; padding: 0; border: 2px solid var(--green); border-radius: 50%; background: var(--plaster); box-shadow: 0 0 18px rgba(182,255,59,.7); transition: transform .55s cubic-bezier(.2, 1.65, .3, 1), box-shadow .2s; }
.spring-node:nth-child(1){ left: 18px; top: 42px; }.spring-node:nth-child(2){ left: 110px; top: 10px; }.spring-node:nth-child(3){ right: 35px; top: 84px; }.spring-node:nth-child(4){ left: 72px; bottom: 14px; }
.spring-node:hover, .spring-node.active { transform: translateY(-12px) scale(1.22); box-shadow: 0 0 30px rgba(0,245,255,.95); border-color: var(--cyan); }

.zone-repair { background: radial-gradient(circle at 72% 36%, rgba(155,92,255,.14), transparent 25rem), var(--carbon); }
.paper { position: absolute; background: rgba(232,221,199,.08); border: 1px solid rgba(232,221,199,.18); box-shadow: 0 18px 35px rgba(0,0,0,.35); font-family: var(--urban); color: rgba(232,221,199,.55); text-transform: uppercase; letter-spacing: .11em; }
.paper-one { left: 8vw; top: 16vh; width: 34vw; height: 48vh; transform: rotate(-2.4deg); }
.paper-two { right: 9vw; bottom: 10vh; width: 38vw; height: 42vh; transform: rotate(2.8deg); }
.paper span { position: absolute; left: 1rem; top: 1rem; }
.repair-grid { position: absolute; left: 11vw; top: 20vh; width: 78vw; height: 58vh; opacity: .25; background-image: linear-gradient(rgba(0,245,255,.24) 1px, transparent 1px), linear-gradient(90deg, rgba(0,245,255,.2) 1px, transparent 1px); background-size: 46px 46px; clip-path: polygon(2% 0, 100% 8%, 94% 100%, 0 88%); }
.repair-svg { position: absolute; inset: 4vh 3vw auto 5vw; width: 90vw; height: 88vh; overflow: visible; }
.kintsugi { stroke: var(--cyan); stroke-width: 5; stroke-dasharray: 90 18 7 14; filter: drop-shadow(0 0 14px rgba(0,245,255,.86)); animation: current 7s linear infinite reverse; }
.kintsugi.violet { stroke: var(--violet); stroke-width: 3; }
.pads circle { fill: rgba(36,32,27,.9); stroke: var(--rust); stroke-width: 4; filter: drop-shadow(0 0 9px rgba(214,106,46,.6)); }
.zone-repair h2 { position: absolute; right: 9vw; top: 12vh; transform: rotate(-2deg); }
.repair-note { position: absolute; left: 13vw; bottom: 17vh; background: rgba(7,7,6,.65); padding: 1rem; border-left: 2px solid var(--rust); transform: rotate(1.2deg); }
.alcove { position: absolute; padding: .7rem .9rem; color: rgba(232,221,199,.75); background: rgba(36,32,27,.84); border: 1px solid rgba(214,106,46,.35); }
.alcove-a { left: 48vw; top: 29vh; transform: rotate(3deg); }.alcove-b { right: 19vw; bottom: 28vh; transform: rotate(-2deg); }

.zone-pulse { min-height: 105vh; background: radial-gradient(circle at 57% 52%, rgba(0,245,255,.12), transparent 23rem), radial-gradient(circle at 68% 54%, rgba(155,92,255,.16), transparent 19rem), var(--plaster); }
.pulse-svg { position: absolute; left: 4vw; top: 4vh; width: 92vw; height: 92vh; overflow: visible; }
.scope-ring { fill: none; stroke: rgba(232,221,199,.18); stroke-width: 2; stroke-dasharray: 7 16; transform-origin: 56% 50%; animation: slowSpin 18s linear infinite; }
.ring-two { stroke: rgba(155,92,255,.5); animation-duration: 13s; animation-direction: reverse; }
.gather-line { stroke: var(--cyan); stroke-width: 3; stroke-dasharray: 130 24 12 18; filter: drop-shadow(0 0 12px rgba(0,245,255,.8)); animation: current 6.4s linear infinite; }
.gather-line.green { stroke: var(--green); stroke-width: 2; animation-duration: 7.2s; }
.pulse-dots circle { fill: var(--bone); stroke: var(--cyan); stroke-width: 2; filter: drop-shadow(0 0 14px rgba(0,245,255,.75)); animation: pulseDot 2.2s ease-in-out infinite; }
.pulse-copy { position: absolute; left: 11vw; top: 15vh; transform: rotate(-1.4deg); }
.pulse-copy h2 { margin: 5vh 0 4vh 0; color: var(--bone); }
.whisper { position: absolute; color: var(--green); background: rgba(7,7,6,.48); padding: .55rem .8rem; }
.whisper-a { right: 13vw; top: 26vh; transform: rotate(4deg); }.whisper-b { right: 22vw; bottom: 15vh; transform: rotate(-5deg); color: var(--cyan); }

.lit { filter: brightness(1.7) saturate(1.3) drop-shadow(0 0 18px rgba(0,245,255,.95)) !important; }
.near-probe { color: var(--cyan); border-color: rgba(0,245,255,.7); text-shadow: 0 0 12px rgba(0,245,255,.7); }

@keyframes current { to { stroke-dashoffset: -320; } }
@keyframes tremor { from { transform: translate(-1px, 1px); } to { transform: translate(2px, -2px); } }
@keyframes driftGrain { 0%,100% { transform: translate(0,0); } 25% { transform: translate(2%, -1%); } 50% { transform: translate(-1%, 2%); } 75% { transform: translate(1%, 1%); } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes pulseDot { 0%,100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.45); opacity: 1; } }

@media (max-width: 760px) {
  .probe { display: none; }
  .wordmark { top: 26vh; left: 7vw; font-size: 19vw; }
  .door-note, .signal-note, .repair-note { left: 8vw; right: 8vw; top: auto; bottom: 18vh; max-width: none; }
  .door-mark { right: 7vw; top: 10vh; }
  .zone-signal h2, .zone-repair h2 { left: 7vw; right: auto; top: 10vh; font-size: 22vw; }
  .data-ribbon { left: 8vw; right: -30vw; top: 42vh; }
  .node-cluster { left: 28vw; top: 63vh; transform: scale(.82); }
  .paper-one, .paper-two { width: 76vw; left: 11vw; right: auto; }
  .pulse-copy { left: 7vw; right: 7vw; }
}