/* Selected display B, integrated from the separately reviewed HTML study. */
#display-demo .device-shell { position:relative; background:#243942; border:1px solid #40545a; border-radius:19px; padding:11px; box-shadow:0 15px 45px #1c354124,0 2px 6px #1c354116; overflow:clip; }
#display-demo .instrument { width:600px; height:1024px; transform-origin:top left; background:var(--paper); position:relative; overflow:hidden; }
#display-demo .instrument-content { height:100%; display:flex; flex-direction:column; }
#display-demo .instrument-header { height:92px; flex:0 0 92px; display:flex; align-items:center; gap:17px; padding:0 25px; border-bottom:1px solid #cad7d4; background:#f7f8f3; }
#display-demo .menu-toggle { width:56px; height:56px; display:grid; place-items:center; border:1px solid #b9cdca; border-radius:5px; background:transparent; }
#display-demo .menu-toggle svg { width:29px; height:29px; fill:none; stroke:#264951; stroke-width:1.6; }
#display-demo .chamber-name { font-size:27px; font-weight:500; }
#display-demo .chamber-name span { display:block; font-size:19px; color:#607779; margin-top:3px; font-weight:400; }
#display-demo .acquisition-state { margin-left:auto; display:flex; align-items:center; gap:9px; font-size:20px; color:#456462; }
#display-demo .acquisition-state i { width:8px; height:8px; border-radius:50%; background:#438f87; }
#display-demo .acquisition-state.is-held { color:#825c34; }
#display-demo .acquisition-state.is-held i { border-radius:1px; background:#aa7945; }
#display-demo .readings { flex:1; min-height:0; }
#display-demo .reading { --signal:#007983; padding:20px 28px; min-width:0; min-height:0; }
#display-demo .reading[data-key="total"] { --signal:#193d4d; }
#display-demo .reading[data-key="h2o"] { --signal:#527d9e; }
#display-demo .reading[data-key="hc"] { --signal:#a66e3c; }
#display-demo .reading-title { display:flex; align-items:baseline; gap:10px; }
#display-demo .reading-title h2 { font-size:29px; font-weight:500; letter-spacing:-.5px; color:var(--signal); }
#display-demo .reading-title h2 sub { font-size:.6em; }
#display-demo .reading-title > span { font-size:21px; color:#627577; }
#display-demo .reading-value { font:500 55px/1.1 'Roboto',sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-1.2px; white-space:nowrap; }
#display-demo .reading-value .unit { font:400 24px Roboto,sans-serif; letter-spacing:0; margin-left:8px; color:#586e71; }
#display-demo .reading-value sup { font-size:.52em; line-height:0; vertical-align:super; margin-left:2px; }
#display-demo .reading-value .multiply { font-weight:400; font-size:.7em; padding-inline:3px; }
#display-demo .reading-value.gas-value { color:var(--signal); }
#display-demo .reading-value.gas-value .unit { margin-left:5px; }
#display-demo .reading-change { font-size:19px; color:#61787a; white-space:nowrap; }
#display-demo .reading-change strong { font-weight:500; color:var(--signal); }
#display-demo .signal-bar { height:9px; border-radius:2px; background:#dae4e0; overflow:hidden; }
#display-demo .signal-bar span { display:block; height:100%; width:0; background:var(--signal); border-radius:2px; transition:width .45s linear; }
#display-demo .trend { min-width:0; min-height:0; position:relative; }
#display-demo .trend svg { width:100%; height:100%; display:block; overflow:visible; }
#display-demo .trend .trend-grid { stroke:#cedbd7; stroke-width:1; vector-effect:non-scaling-stroke; }
#display-demo .trend .trend-area { fill:var(--signal); opacity:.07; }
#display-demo .trend .trend-line { stroke:var(--signal); stroke-width:2.1; fill:none; vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; }
#display-demo .trend .trend-end { fill:var(--signal); }
#display-demo .trend .axis-label { font:17px Roboto,sans-serif; fill:#617679; }
#display-demo .trend-heading { color:#627a7c; font-size:18px; display:flex; justify-content:space-between; gap:15px; }
#display-demo .instrument-footer { height:48px; flex:0 0 48px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid #cedad6; font-size:18px; color:#617678; }
#display-demo .instrument-footer b { font-weight:400; color:#826a47; }
#display-demo .instrument-footer #sample-time { font-family:'Roboto Mono',monospace; }
#display-demo [data-variant="B"] .readings { display:grid; grid-template-rows:1.8fr repeat(3,minmax(0,1fr)); }
#display-demo [data-variant="B"] .reading { display:grid; grid-template-columns:1fr 1.03fr; grid-template-rows:auto 8px; gap:12px 25px; border-top:1px solid #d0dcd7; align-content:center; }
#display-demo [data-variant="B"] .reading-summary { display:flex; flex-direction:column; gap:12px; }
#display-demo [data-variant="B"] .reading-title { display:block; }
#display-demo [data-variant="B"] .reading-title > span { display:none; }
#display-demo [data-variant="B"] .reading-value { font-size:45px; }
#display-demo [data-variant="B"] .signal-bar { grid-column:1; }
#display-demo [data-variant="B"] .trend-block { grid-column:2; grid-row:1/3; display:flex; flex-direction:column; min-height:0; }
#display-demo [data-variant="B"] .trend-heading { margin-bottom:9px; display:block; }
#display-demo [data-variant="B"] .trend-heading > span { display:block; font-size:16px; margin-bottom:4px; }
#display-demo [data-variant="B"] .trend { flex:1; }
#display-demo [data-variant="B"] [data-key="total"] { background:#193d4d; color:#f6faf5; display:flex; flex-direction:column; align-content:stretch; gap:13px; border:0; padding:27px 28px 22px; --signal:#a8e5d6; }
#display-demo [data-variant="B"] [data-key="total"] .reading-summary { flex-direction:column; gap:16px; }
#display-demo [data-variant="B"] [data-key="total"] .reading-title { display:flex; align-items:baseline; }
#display-demo [data-variant="B"] [data-key="total"] .reading-title > span { display:block; color:#b0c8cc; }
#display-demo [data-variant="B"] [data-key="total"] .reading-value { font-size:69px; }
#display-demo [data-variant="B"] [data-key="total"] .reading-value .unit { font-size:25px; color:#c0d9dc; }
#display-demo [data-variant="B"] [data-key="total"] .trend-block { flex:1; width:100%; }
#display-demo [data-variant="B"] [data-key="total"] .trend-heading { display:flex; }
#display-demo [data-variant="B"] [data-key="total"] .trend-heading > span { display:block; color:#b0c8cc; }
#display-demo [data-variant="B"] [data-key="total"] .reading-change { color:#b0c8cc; }
#display-demo [data-variant="B"] [data-key="total"] .signal-bar { display:none; }
#display-demo [data-variant="B"] [data-key="total"] .axis-label,#display-demo [data-variant="B"] [data-key="total"] .scale-label { fill:#aac4c9; }
#display-demo [data-variant="B"] [data-key="total"] .trend-grid { stroke:#385765; }
#display-demo .menu-layer { position:absolute; inset:0; z-index:10; }
#display-demo .menu-shade { position:absolute; inset:0; background:#102d3c65; }
#display-demo .device-menu { position:absolute; inset:16px auto 16px 16px; width:min(460px,calc(100% - 32px)); padding:28px; background:#f6f7f2; box-shadow:8px 0 35px #102a3b24; border:1px solid #c0d2cb; border-radius:6px; display:flex; flex-direction:column; gap:28px; }
#display-demo .device-menu header { display:flex; align-items:center; justify-content:space-between; padding-bottom:23px; border-bottom:1px solid #c5d6cf; }
#display-demo .device-menu header p { font-size:13px; letter-spacing:1px; color:#6c7f80; margin-bottom:6px; }
#display-demo .device-menu h2 { font-size:33px; font-weight:500; }
#display-demo .device-menu button { min-height:56px; border:1px solid #b3cbc4; border-radius:4px; background:#e6efea; font-size:20px; }
#display-demo .device-menu #menu-close { width:56px; font-size:32px; background:transparent; }
#display-demo .unit-setting { display:flex; align-items:center; justify-content:space-between; font-size:21px; gap:20px; }
#display-demo .unit-setting select { font-size:21px; background:white; border:1px solid #aac6be; border-radius:4px; padding:14px; min-width:130px; }
#display-demo .hold-button { display:flex; align-items:center; gap:17px; padding:15px; }
#display-demo .menu-note { color:#607578; font-size:17px; line-height:1.55; }
#display-demo .menu-information { display:grid; gap:10px; padding-block:22px; border-block:1px solid #c5d6cf; font-size:17px; }
#display-demo .menu-information > span { color:#687f7c; }
#display-demo .menu-information strong { font-weight:500; margin-bottom:14px; }
#display-demo .return-button { margin-top:auto; display:flex; justify-content:space-between; align-items:center; padding:15px; }
#display-demo .acquisition-state i { width:12px; height:12px; opacity:.08; }
#display-demo .acquisition-state.has-fresh-sample i,#display-demo .acquisition-state.is-held i { opacity:1; }
#display-demo .direction-indicator { display:none; color:var(--signal); }
#display-demo .instrument-footer { height:76px; flex-basis:76px; }
#display-demo .details-toggle { display:flex; align-items:center; justify-content:center; gap:12px; min-width:166px; height:52px; border:1px solid #a8c6bd; border-radius:5px; background:#e1ede7; color:#175e63; font-size:23px; font-weight:500; }
#display-demo .details-icon { font-size:29px; font-weight:400; }
#display-demo #instrument .signal-bar { height:28px; border-radius:3px; }
#display-demo #instrument .signal-bar span { border-radius:3px; }
#display-demo #instrument .reading { grid-template-rows:auto 28px; }
#display-demo #instrument .reading-title > span { display:none; }
#display-demo #instrument[data-details="false"] .readings { grid-template-rows:1.6fr repeat(3,minmax(0,1fr)); }
#display-demo #instrument[data-details="false"] .reading { display:flex; flex-direction:column; justify-content:center; gap:18px; padding:24px 32px; }
#display-demo #instrument[data-details="false"] .reading-summary { display:grid; grid-template-columns:1fr auto 62px; align-items:center; gap:14px; width:100%; }
#display-demo #instrument[data-details="false"] .reading-title h2 { font-size:48px; }
#display-demo #instrument[data-details="false"] .reading-value { font-size:76px; line-height:1.1; }
#display-demo #instrument[data-details="false"] .reading-value .unit { font-size:29px; margin-left:7px; }
#display-demo #instrument[data-details="false"] .direction-indicator { display:flex; justify-content:flex-end; align-items:center; font-size:58px; line-height:1; }
#display-demo #instrument[data-details="false"] .signal-bar { flex:0 0 28px; width:100%; }
#display-demo #instrument[data-details="false"] [data-key="total"] { gap:0; }
#display-demo #instrument[data-details="false"] [data-key="total"] .reading-summary { grid-template-columns:1fr 62px; grid-template-rows:auto auto; gap:14px; }
#display-demo #instrument[data-details="false"] [data-key="total"] .reading-title { grid-column:1; grid-row:1; }
#display-demo #instrument[data-details="false"] [data-key="total"] .reading-title h2 { font-size:38px; }
#display-demo #instrument[data-details="false"] [data-key="total"] .direction-indicator { grid-column:2; grid-row:1; font-size:52px; }
#display-demo #instrument[data-details="false"] [data-key="total"] .reading-value { grid-column:1/-1; grid-row:2; font-size:104px; }
#display-demo #instrument[data-details="false"] [data-key="total"] .reading-value .unit { display:block; font-size:30px; margin:12px 0 0; }
#display-demo [data-format="landscape"] .instrument-header { height:74px; flex-basis:74px; }
#display-demo [data-format="landscape"] .instrument-footer { height:40px; flex-basis:40px; }
#display-demo [data-format="landscape"][data-variant="B"] .readings { grid-template-columns:.9fr 1.1fr; grid-template-rows:repeat(3,minmax(0,1fr)); }
#display-demo [data-format="landscape"][data-variant="B"] [data-key="total"] { grid-row:1/4; grid-column:1; padding:35px 28px; gap:30px; }
#display-demo [data-format="landscape"][data-variant="B"] [data-key="total"] .reading-title { display:block; }
#display-demo [data-format="landscape"][data-variant="B"] [data-key="total"] .reading-title > span { margin-top:5px; }
#display-demo [data-format="landscape"][data-variant="B"] [data-key="total"] .reading-value { font-size:57px; }
#display-demo [data-format="landscape"][data-variant="B"] [data-key="total"] .reading-value .unit { display:block; margin:14px 0 0; font-size:24px; }
#display-demo [data-format="landscape"][data-variant="B"] .reading:not([data-key="total"]) { grid-column:2; padding:16px 22px; gap:12px 22px; }
#display-demo [data-format="landscape"][data-variant="B"] .reading:not([data-key="total"]) .reading-value { font-size:34px; }
#display-demo [data-format="landscape"][data-variant="B"] .reading-title h2 { font-size:27px; }
#display-demo #instrument[data-details="false"][data-format="landscape"] .readings { grid-template-rows:repeat(3,minmax(0,1fr)); }
#display-demo #instrument[data-details="false"][data-format="landscape"] .reading:not([data-key="total"]) { padding:16px 26px; gap:14px; }
#display-demo #instrument[data-details="false"][data-format="landscape"] .reading:not([data-key="total"]) .reading-value { font-size:64px; }
#display-demo #instrument[data-details="false"][data-format="landscape"] .reading-title h2 { font-size:44px; }
#display-demo #instrument[data-details="false"][data-format="landscape"] [data-key="total"] { padding:30px 25px; }
#display-demo #instrument[data-details="false"][data-format="landscape"] [data-key="total"] .reading-value { font-size:84px; }

/* Website entry point and responsive dialog frame. */
.display-try-button { display:flex; align-items:center; justify-content:center; gap:34px; min-height:48px; padding:10px 23px; margin-top:18px; border:1px solid #00767e; border-radius:3px; background:#00767e; color:#fff; font-size:14px; font-weight:500; }
.display-try-button:hover { background:#075d64; border-color:#075d64; }
.display-try-button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; }
.display-demo { width:min(1030px,calc(100vw - 32px)); height:min(980px,calc(100dvh - 32px)); max-width:none; max-height:none; overflow:hidden; }
.display-demo[open] { display:flex; flex-direction:column; }
.display-demo-heading { flex:none; min-height:65px; display:flex; align-items:center; padding:14px 74px 14px 28px; border-bottom:1px solid #cbd7d4; }
.display-demo-heading h2 { font-size:18px; letter-spacing:-.3px; }
.display-demo-heading h2 span { font-weight:400; color:#526b70; margin-left:9px; }
.display-demo .dialog-close { width:44px; height:44px; top:10px; right:14px; }
.display-demo-body { flex:1; min-height:0; display:grid; grid-template-columns:minmax(240px,.86fr) minmax(0,1.14fr); gap:30px; padding:25px 35px 30px; }
.display-demo-controls { align-self:center; min-width:0; }
.display-demo-intro .small-label { color:#00767e; }
.display-demo-intro h3 { font-size:clamp(27px,3vw,40px); line-height:1.17; letter-spacing:-1px; margin:16px 0 19px; }
.display-demo-intro > p:last-child { font-size:14px; line-height:1.8; color:#526b70; max-width:340px; }
.display-scenario-control { display:grid; grid-template-columns:1fr auto; gap:7px 10px; margin-top:27px; }
.display-scenario-control label { grid-column:1/-1; font-size:12px; color:#526b70; }
.display-scenario-control select { min-width:0; width:100%; border:1px solid #a8beba; border-radius:3px; color:#1c414b; background:#fff; padding:11px 7px; font:500 14px Roboto,'Segoe UI',sans-serif; min-height:44px; }
#display-reset { min-height:44px; min-width:44px; background:transparent; border:1px solid #a8beba; border-radius:3px; color:#31545c; display:flex; align-items:center; justify-content:center; }
#display-reset span { display:none; }
#display-reset svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; }
.display-scenario-note { font-size:12px; color:#526b70; line-height:1.65; margin-top:12px; min-height:60px; max-width:340px; }
.display-screen-stage { min-width:0; min-height:0; display:flex; align-items:center; justify-content:center; }
#display-demo .device-shell { flex:none; }
#display-demo .instrument { --ink:#192f3b; --paper:#f3f3ef; line-height:1.2; }
#display-demo .instrument button,#display-demo .instrument select { font-family:inherit; color:inherit; }
#display-demo .instrument button:focus-visible,#display-demo select:focus-visible { outline:3px solid #00a5ae; outline-offset:3px; }
#display-demo #instrument .instrument-header { flex-basis:max(92px,calc(var(--touch-target,56px) + 16px)); height:auto; }
#display-demo #instrument .instrument-footer { flex-basis:max(76px,calc(var(--touch-target,56px) + 16px)); height:auto; }
#display-demo .menu-toggle { width:max(56px,var(--touch-target,56px)); height:max(56px,var(--touch-target,56px)); flex:none; }
#display-demo .details-toggle { min-height:var(--touch-target,56px); font-size:max(23px,var(--control-font,23px)); }
#display-demo .device-menu button,#display-demo .unit-setting select { min-height:var(--touch-target,56px); font-size:max(21px,var(--control-font,21px)); }
#display-demo .device-menu { overflow:auto; }
#display-demo .device-menu #menu-close { width:var(--touch-target,56px); min-width:56px; display:grid; place-items:center; }
#display-demo #menu-close svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.6; }
#display-demo .device-menu h2 { line-height:1.2; }
#display-demo #instrument[data-details="true"] .reading:not([data-key="total"]) { padding-block:12px; gap:8px 25px; }
#display-demo #instrument[data-details="true"] .reading:not([data-key="total"]) .reading-summary { gap:8px; }
#display-demo #instrument[data-details="true"][data-format="landscape"] .reading:not([data-key="total"]) { padding:6px 22px; grid-template-rows:auto 14px; gap:6px 22px; }
#display-demo #instrument[data-details="true"][data-format="landscape"] .reading:not([data-key="total"]) .reading-summary { flex-direction:row; align-items:center; justify-content:space-between; }
#display-demo #instrument[data-details="true"][data-format="landscape"] .reading:not([data-key="total"]) .reading-title h2 { font-size:24px; }
#display-demo #instrument[data-details="true"][data-format="landscape"] .signal-bar { height:14px; }
#display-demo #instrument[data-details="true"][data-format="landscape"] .reading:not([data-key="total"]) .trend-heading { margin-bottom:0; }
#display-demo #instrument[data-details="true"][data-format="landscape"] .reading:not([data-key="total"]) .reading-change { font-size:16px; }
@media(max-width:700px) {
  .display-demo { width:calc(100vw - 12px); height:calc(100dvh - 12px); }
  .display-demo-heading { min-height:57px; padding:10px 68px 10px 16px; }
  .display-demo-heading h2 { font-size:16px; }
  .display-demo .dialog-close { top:6px; right:8px; }
  .display-demo-body { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); padding:10px 14px 14px; gap:8px; }
  .display-demo-intro { display:none; }
  .display-scenario-control { margin:0; grid-template-columns:auto minmax(0,1fr) 44px; align-items:center; gap:8px; }
  .display-scenario-control label { grid-column:auto; }
  .display-scenario-control select { font-size:13px; }
  .display-scenario-note { font-size:11px; line-height:1.5; margin-top:7px; min-height:33px; max-width:none; }
}
@media(max-height:560px) and (min-width:701px) {
  .display-demo-heading { min-height:55px; }
  .display-demo-body { padding:15px 25px; gap:18px; }
  .display-demo-intro h3 { font-size:25px; margin:8px 0; }
  .display-demo-intro h3 br { display:none; }
  .display-demo-intro > p:last-child { font-size:12px; line-height:1.6; }
  .display-scenario-control { margin-top:14px; }
  .display-scenario-note { min-height:0; font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { #display-demo .signal-bar span { transition:none; } }