:root {
  /* DESIGN FONT TOKENS: Space Mono` wordmark system label; IBM Plex Mono` small readouts. */
  --vermilion: #F04B3E;
  --apricot: #FFB35C;
  --lacquer: #15100E;
  --leaf: #2F6B4F;
  --gold: #C79A3A;
  --plum: #4A2432;
  --parchment: #F3DDB8;
  --mono-display: "Space Mono", "Courier New", monospace;
  --mono-tech: "IBM Plex Mono", "Courier New", monospace;
  --serif-opulent: "Cormorant Garamond", Georgia, serif;
  --sans: Inter, Arial, sans-serif;
  --border: 5px solid var(--lacquer);
  --shadow: 10px 10px 0 var(--lacquer);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  color: var(--lacquer);
  font-family: var(--sans);
  background:
    radial-gradient(circle at 78% 18%, rgba(240, 75, 62, .34), transparent 22rem),
    radial-gradient(circle at 28% 82%, rgba(47, 107, 79, .32), transparent 26rem),
    linear-gradient(135deg, var(--plum), var(--lacquer) 58%, #070504);
}

button { font: inherit; color: inherit; }

.greenhouse-console {
  position: relative;
  min-height: 100vh;
  padding: 22px 24px 82px;
  background:
    linear-gradient(90deg, rgba(21, 16, 14, .14) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(rgba(21, 16, 14, .12) 1px, transparent 1px) 0 0 / 42px 42px;
  isolation: isolate;
}

.greenhouse-console::before,
.greenhouse-console::after {
  content: "";
  position: fixed;
  inset: 16px;
  pointer-events: none;
  border: var(--border);
  box-shadow: inset 0 0 0 8px rgba(199, 154, 58, .25);
  z-index: -1;
}

.greenhouse-console::after {
  border-color: var(--gold);
  inset: 30px;
  opacity: .45;
  transform: rotate(-.25deg);
}

.chapter-rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 0 0 14px;
}

.chapter-tab,
.operations-footer button,
.brutal-button,
.mini-button {
  cursor: pointer;
  border: 4px solid var(--lacquer);
  background: var(--parchment);
  box-shadow: 5px 5px 0 var(--lacquer);
  padding: 10px 12px;
  font-family: var(--mono-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.04em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.chapter-tab:hover,
.operations-footer button:hover,
.brutal-button:hover,
.mini-button:hover {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--lacquer);
  background: var(--apricot);
}

.chapter-tab.is-active {
  background: var(--vermilion);
  color: var(--parchment);
}

.console-stage {
  position: absolute;
  inset: 86px 24px 78px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 16px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(26px) rotate(.18deg);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}

.console-stage.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) rotate(0);
}

.module {
  position: relative;
  overflow: hidden;
  padding: clamp(16px, 2vw, 26px);
  border: var(--border);
  background:
    radial-gradient(circle at 18% 22%, rgba(199, 154, 58, .24) 0 2px, transparent 3px) 0 0 / 24px 24px,
    linear-gradient(145deg, var(--parchment), #e5c792);
  box-shadow: var(--shadow);
}

.module::before {
  content: "";
  position: absolute;
  inset: -25%;
  pointer-events: none;
  opacity: .22;
  background:
    linear-gradient(35deg, transparent 44%, rgba(74, 36, 50, .28) 45%, transparent 47%),
    radial-gradient(circle at 20% 30%, transparent 0 24px, rgba(21, 16, 14, .16) 25px, transparent 27px);
  transform: rotate(-7deg);
}

.module > * { position: relative; z-index: 1; }

.panel-id {
  margin: 0 0 12px;
  font-family: var(--mono-tech);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--plum);
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }

h1 {
  margin: 18px 0 6px;
  font-family: var(--mono-display);
  font-size: clamp(42px, 9vw, 128px);
  line-height: .78;
  letter-spacing: -.09em;
}

h2 {
  font-family: var(--mono-display);
  font-size: clamp(24px, 3vw, 54px);
  line-height: .9;
  letter-spacing: -.08em;
}

.hero-lock {
  grid-column: span 3;
  grid-row: span 2;
  background:
    linear-gradient(120deg, rgba(255, 179, 92, .16), transparent 35%),
    linear-gradient(145deg, #201816, var(--lacquer));
  color: var(--parchment);
}

.paper-flap {
  position: absolute;
  inset: 26px 34px auto auto;
  width: min(470px, 58%);
  height: 112px;
  border: var(--border);
  background: var(--parchment);
  color: var(--lacquer);
  box-shadow: var(--shadow);
  transform-origin: 50% 0;
  transition: transform .7s cubic-bezier(.2, .9, .2, 1), filter .7s ease;
  z-index: 4;
}

.paper-flap.lifted { transform: rotateX(64deg) rotate(-2deg) translateY(-14px); filter: drop-shadow(0 24px 18px rgba(255,179,92,.38)); }

.stamp-strip,
.tape {
  position: absolute;
  display: inline-block;
  padding: 9px 20px;
  border: 4px solid var(--lacquer);
  background: var(--vermilion);
  color: var(--parchment);
  font-family: var(--mono-display);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 42px);
  letter-spacing: -.08em;
  text-transform: uppercase;
  transform: rotate(-4deg);
  box-shadow: 5px 5px 0 var(--lacquer);
}

.stamp-strip { left: 18px; top: 22px; animation: slamIn .55s cubic-bezier(.2, 1.4, .4, 1) both; }

.signal-pulse {
  display: block;
  width: 28px;
  height: 28px;
  border: 4px solid var(--lacquer);
  border-radius: 50%;
  background: var(--vermilion);
  box-shadow: 0 0 0 0 rgba(240, 75, 62, .7), inset 0 0 0 5px var(--apricot);
  animation: pulseSignal 1.25s infinite;
}

.hero-pulse { position: absolute; right: 28px; top: 38px; }
.mono-shout { max-width: 760px; font-family: var(--mono-display); font-size: clamp(22px, 4vw, 58px); line-height: .94; letter-spacing: -.08em; color: var(--apricot); }
.brutal-button { margin-top: 10px; background: var(--gold); }

.gauge { background: linear-gradient(145deg, var(--gold), var(--parchment)); }
.pride-gauge { grid-row: span 2; }
.dial {
  width: min(190px, 70%);
  aspect-ratio: 1;
  border: 6px solid var(--lacquer);
  border-radius: 50% 50% 10% 10%;
  margin: 12px auto;
  background: conic-gradient(from -115deg, var(--leaf), var(--apricot), var(--vermilion), var(--plum), var(--leaf));
  position: relative;
  box-shadow: inset 0 0 0 14px var(--parchment);
}

.needle {
  position: absolute;
  width: 8px;
  height: 42%;
  left: calc(50% - 4px);
  top: 12%;
  background: var(--lacquer);
  transform-origin: 50% 90%;
  transform: rotate(46deg);
  transition: transform .45s ease;
}
.dial-core { position: absolute; width: 30px; height: 30px; border: 5px solid var(--lacquer); border-radius: 50%; background: var(--vermilion); left: calc(50% - 15px); top: calc(50% - 15px); }
.gauge strong { display: block; font-family: var(--mono-display); font-size: clamp(34px, 5vw, 70px); letter-spacing: -.08em; }
.gauge small, .caption, .readout { font-family: var(--mono-tech); font-size: 13px; text-transform: uppercase; }

.note-card { grid-column: span 2; background: linear-gradient(145deg, #fae6c2, var(--parchment)); transform: rotate(-1.2deg); }
.warning-plaque { background: var(--plum); color: var(--parchment); }
.plaque-text { font-family: var(--mono-display); font-size: clamp(28px, 4vw, 62px); line-height: .86; letter-spacing: -.08em; }
.wax-seal { position: absolute; right: 18px; bottom: 18px; width: 68px; height: 68px; display: grid; place-items: center; border: 5px solid var(--lacquer); border-radius: 45% 55% 48% 52%; background: var(--vermilion); color: var(--parchment); font-family: var(--serif-opulent); font-size: 46px; animation: pulseSignal 1.7s infinite; }

.switch-panel { grid-column: span 2; grid-row: span 2; }
.toggle-switch { width: min(420px, 100%); height: 82px; border: var(--border); background: var(--lacquer); color: var(--parchment); box-shadow: var(--shadow); padding: 8px; display: flex; align-items: center; justify-content: space-between; text-transform: uppercase; font-family: var(--mono-display); font-size: 28px; font-weight: 700; cursor: pointer; }
.toggle-switch span { width: 62px; height: 62px; border: 4px solid var(--lacquer); background: var(--vermilion); transition: transform .35s ease, background .35s ease; }
.toggle-switch.is-warm span { transform: translateX(260px) rotate(90deg); background: var(--apricot); }
.toggle-switch.is-warm { background: var(--leaf); }

.greenhouse-window { grid-column: span 2; }
.window-wheel { width: 185px; height: 185px; margin: 0 auto; border: 7px solid var(--lacquer); border-radius: 50%; background: radial-gradient(circle, var(--apricot), var(--plum)); position: relative; transition: transform .8s ease; box-shadow: inset 0 0 0 16px rgba(243,221,184,.5); }
.window-wheel span { position: absolute; left: calc(50% - 4px); top: 0; width: 8px; height: 100%; background: var(--lacquer); transform-origin: 50% 50%; }
.window-wheel span:nth-child(2) { transform: rotate(45deg); }
.window-wheel span:nth-child(3) { transform: rotate(90deg); }
.window-wheel span:nth-child(4) { transform: rotate(135deg); }
.window-wheel.spinning { transform: rotate(135deg); }

.distance-meter { grid-column: span 1; grid-row: span 2; }
.bar-meter { height: 260px; width: 58px; border: var(--border); background: var(--parchment); display: flex; align-items: end; padding: 5px; }
.bar-meter span { display: block; width: 100%; height: 72%; background: linear-gradient(var(--vermilion), var(--apricot)); transition: height .35s ease; }
.redacted-note { grid-column: span 1; grid-row: span 2; }
.redacted { height: 22px; background: var(--lacquer); margin: 20px 0; }
.redacted.short { width: 70%; }
.hidden-script { font-family: var(--serif-opulent); font-size: 26px; line-height: 1.05; color: var(--plum); font-style: italic; }

.drawer-module { grid-column: span 2; grid-row: span 2; }
.drawer { margin-top: 18px; height: 0; overflow: hidden; border: 0 solid var(--lacquer); background: var(--plum); color: var(--parchment); transition: height .45s ease, border-width .2s ease, padding .35s ease; }
.drawer.open { height: 168px; border-width: 5px; padding: 22px; }
.drawer p { font-family: var(--serif-opulent); font-size: clamp(30px, 4vw, 62px); line-height: .95; }
.blush-gauge .needle { transform: rotate(-38deg); }
.blush-gauge.spiked .needle { transform: rotate(78deg); }
.botanical-card { grid-column: span 1; grid-row: span 2; background: linear-gradient(145deg, var(--leaf), #c3bb86); color: var(--lacquer); }
.specimen-leaf { display: block; width: 112px; height: 168px; margin: 8px auto 18px; border: 5px solid var(--lacquer); border-radius: 100% 0 100% 0; background: linear-gradient(135deg, #a4bf72, var(--leaf)); transform: rotate(34deg); box-shadow: 12px 12px 0 rgba(21,16,14,.35); }
.stamp-module { background: var(--apricot); display: grid; place-items: center; text-align: center; }
.big-stamp { cursor: pointer; display: inline-block; padding: 20px 30px; border: 7px solid var(--vermilion); color: var(--vermilion); font-family: var(--mono-display); font-size: clamp(42px, 7vw, 90px); font-weight: 700; transform: rotate(-12deg); transition: transform .18s ease, color .18s ease, border-color .18s ease; }
.big-stamp.reclassified { transform: rotate(5deg) scale(.96); color: var(--leaf); border-color: var(--leaf); }

.gift-panel { grid-column: span 2; grid-row: span 2; background: linear-gradient(145deg, var(--plum), var(--lacquer)); color: var(--parchment); }
.gift-box { width: 180px; height: 150px; margin: 18px auto; border: 6px solid var(--lacquer); background: var(--gold); position: relative; box-shadow: 12px 12px 0 rgba(0,0,0,.45); cursor: pointer; transition: transform .35s ease; }
.gift-box::before { content: ""; position: absolute; inset: 0 75px; background: var(--vermilion); }
.gift-box span { position: absolute; left: -12px; right: -12px; top: 44px; height: 34px; border: 5px solid var(--lacquer); background: var(--vermilion); }
.gift-box.opened { transform: rotate(-5deg) translateY(-10px); filter: drop-shadow(0 0 20px rgba(255,179,92,.65)); }
.denial-ledger { grid-row: span 2; }
.denial-ledger ol { padding-left: 26px; font-family: var(--mono-tech); font-weight: 700; line-height: 1.8; }
.fan-panel { background: var(--gold); }
.lacquer-fan { width: 220px; height: 140px; margin: 42px auto; border: 6px solid var(--lacquer); border-radius: 220px 220px 0 0; background: repeating-conic-gradient(from 235deg at 50% 100%, var(--vermilion) 0 12deg, var(--apricot) 12deg 24deg, var(--plum) 24deg 36deg); }
.pulse-transfer { background: var(--parchment); }
.moving-pulse { position: absolute; left: 25px; bottom: 28px; transition: transform .6s ease; }
.moving-pulse.travel { transform: translate(70%, -180%); }

.final-core { grid-column: span 2; grid-row: span 3; background: linear-gradient(145deg, var(--apricot), var(--gold) 45%, var(--parchment)); }
.final-core h2 { font-size: clamp(42px, 8vw, 118px); }
.confession-line { font-family: var(--serif-opulent); font-size: clamp(46px, 7vw, 104px); line-height: .88; color: var(--plum); font-style: italic; }
.camellia-bloom { position: absolute; right: 32px; bottom: 28px; width: 150px; height: 150px; animation: bloom 1.6s ease both; }
.camellia-bloom span { position: absolute; width: 86px; height: 86px; border: 5px solid var(--lacquer); border-radius: 90% 10% 90% 10%; background: var(--vermilion); left: 32px; top: 32px; transform-origin: 50% 50%; }
.camellia-bloom span:nth-child(2) { transform: rotate(45deg); background: var(--apricot); }
.camellia-bloom span:nth-child(3) { transform: rotate(90deg); }
.camellia-bloom span:nth-child(4) { transform: rotate(135deg); background: var(--gold); }
.sunset-crack { grid-column: span 2; background: var(--lacquer); color: var(--parchment); }
.crack-glow { height: 160px; clip-path: polygon(48% 0, 60% 0, 53% 35%, 69% 35%, 38% 100%, 45% 52%, 31% 52%); background: linear-gradient(var(--apricot), var(--vermilion)); filter: drop-shadow(0 0 26px var(--apricot)); }
.softened-note, .reset-panel { grid-column: span 1; }

.taped .tape { top: 12px; right: 18px; font-size: 18px; padding: 6px 12px; background: var(--gold); color: var(--lacquer); }
.diagonal-left { transform: rotate(-1.4deg); }
.diagonal-right { transform: rotate(1.2deg); }

.ambient-vines { pointer-events: none; position: fixed; inset: 0; z-index: 5; opacity: .7; }
.vine { position: absolute; display: block; border-left: 7px solid var(--leaf); border-bottom: 7px solid var(--leaf); border-radius: 0 0 0 100%; filter: drop-shadow(4px 4px 0 var(--lacquer)); transform: scaleY(.2); transform-origin: top; animation: creep 8s ease-in-out infinite alternate; }
.vine::before, .vine::after { content: ""; position: absolute; width: 34px; height: 48px; border: 4px solid var(--lacquer); border-radius: 100% 0 100% 0; background: var(--leaf); }
.vine::before { left: -36px; top: 35%; transform: rotate(-22deg); }
.vine::after { left: 4px; top: 60%; transform: rotate(28deg); }
.vine-one { width: 170px; height: 420px; left: 0; top: 18%; }
.vine-two { width: 120px; height: 340px; right: 0; top: 8%; transform: rotateY(180deg) scaleY(.2); animation-delay: -2s; }
.vine-three { width: 100px; height: 260px; left: 45%; bottom: -80px; transform: rotate(90deg) scaleY(.2); animation-delay: -4s; }

.operations-footer {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border: var(--border);
  background: var(--lacquer);
  color: var(--parchment);
  padding: 10px 14px;
  box-shadow: 7px 7px 0 rgba(0,0,0,.5);
  font-family: var(--mono-tech);
  font-weight: 700;
}
.operations-footer button { background: var(--vermilion); color: var(--parchment); padding: 8px 14px; }

@keyframes pulseSignal {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 75, 62, .7), inset 0 0 0 5px var(--apricot); transform: scale(1); }
  50% { box-shadow: 0 0 0 18px rgba(240, 75, 62, 0), inset 0 0 0 3px var(--apricot); transform: scale(1.08); }
}

@keyframes slamIn {
  0% { transform: translateY(-180px) rotate(-15deg) scale(1.2); opacity: 0; }
  75% { transform: translateY(6px) rotate(-4deg) scale(.96); opacity: 1; }
  100% { transform: translateY(0) rotate(-4deg) scale(1); opacity: 1; }
}

@keyframes creep {
  from { transform: scaleY(.34); }
  to { transform: scaleY(1); }
}

@keyframes bloom {
  from { transform: scale(.2) rotate(-80deg); opacity: .2; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

@media (max-width: 900px) {
  body { overflow: auto; }
  .greenhouse-console { padding-bottom: 120px; }
  .chapter-rail { grid-template-columns: 1fr; }
  .console-stage { position: relative; inset: auto; grid-template-columns: 1fr; grid-template-rows: auto; display: none; }
  .console-stage.is-active { display: grid; }
  .module, .hero-lock, .note-card, .switch-panel, .greenhouse-window, .distance-meter, .redacted-note, .drawer-module, .botanical-card, .gift-panel, .denial-ledger, .final-core, .sunset-crack, .softened-note, .reset-panel { grid-column: span 1; grid-row: span 1; min-height: 260px; }
  .paper-flap { position: relative; inset: auto; width: 100%; margin-bottom: 20px; }
  .toggle-switch.is-warm span { transform: translateX(150px) rotate(90deg); }
  .operations-footer { flex-direction: column; align-items: stretch; }
}