:root {
  /* DESIGN typography tokens: IBM Plex Mono**. Mono*. IBM Plex Sans KR** KR* for explanatory copy */
  --mint: #54D6A5;
  --ink: #07080D;
  --slate: #656B78;
  --red: #E5483F;
  --violet: #A78BFA;
  --blue: #6DA9FF;
  --paper: #F4EFE2;
  --panel: rgba(244, 239, 226, .08);
  --line: rgba(244, 239, 226, .18);
  --font-hangul: 'Gowun Dodum', 'IBM Plex Sans KR', sans-serif;
  --font-title: 'Black Han Sans', 'Gowun Dodum', sans-serif;
  --font-body: 'IBM Plex Sans KR', 'Inter', sans-serif;
  --font-code: 'Space Mono', monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--paper);
  background: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}

body.assembled .jamo-h { transform: translate(-42px, -80px) rotate(-2deg) scale(1); }
body.assembled .jamo-a { transform: translate(76px, -12px) rotate(1deg) scale(1); }
body.assembled .jamo-n { transform: translate(-32px, 78px) rotate(0deg) scale(1); }
body.assembled .ink-bloom { animation: bloom .9s ease-out; }

.grain, .cursor-ink {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.grain {
  opacity: .24;
  background-image: radial-gradient(circle at 20% 30%, rgba(244,239,226,.09) 0 1px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(84,214,165,.08) 0 1px, transparent 1px);
  background-size: 34px 34px, 58px 58px;
  mix-blend-mode: screen;
}

.cursor-ink {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  inset: auto;
  background: radial-gradient(circle, rgba(84,214,165,.6), transparent 68%);
  transform: translate(-50%, -50%);
  filter: blur(2px);
}

.site-mark {
  position: fixed;
  top: 28px;
  left: 32px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-code);
  font-size: 14px;
  letter-spacing: .05em;
  color: rgba(244,239,226,.75);
}

.mark-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 18px var(--mint);
}

.chapter-rail {
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: 14px;
}

.rail-step {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: var(--slate);
  border: 1px solid rgba(244,239,226,.18);
  border-radius: 50%;
  font-family: var(--font-code);
  font-size: 12px;
  background: rgba(7,8,13,.62);
  transition: .35s ease;
}

.rail-step.active { color: var(--ink); background: var(--mint); border-color: var(--mint); box-shadow: 0 0 24px rgba(84,214,165,.45); }

.workbench {
  position: relative;
  min-height: 100vh;
  padding: 110px 9vw;
  display: grid;
  align-items: center;
  overflow: hidden;
}

.draft-grid, .poster-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(244,239,226,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(244,239,226,.06) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 60% 44%, black 0 45%, transparent 78%);
}

.hero-workbench {
  grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.2fr);
  gap: 6vw;
  background: radial-gradient(circle at 70% 50%, rgba(109,169,255,.16), transparent 35%), radial-gradient(circle at 18% 70%, rgba(167,139,250,.14), transparent 32%), var(--ink);
}

.hero-copy, .inspector-panel, .rail-lab, .release-copy { position: relative; z-index: 2; }

.kicker {
  margin: 0 0 18px;
  color: var(--mint);
  font-family: var(--font-code);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .2em;
}

h1, h2 { margin: 0; line-height: .92; font-weight: 400; }
h1 { font-family: var(--font-title); font-size: clamp(54px, 8vw, 128px); max-width: 820px; }
h2 { font-family: var(--font-title); font-size: clamp(44px, 6vw, 96px); max-width: 850px; }
p { color: rgba(244,239,226,.72); font-size: clamp(16px, 1.35vw, 21px); line-height: 1.7; }

.atelier-button {
  margin-top: 26px;
  padding: 16px 24px;
  border: 1px solid var(--mint);
  border-radius: 999px;
  background: transparent;
  color: var(--mint);
  font-family: var(--font-code);
  text-transform: uppercase;
  letter-spacing: .12em;
  cursor: pointer;
  box-shadow: inset 0 0 18px rgba(84,214,165,.08);
  transition: .3s ease;
}

.atelier-button:hover { background: var(--mint); color: var(--ink); transform: translateY(-3px); }

.syllable-stage { position: relative; z-index: 2; min-height: 620px; display: grid; place-items: center; }
.syllable-room {
  position: relative;
  width: min(62vw, 560px);
  aspect-ratio: 1;
  border: 2px solid rgba(244,239,226,.32);
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(244,239,226,.11), rgba(244,239,226,.02));
  box-shadow: 0 38px 90px rgba(0,0,0,.45), inset 0 0 60px rgba(244,239,226,.04);
}

.guide { position: absolute; background: rgba(244,239,226,.16); }
.guide-x { height: 1px; left: 0; right: 0; top: 50%; }
.guide-y { width: 1px; top: 0; bottom: 0; left: 50%; }

.jamo {
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: var(--font-hangul);
  font-size: clamp(132px, 18vw, 250px);
  line-height: 1;
  color: var(--paper);
  text-shadow: 0 0 30px rgba(244,239,226,.16);
  transition: transform 1.05s cubic-bezier(.16,1,.3,1), color .4s ease;
}

.jamo-h { color: var(--blue); transform: translate(-520px, -210px) rotate(-18deg) scale(.86); }
.jamo-a { color: var(--mint); transform: translate(430px, -20px) rotate(14deg) scale(.9); }
.jamo-n { color: var(--violet); transform: translate(-120px, 430px) rotate(-10deg) scale(.9); }
.ink-bloom { position: absolute; inset: 25%; border-radius: 50%; background: radial-gradient(circle, rgba(229,72,63,.3), rgba(84,214,165,.18), transparent 70%); opacity: 0; transform: scale(.3); }
.coordinate-label { position: absolute; font-family: var(--font-code); color: var(--slate); font-size: 13px; letter-spacing: .08em; }
.label-top { top: 20px; left: 52%; }
.label-side { right: 0; bottom: 42px; writing-mode: vertical-rl; }
.studio-note { position: absolute; left: 9vw; bottom: 35px; font-family: var(--font-code); color: var(--slate); font-size: 12px; }

.debug-workbench { grid-template-columns: 1fr .9fr; gap: 6vw; background: linear-gradient(180deg, var(--ink), #10121a); }
.chapter-stamp { position: absolute; right: 10vw; top: 12vh; font-family: var(--font-title); font-size: clamp(90px, 18vw, 260px); color: rgba(229,72,63,.12); transform: rotate(-8deg); }
.unicode-card {
  display: grid;
  grid-template-columns: 58px 1fr;
  max-width: 720px;
  border: 1px solid var(--line);
  border-radius: 26px;
  overflow: hidden;
  background: rgba(7,8,13,.74);
  box-shadow: 0 28px 90px rgba(0,0,0,.38);
}
.code-gutter { display: grid; padding: 24px 0; place-items: center; background: rgba(244,239,226,.06); color: var(--slate); font-family: var(--font-code); }
pre { margin: 0; padding: 24px; overflow: auto; font-family: var(--font-code); font-size: clamp(14px, 1.5vw, 20px); line-height: 1.8; }
.token.key, .token.fn { color: var(--blue); }
.token.string { color: var(--mint); }
.token-button { border: 1px solid rgba(84,214,165,.45); border-radius: 10px; background: rgba(84,214,165,.12); color: var(--mint); font: inherit; padding: 2px 10px; cursor: pointer; transition: .25s ease; }
.token-button:hover, .token-button.active { background: var(--mint); color: var(--ink); }
.drawer-stack { position: relative; z-index: 2; display: grid; gap: 18px; }
.jamo-drawer { display: grid; grid-template-columns: 112px 1fr; gap: 22px; align-items: center; padding: 22px; border: 1px solid var(--line); border-radius: 28px; background: rgba(244,239,226,.07); transform: translateX(24px); opacity: .72; transition: .45s ease; }
.jamo-drawer.active { transform: translateX(-8px) scale(1.03); opacity: 1; border-color: var(--mint); box-shadow: 0 0 34px rgba(84,214,165,.18); }
.drawer-glyph { font-family: var(--font-hangul); font-size: 84px; color: var(--paper); text-align: center; }
.jamo-drawer strong { display: block; color: var(--paper); font-family: var(--font-code); text-transform: uppercase; letter-spacing: .08em; }
.jamo-drawer p { margin: 8px 0 0; font-size: 15px; }

.compose-workbench { grid-template-columns: .9fr 1.1fr; gap: 7vw; background: radial-gradient(circle at 20% 40%, rgba(84,214,165,.13), transparent 35%), #0b0c12; }
.slider-bench { position: relative; height: 110px; margin: 40px 0 18px; }
.slider-track { position: absolute; left: 0; right: 0; top: 50%; height: 10px; border-radius: 999px; background: rgba(244,239,226,.14); overflow: hidden; }
.slider-fill { display: block; height: 100%; width: 54%; background: linear-gradient(90deg, var(--blue), var(--mint)); box-shadow: 0 0 24px rgba(84,214,165,.45); }
.rail-handle { position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); width: 92px; height: 92px; border-radius: 26px; border: 1px solid var(--mint); background: var(--ink); color: var(--mint); font-family: var(--font-hangul); font-size: 58px; cursor: grab; box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 34px rgba(84,214,165,.28); }
.rail-handle.dragging { cursor: grabbing; transform: translate(-50%, -50%) scale(1.08) rotate(4deg); }
.lab-reading { font-family: var(--font-code); color: var(--slate); font-size: 14px; }
.compose-poster { position: relative; min-height: 620px; display: grid; place-items: center; border-radius: 42px; border: 1px solid var(--line); background: rgba(244,239,226,.06); overflow: hidden; }
.poster-glyph { position: relative; z-index: 2; font-family: var(--font-title); font-size: clamp(220px, 36vw, 520px); color: var(--paper); text-shadow: 18px 18px 0 rgba(109,169,255,.18), -14px -12px 0 rgba(167,139,250,.2); transition: transform .25s ease; }
.brush-trail { position: absolute; width: 52%; height: 22px; border-radius: 999px; filter: blur(12px); opacity: .6; }
.trail-one { background: var(--red); transform: rotate(-18deg); top: 30%; left: 16%; }
.trail-two { background: var(--mint); transform: rotate(26deg); bottom: 24%; right: 12%; }

.release-workbench { grid-template-columns: 1fr .78fr; gap: 6vw; background: linear-gradient(180deg, #0b0c12, var(--ink)); }
.constellation { position: absolute; inset: 0; pointer-events: none; }
.constellation span { position: absolute; left: var(--x); top: var(--y); color: rgba(109,169,255,.55); font-family: var(--font-code); font-size: 12px; animation: sparkle 4s ease-in-out infinite; animation-delay: var(--d); }
.release-copy h2 { font-family: var(--font-hangul); line-height: 1.25; color: var(--paper); }
.manuscript-strips { position: relative; z-index: 2; display: flex; gap: 22px; justify-content: center; align-items: center; }
.strip { width: 112px; min-height: 440px; padding: 24px 12px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; border: 1px solid rgba(244,239,226,.26); border-radius: 999px; background: rgba(244,239,226,.08); backdrop-filter: blur(10px); }
.strip.tall { min-height: 620px; border-color: var(--mint); box-shadow: 0 0 42px rgba(84,214,165,.16); }
.strip span { writing-mode: vertical-rl; font-family: var(--font-hangul); font-size: 48px; color: var(--paper); }
.strip:not(.tall) span { font-size: 32px; color: rgba(244,239,226,.68); }

@keyframes bloom { 0% { opacity: 0; transform: scale(.2); } 45% { opacity: .9; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes sparkle { 0%,100% { opacity: .18; transform: translateY(0) scale(.9); } 50% { opacity: .85; transform: translateY(-12px) scale(1.08); } }

@media (max-width: 900px) {
  .workbench, .hero-workbench, .debug-workbench, .compose-workbench, .release-workbench { grid-template-columns: 1fr; padding: 100px 28px; }
  .chapter-rail { right: 16px; }
  .syllable-room { width: min(86vw, 500px); }
  .site-mark { left: 22px; }
  .manuscript-strips { transform: scale(.86); }
}