:root {
  /* Design parser anchors: Space Grotesk** small system readouts */
  --coral: #FF6B59;
  --violet: #B77CFF;
  --cocoa: #2A1712;
  --ochre: #D89A4A;
  --mint: #74F2C9;
  --clay: #B85F3A;
  --cream: #F3D9A4;
  --olive: #6E7651;
  --glass: rgba(243, 217, 164, 0.14);
  --shadow: rgba(42, 23, 18, 0.58);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--cream);
  font-family: "Nunito Sans", Inter, system-ui, sans-serif;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 14%, rgba(216, 154, 74, 0.28), transparent 30vw),
    radial-gradient(circle at 84% 26%, rgba(183, 124, 255, 0.16), transparent 34vw),
    linear-gradient(140deg, #2A1712 0%, #432016 46%, #1f1810 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(243, 217, 164, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 217, 164, 0.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 35%, #000, transparent 76%);
  z-index: 2;
}

.bokeh-field, .aurora-weather, .thermal-contours {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.bokeh-field { z-index: 0; filter: blur(2px); }
.bokeh {
  position: absolute;
  border-radius: 50%;
  opacity: .62;
  mix-blend-mode: screen;
  animation: bokehFloat 18s ease-in-out infinite alternate;
}
.b1 { width: 28vw; height: 28vw; left: -6vw; top: 6vh; background: rgba(216,154,74,.32); }
.b2 { width: 18vw; height: 18vw; right: 8vw; top: 12vh; background: rgba(255,107,89,.24); animation-delay: -4s; }
.b3 { width: 34vw; height: 34vw; left: 38vw; bottom: -10vh; background: rgba(184,95,58,.25); animation-delay: -8s; }
.b4 { width: 16vw; height: 16vw; left: 18vw; bottom: 16vh; background: rgba(116,242,201,.18); animation-delay: -11s; }
.b5 { width: 24vw; height: 24vw; right: -4vw; bottom: 4vh; background: rgba(183,124,255,.22); animation-delay: -2s; }

.aurora-weather { z-index: 1; filter: blur(20px) saturate(135%); opacity: .86; }
.ribbon {
  position: absolute;
  width: 115vw;
  height: 18vh;
  left: -8vw;
  border-radius: 50%;
  transform: rotate(-11deg);
  animation: auroraDrift 16s ease-in-out infinite alternate;
}
.ribbon.mint { top: 18vh; background: linear-gradient(90deg, transparent, rgba(116,242,201,.54), transparent); }
.ribbon.violet { top: 34vh; background: linear-gradient(90deg, transparent, rgba(183,124,255,.44), transparent); animation-delay: -6s; }
.ribbon.clay { top: 56vh; background: linear-gradient(90deg, transparent, rgba(216,154,74,.30), transparent); animation-delay: -10s; }

.thermal-contours {
  z-index: 1;
  opacity: .18;
  background:
    repeating-radial-gradient(ellipse at 18% 72%, transparent 0 18px, rgba(243,217,164,.8) 19px 21px, transparent 22px 40px),
    repeating-radial-gradient(ellipse at 80% 28%, transparent 0 24px, rgba(116,242,201,.55) 25px 27px, transparent 28px 54px);
  filter: blur(.4px);
}

.temperature-strip {
  position: fixed;
  z-index: 10;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 62px;
  padding: 14px 10px;
  border: 1px solid rgba(243,217,164,.28);
  border-radius: 32px;
  background: rgba(42,23,18,.54);
  box-shadow: inset 0 0 24px rgba(216,154,74,.18), 0 18px 50px var(--shadow);
  backdrop-filter: blur(16px);
}

.strip-label {
  writing-mode: vertical-rl;
  margin: 0 auto 12px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--ochre);
}

.temperature-strip a {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 7px 0;
  border-radius: 50%;
  color: var(--cream);
  text-decoration: none;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 12px;
  background: rgba(243,217,164,.10);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}

.temperature-strip a.active {
  color: var(--cocoa);
  background: var(--mint);
  transform: translateX(8px) scale(1.08);
}

.gauge-fill {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 6px;
  height: 18%;
  border-radius: 999px;
  background: linear-gradient(to top, var(--clay), var(--coral), var(--mint));
  transform: translateX(-50%);
  z-index: -1;
  opacity: .68;
}

main { position: relative; z-index: 3; }

.thermal-layer {
  position: relative;
  min-height: 100vh;
  padding: 11vh 8vw 9vh 112px;
  display: grid;
  align-items: center;
  overflow: hidden;
}

.thermal-layer::after {
  content: "";
  position: absolute;
  inset: 8vh 5vw;
  border: 1px solid rgba(243,217,164,.14);
  border-radius: 64px 38px 78px 44px;
  transform: rotate(-1.5deg);
  pointer-events: none;
}

.foreground-pane, .depth-pane, .floating-tab, .quest-token, .lowpoly-sunburst { will-change: transform; }

.console-shell, .pressure-stack, .failure-board, .rupture-pane, .cooled-core {
  position: relative;
  width: min(980px, 100%);
  border: 1px solid rgba(243,217,164,.30);
  background: linear-gradient(145deg, rgba(243,217,164,.19), rgba(184,95,58,.14) 46%, rgba(42,23,18,.52));
  backdrop-filter: blur(18px);
  box-shadow: inset 0 0 46px rgba(243,217,164,.09), 0 28px 90px rgba(42,23,18,.62);
}

.console-shell {
  padding: clamp(26px, 5vw, 64px);
  border-radius: 46px 78px 42px 68px;
  margin-left: 5vw;
  transform: rotate(-1deg);
}

.pane-back {
  position: absolute;
  width: 64vw;
  height: 52vh;
  right: 6vw;
  top: 18vh;
  border-radius: 72px;
  background: rgba(116,242,201,.08);
  border: 1px solid rgba(116,242,201,.18);
  transform: rotate(7deg);
}

.console-topline, .boot-confession, .system-chip, .final-marker {
  font-family: "Space Grotesk", system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.console-topline {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--ochre);
  font-size: 12px;
  margin-bottom: 34px;
}

.battery {
  width: 58px;
  height: 24px;
  border: 2px solid var(--cream);
  border-radius: 9px;
  padding: 3px;
  box-shadow: 0 0 18px rgba(116,242,201,.35);
}
.battery::after { content: ""; position: absolute; width: 4px; height: 10px; margin: 4px 0 0 56px; background: var(--cream); border-radius: 4px; }
.battery i { display: block; width: 68%; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--coral), var(--ochre), var(--mint)); animation: batteryMelt 3.8s ease-in-out infinite; }

.logo-melt { position: relative; display: inline-block; }
h1, h2 { font-family: "Baloo 2", Inter, system-ui, sans-serif; line-height: .92; margin: 0; }
h1 {
  font-size: clamp(62px, 12vw, 168px);
  color: var(--cream);
  text-shadow: 0 8px 0 rgba(184,95,58,.42), 0 0 40px rgba(216,154,74,.30);
  letter-spacing: -.06em;
}
h2 {
  max-width: 820px;
  font-size: clamp(42px, 7.5vw, 92px);
  color: var(--cream);
  letter-spacing: -.045em;
}
p {
  max-width: 690px;
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.35;
  color: rgba(243,217,164,.86);
}

.skeleton-mask {
  position: absolute;
  inset: 8% -2% auto 2%;
  height: 76%;
  pointer-events: none;
}
.skeleton-mask span, .loader-terrain span, .mini-loaders i, .path-bridge span {
  display: block;
  border-radius: 999px;
  background: linear-gradient(100deg, rgba(243,217,164,.20), rgba(116,242,201,.70), rgba(183,124,255,.50), rgba(243,217,164,.22));
  background-size: 240% 100%;
  animation: shimmer 2.6s linear infinite;
  box-shadow: inset 0 -8px 14px rgba(42,23,18,.20), 0 8px 22px rgba(42,23,18,.22);
}
.skeleton-mask span { position: absolute; height: 21%; opacity: .86; }
.skeleton-mask span:nth-child(1) { width: 54%; left: 5%; top: 0; }
.skeleton-mask span:nth-child(2) { width: 42%; right: 7%; top: 28%; animation-delay: -.4s; }
.skeleton-mask span:nth-child(3) { width: 64%; left: 22%; top: 55%; animation-delay: -.8s; }
.skeleton-mask span:nth-child(4) { width: 26%; left: 9%; top: 82%; animation-delay: -1.2s; }

.field-note { margin-top: 28px; }
.loader-terrain { display: flex; align-items: end; gap: 12px; width: min(620px, 100%); height: 92px; margin-top: 38px; }
.loader-terrain span { flex: 1; height: 24px; border-radius: 24px 24px 18px 46px; animation-name: shimmer, terrainDrip; animation-duration: 2.8s, 5s; animation-iteration-count: infinite; }
.loader-terrain span:nth-child(2) { height: 42px; animation-delay: -.5s; }
.loader-terrain span:nth-child(3) { height: 66px; animation-delay: -1s; }
.loader-terrain span:nth-child(4) { height: 38px; animation-delay: -1.5s; }
.loader-terrain span:nth-child(5) { height: 54px; animation-delay: -2s; }
.boot-confession { margin-top: 28px; color: var(--mint); font-size: 13px; }

.quest-token, .floating-tab {
  position: absolute;
  border-radius: 999px;
  padding: 12px 18px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  color: var(--cocoa);
  background: var(--ochre);
  box-shadow: 0 16px 40px rgba(42,23,18,.44);
}
.token-one { right: 12vw; bottom: 20vh; transform: rotate(8deg); }

.pressure-stack { padding: 34px; border-radius: 74px 46px 88px 42px; margin-left: 12vw; transform: rotate(1.5deg); }
.capsule-window { padding: clamp(26px, 5vw, 52px); border-radius: 52px; background: rgba(42,23,18,.34); border: 1px solid rgba(243,217,164,.22); }
.system-chip { display: inline-flex; margin-bottom: 18px; padding: 8px 13px; border-radius: 999px; font-size: 12px; color: var(--cocoa); background: var(--mint); }
.capsule-row { display: flex; gap: 18px; margin-top: 20px; flex-wrap: wrap; }
.capsule-pill { flex: 1 1 260px; padding: 22px; border-radius: 34px; color: var(--cream); min-height: 118px; }
.capsule-pill b { display: block; font-family: "Baloo 2", system-ui; font-size: 28px; }
.capsule-pill span { font-size: 17px; }
.capsule-pill.olive { background: rgba(110,118,81,.70); }
.capsule-pill.coral { background: rgba(255,107,89,.48); }
.tab-left { left: 8vw; top: 18vh; background: var(--cream); transform: rotate(-12deg); }
.tab-right { right: 8vw; bottom: 18vh; background: var(--coral); transform: rotate(10deg); }

.failure-board { min-height: 620px; padding: 42px; border-radius: 42px 86px 50px 72px; margin-left: 4vw; }
.log-panel { width: min(660px, 100%); padding: 40px; border-radius: 42px; background: rgba(243,217,164,.13); border: 1px solid rgba(243,217,164,.22); }
.mini-loaders { display: grid; gap: 10px; width: min(440px, 100%); margin-top: 24px; }
.mini-loaders i { height: 16px; }
.mini-loaders i:nth-child(2) { width: 72%; animation-delay: -.6s; }
.mini-loaders i:nth-child(3) { width: 48%; animation-delay: -1.2s; }
.sticky-note {
  position: absolute;
  width: 238px;
  padding: 22px;
  border-radius: 26px 32px 24px 36px;
  background: var(--cream);
  color: var(--cocoa);
  font-family: "Baloo 2", system-ui;
  font-size: 22px;
  line-height: 1.05;
  box-shadow: 0 20px 45px rgba(42,23,18,.38);
}
.note-a { right: 9%; top: 14%; transform: rotate(8deg); }
.note-b { right: 20%; bottom: 12%; transform: rotate(-7deg); background: #D89A4A; }
.warning-sticker { position: absolute; right: 7%; top: 49%; padding: 11px 16px; border-radius: 999px; background: var(--coral); color: var(--cocoa); font-family: "Space Grotesk"; transform: rotate(14deg); }

.rupture-layer .ribbon { opacity: 1; }
.rupture-pane { padding: clamp(34px, 6vw, 70px); border-radius: 86px 42px 72px 40px; margin-left: 16vw; transform: rotate(-2deg); }
.path-bridge { display: flex; gap: 14px; margin-top: 38px; align-items: center; }
.path-bridge span { height: 28px; width: 18%; transform: skewY(-7deg); }
.path-bridge span:nth-child(2) { width: 24%; height: 38px; animation-delay: -.3s; }
.path-bridge span:nth-child(3) { width: 32%; height: 24px; animation-delay: -.7s; }
.path-bridge span:nth-child(4) { width: 16%; height: 48px; animation-delay: -1s; }
.lowpoly-sunburst {
  position: absolute;
  left: 7vw;
  bottom: 18vh;
  width: 190px;
  height: 190px;
  background: conic-gradient(from 20deg, var(--ochre), var(--coral), var(--clay), var(--cream), var(--ochre));
  clip-path: polygon(50% 0, 60% 36%, 98% 20%, 68% 50%, 100% 76%, 62% 64%, 50% 100%, 38% 64%, 0 76%, 32% 50%, 2% 20%, 40% 36%);
  opacity: .72;
  filter: blur(.2px) drop-shadow(0 16px 34px rgba(42,23,18,.50));
  animation: relicSpin 22s linear infinite;
}

.cooled-core { padding: clamp(34px, 6vw, 78px); border-radius: 58px 58px 96px 42px; margin: auto; text-align: left; background: linear-gradient(160deg, rgba(110,118,81,.35), rgba(42,23,18,.62), rgba(243,217,164,.11)); }
.cooldown-relic { position: relative; width: 154px; height: 154px; margin: 36px 0 20px; }
.cooldown-relic .ring, .cooldown-relic .core, .cooldown-relic .broken-bar, .cursor-relic span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.cooldown-relic .ring { border: 14px solid rgba(243,217,164,.48); box-shadow: inset 0 0 24px rgba(116,242,201,.28), 0 0 34px rgba(183,124,255,.24); }
.cooldown-relic .core { inset: 34px; background: radial-gradient(circle at 34% 30%, var(--ochre), var(--clay) 58%, var(--cocoa)); box-shadow: inset -10px -12px 18px rgba(42,23,18,.36); }
.cooldown-relic .broken-bar { inset: 60px -18px 62px 34px; border-radius: 999px; background: linear-gradient(90deg, var(--mint), var(--violet), transparent 68%); transform: rotate(-13deg); }
.final-marker { color: var(--ochre); font-size: 13px; }

.cursor-relic {
  position: fixed;
  z-index: 20;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  pointer-events: none;
  border: 2px solid rgba(116,242,201,.74);
  box-shadow: 0 0 22px rgba(116,242,201,.42), inset 0 0 10px rgba(216,154,74,.28);
  transform: translate3d(-80px, -80px, 0);
  transition: opacity .3s ease;
}
.cursor-relic span { inset: 10px; background: var(--clay); }

body.booting .console-shell { animation: bootAdmit 1.5s cubic-bezier(.2,.9,.2,1) both; }
body.pressure .aurora-weather { opacity: .95; }
body.rupture .aurora-weather { filter: blur(14px) saturate(170%); }
body.cooldown .aurora-weather { opacity: .42; }

@keyframes shimmer { to { background-position: -240% 0; } }
@keyframes bokehFloat { to { transform: translate3d(4vw, -5vh, 0) scale(1.12); } }
@keyframes auroraDrift { to { transform: translate3d(7vw, -7vh, 0) rotate(-7deg) scaleY(1.35); } }
@keyframes batteryMelt { 50% { width: 38%; border-radius: 5px 12px 12px 5px; } }
@keyframes terrainDrip { 50% { border-radius: 32px 18px 46px 20px; transform: translateY(9px) scaleY(1.18); } }
@keyframes relicSpin { to { transform: rotate(360deg); } }
@keyframes bootAdmit { from { opacity: 0; transform: translateY(40px) rotate(-4deg) scale(.96); filter: blur(10px); } }

@media (max-width: 760px) {
  .temperature-strip { left: 12px; width: 50px; padding: 10px 7px; }
  .temperature-strip a { width: 34px; height: 34px; font-size: 11px; }
  .thermal-layer { padding: 9vh 5vw 8vh 74px; }
  .console-shell, .pressure-stack, .failure-board, .rupture-pane { margin-left: 0; }
  .sticky-note { position: relative; right: auto; top: auto; bottom: auto; margin: 18px 0 0; width: min(260px, 100%); }
  .warning-sticker { right: 16px; top: auto; bottom: 24px; }
  .cursor-relic { display: none; }
}