main {width:min(440px,calc(100% - 48px));margin:auto;padding:64px 0 56px;min-height:calc(100svh - 200px);}
.signup-card {width:100%;}
.inbox-mark {width:44px;height:44px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;margin-bottom:24px;background:var(--sage);}
.inbox-mark svg {width:24px;height:24px;}
h1 {font-size:36px;font-weight:650;letter-spacing:-1.2px;line-height:1.15;margin:0 0 16px;text-wrap:balance;}
p {margin:0;}
.description {font-size:16px;color:var(--muted);line-height:1.65;}
.provider-options {margin-top:30px;}
.provider-button {width:100%;display:flex;align-items:center;gap:12px;min-height:50px;padding:12px 16px;background:var(--surface);color:var(--ink);border:1px solid #b9c4bb;border-radius:4px;font-weight:600;text-align:left;}
.provider-button svg {width:18px;height:18px;flex-shrink:0;}
.button-arrow {margin-left:auto;color:var(--muted);}
.provider-help {color:var(--muted);font-size:13px;margin:8px 0 20px;}
.availability {font-size:13px;color:var(--muted);margin-top:-12px;margin-bottom:20px;}
.availability:empty {display:none;}
.account-note {font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:20px;}
form {margin-top:26px;}
.signed-in-account {font-size:14px;color:var(--muted);overflow-wrap:anywhere;margin-bottom:22px;}
#choose-name label {display:block;font-weight:600;margin:18px 0 8px;}
input {width:100%;border:1px solid #b9c4bb;border-radius:4px;background:var(--surface);color:var(--ink);padding:11px 13px;font-size:16px;min-height:48px;}
.field-help {font-size:13px;color:var(--muted);margin-top:8px;}
#name-permanent {margin-top:3px;}
.primary-button {width:100%;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--ink);border-radius:4px;background:var(--ink);color:var(--paper);min-height:48px;padding:12px 16px;margin-top:24px;font-weight:600;}
.status {color:var(--muted);font-size:13px;overflow-wrap:anywhere;margin-top:18px;}
.status:empty {display:none;}
.status[data-error="true"] {color:#a33a30;}
details {margin-top:18px;color:var(--muted);font-size:13px;}
summary {cursor:pointer;}
pre {font:12px/1.7 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;}
.signup-card footer {display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:26px;font-size:12px;color:var(--muted);}
.username-field {display:flex;align-items:center;gap:8px;border:1px solid #b9c4bb;border-radius:4px;background:var(--surface);padding:0 12px;}
.username-field>span {color:var(--muted);}
.username-field #username {border:0;margin:0;padding-left:0;min-width:0;}
.username-field:focus-within {outline:2px solid #557460;outline-offset:2px;}
@media(hover:hover) and (pointer:fine) {.provider-button:hover:not(:disabled) {background:var(--sage);}.primary-button:hover:not(:disabled) {background:#3e5045;}}
@media(max-width:600px) {main {padding:36px 0;min-height:0;}}

/* Shared with the landing page; appended after legacy page styles. */
:root {
  color-scheme: light;
  --paper: #fafafa;
  --surface: #fff;
  --ink: #141214;
  --muted: #756f77;
  --line: #5a475018;
  --sage: #f2eff3;
  --pink: #edb5c2;
  --accent-ink: #8c617c;
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --public-width: 1120px;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
html { background: var(--paper); scroll-padding-top: 88px; }
body { display: block; margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--sans); }
button, input, textarea, select { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; }
.public-header {
  position: sticky; top: 0; z-index: 30; width: 100%; margin: 0;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: var(--paper); box-shadow: none;
}
.public-header-inner {
  width: min(var(--public-width), calc(100% - 80px)); max-width: none;
  min-height: 76px; margin: auto; padding: 12px 0; gap: 24px;
}
.public-brand { gap: 9px; font-size: 27px; font-weight: 500; letter-spacing: -1px; }
.public-brand svg { width: 29px; height: 29px; }
.public-beta { margin-left: 6px; padding: 3px 6px; border-radius: 4px; background: #ede8eb; color: #491529; font: 10px/1.2 var(--sans); letter-spacing: .06em; }
.public-header nav { gap: 24px; }
.public-header nav a { min-height: 40px; font-size: 15px; font-weight: 400; gap: 8px; color: #655e67; }
.public-header nav .public-nav-action { padding: 0 20px; border: 0; border-radius: 999px; color: #fff; background: #0c0b0c; }
.public-nav-action svg { width: 15px; height: 15px; }
body > main, .public-main {
  width: min(var(--public-width), calc(100% - 80px)); max-width: none;
  min-height: calc(100svh - 180px); margin: 0 auto; padding: 56px 32px;
  border-inline: 1px solid var(--line);
}
.public-main h1, main h1 { font: 500 clamp(32px, 4vw, 48px)/1.12 var(--sans); letter-spacing: -.045em; margin: 0 0 22px; text-wrap: balance; }
.public-main h2, main h2 { font: 500 26px/1.2 var(--sans); letter-spacing: -.035em; }
.public-main h3, main h3 { font: 500 18px/1.35 var(--sans); letter-spacing: -.02em; }
.public-hero, main > .hero { max-width: 720px; margin: 0 0 40px; padding: 8px 0 0; }
.public-lead, .intro { max-width: 58ch; font-size: 17px; line-height: 1.6; color: #504b52; }
.public-eyebrow { color: var(--muted); font: 11px/1.5 var(--mono); letter-spacing: .07em; margin-bottom: 16px; }
.public-grid { gap: 0; border: 1px solid var(--line); }
.public-card { padding: 32px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.public-card + .public-card { border-top: 1px solid var(--line); }
.public-card:last-child { border-left: 1px solid var(--line); }
.public-wide { background: transparent; }
.public-card > p { max-width: 64ch; }
.public-actions { gap: 12px; margin-block: 24px; flex-wrap: wrap; }
.public-button, main button:not(.provider-button), .primary-button {
  min-height: 42px; padding: 10px 20px; border: 1px solid #0c0b0c;
  border-radius: 999px; background: #0c0b0c; color: white;
  font: 500 15px/20px var(--sans); box-shadow: none;
}
.public-button.secondary, main .terminal button { background: #fff; color: var(--ink); border-color: #dedbdd; }
.public-status { border-color: #c8b9c7; background: #f2eff3; }
.public-small, .install-meta, .public-status, .provider-help, .field-help, .status { color: var(--muted); font-size: 13px; }
.public-footer { width: min(var(--public-width), calc(100% - 80px)); padding: 24px 0; margin: 0 auto; border-top: 1px solid var(--line); font-size: 13px; }
.public-footer-brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 17px; }
.public-footer-brand svg { width: 22px; height: 22px; }
.public-footer nav { gap: 24px; }
/* A single framed setup surface, with useful content instead of empty height. */
.setup { padding: 28px; border: 1px solid var(--line); border-radius: 0; background: transparent; }
.setup-heading { gap: 20px; }
.setup-heading h2 { font-size: 23px; }
.setup-heading .primary-button { flex: none; }
.setup-prompt { background: #fff; border-color: #dedbdd; border-radius: 8px; font-size: 15px; line-height: 1.65; min-height: 230px; padding: 20px; }
.terminal { border-color: var(--line); border-radius: 8px; background: #f3f1f3; }
.terminal pre { font-size: 13px; overflow-wrap: anywhere; }
.next-steps { gap: 0; padding: 0; margin-block: 32px; border-block: 1px solid var(--line); }
.next-steps article { padding: 24px 20px; }
.next-steps article + article { border-left: 1px solid var(--line); }
.next-steps p, .questions p, .manual-body > p { font-size: 15px; line-height: 1.6; }
.questions summary, .manual-install summary { font-size: 16px; padding-block: 6px; }
.questions details { border-color: var(--line); }
/* Signup and approval stay compact within the same full-width grid rails. */
.signup-card { max-width: 420px; margin: 12px auto 32px; }
.signup-card h1 { font-size: 36px; text-align: left; }
.inbox-mark { border: 0; border-radius: 0; background: none; color: var(--accent-ink); }
.provider-button { border: 1px solid #dedbdd; border-radius: 999px; background: #fff; font-weight: 500; min-height: 48px; padding: 12px 18px; }
input, .username-field { border: 1px solid #dedbdd; border-radius: 8px; background: #fff; }
.username-field:focus-within { outline-color: var(--accent-ink); }
.public-main.public-prose > *, .public-main.public-narrow > * { max-width: 680px; margin-left: auto; margin-right: auto; }
.public-prose h2 { margin-top: 32px; }
.public-main.public-narrow > * { max-width: 480px; }
.public-code { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 18px 24px; color: var(--ink); }
.public-prose pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (hover:hover) and (pointer:fine) {
  .primary-button:hover:not(:disabled), .public-button:hover, main button:hover:not(:disabled):not(.provider-button) { background: #292529; color: #fff; }
  .provider-button:hover:not(:disabled), .public-button.secondary:hover, .terminal button:hover:not(:disabled) { background: #f2eff3; color: var(--ink); }
}
@media (max-width: 700px) {
  .public-header-inner, body > main, .public-main, .public-footer { width: calc(100% - 40px); }
  .public-header-inner { gap: 16px; min-height: 68px; }
  .public-brand { font-size: 23px; }
  .public-brand svg { width: 25px; height: 25px; }
  .public-header nav { gap: 14px; }
  .public-header nav a { font-size: 13px; }
  .public-header nav .public-nav-action { padding-inline: 14px; }
  body > main, .public-main { padding: 36px 20px; }
  .public-grid { grid-template-columns: 1fr; }
  .public-card { padding: 24px 20px; }
  .public-card:last-child { border-left: 0; }
  .setup { padding: 20px; }
  .setup-heading { flex-wrap: wrap; }
  .setup-prompt { font-size: 16px; padding: 14px; }
  .next-steps { grid-template-columns: 1fr; }
  .next-steps article + article { border-left: 0; border-top: 1px solid var(--line); }
  .public-footer { gap: 16px; }
  .public-footer nav { gap: 16px; }
}
@media (max-width: 440px) {
  .public-header-inner { flex-wrap: wrap; gap: 8px; padding-block: 12px; }
  .public-header nav { width: 100%; justify-content: flex-start; }
  .public-header nav .public-nav-action { margin-left: auto; }
  .public-hero, main > .hero { margin-bottom: 28px; }
  .signup-card { margin-block: 0; }
  .signup-card h1 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }