/* Keep On — ink, paper and a little electricity. Shared by every public page. */
:root {
  color-scheme: light;
  --ink: #151a24;
  --muted: #596271;
  --cream: #f6f5f1;
  --paper: #fefefd;
  --line: #cbd0d9;
  --border: #788599;
  --accent: #2458d3;
  --accent-hover: #1944ac;
  --on-accent: #fff;
  --accent-wash: #e8eefb;
  --wash: var(--accent-wash);
  --hover: #e0e8f6;
  --planner: #eaf0f8;
  --story: #dce7f8;
  --success: #24634d;
  --success-wash: #e6f0eb;
  --warning: #885119;
  --warning-wash: #f5e8d5;
  --warning-line: #ab712e;
  --error: #b33437;
  --inverse: #0b1019;
  --on-inverse: #f5f7fc;
  --inverse-muted: #b1bccd;
  --yellow: #e1bb87;
  --green: var(--success-wash);
  --orange: var(--warning);
  --house-body: #c8d4e7;
  --house-line: #41516c;
  --house-wall: #b3c0d4;
  --house-active: #94b8f8;
  --house-screen: #728ba9;
  --house-lit: #d9e9ff;
  --header-height: 88px;
  scroll-padding-top: calc(var(--header-height) + 20px);
  accent-color: var(--accent);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f1f3f8;
  --muted: #aeb9ca;
  --cream: #10141c;
  --paper: #181e29;
  --line: #343f50;
  --border: #748299;
  --accent: #91b4ff;
  --accent-hover: #b1caff;
  --on-accent: #101a2e;
  --accent-wash: #202e48;
  --hover: #24334c;
  --planner: #151e2d;
  --story: #1c2b43;
  --success: #a0d6bc;
  --success-wash: #1a322d;
  --warning: #ebc187;
  --warning-wash: #332a20;
  --warning-line: #b58e56;
  --error: #ffb0af;
  --house-body: #22314c;
  --house-line: #8aa1c3;
  --house-wall: #33445c;
  --house-active: #4e79b8;
  --house-screen: #365a82;
  --house-lit: #c9e0ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --ink: #f1f3f8;
    --muted: #aeb9ca;
    --cream: #10141c;
    --paper: #181e29;
    --line: #343f50;
    --border: #748299;
    --accent: #91b4ff;
    --accent-hover: #b1caff;
    --on-accent: #101a2e;
    --accent-wash: #202e48;
    --hover: #24334c;
    --planner: #151e2d;
    --story: #1c2b43;
    --success: #a0d6bc;
    --success-wash: #1a322d;
    --warning: #ebc187;
    --warning-wash: #332a20;
    --warning-line: #b58e56;
    --error: #ffb0af;
    --house-body: #22314c;
    --house-line: #8aa1c3;
    --house-wall: #33445c;
    --house-active: #4e79b8;
    --house-screen: #365a82;
    --house-lit: #c9e0ff;
  }
}
::selection {background:var(--accent);color:var(--on-accent);}
body {background:var(--cream);color:var(--ink);}
input::placeholder {color:var(--muted);opacity:1;}
.search-field,.select-field,.catalog-scope select {border-color:var(--border);}
.skip {position:fixed;z-index:100;background:var(--paper);color:var(--ink);}
.skip:focus {z-index:100;background:var(--paper);color:var(--ink);}

/* An actual title bar, separate from the photograph and always within reach. */
.site-header {
  position:sticky;
  top:0;
  z-index:30;
  width:100%;
  max-width:none;
  min-height:0;
  margin:0;
  display:block;
  background:var(--inverse);
  color:var(--on-inverse);
  border:0;
  border-bottom:1px solid #2a3343;
  line-height:1.4;
}
.site-header-inner {
  min-height:var(--header-height);
  width:calc(100% - 112px);
  max-width:1440px;
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:30px;
}
.site-brand {display:flex;align-items:center;gap:22px;flex-shrink:0;text-decoration:none;}
.site-wordmark {font-size:35px;line-height:1;font-weight:750;letter-spacing:-2.3px;white-space:nowrap;}
.site-wordmark>span {color:#91b4ff;}
.site-brand-note {max-width:92px;padding-left:20px;border-left:1px solid #394456;font-size:10px;line-height:1.65;letter-spacing:.03em;color:var(--inverse-muted);}
.site-nav-panel {display:flex;align-items:center;gap:28px;flex:1;justify-content:flex-end;}
.site-header .site-nav {display:flex;align-items:center;gap:25px;flex-wrap:nowrap;font-size:13px;font-weight:400;}
.site-header .site-nav a {position:relative;display:inline-flex;align-items:center;min-height:44px;padding:10px 0;color:#cbd3e0;text-decoration:none;white-space:nowrap;}
.site-header .site-nav a::after {position:absolute;content:'';bottom:3px;left:0;width:0;height:2px;background:#91b4ff;transition:width .18s ease;}
.site-header .site-nav a[aria-current="page"],.site-header .site-nav a:hover {color:#fff;}
.site-header .site-nav a[aria-current="page"]::after,.site-header .site-nav a:hover::after {width:20px;}
.header-action {display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:10px 18px;border:1px solid #6b7a91;border-radius:4px;background:transparent;color:inherit;font:500 12px/1.4 Arial,sans-serif;white-space:nowrap;text-decoration:none;cursor:pointer;}
.header-action:hover {background:#202c40;border-color:#a7b8d1;}
.site-header .count {font-size:10px;min-width:18px;height:18px;display:inline-grid;place-items:center;border:0;border-radius:3px;background:#293b59;color:#e5edff;}
.site-header-controls {display:flex;align-items:center;gap:10px;}
.theme-toggle,.menu-toggle {display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;border:0;padding:9px 7px;border-radius:4px;background:transparent;color:inherit;font:12px/1.4 Arial,sans-serif;cursor:pointer;}
.theme-toggle:hover,.menu-toggle:hover {background:#202c40;}
.theme-toggle svg {width:20px;height:20px;}
.theme-toggle .theme-moon {display:none;}
[data-theme="dark"] .theme-toggle .theme-sun {display:none;}
[data-theme="dark"] .theme-toggle .theme-moon {display:block;}
.menu-toggle svg {width:20px;height:20px;}
.menu-open .menu-toggle svg {transform:rotate(90deg);}
.site-header :focus-visible {outline:2px solid #91b4ff;outline-offset:5px;}

/* A few deliberate accents, keeping the open, photographic composition. */
.section-label,.section-kicker {color:var(--accent);}
.hero {min-height:680px;min-height:clamp(680px,calc(100svh - 88px),860px);background:var(--inverse);}
.hero-content {padding-top:88px;padding-bottom:120px;}
.hero-label {display:flex;align-items:center;gap:13px;}
.hero-label::before {content:'';width:28px;height:2px;background:#91b4ff;}
.hero-cta {background:#f6f5f1;color:#101a2e;border-radius:4px;min-height:58px;}
.hero-cta:hover {background:#dce8ff;}
.hero-bottom {padding-top:18px;border-top:1px solid #ffffff50;}
.opening-note h2 em {color:var(--accent);}
.planner-section {border-block:1px solid var(--line);}
.presets button.active {box-shadow:inset 0 -1px var(--accent);}
.appliance.selected strong {color:var(--ink);font-weight:600;}
.home-panel .live-stats strong {color:var(--accent);}
.button,.retailer-link {border-radius:4px;}
.runtime-track {border-radius:2px;}
.shortlist-number {font-variant-numeric:tabular-nums;}
.everyday-story {border-block:1px solid var(--line);}
.guide-card:after {color:var(--accent);}
.closing {background:#1d48bc;color:#fff;}
.closing .section-label {color:#dfe9ff;}
.closing :focus-visible {outline-color:#fff;}
.footer {background:var(--inverse);color:var(--on-inverse);}
.footer-brand p,.footer-note,.photo-credit {color:var(--inverse-muted);}
.footer :focus-visible {outline-color:#91b4ff;}

/* The same reading experience, from a product detail to a quick calculator. */
body:not(.site-home)>main {padding-top:64px;}
body:not(.site-home)>main>.eyebrow:first-child {display:flex;align-items:center;gap:12px;}
body:not(.site-home)>main>.eyebrow:first-child::before {content:'';width:22px;height:2px;background:var(--accent);flex-shrink:0;}
body:not(.site-home) .example {border-radius:4px;border-top-width:3px;}
body:not(.site-home) .button {color:var(--on-accent);}
body:not(.site-home) .quick-output {border-radius:4px;}
body:not(.site-home) .quick-field input {border-radius:4px;}
.scenario-buttons button[aria-pressed="true"] {color:var(--on-accent);}
.comparison-tool {border-top-color:var(--accent);}

@media(max-width:1200px) {
  .site-brand-note {display:none;}
  .site-header-inner {gap:24px;}
  .site-nav-panel {gap:22px;}
  .theme-caption {display:none;}
}
@media(max-width:1100px) {
  .site-header-inner {width:calc(100% - 64px);}
  .site-header .site-nav {gap:20px;}
}
@media(max-width:940px) {
  :root {--header-height:76px;}
  .site-header-inner {gap:16px;justify-content:space-between;flex-wrap:wrap;}
  .site-brand {min-height:75px;}
  .site-header-controls {margin-left:auto;}
  .site-nav-panel {order:3;flex:0 0 100%;padding:12px 0 24px;gap:24px;justify-content:flex-start;flex-wrap:wrap;}
  .site-header .site-nav {gap:8px 24px;flex-wrap:wrap;}
  .site-header:has([data-menu-toggle]:not([hidden])) .site-nav-panel {position:absolute;left:0;right:0;top:100%;padding:18px 32px 26px;max-height:calc(100dvh - 76px);overflow-y:auto;background:var(--inverse);border-bottom:1px solid #3e4c64;box-shadow:0 18px 28px #0003;}
  .site-header:has([data-menu-toggle]:not([hidden])) .site-nav {display:grid;grid-template-columns:1fr 1fr;gap:2px 30px;width:100%;}
  .site-header:has([data-menu-toggle]:not([hidden])) .site-nav a {min-height:51px;font-size:17px;}
  .site-header:has([data-menu-toggle]:not([hidden])) .header-action {min-width:140px;}
  .hero {min-height:700px;}
}
@media(max-width:800px) {
  .site-header-inner {width:calc(100% - 44px);}
  body:not(.site-home)>main {padding-top:42px;}
}
@media(max-width:600px) {
  .site-header-inner {width:calc(100% - 40px);gap:8px;}
  .site-wordmark {font-size:32px;letter-spacing:-2px;}
  .site-header-controls {gap:4px;}
  .theme-toggle {padding:9px 10px;}
  .menu-toggle {padding-right:0;}
  .site-header:has([data-menu-toggle]:not([hidden])) .site-nav-panel {padding-inline:20px;}
  .hero {min-height:650px;min-height:max(650px,calc(95svh - 76px));}
  .hero-content {padding-top:90px;padding-bottom:140px;}
  .hero h1 {font-size:clamp(52px,13.5vw,80px);}
  .hero-label {font-size:10px;}
  .hero-bottom {font-size:11px;bottom:23px;}
  .hero-bottom>a {display:none;}
  .hero-cta {min-height:54px;}
  .appliance strong {font-size:13px;}
  body:not(.site-home)>main {padding-top:35px;}
}
@media(max-width:940px) and (max-height:500px) {
  .site-header {position:relative;}
}
@media(prefers-reduced-motion:reduce) {
  :root {scroll-behavior:auto;}
  .site-header .site-nav a::after {transition:none;}
}
@media print {
  :root {color-scheme:light;--ink:#111;--muted:#444;--cream:#fff;--paper:#fff;--line:#aaa;--accent:#1746b5;--accent-wash:#fff;--wash:#fff;--on-accent:#fff;--planner:#fff;--story:#fff;}
  body {background:#fff;color:#111;}
  .site-header {display:none!important;}
}