*,*::before,*::after { box-sizing: border-box; }
/* An author display rule beats the UA's [hidden] regardless of specificity. This
   project has already shipped a strip that was visible in every state for want
   of this line. */
[hidden] { display: none !important; }
body {
  margin: 0; background: #070e1f; color: #eef1f4;
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a { color: #d4a62a; text-decoration: none; }
a:hover { color: #fbcd60; }
.wrap { width: 100%; max-width: 980px; margin: 0 auto; padding: 0 22px; }
#signedout { max-width: 720px; }
header { border-bottom: 1px solid #111c33; padding: 18px 0; }
header .wrap { display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #eef1f4; font-weight: 650; }
.brand img { width: 26px; height: 26px; border-radius: 6px; }
.link { background: none; border: 0; color: #8b939e; font-size: 14px; cursor: pointer; }
.link:hover { color: #eef1f4; }
main { padding: 46px 0 90px; }
h1 { margin: 0 0 10px; font-size: 32px; font-weight: 680; letter-spacing: -0.025em; }
h2 { margin: 44px 0 12px; font-size: 19px; font-weight: 650; }
p { margin: 12px 0 0; color: #a7aeb8; }
.muted { color: #8b939e; font-size: 14.5px; }
.warn { color: #d8c9a6; font-size: 14px; }
.card { padding: 20px 22px; border-radius: 12px; border: 1px solid #111c33; background: #0c1526; }
.btn {
  display: inline-block; margin-top: 14px; padding: 11px 20px; border: 0; border-radius: 10px;
  background: #d4a62a; color: #050607; font-size: 14.5px; font-weight: 650; cursor: pointer;
}
.btn--quiet { background: transparent; border: 1px solid #2a3b5c; color: #d3d8de; }
.btn--danger { background: transparent; border: 1px solid rgba(239,68,68,0.45); color: #f87171; }
.btn--danger:hover { background: rgba(239,68,68,0.1); }
.btn:disabled { opacity: 0.55; cursor: default; }

/* ── account forms ─────────────────────────────────────────────────────────
   The account section stacks several cards, each with its own form. Spacing
   lives here rather than inline so the three read as one group. */
h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 640; }
#account .card + .card { margin-top: 14px; }
label { display: block; margin-top: 14px; font-size: 13px; color: #a7aeb8; }
input[type="email"], input[type="password"], input[type="text"] {
  width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 9px;
  border: 1px solid #22304e; background: #0a1426; color: #eef1f4; font-size: 15px;
}
input:focus { outline: 2px solid rgba(212,166,42,0.5); outline-offset: 1px; }

/* Feedback sits with the button that causes it. The settings page shipped a
   confirmation rendered at the bottom of a long scroll, correct and invisible. */
.msg { margin-top: 12px; padding: 9px 12px; border-radius: 9px; font-size: 14px; }
.msg[data-tone="ok"]  { background: rgba(34,197,94,0.1);  border: 1px solid rgba(34,197,94,0.32); color: #86efac; }
.msg[data-tone="err"] { background: rgba(239,68,68,0.1);  border: 1px solid rgba(239,68,68,0.34); color: #fca5a5; }
pre {
  margin-top: 14px; padding: 14px; border-radius: 9px; overflow-x: auto;
  background: #101319; border: 1px solid #22304e; color: #d3d8de;
  font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace;
}
code { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; color: #d3d8de; }
/* ── desktop tools: the walkthrough ────────────────────────────────────────
   The same numbered step rows devices.html draws inline, as classes. Two
   dense <ol>s were the first version and read as a wall. */
.subhead { display: block; margin-top: 24px; font: 600 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.14em; color: #6b7280; }
.subhead--gold { color: #f5cf7a; font-weight: 700; margin-top: 0; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.pair__cell { min-width: 0; padding: 14px 16px; border-radius: 11px; background: #070e1f; border: 1px solid #111c33; }
.pair__k { display: block; font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.12em; color: #8b939e; }
.pair__k--yes { color: #4ade80; }
.pair__k--cost { color: #f87171; }
.pair__cell ul { margin: 10px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.7; color: #a7aeb8; }
.pair__p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: #a7aeb8; }
.pair__note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: #6b7280; }
.pair__cell .btn { margin-top: 11px; padding: 9px 15px; font-size: 13.5px; }
.easy { margin-top: 18px; padding: 18px 20px; border-radius: 13px; background: rgba(212,166,42,0.06); border: 1px solid rgba(212,166,42,0.3); }
.easy__t { margin: 8px 0 0; font-size: 16.5px; font-weight: 660; color: #eef1f4; }
.easy .muted { margin-top: 8px; }
.easy .pair__cell { border-color: #22304e; }
.walk { display: grid; gap: 2px; margin-top: 10px; border-radius: 12px; overflow: hidden; background: #111c33; border: 1px solid #111c33; }
.walk__step { display: flex; align-items: flex-start; gap: 14px; padding: 15px 17px; background: #070e1f; }
.walk__n { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: rgba(212,166,42,0.12); border: 1px solid rgba(212,166,42,0.3); font: 700 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: #fbcd60; }
.walk__body { flex: 1; min-width: 0; display: grid; gap: 7px; }
.walk__t { font-size: 14.5px; font-weight: 640; color: #eef1f4; }
.walk__p { margin: 0; font-size: 13.5px; line-height: 1.65; color: #8b939e; }
.walk__p--dim { font-size: 12.5px; color: #6b7280; }
.walk__list { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.7; color: #a7aeb8; }
.walk__list strong { color: #d3d8de; }
pre.cmd { margin: 0; padding: 9px 12px; border-radius: 8px; background: #0a1426; border: 1px solid #22304e; font: 12.5px/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; color: #d3d8de; overflow-x: auto; }
.pair__cell pre.cmd { margin-top: 10px; }
pre.cmd .dim { color: #5c636d; }
.btn--sm { margin-top: 2px; padding: 8px 14px; font-size: 13px; }
@media (max-width: 620px) { .pair { grid-template-columns: 1fr; } }

/* ── getting out of here ───────────────────────────────────────────────────
   The header wordmark was the only link off this page. */
header .wrap { gap: 18px; }
.nav { display: flex; flex-wrap: wrap; gap: 16px; margin-right: auto; font-size: 14px; }
.nav a { color: #8b939e; }
.nav a:hover { color: #eef1f4; }
.links { margin: 0; padding: 0; list-style: none; }
.links li + li { margin-top: 9px; }
.links li { color: #8b939e; font-size: 14.5px; }
footer { border-top: 1px solid #111c33; padding: 22px 0 40px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; }
footer a { color: #8b939e; }
footer a:hover { color: #eef1f4; }

/* ── the getting-started half ──────────────────────────────────────────────
   Everything below draws the sections the redesign added above the plan card:
   the setup checklist, the device videos, the two-surface explainer, the
   settings digest, the trouble rows and the guide grid.

   Written as classes rather than the inline styles the design exported, because
   portal.js builds the plan card out of .btn/.muted/.warn and those two halves
   have to look like one page. Same tokens throughout, so they do. */
.kicker { font: 600 11px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.1em; color: #6b7280; }
.lede { margin: 0; color: #a7aeb8; }
.lede strong, .pane__body strong { color: #eef1f4; font-weight: 650; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.two--mt { margin-top: 16px; }
@media (max-width: 620px) { .two { grid-template-columns: 1fr; } }

.card--lit {
  border-color: rgba(212,166,42,0.26);
  background: radial-gradient(420px 200px at 100% 0%, rgba(212,166,42,0.08), transparent 70%), #0c1526;
}
.setup__head { display: flex; align-items: center; gap: 10px; }
.setup__count { flex: 1; font-size: 14px; color: #a7aeb8; }
.bar { display: block; margin-top: 9px; height: 4px; border-radius: 2px; background: #161a20; overflow: hidden; }
.bar__fill { display: block; height: 100%; border-radius: 2px; background: #d4a62a; }

.steps {
  display: grid; gap: 1px; margin: 18px 0 0; padding: 0; list-style: none;
  border-radius: 10px; overflow: hidden; background: #111c33; border: 1px solid #111c33;
}
.step { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; background: #0a0c10; }
.step__mark {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: transparent; border: 1px solid #2a3b5c; color: #6b7280;
}
.step--done .step__mark { background: rgba(212,166,42,0.16); border-color: rgba(212,166,42,0.4); color: #fbcd60; }
.step__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.step__title { font-size: 14.5px; font-weight: 600; color: #eef1f4; }
.step--done .step__title { color: #8b939e; }
.step__sub { font-size: 13px; line-height: 1.55; color: #8b939e; }
.step__cta {
  flex: none; align-self: center; padding: 7px 14px; border-radius: 9px;
  background: #d4a62a; color: #050607; font-size: 13px; font-weight: 650;
}
.step__cta:hover { background: #e9bc42; color: #050607; }

.vcard { display: block; border-radius: 11px; overflow: hidden; background: #0a0c10; border: 1px solid #111c33; color: #eef1f4; }
.vcard:hover { border-color: #2a3b5c; color: #eef1f4; }
.vcard__shot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  aspect-ratio: 16/9; border-bottom: 1px solid #111c33;
  background: repeating-linear-gradient(135deg, #0c1526 0 10px, #0c1526 10px 20px);
}
.play {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid #333a45;
  background: rgba(212,166,42,0.07); display: grid; place-items: center;
}
.play::after {
  content: ""; width: 0; height: 0; margin-left: 3px;
  border-left: 11px solid rgba(251,205,96,0.72);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.vcard__meta { display: block; padding: 13px 15px; }
.vcard__title { display: block; font-size: 14.5px; font-weight: 650; }
.vcard__sub { display: block; margin-top: 4px; font-size: 13px; line-height: 1.55; color: #8b939e; }

.rows { display: grid; gap: 9px; margin-top: 14px; }
.rows--first { margin-top: 0; gap: 10px; }
.rowlink {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 10px;
  background: #0a0c10; border: 1px solid #111c33; color: #d3d8de;
}
.rowlink:hover { border-color: #2a3b5c; color: #eef1f4; }
.rowlink__t { flex: 1; font-size: 14px; font-weight: 550; }
.rowlink__go { flex: none; color: #6b7280; font-size: 13px; }
.dot { flex: none; width: 6px; height: 6px; border-radius: 50%; }
.tag {
  flex: none; padding: 2px 8px; border-radius: 5px; background: #12151b; border: 1px solid #22304e;
  font: 9.5px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em; color: #8b939e;
}

.pane { padding: 16px; border-radius: 11px; background: #0a0c10; border: 1px solid #111c33; }
.pane__head { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 650; }
.pane__head img { display: block; width: 22px; height: 22px; border-radius: 5px; }
.gear {
  width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center;
  background: #161a20; border: 1px solid #22304e; color: #a7aeb8; font-size: 13px;
}
.pane__body { margin: 11px 0 0; font-size: 13.5px; line-height: 1.6; color: #8b939e; }
.card .two + .pane__body { margin-top: 16px; }

.card--list { padding: 6px 22px 20px; }
.qa { padding: 15px 0; border-bottom: 1px solid #14171c; }
.qa__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.qa__name { font-size: 14.5px; font-weight: 650; color: #eef1f4; }
.qa__head a { margin-left: auto; font-size: 12.5px; }
.qa__body { margin: 7px 0 0; font-size: 13.5px; line-height: 1.6; color: #8b939e; }

.gcard { display: block; padding: 16px 17px; border-radius: 11px; background: #0c1526; border: 1px solid #111c33; color: #eef1f4; }
.gcard:hover { border-color: #2a3b5c; color: #eef1f4; }
.gcard__t { display: block; font-size: 14.5px; font-weight: 650; }
.gcard__b { display: block; margin-top: 5px; font-size: 13px; line-height: 1.55; color: #8b939e; }

/* ── the account accordion ─────────────────────────────────────────────────
   <details name="acct"> is the accordion. The shared name is what makes opening
   one close the others, natively, so there is no script here to get wrong and
   the rows stay keyboard-operable. */
.acc { display: grid; gap: 1px; border-radius: 12px; overflow: hidden; background: #111c33; border: 1px solid #111c33; }
.acc details { background: #0c1526; }
.acc summary {
  display: flex; align-items: center; gap: 14px; padding: 17px 22px; cursor: pointer;
  list-style: none;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:focus-visible { outline: 2px solid rgba(212,166,42,0.5); outline-offset: -2px; }
.acc__t { flex: 1; font-size: 15.5px; font-weight: 640; }
.acc__t--danger { color: #f87171; }
.acc__meta { flex: none; font-size: 13.5px; color: #6b7280; }
.acc__plus {
  flex: none; font-size: 16px; color: #6b7280;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.acc details[open] .acc__plus { transform: rotate(45deg); }
.acc__body { padding: 0 22px 20px; }
.acc__body > .muted:first-child { margin-top: 0; }

/* ── the side panel ────────────────────────────────────────────────────────
   Thirteen sections on one scroll. The nav sits beside the content on a wide
   screen and folds into a chip row above it on a narrow one. Sticky, so it is
   always where the reader left it. */
#signedin { display: grid; grid-template-columns: 200px minmax(0, 720px); column-gap: 44px; align-items: start; }
#signedin > h1, #signedin > .muted { grid-column: 2; }
.toc {
  grid-column: 1; grid-row: 1 / span 3; position: sticky; top: 24px;
  display: flex; flex-direction: column; gap: 2px; padding-top: 4px;
}
.toc a {
  padding: 7px 12px; border-radius: 8px; border-left: 2px solid transparent;
  font-size: 13.5px; color: #8b939e;
}
.toc a:hover { color: #eef1f4; background: #0c1526; }
.toc__main { grid-column: 2; min-width: 0; }
.toc__main > h2:first-child { margin-top: 0; }
[id] { scroll-margin-top: 24px; }
html { scroll-behavior: smooth; }
@media (max-width: 860px) {
  #signedin { grid-template-columns: 1fr; }
  #signedin > h1, #signedin > .muted, .toc, .toc__main { grid-column: 1; }
  .toc { grid-row: auto; position: static; flex-direction: row; flex-wrap: wrap; margin-top: 18px; }
  .toc a { padding: 5px 10px; border: 1px solid #22304e; border-radius: 7px; font-size: 12.5px; }
}

/* the tutorial, same frame the install page uses */
.video { margin-top: 24px; }
.frame {
  position: relative; padding-top: 56.25%; border-radius: 12px; overflow: hidden;
  border: 1px dashed #2b313b; background: repeating-linear-gradient(135deg, #0c1526 0 12px, #0c1526 12px 24px);
}
.frame__note {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 600 11px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.18em; color: #8b939e;
}
#downloads h2 { margin-top: 28px; }

/* Keep tickers dressed. Native controls on purpose: a checkbox, a select and a
   textarea are what the settings page uses too, styled to sit in the card. */
.pd { display: grid; gap: 12px; margin-top: 14px; }
.pd__row { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.pd__row--col { flex-direction: column; align-items: stretch; gap: 6px; }
.pd select, .pd textarea { font: inherit; color: #eef1f4; background: #070e1f; border: 1px solid #22304e; border-radius: 8px; padding: 8px 10px; }
.pd textarea { resize: vertical; text-transform: uppercase; }
.pd input[type="checkbox"] { width: 18px; height: 18px; accent-color: #d4a62a; }
.pd :disabled { opacity: 0.55; }