/* auradeck.org
 *
 * Same design system as mdown.org: soft page ground, white surfaces, one
 * accent, generous space. The accent colours are sampled from the application
 * icon and used flat. The mark itself is the only place the aurora appears:
 * repeating it behind buttons and headings competes with the logo instead of
 * supporting it.
 */


:root {
  /* Sampled from the mark: its strokes run cyan #00d0f0 through blue #0060f0,
     with violet in the plate. Flat colours, no gradient: the logo carries the
     aurora, and repeating it behind every button competes with it. */
  --brand-50:#e6f7fd; --brand-100:#c9edfa; --brand-500:#00a8f0; --brand-600:#0b7ad6; --brand-700:#5b3fd4;
  --brand-cyan:#00d0f0; --brand-violet:#6d3ef0;
  --crimson-500:#e11d48; --amber-500:#f59e0b; --emerald-500:#10b981;
  --bg:#f6f7fb; --surface:#fff; --border:#e7e9f0; --text:#0f1222; --muted:#6b7280; --muted-2:#9aa1ad;
  --ink:#0f1222; --code-bg:#f1f2f6;
  --radius-sm:10px; --radius:14px; --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,18,34,.06); --shadow:0 8px 24px rgba(15,18,34,.08); --shadow-lg:0 24px 60px rgba(15,18,34,.14);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --nav-h:68px;
}

* { box-sizing: border-box; }
html, body {
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:var(--font); -webkit-font-smoothing:antialiased; line-height:1.5;
}
/* The footer sits at the bottom of the window on a short page, and below the
   content on a long one. Without this a page with little on it left the footer
   stranded halfway down with empty ground beneath it.

   min-height on body rather than height: height would cap the page at one
   screen and let long content overflow it. `main` takes the slack, and it can
   be told to shrink because a grid or a wide table inside it would otherwise
   set a floor on the whole column. */
body { min-height:100vh; display:flex; flex-direction:column; }
body > main { flex:1 0 auto; min-width:0; }
body > footer.site { flex:none; }
a { color:inherit; text-decoration:none; }
.muted { color:var(--muted); }
.container { max-width:1120px; margin:0 auto; padding:0 24px; }

/* --- brand and buttons --------------------------------------------------- */

.brand { display:inline-flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em; font-size:20px; }
.brand .mark { width:30px; height:30px; border-radius:9px; box-shadow:var(--shadow-sm); display:block; }
.brand small { color:var(--muted-2); font-weight:600; font-size:12px; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:var(--radius-sm);
  padding:11px 18px; font-family:inherit; font-size:15px; font-weight:600;
  cursor:pointer; transition:transform .05s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--brand-600); color:#fff; box-shadow:0 6px 16px rgba(11,122,214,.28); }
.btn-primary:hover { background:var(--brand-700); box-shadow:0 8px 20px rgba(91,63,212,.36); }
.btn-ghost { background:var(--surface); color:var(--text); border-color:var(--border); }
.btn-ghost:hover { border-color:var(--brand-500); color:var(--brand-600); }
.btn-sm { padding:7px 12px; font-size:13px; }

.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--brand-50); color:var(--brand-700); }

/* --- header and footer --------------------------------------------------- */

.nav { position:sticky; top:0; z-index:30; background:rgba(246,247,251,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); }
.nav-cta { display:flex; gap:10px; align-items:center; }
.nav-link { color:var(--muted); font-weight:600; font-size:15px; padding:8px 6px; }
.nav-link:hover { color:var(--text); }

footer.site { border-top:1px solid var(--border); padding:28px 0; color:var(--muted-2); font-size:14px; }
.foot-inner { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.foot-inner a:hover { color:var(--text); }

/* --- hero ---------------------------------------------------------------- */

.hero { padding:84px 0 64px; }
.hero-grid { display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; }
.eyebrow { font-weight:700; color:var(--brand-600); letter-spacing:.06em; font-size:12.5px; text-transform:uppercase; }
h1.title { font-size:54px; line-height:1.05; letter-spacing:-.03em; font-weight:900; margin:14px 0 18px; }
.title .grad { color:var(--brand-600); }
.lede { font-size:19px; color:var(--muted); max-width:540px; margin:0; }
.hero-cta { display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.hero-note { margin-top:18px; font-size:14px; color:var(--muted-2); }

/* --- the dark command block ---------------------------------------------- */

.cmd { margin-top:30px; max-width:680px; background:#0f1222; color:#e7e9f0; border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); }
.cmd-label { font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--muted-2); text-transform:uppercase; }
.cmd-row { display:flex; align-items:center; gap:12px; margin:10px 0 0; }
.cmd-row code { flex:1; font-family:var(--mono); font-size:14.5px; color:#fff; overflow-x:auto; white-space:nowrap; }
.cmd-row .btn { background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.18); }
.cmd-row .btn:hover { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.30); color:#fff; }
.cmd-foot { margin-top:10px; font-size:12.5px; color:var(--muted-2); }
/* A command shown for a platform that has no build yet. */
.cmd-row code.dim { color:#7a8095; }
.soon {
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px;
  background:rgba(255,255,255,.10); color:#c9cee0;
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.badge-soon {
  display:inline-block; margin-left:10px; padding:3px 10px; border-radius:999px;
  background:var(--brand-50); color:var(--brand-700);
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  vertical-align:middle;
}

/* --- features ------------------------------------------------------------ */

.features { padding:54px 0; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feature { padding:26px; }
.feature .ic { width:46px; height:46px; border-radius:12px; background:var(--brand-50); color:var(--brand-600); display:grid; place-items:center; margin-bottom:14px; }
.feature .ic svg { width:24px; height:24px; display:block; }
.feature h3 { margin:0 0 6px; font-size:18px; letter-spacing:-.01em; }
.feature p { margin:0; color:var(--muted); font-size:15px; }

.section-head { text-align:center; max-width:640px; margin:0 auto 34px; }
.section-head h2 { font-size:34px; letter-spacing:-.025em; margin:0 0 10px; font-weight:800; }
.section-head p { margin:0; color:var(--muted); font-size:17px; }

/* --- the two ways panel -------------------------------------------------- */

.ways { padding:20px 0 64px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.way { padding:30px; display:flex; flex-direction:column; align-items:flex-start; }
.way > * { max-width:100%; }
.way h3 { margin:0 0 8px; font-size:22px; letter-spacing:-.02em; }
.way p { margin:0 0 18px; color:var(--muted); }
.way ul { margin:0 0 22px; padding:0; list-style:none; color:var(--muted); font-size:15px; }
.way li { padding:6px 0 6px 26px; position:relative; }
.way li::before {
  content:""; position:absolute; left:2px; top:13px; width:12px; height:7px;
  border-left:2px solid var(--brand-500); border-bottom:2px solid var(--brand-500);
  transform:rotate(-45deg);
}
.way .btn { align-self:flex-start; margin-top:auto; }

/* --- the application mock ------------------------------------------------
 * A window chassis drawn in CSS with the panes inside it, so the product
 * shot stays sharp at any size and matches whatever the app looks like now.
 */

.mock {
  border-radius:14px; background:#fff; box-shadow:var(--shadow-lg);
  border:1px solid var(--border); overflow:hidden;
}
.mock-bar { height:38px; background:#f1f2f6; border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 14px; gap:8px; }
.mock-dot { width:11px; height:11px; border-radius:50%; background:#dcdfe6; }
.mock-title { margin:0 auto; font-size:12.5px; color:var(--muted); font-weight:600; letter-spacing:-.01em; }
.mock-body { display:grid; grid-template-columns:1fr 1fr; min-height:330px; }
.mock-src { border-right:1px solid var(--border); padding:16px 14px; font-family:var(--mono); font-size:11.5px; line-height:1.75; color:#3f4351; background:#fcfcfd; overflow:hidden; }
.mock-src .ln { color:#c3c7d2; display:inline-block; width:18px; user-select:none; }
.mock-src .tok { color:var(--brand-600); font-weight:600; }
.mock-src .str { color:#b91c1c; }
.mock-doc { padding:20px 22px; overflow:hidden; }
.mock-doc h4 { margin:0 0 10px; font-size:20px; color:var(--brand-600); letter-spacing:-.02em; font-family:var(--mono); font-weight:700; }
.mock-doc h5 { margin:16px 0 8px; font-size:15px; color:var(--brand-500); font-family:var(--mono); font-weight:700; }
.mock-doc p { margin:0 0 10px; font-size:13px; color:#3f4351; font-family:var(--mono); line-height:1.7; }
.mock-doc table { border-collapse:collapse; width:100%; font-family:var(--mono); font-size:11.5px; }
.mock-doc th, .mock-doc td { border:1px solid var(--border); padding:5px 8px; text-align:left; color:#3f4351; }
.mock-doc th { background:#f4f4f5; font-weight:700; }
.mock-doc td.code { color:#b91c1c; }
.mock-pen {
  position:absolute; right:20px; bottom:20px; width:40px; height:40px; border-radius:50%;
  background:var(--brand-600);
  box-shadow:0 8px 20px rgba(11,122,214,.32); display:grid; place-items:center;
}
.mock-pen svg { width:19px; height:19px; }
.mock-wrap { position:relative; }

/* --- download page ------------------------------------------------------- */

.dl-hero { padding:72px 0 10px; }
.dl-hero h1.title { font-size:44px; margin-bottom:10px; }
.dl-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:20px; padding:26px 0 10px; }
.dl-card { padding:24px; display:flex; flex-direction:column; gap:6px; }
.dl-card .kind { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-600); }
.dl-card h3 { margin:2px 0 0; font-size:19px; letter-spacing:-.02em; }
.dl-card .meta { color:var(--muted-2); font-size:13px; font-family:var(--mono); word-break:break-all; }
/* Buttons line up across the row even when a file name wraps. */
.dl-card .btn { margin-top:auto; padding-top:11px; align-self:flex-start; }
.dl-card .meta { margin-bottom:14px; }

/* The matrix: operating system down, architecture across. It replaced a
   stack of per-platform sections that made a visitor scroll to find out
   whether their machine was covered at all. */

.matrix-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-sm); }
.matrix { width:100%; border-collapse:collapse; }
.matrix th, .matrix td { text-align:left; padding:16px 18px; border-bottom:1px solid var(--border); vertical-align:top; }
.matrix tr:last-child th, .matrix tr:last-child td { border-bottom:0; }
.matrix thead th { background:#f9fafc; font-size:13px; letter-spacing:-.01em; color:var(--text); font-weight:700; white-space:nowrap; }
.matrix thead th:first-child { width:1%; }
.arch-sub { display:block; font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-2); margin-top:3px; }
.matrix .os { width:1%; white-space:nowrap; font-size:17px; font-weight:700; letter-spacing:-.02em; padding-right:26px; }
.matrix .cell { min-width:210px; }
/* Only the stacked layout needs to repeat which cell this is. */
.cell-head { display:none; }

.dl { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:8px 12px; margin:0 0 6px; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; color:var(--text); font-size:14.5px; }
.dl:last-child { margin-bottom:0; }
.dl:hover { border-color:var(--brand-500); background:var(--brand-50); }
.dl-kind { font-weight:600; letter-spacing:-.01em; }
.dl-meta { font-size:12.5px; color:var(--muted-2); font-family:var(--mono); white-space:nowrap; }
.dl-old { color:#b45309; font-weight:700; }
.dl-none { color:var(--border); font-size:20px; }

.matrix .is-you { background:var(--brand-50); box-shadow:inset 3px 0 0 var(--brand-500); }
.matrix .is-you .dl { border-color:var(--brand-500); }
.matrix-foot { margin:14px 0 0; font-size:13.5px; color:var(--muted-2); }

/* The Gatekeeper note. Amber instead of the usual blue: it is the difference
   between an app that launches and one that says it is damaged, and somebody
   scanning the page needs to catch it before they take the .dmg. */
.note.gate { margin-top:22px; border-left-color:var(--amber-500); background:#fff8ec; color:#6b4a00; }
.note.gate strong { color:#8a5b00; }
.note.gate .gate-more { display:block; margin-top:10px; font-size:14px; }
.note.gate .cmd-row { display:flex; align-items:center; gap:12px; margin-top:12px; background:#0f1222; border-radius:var(--radius-sm); padding:10px 12px; }
.note.gate .cmd-row code { flex:1; min-width:0; font-family:var(--mono); font-size:12.5px; color:#fff; overflow-x:auto; white-space:nowrap; }
.note.gate .cmd-row .btn { flex:none; background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.18); }
.note.gate .cmd-row .btn:hover { background:rgba(255,255,255,.18); color:#fff; }

/* Below this width the columns cannot hold a file name, so each row becomes a
   pair of blocks that each say which machine they are for. */
@media (max-width:760px) {
  .matrix-wrap { overflow-x:visible; }
  .matrix, .matrix tbody, .matrix tr, .matrix td, .matrix th { display:block; }
  .matrix thead { display:none; }
  .matrix tr { border-bottom:1px solid var(--border); padding:6px 0; }
  .matrix tr:last-child { border-bottom:0; }
  .matrix th, .matrix td { border-bottom:0; padding:8px 16px; }
  .matrix .os { font-size:19px; padding-top:14px; }
  .cell-head { display:block; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); margin-bottom:7px; }
  .matrix .is-you { box-shadow:none; border-radius:var(--radius-sm); }
}

.for-you { margin-top:28px; padding:20px 22px; display:inline-block; }
.for-you-label { font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); }
.for-you-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; }
.for-you-foot { margin-top:12px; font-size:13px; color:var(--muted-2); }

.dl-h2 { font-size:22px; letter-spacing:-.02em; margin:44px 0 14px; font-weight:800; }
/* The first heading follows the hero, which already has its own space. */
.dl-h2-first { margin-top:0; }
.dl-lede { margin:0 0 18px; font-size:14.5px; max-width:66ch; }
.sums { margin-top:22px; }
.sums summary { cursor:pointer; font-weight:600; font-size:14.5px; color:var(--muted); padding:6px 0; }
.sums summary:hover { color:var(--brand-600); }
.sums .files { margin-top:12px; }

/* Present to screen readers, absent from the page. */
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.files { width:100%; border-collapse:collapse; font-size:14.5px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.files th, .files td { text-align:left; padding:12px 16px; border-bottom:1px solid var(--border); }
.files tbody tr:last-child td { border-bottom:0; }
.files th { background:#f9fafc; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.files td.name { font-family:var(--mono); font-size:13px; }
.files td.name a { color:var(--brand-600); font-weight:600; }

.note { border-left:3px solid var(--brand-500); background:var(--brand-50); color:var(--brand-700); padding:14px 18px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-size:15px; }

h2.section { font-size:26px; letter-spacing:-.02em; margin:40px 0 14px; font-weight:800; }
.prose { color:var(--muted); max-width:720px; }
.prose code, code.inline { font-family:var(--mono); font-size:.92em; background:#eceef4; padding:2px 6px; border-radius:6px; color:var(--ink); }

/* --- responsive ---------------------------------------------------------- */

@media (max-width:960px) {
  .hero { padding:56px 0 40px; }
  .hero-grid { grid-template-columns:1fr; gap:40px; }
  h1.title { font-size:40px; }
  .grid3 { grid-template-columns:1fr; }
  .grid2 { grid-template-columns:1fr; }
  .mock-body { grid-template-columns:1fr; }
  .mock-src { display:none; }
}
@media (max-width:620px) {
  /* Join stays. Somebody typing a code is on a phone, in a room, with the
     talk already starting, and hiding the one link they need was wrong. */
  .nav-link { display:none; }
  .nav-link[href*="join"] { display:inline; }
  .brand small { display:none; }
  .nav-cta .btn { padding:8px 11px; font-size:13px; white-space:nowrap; }
  h1.title { font-size:33px; }
  .lede { font-size:17px; }
  .cmd-row code { font-size:13px; }
}


/* --- documentation ------------------------------------------------------- */

.docs-main { padding:40px 0 72px; }
.docs-layout { display:grid; grid-template-columns:236px 1fr; gap:44px; align-items:start; }

.sidebar { position:sticky; top:calc(var(--nav-h) + 24px); }
.sidebar section { margin-bottom:22px; }
.sidebar h4 {
  margin:0 0 8px; font-size:11.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted-2);
}
.sidebar ul { list-style:none; margin:0; padding:0; }
.sidebar li { margin:0; }
.sidebar a {
  display:block; padding:5px 10px; border-radius:8px; font-size:14.5px;
  color:var(--muted);
}
.sidebar a:hover { color:var(--text); background:var(--surface); }
/* The current page, said with weight and colour. No rule down the left edge:
   the tint already carries it and the bar was doing the same job twice. */
.sidebar a.active {
  color:var(--brand-600); background:var(--brand-50); font-weight:600;
}

.doc-content { min-width:0; max-width:760px; }
.doc-content .breadcrumb {
  margin:0 0 6px; font-size:12.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--brand-600);
}
.doc-content h1 { font-size:38px; line-height:1.15; letter-spacing:-.03em; margin:0 0 10px; font-weight:800; }
.doc-content .page-description { margin:0 0 28px; font-size:18px; color:var(--muted); }

.markdown-body { font-size:16px; line-height:1.7; color:var(--text); }
.markdown-body h2 {
  font-size:25px; letter-spacing:-.02em; margin:38px 0 12px; font-weight:800;
  padding-top:14px; border-top:1px solid var(--border);
}
.markdown-body h3 { font-size:19px; letter-spacing:-.01em; margin:26px 0 8px; font-weight:700; }
.markdown-body p { margin:0 0 14px; }
.markdown-body ul, .markdown-body ol { margin:0 0 16px; padding-left:22px; }
.markdown-body li { margin:5px 0; }
.markdown-body a { color:var(--brand-600); font-weight:500; }
.markdown-body a:hover { text-decoration:underline; }
.markdown-body code {
  font-family:var(--mono); font-size:13.5px; background:var(--code-bg);
  padding:2px 6px; border-radius:6px;
}
.markdown-body pre {
  background:var(--ink); color:#e7e9f0; padding:16px 18px;
  border-radius:var(--radius); overflow-x:auto; margin:0 0 18px;
}
.markdown-body pre code { background:none; padding:0; color:inherit; font-size:13.5px; }
.markdown-body blockquote {
  margin:0 0 18px; padding:2px 0 2px 18px;
  border-left:3px solid var(--brand-500); color:var(--muted);
}
.markdown-body table { width:100%; border-collapse:collapse; margin:0 0 18px; font-size:15px; }
.markdown-body th, .markdown-body td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--border); }
.markdown-body th { font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); }
.markdown-body img { max-width:100%; border-radius:var(--radius-sm); }

.page-nav {
  display:flex; justify-content:space-between; gap:16px;
  margin-top:44px; padding-top:22px; border-top:1px solid var(--border); font-size:15px;
}
.page-nav a { color:var(--brand-600); font-weight:600; }
.page-nav a:hover { text-decoration:underline; }

@media (max-width:900px) {
  .docs-layout { grid-template-columns:1fr; gap:26px; }
  .sidebar { position:static; }
}

/* ---------------------------------------------------------------------------
   Accounts

   Sign-up, sign-in and the account overview. One narrow column: these are forms
   with three fields, and putting them in the page's full width makes an input
   the reader has to track across.
   --------------------------------------------------------------------------- */

/* The .card class brings the border and surface; padding is not in it, because
   most cards on the site set their own. */
.auth-card { max-width:460px; padding:26px 26px 22px; }

.field { display:flex; flex-direction:column; gap:6px; margin:0 0 18px; }
.field label { font-size:13px; font-weight:600; color:var(--muted-2); }

.field input[type="text"],
.field input[type="email"],
.field input[type="password"] {
  width:100%; padding:10px 12px; font:inherit; font-size:15px;
  color:var(--text); background:var(--bg);
  border:1px solid var(--border); border-radius:var(--radius-sm);
}
.field input:focus { outline:none; border-color:var(--brand-500); }

/* Django's password rules arrive as a <ul> inside the help text, so this has to
   be a block or the list escapes the field and sets its own width. */
.field-help { display:block; font-size:13px; color:var(--muted); }
.field-help ul { margin:4px 0 0; padding-left:18px; }
.field-help li { margin:2px 0; }
/* Above the input, not below it: an error under a field that is already the
   last thing on a small screen scrolls out of view exactly when it matters. */
.field-error { font-size:13px; font-weight:600; color:#c23049; }

.field input[type="url"],
.field textarea, .field select {
  width:100%; padding:10px 12px; font:inherit; font-size:15px;
  color:var(--text); background:var(--bg);
  border:1px solid var(--border); border-radius:var(--radius-sm);
}
.field textarea { resize:vertical; min-height:110px; line-height:1.6; }
.field textarea:focus, .field select:focus { outline:none; border-color:var(--brand-500); }
.field input[type="file"] { font-size:14px; color:var(--muted); }

/* A checkbox reads as one line, so it lays out across instead of down, with
   the label beside the box. */
.field.check { display:grid; grid-template-columns:auto 1fr; gap:4px 10px; align-items:center; }
.field.check input { margin:0; width:17px; height:17px; accent-color:var(--brand-600); }
.field.check label { font-size:15px; font-weight:600; color:var(--text); }
.field.check .field-help { grid-column:2; }

.back { font-size:14px; font-weight:600; color:var(--muted); }
.back:hover { color:var(--brand-600); }
.edit-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:4px; }

/* ---------------------------------------------------------------------------
   Profiles

   A published deck can credit its author and link here, so this is the one page
   on the site somebody else's writing and somebody else's picture appear on.
   The accent is theirs to pick, which is why it is a class on a container and
   a pair of custom properties. A colour written into each rule could not move.
   --------------------------------------------------------------------------- */

.accent-blue   { --accent:#0b7ad6; --accent-2:#00d0f0; }
.accent-violet { --accent:#6d3ef0; --accent-2:#b07cff; }
.accent-teal   { --accent:#0d9488; --accent-2:#5eead4; }
.accent-amber  { --accent:#d97706; --accent-2:#fcd34d; }
.accent-rose   { --accent:#e11d48; --accent-2:#fda4af; }
.accent-slate  { --accent:#475569; --accent-2:#94a3b8; }

.avatar {
  display:grid; place-items:center; flex:none;
  width:52px; height:52px; border-radius:50%; overflow:hidden;
  background:linear-gradient(140deg, var(--accent,var(--brand-600)), var(--accent-2,var(--brand-cyan)));
  color:#fff; font-weight:800; letter-spacing:-.02em; font-size:19px;
  box-shadow:var(--shadow-sm);
}
.avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.avatar-lg { width:84px; height:84px; font-size:30px; }
.avatar-xl { width:112px; height:112px; font-size:40px; border:4px solid var(--surface); }

.prof-band { height:150px; background:linear-gradient(120deg, var(--accent,var(--brand-600)), var(--accent-2,var(--brand-cyan))); }
.prof-body { max-width:680px; padding-bottom:80px; margin-top:-56px; }
.prof-name { font-size:32px; letter-spacing:-.025em; margin:18px 0 2px; font-weight:800; }
.prof-handle { margin:0; color:var(--muted-2); font-family:var(--mono); font-size:14px; }
.prof-bio { margin-top:18px; font-size:16.5px; color:var(--muted); }
.prof-bio p { margin:0 0 12px; }
.prof-meta { display:flex; gap:18px; flex-wrap:wrap; margin:18px 0 0; font-size:14px; color:var(--muted-2); }
.prof-meta a { color:var(--accent,var(--brand-600)); font-weight:600; }
.prof-foot { margin-top:44px; padding-top:26px; border-top:1px solid var(--border); display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.prof-foot p { margin:0; font-size:14px; max-width:44ch; }

.pic-row { display:flex; gap:22px; align-items:flex-start; margin-bottom:24px; }
.pic-side { display:flex; flex-direction:column; gap:6px; min-width:0; }
.pic-side label { font-size:13px; font-weight:600; color:var(--muted-2); }

/* ---------------------------------------------------------------------------
   The account dashboard

   Somebody opening this has one of a handful of separate errands: check the
   tier, change the name, revoke a laptop, find the streaming settings. Cards
   that can be scanned, instead of a column of full-width panels each spending
   a row to say one line.
   --------------------------------------------------------------------------- */

.acct-head { display:flex; align-items:center; gap:20px; margin-bottom:30px; flex-wrap:wrap; }
.acct-who { flex:1; min-width:200px; }
.acct-who h1 { font-size:30px; letter-spacing:-.025em; margin:0 0 6px; font-weight:800; }
.acct-who p { margin:0; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.acct-handle { font-family:var(--mono); font-size:13px; color:var(--muted-2); }
.acct-handle:hover { color:var(--brand-600); }
.acct-private { font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); }
.acct-out { margin:0; }

.tier { display:inline-flex; align-items:center; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 11px; border-radius:999px; background:var(--brand-50); color:var(--brand-700); }
.tier-max { background:linear-gradient(120deg,var(--brand-600),var(--brand-violet)); color:#fff; }
.tier-on { background:#dcfce7; color:#15803d; }
.tier-off { background:var(--code-bg); color:var(--muted); }

/* Cards stretch to the tallest in their row, and .tile-go pins the button to
   the bottom, so the buttons line up across a row whose cards say different
   amounts. */
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); gap:20px; }
.tile { padding:24px; display:flex; flex-direction:column; }
.tile-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.tile-top h2 { font-size:17px; letter-spacing:-.02em; margin:0; }
.tile p { margin:0 0 18px; font-size:14.5px; }
/* Pinned to the bottom so buttons line up across a row whose cards say
   different amounts. */
.tile-go { margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; align-self:flex-start; }

/* Plans. A tier that is announced but not on sale is dimmed and still listed:
   the point of listing it is to say it is coming. A card that looks buyable
   and is not wastes somebody's click. */
.plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:20px; }
.plan { padding:26px; display:flex; flex-direction:column; }
.plan-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.plan-price { font-size:30px; letter-spacing:-.03em; margin:8px 0 2px; font-weight:800; }
.plan-blurb { margin:0 0 16px; font-size:14.5px; }
.plan-features { list-style:none; margin:0 0 22px; padding:0; font-size:14.5px; color:var(--muted); }
.plan-features li { padding:6px 0 6px 24px; position:relative; }
.plan-features li::before { content:"✓"; position:absolute; left:0; color:var(--brand-600); font-weight:800; }
.plan-go { margin-top:auto; }
.plan-wait { font-size:13.5px; color:var(--muted-2); }
.plan-current { border-color:var(--brand-500); box-shadow:0 0 0 1px var(--brand-500), var(--shadow-sm); }
/* Dimmed, and still readable. The features are the reason the card is here. */
.plan-soon { background:#fbfcfe; }
.plan-soon .plan-price, .plan-soon .eyebrow { color:var(--muted-2); }
.plan-soon .plan-features li::before { color:var(--muted-2); }

.entl { list-style:none; margin:0 0 18px; padding:0; font-size:14px; }
.entl li { display:flex; justify-content:space-between; gap:14px; padding:6px 0; border-bottom:1px solid var(--border); }
.entl li:last-child { border-bottom:0; }
.entl code { font-family:var(--mono); font-size:12.5px; color:var(--muted); }

/* The signed-in name, sitting where the Download button used to. Kept quieter
   than a call to action: it is a way back to the account, not an invitation. */
.nav-who { font-size:13px; color:var(--muted); max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-who:hover { color:var(--brand-600); }

/* ---------------------------------------------------------------------------
   Streaming addresses

   A destination has two, and they must never be mistaken for each other: one
   goes in the invitation, the other is what lets a machine present. Same page,
   deliberately different colour, each with a label saying who it is for. The
   failure this guards against is somebody pasting the wrong box into an email.
   --------------------------------------------------------------------------- */

.addr { margin:12px 0; padding:10px 12px; border-radius:var(--radius-sm); border:1px solid var(--border); }
.addr code { font-size:14px; word-break:break-all; }
.addr-label { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }

.addr-audience { background:var(--surface); }
.addr-audience .addr-label { color:var(--brand-600); }

/* Warm, and not the same colour as anything else on the site, so it reads as
   "this one is different" before a word of it is read. */
.addr-private { background:#fff8ec; border-color:#e0a83c; }
.addr-private .addr-label { color:#8a5b00; }
.addr-warn { margin:8px 0 0; font-size:13px; color:#8a5b00; }

/* The address and its buttons on one line, with the address free to wrap and
   the buttons not. Each destination used to spend most of a screen, largely on
   buttons that had each wrapped onto a line of their own. */
.addr-row { display:flex; align-items:center; gap:10px; }
.addr-row code { flex:1; min-width:0; }
.addr-row .btn { flex:none; }

.dest { padding:20px 22px; margin-bottom:16px; }
.dest-top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.dest-top h2 { margin:0; font-size:19px; letter-spacing:-.02em; }
.dest-tags { display:flex; gap:8px; flex-wrap:wrap; }
.dest-when { margin:4px 0 0; font-size:13.5px; }
.dest-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.dest-actions form { margin:0; display:inline; }
.dest-retire:hover { border-color:#c23049; color:#c23049; }
/* Retired, and still readable: the record of what was broadcast is the reason
   it is kept. */
.dest-past { background:#fbfcfe; }
.dest-past .dest-top h2 { color:var(--muted); }

.newdest { padding:0 22px; margin-bottom:26px; }
.newdest summary { cursor:pointer; font-weight:600; padding:16px 0; color:var(--brand-600); }
.newdest form { padding:0 0 20px; max-width:420px; }
.past { margin-top:26px; }
.past summary { cursor:pointer; font-weight:600; font-size:14.5px; color:var(--muted); padding:8px 0 16px; }
.past summary:hover { color:var(--brand-600); }

/* The live slide.

   In the page flow the stage is a box, and it takes the deck's own shape:
   `--stage-aspect` is set from the deck when it arrives, and 16:9 is only the
   value used before anything has been received. */
.stage {
  width:100%;
  aspect-ratio: var(--stage-aspect, 16/9);
  background:#000; border-radius:var(--radius); overflow:hidden;
}
.stage[hidden] { display:none; }
.stage-frame { width:100%; height:100%; border:0; display:block; }

/* ---------------------------------------------------------------------------
   The live slide, and filling the screen with it

   A talk being watched is not a section of a marketing page. In the flow it
   keeps the site's shape; in fullscreen the slide takes everything and the
   controls get out of the way.
   --------------------------------------------------------------------------- */

.stage-wrap[hidden] { display:none; }

.stage-bar {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:10px; font-size:13px; color:var(--muted);
}
.stage-count { font-variant-numeric:tabular-nums; }

/* Fullscreen gives the slide the whole device, at the device's own shape.
   Slides lay themselves out in `vmin`, so a phone held upright gets a slide
   built for a phone held upright and a projector gets one built for a
   projector. Everybody watching sees the talk fitted to what they are holding,
   which is the point of sending HTML instead of pictures.

   This used to letterbox everything to 16:9, so a deck that had never chosen a
   shape was boxed into one on every screen that was not that shape. */
.stage-wrap:fullscreen { background:#000; display:flex; align-items:center; justify-content:center; }
.stage-wrap:fullscreen .stage {
  width:100%; height:100%; max-width:none; aspect-ratio:auto; border-radius:0;
}
.stage-wrap:fullscreen .stage-bar { display:none; }

.stage-wrap:-webkit-full-screen { background:#000; display:flex; align-items:center; justify-content:center; }
.stage-wrap:-webkit-full-screen .stage {
  width:100%; height:100%; max-width:none; aspect-ratio:auto; border-radius:0;
}
.stage-wrap:-webkit-full-screen .stage-bar { display:none; }

/* A deck whose author fixed its shape is the one case that keeps bars. Fixed
   means "hold this layout", which was a deliberate choice, and stretching it to
   a screen it was not laid out for would throw that choice away. It is fitted
   to the screen at its own ratio, which is not always 16:9. */
.stage-wrap:fullscreen .stage.is-fixed,
.stage-wrap:-webkit-full-screen .stage.is-fixed {
  width:100%; height:auto;
  aspect-ratio: var(--stage-aspect, 16/9);
  max-width: calc(100vh * var(--stage-ratio, 1.7778));
}

/* An offer to open the talk in the app, for the few who have it. Quiet on
   purpose: most visitors have nothing installed, and this must not read like
   something they need to act on before they can watch. */
.open-in-app { margin:0 0 14px; font-size:13.5px; color:var(--muted); }
.open-in-app[hidden] { display:none; }
.open-in-app a { color:var(--brand-600); font-weight:600; }
.open-in-app a:hover { text-decoration:underline; }