/* The two brand faces, carried with the widget rather than fetched from
   a font host. Latin subsets only, which is all this reads in. Nothing
   here depends on the theme already having loaded them, and nothing
   leaves the page.
   BTH-FONTS-START (generated by embed_fonts.py — do not hand-edit) */
@font-face{
  font-family:'Alice';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/alice-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* BTH-FONTS-END */

/* ==================================================================
   Everything below is scoped to .hiveop-build-the-hive.
   No bare element selectors, no :root, nothing global.
   ================================================================== */
.hiveop-build-the-hive{
  --bth-bg:#17150F;
  --bth-bg2:#1C1A14;
  --bth-line:#2A261C;
  --bth-line2:#3B362A;
  --bth-ink:#FFFFFF;
  --bth-mut:#9A9280;
  --bth-mut2:#8A8372;
  --bth-gold:#C9A84C;
  --bth-aqua:#4FBFB8;
  --bth-emerald:#5FA97C;
  --bth-amber:#F0B429;
  --bth-ease:cubic-bezier(.22,.61,.36,1);

  position:relative;
  box-sizing:border-box;
  /* The same two declarations hiveop.com uses, verbatim. */
  --bth-title:'Alice',sans-serif;
  --bth-body:'Times New Roman',Times,'Liberation Serif','Nimbus Roman','Tinos',serif;

  font-family:var(--bth-body);
  font-size:16px;
  line-height:1.72;
  color:var(--bth-ink);
  background:
    radial-gradient(1200px 620px at 50% -10%, #221F16 0%, transparent 62%),
    var(--bth-bg);
  border:1px solid var(--bth-line);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.hiveop-build-the-hive *,
.hiveop-build-the-hive *::before,
.hiveop-build-the-hive *::after{ box-sizing:border-box; }

/* ------------------------------------------------------------------
   DEFENSIVE RESET

   A scope class alone is not enough. Plenty of WordPress themes style
   buttons, headings and lists with !important, and those rules reach
   straight through a scope selector and turn the control panel into
   whatever the theme feels like. Only !important beats !important, so
   the properties themes most often force are neutralised here on bare
   element selectors. The component rules below use class selectors,
   which are more specific, so they still win.
   ------------------------------------------------------------------ */
.hiveop-build-the-hive button,
.hiveop-build-the-hive a,
.hiveop-build-the-hive input{
  border-radius:0 !important;
  box-shadow:none !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  text-decoration:none !important;
  font-family:inherit !important;
  line-height:1.72 !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  float:none !important;
  text-shadow:none !important;
  transform:none;
}
.hiveop-build-the-hive button{
  background:transparent !important;
  border:0 !important;
  color:inherit !important;
  padding:0 !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  margin:0 !important;
  min-height:0 !important;
}
.hiveop-build-the-hive h2,
.hiveop-build-the-hive h3{
  text-transform:none !important;
  letter-spacing:-.015em !important;
  font-family:inherit !important;
  color:#fff !important;
  text-shadow:none !important;
}
.hiveop-build-the-hive ul,
.hiveop-build-the-hive ol{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
.hiveop-build-the-hive li{ margin:0 !important; }
.hiveop-build-the-hive p{ margin:0; }
.hiveop-build-the-hive svg{
  border:0 !important;
  box-shadow:none !important;
  max-width:none !important;
  background:transparent !important;
}
.hiveop-build-the-hive section{ margin:0 !important; padding:0 !important; }

.hiveop-build-the-hive .bth-shell{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  min-height:620px;
}

/* ---------------- stage ---------------- */
.hiveop-build-the-hive .bth-stage{
  position:relative;
  border-right:1px solid var(--bth-line);
  background:
    radial-gradient(620px 420px at 50% 42%, rgba(79,191,184,.05) 0%, transparent 70%),
    linear-gradient(180deg,#1A180F 0%,#141209 100%);
  min-width:0;
}
.hiveop-build-the-hive .bth-stage-inner{
  position:relative;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:20px 16px 62px;
}
.hiveop-build-the-hive .bth-svg{
  width:100%; height:100%;
  max-height:640px;
  display:block;
  overflow:visible;
}

.hiveop-build-the-hive .bth-status{
  position:absolute; left:0; right:0; bottom:14px;
  text-align:center;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bth-mut2); font-weight:700;
  min-height:15px;
  opacity:0; transform:translateY(4px);
  transition:opacity .45s var(--bth-ease), transform .45s var(--bth-ease);
  padding:0 16px;
}
.hiveop-build-the-hive .bth-status.is-on{ opacity:1; transform:none; }
.hiveop-build-the-hive .bth-status.is-warn{ color:var(--bth-gold); }
.hiveop-build-the-hive .bth-status.is-good{ color:var(--bth-emerald); }

/* ---------------- hive parts ---------------- */
.hiveop-build-the-hive .bth-lattice path{
  fill:none; stroke:#241F16; stroke-width:1;
}
.hiveop-build-the-hive .corridor{
  fill:none;
  stroke:#211D15;
  stroke-linecap:round;
  transition:stroke .6s var(--bth-ease);
}
.hiveop-build-the-hive .corridor-edge{
  fill:none;
  stroke:#3A3426;
  stroke-width:1;
  stroke-linecap:round;
  transition:stroke .6s var(--bth-ease), opacity .6s var(--bth-ease);
}
.hiveop-build-the-hive .corridor-edge[data-lit="1"]{ stroke:rgba(79,191,184,.42); }
.hiveop-build-the-hive .corridor-edge[data-lit="warn"]{ stroke:rgba(201,168,76,.55); }

.hiveop-build-the-hive .detour{
  fill:none; stroke:var(--bth-gold); stroke-width:1.2;
  stroke-dasharray:4 6; opacity:0;
  transition:opacity .5s var(--bth-ease);
}
.hiveop-build-the-hive .detour.is-on{ opacity:.55; }

.hiveop-build-the-hive .room-shape{
  fill:#1C1A12;
  stroke:#38331F;
  stroke-width:1.4;
  transition:stroke .55s var(--bth-ease), fill .55s var(--bth-ease), stroke-width .55s var(--bth-ease);
}
.hiveop-build-the-hive .room-ring{
  fill:none; stroke:transparent; stroke-width:1;
  transition:stroke .55s var(--bth-ease), opacity .55s var(--bth-ease);
  opacity:0;
}
.hiveop-build-the-hive .room-num{
  fill:var(--bth-mut2);
  font-size:12px; font-weight:700; letter-spacing:.14em;
  text-anchor:middle;
  transition:fill .55s var(--bth-ease);
}
.hiveop-build-the-hive .room-name{
  fill:#6B6451;
  font-size:15px; font-weight:700; letter-spacing:.11em;
  text-anchor:middle;
  transition:fill .55s var(--bth-ease);
}
.hiveop-build-the-hive .room-desc{
  fill:transparent;
  font-size:9.5px; font-weight:700; letter-spacing:.15em;
  text-anchor:middle;
  transition:fill .55s var(--bth-ease);
}

/* room states */
.hiveop-build-the-hive .room[data-state="active"] .room-shape{
  stroke:var(--bth-aqua); stroke-width:1.9; fill:#14201E;
}
.hiveop-build-the-hive .room[data-state="active"] .room-ring{ stroke:rgba(79,191,184,.34); opacity:1; }
.hiveop-build-the-hive .room[data-state="active"] .room-num{ fill:var(--bth-aqua); }
.hiveop-build-the-hive .room[data-state="active"] .room-name{ fill:#FFFFFF; }
.hiveop-build-the-hive .room[data-state="active"] .room-desc{ fill:var(--bth-mut); }

.hiveop-build-the-hive .room[data-state="healthy"] .room-shape{
  stroke:rgba(95,169,124,.8); fill:#141E16;
}
.hiveop-build-the-hive .room[data-state="healthy"] .room-num{ fill:var(--bth-emerald); }
.hiveop-build-the-hive .room[data-state="healthy"] .room-name{ fill:#C3D0C4; }
.hiveop-build-the-hive .room[data-state="healthy"] .room-desc{ fill:#5E6E60; }

.hiveop-build-the-hive .room[data-state="bottleneck"] .room-shape{
  stroke:rgba(201,168,76,.9); fill:#201A0C; stroke-width:1.9;
}
.hiveop-build-the-hive .room[data-state="bottleneck"] .room-num{ fill:var(--bth-gold); }
.hiveop-build-the-hive .room[data-state="bottleneck"] .room-name{ fill:#E8CF8E; }
.hiveop-build-the-hive .room[data-state="bottleneck"] .room-desc{ fill:#8C7B45; }

.hiveop-build-the-hive .room[data-state="primary"] .room-shape{
  stroke:var(--bth-gold); stroke-width:2.6; fill:#262009;
}
.hiveop-build-the-hive .room[data-state="primary"] .room-ring{ stroke:rgba(201,168,76,.5); opacity:1; }
.hiveop-build-the-hive .room[data-state="primary"] .room-num,
.hiveop-build-the-hive .room[data-state="primary"] .room-name{ fill:var(--bth-gold); }
.hiveop-build-the-hive .room[data-state="primary"] .room-desc{ fill:#A89049; }

/* pulse ring, driven by a class so reduced-motion can kill it */
.hiveop-build-the-hive .room-pulse{
  fill:none; stroke-width:1.4; opacity:0; pointer-events:none;
}
.hiveop-build-the-hive .room.is-pulsing .room-pulse{
  animation:bthPulse 1.5s var(--bth-ease) infinite;
}
@keyframes bthPulse{
  0%   { transform:scale(.97); opacity:.55; }
  70%  { transform:scale(1.12); opacity:0; }
  100% { transform:scale(1.12); opacity:0; }
}
.hiveop-build-the-hive .room.is-pulsing[data-state="bottleneck"] .room-pulse{
  animation-duration:.9s;
  animation-timing-function:steps(6,end);
}

/* doors */
.hiveop-build-the-hive .door-leaf{
  fill:#2A2518; stroke:#443D28; stroke-width:1;
  transition:transform .55s var(--bth-ease), fill .55s var(--bth-ease), stroke .55s var(--bth-ease);
}
.hiveop-build-the-hive .door[data-open="1"] .door-leaf-a{ transform:translateY(-7px); }
.hiveop-build-the-hive .door[data-open="1"] .door-leaf-b{ transform:translateY(7px); }
.hiveop-build-the-hive .door[data-open="1"] .door-leaf{ fill:#16211A; stroke:rgba(95,169,124,.55); }
.hiveop-build-the-hive .door[data-open="blocked"] .door-leaf{
  fill:#241C0B; stroke:rgba(201,168,76,.7);
}

/* obstacles */
.hiveop-build-the-hive .obstacle{ opacity:0; transition:opacity .45s var(--bth-ease); }
.hiveop-build-the-hive .obstacle.is-on{ opacity:1; }
.hiveop-build-the-hive .obstacle rect{ fill:var(--bth-gold); }
.hiveop-build-the-hive .obstacle.is-hit rect{ animation:bthJitter .5s steps(4,end) 3; }
@keyframes bthJitter{
  0%,100%{ opacity:.35; }
  50%    { opacity:1; }
}

/* core chamber */
.hiveop-build-the-hive .core-shape{
  fill:#191710; stroke:#38331F; stroke-width:1.4;
  transition:stroke .7s var(--bth-ease), fill .7s var(--bth-ease);
}
.hiveop-build-the-hive .core-glow{ opacity:0; transition:opacity .9s var(--bth-ease); }
.hiveop-build-the-hive .core[data-state="on"] .core-shape{
  stroke:var(--bth-aqua); fill:#121E1C;
}
.hiveop-build-the-hive .core[data-state="on"] .core-glow{ opacity:1; }
.hiveop-build-the-hive .core-label{
  fill:#5A5343; font-size:9.5px; font-weight:700; letter-spacing:.18em; text-anchor:middle;
  transition:fill .7s var(--bth-ease);
}
.hiveop-build-the-hive .core[data-state="on"] .core-label{ fill:var(--bth-aqua); }

/* bee */
.hiveop-build-the-hive .bth-bee{ opacity:0; transition:opacity .5s var(--bth-ease); }
.hiveop-build-the-hive .bth-bee.is-on{ opacity:1; }
.hiveop-build-the-hive .bth-bee-wings{ transform-origin:-1px 0; }
.hiveop-build-the-hive .bth-bee.is-flying .bth-wing-a{ animation:bthWingA .11s linear infinite; }
.hiveop-build-the-hive .bth-bee.is-flying .bth-wing-b{ animation:bthWingB .11s linear infinite; }
@keyframes bthWingA{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(.22) translateY(-2px); } }
@keyframes bthWingB{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(.22) translateY(2px); } }
.hiveop-build-the-hive .bth-bee-glow{ transform-origin:0 0; }
.hiveop-build-the-hive .bth-bee.is-waiting .bth-bee-glow{ animation:bthBreath 2.4s var(--bth-ease) infinite; }
@keyframes bthBreath{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.22); opacity:.7; } }

.hiveop-build-the-hive .trail-dot{ fill:var(--bth-gold); }

/* ---------------- panel ---------------- */
.hiveop-build-the-hive .bth-panel{
  position:relative;
  padding:clamp(22px,3.4vw,42px);
  display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(180deg,#1A180F 0%,#16140D 100%);
  min-width:0;
}
.hiveop-build-the-hive .bth-view{ display:none; }
.hiveop-build-the-hive .bth-view.is-on{ display:block; animation:bthIn .5s var(--bth-ease) both; }
@keyframes bthIn{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }

.hiveop-build-the-hive .bth-eyebrow{
  display:flex; align-items:center; gap:8px;
  margin:0 0 14px;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bth-gold); font-weight:700;
}
.hiveop-build-the-hive .bth-eyebrow i{
  width:6px; height:6px; background:var(--bth-gold); display:block; flex:0 0 auto;
}
.hiveop-build-the-hive .bth-h1{
  margin:0 0 12px !important; font-size:clamp(26px,3.4vw,40px) !important; line-height:1.18 !important;
  font-family:var(--bth-title) !important;
  /* Alice ships one weight. Asking for 700 would get a synthesised bold,
     which on a serif looks like a mistake rather than emphasis. */
  font-weight:500 !important; letter-spacing:-.004em !important; color:#fff !important;
  text-transform:none !important;
}
.hiveop-build-the-hive .bth-h2{
  margin:16px 0 10px !important; font-size:clamp(20px,2.4vw,27px) !important; line-height:1.26 !important;
  font-family:var(--bth-title) !important;
  font-weight:500 !important; letter-spacing:-.004em !important; color:#fff !important;
  text-transform:none !important;
}
.hiveop-build-the-hive .bth-lede{
  margin:0 0 20px; color:var(--bth-mut); font-size:16px; max-width:46ch;
}
.hiveop-build-the-hive .bth-fine{
  margin:12px 0 0; color:var(--bth-mut2); font-size:13px;
}

/* Progressive enhancement. The attribute is set by the script, on the
   last line of a clean boot. No attribute, no interactive controls. */
.hiveop-build-the-hive .bth-when-ready{ display:none !important; }
.hiveop-build-the-hive[data-bth-ready] .bth-when-ready{ display:block !important; }
.hiveop-build-the-hive[data-bth-ready] .bth-when-dead{ display:none !important; }

.hiveop-build-the-hive .bth-stages-list{
  list-style:none !important; margin:0 0 26px !important; padding:0 !important;
  display:flex; flex-wrap:wrap; gap:7px;
}
.hiveop-build-the-hive .bth-stages-list li{
  display:flex; align-items:center; gap:7px;
  border:1px solid var(--bth-line2); padding:6px 11px;
  font-size:12px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--bth-mut); font-weight:600;
}
.hiveop-build-the-hive .bth-stages-list span{ color:var(--bth-gold); font-weight:700; }

/* progress */
.hiveop-build-the-hive .bth-prog{
  display:flex; align-items:center; gap:10px; margin-bottom:22px;
}
.hiveop-build-the-hive .bth-prog-n{
  font-size:12px; letter-spacing:.2em; color:var(--bth-gold); font-weight:700;
}
.hiveop-build-the-hive .bth-prog-l{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--bth-mut2); font-weight:700;
}
.hiveop-build-the-hive .bth-prog-dots{ display:flex; gap:5px; margin-left:auto; }
.hiveop-build-the-hive .bth-prog-dots i{
  width:16px; height:2px; background:var(--bth-line2); display:block;
  transition:background .5s var(--bth-ease);
}
.hiveop-build-the-hive .bth-prog-dots i.is-done{ background:var(--bth-emerald); }
.hiveop-build-the-hive .bth-prog-dots i.is-flag{ background:var(--bth-gold); }
.hiveop-build-the-hive .bth-prog-dots i.is-now{ background:var(--bth-aqua); }

.hiveop-build-the-hive .bth-cell-id{
  margin:0 0 9px; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bth-aqua); font-weight:700;
}
.hiveop-build-the-hive .bth-q{
  margin:0 0 24px !important; font-size:clamp(19px,2.2vw,26px) !important; line-height:1.34 !important;
  font-family:var(--bth-title) !important;
  font-weight:500 !important; letter-spacing:0 !important; color:#fff !important;
  text-transform:none !important; max-width:24ch;
}

.hiveop-build-the-hive .bth-opts{ display:flex; flex-direction:column; gap:10px; }
.hiveop-build-the-hive .bth-opt{
  -webkit-appearance:none; appearance:none;
  width:100% !important; min-height:56px !important;
  display:flex !important; align-items:center; gap:12px;
  padding:15px 17px !important; margin:0 !important;
  background:#1E1B13 !important; border:1px solid var(--bth-line2) !important;
  border-radius:0 !important;
  color:#D7DCE1 !important; font-family:inherit !important;
  font-size:13.5px !important; font-weight:700 !important;
  letter-spacing:.11em !important; text-transform:uppercase !important;
  line-height:1.3 !important; text-align:left; cursor:pointer;
  transition:border-color .3s var(--bth-ease), background .3s var(--bth-ease),
             color .3s var(--bth-ease), transform .3s var(--bth-ease);
}
.hiveop-build-the-hive .bth-opt .k{
  width:7px; height:7px; flex:0 0 auto;
  border:1px solid var(--bth-mut2);
  transition:background .3s var(--bth-ease), border-color .3s var(--bth-ease);
}
.hiveop-build-the-hive .bth-opt:hover:not(:disabled){
  border-color:var(--bth-aqua) !important; color:#fff !important; background:#16211F !important;
}
.hiveop-build-the-hive .bth-opt:hover:not(:disabled) .k{ border-color:var(--bth-aqua); }
.hiveop-build-the-hive .bth-opt:focus-visible{
  outline:2px solid var(--bth-aqua); outline-offset:2px;
}
.hiveop-build-the-hive .bth-opt:disabled{ cursor:default; }
.hiveop-build-the-hive .bth-opt.is-chosen{ color:#fff !important; }
.hiveop-build-the-hive .bth-opt.is-chosen-good{ border-color:var(--bth-emerald) !important; background:#141E16 !important; }
.hiveop-build-the-hive .bth-opt.is-chosen-good .k{ background:var(--bth-emerald); border-color:var(--bth-emerald); }
.hiveop-build-the-hive .bth-opt.is-chosen-flag{ border-color:var(--bth-gold) !important; background:#201A0C !important; }
.hiveop-build-the-hive .bth-opt.is-chosen-flag .k{ background:var(--bth-gold); border-color:var(--bth-gold); }
.hiveop-build-the-hive .bth-opt.is-faded{ opacity:.32; }

.hiveop-build-the-hive .bth-feedback{
  margin:16px 0 0; min-height:17px;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color:var(--bth-mut2);
  opacity:0; transition:opacity .4s var(--bth-ease);
}
.hiveop-build-the-hive .bth-feedback.is-on{ opacity:1; }
.hiveop-build-the-hive .bth-feedback.is-good{ color:var(--bth-emerald); }
.hiveop-build-the-hive .bth-feedback.is-warn{ color:var(--bth-gold); }

/* buttons */
.hiveop-build-the-hive .bth-btn{
  -webkit-appearance:none; appearance:none;
  display:inline-flex !important; align-items:center; justify-content:center;
  min-height:52px !important; padding:15px 30px !important;
  font-family:inherit !important; font-size:13px !important; font-weight:700 !important;
  letter-spacing:.13em !important; text-transform:uppercase !important;
  border-radius:0 !important; border:1px solid transparent !important; cursor:pointer;
  text-decoration:none !important; line-height:1.2 !important; margin:0 !important;
  transition:background .3s var(--bth-ease), color .3s var(--bth-ease),
             border-color .3s var(--bth-ease), transform .2s var(--bth-ease);
}
.hiveop-build-the-hive .bth-btn-primary{ background:var(--bth-gold) !important; color:#0A0A0B !important; }
.hiveop-build-the-hive .bth-btn-primary:hover{ background:#DBBC63 !important; }
.hiveop-build-the-hive .bth-btn-ghost{
  background:transparent !important; color:#D7DCE1 !important;
  border:1px solid var(--bth-line2) !important;
}
.hiveop-build-the-hive .bth-btn-ghost:hover{ border-color:var(--bth-aqua) !important; color:#fff !important; }
.hiveop-build-the-hive .bth-btn:focus-visible{ outline:2px solid var(--bth-aqua); outline-offset:3px; }

/* result */
.hiveop-build-the-hive .bth-weak{
  display:flex; align-items:baseline; gap:13px; flex-wrap:wrap;
  border-left:2px solid var(--bth-gold); padding:11px 0 11px 15px; margin-bottom:4px;
}
.hiveop-build-the-hive .bth-weak-k{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--bth-mut2); font-weight:700;
}
.hiveop-build-the-hive .bth-weak-v{
  font-size:clamp(24px,3.1vw,34px); font-family:var(--bth-title);
  font-weight:500; letter-spacing:.05em; color:var(--bth-gold);
}
.hiveop-build-the-hive .bth-weak.is-healthy{ border-left-color:var(--bth-emerald); }
.hiveop-build-the-hive .bth-weak.is-healthy .bth-weak-v{ color:var(--bth-emerald); font-size:clamp(19px,2.3vw,25px); }

.hiveop-build-the-hive .bth-areas-k{
  margin:22px 0 10px; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--bth-mut2); font-weight:700;
}
.hiveop-build-the-hive .bth-chips{ list-style:none !important; margin:0 !important; padding:0 !important; display:flex; flex-wrap:wrap; gap:7px; }
.hiveop-build-the-hive .bth-chips li{
  border:1px solid var(--bth-line2); padding:6px 11px;
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:#AEB5BC; font-weight:600;
}
.hiveop-build-the-hive .bth-cta{ margin-top:26px; border-top:1px solid var(--bth-line); padding-top:20px; }
.hiveop-build-the-hive .bth-cta-k{ margin:0 0 6px; font-size:15px; font-weight:700; color:#fff; }
.hiveop-build-the-hive .bth-cta-b{ margin:0 0 18px; font-size:14px; color:var(--bth-mut); max-width:46ch; }
.hiveop-build-the-hive .bth-cta-row{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------------- mobile ---------------- */
@media (max-width:860px){
  .hiveop-build-the-hive .bth-shell{ grid-template-columns:1fr; min-height:0; }
  .hiveop-build-the-hive .bth-stage{
    border-right:0; border-bottom:1px solid var(--bth-line);
    min-height:410px;
  }
  .hiveop-build-the-hive .bth-stage-inner{ padding:16px 12px 54px; }
  .hiveop-build-the-hive .bth-svg{ max-height:430px; }
  .hiveop-build-the-hive .bth-q{ max-width:none; }
  .hiveop-build-the-hive .bth-cta-row .bth-btn{ width:100%; }
}
@media (max-width:420px){
  .hiveop-build-the-hive .bth-stage{ min-height:360px; }
  .hiveop-build-the-hive .bth-svg{ max-height:380px; }
  .hiveop-build-the-hive .bth-stages-list{ gap:6px; }
  .hiveop-build-the-hive .bth-stages-list li{ padding:5px 9px; font-size:11px; }
}

/* ---------------- reduced motion ----------------
   The diagnostic has to work with every animation off. The bee still
   moves between rooms, just without the tween. */
@media (prefers-reduced-motion:reduce){
  .hiveop-build-the-hive *,
  .hiveop-build-the-hive *::before,
  .hiveop-build-the-hive *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hiveop-build-the-hive .bth-view.is-on{ animation:none; }
}
/* ==================================================================
   LIGHT THEME

   Add the class `bth-light` to the wrapper div to use it, remove it
   to go back to dark. Both are complete; nothing else changes.

   The accents are not the same hex values as the dark theme, and they
   cannot be. Gold on a warm cream sits around 1.8:1 and a bright teal
   is worse — as text they are effectively invisible. So the light
   theme keeps gold, teal and green as a family but uses the deeper
   members of it for anything that has to be read, and saves the
   brighter values for large fills like the button and the bee, where
   contrast is carried by the shape rather than by the hue.
   ================================================================== */
.hiveop-build-the-hive.bth-light{
  --bth-bg:#FAF8F3;
  --bth-bg2:#FFFDF9;
  --bth-line:#E8E3D8;
  --bth-line2:#D4CDBE;
  --bth-ink:#2A2721;
  --bth-mut:#6B6557;
  --bth-mut2:#958F80;
  --bth-gold:#C9A84C;
  --bth-gold-ink:#8A6F27;     /* gold, dark enough to read */
  --bth-aqua:#2E6B6B;         /* the brand teal rather than neon */
  --bth-emerald:#2F7D5C;
  --bth-amber:#A9832F;

  background:
    radial-gradient(1200px 620px at 50% -10%, #FFFFFF 0%, transparent 62%),
    var(--bth-bg);
  border-color:var(--bth-line);
  color:var(--bth-ink);
}

/* ---- stage and panel ---- */
.hiveop-build-the-hive.bth-light .bth-stage{
  background:
    radial-gradient(620px 420px at 50% 42%, rgba(46,107,107,.055) 0%, transparent 70%),
    linear-gradient(180deg,#FFFDF9 0%,#F6F3EC 100%);
  border-right-color:var(--bth-line);
}
.hiveop-build-the-hive.bth-light .bth-panel{
  background:linear-gradient(180deg,#FFFDF9 0%,#FAF8F3 100%);
}
@media (max-width:860px){
  .hiveop-build-the-hive.bth-light .bth-stage{ border-bottom-color:var(--bth-line); }
}

/* ---- hive structure ---- */
.hiveop-build-the-hive.bth-light .bth-lattice path{ stroke:#EDE8DD; }
.hiveop-build-the-hive.bth-light .corridor{ stroke:#F0ECE2; }
.hiveop-build-the-hive.bth-light .corridor-edge{ stroke:#D8D2C4; }
.hiveop-build-the-hive.bth-light .corridor-edge[data-lit="1"]{ stroke:rgba(46,107,107,.6); }
.hiveop-build-the-hive.bth-light .corridor-edge[data-lit="warn"]{ stroke:rgba(138,111,39,.8); }
.hiveop-build-the-hive.bth-light .detour{ stroke:var(--bth-gold-ink); }

.hiveop-build-the-hive.bth-light .room-shape{ fill:#FFFDF9; stroke:#D8D2C4; }
.hiveop-build-the-hive.bth-light .room-num{ fill:var(--bth-mut2); }
.hiveop-build-the-hive.bth-light .room-name{ fill:#9AA1AA; }
.hiveop-build-the-hive.bth-light .room-desc{ fill:transparent; }

.hiveop-build-the-hive.bth-light .room[data-state="active"] .room-shape{
  stroke:var(--bth-aqua); fill:#F1F7F6;
}
.hiveop-build-the-hive.bth-light .room[data-state="active"] .room-ring{ stroke:rgba(46,107,107,.34); }
.hiveop-build-the-hive.bth-light .room[data-state="active"] .room-num{ fill:var(--bth-aqua); }
.hiveop-build-the-hive.bth-light .room[data-state="active"] .room-name{ fill:#2A2721; }
.hiveop-build-the-hive.bth-light .room[data-state="active"] .room-desc{ fill:var(--bth-mut); }

.hiveop-build-the-hive.bth-light .room[data-state="healthy"] .room-shape{
  stroke:rgba(47,125,92,.8); fill:#F3FAF6;
}
.hiveop-build-the-hive.bth-light .room[data-state="healthy"] .room-num{ fill:var(--bth-emerald); }
.hiveop-build-the-hive.bth-light .room[data-state="healthy"] .room-name{ fill:#2B4438; }
.hiveop-build-the-hive.bth-light .room[data-state="healthy"] .room-desc{ fill:#6E8B7D; }

.hiveop-build-the-hive.bth-light .room[data-state="bottleneck"] .room-shape{
  stroke:rgba(138,111,39,.9); fill:#FDF8EB;
}
.hiveop-build-the-hive.bth-light .room[data-state="bottleneck"] .room-num{ fill:var(--bth-gold-ink); }
.hiveop-build-the-hive.bth-light .room[data-state="bottleneck"] .room-name{ fill:#5E4A15; }
.hiveop-build-the-hive.bth-light .room[data-state="bottleneck"] .room-desc{ fill:#998338; }

.hiveop-build-the-hive.bth-light .room[data-state="primary"] .room-shape{
  stroke:var(--bth-gold-ink); fill:#FCF3DC;
}
.hiveop-build-the-hive.bth-light .room[data-state="primary"] .room-ring{ stroke:rgba(138,111,39,.45); }
.hiveop-build-the-hive.bth-light .room[data-state="primary"] .room-num,
.hiveop-build-the-hive.bth-light .room[data-state="primary"] .room-name{ fill:var(--bth-gold-ink); }
.hiveop-build-the-hive.bth-light .room[data-state="primary"] .room-desc{ fill:#8C7430; }

.hiveop-build-the-hive.bth-light .door-leaf{ fill:#E4E0D6; stroke:#C8C3B8; }
.hiveop-build-the-hive.bth-light .door[data-open="1"] .door-leaf{
  fill:#E4F2EA; stroke:rgba(47,125,92,.6);
}
.hiveop-build-the-hive.bth-light .door[data-open="blocked"] .door-leaf{
  fill:#F7EED6; stroke:rgba(169,131,47,.8);
}
.hiveop-build-the-hive.bth-light .obstacle rect{ fill:var(--bth-gold-ink); }

.hiveop-build-the-hive.bth-light .core-shape{ fill:#FFFDF9; stroke:#D8D2C4; }
.hiveop-build-the-hive.bth-light .core[data-state="on"] .core-shape{
  stroke:var(--bth-aqua); fill:#EFF9F9;
}
.hiveop-build-the-hive.bth-light .core-label{ fill:var(--bth-mut2); }
.hiveop-build-the-hive.bth-light .core[data-state="on"] .core-label{ fill:var(--bth-aqua); }

/* ---- the bee reads as a solid object on light, so the halo
        that made it glow in the dark just makes it look smudged ---- */
.hiveop-build-the-hive.bth-light #bthBeeGlow stop:first-child{ stop-color:#B99A45; stop-opacity:.24; }
.hiveop-build-the-hive.bth-light #bthBeeGlow stop:nth-child(2){ stop-color:#C9A84C; stop-opacity:.06; }
.hiveop-build-the-hive.bth-light #bthCoreGlow stop:first-child{ stop-color:#2E6B6B; stop-opacity:.16; }
.hiveop-build-the-hive.bth-light #bthWing stop:first-child{ stop-color:#7A8A92; stop-opacity:.55; }
.hiveop-build-the-hive.bth-light #bthWing stop:last-child{ stop-color:#2E6B6B; stop-opacity:.25; }
.hiveop-build-the-hive.bth-light .trail-dot{ fill:#B99A45; }

/* ---- panel copy ---- */
.hiveop-build-the-hive.bth-light .bth-eyebrow{ color:var(--bth-gold-ink); }
.hiveop-build-the-hive.bth-light .bth-eyebrow i{ background:var(--bth-gold-ink); }
.hiveop-build-the-hive.bth-light .bth-h1,
.hiveop-build-the-hive.bth-light .bth-h2,
.hiveop-build-the-hive.bth-light .bth-q{ color:var(--bth-ink) !important; }
.hiveop-build-the-hive.bth-light h2,
.hiveop-build-the-hive.bth-light h3{ color:var(--bth-ink) !important; }
.hiveop-build-the-hive.bth-light .bth-stages-list span{ color:var(--bth-gold-ink); }
.hiveop-build-the-hive.bth-light .bth-prog-n{ color:var(--bth-gold-ink); }
.hiveop-build-the-hive.bth-light .bth-prog-dots i{ background:var(--bth-line2); }
.hiveop-build-the-hive.bth-light .bth-prog-dots i.is-done{ background:var(--bth-emerald); }
.hiveop-build-the-hive.bth-light .bth-prog-dots i.is-flag{ background:var(--bth-gold-ink); }
.hiveop-build-the-hive.bth-light .bth-prog-dots i.is-now{ background:var(--bth-aqua); }
.hiveop-build-the-hive.bth-light .bth-cell-id{ color:var(--bth-aqua); }
.hiveop-build-the-hive.bth-light .bth-status.is-warn{ color:var(--bth-gold-ink); }
.hiveop-build-the-hive.bth-light .bth-status.is-good{ color:var(--bth-emerald); }
.hiveop-build-the-hive.bth-light .bth-feedback.is-warn{ color:var(--bth-gold-ink); }
.hiveop-build-the-hive.bth-light .bth-feedback.is-good{ color:var(--bth-emerald); }

/* ---- controls ---- */
.hiveop-build-the-hive.bth-light .bth-opt{
  background:#FFFDF9 !important; border-color:var(--bth-line2) !important;
  color:#3A362E !important;
}
.hiveop-build-the-hive.bth-light .bth-opt .k{ border-color:var(--bth-mut2); }
.hiveop-build-the-hive.bth-light .bth-opt:hover:not(:disabled){
  border-color:var(--bth-aqua) !important; background:#F1F7F6 !important; color:var(--bth-ink) !important;
}
.hiveop-build-the-hive.bth-light .bth-opt.is-chosen-good{
  border-color:var(--bth-emerald) !important; background:#F3FAF6 !important;
}
.hiveop-build-the-hive.bth-light .bth-opt.is-chosen-flag{
  border-color:var(--bth-gold-ink) !important; background:#FDF8EB !important;
}
.hiveop-build-the-hive.bth-light .bth-opt.is-chosen{ color:var(--bth-ink) !important; }
.hiveop-build-the-hive.bth-light .bth-btn-ghost{
  color:#3A362E !important; border-color:var(--bth-line2) !important;
}
.hiveop-build-the-hive.bth-light .bth-btn-ghost:hover{
  border-color:var(--bth-aqua) !important; color:var(--bth-ink) !important;
}
.hiveop-build-the-hive.bth-light .bth-weak{ border-left-color:var(--bth-gold-ink); }
.hiveop-build-the-hive.bth-light .bth-weak-v{ color:var(--bth-gold-ink); }
.hiveop-build-the-hive.bth-light .bth-weak.is-healthy{ border-left-color:var(--bth-emerald); }
.hiveop-build-the-hive.bth-light .bth-weak.is-healthy .bth-weak-v{ color:var(--bth-emerald); }
.hiveop-build-the-hive.bth-light .bth-chips li{ color:#4A5159; border-color:var(--bth-line2); }
.hiveop-build-the-hive.bth-light .bth-cta{ border-top-color:var(--bth-line); }
.hiveop-build-the-hive.bth-light .bth-cta-k{ color:var(--bth-ink); }
.hiveop-build-the-hive.bth-light .bth-err,
.hiveop-build-the-hive.bth-light .bth-fine{ color:var(--bth-mut); }