/* A shared visual layer: template fields, thresholds and RGBW slider palettes stay intact. */
:root {
  /* Animate the scene while keeping navigation and controls directly usable. */
  view-transition-name: none;
  --live-ink: var(--text);
  --live-border: var(--line);
  --live-ease: cubic-bezier(.22, 1, .36, 1);
}

.counter-pill { font-size: 12px; }
.device-list:has(.device-scene) { gap: 18px; }

.device-card:has(.device-scene) {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--live-border);
  border-radius: 25px;
  box-shadow: 0 5px 20px #1d4e3507;
  transition: transform 250ms var(--live-ease), box-shadow 250ms, border-color 250ms;
}
.device-card:has(.device-scene):hover { border-color: #b8d0c0; box-shadow: 0 12px 30px #1d4e3512; transform: translateY(-3px); }
.device-card:has(.device-scene):active { transform: scale(.985); }
.device-card:focus-visible { outline: 3px solid #0f766e80; outline-offset: 4px; }
.device-preview { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; min-height: 210px; background: #f7fafc; border-bottom: 1px solid var(--line); }
.device-preview .device-scene { height: 210px; aspect-ratio: auto; background: transparent; }
.device-card .device-preview .scene-sky { fill: #edf4f7; }
.device-card .device-preview .light-off .scene-sky { fill: #e8eff4; }
.device-card .device-preview .scene-caption { top: auto; bottom: 6px; left: 8px; padding: 4px 6px; font-size: 8px; color: var(--muted); }
.device-live-readings { display: grid; align-content: center; gap: 9px; padding: 17px 14px 17px 6px; min-width: 0; }
.device-live-reading { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 49px; padding: 10px; border-radius: 14px; }
.device-live-reading > span { flex: 0 0 22px; font-size: 20px; text-align: center; }
.device-live-reading strong { font-size: clamp(18px, 4.7vw, 23px); letter-spacing: -.6px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.device-live-reading.temperature { background: #fff3e8; color: #b45309; }
.device-live-reading.humidity { background: #eaf6ff; color: #0369a1; }
.device-live-reading.luminosity { background: #fff9df; color: #854d0e; }
.device-live-readings[data-fresh="false"] .device-live-reading { border: 1px dashed #c5ced6; }
.device-card:has(.device-scene) .device-main { padding: 17px 0 18px 18px; min-width: 0; }
.device-card:has(.device-scene) .device-badge { margin: 20px 16px 0 10px; font-size: 10px; padding: 6px 8px; align-self: start; max-width: 108px; white-space: normal; line-height: 1.4; }
.device-badge span { flex: 0 0 6px; width: 6px; height: 6px; }
.device-badge.is-online { background: var(--green-soft); color: #087f4e; }
.device-badge.is-offline { background: #fee2e2; color: #b91c1c; }
.device-badge.is-offline span { background: #ef4444; }
.device-badge.is-stale,
.terrario-status-badge.is-stale { background: #fff3dc; color: #95702e; }
.device-badge.is-stale span,
.terrario-status-badge.is-stale span { background: #b89045; box-shadow: none; }
.device-card:has(.device-scene) .device-title { font-size: 18px; letter-spacing: -.5px; color: var(--live-ink); }
.device-card:has(.device-scene) .device-type { font-size: 12px; margin-bottom: 9px; }
.device-card:has(.device-scene) .device-mac { font-size: 11px; color: var(--muted); line-height: 1.5; }
.device-card:has(.device-scene) .device-actions { gap: 6px; margin-top: 12px; }
.small-action { font-size: 11px; font-weight: 650; padding: 7px 10px; transition: background 200ms, transform 200ms; }
.small-action:active { transform: scale(.95); }

/* SVG lives at every size without bitmap enlargement. */
.device-scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 2 / 1;
  background: #e8efe3;
  contain: paint;
}
.device-scene svg { display: block; width: 100%; height: 100%; }
.device-scene .scene-sky { fill: #edf2df; transition: fill 700ms; }
.device-scene.model-fontana { background: #e7f4f4; }
.device-scene.model-fontana .scene-sky { fill: #e5f3ee; }
.device-scene.light-off .scene-sky { fill: #e0ece8; }
.device-scene.model-fontana.light-off .scene-sky { fill: #dfedf0; }
.device-scene .scene-beam { opacity: .75; transition: opacity 700ms; }
.device-scene.light-off .scene-beam { opacity: 0; }
.device-scene .scene-lamp-glow { fill: #ffe088; transition: fill 600ms; }
.device-scene.light-off .scene-lamp-glow { fill: #b3c4bc; }
.device-scene.portrait .scene-beam { opacity: .95; }
.device-scene.portrait .scene-lamp-glow { fill: #fff6bd; filter: drop-shadow(0 2px 4px #ffc94dcc); }
.device-scene .scene-light-halo { opacity: .9; transition: opacity 700ms; }
.device-scene .scene-light-wash { opacity: .2; transition: opacity 700ms; }
.device-scene .scene-light-rays { opacity: .65; transition: opacity 700ms; }
.device-scene.portrait.light-off .scene-lamp-glow { fill: #8299a6; filter: none; }
.device-scene.portrait.light-off .scene-beam,
.device-scene.light-off .scene-light-halo,
.device-scene.light-off .scene-light-wash,
.device-scene.light-off .scene-light-rays { opacity: 0; }
.device-scene .scene-caption {
  position: absolute;
  top: 13px;
  left: 13px;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid #ffffff80;
  border-radius: 9px;
  background: #ffffffbd;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #4d7161;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
}
.device-scene[data-scene-fresh="false"] svg { filter: saturate(.65); }
.device-scene .scene-leaf-cluster { transform-box: fill-box; transform-origin: bottom center; animation: live-leaf 7s ease-in-out infinite alternate; }
.device-scene .scene-leaf-right { animation-delay: -3.4s; animation-direction: alternate-reverse; }
.device-scene .scene-particle { opacity: .4; animation: live-drift 6s ease-in-out infinite alternate; }
.device-scene .scene-particle:nth-child(2) { animation-delay: -3s; }
.device-scene .scene-fan-rotor { transform-box: fill-box; transform-origin: center; animation: live-spin 2s linear infinite; animation-play-state: paused; }
.device-scene.fan-on .scene-fan-rotor { animation-play-state: running; }
.device-scene .scene-fan-indicator { fill: #728f9b; transition: fill 400ms, filter 400ms; }
.device-scene.fan-on .scene-fan-indicator { fill: #38aa8b; filter: drop-shadow(0 0 2px #38aa8b); }
.device-scene .scene-air { opacity: 0; stroke-dasharray: 5 10; animation: live-air 2s linear infinite; animation-play-state: paused; transition: opacity 400ms; }
.device-scene.fan-on .scene-air { opacity: .85; animation-play-state: running; }
.pro-hatch-door { transform-box: fill-box; transform-origin: left center; transform: rotate(0deg); transition: transform 700ms var(--live-ease); }
[data-hatch-state="open"] .pro-hatch-door,
[data-actuator-state="open"] .pro-hatch-door { transform: rotate(-52deg); }
[data-hatch-state="opening"] .pro-hatch-door,
[data-actuator-state="opening"] .pro-hatch-door { transform: rotate(-32deg); animation: pro-hatch-open 1400ms var(--live-ease) both; }
[data-hatch-state="closing"] .pro-hatch-door,
[data-actuator-state="closing"] .pro-hatch-door { transform: rotate(-20deg); animation: pro-hatch-close 1400ms var(--live-ease) both; }
.pro-hatch-direction { display: none; }
[data-hatch-state="opening"] .pro-hatch-opening,
[data-actuator-state="opening"] .pro-hatch-opening,
[data-hatch-state="closing"] .pro-hatch-closing,
[data-actuator-state="closing"] .pro-hatch-closing { display: inline; animation: pro-hatch-direction 1100ms ease-in-out infinite; }
.device-scene.model-lite .scene-fan-unit,
.device-scene.model-std .scene-fan-unit,
.device-scene.model-lite .scene-hatch-unit,
.device-scene.model-std .scene-hatch-unit,
.device-scene.model-lite .scene-air,
.device-scene.model-std .scene-air { display: none; }
.device-scene .scene-flow { opacity: 0; stroke-dasharray: 8 6; animation: live-flow 650ms linear infinite; animation-play-state: paused; transition: opacity 500ms; }
.device-scene.pump-on .scene-flow { opacity: .85; animation-play-state: running; }
.device-scene .scene-ripple { transform-box: fill-box; transform-origin: center; opacity: 0; animation: live-ripple 2.8s ease-out infinite; animation-play-state: paused; }
.device-scene.pump-on .scene-ripple { animation-play-state: running; }
.device-scene .scene-ripple-two { animation-delay: -1.4s; }
.device-scene .scene-mist-cloud { opacity: 0; transition: opacity 500ms; }
.device-scene.mist-on .scene-mist-cloud { opacity: .5; animation: live-mist 3s ease-in-out infinite; }
.device-scene[data-scene-fresh="false"] *,
.device-scene.scene-motion-paused * { animation-play-state: paused !important; }

/* One illustration and one title per Pro control; feedback appears only on errors. */
.pro-actuator-grid { gap: 15px; }
.pro-actuator-card { position: relative; display: grid; align-content: start; gap: 18px; }
.pro-actuator-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pro-actuator-heading h3 { margin: 0; }
.pro-actuator-visual { flex: 0 0 68px; width: 68px; height: 68px; border-radius: 21px; background: linear-gradient(145deg, #edf8f6, #dfede5); border: 1px solid #deebe2; }
.hatch-card .pro-actuator-visual { background: linear-gradient(145deg, #f6f8ee, #e6eee0); border-color: #e4ebdc; }
.pro-actuator-visual svg { display: block; width: 100%; height: 100%; }
.pro-actuator-visual .pro-fan-rotor { transform-box: fill-box; transform-origin: center; animation: live-spin 2s linear infinite; animation-play-state: paused; }
.pro-actuator-visual[data-actuator-state="on"] .pro-fan-rotor { animation-play-state: running; }
.pro-actuator-visual .scene-fan-indicator { fill: #8cab99; }
.pro-actuator-visual[data-actuator-state="on"] .scene-fan-indicator { fill: #38aa8b; }
.pro-actuator-visual[data-actuator-state="unknown"] svg { opacity: .45; }
.pro-actuator-visual[data-motion-fresh="false"] *,
.pro-actuator-visual.scene-motion-paused * { animation-play-state: paused !important; }
.pro-actuator-card .terrario-light-actions { width: 100%; justify-content: center; padding: 4px; }
.pro-actuator-card .terrario-light-button { flex: 1; }
.pro-actuator-card .terrario-command-status { margin: 0; min-height: 0; }
.pro-actuator-card [hidden] { display: none !important; }
.pro-actuator-accessible { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Dashboard keeps its template structure and all configuration entry points. */
.project-card.terrario-standard-template {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  gap: 15px;
  color: var(--live-ink);
}
.project-card[hidden] { display: none !important; }
.terrario-hero-panel { gap: 15px; padding-block: 4px; }
.terrario-hero-panel:has(.device-scene) .project-hero { grid-template-columns: minmax(0, 1fr); gap: 0; }
.terrario-hero-panel:has(.device-scene) .project-icon { display: none; }
.terrario-hero-panel .project-kicker { font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.terrario-hero-panel h2 { font-size: 29px; letter-spacing: -.9px; margin: 6px 0 3px; }
.terrario-hero-panel p { font-size: 12px; color: var(--muted); }
.device-scene.hero { aspect-ratio: 2 / 1; border-radius: 24px; border: 1px solid var(--line); }
.device-scene.hero.portrait { aspect-ratio: auto; height: clamp(240px, 60vw, 310px); background: #edf2df; }
.device-scene.hero.portrait.light-off { background: #e0ece8; }
.fontana-hero-panel .device-scene.hero { border-color: #d0e5e8; }
.terrario-hero-actions { gap: 8px; }
.terrario-status-badge { font-size: 11px; font-weight: 650; padding: 8px 11px; }
.terrario-status-badge span { width: 6px; height: 6px; box-shadow: 0 0 0 4px #22a8650d; }
.terrario-hero-actions .terrario-action-button { font-size: 11px; padding: 8px 11px; }
.back-button { border-radius: 11px; font-size: 12px; font-weight: 600; padding: 10px 13px; }
.terrario-section,
.terrario-config-panel {
  border: 1px solid var(--live-border);
  background: #fff;
  border-radius: 22px;
  padding: 19px;
  box-shadow: 0 4px 17px #234a3504;
}
.terrario-section-title { gap: 11px; align-items: center; }
.terrario-section-icon { width: 38px; height: 38px; border-radius: 13px; flex: 0 0 38px; font-size: 21px; transition: background 450ms, box-shadow 450ms; }
.climate-card .terrario-section-icon { background: #fff3e8; }
.luminosity-card .terrario-section-icon, .timer-card .terrario-section-icon { background: #fff9df; }
.led-card .terrario-section-icon { background: linear-gradient(135deg, #fecaca, #bfdbfe, #bbf7d0); }
.uv-card .terrario-section-icon { background: #e9d5ff; }
.ventilation-card .terrario-section-icon { background: #e0f2fe; }
.terrario-section-icon.bulb-on { background: #fff4c2; box-shadow: inset 0 0 18px #facc2159; }
.terrario-section h3 { color: var(--live-ink); font-weight: 700; font-size: 17px; letter-spacing: -.4px; }
.terrario-section-eyebrow,
.terrario-current-label { font-size: 9px; letter-spacing: .12em; font-weight: 700; }
.terrario-section p,
.terrario-section label { font-weight: 500; font-size: 12px; line-height: 1.65; }
.terrario-reading { padding: 15px; border-radius: 16px; }
.terrario-reading span { font-size: 11px; font-weight: 500; }
.terrario-reading strong { margin-top: 6px; font-size: clamp(26px, 5.5vw, 35px); font-weight: 650; letter-spacing: -1.1px; font-variant-numeric: tabular-nums; }
.terrario-climate-readings { margin-bottom: 8px; }
.terrario-dashboard-grid:has(> .climate-card:only-child) { grid-template-columns: minmax(0, 1fr); }
.terrario-humidity-thresholds h3,
.terrario-light-status-box h3 { font-size: 14px; font-weight: 600; }
.terrario-light-control-panel { border-radius: 16px; padding: 14px; }
.terrario-light-actions { border-radius: 13px; }
.terrario-light-button { border-radius: 9px; font-weight: 650; transition: background 350ms, color 350ms, box-shadow 350ms, transform 200ms; }
.terrario-timer-delay-control label { font-size: 10px; font-weight: 650; letter-spacing: .035em; }
.terrario-standard-template input[type="number"],
.terrario-standard-template input[type="time"],
.terrario-standard-template select { font-weight: 550; border-radius: 10px; }
.terrario-action-button,
.terrario-config-button,
.terrario-icon-button { font-size: 12px; font-weight: 650; border-radius: 11px; box-shadow: 0 4px 12px #0f766e17; transition: transform 200ms, box-shadow 250ms, background 250ms; }
.terrario-action-button:active,
.terrario-config-button:active,
.terrario-light-button:active,
.fontana-momentary-button:active { transform: scale(.96); }
.terrario-config-button { padding: 9px 11px; }
.terrario-switch span { width: 48px; height: 28px; transition: background 350ms; }
.terrario-switch span::after { width: 22px; height: 22px; top: 3px; left: 3px; transition: transform 350ms var(--live-ease); box-shadow: 0 2px 5px #1634201a; }
.terrario-switch input:checked + span::after { transform: translateX(20px); }
.terrario-switch input:focus-visible + span { outline: 3px solid #0f766e60; outline-offset: 3px; }
.terrario-led-list { gap: 13px; }
.terrario-led-row { font-size: 12px; gap: 11px; }
.terrario-led-row span { font-size: 11px; font-weight: 500; }
.terrario-led-row div { height: 7px; }
.terrario-led-row i { transition: width 650ms var(--live-ease); }
.terrario-led-row strong { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.terrario-brightness-slider { transition: opacity 400ms; }
.terrario-threshold-track { border-radius: 999px; }
.terrario-threshold-track .threshold.current { transition: left 600ms var(--live-ease); }
.terrario-sun-arc .sun-dot-svg { transition: cx 600ms var(--live-ease), cy 600ms var(--live-ease); }
.terrario-readonly-field { border-radius: 13px; padding: 13px; }
.terrario-readonly-field strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.terrario-actuator { border-radius: 16px; }
.terrario-actuator-badge { font-size: 10px; font-weight: 600; }
.terrario-timer-details span { font-size: 12px; }
.terrario-timer-details strong { font-weight: 600; }
.terrario-display-toggle p { max-width: 430px; }
.scenario-dropdown-trigger { border-radius: 13px; box-shadow: none; font-weight: 600; }
.scenario-dropdown-menu { border-radius: 15px; box-shadow: 0 12px 35px #26432e17; }
.terrario-config-panel { padding: 18px; margin-top: 0; box-shadow: none; }
.terrario-config-group { border-radius: 16px; }
.terrario-config-group-title h4 { font-size: 14px; font-weight: 650; }
.terrario-config-panel label { font-weight: 500; font-size: 12px; }
.fontana-zen-template .terrario-section-icon { background: var(--fontana-soft); }
.fontana-state-row { border-radius: 13px; padding: 13px; }
.fontana-state-row span { font-size: 11px; font-weight: 500; }
.fontana-state-row strong { font-weight: 600; font-size: 13px; }
.fontana-segmented-control { border-radius: 13px; padding: 5px; box-shadow: none; }
.fontana-segmented-control button { border-radius: 9px; font-size: 12px; font-weight: 650; transition: background 350ms, color 350ms, box-shadow 350ms; }
.fontana-segmented-control button[aria-pressed="true"] { box-shadow: 0 2px 7px #1a4c5e14; }
.fontana-timer-form { border-radius: 14px; padding: 13px; }
.fontana-timer-form legend { font-size: 9px; font-weight: 650; letter-spacing: .08em; }
.fontana-momentary-button { margin: 14px 0 0; border-radius: 13px; font-size: 13px; font-weight: 650; padding: 14px; box-shadow: 0 5px 14px #0891b221; transition: transform 200ms; }

/* Loading, per-section freshness and command confirmation are intentionally separate. */
.project-sync-loading { display: grid; gap: 13px; text-align: center; padding: 18px; animation: live-enter 350ms var(--live-ease) both; }
.project-sync-loading .device-scene { text-align: left; }
.project-sync-loading .project-kicker { margin-top: 10px; font-size: 10px; font-weight: 650; color: #799271; letter-spacing: .12em; }
.project-sync-loading > small { font-size: 10px; line-height: 1.6; color: #899c80; }
.project-sync-loading .device-scene svg { opacity: .42; filter: saturate(.35); }
.project-sync-loading .device-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 20%, #ffffffaa 50%, transparent 80%);
  transform: translateX(-100%);
  animation: live-scan 1.5s ease-in-out infinite;
}
.project-sync-loading h2 { font-size: 22px; font-weight: 650; color: var(--live-ink); letter-spacing: -.7px; margin: 8px 0; }
.project-sync-loading p { font-size: 12px; line-height: 1.7; color: #7b8c7c; margin: 0; }
.project-sync-loading .sync-copy { border: 1px solid var(--live-border); border-radius: 21px; padding: 23px 20px; background: #fff; }
.sync-progress { height: 4px; width: min(100%, 260px); margin: 18px auto 8px; overflow: hidden; border-radius: 999px; background: #eaf1e6; }
.sync-progress > span { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, #5c9e77, #92ba6e); transition: width 300ms var(--live-ease); }
.sync-progress > span:not([style]) { width: 38%; animation: live-sync-progress 1300ms ease-in-out infinite; }
.sync-count { font-size: 10px; color: #7a9574; letter-spacing: .02em; }
.sync-orbit { width: 30px; height: 30px; border: 2px solid #e5ecde; border-top-color: #6caa7f; border-radius: 50%; margin: 0 auto 15px; animation: live-spin 1s linear infinite; }
.terrario-display-toggle { flex-wrap: wrap; gap: 12px; }
.terrario-display-toggle > div { flex: 1; min-width: 0; }
[data-sync-phase="fresh"] .terrario-section { animation: live-enter 350ms var(--live-ease) both; }
.command-pending { position: relative; }
button.command-pending { padding-right: 34px; }
button.command-pending::after {
  content: "";
  position: absolute;
  right: 11px;
  top: calc(50% - 6px);
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: live-spin 800ms linear infinite;
}
.terrario-command-status[data-state="pending"]::before { content: ""; display: inline-block; width: 8px; height: 8px; border: 1.5px solid #d7b77b; border-top-color: #a7782b; border-radius: 50%; margin-right: 6px; animation: live-spin 800ms linear infinite; }
.command-pending .terrario-section-icon { animation: live-pending 1s ease-in-out infinite; }

::view-transition { pointer-events: none; }
::view-transition-group(*) { animation-duration: 520ms; animation-timing-function: var(--live-ease); }
@keyframes live-spin { to { transform: rotate(360deg); } }
@keyframes pro-hatch-open { from { transform: rotate(0deg); } to { transform: rotate(-32deg); } }
@keyframes pro-hatch-close { from { transform: rotate(-52deg); } to { transform: rotate(-20deg); } }
@keyframes pro-hatch-direction { 50% { opacity: .4; stroke-dashoffset: -8; } }
@keyframes live-flow { to { stroke-dashoffset: -28; } }
@keyframes live-air { to { stroke-dashoffset: -30; } }
@keyframes live-ripple { from { transform: scale(.5); opacity: .6; } to { transform: scale(1.25); opacity: 0; } }
@keyframes live-drift { to { transform: translate(4px, -7px); opacity: .1; } }
@keyframes live-leaf { to { transform: rotate(1.4deg); } }
@keyframes live-mist { 50% { opacity: .15; transform: translateY(-5px); } }
@keyframes live-pending { 50% { opacity: .55; } }
@keyframes live-scan { to { transform: translateX(100%); } }
@keyframes live-sync-progress { from { transform: translateX(-110%); } to { transform: translateX(365%); } }
@keyframes live-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes live-fade-out { to { opacity: 0; } }
@keyframes live-fade-in { from { opacity: 0; } }

@media (min-width: 600px) {
  .device-list:has(.device-scene) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-scene.hero { max-height: 310px; }
}
@media (max-width: 599px) {
  .terrario-section { padding: 16px; border-radius: 20px; }
  .terrario-climate-readings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terrario-hero-panel h2 { font-size: 26px; }
  .device-scene.hero { border-radius: 21px; }
  .fontana-reading-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .fontana-reading-grid .terrario-reading { padding: 12px 9px; border-radius: 13px; }
  .fontana-reading-grid .terrario-reading span { font-size: 9px; }
  .fontana-reading-grid .terrario-reading strong { font-size: clamp(18px, 5.7vw, 27px); letter-spacing: -.8px; }
  .terrario-display-toggle { flex-wrap: wrap; }
  .terrario-display-toggle .terrario-switch { flex-shrink: 0; }
  .terrario-section-title { flex-wrap: wrap; }
  .timer-title-row > div:first-of-type { flex: 1; }
  .terrario-timer-actions { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .device-scene *, .device-scene::after, .pro-actuator-visual *,
  .project-sync-loading, .sync-orbit, .sync-progress > span,
  .terrario-section, .terrario-section-icon,
  .terrario-command-status::before, .command-pending::after { animation: none !important; transition: none !important; }
  .device-card, .terrario-light-button, .terrario-switch span, .terrario-switch span::after, .terrario-led-row i, .terrario-threshold-track .threshold.current, .terrario-sun-arc .sun-dot-svg { transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}