/* Decision Studio's light, sticker-inspired surface. The workbench markup and
   response rendering stay independent of the visual theme. */
:root {
  color-scheme: light;
  --paper: #fffdf8;
  --white: #fffdf8;
  --ink: #172747;
  --muted: #61718c;
  --line: #d7e1ed;
  --copper: #ef7546;
  --green: #168571;
  --tint: #edf4ff;
  --choice: #ba6a20;
  --noul: #087e78;
  --score: #7459ac;
  --comic-shadow: 5px 5px 0 #97b5e5;
}

html { scroll-padding-top: 12px; }
body {
  min-width: 320px;
  background: radial-gradient(#8ca9d225 1px, transparent 1px) 0 0 / 20px 20px, #f6f8fc;
  color: var(--ink);
  font-size: 12px;
}
body::before, .atmosphere { display: none; }
::selection { background: #ffdc6b; color: #152746; }
button:focus-visible, a:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #286fcf;
  outline-offset: 2px;
}
.skip-link { background: #ffd13e; color: var(--ink); }
.app-shell { max-width: 1540px; border: 0; }
main { max-width: none; padding-inline: 27px; }

/* Brand and illustration */
.topbar {
  height: 62px;
  padding-inline: 27px;
  border-bottom: 1px solid #d9e2ee;
  background: #f9fbffdf;
}
.brand { gap: 8px; }
.brand img {
  width: 46px;
  height: 46px;
  border-radius: 0;
  filter: drop-shadow(0 2px 1px #1d31502b);
}
.brand > span {
  font: 800 23px/1 var(--sans);
  letter-spacing: -1.5px;
}
.brand-dot { color: #ef7546; }
.brand small {
  margin-left: 2px;
  padding-left: 10px;
  border-color: #c9d5e7;
  color: #507095;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
}
.top-actions { gap: 24px; font-size: 12px; font-weight: 750; }
.top-actions .text-button { font-size: 12px; font-weight: 750; color: #62738d; }
.top-actions .text-button.active { color: #1763c7; border-bottom: 2px solid #1763c7; }
.top-actions > a { color: #476284; }

.intro {
  min-height: 103px;
  margin: 0;
  padding: 10px 6px;
  overflow: visible;
}
.intro::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: 80px;
  top: -35px;
  width: 160px;
  height: 130px;
  border-radius: 50%;
  background: #ffe789a6;
}
.hero-copy { padding: 0; }
.eyebrow {
  color: #356cb1;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.6px;
}
.copper-star { color: #ef8545; }
.intro h1 {
  margin: 3px 0 4px;
  color: #14264c;
  font: 850 37px/1 var(--sans);
  letter-spacing: -2px;
}
.intro h1 em { color: #ef7546; font-style: normal; font-weight: 850; }
.hero-copy > p { color: #596b88; font-size: 11px; line-height: 1.4; }
.hero-primitives { display: none; }
.hero-art {
  z-index: 0;
  top: 3px;
  right: 42px;
  width: 235px;
  height: 99px;
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
}
.hero-art img {
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 96px;
  object-fit: contain;
  opacity: 1;
  mix-blend-mode: normal;
  transform: rotate(-8deg);
  filter: drop-shadow(0 4px 3px #15274628);
  -webkit-mask-image: none;
  mask-image: none;
}
.hero-speech {
  position: absolute;
  right: 96px;
  top: 17px;
  padding: 6px 10px;
  border: 2px solid #172747;
  border-radius: 14px;
  background: #fffefa;
  box-shadow: 4px 4px 0 #ffd13e;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
  transform: rotate(2deg);
}
.hero-speech::after {
  content: '';
  position: absolute;
  right: -7px;
  bottom: 10px;
  width: 11px;
  height: 11px;
  border-right: 2px solid #172747;
  border-top: 2px solid #172747;
  background: #fffefa;
  transform: rotate(45deg);
}
.connection {
  top: 18px;
  right: 297px;
  border: 1px solid #c7d7e8;
  border-radius: 20px;
  background: #fffdf8;
  color: #53708e;
  font-size: 9px;
}
.connection i { background: #b5bfc9; box-shadow: none; }
.connection.connected i { background: #2aa586; box-shadow: 0 0 0 3px #d7f5e9; }

/* Tabs and examples pick up the bold-edged, offset-shadow language. */
.context-modebar { min-height: 37px; margin-bottom: 7px; }
.context-mode-tabs {
  gap: 0;
  padding: 3px;
  border: 2px solid #172747;
  border-radius: 10px;
  background: #eff4ff;
  box-shadow: 3px 3px 0 #9fb9e5;
}
.context-mode-tabs button {
  padding: 6px 13px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #506481;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.context-mode-tabs button:hover { background: #fff8dc; color: #172747; }
.context-mode-tabs button[aria-pressed=true] {
  border-color: #172747;
  background: #ffd546;
  box-shadow: 2px 2px 0 #172747;
  color: #172747;
}
.context-modebar > span { color: #657592; font-size: 10px; }
.scenario-bar {
  gap: 11px;
  padding: 4px 7px;
  border: 2px solid #172747;
  border-radius: 10px;
  background: #fffdf8;
  box-shadow: 3px 3px 0 #a9c2e9;
}
.scenario-label {
  padding: 0 9px 0 5px;
  border-right: 1px solid #dbe4ee;
  color: #527094;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15px;
}
.scenario-label.over-budget { color: #af4431; }
.example-list { gap: 2px; scrollbar-color: #acc4dc transparent; }
.example-button {
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #556b89;
  font-size: 10px;
  font-weight: 700;
}
.example-button:hover { background: #eaf2ff; color: #183d75; }
.example-button.selected {
  border-color: #172747;
  background: #ffd546;
  box-shadow: 2px 2px 0 #172747;
  color: #172747;
}
.example-icon { color: #ef8545; }
.workspace-head { min-height: 54px; padding: 9px 4px; }
.workbench-index { display: none; }
.workspace-head .eyebrow { color: #6d84a5; font-size: 8px; }
.workspace-head h2 {
  margin-top: 1px;
  color: #1b2e51;
  font: 850 22px/1.15 var(--sans);
  letter-spacing: -.7px;
}
.workspace-actions { gap: 10px; }
.subtle-button { color: #456eaa; font-size: 10px; font-weight: 800; }
.subtle-button:hover { color: #1e56a0; }
.run-button, .run-top {
  border: 2px solid #172747;
  border-radius: 9px;
  background: #ffd13e;
  box-shadow: 3px 3px 0 #172747;
  color: #172747;
  font-size: 11px;
  font-weight: 900;
}
.run-button:hover:not(:disabled), .run-top:hover:not(:disabled) {
  background: #ffe174;
  box-shadow: 4px 4px 0 #172747;
  transform: translate(-1px, -1px);
}
.run-button:disabled { opacity: .5; }
.run-top { padding: 7px 12px; }
kbd { border-color: #56647a; color: #172747; }
.offline-note {
  border: 2px solid #172747;
  border-radius: 9px;
  background: #fff1dc;
  color: #624d32;
  box-shadow: 3px 3px 0 #f5c986;
}
.offline-note b, .offline-symbol, .offline-note button { color: #9c571e; }

/* Three instruments share the same outline, corner radius and 3D depth. */
.workbench {
  grid-template-columns: minmax(300px, .98fr) minmax(145px, .37fr) minmax(485px, 1.65fr);
  gap: 15px;
  align-items: stretch;
}
.editor-pane, .results-pane {
  background: #fffdf8;
  border: 2px solid #172747;
  border-radius: 17px;
  box-shadow: var(--comic-shadow);
  color: #172747;
}
.panel-title h3, .results-heading h3, .questions-collapse h3 {
  color: #172747;
  font: 850 16px/1.2 var(--sans);
  letter-spacing: -.4px;
}
.section-num {
  display: inline-grid;
  min-width: 25px;
  height: 24px;
  place-items: center;
  border: 1.5px solid #172747;
  border-radius: 7px;
  background: #e7f2ff;
  color: #2369b3;
  font: 850 10px var(--sans);
}
.segmented {
  border: 1.5px solid #172747;
  border-radius: 7px;
  background: #eef3f9;
  box-shadow: 2px 2px 0 #c4d7ed;
}
.segmented button { color: #657591; font-weight: 750; }
.segmented button.selected {
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 3px #213b6224;
  color: #17457f;
}
.state-input, #states-json, .context-text {
  border: 2px solid #233856;
  border-radius: 9px;
  background: #f5f9ff;
  box-shadow: 3px 3px 0 #c9dbf1;
  color: #253653;
  font-size: 11px;
  line-height: 1.6;
}
.state-input { min-height: 102px; max-height: 280px; padding: 11px 12px; }
.field-foot, .editor-note, .context-list-foot, .bulk-note { color: #788ba6; }
.questions-title { margin: 12px 0 7px; }
.questions-collapse .chevron, .chevron { color: #7a90ad; }
.count-pill, .result-count {
  border: 1.5px solid #172747;
  border-radius: 6px;
  background: #fff2c6;
  color: #785924;
  font: 850 9px var(--sans);
}
.add-menu > div {
  border: 2px solid #172747;
  border-radius: 9px;
  background: #fffdf8;
  box-shadow: 4px 4px 0 #9fb9e5;
}
.add-menu > div button:hover { background: #eef4ff; }
.add-menu > div button, .add-menu span { color: #172747; }
.add-menu small { color: #657591; }
.question-list { gap: 6px; }
.question-card, .question-card.is-open {
  border: 1.5px solid #233856;
  border-radius: 8px;
  background: #fff;
  box-shadow: 2px 2px 0 #cbddf2;
}
.question-card.is-open { border-color: #172747; background: #fff8dc; }
.question-summary-id { color: #24385c; font-weight: 700; }
.question-summary-text, .question-id-label, .shared-note { color: #6c7e99; }
.question-toggle:hover .question-summary-text { color: #225b9d; }
.type-badge {
  border-color: #b8e7df;
  border-radius: 5px;
  background: #dff7f3;
  color: #087e78;
  font-weight: 900;
}
.type-badge.choice { border-color: #f3d9ae; background: #fff0d6; color: #aa621c; }
.type-badge.score { border-color: #ded2fa; background: #eee9ff; color: #7056ad; }
.question-body { border-color: #dbe6f0; }
.question-text { color: #253653; }
.question-body .question-id, .criterion input, .context-editor-head input {
  border-color: #cad8e8;
  border-radius: 5px;
  background: #fff;
  color: #283b59;
}
.criterion input.option-name { color: #815a26; }
.criterion-tag, .criteria-foot > span, .noul-hint, .noul-details summary { color: #7388a2; }
.icon-button { color: #8497ae; }
.icon-button:hover { color: #cd6742; }
.run-bar { border-color: #d9e4ef; }
.auto-label { color: #60738d; }
.switch { background: #d5e0ec; border-color: #bbcada; }
.switch::after { background: #fff; }
.auto-label input:checked + .switch { background: #219c8a; }
.tooltip { color: #8397b1; }
.context-list {
  border: 2px solid #233856;
  border-radius: 8px;
  background: #f5f9ff;
  box-shadow: 3px 3px 0 #c9dbf1;
}
.context-item + .context-item { border-color: #dbe5ef; }
.context-item.is-open { background: #eaf3ff; }
.context-open:hover { background: #edf5ff; }
.context-row-id { color: #2a639e; }
.context-preview, .context-editor-head label, .batch-json-label { color: #60738d; }

/* Keep the middle model expressive, with the same geometry as its neighbors. */
.model-lane { min-width: 0; }
.model-card {
  padding: 15px 9px 13px;
  border: 2px solid #172747;
  border-radius: 20px;
  background: #e7efff;
  box-shadow: 5px 5px 0 #97b5e5;
}
.model-kicker { color: #4268a5; font: 900 8px var(--sans); letter-spacing: 1.2px; }
.dice-scene { height: 135px; margin: 1px 0 3px; }
.orbit-outer { width: 114px; height: 114px; border-color: #88a8db; }
.orbit-inner { width: 104px; height: 104px; border-color: #8aa8db; }
.orbit-star { right: 12px; top: 3px; color: #ef8545; }
.dice-shadow { top: 110px; background: #5279b855; }
.dice-face {
  border-color: #172747;
  background: #ffcf52;
  box-shadow: inset 0 0 0 4px #f6ba42, inset 0 0 0 5px #172747;
  color: #172747;
}
.dice-face img { width: 61px; height: 61px; border-radius: 0; mix-blend-mode: normal; }
.face-front { background: #fff3c4; }
.face-back, .face-right, .face-left, .face-top, .face-bottom { background: #ffcf52; }
.model-trigger { color: #172747; }
.model-trigger:hover:not(:disabled), .model-trigger[aria-expanded=true] {
  border-color: #172747;
  background: #fffdf8;
  box-shadow: 2px 2px 0 #172747;
}
.model-name-line { color: #172747; font: 850 26px/1 var(--sans); letter-spacing: -1px; }
.model-name-ghost { color: #172747; }
.model-chevron { stroke: #172747; }
.model-version, .model-spec, .model-switch-hint { color: #59739c; }
.model-version { font-weight: 800; }
.model-state { color: #326e68; font-size: 10px; font-weight: 800; }
.model-card[data-state=ready] .model-state i,
.model-card[data-state=complete] .model-state i { border-color: #26a181; background: #26a181; }
.model-card:is([data-state=switching],[data-state=submitting],[data-state=queued],[data-state=running],[data-state=loading]) {
  border-color: #172747;
  box-shadow: 5px 5px 0 #ffd35c;
}
.model-note { margin-top: 14px; color: #7284a0; font: 750 10px/1.5 var(--sans); }
.model-note span { color: #7284a0; font-size: 10px; }
.model-popover {
  border: 2px solid #172747;
  border-radius: 11px;
  background: #fffdf8;
  box-shadow: 5px 5px 0 #97b5e5;
  backdrop-filter: none;
}
.model-option { color: #172747; }
.model-option:hover, .model-option:focus-visible { border-color: #bed4ee; background: #edf4ff; }
.model-option[aria-selected=true] { border-color: #e9c856; background: #fff3c5; }
.model-option-title { color: #172747; font: 800 18px/1 var(--sans); }
.model-option-title small, .model-option-description { color: #60738d; }
.model-option[aria-selected=true] .model-option-dot { background: #ef8545; }

/* Every non-batch answer stays visible as a complete card on one desktop view. */
.results-pane { background: #fffdf8; }
.results-heading { min-height: 38px; margin-bottom: 0; }
.results-heading p { margin-top: 2px; color: #7789a2; font-size: 9px; }
.result-count { padding: 3px 7px; font-size: 10px; }
.run-status { min-height: 22px; margin: 0 0 5px; color: #54758b; font-size: 9px; }
.status-led { border-color: #49a187; }
.run-status.running .status-led { border-color: #efa34d; background: #efa34d; }
.run-status.error { color: #b44035; }
.empty-results {
  border-color: #d3e0ed;
  border-radius: 10px;
  background: #f3f8ff;
}
.empty-results::after { border-color: #c5d9ee; box-shadow: 0 0 0 19px #d3e5f955, 0 0 0 40px #e6f0fa55; }
.empty-symbol, .empty-types b { color: #ef8545; }
.empty-results h4 { color: #172747; font: 850 30px/1.1 var(--sans); }
.empty-results h4 em { color: #2269bf; font-style: normal; font-weight: 850; }
.empty-results p, .empty-types { color: #647893; }
.single-results.probability-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 7px;
  height: 100%;
  min-height: 0;
  align-content: stretch;
}
.single-results.probability-cards.single-decision {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.single-decision .probability-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(18px, 3vw, 34px);
  border-width: 2px;
  border-radius: 16px;
  background: #fffdf7;
  box-shadow: 6px 6px 0 #d9e5f2;
}
.single-decision .probability-card-head { padding-bottom: 10px; }
.single-decision .probability-card-id { font-size: clamp(15px, 2vw, 22px); }
.single-decision .answer-kind { font-size: 11px; }
.single-decision .probability-card-winner { margin: clamp(20px, 5vh, 46px) 0; }
.single-decision .probability-card.noul-result .decision-value {
  font-size: clamp(52px, 7vw, 88px);
  letter-spacing: -3px;
}
.single-decision .probability-card-bars { width: 100%; max-width: 540px; margin-inline: auto; }
.single-decision .probability-card .probability-row,
.single-decision .probability-card .probability-row + .probability-row {
  grid-template-columns: minmax(0, 80px) minmax(30px, 1fr) 54px;
  gap: 10px;
  min-height: 34px;
}
.single-decision .probability-card .probability-label span:first-child,
.single-decision .probability-card .probability-label b { font-size: 15px; }
.single-decision .probability-card .bar-track { height: 12px; }
.probability-card {
  min-height: 0;
  padding: 6px 8px;
  border: 1.5px solid #233856;
  border-radius: 9px;
  background: #fff;
  box-shadow: 2px 2px 0 #c9dbf1;
  overflow: hidden;
}
.probability-card:last-child:nth-child(odd) { grid-column: auto; }
.probability-card-head {
  min-height: 19px;
  padding-bottom: 2px;
  border-color: #e0e8f1;
}
.probability-card-id { color: #1d3053; font: 850 11px/1.2 var(--sans); }
.answer-kind { color: #8190a6; font-size: 8px; font-weight: 850; }
.probability-card-winner { margin: 3px 0 5px; }
.probability-card-winner .decision-value,
.probability-card.noul-result .decision-value,
.probability-card.score-result .decision-value {
  color: #172747;
  font: 850 16px/1.1 var(--sans);
  letter-spacing: -.5px;
}
.probability-card.noul-result .decision-value { color: #087e78; }
.probability-card.score-result .decision-value { color: #7459ac; }
.probability-card-winner .decision-value em { color: #788ca5; font: 750 9px var(--sans); }
.probability-card-winner small { margin-top: 1px; color: #5f7694; font: 800 9px var(--sans); }
.probability-card:is(.choice-result, .noul-result) .probability-card-winner small { display: none; }
.probability-card-bars { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d1dfec transparent; }
.probability-card .probability-row,
.probability-card .probability-row + .probability-row {
  display: grid;
  grid-template-columns: minmax(0, 142px) minmax(12px, 1fr) 37px;
  align-items: center;
  gap: 5px;
  min-height: 15px;
  margin: 0;
}
.probability-card .probability-label { display: contents; }
.probability-card .probability-label span:first-child {
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
  color: #64758c;
  font: 700 10px var(--sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.probability-card .probability-label b {
  grid-column: 3;
  color: #566d8a;
  font: 850 10px var(--sans);
  text-align: right;
  white-space: nowrap;
}
.probability-card .bar-track {
  grid-column: 2;
  grid-row: 1;
  height: 6px;
  margin: 0;
  border-radius: 6px;
  background: #eaf0f7;
}
.probability-card .bar-fill { background: #9bb7d7; }
.probability-card.choice-result .is-selected .bar-fill { background: #226fdf; }
.probability-card.noul-result .is-selected .bar-fill { background: #159e96; }
.probability-card.score-result .is-selected .bar-fill { background: #8063c6; }
.probability-card .probability-row.is-selected .probability-label span:first-child,
.probability-card .probability-row.is-selected .probability-label b { color: #173a73; }
.probability-card.noul-result .is-selected .probability-label span:first-child,
.probability-card.noul-result .is-selected .probability-label b { color: #087e78; }
.probability-card.score-result .is-selected .probability-label span:first-child,
.probability-card.score-result .is-selected .probability-label b { color: #7459ac; }
.timing {
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding-top: 5px;
  border-color: #e1e9f1;
}
.timing > div { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.timing span { color: #8291a8; font-size: 7px; }
.timing b { margin: 0; color: #325f9d; font: 850 12px var(--sans); }
.timing b small { font-size: 8px; }
.timing .timing-foot { grid-column: auto; text-align: right; color: #7f8fa6; font-size: 8px; }
.readout-foot { margin-top: 5px; padding-top: 5px; border-color: #e1e9f1; color: #8290a4; font-size: 8px; }
.table-hint { color: #687c96; }
.table-hint span:last-child { color: #286bba; }
.result-table-scroll, .single-results { border-color: #d9e3ef; border-radius: 9px; background: #fff; }
.result-table { background: #fff; }
.result-table thead { background: #ecf4ff; }
.result-table thead th { border-color: #d7e3f0; color: #415d7f; }
.result-table thead th:first-child, .result-table thead .answer-kind { color: #607795; }
.result-row:hover, .result-row[aria-expanded=true],
.single-decision-toggle:hover, .single-decision-toggle[aria-expanded=true] { background: #eef5ff; }
.result-row th, .decision-value, .decision-cell.noul .decision-value,
.decision-cell.score .decision-value { color: #24446f; }
.decision-cell small, .decision-value em { color: #6d829a; }
.result-detail-row > td { background: #f3f8ff; border-color: #dbe5f0; }
.answer-detail + .answer-detail { border-color: #dce6f0; }
.detail-question, .single-question b { color: #5c7291; }
.single-decision + .single-decision { border-color: #dae6f1; }
.error-message { border-color: #e6b6aa; border-radius: 9px; background: #fff0eb; color: #a54637; }

footer { padding: 12px 5px 16px; color: #8293aa; font-size: 9px; }
footer b { color: #a1adc0; }
footer a { color: #336caa; }
dialog {
  border: 2px solid #172747;
  border-radius: 15px;
  background: #fffdf8;
  box-shadow: 6px 6px 0 #97b5e5;
  color: #172747;
}
dialog::backdrop { background: #223b6180; }

@media (min-width: 951px) {
  .workbench { --panel-height: clamp(560px, calc(100dvh - 316px), 760px); }
  .editor-pane, .results-pane { height: var(--panel-height); padding: 12px; }
  .editor-scroll { margin-top: 9px; scrollbar-color: #b7cce2 transparent; }
  .workbench:is([data-mode="routing"], [data-mode="single"]) .editor-scroll .question-list {
    border-color: #d1dfed;
    border-radius: 8px;
    background: #f6faff;
    padding: 4px 5px 5px 4px;
    scrollbar-color: #b7cce2 transparent;
  }
  .results-pane #results { scrollbar-color: #b7cce2 transparent; padding-right: 1px; }
  .model-lane { height: var(--panel-height); }
  .model-lane::before, .model-lane::after { background: #aabfd9; }
}
@media (max-width: 1200px) and (min-width: 951px) {
  main { padding-inline: 18px; }
  .workbench { grid-template-columns: minmax(290px, 1fr) minmax(132px, .38fr) minmax(470px, 1.6fr); gap: 10px; }
  .editor-pane, .results-pane { padding: 10px; }
  .probability-card .probability-row,
  .probability-card .probability-row + .probability-row { grid-template-columns: minmax(0, 115px) minmax(10px, 1fr) 34px; gap: 3px; }
  .probability-card .probability-label span:first-child,
  .probability-card .probability-label b { font-size: 9px; }
}
@media (max-width: 1050px) and (min-width: 951px) {
  .workbench { grid-template-columns: minmax(272px, 1fr) minmax(122px, .37fr) minmax(455px, 1.55fr); gap: 8px; }
  .model-name-line { font-size: 23px; }
  .model-kicker { font-size: 7px; }
  .timing .timing-foot { display: none; }
}
@media (max-width: 950px) {
  main { padding-inline: 18px; }
  .intro { max-width: 700px; margin: auto; }
  .context-modebar, .scenario-bar, .workspace-head { max-width: 700px; margin-inline: auto; }
  .workbench { grid-template-columns: minmax(0, 1fr); max-width: 700px; gap: 15px; }
  .editor-pane, .results-pane { padding: 16px; }
  .editor-pane { min-height: 480px; }
  .model-card { max-width: 100%; min-height: 145px; padding: 12px 16px; border-radius: 17px; }
  .model-kicker { color: #4268a5; }
  .dice-scene { height: 125px; }
  .model-body { text-align: left; }
  .model-state { justify-content: flex-start; }
  .results-pane { min-height: 550px; }
  .single-results.probability-cards { min-height: 450px; }
  footer { max-width: 700px; }
}
@media (max-width: 600px) {
  .topbar { height: 60px; padding-inline: 12px; }
  .brand > span { font-size: 20px; }
  .brand img { width: 39px; height: 39px; }
  .brand small { font-size: 7px; letter-spacing: 1px; padding-left: 6px; }
  .top-actions { gap: 10px; font-size: 10px; }
  .top-actions .text-button { display: none; }
  .top-actions > a { font-size: 10px; }
  main { padding-inline: 12px; }
  .intro { min-height: 115px; padding-inline: 0; overflow: hidden; }
  .intro h1 { font-size: 30px; letter-spacing: -1.5px; }
  .hero-copy > p { max-width: 245px; font-size: 10px; }
  .hero-art { right: -7px; top: 15px; width: 74px; height: 74px; opacity: .95; }
  .hero-art img { width: 72px; height: 72px; }
  .hero-speech { display: none; }
  .connection { right: 2px; top: 2px; background: #fffdf8; border: 1px solid #d3e0ec; padding: 4px 6px; font-size: 7px; }
  .context-modebar { flex-direction: column; align-items: stretch; gap: 6px; }
  .context-mode-tabs { width: 100%; }
  .context-mode-tabs button { flex: 1; min-width: 0; padding: 6px 2px; font-size: clamp(9px, 2.6vw, 10px); }
  .context-modebar > span { margin-left: 2px; font-size: 9px; }
  .scenario-bar { gap: 4px; padding: 4px; }
  .scenario-label { width: 100%; border-right: 0; padding: 2px 5px; font-size: 8px !important; }
  .example-list { width: 100%; }
  .example-button { padding: 5px 6px; font-size: 9px; }
  .workspace-head { min-height: 57px; padding: 8px 0; }
  .workspace-head h2 { font-size: 20px; }
  .workspace-head .eyebrow { font-size: 7px; }
  .workspace-actions .run-top { display: none; }
  .editor-pane, .results-pane { padding: 12px; }
  .editor-pane { min-height: 500px; }
  .panel-title h3, .results-heading h3, .questions-collapse h3 { font-size: 15px; }
  .state-input { min-height: 115px; }
  .question-summary-id { max-width: 47%; font-size: 9px; }
  .question-summary-text { font-size: 9px; }
  .model-card { display: flex; min-height: 105px; gap: 8px; }
  .model-kicker { top: 9px; left: 11px; font-size: 7px; }
  .dice-scene { width: 100px; height: 96px; flex-shrink: 0; }
  .orbit-outer { width: 90px; height: 90px; }
  .orbit-inner { width: 80px; height: 80px; }
  .dice-shadow { top: 85px; }
  .model-body { min-width: 0; }
  .model-name-line { font-size: 23px; }
  .model-trigger { margin-left: 0; }
  .model-spec { max-width: none; }
  .model-state { font-size: 9px; }
  .results-pane { min-height: 0; }
  .single-results.probability-cards { display: flex; flex-direction: column; height: auto; min-height: 0; gap: 8px; }
  .probability-card { padding: 10px; }
  .probability-card .probability-row,
  .probability-card .probability-row + .probability-row { grid-template-columns: minmax(0, 150px) minmax(12px, 1fr) 38px; min-height: 20px; }
  .probability-card .probability-label span:first-child,
  .probability-card .probability-label b { font-size: 11px; }
  .probability-card-winner .decision-value { font-size: 18px; }
  .timing { grid-template-columns: auto auto; }
  .timing .timing-foot { grid-column: 1 / -1; text-align: left; }
  footer { padding-block: 14px; }
}
@media (max-width: 359px) {
  .brand small { display: none; }
  .intro .eyebrow { font-size: 7px; }
  .hero-copy > p { max-width: 215px; }
  .question-summary-text { display: none; }
  .probability-card .probability-row,
  .probability-card .probability-row + .probability-row { grid-template-columns: minmax(0, 140px) minmax(8px, 1fr) 38px; }
}