/* Generated by design/build.py. Do not edit. */
@font-face{font-family:"Bricolage Grotesque";src:url("/static/fonts/bricolage-grotesque.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Figtree";src:url("/static/fonts/figtree.woff2") format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"DM Mono";src:url("/static/fonts/dm-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}
:root{--surface:#faf8f4;--surface-raised:#ffffff;--surface-sunken:#f0ece4;--line:#e4ded4;--line-strong:#857d72;--ink:#1f1b16;--ink-muted:#5c544b;--pod-blue:#1859ff;--on-pod-blue:#ffffff;--pod-blue-tint:#e6edff;--spark:#f2500f;--on-spark:#1f1b16;--spark-tint:#ffe6da;--success:#17794a;--success-tint:#e2f4ea;--danger:#c62828;--danger-tint:#fce8e8;--warning:#8a5300;--warning-tint:#fff0d4;--focus-ring:#1859ff;--shadow-card:0 1px 2px rgba(31, 27, 22, 0.06), 0 8px 24px rgba(31, 27, 22, 0.06);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-pill:999px;--radius-pod:14px;--font-display:"Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;--font-body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"DM Mono", ui-monospace, Menlo, monospace;}
@media (prefers-color-scheme:dark){:root{--surface:#15120f;--surface-raised:#201c17;--surface-sunken:#0e0c0a;--line:#332e28;--line-strong:#7d756a;--ink:#f6f1e9;--ink-muted:#b8b0a5;--pod-blue:#7da3ff;--on-pod-blue:#0b1633;--pod-blue-tint:#1b2646;--spark:#ff7a45;--on-spark:#1f1b16;--spark-tint:#3b1e10;--success:#5ed39a;--success-tint:#123324;--danger:#ff8a80;--danger-tint:#3c1917;--warning:#ffc266;--warning-tint:#34270f;--focus-ring:#a9c1ff;--shadow-card:0 1px 0 rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35);}}
.display-xl{font-family:var(--font-display);font-size:56px;line-height:60px;font-weight:800;letter-spacing:-0.02em;}
.display-lg{font-family:var(--font-display);font-size:40px;line-height:44px;font-weight:700;letter-spacing:-0.015em;}
.display-md{font-family:var(--font-display);font-size:28px;line-height:32px;font-weight:700;letter-spacing:-0.01em;}
.title{font-family:var(--font-body);font-size:20px;line-height:28px;font-weight:600;}
.body{font-family:var(--font-body);font-size:16px;line-height:24px;font-weight:400;}
.body-sm{font-family:var(--font-body);font-size:14px;line-height:20px;font-weight:400;}
.label{font-family:var(--font-body);font-size:14px;line-height:20px;font-weight:600;}
.caption{font-family:var(--font-body);font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.02em;}
.code-lg{font-family:var(--font-mono);font-size:32px;line-height:40px;font-weight:500;letter-spacing:0.14em;}
.code-sm{font-family:var(--font-mono);font-size:14px;line-height:20px;font-weight:500;}
/* Component styles from the StayPuller design system. Edit here, then run design/build.py. */

.sp-icon { flex: none; }

/* Button */
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-5);
  border: 1.5px solid transparent; border-radius: var(--radius-md); font: 600 15px/1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background-color .12s ease; }
.sp-btn:active { transform: translateY(1px); }
.sp-btn:focus-visible, .sp-input:focus-visible, .sp-nav a:focus-visible, .sp-drop:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.sp-btn--primary { background: var(--pod-blue); color: var(--on-pod-blue); }
.sp-btn--primary:hover { filter: brightness(1.1); }
.sp-btn--secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); }
.sp-btn--secondary:hover { background: var(--surface-sunken); }
.sp-btn--quiet { background: transparent; color: var(--pod-blue); }
.sp-btn--quiet:hover { background: var(--pod-blue-tint); }
.sp-btn--danger { background: transparent; color: var(--danger); border-color: var(--line-strong); }
.sp-btn--danger:hover { background: var(--danger-tint); }
.sp-btn[disabled], .sp-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.sp-btn--lg { min-height: 56px; padding: 0 var(--space-6); font-size: 17px; width: 100%; }
.sp-btn--sm { min-height: 36px; padding: 0 var(--space-4); font-size: 14px; }

/* Field */
.sp-field { display: grid; gap: var(--space-1); }
.sp-label { font: 600 14px/20px var(--font-body); color: var(--ink); }
.sp-input { min-height: 44px; padding: 0 var(--space-3); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-raised); color: var(--ink); font: 400 16px/24px var(--font-body); }
.sp-input[aria-invalid="true"] { border-color: var(--danger); }
.sp-hint { font: 400 14px/20px var(--font-body); color: var(--ink-muted); }
.sp-error { display: flex; align-items: center; gap: var(--space-1); font: 600 14px/20px var(--font-body); color: var(--danger); }

/* Status pill: color AND icon AND word, always */
.sp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: var(--radius-pill); font: 600 13px/20px var(--font-body); white-space: nowrap; }
.sp-pill--ok { background: var(--success-tint); color: var(--success); }
.sp-pill--warn { background: var(--warning-tint); color: var(--warning); }
.sp-pill--bad { background: var(--danger-tint); color: var(--danger); }
.sp-pill--neutral { background: var(--surface-sunken); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line); }

/* Card */
.sp-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-5); }

/* Header */
.sp-header { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; padding: var(--space-3) var(--space-5); background: var(--surface); border-bottom: 1px solid var(--line); }
.sp-brand { display: inline-flex; align-items: center; gap: var(--space-2); margin-right: auto; color: var(--ink); text-decoration: none; font: 800 22px/1 var(--font-display); letter-spacing: -0.01em; }
.sp-nav { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.sp-nav a:not(.sp-btn) { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font: 600 15px/20px var(--font-body); }
.sp-nav a:not(.sp-btn):hover { background: var(--surface-sunken); }
.sp-nav a:not(.sp-btn)[aria-current="page"] { background: var(--pod-blue-tint); color: var(--pod-blue); }

@media (max-width: 560px) {
  .sp-header { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3); }
  .sp-header > .sp-inline, .sp-header > .sp-btn { order: 2; }
  .sp-header > .sp-nav { grid-column: 1 / -1; order: 3; margin: 0 calc(-1 * var(--space-3)); }
  .sp-nav a:not(.sp-btn) { padding: var(--space-2); font-size: 14px; }
}

/* Connection spine: your Pod at the top, each connection linked into it.
   Each .sp-link owns its own piece of the dashed line, so the line ends exactly at the last node. */
.sp-pod-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.sp-spine { --spine-x: 24px; --spine-gap: 48px; display: grid; gap: var(--space-4); }
.sp-link { position: relative; padding-left: var(--spine-gap); }
.sp-link::before { content: ""; position: absolute; left: var(--spine-x); top: calc(-1 * var(--space-4)); bottom: calc(-1 * var(--space-4)); border-left: 2px dashed var(--line-strong); }
.sp-link:last-child::before { bottom: 50%; }
.sp-link::after { content: ""; position: absolute; top: calc(50% - 8px); left: calc(var(--spine-x) - 8px); width: 16px; height: 16px; box-sizing: border-box;
  border-radius: 50%; border: 2.5px solid var(--spark); background: var(--surface); }
.sp-link--on::after { background: var(--spark); }
.sp-conn { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5);
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.sp-conn::before { content: ""; position: absolute; top: 50%; left: calc(var(--spine-x) - var(--spine-gap) - 1px); width: calc(var(--spine-gap) - var(--spine-x)); border-top: 2px dashed var(--line-strong); }
.sp-tile { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--pod-blue-tint); color: var(--ink); }
.sp-conn__title { font: 600 20px/28px var(--font-body); margin: 0; }
.sp-conn__text { font: 400 14px/20px var(--font-body); color: var(--ink-muted); margin: 0; }
.sp-conn__actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
@media (max-width: 560px) {
  .sp-spine { --spine-x: 12px; --spine-gap: 28px; }
  .sp-conn { grid-template-columns: auto 1fr; }
  .sp-conn__actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* Drop zone */
.sp-drop { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-7) var(--space-5); text-align: center; color: var(--ink);
  background: var(--pod-blue-tint); border: 2px dashed var(--pod-blue); border-radius: var(--radius-lg); cursor: pointer; }
.sp-drop__icon { color: var(--pod-blue); }
.sp-drop__title { font: 700 20px/28px var(--font-display); margin: 0; }
.sp-drop__text { font: 400 14px/20px var(--font-body); color: var(--ink); margin: 0; }
.sp-drop--over { background: var(--surface-raised); border-style: solid; box-shadow: 0 0 0 4px var(--pod-blue-tint); }
.sp-drop--error { background: var(--danger-tint); border-color: var(--danger); }
.sp-drop--error .sp-drop__icon { color: var(--danger); }

/* Device code */
.sp-code { padding: var(--space-4) var(--space-5); text-align: center; background: var(--surface-sunken); border: 1.5px solid var(--line-strong); border-radius: var(--radius-md);
  font: 500 32px/40px var(--font-mono); letter-spacing: .14em; color: var(--ink); user-select: all; }
/* Page-level styles: base, layout, and the few shapes the components don't cover. */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 400 16px/24px var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol { margin: 0; }
h1 { font: 700 40px/44px var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }
h2 { font: 600 20px/28px var(--font-body); }
a { color: var(--pod-blue); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
code, .sp-mono { font: 500 14px/20px var(--font-mono); }
.muted { color: var(--ink-muted); }

.sp-skip { position: absolute; left: -9999px; top: 0; padding: var(--space-2) var(--space-3); background: var(--surface-raised); color: var(--ink); z-index: 10; }
.sp-skip:focus { left: var(--space-3); top: var(--space-3); }

.sp-main { width: 100%; max-width: 640px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8); display: grid; gap: var(--space-5); align-content: start; }
.sp-main--wide { max-width: 960px; }
.sp-footer { border-top: 1px solid var(--line); }
.sp-footer .sp-nav { max-width: 960px; margin: 0 auto; padding: var(--space-3) var(--space-4); }
.sp-footer .sp-nav a:not(.sp-btn) { color: var(--ink-muted); font: 500 14px/20px var(--font-body); }
.sp-inline { display: inline; margin: 0; }
.sp-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.sp-stack { display: grid; gap: var(--space-4); }
.sp-lead { font: 400 20px/30px var(--font-body); color: var(--ink-muted); max-width: 34ch; }
.sp-page-title { display: grid; gap: var(--space-1); }

/* Home */
.sp-hero { display: grid; gap: var(--space-5); padding-block: var(--space-6); }
.sp-hero h1 { font-size: clamp(36px, 8vw, 56px); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; max-width: 14ch; }
.sp-points { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sp-point { display: grid; gap: var(--space-2); align-content: start; }
.sp-point h2 { font-family: var(--font-display); font-weight: 700; }
.sp-point p { color: var(--ink-muted); font-size: 15px; line-height: 22px; }

/* Messages */
.sp-alert { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font: 600 15px/22px var(--font-body); }
.sp-alert .sp-icon { margin-top: 2px; }
.sp-alert--ok { background: var(--success-tint); color: var(--success); }
.sp-alert--bad { background: var(--danger-tint); color: var(--danger); }
.sp-alert--warn { background: var(--warning-tint); color: var(--warning); }
.sp-alert p + p { margin-top: var(--space-2); font-weight: 400; color: var(--ink); }
.sp-alert--warn a { color: inherit; }

/* Setup steps */
.sp-steps { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.sp-step { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); align-items: start; }
.sp-step__mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-strong); color: var(--ink-muted); font: 700 14px/1 var(--font-body); }
.sp-step--done .sp-step__mark { background: var(--success-tint); border-color: var(--success); color: var(--success); }
.sp-step__title { font: 600 16px/24px var(--font-body); }
.sp-step__text { color: var(--ink-muted); font-size: 15px; line-height: 22px; }

/* Devices */
.sp-device { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); }
.sp-device__name { font: 600 16px/24px var(--font-body); }

/* Long text */
.sp-prose { display: grid; gap: var(--space-3); }
.sp-prose h2 { margin-top: var(--space-4); font: 700 22px/28px var(--font-display); }
.sp-prose ul { padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.sp-prose .muted { font-size: 14px; }

.sp-conn__text ol { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.sp-card > h1 + *, .sp-card > h2 + * { margin-top: var(--space-2); }
.sp-code-wrap { display: grid; gap: var(--space-3); }

@media (max-width: 560px) {
  .sp-device { grid-template-columns: auto 1fr; }
  .sp-device > :last-child { grid-column: 1 / -1; }
  .sp-lead { font-size: 18px; line-height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .sp-btn { transition: none; } .sp-btn:active { transform: none; } }

[hidden] { display: none !important; }
.sp-qr { display: grid; justify-items: center; gap: var(--space-3); text-align: center; }
.sp-qr canvas, .sp-qr img { background: #fff; padding: 10px; border-radius: var(--radius-sm); } /* a QR code needs a white ground */
.sp-meta { color: var(--ink-muted); font-size: 14px; line-height: 20px; text-align: center; overflow-wrap: anywhere; }
.sp-install { display: grid; gap: var(--space-3); }

/* Adding files from the browser */
.sp-drop__icon { display: inline-flex; color: var(--pod-blue); }
.sp-drop--over .sp-drop__icon { transform: translateY(2px); }
.sp-uploads { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.sp-uploads:empty { display: none; }
.sp-upload { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-3) var(--space-4);
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.sp-upload__name { font: 600 15px/22px var(--font-body); overflow-wrap: anywhere; }
.sp-upload__meta { grid-column: 1; color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.sp-upload--error .sp-upload__meta { color: var(--danger); }
.sp-upload progress { grid-column: 1 / -1; width: 100%; height: 6px; accent-color: var(--pod-blue); }
.sp-upload .sp-btn { grid-column: 2; grid-row: 2; }
.sp-status { font: 600 15px/22px var(--font-body); min-height: 22px; }