:root {
  /* Typography compliance: Interface labels and console readouts: **IBM Plex Mono** in 400/500/600 weights for premise tags; **Roboto Mono** in 700 weight for stamped warnings; **Space Mono** in 700 weight. */
  --terracotta: #B85B3A;
  --clay: #E39467;
  --amber: #FFB347;
  --charcoal: #171210;
  --umber: #5B2E22;
  --cream: #F2D2A4;
  --red: #FF3B26;
  --gold: #FFD36E;
  --space: "Space Mono", "IBM Plex Mono", "Roboto Mono", monospace;
  --plex: "IBM Plex Mono", "Roboto Mono", monospace;
  --impact: "Roboto Mono", "Space Mono", monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--charcoal); color: var(--cream); overflow: hidden; }

body {
  font-family: var(--plex);
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 179, 71, .16), transparent 28%),
    radial-gradient(circle at 82% 70%, rgba(255, 59, 38, .12), transparent 26%),
    linear-gradient(135deg, #171210 0%, #231411 36%, #5B2E22 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: -20%;
  background-image:
    linear-gradient(68deg, transparent 0 46%, rgba(242, 210, 164, .045) 47% 48%, transparent 49%),
    repeating-linear-gradient(98deg, rgba(184, 91, 58, .08) 0 2px, transparent 2px 28px);
  transform: rotate(-4deg);
  pointer-events: none;
}

.cursor-flare {
  position: fixed;
  width: 36vw;
  height: 36vw;
  min-width: 320px;
  min-height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 211, 110, .34) 0%, rgba(255, 179, 71, .15) 25%, rgba(255, 59, 38, .07) 45%, transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 12;
  transform: translate(-50%, -50%);
}

.flare-streak {
  position: fixed;
  width: 52vw;
  height: 4px;
  background: linear-gradient(90deg, transparent, rgba(255, 211, 110, .85), rgba(255, 59, 38, .55), transparent);
  box-shadow: 0 0 22px var(--gold);
  opacity: 0;
  pointer-events: none;
  z-index: 13;
  transform-origin: 50% 50%;
}

.smoke-layer {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 10%, rgba(242, 210, 164, .08), transparent 34%),
    radial-gradient(ellipse at 22% 90%, rgba(227, 148, 103, .07), transparent 38%);
  filter: blur(8px);
  animation: smoke 12s ease-in-out infinite alternate;
  pointer-events: none;
}

.wick-nav {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.wick {
  border: 0;
  background: transparent;
  color: var(--cream);
  font-family: var(--plex);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .12em;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  opacity: .62;
}

.wick span {
  width: 13px;
  height: 38px;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(#FFD36E, #FFB347 26%, #5B2E22 27%);
  box-shadow: inset -3px -5px 8px rgba(23,18,16,.55), 0 0 13px rgba(255,179,71,.45);
  transform-origin: 50% 100%;
  animation: flame 1.1s infinite alternate;
}

.wick b { writing-mode: vertical-rl; font-weight: 500; }
.wick.active { opacity: 1; color: var(--gold); }
.wick.active span { box-shadow: 0 0 24px var(--amber), inset -3px -5px 8px rgba(23,18,16,.42); }

.cockpit { height: 100vh; width: 100vw; perspective: 1200px; }

.mode {
  position: fixed;
  inset: 0;
  padding: 6vh 7vw 8vh 7vw;
  opacity: 0;
  pointer-events: none;
  transform: translateY(40px) rotateX(8deg) scale(.96);
  transition: opacity .7s ease, transform .7s cubic-bezier(.18, .9, .2, 1);
}

.mode.active { opacity: 1; pointer-events: auto; transform: translateY(0) rotateX(0deg) scale(1); }

.dashboard-grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 18px;
  transform: rotate(-1.2deg);
}

.puff-panel {
  position: relative;
  border: 1px solid rgba(255, 211, 110, .24);
  border-radius: 42px;
  background:
    radial-gradient(circle at 22% 17%, rgba(255, 211, 110, .28), transparent 22%),
    linear-gradient(145deg, #5B2E22 0%, #B85B3A 52%, #E39467 100%);
  box-shadow:
    inset 14px 18px 28px rgba(255, 211, 110, .14),
    inset -18px -24px 34px rgba(23, 18, 16, .46),
    0 28px 50px rgba(0,0,0,.48);
  padding: clamp(18px, 3vw, 42px);
  overflow: hidden;
  transition: transform .35s ease, filter .35s ease, box-shadow .35s ease;
}

.puff-panel::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: inherit;
  border: 1px dashed rgba(242, 210, 164, .17);
  opacity: .75;
}

.puff-panel:hover { transform: translateY(5px) scale(.985); filter: saturate(1.18); }

.hero-panel { grid-column: 2 / 7; grid-row: 1 / 5; transform: rotate(-3deg); }
.furnace-panel { grid-column: 6 / 11; grid-row: 2 / 8; border-radius: 48% 42% 38% 44%; }
.candle-strip { grid-column: 11 / 13; grid-row: 1 / 7; display: flex; flex-direction: column; justify-content: space-around; }
.annotation-panel { grid-column: 2 / 6; grid-row: 5 / 8; transform: rotate(2deg); }

.micro { margin: 0 0 18px; color: var(--gold); text-transform: uppercase; letter-spacing: .18em; font-size: 12px; }
h1, h2 { font-family: var(--space); margin: 0; line-height: .86; letter-spacing: -.06em; text-transform: lowercase; }
h1 { font-size: clamp(74px, 11vw, 180px); color: var(--cream); text-shadow: 8px 9px 0 rgba(91,46,34,.75), 0 0 22px rgba(255,179,71,.28); }
h2 { font-size: clamp(48px, 8vw, 122px); color: var(--cream); }
.thesis { width: min(540px, 88%); font-size: clamp(16px, 2vw, 25px); line-height: 1.35; color: #F2D2A4; }

.diagonal-stamp, .sticker, .graffiti, .final-glow, .warning-tile {
  font-family: var(--impact);
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.diagonal-stamp { position: absolute; right: -45px; top: 42px; transform: rotate(16deg); font-size: 24px; border: 3px solid currentColor; padding: 8px 16px; }

.dial { position: absolute; inset: 9%; border-radius: 50%; background: radial-gradient(circle, #FFD36E 0 8%, #E39467 9% 23%, #B85B3A 24% 45%, #5B2E22 46% 100%); box-shadow: inset 24px 24px 50px rgba(255,211,110,.28), inset -32px -34px 58px rgba(23,18,16,.6), 0 0 46px rgba(255,179,71,.25); animation: breathe 5.2s ease-in-out infinite; }
.dial-core { position: absolute; inset: 34%; border-radius: 50%; display: grid; place-items: center; background: var(--charcoal); color: var(--gold); font-family: var(--space); font-size: clamp(28px, 5vw, 76px); box-shadow: inset 0 0 22px rgba(255,179,71,.38); }
.dial-ring { position: absolute; font-family: var(--space); color: var(--cream); font-size: 18px; }
.ring-a { top: 18%; left: 42%; } .ring-b { right: 14%; top: 54%; } .ring-c { left: 15%; bottom: 24%; }
.readout { position: absolute; bottom: 24px; left: 28px; right: 28px; padding: 13px 16px; border-radius: 999px; background: rgba(23,18,16,.56); color: var(--gold); font-family: var(--plex); font-size: 12px; letter-spacing: .09em; }

.candle { display: grid; justify-items: center; gap: 10px; text-transform: uppercase; font-size: 10px; color: var(--cream); }
.candle i { width: 28px; height: 74px; display: block; border-radius: 999px 999px 8px 8px; background: linear-gradient(#FFD36E 0 16%, #FF3B26 17% 22%, #F2D2A4 23% 70%, #B85B3A 71%); box-shadow: 0 0 25px rgba(255,179,71,.7), inset -8px -12px 14px rgba(91,46,34,.45); animation: flame .8s infinite alternate; }
.hidden-ink strong { font-family: var(--space); font-size: clamp(50px, 8vw, 110px); color: rgba(255,59,38,.88); }
.hidden-ink p { font-size: 18px; line-height: 1.55; }

.split .mode-title { grid-column: 2 / 7; grid-row: 1 / 5; }
.premise-bank { grid-column: 7 / 12; grid-row: 1 / 7; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-content: center; }
.premise-button { border: 0; border-radius: 36px; min-height: 150px; background: linear-gradient(145deg, #B85B3A, #E39467); color: var(--cream); font: 700 clamp(22px, 3vw, 44px) var(--space); box-shadow: inset 12px 16px 28px rgba(255,211,110,.18), inset -18px -22px 32px rgba(23,18,16,.45), 0 20px 34px rgba(0,0,0,.35); transform: rotate(var(--tilt, -2deg)); }
.premise-button:nth-child(2) { --tilt: 4deg; } .premise-button:nth-child(3) { --tilt: -5deg; } .premise-button:nth-child(4) { --tilt: 2deg; }
.premise-button.hot { color: var(--gold); } .premise-button.warning { color: var(--red); } .premise-button.crossed { text-decoration: line-through; }
.gauge-panel { grid-column: 3 / 8; grid-row: 5 / 8; }
.gauge { height: 48px; border-radius: 999px; background: rgba(23,18,16,.58); overflow: hidden; position: relative; }
.gauge em { display: block; height: 100%; width: 83%; background: linear-gradient(90deg, #B85B3A, #FFB347, #FF3B26); border-radius: inherit; }
.gauge span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--space); }

.pressure-layout .counterclaim { grid-column: 2 / 7; grid-row: 1 / 8; }
.membrane { margin: 40px auto 0; width: min(45vw, 430px); aspect-ratio: 1; border-radius: 44% 56% 48% 52%; background: radial-gradient(circle at 35% 28%, #FFD36E, #E39467 28%, #B85B3A 58%, #5B2E22); display: grid; place-items: center; box-shadow: inset -35px -45px 60px rgba(23,18,16,.48), 0 0 42px rgba(255,59,38,.35); animation: bulge 2.6s ease-in-out infinite; }
.membrane span { font: 700 150px var(--impact); color: var(--red); }
.wax-map { grid-column: 7 / 11; grid-row: 1 / 5; }
.node { position: absolute; padding: 18px 24px; border-radius: 999px; background: var(--charcoal); color: var(--gold); font-family: var(--space); text-transform: uppercase; }
.node:nth-child(1) { left: 10%; top: 18%; } .node.rebel { right: 8%; top: 42%; color: var(--red); } .node.scorched { left: 23%; bottom: 12%; }
.wax-line { position: absolute; height: 14px; border-radius: 999px; background: linear-gradient(90deg, #FFD36E, #FFB347, #B85B3A); box-shadow: 0 0 16px rgba(255,179,71,.55); }
.wax-line.one { width: 52%; left: 30%; top: 38%; transform: rotate(18deg); } .wax-line.two { width: 48%; left: 33%; bottom: 32%; transform: rotate(-25deg); }
.diagnostic { grid-column: 7 / 12; grid-row: 5 / 8; }
.diagnostic p { font: 700 clamp(22px, 3vw, 44px) var(--impact); color: var(--gold); }
.danger-control, #burnControl { border: 2px solid var(--red); border-radius: 999px; background: var(--charcoal); color: var(--red); padding: 14px 22px; font: 700 13px var(--impact); letter-spacing: .09em; cursor: pointer; box-shadow: 0 0 18px rgba(255,59,38,.24); }

.fallacy-board { grid-column: 2 / 8; grid-row: 1 / 6; }
.graffiti { font-size: clamp(42px, 7vw, 118px); transform: rotate(-6deg); margin-top: 34px; text-shadow: 0 0 22px rgba(255,59,38,.35); }
.leak-console { grid-column: 8 / 12; grid-row: 2 / 8; }
.drip { width: 32px; height: 72%; border-radius: 999px; background: linear-gradient(#FFD36E, #FFB347, #B85B3A); position: absolute; top: 12%; animation: drip 3s ease-in-out infinite; }
.drip-a { left: 22%; } .drip-b { left: 48%; height: 55%; animation-delay: -.8s; } .drip-c { left: 72%; height: 80%; animation-delay: -1.4s; }
.leak-console p { position: absolute; bottom: 32px; left: 28px; right: 28px; font-size: 18px; line-height: 1.5; }
.warning-tile { grid-column: 3 / 8; grid-row: 6 / 8; font-size: clamp(22px, 4vw, 54px); display: grid; place-items: center; transform: rotate(2deg); }

.verdict-panel { grid-column: 2 / 9; grid-row: 1 / 8; background: radial-gradient(circle at 72% 68%, rgba(255,211,110,.25), transparent 24%), linear-gradient(145deg, #171210, #5B2E22 42%, #B85B3A); }
.verdict-panel p:not(.micro) { max-width: 720px; font-size: clamp(18px, 2.4vw, 30px); line-height: 1.45; }
.final-glow { margin-top: 42px; padding: 22px; border-radius: 28px; background: rgba(23,18,16,.62); color: var(--gold); box-shadow: inset 0 0 22px rgba(255,179,71,.3), 0 0 28px rgba(255,179,71,.22); }
.cracked-panel { grid-column: 9 / 12; grid-row: 2 / 7; background: linear-gradient(145deg, #5B2E22, #B85B3A); }
.cracked-panel span { position: absolute; width: 3px; height: 70%; background: var(--charcoal); top: 14%; transform: rotate(var(--crack)); box-shadow: 0 0 8px rgba(255,211,110,.3); }
.cracked-panel span:nth-child(1) { --crack: 14deg; left: 32%; } .cracked-panel span:nth-child(2) { --crack: -20deg; left: 54%; height: 88%; } .cracked-panel span:nth-child(3) { --crack: 34deg; left: 72%; height: 58%; }

.console-footer { position: fixed; left: 7vw; right: 5vw; bottom: 18px; z-index: 21; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: var(--plex); color: var(--gold); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }

body.burn .puff-panel { box-shadow: inset 18px 22px 36px rgba(255,211,110,.24), inset -22px -28px 38px rgba(23,18,16,.62), 0 0 48px rgba(255,59,38,.34), 0 28px 50px rgba(0,0,0,.5); }
body.burn .flare-streak { opacity: 1; }

@keyframes breathe { 0%,100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.035) rotate(2deg); } }
@keyframes bulge { 0%,100% { transform: scale(1); border-radius: 44% 56% 48% 52%; } 50% { transform: scale(1.08); border-radius: 58% 42% 55% 45%; } }
@keyframes flame { from { transform: skewX(-4deg) scaleY(.9); filter: hue-rotate(-8deg); } to { transform: skewX(5deg) scaleY(1.06); filter: hue-rotate(8deg); } }
@keyframes drip { 0%,100% { transform: translateY(-10px) scaleY(.92); } 50% { transform: translateY(20px) scaleY(1.08); } }
@keyframes smoke { from { transform: translate3d(-2%, 1%, 0) scale(1); } to { transform: translate3d(2%, -1%, 0) scale(1.05); } }

@media (max-width: 880px) {
  html, body { overflow: auto; }
  .cockpit { height: auto; }
  .mode { position: relative; min-height: 100vh; display: none; padding: 72px 18px 96px 58px; }
  .mode.active { display: block; }
  .dashboard-grid { display: flex; flex-direction: column; height: auto; }
  .puff-panel, .hero-panel, .furnace-panel, .annotation-panel { min-height: 260px; transform: none; }
  .furnace-panel { min-height: 520px; }
  .premise-bank { display: grid; grid-template-columns: 1fr; }
  .console-footer { left: 58px; right: 18px; }
}