:root {
  --porcelain: #F2EEE8;
  --blush: #F5B7C8;
  --mist: #BFD7EA;
  --lavender: #D8C7FF;
  --plum: #2A2236;
  --mint: #BDEBD2;
  --amber: #FFD48A;
  --base: #12101A;
  --display: Fraunces, Georgia, 'Times New Roman', serif;
  --sans: 'Nunito Sans', ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --jp: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;
  --code-fragments-tone: #2A2236;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--plum);
  font-family: var(--sans);
  background:
    radial-gradient(circle at 18% 12%, rgba(216, 199, 255, .42), transparent 31vw),
    radial-gradient(circle at 86% 72%, rgba(189, 235, 210, .38), transparent 34vw),
    linear-gradient(135deg, #F2EEE8 0%, #eee9e1 47%, #F2EEE8 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(120deg, rgba(255,255,255,.34), transparent 38%, rgba(42,34,54,.035) 100%),
    repeating-linear-gradient(135deg, rgba(42,34,54,.022) 0 1px, transparent 1px 34px);
  mix-blend-mode: multiply;
  z-index: 1;
}

.ambient-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.glow { position: absolute; filter: blur(36px); opacity: .62; border-radius: 999px; animation: breathe 10s ease-in-out infinite; }
.glow-blush { width: 38vw; height: 38vw; left: -10vw; top: 28vh; background: var(--blush); }
.glow-mint { width: 32vw; height: 32vw; right: -8vw; bottom: 8vh; background: var(--mint); animation-delay: -4s; }
.punctuation-field {
  position: absolute;
  width: 180vw;
  left: -30vw;
  top: 45vh;
  transform: rotate(-18deg);
  font: 700 8vw/1 var(--mono);
  letter-spacing: .08em;
  color: rgba(42, 34, 54, .035);
  text-shadow: 1px 1px 1px rgba(255,255,255,.7), -1px -1px 1px rgba(18,16,26,.05);
  white-space: nowrap;
}

.mono { font-family: var(--mono); }
.jp-fragment { font-family: var(--jp); }

.branch-rail {
  position: fixed;
  left: clamp(14px, 2vw, 28px);
  top: 50%;
  transform: translateY(-50%) rotate(-6deg);
  z-index: 20;
  display: grid;
  gap: 14px;
  padding: 16px 10px;
  border-radius: 999px;
  background: rgba(242,238,232,.55);
  box-shadow: inset 8px 8px 18px rgba(42,34,54,.09), inset -8px -8px 18px rgba(255,255,255,.74), 10px 20px 34px rgba(42,34,54,.08);
  backdrop-filter: blur(12px);
}

.rail-pill {
  width: 19px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #ebe5dc;
  box-shadow: inset 4px 4px 7px rgba(42,34,54,.13), inset -5px -5px 10px rgba(255,255,255,.84);
  transition: transform .45s ease, background .45s ease;
}

.rail-pill span { width: 7px; height: 7px; border-radius: 50%; background: rgba(42,34,54,.28); transition: .45s ease; }
.rail-pill.active { background: linear-gradient(180deg, var(--blush), var(--lavender)); transform: translateX(5px) scale(1.08); }
.rail-pill.active span { height: 27px; border-radius: 999px; background: var(--plum); }

.scene {
  position: relative;
  min-height: 100vh;
  padding: clamp(44px, 7vw, 92px) clamp(22px, 6vw, 88px) clamp(44px, 7vw, 92px) clamp(58px, 9vw, 130px);
  display: grid;
  place-items: center;
  isolation: isolate;
}

.soft-shell, .editor-well, .glass-pane, .commit-seal {
  background: rgba(242,238,232,.86);
  box-shadow:
    22px 28px 58px rgba(42,34,54,.13),
    -18px -18px 40px rgba(255,255,255,.86),
    inset 10px 10px 22px rgba(42,34,54,.075),
    inset -10px -12px 24px rgba(255,255,255,.78);
}

.hero-shell {
  width: min(1160px, 91vw);
  min-height: 76vh;
  border-radius: 62px 120px 78px 150px;
  padding: clamp(30px, 6vw, 78px);
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  align-items: end;
  gap: clamp(26px, 5vw, 70px);
  transform: rotate(-2deg);
}

.wordmark-wrap { transform: rotate(2deg) translateY(-3vh); }
.wordmark {
  font-family: var(--display);
  font-size: clamp(4.8rem, 16vw, 13rem);
  line-height: .78;
  margin: 0;
  letter-spacing: -.085em;
  color: var(--porcelain);
  text-shadow: 2px 2px 4px rgba(255,255,255,.9), -3px -3px 7px rgba(42,34,54,.19), 0 18px 26px rgba(42,34,54,.06);
}
.wordmark .dot-cavity {
  display: inline-grid;
  place-items: center;
  width: .2em;
  height: .2em;
  margin: 0 .02em;
  border-radius: 999px;
  background: #e7e0d7;
  box-shadow: inset 7px 7px 13px rgba(42,34,54,.18), inset -7px -7px 13px rgba(255,255,255,.82);
  vertical-align: middle;
}
.dot-cavity i { width: 3px; height: .14em; background: var(--plum); border-radius: 4px; animation: blink 1.05s steps(2) infinite; }
.embossed-label, .kicker { color: rgba(42,34,54,.62); letter-spacing: .08em; }
.embossed-label { margin: 24px 0 0 1vw; font-weight: 800; text-transform: lowercase; }
.scene-initialize .jp-fragment { color: rgba(245,183,200,.65); font-size: clamp(1.6rem, 5vw, 4rem); margin-left: .3vw; }

.opening-well {
  min-height: 340px;
  border-radius: 38px 64px 44px 74px;
  padding: 34px;
  transform: rotate(4deg);
  position: relative;
}
.well-tab {
  position: absolute;
  top: -20px;
  right: 42px;
  padding: 12px 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(245,183,200,.72), rgba(216,199,255,.62));
  font-family: var(--mono);
  box-shadow: 8px 12px 24px rgba(42,34,54,.1), inset -5px -5px 12px rgba(255,255,255,.5);
}
.code-line { margin: 52px 0 18px; padding: 17px 20px; border-radius: 20px; background: rgba(255,255,255,.28); box-shadow: inset 6px 6px 14px rgba(42,34,54,.07), inset -6px -6px 14px rgba(255,255,255,.8); }
.code-line.muted { margin-top: 0; color: rgba(42,34,54,.48); }
.story-button { border: 0; color: var(--plum); font: 900 1rem var(--sans); cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; }
.run-feeling { margin-top: 22px; padding: 17px 28px; border-radius: 999px; background: var(--mint); box-shadow: 10px 13px 24px rgba(42,34,54,.12), inset -6px -6px 13px rgba(255,255,255,.58), inset 5px 5px 12px rgba(42,34,54,.07); }
.story-button:active, .pressed { transform: scale(.96) translateY(3px); box-shadow: inset 8px 8px 15px rgba(42,34,54,.15), inset -8px -8px 18px rgba(255,255,255,.7); }

.floating-note { position: absolute; z-index: 3; padding: 12px 18px; border-radius: 18px; background: rgba(255,255,255,.32); box-shadow: inset 3px 3px 8px rgba(42,34,54,.08), inset -4px -4px 10px rgba(255,255,255,.78); color: rgba(42,34,54,.55); }
.note-one { right: 12vw; top: 16vh; transform: rotate(8deg); }
.note-two { left: 14vw; bottom: 15vh; transform: rotate(-7deg); }
.cursor-ghost { position: absolute; width: 18px; height: 48px; border-radius: 999px; background: rgba(191,215,234,.45); box-shadow: 0 0 25px rgba(191,215,234,.8); animation: drift 7s ease-in-out infinite; }
.ghost-one { left: 22vw; bottom: 12vh; }

.observe-shell { width: min(1080px, 90vw); min-height: 70vh; border-radius: 140px 58px 120px 54px; padding: clamp(30px,5vw,66px); display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(28px, 5vw, 68px); align-items: center; transform: rotate(2deg); }
.scene-copy { transform: rotate(-2deg); }
h2 { font-family: var(--display); font-size: clamp(3rem, 7vw, 7.5rem); line-height: .86; letter-spacing: -.055em; margin: 0 0 24px; }
.scene-copy p:not(.kicker), .sealed-glass p { font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.7; max-width: 34rem; }
.diagonal-tabs { position: absolute; top: 9vh; right: 10vw; display: flex; gap: 12px; transform: rotate(-12deg); }
.diagonal-tabs span { padding: 11px 20px; border-radius: 999px; background: rgba(242,238,232,.76); box-shadow: 8px 12px 24px rgba(42,34,54,.08), inset -6px -6px 12px rgba(255,255,255,.7); font-family: var(--mono), var(--jp); }
.glass-pane { min-height: 410px; border-radius: 54px 92px 62px 86px; padding: 38px; position: relative; overflow: hidden; background: rgba(255,255,255,.24); backdrop-filter: blur(18px); transform: rotate(-3deg); }
.message-line { width: fit-content; max-width: 88%; padding: 18px 22px; border-radius: 26px; margin: 26px 0; background: rgba(242,238,232,.72); box-shadow: inset 5px 5px 13px rgba(42,34,54,.08), inset -6px -6px 14px rgba(255,255,255,.82); font-family: var(--jp); }
.pending { margin-left: auto; color: rgba(42,34,54,.58); font-family: var(--mono); }
.typing-dots { animation: blink 1.2s steps(2) infinite; }
.porcelain-switch { position: absolute; right: 34px; bottom: 34px; width: 96px; height: 48px; border-radius: 999px; background: #e7e1d8; box-shadow: inset 8px 8px 16px rgba(42,34,54,.13), inset -8px -8px 18px rgba(255,255,255,.8); padding: 7px; }
.porcelain-switch span { display: block; width: 34px; height: 34px; border-radius: 50%; background: var(--mint); box-shadow: 5px 6px 11px rgba(42,34,54,.13), inset -4px -4px 8px rgba(255,255,255,.65); animation: switchPulse 5s ease-in-out infinite; }
.moth { position: absolute; width: 18px; height: 12px; background: var(--amber); border-radius: 60% 20% 60% 20%; opacity: .75; filter: blur(.2px); animation: moth 6s ease-in-out infinite; }
.moth::after { content: ""; position: absolute; width: 16px; height: 10px; left: 8px; top: 2px; border-radius: 20% 60% 20% 60%; background: var(--lavender); }
.moth-a { top: 42px; right: 74px; }
.moth-b { bottom: 112px; left: 70px; animation-delay: -2s; }

.diff-board { width: min(1120px, 91vw); min-height: 72vh; border-radius: 50px 136px 62px 112px; display: grid; grid-template-columns: 88px 1fr; overflow: hidden; transform: rotate(-1.5deg); }
.diff-gutter { display: grid; align-content: center; gap: 22px; padding: 30px 0; background: rgba(42,34,54,.04); box-shadow: inset -8px 0 22px rgba(42,34,54,.07); }
.diff-gutter span { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto; border-radius: 50%; font: 900 1.4rem var(--mono); transform: scale(.7); opacity: .45; transition: .5s ease; }
.diff-gutter .minus { background: rgba(245,183,200,.62); }
.diff-gutter .plus { background: rgba(189,235,210,.72); }
.diff-gutter.filled span { transform: scale(1); opacity: 1; }
.diff-content { padding: clamp(34px, 6vw, 78px); }
.sentence-diff { position: relative; min-height: 220px; margin: 42px 0 28px; }
.fragment, .fragment-resolved { position: absolute; left: 0; right: 0; padding: 22px 28px; border-radius: 28px; font: 800 clamp(1.25rem, 3vw, 2.6rem) var(--sans); box-shadow: inset 7px 7px 16px rgba(42,34,54,.08), inset -8px -8px 18px rgba(255,255,255,.76); transition: transform .8s ease, opacity .8s ease; }
.fragment-a { top: 0; background: rgba(245,183,200,.35); transform: translateX(-16px); }
.fragment-b { top: 92px; background: rgba(189,235,210,.38); transform: translateX(26px); }
.fragment-resolved { top: 48px; background: rgba(255,212,138,.35); opacity: 0; transform: scale(.96); }
.scene-diff.resolved .fragment-a, .scene-diff.resolved .fragment-b { opacity: .12; transform: translateX(0) scale(.98); }
.scene-diff.resolved .fragment-resolved { opacity: 1; transform: scale(1); }
.conflict-scar { padding: 16px 20px; border-radius: 18px; color: rgba(42,34,54,.52); background: linear-gradient(90deg, rgba(245,183,200,.2), rgba(216,199,255,.24), rgba(189,235,210,.2)); }
.heart-breakpoints { position: absolute; inset: 0; pointer-events: none; }
.heart-bp { pointer-events: auto; position: absolute; left: var(--x); top: var(--y); width: 28px; height: 28px; border: 0; background: var(--blush); transform: rotate(-45deg); cursor: grab; box-shadow: 8px 10px 18px rgba(42,34,54,.12), inset -4px -4px 8px rgba(255,255,255,.55); }
.heart-bp::before, .heart-bp::after { content: ""; position: absolute; width: 28px; height: 28px; border-radius: 50%; background: inherit; }
.heart-bp::before { top: -14px; left: 0; }
.heart-bp::after { left: 14px; top: 0; }
.heart-bp.dragging { cursor: grabbing; filter: drop-shadow(0 0 18px rgba(245,183,200,.7)); }

.merge-chamber { width: min(1120px, 92vw); min-height: 73vh; border-radius: 120px 64px 150px 70px; padding: clamp(34px, 6vw, 76px); transform: rotate(1deg); }
.merge-ribbon { width: 100%; height: min(38vh, 360px); overflow: visible; }
.branch { fill: none; stroke-linecap: round; stroke-width: 18; filter: drop-shadow(0 10px 12px rgba(42,34,54,.12)); stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 1.8s cubic-bezier(.2,.8,.2,1); }
.branch-one { stroke: rgba(245,183,200,.9); }
.branch-two { stroke: rgba(191,215,234,.9); }
.branch-merge { stroke: rgba(189,235,210,.95); stroke-width: 12; transition-delay: .8s; }
.scene-resolve.active .branch { stroke-dashoffset: 0; }
.cursor-pair { display: flex; align-items: center; gap: 12px; }
.cursor-pair span { width: 16px; height: 44px; border-radius: 999px; background: var(--plum); opacity: .55; animation: cursorLean 2.5s ease-in-out infinite; }
.cursor-pair span:nth-child(2) { background: var(--blush); animation-delay: -.8s; }
.resolved-line { margin-top: 24px; font-size: clamp(1.4rem, 4vw, 3.5rem); color: rgba(42,34,54,.68); }

.commit-stage { width: min(980px, 90vw); min-height: 74vh; border-radius: 74px 150px 92px 120px; padding: clamp(28px, 5vw, 70px); display: grid; place-items: center; }
.sealed-glass { width: min(700px, 100%); padding: clamp(30px, 5vw, 60px); border-radius: 56px; background: rgba(255,255,255,.22); box-shadow: inset 10px 10px 24px rgba(42,34,54,.08), inset -12px -12px 24px rgba(255,255,255,.74), 0 24px 60px rgba(42,34,54,.1); backdrop-filter: blur(16px); text-align: center; }
.commit-seal { width: min(430px, 92%); aspect-ratio: 1 / .72; margin: 34px auto 20px; border: 0; border-radius: 48px; display: grid; place-items: center; color: var(--plum); background: radial-gradient(circle at 50% 25%, rgba(255,255,255,.58), transparent 34%), linear-gradient(145deg, var(--amber), #f8c2c2 82%); cursor: pointer; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, filter .45s ease; }
.commit-seal span { font: 900 clamp(1.4rem, 4vw, 2.6rem) var(--display); }
.commit-seal small { display: block; opacity: .58; margin-top: -22px; }
.commit-seal.committed { transform: translateY(15px) scale(.96); filter: saturate(1.15); box-shadow: inset 16px 16px 26px rgba(42,34,54,.16), inset -14px -14px 26px rgba(255,255,255,.58), 0 0 46px rgba(255,212,138,.88); }
.commit-output { color: rgba(42,34,54,.58); }
.final-label { position: absolute; right: 10vw; bottom: 8vh; }
.wordmark-small { font: 800 clamp(2rem, 5vw, 5rem) var(--display); color: rgba(42,34,54,.18); letter-spacing: -.06em; }

.pointer-trail { position: fixed; width: 16px; height: 16px; border-radius: 50%; pointer-events: none; z-index: 40; background: rgba(216,199,255,.55); box-shadow: 0 0 0 9px rgba(191,215,234,.18), 0 0 26px rgba(245,183,200,.55); transform: translate(-50%, -50%); opacity: 0; transition: opacity .35s ease; }
.scene.active .soft-shell { animation: pressureIn .9s cubic-bezier(.2,.8,.2,1) both; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes breathe { 50% { transform: scale(1.12) translate(2vw, -1vh); opacity: .45; } }
@keyframes pressureIn { from { transform: translateY(22px) scale(.985) rotate(var(--r, 0deg)); filter: blur(1px); } }
@keyframes drift { 50% { transform: translate(36px, -46px) rotate(8deg); opacity: .45; } }
@keyframes switchPulse { 50% { transform: translateX(48px); background: var(--amber); } }
@keyframes moth { 50% { transform: translate(22px, -18px) rotate(16deg); opacity: .35; } }
@keyframes cursorLean { 50% { transform: translateX(10px) rotate(7deg); opacity: .85; } }

@media (max-width: 820px) {
  .scene { padding-left: 54px; }
  .hero-shell, .observe-shell { grid-template-columns: 1fr; }
  .hero-shell, .observe-shell, .diff-board, .merge-chamber, .commit-stage { border-radius: 44px 72px 50px 82px; }
  .wordmark { font-size: clamp(4.1rem, 22vw, 7rem); }
  .diff-board { grid-template-columns: 54px 1fr; }
  .diff-content { padding: 30px 22px; }
  .fragment, .fragment-resolved { font-size: 1.04rem; }
  .diagonal-tabs { display: none; }
}