:root {
  /* DESIGN TOKENS: Playfair Display* Display** elegance deliberate anti-design misalignment primary elegant typeface oversized romantic headings headlines slice through annotation */
  --void: #05020A;
  --magenta: #FF2E88;
  --cyan: #24F7D7;
  --lime: #C7FF4F;
  --uv: #5D2CFF;
  --ivory: #F4E8FF;
  --amber: #FFB547;
  --playfair: "Playfair Display", Playfair, Georgia, "Times New Roman", serif;
  --syne: "Syne", Inter, system-ui, sans-serif;
  --jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ivory);
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 181, 71, .18), transparent 18rem),
    radial-gradient(circle at 85% 14%, rgba(93, 44, 255, .3), transparent 26rem),
    radial-gradient(circle at 60% 80%, rgba(255, 46, 136, .14), transparent 22rem),
    var(--void);
  font-family: var(--syne);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(244, 232, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 232, 255, .025) 1px, transparent 1px);
  background-size: 53px 53px, 47px 47px;
  mask-image: radial-gradient(circle, #000 10%, transparent 72%);
  z-index: 2;
}

body::after {
  content: "renai.dev / cracked love ide / renai.dev / cracked love ide";
  position: fixed;
  left: -8vw;
  bottom: 9vh;
  width: 130vw;
  transform: rotate(-6deg);
  color: rgba(199, 255, 79, .055);
  font: 800 clamp(3rem, 10vw, 9rem)/1 var(--syne);
  letter-spacing: -.07em;
  pointer-events: none;
}

.cursor-glow {
  position: fixed;
  width: 18rem;
  height: 18rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 181, 71, .26), rgba(255, 46, 136, .09) 34%, transparent 67%);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 4;
  opacity: .55;
}

.changelog {
  position: fixed;
  top: 1.2rem;
  right: 1rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: .36rem;
  transform: rotate(2deg);
}

.changelog a {
  color: var(--ivory);
  text-decoration: none;
  font: 800 .72rem/1 var(--syne);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .38rem .5rem;
  border: 1px solid rgba(36, 247, 215, .42);
  background: rgba(5, 2, 10, .38);
  box-shadow: 0 0 1rem rgba(93, 44, 255, .25);
  backdrop-filter: blur(12px);
  transition: transform .35s ease, color .35s ease, border-color .35s ease;
}

.changelog a:nth-child(even) { transform: translateX(-.75rem) rotate(-3deg); }
.changelog a.active, .changelog a:hover { color: var(--lime); border-color: var(--magenta); transform: translateX(-1.2rem) rotate(4deg); }

.diff-rail {
  position: fixed;
  right: 1.1rem;
  bottom: 1rem;
  z-index: 22;
  width: min(18rem, 47vw);
  padding: .9rem;
  border: 1px solid rgba(255, 181, 71, .45);
  border-radius: 1rem 0 1.8rem .4rem;
  background: linear-gradient(135deg, rgba(244, 232, 255, .12), rgba(93, 44, 255, .16));
  backdrop-filter: blur(18px);
  box-shadow: -1rem 1rem 3rem rgba(0,0,0,.55), 0 0 1.4rem rgba(255,181,71,.16) inset;
  font-family: var(--syne);
  transform: rotate(-1deg);
}

.diff-title {
  display: block;
  color: var(--amber);
  font-weight: 800;
  letter-spacing: .32em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}

.diff-line { display: block; font-size: .78rem; line-height: 1.45; }
.add { color: var(--lime); }
.remove { color: var(--magenta); }
.note { color: var(--cyan); margin-top: .35rem; }

.chapter {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  padding: clamp(5rem, 8vw, 8rem) clamp(1rem, 5vw, 5rem);
  display: grid;
  grid-template-columns: minmax(4rem, .32fr) minmax(0, 1.08fr) minmax(16rem, .82fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3.5rem);
  overflow: hidden;
}

.chapter::before {
  content: "";
  position: absolute;
  inset: 9% 5%;
  border: 1px solid rgba(244, 232, 255, .08);
  transform: rotate(var(--tilt, -1deg));
  z-index: -2;
}

.chapter::after {
  content: "";
  position: absolute;
  width: 42rem;
  height: 42rem;
  border-radius: 50% 36% 55% 38%;
  background: radial-gradient(circle at 50% 42%, rgba(93, 44, 255, .35), rgba(255, 46, 136, .11) 43%, transparent 69%);
  filter: blur(10px);
  animation: morphBlob 13s ease-in-out infinite;
  z-index: -3;
}

.chapter-init::after { right: -14rem; top: 4rem; }
.chapter-bug { --tilt: 1.3deg; }
.chapter-bug::after { left: 18%; bottom: -18rem; background: radial-gradient(circle, rgba(255,181,71,.22), rgba(255,46,136,.14) 46%, transparent 70%); }
.chapter-merge::after { right: 16%; top: -16rem; background: radial-gradient(circle, rgba(199,255,79,.18), rgba(93,44,255,.2), transparent 68%); }
.chapter-deploy::after { left: -13rem; top: 20%; background: radial-gradient(circle, rgba(36,247,215,.18), rgba(255,46,136,.12), transparent 70%); }
.chapter-remain::after { right: -8rem; bottom: -12rem; opacity: .7; }

.left-marks {
  align-self: stretch;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(255, 181, 71, .28);
}

.vertical {
  writing-mode: vertical-rl;
  font-family: var(--jp);
  color: var(--cyan);
  letter-spacing: .24em;
  font-size: .82rem;
  text-shadow: 0 0 1.2rem rgba(36,247,215,.55);
}

.caption {
  position: absolute;
  bottom: 7vh;
  left: .4rem;
  width: 12rem;
  color: var(--amber);
  font: 800 .7rem/1.2 var(--syne);
  text-transform: uppercase;
  letter-spacing: .16em;
  transform: rotate(-8deg);
}

.skew { transform: rotate(7deg) skewX(-9deg); color: var(--lime); }

.crop, .crop::before {
  position: absolute;
  width: 2.2rem;
  height: 2.2rem;
  border-top: 2px solid var(--magenta);
  border-left: 2px solid var(--magenta);
  content: "";
}

.crop-one { top: 16vh; left: .2rem; transform: rotate(11deg); }
.crop-one::before { left: 2.8rem; top: 3.4rem; transform: rotate(180deg); }

.hero-copy, .editorial-block, .final-copy { position: relative; z-index: 3; }

.kicker {
  margin: 0 0 .6rem;
  color: var(--cyan);
  font: 800 clamp(.75rem, 1vw, .95rem)/1 var(--syne);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.kicker.hot { color: var(--amber); }
.kicker.lime { color: var(--lime); }
.kicker.cyan { color: var(--cyan); }
.kicker.pink { color: var(--magenta); }

.headline {
  margin: 0;
  font-family: var(--playfair);
  font-weight: 900;
  line-height: .78;
  letter-spacing: -.075em;
  color: var(--ivory);
  text-shadow: .05em .04em 0 rgba(255,46,136,.34), -.025em -.03em 0 rgba(36,247,215,.23), 0 0 3rem rgba(93,44,255,.6);
  transition: transform .45s cubic-bezier(.2,1,.2,1), letter-spacing .45s ease;
}

h1.headline { font-size: clamp(5rem, 17vw, 18rem); transform: translateX(-1vw) rotate(-2deg); }
h2.headline { font-size: clamp(4rem, 11vw, 13rem); }
.headline i { font-style: italic; color: transparent; -webkit-text-stroke: 1px var(--ivory); }
.headline:hover, .headline.is-bent { transform: rotate(1.8deg) skewX(-3deg) translateX(.4rem); letter-spacing: -.095em; }

.scratch {
  display: inline-block;
  margin: 1rem 0 0 8vw;
  color: var(--lime);
  font: 800 .8rem/1 var(--syne);
  letter-spacing: .08em;
  transform: rotate(4deg);
  border-bottom: 3px solid var(--magenta);
  box-shadow: 0 .5rem 0 rgba(36,247,215,.08);
}

.body-note {
  max-width: 33rem;
  color: rgba(244,232,255,.82);
  font: 600 clamp(1rem, 1.55vw, 1.45rem)/1.35 var(--syne);
}

.slant { transform: rotate(-2deg); color: var(--amber); }
.narrow { transform: translateY(-8vh) rotate(-1.5deg); }
.wide { grid-column: 2 / 4; transform: translateX(-5vw) translateY(16vh); }
.deploy-copy { transform: translateX(-6vw) rotate(1.4deg); }

.glass-pane {
  position: relative;
  z-index: 5;
  padding: clamp(1rem, 2vw, 2rem);
  color: var(--ivory);
  border: 1px solid rgba(36, 247, 215, .42);
  border-radius: 1.3rem .2rem 2.3rem .7rem;
  background:
    linear-gradient(135deg, rgba(244,232,255,.16), rgba(93,44,255,.18) 46%, rgba(5,2,10,.26)),
    radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), rgba(255,181,71,.4), transparent 8rem);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 1.4rem 4rem rgba(0,0,0,.48), 0 0 2rem rgba(36,247,215,.13) inset;
  transform: translate3d(var(--drift-x, 0), var(--drift-y, 0), 0) rotate(var(--pane-rot, 2deg));
  transition: border-radius .6s cubic-bezier(.2,1,.2,1), transform .5s ease, border-color .5s ease;
}

.glass-pane::before {
  content: "";
  position: absolute;
  inset: .6rem;
  border: 1px solid rgba(244,232,255,.08);
  border-radius: inherit;
  pointer-events: none;
}

.glass-pane:hover, .glass-pane.is-melting {
  border-color: var(--amber);
  border-radius: 44% 30% 50% 23% / 27% 46% 29% 52%;
  transform: translate3d(var(--drift-x, 0), calc(var(--drift-y, 0) - .8rem), 0) rotate(calc(var(--pane-rot, 0deg) * -1));
}

.pane-tab {
  position: absolute;
  top: -.85rem;
  left: 1rem;
  padding: .22rem .58rem;
  color: var(--void);
  background: var(--cyan);
  font: 800 .72rem/1 var(--syne);
  letter-spacing: .12em;
  box-shadow: .35rem .35rem 0 var(--magenta);
}

.pane-tab.ugly { background: var(--amber); transform: rotate(-5deg); }
.glass-pane code, .glass-pane p { font: 700 .95rem/1.7 var(--syne); }

.env-pane { grid-column: 3; width: min(32rem, 100%); min-height: 16rem; --pane-rot: 4deg; transform: translateX(-8vw) translateY(5vh) rotate(4deg); }
.ticket-pane { grid-column: 3; --pane-rot: -4deg; transform: translateX(-5vw) rotate(-4deg); }
.pr-pane { grid-column: 2; max-width: 36rem; --pane-rot: 3deg; transform: translateY(-11vh) rotate(3deg); }
.final-pane { grid-column: 3; --pane-rot: -2deg; transform: translateX(-5vw) rotate(-2deg); }

.stamp {
  display: inline-block;
  color: var(--magenta);
  border: 2px solid currentColor;
  padding: .25rem .45rem;
  transform: rotate(-9deg);
  text-transform: uppercase;
}

.code-row { color: var(--ivory); }
.code-row span { color: var(--lime); }
.code-row.mid { color: var(--amber); transform: translateX(2rem) rotate(-2deg); }

.confession-stack { grid-column: 3; position: relative; min-height: 24rem; }
.confession-pane { position: absolute; width: min(27rem, 90vw); }
.pane-a { top: 0; right: 6vw; --pane-rot: 5deg; }
.pane-b { top: 9rem; right: -1vw; --pane-rot: -7deg; border-color: rgba(255,46,136,.55); }

.candle {
  position: absolute;
  z-index: 6;
  width: 1.2rem;
  height: 5rem;
  border-radius: .5rem .5rem .18rem .18rem;
  background: linear-gradient(90deg, rgba(244,232,255,.9), rgba(255,181,71,.58), rgba(244,232,255,.72));
  box-shadow: 0 0 4rem rgba(255,181,71,.62), 0 0 8rem rgba(255,46,136,.22);
}

.candle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2.2rem;
  width: 1.1rem;
  height: 2rem;
  transform: translateX(-50%);
  border-radius: 60% 40% 55% 45%;
  background: radial-gradient(circle at 54% 65%, var(--ivory) 0 16%, var(--amber) 17% 54%, var(--magenta) 56% 100%);
  filter: drop-shadow(0 0 1.2rem var(--amber));
  animation: flame 1.5s ease-in-out infinite alternate;
}

.candle span {
  position: absolute;
  left: .5rem;
  top: .7rem;
  width: .25rem;
  height: 1.5rem;
  border-radius: 1rem;
  background: rgba(255,181,71,.75);
}

.candle-init { left: 35vw; bottom: 10vh; }
.candle-bug { left: 13vw; top: 27vh; transform: rotate(7deg); }
.candle-merge { right: 15vw; bottom: 18vh; transform: rotate(-6deg); }
.candle-deploy { left: 55vw; bottom: 13vh; }
.candle-final { left: 20vw; bottom: 14vh; height: 2.4rem; opacity: .85; }

.wax-brace {
  position: absolute;
  color: rgba(255,181,71,.5);
  font: 900 17rem/.8 var(--playfair);
  filter: blur(.4px);
  z-index: -1;
}
.brace-a { right: 8vw; bottom: 3vh; transform: rotate(16deg); }
.brace-b { left: 7vw; top: 12vh; transform: rotate(-11deg); }

.neon-thread {
  position: absolute;
  height: 4px;
  width: 48vw;
  background: linear-gradient(90deg, transparent, var(--magenta), var(--cyan), transparent);
  filter: drop-shadow(0 0 1rem var(--magenta));
  border-radius: 50%;
  animation: liquefy 5s ease-in-out infinite;
}
.thread-one { left: 22vw; bottom: 24vh; transform: rotate(-9deg); }

.redaction, .scratch-arrow, .empty-message {
  position: absolute;
  z-index: 7;
  color: var(--void);
  background: var(--lime);
  padding: .3rem .55rem;
  font: 800 .78rem/1 var(--syne);
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: .45rem .45rem 0 rgba(255,46,136,.75);
}
.redaction { right: 15vw; bottom: 16vh; transform: rotate(5deg); }
.scratch-arrow { left: 53vw; top: 23vh; transform: rotate(-11deg); background: var(--magenta); color: var(--ivory); }
.empty-message { left: 46vw; top: 18vh; transform: rotate(8deg); background: var(--amber); }

.terminal-cursor {
  display: inline-block;
  width: .55rem;
  height: 1.1rem;
  margin-left: .28rem;
  vertical-align: middle;
  background: var(--cyan);
  box-shadow: 0 0 1rem var(--cyan);
  animation: blink .82s steps(2, start) infinite;
}

@keyframes flame {
  from { transform: translateX(-50%) rotate(-5deg) scaleY(.92); border-radius: 50% 48% 60% 38%; }
  to { transform: translateX(-50%) rotate(6deg) scaleY(1.08); border-radius: 70% 32% 52% 42%; }
}

@keyframes morphBlob {
  0%, 100% { border-radius: 50% 36% 55% 38%; transform: rotate(0deg) scale(1); }
  50% { border-radius: 34% 58% 33% 61%; transform: rotate(18deg) scale(1.08); }
}

@keyframes liquefy {
  0%, 100% { clip-path: polygon(0 35%, 22% 46%, 47% 10%, 73% 70%, 100% 40%, 100% 80%, 0 88%); }
  50% { clip-path: polygon(0 62%, 18% 20%, 44% 64%, 70% 35%, 100% 62%, 100% 90%, 0 76%); }
}

@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 900px) {
  .chapter {
    grid-template-columns: 3rem minmax(0, 1fr);
    padding-right: 1rem;
  }
  .glass-pane, .env-pane, .ticket-pane, .pr-pane, .final-pane, .confession-stack, .wide {
    grid-column: 2;
    transform: rotate(var(--pane-rot, 0deg));
  }
  .confession-stack { min-height: 20rem; }
  .diff-rail { width: 72vw; right: .6rem; }
  .changelog { right: .45rem; }
  .cursor-glow { display: none; }
}