.best-pick-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.best-pick-card {
  position: relative;
  display: grid;
  gap: 8px;
  align-content: start;
  justify-items: center;
  min-width: 0;
  min-height: 198px;
  padding: 12px 12px 12px;
  border: 5px solid #a9a9a1;
  color: #000000;
  background: #ffffff;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.9),
    inset 0 0 0 6px rgba(218, 218, 210, 0.24),
    0 0 0 1px rgba(74, 74, 68, 0.18),
    0 0 14px rgba(255, 255, 255, 0.32),
    0 3px 0 rgba(0, 0, 0, 0.1);
}

.best-pick-card:last-child {
  border-right: 5px solid #a9a9a1;
}

.best-pick-card[data-leader-key="overallBest"] {
  aspect-ratio: auto;
  border-color: #c88f08;
  grid-column: auto;
  min-height: 218px;
  padding: 12px 12px 12px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 246, 190, 0.95),
    inset 0 0 0 7px rgba(255, 214, 83, 0.24),
    0 0 0 2px rgba(255, 215, 89, 0.42),
    0 0 20px rgba(226, 169, 24, 0.34),
    0 3px 0 rgba(111, 70, 0, 0.18);
}

.best-pick-interest {
  position: static;
  justify-self: center;
  z-index: 1;
  margin: 0 0 1px;
  padding: 4px 8px;
  border: 1px solid #cfcfc8;
  background: #f8f8f4;
  font-size: var(--text-sm);
  font-weight: 800;
}

.best-pick-card[data-leader-key="overallBest"] .best-pick-interest {
  margin-top: 0;
  padding: 5px 9px;
  font-size: var(--text-sm);
  transform: none;
}

.best-pick-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  pointer-events: none;
  background:
    linear-gradient(90deg, #5f5f5f 0, #d8d8d8 18%, #ffffff 34%, #8c8c8c 50%, #eeeeee 70%, #666666 100%);
  box-shadow:
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(0, 0, 0, 0.08);
}

.best-pick-card[data-leader-key="overallBest"]::before {
  background:
    linear-gradient(90deg, #8b5d00 0, #e2a600 16%, #fff1a6 33%, #bd7f00 52%, #ffd75c 72%, #7a4b00 100%);
  background-size: 180% 100%;
  box-shadow:
    inset 0 -1px 0 rgba(103, 62, 0, 0.38),
    0 1px 0 rgba(0, 0, 0, 0.1);
  animation: best-pick-rail-shine 4s ease-in-out infinite;
}

@keyframes best-pick-rail-shine {
  0% {
    background-position: 0 0;
  }
  45% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.best-pick-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: center;
  justify-items: center;
  width: 100%;
  min-height: 0;
  padding: 0 0 6px;
  border-bottom: 1px solid #000000;
  text-align: center;
}

.best-pick-card h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #000000;
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.25vw, 17px);
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
  border-bottom: 0;
}

.best-pick-card[data-leader-key="overallBest"] h3 {
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 500;
  line-height: 1.15;
}

.best-pick-category {
  min-width: 0;
  letter-spacing: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.best-pick-header p {
  margin: 0;
  color: #000000;
  font-size: var(--text-sm);
  line-height: 1.25;
}

.best-pick-mouse {
  display: grid;
  gap: 2px;
  justify-items: center;
  margin: 0;
  color: #000000;
  font-family: var(--font-sans);
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}

.best-pick-brand {
  color: #000000;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 850;
  line-height: 1.08;
}

.best-pick-model {
  color: #000000;
  font-size: clamp(18px, 1.55vw, 23px);
  font-weight: 800;
  line-height: 1.12;
}

.best-pick-card[data-leader-key="overallBest"] .best-pick-brand {
  font-size: clamp(23px, 2vw, 30px);
}

.best-pick-card[data-leader-key="overallBest"] .best-pick-model {
  font-size: clamp(20px, 1.7vw, 25px);
  line-height: 1.12;
}

.best-pick-card[data-leader-key="overallBest"] .best-pick-suffix {
  font-size: var(--text-xs);
}

.best-pick-suffix {
  color: #555555;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.1;
}

.best-pick-value {
  margin: 0;
  padding: 0;
  border: 0;
  color: #000000;
  font-family: var(--font-mono);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  background: transparent;
}

.best-pick-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
}

.best-pick-data-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 28px;
  padding: 3px 9px;
  border: 1px solid var(--rule);
  color: #000000;
  font-size: var(--text-table);
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  background: #ffffff;
}

.best-pick-data-link:visited {
  color: #000000;
}

.best-pick-actions .measured-buy-link,
.best-pick-actions .measured-trajectory-open,
.best-pick-actions .best-pick-data-link {
  min-width: 48px;
  min-height: 28px;
  padding: 3px 9px;
  border: 1px solid var(--rule);
  color: #000000;
  font-size: var(--text-table);
  font-weight: 700;
  text-transform: none;
  background: #ffffff;
  box-shadow: var(--button-shadow-small);
}

.best-pick-card[data-leader-key="overallBest"] .best-pick-actions {
  gap: 6px;
}

.best-pick-card[data-leader-key="overallBest"] .best-pick-actions .measured-buy-link,
.best-pick-card[data-leader-key="overallBest"] .best-pick-actions .measured-trajectory-open,
.best-pick-card[data-leader-key="overallBest"] .best-pick-actions .best-pick-data-link {
  min-height: 28px;
  padding: 3px 9px;
  font-size: var(--text-table);
}

.best-pick-actions .measured-buy-link:visited,
.best-pick-actions .measured-trajectory-open:visited,
.best-pick-actions .best-pick-data-link:visited {
  color: #000000;
}

.best-pick-actions .measured-buy-link:hover,
.best-pick-actions .measured-buy-link:focus-visible,
.best-pick-actions .measured-trajectory-open:hover,
.best-pick-actions .measured-trajectory-open:focus-visible,
.best-pick-actions .best-pick-data-link:hover,
.best-pick-actions .best-pick-data-link:focus-visible {
  color: #000000;
  transform: none;
  background: var(--button-hover);
  box-shadow: var(--button-shadow-small);
}

.affiliate-disclosure {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.35;
  text-align: center;
}

.benchmark-affiliate-disclosure {
  margin: 0 0 6px;
}

.metric-method-note {
  margin: 10px 0 8px;
  padding: 0;
  color: var(--muted);
  font-size: var(--text-table);
  font-weight: 500;
  line-height: 1.45;
}

.metric-method-note a {
  color: #000000;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.metric-method-note .method-note-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0 3px;
  padding: 2px 9px 3px;
  border: 1px solid #000000;
  color: #000000;
  background: #f2f2ec;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 2px 0 #000000;
}

.metric-method-note .method-note-link:hover,
.metric-method-note .method-note-link:focus-visible {
  background: #ffffff;
}

nav {
  margin: 0;
}

nav a {
  margin: 0;
}

form {
  margin: 18px 0 10px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: var(--weight-semibold);
}

.search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
}

.data-sort-row {
  display: inline-grid;
  grid-template-columns: auto minmax(180px, 260px);
  align-items: center;
  gap: 6px 8px;
  margin: 8px 0 4px;
  padding: 7px 8px;
  border: 1px solid var(--rule);
  background: #ffffff;
  font-size: var(--text-table);
}

.data-sort-row label {
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
}

.data-sort-row select {
  min-width: 0;
  height: 28px;
  padding-top: 3px;
  padding-bottom: 3px;
  font-size: var(--text-table);
}

.records-table-head {
  display: grid;
  grid-template-columns: minmax(220px, 1.8fr) minmax(72px, 0.5fr) minmax(64px, 0.42fr) minmax(64px, 0.42fr) minmax(64px, 0.42fr) minmax(58px, 0.34fr);
  align-items: stretch;
  margin-top: 8px;
  border: 1px solid var(--rule);
  border-bottom: 0;
  background: #eeeeee;
  font-size: var(--text-table);
}

.records-head-cell {
  min-width: 0;
  min-height: 34px;
  padding: 6px 8px;
  border-right: 1px solid var(--rule);
}

.records-head-cell:last-child {
  border-right: 0;
}

.records-head-cell {
  display: flex;
  align-items: center;
  color: #000000;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  background: transparent;
}

button.records-head-cell {
  width: 100%;
  height: auto;
  justify-content: flex-start;
  border-width: 0 1px 0 0;
  box-shadow: none;
  cursor: pointer;
}

button.records-head-cell:hover,
button.records-head-cell:focus-visible {
  background: #ffffff;
}

button.records-head-cell:active {
  transform: none;
  box-shadow: none;
}

.records-head-cell.active {
  color: #000000;
  background: #ffffff;
  box-shadow: inset 0 -3px 0 #000000;
}

.records-head-cell.active[data-sort-direction="asc"]::after {
  content: "↑";
  margin-left: 5px;
  font-size: 0.9em;
}

.records-head-cell.active[data-sort-direction="desc"]::after {
  content: "↓";
  margin-left: 5px;
  font-size: 0.9em;
}

.records-head-metric {
  justify-content: flex-end;
  text-align: right;
}

.records-head-reaction {
  justify-content: center;
  text-align: center;
}

.records-sort-controls {
  display: none;
  position: relative;
  z-index: 3;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0;
  padding: 6px 7px;
  border: 1px solid var(--rule);
  background: #ffffff;
}

.records-sort-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.records-sort-button {
  min-width: 48px;
  min-height: 28px;
  padding: 3px 9px;
  border: 1px solid var(--rule);
  color: #000000;
  font-family: var(--font-sans);
  font-size: var(--text-table);
  font-weight: 700;
  line-height: 1.25;
  text-transform: none;
  background: #ffffff;
  box-shadow: var(--button-shadow-small);
  touch-action: manipulation;
}

.records-sort-button:hover,
.records-sort-button:focus-visible {
  color: #000000;
  background: var(--button-hover);
  box-shadow: var(--button-shadow-small);
}

.records-sort-button.active {
  border-color: #000000;
  background: #dddddd;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.28);
  transform: translateY(1px);
}

.records-sort-button.active[data-sort-direction="asc"]::after {
  content: "↑";
  margin-left: 4px;
}

.records-sort-button.active[data-sort-direction="desc"]::after {
  content: "↓";
  margin-left: 4px;
}

input,
button,
select,
textarea {
  font: inherit;
  border-radius: 0;
}

input,
select,
textarea {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid var(--rule);
  background: #ffffff;
}

input,
select {
  height: 36px;
}

textarea {
  min-height: 140px;
  resize: vertical;
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  height: auto;
  padding: 5px 12px;
  color: #000000;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  background: var(--button-bg);
  border: 1px solid #000000;
  box-shadow: var(--button-shadow-small);
  cursor: pointer;
}

button:hover,
button:focus-visible {
  color: #000000;
  background: var(--button-hover);
}

button:active {
  background: var(--button-pressed);
  box-shadow: none;
  transform: translate(1px, 1px);
}

button:disabled,
button[aria-disabled="true"] {
  color: var(--muted);
  border-color: var(--soft);
  background: #eeeeee;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
}

.instruction-start-link,
.measured-buy-link,
.best-pick-data-link,
.study-result-actions a,
.paper-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid #000000;
  color: #000000;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  background: var(--button-bg);
  box-shadow: var(--button-shadow-small);
}

.instruction-start-link:visited,
.measured-buy-link:visited,
.best-pick-data-link:visited,
.study-result-actions a:visited,
.paper-link:visited {
  color: #000000;
}

.instruction-start-link:hover,
.instruction-start-link:focus-visible,
.measured-buy-link:hover,
.measured-buy-link:focus-visible,
.best-pick-data-link:hover,
.best-pick-data-link:focus-visible,
.study-result-actions a:hover,
.study-result-actions a:focus-visible,
.paper-link:hover,
.paper-link:focus-visible {
  color: #000000;
  text-decoration: none;
  background: var(--button-hover);
}

.method-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: -4px 0 18px;
}

section {
  margin-bottom: 26px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-table);
  line-height: 1.42;
  background: #ffffff;
}

th,
td {
  padding: 6px 7px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--rule);
}

th {
  font-weight: var(--weight-semibold);
  background: #eeeeee;
}

code {
  font-family: var(--font-mono);
}

var {
  font-family: var(--font-formula);
  font-style: italic;
}

sub,
sup {
  line-height: 0;
}

.formula-box {
  overflow-x: auto;
  margin: 10px 0 14px;
  padding: 10px;
  border: 1px solid var(--rule);
  font-family: var(--font-formula);
  font-size: var(--text-large);
  line-height: 1.8;
  background: #f7f7f7;
}

.equation {
  width: max-content;
  min-width: 100%;
  white-space: nowrap;
}

.inline-formula {
  display: inline-block;
  font-family: var(--font-formula);
  white-space: nowrap;
}

.metric-term {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-table);
  font-weight: 600;
}

.quantity-symbol {
  display: inline-block;
  margin-left: 2px;
  color: var(--muted);
  font-family: var(--font-formula);
  font-size: 0.92em;
  font-weight: 400;
  white-space: nowrap;
}

.metric-term .quantity-symbol {
  color: #222222;
}

.metric-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.formula-cell {
  min-width: 210px;
}

.fraction {
  display: inline-grid;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  min-width: 2.2em;
  margin: 0 0.18em;
  line-height: 1.05;
  vertical-align: middle;
}

.fraction-top {
  display: block;
  width: 100%;
  padding: 0 0.25em 0.12em;
  text-align: center;
}

.fraction-bottom {
  display: block;
  width: 100%;
  padding: 0.12em 0.25em 0;
  border-top: 1px solid #000000;
  text-align: center;
}

.db-count {
  display: block;
  margin: 4px 0 14px;
  padding: 0;
  color: var(--muted);
  font-size: var(--text-table);
  font-weight: 600;
  line-height: 1.45;
}

.benchmark-snapshot-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
  margin: 2px 0 18px;
  padding: 8px;
  border: 2px solid #000000;
  background: #ffffff;
}

.benchmark-records-meta {
  margin: 10px 0 16px;
  padding: 8px;
  border: 1px solid var(--rule);
  background: #ffffff;
}

.benchmark-records-meta .benchmark-snapshot-summary {
  margin: 0;
  padding: 0;
  border: 0;
}

.benchmark-records-meta .legal-note {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--soft);
}

.snapshot-stat {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 76px;
  padding: 10px 12px;
  border: 2px solid #000000;
  background: #ffffff;
}

.snapshot-value {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: clamp(24px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.1;
}

.snapshot-label {
  color: var(--muted);
  font-size: var(--text-table);
  font-weight: 700;
  line-height: 1.2;
}

.legal-note {
  margin: 8px 0 14px;
  padding: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.technical-note {
  margin: 8px 0;
  padding: 0;
  color: var(--muted);
  font-size: var(--text-table);
  line-height: 1.45;
}

.table-unit-note {
  margin: -2px 0 8px;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.records-table-guide {
  display: grid;
  gap: 4px;
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  background: #ffffff;
}

.records-table-guide .table-unit-note {
  margin: 0;
  color: #000000;
  font-family: var(--font-sans);
  font-size: var(--text-table);
  font-weight: 650;
}

.records-table-guide .table-unit-note::before {
  content: ">";
  margin-right: 6px;
  font-family: var(--font-mono);
  font-weight: 900;
}

.study-warning {
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  font-size: var(--text-table);
  line-height: 1.45;
  background: #ffffff;
}

.new-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 0 4px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: #ffffff;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
}

.method-figures {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}

.method-stage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

.method-stage-grid div {
  position: relative;
  padding: 8px;
  border: 1px solid var(--rule);
  background: #fbfbfb;
}

.method-stage-grid b {
  display: block;
  margin-bottom: 3px;
  font-size: var(--text-table);
}

.method-stage-grid span {
  display: block;
  color: var(--muted);
  font-size: var(--text-table);
}

.method-steps {
  display: grid;
  gap: 0;
  margin: 10px 0 16px;
  padding: 0;
  list-style: none;
  counter-reset: method-step;
}

.method-steps li {
  position: relative;
  min-height: 0;
  padding: 8px 0 8px 34px;
  border-top: 1px solid var(--soft);
  background: transparent;
  counter-increment: method-step;
}

.method-steps li::before {
  content: counter(method-step) ".";
  position: absolute;
  top: 8px;
  left: 0;
  width: 22px;
  padding: 0;
  border: 0;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--text-table);
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
  background: transparent;
}

.method-steps b {
  display: inline;
  margin-right: 3px;
}

figure {
  margin: 0;
}

figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}

figcaption {
  padding: 5px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  text-align: center;
}

.instruction-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 292px);
  gap: 22px;
  align-items: center;
  margin: 0 0 12px;
}

.instruction-section {
  padding: 12px 14px 13px;
}

.instruction-section .instruction-copy h2 {
  margin-top: 0;
}

.instruction-section .instruction-copy h3 {
  display: flex;
  gap: 7px;
  align-items: center;
  margin: 0 0 8px;
  font-size: var(--text-title-sm);
}

.instruction-copy {
  min-width: 0;
}

.instruction-copy > h2,
.instruction-copy > h3 {
  margin-top: 0;
}

.instruction-task-panel[hidden] {
  display: none;
}

.instruction-callout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  margin-top: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.instruction-rule-list {
  counter-reset: instruction-rule;
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.instruction-rule {
  counter-increment: instruction-rule;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px 10px;
  min-width: 0;
  padding: 0 0 11px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
}

.instruction-rule:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.instruction-rule::before {
  content: counter(instruction-rule);
  grid-row: 1 / span 2;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 2px solid #000000;
  background: #f4f4f4;
  color: #000000;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.instruction-rule b {
  display: block;
  color: #000000;
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 750;
  line-height: 1.15;
}

.instruction-rule span {
  display: block;
  color: #111111;
  font-size: var(--text-table);
  line-height: 1.32;
}

.instruction-task-figure {
  width: min(100%, 292px);
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
}

.instruction-task-figure svg {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
}

.instruction-task-figure .instruction-ring,
.instruction-task-figure .instruction-click-pulse,
.instruction-task-figure .instruction-target-core,
.instruction-task-figure .instruction-cursor path {
  fill: none;
  stroke: #000000;
  stroke-width: 2;
}

.instruction-task-figure .instruction-path {
  fill: none;
  stroke: #777777;
  stroke-dasharray: 5 5;
  stroke-width: 2;
}

.instruction-task-figure .instruction-current-target {
  animation: instruction-target-clicks 7.8s linear infinite;
  transform: translate(160px, 56px);
  transform-box: view-box;
  transform-origin: 0 0;
}

.instruction-task-figure .instruction-target-core {
  fill: var(--accent);
  stroke-width: 2.5;
}

.instruction-task-figure .instruction-click-pulse {
  stroke: var(--accent);
  stroke-width: 3;
  opacity: 0;
  animation: instruction-click-pulse 7.8s linear infinite;
}

.instruction-task-figure .instruction-cursor path {
  fill: #ffffff;
}

.instruction-task-figure .instruction-cursor {
  animation: instruction-cursor-clicks 7.8s linear infinite;
  transform: translate(160px, 56px);
  transform-box: view-box;
  transform-origin: 0 0;
}

.instruction-task-figure text {
  fill: #000000;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.instruction-task-figure .instruction-target-note {
  font-size: 10px;
  font-weight: 600;
}

.instruction-task-figure .instruction-command-text {
  font-size: 12px;
  font-weight: 800;
}

.instruction-aim3d-figure .instruction-aim3d-face,
.instruction-aim3d-figure .instruction-aim3d-grid,
.instruction-aim3d-figure .instruction-aim3d-crosshair path,
.instruction-aim3d-figure .instruction-aim3d-crosshair circle {
  fill: none;
  stroke: #000000;
  stroke-width: 1.35;
}

.instruction-aim3d-figure .instruction-aim3d-room {
  animation: instruction-aim3d-grid-pan 6.6s linear infinite;
  transform-box: view-box;
  transform-origin: 160px 160px;
}

.instruction-aim3d-figure .instruction-aim3d-face {
  fill: #fbfbfb;
  stroke: #777777;
  stroke-width: 1.2;
}

.instruction-aim3d-figure .instruction-aim3d-floor {
  fill: #f3f3f3;
}

.instruction-aim3d-figure .instruction-aim3d-left,
.instruction-aim3d-figure .instruction-aim3d-right {
  fill: #f7f7f7;
}

.instruction-aim3d-figure .instruction-aim3d-grid {
  stroke: #b8b8b8;
  stroke-width: 1.15;
}

.instruction-aim3d-figure .instruction-aim3d-trajectory {
  fill: none;
  stroke: var(--accent);
  stroke-dasharray: 6 4;
  stroke-width: 1.7;
}

.instruction-aim3d-figure .instruction-aim3d-target {
  animation: instruction-aim3d-target 6.6s linear infinite;
  transform: translate(98px, 198px);
  transform-box: view-box;
  transform-origin: 0 0;
}

@keyframes instruction-aim3d-target {
  0% {
    transform: translate(98px, 198px);
  }
  18%,
  24% {
    transform: translate(160px, 160px);
  }
  25% {
    transform: translate(205px, 119px);
  }
  43%,
  49% {
    transform: translate(160px, 160px);
  }
  50% {
    transform: translate(116px, 100px);
  }
  68%,
  74% {
    transform: translate(160px, 160px);
  }
  75% {
    transform: translate(222px, 214px);
  }
  96%,
  100% {
    transform: translate(160px, 160px);
  }
}

@keyframes instruction-aim3d-grid-pan {
  0% {
    transform: translate(4px, -3px);
  }
  18%,
  24% {
    transform: translate(-7px, 5px);
  }
  43%,
  49% {
    transform: translate(6px, 7px);
  }
  68%,
  74% {
    transform: translate(-5px, -6px);
  }
  96%,
  100% {
    transform: translate(4px, -3px);
  }
}

@keyframes instruction-target-clicks {
  0%,
  7.6% {
    transform: translate(160px, 56px);
  }
  7.7%,
  15.3% {
    transform: translate(184.9px, 261px);
  }
  15.4%,
  23% {
    transform: translate(111.7px, 67.9px);
  }
  23.1%,
  30.7% {
    transform: translate(229px, 237.8px);
  }
  30.8%,
  38.4% {
    transform: translate(74.4px, 100.9px);
  }
  38.5%,
  46.1% {
    transform: translate(257.2px, 196.9px);
  }
  46.2%,
  53.7% {
    transform: translate(56.8px, 147.5px);
  }
  53.8%,
  61.4% {
    transform: translate(263.2px, 147.5px);
  }
  61.5%,
  69.1% {
    transform: translate(62.8px, 196.9px);
  }
  69.2%,
  76.8% {
    transform: translate(245.6px, 100.9px);
  }
  76.9%,
  84.5% {
    transform: translate(91px, 237.8px);
  }
  84.6%,
  92.2% {
    transform: translate(208.3px, 67.9px);
  }
  92.3%,
  100% {
    transform: translate(135.1px, 261px);
  }
}

@keyframes instruction-cursor-clicks {
  0% {
    transform: translate(160px, 160px);
  }
  6.1% {
    transform: translate(160px, 56px);
  }
  7.6%,
  7.7% {
    transform: translate(160px, 56px);
  }
  13.8% {
    transform: translate(184.9px, 261px);
  }
  15.3%,
  15.4% {
    transform: translate(184.9px, 261px);
  }
  21.5% {
    transform: translate(111.7px, 67.9px);
  }
  23%,
  23.1% {
    transform: translate(111.7px, 67.9px);
  }
  29.2% {
    transform: translate(229px, 237.8px);
  }
  30.7%,
  30.8% {
    transform: translate(229px, 237.8px);
  }
  36.9% {
    transform: translate(74.4px, 100.9px);
  }
  38.4%,
  38.5% {
    transform: translate(74.4px, 100.9px);
  }
  44.6% {
    transform: translate(257.2px, 196.9px);
  }
  46.1%,
  46.2% {
    transform: translate(257.2px, 196.9px);
  }
  52.3% {
    transform: translate(56.8px, 147.5px);
  }
  53.7%,
  53.8% {
    transform: translate(56.8px, 147.5px);
  }
  59.9% {
    transform: translate(263.2px, 147.5px);
  }
  61.4%,
  61.5% {
    transform: translate(263.2px, 147.5px);
  }
  67.6% {
    transform: translate(62.8px, 196.9px);
  }
  69.1%,
  69.2% {
    transform: translate(62.8px, 196.9px);
  }
  75.3% {
    transform: translate(245.6px, 100.9px);
  }
  76.8%,
  76.9% {
    transform: translate(245.6px, 100.9px);
  }
  83% {
    transform: translate(91px, 237.8px);
  }
  84.5%,
  84.6% {
    transform: translate(91px, 237.8px);
  }
  90.7% {
    transform: translate(208.3px, 67.9px);
  }
  92.2%,
  92.3% {
    transform: translate(208.3px, 67.9px);
  }
  98.4%,
  100% {
    transform: translate(135.1px, 261px);
  }
}

@keyframes instruction-click-pulse {
  0%,
  5.8%,
  7.3%,
  13.5%,
  15%,
  21.2%,
  22.7%,
  28.9%,
  30.4%,
  36.6%,
  38.1%,
  44.3%,
  45.8%,
  52%,
  53.5%,
  59.6%,
  61.1%,
  67.3%,
  68.8%,
  75%,
  76.5%,
  82.7%,
  84.2%,
  90.4%,
  91.9%,
  98.1%,
  100% {
    opacity: 0;
  }
  6.1%,
  13.8%,
  21.5%,
  29.2%,
  36.9%,
  44.6%,
  52.3%,
  59.9%,
  67.6%,
  75.3%,
  83%,
  90.7%,
  98.4% {
    opacity: 0.95;
  }
}

@media (prefers-reduced-motion: reduce) {
  .instruction-task-figure .instruction-click-pulse,
  .instruction-task-figure .instruction-current-target,
  .instruction-task-figure .instruction-cursor,
  .instruction-task-figure .instruction-aim3d-target,
  .instruction-task-figure .instruction-aim3d-grid {
    animation: none;
  }
}

.instruction-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 10px 0 8px;
  padding: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: transparent;
  box-shadow: none;
}

.instruction-facts div {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  min-height: 78px;
  padding: 9px 8px 10px;
  border: 0;
  border-right: 1px solid var(--soft);
  background: transparent;
  text-align: center;
}

.instruction-facts div:last-child {
  border-right: 0;
}

.instruction-fact-icon {
  width: 21px;
  height: 21px;
  color: #000000;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}

.instruction-facts strong {
  font-family: var(--font-sans);
  font-size: clamp(25px, 3.8vw, 38px);
  font-weight: 800;
  line-height: 1.1;
}

.instruction-facts span {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.instruction-login-note {
  color: var(--muted);
  font-size: var(--text-table);
  line-height: 1.45;
}

.instruction-start-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-column: auto;
  grid-row: auto;
  justify-self: start;
  align-self: start;
  min-height: 34px;
  margin-top: 2px;
  padding: 6px 13px;
  border: 2px solid #000000;
  color: #ffffff;
  font-family: var(--font-mono);
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  background: var(--accent);
  box-shadow: 1px 1px 0 #000000;
}

.instruction-start-link:visited {
  color: #ffffff;
}

.instruction-start-link:hover,
.instruction-start-link:focus-visible {
  color: #ffffff;
  background: #7f1515;
}

.instruction-start-link:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}

.study-intro {
  max-width: 860px;
  font-size: var(--text-large);
}

.study-setup-panel {
  display: grid;
  gap: 0;
  margin: 12px 0;
  border: 0;
  background: transparent;
}

.study-task-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.study-task-picker legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.study-task-picker label {
  display: inline-grid;
  flex: 0 0 auto;
  max-width: 100%;
  min-width: 0;
}

.study-task-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  pointer-events: none;
}

.study-task-picker label > span {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 10px;
  border: 2px solid #000000;
  color: #000000;
  background: #ffffff;
  box-shadow: 2px 2px 0 #000000;
  font: inherit;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transform: translate(0, 0);
  transition: transform 80ms ease, box-shadow 80ms ease, background 80ms ease, color 80ms ease;
}

.study-task-picker label:last-of-type > span {
  border-right-width: 2px;
}

.study-task-picker label > span::after {
  position: absolute;
  top: 7px;
  right: 8px;
  content: none;
}

.study-task-picker input:hover + span,
.study-task-picker label:hover > span {
  background: #f7f7f7;
}

.study-task-picker input:checked + span {
  border-color: #000000;
  color: #000000;
  background: #e7e7e1;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.22);
  transform: translate(2px, 2px);
}

.study-task-picker input:checked + span::after {
  content: none;
}

.study-task-picker input:active + span {
  background: #e7e7e1;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.22);
  transform: translate(2px, 2px);
}

.study-task-picker input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.study-task-picker input:checked + span small {
  color: #333333;
}

.study-task-icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}

.study-task-picker b {
  min-width: 0;
  flex: 0 1 auto;
  overflow-wrap: anywhere;
  font-family: inherit;
  font-size: var(--text-body);
  text-transform: none;
}

.study-task-high-score {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px 9px;
  width: fit-content;
  max-width: 100%;
  margin: -4px auto 12px;
  padding: 6px 9px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  color: #000000;
  font-size: var(--text-table);
  line-height: 1.2;
  text-align: center;
  background: #ffffff;
}

.study-task-high-score[hidden] {
  display: none;
}

.study-task-high-score span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
}

.study-task-high-score strong {
  font-size: var(--text-large);
  font-weight: 800;
}

.study-task-high-score em {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  font-style: normal;
  font-weight: 800;
}

.study-task-high-score b {
  color: var(--accent);
  font-weight: 800;
}

.study-task-picker small {
  min-width: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.25;
}

.study-task-picker.instruction-task-picker {
  margin: 10px 0 14px;
  padding: 0;
  border: 0;
  background: transparent;
}

.benchmark-browser {
  display: grid;
  gap: 12px;
}

.benchmark-browser > h2 {
  margin-bottom: 0;
}

.benchmark-view-picker {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 4px 0 8px;
}

.benchmark-view-panel[hidden] {
  display: none;
}

.benchmark-leaders-panel,
.benchmark-records-section,
.benchmark-build-quality-section {
  min-width: 0;
}

.benchmark-build-quality-section {
  display: grid;
  gap: 10px;
}

.build-quality-kicker {
  max-width: 820px;
  margin: 0 auto 2px;
  color: #000000;
  font-size: var(--text-body);
  line-height: 1.55;
  text-align: center;
}

.build-quality-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.build-quality-card {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--rule);
  background: #ffffff;
}

.build-quality-card span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
}

.build-quality-card strong {
  color: #000000;
  font-size: var(--title-sm);
  font-weight: 700;
  line-height: 1.15;
}

.build-quality-card p {
  margin: 0;
  color: #222222;
  font-size: var(--text-sm);
  line-height: 1.45;
}

.build-quality-preview {
  min-width: 0;
  border: 1px solid var(--rule);
  background: #ffffff;
}

.build-quality-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
}

.build-quality-preview-head b {
  font-size: var(--text-body);
  font-weight: 800;
}

.build-quality-preview-head span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
}

.build-quality-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.build-quality-table th,
.build-quality-table td {
  padding: 8px 9px;
  border-bottom: 1px solid var(--soft);
  font-size: var(--text-table);
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}

.build-quality-table th:first-child,
.build-quality-table td:first-child,
.build-quality-table th:nth-child(2),
.build-quality-table td:nth-child(2) {
  text-align: left;
}

.build-quality-table th {
  color: #000000;
  font-weight: 800;
  background: #f4f4ee;
}

.build-quality-brand-cell,
.build-quality-brand-score {
  background: #fafaf6;
  font-weight: 700;
  vertical-align: middle;
}

.build-quality-table tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 760px) {
  .build-quality-grid {
    grid-template-columns: 1fr;
  }

  .build-quality-preview-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .build-quality-table th,
  .build-quality-table td {
    padding: 7px 6px;
    font-size: var(--text-xs);
  }
}

.benchmark-simulator-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.benchmark-simulator-field {
  margin: 0;
}

.benchmark-simulator-action {
  display: flex;
  align-items: end;
  min-height: 38px;
}