/* WattReplay: a quiet, editorial energy workspace. System fonts; no remote assets. */
:root {
  color-scheme: light;
  --paper: #f8f9f4;
  --surface: #ffffff;
  --ink: #193f36;
  --muted: #53675f;
  --green: #205b4b;
  --green-mid: #52836b;
  --sage: #ebf0df;
  --line: #d6ded4;
  --coral: #c76643;
  --danger: #a12d25;
  --radius: 19px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, select, input[type="range"] { cursor: pointer; }
input[type="text"], input[type="number"] { cursor: text; }
input, select { max-width: 100%; min-width: 0; }
button { border: 0; }
a { color: var(--green); text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
button:disabled { cursor: not-allowed; opacity: .48; }
:focus-visible { outline: 3px solid #a25429; outline-offset: 4px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.2; }
h1, .result h2, .learn h2, .article h1, dialog h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.048em;
}
h3 { font-size: 16px; font-weight: 650; letter-spacing: -.025em; }
small { font-size: 12px; }
code { font-size: .94em; overflow-wrap: anywhere; }
.shell { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 24px; top: -100px; z-index: 100; padding: 14px 22px; background: var(--ink); color: white; border-radius: 8px; }
.skip:focus { top: 12px; }
.site-header { border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; min-height: 88px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 22px; font-weight: 700; letter-spacing: -.06em; text-decoration: none; white-space: nowrap; }
.brandmark { display: grid; place-items: center; width: 36px; height: 40px; background: var(--green); color: white; border-radius: 11px; }
.brandmark svg { width: 24px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { padding-block: 13px; font-size: 13px; text-decoration: none; font-weight: 650; }
.nav-privacy { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.nav-privacy::before, .local-badge::before { content: ''; width: 5px; height: 5px; background: var(--green-mid); border-radius: 50%; display: inline-block; }
.eyebrow { display: block; color: var(--green); font-size: 11px; line-height: 1.6; letter-spacing: .19em; font-weight: 750; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: 1.45fr 1fr; gap: 64px; align-items: center; padding: 64px 0 60px; }
.hero-copy h1 { font-size: clamp(38px, 4.35vw, 61px); line-height: 1.09; margin: 19px 0 25px; }
.hero-copy h1 em { font-style: normal; color: var(--green); }
.hero-copy > p:not(.privacy-note) { max-width: 565px; font-size: 16px; line-height: 1.75; color: var(--muted); }
.hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 27px; }
.button { min-height: 44px; border: 1px solid var(--line); border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 11px 17px; font-size: 12px; font-weight: 650; text-decoration: none; line-height: 1.45; transition: background-color .15s, border-color .15s; }
.button:hover { text-decoration: none; }
.button.primary { background: var(--green); color: #fff; border-color: var(--green); }
.button.primary:hover { background: #164435; }
.button.secondary, .button.ghost { background: var(--surface); color: var(--ink); }
.button.secondary:hover, .button.ghost:hover { background: #edf2e9; border-color: #a1b8a8; }
.text-button, .text-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 0; background: transparent; color: var(--green); font-size: 12px; font-weight: 650; text-decoration: none; }
.text-button:hover, .text-link:hover { text-decoration: underline; }
.privacy-note { margin-top: 16px; font-size: 11px; color: var(--muted); }
.privacy-note span { margin-right: 5px; }
.day-dial { border: 1px solid #e2e8d7; border-radius: 220px 220px 21px 21px; background: #eaf0df; padding: 49px 26px 26px; text-align: center; max-width: 432px; justify-self: end; width: 100%; }
.day-dial .eyebrow { font-size: 11px; letter-spacing: .16em; }
.day-dial svg { width: 100%; height: auto; display: block; }
.sun { fill: #dd945f; }
.sun-halo { fill: #e9c392; opacity: .19; }
.sun-halo.outer { opacity: .12; }
.sun-track { fill: none; stroke: #a5b798; stroke-width: 1; stroke-dasharray: 2 3; }
.horizon { fill: none; stroke: #a5b798; stroke-width: 1; }
.dial-windows { display: flex; justify-content: space-between; margin: -4px 18px 10px; }
.dial-windows span { font-size: 11px; border-radius: 30px; padding: 2px 13px; color: white; background: var(--green); }
.dial-windows span:last-child { background: #edd0b2; color: #6a4026; }
.dial-hours { display: flex; justify-content: space-between; font-family: ui-monospace, monospace; color: var(--muted); font-size: 11px; }
.day-dial p { margin-top: 17px; color: var(--muted); font-size: 13px; }
.day-dial strong { color: var(--ink); }
.workspace-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 32px; border-top: 1px solid var(--line); scroll-margin-top: 25px; }
.workspace-heading h2 { font-size: 24px; margin-top: 8px; letter-spacing: -.045em; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.record-state, .notice { background: #edf0e4; border: 1px solid #e2e7d9; padding: 10px 14px; border-radius: 7px; color: #4b6256; font-size: 12px; }
.record-state { margin: 18px 0 24px; }
.record-state::before { content: 'i'; font: 11px Georgia, serif; font-weight: 700; border: 1px solid #7f9689; padding: 0 5px; margin-right: 8px; border-radius: 50%; }
.workspace { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr); gap: 24px; align-items: start; }
.inputs { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); overflow: clip; box-shadow: 0 11px 32px #253f2710; }
.input-section { padding: 25px 24px 22px; border-bottom: 1px solid var(--line); }
.step-heading { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 20px; }
.step-number { display: grid; place-items: center; min-width: 30px; height: 30px; font-size: 11px; border: 1px solid #baccc0; border-radius: 50%; color: var(--green); }
.step-heading h3 { margin: 2px 0 5px; }
.step-heading p, .hint { color: var(--muted); font-size: 11px; line-height: 1.65; }
.examples { display: flex; gap: 5px; margin-bottom: 15px; }
.examples button { flex: 1; min-height: 40px; padding: 6px 5px; border: 1px solid var(--line); border-radius: 6px; background: white; font-size: 11px; color: #51675a; }
.examples button[aria-pressed="true"] { background: #eef3e6; border-color: var(--green); font-weight: 650; color: var(--green); }
.examples button:hover { border-color: var(--green); }
.drop-zone { border: 1px dashed #839d87; border-radius: 10px; background: #f8faf5; }
.drop-zone.drag-over { border: 2px solid var(--green); background: #e6efdf; }
.drop-zone button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100%; padding: 22px 10px; background: transparent; border-radius: inherit; }
.drop-zone strong { font-size: 13px; }
.drop-zone span { color: var(--muted); font-size: 11px; }
.drop-zone svg { width: 23px; height: 23px; fill: none; stroke: var(--green); stroke-width: 1.5; margin-bottom: 5px; stroke-linejoin: round; stroke-linecap: round; }
.import-links { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.input-section > .hint { margin-bottom: 15px; }
.field { min-width: 0; }
.field label { font-size: 11px; font-weight: 650; display: block; margin-bottom: 7px; }
.field input, .field select, .save-controls input, .editor-table input { width: 100%; border: 1px solid #82968a; border-radius: 6px; padding: 11px 10px; min-height: 44px; font-size: 12px; line-height: 1.4; background: white; }
.field select { padding-right: 24px; }
.field > .hint { display: block; margin-top: 7px; }
.unit-input { position: relative; }
.unit-input input { padding-right: 67px; }
.unit-input > span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--muted); pointer-events: none; }
.field input:hover, .field select:hover { border-color: #819e89; }
[aria-invalid="true"] { outline: 1px solid var(--danger); border-color: var(--danger) !important; }
.field-error { display: block; color: var(--danger); font-size: 11px; margin-top: 5px; }
.fields-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 12px; }
.tariff-card { border: 1px solid #d9e1d7; border-radius: 11px; padding: 18px 14px 17px; margin: 0 0 20px; min-width: 0; }
.tariff-card legend { padding-inline: 7px; font-size: 12px; font-weight: 650; }
.tariff-card.tou-tariff { background: #f9fbf6; border-color: #c9d9bd; margin-bottom: 12px; }
.time-fields { margin-top: 23px; margin-bottom: 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.peak-schedule { padding-top: 20px; }
.schedule-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; margin-bottom: 9px; }
.schedule-heading span { color: var(--muted); text-align: right; }
.schedule-line { display: grid; grid-template-columns: 25px repeat(24, minmax(0, 1fr)); gap: 2px; margin-bottom: 4px; }
.schedule-line > span { font-size: 11px; color: var(--muted); }
.schedule-line i { min-width: 0; height: 14px; border-radius: 2px; }
.schedule-axis { margin-left: 27px; display: flex; justify-content: space-between; font-size: 11px; font-family: ui-monospace, monospace; color: var(--muted); }
.peak-schedule > .hint { font-size: 11px; margin-top: 8px; }
.off-peak { background: var(--green-mid); fill: var(--green-mid); }
.peak { background: var(--coral); fill: var(--coral); }
.flat-key { background: #82949b; }
.legend-key { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 4px; vertical-align: 1px; }
details { min-width: 0; }
summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; gap: 6px; font-weight: 650; font-size: 12px; }
summary::-webkit-details-marker { display: none; }
summary::before { content: ''; width: 0; height: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 5px solid var(--green); flex: 0 0 auto; margin-right: 2px; }
details[open] > summary::before { transform: rotate(90deg); }
summary span { font-size: 11px; color: var(--muted); font-weight: 400; }
.editor-details { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 5px; }
.advanced-details { border-top: 1px solid var(--line); padding-top: 6px; }
.advanced-details .hint { margin: 8px 0 16px; }
.form-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 24px; }
.form-actions .text-button { font-size: 11px; }
.input-error { margin: 18px 24px 0; border: 1px solid #c37967; border-left: 3px solid var(--danger); border-radius: 6px; padding: 14px; background: #fff5f0; color: #81281e; font-size: 12px; overflow-wrap: anywhere; }
.input-error a { color: inherit; }
.output-column { min-width: 0; }
.calculation-status { color: var(--muted); font-size: 11px; margin: -18px 1px 3px; text-align: right; min-height: 15px; }
.calculation-status.busy { color: var(--green); }
.result { padding: 29px 29px 20px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); box-shadow: 0 9px 28px #253f2706; scroll-margin-top: 25px; }
.result-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.result-heading .eyebrow { font-size: 11px; }
.local-badge { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.result h2 { font-size: clamp(25px, 2.45vw, 35px); line-height: 1.12; margin-bottom: 13px; }
.difference { font-size: 12px; color: var(--muted); margin-bottom: 25px; }
.difference strong { color: var(--green); }
.bill-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.bill-card { background: #f4f6f1; border: 1px solid #dbe3d7; border-radius: 12px; padding: 16px 16px 18px; min-width: 0; }
.bill-card.selected { background: var(--green); border-color: var(--green); color: white; }
.bill-label { display: flex; justify-content: space-between; align-items: center; gap: 4px; min-height: 21px; font-size: 11px; }
.best-badge { border: 1px solid #709c88; border-radius: 4px; font-size: 11px; line-height: 1.3; padding: 3px 5px; text-align: center; }
.bill-total { display: block; font-size: clamp(25px, 2.5vw, 37px); font-weight: 450; line-height: 1.4; letter-spacing: -.045em; margin: 9px 0 4px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.bill-card small { font-size: 11px; color: var(--muted); display: block; }
.bill-card.selected small { color: #d6e8df; }
.estimate-scope { font-size: 11px; color: var(--muted); margin: 14px 0 24px; line-height: 1.7; }
.result-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); padding: 19px 0; margin: 0; }
.result-stats > div { border-right: 1px solid var(--line); padding-left: 16px; min-width: 0; }
.result-stats > div:first-child { padding-left: 0; }
.result-stats > div:last-child { border: 0; }
.result-stats dt { font-size: 11px; color: var(--muted); margin-bottom: 7px; }
.result-stats dd { font-size: 20px; letter-spacing: -.04em; margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.result-stats dd small { font-size: 11px; color: var(--muted); }
.coverage { padding: 17px 0; color: var(--muted); font-size: 11px; border-bottom: 1px solid var(--line); line-height: 1.65; }
.coverage strong { color: var(--green); font-size: 11px; }
.coverage p { margin-top: 3px; }
.coverage.has-gaps { background: #fff6e9; padding: 12px; margin-top: 10px; border: 1px solid #e5cc9f; border-radius: 7px; }
.coverage.has-gaps strong { color: #79501c; }
.hourly-chart { margin-top: 22px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hourly-chart h3 { font-size: 13px; }
.hourly-chart .section-heading p { font-size: 11px; color: var(--muted); margin-top: 4px; }
.legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; font-size: 11px; }
.legend span { white-space: nowrap; }
.hourly-chart svg { width: 100%; height: auto; display: block; margin: 18px 0 2px; }
.chart-grid { fill: none; stroke: #dce4db; stroke-dasharray: 2 5; }
.chart-labels { font: 9px ui-monospace, monospace; fill: #53675f; }
.quiet-details summary { font-size: 11px; font-weight: 400; color: var(--muted); }
.tipping-point { margin-top: 6px; background: #f0f4e8; padding: 15px; border-radius: 7px; }
.tipping-point .eyebrow { font-size: 11px; }
.tipping-point p { font-size: 11px; line-height: 1.7; color: #435f4e; margin-top: 7px; }
.bill-details { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 4px; }
.table-scroll { max-width: 100%; overflow: auto; overscroll-behavior-inline: contain; }
table { border-collapse: collapse; width: 100%; font-size: 11px; text-align: left; font-variant-numeric: tabular-nums; }
caption { text-align: left; color: var(--muted); font-size: 11px; padding: 8px 0; }
th, td { padding: 11px 10px; border-bottom: 1px solid #e3e8df; vertical-align: top; }
th { font-weight: 650; }
thead th { color: var(--muted); background: #f6f8f3; white-space: nowrap; }
td:not(:first-child) { text-align: right; }
tfoot td, tfoot th { font-weight: 700; background: #f0f4e8; }
.bill-details table { min-width: 350px; margin-bottom: 13px; }
.shift-panel { background: var(--sage); border: 1px solid #d9e1cc; border-radius: var(--radius); padding: 26px 28px 25px; margin-top: 21px; }
.shift-panel .step-heading { margin-bottom: 19px; }
.shift-label { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 8px; }
.shift-label label { font-size: 11px; font-weight: 650; }
.shift-label > div { display: inline-flex; align-items: center; flex-shrink: 0; }
.shift-label input { width: 63px; text-align: right; background: #f5f8ef; border: 1px solid #b2c5a9; border-radius: 5px; min-height: 40px; padding: 3px 6px; font-size: 18px; -moz-appearance: textfield; }
.shift-label input::-webkit-inner-spin-button { -webkit-appearance: none; }
.shift-label span { margin-left: 4px; font-size: 17px; }
#shift-range { display: block; width: 100%; height: 28px; margin: 3px 0; accent-color: var(--green); }
.range-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.shift-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-top: 17px; margin: 19px 0 15px; border-top: 1px solid #d6dfcb; gap: 16px; }
.shift-stats span { font-size: 11px; color: var(--muted); display: block; }
.shift-stats output { display: block; font-size: 24px; letter-spacing: -.04em; margin-top: 5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.report-actions { padding: 17px 3px 0; }
.report-actions .button { font-size: 11px; padding-inline: 12px; }
.report-actions label { display: block; font-size: 11px; font-weight: 650; margin: 19px 0 8px; }
.save-controls { display: flex; align-items: stretch; gap: 7px; }
.save-controls input { min-width: 0; flex: 1; }
.save-controls .button { flex-shrink: 0; }
.report-actions > .hint { margin-top: 8px; font-size: 11px; }
.audit-panel { border: 1px solid var(--line); border-radius: 11px; background: white; margin-top: 34px; padding: 7px 22px; }
.audit-panel > summary { gap: 10px; }
.audit-panel > summary span { margin-left: auto; }
#audit-content { padding: 6px 0 15px; }
#audit-content .section-heading p { font-size: 11px; color: var(--muted); align-self: center; }
#audit-content table { min-width: 650px; }
.sort { font-weight: inherit; font-size: inherit; background: transparent; text-align: left; color: var(--ink); padding: 0; min-height: 28px; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; }
.pagination span { font-size: 11px; text-align: center; color: var(--muted); }
.pagination button { font-size: 11px; }
.editor-table { min-width: 630px; }
.editor-table input { font-size: 11px; padding: 9px 7px; }
.editor-table td { padding: 6px 3px; }
.editor-table th:first-child { width: 52%; }
.editor-table th:nth-child(2), .editor-table th:nth-child(3) { width: 16%; }
.editor-heading { display: flex; gap: 14px; align-items: center; justify-content: space-between; }
.editor-heading p { font-size: 11px; color: var(--muted); }
.remove-row { min-height: 44px; background: transparent; font-size: 11px; color: var(--danger); text-decoration: underline; }
.learn { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 15px; margin: 62px 0 42px; }
.learn > div { padding-right: 25px; }
.learn h2 { font-size: 32px; line-height: 1.18; margin: 17px 0 21px; }
.learn > div p { max-width: 275px; color: var(--muted); font-size: 12px; }
.guide-card { background: #f0f3e9; border: 1px solid var(--line); border-radius: 12px; padding: 21px 20px 25px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; }
.guide-card:hover { background: #e6eeda; border-color: #a6bea8; text-decoration: none; }
.guide-card > span:first-child { font-family: ui-monospace, monospace; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: var(--muted); }
.guide-card h3 { font-size: 16px; margin: 22px 0 12px; }
.guide-card p { color: var(--muted); font-size: 11px; line-height: 1.7; }
.guide-card > span:last-child { align-self: flex-end; margin-top: auto; padding-top: 19px; font-size: 22px; }
.limitations { border-top: 1px solid var(--line); padding: 25px 0 55px; }
.limitations h3 { font-size: 15px; }
.limitations ul { padding-left: 16px; color: var(--muted); font-size: 11px; line-height: 2; margin: 12px 0 14px; }
.limitations a { font-size: 11px; font-weight: 650; text-decoration: none; }
.site-footer { border-top: 1px solid #dfe7d8; background: #e9eedf; padding: 34px 0; }
.footer-row { display: flex; gap: 26px; justify-content: space-between; align-items: center; }
.footer-row .brand { font-size: 20px; }
.footer-links { display: flex; gap: 23px; flex-wrap: wrap; }
.footer-links a { font-size: 11px; padding-block: 11px; }
.footer-note { font-size: 11px; color: var(--muted); max-width: 975px; margin-top: 18px; line-height: 1.85; }
.article { max-width: 830px; padding-block: 44px 70px; }
.breadcrumb { font-size: 11px; color: var(--muted); margin-bottom: 30px; }
.article h1 { font-size: clamp(34px, 5vw, 54px); margin: 16px 0 20px; }
.article > p { font-size: 17px; color: var(--muted); line-height: 1.75; }
.article section { border-top: 1px solid var(--line); padding-top: 25px; margin-top: 31px; }
.article h2 { font-size: 22px; margin-bottom: 14px; }
.article section p { margin-bottom: 12px; color: var(--muted); line-height: 1.85; }
.article .sources { margin: 20px 0; }
.article .footer-note { font-size: 11px; margin-bottom: 24px; }
.sources { display: flex; flex-direction: column; gap: 10px; }
.sources a { font-size: 12px; }
.saved-panel { padding: 22px; margin-top: 20px; background: white; border: 1px solid #bccfbc; border-radius: 12px; }
.saved-panel > .hint { margin-block: 10px 18px; }
.saved-row { display: flex; gap: 13px; align-items: center; border-top: 1px solid var(--line); padding: 12px 0; }
.saved-row > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.saved-row strong { display: block; font-size: 13px; }
.saved-row small { color: var(--muted); font-size: 11px; }
.danger-text { color: var(--danger); }
dialog { width: min(530px, calc(100% - 32px)); max-height: calc(100dvh - 40px); border: 1px solid #b8c9b8; border-radius: 18px; padding: 29px; color: var(--ink); background: var(--paper); box-shadow: 0 25px 85px #173c3433; }
dialog::backdrop { background: #122b255b; backdrop-filter: blur(3px); }
dialog h2 { font-size: 32px; margin: 12px 0 20px; }
#dialog-description { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
#dialog-description p + p { margin-top: 11px; }
#dialog-description .coverage { margin: 18px 0; }
#dialog-description strong { color: var(--ink); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 25px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 90; max-width: min(600px, calc(100% - 32px)); padding: 13px 20px; background: var(--ink); color: white; border-radius: 10px; font-size: 12px; box-shadow: 0 8px 26px #0002; }
.empty-result { padding: 25px 4px 35px; text-align: center; }
.empty-result h2 { margin-top: 23px; }
.empty-result p { color: var(--muted); font-size: 13px; margin: 14px auto; max-width: 340px; }
.empty-result .button { margin-top: 13px; }
.empty-orbit { width: 85px; height: 85px; background: var(--sage); border: 1px dashed #9aad96; border-radius: 50%; display: grid; place-items: center; margin: 25px auto 0; }
.empty-orbit svg { width: 30px; fill: none; stroke: var(--green); stroke-width: 1.2; }
.paused-result { min-height: 250px; display: flex; flex-direction: column; justify-content: center; gap: 15px; }
.paused-result p { color: var(--muted); font-size: 13px; }
.ad-slot { margin: 30px 0; border: 1px solid var(--line); background: #f0f3e9; text-align: center; min-height: 250px; contain: layout; }
.ad-label { font-size: 11px; color: var(--muted); }
.mobile-jump, .print-only { display: none; }
@media (min-width: 1500px) { .hero { padding-block: 76px; } }
@media (max-width: 1080px) {
  .shell { width: calc(100% - 48px); }
  .hero { gap: 32px; }
  .workspace { gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .input-section { padding-inline: 18px; }
  .result, .shift-panel { padding-inline: 22px; }
  .bill-cards { gap: 9px; }
  .bill-card { padding-inline: 12px; }
  .best-badge { font-size: 11px; }
  .learn { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); }
  .guide-card { padding-inline: 14px; }
  .nav-privacy { display: none; }
}
@media (max-width: 860px) {
  .workspace { grid-template-columns: 1fr; gap: 28px; }
  .hero { grid-template-columns: 1.3fr 1fr; gap: 22px; padding-block: 45px; }
  .hero-copy h1 { font-size: 39px; }
  .hero-copy > p:not(.privacy-note) { font-size: 14px; }
  .day-dial { padding: 38px 18px 22px; }
  .hero-actions { gap: 10px 20px; }
  .hero-actions .button { font-size: 11px; }
  .workspace-heading { align-items: flex-start; }
  .workspace-heading h2 { font-size: 22px; }
  .input-section { padding: 25px; }
  .fields-grid { gap: 18px; }
  .examples button { font-size: 11px; min-height: 44px; }
  .result, .shift-panel { padding: 27px; }
  .result h2 { font-size: 35px; }
  .bill-total { font-size: 38px; }
  .bill-card { padding: 18px; }
  .best-badge { font-size: 11px; }
  .learn { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; }
  .learn > div { grid-column: 1 / -1; padding-bottom: 12px; }
  .learn h2 { margin-block: 12px; }
  .learn > div p { max-width: 500px; }
  .mobile-jump { display: flex; position: fixed; z-index: 20; bottom: 13px; left: 50%; transform: translateX(-50%); gap: 4px; padding: 5px; border-radius: 12px; border: 1px solid #acc0a9; background: #f8f9f4f5; box-shadow: 0 5px 24px #18332b20; }
  .mobile-jump a { min-height: 40px; min-width: 125px; display: flex; justify-content: center; gap: 12px; align-items: center; text-decoration: none; border-radius: 7px; padding: 9px 14px; font-size: 12px; font-weight: 650; white-space: nowrap; }
  .mobile-jump a:last-child { background: var(--green); color: white; }
  .site-footer { padding-bottom: 95px; }
  .toast { bottom: 80px; }
}
@media (max-width: 600px) {
  .shell { width: calc(100% - 32px); }
  .nav { min-height: 72px; gap: 10px; }
  .brand { font-size: 20px; }
  .brandmark { width: 30px; height: 34px; border-radius: 9px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 11px; }
  .nav-links a:last-child { display: none; }
  .hero { display: block; padding: 37px 3px 34px; }
  .hero .eyebrow { font-size: 11px; letter-spacing: .13em; }
  .hero-copy h1 { font-size: clamp(35px, 9.7vw, 47px); margin-block: 18px 20px; }
  .hero-copy > p:not(.privacy-note) { font-size: 14px; line-height: 1.75; }
  .hero-actions { margin-top: 21px; gap: 10px 17px; }
  .hero-actions .button { font-size: 12px; padding-inline: 15px; }
  .hero-actions .text-link { font-size: 11px; }
  .privacy-note { font-size: 11px; }
  .day-dial { display: none; }
  .workspace-heading { flex-direction: column; gap: 16px; padding-top: 26px; }
  .workspace-heading .eyebrow { font-size: 11px; }
  .workspace-heading h2 { font-size: 22px; }
  .workspace-heading .button-row { align-self: stretch; }
  .workspace-heading .button { flex: 1; }
  .record-state { font-size: 11px; padding: 11px 12px; margin-block: 15px 18px; }
  .input-section { padding: 23px 18px; }
  .step-heading { gap: 10px; }
  .step-heading h3 { font-size: 15px; }
  .step-heading p { font-size: 11px; }
  .examples { gap: 4px; }
  .examples button { font-size: 11px; }
  .field label { font-size: 11px; }
  .fields-grid { gap: 14px 10px; }
  .tariff-card { padding: 15px 10px; }
  .unit-input input { padding-left: 8px; padding-right: 51px; }
  .unit-input > span { right: 7px; font-size: 11px; }
  .field input, .field select { font-size: 13px; }
  .time-fields { gap: 9px; }
  .field select { padding-left: 7px; font-size: 12px; }
  .form-actions { padding: 17px 18px; }
  .form-actions .button { font-size: 11px; }
  .result, .shift-panel { padding: 24px 19px 19px; }
  .result-heading { gap: 8px; margin-bottom: 20px; }
  .local-badge { font-size: 11px; }
  .result h2 { font-size: 30px; }
  .difference { font-size: 11px; margin-bottom: 21px; }
  .bill-cards { gap: 8px; }
  .bill-card { padding: 13px 11px; border-radius: 10px; }
  .bill-label { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 5px; min-height: 38px; font-size: 11px; }
  .bill-total { font-size: clamp(23px, 7vw, 30px); margin-block: 5px; }
  .best-badge { font-size: 11px; padding: 2px 4px; }
  .bill-card small { font-size: 11px; }
  .estimate-scope { font-size: 11px; margin-bottom: 19px; }
  .result-stats > div { padding-left: 11px; }
  .result-stats dt { font-size: 11px; }
  .result-stats dd { font-size: 18px; }
  .result-stats dd small { font-size: 11px; }
  .coverage { font-size: 11px; }
  .coverage strong { font-size: 11px; }
  .hourly-chart .section-heading { flex-direction: column; gap: 8px; }
  .hourly-chart .legend { align-self: flex-end; margin-top: -2px; }
  .hourly-chart svg { margin-top: 10px; }
  .tipping-point { padding: 13px; }
  .tipping-point p { font-size: 11px; }
  .shift-panel .step-heading p { max-width: 240px; }
  .shift-label { gap: 10px; }
  .shift-label label { font-size: 11px; }
  .shift-stats span { font-size: 11px; }
  .shift-stats output { font-size: 23px; }
  .report-actions { padding-inline: 0; }
  .report-actions .button { font-size: 11px; }
  .report-actions .text-button { font-size: 11px; }
  .save-controls .button { font-size: 11px; }
  .save-controls input { font-size: 11px; }
  .audit-panel { padding: 6px 15px; margin-top: 28px; }
  .audit-panel > summary span { display: none; }
  #audit-content .section-heading { flex-direction: column; gap: 0; }
  .learn { grid-template-columns: 1fr; gap: 12px; margin-top: 44px; }
  .learn h2 { font-size: 31px; }
  .guide-card { padding: 20px; position: relative; }
  .guide-card h3 { margin: 12px 0 9px; padding-right: 25px; }
  .guide-card p { max-width: 270px; padding-right: 20px; }
  .guide-card > span:last-child { position: absolute; right: 19px; bottom: 13px; }
  .footer-row { flex-direction: column; align-items: flex-start; gap: 15px; }
  .footer-links { gap: 4px 20px; }
  .footer-note { margin-top: 13px; font-size: 11px; }
  .saved-panel { padding: 18px; }
  .saved-row { flex-wrap: wrap; gap: 9px; }
  .saved-row > div { flex-basis: 100%; }
  dialog { padding: 23px; }
  dialog h2 { font-size: 27px; }
  .dialog-actions { flex-wrap: wrap; }
  .dialog-actions .button { flex: 1; }
  .input-error { margin-inline: 18px; }
}
/* Compact launch layout: the rate workbench is the primary content. */
.hero { display: block; padding-block: 18px 12px; }
.hero h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); margin-block: 8px 10px; }
.hero-copy > p { font-size: .86rem; line-height: 1.45; }
.hero-actions { margin-top: 8px; }
.day-dial { display: none; }
#workspace { padding-top: 8px; }
.workspace-heading { gap: 10px; padding-top: 12px; }
.record-state { margin-block: 6px 8px; padding: 7px 10px; }
.workspace { row-gap: 8px; }
.input-section { padding: 12px 16px 14px; }
.input-section, .output-section, fieldset { margin-block: 6px; }
.step-heading { gap: 10px; margin-bottom: 8px; }
.examples { margin-bottom: 8px; }
.drop-zone button { padding-block: 12px; }
.import-links { margin-top: 6px; }
.input-section > .hint { margin-block: 6px 8px; }

@media (max-width: 600px) {
  .workspace-heading { gap: 10px; padding-top: 12px; }
  .record-state { margin-block: 6px 8px; padding: 7px 10px; }
  .input-section { padding: 12px 16px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .bill-card.selected, .button.primary { border: 2px solid ButtonText; }
  .schedule-line i { border: 1px solid CanvasText; }
  .peak { forced-color-adjust: none; }
  .off-peak { forced-color-adjust: none; }
}
@media print {
  :root { font-size: 10pt; background: white; color: black; }
  body { background: white; }
  .site-header, .site-footer, .toast, main[data-print-ready] > :not(#print-report) { display: none !important; }
  .shell { width: 100%; max-width: none; }
  main[data-print-ready] #print-report { display: block !important; }
  #print-report h1 { font-size: 26pt; margin-bottom: 12pt; }
  #print-report h2 { font-size: 19pt; }
  #print-report h3 { margin-block: 12pt 7pt; }
  #print-report button, #print-report input, #print-report .quiet-details, #print-report .hourly-chart { display: none !important; }
  #print-report .result, #print-report .shift-panel { border: 0; padding: 8pt 0; box-shadow: none; margin: 0; }
  #print-report .bill-cards, #print-report .result-stats, #print-report .coverage { break-inside: avoid; }
  #print-report .bill-card.selected { background: white; color: black; border: 2px solid black; }
  #print-report .bill-card small { color: black; }
  #print-report table { font-size: 8pt; min-width: 0; width: 100%; }
  #print-report .table-scroll { overflow: visible; }
  #print-report th, #print-report td { padding: 5pt; }
  #print-report tr { break-inside: avoid; }
  #print-report thead { display: table-header-group; }
  @page { margin: 14mm; }
}

/* Refinement: readable supporting copy and input text, including narrow phones. */
.input-error strong, .input-error a { display: block; }
.input-error a { margin-top: 5px; }
.result.is-updating { border-style: dashed; border-color: var(--green); }
.report-actions[aria-disabled="true"] { opacity: .6; }
.preview-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-block: 18px; padding: 17px; border-radius: 10px; background: var(--sage); }
.preview-stats dt { font-size: 11px; }
.preview-stats dd { margin: 5px 0 0; font-size: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  html { scroll-padding-bottom: 110px; }
  .toast { bottom: 89px; }
}
@media (max-width: 600px) {
  .field input, .field select, .save-controls input, .editor-table input, #field-shift { font-size: 16px; }
  .unit-input > span { font-size: 10px; }
  .preview-stats { gap: 9px; padding: 12px; }
  .preview-stats dd { font-size: 17px; }
  .local-badge { text-align: right; }
  .bill-label { min-height: 47px; }
}

/* Calculator first: make the usage import the first substantial control. */
main#main > .hero { display: block; padding: 6px 0 3px; }
main#main > .hero .hero-copy > .eyebrow,
main#main > .hero .hero-copy > p:not(.privacy-note),
main#main > .hero .hero-actions,
main#main > .hero .privacy-note { display: none; }
main#main > .hero h1 { font-size: clamp(1.9rem, 4vw, 2.45rem); margin: 0; }
main#main > #workspace.workspace-heading { padding: 3px 0; margin: 0; border-top: 0; gap: 6px; }
main#main > #workspace.workspace-heading > div:first-child { display: none; }
main#main > #workspace.workspace-heading .button-row { gap: 4px; }
main#main > #workspace.workspace-heading .button { min-height: 34px; padding: 5px 8px; font-size: 11px; }
main#main > .record-state { margin: 2px 0 5px; padding: 5px 8px; font-size: 10px; }
main#main > .workspace { gap: 8px; }
main#main #usage-inputs { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; }
main#main #usage-inputs .step-heading { order: 0; min-height: 0; margin: 0; gap: 7px; }
main#main #usage-inputs .step-heading h3 { font-size: 12px; }
main#main #usage-inputs .step-heading p { font-size: 10px; margin: 0; }
main#main #usage-inputs #drop-zone { order: 1; margin: 0; }
main#main #usage-inputs #drop-zone button { min-height: 54px; padding: 8px 10px; }
main#main #usage-inputs .examples { order: 2; margin: 0; }
main#main #usage-inputs .import-links { order: 3; margin: 0; }
main#main #usage-inputs > .hint { order: 4; margin: 0; font-size: 10px; }
main#main #usage-inputs > .field { order: 5; margin: 0; }
main#main #usage-inputs > .editor-details { order: 6; margin: 1px 0 0; }
main#main #rate-inputs { padding: 8px 10px; }
main#main #rate-inputs .step-heading { margin: 0 0 5px; }
main#main .input-section, main#main .input-section fieldset { margin-block: 3px; }
@media (max-width: 600px) {
  main#main > .hero { padding: 3px 0 2px; }
  main#main > .hero h1 { font-size: 1.75rem; }
  main#main > #workspace.workspace-heading { padding: 2px 0; }
  main#main #usage-inputs, main#main #rate-inputs { padding: 7px 8px; }
}

/* Final calculator-first density: surface the CSV action and timezone quickly. */
body:has(#workspace) .site-header .nav { min-height: 56px; }
body:has(#workspace) .site-header .brandmark { width: 30px; height: 30px; border-radius: 8px; }
main#main > .hero { padding: 4px 0 2px; }
main#main > .hero h1 { font-size: clamp(1.65rem, 3.4vw, 2.2rem); line-height: 1.08; }
main#main > #workspace.workspace-heading { min-height: 0; padding: 3px 0; }
main#main > #workspace.workspace-heading > div:first-child { display: none; }
main#main > #workspace.workspace-heading .button { min-height: 40px; padding: 7px 9px; font-size: 11px; }
main#main > .record-state { margin: 0; padding: 3px 8px; font-size: 10px; line-height: 1.25; }
main#main > .workspace { display: block; }
main#main #usage-inputs { gap: 4px; padding: 7px 9px; }
main#main #usage-inputs .step-heading { gap: 7px; margin: 0; }
main#main #usage-inputs .step-number { min-width: 24px; height: 24px; font-size: 10px; }
main#main #usage-inputs .step-heading h3 { margin: 0; font-size: 12px; }
main#main #usage-inputs .step-heading p { font-size: 10px; line-height: 1.2; }
main#main #usage-inputs #drop-zone { order: 1; }
main#main #usage-inputs #drop-zone button { min-height: 44px; flex-direction: row; gap: 8px; padding: 5px 9px; }
main#main #usage-inputs #drop-zone svg { width: 18px; height: 18px; margin: 0; }
main#main #usage-inputs #drop-zone strong { font-size: 12px; }
main#main #usage-inputs #drop-zone span { font-size: 10px; }
main#main #usage-inputs .examples { order: 2; gap: 4px; margin: 0; overflow-x: auto; flex-wrap: nowrap; }
main#main #usage-inputs .examples button { flex: 0 0 auto; min-height: 38px; padding: 5px 8px; font-size: 10px; white-space: nowrap; }
main#main #usage-inputs .import-links { order: 3; gap: 8px; }
main#main #usage-inputs .import-links button { min-height: 36px; padding: 5px 6px; font-size: 10px; }
main#main #usage-inputs > .hint { order: 4; margin: 0; font-size: 10px; line-height: 1.35; }
main#main #usage-inputs > .field { order: 5; }
main#main #usage-inputs > .field label { margin-bottom: 3px; }
main#main #usage-inputs > .field select { min-height: 44px; padding-block: 8px; }
main#main #usage-inputs > .field > .hint { margin-top: 3px; line-height: 1.3; }
main#main #usage-inputs > .editor-details { order: 6; margin-top: 0; }
main#main #rate-inputs { padding: 8px 10px; }
@media (max-width: 600px) {
  main#main > .hero { padding: 2px 0; }
  main#main > .hero h1 { font-size: 1.65rem; }
  main#main > #workspace.workspace-heading { padding: 2px 0; }
  main#main #usage-inputs, main#main #rate-inputs { padding: 6px 8px; }
}


/* Analytics consent banner and preferences panel (injected by analytics.js) */
.analytics-consent{position:fixed;right:1rem;bottom:1rem;left:auto;z-index:1000;box-sizing:border-box;width:min(22rem,calc(100vw - 2rem));margin:0;padding:1rem 1.125rem;border:1px solid #cfcfcf;border-radius:10px;background:#fff;color:#1a1a1a;font:inherit;font-size:.875rem;line-height:1.45;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.analytics-consent h2{margin:0 0 .5rem;font-size:1rem;line-height:1.3;color:inherit}
.analytics-consent p{margin:0 0 .75rem;color:inherit}
.analytics-consent button{display:inline-block;margin:0 .5rem .25rem 0;padding:.5rem .85rem;border:1px solid #1a1a1a;border-radius:6px;background:#1a1a1a;color:#fff;font:inherit;font-size:.875rem;font-weight:600;line-height:1.2;cursor:pointer;min-height:40px}
.analytics-consent button[data-analytics="decline"],.analytics-consent button[data-analytics="close"]{background:#fff;color:#1a1a1a}
.analytics-consent button:hover{opacity:.88}
.analytics-consent button:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.analytics-consent[role="dialog"]{bottom:auto;top:50%;left:50%;right:auto;transform:translate(-50%,-50%);width:min(26rem,calc(100vw - 2rem))}
body > button[data-action="privacy-choices"]{position:fixed;left:1rem;bottom:1rem;z-index:999;margin:0;padding:.4rem .7rem;border:1px solid #cfcfcf;border-radius:999px;background:#fff;color:#1a1a1a;font:inherit;font-size:.75rem;line-height:1.2;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12)}
body > button[data-action="privacy-choices"]:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
@media (max-width:480px){.analytics-consent{right:.75rem;bottom:.75rem;width:calc(100vw - 1.5rem)}}
@media print{.analytics-consent,body > button[data-action="privacy-choices"]{display:none}}
/* Landing-page interaction motion. */
@keyframes wattreplay-bolt-zap { 0%, 100% { transform: rotate(0) translateY(0); } 35% { transform: rotate(-9deg) translateY(-1px); } 70% { transform: rotate(7deg) translateY(-2px); } }
@media (prefers-reduced-motion: no-preference) { .brand:hover .brandmark, .brand:focus-visible .brandmark { animation: wattreplay-bolt-zap .48s ease-out both; transform-origin: center; } }
@keyframes landing-tool-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes landing-result-ready { 0% { opacity: .72; transform: scale(.985); } 100% { opacity: 1; transform: scale(1); } }
main > :first-child { animation: landing-tool-enter .46s cubic-bezier(.2,.75,.25,1) both; }
main :where(form, .workspace, .studio, .calculator, .dashboard, [data-workspace]) { transition: transform .2s ease, box-shadow .2s ease; }
main :where(form, .workspace, .studio, .calculator, .dashboard, [data-workspace]):focus-within { transform: translateY(-2px); }
main :where(output, [aria-live="polite"], .result, .results, .summary, .metric):not(:empty) { animation: landing-result-ready .32s ease-out both; }
@media (prefers-reduced-motion: reduce) { main > :first-child, main :where(output, [aria-live="polite"], .result, .results, .summary, .metric):not(:empty) { animation: none; } main :where(form, .workspace, .studio, .calculator, .dashboard, [data-workspace]) { transition: none; } }
@media (prefers-reduced-motion: reduce) { .brand:hover .brandmark, .brand:focus-visible .brandmark { animation: none; } }
.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-reveal .reveal { opacity: 1; transform: none; transition: none; } }
.faq-section { margin: 42px 0; }
.faq-section details { border-bottom: 1px solid var(--line); }
.faq-section summary { font-size: 13px; font-weight: 650; min-height: 50px; padding: 15px 0; display: flex; align-items: center; }
.faq-section details p { color: var(--muted); font-size: 13px; line-height: 1.75; max-width: 760px; padding-bottom: 16px; }

/* Compact always-visible verdict so a result is on-screen on mobile without scrolling past the long form. */
.quick-result { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px; margin: 10px 0 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.quick-result #quick-result-verdict { font-weight: 700; font-size: 14px; }
.quick-result p.hint { margin: 0; font-size: 12px; }
.quick-result .button.compact { min-height: 36px; padding: 6px 12px; font-size: 11px; margin-left: auto; }
.quick-result-chart { width: 100%; display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.quick-bar { min-width: 6%; max-width: 100%; height: 20px; border-radius: 5px; display: flex; align-items: center; padding-inline: 8px; transition: width .3s ease; }
.quick-bar span { font-size: 10px; font-weight: 650; color: #fff; white-space: nowrap; }
.quick-bar-flat { background: var(--accent, #8a6624); }
.quick-bar-tou { background: var(--green); }
@media (max-width: 600px) {
  .quick-result { padding: 8px 12px; gap: 8px; margin: 8px 0 12px; }
  .quick-result p.hint { display: none; }
  .quick-result .button.compact { padding: 5px 10px; font-size: 10.5px; }
}

/* Two-way synced range slider paired with a number input. */
.field-slider { width: 100%; margin-top: 8px; min-height: 24px; accent-color: var(--green); }

.live-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); margin: 4px 0; }
.live-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.live-sparkline { display: block; margin: 2px 0 10px; }
.live-sparkline polyline { fill: none; stroke: var(--green); stroke-width: 2; }