/* ==========================================================================
   GEPA Workbench landing page (draft)
   Animated CSS frames replicating the GEPA Workbench UI.
   Palette and labels mirror src/gepa/dashboard/frontend (GEPA Blue / Midnight).
   ========================================================================== */

/* Page shell ------------------------------------------------------------- */

article > h1 {
  display: none !important;
}
.md-content__button {
  display: none !important;
}

.wb-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 0.4rem 3rem;
}

.wb-hero {
  text-align: center;
  padding: 2.4rem 0 1.6rem;
}

.wb-hero h1 {
  display: block !important;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--md-default-fg-color);
  margin: 0 0 0.6rem;
}

.wb-hero-sub {
  font-family: "Libre Baskerville", Georgia, serif;
  font-style: italic;
  font-weight: 200;
  font-size: 1.05rem;
  color: var(--md-default-fg-color--light);
  margin: 0 auto 1.1rem;
  max-width: 38rem;
}

.wb-hero-note {
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
  max-width: 34rem;
  margin: 0.9rem auto 0;
  line-height: 1.6;
}

.wb-cta-row {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}

.wb-btn {
  display: inline-block;
  background: #0077b6;
  color: #fff !important;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.42rem 1rem;
  border-radius: 7px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 122, 102, 0.18);
  transition: background 0.15s;
}
.wb-btn:hover {
  background: #023e8a;
}
.wb-btn-ghost {
  display: inline-block;
  color: var(--md-default-fg-color) !important;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.42rem 1rem;
  border-radius: 7px;
  border: 1px solid var(--md-default-fg-color--lightest);
  text-decoration: none;
  transition: border-color 0.15s;
}
.wb-btn-ghost:hover {
  border-color: #0077b6;
}

.wb-section {
  margin: 3.2rem 0 0;
}
.wb-section h2,
.wb-section > h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--md-default-fg-color);
  margin: 0 0 0.45rem;
}
.wb-section > h3 {
  font-size: 1.15rem;
}
.wb-section > p {
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--md-default-fg-color--light);
  max-width: 44rem;
  margin: 0 0 1.1rem;
}
.wb-intro {
  margin-top: 2.2rem;
}
.wb-intro > p {
  margin-bottom: 0.6rem;
}

/* Workbench design tokens ------------------------------------------------ */

.wb {
  --wbg: #f5f8fb;
  --wsurf: #ffffff;
  --wsurf2: #eef2f7;
  --wbord: #e4e9f0;
  --wbord2: #cdd6e2;
  --wnavy: #212c4d;
  --wdeep: #023e8a;
  --wteal: #0077b6;
  --wteal-soft: #e4f1fa;
  --wcyan: #00b4d8;
  --wblue: #3a6ea5;
  --wpurple: #6b5fc4;
  --wred: #d1495b;
  --wamber: #c08019;
  --wgreen: #2f9e63;
  --wmaroon: #8f2d2d;
  --wtext: #18223a;
  --wdim: #5a6577;
  --wdimmer: #98a2b3;
  --wgrad: linear-gradient(135deg, #023e8a, #0077b6, #00b4d8, #48cae4);
  --wmono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wsans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-family: var(--wsans);
  font-variant-numeric: tabular-nums;
}

[data-md-color-scheme="slate"] .wb {
  --wbg: #0e1320;
  --wsurf: #161d2e;
  --wsurf2: #1d263a;
  --wbord: #2a3450;
  --wbord2: #3d4a68;
  --wnavy: #dbe5f5;
  --wdeep: #2563b8;
  --wteal: #4d9fe0;
  --wteal-soft: #17304a;
  --wcyan: #38bdf8;
  --wblue: #8ab6f5;
  --wpurple: #c0aaff;
  --wred: #f06a7d;
  --wamber: #e0a93c;
  --wgreen: #43c47e;
  --wmaroon: #cf7a72;
  --wtext: #e6ebf5;
  --wdim: #b3bfd6;
  --wdimmer: #7e8ba6;
  --wgrad: linear-gradient(135deg, #1e3a8a, #2563b8, #38bdf8, #67e8f9);
}

/* Window chrome ---------------------------------------------------------- */

.wb-scroll {
  overflow-x: auto;
  /* room for the drop shadow so the scroll container does not clip it */
  padding: 8px 8px 30px;
  margin: -8px -8px -12px;
}

.wb-window {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--wbord2);
  border-radius: 12px;
  overflow: hidden;
  background: var(--wbg);
  box-shadow: 0 1px 3px rgba(16, 32, 64, 0.07), 0 10px 22px rgba(16, 32, 64, 0.08);
  font-size: 12px;
  line-height: 1.4;
  color: var(--wtext);
}

.wb-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: var(--wsurf2);
  border-bottom: 1px solid var(--wbord);
}
.wb-chrome i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.wb-chrome i:nth-child(1) { background: #f26d63; }
.wb-chrome i:nth-child(2) { background: #f4bf4f; }
.wb-chrome i:nth-child(3) { background: #57c454; }
.wb-chrome span {
  margin-left: 10px;
  font-size: 10px;
  color: var(--wdimmer);
  font-family: var(--wmono);
}

/* Animated fake cursor ---------------------------------------------------- */

.wb-ptr {
  position: absolute;
  width: 16px;
  height: 16px;
  z-index: 60;
  pointer-events: none;
  transform-origin: 4px 3px;
}
.wb-ptr svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.4));
}
.wb-ptr path {
  fill: #0b0f19;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.wb-ptr::after {
  content: "";
  position: absolute;
  left: -5px;
  top: -6px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--wteal, #0077b6);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.3);
}
.wb-ptr-obs { animation: wbCurObs 27s ease-in-out infinite; }
.wb-ptr-asst { animation: wbCurAsst 18s ease-in-out infinite; }
.wb-ptr-imp { animation: wbCurImp 18s ease-in-out infinite; }
.wb-ptr-obs::after { animation: wbRipObs 27s linear infinite; }
.wb-ptr-asst::after { animation: wbRipAsst 18s linear infinite; }
.wb-ptr-imp::after { animation: wbRipImp 18s linear infinite; }

/* App header bar ---------------------------------------------------------- */

.wb-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  background: var(--wsurf);
  border-bottom: 1px solid var(--wbord);
  white-space: nowrap;
}
.wb-back {
  font-size: 11px;
  color: var(--wdim);
}
.wb-vdiv {
  width: 1px;
  height: 16px;
  background: var(--wbord2);
}
.wb-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--wnavy);
}
.wb-logo img {
  height: 18px;
  width: auto;
  display: block;
}
.wb-runsel {
  font-size: 11px;
  padding: 3px 9px;
  border: 1px solid var(--wbord);
  border-radius: 6px;
  background: var(--wsurf);
  color: var(--wtext);
}
.wb-runsel b {
  color: var(--wdimmer);
  font-weight: 400;
  margin-left: 4px;
}

.wb-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  background: rgba(60, 138, 63, 0.12);
  color: var(--wgreen);
}
.wb-badge .wb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: wbPulse 1.6s ease-in-out infinite;
}

.wb-stats {
  display: flex;
  gap: 14px;
  margin-left: 4px;
}
.wb-stat {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.wb-stat span {
  font-size: 8.5px;
  color: var(--wdim);
}
.wb-stat b {
  font-family: var(--wmono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--wtext);
}
.wb-stat b.teal { color: var(--wteal); }
.wb-stat b .up { color: var(--wgreen); font-style: normal; font-weight: 500; }

.wb-actions {
  margin-left: auto;
  display: flex;
  gap: 5px;
}
.wb-actions span {
  font-size: 10px;
  padding: 3px 8px;
  border: 1px solid var(--wbord);
  border-radius: 6px;
  background: var(--wsurf);
  color: var(--wdim);
}
.wb-actions span.tealb {
  color: var(--wteal);
  border-color: rgba(0, 119, 182, 0.3);
}

/* Body: explorer + main -------------------------------------------------- */

.wb-body {
  display: flex;
  align-items: stretch;
  min-height: 0;
}

.wb-explorer {
  width: 158px;
  min-width: 158px;
  background: var(--wsurf);
  border-right: 1px solid var(--wbord);
  display: flex;
  flex-direction: column;
}
.wb-exp-head {
  padding: 6px 9px;
  background: var(--wsurf2);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wnavy);
  border-bottom: 1px solid var(--wbord);
}
.wb-seg {
  display: flex;
  margin: 6px 8px;
  background: var(--wsurf2);
  border-radius: 6px;
  padding: 2px;
}
.wb-seg span {
  flex: 1;
  text-align: center;
  font-size: 9.5px;
  padding: 2px 0;
  border-radius: 4px;
  color: var(--wdim);
}
.wb-seg span.on {
  background: var(--wsurf);
  color: var(--wtext);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 32, 64, 0.08);
}

.wb-cands {
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wb-cand {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 5px;
  border: 1px solid transparent;
  font-size: 10.5px;
  color: var(--wtext);
}
.wb-cand.on {
  background: var(--wsurf2);
  border-color: var(--wbord2);
}
.wb-cand .mk { margin-left: auto; font-size: 8.5px; }
.wb-cand .mk.star { color: var(--wamber); }
.wb-cand .mk.par { color: var(--wpurple); }
.wb-cand .sc {
  font-family: var(--wmono);
  font-size: 10px;
  font-weight: 600;
  color: var(--wteal);
}

.wb-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--wbg);
}

/* Tabs ------------------------------------------------------------------- */

.wb-tabs {
  display: flex;
  gap: 16px;
  height: 32px;
  align-items: stretch;
  padding: 0 14px;
  background: var(--wsurf);
  border-bottom: 1px solid var(--wbord);
}
.wb-tab {
  display: flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wdimmer);
  border-bottom: 2px solid transparent;
}
.wb-obs .wb-tab-ov { animation: wbTabOv 27s infinite; }
.wb-obs .wb-tab-ev { animation: wbTabEv 27s infinite; }
.wb-obs .wb-tab-rf { animation: wbTabRf 27s infinite; }

/* Pane crossfade: Overview -> Evaluation -> Reflections ------------------- */

.wb-panes {
  position: relative;
  height: 372px;
}
.wb-pane {
  position: absolute;
  inset: 0;
  padding: 10px 14px;
  overflow: hidden;
}
.wb-obs .wb-pane-ov { animation: wbPaneOv 27s infinite; }
.wb-obs .wb-pane-ev { animation: wbPaneEv 27s infinite; opacity: 0; }
.wb-obs .wb-pane-rf { animation: wbPaneRf 27s infinite; opacity: 0; }

/* Overview cards ---------------------------------------------------------- */

.wb-card {
  background: var(--wsurf);
  border: 1px solid var(--wbord);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(20, 16, 8, 0.025), 0 2px 8px rgba(20, 16, 8, 0.03);
  margin-bottom: 8px;
}

.wb-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 11px;
  color: var(--wtext);
}
.wb-banner .wb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wgreen);
  animation: wbPulse 1.6s ease-in-out infinite;
}
.wb-banner b {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wgreen);
}
.wb-analyze {
  margin-left: auto;
  position: relative;
  font-size: 9.5px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--wsurf);
  color: var(--wtext);
}
.wb-analyze::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 999px;
  background: var(--wgrad);
  z-index: -1;
}
.wb-analyze::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--wsurf);
  z-index: -1;
}

.wb-hero-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 14px;
  border-left: 3px solid var(--wteal);
}
.wb-hc-left { min-width: 118px; }
.wb-hc-label {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--wdim);
  margin-bottom: 1px;
}
.wb-hc-score {
  font-family: var(--wmono);
  font-size: 24px;
  font-weight: 600;
  color: var(--wteal);
  line-height: 1.1;
  position: relative;
  height: 28px;
  min-width: 62px;
}
.wb-hc-score i {
  position: absolute;
  left: 0;
  top: 0;
  font-style: normal;
  opacity: 0;
}
.wb-obs .wb-hc-score i:nth-child(1) { animation: wbScoreA 27s infinite; }
.wb-obs .wb-hc-score i:nth-child(2) { animation: wbScoreB 27s infinite; }
.wb-obs .wb-hc-score i:nth-child(3) { animation: wbScoreC 27s infinite; }
.wb-hc-score em {
  position: absolute;
  left: 68px;
  top: 10px;
  font-style: normal;
  font-family: var(--wmono);
  font-size: 10px;
  color: var(--wgreen);
}
.wb-hc-sub {
  font-family: var(--wmono);
  font-size: 9px;
  color: var(--wdimmer);
  display: flex;
  gap: 6px;
  align-items: center;
}
.wb-hc-sub .chip {
  color: var(--wgreen);
  background: rgba(60, 138, 63, 0.08);
  border-radius: 3px;
  padding: 0 4px;
}
.wb-hc-mid {
  border-left: 1px solid var(--wbord);
  padding-left: 14px;
  flex: 1;
  min-width: 0;
}
.wb-hc-comp {
  font-family: var(--wmono);
  font-size: 9px;
  color: var(--wteal);
  margin-bottom: 3px;
}
.wb-hc-comp span { color: var(--wdimmer); margin-left: 6px; }
.wb-hc-prev {
  font-family: var(--wmono);
  font-size: 9px;
  color: var(--wdim);
  max-height: 30px;
  overflow: hidden;
  white-space: pre-wrap;
}
.wb-hc-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.wb-hc-actions .ghost {
  font-size: 9.5px;
  padding: 3px 10px;
  border: 1px solid var(--wbord);
  border-radius: 5px;
  color: var(--wdim);
  background: var(--wsurf);
  text-align: center;
}
.wb-hc-actions .solid {
  font-size: 9.5px;
  padding: 3px 10px;
  border-radius: 5px;
  background: var(--wteal);
  color: #fff;
  text-align: center;
  box-shadow: 0 1px 2px rgba(15, 122, 102, 0.18);
}

/* Score chart ------------------------------------------------------------- */

.wb-chart-card { padding: 8px 12px 6px; }
.wb-chart-head {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}
.wb-chart-head b {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--wnavy);
}
.wb-chart-head .ctl {
  margin-left: auto;
  display: flex;
  gap: 5px;
}
.wb-chart-head .ctl span {
  font-size: 9px;
  padding: 2px 7px;
  border: 1px solid var(--wbord);
  border-radius: 5px;
  color: var(--wdim);
}
.wb-chart svg {
  display: block;
  width: 100%;
  height: auto;
}
.wb-chart .grid {
  stroke: var(--wbord);
  stroke-dasharray: 2 4;
  opacity: 0.7;
}
.wb-chart .axis { stroke: var(--wbord2); }
.wb-chart .lbl {
  font-family: var(--wsans);
  font-size: 9px;
  fill: var(--wdim);
}
.wb-chart .tick {
  font-family: var(--wmono);
  font-size: 8px;
  fill: var(--wdimmer);
}
.wb-chart .ref-seed {
  stroke: var(--wdimmer);
  stroke-dasharray: 6 4;
  stroke-width: 1;
}
.wb-chart .ref-best {
  stroke: var(--wteal);
  stroke-dasharray: 6 4;
  stroke-width: 1;
}
.wb-chart .ref-pareto {
  stroke: var(--wpurple);
  stroke-dasharray: 3 6;
  stroke-width: 1;
  opacity: 0.55;
}
.wb-chart .traj {
  fill: none;
  stroke: var(--wteal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.wb-obs .wb-chart .traj { animation: wbDraw 27s infinite; }
.wb-chart .cdot {
  fill: var(--wblue);
  stroke: var(--wsurf);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
}
.wb-chart .cbest {
  fill: var(--wteal);
  stroke: var(--wsurf);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
}
.wb-chart .chalo {
  fill: var(--wteal);
  opacity: 0.18;
}
.wb-obs .wb-chart .p1 { opacity: 0; animation: wbPop1 27s infinite; }
.wb-obs .wb-chart .p2 { opacity: 0; animation: wbPop2 27s infinite; }
.wb-obs .wb-chart .p3 { opacity: 0; animation: wbPop3 27s infinite; }
.wb-obs .wb-chart .p4 { opacity: 0; animation: wbPop4 27s infinite; }
.wb-obs .wb-chart .p5 { opacity: 0; animation: wbPop5 27s infinite; }
.wb-obs .wb-chart .p6 { opacity: 0; animation: wbPop6 27s infinite; }
.wb-obs .wb-chart .p7 { opacity: 0; animation: wbPop7 27s infinite; }
.wb-obs .wb-chart .p8 { opacity: 0; animation: wbPop8 27s infinite; }
.wb-obs .wb-chart .chalo.p8 { animation: wbPop8Halo 27s infinite; }
.wb-chart .ychip {
  fill: var(--wsurf);
  stroke: var(--wteal);
  stroke-width: 1;
}
.wb-chart .ychip-best { fill: var(--wteal); }
.wb-chart .ychip-txt {
  font-family: var(--wmono);
  font-size: 8px;
  fill: var(--wteal);
}
.wb-chart .ychip-txt-best { fill: #fff; }
.wb-legend {
  display: flex;
  justify-content: center;
  gap: 14px;
  font-family: var(--wmono);
  font-size: 8.5px;
  padding: 2px 0 4px;
}
.wb-legend span::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 0;
  border-top: 1.5px dashed currentColor;
  margin-right: 4px;
  vertical-align: middle;
}
.wb-legend .lg-seed { color: var(--wdimmer); }
.wb-legend .lg-best { color: var(--wteal); }
.wb-legend .lg-par { color: var(--wpurple); }

/* Evaluation pane --------------------------------------------------------- */

.wb-ev-toolbar {
  display: flex;
  align-items: center;
  padding: 2px 2px 8px;
}
.wb-ev-toolbar b {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--wdim);
}
.wb-ev-toolbar .wb-seg {
  margin: 0 0 0 auto;
  width: 240px;
}

.wb-table {
  background: var(--wsurf);
  border: 1px solid var(--wbord);
  border-radius: 8px;
  overflow: hidden;
  font-size: 10px;
}
.wb-tr {
  display: grid;
  grid-template-columns: 28px 64px 84px 56px 1fr;
  align-items: center;
  border-bottom: 1px solid var(--wbord);
}
.wb-tr:last-child { border-bottom: none; }
.wb-tr > div { padding: 3px 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wb-th {
  background: var(--wsurf2);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wdimmer);
}
.wb-tr .mono { font-family: var(--wmono); color: var(--wdim); }
.wb-tr .mono.strong { color: var(--wtext); font-weight: 600; }

/* Packed-circles preview cell */
.wb-pk {
  display: block;
  width: 22px;
  height: 22px;
}
.wb-pk rect {
  fill: none;
  stroke: var(--wbord2);
  stroke-width: 1;
}
.wb-pk circle {
  fill: color-mix(in srgb, var(--wteal) 14%, transparent);
  stroke: var(--wteal);
  stroke-width: 1;
}

/* Per-candidate score strip: cells light up as the run progresses */
.wb-strip {
  display: flex;
  gap: 2px;
  width: 100%;
}
.wb-strip i {
  flex: 1;
  min-width: 0;
  height: 13px;
  border-radius: 3px;
  font-family: var(--wmono);
  font-size: 7px;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wtext);
}
.wb-strip .s1 { background: #f4f3ef; color: #5a6577; }
.wb-strip .s2 { background: #bcd6cc; color: #2c4a40; }
.wb-strip .s3 { background: #65a396; color: #fff; }
.wb-strip .s4 { background: #3a8a77; color: #fff; }
.wb-strip .s5 { background: #0f7a66; color: #fff; }
[data-md-color-scheme="slate"] .wb-strip .s1 { background: #232a3c; color: #7e8ba6; }
[data-md-color-scheme="slate"] .wb-strip .s2 { background: #26443c; color: #9fc4b8; }
.wb-obs .wb-strip .k1 { opacity: 0; animation: wbK1 27s infinite; }
.wb-obs .wb-strip .k2 { opacity: 0; animation: wbK2 27s infinite; }
.wb-obs .wb-strip .k3 { opacity: 0; animation: wbK3 27s infinite; }
.wb-obs .wb-strip .k4 { opacity: 0; animation: wbK4 27s infinite; }
.wb-obs .wb-strip .k5 { opacity: 0; animation: wbK5 27s infinite; }
.wb-obs .wb-strip .k6 { opacity: 0; animation: wbK6 27s infinite; }
.wb-obs .wb-strip .k7 { opacity: 0; animation: wbK7 27s infinite; }
.wb-obs .wb-strip .k8 { opacity: 0; animation: wbK8 27s infinite; }

/* Reflections pane --------------------------------------------------------- */

.wb-info {
  position: relative;
  padding: 8px 12px 8px 16px;
  overflow: hidden;
}
.wb-info::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--wteal);
}
.wb-info .ti {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--wtext);
}
.wb-info .ti .chev { margin-left: auto; color: var(--wdimmer); font-size: 9px; }
.wb-info .ti .n { font-family: var(--wmono); font-size: 9px; color: var(--wdimmer); font-weight: 400; }
.wb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.wb-chips span {
  font-family: var(--wmono);
  font-size: 8.5px;
  background: var(--wsurf2);
  border: 1px solid var(--wbord);
  border-radius: 999px;
  padding: 1px 8px;
  color: var(--wdim);
}
.wb-rf-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--wnavy);
  margin: 4px 2px 6px;
}
.wb-rblock {
  background: var(--wsurf);
  border: 1px solid var(--wbord);
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 10px;
}
.wb-rblock-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
}
.wb-rblock-head .chev { color: var(--wdim); font-size: 8px; }
.wb-rblock-head .lnk {
  font-family: var(--wmono);
  font-size: 10px;
  color: var(--wteal);
}
.wb-rblock-head .lnk.rej { color: var(--wmaroon); }
.wb-rblock-head .arr { color: var(--wdimmer); }
.wb-rblock-head .bg {
  font-size: 8.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
}
.wb-rblock-head .bg-acc {
  color: var(--wgreen);
  background: rgba(60, 138, 63, 0.1);
  border: 1px solid rgba(60, 138, 63, 0.27);
}
.wb-rblock-head .bg-rej {
  color: var(--wmaroon);
  background: color-mix(in srgb, var(--wmaroon) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--wmaroon) 27%, transparent);
}
.wb-rblock-head .dlt {
  font-family: var(--wmono);
  font-size: 9px;
  color: var(--wdim);
}
.wb-rblock-head .tok {
  margin-left: auto;
  font-family: var(--wmono);
  font-size: 8.5px;
  color: var(--wdimmer);
}
.wb-rblock-body {
  border-top: 1px solid var(--wbord);
  padding: 8px 11px;
  font-size: 10px;
  line-height: 1.55;
  color: var(--wdim);
}
.wb-rblock-body b {
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wteal);
  margin-bottom: 2px;
}
.wb-rblock-body .quote {
  background: var(--wsurf2);
  border-radius: 5px;
  padding: 6px 9px;
  margin-top: 6px;
  font-family: var(--wmono);
  font-size: 9px;
  color: var(--wtext);
  white-space: pre-wrap;
}

/* Logs dock ---------------------------------------------------------------- */

.wb-dock {
  border-top: 1px solid var(--wbord);
}
.wb-dock-head {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 24px;
  padding: 0 12px;
  background: var(--wsurf2);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.wb-dock-head .on {
  color: var(--wteal);
  border-bottom: 2px solid var(--wteal);
  height: 100%;
  display: inline-flex;
  align-items: center;
}
.wb-dock-head .off {
  color: var(--wdimmer);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wb-dock-head .off img {
  width: 11px;
  height: 11px;
}
.wb-dock-head .cnt {
  background: var(--wred);
  color: #fff;
  font-size: 7px;
  border-radius: 999px;
  min-width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}
.wb-dock-body {
  background: #0d1117;
  color: #c9d1d9;
  font-family: var(--wmono);
  font-size: 9.5px;
  line-height: 1.55;
  padding: 6px 12px 8px;
}
.wb-log { display: flex; gap: 10px; white-space: nowrap; overflow: hidden; }
.wb-log .t { color: #6e7681; }
.wb-log .it { color: #8b949e; min-width: 66px; }
.wb-log .lv-accept { color: #3fb950; min-width: 52px; }
.wb-log .lv-info { color: #58a6ff; min-width: 52px; }
.wb-log .lv-pareto { color: #bc8cff; min-width: 52px; }
.wb-log-new { opacity: 0; animation: wbLogIn 27s infinite both; animation-delay: 8s; }
.wb-cursor {
  display: inline-block;
  width: 6px;
  height: 1.05em;
  background: #c9d1d9;
  vertical-align: text-bottom;
  animation: wbBlink 1.1s steps(1) infinite;
}

/* Entry cards --------------------------------------------------------------- */

.wb-entries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  align-items: stretch;
}
.wb-entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--wsurf);
  border: 1px solid var(--wbord);
  border-radius: 10px;
  padding: 13px 14px 14px;
  box-shadow: 0 1px 2px rgba(16, 32, 64, 0.04), 0 4px 12px rgba(16, 32, 64, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  opacity: 0;
  animation: wbRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  color: var(--wtext);
}
.wb-entry > :last-child { margin-top: auto; }
.wb-entry:nth-child(1) { animation-delay: 0.05s; }
.wb-entry:nth-child(2) { animation-delay: 0.2s; }
.wb-entry:nth-child(3) { animation-delay: 0.35s; }
.wb-entry:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(16, 32, 64, 0.06), 0 10px 24px rgba(16, 32, 64, 0.09);
}
.wb-entry .ico {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--wsurf2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: var(--wteal);
  font-size: 13px;
}
.wb-entry h3 {
  font-size: 12.5px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--wtext);
}
.wb-entry p {
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--wdim);
  margin: 0 0 12px;
}
.wb-entry .snippet {
  display: block;
  align-self: stretch;
  background: #0d1117;
  color: #c9d1d9;
  border-radius: 6px;
  font-family: var(--wmono);
  font-size: 9.5px;
  padding: 7px 9px;
  overflow: hidden;
  white-space: nowrap;
}
.wb-entry .snippet .k { color: #ff7b72; }
.wb-entry .snippet .f { color: #d2a8ff; }
.wb-entry .cta {
  display: inline-block;
  background: var(--wteal);
  color: #fff;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 11px;
}

/* Assistant frame ---------------------------------------------------------- */

.wb-asst { max-width: 620px; }
.wb-agent-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--wsurf);
  border-bottom: 1px solid var(--wbord);
}
.wb-agent-head .aglogo {
  width: 16px;
  height: 16px;
  margin-right: 2px;
}
.wb-agent-tab {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  color: var(--wdim);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.wb-agent-tab .cnt {
  background: var(--wred);
  color: #fff;
  font-size: 7.5px;
  font-weight: 700;
  border-radius: 999px;
  min-width: 13px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wb-asst .wb-agent-tab.t-chat { animation: wbAgTabA 18s infinite; }
.wb-asst .wb-agent-tab.t-diag { animation: wbAgTabB 18s infinite; }
.wb-agent-head .sess {
  margin-left: auto;
  font-size: 9.5px;
  color: var(--wdimmer);
}

.wb-agent-panes {
  position: relative;
  height: 300px;
  background: var(--wbg);
}
.wb-agent-pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.wb-agent-pane.chat { animation: wbAgPaneA 18s infinite; }
.wb-agent-pane.diag { animation: wbAgPaneB 18s infinite; opacity: 0; padding: 10px 12px; gap: 8px; }

.wb-chat-scroll {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.wb-msg-user {
  align-self: flex-end;
  max-width: 85%;
  background: color-mix(in srgb, var(--wteal) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--wteal) 22%, transparent);
  border-radius: 10px 10px 3px 10px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--wtext);
  opacity: 0;
  animation: wbChat1 18s infinite both;
}
.wb-msg-think {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-style: italic;
  color: var(--wdimmer);
  opacity: 0;
  animation: wbChat2 18s infinite both;
}
.wb-msg-asst {
  display: flex;
  gap: 8px;
  max-width: 92%;
  font-size: 11px;
  line-height: 1.55;
  color: var(--wtext);
  opacity: 0;
  animation: wbChat3 18s infinite both;
}
.wb-msg-asst img.av {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
}
.wb-msg-asst .cur {
  display: inline-block;
  width: 6px;
  height: 12px;
  background: var(--wteal);
  opacity: 0.7;
  vertical-align: text-bottom;
  animation: wbBlink 1s steps(1) infinite;
}
.wb-msg-asst code {
  font-family: var(--wmono);
  font-size: 10px;
  background: var(--wsurf2);
  border-radius: 3px;
  padding: 0 3px;
  color: var(--wtext);
}

.wb-composer {
  border-top: 1px solid var(--wbord);
  background: var(--wsurf);
  padding: 6px 10px 8px;
}
.wb-chip {
  display: inline-block;
  font-family: var(--wmono);
  font-size: 8.5px;
  background: var(--wsurf2);
  border: 1px solid var(--wbord);
  border-radius: 999px;
  padding: 1px 8px;
  color: var(--wdim);
  margin-bottom: 5px;
}
.wb-prompt {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 10.5px;
}
.wb-prompt .mark {
  font-family: var(--wmono);
  color: var(--wteal);
  font-weight: 600;
}
.wb-prompt .ph { color: var(--wdimmer); }

.wb-diag-busy {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  color: var(--wdim);
  opacity: 0;
  animation: wbDiag1 18s infinite both;
}
.wb-dots i {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 2px;
  animation: wbBounce 1s ease-in-out infinite;
}
.wb-dots i:nth-child(2) { animation-delay: 0.15s; }
.wb-dots i:nth-child(3) { animation-delay: 0.3s; }

.wb-diag-card {
  background: var(--wsurf);
  border: 1px solid var(--wbord);
  border-radius: 8px;
  padding: 9px 11px;
  opacity: 0;
  animation: wbDiag2 18s infinite both;
}
.wb-diag-card .ti {
  display: flex;
  gap: 7px;
  align-items: baseline;
  font-size: 11px;
  font-weight: 700;
  color: var(--wtext);
  margin-bottom: 3px;
}
.wb-diag-card .ti .warn { color: var(--wamber); }
.wb-diag-card .fx {
  font-size: 10px;
  line-height: 1.5;
  color: var(--wdim);
}
.wb-diag-fix {
  margin-top: 7px;
  background: var(--wsurf2);
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 10px;
  color: var(--wtext);
}
.wb-diag-fix b {
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wteal);
  margin-bottom: 2px;
}
.wb-diag-acts {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.wb-diag-acts span {
  font-size: 9.5px;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid var(--wbord);
  color: var(--wdim);
}
.wb-diag-acts .acc { border-color: var(--wteal); color: var(--wteal); }

.wb-activity {
  font-size: 10px;
  color: var(--wdim);
}
.wb-activity b {
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wdimmer);
  margin-bottom: 4px;
}
.wb-activity div { padding: 1px 0; opacity: 0; }
.wb-activity .a1 { animation: wbAct1 18s infinite both; }
.wb-activity .a2 { animation: wbAct2 18s infinite both; }
.wb-activity .a3 { animation: wbAct3 18s infinite both; }
.wb-activity .ck { color: var(--wteal); margin-right: 5px; }
.wb-activity .ck.amb { color: var(--wamber); }

/* Improve modal frame -------------------------------------------------------- */

.wb-improve {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  background: var(--wsurf);
  border: 1px solid var(--wbord);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(16, 32, 64, 0.07), 0 10px 22px rgba(16, 32, 64, 0.09);
  font-size: 11px;
  color: var(--wtext);
}
.wb-improve::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--wgrad);
}
.wb-imp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 2px;
  font-size: 13px;
  font-weight: 700;
}
.wb-imp-head .wand { color: var(--wcyan); }
.wb-imp-sub {
  padding: 2px 16px 10px;
  font-size: 10px;
  color: var(--wdim);
}
.wb-imp-body {
  display: grid;
  grid-template-columns: 1fr 5px 1fr;
  gap: 0 10px;
  padding: 0 16px 14px;
  align-items: start;
}
.wb-imp-div {
  width: 5px;
  border-radius: 3px;
  background: var(--wbord);
  align-self: stretch;
}
.wb-imp-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wdim);
  margin: 8px 0 4px;
}
.wb-imp-code {
  background: var(--wsurf2);
  border: 1px solid var(--wbord);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--wmono);
  font-size: 9.5px;
  line-height: 1.6;
  color: var(--wtext);
  white-space: pre;
  overflow: hidden;
}
.wb-imp-feedback {
  background: var(--wsurf);
  border: 1px solid var(--wbord2);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 10.5px;
  line-height: 1.6;
  min-height: 52px;
  color: var(--wtext);
}
.wb-type {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
}
.wb-type-1 { animation: wbType1 18s steps(34) infinite both; }
.wb-type-2 { animation: wbType2 18s steps(30) infinite both; }
.wb-imp-btns {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.wb-imp-btns .grad {
  position: relative;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 13px;
  border-radius: 999px;
  background: var(--wsurf);
  color: var(--wtext);
}
.wb-imp-btns .grad::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 999px;
  background: var(--wgrad);
  z-index: 0;
}
.wb-imp-btns .grad::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--wsurf);
  z-index: 0;
}
.wb-imp-btns .grad b {
  position: relative;
  z-index: 1;
  font-weight: 600;
}
.wb-imp-btns .grad .wand { color: var(--wcyan); position: relative; z-index: 1; margin-right: 3px; }
.wb-imp-btns .ghost {
  font-size: 10px;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--wbord);
  color: var(--wdim);
}

.wb-diff {
  background: var(--wsurf2);
  border: 1px solid var(--wbord);
  border-radius: 6px;
  font-family: var(--wmono);
  font-size: 9.5px;
  line-height: 1.7;
  overflow: hidden;
  opacity: 0;
  animation: wbDiffBox 18s infinite both;
}
.wb-diff div { padding: 0 10px; white-space: pre; }
.wb-diff .add { background: rgba(60, 138, 63, 0.12); }
.wb-diff .del { background: rgba(185, 65, 65, 0.12); }
.wb-imp-empty { color: var(--wdimmer); font-size: 10px; padding: 2px 0; }
.wb-imp-empty.wb-de { animation: wbDiffEmpty 18s infinite both; }

.wb-eval-strip {
  display: flex;
  gap: 24px;
  background: var(--wsurf2);
  border-radius: 9px;
  padding: 9px 14px;
  margin-top: 6px;
  opacity: 0;
  animation: wbEval 18s infinite both;
}
.wb-eval-strip div { display: flex; flex-direction: column; }
.wb-eval-strip span { font-size: 9px; color: var(--wdim); }
.wb-eval-strip b {
  font-family: var(--wmono);
  font-size: 13px;
  font-weight: 700;
  color: var(--wtext);
}
.wb-eval-strip b.up { color: var(--wgreen); }

.wb-imp-foot {
  display: flex;
  justify-content: flex-end;
  padding: 0 16px 14px;
}

.wb-toast {
  position: absolute;
  right: 14px;
  bottom: 62px;
  background: var(--wsurf);
  border: 1px solid var(--wbord2);
  border-left: 3px solid var(--wgreen);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 2px 4px rgba(16, 32, 64, 0.06), 0 10px 24px rgba(16, 32, 64, 0.12);
  font-size: 10px;
  color: var(--wdim);
  opacity: 0;
  animation: wbToast 18s infinite both;
}
.wb-toast b {
  display: block;
  font-size: 10.5px;
  color: var(--wtext);
  margin-bottom: 1px;
}

/* Study recruitment ----------------------------------------------------------- */

.wb-study {
  text-align: center;
  margin-top: 3.6rem;
  padding: 1.8rem 1.4rem 2rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
}
.wb-study h2,
.wb-study h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  color: var(--md-default-fg-color);
}
.wb-study p {
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
  max-width: 30rem;
  margin: 0 auto 1rem;
  line-height: 1.6;
}

/* Keyframes ------------------------------------------------------------------ */

@keyframes wbPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes wbBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes wbBounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-3px); }
}
@keyframes wbRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Observability loop (27s): Overview 0-40%, Evaluation 44-68%, Reflections 72-96% */
@keyframes wbPaneOv {
  0%, 40% { opacity: 1; }
  44%, 96% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes wbPaneEv {
  0%, 40% { opacity: 0; }
  44%, 68% { opacity: 1; }
  72%, 100% { opacity: 0; }
}
@keyframes wbPaneRf {
  0%, 68% { opacity: 0; }
  72%, 96% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes wbTabOv {
  0%, 40% { color: var(--wteal); border-bottom-color: var(--wteal); }
  44%, 96% { color: var(--wdimmer); border-bottom-color: transparent; }
  100% { color: var(--wteal); border-bottom-color: var(--wteal); }
}
@keyframes wbTabEv {
  0%, 40% { color: var(--wdimmer); border-bottom-color: transparent; }
  44%, 68% { color: var(--wteal); border-bottom-color: var(--wteal); }
  72%, 100% { color: var(--wdimmer); border-bottom-color: transparent; }
}
@keyframes wbTabRf {
  0%, 68% { color: var(--wdimmer); border-bottom-color: transparent; }
  72%, 96% { color: var(--wteal); border-bottom-color: var(--wteal); }
  100% { color: var(--wdimmer); border-bottom-color: transparent; }
}
@keyframes wbDraw {
  0%, 2% { stroke-dashoffset: 1; }
  33%, 100% { stroke-dashoffset: 0; }
}
/* One pop per candidate dot, timed to where the line has drawn to */
@keyframes wbPop1 { 0%, 2%    { opacity: 0; transform: scale(0.3); } 3%    { opacity: 1; transform: scale(1.25); } 4%, 100%    { opacity: 1; transform: scale(1); } }
@keyframes wbPop2 { 0%, 6.8%  { opacity: 0; transform: scale(0.3); } 7.8%  { opacity: 1; transform: scale(1.25); } 8.8%, 100%  { opacity: 1; transform: scale(1); } }
@keyframes wbPop3 { 0%, 11.6% { opacity: 0; transform: scale(0.3); } 12.6% { opacity: 1; transform: scale(1.25); } 13.6%, 100% { opacity: 1; transform: scale(1); } }
@keyframes wbPop4 { 0%, 15.6% { opacity: 0; transform: scale(0.3); } 16.6% { opacity: 1; transform: scale(1.25); } 17.6%, 100% { opacity: 1; transform: scale(1); } }
@keyframes wbPop5 { 0%, 20.7% { opacity: 0; transform: scale(0.3); } 21.7% { opacity: 1; transform: scale(1.25); } 22.7%, 100% { opacity: 1; transform: scale(1); } }
@keyframes wbPop6 { 0%, 25%   { opacity: 0; transform: scale(0.3); } 26%   { opacity: 1; transform: scale(1.25); } 27%, 100%   { opacity: 1; transform: scale(1); } }
@keyframes wbPop7 { 0%, 29%   { opacity: 0; transform: scale(0.3); } 30%   { opacity: 1; transform: scale(1.25); } 31%, 100%   { opacity: 1; transform: scale(1); } }
@keyframes wbPop8 { 0%, 33%   { opacity: 0; transform: scale(0.3); } 34%   { opacity: 1; transform: scale(1.25); } 35%, 100%   { opacity: 1; transform: scale(1); } }
@keyframes wbPop8Halo {
  0%, 33% { opacity: 0; }
  35%, 100% { opacity: 0.18; }
}
@keyframes wbScoreA {
  0%, 13% { opacity: 1; }
  14%, 100% { opacity: 0; }
}
@keyframes wbScoreB {
  0%, 13% { opacity: 0; }
  14%, 25% { opacity: 1; }
  26%, 100% { opacity: 0; }
}
@keyframes wbScoreC {
  0%, 25% { opacity: 0; }
  26%, 100% { opacity: 1; }
}
/* Heatmap columns light up left to right while the Evaluation pane is showing */
@keyframes wbK1 { 0%, 45%   { opacity: 0; transform: scale(0.6); } 47%,   100% { opacity: 1; transform: scale(1); } }
@keyframes wbK2 { 0%, 47.5% { opacity: 0; transform: scale(0.6); } 49.5%, 100% { opacity: 1; transform: scale(1); } }
@keyframes wbK3 { 0%, 50%   { opacity: 0; transform: scale(0.6); } 52%,   100% { opacity: 1; transform: scale(1); } }
@keyframes wbK4 { 0%, 52.5% { opacity: 0; transform: scale(0.6); } 54.5%, 100% { opacity: 1; transform: scale(1); } }
@keyframes wbK5 { 0%, 55%   { opacity: 0; transform: scale(0.6); } 57%,   100% { opacity: 1; transform: scale(1); } }
@keyframes wbK6 { 0%, 57.5% { opacity: 0; transform: scale(0.6); } 59.5%, 100% { opacity: 1; transform: scale(1); } }
@keyframes wbK7 { 0%, 60%   { opacity: 0; transform: scale(0.6); } 62%,   100% { opacity: 1; transform: scale(1); } }
@keyframes wbK8 { 0%, 62.5% { opacity: 0; transform: scale(0.6); } 64.5%, 100% { opacity: 1; transform: scale(1); } }
@keyframes wbLogIn {
  0% { opacity: 0; }
  1%, 100% { opacity: 1; }
}
/* Cursor: parks, darts to the Evaluation tab, clicks, then the Reflections tab */
/* Click targets measured from the rendered page (element centers), minus the
   pointer-tip offset (3.3, 1.3). Tabs are left-anchored, so px values hold at
   any frame width. */
@keyframes wbCurObs {
  0%, 36% { left: 600px; top: 220px; transform: scale(1); }
  37.6% { left: 275px; top: 89px; transform: scale(1); }
  39.2% { left: 275px; top: 89px; transform: scale(1); }
  39.6% { left: 275px; top: 89px; transform: scale(0.72); }
  40.1% { left: 275px; top: 89px; transform: scale(1); }
  61.5% { left: 275px; top: 89px; transform: scale(1); }
  63% { left: 361px; top: 89px; transform: scale(1); }
  66.8% { left: 361px; top: 89px; transform: scale(1); }
  67.2% { left: 361px; top: 89px; transform: scale(0.72); }
  67.7% { left: 361px; top: 89px; transform: scale(1); }
  96% { left: 361px; top: 89px; transform: scale(1); }
  100% { left: 600px; top: 220px; transform: scale(1); }
}
@keyframes wbRipObs {
  0%, 39.4% { opacity: 0; transform: scale(0.3); }
  39.7% { opacity: 0.7; transform: scale(0.5); }
  41% { opacity: 0; transform: scale(1.7); }
  41.1%, 66.9% { opacity: 0; transform: scale(0.3); }
  67.2% { opacity: 0.7; transform: scale(0.5); }
  68.5% { opacity: 0; transform: scale(1.7); }
  68.6%, 100% { opacity: 0; transform: scale(0.3); }
}

/* Assistant loop (18s): Chat 0-48%, Diagnostics 52-96% */
@keyframes wbAgPaneA {
  0%, 48% { opacity: 1; }
  52%, 96% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes wbAgPaneB {
  0%, 48% { opacity: 0; }
  52%, 96% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes wbAgTabA {
  0%, 48% { background: var(--wsurf2); color: var(--wtext); }
  52%, 96% { background: transparent; color: var(--wdim); }
  100% { background: var(--wsurf2); color: var(--wtext); }
}
@keyframes wbAgTabB {
  0%, 48% { background: transparent; color: var(--wdim); }
  52%, 96% { background: var(--wsurf2); color: var(--wtext); }
  100% { background: transparent; color: var(--wdim); }
}
@keyframes wbChat1 {
  0%, 3% { opacity: 0; transform: translateY(5px); }
  6%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes wbChat2 {
  0%, 8% { opacity: 0; }
  10%, 17% { opacity: 1; }
  19%, 100% { opacity: 0; }
}
@keyframes wbChat3 {
  0%, 18% { opacity: 0; transform: translateY(5px); }
  22%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes wbDiag1 {
  0%, 52% { opacity: 0; }
  54%, 62% { opacity: 1; }
  64%, 100% { opacity: 0; }
}
@keyframes wbDiag2 {
  0%, 63% { opacity: 0; transform: translateY(6px); }
  66%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes wbAct1 {
  0%, 55% { opacity: 0; }
  57%, 100% { opacity: 1; }
}
@keyframes wbAct2 {
  0%, 59% { opacity: 0; }
  61%, 100% { opacity: 1; }
}
@keyframes wbAct3 {
  0%, 63% { opacity: 0; }
  65%, 100% { opacity: 1; }
}
@keyframes wbCurAsst {
  0%, 44% { left: 440px; top: 210px; transform: scale(1); }
  46% { left: 130px; top: 46px; transform: scale(1); }
  48.8% { left: 130px; top: 46px; transform: scale(1); }
  49.2% { left: 130px; top: 46px; transform: scale(0.72); }
  49.7% { left: 130px; top: 46px; transform: scale(1); }
  58% { left: 250px; top: 150px; transform: scale(1); }
  96% { left: 250px; top: 150px; transform: scale(1); }
  100% { left: 440px; top: 210px; transform: scale(1); }
}
@keyframes wbRipAsst {
  0%, 49% { opacity: 0; transform: scale(0.3); }
  49.3% { opacity: 0.7; transform: scale(0.5); }
  51% { opacity: 0; transform: scale(1.7); }
  51.1%, 100% { opacity: 0; transform: scale(0.3); }
}

/* Improve loop (18s): type feedback, click Improve -> diff, click Evaluate ->
   summary, click Add candidate -> toast */
@keyframes wbType1 {
  0%, 4% { max-width: 0; }
  18%, 100% { max-width: 100%; }
}
@keyframes wbType2 {
  0%, 18% { max-width: 0; }
  30%, 100% { max-width: 100%; }
}
@keyframes wbDiffBox {
  0%, 36% { opacity: 0; }
  39%, 100% { opacity: 1; }
}
@keyframes wbDiffEmpty {
  0%, 35% { opacity: 1; }
  38%, 100% { opacity: 0; }
}
@keyframes wbEval {
  0%, 54% { opacity: 0; transform: translateY(6px); }
  57.5%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes wbToast {
  0%, 75% { opacity: 0; transform: translateX(16px); }
  78%, 92% { opacity: 1; transform: translateX(0); }
  95%, 100% { opacity: 0; }
}
/* Left-column buttons are left-anchored (px); Add candidate is right-aligned,
   so its x is expressed from the right edge and holds at any frame width. */
@keyframes wbCurImp {
  0%, 30% { left: 55%; top: 26%; transform: scale(1); }
  32% { left: 89px; top: 272px; transform: scale(1); }
  34.1% { left: 89px; top: 272px; transform: scale(1); }
  34.5% { left: 89px; top: 272px; transform: scale(0.72); }
  35% { left: 89px; top: 272px; transform: scale(1); }
  49% { left: 89px; top: 272px; transform: scale(1); }
  50.5% { left: 232px; top: 272px; transform: scale(1); }
  52.1% { left: 232px; top: 272px; transform: scale(1); }
  52.5% { left: 232px; top: 272px; transform: scale(0.72); }
  53% { left: 232px; top: 272px; transform: scale(1); }
  69% { left: 232px; top: 272px; transform: scale(1); }
  71% { left: calc(100% - 70px); top: 328px; transform: scale(1); }
  73.1% { left: calc(100% - 70px); top: 328px; transform: scale(1); }
  73.5% { left: calc(100% - 70px); top: 328px; transform: scale(0.72); }
  74% { left: calc(100% - 70px); top: 328px; transform: scale(1); }
  96% { left: calc(100% - 70px); top: 328px; transform: scale(1); }
  100% { left: 55%; top: 26%; transform: scale(1); }
}
@keyframes wbRipImp {
  0%, 34.3% { opacity: 0; transform: scale(0.3); }
  34.6% { opacity: 0.7; transform: scale(0.5); }
  36% { opacity: 0; transform: scale(1.7); }
  36.1%, 52.3% { opacity: 0; transform: scale(0.3); }
  52.6% { opacity: 0.7; transform: scale(0.5); }
  54% { opacity: 0; transform: scale(1.7); }
  54.1%, 73.3% { opacity: 0; transform: scale(0.3); }
  73.6% { opacity: 0.7; transform: scale(0.5); }
  75% { opacity: 0; transform: scale(1.7); }
  75.1%, 100% { opacity: 0; transform: scale(0.3); }
}

/* Reduced motion: show final states, stop all loops */
@media (prefers-reduced-motion: reduce) {
  .wb *, .wb-entry {
    animation: none !important;
    opacity: 1 !important;
    max-width: none !important;
  }
  .wb-pane-ev, .wb-pane-rf, .wb-agent-pane.diag { display: none; }
  .wb-chart .traj { stroke-dashoffset: 0 !important; }
  .wb-toast, .wb-ptr { display: none !important; }
  .wb-hc-score i:nth-child(-n+2) { opacity: 0 !important; }
  .wb-obs .wb-tab-ov { color: var(--wteal); border-bottom-color: var(--wteal); }
  .wb-asst .wb-agent-tab.t-chat { background: var(--wsurf2); color: var(--wtext); }
}

/* Small screens: keep each demo at its designed width and scale the whole
   frame down to fit, instead of forcing a sideways scroll. Browsers without
   `zoom` (old Firefox) fall back to the horizontal scroll of .wb-scroll. */
@media (max-width: 760px) {
  .wb-hero h1 { font-size: 1.5rem; }
  .wb-obs { width: 800px; min-width: 800px; }
  .wb-improve { width: 680px; min-width: 680px; }
  .wb-window, .wb-improve { zoom: 0.82; }
}
@media (max-width: 680px) {
  .wb-window, .wb-improve { zoom: 0.66; }
}
@media (max-width: 540px) {
  .wb-window, .wb-improve { zoom: 0.52; }
}
@media (max-width: 430px) {
  .wb-window, .wb-improve { zoom: 0.44; }
}