.playground-hero {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: center;
  gap: 70px;
  padding-block: 70px 44px;
}
.playground-hero h1 {
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.13;
  letter-spacing: -2.4px;
  margin: 22px 0;
}
.playground-hero h1 span {
  color: #657653;
}
.playground-hero p {
  max-width: 610px;
  font-size: 17px;
  line-height: 1.85;
  color: #5c6655;
  margin: 0;
}
.playground-model {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-self: end;
  padding: 28px 32px;
  border: 1px solid #d6dccb;
  border-radius: 8px;
  background: #eef1e7;
}
.playground-model-mark {
  width: 35px;
  height: 40px;
  flex: none;
  color: #657653;
}
.playground-model strong,
.playground-model div > span {
  display: block;
}
.playground-model strong {
  font-size: 19px;
  margin-bottom: 5px;
}
.playground-model div > span {
  font-size: 14px;
  color: #58674c;
}
.playground-model .text-link {
  display: inline-flex;
  font-size: 14px;
  margin-top: 9px;
  gap: 8px;
}
.playground {
  padding-bottom: 85px;
}
.playground-service {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid #d6ddca;
  background: #edf1e5;
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: 14px;
  color: #4d5e3d;
  line-height: 1.7;
}
.playground-service[data-state="waiting"] {
  background: #f5eee1;
  border-color: #e1d5bd;
  color: #6c5430;
}
.playground-status-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
#service-message {
  flex: 1;
  min-width: 230px;
}
#service-budget {
  font-size: 13px;
  font-family: var(--mono);
  white-space: nowrap;
}
.playground-refresh,
.playground-text-button {
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  padding: 4px;
}
.playground-refresh {
  margin-left: auto;
  font-size: 13px;
}
.playground-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.playground-form,
.playground-output {
  min-width: 0;
  border: 1px solid #d7ddce;
  border-radius: 8px;
  background: #fefdf8;
  overflow: hidden;
}
.playground-form {
  padding: 27px;
}
.playground-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 25px;
}
.playground-panel-heading .eyebrow {
  font-size: 12px;
  letter-spacing: 0.7px;
}
.playground-text-button {
  font-size: 13px;
  color: #626d58;
}
.playground label,
.playground legend {
  font-size: 15px;
  font-weight: 600;
}
.playground label {
  display: block;
  margin-bottom: 9px;
}
.playground input[type="text"],
.playground textarea,
.playground select {
  display: block;
  width: 100%;
  min-width: 0;
  background: #fffefa;
  border: 1px solid #bec8b1;
  border-radius: 5px;
  color: var(--ink);
  font: 15px/1.7 var(--sans);
  padding: 12px 13px;
  transition: border-color 0.15s;
}
.playground textarea {
  resize: vertical;
}
.playground input:focus-visible,
.playground textarea:focus-visible,
.playground select:focus-visible {
  outline: 2px solid #778864;
  outline-offset: 3px;
  border-color: #657653;
}
.playground ::placeholder {
  color: #727769;
  opacity: 1;
}
.playground-example {
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}
.playground-example select {
  font-size: 14px;
  text-overflow: ellipsis;
  padding-right: 26px;
}
.playground fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 25px;
  min-width: 0;
}
.playground legend {
  padding: 0;
  margin-bottom: 11px;
}
.playground-type-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.playground-type-options label {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.playground-type-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.playground-type-options label > span {
  display: block;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid #d0d7c4;
  border-radius: 5px;
  padding: 13px 6px;
  background: #fafbf6;
  height: 100%;
}
.playground-type-options small {
  display: block;
  font: 12px var(--mono);
  color: #58674c;
  margin-top: 5px;
}
.playground-type-options input:checked + span {
  border-color: #687a50;
  background: #eaf0df;
  box-shadow: inset 0 0 0 1px #687a50;
}
.playground-type-options input:focus-visible + span {
  outline: 2px solid #778864;
  outline-offset: 3px;
}
.playground-type-options input:disabled + span {
  cursor: not-allowed;
}
.playground-type-options input:disabled:not(:checked) + span {
  color: #747d69;
  background: #f3f4ed;
  border-color: #dde1d4;
}
.playground-type-hint {
  margin: 11px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: #647057;
}
.playground-field {
  margin-bottom: 23px;
}
.playground-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.playground-label > span {
  font: 12px var(--mono);
  color: #66745a;
  white-space: nowrap;
}
.playground-field > p,
.playground-answers > p {
  font-size: 13px;
  line-height: 1.75;
  color: #647057;
  margin: 9px 0 0;
}
.playground-answers > p {
  margin: -3px 0 14px;
}
.playground-option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}
.playground-option label {
  flex: 0 0 25px;
  margin: 0;
  font: 13px var(--mono);
  color: #647057;
}
.playground-option input {
  padding-block: 10px;
}
.playground-option button {
  flex: 0 0 32px;
  height: 38px;
  background: none;
  border: 0;
  font-size: 24px;
  color: #69735f;
  border-radius: 4px;
  cursor: pointer;
}
.playground-option button:hover {
  background: #eef1e6;
}
.playground-option button:disabled {
  opacity: 0.3;
  cursor: default;
}
.playground-add {
  border: 1px dashed #acb89e;
  background: #f7f9f1;
  width: 100%;
  padding: 11px 14px;
  border-radius: 4px;
  font: 14px var(--sans);
  color: #4c6238;
  cursor: pointer;
  margin-top: 8px;
}
.playground-data-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.75;
  color: #626d58;
  margin: 27px 0 20px;
}
.playground-data-note .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
}
.playground-data-note a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.playground-submit {
  width: 100%;
  justify-content: center;
  font-size: 15px;
}
.playground-submit:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}
.playground-form-status {
  font-size: 14px;
  color: #5d6c4f;
  line-height: 1.7;
  margin: 12px 0 0;
}
.playground-form-status:empty {
  display: none;
}
.playground-output > .playground-panel-heading {
  margin: 0;
  padding: 24px 27px;
  border-bottom: 1px solid #d7ddce;
  background: #f1f4e9;
}
.playground-empty,
.playground-loading,
.playground-error {
  padding: 38px 30px;
  text-align: center;
}
.playground-empty-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid #cdd6be;
  background: #f0f4e7;
  color: #72845c;
  border-radius: 50%;
  font: 28px var(--mono);
  margin: 0 auto 22px;
}
.playground-empty h2,
.playground-loading h2,
.playground-error h2 {
  font-size: 23px;
  line-height: 1.45;
  letter-spacing: -0.6px;
  margin: 0 0 13px;
}
.playground-empty p,
.playground-loading p,
.playground-error p {
  font-size: 15px;
  line-height: 1.85;
  color: #68745d;
  max-width: 380px;
  margin: 0 auto 18px;
}
.playground-empty > span {
  font: 12px/1.8 var(--mono);
  color: #647057;
}
.playground-error {
  background: #fbf3eb;
}
.playground-error .eyebrow {
  display: block;
  color: #9d542f;
  font-size: 11px;
  margin-bottom: 18px;
}
.playground-error .text-link {
  display: inline-flex;
  gap: 8px;
  font-size: 14px;
}
.playground-spinner {
  display: block;
  width: 36px;
  height: 36px;
  margin: 3px auto 26px;
  border: 2px solid #d2dbc5;
  border-top-color: #5e7447;
  border-radius: 50%;
  animation: playground-spin 1s linear infinite;
}
@keyframes playground-spin {
  to {
    transform: rotate(360deg);
  }
}
#result-content {
  padding: 28px;
  scroll-margin-top: 115px;
}
.playground-winner {
  padding: 22px 24px;
  background: #eaf0df;
  border: 1px solid #ccd8b9;
  border-radius: 6px;
  margin-bottom: 28px;
}
.playground-winner > span {
  font: 12px var(--mono);
  color: #526a3b;
}
.playground-winner h2 {
  font-size: 27px;
  letter-spacing: -0.7px;
  line-height: 1.4;
  margin: 12px 0;
  color: #35462a;
  overflow-wrap: anywhere;
}
.playground-winner p {
  font-size: 14px;
  line-height: 1.75;
  color: #526742;
  margin: 0;
}
.playground-probability-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 22px;
}
.playground-probability {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px 15px;
  margin: 0 0 19px;
  font-size: 14px;
  line-height: 1.6;
}
.playground-probability > span {
  overflow-wrap: anywhere;
}
.playground-probability strong {
  font: 13px/1.8 var(--mono);
  white-space: nowrap;
}
.playground-track {
  grid-column: 1/-1;
  height: 6px;
  background: #e9eddf;
  border-radius: 4px;
  overflow: hidden;
}
.playground-track > div {
  height: 100%;
  background: #a7b793;
  border-radius: 4px;
}
.playground-probability.is-winner .playground-track > div {
  background: #6a8250;
}
.playground-result-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  margin-top: 25px;
  padding-top: 19px;
  font: 11px/1.8 var(--mono);
  color: #5b6d4b;
}
.playground-result-note {
  font-size: 13px;
  line-height: 1.8;
  color: #657458;
  margin: 14px 0 0;
}
.playground-json {
  border-top: 1px solid #d7ddce;
  background: #f8f9f3;
}
.playground-json details + details {
  border-top: 1px solid #d7ddce;
}
.playground-json summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 27px;
  font-size: 14px;
  font-weight: 600;
  list-style: none;
}
.playground-json summary::-webkit-details-marker {
  display: none;
}
.playground-json summary::before {
  content: "+";
  font: 17px var(--mono);
  color: #71835d;
}
.playground-json details[open] > summary::before {
  content: "−";
}
.playground-json summary > span {
  font: 11px var(--mono);
  color: #667654;
  margin-left: auto;
}
.playground-code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 27px 12px;
  font: 11px var(--mono);
  color: #5b6c4b;
}
.playground-code-toolbar button {
  background: #edf1e4;
  border: 1px solid #c6d1b7;
  border-radius: 4px;
  padding: 6px 10px;
  font: 12px var(--sans);
  color: #405331;
  cursor: pointer;
}
.playground-json pre {
  font: 12px/1.8 var(--mono);
  padding: 0 27px 23px;
  margin: 0;
  max-height: 350px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #485a37;
}
.playground-json code {
  font: inherit;
}
.playground-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid var(--line);
  margin-top: 35px;
  padding-top: 26px;
  font-size: 15px;
  color: #657358;
}
.playground-bottom p {
  max-width: 580px;
  margin: 0;
  line-height: 1.8;
}
.playground-bottom .text-link {
  flex: none;
  font-size: 14px;
  gap: 8px;
}
.playground [hidden] {
  display: none !important;
}
@media (max-width: 1000px) {
  .playground-hero {
    gap: 30px;
  }
  .playground-model {
    padding: 24px;
    gap: 18px;
  }
  .playground-model-mark {
    font-size: 52px;
  }
  .playground-model div > span {
    font-size: 13px;
  }
  .playground-form {
    padding: 22px;
  }
  .playground-type-options label > span {
    font-size: 12px;
  }
}
@media (max-width: 899px) {
  .playground-layout {
    grid-template-columns: 1fr;
  }
  .playground-hero {
    grid-template-columns: 1fr;
    padding-block: 50px 30px;
  }
  .playground-model {
    justify-self: start;
    padding: 20px 24px;
  }
  .playground-model-mark {
    font-size: 42px;
  }
  .playground-model strong {
    font-size: 17px;
  }
  .playground-model .text-link {
    margin-top: 4px;
  }
  .playground-type-options label > span {
    font-size: 14px;
  }
  .playground-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
}
@media (max-width: 480px) {
  .playground-hero h1 {
    font-size: 43px;
    letter-spacing: -1.7px;
  }
  .playground-hero p {
    font-size: 16px;
  }
  .playground-model {
    width: 100%;
    gap: 20px;
  }
  .playground-service {
    padding: 15px;
    gap: 8px;
  }
  #service-message {
    min-width: 0;
    flex-basis: calc(100% - 22px);
  }
  #service-budget {
    padding-left: 16px;
  }
  .playground-form {
    padding: 19px 16px;
  }
  .playground-panel-heading .eyebrow {
    font-size: 11px;
  }
  .playground-type-options {
    gap: 5px;
  }
  .playground-type-options label > span {
    font-size: 12px;
    padding: 12px 5px;
  }
  .playground input[type="text"],
  .playground textarea,
  .playground select {
    font-size: 16px;
  }
  .playground-example select {
    font-size: 15px;
  }
  .playground-option {
    gap: 6px;
  }
  .playground-option label {
    flex-basis: 22px;
  }
  .playground-option button {
    flex-basis: 26px;
  }
  .playground-label > span {
    font-size: 11px;
  }
  .playground-output > .playground-panel-heading {
    padding: 20px;
  }
  .playground-empty,
  .playground-loading,
  .playground-error {
    padding: 30px 22px;
  }
  #result-content {
    padding: 20px 16px;
  }
  .playground-winner {
    padding: 20px;
  }
  .playground-winner h2 {
    font-size: 25px;
  }
  .playground-json summary {
    padding-inline: 20px;
  }
  .playground-code-toolbar {
    padding-inline: 20px;
  }
  .playground-json pre {
    padding-inline: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .playground-spinner {
    animation: none;
  }
}

/* basal-1.5: composed decisions and optional context helpers. */
.playground input[type="number"] {
  width: 100%;
  min-width: 0;
  border: 1px solid #bec8b1;
  border-radius: 5px;
  background: #fffefa;
  color: var(--ink);
  padding: 11px 12px;
  font: 16px/1.7 var(--sans);
}
.playground-quick-examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 14px;
}
.playground-quick-examples > span { width: 100%; color: #58674c; }
.playground-quick-examples button {
  display: inline-flex;
  gap: 10px;
  background: #edf1e5;
  border: 1px solid #c6d1b7;
  border-radius: 5px;
  padding: 7px 10px;
  color: #405331;
  font: 13px/1.6 var(--mono);
  cursor: pointer;
}
.playground-type-options { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.playground-type-options label { grid-column: span 2; }
.playground-type-options label:nth-last-child(-n+2) { grid-column: span 3; }
.playground-type-options label > span { font-size: 14px; }
.playground-settings > p, .playground-result-section > p {
  font-size: 14px;
  color: #58674c;
  line-height: 1.8;
  margin: 0 0 15px;
}
.playground-settings legend .type-badge { margin-left: 6px; }
.playground-number-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.playground-number-grid label { font-size: 14px; }
.playground-table-scroll { overflow: auto; border: 1px solid #d0d7c4; border-radius: 5px; margin-bottom: 12px; }
.playground-cost-matrix { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 510px; }
.playground-cost-matrix th, .playground-cost-matrix td { text-align: left; padding: 10px; border-bottom: 1px solid #d7ddce; vertical-align: top; }
.playground-cost-matrix thead th { font-size: 13px; font-weight: 600; background: #edf1e5; width: 135px; overflow-wrap: anywhere; }
.playground-cost-matrix th:first-child { width: 200px; }
.playground-cost-matrix th:last-child { width: 65px; }
.playground-cost-matrix tbody th { font-weight: 400; }
.playground-cost-matrix tbody small { display: block; margin-top: 4px; font: 12px/1.6 var(--mono); color: #58674c; }
.playground-cost-matrix tr:last-child td, .playground-cost-matrix tr:last-child th { border-bottom: 0; }
.playground-cost-matrix input[type="text"] { padding: 11px 9px; font-size: 15px; }
.playground-remove-action { width: 36px; height: 44px; background: none; border: 0; font-size: 24px; color: #58674c; cursor: pointer; }
.playground-remove-action:disabled { opacity: .4; cursor: default; }
.playground label.playground-feature { display: flex; gap: 12px; padding: 16px; margin-bottom: 10px; border: 1px solid #d0d7c4; border-radius: 6px; cursor: pointer; background: #fafbf6; }
.playground-feature input { width: 18px; height: 18px; margin: 4px 0 0; flex: none; accent-color: #52693d; }
.playground-feature strong { display: block; font-size: 15px; font-weight: 600; }
.playground-feature strong code { font: 13px var(--mono); color: #58674c; padding-left: 5px; }
.playground-feature > span > span { display: block; font-size: 14px; font-weight: 400; color: #58674c; line-height: 1.75; margin-top: 4px; }
.playground-feature:has(input:checked) { background: #eaf0df; border-color: #687a50; }
.playground label.playground-feature.is-unavailable { background: #f3f4ed; cursor: not-allowed; }
.playground-result-section { margin-top: 26px; }
.playground-result-section h3 { font-size: 16px; font-weight: 600; margin: 0 0 14px; }
.playground-cost-result { display: flex; justify-content: space-between; gap: 18px; padding: 12px; border-bottom: 1px solid var(--line); font-size: 15px; }
.playground-cost-result > span { overflow-wrap: anywhere; min-width: 0; }
.playground-cost-result strong { flex: none; }
.playground-cost-result.is-selected { background: #eaf0df; color: #405331; border-radius: 5px; }
#action-result-note { margin-top: 12px; }
.playground-evidence-source { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.95; padding: 18px; background: #f5f6ef; border: 1px solid #d7ddce; border-radius: 5px; }
.playground-evidence-source mark { background: #dce8bf; color: #29371e; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.playground-facts-result { background: #edf1e5; border-left: 3px solid #687a50; padding: 14px 16px; font-size: 14px; line-height: 1.8; margin-top: 24px; color: #405331; }
.playground-winner h2 { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .playground-number-grid { grid-template-columns: 1fr; gap: 15px; }
  .playground-type-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .playground-type-options label, .playground-type-options label:nth-last-child(-n+2) { grid-column: auto; }
  .playground-type-options label:last-child { grid-column: 1 / -1; }
  .playground input[type="text"], .playground select { font-size: 16px; }
}