@layer reset, base, components, responsive, themes;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, p { margin: 0; }
  button, input, select { font: inherit; }
  button, select { cursor: pointer; }
  button { -webkit-tap-highlight-color: transparent; }
  button, input, select { touch-action: manipulation; }
  svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  fieldset { min-inline-size: 0; padding: 0; margin: 0; border: 0; }
  [hidden] { display: none !important; }
}

@layer base {
  :root { color-scheme: light; --paper: #f5f3eb; --ink: #263b31; --muted: #73796d; --accent: #c82130; --accent-strong: #97131f; --accent-soft: #f8e3e1; --line: #dcded2; --mint: #d5dfcb; --display: #16271f; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--ink); background: var(--paper); font-synthesis: none; }
  body { min-width: 0; min-height: 100svh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overflow-x: clip; background-image: radial-gradient(#b4b9a320 .65px, transparent .65px); background-size: 5px 5px; }
  ::selection { background: #c8213030; }
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
  button:disabled, select:disabled { cursor: default; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
  .page-wrap { max-width: 1232px; margin-inline: auto; padding: 0 48px; }
}

@layer components {
  .site-header { min-height: 132px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 24px; border-bottom: 1px solid var(--line); }
  .brand { min-width: 0; }
  h1 { font-size: inherit; line-height: 1; }
  .wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 25px; font-weight: 800; letter-spacing: -1.2px; }
  .brand-icon { display: grid; place-items: center; width: 36px; height: 40px; color: var(--accent); }
  .brand-icon svg { width: 31px; height: 31px; stroke-width: 1.9; }
  .language-picker { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; transition: background .2s; }
  .language-picker:hover { background: #e7e9df; }
  .language-picker:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
  .language-picker svg { width: 20px; height: 20px; pointer-events: none; }
  .language-picker select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; }
  .slogan { margin-top: 7px; color: var(--muted); font-size: 13px; line-height: 1.6; }
  .station-layout { display: grid; grid-template-columns: minmax(270px, .8fr) minmax(0, 1.2fr); gap: 80px; align-items: center; padding: 52px 30px 52px 0; }
  .controls { padding-top: 5px; max-width: 356px; }
  .controls h2 { font-size: 12px; font-weight: 650; letter-spacing: 1px; line-height: 1.5; text-transform: uppercase; }
  #pump-form { margin-top: 18px; }
  .unit-switch { display: flex; padding: 4px; border-radius: 9px; background: #e7e9df; border: 1px solid #e0e2d6; margin-bottom: 25px; }
  .unit-switch button { flex: 1; min-height: 39px; border: 0; background: transparent; border-radius: 6px; color: #73796d; font-size: 12px; font-weight: 600; transition: background .2s, color .2s, box-shadow .2s; }
  .unit-switch button[aria-pressed='true'] { background: #fffef8; color: var(--ink); box-shadow: 0 1px 4px #263b3114, 0 0 0 1px #cdd1c13b; }
  .rate-input-wrap { display: flex; align-items: center; gap: 6px; border: 1px solid #c7cdbb; border-radius: 9px; background: #fffdf5; min-height: 75px; padding: 0 16px 0 18px; box-shadow: inset 0 2px 3px #283c3104; transition: border-color .2s, box-shadow .2s; }
  .rate-input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px #c8213018; }
  #rate { display: block; min-width: 0; width: 100%; padding: 10px 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 35px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -1.2px; }
  #rate:disabled { -webkit-text-fill-color: var(--ink); opacity: .65; }
  #currency { padding: 9px 0 9px 8px; border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; }
  .rate-equivalent { min-height: 18px; margin: 10px 0 24px; color: var(--muted); font-size: 11px; line-height: 1.5; }
  .rate-equivalent::before { content: '↳'; margin-right: 6px; }
  .input-error { margin-top: 8px; color: #a63220; font-size: 12px; line-height: 1.5; }
  .rate-input-wrap:has([aria-invalid='true']) { border-color: #a63220; }
  .main-button { display: flex; align-items: center; justify-content: center; gap: 9px; position: relative; width: 100%; min-height: 61px; padding: 14px 18px; border: 1px solid #a91625; border-radius: 9px; background: linear-gradient(#db3b47, #b71927); color: #fffefa; font-size: 16px; font-weight: 650; box-shadow: inset 0 1px 1px #ffffff4d, 0 4px 0 var(--accent-strong), 0 6px 10px #c8213024; transition: transform .15s, box-shadow .15s, background .2s; }
  .main-button:hover { background: linear-gradient(#e64b55, #c51d2c); transform: translateY(-1px); box-shadow: inset 0 1px 1px #ffffff4d, 0 5px 0 var(--accent-strong), 0 8px 14px #c8213033; }
  .main-button:active, .main-button[aria-pressed='true'] { transform: translateY(3px); box-shadow: inset 0 2px 5px #6f081733, 0 1px 0 var(--accent-strong); }
  .main-button[aria-pressed='true'] { background: var(--accent-soft); color: var(--accent); border-color: #d89ca0; box-shadow: inset 0 2px 4px #c821301c, 0 1px 0 #d89ca0; }
  .main-button svg { width: 19px; height: 19px; }
  .main-button .button-arrow { position: absolute; right: 18px; width: 19px; height: 19px; opacity: .7; }
  .button-help { margin-bottom: 3px; color: var(--muted); font-size: 10px; line-height: 1.5; text-align: center; }
  .reset-slot { min-height: 72px; padding-top: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .reset-button { min-height: 40px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 8px 12px; border: none; border-radius: 6px; background: transparent; color: var(--ink); font-size: 11px; }
  .reset-button:hover { background: #e5e8db; }
  .reset-button svg { width: 15px; height: 15px; }
  .meter-section { min-width: 0; }
  .pump-stage { position: relative; width: 100%; max-width: 510px; margin: 0 auto; padding: 0 21px 12px 0; isolation: isolate; }
  .pump { position: relative; z-index: 2; padding: 25px 27px 19px; border: 1px solid #8b1421; border-radius: 27px 27px 11px 11px; background: linear-gradient(105deg, #e24a51, #c82130 20%, #b71927 62%, #a31320); box-shadow: inset 0 2px 2px #ffd7caad, inset 3px 0 4px #ffffff45, inset -3px 0 4px #63051155, 0 3px 4px #49101426, 6px 6px 0 #790e1b; }
  .pump::before { content: ''; position: absolute; pointer-events: none; inset: 6px; border: 1px solid #ffcec047; border-radius: 21px 21px 6px 6px; }
  .pump-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 21px; }
  .pump-brand { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 850; letter-spacing: 1.5px; color: #fff7e7; text-shadow: 0 1px #6d091a66; }
  .pump-brand svg { width: 20px; height: 20px; stroke-width: 1.9; }
  .pump-model { color: #ffe2d8; font: 8px 'Courier New', monospace; letter-spacing: 1px; }
  .display-bezel { padding: 6px; border: 1px solid #8b8d86; border-radius: 12px; background: linear-gradient(145deg, #b6b9b0, #f7f3e8 48%, #969d95); box-shadow: 0 1px 0 #ffdfc866, 0 -1px 2px #56081266, inset 0 1px 1px #fffdf4; }
  .display-screen { position: relative; overflow: hidden; padding: 17px 16px 18px; border: 2px solid #18271b; border-radius: 7px; background: linear-gradient(115deg, #223529, #15271f 80%); box-shadow: inset 0 3px 10px #0007; color: #eff1ce; }
  .display-screen::after { content: ''; position: absolute; z-index: 4; pointer-events: none; inset: 0; background: linear-gradient(120deg, #ffffff06 0%, #ffffff03 36%, transparent 36.2%); }
  .display-topline { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 11px; color: #a6b292; font: 10px 'Courier New', monospace; font-weight: 600; letter-spacing: 1.9px; }
  .display-topline > :last-child { font-size: 13px; letter-spacing: 1px; color: #e2e8bd; }
  .odometer { display: flex; align-items: stretch; gap: 4px; height: clamp(76px, 8.8vw, 111px); font-size: clamp(56px, 7.5vw, 92px); font-weight: 400; line-height: 1; font-family: Impact, 'Arial Narrow', 'Helvetica Neue', sans-serif; font-stretch: condensed; font-variant-numeric: tabular-nums; }
  .digit-window { flex: 1; position: relative; min-width: 0; overflow: hidden; background: linear-gradient(#101d17, #2d3e2c 48%, #1c2c21 51%, #101e17); border: 1px solid #0b1913; border-radius: 4px; box-shadow: inset 0 2px 6px #0009, 0 1px 0 #5e705733; }
  .digit-window::before { content: ''; pointer-events: none; position: absolute; z-index: 2; inset: 0; background: linear-gradient(#091710c4, transparent 24%, transparent 76%, #07110ac7); }
  .digit-window::after { content: ''; pointer-events: none; position: absolute; z-index: 3; top: 50%; right: 0; left: 0; height: 1px; background: #0006; box-shadow: 0 1px #eff1ce0d; }
  .digit-strip { display: flex; height: 100%; flex-direction: column; transform: translateY(0); }
  .digit-value { display: flex; align-items: center; justify-content: center; flex: 0 0 100%; height: 100%; text-shadow: 0 0 10px #e3edb817, 0 2px 1px #0008; padding-top: 3px; }
  .digit-window.decimal-digit { color: #d0daab; }
  .decimal-point { display: flex; align-items: flex-end; justify-content: center; flex: 0 0 12px; padding: 0 0 13px; font-size: 42px; color: #eff1ce; }
  .display-rule { height: 1px; background: #829b6e38; margin: 16px 0 13px; }
  .display-bottomline { display: flex; justify-content: space-between; gap: 12px; }
  .display-bottomline > div { display: flex; flex-direction: column; gap: 7px; }
  .display-label { color: #95a887; font: 8px 'Courier New', monospace; letter-spacing: 1.5px; }
  .elapsed, #meter-rate { font-family: 'Courier New', monospace; font-size: 16px; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
  .display-rate { text-align: right; }
  #meter-rate { font-size: 12px; letter-spacing: 0; line-height: 18px; }
  .pump-status-row { display: flex; align-items: center; justify-content: space-between; padding: 15px 3px 17px; }
  .status { display: flex; align-items: center; gap: 7px; color: #ffe9dd; font-family: 'Courier New', monospace; font-size: 8px; font-weight: 600; letter-spacing: .9px; }
  .status-led { width: 6px; height: 6px; border-radius: 50%; background: #c8b9a9; box-shadow: inset 0 1px 2px #0005, 0 1px #ffdad666; }
  .flow-wheel { font-size: 21px; line-height: 1; color: #ffddca; }
  .pump[data-state='running'] .status-led { background: #8dd440; box-shadow: 0 0 8px #90d2499e, inset 0 1px 1px #e5ffcb; animation: led-breathe 2s infinite; }
  .pump[data-state='running'] .status { color: #f0ffda; }
  .pump[data-state='running'] .flow-wheel { color: #f0ffda; animation: wheel-turn 3s linear infinite; }
  .pump[data-state='paused'] .status-led { background: #d5a14a; box-shadow: 0 0 5px #d5a14a66, inset 0 1px 1px #ffe5b8; }
  .pump[data-state='paused'] .status { color: #ffe9b9; }
  /* Reserve the former panel and footer space to retain the pump proportions. */
  .pump-blank { height: 158px; }
  .screw { position: absolute; width: 7px; height: 7px; border: 1px solid #93978f; border-radius: 50%; background: linear-gradient(120deg, #f4f1e7, #abb0a8); box-shadow: 0 1px 0 #ffe6cf80; }
  .screw::after { content: ''; position: absolute; height: 1px; left: 1px; right: 1px; top: 2px; background: #72796e; transform: rotate(-35deg); }
  .screw-tl { top: 13px; left: 13px; }.screw-tr { top: 13px; right: 13px; }.screw-bl { bottom: 12px; left: 13px; }.screw-br { bottom: 12px; right: 13px; }
  .pump-plinth { position: relative; z-index: 1; height: 15px; margin: -3px -3px 0 -3px; border: 1px solid #777d73; border-radius: 0 0 6px 6px; background: linear-gradient(#959d92, #ecebe1 35%, #8f968b 42%, #d3d5ca 60%, #90988c); box-shadow: 5px 3px 0 #666e62; }
  .floor-shadow { position: absolute; z-index: -1; width: 110%; height: 32px; bottom: -2px; left: -3%; border-radius: 50%; background: #3e503233; filter: blur(13px); }
  .hose { position: absolute; z-index: 0; right: -63px; top: 62px; width: 118px; height: 360px; pointer-events: none; transform-origin: 15.4% 10%; transition: opacity .18s, transform .45s cubic-bezier(.18,.84,.24,1); }
  .pump-stage[data-state='running'] .hose { opacity: 0; transform: translateX(70px) rotate(-36deg); }
  .hose svg { width: 100%; height: 100%; overflow: visible; }
  .hose-running { position: absolute; z-index: 0; top: 78px; left: calc(100% - 42px); width: 100vw; height: 320px; pointer-events: none; opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity .18s, clip-path .7s cubic-bezier(.2,.75,.2,1); }
  .pump-stage[data-state='running'] .hose-running { opacity: 1; clip-path: inset(0); }
  .hose-running svg { width: 100%; height: 100%; overflow: visible; }
  .hose-shadow, .running-hose-shadow { stroke: #263b3122; stroke-width: 16; transform: translate(3px, 4px); filter: blur(2px); vector-effect: non-scaling-stroke; }
  .hose-pipe, .running-hose-pipe { stroke: #26332d; stroke-width: 13; vector-effect: non-scaling-stroke; }
  .nozzle { filter: drop-shadow(2px 3px 1px #263b3133); }
  .hose-control { position: absolute; z-index: 4; top: 178px; right: 0; width: 54px; height: 76px; padding: 0; border: 0; border-radius: 13px; background: transparent; touch-action: manipulation; }
  .hose-control::before { content: ''; position: absolute; inset: 8px 5px 8px 20px; border: 1px solid #65101a; border-radius: 7px 3px 3px 7px; background: linear-gradient(90deg, #8e1722, #5f0c15); box-shadow: inset 2px 0 2px #ef72753d, 2px 2px 2px #47081047; transition: background .25s, box-shadow .25s; }
  .hose-control::after { content: ''; position: absolute; top: 25px; right: 9px; width: 8px; height: 26px; border-radius: 0 3px 3px 0; background: #2b302b; box-shadow: inset 1px 0 #7c8274; }
  .hose-control:hover::before { background: linear-gradient(90deg, #a21d2a, #70101a); }
  .hose-control:focus-visible { outline-offset: 2px; }
  .pump-stage[data-state='running'] .hose-control::before { background: linear-gradient(90deg, #74111c, #4a0911); box-shadow: inset 2px 0 3px #26040780; }
  .site-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 15px; min-height: 70px; border-top: 1px solid var(--line); color: #888f80; font-size: 9px; }
  .footer-credit { line-height: 1.5; }
  .footer-credit a { color: inherit; font-weight: 700; text-decoration-color: currentColor; text-underline-offset: 2px; }
  .footer-credit a:hover { color: var(--ink); }
  .footer-domain { justify-self: end; font-weight: 600; letter-spacing: .1px; }
  .theme-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: transparent; }
  .theme-toggle svg { width: 14px; height: 14px; }
  .theme-toggle:hover { color: var(--ink); background: #e7e9df; }
  .pump.kick { animation: pump-kick .45s ease-out; }
  @keyframes pump-kick { 0%, 100% { transform: rotate(0); } 25% { transform: translateY(-3px) rotate(-.6deg); } 55% { transform: rotate(.4deg); } 75% { transform: rotate(-.2deg); } }
  @keyframes wheel-turn { to { transform: rotate(360deg); } }
  @keyframes led-breathe { 50% { box-shadow: 0 0 4px #90d24966, inset 0 1px 1px #e5ffcb; } }
}

@layer themes {
  :root[data-theme='dark'] {
    color-scheme: dark;
    --paper: #111713;
    --ink: #e3e6db;
    --muted: #a3af9c;
    --accent: #ef5963;
    --accent-strong: #73101a;
    --accent-soft: #3e1a1e;
    --line: #303c31;
  }

  [data-theme='dark'] body { background-image: radial-gradient(#a0b88c12 .65px, transparent .65px); }
  [data-theme='dark'] ::selection { background: #ef596345; }
  [data-theme='dark'] .language-picker:hover,
  [data-theme='dark'] .theme-toggle:hover,
  [data-theme='dark'] .reset-button:hover { background: #263329; }
  [data-theme='dark'] .unit-switch { background: #1d2820; border-color: #354234; }
  [data-theme='dark'] .unit-switch button { color: var(--muted); }
  [data-theme='dark'] .unit-switch button[aria-pressed='true'] { color: var(--ink); background: #354333; box-shadow: 0 1px 4px #0003, 0 0 0 1px #67775b30; }
  [data-theme='dark'] .rate-input-wrap { background: #18231b; border-color: #485740; box-shadow: inset 0 2px 4px #0002; }
  [data-theme='dark'] .rate-input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px #ef596326; }
  [data-theme='dark'] .input-error { color: #ffb2a2; }
  [data-theme='dark'] .rate-input-wrap:has([aria-invalid='true']) { border-color: #ffb2a2; }
  [data-theme='dark'] .main-button[aria-pressed='true'] { color: #ffb3b8; background: var(--accent-soft); border-color: #8d3d45; box-shadow: inset 0 2px 4px #0003, 0 1px 0 #8d3d45; }
  [data-theme='dark'] .pump { border-color: #6c101b; background: linear-gradient(105deg, #c63c47, #ab1e2d 20%, #981725 62%, #7f111d); box-shadow: inset 0 2px 2px #ffc3b350, inset 3px 0 4px #ffcbb323, inset -3px 0 4px #3c071266, 0 3px 4px #0005, 6px 6px 0 #4f0b14; }
  [data-theme='dark'] .pump::before { border-color: #ffb5a52e; }
  [data-theme='dark'] .pump-brand { color: #fff1dd; text-shadow: 0 1px #0005; }
  [data-theme='dark'] .pump-model { color: #f5cfbf; }
  [data-theme='dark'] .display-bezel { border-color: #92968b; background: linear-gradient(145deg, #72796e, #c4c7b8 48%, #697064); box-shadow: 0 1px 0 #ffcfb333, 0 -1px 2px #0005, inset 0 1px 1px #f1ebd855; }
  [data-theme='dark'] .status { color: #f5ddcc; }
  [data-theme='dark'] .flow-wheel { color: #f5d4bf; }
  [data-theme='dark'] .pump[data-state='running'] .status,
  [data-theme='dark'] .pump[data-state='running'] .flow-wheel { color: #d0e7a2; }
  [data-theme='dark'] .pump[data-state='paused'] .status { color: #edca89; }
  [data-theme='dark'] .screw { border-color: #73796d; background: linear-gradient(120deg, #bbc0ae, #777f6e); box-shadow: 0 1px 0 #ffcfb326; }
  [data-theme='dark'] .screw::after { background: #4b5543; }
  [data-theme='dark'] .pump-plinth { border-color: #697261; background: linear-gradient(#616c56, #a7af96 35%, #58634b 42%, #929e80 60%, #58664a); box-shadow: 5px 3px 0 #242b20; }
  [data-theme='dark'] .floor-shadow { background: #0008; }
  [data-theme='dark'] .hose-shadow,
  [data-theme='dark'] .running-hose-shadow { stroke: #0006; }
  [data-theme='dark'] .hose-pipe,
  [data-theme='dark'] .running-hose-pipe { stroke: #63745b; }
  [data-theme='dark'] .site-footer { color: var(--muted); }
}

@layer responsive {
  @media (min-width: 1450px) and (min-height: 950px) { .page-wrap { padding-top: 20px; } }
  @media (min-width: 720px) and (max-width: 880px) { .pump-blank { height: 139px; } }
  @media (max-width: 719px) { .pump-blank { height: 174px; } }
  @media (max-width: 374px) { .pump-blank { height: 165px; } }
  @media (max-width: 1100px) { .station-layout { gap: 46px; padding-right: 24px; }.page-wrap { padding-inline: 36px; }.pump { padding-inline: 21px; }.display-screen { padding-inline: 11px; }.slogan { font-size: 12px; }.hose { right: -56px; width: 105px; }.station-layout { grid-template-columns: minmax(250px, .85fr) minmax(0, 1.15fr); } }
  @media (min-width: 720px) and (max-width: 880px) { .page-wrap { padding-inline: 26px; }.station-layout { gap: 30px; padding: 40px 30px 40px 0; grid-template-columns: minmax(225px, .85fr) minmax(0, 1.15fr); }.pump { padding: 25px 16px 18px; border-radius: 23px 23px 10px 10px; }.pump-stage { padding-right: 6px; }.pump-brand { font-size: 13px; letter-spacing: 1px; }.pump-model { font-size: 6px; }.display-screen { padding: 14px 9px; }.display-topline { font-size: 8px; }.odometer { height: 80px; font-size: 64px; gap: 2px; }.decimal-point { flex-basis: 8px; font-size: 29px; padding-bottom: 10px; }.display-bezel { padding: 4px; }.elapsed { font-size: 13px; letter-spacing: .3px; }#meter-rate { font-size: 10px; }.status { font-size: 6.5px; letter-spacing: .4px; }.hose { top: 55px; right: -54px; width: 90px; } }
  @media (max-width: 719px) { .page-wrap { max-width: 520px; padding-inline: 25px; }.site-header { min-height: 108px; padding-block: 18px; align-items: flex-start; }.wordmark { font-size: 24px; gap: 7px; }.slogan { max-width: 290px; margin-top: 5px; font-size: 11px; line-height: 1.5; }.station-layout { display: flex; flex-direction: column; gap: 27px; padding: 28px 0 30px; align-items: stretch; }.controls { width: 100%; max-width: none; padding: 0; }#pump-form { margin-top: 20px; }.unit-switch { margin-bottom: 18px; }.unit-switch button { min-height: 40px; }.rate-input-wrap { min-height: 73px; }#rate { font-size: 35px; }.rate-equivalent { margin-bottom: 20px; }.main-button { min-height: 59px; }.reset-slot { min-height: 62px; }.meter-section { padding: 0 15px 0 0; }.pump-stage { max-width: 400px; padding-right: 13px; }.pump { padding: 25px 21px 18px; }.pump-topline { padding-bottom: 19px; }.pump-brand { font-size: 14px; }.pump-model { font-size: 7px; }.odometer { height: clamp(78px, 23vw, 111px); font-size: clamp(59px, 18.5vw, 87px); gap: 3px; }.decimal-point { flex-basis: 8px; font-size: 34px; padding-bottom: 10px; }.display-screen { padding: 15px 12px; }.display-topline { font-size: 9px; }.display-bottomline { gap: 7px; }.elapsed { font-size: 14px; }#meter-rate { font-size: 11px; }.display-rule { margin-top: 13px; }.status { font-size: 7px; letter-spacing: .7px; }.hose { right: -49px; top: 65px; width: 100px; height: 330px; }.site-footer { gap: 10px; min-height: 60px; padding-block: 17px; font-size: 8px; }.footer-domain { margin-left: auto; } }
  @media (max-width: 374px) { .page-wrap { padding-inline: 20px; }.pump { padding-inline: 15px; }.pump-brand { font-size: 12px; }.pump-model { font-size: 6px; }.display-screen { padding-inline: 8px; }.odometer { font-size: 57px; height: 77px; }.status { font-size: 6px; }.elapsed { font-size: 13px; } }
  @media (horizontal-viewport-segments: 2) { .page-wrap { max-width: none; padding-inline: 24px; }.station-layout { display: grid; grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0); gap: 0; margin-inline: -24px; padding: 15px 0; align-items: center; }.controls { width: auto; max-width: 356px; justify-self: center; margin-inline: 24px; }.meter-section { padding: 0 36px 0 24px; grid-column: 2; } }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }.digit-strip { will-change: auto; } }
  @media (min-width: 720px) and (max-width: 880px) { .station-layout { padding-right: 30px; } }
  @media (max-width: 719px) {

    #pump-form { margin-top: 14px; }
    .unit-switch { margin-bottom: 12px; }
    .rate-input-wrap { min-height: 65px; }
    #rate { font-size: 32px; }
    .rate-equivalent { margin: 8px 0 14px; }
    .main-button { min-height: 55px; }

    .station-layout { gap: 27px; }
    .meter-section { padding-right: 28px; }
    .hose { right: -47px; }
  }
  @media (hover: none) { .main-button:hover { transform: none; box-shadow: inset 0 1px 1px #ffffff4d, 0 4px 0 var(--accent-strong), 0 6px 10px #c8213024; }.main-button:active { transform: translateY(3px); }.main-button[aria-pressed='true'] { transform: translateY(3px); box-shadow: inset 0 2px 4px #c821301c, 0 1px 0 #d89ca0; } }
  @media (horizontal-viewport-segments: 2) { .station-layout { padding-right: 0; column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)); } }
}