.rs {
  --rs-line: #d3d9d5;
  --rs-rule: #e2e6e1;
  --rs-ink: #242a29;
  --rs-muted: #56605e;
  --rs-shelf: #f4f5f2;
  --rs-pass: #216045;
  --rs-warn: #87510a;
  color: var(--rs-ink);
  color-scheme: light;
  background: #fff;
  border: 1px solid var(--rs-line);
  padding: clamp(13px,1.5vw,26px);
  font-variant-numeric: tabular-nums;
}
.rs h2, .rs h3, .rs p { margin: 0; color: var(--rs-ink) }
.rs h2 { font-size: clamp(23px,1.8vw,32px); font-weight: 650; letter-spacing: -.025em; line-height: 1.3 }
.rs h3 { font-size: clamp(16px,1.2vw,22px); font-weight: 620 }
.rs-heading, .rs-heading > div, .rs-title, .rs-action, .rs-tools { display: flex; align-items: center; gap: 10px }
.rs-heading, .rs-title, .rs-action { justify-content: space-between }
.rs-heading > div { align-items: baseline; flex-wrap: wrap; column-gap: 14px; row-gap: 3px }
.rs-model { color: var(--rs-muted); font-size: 12px }
.rs button {
  color: var(--rs-ink);
  border: 1px solid #bdc5be;
  border-radius: 3px;
  background: #fff;
  padding: 7px 12px;
  cursor: pointer;
  font: 550 13px/1.4 var(--sans);
}
.rs button:hover { background: var(--rs-shelf); border-color: #839087; filter: none }
.rs button:focus-visible { outline: 2px solid #474f49; outline-offset: 2px }
.rs button[aria-pressed=true], .rs button[data-best], .rs button[data-step] { border-color: var(--rs-ink); color: #fff; background: var(--rs-ink) }
.rs button[data-step]:hover, .rs button[data-best]:hover { background: #3e4741 }
.rs .rs-intro { margin: 8px 0 16px; color: var(--rs-muted); font-size: 13px; line-height: 1.65 }
.rs-box { min-width: 0; border: 1px solid var(--rs-line); background: #fff; padding: 14px 17px }
.rs-box p { color: var(--rs-muted); font-size: 13px; line-height: 1.65; margin-top: 8px }
.rs-box b { color: var(--rs-ink) }
.rs-box small, .rs-title > span { color: var(--rs-muted); font-size: 12px }
.rs-scroll { margin-top: 13px; overflow-x: auto; border: 1px solid var(--rs-line) }
.rs-matrix { width: 100%; min-width: 630px; table-layout: fixed; border-collapse: collapse; text-align: center; font: 14px var(--mono), var(--sans) }
.rs-matrix :is(th,td) { padding: 7px 4px; border-bottom: 1px solid var(--rs-rule); font-weight: 500 }
.rs-matrix thead th { font: 550 12px var(--sans); background: var(--rs-shelf) }
.rs-matrix thead button { width: min(100%,68px); padding: 5px 0; font: 600 12px var(--mono) }
.rs-matrix th:first-child { width: 15%; padding-left: 12px; text-align: left; font-family: var(--sans) }
.rs-matrix th:last-child { width: 12% }
.rs-matrix tbody tr:last-child > * { border-bottom: none }
.rs-matrix small { display: inline-block; margin-left: 4px; font: 11px var(--sans) }
.rs-matrix td[data-domain] { color: #a3aba5 }
.rs-matrix td.rs-bought { color: #28352d; background: #f8f9f6 }
.rs-matrix td[data-cut] { border-left: 1px solid var(--rs-line); color: var(--rs-pass); background: #f0f6f0; font-weight: 600 }
.rs-matrix td[data-cut].rs-low { color: var(--rs-warn); background: #faf3e6 }
.rs-bottom, .rs-experiment { display: grid; gap: 12px; margin-top: 12px; grid-template-columns: 1fr 1fr }
.rs-bottom .rs-tools { margin-top: 10px }
.rs-tools { flex-wrap: wrap; gap: 6px }
.rs-value { display: inline-flex; align-items: center; margin-top: 9px; background: #e7f1e9; color: var(--rs-pass); padding: 2px 8px; border: 1px solid #c4d9c9; font-size: 13px; font-weight: 600 }
.rs-value.rs-low { background: #faf1dd; color: var(--rs-warn); border-color: #e4cda4 }
.rs-experiment { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) }
.rs-array { display: grid; grid-template-columns: repeat(3,1fr); margin: 17px 0; border: 1px solid var(--rs-line) }
.rs-array > div { min-height: 62px; padding: 9px 12px; background: #f4f5f2; border-right: 1px solid var(--rs-line); border-bottom: 1px solid var(--rs-line) }
.rs-array > div:nth-child(3n) { border-right: none }
.rs-array > div:nth-last-child(-n+3) { border-bottom: none }
.rs-array > div b { display: block; font: 550 clamp(19px,1.7vw,27px)/1.2 var(--mono); color: #748077; margin-top: 4px }
.rs-array > div.rs-open { background: #fff }
.rs-array > div.rs-open b { color: var(--rs-ink) }
.rs-array > div.rs-fifth { box-shadow: inset 0 0 0 2px #434f47 }
.rs-action span { color: var(--rs-muted); font-size: 13px }
.rs-action strong { color: var(--rs-ink); font: 600 22px var(--mono); margin-left: 5px }
.rs-steps { margin: 12px 0 0; padding-left: 25px; color: var(--rs-ink); font-size: 13px; line-height: 1.85 }
.rs .rs-outcome { padding: 9px 12px; margin-bottom: 18px; background: var(--rs-shelf); border-left: 2px solid #626e65; color: var(--rs-ink) }
.rs .rs-foot { margin-top: 12px; color: var(--rs-muted); font-size: 12px; line-height: 1.6 }
@media (min-width:1001px) {
  #research { max-height: max(420px, calc(100dvh - 150px)); min-width: 0; overflow: auto }
}
@media (max-width:860px) {
  .rs-bottom, .rs-experiment { grid-template-columns: 1fr }
  .rs-title, .rs-heading { flex-wrap: wrap }
}
@media (max-height:800px) and (min-width:861px) {
  .rs { padding: 11px 15px }
  .rs .rs-intro { margin: 5px 0 10px }
  .rs-box { padding: 10px 14px }
  .rs-scroll, .rs-array { margin-top: 10px }
  .rs-matrix td, .rs-matrix th { padding-block: 5px }
  .rs-matrix small { font-size: 10px }
  .rs-array > div { min-height: 54px; padding: 7px 9px }
}
