:root {
  /* Design language trace: engraved readouts. ambient animations: dew glints traveling along card edges; Space Mono** only for small engraved readouts. */
  --cream: #F7EFD6;
  --moss: #D8E7C1;
  --lavender: #C9B8E8;
  --jade: #9BC7B4;
  --acorn: #7A5635;
  --brass: #B88947;
  --peat: #2D2118;
  --porcelain: #FFF9EA;
  --glass: rgba(255, 249, 234, 0.42);
  --glass-deep: rgba(216, 231, 193, 0.33);
  --shadow: rgba(45, 33, 24, 0.18);
  --blur: 22px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "DM Sans", sans-serif;
  color: var(--peat);
  background:
    radial-gradient(circle at 18% 10%, rgba(201, 184, 232, 0.46) 0 12%, transparent 32%),
    radial-gradient(circle at 88% 24%, rgba(155, 199, 180, 0.42) 0 10%, transparent 29%),
    linear-gradient(135deg, #F7EFD6 0%, #D8E7C1 45%, #C9B8E8 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(122, 86, 53, 0.13) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(184, 137, 71, 0.12) 1px, transparent 1.5px),
    repeating-radial-gradient(circle at 20% 80%, transparent 0 18px, rgba(255, 249, 234, 0.13) 19px 20px);
  background-size: 34px 34px, 57px 57px, 360px 360px;
  mix-blend-mode: multiply;
}

h1, h2, h3, p { margin: 0; }

h1 {
  font-family: "Shrikhand", cursive;
  font-size: clamp(4.6rem, 12vw, 12rem);
  line-height: 0.86;
  color: var(--acorn);
  text-shadow: 0 2px 0 var(--porcelain), 0 18px 36px rgba(122, 86, 53, 0.22);
}

h2, h3 {
  font-family: "Fraunces", serif;
  font-variation-settings: "SOFT" 70, "WONK" 1;
  color: var(--acorn);
}

h2 { font-size: clamp(2.2rem, 6vw, 6.4rem); line-height: 0.92; }
h3 { font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.02; }
p { line-height: 1.55; }

.micro {
  font-family: "Space Mono", monospace;
  color: var(--brass);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.console {
  position: relative;
  z-index: 1;
  transition: filter 600ms ease;
}

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.8vw, 1.6rem);
  padding: clamp(1rem, 3vw, 3rem);
  align-items: center;
  overflow: hidden;
  perspective: 1400px;
}

.glass,
.curio-card,
.nameplate,
.lens-well {
  background: linear-gradient(145deg, rgba(255, 249, 234, 0.55), rgba(216, 231, 193, 0.26));
  border: 1px solid rgba(184, 137, 71, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 249, 234, 0.82),
    inset 0 -24px 45px rgba(201, 184, 232, 0.12),
    0 22px 70px var(--shadow);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  position: relative;
}

.glass::after,
.curio-card::after,
.lens-well::after,
.nameplate::after,
.one-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--glint-x, 20%) 0%, rgba(255, 249, 234, 0.8), transparent 12%),
    linear-gradient(110deg, transparent 12%, rgba(255, 249, 234, 0.22) 28%, transparent 44%);
  opacity: 0.72;
  transform: translateX(calc((var(--glint, 0) - 0.5) * 20%));
}

.root-map {
  position: fixed;
  inset: -5vh 0 auto 0;
  width: 100vw;
  height: 310vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.58;
}

.root-line {
  fill: none;
  stroke: var(--jade);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 16 12;
  filter: drop-shadow(0 0 14px rgba(155, 199, 180, 0.5));
  animation: rootDraw 9s ease-in-out infinite alternate;
}

.root-two, .root-four { stroke: var(--lavender); animation-duration: 11s; }
.root-three { stroke: var(--brass); opacity: 0.55; animation-duration: 13s; }
.root-five { animation-duration: 15s; }

@keyframes rootDraw { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }

.ambient { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.spore {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--porcelain), var(--lavender) 58%, transparent 70%);
  filter: blur(0.2px);
  opacity: 0.58;
  animation: drift 16s linear infinite;
}
.spore-a { left: 12%; top: 92%; animation-duration: 21s; }
.spore-b { left: 34%; top: 102%; animation-delay: -5s; transform: scale(1.5); }
.spore-c { left: 64%; top: 96%; animation-delay: -9s; transform: scale(0.8); }
.spore-d { left: 82%; top: 106%; animation-delay: -2s; transform: scale(1.2); }
.spore-e { left: 48%; top: 98%; animation-delay: -12s; transform: scale(0.6); }
@keyframes drift { to { translate: 7vw -118vh; rotate: 120deg; } }

.dashboard-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); gap: inherit; align-items: center; width: 100%; }

.nameplate {
  grid-column: 3 / 11;
  min-height: 54vh;
  border-radius: 52% 48% 44% 56% / 30% 38% 62% 70%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(2rem, 5vw, 6rem);
  transform: translateZ(0) scale(var(--scene-scale, 1));
}

.nameplate p { font-family: "Fraunces", serif; color: var(--acorn); font-size: clamp(1.2rem, 2vw, 2rem); }
.seal-row { display: flex; gap: 0.7rem; margin-top: 1.6rem; }
.seal-row i { width: 14px; height: 14px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 7px rgba(184, 137, 71, 0.14); }

.readout { padding: 1.1rem; border-radius: 28px 44px 32px 54px; display: grid; gap: 0.2rem; }
.readout strong { font-family: "Fraunces", serif; font-size: 2.8rem; color: var(--acorn); }
.readout em { font-style: normal; color: var(--acorn); }
.readout-left { grid-column: 1 / 4; grid-row: 1; align-self: end; }
.readout-right { grid-column: 10 / 13; grid-row: 1; align-self: start; }
.curve-tab { grid-column: 5 / 9; padding: 0.9rem 1.4rem; border-radius: 999px 999px 24px 24px; text-align: center; font-family: "Space Mono", monospace; color: var(--acorn); }

.scene-heading { grid-column: 2 / 8; padding: 1.4rem; border-radius: 36px 70px 30px 48px; align-self: end; }
.scene-heading h2 { font-size: clamp(2rem, 4vw, 4.2rem); margin-top: 0.45rem; }

.board-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(48px, 1fr));
  gap: inherit;
  min-height: 78vh;
  width: 100%;
}

.curio-card {
  padding: clamp(1rem, 2vw, 1.5rem);
  display: grid;
  align-content: start;
  gap: 0.7rem;
  transition: transform 500ms ease, filter 500ms ease, box-shadow 500ms ease;
  overflow: hidden;
}
.curio-card:hover, .curio-card.is-focused { transform: translateY(-8px) scale(1.035); filter: saturate(1.08); }
.curio-card:hover::before, .curio-card.is-focused::before { opacity: 0.7; }
.curio-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 20%, rgba(247, 239, 214, 0.55), transparent 50%);
  opacity: 0.25;
  transition: opacity 500ms ease;
}
.curio-card > * { position: relative; z-index: 1; }
.curio-card p { color: rgba(45, 33, 24, 0.78); max-width: 23ch; }
.pin { position: absolute; right: 18px; top: 18px; width: 13px; height: 13px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 6px rgba(184, 137, 71, 0.15); z-index: 2; }

.card-mushroom { grid-column: 1 / 5; grid-row: 2 / 7; border-radius: 52px 92px 42px 72px; }
.card-gauge { grid-column: 5 / 8; grid-row: 1 / 5; border-radius: 120px 120px 44px 44px; }
.card-wing { grid-column: 8 / 13; grid-row: 2 / 6; border-radius: 44px 70px 92px 38px; }
.card-spoon { grid-column: 3 / 7; grid-row: 6 / 9; border-radius: 80px 38px 66px 42px; }
.card-shell { grid-column: 7 / 10; grid-row: 5 / 9; border-radius: 42px 96px 48px 80px; }
.card-key { grid-column: 10 / 13; grid-row: 6 / 9; border-radius: 36px 54px 36px 98px; }

.relic { width: min(100%, 190px); height: 145px; justify-self: center; overflow: visible; }
.relic path, .relic ellipse, .relic circle {
  fill: rgba(255, 249, 234, 0.38);
  stroke: var(--acorn);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.relic circle { fill: var(--lavender); stroke-width: 2; }

.dial { width: 156px; height: 156px; border-radius: 50%; margin: 0.5rem auto; border: 1px solid rgba(184,137,71,.38); background: radial-gradient(circle, rgba(255,249,234,.56), rgba(155,199,180,.25)); display: grid; place-items: center; position: relative; }
.dial b { position: absolute; inset: 16px; border-radius: 50%; border: 10px solid rgba(155, 199, 180, 0.35); border-top-color: var(--brass); border-right-color: var(--lavender); animation: dialBreathe 4s ease-in-out infinite alternate; }
.dial i { position: absolute; width: 3px; height: 57px; background: var(--acorn); bottom: 50%; left: calc(50% - 1.5px); transform-origin: bottom; rotate: 28deg; animation: needle 3.8s ease-in-out infinite alternate; }
.dial span { font-family: "Space Mono", monospace; color: var(--acorn); font-size: 1.4rem; }
@keyframes needle { to { rotate: 31deg; } }
@keyframes dialBreathe { to { transform: scale(1.018); } }

.magnification { align-content: center; }
.lens-well {
  grid-column: 2 / 11;
  min-height: 74vh;
  border-radius: 50% 46% 48% 52% / 42% 52% 48% 58%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(2rem, 6vw, 6rem);
  overflow: hidden;
  transform: scale(var(--lens-scale, 1));
  transition: transform 300ms ease-out;
}
.lens-well h2 { max-width: 9ch; z-index: 1; }
.lens-well p { max-width: 44ch; z-index: 1; color: rgba(45, 33, 24, 0.78); }
.orbital-field { position: absolute; inset: 6%; border-radius: inherit; background: radial-gradient(circle at 50% 50%, rgba(255, 249, 234, 0.74), transparent 16%), repeating-radial-gradient(circle, transparent 0 42px, rgba(184, 137, 71, 0.18) 43px 45px); animation: orbit 16s linear infinite; }
.orbital-field span { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--porcelain), var(--lavender)); box-shadow: 0 0 20px rgba(201,184,232,.55); }
.orbital-field span:nth-child(1) { left: 18%; top: 34%; }
.orbital-field span:nth-child(2) { left: 72%; top: 22%; transform: scale(.6); }
.orbital-field span:nth-child(3) { left: 66%; top: 70%; transform: scale(1.35); }
.orbital-field span:nth-child(4) { left: 31%; top: 76%; transform: scale(.8); }
.orbital-field span:nth-child(5) { left: 48%; top: 13%; transform: scale(.48); }
@keyframes orbit { to { rotate: 360deg; } }

.side-annotation { grid-column: 10 / 13; grid-row: 1; padding: 1rem; border-radius: 34px 34px 80px 34px; align-self: end; z-index: 2; }

.ledger { align-content: center; }
.basin {
  grid-column: 2 / 12;
  min-height: 68vh;
  border-radius: 42% 58% 50% 50% / 18% 18% 82% 82%;
  padding: clamp(2rem, 5vw, 5rem);
  display: grid;
  gap: 1.4rem;
  align-content: center;
  background: radial-gradient(ellipse at 50% 78%, rgba(255, 249, 234, 0.78), rgba(216, 231, 193, 0.24) 62%, rgba(201, 184, 232, 0.22));
}
.ledger-lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ledger-lines p { padding: 1rem; border-radius: 28px; background: rgba(255, 249, 234, 0.34); border: 1px solid rgba(184, 137, 71, 0.22); }
.ledger-lines b { display: block; font-family: "Space Mono", monospace; color: var(--brass); margin-bottom: 0.5rem; }
.crescent { grid-column: 10 / 13; grid-row: 1; width: 22vw; aspect-ratio: 1; border-radius: 50%; align-self: start; display: grid; place-items: center; color: var(--acorn); transform: translateY(-12vh); }
.crescent::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: linear-gradient(135deg, #F7EFD6, #D8E7C1); box-shadow: inset 0 10px 22px rgba(45, 33, 24, 0.08); }
.crescent span { position: relative; font-family: "Space Mono", monospace; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; }

.relic-final { place-items: center; }
.one-card {
  grid-column: 3 / 11;
  min-height: 74vh;
  border-radius: 46px 120px 58px 120px;
  padding: clamp(2rem, 5vw, 5rem);
  display: grid;
  place-items: center;
  text-align: center;
  gap: 1.2rem;
}
.one-card p { max-width: 50ch; }
.relic-bone { width: min(44vw, 360px); height: auto; filter: drop-shadow(0 22px 35px rgba(122, 86, 53, 0.2)); }

.focus-halo {
  position: fixed;
  width: 28vmin;
  height: 28vmin;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  border: 1px solid rgba(184, 137, 71, 0.48);
  background: radial-gradient(circle, rgba(255, 249, 234, 0.18), transparent 62%);
  box-shadow: 0 0 60px rgba(255, 249, 234, 0.45), inset 0 0 30px rgba(201, 184, 232, 0.2);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  transition: opacity 260ms ease, transform 260ms ease;
}
.focus-halo.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.console.fogged .focus-card:not(.is-focused) { filter: blur(2px) saturate(.9); }

.scene.in-view .focus-card { animation: zoomFocus 900ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes zoomFocus { from { transform: translateY(28px) scale(.96); opacity: .7; } to { opacity: 1; } }

@media (max-width: 900px) {
  .scene { display: block; padding: 1rem; }
  .dashboard-grid, .board-grid { display: grid; grid-template-columns: 1fr; min-height: auto; }
  .nameplate, .readout-left, .readout-right, .curve-tab, .scene-heading, .curio-card, .lens-well, .side-annotation, .basin, .crescent, .one-card { grid-column: auto; grid-row: auto; margin: 0 0 1rem; }
  .nameplate, .lens-well, .basin, .one-card { min-height: 70vh; }
  .ledger-lines { grid-template-columns: 1fr; }
  .crescent { width: 42vw; transform: none; }
}