/* Mold Flow Studio: shared styles for the landing page (index.html) and the tool (app.html) */
/* Layout: a molding bench. Part and builder on the left, twin 3D plates in the middle, process settings and findings on the right. */
:root {
  --bg: #e9edef;
  --surface: #f8fafa;
  --ink: #121a21;
  --muted: #5a6771;
  --line: #d2d9dd;
  --accent: #1d4f7a;
  --accent-soft: #dbe6ef;
  --warn: #a8551a;
  --crit: #b3261e;
  --good: #2f6b3c;
  --empty: #cfd6da;
  --line-strong: #9aa7b0;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1317; --surface: #151c21; --ink: #e5ebee; --muted: #8f9ca5; --line: #29333a;
    --accent: #8bb8e3; --accent-soft: #1d2c39; --warn: #e3965b; --crit: #ef7b72; --good: #7fc28d; --empty: #3a464e; --line-strong: #4a5862;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1317; --surface: #151c21; --ink: #e5ebee; --muted: #8f9ca5; --line: #29333a;
  --accent: #8bb8e3; --accent-soft: #1d2c39; --warn: #e3965b; --crit: #ef7b72; --good: #7fc28d; --empty: #3a464e; --line-strong: #4a5862;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--body); margin: 0; }
.wrap { max-width: 1320px; margin: 0 auto; padding-inline: 20px; padding-block: 28px 56px; display: grid; gap: 24px; }
h1, h2, h3 { font-family: var(--display); font-stretch: 85%; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.02; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 700; font-stretch: 100%; }
.eyebrow { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
p { margin: 0; }
.lead { max-width: 74ch; color: var(--muted); font-size: 16px; }
header { display: grid; gap: 12px; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.stat { padding: 14px 16px; display: grid; gap: 4px; border-left: 1px solid var(--line); min-width: 0; }
.stat:first-child { border-left: 0; }
.stat b { font: 600 24px/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: 13px; }

.bench { display: grid; grid-template-columns: 270px minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.col { display: grid; gap: 14px; min-width: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 10px; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 5px 10px; font: 500 13px var(--body); cursor: pointer; }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.chip:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.field { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; font-size: 13.5px; }
.field label { color: var(--muted); }
.field output { font: 500 13px var(--mono); font-variant-numeric: tabular-nums; }
.field input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); margin: 0; }
.field select { grid-column: 2; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 13.5px; color: var(--muted); }
.checks label { display: inline-flex; gap: 6px; align-items: center; }
.checks input { accent-color: var(--accent); }
.hint { font-size: 13px; color: var(--muted); }
.warnline { font-size: 13px; color: var(--warn); }

.twin { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.plate { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: grid; gap: 8px; min-width: 0; }
.plate header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plate canvas { width: 100%; max-width: 100%; aspect-ratio: 1; display: block; cursor: grab; border-radius: 4px; touch-action: none; }
.plate canvas.dragging { cursor: grabbing; }
.plate .meta { font: 13px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.tag { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 4px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); }
.tag.sim { background: transparent; border: 1px solid var(--line); color: var(--muted); }

.controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.controls input[type=range] { flex: 1 1 140px; accent-color: var(--accent); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.seg button { font: 500 13px var(--body); border: 0; background: transparent; color: var(--muted); padding: 6px 10px; cursor: pointer; border-left: 1px solid var(--line); }
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.btn { font: 600 14px var(--body); border-radius: 7px; border: 1px solid var(--accent); background: var(--accent); color: var(--surface); padding: 8px 14px; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: progress; }
.toggle { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--muted); }
.toggle input { accent-color: var(--accent); }
#tlabel { font: 13px var(--mono); font-variant-numeric: tabular-nums; min-width: 9ch; }
.legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 12px var(--mono); color: var(--muted); }
.ramp { height: 10px; width: 160px; border-radius: 3px; }
.key { display: inline-flex; align-items: center; gap: 5px; }
.sw { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }

.flags { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.flags li { display: grid; grid-template-columns: 8px 1fr; gap: 10px; font-size: 14px; line-height: 1.4; }
.flags li::before { content: ""; width: 8px; border-radius: 2px; background: var(--good); }
.flags li.warn::before { background: var(--warn); }
.flags li.crit::before { background: var(--crit); }
.cmp { width: 100%; border-collapse: collapse; font-size: 13px; }
.cmp th, .cmp td { text-align: right; padding: 5px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.cmp th:first-child, .cmp td:first-child { text-align: left; color: var(--muted); font-weight: 400; }
.cmp td { font-family: var(--mono); }
.cmp thead th { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
progress { width: 100%; accent-color: var(--accent); height: 8px; }
.rank { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.rank li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; font-size: 13.5px; }
.rank .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--mono); background: var(--ink); color: var(--surface); }
.rank .r { font: 12px var(--mono); color: var(--muted); }

.win { display: grid; grid-template-columns: 34px repeat(7, minmax(0, 1fr)); gap: 2px; font: 11px var(--mono); color: var(--muted); }
.win .h { display: grid; place-items: center; padding: 2px 0; font-variant-numeric: tabular-nums; }
.win button { border: 0; border-radius: 3px; min-height: 26px; padding: 0; font: 600 10px var(--mono); cursor: pointer; color: #fff; background: var(--empty); }
.win button.cur { outline: 2px solid var(--ink); outline-offset: -2px; }
.win button.short { background: var(--crit); }
.win button.pending { background: var(--empty); color: transparent; }

.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.how .card p { color: var(--muted); font-size: 14px; }
.limits ul { margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 4px; max-width: 90ch; }

@media (max-width: 1180px) { .bench { grid-template-columns: 260px minmax(0, 1fr); } .bench > .col:last-child { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; } }
@media (max-width: 860px) { .bench { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(3) { border-left: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--line); } .how { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .twin { grid-template-columns: minmax(0, 1fr); } }

/* ---------- explanation layer ---------- */
[hidden] { display: none !important; }
.hero { gap: 14px; }
.hero .lead strong { color: var(--ink); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
a.btn { text-decoration: none; display: inline-block; }
.mono { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--surface); font: 600 12px/1 var(--mono); flex: none; }
.card > h3 { display: flex; align-items: center; gap: 8px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.steps li { display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.steps li div { display: grid; gap: 2px; min-width: 0; }
.steps li span:not(.num) { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
details.card > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary { flex-wrap: wrap; row-gap: 2px; }
details.card > summary h3 { white-space: nowrap; }
details.card > summary h3::before { content: "▸"; display: inline-block; width: 1em; color: var(--accent); transition: transform .15s; }
details.card[open] > summary h3::before { transform: rotate(90deg); }
details.card > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.field small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; line-height: 1.35; }

.pipe { display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1.15fr) 14px minmax(0, 1.25fr); align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px; gap: 4px; }
.stage { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 7px; min-width: 0; transition: background .2s; }
.stage > div { display: grid; gap: 2px; min-width: 0; }
.stage b { font-size: 13px; }
.stage .st-text { font: 12px/1.35 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stage .dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex: none; background: var(--empty); }
.stage.run { background: var(--accent-soft); }
.stage.run .dot { background: var(--accent); animation: pulse 1s ease-in-out infinite; }
.stage.done .dot { background: var(--good); }
.stage.warn .dot { background: var(--warn); }
.stage.bad .dot { background: var(--crit); }
.stage .bar { display: block; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; visibility: hidden; }
.stage.run .bar { visibility: visible; }
.stage .bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.arrow { align-self: center; height: 2px; background: var(--line); position: relative; }
.arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: var(--line); border-right: 0; }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .stage.run .dot { animation: none; } }

figure.plate { margin: 0; }
figure.plate figcaption { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.plate { position: relative; }
.tip { position: fixed; z-index: 20; pointer-events: none; background: var(--ink); color: var(--surface); border-radius: 7px; padding: 8px 10px; font: 12.5px/1.45 var(--mono); font-variant-numeric: tabular-nums; max-width: 260px; box-shadow: 0 4px 18px rgba(0,0,0,.25); }
.tip b { font-family: var(--body); font-weight: 600; }
.explain { font-size: 14px; color: var(--ink); max-width: 80ch; }
.controls.quiet { background: transparent; border-style: dashed; }

.stats-wrap { display: grid; gap: 10px; }
.how { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.lanes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; }
.lane { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 10px; align-content: start; }
.lane.live { border-color: var(--accent); }
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: f; }
.flow li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 10px; counter-increment: f; }
.flow li::before { content: counter(f); grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--mono); border: 1px solid var(--accent); color: var(--accent); }
.flow li span { color: var(--muted); font-size: 14px; }
.glossary dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 20px; }
.glossary dt { font-weight: 600; font-size: 14px; }
.glossary dd { margin: 0; color: var(--muted); font-size: 13.5px; }

.tour { position: fixed; z-index: 30; width: min(340px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); border: 1px solid var(--accent); border-radius: 10px; padding: 14px; display: grid; gap: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.28); }
.tour p { font-size: 14px; color: var(--muted); }
.tour-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.tour-target { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 10px; position: relative; z-index: 10; }

@media (max-width: 1180px) { .pipe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pipe .arrow { display: none; } }
@media (max-width: 860px) { .steps, .lanes { grid-template-columns: minmax(0, 1fr); } }

/* ---------- redesign layer: pitch first, answer first, fewer things on screen at once ---------- */
:root { --hot: #9b2c6e; --hot-soft: #f4e3ed; --on-hot: #ffffff; }   /* brand: raspberry, a hue the fill-time scale never uses */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hot: #e58fbf; --hot-soft: #3a1a2c; --on-hot: #14100e; } }
:root[data-theme="dark"] { --hot: #e58fbf; --hot-soft: #3a1a2c; --on-hot: #14100e; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.wrap { gap: clamp(36px, 5vw, 64px); padding-block: 18px 72px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.brand { font: 800 17px/1 var(--display); font-stretch: 85%; letter-spacing: .01em; display: flex; align-items: center; gap: 10px; }
.brand i { width: 13px; height: 13px; border-radius: 3px; background: var(--hot); transform: rotate(45deg); display: inline-block; }
.pill { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; }
.topbar nav { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: center; }
.topbar nav a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.topbar nav a:hover { color: var(--ink); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.pitch { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.pitch h1 { font-size: clamp(40px, 7.2vw, 92px); line-height: .92; letter-spacing: -.025em; font-stretch: 80%; }
.pitch h1 em { font-style: normal; color: var(--hot); }
.pitch .lead { font-size: clamp(16px, 1.5vw, 19px); color: var(--ink); max-width: 56ch; }
.pitch .lead span { color: var(--muted); }
.pitch-copy { display: grid; gap: 20px; min-width: 0; }
.btn.hot { background: var(--hot); border-color: var(--hot); color: var(--on-hot); }
.btn.big { padding: 12px 20px; font-size: 16px; }
.race { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 6px 20px; display: grid; min-width: 0; }
.race > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); }
.race > div:first-child { border-top: 0; }
.race b { font: 700 clamp(26px, 3.4vw, 44px)/1 var(--display); font-stretch: 82%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.race span { font-weight: 600; }
.race small { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
.race .ai b, .race .ai span { color: var(--hot); }
.race .old b { color: var(--muted); }
#h-x { font: 600 13px var(--mono); color: var(--hot); }

.gains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.gains div { padding: 16px 20px 4px 0; display: grid; gap: 6px; align-content: start; min-width: 0; }
.gains div + div { border-left: 1px solid var(--line); padding-left: 20px; }
.gains b { font: 700 20px/1.1 var(--display); font-stretch: 85%; }
.gains span { color: var(--muted); font-size: 14.5px; }
.gains i { font: 600 12px var(--mono); color: var(--hot); font-style: normal; letter-spacing: .06em; }

.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.sec-head h2, .band h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.015em; line-height: 1; }
.sec-head p { color: var(--muted); max-width: 60ch; }
.studio { display: grid; gap: 16px; }
.try { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.try .label { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.try button { font: 600 14px var(--body); border: 1.5px solid var(--hot); background: var(--hot-soft); color: var(--ink); border-radius: 999px; padding: 8px 14px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.try button:hover { background: var(--hot); color: var(--on-hot); }
.try button b { font: 600 12px var(--mono); }

.bench { grid-template-columns: 292px minmax(0, 1fr) 340px; gap: 16px; }
.card { border-radius: 12px; padding: 16px; }
.card > h3, .rail-step > h3 { font-size: 16px; }
.num { background: var(--ink); width: 24px; height: 24px; font-size: 13px; }
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.chip { border-radius: 8px; padding: 9px 10px; text-align: left; font-weight: 600; line-height: 1.2; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.sub { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 10px; }
details.sub > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--accent); list-style: none; display: flex; justify-content: space-between; gap: 8px; }
details.sub > summary::-webkit-details-marker { display: none; }
details.sub > summary::after { content: "+"; font: 600 16px var(--mono); }
details.sub[open] > summary::after { content: "–"; }
.gatecard p { font-size: 14px; }
.gatecard .star { color: var(--hot); font-weight: 700; }

.verdict { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-left: 8px solid var(--good); border-radius: 12px; padding: 14px 16px; }
.verdict.warn { border-left-color: var(--warn); }
.verdict.crit { border-left-color: var(--crit); }
.verdict .mark { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 700 20px/1 var(--display); background: var(--good); color: var(--surface); }
.verdict.warn .mark { background: var(--warn); }
.verdict.crit .mark { background: var(--crit); }
.verdict h3 { font-size: clamp(18px, 2vw, 24px); font-weight: 800; font-stretch: 88%; line-height: 1.1; }
.verdict p { color: var(--muted); font-size: 14px; }
.verdict > div { display: grid; gap: 3px; min-width: 0; }
@media (max-width: 560px) { .verdict { grid-template-columns: auto minmax(0, 1fr); } .verdict .btn { grid-column: 1 / -1; } }
.pipe { border-radius: 12px; }
.plate { border-radius: 12px; }
.plate.primary { border-color: var(--hot); }
.plate.primary .tag { background: var(--hot); color: var(--on-hot); }
.canvas-wrap { position: relative; }
.grab { position: absolute; left: 8px; bottom: 8px; font: 500 12px var(--body); background: var(--ink); color: var(--surface); border-radius: 999px; padding: 5px 10px; pointer-events: none; opacity: .9; }
.controls { border-radius: 12px; }
.seg button { padding: 8px 12px; font-size: 14px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
details.more > summary { cursor: pointer; font-size: 13.5px; color: var(--muted); font-weight: 500; }
details.more { display: grid; gap: 10px; }
details.more[open] > summary { margin-bottom: 10px; }

.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.tabs button { border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--muted); font: 600 13px/1.15 var(--body); padding: 11px 4px; cursor: pointer; display: grid; gap: 4px; justify-items: center; }
.tabs button:first-child { border-left: 0; }
.tabs button i { font: 600 11px var(--mono); font-style: normal; color: var(--muted); }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--surface); }
.tabs button[aria-selected="true"] i { color: var(--surface); opacity: .7; }
.tabs button:focus-visible { outline-offset: -3px; }
.flags li { font-size: 15px; grid-template-columns: 6px 1fr; }
.flags { gap: 12px; }
#col-results .card > h3 .num { display: none; }

.band { display: grid; gap: 18px; }
.stats { border-radius: 12px; }
.stat b { font: 800 clamp(28px, 3.6vw, 46px)/1 var(--display); font-stretch: 82%; letter-spacing: -.02em; }
.stat { padding: 18px; }
.road { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); counter-reset: r; }
.road li { counter-increment: r; padding: 14px 18px 0 0; display: grid; gap: 6px; align-content: start; min-width: 0; }
.road li + li { border-left: 1px solid var(--line); padding-left: 18px; }
.road li::before { content: "0" counter(r); font: 600 12px var(--mono); color: var(--hot); letter-spacing: .06em; }
.road b { font: 700 18px/1.15 var(--display); font-stretch: 85%; }
.road span { color: var(--muted); font-size: 14px; }
details.fold { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
details.fold > summary { cursor: pointer; font: 700 16px var(--display); display: flex; justify-content: space-between; gap: 10px; list-style: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "+"; font: 600 18px var(--mono); color: var(--muted); }
details.fold[open] > summary::after { content: "–"; }
details.fold[open] > summary { margin-bottom: 12px; }
details.fold ul { margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 6px; max-width: 90ch; }
details.fold dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 20px; }
details.fold dt { font-weight: 600; font-size: 14px; } details.fold dd { margin: 0; color: var(--muted); font-size: 13.5px; }
.foot { border-top: 1px solid var(--line); padding-top: 16px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; }

@media (max-width: 1180px) { .bench { grid-template-columns: 280px minmax(0, 1fr); } .bench > .col:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .pitch { grid-template-columns: minmax(0, 1fr); } .road { grid-template-columns: 1fr 1fr; } .road li:nth-child(3) { border-left: 0; padding-left: 0; } .road li:nth-child(n+3) { margin-top: 14px; } }
@media (max-width: 860px) { .bench { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .gains { grid-template-columns: 1fr; } .gains div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } .lanes { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .road { grid-template-columns: 1fr; } .road li + li { border-left: 0; padding-left: 0; margin-top: 14px; } .tabs button { font-size: 12px; } }
/* ---------- m6 first screen ---------- */
.btn.ink { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.btn.ghost { border-color: var(--line-strong, #9aa7b0); color: var(--ink); }
.linkbtn { background: none; border: 0; padding: 4px 2px; font: 600 14px var(--body); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkbtn:hover { color: var(--ink); }
.pitch { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); align-items: center; }
.pitch h1 { font-size: clamp(44px, 6.4vw, 84px); }
.pitch .lead strong { color: var(--ink); font-weight: 600; }
.pitch .lead #h-parts { color: inherit; }
.hero-actions { align-items: center; }
.kcards { display: grid; gap: 12px; min-width: 0; }
.kcard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; display: grid; gap: 9px; min-width: 0; }
.kcard small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.kcard small a { color: var(--accent); }
.kbig { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kbig b { font: 800 clamp(38px, 4.4vw, 56px)/.95 var(--display); font-stretch: 78%; letter-spacing: -.03em; color: var(--hot); white-space: nowrap; }
.kbig span { font: 700 17px/1.15 var(--display); font-stretch: 85%; max-width: 16ch; }
.tlane { display: grid; grid-template-columns: minmax(0, 160px) minmax(40px, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px; font-weight: 600; }
.tlane b { font: 800 19px/1 var(--display); font-stretch: 82%; text-align: right; white-space: nowrap; min-width: 4.6em; }
.tlane .track { height: 11px; border-radius: 6px; background: var(--bg); overflow: hidden; display: block; }
.tlane .track i { display: block; height: 100%; border-radius: 6px; background: var(--muted); }
.tlane.ai, .tlane.ai b { color: var(--hot); } .tlane.ai .track i { background: var(--hot); }
.tlane.ph .track i { background: var(--accent); }
.tlane.old b { color: var(--muted); }
.cost { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: baseline; }
.cost b { font: 800 clamp(26px, 3vw, 34px)/1 var(--display); font-stretch: 80%; white-space: nowrap; }
.cost .us { color: var(--hot); } .cost .them { color: var(--muted); }
.cost span { font-size: 13.5px; }
.proofstrip { display: grid; grid-template-columns: 1.25fr 1fr 1fr; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; margin-top: calc(-1 * clamp(18px, 2.5vw, 40px)); }
.proofstrip > div { padding: 14px 16px; border-left: 1px solid var(--line); display: grid; gap: 4px; align-content: start; min-width: 0; }
.proofstrip > div:first-child { border-left: 0; }
.proofstrip > div > b { font: 800 38px/1 var(--display); font-stretch: 82%; }
.proofstrip .how > b { font: 700 18px var(--display); font-stretch: 85%; }
.stats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.proofstrip span { font-size: 14px; color: var(--muted); line-height: 1.4; }
.proofstrip span strong { color: var(--ink); font-weight: 600; }
.proofstrip ol { margin: 4px 0 0; padding-left: 18px; color: var(--muted); font-size: 13.5px; display: grid; gap: 2px; }
.limitline { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; color: var(--muted); border: 1px dashed var(--line-strong, #9aa7b0); border-radius: 10px; padding: 10px 12px; margin-top: calc(-1 * clamp(24px, 3.5vw, 52px)); }
.limitline strong { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .pitch { grid-template-columns: minmax(0, 1fr); } .proofstrip { grid-template-columns: minmax(0, 1fr); } .proofstrip > div { border-left: 0; border-top: 1px solid var(--line); } .proofstrip > div:first-child { border-top: 0; } }
@media (max-width: 520px) { .tlane { grid-template-columns: minmax(0, 1fr) auto; } .tlane .track { display: none; } .limitline { grid-template-columns: minmax(0, 1fr); } }
.verdict .vq { font: 600 11.5px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.verdict p { color: var(--ink); font-size: 15px; } .verdict p span { color: var(--muted); }
.vbadges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.vb { display: inline-flex; align-items: flex-start; gap: 6px; border-radius: 8px; padding: 5px 9px; font: 600 12.5px/1.35 var(--body); background: var(--bg); color: var(--ink); }
.vb i { flex: none; font-style: normal; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font: 800 10px/1 var(--display); color: #fff; background: var(--ink); margin-top: 1px; }
.vb.in { background: color-mix(in srgb, var(--good) 14%, var(--surface)); color: var(--good); } .vb.in i { background: var(--good); }
.vb.out { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: var(--warn); } .vb.out i { background: var(--warn); }
.vb.ai.low { background: var(--hot-soft); color: var(--hot); } .vb.ai.low i { background: var(--hot); }
.insights .ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; background: var(--bg); border-radius: 8px; padding: 6px 9px; margin: 7px 0 6px; font: 12px var(--mono); color: var(--muted); }
.insights .ba b { display: block; font: 700 15px var(--display); font-stretch: 85%; color: var(--ink); margin: 0; }
.insights .ba .good b, .insights .ba .good { color: var(--good); }
/* ---------- m6 studio: one large view, side by side only in the "AI vs physics" tab ---------- */
.twin { position: relative; }
.viewbar { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.viewsw button[aria-pressed="true"][data-v="pred"] { background: var(--hot); color: var(--on-hot); }
.matchb { font: 600 13px var(--body); border-radius: 999px; padding: 6px 12px; background: var(--bg); color: var(--muted); }
.matchb.run { background: var(--accent-soft); color: var(--accent); }
.matchb.done { background: color-mix(in srgb, var(--good) 14%, var(--surface)); color: var(--good); }
.matchb.warn { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: var(--warn); }
.matchb.bad { background: color-mix(in srgb, var(--crit) 14%, var(--surface)); color: var(--crit); }
.plate canvas { aspect-ratio: 1000 / 720; }
.twin.single { grid-template-columns: minmax(0, 1fr); }
.twin.single.show-pred #plate-sim, .twin.single.show-sim #plate-pred { display: none; }
.twin.single .plate { border-color: var(--line); }
.twin.single figcaption, .twin.single .plate header .tag { display: none; }
.twin.single .plate header { justify-content: flex-end; }
.twin:not(.single) .viewsw { display: none; }
.stage b, .stage .st-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pipe { padding: 6px; }
.stage { padding: 5px 8px; }
.sechd { font: 600 11.5px var(--mono) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.sechd .hint { text-transform: none; letter-spacing: 0; font: 500 12px var(--body); }
.flags li { font-size: 14px; }
.flags li::before { background: var(--line-strong); }   /* neutral facts are grey; only warnings and problems get colour */
.flags li.warn::before { background: var(--warn); } .flags li.crit::before { background: var(--crit); }
/* ---------- m6 part card: three sources, drop zone, sample files, assembly bodies ---------- */
.srcsw { display: grid; grid-template-columns: repeat(3, 1fr); }
.srcsw button { text-align: center; }
.srcsw button[aria-selected="true"] { background: var(--ink); color: var(--surface); }
.srcpane { display: grid; gap: 10px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.drop { border: 2px dashed var(--line-strong); border-radius: 10px; padding: 16px 12px; display: grid; gap: 4px; justify-items: center; text-align: center; cursor: pointer; background: var(--bg); }
.drop b { font: 700 16px var(--display); font-stretch: 90%; }
.drop span { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.drop.over, .drop:hover { border-color: var(--hot); }
#step:focus-visible + .samples, .drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.samples { display: grid; gap: 6px; }
.samplebtns { display: flex; flex-wrap: wrap; gap: 6px; }
.samplebtns button { font: 600 12.5px var(--body); border: 1px solid var(--line-strong); border-radius: 7px; padding: 5px 8px; background: var(--surface); color: var(--ink); cursor: pointer; }
.samplebtns button:hover { border-color: var(--hot); }
.samplebtns button.x { border-style: dashed; color: var(--muted); }
.bodies { display: grid; gap: 6px; }
.bodies .bh { font: 600 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.body { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 9px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 5px 7px; background: var(--surface); text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; }
.body canvas { width: 58px; height: 42px; border-radius: 6px; background: var(--bg); }
.body b { font-size: 13.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.body small { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; }
.body small.ok { color: var(--good); } .body small.warn { color: var(--warn); } .body small.crit { color: var(--crit); }
.body[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.body.rej { border-style: dashed; background: transparent; cursor: default; }
.body.rej canvas { opacity: .5; }
.partline { display: grid; gap: 2px; border-top: 1px solid var(--line); padding-top: 8px; }
.matline { font: 12px/1.5 var(--mono); color: var(--muted); } .matline b { color: var(--ink); font-weight: 500; }
/* ---------- m6 gate card, session line ---------- */
.gatecard h3 { flex-wrap: wrap; } .gface { font: 500 12.5px var(--body); margin-left: auto; }
.coords { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; background: var(--surface); }
.coords div { padding: 6px 9px; border-left: 1px solid var(--line); display: grid; min-width: 0; }
.coords div:first-child { border-left: 0; }
.coords span { font: 600 11px var(--mono); color: var(--muted); }
.coords b { font: 500 15px var(--mono); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.gbtns, .sesbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.session { display: flex; gap: 10px 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 14px; }
.session .hint { font-size: 13.5px; }
/* ---------- m6 first-run strip, pricing, report ---------- */
.firstrun { display: flex; gap: 10px 18px; align-items: center; flex-wrap: wrap; background: var(--accent-soft); border-radius: 12px; padding: 8px 12px; font-size: 14px; }
.firstrun ol { margin: 0; padding: 0; list-style: none; display: flex; gap: 6px 18px; flex-wrap: wrap; flex: 1; }
.firstrun li span { color: var(--hot); font-weight: 700; margin-right: 5px; }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 6px; align-content: start; }
.plan.pro { border: 2px solid var(--hot); }
.plan h3 { font-size: 18px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.plan .price { font: 800 34px/1 var(--display); font-stretch: 80%; } .plan .price small { font: 500 14px var(--body); color: var(--muted); }
.plan .who { font-size: 13px; color: var(--muted); }
.plan ul { margin: 4px 0 0; padding-left: 18px; font-size: 14px; display: grid; gap: 2px; }
.ptable-wrap { overflow-x: auto; }
.ptable { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-width: 560px; }
.ptable th, .ptable td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ptable th { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--bg); }
.ptable td:last-child { color: var(--muted); font-size: 13px; }
.ptable td.n { font-family: var(--mono); white-space: nowrap; }
.ptable tr.us td { background: var(--hot-soft); font-weight: 600; color: var(--ink); }
.ptable tr.us td.n { font-weight: 500; }
.pitchline { font: 800 clamp(20px, 2.4vw, 28px)/1.15 var(--display); font-stretch: 85%; } .pitchline em { font-style: normal; color: var(--hot); }
.srcs { font: 12px/1.6 var(--mono); color: var(--muted); display: flex; flex-wrap: wrap; gap: 2px 16px; }
.srcs a { color: var(--accent); }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .plans { grid-template-columns: minmax(0, 1fr); } }
.report { display: none; }
@media print {
  @page { size: A4; margin: 14mm; }
  body { background: #fff; color: #111; }
  body > *:not(.report) { display: none !important; }
  .report { display: grid !important; gap: 10px; font: 11pt/1.4 var(--body); color: #111; }
  .report h1 { font: 800 20pt/1.1 var(--display); font-stretch: 85%; margin: 0; }
  .report .meta { color: #555; font-size: 9.5pt; }
  .report .verd { border-left: 6px solid #2f6b3c; padding: 6px 10px; background: #f3f6f4; }
  .report .verd.warn { border-color: #a8551a; } .report .verd.crit { border-color: #b3261e; }
  .report .verd b { font: 800 15pt var(--display); font-stretch: 88%; display: block; }
  .report .grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; align-items: start; }
  .report img { width: 100%; border: 1px solid #ccc; border-radius: 4px; }
  .report table { width: 100%; border-collapse: collapse; font-size: 10pt; }
  .report td { padding: 3px 0; border-bottom: 1px solid #ddd; } .report td:first-child { color: #555; } .report td:last-child { text-align: right; font-family: var(--mono); }
  .report h2 { font: 700 12pt var(--display); margin: 6px 0 0; }
  .report ul { margin: 0; padding-left: 16px; }
  .report .badges span { display: inline-block; border: 1px solid #999; border-radius: 4px; padding: 2px 6px; margin: 0 6px 4px 0; font-size: 9.5pt; }
  .report .foot { border-top: 1px solid #ccc; padding-top: 6px; color: #555; font-size: 8.5pt; }
}
@media (max-width: 860px) { #col-view { order: -1; } }   /* phones: the answer and the part first, inputs after */
@media (max-width: 600px) { .firstrun ol { flex: 1 1 100%; flex-direction: column; gap: 2px; } .firstrun > b { flex: 1 1 100%; } }
.vb .rfix { display: inline-block; margin: 4px 0 0; font: 600 12px var(--body); border: 1px solid currentColor; border-radius: 6px; padding: 3px 8px; background: var(--surface); color: inherit; cursor: pointer; }
.vb .rfix:hover { background: var(--warn); color: #fff; border-color: var(--warn); }
.vnote { font: 11.5px var(--body); color: var(--muted); align-self: center; }
.sw-short { background: repeating-linear-gradient(135deg, #ef7b72 0 2px, #2a3339 2px 5px); }
.optlist { gap: 6px; }
.optlist .optrow { grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "n main num" "n badges badges"; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; gap: 4px 8px; background: var(--surface); }
.optlist .optrow:hover, .optlist .optrow:focus-visible { border-color: var(--accent); outline: none; }
.optlist .optrow.on { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.optrow .n { grid-area: n; } .optrow .optmain { grid-area: main; display: grid; min-width: 0; } .optrow .optnum { grid-area: num; display: grid; justify-items: end; }
.optrow .optbadges { grid-area: badges; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.optrow b { font-size: 13.5px; } .optrow small { font-size: 11.5px; color: var(--muted); } .optrow b.bad { color: var(--crit); }
.optrow .vb { padding: 2px 7px; font-size: 11.5px; } .optrow .linkbtn { font-size: 12px; padding: 0; }
.coords label { padding: 5px 8px; border-left: 1px solid var(--line); display: grid; min-width: 0; }
.coords label:first-child { border-left: 0; }
.coords input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 500 15px var(--mono); padding: 1px 0; -moz-appearance: textfield; }
.coords input::-webkit-inner-spin-button { opacity: .4; }
.coords input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }
/* ---------- hero video slot, cards row, big play button ---------- */
.pitch { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.herovid { margin: 0; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--ink); position: relative; min-width: 0; }
.herovid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vidslot { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; padding: 20px; color: var(--surface);
  background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--hot) 55%, var(--ink)), var(--ink)); border: 2px dashed color-mix(in srgb, var(--surface) 35%, transparent); border-radius: 16px; }
.vidslot .vplay { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: color-mix(in srgb, var(--surface) 18%, transparent); padding-left: 4px; }
.vidslot b { font: 800 22px var(--display); font-stretch: 85%; }
.vidslot > span:not(.vplay) { font-size: 13px; max-width: 46ch; opacity: .85; }
.vidslot .btn.ink { background: var(--surface); color: var(--ink); border-color: var(--surface); }
.kcards-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); margin-top: calc(-1 * clamp(18px, 2.5vw, 40px)); }
.playbig { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; padding: 10px 18px 10px 12px;
  background: var(--hot); color: var(--on-hot); font: 700 15px var(--body); cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.playbig i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--on-hot) 22%, transparent); font-style: normal; font-size: 13px; padding-left: 2px; }
.playbig:hover { filter: brightness(1.08); } .playbig:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.twin:not(.single) .playbig { display: none; }
@media (max-width: 900px) { .kcards-row { grid-template-columns: minmax(0, 1fr); } .pitch { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .vidslot > span:not(.vplay) { display: none; } .vidslot b { font-size: 18px; } .vidslot .vplay { width: 52px; height: 52px; } }
@media (max-width: 520px) { .playbig { right: 10px; bottom: 10px; padding: 8px 14px 8px 8px; font-size: 14px; } }
.limitline p { margin: 0; } .limitline > div { display: grid; gap: 4px; }
.fulllimits summary { cursor: pointer; font-weight: 600; color: var(--accent); font-size: 13.5px; }
.fulllimits ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
#heroanim { width: 100%; height: 100%; display: block; background: var(--surface); }
.herovid:has(#heroanim:not([hidden])) { background: var(--surface); border: 1px solid var(--line); }
.herochip { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px 6px 6px; font: 600 13.5px var(--body); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.herochip i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--good); color: #fff; font-style: normal; font-size: 13px; }
.herochip span { color: var(--muted); font-weight: 500; }
.herovid .htag { position: absolute; right: 14px; top: 12px; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.meshbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 40%); gap: 6px 14px; align-items: center; background: var(--accent-soft); border-radius: 12px; padding: 10px 14px; }
.meshbar > div { display: grid; } .meshbar b { font-size: 15px; } .meshbar span#meshtxt { font: 13px var(--mono); color: var(--accent); }
.meshbar .mbar { height: 8px; border-radius: 4px; background: var(--surface); overflow: hidden; display: block; } .meshbar .mbar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.meshbar small { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; }
.pcompare > summary { cursor: pointer; font-weight: 600; color: var(--accent); margin-bottom: 10px; }
.pcompare[open] { display: grid; gap: 10px; }
.session.big { background: var(--hot-soft); border-radius: 12px; padding: 8px 12px; }
.session.big #ses-n { color: var(--hot); font-size: 16px; }
.insights { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.insights li { border: 1px solid var(--line, rgba(127,127,127,.3)); border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 0.92em; line-height: 1.4; }
.insights li:hover, .insights li:focus { border-color: var(--accent); outline: none; }
.insights li.on { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.insights li b { display: block; font-weight: 600; margin-bottom: 2px; }
.insights li .lc { display: inline-block; margin-left: 6px; font-size: 0.85em; color: var(--warn, #b7791f); font-weight: 600; }
.insights li.none { cursor: default; border-style: dashed; }
.ins-head { margin-top: 16px; }
/* ---------- the tool page's compact header ---------- */
.tbar { display: flex; align-items: center; justify-content: space-between; gap: 8px 18px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.tbar .brand { text-decoration: none; color: var(--ink); }
.tbar .tnote { font-size: 13px; color: var(--muted); } .tbar .tnote a, .tbar nav a { color: var(--accent); }
.tbar nav { display: flex; gap: 6px 16px; align-items: center; flex-wrap: wrap; font-size: 14px; font-weight: 500; }
.tbar nav a { text-decoration: none; }
.wrap.tool { gap: 18px; padding-block: 14px 48px; }
.heroloop { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--surface); }
.toolh { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.015em; line-height: 1; }

.plate canvas { background: #151c21; }   /* the 3D view keeps its dark studio look in both page themes */
.herovid:has(.heroloop:not([hidden])) { background: #151c21; border-color: #29333a; }
@media (max-width: 520px) { .grab { display: none; } }   /* the Play button needs the corner on phones */

/* ---------- the tool on one screen: step rail | step panel | 3D view (always visible) ---------- */
.one-studio .sec-head { align-items: center; }
.tophead-r { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.one { display: grid; grid-template-columns: 210px minmax(0, 360px) minmax(0, 1fr); gap: 14px; align-items: start; transition: grid-template-columns .25s; }
.rail { display: grid; gap: 4px; position: sticky; top: 12px; }
.rstep { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 9px; text-align: left; border: 1px solid transparent; border-radius: 10px; background: transparent; padding: 8px 9px; cursor: pointer; color: var(--ink); font: inherit; }
.rstep .rn { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--mono); border: 1px solid var(--line-strong); color: var(--muted); background: var(--surface); }
.rstep b { font-size: 14px; } .rstep .rs { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.rstep.done .rn { background: var(--good); color: #fff; border-color: var(--good); font-size: 0; } .rstep.done .rn::before { content: "✓"; font-size: 12px; }
.rstep.on { background: var(--surface); border-color: var(--hot); box-shadow: inset 4px 0 0 var(--hot); } .rstep.on .rn { background: var(--hot); color: var(--on-hot); border-color: var(--hot); font-size: 12px; } .rstep.on .rn::before { content: none; }
.rstep:hover { background: var(--surface); } .rstep:focus-visible, .collapse:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.collapse { margin-top: 8px; display: flex; gap: 8px; align-items: center; border: 1px dashed var(--line-strong); border-radius: 10px; background: transparent; padding: 7px 10px; font: 600 13px var(--body); color: var(--muted); cursor: pointer; }
.collapse span { font-size: 16px; }
.panel { display: grid; gap: 12px; min-width: 0; }
.pstep { display: grid; gap: 12px; }
.ph { font-size: 20px; font-weight: 800; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.pnav { display: flex; justify-content: space-between; gap: 8px; }
.one #col-view { position: sticky; top: 12px; }
.mats { display: grid; gap: 6px; } .matrow { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; background: var(--bg); font-size: 13.5px; }
.matrow.on { border: 2px solid var(--ink); background: var(--surface); } .matrow.soon { color: var(--muted); border-style: dashed; }
.matrow .chip { font: 600 11.5px var(--body); border-radius: 999px; padding: 2px 8px; background: var(--bg); } .matrow .chip.ok { background: color-mix(in srgb, var(--good) 14%, var(--surface)); color: var(--good); }
.presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.presets button { display: grid; gap: 2px; text-align: left; border: 1px solid var(--line-strong); border-radius: 9px; padding: 7px 9px; background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.presets button b { font-size: 13px; } .presets button span { font: 11px var(--mono); color: var(--muted); } .presets button:hover { border-color: var(--hot); }
.one .tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* collapsed: the rail becomes numbers only, the panel tucks away, the view takes the room */
.one.collapsed { grid-template-columns: 52px 0 minmax(0, 1fr); }
.one.collapsed .panel { display: none; }
.one.collapsed .rstep { grid-template-columns: 28px; padding: 6px; justify-content: center; } .one.collapsed .rstep b, .one.collapsed .rstep .rs, .one.collapsed .collapse b { display: none; }
.one.collapsed .collapse { justify-content: center; padding: 7px 4px; }
@media (max-width: 1100px) { .one { grid-template-columns: 180px minmax(0, 320px) minmax(0, 1fr); } }
@media (max-width: 860px) {
  .one, .one.collapsed { grid-template-columns: minmax(0, 1fr); }
  .one #col-view { order: -1; position: static; }
  .rail { position: static; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .rstep { flex: none; grid-template-columns: 24px auto; padding: 6px 9px; } .rstep .rs { display: none; } .rstep .rn { width: 22px; height: 22px; grid-row: auto; }
  .collapse { display: none; } .one.collapsed .panel { display: grid; }
}
.one > .rail { grid-column: 1; } .one > .panel { grid-column: 2; } .one > #col-view { grid-column: 3; }
@media (max-width: 860px) { .one > .rail, .one > .panel, .one > #col-view { grid-column: 1; } }
/* before the user reaches Result: the view previews the fill, the verdict and the checks wait for step 4 */
.prevnote { display: none; justify-self: start; border: 1px dashed var(--line-strong); background: var(--surface); border-radius: 999px; padding: 6px 12px; font: 500 13px var(--body); color: var(--muted); cursor: pointer; }
.prevnote b { color: var(--hot); }
.one.preview .prevnote { display: inline-block; }
.one.preview #verdict, .one.preview #matchb, .one.preview #pipe, .one.preview .plate header .meta { display: none; }
.rstep.stale .rn { position: relative; } .rstep.stale .rn::after { content: ""; position: absolute; right: -3px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--warn); border: 2px solid var(--bg); }
.rstep:not(.done):not(.on) b { color: var(--muted); }
.chip.previewing { border: 1.5px dashed var(--hot); background: transparent; color: var(--ink); position: relative; }
.chip.previewing::after { content: "preview"; font: 600 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--hot); margin-left: 6px; }