/* Test My Display — selected green / Manrope edition, refined 29 October 2026.
 * Retains C composition, Header A and original side controls.
 * Interface chrome only: inspection pattern values and tool logic are unchanged.
 */
html.test-my-display {
  --display-accent: #286b4a;
  --display-soft: #edf5f0;
  --display-ink: #252a31;
  --display-line: #d8e3dc;
  --display-muted: #616a76;
  --display-faint: #f7f8fa;
  --display-strong-line: #aeb7c1;
  --display-sans: 'Manrope',Arial,sans-serif;
  --display-mono: 'DM Mono', ui-monospace, monospace;
  --display-tool-radius: 18px;
  --display-card-radius: 12px;
  --display-control-radius: 8px;
  --display-tool-shadow: 0 16px 44px #203a2c0b, 0 3px 10px #203a2c05;
  --display-panel: #fff;
  --display-data: #fff;
  --display-tool-line: #c6d7cc;
  --paper: #fff;
  --white: #fff;
  --ink: var(--display-ink);
  --green: var(--display-accent);
  --muted: var(--display-muted);
  --line: var(--display-line);
  --ux-ink: var(--display-ink);
  --ux-navy: var(--display-panel);
  --ux-blue: var(--display-accent);
  --ux-soft: var(--display-soft);
  --ux-border: var(--display-line);
  color: var(--display-ink);
  background: #fff;
  color-scheme: light;
}

/* Existing font shorthands are local to the widgets; override their families. */
html.test-my-display :is(body,h1,h2,h3,h4,p,a,button,input,select,textarea,label,legend,summary,dt,small),html.test-my-display :is(.eyebrow,.brand,.setup-steps,.step-marker,.state-pill,.measurement-phases,.progress-row,.graph-caption,.chart-empty>span,.lane-identity,.lane-requested>span,.motion-field-label,.motion-stage-footnote,.ppi-result-state,.ppi-density-unit,.screen-info-css-tag,.screen-info-diagram-legend,.screen-step,.screen-preview-label,.nav-group-label,.condition-note,.callout strong) {
  font-family: var(--display-sans) !important;
}
html.test-my-display :is(.reading-value,.reading-unit,.metrics dd,.ppi-density,.ppi-result-context,.ppi-metrics dd,.ppi-result-card h3>span,.screen-info-size,.screen-info-key-readings dd,.screen-info-key-readings dd>span,.screen-info-grid dd,.lane-label,.lane-observed,#result-duration,#chart-scale,#chart-time,#time-left,.ppi-tool input[type='text'],.screen-info-tool textarea) {
  font-family: var(--display-mono) !important;
  font-variant-numeric: tabular-nums;
}
html.test-my-display :is(.ppi-svg-title,.ppi-svg-dimension) { font-family:var(--display-mono) !important; }
html.test-my-display .ppi-svg-empty { font-family:var(--display-sans) !important; }

/* Quiet page and the approved guided Header A. */
html.test-my-display body { background:#fff; color:var(--display-ink); }
html.test-my-display a { color:var(--display-accent); }
html.test-my-display :is(h1,h2,h3,.brand,.next-checks a,.cards h3 a,.guide-grid h3 a) { color:var(--display-ink); }
html.test-my-display :is(.lead,.article-heading .lead,.home-explainer p,.next-checks p,.cards p,.guide-grid p,.planning-grid p,.site-footer p,.small) { color:var(--display-muted); }
html.test-my-display :is(.eyebrow,.home-heading .eyebrow,.home-explainer>span,.next-checks p a,.planning-grid a) { color:var(--display-accent); }
html.test-my-display :is(.article-body p,.article-body li) { color:#424b57; }
html.test-my-display :is(.setup-steps,.clarity-next,.next-checks>article,.content-section,.planning-grid article,.site-footer,.site-footer>.small,.cards>div,.cards>article,.guide-grid>div,.guide-grid>article,.guide-article .article-body,.article-body th,.article-body td) { border-color:var(--display-line); }
html.test-my-display .article-body th { background:var(--display-soft); }
html.test-my-display .callout { background:var(--display-soft); border-color:var(--display-accent); }
html.test-my-display .share-feedback { background:var(--display-soft); color:var(--display-ink); }
html.test-my-display :is(button,a,summary,input,select,textarea):focus-visible { outline-color:var(--display-accent) !important; }
html.test-my-display .utility-shell { background:#f5f6f8; color:var(--display-muted); border-bottom:1px solid #e9ecef; }
html.test-my-display .utility-bar { min-height:42px; }
html.test-my-display :is(.utility-note,.utility-tagline) { color:var(--display-muted); font-size:12px; }
html.test-my-display .utility-dot { background:var(--display-accent); }
html.test-my-display .utility-divider { color:#a9afb8; }
html.test-my-display .utility-bar .languages { font-size:12px; }
html.test-my-display .utility-bar .languages a { color:#5d6672; border:0; border-radius:0; background:none; box-shadow:none; }
html.test-my-display .utility-bar .languages a[aria-current] { color:#5d6672; background:none; box-shadow:none; font-weight:800; }
html.test-my-display .language-flag { box-shadow:0 0 0 1px #20262d15; }
html.test-my-display .header-shell { background:#fff; border-color:var(--display-line); }
html.test-my-display .header-shell .brand { color:var(--display-ink); }
html.test-my-display .header-shell .clarity-mark { background:var(--display-accent); color:#fff; box-shadow:none; border-radius:8px; }
html.test-my-display .header-shell :is(.desktop-nav>details>summary,.nav-method-link,.mobile-menu>summary,.mobile-nav>.nav-disclosure>summary) { color:var(--display-ink); }
html.test-my-display .header-shell a[aria-current] { color:var(--display-accent); }
html.test-my-display .header-shell :is(.header-cta,.mobile-cta) { background:var(--display-accent); color:#fff; box-shadow:none; border-radius:7px; font-size:13px; }
html.test-my-display .header-shell :is(.header-cta,.mobile-cta):hover { background:var(--display-accent); box-shadow:inset 0 0 0 100px #0000000a; }
html.test-my-display .nav-chevron { color:var(--display-muted); }
html.test-my-display .nav-panel { border-color:var(--display-line); box-shadow:0 14px 40px #252a3117; border-radius:10px; }
html.test-my-display .nav-panel-intro { background:var(--display-faint); border-color:var(--display-line); }
html.test-my-display .nav-panel-intro p { color:var(--display-ink); }
html.test-my-display .nav-group-label { color:var(--display-muted); font-size:11px; letter-spacing:.025em; }
html.test-my-display .header-shell .nav-tool { color:var(--display-ink); border-radius:6px; }
html.test-my-display .nav-tool:is(:hover,[aria-current]) { background:var(--display-soft); }
html.test-my-display .nav-tool-icon { background:var(--display-soft); color:var(--display-accent); border-radius:6px; }
html.test-my-display .nav-tool small { color:var(--display-muted); font-size:12px; }
html.test-my-display .nav-tool-arrow { color:var(--display-muted); }
html.test-my-display .header-shell .nav-method { color:var(--display-accent); font-size:12px; }
html.test-my-display .header-shell .guides-panel>a { color:var(--display-ink); border-color:var(--display-line); font-size:13px; }
html.test-my-display .header-shell .guides-panel>a:hover { color:var(--display-accent); }
html.test-my-display .header-shell .mobile-nav { background:#fff; border-color:var(--display-line); }

/* Remove redundant ornaments, never current states, errors, labels, or tool tips. */
html.test-my-display :is(.ppi-local-chip,.screen-info-live-chip,.inspection-badge,.step-marker,.field-number,.palette-heading>span,.next-checks>article>.step),html.test-my-display .measurement-phases li>span { display:none; }
html.test-my-display .screen-info-steps li::before { display:none; }
html.test-my-display .next-checks>article { grid-template-columns:minmax(0,1fr); }
html.test-my-display .next-checks>article>div { grid-column:1; }
html.test-my-display .setup-steps { color:var(--display-muted); }
html.test-my-display .condition-note { color:var(--display-muted); font-size:12px; }
html.test-my-display .condition-note i { background:var(--display-accent); }

/* Common light instrument shell. No selectors below touch real pattern fills. */
html.test-my-display :is([data-fl-test],[data-fl-motion],.screen-tool,.ppi-tool,.screen-info-tool) {
  --timing-navy:var(--display-panel);
  --timing-blue:var(--display-accent);
  --timing-line:var(--display-line);
  --timing-muted:var(--display-muted);
  --timing-sans:var(--display-sans);
  --timing-mono:var(--display-mono);
  color:var(--display-ink);
  background:#fff;
  border:1px solid var(--display-tool-line);
  border-radius:var(--display-tool-radius);
  box-shadow:var(--display-tool-shadow);
}
html.test-my-display :is([data-fl-test],[data-fl-motion],.screen-tool,.ppi-tool,.screen-info-tool) :is(button,select,textarea,input[type='text']) {
  color:var(--display-ink);
  background:#fff;
  border-color:var(--display-strong-line);
  border-radius:var(--display-control-radius);
  box-shadow:none;
  font-size:14px;
  line-height:1.5;
  min-height:44px;
}
html.test-my-display :is([data-fl-test],[data-fl-motion],.screen-tool,.ppi-tool,.screen-info-tool) button:hover:not(:disabled) { filter:none; border-color:var(--display-accent); }
html.test-my-display :is([data-fl-test] #start-test,[data-fl-motion] #start-motion,.screen-intro .primary,.screen-info-tool button.primary,.ppi-tool .ppi-jump-results) {
  background:var(--display-accent);
  border-color:var(--display-accent);
  color:#fff;
  box-shadow:none;
  font-size:14px;
}
html.test-my-display :is([data-fl-test] #start-test,[data-fl-motion] #start-motion,.screen-intro .primary,.screen-info-tool button.primary):hover:not(:disabled) { background:var(--display-accent); box-shadow:inset 0 0 0 100px #0000000a; }
html.test-my-display :is(.ppi-actions button:last-child,.ppi-tool .ppi-actions button:last-child) { background:#fff; border-color:var(--display-strong-line); color:var(--display-accent); box-shadow:none; }
html.test-my-display :is(.ppi-actions button:last-child,.ppi-tool .ppi-actions button:last-child):hover { background:var(--display-soft); }
html.test-my-display :is([data-fl-test],[data-fl-motion],.screen-tool,.ppi-tool,.screen-info-tool) :is(label,dt) { color:#4c5663; font-size:12px; }
html.test-my-display :is(.ppi-tool-header,.screen-info-header,.inspection-chrome) { background:#fff; background-image:none; border-color:var(--display-line); }
html.test-my-display :is(.ppi-tool .ppi-tool-header h2,.screen-info-tool .screen-info-header h2,.article-body .inspection-chrome h2) { color:var(--display-ink); }
html.test-my-display :is(.ppi-tool .ppi-tool-header p:last-child,.screen-info-tool .screen-info-header p:last-child,.screen-tool .screen-intro p) { color:var(--display-muted); font-size:13px; }
html.test-my-display :is(.ppi-tool .eyebrow,.screen-info-tool .eyebrow,.inspection-chrome .eyebrow) { color:var(--display-accent); font-size:12px; letter-spacing:.025em; }
html.test-my-display :is(.ppi-controls,.screen-info-tool .screen-info-controls) { background:var(--display-panel); border-color:var(--display-line); }
html.test-my-display :is(.ppi-status,.screen-info-tool .screen-info-status) { border-color:var(--display-line); color:var(--display-muted); font-size:12px !important; line-height:1.75 !important; }

/* FPS: white instrument, light plot, readable live stages and full report. */
html.test-my-display [data-fl-test] .test-controls { background:#fff; border-color:var(--display-line); }
html.test-my-display [data-fl-test] .controls-intro h2 { color:var(--display-ink); }
html.test-my-display [data-fl-test] .controls-intro p { color:var(--display-muted); font-size:12px; }
html.test-my-display [data-fl-test] .timing-field label { font-size:12px; color:#4c5663; }
html.test-my-display [data-fl-test] .timing-setup-note { color:var(--display-muted); font-size:12px; line-height:1.75; border-color:var(--display-line); }
html.test-my-display [data-fl-test] .timing-setup-note .timing-icon { color:var(--display-muted); }
html.test-my-display [data-fl-test] .secondary-actions button { color:var(--display-muted); font-size:14px; }
html.test-my-display [data-fl-test] .secondary-actions button:hover:not(:disabled) { background:var(--display-soft); border-color:var(--display-accent); }
html.test-my-display [data-fl-test] .instrument { background:var(--display-panel); background-image:none; color:var(--display-ink); }
html.test-my-display [data-fl-test] .instrument .eyebrow { color:var(--display-muted); font-size:12px; letter-spacing:.025em; }
html.test-my-display [data-fl-test] .instrument .eyebrow .timing-icon { color:var(--display-accent); }
html.test-my-display :is([data-fl-test],[data-fl-motion]) .state-pill,html.test-my-display :is([data-fl-test][data-state='warming'],[data-fl-test][data-state='measuring'],[data-fl-test][data-state='complete'],[data-fl-motion][data-state='running']) .state-pill {
  color:var(--display-accent); background:transparent; border:0; border-radius:0; font-size:12px; padding:4px 0;
}
html.test-my-display :is([data-fl-test],[data-fl-motion]) .state-pill::before,html.test-my-display :is([data-fl-test][data-state='warming'],[data-fl-test][data-state='measuring'],[data-fl-test][data-state='complete'],[data-fl-motion][data-state='running']) .state-pill::before { background:var(--display-accent); }
html.test-my-display [data-fl-test] .reading-value { color:var(--display-ink); }
html.test-my-display [data-fl-test] .reading-unit { color:var(--display-muted); font-size:14px; }
html.test-my-display [data-fl-test] .reading p { color:#424d5b; font-size:12px; }
html.test-my-display [data-fl-test] .reading .muted { color:var(--display-muted); }
html.test-my-display [data-fl-test] .measurement-phases li { color:var(--display-muted); border-color:var(--display-line); font-size:12px; }
html.test-my-display [data-fl-test][data-state='warming'] .phase-warm,
html.test-my-display [data-fl-test][data-state='measuring'] .phase-measure,
html.test-my-display [data-fl-test][data-state='complete'] .phase-complete { color:var(--display-accent); border-color:var(--display-accent); font-weight:700; }
html.test-my-display [data-fl-test][data-state='measuring'] .phase-warm,
html.test-my-display [data-fl-test][data-state='complete'] :is(.phase-warm,.phase-measure) { color:var(--display-muted); border-color:var(--display-strong-line); }
html.test-my-display [data-fl-test] .graph-wrap { background:#fff; border-color:var(--display-line); border-radius:var(--display-card-radius); }
html.test-my-display [data-fl-test] .chart-empty { color:var(--display-muted); background:#ffffffed; }
html.test-my-display [data-fl-test] .chart-empty>.timing-icon { color:var(--display-accent); }
html.test-my-display [data-fl-test] .chart-empty>span { font-size:12px; }
html.test-my-display [data-fl-test] .chart-empty>small { color:var(--display-muted); font-size:12px; }
html.test-my-display [data-fl-test] .graph-caption { color:var(--display-muted); font-size:11px; letter-spacing:0; }
html.test-my-display [data-fl-test] .graph-caption>span:last-child { color:#4d5765; }
html.test-my-display [data-fl-test] .progress-row span { color:var(--display-muted); font-size:12px; }
html.test-my-display [data-fl-test] progress { background:var(--display-line); height:4px; }
html.test-my-display [data-fl-test] progress::-webkit-progress-bar { background:var(--display-line); }
html.test-my-display [data-fl-test] progress::-webkit-progress-value { background:var(--display-accent); }
html.test-my-display [data-fl-test] progress::-moz-progress-bar { background:var(--display-accent); }
html.test-my-display [data-fl-test] .instrument .status { color:var(--display-muted); font-size:12px; line-height:1.75; }
html.test-my-display [data-fl-test] .instrument .status.error { color:#a33226 !important; }
html.test-my-display [data-fl-test] #load-canvas { background:#fff; border-color:var(--display-line); }
html.test-my-display [data-fl-test] .test-footnote { background:#fff; border-color:var(--display-line); }
html.test-my-display [data-fl-test] .test-footnote p { color:var(--display-muted); font-size:12px; }
html.test-my-display [data-fl-test] .test-footnote a { color:var(--display-accent); }
html.test-my-display [data-fl-test] .test-footnote button { color:var(--display-accent); font-size:14px; }
html.test-my-display [data-fl-test] .result { background:#fff; border-color:var(--display-line); }
html.test-my-display [data-fl-test] .result .eyebrow { color:var(--display-accent); font-size:12px; letter-spacing:.025em; }
html.test-my-display [data-fl-test] .result h2 { color:var(--display-ink); }
html.test-my-display [data-fl-test] #result-duration { color:var(--display-muted); border:0; background:none; font-size:12px; padding:0; }
html.test-my-display [data-fl-test] .metrics>div { background:var(--display-data); border-color:var(--display-line); }
html.test-my-display [data-fl-test] .metrics>div:first-child { background:var(--display-soft); border-radius:var(--display-card-radius) 0 0 var(--display-card-radius); }
html.test-my-display [data-fl-test] .metrics>div+div { border-radius:0 var(--display-card-radius) var(--display-card-radius) 0; }
html.test-my-display [data-fl-test] .metrics dt { color:var(--display-muted); font-size:12px; }
html.test-my-display [data-fl-test] .metrics dd { color:var(--display-accent); }
html.test-my-display [data-fl-test] .metrics>div+div dd { color:var(--display-ink); }
html.test-my-display [data-fl-test] .result-insight { border-color:var(--display-line); }
html.test-my-display [data-fl-test] .result-insight>.timing-icon { color:var(--display-accent); }
html.test-my-display [data-fl-test] .result-insight p { color:#46515f; font-size:13px; }
html.test-my-display [data-fl-test] .timing-limit { color:var(--display-muted); font-size:12px; }
html.test-my-display [data-fl-test] .timing-report { background:#fff; border-color:var(--display-line); border-radius:var(--display-card-radius); }
html.test-my-display [data-fl-test] .timing-report summary { color:var(--display-ink); font-size:14px; }
html.test-my-display [data-fl-test] .timing-report summary>span { color:var(--display-accent); }
html.test-my-display [data-fl-test] .timing-report summary:hover { background:var(--display-faint); }
html.test-my-display [data-fl-test] .timing-report-body { border-color:var(--display-line); }
html.test-my-display [data-fl-test] .timing-detail-metrics>div,
html.test-my-display [data-fl-test] .timing-detail-metrics>div:first-child,
html.test-my-display [data-fl-test] .timing-detail-metrics>div+div { background:transparent; border:0; border-radius:0; }
html.test-my-display [data-fl-test] .timing-report .small { color:var(--display-muted); font-size:12px; }
html.test-my-display [data-fl-test] .result-actions button { color:var(--display-accent); font-size:14px; }
html.test-my-display [data-fl-test] .result-actions button:hover { background:var(--display-soft); border-color:var(--display-accent); }
html.test-my-display [data-fl-test] .result-next { color:var(--display-accent); font-size:14px; }
html.test-my-display :is([data-fl-test],[data-fl-motion]) .share-feedback { color:var(--display-ink); background:var(--display-soft); border-color:var(--display-line); font-size:12px; }

/* Motion: every lane has the same neutral stimulus and the original geometry. */
html.test-my-display [data-fl-motion] .motion-console-heading h2 { color:var(--display-ink); }
html.test-my-display [data-fl-motion] .motion-console-heading p { color:var(--display-muted); font-size:12px; }
html.test-my-display [data-fl-motion] .motion-settings { background:#fff; }
html.test-my-display [data-fl-motion] .motion-settings label { color:#4c5663; font-size:12px; }
html.test-my-display [data-fl-motion] .motion-field-label>.timing-icon { color:var(--display-muted); }
html.test-my-display [data-fl-motion] .motion-settings .lane-letter { background:transparent; border:0; color:var(--display-ink); font-size:12px; width:auto; height:auto; }
html.test-my-display [data-fl-motion] .motion-actions { background:var(--display-panel); border-color:var(--display-line); }
html.test-my-display [data-fl-motion] .motion-actions button { color:var(--display-ink); font-size:14px; }
html.test-my-display [data-fl-motion] .motion-actions .motion-share { color:var(--display-accent); font-size:14px; }
html.test-my-display [data-fl-motion] .motion-actions button:not(:disabled):not(.primary):hover { background:var(--display-soft); border-color:var(--display-accent); }
html.test-my-display [data-fl-motion] .motion-stage { background:var(--display-panel); color:var(--display-ink); }
html.test-my-display [data-fl-motion] .motion-stage .eyebrow { color:var(--display-muted); font-size:12px; letter-spacing:.025em; }
html.test-my-display [data-fl-motion] .motion-stage .eyebrow .timing-icon { color:var(--display-accent); }
html.test-my-display [data-fl-motion] .motion-lane {
  --lane-grid:#c6cbd154;
  --lane-dash:#8a939e99;
  --runner-bg:#3b424b;
  --runner-ink:#fff;
  --lane-ink:#4a5461;
  --lane-pill:#fff;
  --lane-pill-line:#c4cbd3;
  background:#edf0f3;
  color:#313943;
  border-color:#cbd1d8 !important;
  border-radius:var(--display-card-radius);
}
html.test-my-display [data-fl-motion] .lane-identity { font-size:12px; }
html.test-my-display [data-fl-motion] .motion-lane .lane-letter { color:#4a5461; border-color:#c4cbd3; background:#fff; font-size:12px; border-radius:4px; }
html.test-my-display [data-fl-motion] .lane-requested>span { font-size:12px; opacity:1; }
html.test-my-display [data-fl-motion] .lane-label { color:#313943; font-size:14px; }
html.test-my-display [data-fl-motion] .lane-observed { font-size:12px; background:#fff; color:#4a5461; border-color:#c4cbd3; border-radius:4px; }
html.test-my-display [data-fl-motion] .runner { border-color:#3b424b; }
html.test-my-display [data-fl-motion] .motion-stage-footnote { color:var(--display-muted); font-size:11px; }
html.test-my-display [data-fl-motion] #motion-status { color:var(--display-muted); background:#fff; border-color:var(--display-line); font-size:12px; }
html.test-my-display [data-fl-motion] .callout { background:#fff; }
html.test-my-display [data-fl-motion] .callout strong { color:var(--display-ink); font-size:13px; }
html.test-my-display [data-fl-motion] .callout p { color:var(--display-muted); font-size:12px; line-height:1.8; }
html.test-my-display [data-fl-motion]:fullscreen { background:#fff; }

/* Inspection chrome only: native color fields/swatches keep original values. */
html.test-my-display .screen-tool .screen-intro { background:var(--display-panel); border-color:var(--display-line); }
html.test-my-display .article-body .palette-heading { color:var(--display-ink); font-size:13px; }
html.test-my-display .screen-tool .pattern-choice { color:#4c5663; background:#fff; border-color:var(--display-line); border-radius:var(--display-control-radius); font-size:12px; line-height:1.5; }
html.test-my-display .screen-tool .pattern-choice:hover { border-color:var(--display-accent); }
html.test-my-display .screen-tool .pattern-choice[aria-pressed='true'] { color:var(--display-accent); background:var(--display-soft); border-color:var(--display-accent); box-shadow:0 0 0 1px var(--display-accent); }
html.test-my-display .article-body .palette-note { color:var(--display-muted); font-size:12px; }
html.test-my-display .screen-workspace .screen-stage { border-color:var(--display-strong-line); border-radius:var(--display-card-radius); }
html.test-my-display .screen-workspace .screen-toolbar { background:#fff; border-color:var(--display-line); color:var(--display-ink); border-radius:var(--display-card-radius); box-shadow:0 5px 22px #00000018; }
html.test-my-display .screen-toolbar p { color:var(--display-muted) !important; font-size:12px !important; line-height:1.75 !important; }
html.test-my-display .screen-tool .screen-step { color:var(--display-muted); font-size:12px; }
html.test-my-display .screen-actions button { font-size:14px; color:var(--display-ink); }
html.test-my-display .screen-actions button:hover:not(:disabled) { background:var(--display-soft); }
html.test-my-display .screen-tool .screen-status { background:var(--display-panel); color:var(--display-muted) !important; border-color:var(--display-line); font-size:12px !important; }
html.test-my-display .screen-tool .screen-help { color:var(--display-muted) !important; font-size:12px !important; }

/* PPI: light result cards and shared-scale diagrams, with no clipped figures. */
html.test-my-display .ppi-tool fieldset { background:#fff; border-color:var(--display-line); border-radius:var(--display-card-radius); }
html.test-my-display .ppi-tool legend { color:var(--display-ink); }
html.test-my-display .ppi-tool input[type='text'] { font-size:16px; }
html.test-my-display .ppi-tool input[aria-invalid='true'] { border-color:#b33b29; box-shadow:inset 0 0 0 1px #b33b29; background:#fff8f6; }
html.test-my-display .ppi-tool .ppi-field-error { color:#a33226; font-size:12px; }
html.test-my-display .ppi-tool .ppi-input-help { color:var(--display-muted); font-size:12px; line-height:1.75; }
html.test-my-display .ppi-tool .ppi-compare-toggle { background:#fff; border-color:var(--display-line); border-radius:var(--display-control-radius); color:var(--display-ink); font-size:13px; }
html.test-my-display .ppi-compare-toggle small { color:var(--display-muted); font-size:12px; }
html.test-my-display .ppi-toggle-track { background:#b4bcc5; }
html.test-my-display .ppi-compare-toggle:has(input:checked) { background:var(--display-soft); border-color:var(--display-accent); }
html.test-my-display .ppi-compare-toggle:has(input:checked) .ppi-toggle-track { background:var(--display-accent); }
html.test-my-display .ppi-tool .ppi-compare-toggle:has(input:focus-visible),
html.test-my-display .ppi-tool :is(#ppi-inputs,#ppi-results):focus-visible { outline-color:var(--display-accent); }
html.test-my-display .ppi-tool .ppi-result-state { color:var(--display-muted); font-size:12px; }
html.test-my-display .ppi-tool .ppi-result-card { background:var(--display-data); border-color:var(--display-line); border-radius:var(--display-card-radius); color:var(--display-ink); }
html.test-my-display .ppi-tool .ppi-result-card::before { display:none; }
html.test-my-display .ppi-tool .ppi-result-card h3 { color:#4c5663; font-size:13px; }
html.test-my-display .ppi-result-card h3>span { color:var(--display-accent); border-color:var(--display-line); background:#fff; border-radius:4px; }
html.test-my-display .ppi-tool .ppi-density { color:var(--display-accent); overflow-wrap:anywhere; }
html.test-my-display .ppi-density-unit { color:var(--display-muted); font-size:14px; }
html.test-my-display .ppi-tool .ppi-result-context { color:var(--display-muted); font-size:12px; }
html.test-my-display .ppi-metrics>div { border-color:var(--display-line); min-width:0; }
html.test-my-display .ppi-metrics dt { color:var(--display-muted); font-size:12px; }
html.test-my-display .ppi-metrics dd { color:var(--display-ink); overflow-wrap:anywhere; }
html.test-my-display .ppi-tool .ppi-details { border-color:var(--display-line); }
html.test-my-display .ppi-details summary { color:#4c5663; font-size:14px; min-height:40px; }
html.test-my-display .ppi-details .ppi-metrics>div { flex-wrap:wrap; gap:4px 12px; }
html.test-my-display .ppi-details .ppi-metrics dd { font-size:14px; }
html.test-my-display .ppi-tool .ppi-result-card[data-valid='false'] { background:var(--display-faint); }
html.test-my-display .ppi-tool .ppi-result-card[data-valid='false'] .ppi-density { color:var(--display-muted); }
html.test-my-display .ppi-comparison { background:var(--display-soft); border-color:var(--display-line); border-left-color:var(--display-accent); border-radius:var(--display-card-radius); }
html.test-my-display .ppi-comparison strong { color:var(--display-accent); font-size:13px; }
html.test-my-display .ppi-tool .ppi-comparison p { color:#46515e; font-size:13px; }
html.test-my-display .ppi-size-figure { background:#fff; border-color:var(--display-line); border-radius:var(--display-card-radius); }
html.test-my-display .ppi-tool .ppi-figure-heading h3 { color:var(--display-ink); font-size:14px; }
html.test-my-display .ppi-figure-heading>span { color:var(--display-muted); font-size:11px; letter-spacing:0; }
html.test-my-display .ppi-svg-screen { fill:var(--display-soft); stroke:var(--display-accent); }
html.test-my-display .ppi-svg-screen-b { fill:#eef1f4; stroke:#737e8d; }
html.test-my-display .ppi-svg-diagonal { stroke:var(--display-accent); }
html.test-my-display .ppi-svg-measure { stroke:#8b95a1; }
html.test-my-display :is(.ppi-svg-title,.ppi-svg-dimension) { fill:#4a5563; }
html.test-my-display .ppi-svg-empty { fill:var(--display-muted); }
html.test-my-display .ppi-size-figure figcaption { color:var(--display-muted); font-size:12px; }
html.test-my-display .ppi-tool :is(.ppi-diagram-empty,.ppi-result-note) { color:var(--display-muted); font-size:12px; }
html.test-my-display .ppi-tool :is(.ppi-next,.ppi-jump-inputs) { color:var(--display-accent); font-size:14px; }

/* Browser information: light data and three clearly distinct diagram outlines. */
html.test-my-display .screen-info-tool .screen-info-controls h3 { color:var(--display-ink); }
html.test-my-display .screen-info-tool .screen-info-controls>p,
html.test-my-display .screen-info-tool .screen-info-setup>p { color:var(--display-muted); font-size:12px; }
html.test-my-display .screen-info-tool .screen-info-steps li { color:var(--display-muted); border-color:var(--display-line); font-size:12px; }
html.test-my-display .screen-info-tool .screen-info-setup { border-color:var(--display-line); }
html.test-my-display .screen-info-setup summary { color:#46515f; font-size:14px; }
html.test-my-display .screen-info-tool .screen-info-primary { color:var(--display-ink); background:var(--display-data); border-color:var(--display-line); border-radius:var(--display-card-radius); }
html.test-my-display .screen-info-primary::before { display:none; }
html.test-my-display .screen-info-tool .screen-info-primary .eyebrow { color:var(--display-muted); font-size:12px; letter-spacing:.025em; }
html.test-my-display .screen-info-css-tag { color:var(--display-muted); border:0; background:none; font-size:12px; padding:0; }
html.test-my-display .screen-info-tool .screen-info-size { color:var(--display-accent); }
html.test-my-display .screen-info-tool .screen-info-primary>p:last-child { color:var(--display-muted); font-size:12px; }
html.test-my-display .screen-info-key-readings>div { background:#fff; border-color:var(--display-line); border-radius:var(--display-card-radius); }
html.test-my-display .screen-info-key-readings dt { color:var(--display-muted); font-size:12px; }
html.test-my-display .screen-info-key-readings dd { color:var(--display-ink); }
html.test-my-display .screen-info-tool .screen-info-key-readings p { color:var(--display-muted); font-size:12px; }
html.test-my-display .screen-info-diagram { background:#fff; border-color:var(--display-line); border-radius:var(--display-card-radius); }
html.test-my-display .screen-info-tool .screen-info-diagram-heading h3 { color:var(--display-ink); font-size:14px; }
html.test-my-display .screen-info-diagram-heading>span { color:var(--display-muted); font-size:11px; letter-spacing:0; }
html.test-my-display .screen-info-tool [data-si-diagram] { background:#f8f9fa; background-image:none; border-radius:4px; }
html.test-my-display .si-diagram-screen { fill:#e9edf1; stroke:#778392; stroke-width:2.5; }
html.test-my-display .si-diagram-layout { fill:var(--display-soft); stroke:var(--display-accent); stroke-width:2; }
html.test-my-display .si-diagram-visual { fill:#ffffff70; stroke:#4b596a; stroke-width:1.5; stroke-dasharray:5 5; }
html.test-my-display .si-diagram-baseline { stroke:#a5aeb9; }
html.test-my-display .screen-info-diagram-legend { color:var(--display-muted); font-size:12px; }
html.test-my-display .screen-info-diagram-legend .si-screen-key { background:#e9edf1; border-color:#778392; }
html.test-my-display .screen-info-diagram-legend .si-layout-key { background:var(--display-soft); border-color:var(--display-accent); }
html.test-my-display .screen-info-diagram-legend .si-visual-key { background:#fff; border-color:#4b596a; border-style:dashed; }
html.test-my-display .screen-info-diagram figcaption { color:var(--display-muted); font-size:12px; }
html.test-my-display .screen-info-tool .screen-info-diagram-note { color:var(--display-muted); border-color:var(--display-line); font-size:12px; }
html.test-my-display .screen-info-tool .screen-info-diagram-note[data-warning='true'] { color:#8c5216; }
html.test-my-display .screen-info-tool .screen-info-details { border-color:var(--display-line); border-radius:var(--display-card-radius); }
html.test-my-display .screen-info-details summary { background:var(--display-faint); color:var(--display-ink); font-size:14px; }
html.test-my-display .screen-info-details summary>span { color:var(--display-muted); font-size:12px; }
html.test-my-display .screen-info-tool .screen-info-grid>div { border-color:var(--display-line); }
html.test-my-display .screen-info-tool .screen-info-grid dt { color:#4c5663; font-size:12px; }
html.test-my-display .screen-info-tool .screen-info-grid dd { color:var(--display-ink); }
html.test-my-display .screen-info-tool .screen-info-grid p { color:var(--display-muted); font-size:12px; }
html.test-my-display .screen-info-tool .screen-info-note { color:var(--display-muted) !important; font-size:12px !important; }
html.test-my-display .screen-info-tool .screen-info-fallback { background:var(--display-faint); border-color:var(--display-line); }
html.test-my-display :is(.ppi-tool .ppi-result-card,.screen-info-tool .screen-info-primary,.screen-info-key-readings>div,[data-fl-test] .graph-wrap,[data-fl-test] .metrics>div,.ppi-size-figure,.screen-info-diagram) { border-color:var(--display-strong-line); }
html.test-my-display :is(.ppi-tool .ppi-result-card,.screen-info-tool .screen-info-primary) { border-left:3px solid var(--display-accent); }
html.test-my-display [data-fl-test] .metrics>div:first-child { background:#fff; border-top:3px solid var(--display-accent); }
html.test-my-display [data-fl-test] .metrics>div+div { border-top-width:3px; }
html.test-my-display :is(.ppi-tool-header,.screen-info-header,.inspection-chrome,[data-fl-motion] .motion-console-heading) { background:var(--display-faint); }
html.test-my-display [data-fl-motion] .motion-lane { border-radius:6px; border-color:#aeb7c1 !important; }
html.test-my-display .screen-workspace .screen-toolbar { box-shadow:none; border-color:var(--display-strong-line); }

/* Preserve the existing mobile stack and make the small instrument copy readable. */
@media(max-width:1000px) {
  html.test-my-display [data-fl-test] .reading p { font-size:12px; }
  html.test-my-display .screen-info-tool .screen-info-size { font-size:clamp(23px,2.8vw,34px); }
}
@media(max-width:720px) {
  html.test-my-display .utility-note { font-size:11px; }
  html.test-my-display .utility-bar .languages { font-size:11px; }
  html.test-my-display .utility-bar .languages a { padding-left:5px; padding-right:5px; }
  html.test-my-display .setup-steps { font-size:12px; gap:15px; }
  html.test-my-display .condition-note { font-size:11px; }
  html.test-my-display .condition-note span:last-child { max-width:150px; }
  html.test-my-display [data-fl-test] .instrument-top { align-items:flex-start; }
  html.test-my-display [data-fl-test] .instrument .eyebrow { font-size:11px; line-height:1.65; }
  html.test-my-display [data-fl-test] .reading { flex-wrap:wrap; gap:12px; }
  html.test-my-display [data-fl-test] .reading p { max-width:140px; font-size:12px; }
  html.test-my-display [data-fl-test] .measurement-phases { gap:12px; }
  html.test-my-display [data-fl-test] .measurement-phases li { font-size:12px; }
  html.test-my-display [data-fl-test] .graph-caption { font-size:10px; }
  html.test-my-display [data-fl-test] .metrics dt { font-size:12px; min-height:38px; }
  html.test-my-display [data-fl-test] .timing-report summary { font-size:14px; }
  html.test-my-display [data-fl-test] .result-actions button { font-size:14px; flex-basis:100%; }
  html.test-my-display [data-fl-motion] .motion-console-heading p { font-size:12px; }
  html.test-my-display [data-fl-motion] .motion-actions button { font-size:14px; }
  html.test-my-display [data-fl-motion] .lane-heading { flex-wrap:wrap; }
  html.test-my-display [data-fl-motion] .lane-identity { font-size:12px; }
  html.test-my-display [data-fl-motion] .lane-readings { flex-direction:row; align-items:center; flex-wrap:wrap; margin-left:auto; }
  html.test-my-display [data-fl-motion] .lane-requested>span { font-size:12px; }
  html.test-my-display [data-fl-motion] .lane-observed { font-size:12px; }
  html.test-my-display [data-fl-motion] .motion-stage-footnote { font-size:11px; }
  html.test-my-display .screen-tool .pattern-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  html.test-my-display .screen-tool .pattern-choice { font-size:12px; min-height:88px; padding:7px; }
  html.test-my-display .screen-tool .screen-actions button { font-size:14px; flex-basis:42%; }
  html.test-my-display .screen-workspace .screen-stage { min-height:510px; height:510px; }
  html.test-my-display .screen-workspace .screen-toolbar { padding:14px; }
  html.test-my-display .screen-tool .screen-toolbar-top { grid-template-columns:minmax(0,1fr) auto; gap:10px; }
  html.test-my-display .ppi-tool .ppi-density { font-size:clamp(38px,11vw,54px); }
  html.test-my-display .ppi-tool[data-compare='true'] .ppi-density { font-size:clamp(36px,10.5vw,48px); }
  html.test-my-display .ppi-details .ppi-metrics>div { align-items:flex-start; }
  html.test-my-display .ppi-figure-heading { align-items:flex-start; flex-wrap:wrap; gap:6px; }
  html.test-my-display .ppi-figure-heading>span { max-width:none; font-size:11px; }
  html.test-my-display :is(.ppi-svg-title,.ppi-svg-dimension) { font-size:26px; }
  html.test-my-display .ppi-svg-empty { font-size:24px; }
  html.test-my-display .ppi-tool .ppi-jump { font-size:14px; }
  html.test-my-display .screen-info-primary-label { flex-wrap:wrap; gap:7px 12px; }
  html.test-my-display .screen-info-tool .screen-info-size { font-size:clamp(22px,6.3vw,29px); }
  html.test-my-display .screen-info-diagram-heading { flex-wrap:wrap; gap:6px; }
  html.test-my-display .screen-info-diagram-heading>span { font-size:11px; }
  html.test-my-display .screen-info-diagram-legend { font-size:12px; gap:12px; }
  html.test-my-display .screen-info-setup summary { font-size:14px; }
}
@media(max-width:360px) {
  html.test-my-display [data-fl-test] .metrics>div:first-child { border-radius:var(--display-card-radius) var(--display-card-radius) 0 0; }
  html.test-my-display [data-fl-test] .metrics>div+div { border-color:var(--display-line); border-radius:0 0 var(--display-card-radius) var(--display-card-radius); }
  html.test-my-display .screen-tool .pattern-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(prefers-reduced-motion:reduce) {
  html.test-my-display :is([data-fl-test],[data-fl-motion],.ppi-tool,.screen-info-tool) * { transition:none !important; }
}

html.test-my-display .screen-info-css-tag{background:transparent;border:0;border-radius:0;padding:0;color:var(--display-muted)}
html.test-my-display .ppi-result-card h3>span{background:transparent;border:0;border-radius:0;width:auto;height:auto;padding:0;color:var(--display-accent)}

/* Owner-selected pictorial logo4. Preserve artwork colors and aspect ratio. */
html.test-my-display .brand-picture { display:block; line-height:0; }
html.test-my-display .brand-image { display:block; width:100%; height:auto; max-width:100%; }
html.test-my-display .header-shell .site-header { min-height:90px; }
html.test-my-display .header-shell .brand-logo { display:block; width:188px; max-width:calc(100% - 82px); padding:6px 0; flex-shrink:0; }
html.test-my-display .header-shell .brand-logo .brand-image { width:188px; }
html.test-my-display .site-footer .brand-logo { display:block; width:220px; max-width:100%; margin-bottom:12px; }
@media(max-width:900px){html.test-my-display .header-shell .site-header { min-height:72px; }html.test-my-display .header-shell .brand-logo { width:148px; padding:4px 0; }html.test-my-display .header-shell .brand-logo .brand-image { width:148px; }}

@media(max-width:900px){html.test-my-display .header-shell .mobile-nav {max-height:calc(100dvh - 148px);}}
@media(max-width:370px){html.test-my-display .header-shell .mobile-nav {max-height:calc(100dvh - 140px);}}
/* Prevent the older header's generic flex-wrap rule from making mobile menu columns. */
@media(max-width:900px){html.test-my-display .header-shell .mobile-nav {flex-wrap:nowrap;}html.test-my-display .header-shell .mobile-nav > * {flex-shrink:0;}}

/* Owner refinement: a shared centered title hierarchy in both language editions. */
html.test-my-display h1 { text-align:center; text-transform:capitalize; overflow-wrap:break-word; }
html.test-my-display .home-heading {
  flex-direction:column;
  align-items:center;
  gap:20px;
  padding:48px 0 30px;
  text-align:center;
}
html.test-my-display .home-heading>div:first-child { width:100%; }
html.test-my-display :is(.home-heading,.article-heading) .eyebrow {
  display:block;
  font-size:11px;
  font-weight:700;
  line-height:1.6;
  letter-spacing:.1em;
  margin:0 0 16px;
}
html.test-my-display .home-heading h1 {
  max-width:1080px;
  margin:0 auto;
  font-size:clamp(42px,5.3vw,72px);
  line-height:1.08;
  letter-spacing:-.055em;
}
html.test-my-display .home-explainer { display:block; max-width:680px; }
html.test-my-display .home-explainer>span { display:none; }
html.test-my-display .home-explainer p { font-size:16px; line-height:1.8; }
html.test-my-display .article-heading { max-width:1080px; margin:0 auto; text-align:center; }
html.test-my-display :is(.article-heading,.tool-article .article-heading) h1 {
  max-width:1050px;
  font-size:clamp(36px,4.5vw,62px);
  line-height:1.13;
  letter-spacing:-.045em;
  margin:0 auto 20px;
}
html.test-my-display .article-heading .lead { max-width:780px; margin:0 auto; font-size:17px; line-height:1.8; }
html.test-my-display .article-body { margin-top:36px; }
html.test-my-display .guide-article .article-body { margin-left:auto; margin-right:auto; padding-top:24px; }

/* Three practical setup reminders. Icons carry no additional accessible text. */
html.test-my-display .setup-steps {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
  padding:20px 4px 22px;
  border-top:1px solid var(--display-line);
  color:#515f57;
  font-size:13px;
  line-height:1.6;
}
html.test-my-display .setup-steps li { display:flex; align-items:center; justify-content:center; gap:11px; min-width:0; }
html.test-my-display .setup-steps li::before {
  content:'';
  display:block;
  flex:none;
  width:23px;
  height:23px;
  margin:0;
  border:0;
  border-radius:0;
  background:var(--display-accent);
  -webkit-mask:var(--setup-icon) center/contain no-repeat;
  mask:var(--setup-icon) center/contain no-repeat;
}
html.test-my-display .setup-steps li:nth-child(1) { --setup-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
html.test-my-display .setup-steps li:nth-child(2) { --setup-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3-6 4 12 3-6h4'/%3E%3C/svg%3E"); }
html.test-my-display .setup-steps li:nth-child(3) { --setup-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h10l4 4v14H5Z M14 3v5h5 M8 13l2.5 2.5L16 10'/%3E%3C/svg%3E"); }

/* A quiet shell, distinct work areas and inset cards across the five tools. */
html.test-my-display :is([data-fl-test],[data-fl-motion],.screen-tool,.ppi-tool,.screen-info-tool) { overflow:hidden; }
html.test-my-display :is([data-fl-test] .test-controls,.ppi-controls,.screen-info-tool .screen-info-controls) { background:#f7faf8; }
html.test-my-display :is(.ppi-tool-header,.screen-info-header,.inspection-chrome,[data-fl-motion] .motion-console-heading) {
  background:linear-gradient(110deg,#fbfdfb,#f1f6f3);
  border-bottom:1px solid var(--display-line);
}
html.test-my-display [data-fl-test] .controls-intro h2 { font-size:24px; line-height:1.3; }
html.test-my-display [data-fl-test] .controls-intro p { font-size:13px; line-height:1.8; }
html.test-my-display [data-fl-test] #start-test { box-shadow:0 3px 8px #286b4a18; }
html.test-my-display [data-fl-test] .instrument { background:#fff; }
html.test-my-display [data-fl-test] .instrument-top { padding-bottom:14px; border-bottom:1px solid var(--display-line); }
html.test-my-display [data-fl-test] .reading { padding-top:23px; padding-bottom:23px; }
html.test-my-display [data-fl-test] .graph-wrap { background:#fcfdfc; border-color:#d2dfd6; box-shadow:inset 0 1px 3px #203a2c04; }
html.test-my-display [data-fl-test] .chart-empty { background:#fcfdfced; }
html.test-my-display [data-fl-test] .test-footnote { background:#f7faf8; }
html.test-my-display [data-fl-test] .timing-key-metrics { gap:12px; }
html.test-my-display [data-fl-test] .timing-key-metrics>div { border:1px solid var(--display-line); border-top:3px solid #a9beb1; border-radius:var(--display-card-radius); }
html.test-my-display [data-fl-test] .timing-key-metrics>div:first-child { background:#f0f7f2; border-top-color:var(--display-accent); }
html.test-my-display [data-fl-test] .timing-report { background:#fbfdfb; }
html.test-my-display [data-fl-motion] .motion-settings { background:#f7faf8; padding-top:22px; }
html.test-my-display [data-fl-motion] .motion-actions { background:#fff; }
html.test-my-display [data-fl-motion] .motion-stage { background:#f7faf8; }
html.test-my-display [data-fl-motion] .motion-lane { border-radius:10px; }
html.test-my-display .screen-tool .screen-intro { background:#f7faf8; }
html.test-my-display .screen-workspace .screen-toolbar { border-color:#c6d4cb; box-shadow:0 5px 18px #203a2c12; }
html.test-my-display :is(.ppi-tool .ppi-result-card,.screen-info-tool .screen-info-primary) { background:#f4f9f5; border-color:#c8d9cd; border-left-color:var(--display-accent); }
html.test-my-display :is(.ppi-size-figure,.screen-info-diagram,.screen-info-key-readings>div) { border-color:var(--display-line); }
html.test-my-display :is(.ppi-figure-heading,.screen-info-diagram-heading) { background:#fafcfb; border-bottom:1px solid #e6eee8; }
html.test-my-display .ppi-figure-heading { padding-bottom:15px; }
html.test-my-display .ppi-tool .ppi-comparison { background:#edf6f0; }

/* Every fact remains in the same grid cell, reserving the longest text's size.
 * Root supplies an aria-hidden visual wrapper and a static screen-reader note.
 * There is deliberately no transition, animation or focusable rotation control. */
html.test-my-display [data-display-facts] { display:grid; min-width:0; line-height:1.6; }
html.test-my-display [data-display-fact] { grid-area:1/1; min-width:0; }
html.test-my-display [data-display-fact][hidden] { display:block !important; visibility:hidden; pointer-events:none; }
html.test-my-display .utility-bar { padding-top:6px; padding-bottom:6px; }
html.test-my-display .utility-note { display:flex; flex:1; min-width:0; }
html.test-my-display .utility-note>[data-display-facts] { flex:1; }
html.test-my-display .utility-bar .languages { flex-shrink:0; }
html.test-my-display .utility-bar .screen-reader-text {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

@media(max-width:900px) {
  html.test-my-display .header-shell .site-header { gap:10px; }
  html.test-my-display .header-shell .mobile-nav { max-height:calc(100dvh - 130px); }
}
@media(max-width:720px) {
  html.test-my-display .utility-bar { flex-direction:column; align-items:center; justify-content:center; gap:3px; padding-top:8px; padding-bottom:6px; }
  html.test-my-display .utility-note { display:flex; flex:none; align-items:flex-start; justify-content:center; gap:7px; width:100%; font-size:11px; text-align:center; }
  html.test-my-display .utility-note>.utility-dot { margin-top:6px; }
  html.test-my-display .utility-note>[data-display-facts] { flex:0 1 680px; }
  html.test-my-display .utility-bar .languages { gap:12px; font-size:11px; }
  html.test-my-display .utility-bar .languages a { min-height:32px; }
  html.test-my-display .header-shell .mobile-nav { max-height:calc(100dvh - 188px); }
  html.test-my-display .home-heading { padding:34px 0 26px; gap:17px; }
  html.test-my-display .home-heading h1 { font-size:clamp(36px,7.6vw,51px); }
  html.test-my-display :is(.article-heading,.tool-article .article-heading) h1 { font-size:clamp(31px,6.5vw,44px); letter-spacing:-.04em; }
  html.test-my-display :is(.home-heading,.article-heading) .eyebrow { font-size:10px; letter-spacing:.065em; margin-bottom:14px; }
  html.test-my-display :is(.home-explainer p,.article-heading .lead) { font-size:15px; }
  html.test-my-display .article-body { margin-top:28px; }
  html.test-my-display .setup-steps { gap:12px; padding:18px 0 20px; font-size:12px; }
  html.test-my-display .setup-steps li { flex-direction:column; gap:8px; text-align:center; justify-content:flex-start; }
  html.test-my-display .setup-steps li::before { width:22px; height:22px; }
  html.test-my-display [data-fl-test] .test-controls { border-bottom:1px solid var(--display-line); }
  html.test-my-display [data-fl-test] .reading { padding-top:20px; padding-bottom:20px; }
  html.test-my-display [data-fl-test] .timing-key-metrics>div { padding:18px 16px; }
}
@media(max-width:370px) {
  html.test-my-display .header-shell .brand-logo { max-width:calc(100% - 78px); }
  html.test-my-display .header-shell .mobile-menu>summary { gap:8px; padding-left:8px; }
  html.test-my-display .header-shell .mobile-nav { padding-left:16px; padding-right:16px; }
  html.test-my-display .header-shell .mobile-nav .nav-tool { grid-template-columns:32px minmax(0,1fr) 12px; gap:8px; padding-left:4px; padding-right:4px; }
  html.test-my-display .home-heading h1 { font-size:clamp(32px,10.2vw,37px); }
  html.test-my-display :is(.article-heading,.tool-article .article-heading) h1 { font-size:30px; }
  html.test-my-display .setup-steps { gap:9px; font-size:11px; }
}