/* Four current UI candidates. Shared physics and DOM live outside this file.
   Theme hosts also appear on overview cards; geometry only targets :root. */
[data-ui-theme="clear"] {
  --ui-tone: light;
  --bg: #edf4f8;
  --panel: #ffffff;
  --ink: #133047;
  --muted: #526879;
  --line: #cadbe6;
  --water: #00788b;
  --gold: #925d18;
  --violet: #6c4eb0;
  --manual: #586d7a;
  --warning: #ab462b;
  --scene-concrete: #c3d4d9;
  --scene-steel: #688b9e;
  --scene-ground: #d8e5eb;
  --scene-water-deep: #236c89;
  --scene-ink: #183b50;
  --scene-muted: #496170;
  --chart-grid: #d1e0e8;
  --chart-ink: #526879;
  --chart-surface: #ffffff;
  --circuit-surface: #f6fafc;
  --circuit-border: #69899b;
  --circuit-active: #deeff2;
  --ui-font: "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  --ui-display-font: "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  --ui-number-font: "Segoe UI", "Microsoft YaHei", sans-serif;
  --ui-accent: #195fb6;
  --ui-accent-ink: #ffffff;
  --ui-accent-hover: #124f9b;
  --ui-control: #f9fcfe;
  --ui-control-hover: #e8f2f8;
  --ui-control-line: #71899a;
  --ui-track: #8196a5;
  --ui-gold-wash: #fff5e4;
  --ui-gold-line: #9d7946;
  --ui-gold-hover: #f8ead2;
  --ui-switch-off: #8196a5;
  --ui-switch-on: #a05235;
  --ui-thumb: #ffffff;
  --ui-focus: #195fb6;
  --ui-scene-bg: radial-gradient(ellipse at 59% 42%, #ffffff 0, #eaf3f7 60%, #dceaf1 100%);
  --ui-clock-bg: #ffffff;
  --ui-shadow: 0 18px 48px -32px #183f5a66;
  font-family: var(--ui-font);
}
[data-ui-theme="sage"] {
  --ui-tone: light;
  --bg: #f2f0e9;
  --panel: #f9faf4;
  --ink: #243f36;
  --muted: #5c6f60;
  --line: #cbd3c5;
  --water: #14766a;
  --gold: #8c5d16;
  --violet: #79578c;
  --manual: #5f6b65;
  --warning: #9c432c;
  --scene-concrete: #c8cdbb;
  --scene-steel: #788d81;
  --scene-ground: #dce3d4;
  --scene-water-deep: #346b67;
  --scene-ink: #29483d;
  --scene-muted: #50624f;
  --chart-grid: #d2d7c8;
  --chart-ink: #5c6f60;
  --chart-surface: #f9faf4;
  --circuit-surface: #e8ede2;
  --circuit-border: #718671;
  --circuit-active: #d8e8d9;
  --ui-font: "Microsoft YaHei", "PingFang SC", sans-serif;
  --ui-display-font: "Songti SC", "STSong", "SimSun", serif;
  --ui-number-font: Georgia, "Times New Roman", serif;
  --ui-accent: #276e55;
  --ui-accent-ink: #ffffff;
  --ui-accent-hover: #1d5944;
  --ui-control: #fcfcf7;
  --ui-control-hover: #e9eee2;
  --ui-control-line: #7d8d81;
  --ui-track: #879284;
  --ui-gold-wash: #f3ead4;
  --ui-gold-line: #927343;
  --ui-gold-hover: #ece0c2;
  --ui-switch-off: #879284;
  --ui-switch-on: #9c543a;
  --ui-thumb: #fffef6;
  --ui-focus: #276e55;
  --ui-scene-bg: radial-gradient(ellipse at 60% 40%, #fafbf3 0, #ebefe1 60%, #e1e7d7 100%);
  --ui-clock-bg: #f9faf2;
  --ui-shadow: 0 16px 40px -30px #294c3752;
  font-family: var(--ui-font);
}
[data-ui-theme="graphite"] {
  --ui-tone: dark;
  --bg: #1d2022;
  --panel: #292e30;
  --ink: #f2f3ea;
  --muted: #acb6b9;
  --line: #475154;
  --water: #70cbc7;
  --gold: #f2b767;
  --violet: #c0ade7;
  --manual: #aabbc5;
  --warning: #f5a17e;
  --scene-concrete: #929d9e;
  --scene-steel: #879da3;
  --scene-ground: #394244;
  --scene-water-deep: #285d63;
  --scene-ink: #dbe4df;
  --scene-muted: #aebdbb;
  --chart-grid: #424d50;
  --chart-ink: #acb6b9;
  --chart-surface: #252a2c;
  --circuit-surface: #252a2c;
  --circuit-border: #8d9b9e;
  --circuit-active: #334d4d;
  --ui-font: "Bahnschrift", "Segoe UI", "Microsoft YaHei", sans-serif;
  --ui-display-font: "Bahnschrift", "Segoe UI", "Microsoft YaHei", sans-serif;
  --ui-number-font: "Bahnschrift", "Segoe UI", sans-serif;
  --ui-accent: #f2b767;
  --ui-accent-ink: #262820;
  --ui-accent-hover: #ffd095;
  --ui-control: #333a3d;
  --ui-control-hover: #414b4f;
  --ui-control-line: #7a878d;
  --ui-track: #7c8b90;
  --ui-gold-wash: #403829;
  --ui-gold-line: #b19361;
  --ui-gold-hover: #51452e;
  --ui-switch-off: #7c8b90;
  --ui-switch-on: #b87754;
  --ui-thumb: #f4f3e9;
  --ui-focus: #f2b767;
  --ui-scene-bg: radial-gradient(ellipse at 58% 42%, #3b4547 0, #2b3336 58%, #242b2e 100%);
  --ui-clock-bg: #202628;
  --ui-shadow: 0 12px 32px -24px #00000099;
  font-family: var(--ui-font);
}
[data-ui-theme="blueprint"] {
  --ui-tone: dark;
  --bg: #0b3359;
  --panel: #103e66;
  --ink: #eff6fb;
  --muted: #b5cddd;
  --line: #39678c;
  --water: #69dbe6;
  --gold: #ffd98e;
  --violet: #d0b6f1;
  --manual: #b8cbe1;
  --warning: #ffbb9b;
  --scene-concrete: #a0c2d6;
  --scene-steel: #81b0c8;
  --scene-ground: #194d77;
  --scene-water-deep: #155a83;
  --scene-ink: #e2f2fa;
  --scene-muted: #b4d0e2;
  --chart-grid: #39678c;
  --chart-ink: #b5cddd;
  --chart-surface: #103b61;
  --circuit-surface: #103b61;
  --circuit-border: #9ac3dc;
  --circuit-active: #1a5377;
  --ui-font: "Microsoft YaHei", "PingFang SC", sans-serif;
  --ui-display-font: "Microsoft YaHei", "PingFang SC", sans-serif;
  --ui-number-font: "Consolas", "SFMono-Regular", monospace;
  --ui-accent: #e6f3fa;
  --ui-accent-ink: #17476d;
  --ui-accent-hover: #ffffff;
  --ui-control: #164970;
  --ui-control-hover: #215c86;
  --ui-control-line: #759bb9;
  --ui-track: #759bb9;
  --ui-gold-wash: #304951;
  --ui-gold-line: #c2a872;
  --ui-gold-hover: #3e575b;
  --ui-switch-off: #759bb9;
  --ui-switch-on: #be815e;
  --ui-thumb: #f3faff;
  --ui-focus: #ffd98e;
  --ui-scene-bg: linear-gradient(#a6cfe30a 1px, transparent 1px), linear-gradient(90deg, #a6cfe30a 1px, transparent 1px), radial-gradient(ellipse at 58% 42%, #174d78, #0d3a62 80%);
  --ui-clock-bg: #103b61;
  --ui-shadow: none;
  font-family: var(--ui-font);
}

:root[data-ui-theme] {
  color-scheme: dark;
  font-family: var(--ui-font);
  scrollbar-color: var(--muted) var(--bg);
}
:root[data-ui-theme="clear"],
:root[data-ui-theme="sage"] { color-scheme: light; }
:root[data-ui-theme] body { background: var(--bg); color: var(--ink); }
:root[data-ui-theme] ::selection { background: var(--ui-accent); color: var(--ui-accent-ink); }
:root[data-ui-theme] button:focus-visible,
:root[data-ui-theme] a:focus-visible,
:root[data-ui-theme] input:focus-visible,
:root[data-ui-theme] select:focus-visible,
:root[data-ui-theme] summary:focus-visible { outline-color: var(--ui-focus); }
:root[data-ui-theme] .shell { max-width: 1680px; padding: 0 clamp(20px, 4vw, 68px); }
:root[data-ui-theme] .masthead { height: 74px; border-color: var(--line); }
:root[data-ui-theme] .brand { color: var(--ink); font-size: 1.35rem; font-weight: 600; }
:root[data-ui-theme] .brand svg { width: 34px; height: 34px; }
:root[data-ui-theme] .masthead-actions { display: flex; align-items: center; gap: 10px; }
:root[data-ui-theme] .ui-style-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 13px; border: 1px solid var(--ui-control-line); border-radius: 8px; background: var(--ui-control); color: var(--ink); font-size: 16px; line-height: 1.35; text-decoration: none; white-space: nowrap; }
:root[data-ui-theme] .ui-style-link:hover,
:root[data-ui-theme] .icon-button:hover { background: var(--ui-control-hover); border-color: var(--muted); }
:root[data-ui-theme] .icon-button { background: var(--ui-control); border-color: var(--ui-control-line); }
:root[data-ui-theme] .page-heading { min-height: 90px; padding: 24px 0 20px; }
:root[data-ui-theme] .page-heading h1 { font-family: var(--ui-display-font); font-size: clamp(1.85rem, 2.7vw, 2.55rem); font-weight: 600; letter-spacing: -.025em; }
:root[data-ui-theme] .run-status { font-weight: 500; }
:root[data-ui-theme] .scenario-toolbar { gap: 16px; margin-bottom: 20px; }
:root[data-ui-theme] .workspace { border-color: var(--line); box-shadow: var(--ui-shadow); }
:root[data-ui-theme] .scene-panel { background: var(--ui-scene-bg); }
:root[data-ui-theme] .scene-top { top: 17px; left: 26px; right: auto; max-width: calc(100% - 52px); gap: 0; justify-content: flex-start; }
:root[data-ui-theme] #clock,
:root[data-ui-theme] #phaseLabel { display: inline-flex; align-items: center; width: max-content; min-height: 32px; margin: 0; padding: 4px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--ui-clock-bg); color: var(--muted); font-size: 16px; line-height: 22px; white-space: nowrap; }
:root[data-ui-theme] #phaseLabel { color: var(--gold); }
:root[data-ui-theme] .scene-top:has(#phaseLabel:not([hidden])) #clock { display: none; }
:root[data-ui-theme] .water-readout { top: 63px; left: 26px; }
:root[data-ui-theme] .reading-label { color: var(--muted); }
:root[data-ui-theme] .water-readout strong { color: var(--ink); font-family: var(--ui-number-font); font-size: 60px; font-weight: 500; line-height: 1.05; letter-spacing: -.035em; }
:root[data-ui-theme] .water-readout .unit { color: var(--muted); font-size: 18px; }
:root[data-ui-theme] .flow-readouts strong { color: var(--ink); font-family: var(--ui-number-font); font-size: 24px; }
:root[data-ui-theme] .flow-readouts small { color: var(--muted); font-family: var(--ui-font); font-size: 16px; }
:root[data-ui-theme] .selection-detail { background: var(--ui-clock-bg); border: 1px solid var(--line); }
:root[data-ui-theme] #circuit { border-color: var(--line); background: var(--circuit-surface); }
:root[data-ui-theme] .control-panel { padding: 22px 24px; gap: 10px; background: var(--panel); border-color: var(--line); }
:root[data-ui-theme] .panel-heading { margin-bottom: 8px; }
:root[data-ui-theme] select { border-color: var(--ui-control-line); background-color: var(--ui-control); color: var(--ink); }
:root[data-ui-theme] select:hover { border-color: var(--muted); }
:root[data-ui-theme] .control-field output { color: var(--ink); font-family: var(--ui-number-font); font-size: 24px; font-weight: 500; }
:root[data-ui-theme] .control-field small { color: var(--muted); font-family: var(--ui-font); font-size: 16px; }
:root[data-ui-theme] input[type="range"] { height: 44px; }
:root[data-ui-theme] input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--water) var(--fill, 50%), var(--ui-track) var(--fill, 50%)); }
:root[data-ui-theme] input[type="range"]::-moz-range-track { background: linear-gradient(to right, var(--water) var(--fill, 50%), var(--ui-track) var(--fill, 50%)); }
:root[data-ui-theme] input[type="range"]::-webkit-slider-thumb { border-color: var(--water); background: var(--ui-thumb); }
:root[data-ui-theme] input[type="range"]::-moz-range-thumb { border-color: var(--water); background: var(--ui-thumb); }
:root[data-ui-theme] .surge-button { border-color: var(--ui-gold-line); background: var(--ui-gold-wash); color: var(--gold); }
:root[data-ui-theme] .surge-button:hover { background: var(--ui-gold-hover); }
:root[data-ui-theme] .primary-button { border-color: var(--ui-accent); background: var(--ui-accent); color: var(--ui-accent-ink); font-weight: 600; }
:root[data-ui-theme] .primary-button:hover { border-color: var(--ui-accent-hover); background: var(--ui-accent-hover); }
:root[data-ui-theme] .secondary-button { border-color: var(--ui-control-line); background: var(--ui-control); color: var(--ink); }
:root[data-ui-theme] .secondary-button:hover { border-color: var(--muted); background: var(--ui-control-hover); }
:root[data-ui-theme] .analysis-row { margin-top: 26px; }
:root[data-ui-theme] .chart-panel { padding: 22px 24px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--chart-surface); }
:root[data-ui-theme] .chart-heading h2 { color: var(--ink); font-family: var(--ui-display-font); font-size: 21px; font-weight: 600; }
:root[data-ui-theme] .chart-legend { margin-top: 8px; }
:root[data-ui-theme] #chart { height: 210px; }
:root[data-ui-theme] .comparison-results { margin-top: 12px; }
:root[data-ui-theme] th,
:root[data-ui-theme] td { border-color: var(--line); }
:root[data-ui-theme] .experiment-toolbar { margin-top: 18px; padding: 12px 24px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
:root[data-ui-theme] .experiment-details summary { color: var(--muted); }
:root[data-ui-theme] .experiment-details[open] summary { color: var(--ink); }
:root[data-ui-theme] .experiment-content { padding-top: 16px; padding-bottom: 16px; }
:root[data-ui-theme] .switch::before { background: var(--ui-switch-off); }
:root[data-ui-theme] .switch[aria-checked="true"]::before { background: var(--ui-switch-on); }
:root[data-ui-theme] .switch span { background: var(--ui-thumb); }
:root[data-ui-theme] .toast { border: 1px solid var(--ui-control-line); background: var(--panel); color: var(--ink); box-shadow: var(--ui-shadow); }

/* Clear: bright, spacious surfaces with blue operation accents. */
:root[data-ui-theme="clear"] .workspace { border-radius: 20px; }
:root[data-ui-theme="clear"] .scene-panel { border-radius: 19px 0 0 0; }
:root[data-ui-theme="clear"] .control-panel { border-radius: 0 19px 0 0; }
:root[data-ui-theme="clear"] #circuit { border-radius: 0 0 19px 19px; }
:root[data-ui-theme="clear"] .primary-button,
:root[data-ui-theme="clear"] .secondary-button,
:root[data-ui-theme="clear"] .surge-button,
:root[data-ui-theme="clear"] select { border-radius: 9px; }

/* Sage: warm mineral paper, softened edges, typographic rather than ornamental. */
:root[data-ui-theme="sage"] .shell { max-width: 1640px; }
:root[data-ui-theme="sage"] .masthead { height: 78px; }
:root[data-ui-theme="sage"] .page-heading { min-height: 100px; }
:root[data-ui-theme="sage"] .page-heading h1 { letter-spacing: .035em; }
:root[data-ui-theme="sage"] .workspace { border-radius: 24px; }
:root[data-ui-theme="sage"] .scene-panel { border-radius: 23px 0 0 0; }
:root[data-ui-theme="sage"] .control-panel { border-radius: 0 23px 0 0; padding: 24px; }
:root[data-ui-theme="sage"] #circuit { border-radius: 0 0 23px 23px; }
:root[data-ui-theme="sage"] .water-readout strong { font-weight: 400; letter-spacing: -.025em; }
:root[data-ui-theme="sage"] .flow-readouts strong,
:root[data-ui-theme="sage"] .control-field output { font-weight: 400; }
:root[data-ui-theme="sage"] .primary-button,
:root[data-ui-theme="sage"] .secondary-button,
:root[data-ui-theme="sage"] .surge-button,
:root[data-ui-theme="sage"] select { border-radius: 12px; }
:root[data-ui-theme="sage"] .chart-panel { padding-top: 26px; border-radius: 22px; }
:root[data-ui-theme="sage"] .experiment-toolbar { border-radius: 16px; }

/* Graphite: flat instrument surfaces, compact controls, luminous measured water. */
:root[data-ui-theme="graphite"] .shell { max-width: 1600px; }
:root[data-ui-theme="graphite"] .masthead { height: 64px; border-bottom-width: 2px; }
:root[data-ui-theme="graphite"] .page-heading { min-height: 82px; padding-top: 20px; padding-bottom: 18px; }
:root[data-ui-theme="graphite"] .page-heading h1 { font-weight: 600; }
:root[data-ui-theme="graphite"] .workspace { grid-template-columns: minmax(0, 1fr) 310px; border-radius: 6px; }
:root[data-ui-theme="graphite"] .scene-panel { border-radius: 5px 0 0 0; }
:root[data-ui-theme="graphite"] .control-panel { border-radius: 0 5px 0 0; padding: 18px 22px; gap: 8px; }
:root[data-ui-theme="graphite"] #circuit { border-radius: 0 0 5px 5px; }
:root[data-ui-theme="graphite"] .water-readout strong { font-weight: 600; }
:root[data-ui-theme="graphite"] .primary-button,
:root[data-ui-theme="graphite"] .secondary-button,
:root[data-ui-theme="graphite"] .surge-button,
:root[data-ui-theme="graphite"] select,
:root[data-ui-theme="graphite"] .ui-style-link { border-radius: 4px; }
:root[data-ui-theme="graphite"] .icon-button { border-radius: 6px; }
:root[data-ui-theme="graphite"] .chart-panel { border-radius: 6px; padding-top: 18px; }
:root[data-ui-theme="graphite"] .experiment-toolbar { border-radius: 6px; }
:root[data-ui-theme="graphite"] .chart-heading h2 { font-family: var(--ui-font); }

/* Blueprint: engineering paper lines and a square, ordered control vocabulary. */
:root[data-ui-theme="blueprint"] .masthead { border-bottom-color: #75aac5; }
:root[data-ui-theme="blueprint"] .page-heading h1 { font-weight: 600; letter-spacing: .015em; }
:root[data-ui-theme="blueprint"] .workspace { border: 1px solid #75aac5; border-radius: 2px; }
:root[data-ui-theme="blueprint"] .scene-panel { border-radius: 1px 0 0 0; background-size: 28px 28px, 28px 28px, auto; }
:root[data-ui-theme="blueprint"] .control-panel { border-radius: 0 1px 0 0; }
:root[data-ui-theme="blueprint"] #circuit { border-radius: 0 0 1px 1px; }
:root[data-ui-theme="blueprint"] #clock { font-family: var(--ui-number-font); }
:root[data-ui-theme="blueprint"] .water-readout strong { font-size: 56px; font-weight: 400; }
:root[data-ui-theme="blueprint"] .flow-readouts strong,
:root[data-ui-theme="blueprint"] .control-field output { font-size: 23px; font-weight: 400; }
:root[data-ui-theme="blueprint"] .primary-button,
:root[data-ui-theme="blueprint"] .secondary-button,
:root[data-ui-theme="blueprint"] .surge-button,
:root[data-ui-theme="blueprint"] select,
:root[data-ui-theme="blueprint"] .ui-style-link,
:root[data-ui-theme="blueprint"] .icon-button,
:root[data-ui-theme="blueprint"] #clock,
:root[data-ui-theme="blueprint"] #phaseLabel { border-radius: 2px; }
:root[data-ui-theme="blueprint"] .chart-panel { border-color: #75aac5; border-radius: 2px; }
:root[data-ui-theme="blueprint"] .experiment-toolbar { border-radius: 2px; }

@media (max-width: 1100px) {
  :root[data-ui-theme] .shell { padding-right: 24px; padding-left: 24px; }
  :root[data-ui-theme] .workspace { grid-template-columns: minmax(0, 1fr) 280px; }
  :root[data-ui-theme] .control-panel { padding-right: 18px; padding-left: 18px; }
}
@media (max-width: 800px) {
  :root[data-ui-theme] .shell { padding-right: 20px; padding-left: 20px; }
  :root[data-ui-theme] .workspace { grid-template-columns: minmax(0, 1fr); }
  :root[data-ui-theme] .scene-panel { border-radius: 15px 15px 0 0; }
  :root[data-ui-theme="clear"] .scene-panel { border-radius: 19px 19px 0 0; }
  :root[data-ui-theme="sage"] .scene-panel { border-radius: 23px 23px 0 0; }
  :root[data-ui-theme="graphite"] .scene-panel { border-radius: 5px 5px 0 0; }
  :root[data-ui-theme="blueprint"] .scene-panel { border-radius: 1px 1px 0 0; }
  :root[data-ui-theme] #circuit { border-radius: 0; }
  :root[data-ui-theme] .control-panel { border-radius: 0 0 15px 15px; padding: 20px 22px; gap: 20px 28px; }
  :root[data-ui-theme="clear"] .control-panel { border-radius: 0 0 19px 19px; }
  :root[data-ui-theme="sage"] .control-panel { border-radius: 0 0 23px 23px; }
  :root[data-ui-theme="graphite"] .control-panel { border-radius: 0 0 5px 5px; }
  :root[data-ui-theme="blueprint"] .control-panel { border-radius: 0 0 1px 1px; }
}
@media (max-width: 480px) {
  :root[data-ui-theme] .shell { padding-right: 14px; padding-left: 14px; }
  :root[data-ui-theme] .masthead,
  :root[data-ui-theme="sage"] .masthead { height: 66px; gap: 12px; }
  :root[data-ui-theme] .brand { gap: 7px; font-size: 1.1rem; }
  :root[data-ui-theme] .brand svg { width: 28px; height: 28px; }
  :root[data-ui-theme] .masthead-actions { gap: 8px; }
  :root[data-ui-theme] .ui-style-link { min-height: 44px; padding: 7px 8px; }
  :root[data-ui-theme] .page-heading,
  :root[data-ui-theme="sage"] .page-heading,
  :root[data-ui-theme="graphite"] .page-heading { min-height: 78px; padding-top: 20px; padding-bottom: 17px; gap: 10px; }
  :root[data-ui-theme] .page-heading h1 { font-size: 1.6rem; }
  :root[data-ui-theme="sage"] .page-heading h1 { letter-spacing: .015em; }
  :root[data-ui-theme] .run-status { max-width: 6em; font-size: 16px; }
  :root[data-ui-theme] .scenario-toolbar { gap: 10px; margin-bottom: 16px; }
  :root[data-ui-theme] .scenario-toolbar > .secondary-button { padding-right: 9px; padding-left: 9px; }
  :root[data-ui-theme] .scene-top { top: 13px; left: 16px; max-width: calc(100% - 32px); }
  :root[data-ui-theme] .water-readout { top: 62px; left: 16px; }
  :root[data-ui-theme] .water-readout strong,
  :root[data-ui-theme="blueprint"] .water-readout strong { font-size: 44px; line-height: 1.08; }
  :root[data-ui-theme] .water-readout .unit { font-size: 16px; }
  :root[data-ui-theme] .flow-readouts { left: 16px; right: 16px; gap: 10px; }
  :root[data-ui-theme] .flow-readouts strong,
  :root[data-ui-theme="blueprint"] .flow-readouts strong { font-size: 20px; }
  :root[data-ui-theme] .control-panel,
  :root[data-ui-theme="sage"] .control-panel,
  :root[data-ui-theme="graphite"] .control-panel { padding: 18px 16px 20px; gap: 17px; }
  :root[data-ui-theme] .control-field output,
  :root[data-ui-theme="blueprint"] .control-field output { font-size: 24px; }
  :root[data-ui-theme] .chart-panel,
  :root[data-ui-theme="sage"] .chart-panel,
  :root[data-ui-theme="graphite"] .chart-panel { padding: 14px 14px 12px; }
  :root[data-ui-theme] .chart-heading h2 { font-size: 20px; }
  :root[data-ui-theme] .chart-legend { gap: 8px 16px; }
  :root[data-ui-theme] th,
  :root[data-ui-theme] td { padding: 9px 3px; }
  :root[data-ui-theme] #chart { height: 216px; }
  :root[data-ui-theme] .experiment-toolbar { padding: 10px 15px 3px; }
  :root[data-ui-theme] .experiment-content { padding-top: 12px; }
}
@media (max-width: 360px) {
  :root[data-ui-theme] .shell { padding-right: 10px; padding-left: 10px; }
  :root[data-ui-theme] .page-heading { gap: 7px; }
  :root[data-ui-theme] .page-heading h1 { font-size: 1.5rem; }
  :root[data-ui-theme] .scene-top,
  :root[data-ui-theme] .water-readout { left: 14px; }
  :root[data-ui-theme] .flow-readouts { left: 14px; right: 14px; gap: 7px; }
  :root[data-ui-theme] .chart-panel { padding-right: 11px; padding-left: 11px; }
}