:root {
  color-scheme: light;
  font: 16px/1.5 system-ui, sans-serif;
  color: #192a27;
  background: #f1f5f1;
  --green: #16584a;
  --line: #d5e0da;
  --muted: #4c625c;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
.masthead {
  display: flex; justify-content: space-between; align-items: center; gap: .7rem;
  padding: .9rem max(1rem, calc((100vw - 1400px) / 2)); background: #fff; border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .7rem; }
.brand span, .kicker { font-size: .7rem; font-weight: 800; letter-spacing: .1em; color: var(--green); }
h1, h2, h3, p, dl { margin: 0; }
h1 { font-size: 1.2rem; line-height: 1.2; }
.pill { border-radius: 2rem; background: #e3f4e9; color: #164b43; padding: .35rem .65rem; font-weight: 650; font-size: .75rem; text-align: center; }
main { max-width: 1440px; margin: auto; padding: 1.4rem clamp(.7rem, 2vw, 1.5rem); }
.intro { margin-bottom: 1.35rem; }
.intro h2 { font-size: clamp(1.65rem, 4vw, 2.65rem); letter-spacing: -.045em; line-height: 1.16; margin: .25rem 0 .45rem; }
.intro > p:not(.kicker) { max-width: 76ch; }
.notice { color: #633e17; background: #fff3dc; padding: .55rem .75rem; border-radius: .5rem; margin-top: .7rem; font-size: .86rem; }
.workspace { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(280px, 1fr); align-items: start; gap: 1rem; }
.view-column { display: grid; gap: 1rem; min-width: 0; }
.card { border-radius: .8rem; border: 1px solid var(--line); background: #fff; overflow: hidden; }
.section-head { padding: .75rem .9rem; display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.section-head h2, .side-head h2 { font-size: 1.1rem; }
.meta, .hint, .step p, .qc { color: var(--muted); font-size: .84rem; }
.toolbar { background: #f9fbfa; display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; padding: .55rem .7rem; border-top: 1px solid var(--line); }
.tools { display: flex; flex-wrap: wrap; gap: .35rem; margin-left: auto; }
button, input, select { font: inherit; }
button, select, input[type=number] {
  min-height: 38px; border-radius: .42rem; border: 1px solid #a9bbb1; color: #173e35; background: #fff; padding: .35rem .58rem;
}
button { cursor: pointer; font-size: .82rem; font-weight: 650; }
button:hover:not(:disabled) { background: #e8f6ee; }
button[aria-pressed=true], .primary, .primary:hover:not(:disabled) { background: var(--green); color: white; }
button:disabled, input:disabled, select:disabled { opacity: .55; cursor: default; }
:focus-visible { outline: 3px solid #007e72; outline-offset: 2px; }
.viewport { height: clamp(290px, 53vh, 630px); position: relative; background: #111c1c; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; cursor: crosshair; }
canvas[data-tool=pan] { cursor: grab; }
canvas[data-dragging=true] { cursor: grabbing; }
#empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .45rem; color: #e9f5ee; pointer-events: none; padding: .75rem; text-align: center; }
#empty span { color: #b2c9c1; font-size: .85rem; }
.viewer .hint, .status, .results > .hint { padding: .55rem .85rem; }
.status { min-height: 2.25rem; color: #194d41; font-size: .84rem; padding-top: 0; }
.status[data-error=true] { color: #943c1b; font-weight: 650; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 0 .8rem; }
.metrics div { background: #eff6f1; padding: .65rem; border-radius: .5rem; }
.metrics dt { font-size: .78rem; font-weight: 650; }
.metrics dd { margin: 0; color: #124d3f; font-variant-numeric: tabular-nums; font-size: clamp(1.05rem, 3vw, 1.7rem); font-weight: 720; overflow-wrap: anywhere; }
.metrics small { color: var(--muted); font-size: .73rem; }
.metrics .metric-caption { color: var(--muted); font-size: .78rem; font-weight: 400; }
.metric-caption p { margin-top: .25rem; }
.qc { padding: 0 .85rem .75rem 2rem; margin: 0; }
.qc:empty { display: none; }
.side-head { padding: .1rem .25rem .55rem; }
.step { padding: .75rem .85rem; margin-bottom: .6rem; }
.step h3 { font-size: .95rem; display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.step h3 span { display: grid; place-items: center; border-radius: 50%; width: 1.45rem; height: 1.45rem; background: #e5f4e9; color: var(--green); flex-shrink: 0; }
.step .qc { margin-top: .45rem; padding: 0 0 0 1.15rem; }
.step .qc li + li { margin-top: .25rem; }
.step label:not(.check) { display: block; margin: .55rem 0 .2rem; font-size: .82rem; font-weight: 650; }
.step input[type=file], .step input[type=number], .step select { width: 100%; font-size: .85rem; }
.step input[type=file]::file-selector-button { min-height: 36px; background: #e5f4e9; color: #164b43; border: 1px solid #a9bbb1; border-radius: .4rem; margin-right: .35rem; }
.check { display: flex; align-items: start; gap: .4rem; font-size: .83rem; margin: .45rem 0; }
.check input { margin-top: .3rem; accent-color: var(--green); }
.action-row { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.step .primary, #calibrate { margin-top: .4rem; }
footer { padding: 1rem; text-align: center; color: var(--muted); font-size: .8rem; }
@media (max-width: 800px) {
  .workspace { display: flex; flex-direction: column; }
  .workspace > * { width: 100%; }
  .viewport { height: clamp(290px, 50vh, 470px); }
  .tools { margin-left: 0; }
  button { min-height: 42px; }
}