@font-face {
  font-family: "Rufina";
  src: url("/fonts/Rufina-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Kiwi Maru";
  src: url("/fonts/KiwiMaru-Light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

:root {
  --paper: #f8f8f6;
  --ink: #0b1916;
  --muted: #61666d;
  --rule: #c8c9c6;
  --grid: #d8d9d5;
  --green: #328757;
  --green-soft: #e5eee7;
  --watch: #8b651e;
  --vermilion: #bf5634;
  --blue-series: #3d6e8b;
  --control: #f8f8f6;
  --plot-fill: #f8f8f6;
  color-scheme: light;
  font-family: "Kiwi Maru", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: weight;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { min-width: 320px; min-height: 100%; margin: 0; background: var(--paper); }
body { selection-background-color: var(--green-soft); }
#app { min-height: 100vh; }

.comp-frame {
  position: relative;
  width: min(100%, 1505px);
  aspect-ratio: 1505 / 1045;
  margin-inline: auto;
  overflow: hidden;
  background: var(--paper);
}

.region { position: absolute; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

:root {
  --paper: #f8f8f6;
  --ink: #0b1916;
  --muted: #61666d;
  --rule: #c8c9c6;
  --grid: #d8d9d5;
  --green: #328757;
  --green-soft: #e5eee7;
  --vermilion: #bf5634;
  --plot-fill: #f8f8f6;
  color: var(--ink);
  color-scheme: light;
}

:root[data-theme="night"] {
  --paper: #111c19;
  --ink: #e4eee7;
  --muted: #b3beb8;
  --rule: #485650;
  --grid: #34413b;
  --green: #83c89a;
  --green-soft: #24372d;
  --watch: #dfbd71;
  --vermilion: #ef8a62;
  --blue-series: #8bbce0;
  --plot-fill: #111c19;
  color-scheme: dark;
}

html { background: var(--paper); caret-color: var(--green); }
body { color: var(--ink); background: var(--paper); font-family: "Kiwi Maru", sans-serif; }
button { color: inherit; font: inherit; }
button:focus-visible, [tabindex="-1"]:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
::selection { color: var(--ink); background: var(--green-soft); }
* { scrollbar-color: var(--rule) var(--paper); scrollbar-width: thin; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: var(--paper); }
*::-webkit-scrollbar-thumb { border: 2px solid var(--paper); border-radius: 8px; background: var(--rule); }

.comp-frame {
  width: min(100%, 1505px);
  max-width: 1505px;
  margin-inline: auto;
  container-type: inline-size;
  color: var(--ink);
  background: var(--paper);
  animation: arrive 460ms cubic-bezier(.18, .72, .2, 1) both;
}

@keyframes arrive { from { opacity: .72; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.desktop-dashboard .r-header,
.desktop-dashboard .r-measurement-strip,
.desktop-dashboard .r-trend-shell,
.desktop-dashboard .r-chart-panel,
.desktop-dashboard .r-samples-panel { display: contents; }

.desktop-dashboard::before {
  position: absolute;
  top: 7.56%;
  left: 2.13%;
  width: 95.75%;
  border-top: 1px solid var(--rule);
  content: "";
}

.r-brand { color: var(--ink); font-family: "Rufina", serif; font-size: min(1.99cqw, 30px); font-weight: 400; line-height: 1.05; white-space: nowrap; }
.r-page-title { margin: 0; color: var(--ink); font-family: "Rufina", serif; font-size: min(4.92cqw, 74px); font-weight: 400; line-height: 1.02; letter-spacing: -.025em; white-space: nowrap; }
:root[lang="id"] .r-page-title { font-size: min(3.85cqw, 58px); }
.r-example-label { color: var(--muted); font-size: min(1.46cqw, 22px); font-weight: 400; letter-spacing: .11em; line-height: 1.2; white-space: nowrap; }
:root[lang="id"] .r-example-label { font-size: min(1.13cqw, 17px); }
.r-phase-chip { position: absolute; top: 13.1%; left: 54.6%; display: flex; width: 42%; height: 3.1%; align-items: center; justify-content: flex-end; gap: min(.65cqw, 10px); overflow: hidden; color: var(--muted); font-size: min(1.08cqw, 16px); letter-spacing: .065em; line-height: 1.2; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.r-phase-chip::before { width: min(.62cqw, 9px); height: min(.62cqw, 9px); flex: 0 0 min(.62cqw, 9px); border-radius: 50%; background: var(--green); content: ""; }
.r-phase-chip[data-period="night"]::before { background: var(--vermilion); }
.r-outdoor-summary { position: absolute; top: 16.35%; right: 2.7%; display: flex; align-items: baseline; justify-content: flex-end; gap: min(.85cqw, 13px); color: var(--muted); font-size: max(10px, min(1cqw, 15px)); line-height: 1.15; white-space: nowrap; }
.r-relay-commands { position: absolute; top: 17.5%; right: 55%; left: 2.66%; display: grid; height: 2.35%; align-content: space-between; overflow: hidden; color: var(--muted); font-size: min(.8cqw, 11px); line-height: 1; text-align: left; white-space: nowrap; }
.relay-command-heading-row { display: flex; min-width: 0; align-items: baseline; justify-content: flex-start; gap: min(.55cqw, 8px); }
.relay-command-heading, .relay-command-item strong { color: var(--ink); font-family: system-ui, sans-serif; font-size: .96em; font-weight: 700; letter-spacing: .035em; }
.relay-command-note { color: var(--muted); font-size: .84em; }
.relay-command-context { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.relay-command-item { display: flex; min-width: 0; align-items: baseline; justify-content: flex-start; gap: min(.5cqw, 8px); }
.relay-command-item > span { min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; }
.relay-command-item > .relay-command-heading { color: var(--ink); }
.relay-command-item strong[data-requested="on"] { color: var(--green); }
.relay-command-item strong[data-requested="off"] { color: var(--muted); }
.relay-command-item strong[data-requested="stale"], .relay-command-item strong[data-requested="unavailable"] { color: var(--vermilion); }
.outdoor-summary-label { color: var(--blue-series); font-family: system-ui, sans-serif; font-size: .88em; font-weight: 600; letter-spacing: .055em; }
.outdoor-summary-value { display: inline-flex; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; }
.outdoor-summary-value strong { color: var(--ink); font-family: "Rufina", serif; font-size: 1.25em; font-weight: 400; }
.outdoor-summary-value small { color: var(--muted); font-size: .82em; }
.outdoor-summary-state { color: var(--muted); font-family: system-ui, sans-serif; font-size: .78em; font-weight: 600; letter-spacing: .04em; }
.outdoor-summary-state[data-outdoor-freshness="fresh"] { color: var(--green); }
.outdoor-summary-state[data-outdoor-freshness="stale"] { color: var(--vermilion); }
.metric-guidance { display: flex; min-width: 0; flex-direction: column; justify-content: flex-start; overflow: hidden; line-height: 1.15; }
.metric-guidance strong { display: block; overflow: hidden; color: var(--muted); font-size: min(.96cqw, 14px); font-weight: 600; letter-spacing: .035em; text-overflow: ellipsis; white-space: nowrap; }
.metric-guidance small { display: block; color: var(--muted); font-size: min(.83cqw, 12px); line-height: 1.12; white-space: normal; }
.metric-guidance[data-level="good"] strong { color: var(--green); }
.metric-guidance[data-level="watch"] strong { color: var(--watch); }
.metric-guidance[data-level="alert"] strong { color: var(--vermilion); }
.environment-gap { display: flex; min-width: 0; align-items: center; gap: min(.35cqw, 5px); overflow: hidden; color: var(--muted); font-family: system-ui, sans-serif; font-size: min(.83cqw, 12px); font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }
.environment-gap > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.environment-gap svg { width: 1em; height: 1em; flex: 0 0 1em; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.environment-gap[data-direction="down"] svg { transform: rotate(180deg); }
.environment-gap[data-direction="level"] svg { transform: rotate(90deg); }
.environment-gap[data-direction="waiting"] svg { visibility: hidden; }
.environment-gap[data-direction="up"][data-freshness="fresh"] { color: var(--vermilion); }
.environment-gap[data-direction="down"][data-freshness="fresh"] { color: var(--blue-series); }
.r-temp-gap { position: absolute; top: 38.6%; left: 43.85%; width: 23.9%; height: 1.6%; }
.r-rh-gap { position: absolute; top: 38.6%; left: 72.89%; width: 25%; height: 1.6%; }
.r-co2-guidance { position: absolute; top: 35.04%; left: 2.66%; width: 35.7%; height: 3.46%; }
.r-temp-guidance { position: absolute; top: 35.04%; left: 43.85%; width: 23.9%; height: 3.46%; }
.r-rh-guidance { position: absolute; top: 35.04%; left: 72.89%; width: 25%; height: 3.46%; }
.r-live-nav, .r-history-nav, .segmented-control button { padding: 0; border: 0; background: transparent; color: var(--muted); font-family: system-ui, sans-serif; font-size: min(1.46cqw, 22px); font-weight: 600; letter-spacing: .06em; cursor: pointer; }
.r-live-nav, .r-history-nav { display: flex; align-items: center; justify-content: center; }
.nav-control::after { position: absolute; right: 0; bottom: 0; left: 0; height: min(.28cqw, 4px); background: transparent; content: ""; }
.nav-control.is-selected { color: var(--ink); }
.nav-control.is-selected::after { background: var(--green); }
.r-theme-toggle, .r-language-toggle { display: flex; align-items: center; justify-content: center; gap: min(1.72cqw, 26px); }
.segmented-control button { position: relative; height: 100%; }
.segmented-control button.is-selected { color: var(--ink); }
.segmented-control button.is-selected::after { position: absolute; right: 0; bottom: 0; left: 0; height: min(.28cqw, 4px); background: var(--green); content: ""; }
.r-language-toggle { gap: min(2.35cqw, 35px); }
.r-language-toggle button { font-size: min(1.46cqw, 22px); }
.r-header-theme-divider, .r-header-language-divider { background: var(--rule); }
.status-line { display: flex; align-items: center; gap: min(1.2cqw, 18px); color: var(--muted); font-size: min(1.35cqw, 20px); white-space: nowrap; }
.status-line::before { flex: 0 0 min(1.05cqw, 16px); width: min(1.05cqw, 16px); height: min(1.05cqw, 16px); border-radius: 50%; background: var(--green); content: ""; }
.status-line[data-connection="warming"]::before { background: #b98943; }
.status-line[data-connection="offline"]::before { background: var(--vermilion); }
.metric-label { color: var(--muted); font-size: min(1.40cqw, 21px); font-weight: 400; letter-spacing: .09em; line-height: 1.2; white-space: nowrap; }
.r-co2-label { color: var(--ink); font-size: min(1.73cqw, 26px); font-weight: 600; letter-spacing: .04em; }
.metric-value { color: var(--ink); font-family: "Rufina", serif; font-size: min(6.91cqw, 104px); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.025em; line-height: .95; white-space: nowrap; }
.r-co2-value { font-size: min(7.44cqw, 112px); }
.metric-value.is-empty { color: var(--muted); font-family: "Rufina", serif; font-size: min(4.8cqw, 72px); font-weight: 400; letter-spacing: 0; }
.metric-unit { color: var(--ink); font-family: "Rufina", serif; font-size: min(2.26cqw, 34px); line-height: 1.1; white-space: nowrap; }
.metric-value.is-wide:not(.is-empty) { font-size: min(5.45cqw, 82px); }
.metric-reading-group { position: absolute; display: flex; align-items: baseline; gap: min(.7cqw, 10px); white-space: nowrap; }
.r-co2-reading { left: var(--r-co2-value-x); top: var(--r-co2-value-y); }
.r-temp-reading { left: var(--r-temp-value-x); top: var(--r-temp-value-y); gap: min(.13cqw, 2px); }
.r-temp-reading .r-temp-value { min-width: min(14.15cqw, 213px); }
.r-humidity-reading { left: var(--r-humidity-value-x); top: var(--r-humidity-value-y); gap: min(.07cqw, 1px); }
.r-humidity-reading .r-humidity-value { min-width: min(9.24cqw, 139px); }
.r-temp-reading.dual-sensor-reading { left: var(--r-temp-value-x); top: var(--r-temp-value-y); width: 23.7%; }
.r-humidity-reading.dual-sensor-reading { left: var(--r-humidity-value-x); top: var(--r-humidity-value-y); width: 25%; }
.dual-sensor-reading { position: absolute; display: grid; height: 8.1%; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: min(.55cqw, 8px); white-space: normal; }
.sensor-reading { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; line-height: 1; }
.sensor-source { color: var(--muted); font-family: system-ui, sans-serif; font-size: min(.82cqw, 12px); font-weight: 600; letter-spacing: .06em; line-height: 1.2; }
.sensor-reading-value { display: flex; min-width: 0; align-items: baseline; gap: min(.2cqw, 3px); }
.sensor-reading-value strong { color: var(--ink); font-family: "Rufina", serif; font-size: min(3.75cqw, 56px); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.025em; line-height: 1; white-space: nowrap; }
.sensor-reading-value strong.is-empty { color: var(--muted); font-size: min(3.45cqw, 52px); letter-spacing: 0; }
.sensor-reading-value strong.is-wide:not(.is-empty) { font-size: min(3.15cqw, 47px); }
.sensor-reading-value small { color: var(--muted); font-family: "Rufina", serif; font-size: min(1.13cqw, 17px); white-space: nowrap; }
.metric-reading-group > .region { position: static; width: auto; height: auto; }
.rule { background: var(--rule); }

.co2-ruler { pointer-events: none; }
.ruler-track { position: absolute; top: 24%; right: .55%; left: .55%; border-top: 1px solid var(--muted); }
.ruler-tick { position: absolute; top: 2%; width: 2px; height: 42%; background: var(--muted); }
.ruler-tick-left { left: .55%; }
.ruler-tick-one { left: 25.275%; }
.ruler-tick-two { left: 50%; }
.ruler-tick-three { left: 74.725%; }
.ruler-tick-right { left: 99.45%; }
.co2-ruler .ruler-label { position: absolute; top: 48%; width: auto; height: auto; color: var(--muted); font-size: min(1.4cqw, 21px); line-height: 1.05; }
.co2-ruler .r-range-min { left: .55%; transform: translateX(-15%); }
.co2-ruler .r-range-mid-one { left: 25.275%; transform: translateX(-50%); }
.co2-ruler .r-range-mid-two { left: 50%; transform: translateX(-50%); }
.co2-ruler .r-range-mid-three { left: 74.725%; transform: translateX(-50%); }
.co2-ruler .r-range-max { left: 99.45%; transform: translateX(-85%); }
.ruler-marker { position: absolute; top: 0; left: var(--ruler-position, 50%); display: flex; width: max-content; height: 100%; align-items: flex-start; flex-direction: column; transform: translateX(-50%); color: var(--vermilion); font-size: min(1.46cqw, 22px); font-weight: 600; line-height: 1; }
.ruler-marker[hidden] { display: none; }
.ruler-marker-dot { position: absolute; top: 24%; left: 50%; width: min(.95cqw, 14px); height: min(.95cqw, 14px); border-radius: 50%; background: var(--vermilion); transform: translate(-50%, -50%); }
.ruler-marker-dot::after { position: absolute; top: 100%; left: 50%; width: 1px; height: min(1.13cqw, 17px); background: var(--vermilion); content: ""; }
.ruler-marker [data-ruler-value] { position: absolute; top: calc(24% - 1em - 10px); left: 50%; transform: translateX(-50%); }
.ruler-marker::before { position: absolute; top: 24%; left: 50%; height: 43%; border-left: 1px solid var(--vermilion); content: ""; }

.metric-tabs { display: flex; align-items: stretch; gap: min(1.2cqw, 18px); border-bottom: 1px solid var(--rule); }
.metric-tabs button { position: relative; flex: 0 0 auto; min-width: min(4.8cqw, 72px); padding: 0 min(.5cqw, 8px); border: 0; background: transparent; color: var(--muted); font-family: system-ui, sans-serif; font-size: min(1.33cqw, 20px); font-weight: 600; letter-spacing: .06em; white-space: nowrap; cursor: pointer; }
.metric-tabs button.is-selected { color: var(--ink); }
.metric-tabs button.is-selected::after { position: absolute; right: 0; bottom: -1px; left: 0; height: min(.27cqw, 4px); background: var(--green); content: ""; }
.r-trend-mode-buttons { position: absolute; top: var(--r-metric-tabs-y); left: 48.8%; display: flex; width: 16.2%; height: var(--r-metric-tabs-h); align-items: center; justify-content: flex-end; gap: min(.55cqw, 8px); }
.r-trend-mode-buttons[hidden] { display: none; }
.r-trend-mode-buttons button { min-height: clamp(24px, 2.3cqw, 34px); padding: 0 clamp(8px, .75cqw, 12px); border: 1px solid var(--rule); border-radius: 4px; background: transparent; color: var(--muted); font-family: system-ui, sans-serif; font-size: clamp(10px, .9cqw, 13px); font-weight: 500; letter-spacing: .025em; white-space: nowrap; cursor: pointer; }
.r-trend-mode-buttons button.is-selected { border-color: var(--green); background: var(--green-soft); color: var(--ink); font-weight: 650; }
.range-control { padding: 0; border: 0; border-bottom: 1px solid var(--rule); background: transparent; color: var(--muted); font-family: system-ui, sans-serif; font-size: min(1.27cqw, 19px); font-weight: 400; letter-spacing: .035em; cursor: pointer; }
.range-control.is-selected { border-bottom: min(.27cqw, 4px) solid var(--vermilion); color: var(--ink); font-weight: 600; }
.chart-heading { margin: 0; color: var(--ink); font-size: min(1.59cqw, 24px); font-weight: 600; letter-spacing: .055em; line-height: 1.1; white-space: nowrap; }
.chart-unit { color: var(--muted); font-size: min(1cqw, 15px); line-height: 1; white-space: nowrap; }
.y-labels { display: flex; align-items: stretch; justify-content: space-between; flex-direction: column; color: var(--muted); font-size: min(1.33cqw, 20px); line-height: 1; text-align: right; }
.chart-plot { overflow: hidden; background: var(--plot-fill); }
.chart-plot canvas { display: block; width: 100%; height: 100%; }
.chart-empty { position: absolute; top: 50%; right: 4%; left: 4%; margin: 0; color: var(--muted); font-size: min(1.2cqw, 18px); text-align: center; transform: translateY(-50%); }
.chart-empty[hidden] { display: none; }
.r-series-legend { position: absolute; top: 56.55%; left: 40%; display: flex; width: 22%; height: 2.8%; align-items: center; gap: min(1.2cqw, 18px); color: var(--muted); font-family: system-ui, sans-serif; font-size: min(.93cqw, 14px); letter-spacing: .035em; white-space: nowrap; }
.r-series-legend[hidden], .mobile-series-legend[hidden] { display: none; }
.r-series-legend > span, .mobile-series-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.r-series-legend > span::before, .mobile-series-legend > span::before { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; content: ""; }
.legend-scd41::before { background: var(--green); }
.legend-dht22::before { background: var(--vermilion); }
.legend-outdoor::before { background: var(--blue-series); }
.legend-gap { color: var(--vermilion); }
.legend-gap::before { background: var(--vermilion); }
.series-legend-inside[hidden], .series-legend-outside[hidden], .series-legend-gap[hidden] { display: none; }
.x-label { color: var(--muted); font-size: min(1.33cqw, 20px); line-height: 1; white-space: nowrap; }
.samples-heading { margin: 0; color: var(--ink); font-size: min(1.59cqw, 24px); font-weight: 600; letter-spacing: .08em; line-height: 1.1; white-space: nowrap; }
.desktop-empty-samples { position: absolute; top: 64.4%; left: 67.31%; width: 30.3%; height: 3.83%; margin: 0; color: var(--muted); font-size: min(1.2cqw, 18px); line-height: 1.1; }
.desktop-empty-samples[hidden] { display: none; }
.table-head { color: var(--muted); font-size: min(1.26cqw, 19px); letter-spacing: .02em; white-space: nowrap; }
.table-rule { background: var(--rule); }
.sample-value { color: var(--ink); font-size: min(1.66cqw, 25px); font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
.desktop-dashboard [data-sample-field="temperature"], .desktop-dashboard [data-sample-field="humidity"] { overflow: hidden; font-size: min(1.13cqw, 17px); text-overflow: clip; }
.r-sample-row-1-time, .r-sample-row-2-time, .r-sample-row-3-time, .r-sample-row-4-time { color: var(--ink); }
.footer-note { color: var(--muted); font-size: min(1.40cqw, 21px); line-height: 1.1; white-space: nowrap; }
.r-pins-footer { text-align: right; }
.r-sensor-footer { width: 8%; font-size: min(.72cqw, 11px); }
.r-interval-footer { left: 76.5%; width: 7.6%; font-size: min(.82cqw, 12px); }
.r-pins-footer { font-size: min(.72cqw, 11px); }
.r-sample-source-order { position: absolute; top: 54.1%; right: 2.7%; width: 30.3%; color: var(--muted); font-size: min(.86cqw, 13px); line-height: 1.2; text-align: right; white-space: nowrap; }
.r-chart-samples-divider { border-left: 1px solid var(--rule); background: transparent; }
/* Keep narrow marks inside the measured comp regions instead of filling their padding. */
.r-metric-divider-two { background: transparent; }
.r-metric-divider-two::before { position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: var(--rule); content: ""; }
.co2-ruler .r-range-max { left: 99.45%; transform: translateX(-85%); }
.ruler-tick { width: 2px; background: #787878; }
.ruler-tick-left, .ruler-tick-one { transform: translateX(1px); }
.table-rule { height: 2px; }
.r-sample-rule-top { background: #c2c3c0; }
.r-sample-rule-header { background: #e4e3e0; }
.r-sample-rule-one { background: #e2e2dd; }
.r-sample-rule-two { background: #e2e1dd; }
.r-sample-rule-three { background: #e6e5e2; transform: translateY(-1px); }
.r-sample-rule-four { background: #e3e3df; transform: translateY(-1px); }
.r-chart-samples-divider { border: 0; background: transparent; }
.r-chart-samples-divider::before { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--rule); content: ""; }
.co2-ruler .r-range-marker { top: 0; left: var(--ruler-position); width: max-content; height: 100%; transform: translateX(-50%); }
.ruler-marker-dot::after { background: #787878; }
.ruler-marker::before { display: none; }
.mobile-dashboard { display: none; }

@media (max-width: 760px) {
  body { min-width: 320px; }
  #app { min-height: 100vh; }
  .desktop-dashboard { display: none; }
  .mobile-dashboard {
    display: block;
    width: min(100%, 720px);
    margin-inline: auto;
    padding: 18px 20px 28px;
    color: var(--ink);
  background: var(--paper);
    animation: arrive 460ms cubic-bezier(.18, .72, .2, 1) both;
  }
  .mobile-header { padding-bottom: 13px; border-bottom: 1px solid var(--rule); }
  .mobile-brand { color: var(--ink); font-family: "Rufina", serif; font-size: 20px; }
  .mobile-status { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.3; }
  .mobile-status::before { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--green); content: ""; }
  .mobile-status[data-connection="warming"]::before { background: #b98943; }
  .mobile-status[data-connection="offline"]::before { background: var(--vermilion); }
  .mobile-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
  .mobile-nav, .mobile-options, .mobile-options .segmented-control { display: flex; align-items: center; }
  .mobile-nav { gap: 14px; }
  .mobile-nav button, .mobile-options button { position: relative; padding: 0 0 5px; border: 0; background: transparent; color: var(--muted); font-family: system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .05em; cursor: pointer; }
  .mobile-nav button.is-selected, .mobile-options button.is-selected { color: var(--ink); }
  .mobile-nav button.is-selected::after, .mobile-options button.is-selected::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--green); content: ""; }
  .mobile-options { gap: 12px; }
  .mobile-options .segmented-control { gap: 8px; }
  .mobile-options .segmented-control + .segmented-control { padding-left: 10px; border-left: 1px solid var(--rule); }
  .mobile-title { margin: 26px 0 4px; color: var(--ink); font-family: "Rufina", serif; font-size: clamp(36px, 10vw, 54px); font-weight: 400; line-height: 1.06; letter-spacing: -.025em; }
  .mobile-reading-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 3px 10px; margin-bottom: 14px; }
  .mobile-eyebrow { margin: 0; color: var(--muted); font-size: 11px; letter-spacing: .1em; }
  .mobile-phase { position: static; display: flex; width: auto; height: auto; align-items: center; gap: 6px; overflow: visible; font-size: 10px; letter-spacing: .04em; }
  .mobile-phase::before { width: 7px; height: 7px; flex-basis: 7px; }
  .mobile-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 0 15px; border-bottom: 1px solid var(--rule); }
  .mobile-metric { display: grid; min-width: 0; align-content: start; grid-template-rows: 26px auto; padding: 0 10px; }
  .mobile-metric:first-child { padding-left: 0; }
  .mobile-metric + .mobile-metric { border-left: 1px solid var(--rule); }
  .mobile-metric > span { color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: .045em; line-height: 1.25; }
  .mobile-value-unit { display: flex; min-width: 0; align-items: baseline; gap: 4px; white-space: nowrap; }
  .mobile-metric strong { overflow: hidden; color: var(--ink); font-family: "Rufina", serif; font-size: clamp(18px, 6.2vw, 30px); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.025em; line-height: 1.15; text-overflow: clip; }
  .mobile-metric strong.is-wide:not(.is-empty) { font-size: clamp(16px, 5vw, 23px); }
  .mobile-metric strong.is-empty { color: var(--muted); font-size: 24px; font-weight: 400; letter-spacing: 0; }
  .mobile-metric small { flex: 0 0 auto; color: var(--muted); font-family: "Rufina", serif; font-size: 13px; }
  .mobile-dual-values { display: grid; gap: 3px; min-width: 0; }
  .mobile-dual-values > div { display: flex; min-width: 0; align-items: baseline; gap: 2px; white-space: nowrap; }
  .mobile-metric .mobile-dual-values small:first-child { width: 30px; color: var(--muted); font-family: system-ui, sans-serif; font-size: 6px; letter-spacing: .01em; }
  .mobile-metric .mobile-dual-values small:last-child { color: var(--muted); font-size: 9px; }
  .mobile-metric .mobile-dual-values strong { flex: 0 1 auto; font-size: clamp(12px, 4vw, 16px); letter-spacing: -.04em; }
  .mobile-metric .mobile-dual-values strong.is-empty { font-size: 15px; }
  .mobile-metric .mobile-dual-values strong.is-wide:not(.is-empty) { font-size: clamp(10px, 3.4vw, 13px); }
  .mobile-outdoor-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0 10px; border-bottom: 1px solid var(--rule); }
  .mobile-outdoor-summary > div:first-child { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
  .mobile-outdoor-summary > div:first-child strong { color: var(--blue-series); font-family: system-ui, sans-serif; font-size: 9px; letter-spacing: .045em; }
  .mobile-outdoor-summary > div:first-child span { color: var(--muted); font-family: system-ui, sans-serif; font-size: 8px; font-weight: 600; letter-spacing: .04em; }
  .mobile-outdoor-summary [data-outdoor-freshness="fresh"] { color: var(--green) !important; }
  .mobile-outdoor-summary [data-outdoor-freshness="stale"] { color: var(--vermilion) !important; }
  .mobile-outdoor-values { display: flex; flex: 0 0 auto; gap: 18px; }
  .mobile-outdoor-values > span { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
  .mobile-outdoor-values b { color: var(--ink); font-family: "Rufina", serif; font-size: 20px; font-weight: 400; font-variant-numeric: tabular-nums; }
  .mobile-outdoor-values b.is-empty { color: var(--muted); }
  .mobile-outdoor-values small { color: var(--muted); font-family: "Rufina", serif; font-size: 10px; }
  .mobile-relay-commands { display: grid; gap: 6px; margin-top: 8px; padding: 8px 0 9px; border-bottom: 1px solid var(--rule); }
  .mobile-relay-commands .relay-command-heading-row { flex-wrap: wrap; gap: 2px 8px; }
  .mobile-relay-commands .relay-command-heading { font-size: 9px; letter-spacing: .045em; }
  .mobile-relay-commands .relay-command-note { font-size: 8px; text-align: left; }
  .mobile-relay-commands .relay-command-item { gap: 8px; font-family: system-ui, sans-serif; font-size: 9px; }
  .mobile-relay-commands .relay-command-item > span { overflow: hidden; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-relay-commands .relay-command-item strong { font-size: 9px; }
  .mobile-guidance { display: grid; gap: 8px; margin: 11px 0 0; padding-bottom: 13px; border-bottom: 1px solid var(--rule); }
  .mobile-guidance > div { display: grid; min-width: 0; grid-template-columns: 74px minmax(0, 1fr); align-items: baseline; gap: 8px; }
  .mobile-guidance > div > b { color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: .035em; }
  .mobile-guidance .metric-guidance { min-width: 0; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 1px 8px; overflow: visible; }
  .mobile-guidance .metric-guidance strong { font-size: 10px; }
  .mobile-guidance .metric-guidance small { font-size: 10px; }
  .mobile-guidance .environment-gap { grid-column: 2; margin-top: 1px; font-size: 9px; white-space: normal; }
  .mobile-ruler { position: relative; display: flex; justify-content: space-between; margin: 29px 1px 0; padding-top: 20px; color: var(--muted); font-size: 11px; }
  .mobile-ruler-track { position: absolute; top: 5px; right: 1px; left: 1px; border-top: 1px solid var(--muted); }
  .mobile-ruler-tick { position: absolute; top: -6px; width: 1px; height: 11px; background: var(--muted); }
  .mobile-ruler-tick-start { left: 0; }
  .mobile-ruler-tick-quarter { left: 25%; }
  .mobile-ruler-tick-middle { left: 50%; }
  .mobile-ruler-tick-three-quarter { left: 75%; }
  .mobile-ruler-tick-end { left: 100%; }
  .mobile-ruler-marker { position: absolute; top: 0; left: var(--ruler-position, 50%); display: block; width: 0; height: 0; color: var(--vermilion); font-size: 11px; }
  .mobile-ruler-marker[hidden] { display: none; }
  .mobile-ruler-marker i { position: absolute; top: 0; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--vermilion); transform: translateX(-50%); }
  .mobile-ruler-marker b { position: absolute; top: calc(5px - 1em - 10px); left: 0; font-weight: 600; white-space: nowrap; transform: translateX(-50%); }

  .mobile-trends { margin-top: 27px; border-top: 1px solid var(--rule); }
  .mobile-trend-toolbar { display: flex; min-width: 0; height: 43px; align-items: stretch; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--rule); }
  .mobile-tabs { display: flex; min-width: 0; align-items: stretch; gap: 12px; }
  .mobile-tabs button { position: relative; padding: 0 1px; border: 0; background: transparent; color: var(--muted); font-family: system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .055em; white-space: nowrap; cursor: pointer; }
  .mobile-tabs button.is-selected { color: var(--ink); }
  .mobile-tabs button.is-selected::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; background: var(--green); content: ""; }
  .mobile-subtabs { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; margin-left: auto; }
  .mobile-subtabs[hidden] { display: none; }
  .mobile-subtabs button { min-height: 28px; padding: 0 7px; border: 1px solid var(--rule); border-radius: 4px; background: transparent; color: var(--muted); font-family: system-ui, sans-serif; font-size: 9px; font-weight: 500; letter-spacing: .03em; white-space: nowrap; cursor: pointer; }
  .mobile-subtabs button.is-selected { border-color: var(--green); background: var(--green-soft); color: var(--ink); font-weight: 650; }
  .mobile-ranges { display: flex; overflow-x: auto; gap: 18px; margin-inline: -20px; padding: 0 20px; border-bottom: 1px solid var(--rule); scrollbar-width: none; }
  .mobile-ranges::-webkit-scrollbar { display: none; }
  .mobile-ranges button { position: relative; flex: 0 0 auto; min-height: 39px; padding: 0 0 1px; border: 0; background: transparent; color: var(--muted); font-family: system-ui, sans-serif; font-size: 11px; white-space: nowrap; cursor: pointer; }
  :root[lang="id"] .mobile-ranges { gap: 12px; }
  :root[lang="id"] .mobile-ranges button { font-size: 10px; }
  .mobile-ranges button.is-selected { color: var(--ink); font-weight: 600; }
  .mobile-ranges button.is-selected::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; background: var(--vermilion); content: ""; }
  .mobile-chart-title { margin: 15px 0 2px; color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: .035em; }
  .mobile-chart-unit { color: var(--muted); font-size: 11px; }
  .mobile-series-legend { display: flex; gap: 14px; margin-top: 5px; color: var(--muted); font-family: system-ui, sans-serif; font-size: 10px; letter-spacing: .03em; }
  .mobile-series-legend > span::before { width: 7px; height: 7px; flex-basis: 7px; }
  .mobile-series-legend .legend-outdoor { color: var(--blue-series); }
  .mobile-chart-layout { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; height: 224px; margin-top: 8px; }
  .mobile-y-labels { display: flex; flex-direction: column; justify-content: space-between; padding: 0 0 1px; color: var(--muted); font-size: 10px; line-height: 1; text-align: right; }
  .mobile-chart-plot { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--plot-fill); }
  .mobile-chart-plot canvas { display: block; width: 100%; height: 100%; }
  .mobile-chart-plot .chart-empty { right: 6px; left: 6px; font-size: 12px; }
  .mobile-x-labels { display: flex; justify-content: space-between; margin: 6px 0 0 46px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
  .mobile-samples { margin-top: 26px; border-top: 1px solid var(--rule); }
  .mobile-section-title { padding: 13px 0 10px; border-bottom: 1px solid var(--rule); }
  .mobile-section-title h2 { margin: 0; color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: .07em; }
  .mobile-table-wrap { overflow-x: auto; }
  .mobile-table-wrap table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .mobile-table-wrap th { padding: 12px 2px 10px; color: var(--muted); font-size: 9px; font-weight: 400; text-align: left; white-space: nowrap; }
  .mobile-table-wrap td { padding: 11px 2px; border-top: 1px solid var(--rule); color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; }
  .mobile-table-wrap th:first-child, .mobile-table-wrap td:first-child { width: 21%; }
  .mobile-table-wrap th:nth-child(2), .mobile-table-wrap td:nth-child(2) { width: 27%; }
  .mobile-table-wrap th:nth-child(3), .mobile-table-wrap td:nth-child(3) { width: 28%; }
  .mobile-table-wrap th:last-child, .mobile-table-wrap td:last-child { width: 24%; text-align: right; }
  .mobile-table-wrap td:not(:first-child) { text-align: left; }
  .mobile-table-wrap td:nth-child(3), .mobile-table-wrap td:nth-child(4) { overflow: hidden; font-size: 9px; white-space: nowrap; }
  .mobile-table-wrap td.empty-table-cell { padding-block: 20px; color: var(--muted); text-align: left; }
  .mobile-empty-note { margin: 9px 0 0; color: var(--muted); font-size: 11px; }
  .mobile-source-order { margin: 0 0 8px; color: var(--muted); font-size: 10px; text-align: right; }
  .mobile-samples footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 11px; }
}

@media (min-width: 761px) and (max-width: 900px) {
  .r-relay-commands { top: 17.65%; right: 2.7%; left: 2.66%; display: flex; height: 1.5%; align-items: center; gap: 6px; font-size: 8px; }
  .r-relay-commands > .relay-command-item { display: contents; }
}

@media (max-width: 365px) {
  .mobile-dashboard { padding-inline: 15px; }
  .mobile-ranges { margin-inline: -15px; padding-inline: 15px; gap: 16px; }
  :root[lang="id"] .mobile-ranges { gap: 8px; }
  .mobile-options { gap: 9px; }
  .mobile-nav { gap: 10px; }
  .mobile-guidance > div { grid-template-columns: 64px minmax(0, 1fr); gap: 6px; }
}

@media (max-width: 330px) {
  :root[lang="id"] .mobile-ranges { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .comp-frame, .mobile-dashboard { animation: none; }
}
/* Impeccable scaffold: the measured layout of the approved comp as custom properties. Generated by build-phase.mjs scaffold; regenerate after comp-spec.mjs --regions changes. Bind these to your own markup; positions are % of the comp frame so they scale with it. */
:root {
  --r-header-x: 0.000%; --r-header-y: 0.000%; --r-header-w: 100.000%; --r-header-h: 7.750%;
  --r-measurement-strip-x: 2.130%; --r-measurement-strip-y: 19.900%; --r-measurement-strip-w: 95.680%; --r-measurement-strip-h: 15.310%;
  --r-co2-ruler-x: 2.130%; --r-co2-ruler-y: 39.810%; --r-co2-ruler-w: 95.750%; --r-co2-ruler-h: 5.360%;
  --r-trend-shell-x: 2.130%; --r-trend-shell-y: 45.930%; --r-trend-shell-w: 95.750%; --r-trend-shell-h: 49.860%;
  --r-chart-panel-x: 2.130%; --r-chart-panel-y: 55.980%; --r-chart-panel-w: 61.790%; --r-chart-panel-h: 39.710%;
  --r-samples-panel-x: 65.380%; --r-samples-panel-y: 51.480%; --r-samples-panel-w: 32.490%; --r-samples-panel-h: 44.310%;
  --r-brand-x: 2.390%; --r-brand-y: 2.110%; --r-brand-w: 15.680%; --r-brand-h: 3.440%;
  --r-brand-cap: 20px; --r-brand-font: 30px;
  --r-live-nav-x: 21.660%; --r-live-nav-y: 2.200%; --r-live-nav-w: 4.850%; --r-live-nav-h: 3.540%;
  --r-history-nav-x: 29.440%; --r-history-nav-y: 2.200%; --r-history-nav-w: 7.570%; --r-history-nav-h: 3.540%;
  --r-theme-toggle-x: 42.460%; --r-theme-toggle-y: 2.010%; --r-theme-toggle-w: 11.230%; --r-theme-toggle-h: 3.830%;
  --r-language-toggle-x: 58.670%; --r-language-toggle-y: 2.010%; --r-language-toggle-w: 7.910%; --r-language-toggle-h: 3.830%;
  --r-connection-status-x: 79.730%; --r-connection-status-y: 2.110%; --r-connection-status-w: 16.940%; --r-connection-status-h: 3.830%;
  --r-page-title-x: 2.390%; --r-page-title-y: 9.860%; --r-page-title-w: 33.820%; --r-page-title-h: 7.560%;
  --r-page-title-cap: 56px; --r-page-title-font: 74px; --r-page-title-family: 'Rufina'; --r-page-title-weight: 400;
  --r-example-label-x: 37.140%; --r-example-label-y: 13.110%; --r-example-label-w: 15.950%; --r-example-label-h: 3.060%;
  --r-example-label-cap: 15px; --r-example-label-font: 22px;
  --r-co2-label-x: 2.660%; --r-co2-label-y: 20.570%; --r-co2-label-w: 4.850%; --r-co2-label-h: 3.250%;
  --r-co2-label-cap: 18px; --r-co2-label-font: 26px;
  --r-co2-value-x: 2.520%; --r-co2-value-y: 23.920%; --r-co2-value-w: 13.290%; --r-co2-value-h: 10.530%;
  --r-co2-value-cap: 81px; --r-co2-value-font: 112px; --r-co2-value-family: 'Rufina'; --r-co2-value-weight: 400;
  --r-co2-unit-x: 16.150%; --r-co2-unit-y: 28.800%; --r-co2-unit-w: 6.250%; --r-co2-unit-h: 4.980%;
  --r-co2-unit-cap: 23px; --r-co2-unit-font: 34px;
  --r-temp-label-x: 43.850%; --r-temp-label-y: 20.570%; --r-temp-label-w: 11.760%; --r-temp-label-h: 3.250%;
  --r-temp-label-cap: 14px; --r-temp-label-font: 21px;
  --r-temp-value-x: 43.850%; --r-temp-value-y: 24.690%; --r-temp-value-w: 14.020%; --r-temp-value-h: 10.240%;
  --r-temp-value-cap: 72px; --r-temp-value-font: 104px;
  --r-temp-unit-x: 58.010%; --r-temp-unit-y: 28.710%; --r-temp-unit-w: 5.510%; --r-temp-unit-h: 4.880%;
  --r-humidity-label-x: 72.890%; --r-humidity-label-y: 20.570%; --r-humidity-label-w: 14.020%; --r-humidity-label-h: 3.250%;
  --r-humidity-label-cap: 14px; --r-humidity-label-font: 21px;
  --r-humidity-value-x: 72.820%; --r-humidity-value-y: 24.690%; --r-humidity-value-w: 9.170%; --r-humidity-value-h: 10.240%;
  --r-humidity-unit-x: 82.060%; --r-humidity-unit-y: 28.710%; --r-humidity-unit-w: 4.050%; --r-humidity-unit-h: 4.880%;
  --r-metric-divider-one-x: 39.400%; --r-metric-divider-one-y: 20.380%; --r-metric-divider-one-w: 0.200%; --r-metric-divider-one-h: 14.450%;
  --r-metric-divider-two-x: 68.570%; --r-metric-divider-two-y: 20.380%; --r-metric-divider-two-w: 0.200%; --r-metric-divider-two-h: 14.450%;
  --r-range-min-x: 2.660%; --r-range-min-y: 41.240%; --r-range-min-w: 2.860%; --r-range-min-h: 2.680%;
  --r-range-min-cap: 14px; --r-range-min-font: 21px;
  --r-range-mid-one-x: 33.420%; --r-range-mid-one-y: 41.240%; --r-range-mid-one-w: 2.790%; --r-range-mid-one-h: 2.680%;
  --r-range-mid-one-cap: 14px; --r-range-mid-one-font: 20px;
  --r-range-mid-two-x: 65.380%; --r-range-mid-two-y: 41.240%; --r-range-mid-two-w: 3.650%; --r-range-mid-two-h: 2.680%;
  --r-range-mid-two-cap: 14px; --r-range-mid-two-font: 21px;
  --r-range-max-x: 94.680%; --r-range-max-y: 41.240%; --r-range-max-w: 3.190%; --r-range-max-h: 2.680%;
  --r-range-max-cap: 14px; --r-range-max-font: 20px;
  --r-range-marker-x: 27.640%; --r-range-marker-y: 38.950%; --r-range-marker-w: 2.130%; --r-range-marker-h: 5.070%;
  --r-metric-tabs-x: 2.330%; --r-metric-tabs-y: 45.930%; --r-metric-tabs-w: 21.330%; --r-metric-tabs-h: 4.400%;
  --r-range-30m-x: 2.460%; --r-range-30m-y: 51.580%; --r-range-30m-w: 7.180%; --r-range-30m-h: 3.920%;
  --r-range-1h-x: 11.230%; --r-range-1h-y: 51.580%; --r-range-1h-w: 5.250%; --r-range-1h-h: 3.920%;
  --r-range-2h-x: 18.940%; --r-range-2h-y: 51.580%; --r-range-2h-w: 5.510%; --r-range-2h-h: 3.920%;
  --r-range-3h-x: 26.640%; --r-range-3h-y: 51.580%; --r-range-3h-w: 5.450%; --r-range-3h-h: 3.920%;
  --r-range-6h-x: 35.350%; --r-range-6h-y: 51.580%; --r-range-6h-w: 5.380%; --r-range-6h-h: 3.920%;
  --r-range-12h-x: 42.920%; --r-range-12h-y: 51.580%; --r-range-12h-w: 6.050%; --r-range-12h-h: 3.920%;
  --r-range-24h-x: 50.630%; --r-range-24h-y: 51.580%; --r-range-24h-w: 6.110%; --r-range-24h-h: 3.920%;
  --r-chart-title-x: 2.460%; --r-chart-title-y: 56.360%; --r-chart-title-w: 23.790%; --r-chart-title-h: 3.440%;
  --r-chart-title-cap: 17px; --r-chart-title-font: 24px;
  --r-chart-unit-x: 2.460%; --r-chart-unit-y: 59.810%; --r-chart-unit-w: 8.000%; --r-chart-unit-h: 1.910%;
  --r-chart-unit-cap: 10px; --r-chart-unit-font: 15px;
  --r-chart-y-labels-x: 2.460%; --r-chart-y-labels-y: 62.580%; --r-chart-y-labels-w: 3.190%; --r-chart-y-labels-h: 29.670%;
  --r-chart-y-labels-cap: 14px; --r-chart-y-labels-font: 20px;
  --r-chart-plot-x: 5.780%; --r-chart-plot-y: 62.200%; --r-chart-plot-w: 56.480%; --r-chart-plot-h: 29.280%;
  --r-chart-x-left-x: 3.720%; --r-chart-x-left-y: 92.340%; --r-chart-x-left-w: 4.980%; --r-chart-x-left-h: 2.970%;
  --r-chart-x-left-cap: 14px; --r-chart-x-left-font: 20px;
  --r-chart-x-quarter-x: 22.520%; --r-chart-x-quarter-y: 92.340%; --r-chart-x-quarter-w: 5.180%; --r-chart-x-quarter-h: 2.970%;
  --r-chart-x-quarter-cap: 14px; --r-chart-x-quarter-font: 20px;
  --r-chart-x-half-x: 41.400%; --r-chart-x-half-y: 92.340%; --r-chart-x-half-w: 5.180%; --r-chart-x-half-h: 2.970%;
  --r-chart-x-half-cap: 14px; --r-chart-x-half-font: 20px;
  --r-chart-x-right-x: 59.070%; --r-chart-x-right-y: 92.340%; --r-chart-x-right-w: 4.520%; --r-chart-x-right-h: 2.970%;
  --r-chart-x-right-cap: 14px; --r-chart-x-right-font: 20px;
  --r-samples-title-x: 67.310%; --r-samples-title-y: 51.480%; --r-samples-title-w: 14.350%; --r-samples-title-h: 4.210%;
  --r-samples-title-cap: 16px; --r-samples-title-font: 24px;
  --r-sample-head-time-x: 67.310%; --r-sample-head-time-y: 57.610%; --r-sample-head-time-w: 6.250%; --r-sample-head-time-h: 3.640%;
  --r-sample-head-time-cap: 13px; --r-sample-head-time-font: 19px;
  --r-sample-head-co2-x: 74.880%; --r-sample-head-co2-y: 57.610%; --r-sample-head-co2-w: 8.040%; --r-sample-head-co2-h: 3.640%;
  --r-sample-head-co2-cap: 13px; --r-sample-head-co2-font: 19px;
  --r-sample-head-temp-x: 83.650%; --r-sample-head-temp-y: 57.610%; --r-sample-head-temp-w: 8.500%; --r-sample-head-temp-h: 3.640%;
  --r-sample-head-temp-cap: 13px; --r-sample-head-temp-font: 19px;
  --r-sample-head-rh-x: 92.620%; --r-sample-head-rh-y: 57.610%; --r-sample-head-rh-w: 4.850%; --r-sample-head-rh-h: 3.640%;
  --r-sample-head-rh-cap: 13px; --r-sample-head-rh-font: 19px;
  --r-sensor-footer-x: 67.310%; --r-sensor-footer-y: 92.340%; --r-sensor-footer-w: 6.510%; --r-sensor-footer-h: 3.060%;
  --r-sensor-footer-cap: 14px; --r-sensor-footer-font: 21px;
  --r-interval-footer-x: 73.890%; --r-interval-footer-y: 92.340%; --r-interval-footer-w: 10.760%; --r-interval-footer-h: 3.060%;
  --r-interval-footer-cap: 17px; --r-interval-footer-font: 24px;
  --r-pins-footer-x: 85.180%; --r-pins-footer-y: 92.340%; --r-pins-footer-w: 10.100%; --r-pins-footer-h: 3.060%;
  --r-pins-footer-cap: 15px; --r-pins-footer-font: 22px;
  --r-sample-rule-top-x: 67.380%; --r-sample-rule-top-y: 56.170%; --r-sample-rule-top-w: 30.300%; --r-sample-rule-top-h: 0.190%;
  --r-sample-rule-header-x: 67.380%; --r-sample-rule-header-y: 62.010%; --r-sample-rule-header-w: 30.300%; --r-sample-rule-header-h: 0.190%;
  --r-sample-rule-one-x: 67.380%; --r-sample-rule-one-y: 69.000%; --r-sample-rule-one-w: 30.300%; --r-sample-rule-one-h: 0.190%;
  --r-sample-rule-two-x: 67.380%; --r-sample-rule-two-y: 75.500%; --r-sample-rule-two-w: 30.300%; --r-sample-rule-two-h: 0.190%;
  --r-sample-rule-three-x: 67.380%; --r-sample-rule-three-y: 82.200%; --r-sample-rule-three-w: 30.300%; --r-sample-rule-three-h: 0.190%;
  --r-sample-rule-four-x: 67.380%; --r-sample-rule-four-y: 88.900%; --r-sample-rule-four-w: 30.300%; --r-sample-rule-four-h: 0.190%;
  --r-sample-row-1-time-x: 67.310%; --r-sample-row-1-time-y: 64.400%; --r-sample-row-1-time-w: 6.050%; --r-sample-row-1-time-h: 3.830%;
  --r-sample-row-1-time-cap: 17px; --r-sample-row-1-time-font: 25px;
  --r-sample-row-1-co2-x: 74.880%; --r-sample-row-1-co2-y: 64.400%; --r-sample-row-1-co2-w: 6.250%; --r-sample-row-1-co2-h: 3.830%;
  --r-sample-row-1-co2-cap: 17px; --r-sample-row-1-co2-font: 25px;
  --r-sample-row-1-temp-x: 83.650%; --r-sample-row-1-temp-y: 64.400%; --r-sample-row-1-temp-w: 6.510%; --r-sample-row-1-temp-h: 3.830%;
  --r-sample-row-1-temp-cap: 17px; --r-sample-row-1-temp-font: 25px;
  --r-sample-row-1-rh-x: 92.620%; --r-sample-row-1-rh-y: 64.400%; --r-sample-row-1-rh-w: 4.850%; --r-sample-row-1-rh-h: 3.830%;
  --r-sample-row-2-time-x: 67.310%; --r-sample-row-2-time-y: 71.000%; --r-sample-row-2-time-w: 6.050%; --r-sample-row-2-time-h: 3.830%;
  --r-sample-row-2-time-cap: 17px; --r-sample-row-2-time-font: 26px;
  --r-sample-row-2-co2-x: 74.880%; --r-sample-row-2-co2-y: 71.000%; --r-sample-row-2-co2-w: 6.250%; --r-sample-row-2-co2-h: 3.830%;
  --r-sample-row-2-temp-x: 83.650%; --r-sample-row-2-temp-y: 71.000%; --r-sample-row-2-temp-w: 6.510%; --r-sample-row-2-temp-h: 3.830%;
  --r-sample-row-2-temp-cap: 17px; --r-sample-row-2-temp-font: 25px;
  --r-sample-row-2-rh-x: 92.620%; --r-sample-row-2-rh-y: 71.000%; --r-sample-row-2-rh-w: 4.850%; --r-sample-row-2-rh-h: 3.830%;
  --r-sample-row-3-time-x: 67.310%; --r-sample-row-3-time-y: 77.700%; --r-sample-row-3-time-w: 6.050%; --r-sample-row-3-time-h: 3.830%;
  --r-sample-row-3-time-cap: 17px; --r-sample-row-3-time-font: 24px;
  --r-sample-row-3-co2-x: 74.880%; --r-sample-row-3-co2-y: 77.700%; --r-sample-row-3-co2-w: 6.250%; --r-sample-row-3-co2-h: 3.830%;
  --r-sample-row-3-co2-cap: 17px; --r-sample-row-3-co2-font: 25px;
  --r-sample-row-3-temp-x: 83.650%; --r-sample-row-3-temp-y: 77.700%; --r-sample-row-3-temp-w: 6.510%; --r-sample-row-3-temp-h: 3.830%;
  --r-sample-row-3-temp-cap: 17px; --r-sample-row-3-temp-font: 25px;
  --r-sample-row-3-rh-x: 92.620%; --r-sample-row-3-rh-y: 77.700%; --r-sample-row-3-rh-w: 4.850%; --r-sample-row-3-rh-h: 3.830%;
  --r-sample-row-4-time-x: 67.310%; --r-sample-row-4-time-y: 84.400%; --r-sample-row-4-time-w: 6.050%; --r-sample-row-4-time-h: 3.830%;
  --r-sample-row-4-time-cap: 17px; --r-sample-row-4-time-font: 25px;
  --r-sample-row-4-co2-x: 74.880%; --r-sample-row-4-co2-y: 84.400%; --r-sample-row-4-co2-w: 6.250%; --r-sample-row-4-co2-h: 3.830%;
  --r-sample-row-4-co2-cap: 17px; --r-sample-row-4-co2-font: 25px;
  --r-sample-row-4-temp-x: 83.650%; --r-sample-row-4-temp-y: 84.400%; --r-sample-row-4-temp-w: 6.510%; --r-sample-row-4-temp-h: 3.830%;
  --r-sample-row-4-temp-cap: 17px; --r-sample-row-4-temp-font: 25px;
  --r-sample-row-4-rh-x: 92.620%; --r-sample-row-4-rh-y: 84.400%; --r-sample-row-4-rh-w: 4.850%; --r-sample-row-4-rh-h: 3.830%;
  --r-header-theme-divider-x: 39.930%; --r-header-theme-divider-y: 2.680%; --r-header-theme-divider-w: 0.130%; --r-header-theme-divider-h: 2.780%;
  --r-header-language-divider-x: 56.150%; --r-header-language-divider-y: 2.680%; --r-header-language-divider-w: 0.130%; --r-header-language-divider-h: 2.780%;
  --r-chart-samples-divider-x: 65.380%; --r-chart-samples-divider-y: 51.580%; --r-chart-samples-divider-w: 0.130%; --r-chart-samples-divider-h: 44.020%;
  --r-ruler-tick-left-x: 2.660%; --r-ruler-tick-left-y: 38.760%; --r-ruler-tick-left-w: 0.130%; --r-ruler-tick-left-h: 2.300%;
  --r-ruler-tick-one-x: 34.550%; --r-ruler-tick-one-y: 38.760%; --r-ruler-tick-one-w: 0.130%; --r-ruler-tick-one-h: 2.300%;
  --r-ruler-tick-two-x: 65.850%; --r-ruler-tick-two-y: 38.760%; --r-ruler-tick-two-w: 0.130%; --r-ruler-tick-two-h: 2.300%;
  --r-ruler-tick-right-x: 96.880%; --r-ruler-tick-right-y: 38.760%; --r-ruler-tick-right-w: 0.130%; --r-ruler-tick-right-h: 2.300%;
}

.comp-frame { position: relative; width: 100%; aspect-ratio: 1505 / 1045; overflow: hidden; }
.r-header { position: absolute; left: var(--r-header-x); top: var(--r-header-y); width: var(--r-header-w); height: var(--r-header-h); }
.r-measurement-strip { position: absolute; left: var(--r-measurement-strip-x); top: var(--r-measurement-strip-y); width: var(--r-measurement-strip-w); height: var(--r-measurement-strip-h); }
.r-co2-ruler { position: absolute; left: var(--r-co2-ruler-x); top: var(--r-co2-ruler-y); width: var(--r-co2-ruler-w); height: var(--r-co2-ruler-h); }
.r-trend-shell { position: absolute; left: var(--r-trend-shell-x); top: var(--r-trend-shell-y); width: var(--r-trend-shell-w); height: var(--r-trend-shell-h); }
.r-chart-panel { position: absolute; left: var(--r-chart-panel-x); top: var(--r-chart-panel-y); width: var(--r-chart-panel-w); height: var(--r-chart-panel-h); }
.r-samples-panel { position: absolute; left: var(--r-samples-panel-x); top: var(--r-samples-panel-y); width: var(--r-samples-panel-w); height: var(--r-samples-panel-h); }
.r-brand { position: absolute; left: var(--r-brand-x); top: var(--r-brand-y); width: var(--r-brand-w); height: var(--r-brand-h); }
.r-live-nav { position: absolute; left: var(--r-live-nav-x); top: var(--r-live-nav-y); width: var(--r-live-nav-w); height: var(--r-live-nav-h); }
.r-history-nav { position: absolute; left: var(--r-history-nav-x); top: var(--r-history-nav-y); width: var(--r-history-nav-w); height: var(--r-history-nav-h); }
.r-theme-toggle { position: absolute; left: var(--r-theme-toggle-x); top: var(--r-theme-toggle-y); width: var(--r-theme-toggle-w); height: var(--r-theme-toggle-h); }
.r-language-toggle { position: absolute; left: var(--r-language-toggle-x); top: var(--r-language-toggle-y); width: var(--r-language-toggle-w); height: var(--r-language-toggle-h); }
.r-connection-status { position: absolute; left: var(--r-connection-status-x); top: var(--r-connection-status-y); width: var(--r-connection-status-w); height: var(--r-connection-status-h); }
.r-page-title { position: absolute; left: var(--r-page-title-x); top: var(--r-page-title-y); width: var(--r-page-title-w); height: var(--r-page-title-h); }
.r-example-label { position: absolute; left: var(--r-example-label-x); top: var(--r-example-label-y); width: var(--r-example-label-w); height: var(--r-example-label-h); }
.r-co2-label { position: absolute; left: var(--r-co2-label-x); top: var(--r-co2-label-y); width: var(--r-co2-label-w); height: var(--r-co2-label-h); }
.r-temp-label { position: absolute; left: var(--r-temp-label-x); top: var(--r-temp-label-y); width: var(--r-temp-label-w); height: var(--r-temp-label-h); }
.r-humidity-label { position: absolute; left: var(--r-humidity-label-x); top: var(--r-humidity-label-y); width: var(--r-humidity-label-w); height: var(--r-humidity-label-h); }
.r-metric-divider-one { position: absolute; left: var(--r-metric-divider-one-x); top: var(--r-metric-divider-one-y); width: var(--r-metric-divider-one-w); height: var(--r-metric-divider-one-h); }
.r-metric-divider-two { position: absolute; left: var(--r-metric-divider-two-x); top: var(--r-metric-divider-two-y); width: var(--r-metric-divider-two-w); height: var(--r-metric-divider-two-h); }
.r-range-min { position: absolute; left: var(--r-range-min-x); top: var(--r-range-min-y); width: var(--r-range-min-w); height: var(--r-range-min-h); }
.r-range-mid-one { position: absolute; left: var(--r-range-mid-one-x); top: var(--r-range-mid-one-y); width: var(--r-range-mid-one-w); height: var(--r-range-mid-one-h); }
.r-range-mid-two { position: absolute; left: var(--r-range-mid-two-x); top: var(--r-range-mid-two-y); width: var(--r-range-mid-two-w); height: var(--r-range-mid-two-h); }
.r-range-max { position: absolute; left: var(--r-range-max-x); top: var(--r-range-max-y); width: var(--r-range-max-w); height: var(--r-range-max-h); }
.r-range-marker { position: absolute; left: var(--r-range-marker-x); top: var(--r-range-marker-y); width: var(--r-range-marker-w); height: var(--r-range-marker-h); }
.r-metric-tabs { position: absolute; left: var(--r-metric-tabs-x); top: var(--r-metric-tabs-y); width: var(--r-metric-tabs-w); height: var(--r-metric-tabs-h); }
.r-range-30m { position: absolute; left: var(--r-range-30m-x); top: var(--r-range-30m-y); width: var(--r-range-30m-w); height: var(--r-range-30m-h); }
.r-range-1h { position: absolute; left: var(--r-range-1h-x); top: var(--r-range-1h-y); width: var(--r-range-1h-w); height: var(--r-range-1h-h); }
.r-range-2h { position: absolute; left: var(--r-range-2h-x); top: var(--r-range-2h-y); width: var(--r-range-2h-w); height: var(--r-range-2h-h); }
.r-range-3h { position: absolute; left: var(--r-range-3h-x); top: var(--r-range-3h-y); width: var(--r-range-3h-w); height: var(--r-range-3h-h); }
.r-range-6h { position: absolute; left: var(--r-range-6h-x); top: var(--r-range-6h-y); width: var(--r-range-6h-w); height: var(--r-range-6h-h); }
.r-range-12h { position: absolute; left: var(--r-range-12h-x); top: var(--r-range-12h-y); width: var(--r-range-12h-w); height: var(--r-range-12h-h); }
.r-range-24h { position: absolute; left: var(--r-range-24h-x); top: var(--r-range-24h-y); width: var(--r-range-24h-w); height: var(--r-range-24h-h); }
.r-chart-title { position: absolute; left: var(--r-chart-title-x); top: var(--r-chart-title-y); width: var(--r-chart-title-w); height: var(--r-chart-title-h); }
.r-chart-unit { position: absolute; left: var(--r-chart-unit-x); top: var(--r-chart-unit-y); width: var(--r-chart-unit-w); height: var(--r-chart-unit-h); }
.r-chart-y-labels { position: absolute; left: var(--r-chart-y-labels-x); top: var(--r-chart-y-labels-y); width: var(--r-chart-y-labels-w); height: var(--r-chart-y-labels-h); }
.r-chart-plot { position: absolute; left: var(--r-chart-plot-x); top: var(--r-chart-plot-y); width: var(--r-chart-plot-w); height: var(--r-chart-plot-h); }
.r-chart-x-left { position: absolute; left: var(--r-chart-x-left-x); top: var(--r-chart-x-left-y); width: var(--r-chart-x-left-w); height: var(--r-chart-x-left-h); }
.r-chart-x-quarter { position: absolute; left: var(--r-chart-x-quarter-x); top: var(--r-chart-x-quarter-y); width: var(--r-chart-x-quarter-w); height: var(--r-chart-x-quarter-h); }
.r-chart-x-half { position: absolute; left: var(--r-chart-x-half-x); top: var(--r-chart-x-half-y); width: var(--r-chart-x-half-w); height: var(--r-chart-x-half-h); }
.r-chart-x-right { position: absolute; left: var(--r-chart-x-right-x); top: var(--r-chart-x-right-y); width: var(--r-chart-x-right-w); height: var(--r-chart-x-right-h); }
.r-samples-title { position: absolute; left: var(--r-samples-title-x); top: var(--r-samples-title-y); width: var(--r-samples-title-w); height: var(--r-samples-title-h); }
.r-sample-head-time { position: absolute; left: var(--r-sample-head-time-x); top: var(--r-sample-head-time-y); width: var(--r-sample-head-time-w); height: var(--r-sample-head-time-h); }
.r-sample-head-co2 { position: absolute; left: var(--r-sample-head-co2-x); top: var(--r-sample-head-co2-y); width: var(--r-sample-head-co2-w); height: var(--r-sample-head-co2-h); }
.r-sample-head-temp { position: absolute; left: var(--r-sample-head-temp-x); top: var(--r-sample-head-temp-y); width: var(--r-sample-head-temp-w); height: var(--r-sample-head-temp-h); }
.r-sample-head-rh { position: absolute; left: var(--r-sample-head-rh-x); top: var(--r-sample-head-rh-y); width: var(--r-sample-head-rh-w); height: var(--r-sample-head-rh-h); }
.r-sensor-footer { position: absolute; left: var(--r-sensor-footer-x); top: var(--r-sensor-footer-y); width: var(--r-sensor-footer-w); height: var(--r-sensor-footer-h); }
.r-interval-footer { position: absolute; left: var(--r-interval-footer-x); top: var(--r-interval-footer-y); width: var(--r-interval-footer-w); height: var(--r-interval-footer-h); }
.r-pins-footer { position: absolute; left: var(--r-pins-footer-x); top: var(--r-pins-footer-y); width: var(--r-pins-footer-w); height: var(--r-pins-footer-h); }
.r-sample-rule-top { position: absolute; left: var(--r-sample-rule-top-x); top: var(--r-sample-rule-top-y); width: var(--r-sample-rule-top-w); height: var(--r-sample-rule-top-h); }
.r-sample-rule-header { position: absolute; left: var(--r-sample-rule-header-x); top: var(--r-sample-rule-header-y); width: var(--r-sample-rule-header-w); height: var(--r-sample-rule-header-h); }
.r-sample-rule-one { position: absolute; left: var(--r-sample-rule-one-x); top: var(--r-sample-rule-one-y); width: var(--r-sample-rule-one-w); height: var(--r-sample-rule-one-h); }
.r-sample-rule-two { position: absolute; left: var(--r-sample-rule-two-x); top: var(--r-sample-rule-two-y); width: var(--r-sample-rule-two-w); height: var(--r-sample-rule-two-h); }
.r-sample-rule-three { position: absolute; left: var(--r-sample-rule-three-x); top: var(--r-sample-rule-three-y); width: var(--r-sample-rule-three-w); height: var(--r-sample-rule-three-h); }
.r-sample-rule-four { position: absolute; left: var(--r-sample-rule-four-x); top: var(--r-sample-rule-four-y); width: var(--r-sample-rule-four-w); height: var(--r-sample-rule-four-h); }
.r-sample-row-1-time { position: absolute; left: var(--r-sample-row-1-time-x); top: var(--r-sample-row-1-time-y); width: var(--r-sample-row-1-time-w); height: var(--r-sample-row-1-time-h); }
.r-sample-row-1-co2 { position: absolute; left: var(--r-sample-row-1-co2-x); top: var(--r-sample-row-1-co2-y); width: var(--r-sample-row-1-co2-w); height: var(--r-sample-row-1-co2-h); }
.r-sample-row-1-temp { position: absolute; left: var(--r-sample-row-1-temp-x); top: var(--r-sample-row-1-temp-y); width: var(--r-sample-row-1-temp-w); height: var(--r-sample-row-1-temp-h); }
.r-sample-row-1-rh { position: absolute; left: var(--r-sample-row-1-rh-x); top: var(--r-sample-row-1-rh-y); width: var(--r-sample-row-1-rh-w); height: var(--r-sample-row-1-rh-h); }
.r-sample-row-2-time { position: absolute; left: var(--r-sample-row-2-time-x); top: var(--r-sample-row-2-time-y); width: var(--r-sample-row-2-time-w); height: var(--r-sample-row-2-time-h); }
.r-sample-row-2-co2 { position: absolute; left: var(--r-sample-row-2-co2-x); top: var(--r-sample-row-2-co2-y); width: var(--r-sample-row-2-co2-w); height: var(--r-sample-row-2-co2-h); }
.r-sample-row-2-temp { position: absolute; left: var(--r-sample-row-2-temp-x); top: var(--r-sample-row-2-temp-y); width: var(--r-sample-row-2-temp-w); height: var(--r-sample-row-2-temp-h); }
.r-sample-row-2-rh { position: absolute; left: var(--r-sample-row-2-rh-x); top: var(--r-sample-row-2-rh-y); width: var(--r-sample-row-2-rh-w); height: var(--r-sample-row-2-rh-h); }
.r-sample-row-3-time { position: absolute; left: var(--r-sample-row-3-time-x); top: var(--r-sample-row-3-time-y); width: var(--r-sample-row-3-time-w); height: var(--r-sample-row-3-time-h); }
.r-sample-row-3-co2 { position: absolute; left: var(--r-sample-row-3-co2-x); top: var(--r-sample-row-3-co2-y); width: var(--r-sample-row-3-co2-w); height: var(--r-sample-row-3-co2-h); }
.r-sample-row-3-temp { position: absolute; left: var(--r-sample-row-3-temp-x); top: var(--r-sample-row-3-temp-y); width: var(--r-sample-row-3-temp-w); height: var(--r-sample-row-3-temp-h); }
.r-sample-row-3-rh { position: absolute; left: var(--r-sample-row-3-rh-x); top: var(--r-sample-row-3-rh-y); width: var(--r-sample-row-3-rh-w); height: var(--r-sample-row-3-rh-h); }
.r-sample-row-4-time { position: absolute; left: var(--r-sample-row-4-time-x); top: var(--r-sample-row-4-time-y); width: var(--r-sample-row-4-time-w); height: var(--r-sample-row-4-time-h); }
.r-sample-row-4-co2 { position: absolute; left: var(--r-sample-row-4-co2-x); top: var(--r-sample-row-4-co2-y); width: var(--r-sample-row-4-co2-w); height: var(--r-sample-row-4-co2-h); }
.r-sample-row-4-temp { position: absolute; left: var(--r-sample-row-4-temp-x); top: var(--r-sample-row-4-temp-y); width: var(--r-sample-row-4-temp-w); height: var(--r-sample-row-4-temp-h); }
.r-sample-row-4-rh { position: absolute; left: var(--r-sample-row-4-rh-x); top: var(--r-sample-row-4-rh-y); width: var(--r-sample-row-4-rh-w); height: var(--r-sample-row-4-rh-h); }
.r-header-theme-divider { position: absolute; left: var(--r-header-theme-divider-x); top: var(--r-header-theme-divider-y); width: var(--r-header-theme-divider-w); height: var(--r-header-theme-divider-h); }
.r-header-language-divider { position: absolute; left: var(--r-header-language-divider-x); top: var(--r-header-language-divider-y); width: var(--r-header-language-divider-w); height: var(--r-header-language-divider-h); }
.r-chart-samples-divider { position: absolute; left: var(--r-chart-samples-divider-x); top: var(--r-chart-samples-divider-y); width: var(--r-chart-samples-divider-w); height: var(--r-chart-samples-divider-h); }
.r-ruler-tick-left { position: absolute; left: var(--r-ruler-tick-left-x); top: var(--r-ruler-tick-left-y); width: var(--r-ruler-tick-left-w); height: var(--r-ruler-tick-left-h); }
.r-ruler-tick-one { position: absolute; left: var(--r-ruler-tick-one-x); top: var(--r-ruler-tick-one-y); width: var(--r-ruler-tick-one-w); height: var(--r-ruler-tick-one-h); }
.r-ruler-tick-two { position: absolute; left: var(--r-ruler-tick-two-x); top: var(--r-ruler-tick-two-y); width: var(--r-ruler-tick-two-w); height: var(--r-ruler-tick-two-h); }
.r-ruler-tick-right { position: absolute; left: var(--r-ruler-tick-right-x); top: var(--r-ruler-tick-right-y); width: var(--r-ruler-tick-right-w); height: var(--r-ruler-tick-right-h); }