:root {
  --bg: #08090b; --card: #0d1014; --line-strong: #2a323d;
  --input: #141922; --text: #e6edf3; --body: #b9c2cc; --dim: #8b949e;
  --accent: #c9aeff;
  /* The app's primary button (v-code-ide styles.css --btn-primary). White on it is 4.6:1. */
  --btn-primary: #238636; --btn-primary-hover: #29903b; --btn-primary-active: #1f7a30;
  --btn-lift: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .28);
  --green: #7ee787; --red: #f85149;
  --sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
main {
  position: relative; z-index: 1; width: 100%; max-width: 680px;
  margin: 0 auto; padding: clamp(2.5rem, 12vh, 5.5rem) 16px 3rem;
}

.lockup { display: block; margin: 0 auto 1.75rem; width: auto;
          height: clamp(35px, 8.5vw, 48px); max-width: 100%; overflow: visible; }
/* Only the V glows. On the wordmark the haloes merge between letters and read as a slab. */
.lockup .mark { filter: drop-shadow(0 0 13px rgba(139, 92, 246, .5)); }
.lede { margin: 0; text-align: center; color: var(--body);
        font-size: clamp(1rem, 3.4vw, 1.25rem); text-wrap: balance; }


form { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
       margin: 2rem 0 0; }
/* An author `display` beats the UA sheet's [hidden] rule, so say it again. */
form[hidden], .card-state[hidden] { display: none; }
#continue-form .switch { flex-basis: 100%; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
input[type=email], input.code {
  flex: 0 1 17rem; min-width: 0; font: inherit; font-size: .9375rem; color: var(--text);
  background: var(--input); border: 1px solid var(--line-strong); border-radius: 10px;
  padding: .55rem .75rem;
}
input[type=email]::placeholder, input.code::placeholder { color: var(--dim); opacity: 1; }
input[type=email][aria-invalid="true"], input.code[aria-invalid="true"] { border-color: var(--red); }
input[type=email]:focus-visible, input.code:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

button, a.button {
  font: inherit; font-weight: 600; cursor: pointer; color: #fff;
  background: var(--btn-primary); border: 1px solid rgba(240, 246, 252, .1); border-radius: 10px;
  padding: .5rem .875rem; font-size: .875rem; box-shadow: var(--btn-lift);
}
button:hover:not(:disabled), a.button:hover { background: var(--btn-primary-hover); }
button:active:not(:disabled), a.button:active { background: var(--btn-primary-active); }
/* A link that looks like a button: "Add a workstation" under Workstations. */
a.button { display: inline-block; margin: .75rem 0 0; text-decoration: none; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Explicit colours rather than opacity, so the label stays readable. */
button:disabled { background: #212830; border-color: #3d444d; color: var(--body); cursor: default; box-shadow: none; }

.note { margin: .75rem 0 0; text-align: center; font-size: .8125rem; color: var(--dim);
        min-height: 1.5rem; }
.note.err { color: var(--red); }
.note.ok { color: var(--green); }
/* A link carried a promo code (public/ref.js): the banner above the page's first heading. */
.promo-banner { margin: 0 0 24px; padding: 12px 16px; background: var(--card); border: 1px solid var(--line-strong);
                border-radius: 14px; color: var(--text); font-size: .9375rem; text-align: left; }



/* The top-right link on every page: "Log in" on the homepage. */
.top { position: absolute; top: 0; right: 0; z-index: 2; margin: 0; padding: 1rem 16px;
       font-size: .875rem; }
.top a, button.link { color: var(--body); text-decoration: none; }
.top a:hover, button.link:hover:not(:disabled) { color: var(--text); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* /login and /account: the lockup is a link home, smaller than on the homepage. */
.home { display: block; width: max-content; max-width: 100%; margin: 0 auto 1.75rem; }
.home .lockup { margin: 0; height: clamp(28px, 6.2vw, 34px); }
input.code { flex-basis: 9rem; letter-spacing: .2em; }
.switch { margin: .5rem 0 0; text-align: center; }
button.link { background: none; border: 0; padding: 0; font-weight: 400; font-size: .8125rem; box-shadow: none; }
button.link:hover:not(:disabled) { background: none; }

button.quiet { background: transparent; border-color: var(--line-strong); color: var(--body); box-shadow: none; }
button.quiet:hover:not(:disabled) { background: var(--input); border-color: var(--dim); color: var(--text); }

.panel { margin: 1.5rem 0 0; padding: 1rem 1.25rem; background: var(--card);
         border: 1px solid var(--line-strong); border-radius: 14px; }
.panel h2 { margin: 0 0 .5rem; font-size: .8125rem; font-weight: 600; color: var(--dim);
            text-transform: uppercase; letter-spacing: .06em; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; }
.facts dt { color: var(--dim); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; align-items: center; gap: .75rem; padding: .625rem 0;
           border-top: 1px solid var(--line-strong); }
.rows li:first-child { border-top: 0; }
.rows .what { flex: 1; min-width: 0; }
.rows .name { overflow-wrap: anywhere; }
.rows .meta, .rows .empty { font-size: .8125rem; color: var(--dim); }
.tag { margin-left: .5rem; font-size: .75rem; color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 2rem 0 0; }

@media (prefers-reduced-motion: no-preference) {
  .lockup, .lede { animation: rise .5s cubic-bezier(.2, .7, .3, 1) backwards; }
  .lede { animation-delay: .08s; }
  .hero .pitch > * { animation: rise .5s cubic-bezier(.2, .7, .3, 1) backwards; }
  .hero .pitch > :nth-child(2) { animation-delay: .04s; }
  .hero .pitch > :nth-child(3) { animation-delay: .08s; }
  .hero .pitch > :nth-child(4) { animation-delay: .12s; }
  .hero .pitch > :nth-child(5) { animation-delay: .16s; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
}

/* The top-right nav holds more than one link on the homepage. */
.top a + a { margin-left: 1.25rem; }
/* The links sit back to back in the markup, with no space to break at, so the row wraps as a flex row. */
.foot { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem;
        max-width: 680px; margin: 0 auto; padding: 0 16px 2rem; font-size: .8125rem; }
.foot a { color: var(--dim); text-decoration: none; }
.foot a:hover { color: var(--text); text-decoration: underline; }
.foot button.link { color: var(--dim); }

/* The analytics consent banner analytics.js adds on the public pages. */
#consent {
  position: fixed; z-index: 10; inset: auto 16px 16px; margin: 0 auto; max-width: 560px;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}
#consent[hidden] { display: none; }
#consent p { margin: 0; flex: 1 1 15rem; font-size: .8125rem; color: var(--body); }
#consent .choices { display: flex; gap: .75rem; margin-left: auto; }

/* /guides/ and the articles under it: one column of prose in the site's colours. */
.guide { color: var(--body); }
.guide h1 { margin: 0 0 .5rem; color: var(--text); font-size: clamp(1.625rem, 5.2vw, 2.25rem); line-height: 1.15;
            letter-spacing: -.01em; text-wrap: balance; }
.guide h2 { margin: 2.5rem 0 .75rem; color: var(--text); font-size: clamp(1.25rem, 3.6vw, 1.5rem); line-height: 1.25; }
.guide h3 { margin: 1.5rem 0 .375rem; color: var(--text); font-size: 1.0625rem; }
.guide p, .guide li { font-size: 1.0625rem; line-height: 1.6; }
.guide p { margin: 0 0 1rem; }
.guide .byline { margin: 0 0 2rem; color: var(--dim); font-size: .875rem; }
.guide .lead { color: var(--text); font-size: 1.125rem; }
.guide ol, .guide ul { margin: 0 0 1rem; padding-left: 1.5rem; }
.guide li { margin: 0 0 .5rem; }
.guide li p { margin: .5rem 0; }
.guide a { color: var(--accent); }
.guide code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em;
              background: var(--input); border: 1px solid var(--line-strong); border-radius: 6px; padding: .05em .35em;
              overflow-wrap: anywhere; }
.guide pre { margin: 0 0 1rem; padding: .75rem 1rem; background: var(--input); border: 1px solid var(--line-strong);
             border-radius: 10px; overflow-x: auto; font-size: .875rem; line-height: 1.5; }
.guide pre code { background: none; border: 0; padding: 0; font-size: inherit; }
/* A docs code block is the homepage's install command (.get-command below): the code, and the green Copy beside it. */
.guide .code-block { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 1rem; padding: 6px 6px 6px 14px;
       background: var(--input); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
.guide .code-block pre { flex: 1; min-width: 0; margin: 0; padding: 8px 0; background: none; border: 0; border-radius: 0;
       font: 400 12.5px/1.4 var(--mono); color: var(--text); scrollbar-width: none; }
.guide .code-copy { flex: none; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
       font-size: .875rem; border-radius: 8px; box-shadow: var(--btn-lift), 0 4px 16px rgba(35, 134, 54, .3); }
.guide .code-copy svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (max-width: 480px) {
  .guide .code-block { padding-left: 10px; }
  .guide .code-block pre { font-size: 11px; }
  .guide .code-copy { width: 40px; padding: 0; justify-content: center; }
  .guide .code-copy-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.guide figure { margin: 1.5rem 0; }
.guide figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line-strong); border-radius: 12px; }
.guide figure.phone { max-width: 300px; margin-left: auto; margin-right: auto; }
.guide figure.phone img { border-radius: 22px; }
.guide figcaption { margin: .5rem 0 0; color: var(--dim); font-size: .8125rem; text-align: center; }
/* The docs pages (/docs/, built from v-code-ide's docs/features): screenshots sit inline in the markdown. */
.doc p > img, .doc li > img { display: block; max-width: 100%; height: auto; margin: 1rem auto;
  border: 1px solid var(--line-strong); border-radius: 12px; }
.doc img.phone { max-width: min(100%, 320px); border-radius: 22px; }
.guide .table { overflow-x: auto; margin: 0 0 1rem; }
.guide table { border-collapse: collapse; width: 100%; font-size: .9375rem; line-height: 1.45; }
.guide th, .guide td { padding: .5rem .625rem; border: 1px solid var(--line-strong); text-align: left; vertical-align: top; }
.guide th { color: var(--dim); font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.guide td:first-child { color: var(--text); }
/* On a phone the three columns would be a few words wide: each row becomes a card. */
@media (max-width: 600px) {
  .guide table, .guide tbody, .guide tr, .guide td { display: block; width: 100%; }
  .guide thead { display: none; }
  .guide tr { margin: 0 0 .75rem; padding: .625rem .75rem; border: 1px solid var(--line-strong); border-radius: 10px; }
  .guide td { padding: 0; border: 0; }
  .guide td:first-child { font-weight: 600; margin-bottom: .25rem; }
  .guide td + td { margin-top: .375rem; }
  .guide td:last-child { color: var(--dim); font-size: .875rem; }
}
/* A row as a card names each labelled cell after the first, since the header is hidden. */
@media (max-width: 600px) {
  .guide td + td[data-label]::before { content: attr(data-label); display: block; color: var(--dim);
    font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
  .doc td:last-child, .guide td[data-label]:last-child { color: var(--body); font-size: inherit; }
}
.guide .faq h3 { margin-top: 1.25rem; }
.guide a.cta { display: inline-block; padding: .75rem 1.5rem; border-radius: 10px; background: var(--btn-primary); color: #fff;
               border: 1px solid rgba(240, 246, 252, .1); box-shadow: var(--btn-lift); font-weight: 600; text-decoration: none; }
.guide a.cta:hover { background: var(--btn-primary-hover); }
.guide .next { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-strong); }
.guide .list { list-style: none; padding: 0; }
.guide .list li { padding: 1rem 0; border-top: 1px solid var(--line-strong); }
.guide .list li:first-child { border-top: 0; }
.guide .list a { color: var(--text); font-size: 1.125rem; font-weight: 600; text-decoration: none; }
.guide .list a:hover { text-decoration: underline; }
.guide .list p { margin: .25rem 0 0; font-size: .9375rem; }

/* The homepage and /account (body.site): a top bar with the orb and the
   wordmark, then the page. On the homepage a two-column hero over the code
   rain; on /account the cards. Login, guides and docs keep the layout above. */
.site { --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        display: flex; flex-direction: column; }
.site main { max-width: none; margin: 0; padding: 0; }
.bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
       gap: 1rem; height: 68px; padding: 0 clamp(16px, 4vw, 48px); border-bottom: 1px solid #161b22; }
.brand { display: flex; align-items: center; gap: 10px; border-radius: 8px; }
.brand img { display: block; height: 26px; width: auto; }
.brand img:first-child { height: 33px; }
.links { display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.75rem); font-size: .9375rem; }
.links a { color: var(--body); text-decoration: none; }
.links a:hover { color: var(--text); }
/* The last link on the homepage (Log in) is a bordered button. */
.hero-page .links a:last-child { color: var(--text); border: 1px solid var(--line-strong); border-radius: 10px;
                                 padding: 8px 16px; }
.hero-page .links a:last-child:hover { background: var(--input); }

.hero-page { min-height: 100dvh; background: linear-gradient(90deg, rgba(8, 9, 11, .92) 0%, rgba(8, 9, 11, .7) 45%,
  rgba(8, 9, 11, .35) 100%), url('/bg-code-rain.svg') center / cover fixed var(--bg); }
/* The live rain (code-rain.js) over the still one: fixed behind the page, faded in. */
.code-rain { position: fixed; inset: 0; z-index: -1; width: 100vw; height: 100dvh; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.code-rain.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .code-rain { display: none; } }
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center;
        width: 100%; max-width: 1280px; margin: 0 auto; padding: 48px 48px 64px 96px; }
.pitch { display: flex; flex-direction: column; gap: 28px; max-width: 600px; }
.hero-link { width: fit-content; border-radius: 50%; }
.hero-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.hero-mark { display: block; width: 96px; height: 96px; filter: drop-shadow(0 0 28px rgba(122, 44, 243, .55)); }
.agents { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.agents li { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; color: var(--body);
             font: 500 13px var(--mono); border: 1px solid var(--line-strong); border-radius: 999px; }
/* The agents' marks, copied from v-code-ide public/index.html (brand-*), in the app's colours. */
.agents .glyph { flex: none; width: 15px; height: 15px; display: block; }
.agents .claude .glyph { color: #d97757; }
.agents .codex .glyph { color: var(--text); }
.agents .opencode .glyph { width: 12px; color: #9aa4b2; }
.agents .cursor .glyph { color: var(--text); }
.hero h1 { margin: 0; font-size: clamp(2.75rem, 6vw, 4.25rem); line-height: 1.02; font-weight: 600;
           letter-spacing: -.025em; text-wrap: balance; }
.hero .lede { margin: 0; max-width: 520px; text-align: left; font-size: clamp(1.125rem, 2vw, 1.3125rem); text-wrap: pretty; }
.get { display: flex; flex-direction: column; gap: 10px; width: 470px; max-width: 100%; margin: 0; }
.get-label { margin: 0; color: var(--text); font-size: 1rem; font-weight: 500; }
/* The install command is the hero's action: one row, the command and a green Copy. */
.get-command { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; background: var(--input);
       border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
.get-command code { flex: 1; min-width: 0; padding: 8px 0; font: 400 12.5px/1.4 var(--mono); color: var(--text);
       white-space: nowrap; overflow-x: auto; scrollbar-width: none; user-select: all; }
.get-command button { flex: none; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
       font-size: .875rem; border-radius: 8px; box-shadow: var(--btn-lift), 0 4px 16px rgba(35, 134, 54, .3); }
.get-command button svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
/* A phone keeps the whole command on the row: Copy shows its icon alone, and keeps its name for screen readers. */
@media (max-width: 480px) {
  .get-command { padding-left: 10px; }
  .get-command code { font-size: 11px; }
  .get-command button { width: 40px; padding: 0; justify-content: center; }
  .get-copy-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.get-after { margin: 0; color: var(--dim); font-size: .8125rem; }
.get .note { margin: 0; text-align: left; }
/* Under the install: the email box, for a visitor with no computer to install on yet.
   One row like the command above it: the email, and Continue to the login code. */
.get-start { display: flex; flex-direction: column; gap: 10px; }
.get-email { display: flex; align-items: center; gap: 8px; padding: 6px; background: var(--input);
       border: 1px solid var(--line-strong); border-radius: 10px; }
.get-start label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
.get-email:focus-within { border-color: var(--accent); }
.get-email:has(input[aria-invalid="true"]) { border-color: var(--red); }
.get-email input { flex: 1; min-width: 0; width: auto; margin: 0; padding: 8px; background: none; border: 0; box-shadow: none; }
.get-email input:focus-visible { outline: none; }
.get-email button { flex: none; height: 36px; padding: 0 14px; border-radius: 8px; }
.get-start .note { margin: 0; min-height: 0; text-align: left; }
.get-start .note:empty { display: none; }
/* The live demo under the video (demo-embed.js): the app in a sandboxed iframe, in the
   phone frame the screenshot had. The script sizes .demo-screen to the frame it
   draws; until then, and on a phone until Try the demo, it holds the poster. */
.demo-stage { display: flex; flex-direction: column; align-items: center; gap: 14px;
              min-width: 0; margin: 0; }
.demo-bar, .demo-toggle { display: flex; align-items: center; gap: 4px; }
.demo-bar[hidden], .demo-close[hidden], .demo-try[hidden], .demo-max[hidden], .demo-poster[hidden] { display: none; }
/* Phone / Desktop: the agent pills' outline, the pressed one filled. */
.demo-toggle { padding: 3px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(13, 16, 20, .85); }
.demo-toggle button { padding: 4px 14px; color: var(--body); font: 500 13px var(--mono); background: none;
                      border: 0; border-radius: 999px; box-shadow: none; }
.demo-toggle button:hover:not(:disabled) { color: var(--text); background: none; }
.demo-toggle button[aria-pressed="true"], .demo-toggle button[aria-pressed="true"]:hover:not(:disabled) {
  color: var(--text); background: var(--input); box-shadow: inset 0 0 0 1px var(--line-strong); }
.demo-device { padding: 8px; background: #0d1014; border: 1px solid var(--line-strong); border-radius: 34px;
               box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 120px rgba(124, 58, 237, .18); }
.demo-screen { position: relative; width: 282px; overflow: hidden; border-radius: 26px; background: var(--bg); }
.demo-poster { display: block; width: 100%; height: auto; }
.demo-stage.framed .demo-poster { position: absolute; inset: 0; height: 100%; object-fit: contain; }
.demo-screen iframe { position: absolute; top: 0; left: 0; display: block; border: 0; background: var(--bg);
                      transform-origin: 0 0; }
/* A phone keeps the frame while the overlay is shut, so the demo is not loaded again. */
.demo-stage:not(.framed) .demo-screen iframe { display: none; }
.demo-stage[data-mode="desktop"] .demo-device { border-radius: 14px; }
.demo-stage[data-mode="desktop"] .demo-screen { border-radius: 8px; }
/* Full screen, beside the toggle on a desktop: a pill like the toggle's. */
.demo-max { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 6px 14px; color: var(--body);
            font: 500 13px var(--mono); background: rgba(13, 16, 20, .85); border: 1px solid var(--line-strong);
            border-radius: 999px; box-shadow: none; }
.demo-max:hover:not(:disabled) { color: var(--text); background: var(--input); }
.demo-max svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.demo-try { padding: 12px 26px; font-size: 1rem; box-shadow: var(--btn-lift), 0 6px 24px rgba(35, 134, 54, .35); }
/* Try the demo on a phone: the stage fills the screen, a bar on top, no frame. */
.demo-open { overflow: hidden; }
/* main is its own stacking context (z-index 1), which would hold the overlay under
   the analytics banner; while the demo is open main goes above it. */
.demo-open .site main { z-index: 20; }
/* align-self and justify-self apply to a fixed box too: stretch, or it shrinks to its content. */
.demo-stage.open { position: fixed; inset: 0; z-index: 10; align-self: stretch; justify-self: stretch; justify-content: flex-start; gap: 0; margin: 0;
                   background: var(--bg); animation: none; }
.demo-stage.open .demo-bar { justify-content: space-between; width: 100%; height: 56px; padding: 0 12px;
                             border-bottom: 1px solid #161b22; }
.demo-stage.open .demo-device { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%;
                                padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
.demo-stage.open .demo-screen { border-radius: 0; }
.demo-stage.open[data-mode="desktop"] .demo-screen { outline: 1px solid var(--line-strong); border-radius: 4px; }
.demo-close { width: 36px; height: 36px; padding: 0; color: var(--body); font-size: 1.375rem; line-height: 1;
              background: transparent; border-color: var(--line-strong); box-shadow: none; }
.demo-close:hover:not(:disabled) { color: var(--text); background: var(--input); }
.site .foot { justify-content: flex-start; align-items: center; gap: 8px 24px; max-width: none; width: 100%; margin: 0;
              padding: 16px clamp(16px, 4vw, 48px); color: var(--dim); text-align: left;
              border-top: 1px solid #161b22; background: rgba(8, 9, 11, .85); }

/* Why VCode: the reasons as a bulleted list under the demo. */
.site main { flex: 1; }
.why { width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 48px 56px 96px; }
.why h2 { margin: 0 0 28px; font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 600; letter-spacing: -.015em; }
.reasons { max-width: 760px; margin: 0; padding: 0; list-style: none; }
.reasons li { position: relative; padding: 0 0 14px 22px; color: var(--body); font-size: 1rem; line-height: 1.55; }
.reasons li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px;
                      border-radius: 50%; background: var(--accent); }
.reasons h3 { display: inline; margin: 0; color: var(--text); font-size: 1rem; font-weight: 600; }
.reasons h3::after { content: ". "; }
.reasons p { display: inline; margin: 0; }
.reasons a { color: var(--accent); }

/* The showcase video, then the live demo, between the hero and Why VCode. The
   demo is as wide as the video; demo-embed.js sizes the frame to the stage. */
.watch, .try { width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 48px 56px 96px; }
.try .demo-stage { width: 100%; max-width: 1040px; }
.watch h2, .try h2 { margin: 0 0 28px; font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 600; letter-spacing: -.015em; }
.watch video { display: block; width: 100%; max-width: 1040px; height: auto; aspect-ratio: 16 / 9; background: #000;
               border: 1px solid var(--line-strong); border-radius: 14px; }

.pricing { width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 48px 96px 96px; }
.pricing > h2 { margin: 0 0 28px; font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 600; letter-spacing: -.015em; }

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding: 40px 20px 56px; gap: 40px; }
  .pricing { padding: 8px 20px 64px; }
  .why { padding: 8px 20px 48px; }
  .watch, .try { padding: 8px 20px 48px; }
  .watch video { border-radius: 10px; }
  .pitch { gap: 22px; }
  .demo-stage:not(.framed) .demo-screen { width: min(244px, 72vw); }
  .hero-page { background-attachment: scroll; }
}
/* On a phone the big orb is left out; the one in the top bar still links to the app. */
@media (max-width: 600px) { .hero-link { display: none; } }
/* On a phone the links take a row of their own under the wordmark, so the bar
   never makes the page wider than the screen. */
@media (max-width: 600px) {
  .bar { flex-wrap: wrap; height: auto; row-gap: 10px; padding-block: 12px; }
  .links { position: relative; width: 100%; justify-content: space-between; }
  /* The account menu hangs from the row, not the avatar, which can sit at its left. */
  .links .who-wrap { position: static; }
  /* On /account and /billing the nav holds only the menu: it stays on the
     wordmark's row, top right. */
  .links:not(:has(> a)) { width: auto; }
}
@media (max-width: 480px) {
  .links { font-size: .875rem; gap: .75rem; }
  .brand img:last-child { height: 22px; }
  .brand img:first-child { height: 28px; }
}

/* /account. */
.site main.account { width: 100%; max-width: 912px; margin: 0 auto; padding: 40px 16px 3rem; }
.account .head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px;
                 margin: 0 0 24px; }
.account h1 { margin: 0; font-size: clamp(1.75rem, 5vw, 2.125rem); font-weight: 600; letter-spacing: -.015em; }
.account .actions { margin: 0; justify-content: flex-start; }
.account .actions a.button { margin: 0; }
a.button.app { display: inline-flex; align-items: center; gap: 8px; }
.account .actions[hidden] { display: none; }
button.ghost { background: transparent; border-color: var(--line-strong); color: var(--text); box-shadow: none; }
button.ghost:hover:not(:disabled) { background: var(--input); border-color: var(--line-strong); }
/* The account menu top right (auth-client.js accountMenu): the avatar button
   and the menu it opens. On docs and guides it sits in .top beside Docs. */
.who-wrap { position: relative; }
.top .who-wrap { display: inline-block; margin-left: 1.25rem; vertical-align: middle; }
button.who { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 4px 14px 4px 4px;
             background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; box-shadow: none;
             color: var(--text); font-size: .875rem; font-weight: 400; }
button.who:hover:not(:disabled), button.who[aria-expanded=true] { background: var(--input); border-color: var(--dim); }
.who .who-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
.who-wrap .menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 10; width: 264px; padding: 6px;
                  background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px;
                  box-shadow: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4); font-size: .9375rem; }
.menu[hidden] { display: none; }
.menu .as { margin: 0 0 6px; padding: 10px 12px 12px; border-bottom: 1px solid var(--line-strong); }
.menu .as small { display: block; font-size: .75rem; color: var(--dim); }
.menu .as span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 10px 12px;
                        background: transparent; border: 0; border-radius: 8px; box-shadow: none; color: var(--text);
                        font: inherit; font-weight: 400; text-align: left; text-decoration: none; }
.menu a:hover, .menu button:hover:not(:disabled) { background: var(--input); color: var(--text); text-decoration: none; }
.menu .everywhere, .menu .everywhere:hover:not(:disabled) { color: var(--red); }
/* Each row's icon is its --icon SVG as a mask, painted in the row's colour. */
.menu a::before, .menu button::before { content: ''; flex: none; width: 16px; height: 16px; background: currentColor;
                                         opacity: .75; mask: var(--icon) center / contain no-repeat; }
.menu .to-account { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='8' cy='5.5' r='2.75'/%3E%3Cpath d='M2.75 14c.6-2.6 2.7-4 5.25-4s4.65 1.4 5.25 4'/%3E%3C/svg%3E"); }
.menu .to-billing { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='1.75' y='3.25' width='12.5' height='9.5' rx='1.25'/%3E%3Cpath d='M1.75 6.5h12.5M4.5 10h2.5'/%3E%3C/svg%3E"); }
.menu .logout { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M6 2.75H3.5a.75.75 0 0 0-.75.75v9c0 .41.34.75.75.75H6'/%3E%3Cpath d='M10.5 11 13.5 8l-3-3M13.5 8H6'/%3E%3C/svg%3E"); }
.menu .everywhere { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='1.75' y='3' width='8.5' height='6.5' rx='1'/%3E%3Crect x='11' y='6' width='3.25' height='6.5' rx='.75'/%3E%3Cpath d='M4 12.5h4.5'/%3E%3C/svg%3E"); }
.menu .sep { height: 1px; margin: 6px 0; background: var(--line-strong); }
.menu .note { min-height: 0; margin: 4px 12px; text-align: left; }
.menu .note:empty { display: none; }
.avatar { display: flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px;
          border-radius: 50%; background: #2f2a45; color: var(--accent); font-size: .8125rem; font-weight: 600; }
.avatar.badge { width: 32px; height: 32px; border-radius: 0; background: none; }
.member-badge { flex: none; width: 56px; height: 56px; margin: -8px 0 -8px auto; }
#plan-billing[hidden], .member-badge[hidden] { display: none; }
.card { margin: 0 0 24px; background: var(--card); border: 1px solid var(--line-strong); border-radius: 14px;
        overflow: hidden; }
.card.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card.facts > div { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; }
.card.facts > div + div { border-left: 1px solid var(--line-strong); }
.card.facts dt { font-size: .8125rem; }
.card.facts dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* /account's Plan row: the plan and its days-left tag, then the link to /billing. */
.card.facts dd .plan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.card.facts dd a.button { margin: 0 0 0 auto; }
.card .tag { margin: 0; padding: 1px 8px; white-space: nowrap; font-size: .75rem; border: 1px solid #3b2a63; border-radius: 999px; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
             padding: 16px 22px; border-bottom: 1px solid var(--line-strong); }
.card .rows .tag { margin-left: 8px; }
.card-head h2 { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.card-head p { margin: 2px 0 0; font-size: .8125rem; color: var(--dim); }
.card-head a.button { margin: 0; }
.card .rows li { padding: 14px 22px; border-top: 1px solid #161b22; }
.card .rows li:first-child { border-top: 0; }
.card .rows .name { font-size: .9375rem; }
#boxes .name { font-family: var(--mono); }
.card .rows button.quiet:hover:not(:disabled) { border-color: var(--red); color: var(--red); background: transparent; }
.account > .note { text-align: left; }
/* /billing: the Pro card, raised like the app's Unlock card, beside the Lifetime card; each has its
   price and button, then what you get. The cards share rows (subgrid), so the buttons and lists line
   up; they keep their own width rather than the page's. One column on a phone. Then the Payments
   card with Manage billing, and its note. */
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; max-width: 820px; margin: 0 0 24px; }
.offers[hidden] { display: none; }
.offer { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; padding: 22px; background: var(--card);
        border: 1px solid var(--line-strong); border-radius: 14px; }
.offer[hidden] { display: none; }
.offer.pro { background: #11151b; border-color: #313a46;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 1px rgba(0, 0, 0, .65), 0 12px 24px rgba(0, 0, 0, .6); }
.offer-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-bottom: 20px; }
.offer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; }
.offer h2 { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.offer .price { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 0; font-size: 2.125rem; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
.offer .per { font-size: .8125rem; font-weight: 400; letter-spacing: 0; color: var(--dim); }
.offer .sub { margin: 0; font-size: .8125rem; color: var(--dim); }
.offer .sub[hidden] { display: none; }
.offer-main > button, .offer-main > a.button { margin: auto 0 0; width: 100%; }
.offer-main > button[hidden], .offer .price[hidden], .period[hidden] { display: none; }
.offer-main > a.button { justify-content: center; text-align: center; color: #fff; text-decoration: none; }
.offer-list { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line-strong); }
.offer .eyebrow { margin: 0; font: 500 .6875rem var(--mono, ui-monospace, monospace); line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ticks { margin: 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--body); }
.ticks li { position: relative; margin: 6px 0; padding-left: 22px; }
.ticks li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 10px; height: 5px; transform: rotate(-45deg);
                    border-left: 1.5px solid var(--green); border-bottom: 1.5px solid var(--green); }
/* Monthly / Yearly: the demo's Phone / Desktop switch, the saving in green on Yearly. */
.period { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--bg); }
.period button { margin: 0; padding: 4px 12px; color: var(--dim); font-size: .8125rem; font-weight: 500; background: none;
                 white-space: nowrap; border: 0; border-radius: 6px; box-shadow: none; }
.period button:hover:not(:disabled) { color: var(--text); background: none; }
.period button[aria-pressed="true"], .period button[aria-pressed="true"]:hover:not(:disabled) {
  color: var(--text); background: var(--input); box-shadow: inset 0 0 0 1px var(--line-strong); }
.period .off { margin-left: 4px; color: var(--green); font-weight: 400; }
.offers .offers-foot { grid-column: 1 / -1; margin: 4px 0 0; font-size: .75rem; line-height: 1.5; color: var(--dim); }
/* The landing page's Pricing section and the cards on /pricing, whose column is narrower. */
.pricing > h2 { margin-bottom: 8px; }
.pricing-lede { margin: 0 0 24px; color: var(--body); }
.pricing-more { margin: 0; font-size: .875rem; }
.pricing-more a { color: var(--accent); }
.guide .offers { position: relative; left: 50%; width: min(820px, calc(100vw - 32px)); margin: 1.5rem 0 0;
                transform: translateX(-50%); }
.guide .offers .ticks { margin: 0; padding: 0; }
.guide .offers .ticks li { margin: 6px 0; font-size: .8125rem; line-height: 1.5; }
.card-head button { margin: 0; }
#plan-note { margin: 0 0 24px; text-align: left; }
#plan-note:empty { display: none; }
@media (max-width: 640px) {
  .offers { grid-template-columns: minmax(0, 1fr); }
  .offer { display: flex; flex-direction: column; grid-row: auto; }
}
.account .signed-out { margin: 0 0 24px; color: var(--body); }
.account .signed-out a { color: var(--accent); }
/* Channel: Stable or Dev, drawn as the system picks on /account/add. */
.channel-picks { display: flex; gap: 8px; max-width: 360px; padding: 16px 22px 0; }
.channel-picks .os-pick { font-family: inherit; font-size: .8125rem; font-weight: 600; }
#channel-note { margin: 0; padding: 12px 22px 16px; text-align: left; }
/* How did you hear about VCode?: a plain list of radio buttons, an optional
   text box for Somewhere else, then Skip and Send. */
.heard-form { display: block; margin: 0; }
.heard-picks { display: grid; gap: 4px; padding: 14px 22px 0; }
.heard-option { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: .9375rem; color: var(--text); cursor: pointer; }
.heard-option input { color-scheme: dark; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
#heard-detail { display: block; width: calc(100% - 44px); margin: 12px 22px 0; font: inherit; font-size: .9375rem; color: var(--text);
                background: var(--input); border: 1px solid var(--line-strong); border-radius: 10px; padding: .55rem .75rem; }
#heard-detail[hidden] { display: none; }
#heard-detail:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.heard-form .buttons { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 22px 0; }
#heard-note { margin: 0; padding: 12px 22px 16px; text-align: left; }
/* The Promo code card: the heard card's text box, with Apply beside it. */
#promo-form { display: flex; gap: 8px; align-items: center; padding: 14px 22px 0; margin: 0; }
#promo-code { display: block; flex: 1; width: auto; margin: 0; font: inherit; font-size: .9375rem; color: var(--text);
              background: var(--input); border: 1px solid var(--line-strong); border-radius: 10px; padding: .55rem .75rem; text-transform: uppercase; }
#promo-code:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#promo-form .buttons { display: flex; padding: 0; }
#promo-note { margin: 0; padding: 12px 22px 16px; text-align: left; }
#promo-form[hidden] { display: none; }
/* Delete account: a red button under the cards, and the dialog that asks for the email. */
.danger-zone { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin: 8px 0 0; }
button.danger { background: #da3633; border-color: rgba(240, 246, 252, .1); color: #fff; }
button.danger:hover:not(:disabled) { background: #e5534b; }
button.danger:active:not(:disabled) { background: #b62324; }
button.danger:disabled { background: #212830; border-color: #3d444d; color: var(--body); }
.danger-zone button { padding: .75rem 1.5rem; font-size: 1rem; }
dialog.confirm { width: min(460px, calc(100% - 32px)); padding: 0; color: var(--text); background: var(--card);
                 border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 16px 48px rgba(0, 0, 0, .6); }
dialog.confirm::backdrop { background: rgba(1, 4, 9, .7); }
.confirm form { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 0; padding: 22px; }
.confirm h2 { margin: 0; font-size: 1.1875rem; font-weight: 600; }
.confirm p { margin: 0; font-size: .875rem; color: var(--body); }
.confirm label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font-size: .875rem; color: var(--body); }
.confirm label strong { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.confirm input[type=email] { flex: none; width: 100%; }
.confirm .note { margin: 0; min-height: 0; text-align: left; }
.confirm .note:empty { display: none; }
.confirm .buttons { display: flex; justify-content: flex-end; gap: 8px; }

/* Report screenshots: thumbnails under a report, and the dialog that shows one full size. */
.rows .shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rows .shot { width: 72px; height: 54px; padding: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg); cursor: zoom-in; }
.rows .shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
dialog.shot-view { max-width: calc(100% - 32px); max-height: calc(100% - 32px); padding: 12px; color: var(--text); background: var(--card);
  border: 1px solid var(--line-strong); border-radius: 12px; }
dialog.shot-view::backdrop { background: rgba(1, 4, 9, .85); }
.shot-view img { display: block; max-width: 100%; max-height: calc(100vh - 120px); margin: 0 auto; }
.shot-view .buttons { display: flex; justify-content: flex-end; margin-top: 10px; }
@media (max-width: 600px) {
  .card.facts { grid-template-columns: minmax(0, 1fr); }
  .card.facts > div + div { border-left: 0; border-top: 1px solid var(--line-strong); }
  .who .who-email { display: none; }
  button.who { padding: 4px; }
  .danger-zone { flex-wrap: nowrap; }
  .danger-zone button { flex: 1; padding: .75rem .5rem; font-size: .9375rem; white-space: nowrap; }
}

.guide img.mark { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-right: .25rem; }

/* /login: the app's login card (v-code-ide public/index.html #remote-sheet and
   styles.css), so the site and app.fezu.dev log in on the same screen. The
   forms are display: contents, so the body orders their parts: email, code
   boxes, Log in, then Re-send code once a code has gone out. */
.signin { --mono: 'JetBrains Mono', ui-monospace, monospace; --app-sans: 'Noto Sans', system-ui, sans-serif;
          max-width: 372px; padding-top: clamp(2.5rem, 14vh, 7rem); font-family: var(--app-sans); }
.card { overflow: hidden; background: #11151b; border: 1px solid #313a46; border-radius: 12px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 1px rgba(0, 0, 0, .65),
          0 12px 24px rgba(0, 0, 0, .6), 0 32px 64px rgba(0, 0, 0, .65); }
.card-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #1e242c; }
.card-head a { display: block; }
.card-logo { display: block; height: 18px; width: auto; }
.card-state { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
              font: 500 10px var(--app-sans); color: var(--dim); }
.card-dot { width: 6px; height: 6px; border-radius: 50%; background: #e3b341; }
.card-body { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.card-body form:not([hidden]) { display: contents; }
.card-title { margin: 0; font: 600 15px/1.4 var(--app-sans); color: var(--text); }
.card-hint { margin: -6px 0 0; font: 400 13px/1.5 var(--app-sans); color: var(--dim); }
.card-hint a { color: var(--accent); }
.card-body input[type=email] {
  flex: none; height: 44px; padding: 0 12px; background: var(--input); border: 1px solid var(--line-strong);
  border-radius: 8px; font: 400 14px var(--mono); color: var(--text);
}
.card-body input[type=email]:focus, .card-body input[type=email]:focus-visible { border-color: #7ee787; outline: none; }
.card-body button:not(.link) { width: 100%; height: 44px; padding: 0 16px; border-radius: 6px; font: 600 13px var(--app-sans); }
/* The 404 page's links: Home drawn as the card's buttons, Docs as its small links. */
.card-body a.button.wide { display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 100%; height: 44px; padding: 0 16px; border-radius: 6px; font: 600 13px var(--app-sans); }
.switch a { color: var(--body); text-decoration: none; font-size: .8125rem; }
.switch a:hover { color: var(--text); text-decoration: underline; }
.card-body button.secondary { background: #212830; border-color: #3d444d; color: #f0f6fc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .28); }
.card-body button.secondary:hover:not(:disabled) { background: #262c36; }
.card-body button.secondary:active:not(:disabled) { background: #1b2129; }
#send { order: 1; }
.card-body .note { order: 2; margin: 0; min-height: 0; }
.card-body .note:empty { display: none; }
.card-body .switch { margin: 0; }
/* The login code: #code lies over the eight boxes, invisible, and takes every
   tap, keystroke and paste; auth-client.js draws its digits into the boxes. */
.code-cells { position: relative; }
.code-cells input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0;
  background: transparent; border: 0; color: transparent; caret-color: transparent; font-size: 16px; outline: none; }
.code-cells input::selection { background: transparent; }
.code-row { display: flex; gap: 6px; }
.code-cell { flex: 1; min-width: 0; height: 48px; display: grid; place-items: center; background: var(--input);
  border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); font: 500 20px var(--mono); }
/* A wider gap in the middle, so the code reads as two fours. */
.code-cell:nth-child(5) { margin-left: 6px; }
.code-cells:focus-within .code-cell.active { border-color: #7ee787; box-shadow: 0 0 0 1px #7ee787 inset; }

/* /account/add: Add a workstation, on the login card, laid out as the app's
   Add screen was: system, command, Copy, then Cancel and New command. */
.card-dot.on { background: #7ee787; }
.add-page .add-how { display: flex; flex-direction: column; gap: 10px; }
.add-page .add-how[hidden], .add-page .join-command[hidden] { display: none; }
/* The system: three radio buttons, each the system's logo and name. */
.os-picks { display: flex; gap: 8px; }
.os-pick { position: relative; flex: 1; min-width: 0; width: auto; height: 44px; overflow: visible; clip-path: none; display: flex; align-items: center; justify-content: center;
  gap: 8px; background: var(--input); border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer;
  font: 600 13px var(--app-sans); color: var(--dim); }
.os-pick input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.os-pick:hover { border-color: #3d444d; color: var(--text); }
.os-pick:has(input:checked) { background: #212830; border-color: #3d444d; color: var(--text); }
.os-pick:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.counts-pick { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: flex; align-items: center; gap: 8px; font: 400 14px/1.4 var(--app-sans); color: var(--body); cursor: pointer; }
.counts-pick input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.os-icon { width: 16px; height: 16px; flex: none; }
.add-page .join-command { display: block; padding: 12px 14px; background: var(--input); border: 1px solid var(--line-strong);
  border-radius: 8px; font: 400 13px/1.6 var(--mono); color: var(--text); overflow-wrap: anywhere; user-select: all; }
.add-page .note { order: 0; text-align: left; }
.add-page .note.ok { color: var(--green); }
.add-buttons { display: flex; gap: 10px; }

/* /link: the page `v-code box link` opens, on the homepage's background (link.js).
   A column with the mark, the heading and a panel: the steps, the computer's
   name, then the one part the screen needs (email, code, Connect, the code to
   paste, Open VCode or Try again). Code boxes and the command row come from
   /login and the homepage. */
.site main.link-page { width: 100%; max-width: 460px; margin: 8vh auto 0; padding: 0 16px 48px; text-align: center; }
.link-mark { display: block; width: 72px; height: 72px; margin: 0 auto 22px; filter: drop-shadow(0 0 24px rgba(122, 44, 243, .55)); }
.link-page h1 { margin: 0 0 10px; font-size: 2rem; line-height: 1.15; font-weight: 600; text-wrap: balance; }
.link-sub { margin: 0 0 26px; color: var(--body); font-size: 1.0625rem; text-wrap: balance; }
.link-panel { padding: 22px 24px; text-align: left; background: rgba(13, 16, 20, .88); border: 1px solid var(--line-strong);
  border-radius: 14px; backdrop-filter: blur(6px); }
.link-panel[hidden] { display: none; }
.track { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.track li { display: flex; align-items: center; gap: 12px; color: var(--dim); }
.track li.done { color: var(--body); }
.track li.now { color: var(--text); font-weight: 500; }
.track i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid #3d444d; border-radius: 50%;
  font-style: normal; font-size: 12px; }
.track .done i { background: #238636; border-color: #238636; color: #fff; }
.track .now i { border-color: #a371f7; border-top-color: transparent; animation: link-spin 1s linear infinite; }
@keyframes link-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .track .now i { animation: none; border-top-color: #a371f7; } }
.link-panel .track { margin-bottom: 20px; }
.machine { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 14px; background: var(--input);
  border: 1px solid var(--line-strong); border-radius: 10px; }
.machine[hidden] { display: none; }
.machine strong { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.machine .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3fb950; }
/* The forms drop the site form layout (centred, wrapped) and the order /login gives #send. */
.link-page .act { display: grid; justify-content: stretch; gap: 10px; margin: 0; }
.link-page .act[hidden] { display: none; }
.link-page #send { order: 0; }
.link-page .act input[type=email] { width: 100%; font-size: .9375rem; padding: .7rem .8rem; }
.link-page .act > button, .link-page .act > a.button { width: 100%; margin: 0; padding: .8rem; font-size: 1rem; text-align: center; }
.link-page .small { margin: 2px 0 0; font-size: .8125rem; color: var(--dim); text-align: center; }
.link-page .small:first-child { margin: 0; }
.link-page .small a { color: var(--accent); }
.link-page .small button.link { color: var(--accent); }
.link-page .code-cell { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.link-page .code-cells:focus-within .code-cell.active { border-color: #a371f7; box-shadow: 0 0 0 1px #a371f7 inset; }
.link-page .note { margin: 10px 0 0; min-height: 0; }
.link-page .note:empty { display: none; }
.link-page .get-command code { user-select: all; }
.site header.bar[hidden] { display: none; }
.link-steps { margin: 0 0 16px; padding-left: 1.4em; color: var(--body); }
.link-steps[hidden], .link-steps li[hidden] { display: none; }
.link-steps li + li { margin-top: 12px; }
.link-steps a { color: var(--accent); }
.link-steps .get-command { margin-top: 8px; }