:root {
  /* Compliance typography tokens: Space Grotesk** for `honpo.net`; IBM Plex Sans JP** for sidebar metadata; IBM Plex Mono** for typewriter-effect text. */
  --crt-night: #120A2A;
  --orchid: #FF4FD8;
  --mint: #2EE6A6;
  --amber: #FFD166;
  --indigo: #4A2FFF;
  --mist: #D8F3DC;
  --moss: #1B5E3A;
  --sidebar: clamp(270px, 23vw, 390px);
  --display: "Space Grotesk", Inter, system-ui, sans-serif;
  --ui: "IBM Plex Sans JP", Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  color: var(--mist);
  background: var(--crt-night);
  font-family: var(--ui);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  background: repeating-linear-gradient(180deg, rgba(216, 243, 220, .045) 0 1px, transparent 1px 5px), radial-gradient(circle at 72% 10%, rgba(255, 79, 216, .13), transparent 34%), radial-gradient(circle at 34% 88%, rgba(46, 230, 166, .09), transparent 40%);
  mix-blend-mode: screen;
}

.ledger-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  z-index: 20;
  padding: 24px 20px;
  overflow: hidden;
  background: linear-gradient(120deg, rgba(18, 10, 42, .97), rgba(27, 94, 58, .26)), repeating-linear-gradient(180deg, rgba(255, 209, 102, .15) 0 1px, transparent 1px 38px);
  border-right: 1px solid rgba(255, 79, 216, .45);
  box-shadow: 18px 0 60px rgba(74, 47, 255, .32), inset -1px 0 0 rgba(216, 243, 220, .12);
}

.sidebar-glow {
  position: absolute;
  inset: -20% -35% -20% 20%;
  background: radial-gradient(circle, rgba(255, 79, 216, .24), transparent 55%);
  filter: blur(22px);
  animation: glowPulse 7s ease-in-out infinite;
}

.brand-block, .type-printer, .chapter-tabs, .coordinates, .garden-progress { position: relative; z-index: 2; }

.serial, .coordinates span, .tab-index, .floating-tag, .specimen-pin, .chapter-kicker {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.serial { color: rgba(216, 243, 220, .57); font-size: 11px; }

h1 {
  margin: 10px 0 4px;
  font-family: var(--display);
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: .86;
  letter-spacing: .035em;
  color: var(--mist);
  text-shadow: 0 0 18px rgba(255, 79, 216, .6), 4px 4px 0 rgba(74, 47, 255, .45);
}

.jp-note { margin: 0; color: var(--amber); font-size: 13px; writing-mode: vertical-rl; position: absolute; right: 2px; top: 48px; }

.type-printer {
  min-height: 64px;
  margin: 42px 0 28px;
  padding: 14px 12px;
  color: var(--mint);
  font-family: var(--mono);
  font-size: 14px;
  border: 1px solid rgba(46, 230, 166, .24);
  background: rgba(18, 10, 42, .52);
  box-shadow: inset 0 0 18px rgba(46, 230, 166, .08);
}

.orchid-cursor {
  display: inline-block;
  width: .72em;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -.16em;
  border-radius: 50% 50% 45% 45%;
  background: var(--orchid);
  box-shadow: 0 0 12px var(--orchid), 0 0 22px var(--orchid);
  animation: blink 1s steps(1) infinite;
}

.chapter-tabs { display: grid; gap: 8px; }

.tab {
  display: grid;
  grid-template-columns: 38px 1fr 34px;
  align-items: center;
  width: 100%;
  padding: 13px 10px;
  color: rgba(216, 243, 220, .66);
  background: linear-gradient(90deg, rgba(74, 47, 255, .18), rgba(18, 10, 42, .58));
  border: 1px solid rgba(216, 243, 220, .13);
  font-family: var(--display);
  letter-spacing: .08em;
  cursor: pointer;
  transition: color .35s ease, border-color .35s ease, transform .35s ease, background .35s ease;
}

.tab:hover, .tab.active {
  color: #D8F3DC;
  border-color: var(--orchid);
  transform: translateX(7px);
  background: linear-gradient(90deg, rgba(255, 79, 216, .25), rgba(74, 47, 255, .22));
  box-shadow: 0 0 18px rgba(255, 79, 216, .22);
}

.tab-jp { color: var(--amber); font-family: var(--ui); font-size: 12px; writing-mode: vertical-rl; }

.garden-progress { height: 150px; margin: 28px 0 22px 22px; }
.garden-progress .stem { position: absolute; left: 18px; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--moss), var(--mint)); box-shadow: 0 0 12px rgba(46, 230, 166, .5); }
.garden-progress .leaf { position: absolute; left: 14px; top: calc(var(--i, 0) * 28px + 8px); width: 28px; height: 14px; border-radius: 100% 0 100% 0; background: rgba(27, 94, 58, .62); transform: scale(.55) rotate(-22deg); opacity: .55; transition: .5s ease; }
.garden-progress .leaf:nth-child(2) { --i: 0; } .garden-progress .leaf:nth-child(3) { --i: 1; } .garden-progress .leaf:nth-child(4) { --i: 2; } .garden-progress .leaf:nth-child(5) { --i: 3; } .garden-progress .leaf:nth-child(6) { --i: 4; }
.garden-progress .leaf.active { background: var(--mint); opacity: 1; transform: scale(1) rotate(-22deg); box-shadow: 0 0 16px rgba(46, 230, 166, .75); }

.coordinates { position: absolute; bottom: 24px; left: 20px; right: 20px; display: grid; gap: 6px; color: rgba(216, 243, 220, .55); font-size: 11px; }

.greenhouse {
  margin-left: var(--sidebar);
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  background: var(--crt-night);
}

.scene {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
  padding: 9vh 7vw;
  isolation: isolate;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 80% 20%, rgba(255, 79, 216, .13), transparent 32%), radial-gradient(circle at 30% 80%, rgba(46, 230, 166, .09), transparent 36%);
}

.scene-copy { position: relative; z-index: 3; max-width: 720px; margin-top: 8vh; }
.scene-copy.narrow { max-width: 560px; }
.chapter-kicker { color: var(--amber); font-size: 12px; }
h2 { margin: 0 0 22px; font-family: var(--display); font-size: clamp(44px, 7.5vw, 112px); line-height: .88; letter-spacing: .025em; color: var(--mist); text-shadow: 0 0 25px rgba(255, 79, 216, .36); }
.scene-copy p:not(.chapter-kicker) { max-width: 580px; font-size: clamp(16px, 1.35vw, 22px); line-height: 1.75; color: rgba(216, 243, 220, .78); }
.type-title.typing::after { content: ""; display: inline-block; width: .58em; height: .88em; margin-left: .12em; background: var(--orchid); box-shadow: 0 0 18px var(--orchid); animation: blink 1s steps(1) infinite; }

.vapor-grid { position: absolute; inset: 38% -8% -12% -8%; transform: perspective(650px) rotateX(62deg); background-image: linear-gradient(rgba(46, 230, 166, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 79, 216, .16) 1px, transparent 1px); background-size: 46px 46px; animation: gridSink 12s linear infinite; }
.mist { position: absolute; width: 48vw; height: 48vw; border-radius: 50%; background: rgba(216, 243, 220, .08); filter: blur(34px); animation: drift 18s ease-in-out infinite alternate; }
.mist-a { right: 5vw; top: 8vh; }
.horizon-bands { position: absolute; left: 7vw; right: 7vw; bottom: 14vh; display: grid; gap: 11px; }
.horizon-bands span { height: 18px; background: linear-gradient(90deg, transparent, var(--indigo), var(--orchid), var(--amber), transparent); opacity: .75; filter: blur(.2px); }
.seal-stack { position: absolute; right: 8vw; top: 15vh; display: grid; place-items: center; width: 150px; height: 150px; border: 3px solid var(--amber); border-radius: 50%; color: var(--amber); transform: rotate(-11deg); box-shadow: 0 0 25px rgba(255, 209, 102, .34); }
.seal-stack span { font-family: var(--ui); font-size: 44px; font-weight: 700; } .seal-stack small { font-family: var(--mono); font-size: 10px; }
.floating-tag { position: absolute; padding: 8px 12px; border: 1px solid rgba(255, 209, 102, .5); color: var(--amber); background: rgba(18, 10, 42, .55); font-size: 11px; }
.tag-one { right: 15vw; bottom: 31vh; } .tag-two { right: 34vw; top: 18vh; color: var(--mint); border-color: rgba(46, 230, 166, .5); }

.pixel-sunset { position: absolute; inset: 18vh 7vw auto auto; width: min(52vw, 760px); height: 310px; background: repeating-linear-gradient(180deg, #FF4FD8 0 22px, #4A2FFF 22px 44px, #FFD166 44px 58px, transparent 58px 72px); clip-path: polygon(0 100%, 9% 76%, 20% 83%, 32% 48%, 45% 64%, 57% 25%, 72% 44%, 86% 10%, 100% 35%, 100% 100%); opacity: .72; filter: drop-shadow(0 0 28px rgba(255, 79, 216, .35)); }
.growth-chart { position: absolute; right: 4vw; bottom: 7vh; width: min(68vw, 820px); z-index: 4; }
.humid-line { fill: none; stroke: rgba(216, 243, 220, .12); stroke-width: 22; stroke-linecap: round; }
.vine-line { fill: none; stroke: url(#vineGlow); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1100; stroke-dashoffset: 1100; animation: drawVine 5s ease forwards infinite alternate; }
.chart-dots circle { fill: var(--mint); filter: drop-shadow(0 0 12px #2EE6A6); animation: firefly 2.6s ease-in-out infinite alternate; }
.leaf-shadow { position: absolute; width: 38vw; height: 78vh; background: var(--moss); opacity: .2; filter: blur(2px); }
.leaf-shadow-a { right: -7vw; top: 5vh; border-radius: 100% 0 100% 0; transform: rotate(20deg); } .leaf-shadow-b { left: 18vw; bottom: -22vh; border-radius: 0 100% 0 100%; transform: rotate(-32deg); }
.specimen-pin { position: absolute; left: 8vw; bottom: 12vh; color: var(--mint); }

.rain-calendar { position: absolute; inset: 8vh 6vw; border: 1px solid rgba(46, 230, 166, .16); background-image: linear-gradient(rgba(46, 230, 166, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 230, 166, .09) 1px, transparent 1px); background-size: 9vw 9vh; }
.rain-calendar span { position: absolute; left: var(--x); top: var(--y); width: 18px; height: 28px; border-radius: 60% 60% 60% 0; transform: rotate(-45deg); background: var(--mint); box-shadow: 0 0 18px var(--mint); animation: droplet 2.8s ease-in-out infinite alternate; animation-delay: var(--d); }
.climate-copy { margin-left: auto; max-width: 620px; }
.gauge-strip { position: absolute; left: 9vw; bottom: 13vh; display: flex; align-items: end; gap: 18px; }
.gauge-strip i { width: 15px; height: calc(42px + var(--h, 1) * 18px); background: linear-gradient(var(--mint), var(--indigo)); box-shadow: 0 0 13px rgba(46, 230, 166, .5); }
.gauge-strip i:nth-child(2) { --h: 3; } .gauge-strip i:nth-child(3) { --h: 1.4; } .gauge-strip i:nth-child(4) { --h: 4.5; } .gauge-strip i:nth-child(5) { --h: 2; } .gauge-strip i:nth-child(6) { --h: 5.5; } .gauge-strip i:nth-child(7) { --h: 2.8; }
.moon-phases { position: absolute; right: 10vw; bottom: 11vh; display: flex; gap: 16px; } .moon-phases span { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--mist); box-shadow: inset 12px 0 0 rgba(216, 243, 220, .5), 0 0 14px rgba(216, 243, 220, .25); }

.reclaiming-leaves span { position: absolute; left: -7vw; width: 44vw; height: 30vh; border-radius: 100% 0 100% 0; background: linear-gradient(120deg, rgba(27, 94, 58, .86), rgba(46, 230, 166, .13)); filter: drop-shadow(0 0 24px rgba(46, 230, 166, .18)); animation: breatheLeaf 7s ease-in-out infinite alternate; }
.reclaiming-leaves span:nth-child(1) { top: 8vh; transform: rotate(-16deg); } .reclaiming-leaves span:nth-child(2) { top: 39vh; transform: rotate(9deg); animation-delay: .8s; } .reclaiming-leaves span:nth-child(3) { bottom: -8vh; transform: rotate(-28deg); animation-delay: 1.4s; }
.seed-envelopes { position: absolute; right: 8vw; top: 14vh; display: grid; gap: 18px; width: min(420px, 36vw); }
.seed-envelopes article { padding: 22px; min-height: 130px; color: var(--crt-night); background: linear-gradient(135deg, rgba(255, 209, 102, .9), rgba(216, 243, 220, .84)); border: 1px solid rgba(255, 209, 102, .75); box-shadow: 0 18px 45px rgba(0,0,0,.28); transform: rotate(var(--r, -2deg)); }
.seed-envelopes article:nth-child(2) { --r: 2deg; } .seed-envelopes article:nth-child(3) { --r: -4deg; }
.seed-envelopes b { display: block; font-family: var(--mono); text-transform: uppercase; } .seed-envelopes em { display: block; margin-top: 18px; font-style: normal; font-family: var(--ui); }
.ledger-copy { margin-top: 42vh; }

.scene-afterglow { display: grid; place-items: center; background: radial-gradient(circle at center, rgba(27, 94, 58, .22), transparent 35%), #120A2A; }
.lacquer-ring { position: absolute; width: min(62vw, 620px); height: min(62vw, 620px); border-radius: 50%; border: 1px solid rgba(255, 209, 102, .3); box-shadow: inset 0 0 55px rgba(255, 79, 216, .07), 0 0 70px rgba(74, 47, 255, .16); }
.final-counter { text-align: center; }
.large-seal { display: inline-grid; place-items: center; width: min(54vw, 560px); height: min(28vw, 250px); border: 4px double var(--amber); color: var(--amber); font-family: var(--display); font-size: clamp(48px, 8vw, 132px); font-weight: 700; letter-spacing: .03em; transform: rotate(-3deg); text-shadow: 0 0 28px rgba(255, 209, 102, .28); }
.final-counter p { margin-top: 38px; font-family: var(--mono); color: var(--mint); }
.quiet-hum { position: absolute; bottom: 10vh; width: 32vw; height: 1px; background: linear-gradient(90deg, transparent, var(--orchid), transparent); animation: hum 3s ease-in-out infinite; }

.phosphor-wake { position: fixed; width: 18px; height: 18px; left: 0; top: 0; pointer-events: none; z-index: 50; border-radius: 50%; background: rgba(46, 230, 166, .23); filter: blur(7px); transform: translate(-50%, -50%); }
.stamp-layer { position: fixed; inset: 0; pointer-events: none; z-index: 55; }
.click-stamp { position: absolute; width: 74px; height: 74px; display: grid; place-items: center; border: 2px solid var(--amber); border-radius: 50%; color: var(--amber); font-family: var(--ui); font-weight: 700; transform: translate(-50%, -50%) rotate(-13deg) scale(.5); opacity: 0; animation: stampIn 1.2s ease forwards; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes glowPulse { 50% { opacity: .45; transform: scale(1.08); } }
@keyframes gridSink { to { background-position: 0 46px, 46px 0; } }
@keyframes drift { to { transform: translate(-8vw, 7vh) scale(1.08); } }
@keyframes drawVine { to { stroke-dashoffset: 0; } }
@keyframes firefly { to { opacity: .45; transform: translateY(-8px); } }
@keyframes droplet { to { transform: rotate(-45deg) translate(7px, -13px); opacity: .52; } }
@keyframes breatheLeaf { to { transform: translateX(4vw) rotate(-6deg) scale(1.05); } }
@keyframes hum { 50% { opacity: .35; transform: scaleX(.72); } }
@keyframes stampIn { 20% { opacity: 1; transform: translate(-50%, -50%) rotate(-13deg) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-13deg) scale(1.14); } }

@media (max-width: 860px) {
  body { overflow: auto; }
  .ledger-sidebar { position: relative; width: 100%; min-height: 58vh; }
  .greenhouse { margin-left: 0; height: auto; overflow: visible; }
  .scene { padding: 9vh 7vw; }
  .jp-note { position: static; writing-mode: horizontal-tb; }
  .coordinates { position: relative; bottom: auto; left: auto; right: auto; margin-top: 24px; }
  .seed-envelopes, .growth-chart, .pixel-sunset { position: relative; right: auto; top: auto; bottom: auto; width: 100%; margin-top: 40px; }
}