* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
h1,h2,h3,p { margin: 0; }
button { font: inherit; cursor: pointer; }
.tool-shell { margin: auto; }
.button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.heading-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.heading-row h2 { font-size: 22px; }
.button.button-secondary { transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, filter 150ms ease; }
.button.button-secondary:is(:hover,:focus-visible):not(:disabled) { color: var(--brooklyn-blue); background: var(--brooklyn-blue-soft); border-color: #a7cef5; }
.button.button-secondary:active:not(:disabled) { color: var(--brooklyn-blue-dark); border-color: var(--brooklyn-blue); filter: brightness(.92); }
.mode-switch { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: var(--segment-inset); margin-bottom: 28px; }
.mode-switch button { color: var(--brooklyn-ink); background: transparent; padding: 0; border-radius: 9px; font-size: 16px; font-weight: 700; }
.test-stage { display: flex; justify-content: center; align-items: center; gap: 110px; min-height: 320px; padding: 28px; border: 1px solid rgba(24,54,95,.24); border-radius: 14px; background: var(--brooklyn-paper-strong); user-select: none; touch-action: none; }
.test-stage:focus-visible { outline: 3px solid rgba(52,120,201,.4); outline-offset: 3px; }
.target-area { flex: 0 0 236px; }
.cue-target { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 236px; height: 236px; color: var(--brooklyn-ink); background: var(--brooklyn-blue-soft); border: 3px solid var(--brooklyn-blue); border-radius: 50%; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }
.cue-target[data-state="held"] { color: var(--brooklyn-paper-strong); background: var(--brooklyn-blue); border-color: var(--brooklyn-blue-dark); }
.cue-target[data-state="observing"] { background: color-mix(in srgb,var(--brooklyn-yellow) 22%,var(--brooklyn-paper-strong)); border-color: var(--brooklyn-yellow); }
.cue-target[data-state="release"] { background: color-mix(in srgb,var(--brooklyn-green) 14%,var(--brooklyn-paper-strong)); border-color: var(--brooklyn-green); }
.cue-target strong { font-size: 26px; line-height: 1.4; }
.cue-target > span:last-child { font-size: 16px; margin-top: 6px; }
#mouseIcon { width: 60px; height: 86px; fill: none; stroke: currentColor; stroke-width: 2.5; margin-bottom: 12px; }
.input-feedback { position:relative; display: grid; grid-template-rows: 28px 80px; row-gap: 8px; align-content: center; justify-items: center; flex: 0 0 280px; width: 280px; block-size: 264px; text-align: center; }
.keyboard-input-notice { position:absolute; bottom:4px; inset-inline:0; font-size:13px; line-height:22px; color:var(--brooklyn-ink-soft); }
.keyboard-input-notice:empty { display:none; }
.input-feedback h3 { grid-row: 1; align-self: center; font-size: 18px; line-height: 28px; }
.input-feedback.is-waiting h3 { grid-row: 1 / -1; font-size: 22px; }
.observation-value { grid-row: 2; display: block; inline-size: 100%; block-size: 80px; font-size: 64px; line-height: 80px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.observation-value.is-numeric-result { font-size: 22px; }
.observation-value.is-state-result { font-size: 32px; }
.measurement-number { display: inline-block; margin-inline-end: 8px; font-size: 64px; line-height: 1; }
.progress-row { display: flex; align-items: center; gap: 20px; font-size: 14px; margin-top: 24px; }
.progress-row progress { flex: 1; min-width: 0; height: 12px; accent-color: var(--brooklyn-blue); }
.progress-row > span { flex-shrink: 0; }
.record-row { margin-top: 22px; }
.record-row h3 { font-size: 16px; margin-bottom: 12px; }
.record-strip { display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); gap: 4px; }
.record-cell { display: grid; grid-template-rows:16px 18px 18px; gap:2px; place-items: center; align-content: center; padding: 8px 1px; min-height: 76px; border: 1px solid rgba(24,54,95,.24); border-radius: 6px; text-align: center; overflow-wrap: anywhere; }
.record-cell small { color: var(--brooklyn-ink-soft); font-size: 12px; line-height: 1.25; }
.record-cell strong { font-size: 12px; line-height: 1.5; }
.record-cell .record-extra { font-size:12px; line-height:18px; font-weight:700; }
.record-legend { display:flex; flex-wrap:wrap; gap:8px 16px; margin:12px 0; font-size:13px; line-height:1.5; }
.record-legend span { display:inline-flex; align-items:center; gap:6px; }
.record-legend span::before { content:''; width:12px; height:12px; border:1px solid rgba(24,54,95,.24); border-radius:3px; background:var(--brooklyn-blue-soft); }
.record-legend .extra::before { background:var(--brooklyn-yellow); }
.record-legend .unknown::before { background:var(--brooklyn-disabled); }
.record-legend :is(.extra,.unknown) { background:transparent; }
.normal { background: var(--brooklyn-blue-soft); }
.extra { background: color-mix(in srgb,var(--brooklyn-yellow) 22%,white); }
.unknown { background: var(--brooklyn-disabled); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; border-top: 1px solid rgba(24,54,95,.2); padding-top: 22px; margin-top: 24px; }
.test-actions { justify-content: flex-end; }
.test-actions .button { flex: 0 0 auto; }
.stage-help { color: var(--brooklyn-ink-soft); font-size: 14px; line-height: 1.7; margin-top: 14px; }
.drag-area { position: relative; display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; height: 264px; padding: 28px 8px; max-width: 590px; }
.drag-track { position: relative; height: 6px; border-top: 3px dotted rgba(24,54,95,.3); }
.drag-fill { position: absolute; top: -3px; height: 6px; background: var(--brooklyn-blue); }
.drag-handle,.drag-end { position: absolute; top: -23px; width: 44px; height: 44px; border: 3px solid var(--brooklyn-ink); border-radius: 50%; transition: background-color 120ms ease, border-color 120ms ease; }
.drag-handle { left: 0; background: var(--brooklyn-blue-soft); border-color: var(--brooklyn-blue); cursor: grab; }
.drag-end { right: 0; background: var(--brooklyn-paper-strong); }
.drag-area[data-state="held"] .drag-handle { background: var(--brooklyn-blue); border-color: var(--brooklyn-blue-dark); cursor: grabbing; }
.drag-area[data-state="release"] .drag-handle,.drag-area[data-state="release"] .drag-end { background: color-mix(in srgb,var(--brooklyn-green) 14%,var(--brooklyn-paper-strong)); border-color: var(--brooklyn-green); }
.drag-area[data-state="observing"] .drag-handle { background: color-mix(in srgb,var(--brooklyn-yellow) 22%,var(--brooklyn-paper-strong)); border-color: var(--brooklyn-yellow); }
.drag-area p { display: flex; align-items: center; justify-content: center; height: 56px; flex: 0 0 56px; text-align: center; margin-top: 28px; font-size: 20px; line-height: 28px; color: var(--brooklyn-ink); }
.metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 24px; }
.metrics > div { display: grid; gap: 8px; padding: 16px; background: var(--brooklyn-paper-strong); border: 1px solid rgba(24,54,95,.24); border-radius: 12px; }
.metrics span { font-size: 14px; }
.metrics strong { font-size: 32px; }
.chart-heading { font-size: 16px; line-height: 1.5; margin-top: 30px; }
.distribution-row { display: grid; grid-template-columns: 130px minmax(0,1fr) 145px; gap: 20px; align-items: center; margin-top: 20px; }
.distribution-row > strong { text-align: right; font-size: 14px; }
.bar-track { height: 28px; background: var(--brooklyn-disabled); border-radius: 5px; }
.bar-fill { display: block; height: 100%; background: var(--brooklyn-blue); }
.bar-fill.extra { background: var(--brooklyn-yellow); }
.bar-fill { border-radius:inherit; transform-origin:left center; transition:transform 200ms cubic-bezier(.2,.8,.2,1); }
.distribution-row.is-emphasized .bar-fill { transform:scaleY(1.18); }
.record-cell { position:relative; transition:transform 200ms cubic-bezier(.2,.8,.2,1),border-color 200ms ease,box-shadow 200ms ease; }
.record-cell.is-emphasized { z-index:3; transform:scale(1.06); border-color:var(--brooklyn-ink); box-shadow:2px 2px 0 rgba(24,54,95,.12); }
.plot-bar { transform-origin:center bottom; transition:transform 200ms cubic-bezier(.2,.8,.2,1); }
.plot-column.is-emphasized { z-index:3; }
.plot-column.is-emphasized .plot-bar { transform:scale(1.2,1.025); }
[data-tooltip-title]:focus-visible { outline:2px solid var(--brooklyn-blue); outline-offset:3px; border-radius:6px; }
.result-tooltip { position:fixed; z-index:1100; display:grid; gap:6px; width:max-content; max-width:min(284px,calc(100vw - 32px)); padding:12px 16px; color:var(--brooklyn-ink); background:var(--brooklyn-paper); border:2px solid var(--brooklyn-ink); border-radius:12px; box-shadow:var(--brooklyn-shadow-small); font-size:13px; line-height:1.6; overflow-wrap:anywhere; pointer-events:none; animation:result-tooltip-in 120ms ease-out; }
.result-tooltip::after { content:''; position:absolute; left:var(--tip-x); bottom:-7px; width:12px; height:12px; background:var(--brooklyn-paper); border-right:2px solid var(--brooklyn-ink); border-bottom:2px solid var(--brooklyn-ink); transform:translateX(-50%) rotate(45deg); }
.result-tooltip[data-side="bottom"]::after { top:-7px; bottom:auto; transform:translateX(-50%) rotate(225deg); }
.result-tooltip-title { display:flex; align-items:center; gap:7px; background:transparent; color:var(--brooklyn-ink-soft); font-size:13px; font-weight:700; }
.result-tooltip-title::before { content:''; flex:0 0 8px; height:8px; border-radius:2px; background:var(--brooklyn-blue); }
.result-tooltip-title.extra::before { background:var(--brooklyn-yellow); }
.result-tooltip-title.unknown::before { background:var(--brooklyn-quiet); }
.result-tooltip-value { font-size:18px; line-height:1.4; font-variant-numeric:tabular-nums; }
.result-tooltip-detail { color:var(--brooklyn-ink-soft); }
@keyframes result-tooltip-in { from { opacity:0; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) { .plot-bar,.bar-fill,.record-cell { transition:none; } .result-tooltip { animation:none; } }

@media(max-width:860px) {
  .test-stage { gap: 40px; }
  .progress-row { flex-wrap: wrap; }
}
@media(max-width:720px) {
  .test-stage { flex-direction: column; padding: 24px 12px; gap: 24px; }
  .target-area,.input-feedback { flex-basis: auto; }
  .input-feedback { max-width: 100%; }
  .drag-area { width: 100%; flex: 0 0 264px; }
}
@media(max-width:600px) {
  .heading-row { gap: 12px; }
  .heading-row h2 { font-size: 21px; }
  .heading-row .button { padding-inline: 12px; }
  .mode-switch button { font-size: 14px; }
  .cue-target { width: 216px; height: 216px; }
  .observation-value { font-size: 48px; }
  .measurement-number { font-size: 48px; }
  .progress-row { gap: 12px; }
  .record-strip { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .actions .button { flex: 1 1 auto; }
  .actions.test-actions .button { flex: 0 0 auto; }
  .drag-area { width: 100%; height: 216px; flex-basis: 216px; padding: 28px 8px; }
  .metrics { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .metrics > div { padding: 12px; }
  .metrics strong { font-size: 26px; }
  .distribution-row { grid-template-columns: 95px minmax(0,1fr); gap: 10px; }
  .distribution-row > strong { grid-column: 2; text-align: left; }
}
@media(prefers-reduced-motion:reduce) { .cue-target,.drag-handle,.drag-end,.button.button-secondary { transition: none; } }

html { min-width: 320px; }
input,select,textarea { font: inherit; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.status-panel { text-align:center; }
.status-panel p { margin:12px 0 24px; }
.mobile-hint { display:none; margin-bottom:24px; }
.problem-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.problem-card { display:flex; flex-direction:column; gap:24px; }
.problem-card-main { display:flex; align-items:center; justify-content:center; gap:32px; width:100%; }
.problem-icon { flex-shrink:0; width:192px; height:192px; fill:none; stroke:var(--brooklyn-ink); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.problem-copy { flex:0 1 112px; display:grid; align-content:start; gap:12px; min-width:0; min-height:144px; }
.problem-card h2 { font-size:21px; }
.problem-symptoms { display:grid; gap:6px; margin:0; padding:0; list-style:none; color:var(--brooklyn-ink-soft); font-size:16px; line-height:28px; }
.problem-card .button { width:100%; }
@media(max-width:1000px) { .problem-card-main { gap:24px; } .problem-icon { width:160px; height:160px; } }
@media(max-width:800px) { .problem-card-main { gap:20px; } .problem-icon { width:144px; height:144px; } }
.mode-switch[data-segment-count="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
#feedbackKey { display:grid; place-items:center; height:86px; min-width:86px; margin-bottom:12px; font-size:42px; line-height:1.2; }
#feedbackKey.long-key-label { font-size:26px; white-space:pre-line; text-align:center; }
.key-options { margin-bottom:24px; }
#keySelectionLabel { margin-bottom:16px; font-size:16px; line-height:28px; }
.key-selection-help { color:var(--brooklyn-ink-soft); font-size:14px; font-weight:400; }
@media(max-width:600px) { .key-selection-help { display:block; } }
.record-details summary { display:flex; align-items:center; min-height:44px; font-weight:700; cursor:pointer; }
.keyboard-scroll { overflow:auto; padding:4px; margin-inline:-4px; }
.keyboard-diagram { display:grid; grid-template-columns:minmax(0,15fr) minmax(0,3fr) minmax(0,4fr); gap:16px; min-width:1040px; }
.keyboard-main,.keyboard-navigation,.numpad-diagram { display:grid; grid-template-rows:repeat(6,44px); gap:6px 4px; }
.keyboard-navigation { grid-template-columns:repeat(3,minmax(0,1fr)); }
.numpad-diagram { grid-template-columns:repeat(4,minmax(0,1fr)); }
.key-row { display:flex; gap:4px; min-width:0; }
.key-row > span { flex:1; }
.key-row > span.half-gap { flex:.5; }
.key-row > span.key-gap { flex:1.25; }
.keyboard-diagram button { min-height:44px; min-width:0; padding:3px; color:var(--brooklyn-ink); background:var(--brooklyn-paper-strong); border:1px solid rgba(24,54,95,.34); border-radius:7px; font-size:14px; line-height:17px; white-space:pre-line; cursor:pointer; transition:background-color 120ms ease,border-color 120ms ease; }
.keyboard-diagram button.compact-key { font-size:13px; }
.key-row button { flex:var(--key-units) 1 0; }
.keyboard-diagram button:is(:hover,:focus-visible) { background:var(--brooklyn-blue-soft); border-color:var(--brooklyn-blue); }
.keyboard-diagram button:active { background:var(--brooklyn-blue); color:var(--brooklyn-paper-strong); }
.keyboard-diagram button[aria-pressed="true"] { background:var(--brooklyn-blue-soft); border-color:var(--brooklyn-blue); font-weight:700; }
.keyboard-diagram button:focus-visible { outline:2px solid var(--brooklyn-blue); outline-offset:2px; }
.keyboard-help { margin-top:14px; color:var(--brooklyn-ink-soft); font-size:13px; line-height:1.7; }
@media(prefers-reduced-motion:reduce) { .keyboard-diagram button { transition:none; } }
.notice { margin:18px 0; padding:14px 16px; border:1px solid rgba(24,54,95,.27); border-radius:10px; line-height:1.7; }
.report-toolbar { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px; }
.report-card { margin-bottom:24px; }
.report-card h2 { font-size:22px; line-height:1.5; }
.keyboard-report-heading { display:flex; align-items:center; gap:20px; }
.keyboard-report-heading > div { min-width:0; }
.keyboard-report-heading p { margin-top:8px; color:var(--brooklyn-ink-soft); font-size:16px; line-height:1.75; }
.report-keycap { display:flex; align-items:center; justify-content:center; flex:0 0 auto; min-width:80px; min-height:80px; padding:12px; border:2px solid var(--brooklyn-ink); border-radius:12px; background:var(--brooklyn-blue-soft); color:var(--brooklyn-ink); box-shadow:var(--brooklyn-shadow-small); font-family:inherit; font-size:28px; font-weight:800; line-height:1.2; text-align:center; white-space:pre-line; }
@media(max-width:600px) { .keyboard-report-heading { gap:14px; } .keyboard-report-heading h2 { font-size:20px; } .report-keycap { min-width:68px; min-height:68px; padding:10px; font-size:24px; } }
.report-card h3 { font-size:16px; margin-top:30px; }
.report-card h3.chart-heading { margin-top:28px; }
.report-context { font-size:14px; color:var(--brooklyn-ink-soft); margin-bottom:12px; }
.stage-help { color:var(--brooklyn-ink-soft); font-size:14px; line-height:1.7; margin-top:18px; }
.sequence-grid { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:4px; margin-top:16px; }
.axis-chart { display:grid; grid-template-columns:48px minmax(0,1fr); grid-template-rows:28px 220px 44px; margin-top:16px; padding-right:20px; font-size:13px; }
.chart-unit { grid-column:1 / -1; color:var(--brooklyn-ink-soft); }
.chart-y-axis { position:relative; border-right:1px solid var(--brooklyn-ink); }
.chart-y-tick { position:absolute; inset-inline-end:9px; transform:translateY(50%); font-variant-numeric:tabular-nums; }
.chart-plot { position:relative; display:grid; border-bottom:1px solid var(--brooklyn-ink); min-width:0; }
.chart-gridline { position:absolute; inset-inline:0; border-top:1px solid rgba(24,54,95,.14); pointer-events:none; }
.chart-target { position:absolute; inset-inline:0; z-index:2; border-top:2px dashed var(--brooklyn-ink); pointer-events:none; }
.plot-column { position:relative; min-width:0; text-align:center; }
.plot-bar { position:absolute; bottom:0; left:22%; width:56%; max-width:64px; margin-inline:auto; right:22%; background:var(--brooklyn-blue); border-radius:3px 3px 0 0; }
.plot-bar.extra { background:var(--brooklyn-yellow); }
.plot-bar.unknown { height:0; background:transparent; color:var(--brooklyn-quiet); font-size:18px; font-weight:700; line-height:0; }
.plot-value { position:absolute; left:50%; transform:translateX(-50%); padding-bottom:5px; white-space:nowrap; line-height:20px; font-size:13px; font-variant-numeric:tabular-nums; }
.chart-x-tick { position:absolute; top:100%; left:50%; transform:translateX(-50%); padding-top:8px; white-space:nowrap; line-height:20px; }
.chart-x-title { grid-column:2; align-self:end; text-align:center; color:var(--brooklyn-ink-soft); }
.axis-chart .minor-label { visibility:hidden; }
@media(max-width:600px) { .axis-chart { padding-right:12px; grid-template-columns:36px minmax(0,1fr); } .axis-chart.is-dense .plot-value { display:none; } .chart-y-tick { inset-inline-end:6px; } }
.anomaly-summary { padding:12px 14px; margin-top:18px; border:1px solid rgba(24,54,95,.24); border-radius:8px; font-size:16px; line-height:1.6; }
.exclusion-summary { margin-top:18px; font-size:14px; line-height:1.7; }
.exclusion-summary li { margin-top:6px; }
.record-details tr.extra { background:color-mix(in srgb,var(--brooklyn-yellow) 22%,var(--brooklyn-paper-strong)); }
.record-details tr.normal { background:var(--brooklyn-blue-soft); }
.record-details tr.unknown { background:var(--brooklyn-disabled); }
.record-details td:last-child { min-width:220px; line-height:1.7; }
.record-details { margin-top:18px; overflow:auto; }
.record-details table { width:100%; min-width:720px; border-collapse:collapse; font-size:14px; }
.record-details td,.record-details th { padding:10px; border-bottom:1px solid rgba(24,54,95,.2); text-align:left; }
#exportFeedback { min-height:28px; font-size:14px; line-height:1.7; }
@media(max-width:600px) {
  .problem-cards { grid-template-columns:1fr; }
  .problem-icon { width:136px; height:136px; }
  .mobile-hint { display:block; }
  .sequence-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .report-heading { align-items:flex-start; }
  .report-toolbar { flex-direction:column; }
  .record-details table,.record-details tbody { display:block; width:100%; min-width:0; }
  .record-details thead { display:none; }
  .record-details tbody tr { display:block; margin-top:10px; padding:10px 12px; border:1px solid rgba(24,54,95,.24); border-radius:8px; }
  .record-details td,.record-details td:last-child { display:grid; grid-template-columns:72px minmax(0,1fr); gap:8px; min-width:0; padding:6px 0; border:0; overflow-wrap:anywhere; }
  .record-details td::before { content:attr(data-label); font-weight:700; }
}