:root {
  /* DESIGN token mirror: Interactions (Core Pattern) Interactive elements IntersectionObserver` with `threshold: 0.2` Source Sans 3" (Google Fonts */
  --dark: #1A1A2E;
  --light: #F5F0E8;
  --gold: #D4A843;
  --forest: #4A7C59;
  --forest-hi: #6B9E6B;
  --forest-glow: #8FBC8F;
  --forest-shadow: #3D6B4A;
  --bark: #8B6914;
  --bark-deep: #6B4C0A;
  --bark-hi: #A67C3D;
  --text-light: #EDEDED;
  --text-dark: #2B2B3D;
  --blob: #2D2D4A;
  --sky-1: #1A1A2E;
  --sky-2: #252547;
  --sky-3: #303060;
  --sky-4: #404080;
  --sky-5: #5050A0;
  --sky-6: #6868B8;
  --sky-7: #8888CC;
  --sky-8: #A8A8DD;
  --border-width: 1px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
html { background: var(--dark); }
body {
  font-family: "Source Sans 3", Inter, sans-serif;
  color: var(--text-light);
  background: var(--dark);
  overflow-x: hidden;
  line-height: 1.72;
  letter-spacing: 0.01em;
}

.blob-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}

.blob {
  position: absolute;
  background-color: var(--blob);
  opacity: 0.08;
  will-change: border-radius, transform;
  animation: blob-drift 25s ease-in-out infinite alternate, blob-morph 18s ease-in-out infinite;
}
.blob-1 { width: 300px; height: 300px; top: 8%; left: 4%; animation-delay: 0s, 0s; }
.blob-2 { width: 520px; height: 430px; top: 22%; right: 2%; animation-delay: -4s, -2s; }
.blob-3 { width: 280px; height: 360px; bottom: 12%; left: 12%; animation-delay: -8s, -5s; }
.blob-4 { width: 410px; height: 390px; top: 55%; left: 42%; animation-delay: -12s, -7s; }
.blob-5 { width: 600px; height: 360px; bottom: -8%; right: 14%; animation-delay: -16s, -10s; }
.blob-6 { width: 240px; height: 260px; top: 12%; right: 34%; animation-delay: -20s, -13s; }
.blob-7 { width: 380px; height: 340px; bottom: 24%; left: 28%; animation-delay: -24s, -16s; }

@keyframes blob-drift { from { transform: translate(-60px, -30px); } to { transform: translate(100px, 50px); } }
@keyframes blob-morph {
  0% { border-radius: 30% 70% 60% 40% / 50% 30% 70% 50%; }
  25% { border-radius: 50% 50% 40% 60% / 40% 60% 50% 50%; }
  50% { border-radius: 40% 60% 70% 30% / 60% 40% 30% 70%; }
  75% { border-radius: 60% 40% 50% 50% / 30% 70% 60% 40%; }
  100% { border-radius: 30% 70% 60% 40% / 50% 30% 70% 50%; }
}

.glyph {
  position: fixed;
  z-index: 1;
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 300;
  font-size: clamp(4rem, 12vw, 10rem);
  line-height: 1;
  opacity: 0.05;
  color: var(--light);
  white-space: nowrap;
}
.glyph-tree { top: 4%; left: -4%; }
.glyph-seed { top: 27%; right: -7%; }
.glyph-root { bottom: 30%; left: -5%; }
.glyph-sky { bottom: 5%; right: -6%; }

.split-container {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  overflow: hidden;
}
.panel {
  position: relative;
  width: 50vw;
  height: 100vh;
  overflow: hidden;
  will-change: transform;
}
.panel-track { position: absolute; top: 0; left: 0; width: 100%; will-change: transform; }
.panel--root { background: var(--dark); color: var(--text-light); }
.panel--canopy { background: var(--light); color: var(--text-dark); }
.scroll-spacer { height: 650vh; }

.panel-border {
  position: fixed;
  left: 50%;
  top: 0;
  width: var(--border-width);
  height: 100vh;
  transform: translateX(-50%);
  z-index: 6;
  background: transparent;
  pointer-events: none;
  transition: width 0.45s steps(8);
}
.panel-border.trunk-wide { --border-width: 20vw; }
.border-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.zigzag-line {
  fill: none;
  stroke: var(--bark);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  animation: border-pulse 4s steps(2) infinite;
}
.bark-pixels { fill: var(--bark-hi); opacity: 0; transition: opacity 0.2s steps(1); }
.trunk-wide .border-svg { background-color: var(--bark); box-shadow: inset 0 0 0 8px var(--bark-deep); }
.trunk-wide .bark-pixels { opacity: 1; }
@keyframes border-pulse { 0%, 100% { stroke: var(--bark); } 50% { stroke: var(--gold); } }

.act {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 5vw, 5rem);
}
.act-root { min-height: 150vh; }
.act-canopy { min-height: 200vh; }
.visual-act { overflow: hidden; }
.act-content { width: min(100%, 620px); position: relative; z-index: 2; }
.hero-lockup { text-align: center; }
.prose-block p { font-size: clamp(1rem, 1.8vw, 1.25rem); margin: 0 0 1.45rem; }
.prose-narrow { width: min(100%, 480px); }
.final-line { text-align: center; }

.pixel-label, .section-heading, .hero-title {
  font-family: "Silkscreen", monospace;
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-transform: lowercase;
}
.pixel-label { font-size: 16px; color: var(--gold); margin-bottom: 1rem; letter-spacing: 0.08em; }
.hero-title { font-size: 48px; line-height: 1; color: var(--gold); margin-bottom: 1rem; }
.hero-subtitle { font-weight: 300; font-size: clamp(1rem, 1.8vw, 1.25rem); opacity: 0.86; }
.section-heading { font-size: 32px; color: var(--gold); margin-bottom: 2rem; }
.sky-text { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 300; }

.pixel-divider {
  position: absolute;
  bottom: 2rem;
  left: clamp(2rem, 5vw, 5rem);
  right: clamp(2rem, 5vw, 5rem);
  height: 12px;
  opacity: 0.8;
  image-rendering: pixelated;
}
.divider-star { background: repeating-linear-gradient(90deg, transparent 0 16px, var(--gold) 16px 20px, transparent 20px 28px, var(--gold) 28px 32px, transparent 32px 48px); }
.divider-root { background: repeating-linear-gradient(90deg, var(--bark-deep) 0 8px, transparent 8px 16px, var(--bark) 16px 20px, transparent 20px 28px); }
.divider-leaf { background: repeating-linear-gradient(90deg, var(--forest) 0 8px, var(--forest-hi) 8px 12px, transparent 12px 20px, var(--forest-shadow) 20px 24px, transparent 24px 32px); }

.sprite-frame {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s steps(1), box-shadow 0.15s steps(1);
}
.sprite-small { width: 140px; height: 140px; }
.sprite-medium { width: 260px; height: 260px; }
.sprite-large { width: 360px; height: 420px; }
.sprite-huge { width: min(78vw, 520px); height: min(78vw, 520px); }
.sprite-frame.glowing { box-shadow: 0 0 var(--glow-size, 20px) rgba(212, 168, 67, var(--glow-alpha, 0.3)); }
.pixel-sprite { width: 1px; height: 1px; background: transparent; image-rendering: pixelated; transform-origin: 0 0; opacity: 0; }
.pixel-sprite.revealed { animation: pixel-draw 1.8s steps(24) forwards; }
.pixel-seed {
  box-shadow: 3px 0 var(--gold),4px 0 var(--gold),2px 1px var(--bark),3px 1px var(--gold),4px 1px var(--gold),5px 1px var(--bark),2px 2px var(--bark),3px 2px var(--bark-deep),4px 2px var(--bark-deep),5px 2px var(--bark),1px 3px var(--bark),2px 3px var(--bark-deep),3px 3px var(--bark),4px 3px var(--bark),5px 3px var(--bark-deep),6px 3px var(--bark),1px 4px var(--bark),2px 4px var(--gold),3px 4px var(--gold),4px 4px var(--gold),5px 4px var(--gold),6px 4px var(--bark),2px 5px var(--bark),3px 5px var(--gold),4px 5px var(--gold),5px 5px var(--bark),3px 6px var(--bark),4px 6px var(--bark),3px 7px var(--gold),4px 7px var(--gold);
  transform: scale(10);
}
.pixel-roots {
  box-shadow: 16px 0 var(--bark),16px 1px var(--bark),16px 2px var(--bark),15px 2px var(--bark),17px 2px var(--bark),14px 3px var(--bark),18px 3px var(--bark),13px 4px var(--bark),19px 4px var(--bark),12px 5px var(--bark),20px 5px var(--bark),16px 3px var(--bark),16px 4px var(--bark),16px 5px var(--bark),15px 6px var(--bark-deep),17px 6px var(--bark-deep),14px 7px var(--bark),18px 7px var(--bark),13px 8px var(--bark),19px 8px var(--bark),12px 9px var(--bark),20px 9px var(--bark),11px 10px var(--text-dark),21px 10px var(--text-dark),16px 10px var(--bark),15px 11px var(--bark),17px 11px var(--bark),14px 12px var(--bark),18px 12px var(--bark),13px 13px var(--bark-deep),19px 13px var(--bark-deep),12px 14px var(--bark),20px 14px var(--bark),10px 15px var(--text-dark),22px 15px var(--text-dark),16px 14px var(--bark),16px 15px var(--bark),15px 16px var(--bark),17px 16px var(--bark),12px 17px var(--text-dark),20px 17px var(--text-dark),9px 18px var(--text-dark),23px 18px var(--text-dark),14px 19px var(--bark),18px 19px var(--bark),13px 20px var(--bark),19px 20px var(--bark),11px 21px var(--text-dark),21px 21px var(--text-dark);
  transform: scale(7);
}
.pixel-canopy {
  box-shadow: 31px 0 var(--forest),32px 0 var(--forest),30px 1px var(--forest-hi),31px 1px var(--forest),32px 1px var(--forest),33px 1px var(--forest-hi),28px 2px var(--forest),29px 2px var(--forest-hi),30px 2px var(--forest-shadow),31px 2px var(--forest),32px 2px var(--forest),33px 2px var(--forest-shadow),34px 2px var(--forest-hi),35px 2px var(--forest),26px 3px var(--forest-hi),27px 3px var(--forest),28px 3px var(--forest-shadow),29px 3px var(--forest),30px 3px var(--forest-hi),31px 3px var(--forest),32px 3px var(--forest),33px 3px var(--forest-hi),34px 3px var(--forest),35px 3px var(--forest-shadow),36px 3px var(--forest),37px 3px var(--forest-hi),24px 4px var(--forest),25px 4px var(--forest-hi),26px 4px var(--forest),27px 4px var(--forest-shadow),28px 4px var(--forest),29px 4px var(--forest-hi),30px 4px var(--forest),31px 4px var(--forest),32px 4px var(--forest-glow),33px 4px var(--forest),34px 4px var(--forest-hi),35px 4px var(--forest),36px 4px var(--forest-shadow),37px 4px var(--forest),38px 4px var(--forest-hi),39px 4px var(--forest),22px 5px var(--forest-hi),23px 5px var(--forest),24px 5px var(--forest-shadow),25px 5px var(--forest),26px 5px var(--forest-hi),27px 5px var(--forest),28px 5px var(--forest),29px 5px var(--forest-shadow),30px 5px var(--forest),31px 5px var(--forest),32px 5px var(--forest),33px 5px var(--forest),34px 5px var(--forest-shadow),35px 5px var(--forest),36px 5px var(--forest-hi),37px 5px var(--forest),38px 5px var(--forest),39px 5px var(--forest-shadow),40px 5px var(--forest),41px 5px var(--forest-hi),20px 6px var(--forest),21px 6px var(--forest-hi),22px 6px var(--forest),23px 6px var(--forest-shadow),24px 6px var(--forest),25px 6px var(--forest),26px 6px var(--forest-hi),27px 6px var(--forest),28px 6px var(--forest),29px 6px var(--forest),30px 6px var(--forest-hi),31px 6px var(--forest),32px 6px var(--forest),33px 6px var(--forest),34px 6px var(--forest-hi),35px 6px var(--forest),36px 6px var(--forest),37px 6px var(--forest),38px 6px var(--forest-hi),39px 6px var(--forest),40px 6px var(--forest),41px 6px var(--forest-shadow),42px 6px var(--forest),43px 6px var(--forest-hi),20px 7px var(--forest-hi),22px 7px var(--forest),24px 7px var(--forest-shadow),26px 7px var(--forest),28px 7px var(--forest-hi),30px 7px var(--forest),32px 7px var(--forest),34px 7px var(--forest),36px 7px var(--forest-hi),38px 7px var(--forest),40px 7px var(--forest-shadow),42px 7px var(--forest),44px 7px var(--forest-hi),23px 8px var(--forest),25px 8px var(--forest-hi),27px 8px var(--forest),29px 8px var(--forest-shadow),31px 8px var(--forest),33px 8px var(--forest),35px 8px var(--forest-shadow),37px 8px var(--forest),39px 8px var(--forest-hi),41px 8px var(--forest),24px 9px var(--forest-shadow),28px 9px var(--forest),32px 9px var(--forest),36px 9px var(--forest),40px 9px var(--forest-shadow);
  transform: scale(9);
}
.pixel-full-tree {
  box-shadow: 31px 0 var(--forest),32px 0 var(--forest),30px 1px var(--forest-hi),31px 1px var(--forest),32px 1px var(--forest),33px 1px var(--forest-hi),29px 2px var(--forest),30px 2px var(--forest-shadow),31px 2px var(--forest),32px 2px var(--forest),33px 2px var(--forest-shadow),34px 2px var(--forest),28px 3px var(--forest-hi),29px 3px var(--forest),30px 3px var(--forest),31px 3px var(--forest-hi),32px 3px var(--forest),33px 3px var(--forest),34px 3px var(--forest),35px 3px var(--forest-hi),27px 4px var(--forest),28px 4px var(--forest-shadow),29px 4px var(--forest),30px 4px var(--forest-hi),31px 4px var(--forest),32px 4px var(--forest),33px 4px var(--forest-hi),34px 4px var(--forest),35px 4px var(--forest-shadow),36px 4px var(--forest),30px 5px var(--bark),31px 5px var(--bark),32px 5px var(--bark-hi),33px 5px var(--bark),30px 6px var(--bark),31px 6px var(--bark-hi),32px 6px var(--bark),33px 6px var(--bark),30px 7px var(--bark),31px 7px var(--bark),32px 7px var(--bark-hi),33px 7px var(--bark),29px 8px var(--bark),30px 8px var(--bark),31px 8px var(--bark-deep),32px 8px var(--bark),33px 8px var(--bark),34px 8px var(--bark),28px 9px var(--bark),29px 9px var(--bark-deep),30px 9px var(--bark),34px 9px var(--bark-deep),35px 9px var(--bark),36px 9px var(--bark),27px 10px var(--bark),28px 10px var(--bark),36px 10px var(--bark),37px 10px var(--bark);
  transform: scale(8);
}
@keyframes pixel-draw { from { opacity: 0; filter: saturate(0); } to { opacity: 1; filter: saturate(1); } }
.sprite-frame:hover { filter: brightness(1.12); }

.trunk-section {
  width: 144px;
  height: 360px;
  background-color: var(--bark);
  box-shadow: inset 0 0 0 8px var(--bark-deep), 16px 16px 0 var(--bark-hi), -12px 52px 0 var(--bark-deep), 20px 120px 0 var(--bark-hi), -18px 208px 0 var(--bark-deep);
  image-rendering: pixelated;
  position: relative;
}
.trunk-section span { position: absolute; width: 16px; height: 32px; background: var(--bark-hi); }
.trunk-section span:nth-child(1) { left: 28px; top: 42px; }
.trunk-section span:nth-child(2) { right: 30px; top: 112px; background: var(--bark-deep); }
.trunk-section span:nth-child(3) { left: 52px; top: 210px; }
.trunk-section span:nth-child(4) { right: 44px; bottom: 36px; background: var(--bark-deep); }
.soil-band { position: absolute; bottom: 25%; left: 8%; right: 8%; height: 72px; background: var(--text-dark); box-shadow: 0 12px 0 var(--bark-deep), 32px -16px 0 var(--bark), 96px -8px 0 var(--text-dark), 160px -20px 0 var(--bark); opacity: 0.22; }
.leaf-field { position: absolute; inset: 0; background-image: radial-gradient(var(--forest-hi) 2px, transparent 3px); background-size: 28px 28px; opacity: 0.18; }
.sky-bands { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(8, 1fr); }
.sky-bands i:nth-child(1) { background: var(--sky-8); } .sky-bands i:nth-child(2) { background: var(--sky-7); } .sky-bands i:nth-child(3) { background: var(--sky-6); } .sky-bands i:nth-child(4) { background: var(--sky-5); } .sky-bands i:nth-child(5) { background: var(--sky-4); } .sky-bands i:nth-child(6) { background: var(--sky-3); } .sky-bands i:nth-child(7) { background: var(--sky-2); } .sky-bands i:nth-child(8) { background: var(--sky-1); }

.char-scatter { display: inline-block; transition: transform 0.3s steps(2), opacity 0.3s steps(2); }
.decompose-text.active .char-scatter { transform: translate(var(--offset-x), var(--offset-y)); opacity: var(--char-opacity); }
.act.in-view .pixel-label::before { content: "■ "; color: var(--forest-hi); }

@media (max-width: 767px) {
  .split-container { position: relative; flex-direction: column; overflow: visible; }
  .panel { width: 100vw; height: auto; overflow: visible; }
  .panel-track { position: relative; transform: none !important; }
  .panel-border { display: none; }
  .scroll-spacer { display: none; }
  .act { min-height: 70vh; padding: 2rem 1.5rem; }
  .panel--canopy .panel-track { display: flex; flex-direction: column-reverse; }
  .hero-title { font-size: 32px; }
  .section-heading { font-size: 24px; }
  .pixel-canopy { transform: scale(6); }
  .pixel-full-tree { transform: scale(6); }
  .sprite-huge, .sprite-large { width: 260px; height: 300px; }
}