@font-face {
  font-family:Garage;
  src:local("Avenir Next")}
* {
  box-sizing:border-box}
.connection-summary {
  background:#e5f2de;
  border:2px solid #bad5b3;
  border-radius:20px;
  padding:18px 22px;
  margin:20px 0}
.connection-summary h3 {
  margin-top:0}
html {
  scroll-behavior:smooth;
  scroll-padding-top:20px}
body {
  margin:0;
  background:#f6efde;
  color:#163d39;
  font-family:Garage,"Trebuchet MS",sans-serif;
  font-size:18px;
  line-height:1.6;
  background-image:radial-gradient(#d9cdb6 0.7px,transparent 0.7px);
  background-size:9px 9px}
a {
  color:#15564f;
  text-underline-offset:4px}
button,input {
  font:inherit}
button,.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:48px;
  border:2px solid #184940;
  border-radius:14px;
  background:#184940;
  color:#fff;
  padding:10px 22px;
  font-weight:bold;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 3px 0 #0d302a}
button:hover,.button:hover {
  background:#246257}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
  outline:3px solid #be481c;
  outline-offset:5px}
button:active {
  transform:translateY(2px);
  box-shadow:0 1px 0 #0d302a}
.secondary {
  color:#184940;
  background:#fffdf7;
  box-shadow:none}
.secondary:hover {
  background:#e5eee2}
form {
  margin:16px 0}
input:not([type=hidden]):not([type=checkbox]) {
  width:100%;
  border:2px solid #7c9587;
  border-radius:12px;
  background:#fffef9;
  min-height:54px;
  padding:10px 14px;
  margin:8px 0 18px}
label {
  display:block;
  font-weight:bold}
h1,h2,h3,p {
  margin-top:0}
h1,h2,h3 {
  font-family:Georgia,serif;
  line-height:1.07;
  letter-spacing:-.035em}
h1 {
  font-size:clamp(44px,6.6vw,83px);
  margin:15px 0 22px}
h2 {
  font-size:31px;
  margin-bottom:16px}
h3 {
  font-size:25px;
  margin-bottom:10px}
p:last-child {
  margin-bottom:0}
.shell {
  max-width:1160px;
  margin:auto;
  padding:0 32px}
.masthead {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:24px 0;
  border-bottom:2px solid #163d39}
.brand {
  font-weight:900;
  font-size:16px;
  letter-spacing:.1em;
  text-decoration:none;
  line-height:1.3}
.brand span {
  display:block;
  font-size:10px;
  letter-spacing:.22em;
  margin-top:6px}
.masthead form {
  margin:0}
.masthead button {
  min-height:42px;
  background:transparent;
  color:#163d39;
  box-shadow:none}
.eyebrow {
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em}
.hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  padding:48px 0 36px;
  gap:15px}
.hero p {
  font-size:21px}
.garage-art {
  height:300px;
  position:relative;
  isolation:isolate}
.sun {
  position:absolute;
  width:230px;
  height:230px;
  left:15%;
  top:0;
  background:#efb634;
  border-radius:50%;
  box-shadow:0 0 0 18px #efb63420}
.garage-art:after {
  content:"";
  position:absolute;
  bottom:12px;
  left:0;
  right:0;
  height:32px;
  background:#93b0a063;
  border-radius:50%;
  z-index:-1}
.garage-art img {
  position:absolute;
  width:78%;
  object-fit:contain;
  filter:drop-shadow(0 8px 4px #18494020)}
.car-x {
  left:-8%;
  bottom:38px;
  transform:rotate(-4deg)}
.car-y {
  right:-8%;
  bottom:-5px;
  transform:rotate(3deg)}
nav {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 26px}
nav a {
  padding:10px 17px;
  border:1px solid #9cafa0;
  border-radius:99px;
  background:#fff9eb;
  text-decoration:none;
  font-size:15px;
  font-weight:bold}
.card {
  background:#fffdf7;
  border:2px solid #34584c;
  border-radius:26px;
  padding:28px;
  margin-bottom:24px;
  box-shadow:0 5px 0 #34584c14}
.card>header {
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:20px}
.card>header h2 {
  margin-bottom:9px}
.step {
  flex:0 0 44px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  background:#f3c65a;
  border:1px solid #34584c;
  border-radius:50%;
  font-weight:900;
  font-size:17px}
.intro-grid {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:30px}
.welcome {
  padding:32px 12px}
.welcome h2 {
  font-size:42px;
  margin-top:20px}
.welcome ol {
  padding-left:24px}
.welcome li {
  padding:7px 0}
.chip {
  display:inline-block;
  border:1px solid #ab9b6b;
  border-radius:99px;
  background:#fff0c7;
  color:#5d4519;
  padding:3px 11px;
  font-size:12px;
  letter-spacing:.03em;
  font-weight:bold}
.chip.good {
  background:#e2efe1;
  border-color:#81a28a;
  color:#204c3c}
.cars {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:16px;
  margin:22px 0}
.cars article {
  border:1px solid #b7c9ba;
  border-radius:18px;
  padding:22px;
  background:linear-gradient(140deg,#edf4e9,#fffdf7)}
.battery {
  font-size:38px;
  font-weight:bold;
  line-height:1.2;
  margin:18px 0 6px}
.battery small {
  font-size:22px}
.small {
  font-size:14px;
  line-height:1.55;
  color:#4f665c}
.instructions {
  padding-left:24px}
.instructions li {
  padding:8px 0}
.notice {
  background:#deeddc;
  border:2px solid #476c50;
  border-radius:22px;
  padding:24px;
  margin-bottom:26px}
.notice.error {
  background:#fff0e4;
  border-color:#a74820;
  color:#742d13}
.pairing {
  background:#ffe2a0;
  border-color:#70592e}
.pairing output {
  display:block;
  font-family:ui-monospace,monospace;
  font-size:clamp(21px,4.5vw,43px);
  font-weight:800;
  letter-spacing:.035em;
  margin:20px 0;
  overflow-wrap:anywhere}
.key {
  display:block;
  font-family:ui-monospace,monospace;
  overflow-wrap:anywhere;
  padding:16px;
  background:#fffdf7;
  border-radius:12px}
.warning {
  color:#843516;
  background:#fff0dc;
  padding:12px;
  border-radius:10px}
details {
  border-top:1px solid #d1d6c6;
  padding:16px 0;
  margin-top:20px}
summary {
  cursor:pointer;
  font-weight:bold;
  min-height:38px}
details>p,details>ol {
  margin-top:14px}
.maintenance {
  display:grid;
  grid-template-columns:.65fr 1.35fr;
  gap:32px}
.danger {
  background:#8c3e2a;
  border-color:#8c3e2a;
  box-shadow:none}
.danger-zone {
  color:#763d2d}
.confirm {
  font-weight:normal;
  display:flex;
  gap:12px;
  align-items:flex-start}
.confirm input {
  min-width:22px;
  height:22px;
  margin-top:5px}
footer {
  font-size:13px;
  border-top:1px solid #879d8c;
  padding:28px 0 40px;
  margin-top:36px}
footer p {
  margin-top:10px;
  max-width:650px}
.skip {
  position:absolute;
  left:20px;
  top:-70px;
  z-index:10;
  background:white;
  padding:10px}
.skip:focus {
  top:5px}
@media(max-width:700px) {
  .shell {
  padding:0 18px}
.hero {
  grid-template-columns:1fr;
  padding-top:30px;
  gap:0}
.hero h1 {
  font-size:54px}
.hero p {
  font-size:18px}
.garage-art {
  height:205px;
  max-width:350px;
  width:100%;
  margin:-10px auto 0}
.sun {
  width:165px;
  height:165px}
.card {
  padding:22px 18px}
.intro-grid,.maintenance {
  grid-template-columns:1fr;
  gap:8px}
.welcome {
  padding:10px 10px 26px}
.masthead button {
  font-size:14px;
  padding:8px 14px}
h2 {
  font-size:28px}
.pairing output {
  letter-spacing:0}
.step {
  width:36px;
  height:36px;
  flex-basis:36px}
.card>header {
  gap:12px}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
button:active {
  transform:none}
}

/* Keep the illustrated cars within the viewport, including narrow phones. */
.garage-art {
  min-width:0}
.car-x {
  left:0}
.car-y {
  right:0}