:root {
  color-scheme: dark;
  --bg: #090d12;
  --panel: #10161e;
  --panel-soft: #0d131a;
  --line: rgba(176, 202, 221, 0.12);
  --line-strong: rgba(176, 202, 221, 0.2);
  --text: #eef5f7;
  --muted: #82909e;
  --faint: #596776;
  --mint: #89f5d4;
  --mint-bright: #b9ffe9;
  --blue: #8dc8ff;
  --coral: #ff9a87;
  --mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace;
  --sans: 'Manrope', Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; color: var(--text); font-family: var(--sans); background: radial-gradient(ellipse at 48% 0%, rgba(28, 49, 56, 0.23), transparent 43%), var(--bg); }
button, input { font: inherit; }
button { color: inherit; }
.app-shell { width: min(1240px, calc(100% - 52px)); margin: auto; }
.topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); font-size: 13px; font-weight: 800; letter-spacing: .13em; }
.wordmark-light { color: #9cabb6; font-weight: 500; }
.mark { width: 22px; height: 22px; position: relative; display: inline-flex; align-items: center; justify-content: center; }
.mark i { position: absolute; width: 7px; height: 7px; border: 1px solid var(--mint); border-radius: 50%; box-shadow: 0 0 10px rgba(137,245,212,.35); }
.mark i:nth-child(1) { transform: translate(-5px, -4px); }
.mark i:nth-child(2) { transform: translate(5px, -4px); }
.mark i:nth-child(3) { transform: translate(0, 5px); }
.topbar-right { display: flex; align-items: center; gap: 22px; }
.local-chip, .version { color: var(--muted); font: 10px var(--mono); letter-spacing: .08em; }
.local-chip { display: inline-flex; align-items: center; gap: 8px; color: #bed8ce; padding: 8px 10px; border: 1px solid rgba(137,245,212,.2); border-radius: 30px; background: rgba(137,245,212,.045); }
.status-dot { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px rgba(137,245,212,.65); }
main { padding: 54px 0 30px; }
.intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
.eyebrow { margin: 0; color: #8ca09f; font: 10px var(--mono); letter-spacing: .16em; }
.eyebrow span { color: #49605e; padding: 0 5px; }
h1 { margin: 14px 0 12px; font-size: clamp(38px, 5vw, 62px); letter-spacing: -.055em; line-height: .99; font-weight: 600; }
h1 em { color: var(--mint); font-style: normal; }
.intro-copy { max-width: 570px; margin: 0; color: #97a5b1; font-size: 14px; line-height: 1.75; }
.truth-card { min-width: 258px; display: flex; align-items: flex-start; gap: 12px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 12px; background: rgba(14, 21, 28, .7); }
.truth-icon { color: var(--mint); font-size: 22px; line-height: 1; }
.truth-card strong { font: 10px var(--mono); letter-spacing: .08em; color: #b6f6de; }
.truth-card p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.safety-note { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 19px; padding: 13px 15px; border: 1px solid rgba(141,200,255,.18); border-radius: 9px; background: linear-gradient(95deg, rgba(141,200,255,.065), rgba(141,200,255,.02)); color: #a8bac8; font-size: 11px; line-height: 1.7; }
.safety-note p { margin: 0; }
.safety-note strong { color: #deebf1; }
.safety-mark { display: grid; place-items: center; flex: 0 0 16px; height: 16px; margin-top: 1px; border: 1px solid rgba(141,200,255,.6); border-radius: 50%; color: var(--blue); font: 10px var(--mono); }
.stream-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.stream-card { min-width: 0; padding: 20px 21px 15px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(155deg, rgba(18, 27, 35, .96), rgba(12, 18, 24, .98)); box-shadow: 0 18px 60px rgba(0,0,0,.16); }
.card-topline, .stream-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stream-index, .stream-kind { color: #92a0ad; font: 9px var(--mono); letter-spacing: .1em; }
.stream-index b { color: #52626c; font-weight: 400; }
.stream-kind { display: inline-flex; align-items: center; gap: 7px; color: #71818f; font-size: 8px; }
.mind-dot { background: var(--mint); }
.heart-dot { background: var(--coral); box-shadow: 0 0 10px rgba(255,154,135,.55); }
.stream-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 19px; }
.stream-heading h2 { margin: 0; font-size: 20px; letter-spacing: -.035em; font-weight: 600; }
.stream-heading p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.stream-glyph { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 50%; font-size: 19px; }
.mind-glyph { color: var(--mint); box-shadow: inset 0 0 20px rgba(137,245,212,.06), 0 0 20px rgba(137,245,212,.06); }
.heart-glyph { color: var(--coral); font-size: 24px; }
.canvas-wrap { position: relative; height: 220px; margin-top: 11px; overflow: hidden; border: 1px solid rgba(164,195,205,.08); border-radius: 8px; background: radial-gradient(ellipse at 52% 42%, rgba(53,108,96,.12), transparent 50%), #0a1015; }
.heart-wrap { background: radial-gradient(ellipse at 48% 50%, rgba(127,66,66,.105), transparent 53%), #0a1015; }
canvas { display: block; width: 100%; height: 100%; }
.canvas-label { position: absolute; bottom: 9px; color: #586772; font: 8px var(--mono); letter-spacing: .12em; pointer-events: none; }
.canvas-label-left { left: 11px; }
.canvas-label-right { right: 11px; }
.stream-foot { padding-top: 12px; color: #98a8b4; font: 9px var(--mono); }
.stream-foot > span { display: inline-flex; align-items: center; gap: 7px; }
.legend-line { display: inline-block; width: 14px; height: 2px; border-radius: 3px; }
.mind-line { background: var(--mint); box-shadow: 0 0 6px var(--mint); }
.heart-line { background: var(--coral); box-shadow: 0 0 6px var(--coral); }
.analog-bridge { margin: 20px 0; padding: 19px 22px 17px; border: 1px solid var(--line); border-radius: 12px; background: radial-gradient(ellipse at 50% -70%, rgba(137,245,212,.085), transparent 72%), #0e141b; }
.bridge-cap { display: flex; align-items: center; justify-content: center; gap: 15px; color: #859991; font: 9px var(--mono); letter-spacing: .18em; }
.bridge-wire { flex: 1; max-width: 220px; height: 1px; background: linear-gradient(90deg, transparent, rgba(137,245,212,.32)); }
.bridge-wire:last-child { transform: rotate(180deg); }
.bridge-main { display: grid; grid-template-columns: minmax(108px, 1fr) minmax(300px, 600px) minmax(108px, 1fr); align-items: center; gap: 16px; margin-top: 17px; }
.bridge-end { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: #b7dccc; font: 10px var(--mono); line-height: 1.6; text-align: right; }
.bridge-end small { color: #64747c; font: 8px var(--mono); }
.right-end { justify-content: flex-start; text-align: left; color: #e0b5aa; }
.endpoint { display: grid; place-items: center; flex: 0 0 33px; height: 33px; border: 1px solid rgba(137,245,212,.28); border-radius: 50%; color: var(--mint); font-size: 17px; box-shadow: 0 0 18px rgba(137,245,212,.08); }
.heart-end { border-color: rgba(255,154,135,.27); color: var(--coral); font-size: 22px; }
.bridge-core { padding: 13px 16px 12px; border: 1px solid rgba(137,245,212,.21); border-radius: 10px; background: rgba(137,245,212,.027); box-shadow: 0 0 34px rgba(137,245,212,.035); }
.core-top { display: flex; align-items: center; justify-content: space-between; }
.core-top .eyebrow { font-size: 8px; }
.core-top h2 { margin: 5px 0 0; color: var(--mint); font: 500 25px var(--mono); letter-spacing: -.05em; }
.core-top h2 span { color: var(--text); }
.model-chip, .stub-tag { padding: 5px 7px; border: 1px solid rgba(137,245,212,.17); border-radius: 4px; color: #81bdaa; font: 8px var(--mono); letter-spacing: .08em; }
.range-label { display: flex; justify-content: space-between; gap: 10px; margin-top: 13px; color: #c7d3d8; font-size: 10px; }
.range-hint { color: #85968f; font: 9px var(--mono); }
.range { appearance: none; width: 100%; height: 3px; margin: 11px 0 6px; border-radius: 5px; background: linear-gradient(90deg, rgba(137,245,212,.6), rgba(137,245,212,.14)); cursor: pointer; }
.range::-webkit-slider-thumb { appearance: none; width: 13px; height: 13px; border: 2px solid #10171c; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 1px rgba(137,245,212,.65), 0 0 13px rgba(137,245,212,.48); }
.range::-moz-range-thumb { width: 10px; height: 10px; border: 2px solid #10171c; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 1px rgba(137,245,212,.65), 0 0 13px rgba(137,245,212,.48); }
.range:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
.range-scale { display: flex; justify-content: space-between; color: #596b6a; font: 8px var(--mono); letter-spacing: .04em; }
.lag-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 12px; margin-top: 12px; color: #c7d3d8; font-size: 10px; }
.lag-row output { color: #d8e3e6; font: 10px var(--mono); }
.lag-range { grid-column: 1 / -1; margin: 8px 0 4px; }
.lag-range::-webkit-slider-thumb { background: var(--blue); box-shadow: 0 0 0 1px rgba(141,200,255,.6), 0 0 13px rgba(141,200,255,.4); }
.lag-range::-moz-range-thumb { background: var(--blue); box-shadow: 0 0 0 1px rgba(141,200,255,.6), 0 0 13px rgba(141,200,255,.4); }
.bridge-explainer { margin: 5px 0 0; color: #84938e; font-size: 9px; line-height: 1.6; }
.clock-confound { display: grid; grid-template-columns: 28px 1fr minmax(170px, 230px); align-items: center; gap: 11px; margin: 16px auto 0; padding: 12px 14px; max-width: 880px; border: 1px solid rgba(141,200,255,.13); border-radius: 8px; background: rgba(141,200,255,.03); }
.confound-icon { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(141,200,255,.28); border-radius: 50%; color: var(--blue); font-size: 15px; }
.clock-confound strong { color: #c9d9e4; font-size: 10px; font-weight: 600; }
.clock-confound p { margin: 4px 0 0; color: #83939f; font-size: 9px; line-height: 1.55; }
.compact-control { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1px 8px; color: #b2c2cc; font-size: 9px; }
.compact-control output { color: var(--blue); font: 10px var(--mono); }
.compact-control .range { grid-column: 1 / -1; margin: 9px 0 3px; background: linear-gradient(90deg, rgba(141,200,255,.55), rgba(141,200,255,.12)); }
.compact-control .range::-webkit-slider-thumb { background: var(--blue); box-shadow: 0 0 0 1px rgba(141,200,255,.65), 0 0 13px rgba(141,200,255,.4); }
.compact-control .range::-moz-range-thumb { background: var(--blue); box-shadow: 0 0 0 1px rgba(141,200,255,.65), 0 0 13px rgba(141,200,255,.4); }
.parameter-panel, .validation-panel { margin-top: 20px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 12px; background: rgba(14,20,27,.78); }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.section-heading h2 { margin: 6px 0 0; font-size: 17px; letter-spacing: -.025em; font-weight: 600; }
.quiet-button { padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: 6px; background: transparent; color: #aebbc2; font-size: 10px; cursor: pointer; }
.quiet-button:hover { border-color: rgba(137,245,212,.38); color: var(--mint); }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 18px; }
.setting { min-height: 100px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 12px; padding: 12px; border: 1px solid rgba(176,202,221,.08); border-radius: 8px; background: rgba(255,255,255,.012); }
.setting-title { color: #bdc8ce; font-size: 10px; }
.setting-output { color: var(--text); font: 12px var(--mono); }
.setting-output small { color: #82909e; font-size: 9px; }
.setting .range { grid-column: 1/-1; margin: 8px 0 1px; }
.setting-note { grid-column: 1/-1; color: #697984; font-size: 9px; line-height: 1.5; }
.heart-range { background: linear-gradient(90deg, rgba(255,154,135,.6), rgba(255,154,135,.13)); }
.heart-range::-webkit-slider-thumb { background: var(--coral); box-shadow: 0 0 0 1px rgba(255,154,135,.65), 0 0 13px rgba(255,154,135,.42); }
.heart-range::-moz-range-thumb { background: var(--coral); box-shadow: 0 0 0 1px rgba(255,154,135,.65), 0 0 13px rgba(255,154,135,.42); }
.connector-setting { grid-template-columns: 1fr auto; align-content: center; }
.stub-tag { border-color: rgba(255,197,116,.21); color: #c7a675; }
.validation-panel { margin-top: 15px; }
.validation-heading { align-items: flex-start; }
.section-copy { max-width: 720px; margin: 8px 0 0; color: #83919d; font-size: 10px; line-height: 1.65; }
.primary-button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid rgba(137,245,212,.32); border-radius: 7px; background: rgba(137,245,212,.09); color: #c8fbe8; font-size: 10px; white-space: nowrap; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.primary-button:hover { background: rgba(137,245,212,.15); transform: translateY(-1px); }
.primary-button:disabled { opacity: .55; cursor: progress; transform: none; }
.robust-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin: 17px 0; }
.robust-controls label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 7px; padding: 9px 10px; border: 1px solid rgba(176,202,221,.08); border-radius: 7px; color: #abb9c2; font-size: 9px; }
.robust-controls output { color: #dce7e8; font: 10px var(--mono); }
.robust-controls .range { grid-column: 1/-1; margin: 7px 0 2px; }
.bench-result { padding: 13px 14px 10px; border: 1px solid rgba(176,202,221,.09); border-radius: 8px; background: rgba(6,10,14,.42); }
.bench-status { display: flex; align-items: center; gap: 8px; color: #8f9ca4; font: 9px var(--mono); }
.bench-status .status-dot { width: 5px; height: 5px; background: #8ba6a0; box-shadow: none; }
.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 13px; }
.metric { display: flex; flex-direction: column; gap: 5px; padding: 11px; border: 1px solid rgba(176,202,221,.07); border-radius: 6px; }
.metric > span { color: #71818b; font: 8px var(--mono); letter-spacing: .08em; }
.metric strong { color: var(--mint); font: 500 20px var(--mono); }
.metric small { color: #6e7b84; font-size: 8px; }
.bench-footnote { margin: 10px 0 0; color: #71808c; font-size: 9px; line-height: 1.6; }
.validation-method { margin-top: 13px; color: #82919d; font-size: 9px; line-height: 1.65; }
.validation-method summary { width: fit-content; color: #a8bbc4; cursor: pointer; }
.validation-method p { max-width: 940px; margin: 9px 0 0; }
.footer-note { display: flex; justify-content: space-between; gap: 20px; padding: 23px 2px 5px; color: #55636d; font: 8px var(--mono); letter-spacing: .12em; }

@media (max-width: 760px) {
  .app-shell { width: min(100% - 30px, 600px); }
  .topbar { height: 65px; }
  .version { display: none; }
  main { padding-top: 35px; }
  .intro { align-items: flex-start; flex-direction: column; gap: 19px; }
  .truth-card { min-width: 0; width: 100%; }
  .stream-grid { grid-template-columns: 1fr; }
  .canvas-wrap { height: 205px; }
  .bridge-main { grid-template-columns: 1fr 1fr; gap: 9px; }
  .bridge-core { grid-column: 1/-1; grid-row: 1; }
  .bridge-end { justify-content: flex-start; text-align: left; }
  .right-end { justify-content: flex-end; text-align: right; }
  .clock-confound { grid-template-columns: 28px 1fr; }
  .compact-control { grid-column: 1/-1; padding: 0 2px; margin-top: 6px; }
  .settings-grid { grid-template-columns: 1fr; }
  .setting { min-height: 88px; }
  .robust-controls { grid-template-columns: 1fr 1fr; }
  .footer-note { flex-direction: column; gap: 7px; }
}
@media (max-width: 440px) {
  .app-shell { width: calc(100% - 24px); }
  .topbar-right { gap: 0; }
  .local-chip { font-size: 8px; }
  .intro-copy { font-size: 12px; }
  .stream-card { padding: 16px 14px 13px; }
  .stream-kind { font-size: 7px; }
  .stream-index { font-size: 8px; }
  .stream-foot { font-size: 8px; }
  .analog-bridge, .parameter-panel, .validation-panel { padding: 16px 13px; }
  .bridge-cap { font-size: 7px; letter-spacing: .1em; }
  .bridge-main { grid-template-columns: 1fr 1fr; }
  .bridge-end { font-size: 8px; }
  .bridge-end small { font-size: 7px; }
  .bridge-core { padding: 12px; }
  .range-hint { font-size: 8px; }
  .validation-heading { flex-direction: column; }
  .robust-controls { gap: 7px; }
  .robust-controls label { font-size: 8px; padding: 8px; }
  .metrics-grid { gap: 6px; }
  .metric { padding: 8px; }
  .metric > span { font-size: 7px; }
  .metric strong { font-size: 17px; }
  .metric small { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}


/* Living-score performance layer: original abstract field, not copied from a reference image. */
.score-stage { margin: 18px 0 20px; padding: 20px; border: 1px solid rgba(137,245,212,.17); border-radius: 13px; background: radial-gradient(ellipse at 36% 10%, rgba(79,153,142,.12), transparent 52%), linear-gradient(145deg, #101a20, #0b1117 70%); box-shadow: 0 22px 70px rgba(0,0,0,.18); }
.score-stage-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 14px; }
.score-stage-top h2 { margin: 6px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -.035em; }
.score-live-tag { display: inline-flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid rgba(137,245,212,.16); border-radius: 20px; color: #9bc7b8; font: 8px var(--mono); letter-spacing: .08em; }
.score-live-tag .status-dot { width: 5px; height: 5px; }
.score-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(245px, .8fr); gap: 14px; }
.score-visual { position: relative; min-width: 0; height: 292px; overflow: hidden; border: 1px solid rgba(164,195,205,.1); border-radius: 9px; background: #091117; }
.score-visual canvas { display: block; width: 100%; height: 100%; }
.score-readouts { position: absolute; inset: auto 10px 9px; display: flex; justify-content: space-between; pointer-events: none; color: #768a92; font: 8px var(--mono); letter-spacing: .1em; }
.score-readouts output { margin-left: 5px; color: #d1f7e9; letter-spacing: 0; }
.mapping-key { display: flex; flex-direction: column; gap: 9px; padding: 14px; border: 1px solid rgba(176,202,221,.1); border-radius: 9px; background: rgba(7,13,18,.5); }
.mapping-key > .eyebrow { font-size: 8px; line-height: 1.6; }
.mapping-item { padding: 10px 0; border-top: 1px solid rgba(176,202,221,.075); }
.mapping-source { display: block; color: var(--mint); font: 8px var(--mono); letter-spacing: .11em; }
.mapping-source.heart-map { color: var(--coral); }
.mapping-source.thread-map { color: var(--blue); }
.mapping-item strong { display: block; margin-top: 5px; color: #d5e1e3; font-size: 10px; font-weight: 600; }
.mapping-item small { display: block; margin-top: 4px; color: #7c8c95; font: 8px var(--mono); line-height: 1.5; }
.mapping-item output { color: #effaf6; }
.mapping-note { margin: auto 0 0; color: #73828c; font-size: 9px; line-height: 1.6; }
.timing-thread { display: grid; grid-template-columns: auto minmax(90px,1fr) auto auto; align-items: center; gap: 12px; margin: 13px 2px 0; }
.thread-end-label, .thread-status { color: #84958e; font: 8px var(--mono); letter-spacing: .08em; white-space: nowrap; }
.thread-track { position: relative; height: 14px; display: flex; align-items: center; }
.thread-track::before { content: ''; position: absolute; inset: 50% 0 auto; height: 1px; background: linear-gradient(90deg, rgba(255,154,135,.52), rgba(137,245,212,.65)); opacity: .7; }
.thread-track::after { content: ''; position: absolute; inset: 2px 0; background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(141,200,255,.1) 9px 10px); }
.thread-dot { position: absolute; z-index: 1; left: 0; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: #b9ffe9; box-shadow: 0 0 12px #89f5d4; transform: translateY(-50%); transition: left .08s linear, opacity .2s ease; }
.thread-status { color: #a9c8bb; font-size: 7px; }
.future-layers { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 11px; border-top: 1px solid rgba(176,202,221,.075); color: #74838d; font: 8px var(--mono); }
.future-layers > span { margin-right: 2px; color: #81938f; letter-spacing: .08em; }
.future-layers b { padding: 4px 7px; border: 1px dashed rgba(176,202,221,.17); border-radius: 20px; color: #97a5ab; font-weight: 400; }
.future-layers small { color: #697882; font-size: 8px; }
.settings-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.metrics-grid { grid-template-columns: repeat(3, 1fr); }
.mapping-control-panel { margin-bottom: 8px; }
.mapping-control-results { margin-top: 15px; padding: 13px 14px 10px; border: 1px solid rgba(176,202,221,.09); border-radius: 8px; background: rgba(6,10,14,.42); }
.mapping-control-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 13px; }
.mapping-control-arm { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 11px; border: 1px solid rgba(176,202,221,.075); border-radius: 6px; }
.mapping-control-arm span { color: #84968f; font: 8px var(--mono); letter-spacing: .03em; }
.mapping-control-arm strong { color: var(--mint); font: 11px var(--mono); font-weight: 400; }
.mapping-control-arm small { color: #77858e; font: 8px var(--mono); }

@media (max-width: 980px) {
  .settings-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .score-stage { padding: 15px; }
  .score-layout { grid-template-columns: 1fr; }
  .score-visual { height: 250px; }
  .mapping-key { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 13px; }
  .mapping-key > .eyebrow, .mapping-note { grid-column: 1/-1; }
  .mapping-item { padding: 8px 0; }
  .timing-thread { grid-template-columns: auto 1fr auto; gap: 8px; }
  .thread-status { grid-column: 1/-1; text-align: center; }
  .settings-grid { grid-template-columns: 1fr 1fr; }
  .mapping-control-metrics { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  .score-stage { padding: 13px 11px; }
  .score-stage-top { flex-direction: column; gap: 10px; }
  .score-visual { height: 215px; }
  .mapping-key { grid-template-columns: 1fr; }
  .mapping-key > .eyebrow, .mapping-note { grid-column: auto; }
  .settings-grid { grid-template-columns: 1fr; }
  .future-layers { gap: 6px; }
  .future-layers small { flex-basis: 100%; }
}