@layer reset, base, layout, components, responsive;
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  body,
  h1,
  h2,
  h3,
  p,
  figure {
    margin: 0;
  }
  button,
  input,
  select {
    font: inherit;
  }
  button,
  a,
  input,
  select,
  summary {
    -webkit-tap-highlight-color: transparent;
  }
  button {
    cursor: pointer;
  }
  img,
  svg {
    display: block;
  }
  button {
    color: inherit;
  }
  [hidden] {
    display: none !important;
  }
}
@layer base {
  :root {
    --paper:#f5f1e8;
    --ceramic:#fbf9f3;
    --face:#f7eed5;
    --ink:#252b28;
    --muted:#646b60;
    --gold:#b59563;
    --gold-pale:#ede1ca;
    --chilli:#b74432;
    --line:#dedbd0;
    --radius:22px;
    color: var(--ink);
    font-family:
      Inter,
      ui-sans-serif,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif;
    font-size: 15px;
    line-height: 1.6;
    font-synthesis: none;
    scroll-behavior: smooth;
  }
  body {
    background: var(--paper);
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  button {
    border: 0;
    background: none;
  }
  input,
  select {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--ceramic);
    color: var(--ink);
    padding: 12px 14px;
    line-height: 1.4;
    width: 100%;
  }
  input:focus,
  select:focus {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  input[type=checkbox] {
    accent-color: var(--chilli);
    width: 16px;
    height: 16px;
    margin: 0;
  }
  label {
    font-size: .83rem;
    font-weight: 550;
    display: grid;
    gap: 9px;
  }
  button:focus-visible,
  a:focus-visible,
  summary:focus-visible {
    outline: 2px solid var(--chilli);
    outline-offset: 5px;
  }
  button:disabled {
    opacity: .45;
    cursor: not-allowed;
  }
  h1,
  h2 {
    font-family:
      Georgia,
      "Times New Roman",
      serif;
    font-weight: 400;
    letter-spacing: -.035em;
  }
  h2 {
    font-size: 2rem;
    line-height: 1.2;
  }
  p {
    color: var(--muted);
  }
  .wrap {
    width: min(1080px, calc(100% - 80px));
    margin-inline: auto;
  }
  .eyebrow {
    font-size: .65rem;
    letter-spacing: .17em;
    font-weight: 650;
    color: var(--muted);
  }
  .fine-print {
    font-size: .76rem;
    line-height: 1.7;
    color: var(--muted);
  }
  .quiet-link {
    font-size: .76rem;
    color: var(--muted);
  }
  .quiet-link:hover {
    color: var(--chilli);
  }
  .text-button {
    font-size: .76rem;
    white-space: nowrap;
    padding: 5px 0;
    text-align: left;
  }
  .text-button:hover {
    text-decoration: underline;
  }
  .danger {
    color: var(--chilli);
  }
  .error {
    color: var(--chilli);
  }
}
@layer layout {
  .masthead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 35px;
  }
  .wordmark {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.35rem;
    letter-spacing: -.06em;
    font-weight: 650;
    line-height: 1;
  }
  .wordmark-dot {
    color: var(--chilli);
    margin-left: -10px;
  }
  .seal {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ink);
    overflow: hidden;
  }
  .seal svg {
    width: 30px;
    height: 30px;
    stroke: var(--gold);
    stroke-width: 1.6;
    fill: none;
  }
  .hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 50px;
    min-height: 570px;
    padding-block: 44px 70px;
  }
  .hero-copy .eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .red-dot {
    width: 5px;
    height: 5px;
    background: var(--chilli);
    border-radius: 50%;
  }
  .hero h1 {
    font-size: clamp(62px, 6.5vw, 86px);
    line-height: .98;
    margin-top: 27px;
  }
  .hero h1 em {
    color: var(--gold);
    font-weight: 400;
  }
  .intro {
    font-size: 1rem;
    line-height: 1.8;
    margin-block: 27px;
  }
  .hardware-note {
    font-size: .68rem;
    margin-top: 18px;
  }
  .setup-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 28px;
    border-block: 1px solid var(--line);
    margin-block: 0 45px;
  }
  .setup-heading p {
    font-size: .78rem;
  }
  .setup-section {
    margin-bottom: 42px;
    scroll-margin-top: 25px;
  }
  .section-heading {
    display: flex;
    gap: 22px;
    align-items: baseline;
    margin-bottom: 23px;
  }
  .section-heading p {
    font-size: .84rem;
    margin-top: 8px;
  }
  .step {
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    color: var(--gold);
    letter-spacing: .1em;
  }
  .card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--ceramic);
    padding: 32px;
    position: relative;
  }
  .wifi-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
  .wifi-card > .fine-print {
    grid-column: 1/-1;
  }
  .aftercare {
    display: flex;
    gap: 25px;
    margin-block: 62px 75px;
    padding-left: 28px;
    max-width: 760px;
  }
  .aftercare h2 {
    font-size: 1.75rem;
    margin-bottom: 12px;
  }
  .aftercare p {
    font-size: .85rem;
  }
  .aftercare .fine-print {
    font-size: .72rem;
    margin-top: 17px;
  }
  .little-seal {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    background: var(--ink);
    border-radius: 50%;
    color: var(--gold);
    font-size: 1.15rem;
    margin-top: 5px;
  }
  .site-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    border-top: 1px solid var(--line);
    padding-block: 28px 42px;
  }
  .site-footer > span:not(.wordmark) {
    font-size: .7rem;
    color: var(--muted);
  }
  .wordmark.small {
    font-size: 1.1rem;
  }
}
@layer components {
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    border-radius: 11px;
    padding: 14px 22px;
    font-size: .82rem;
    font-weight: 550;
    line-height: 1.5;
    transition: background .15s, transform .15s;
  }
  .button:hover {
    transform: translateY(-1px);
  }
  .primary {
    color: var(--ceramic);
    background: var(--chilli);
  }
  .primary:hover {
    background: #9d382a;
  }
  .device-figure {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 30px;
  }
  .device-figure figcaption {
    font-size: .64rem;
    color: var(--muted);
    text-align: center;
    max-width: 260px;
    line-height: 1.7;
  }
  .device-shell {
    width: 340px;
    height: 340px;
    border-radius: 50%;
    padding: 15px;
    background:
      linear-gradient(
        140deg,
        #494944,
        #292f2c 55%,
        #161c19);
    box-shadow:
      0 25px 55px #433f2e24,
      0 5px 12px #39362b24,
      inset 0 2px 2px #888579,
      inset 0 -2px 3px #0008;
    transform: rotate(-4deg);
  }
  .device-face {
    width: 310px;
    height: 310px;
    border-radius: 50%;
    background: var(--face);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    line-height: 1.2;
    padding: 29px 39px 20px;
    transform: rotate(4deg);
    box-shadow: inset 0 0 0 2px #1d242340;
  }
  .release-state i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
  }
  .group-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    position: relative;
    flex: 1;
    margin-bottom: 0;
  }
  .group-switcher {
    display: flex;
    align-items: start;
    gap: 8px;
    padding-right: 26px;
    margin-bottom: 29px;
  }
  .group-tab {
    font-size: .8rem;
    padding: 9px 17px;
    border-radius: 30px;
    border: 1px solid var(--line);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .group-tab[aria-selected=true] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--ceramic);
  }
  .add-group {
    font-size: 1rem;
    padding: 4px 10px;
    color: var(--muted);
    min-width: 40px;
    min-height: 40px;
  }
  .card-seam {
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 65px;
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.4;
    opacity: .75;
    pointer-events: none;
  }
  .group-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 22px;
  }
  .name-label {
    max-width: 300px;
    flex: 1;
  }
  .name-label input {
    font-size: 1rem;
    background: var(--ceramic);
  }
  .picks {
    display: grid;
  }
  .empty-picks {
    border: 1px dashed var(--line);
    border-radius: 12px;
    padding: 24px;
    font-size: .8rem;
    margin-bottom: 12px;
  }
  .undo-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: var(--gold-pale);
    font-size: .8rem;
  }
  .picker-hint {
    margin-top: 8px;
    color: var(--muted);
    font-size: .74rem;
    min-height: 1.5em;
  }
  .stop-combobox {
    margin-top: 6px;
  }
  .stop-options {
    max-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-top: 6px;
    background: var(--ceramic);
  }
  .stop-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    min-height: 48px;
    cursor: pointer;
    font-size: .85rem;
  }
  .stop-option + .stop-option {
    border-top: 1px solid var(--line);
  }
  .stop-code {
    font-size: .7rem;
    color: var(--muted);
    white-space: nowrap;
  }
  .stop-copy { display: grid; gap: 4px; min-width: 0; }
  .stop-option .stop-context { font-size: .69rem; color: var(--muted); line-height: 1.6; }
  .route-map { margin-block: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--gold-pale); }
  .route-map summary { display: flex; flex-wrap: wrap; gap: 5px 12px; justify-content: space-between; color: var(--ink); font-size: .85rem; font-weight: 600; }
  .route-map summary small { color: var(--muted); font-size: .69rem; font-weight: 400; }
  .path-label { margin-top: 14px; font-size: .72rem; }
  #path-select { min-width: 0; width: 100%; font-size: .76rem; }
  #route-graph { display: block; width: 100%; margin-block: 8px; overflow: visible; }
  .graph-path { fill: none; stroke: var(--line); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; cursor: pointer; }
  .graph-path.active { stroke: var(--gold); stroke-width: 4; }
  .graph-stop { fill: var(--ceramic); stroke: var(--muted); stroke-width: 1; cursor: pointer; }
  .graph-stop.active { stroke: var(--gold); stroke-width: 2; }
  .graph-stop.selected { fill: var(--chilli); stroke: var(--chilli); }
  .graph-stop.no-pickup { cursor: default; fill: var(--line); }
  .route-stops { list-style: none; padding: 0; margin: 0; max-height: 270px; overflow-y: auto; overscroll-behavior: contain; }
  .route-stops li { position: relative; padding-left: 21px; }
  .route-stops li::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--gold); }
  .route-stops li:first-child::before { top: 24px; }
  .route-stops li:last-child::before { bottom: calc(100% - 24px); }
  .route-stops li::after { content: ""; position: absolute; left: 3px; top: 20px; width: 8px; height: 8px; border: 2px solid var(--gold); border-radius: 50%; background: var(--ceramic); pointer-events: none; }
  .route-stop { display: grid; text-align: left; width: 100%; min-height: 52px; gap: 3px; padding: 9px 10px; border-radius: 8px; }
  .route-stop:hover, .route-stop[aria-pressed=true] { background: var(--ceramic); }
  .route-stop[aria-pressed=true] { box-shadow: inset 3px 0 var(--chilli); }
  .route-stop-name { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .8rem; }
  .route-stop-name small, .route-stop-note { color: var(--muted); font-size: .67rem; }
  .route-stop:disabled { opacity: .65; cursor: default; }
  .stop-option:hover,
  .stop-option[aria-selected=true] {
    background: var(--gold-pale);
  }
  #pick-form .search-label {
    gap: 6px;
    margin-top: 18px;
  }
  #pick-form .search-label + .field-pair,
  #pick-form .search-label + label {
    margin-top: 10px;
  }
  #retry-release {
    display: block;
    margin-block: 10px;
  }
  .pick-row {
    display: flex;
    align-items: center;
    gap: 15px;
    border-top: 1px solid var(--line);
    padding: 17px 0;
  }
  .pick-line {
    font-weight: 650;
    font-size: .9rem;
    background: var(--gold-pale);
    border-radius: 7px;
    min-width: 39px;
    padding: 6px;
    text-align: center;
  }
  .pick-info {
    flex: 1;
    min-width: 0;
  }
  .pick-info strong {
    display: block;
    font-weight: 550;
    font-size: .84rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pick-info small {
    color: var(--muted);
    font-size: .72rem;
  }
  .pick-walk {
    font-size: .75rem;
    color: var(--muted);
    white-space: nowrap;
  }
  .pick-edit {
    font-size: .76rem;
    padding: 9px 2px 9px 12px;
  }
  .add-pick {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: .82rem;
    color: var(--chilli);
    padding-block: 13px 19px;
  }
  .add-pick > span {
    font-size: 1.2rem;
  }
  .schedule-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    border-top: 1px solid var(--line);
    padding-top: 23px;
    margin-top: 6px;
  }
  .schedule-toggle > label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .78rem;
    font-weight: 450;
  }
  .schedule-toggle > span {
    font-size: .7rem;
    color: var(--muted);
  }
  .schedule {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 18px;
    margin-top: 22px;
  }
  .schedule > label {
    width: 140px;
    font-size: .72rem;
  }
  .time-to {
    padding-bottom: 12px;
    color: var(--muted);
    font-size: .75rem;
  }
  .days {
    display: flex;
    gap: 5px;
    align-self: flex-end;
    margin-right: auto;
    padding-bottom: 6px;
  }
  .day-button {
    border: 1px solid var(--line);
    border-radius: 50%;
    width: 31px;
    height: 31px;
    font-size: .67rem;
  }
  .day-button[aria-pressed=true] {
    background: var(--gold-pale);
    border-color: var(--gold);
  }
  .schedule > .fine-print {
    width: 100%;
  }
  .card-footer {
    display: flex;
    align-items: center;
    gap: 18px;
    border-top: 1px solid var(--line);
    margin-top: 24px;
    padding-top: 17px;
  }
  .card-footer > span {
    color: var(--muted);
    font-size: .7rem;
    margin-right: auto;
  }
  .import-label {
    display: inline;
    cursor: pointer;
    font-weight: 400;
  }
  .password-input {
    display: flex;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
  }
  .password-input > input {
    border: 0;
    flex: 1;
    min-width: 0;
  }
  .password-input > button {
    font-size: .72rem;
    padding-inline: 13px;
    color: var(--muted);
  }
  .release-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  .release-state {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .75rem;
  }
  .release-state.pending i {
    background: var(--muted);
  }
  #status {
    font-size: .82rem;
    margin-block: 17px 23px;
    max-width: 650px;
  }
  .install-notes {
    margin-top: 22px;
    font-size: .68rem;
    line-height: 1.8;
  }
  .download-details {
    margin-top: 22px;
    border-top: 1px solid var(--line);
    padding-top: 17px;
    font-size: .74rem;
  }
  .download-details > p {
    margin-top: 10px;
  }
  .download-details a {
    text-decoration: underline;
  }
  .download-details code {
    display: block;
    font-size: .65rem;
    overflow-wrap: anywhere;
    color: var(--muted);
    margin-top: 8px;
  }
  summary {
    cursor: pointer;
    color: var(--muted);
  }
  dialog {
    max-width: 570px;
    width: calc(100% - 32px);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 32px;
    background: var(--ceramic);
    color: var(--ink);
    max-height: calc(100dvh - 32px);
    scroll-padding-block: 16px 90px;
    box-shadow: 0 30px 100px #252b2833;
  }
  dialog::backdrop {
    background: #252b2870;
    backdrop-filter: blur(5px);
  }
  .dialog-heading {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
  }
  .dialog-heading h2 {
    font-size: 1.95rem;
    margin-top: 10px;
  }
  .close-button {
    align-self: start;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--muted);
    min-width: 40px;
    min-height: 40px;
    margin: -8px -8px 0 0;
    padding: 0;
  }
  .field-pair {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 15px;
  }
  .field-pair,
  #pick-form > label {
    margin-top: 20px;
  }
  .walk-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid var(--line);
    margin-top: 25px;
    padding-top: 22px;
  }
  .walk-control label {
    font-size: .85rem;
  }
  .walk-control label span {
    font-size: .73rem;
    color: var(--muted);
    font-weight: 400;
  }
  .walk-control input {
    width: 90px;
    font-size: 1.3rem;
  }
  .estimate-details {
    margin-top: 23px;
    font-size: .76rem;
  }
  .estimate-details .field-pair {
    grid-template-columns: 1fr 1fr;
  }
  .estimate-details .fine-print {
    margin-top: 12px;
  }
  .dialog-footer {
    margin-top: 27px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding-block: 12px;
    background: var(--ceramic);
    border-top: 1px solid var(--line);
  }
  .dialog-footer > .button {
    margin-left: auto;
  }
  #pick-error {
    font-size: .78rem;
    margin-top: 15px;
  }
}
@layer responsive {
  @media (min-width: 1400px) {
    .hero {
      min-height: 620px;
    }
  }
  @media (max-width: 850px) {
    .wrap {
      width: calc(100% - 48px);
    }
    .hero {
      gap: 20px;
      min-height: 520px;
    }
    .hero h1 {
      font-size: 66px;
    }
    .hero-copy .eyebrow {
      font-size: .55rem;
      letter-spacing: .11em;
    }
    .device-shell {
      width: 300px;
      height: 300px;
      padding: 12px;
    }
    .device-face {
      transform: scale(.89) rotate(4deg);
      transform-origin: top left;
    }
    .intro {
      font-size: .9rem;
    }
    .desktop-break {
      display: none;
    }
    .card {
      padding: 25px;
    }
    .section-heading p {
      max-width: 550px;
    }
    .schedule {
      gap: 12px;
    }
    .days {
      width: 100%;
    }
    .setup-heading p {
      font-size: .7rem;
    }
    .site-footer > span:not(.wordmark) {
      display: none;
    }
  }
  @media (max-width: 650px) {
    .wrap {
      width: calc(100% - 36px);
    }
    .masthead {
      padding-block: 26px;
    }
    .hero {
      grid-template-columns: 1fr;
      gap: 30px;
      padding-block: 34px 45px;
    }
    .hero-copy {
      text-align: center;
    }
    .hero-copy .eyebrow {
      justify-content: center;
      font-size: .57rem;
    }
    .hero h1 {
      font-size: 72px;
      margin-top: 23px;
    }
    .intro {
      font-size: .94rem;
      margin-block: 24px;
    }
    .hero-copy .button {
      padding-inline: 26px;
    }
    .hardware-note {
      font-size: .65rem;
    }
    .device-figure {
      gap: 22px;
    }
    .device-shell {
      width: 300px;
      height: 300px;
    }
    .setup-heading {
      margin-bottom: 32px;
      padding-block: 20px;
      display: block;
      text-align: center;
    }
    .setup-heading p {
      margin-top: 7px;
      font-size: .76rem;
    }
    .section-heading {
      gap: 13px;
      margin-bottom: 18px;
    }
    .section-heading h2 {
      font-size: 1.7rem;
    }
    .section-heading p {
      font-size: .79rem;
    }
    .card {
      padding: 22px 18px;
      border-radius: 17px;
    }
    .setup-section {
      margin-bottom: 31px;
    }
    .group-tabs {
      gap: 5px;
      margin-bottom: 24px;
    }
    .group-tab {
      padding: 8px 13px;
      font-size: .74rem;
      max-width: 140px;
    }
    .group-toolbar {
      gap: 12px;
    }
    .name-label {
      max-width: 230px;
    }
    .group-toolbar .text-button {
      font-size: .68rem;
    }
    .pick-row {
      gap: 10px;
    }
    .pick-info strong {
      font-size: .77rem;
    }
    .pick-info small {
      font-size: .65rem;
    }
    .pick-walk {
      font-size: .67rem;
    }
    .pick-edit {
      padding-left: 3px;
      font-size: .7rem;
    }
    .schedule-toggle {
      align-items: start;
      gap: 10px;
    }
    .schedule-toggle > span {
      font-size: .61rem;
      white-space: nowrap;
    }
    .schedule-toggle > label {
      font-size: .72rem;
    }
    .card-footer {
      gap: 13px;
      flex-wrap: wrap;
    }
    .card-footer > span {
      width: 100%;
      font-size: .67rem;
    }
    .wifi-card {
      grid-template-columns: 1fr;
      gap: 20px;
    }
    .wifi-card > .fine-print {
      grid-column: 1;
    }
    .release-row {
      align-items: start;
      flex-direction: column;
      gap: 8px;
    }
    .install-notes {
      font-size: .66rem;
    }
    .install-card .button {
      width: 100%;
    }
    .aftercare {
      gap: 15px;
      padding-left: 0;
      margin-block: 43px 50px;
    }
    .aftercare h2 {
      font-size: 1.5rem;
    }
    .aftercare p {
      font-size: .78rem;
    }
    .aftercare .fine-print {
      font-size: .68rem;
    }
    .site-footer {
      padding-block: 25px 32px;
    }
    .site-footer .quiet-link {
      font-size: .68rem;
    }
    dialog {
      padding: 25px 20px;
      max-height: calc(100dvh - 30px);
    }
    .dialog-heading h2 {
      font-size: 1.7rem;
    }
    .field-pair {
      grid-template-columns: 1fr;
    }
    #pick-form > .field-pair {
      grid-template-columns: minmax(80px, 1fr) minmax(0, 1.8fr);
    }
    .estimate-details .field-pair {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    :root {
      scroll-behavior: auto;
    }
    .button {
      transition: none;
    }
    .button:hover {
      transform: none;
    }
  }
}
@layer components {
  .dialog-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
  .masthead-actions { display:flex; align-items:center; gap:18px; }
  .language-switch { display:flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:99px; }
  .language-switch button { min-width:38px; min-height:34px; border-radius:99px; font-size:12px; }
  .language-switch button[aria-pressed="true"] { background:var(--ink); color:var(--ceramic); }
  .platform-hint { margin:10px 0; padding:12px 14px; background:var(--gold-pale); border-radius:10px; font-size:13px; }
  .remember-settings { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:16px; font-size:13px; }
  .remember-settings label { display:flex; align-items:center; gap:8px; }
  .log-actions { display:flex; gap:12px; flex-wrap:wrap; margin:10px 0; }
  .log-output { min-height:100px; max-height:260px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; padding:14px; border-radius:10px; background:var(--ink); color:var(--paper); font:11px/1.5 ui-monospace,monospace; }
}
@layer responsive {
  @media(max-width:600px) { .masthead-actions > .quiet-link { display:none; } }
}

.startup-note { color:var(--muted); font-size:13px; line-height:1.6; margin-block:20px 12px; }

/* Only the ceramic case is CSS; all 240×240 screen pixels come from Rust/WASM. */
.device-face { display:block; padding:0; }
#device-canvas { display:block; width:100%; height:100%; image-rendering:pixelated; touch-action:none; cursor:pointer; border-radius:50%; }
#device-canvas:focus-visible { outline:3px solid var(--chilli); outline-offset:-5px; }
.preview-help, .preview-state, .preview-controls { max-width:340px; margin:12px auto 0; font-size:12px; line-height:1.6; }
.preview-help, .preview-state { color:var(--muted); text-align:center; }
.preview-controls { text-align:left; border-top:1px solid var(--line); padding-top:10px; }
.preview-controls summary { cursor:pointer; color:var(--ink); }
.preview-controls select { width:100%; margin-top:6px; }
.network-picker { margin:0 0 30px; padding:24px 30px; }
.network-picker > summary { font-size:1.1rem; cursor:pointer; }
.network-picker > label { display:block; margin:16px 0; }
.network-picker select, .network-picker input { width:100%; min-width:0; }
.network-picker .field-pair { margin-top:18px; }
.network-picker p { overflow-wrap:anywhere; }
.preview-controls p { margin-block:10px; }
.preview-actions { display:flex; justify-content:space-between; gap:12px; margin-top:10px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

#device-canvas[aria-disabled="true"] { opacity:.45; cursor:default; }

.device-picker { display:block; max-width:340px; margin:0 auto 12px; text-align:left; font-size:12px; }
.device-picker select { display:block; width:100%; margin-top:6px; }
.device-figure.portrait .device-shell { width:196px; height:344px; border-radius:22px; padding:12px; }
.device-figure.portrait .device-face { width:172px; height:320px; border-radius:10px; }
.device-figure.portrait #device-canvas { border-radius:10px; }

.device-figure.portrait .device-shell, .device-figure.portrait .device-face { transform:none; }

.device-figure.landscape .device-shell { width:344px; height:196px; border-radius:22px; padding:12px; transform:none; }
.device-figure.landscape .device-face { width:320px; height:172px; border-radius:10px; transform:none; }
.device-figure.landscape #device-canvas { border-radius:10px; }
@media (max-width:420px) {
  .device-figure.landscape .device-shell { width:calc(100vw - 64px); height:auto; aspect-ratio:344/196; padding:10px; }
  .device-figure.landscape .device-face { width:100%; height:auto; aspect-ratio:320/172; }
}

.android-card{margin:40px 0;padding:28px}.android-card>summary{font:1.6rem Georgia,serif;cursor:pointer}.android-options{display:grid;gap:16px;margin:24px 0}.android-options label:has(input[type=checkbox]){display:flex;align-items:center;gap:10px}.android-options input[type=number]{max-width:140px}.android-options details>label{margin-top:16px}

.android-app-list{display:grid;gap:10px;max-height:360px;overflow:auto;margin:16px 0}.android-app-list label{display:flex;align-items:start;gap:10px}.android-app-list span{min-width:0;overflow-wrap:anywhere}.android-app-list small{display:block;color:var(--muted)}#android-charge-controls{display:grid;gap:12px}#android-charge-controls[hidden]{display:none}#android-charge-percent{max-width:140px}

#android-command { display:block; width:100%; min-width:0; resize:vertical; border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:var(--ceramic); color:var(--ink); font:13px/1.5 ui-monospace,monospace; }
#android-command:focus { outline:2px solid var(--gold); outline-offset:2px; }

.journey-endpoints{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}.journey-stop{display:flex;align-items:center;gap:.65rem;margin:.8rem 0;padding:.7rem;border:1px solid var(--line,#dedbd0);border-radius:12px}.journey-stop>span{flex:1;min-width:0}.journey-stop strong,.journey-stop small{display:block;overflow-wrap:anywhere}.journey-stop label{font-size:.75rem;max-width:90px}.journey-stop input{width:100%}.journey-matches{display:flex;flex-direction:column;align-items:stretch;max-height:240px;overflow:auto}.journey-matches button{text-align:left;white-space:normal}.journey-result{margin:.75rem 0;padding:1rem;border:1px solid var(--line,#dedbd0);border-radius:12px}.journey-result li{margin:.5rem 0;overflow-wrap:anywhere}#journey-editor h3{font-size:1rem;margin:1rem 0 .5rem}#journey-editor details{margin:1rem 0}@media(max-width:700px){.journey-endpoints{grid-template-columns:1fr}.journey-stop{flex-wrap:wrap}.journey-stop>span{min-width:45%}}

.journey-route-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem .75rem;margin:0}.journey-route-head span{color:var(--muted);font-size:.8rem}.journey-route-summary{margin:.35rem 0;font-size:.82rem;overflow-wrap:anywhere}.journey-route-state{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .75rem;margin:.35rem 0;font-size:.78rem;color:var(--muted)}.journey-route-badge{padding:.1rem .55rem;border-radius:99px;background:var(--gold-pale);color:var(--ink)}.journey-route-map{display:block;max-width:100%;height:auto;margin:.5rem 0;overflow:visible}.route-ride{stroke:var(--gold);stroke-width:3;stroke-linecap:round}.route-walk{stroke:var(--muted);stroke-width:2;stroke-dasharray:3 4;stroke-linecap:round}.route-change{stroke:var(--chilli);stroke-width:2;stroke-dasharray:1 4;stroke-linecap:round}.route-minutes{fill:var(--muted);font-size:10px}.route-line{fill:var(--ink)}.route-line-text{fill:var(--ceramic);font-size:11px;font-weight:700}.route-stop-dot{cursor:pointer}.route-dot-hit{fill:transparent}.route-dot{fill:var(--ceramic);stroke:var(--gold);stroke-width:2}.route-dot.endpoint{fill:var(--ink);stroke:var(--ceramic)}.route-dot.selected{fill:var(--chilli);stroke:var(--ceramic)}.route-dot-request{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-dasharray:2 2}.route-stop-dot[aria-disabled=true]{cursor:default}.route-stop-dot:focus-visible{outline:none}.route-stop-dot:focus-visible .route-dot-hit{fill:none;stroke:var(--chilli);stroke-width:2}#journey-route-hint{min-height:1.6em}.route-action{padding:5px 12px;border:1px solid var(--chilli);border-radius:99px;color:var(--chilli);font-weight:600}.route-action:hover{background:var(--gold-pale);text-decoration:none}.route-action:disabled{opacity:.5;cursor:default;background:none}