@font-face {
  font-family: "GoogleSans";
  src: url("fonts/GoogleSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "GoogleSans";
  src: url("fonts/GoogleSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --bg: #000000;
  --text: #ffffff;
  --body: #a8a8a8;
  --faint: #6f6f6f;
  --border: #2a2a2a;
  --raised: #111111;
  --surface-top: rgba(255, 255, 255, 0.14);
  --surface-bottom: rgba(255, 255, 255, 0.04);
  --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: "GoogleSans", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1120px, calc(100% - 48px)); margin: auto; }
.narrow { width: min(720px, calc(100% - 48px)); margin: auto; }
svg.i { width: 1em; height: 1em; flex: none; }

/* ---------- Top bar ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.top.scrolled { border-bottom-color: #1a1a1a; }
.top .wrap { display: flex; align-items: center; gap: 24px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 17px; }
.brand img { width: 28px; height: 28px; }
.top .brand { margin-right: auto; }
/* The repo on GitHub, at the bar's right end on every page */
.top .gh { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--body); transition: color .2s; }
.top .gh:hover { color: var(--text); }
/* The blog, just before it on every page */
.top .bar-link { font-size: 14px; color: var(--body); transition: color .2s; }
.top .bar-link:hover, .top .bar-link[aria-current] { color: var(--text); }
.top .gh svg { width: 16px; height: 16px; flex: none; }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(to bottom, var(--surface-top), var(--surface-bottom));
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  transition: opacity .2s;
  white-space: nowrap;
}
.button:hover { opacity: .75; }

/* ---------- Hero ---------- */
.hero { text-align: center; padding: 56px 0 0; }
h1 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.025em;
  font-size: clamp(2.3rem, 6vw, 3.75rem);
  line-height: 1.08;
}
.lede {
  max-width: 560px;
  margin: 20px auto 32px;
  color: var(--body);
  font-size: 18px;
  line-height: 1.55;
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 28px 0 0; color: var(--faint); font-size: 13.5px; }
.pills span { display: inline-flex; align-items: center; gap: 6px; }
.pills svg { width: 14px; height: 14px; }
.hero-stage { position: relative; margin: 48px auto 0; }
.hero-stage::before {
  content: "";
  position: absolute;
  inset: 8% 10% auto;
  height: 70%;
  background: radial-gradient(closest-side, rgba(240, 163, 107, 0.18), transparent);
  filter: blur(40px);
  z-index: -1;
}

/* ---------- Sections ---------- */
section.feature { padding: 140px 0 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--body); font-size: 14px; margin: 0 0 14px; }
.eyebrow svg { width: 16px; height: 16px; }
h2 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.12;
}
h3 { margin: 0 0 6px; font-weight: 500; font-size: 17px; letter-spacing: -0.01em; }
.copy p { color: var(--body); font-size: 17px; line-height: 1.6; margin: 16px 0 0; }
.points { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.points li { display: flex; gap: 12px; color: var(--body); font-size: 15.5px; line-height: 1.5; }
.points li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background: #555;
}
.points b { color: var(--text); font-weight: 500; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.flip .copy { order: 2; }
.center-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.center-head p { color: var(--body); font-size: 17px; line-height: 1.6; margin: 16px 0 0; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- The app's themes (assets/themes.json, standard contrast) ---------- */
.th-default {
  --w-bg: #121214;
  --w-list: #121214;
  --w-rail: #09090B;
  --w-line: #2d2e30;
  --w-border: #434446;
  --w-raise: #1D1D1F;
  --w-strong: #29292C;
  --w-pop: #38383B;
  --w-sunk: #09090B;
  --w-sel: rgba(141, 184, 245, 0.2);
  --w-text: #DEDEE0;
  --w-muted: #B1B2B4;
  --w-faint: #959698;
  --w-accent: #8DB8F5;
  --w-accent-soft: #263244;
  --w-on-accent-soft: #AFD0FF;
  --w-bubble: #1D1D1F;
  --w-mine: #253244;
  --w-success: #5DC879;
  --w-warning: #E6A024;
  --w-danger: #FF8D85;
  --w-link: #8DB8F5;
  --w-action: #8DB8F5;
  --w-success-soft: #132517;
  --w-on-success-soft: #9EE1AB;
  --w-warning-soft: #2A1D0B;
  --w-on-warning-soft: #F4C582;
}
.th-default-light {
  --w-bg: #E3E2DF;
  --w-list: #F6F5F2;
  --w-rail: #EFEEEB;
  --w-line: #dedddb;
  --w-border: #CBCAC8;
  --w-raise: #EBEAE7;
  --w-strong: #E1E0DD;
  --w-pop: #FDFCF9;
  --w-sunk: #EFEEEB;
  --w-sel: rgba(43, 91, 168, 0.14);
  --w-text: #2A2927;
  --w-muted: #4E4D4B;
  --w-faint: #646361;
  --w-accent: #2B5BA8;
  --w-accent-soft: #CEDEF6;
  --w-on-accent-soft: #17396E;
  --w-bubble: #EBEAE7;
  --w-mine: #D1DCEB;
  --w-success: #007332;
  --w-warning: #865900;
  --w-danger: #B02A2D;
  --w-link: #2B5BA8;
  --w-action: #2B5BA8;
  --w-success-soft: #E1EEE3;
  --w-on-success-soft: #00481C;
  --w-warning-soft: #F2E8DB;
  --w-on-warning-soft: #513400;
}
.th-green {
  --w-bg: #1B2821;
  --w-list: #1B2821;
  --w-rail: #0E1F16;
  --w-line: #2a4235;
  --w-border: #365845;
  --w-raise: #21372A;
  --w-strong: #2A4536;
  --w-pop: #354D40;
  --w-sunk: #0E1F16;
  --w-sel: rgba(105, 214, 154, 0.2);
  --w-text: #E6E3E5;
  --w-muted: #B7B6B7;
  --w-faint: #9C9A9B;
  --w-accent: #69D69A;
  --w-accent-soft: #274F39;
  --w-on-accent-soft: #A3F1C2;
  --w-bubble: #21372A;
  --w-mine: #1F4933;
  --w-success: #8AC157;
  --w-warning: #FA9A47;
  --w-danger: #FF928A;
  --w-link: #69D69A;
  --w-action: #E3B34E;
  --w-success-soft: #2D3724;
  --w-on-success-soft: #B6DC97;
  --w-warning-soft: #422F21;
  --w-on-warning-soft: #FFBE8D;
}

.th-ocean {
  --w-bg: #17212B;
  --w-list: #17212B;
  --w-rail: #0B1823;
  --w-line: #293a49;
  --w-border: #374F62;
  --w-raise: #1E2E3C;
  --w-strong: #273B4C;
  --w-pop: #374858;
  --w-sunk: #0B1823;
  --w-sel: rgba(112, 185, 238, 0.2);
  --w-text: #E1DEE1;
  --w-muted: #B6B5B6;
  --w-faint: #9A999A;
  --w-accent: #70B9EE;
  --w-accent-soft: #27445A;
  --w-on-accent-soft: #ADDCFF;
  --w-bubble: #1E2E3C;
  --w-mine: #26435B;
  --w-success: #5DC879;
  --w-warning: #E9A329;
  --w-danger: #FF928A;
  --w-link: #70B9EE;
  --w-action: #5BD0D6;
  --w-success-soft: #213425;
  --w-on-success-soft: #9EE1AB;
  --w-warning-soft: #392C19;
  --w-on-warning-soft: #F4C582;
}

.th-ember {
  --w-bg: #291E1A;
  --w-list: #291E1A;
  --w-rail: #21140E;
  --w-line: #48352a;
  --w-border: #624738;
  --w-raise: #3A2820;
  --w-strong: #4A3429;
  --w-pop: #574239;
  --w-sunk: #21140E;
  --w-sel: rgba(243, 156, 102, 0.2);
  --w-text: #E1DFE1;
  --w-muted: #B6B5B6;
  --w-faint: #9A999A;
  --w-accent: #F39C66;
  --w-accent-soft: #593927;
  --w-on-accent-soft: #FFCAAA;
  --w-bubble: #3A2820;
  --w-mine: #5A3825;
  --w-success: #5DC879;
  --w-warning: #E6A525;
  --w-danger: #FF928A;
  --w-link: #F09A64;
  --w-action: #F39C66;
  --w-success-soft: #223526;
  --w-on-success-soft: #9EE1AB;
  --w-warning-soft: #3A2D1A;
  --w-on-warning-soft: #F2C681;
}

.th-iris {
  --w-bg: #1D1929;
  --w-list: #1D1929;
  --w-rail: #140F22;
  --w-line: #37314c;
  --w-border: #4C4468;
  --w-raise: #29233C;
  --w-strong: #362F4D;
  --w-pop: #453F5B;
  --w-sunk: #140F22;
  --w-sel: rgba(185, 164, 255, 0.2);
  --w-text: #E0DDE0;
  --w-muted: #B5B3B5;
  --w-faint: #999899;
  --w-accent: #B9A4FF;
  --w-accent-soft: #3F345E;
  --w-on-accent-soft: #D0C5FF;
  --w-bubble: #29233C;
  --w-mine: #3F335F;
  --w-success: #5DC879;
  --w-warning: #E9A329;
  --w-danger: #FF928A;
  --w-link: #AA91F3;
  --w-action: #F099D8;
  --w-success-soft: #1D2F21;
  --w-on-success-soft: #9EE1AB;
  --w-warning-soft: #352815;
  --w-on-warning-soft: #F4C582;
}

/* ---------- The app window (mock) ---------- */
.win {
  container-type: inline-size;
  position: relative;
  display: flex;
  /* macOS's window corner, concentric with the sidebar card: the card's 18 px plus its 6 px inset. */
  border-radius: 24px;
  border: 1px solid var(--w-border);
  background: var(--w-bg);
  color: var(--w-text);
  font-family: var(--sys);
  font-size: 13.5px;
  line-height: 1.45;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  user-select: none;
}
/* Only the hero window changes theme, so only it fades between them. */
.hero-win, .hero-win * { transition: background-color .35s, border-color .35s, color .35s; }

/* Sizes below are the desktop app's own (src/theme.rs space/radius, at the default 15 px text: body 15/23,
   callout 15/21, headline 15/21 semibold, subhead 14/19, footnote 13/18, caption and micro 12/16). */

/* side rail: app.rs render_sidebar, a 96 px column holding an 84 px card */
.rail {
  flex: none;
  width: 84px;
  margin: 6px;
  padding: 40px 4px 8px;
  border-radius: 18px;
  background: var(--w-rail);
  border: 1px solid color-mix(in srgb, var(--w-border) 60%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}
/* The traffic lights sit where main.rs puts them, their corner 18 px in and 20 px down from the window's (the card
   starts 6 px in, past its 1 px border): 14 px buttons, 9 px apart, as macOS draws them. */
.lights { position: absolute; top: 13px; left: 11px; display: flex; gap: 9px; }
.lights i { width: 14px; height: 14px; border-radius: 50%; background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }
.rail .me { width: 44px; height: 44px; margin: 2px 0 10px; object-fit: contain; }
.tab {
  width: 100%;
  padding: 8px 0;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--w-muted);
  font-size: 12px;
  line-height: 15px;
}
.tab svg, .tab .mask { width: 24px; height: 24px; }
.tab.on { background: var(--w-sel); color: var(--w-accent); font-weight: 600; }
/* Settings at the rail's foot (app.rs render_sidebar) */
.rail .tab.foot { margin-top: auto; }

/* the Agents list: agents.rs render_list and list_row */
.list {
  flex: none;
  width: 280px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--w-strong);
  background: var(--w-list);
}
.list-head { flex: none; height: 44px; padding: 0 8px 0 16px; display: flex; align-items: center; justify-content: space-between; font-size: 17px; line-height: 24px; font-weight: 700; }
/* its search and new-agent buttons (agents.rs: small icon buttons, 2 px apart): 28 px, a 15 px glyph in the text colour */
.lh-acts { display: flex; gap: 2px; }
.list-head .ib { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--w-text); }
.list-head .ib svg { width: 15px; height: 15px; }
.list-rows { padding: 0 8px 12px; }
.row { display: flex; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 14px; }
.row.on { background: var(--w-sel); }
.row .av { width: 40px; height: 40px; }
.row .tx { flex: 1; min-width: 0; }
.row .nm { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 15px; line-height: 21px; }
.row .nm > span:first-child { white-space: nowrap; }
.row .nm small { font-weight: 400; color: var(--w-faint); font-size: 12px; line-height: 16px; flex: none; }
.row .last { color: var(--w-muted); font-size: 13px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .last.work { color: var(--w-link); display: flex; align-items: center; gap: 4px; }
.row .last.work svg { flex: none; width: 13px; height: 13px; animation: spin 2.4s linear infinite; }
.row .badge { flex: none; font-size: 11px; line-height: 15px; padding: 0 6px; border-radius: 999px; background: var(--w-accent-soft); color: var(--w-on-accent-soft); margin-left: 8px; font-weight: 600; }
@keyframes spin { to { transform: rotate(360deg); } }

/* pictures: agents.rs agent_picture, the animal at 86% on a round tile of its colour */
.av {
  flex: none;
  border-radius: 50%;
  background: var(--c, var(--w-strong));
  overflow: hidden;
  display: grid;
  place-items: center;
}
.av img { width: 86%; height: 86%; object-fit: contain; }

/* the chat: agents.rs render_group's header, conversation.rs rows and composer */
.pane { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--w-bg); }
.pane-head { flex: none; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px 0 12px; font-weight: 600; font-size: 15px; line-height: 21px; }
.pane-head .av { width: 32px; height: 32px; }

.pane-head .end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.stack { display: flex; }
.stack .av { width: 28px; height: 28px; border: 2px solid var(--w-bg); }
.stack .av + .av { margin-left: -8px; }
.msgs { flex: 1; min-height: 0; padding: 0 44px 0 20px; display: flex; flex-direction: column; overflow: hidden; }
.msgs > * { flex: none; }
.msg { display: flex; flex-direction: column; align-items: flex-start; padding-top: 12px; }
.msg.mine { align-items: flex-end; }
.who { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--w-muted); margin: 0 0 4px; }
.who .av { width: 22px; height: 22px; }
.bubble {
  max-width: 86%;
  padding: 7px 12px;
  border-radius: 16px;
  background: var(--w-bubble);
  border: 1px solid var(--w-border);
  font-size: 15px;
  line-height: 23px;
}
.bubble.mine { background: var(--w-mine); border: 0; }
.mention { color: var(--w-accent); font-weight: 600; }
/* a day's mark: 8 px above and below, the chip 12 x 2 */
.divider { align-self: center; margin: 8px 0; font-size: 12px; line-height: 16px; color: var(--w-muted); background: var(--w-raise); padding: 2px 12px; border-radius: 999px; }


/* The composer: 32 px under the last message (the list's bottom spacer), 20 px in from the sides, 16 px off the
   bottom; a 36 px row (4 px room around 28 px buttons), rounded 20, surface, border and a large shadow. */
.composer {
  flex: none;
  margin: 32px 20px 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  padding: 4px;
  border: 1px solid var(--w-border);
  border-radius: 20px;
  color: var(--w-muted);
  background: var(--w-raise);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  font-size: 15px;
}
.composer > svg { width: 28px; height: 28px; padding: 6.5px; flex: none; color: var(--w-text); }
.composer .ph { flex: 1; padding: 0 4px; }
.composer .pick { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px; font-size: 13px; color: var(--w-muted); }
.composer .pick[hidden] { display: none; }
.composer .pick svg { width: 12px; height: 12px; color: var(--w-muted); }

/* small cards inside chats */

/* ---------- Hero mock sizing ---------- */
.win.hero-win { height: 680px; }
.hero-win .msgs { justify-content: flex-end; }

/* ---------- Agent editor mock ---------- */

/* ---------- Coding mock ---------- */
/* ui.rs sub_page_header: 44 high, 8 in, the back button, the title (headline) and quieter words after it (subhead). */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid var(--w-line);
  background: var(--w-raise);
  color: var(--w-text);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}

/* A coding task's thread (coding_thread.rs): repo, branch, Mac and model under the bar; then the owner's bubbles on the
   right and the tool's on the left (28 px pictures at a run's foot), quiet step rows on the tool's side, proof above a
   reply. Entries 10 apart in the 20 px page column. */

.float-card {
  position: absolute;
  font-family: var(--sys);
  font-size: 13px;
  color: var(--w-text);
  background: var(--w-pop);
  border: 1px solid var(--w-line);
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7);
  padding: 14px;
}

.with-float { position: relative; }

/* ---------- Feed mock ---------- */
/* ui.rs page_header: 20 above the large title (25.5/32 bold), 8 under it; pages 20 in from the sides. */
.feed { flex: 1; min-width: 0; padding: 0 20px; }
.feed-inner { max-width: 560px; margin: 0 auto; }
.feed-title { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 8px; font-size: 25.5px; line-height: 32px; font-weight: 700; }
.feed-title span { display: flex; gap: 16px; color: var(--w-muted); }
.feed-title svg { width: 17px; height: 17px; }
.topics { display: flex; gap: 14px; margin-top: 16px; } /* feed.rs: LG under the header */
.topic { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11.5px; color: var(--w-muted); width: 58px; }
.topic .ring { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--w-line); display: grid; place-items: center; overflow: hidden; background: var(--w-raise); font-weight: 600; color: var(--w-text); }
.topic.on .ring { border-color: var(--w-accent); }
.topic.on { color: var(--w-text); font-weight: 600; }
.topic .ring svg { width: 20px; height: 20px; }

.updated { color: var(--w-faint); font-size: 12px; margin: 8px 0 14px; }
.post-src { display: flex; align-items: center; gap: 9px; font-weight: 600; margin-bottom: 9px; }
.post-src .av { width: 26px; height: 26px; }
.post-src small { margin-left: auto; color: var(--w-faint); font-weight: 400; }
.post-art {
  height: 220px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 85% 10%, #ffcf8a 0%, rgba(255, 207, 138, 0) 45%),
    radial-gradient(80% 70% at 10% 90%, #3d6bd8 0%, rgba(61, 107, 216, 0) 60%),
    linear-gradient(160deg, #f28b54, #8a3f8f 60%, #23214f);
}

.post-acts { display: flex; align-items: center; gap: 14px; margin: 10px 0 8px; color: var(--w-muted); }
.post-acts svg { width: 17px; height: 17px; }
.post-acts .btn { margin-left: auto; border-radius: 999px; }
.post-acts .btn .av { width: 16px; height: 16px; }

/* ---------- Notes mock ---------- */
.notes { flex: 1; min-width: 0; padding: 0 20px; }
.notes-title { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 8px; margin-bottom: 8px; font-size: 25.5px; line-height: 32px; font-weight: 700; }
.notes-title span { display: flex; gap: 16px; color: var(--w-muted); }
.notes-title svg { width: 17px; height: 17px; }
.note { padding: 12px 12px 13px; border-radius: 12px; margin: 0 -12px; }
.note-h { display: flex; align-items: baseline; gap: 10px; font-weight: 650; font-size: 14.5px; }
.note-h small { margin-left: auto; color: var(--w-faint); font-weight: 400; font-size: 12px; white-space: nowrap; }
.note p { margin: 4px 0 0; color: var(--w-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tags span { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--w-raise); border: 1px solid var(--w-line); color: var(--w-muted); }
.share {
  width: 220px;
  right: 40px;
  top: 150px;
  padding: 6px;
  background: #ffffff;
  border-color: #dedad2;
  color: #1d1d1f;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}
.share .mi { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 7px; }
.share .mi.on { background: #e9ecfd; }
.share .mi .av { width: 22px; height: 22px; }

/* ---------- Artifact mock ---------- */
.art-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.art-head { flex: none; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 8px; }
.art-head > svg { width: 24px; height: 24px; padding: 4px; flex: none; color: var(--w-muted); }
.art-head b { font-size: 15px; line-height: 21px; font-weight: 600; padding-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-head .tools { margin-left: auto; display: flex; align-items: center; gap: 14px; color: var(--w-muted); }
.art-head .tools svg { width: 16px; height: 16px; }
.ver { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--w-line); color: var(--w-text); font-size: 12.5px; }
.ver svg { width: 13px !important; height: 13px !important; color: var(--w-muted); }
.art-page { flex: 1; margin: 0 14px 14px; border-radius: 12px; background: #0f1012; border: 1px solid var(--w-line); padding: 20px 22px; overflow: hidden; }
.vmenu {
  width: 200px;
  right: 92px;
  top: 46px;
  padding: 6px;
}
.vmenu .mi { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 7px; color: var(--w-muted); }
.vmenu .mi.on { background: var(--w-sel); color: #fff; }
.vmenu .mi small { color: var(--w-faint); }
.vmenu hr { border: 0; border-top: 1px solid var(--w-line); margin: 5px 4px; }

/* ---------- Reminders mock ---------- */
.rem-stage { position: relative; padding: 0 0 40px; }
.rem-card {
  font-family: var(--sys);
  font-size: 13.5px;
  background: var(--w-bg);
  border: 1px solid var(--w-border);
  border-radius: 16px;
  padding: 8px 18px;
  color: var(--w-text);
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.9);
}
.rem-card .rh { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 6px; font-weight: 700; font-size: 18px; }

.rem { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--w-line); }
.rem .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--w-faint); flex: none; display: grid; place-items: center; }

.rem b { display: block; font-weight: 600; }

.rem small { color: var(--w-muted); display: inline-flex; align-items: center; gap: 4px; }


.notif {
  position: absolute;
  right: -24px;
  top: -46px;
  width: 330px;
  display: flex;
  gap: 11px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(58, 58, 62, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--sys);
  font-size: 13px;
  color: #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.notif .nt { flex: 1; min-width: 0; }
.notif b { font-weight: 600; }
.notif .nt div { display: flex; justify-content: space-between; }
.notif small { color: rgba(255, 255, 255, 0.6); }
.notif p { margin: 1px 0 0; color: rgba(255, 255, 255, 0.85); }
.kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 28px; }
.kind { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: var(--raised); }
.kind svg { width: 18px; height: 18px; color: var(--body); margin-bottom: 8px; }
.kind b { display: block; font-weight: 500; font-size: 15px; }
.kind span { color: var(--body); font-size: 13.5px; line-height: 1.45; display: block; margin-top: 3px; }

/* ---------- Pet mock ---------- */
.desk {
  position: relative;
  height: 640px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #262626;
  background:
    radial-gradient(70% 60% at 20% 20%, #34507a 0%, rgba(52, 80, 122, 0) 60%),
    radial-gradient(60% 60% at 90% 80%, #6b3b5e 0%, rgba(107, 59, 94, 0) 60%),
    linear-gradient(160deg, #18233a, #261a2c 70%, #160f18);
  font-family: var(--sys);
}
.menubar { height: 28px; display: flex; align-items: center; gap: 18px; padding: 0 14px; background: rgba(20, 20, 26, 0.45); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); font-size: 12.5px; color: #fff; }
.menubar b { font-weight: 700; }
.menubar .mb-end { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.menubar .mb-filo { width: 18px; height: 18px; border-radius: 5px; background: rgba(255, 255, 255, .22); display: grid; place-items: center; position: relative; }
.menubar .mb-filo img { width: 14px; height: 14px; }
.menubar .mb-filo::after { content: ""; position: absolute; top: -2px; right: -2px; width: 7px; height: 7px; border-radius: 50%; background: #8fb4ff; }
.mbmenu {
  position: absolute;
  right: 100px;
  top: 34px;
  width: 238px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(40, 40, 46, 0.86);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.mbmenu .mi { padding: 4px 10px; border-radius: 6px; display: flex; justify-content: space-between; }
.mbmenu .mi.dim { color: rgba(255, 255, 255, 0.55); }
.mbmenu .mi.on { background: #3b68d9; }
.mbmenu .mi small { color: rgba(255, 255, 255, 0.5); }
.mbmenu hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 5px 6px; }
.pet { position: absolute; right: 120px; bottom: 236px; width: 130px; animation: bob 3.6s ease-in-out infinite; }
.pet .badge { position: absolute; top: 4px; right: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--w-accent); color: var(--w-bg); font-weight: 700; font-size: 13px; display: grid; place-items: center; border: 2px solid #11151f; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.pet-shadow { position: absolute; right: 135px; bottom: 230px; width: 100px; height: 14px; border-radius: 50%; background: rgba(0, 0, 0, 0.35); filter: blur(4px); }
.bub {
  position: absolute;
  background: var(--w-pop);
  border: 1px solid var(--w-line);
  border-radius: 16px;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.desk .win-mini {
  position: absolute;
  left: 48px;
  top: 72px;
  width: 480px;
  height: 320px;
  border-radius: 12px;
  background: rgba(22, 22, 24, 0.9);
  border: 1px solid #333338;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  padding: 34px 16px 16px;
}
.win-mini .lights { top: 12px; left: 12px; }
.win-mini .ln { height: 8px; border-radius: 4px; background: #2a2a2e; margin: 10px 0; }

/* ---------- Local-first ---------- */
.local-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lcard { border: 1px solid var(--border); border-radius: 16px; padding: 20px; background: var(--raised); }
.lcard svg { width: 20px; height: 20px; color: var(--body); margin-bottom: 14px; }
.lcard p { margin: 0; color: var(--body); font-size: 14.5px; line-height: 1.55; }

/* ---------- Get started ---------- */

/* ---------- Final CTA + footer ---------- */
.closing { text-align: center; padding: 150px 0 40px; }
.closing img { width: 120px; margin: 0 auto 18px; }
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 0 36px;
  color: var(--body);
  font-size: 13px;
}
.foot-links { display: flex; gap: 22px; }
.foot-links a { display: inline-flex; align-items: center; gap: 6px; }
.foot-links svg { width: 13px; height: 13px; flex: none; }
footer a { transition: color .2s; }
footer a:hover { color: var(--text); }

/* ---------- Mock responsiveness (by the window's own width) ---------- */
@container (max-width: 820px) {
  .list { width: 220px; }
}
@container (max-width: 680px) {
  .list { display: none; }
  .bubble { max-width: 90%; }
}
@container (max-width: 460px) {
  .rail { display: none; }
  
  .pane-head .stack { display: none; }
  .msgs { padding: 14px 14px 6px; }
  .feed, .notes { padding: 18px 16px 0; }
  .post-art { height: 170px; }
  .art-head .tools svg:not(.keep) { display: none; }
  
  
}

/* ---------- Page responsiveness ---------- */
@media (max-width: 1220px) {
  
  .notif { right: -8px; }
}
@media (max-width: 960px) {
  .split, .split.flip { grid-template-columns: 1fr; gap: 40px; }
  .split.flip .copy { order: 0; }
  .local-grid { grid-template-columns: 1fr 1fr; }
  
  
  
  .notif { right: 8px; }
}
@media (max-width: 760px) {
  .hero { padding-top: 36px; }
  .hero-stage { margin-top: 36px; }
  .lede { font-size: 16.5px; }
  section.feature { padding-top: 96px; }
  .win.hero-win { height: auto; }
  .hero-win .msgs { overflow: visible; padding-top: 8px; }
  .local-grid, .kinds { grid-template-columns: 1fr; }
  .float-card, .notif { position: relative; inset: auto; width: auto; margin-top: 14px; }
  .share { position: absolute; right: 12px; top: 120px; width: 200px; margin: 0; }
  .vmenu { position: absolute; right: 12px; top: 46px; width: 190px; margin: 0; }
  .notif { margin: 0 0 14px; }
  .desk { height: 640px; }
  .desk .win-mini { left: 16px; width: calc(100% - 32px); height: 180px; }
  
  .mbmenu { right: 12px; }
  .desk .win-mini { display: none; }
  
  
  .pet { right: 50%; margin-right: -60px; bottom: 236px; width: 120px; }
  .pet-shadow { right: 50%; margin-right: -50px; bottom: 228px; }
  .mbmenu { right: 12px; left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- The app's own tab glyphs (assets/icons, assets/images) ---------- */
.mask {
  display: inline-block;
  flex: none;
  width: 19px;
  height: 19px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.m-art { -webkit-mask-image: url("img/icons/tab-artifacts.png"); mask-image: url("img/icons/tab-artifacts.png"); }
.m-conn { -webkit-mask-image: url("img/icons/tab-connectors.png"); mask-image: url("img/icons/tab-connectors.png"); }
.eyebrow .mask { width: 16px; height: 16px; }
.lcard .mask { width: 20px; height: 20px; color: var(--body); margin-bottom: 14px; display: block; }
/* Agents is a full-colour picture in the real rail, dimmed while another tab is open. */
.tab-pic { width: 34px; height: 24px; object-fit: contain; opacity: .6; }
.tab.on .tab-pic { opacity: 1; }
.eb-pic { width: 24px; height: 16px; object-fit: contain; }

/* ---------- Edit agent ---------- */

.big-wrap { position: relative; width: 88px; margin: 14px auto 4px; }

.pencil { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--w-strong); border: 2px solid var(--w-bg); display: grid; place-items: center; color: var(--w-text); }
.pencil svg { width: 12px; height: 12px; }

/* ---------- Artifact menu ---------- */
.vmenu .mh { padding: 6px 10px 4px; color: var(--w-faint); font-size: 12px; }
.vmenu .mi span { display: inline-flex; align-items: center; gap: 9px; }
.vmenu .mi svg { width: 14px; height: 14px; color: var(--w-muted); }
.vmenu .mi.on { background: transparent; }
.vmenu .mi .tick { color: var(--w-accent); }

/* ---------- Scheduled ---------- */
.rem-card .rh span { display: inline-flex; align-items: center; gap: 10px; }
.rem-card .rh .back { width: 16px; height: 16px; color: var(--w-muted); }
.rsec { padding: 14px 0 4px; color: var(--w-muted); font-size: 13px; font-weight: 600; }
.rem .ico { width: 22px; height: 22px; flex: none; display: grid; place-items: center; color: var(--w-muted); }
.rem .ico svg { width: 17px; height: 17px; }
.rem .acts { margin-left: auto; display: flex; gap: 14px; color: var(--w-muted); }
.rem .acts svg, .rem .trail { width: 15px; height: 15px; }
.rem .trail { margin-left: auto; color: var(--w-faint); }
.rem-card .rem:last-child { padding-bottom: 16px; }

/* ---------- Pet tray ---------- */
.bub.tray { right: 40px; bottom: 168px; width: 300px; padding: 6px; }
.trow { display: flex; align-items: center; gap: 10px; padding: 6px 7px; }
.trow .av { width: 30px; height: 30px; }
.trow b { font-weight: 600; display: block; }
.trow small { display: block; color: var(--w-muted); }
.trow .t { margin-left: auto; align-self: flex-start; color: var(--w-faint); }
.desk .pet { right: 470px; bottom: 300px; }
.desk .pet-shadow { right: 485px; bottom: 292px; }

.desk .bub.tray { right: 380px; }
@media (max-width: 960px) {
  .desk .pet { right: 50%; margin-right: -65px; }
  .desk .pet-shadow { right: 50%; margin-right: -50px; }
  .desk .bub.tray { right: auto; left: 50%; margin-left: -150px; }
  .desk { height: 820px; }
}
@media (max-width: 760px) {
  .desk .bub.tray { left: 12px; right: 12px; margin-left: 0; width: auto; }
  .desk .pet { bottom: 290px; }
  .desk .pet-shadow { bottom: 282px; }
}

.mbmenu { width: 296px; }
@media (max-width: 760px) { .mbmenu { width: auto; left: 12px; } }
.eb-pet { width: 20px; height: 20px; object-fit: contain; }

/* ---------- Theme switcher under the hero mock ---------- */
.themes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 22px; font-size: 13.5px; color: var(--faint); }
.themes button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px 0 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--body);
  font: 500 13.5px "GoogleSans", system-ui, sans-serif;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.themes button:hover { color: var(--text); }
.themes button[aria-pressed="true"] { color: var(--text); border-color: #555; background: linear-gradient(to bottom, var(--surface-top), var(--surface-bottom)); }
.themes .dot { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--w-bg) 50%, var(--w-accent) 50%); box-shadow: 0 0 0 1px var(--w-border); }

/* ---------- What's working (screens/chat/working_panel.rs): the docked panel, else the header's badge ---------- */
/* The panel: 264 wide on the sunken colour; its title row 44 high (12 in, 4 at the right); rows 4 in from its sides,
   each 8 x 6 inside with an 8 gap after a 22 px face (1 px down), rounded 14. */

.tool { flex: none; display: grid; place-items: center; }
.tool svg { width: 18px; height: 18px; }
.tool .claude, .wbadge .claude { color: #d97757; }

/* An agent's row: its name and state on one line (6 apart), then the task, then what it's doing. */

/* A coding task's row leads with the task (up to two lines), its state and time under it. */

/* The badge in the header's middle: 4 in at the left (with faces), 12 at the right, 2 up and down; 20 px faces. */
.pane-head { position: relative; }
.wbadge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  align-items: center;
  gap: 4px;
  padding: 2px 12px 2px 4px;
  border-radius: 999px;
  background: var(--w-accent-soft);
  color: var(--w-on-accent-soft);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
}
.wbadge .faces { display: flex; }
.wbadge .faces > * { width: 20px; height: 20px; border-radius: 50%; }
.wbadge .faces > * + * { margin-left: -6px; }

.wbadge .tool svg { width: 16px; height: 16px; }
@container (max-width: 1060px) {
  
  .wbadge { display: inline-flex; }
  .pane-head .stack { display: none; }
}

/* ---------- Feed post picture: three price plans ---------- */
.post-art.tiers { display: flex; align-items: flex-end; justify-content: center; gap: 18px; padding: 0 0 26px; }
.tier { width: 92px; border-radius: 12px 12px 4px 4px; background: rgba(255, 255, 255, 0.92); padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 7px; box-shadow: 0 18px 40px rgba(20, 10, 60, 0.35); }
.tier i { display: block; height: 6px; border-radius: 3px; background: #cfd3e6; }
.tier i:first-child { width: 60%; background: #8f96c9; }
.tier b { margin-top: 4px; font-size: 18px; color: #23214f; }
.tier.b { transform: translateY(-14px); outline: 3px solid #fff3d6; }

@container (max-width: 640px) {
  .wbadge { position: static; transform: none; margin-left: auto; }
}

/* The Coding mock grows with its thread, so nothing in it is cut off at any width. */

.hero-copy { width: min(940px, calc(100% - 48px)); }
.hero h1 { text-wrap: balance; }

/* ---------- The app's type scale (theme.rs TypeVariant at the default 15 px text, ui.rs) ----------
   size and line height, weight set per use; one-line labels end in "…" as the app's truncate() does. */
:root {
  --f-large: 700 25.5px/32px var(--sys);
  --f-title2: 600 19.5px/26px var(--sys);
  --f-title3: 700 17px/24px var(--sys);
  --f-headline: 600 15px/21px var(--sys);
  --f-callout: 400 15px/21px var(--sys);
  --f-callout-b: 600 15px/21px var(--sys);
  --f-subhead: 400 14px/19px var(--sys);
  --f-subhead-b: 600 14px/19px var(--sys);
  --f-footnote: 400 13px/18px var(--sys);
  --f-footnote-m: 500 13px/18px var(--sys);
  --f-footnote-b: 600 13px/18px var(--sys);
  --f-caption: 400 12px/16px var(--sys);
  --f-caption-b: 600 12px/16px var(--sys);
  --f-micro: 400 12px/15px var(--sys);
}
.row .nm > :first-child, .row .last, .pane-head, .who, .composer .ph, .ctx b, .ctx span, .topic, .post-src, .note-h b, .rem b, .rem small, .trow b, .trow small, .tags span, .share .mi, .vmenu .mi, .ver, .btn, .divider, .tab, .rsec, .post-src small, .note-h small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.win { font: var(--f-callout); }
.tab { font: var(--f-micro); max-width: 100%; }
.tab.on { font-weight: 600; }
.list-head { font: var(--f-title3); }
.row .nm { font: var(--f-callout-b); }
.row .nm > :first-child { min-width: 0; }
.row .nm small { font: var(--f-caption); }
.row .last { font: var(--f-footnote); }
.row .last.work { font: var(--f-caption-b); }
.row .badge { font: var(--f-caption-b); }
.pane-head { font: var(--f-headline); }
.who { font: var(--f-footnote-b); }
.bubble { font: var(--f-callout); }
.divider { font: var(--f-caption); }
.composer { font: var(--f-callout); }
.composer .pick { font: var(--f-footnote); }
.composer .ph { font: 400 13.125px/18.75px var(--sys); }

.btn { font: var(--f-footnote-m); }
/* A coding task in the chat (chat/coding_sessions.rs render_rows): 86% wide, the tool's 32 px mark, the task in one
   callout line and its state under it in a footnote, 14 x 12 inside, rounded 18. */
.crow { width: 86%; margin-top: 8px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--w-raise); border: 1px solid var(--w-border); }
.crow > .tool { width: 32px; height: 32px; }
.crow > .tool svg { width: 26px; height: 26px; }
.ctx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ctx b { font: var(--f-callout-b); }
.ctx span { font: var(--f-footnote-m); color: var(--w-muted); }
.crow .chev { width: 16px; height: 16px; flex: none; color: var(--w-faint); }
/* Edit agent */

/* Coding task */

.float-card { font: var(--f-subhead); }

/* Feed */
.feed-title, .notes-title { font: var(--f-large); }

.topic { font: var(--f-micro); max-width: 58px; }
.updated { font: var(--f-footnote); }
.post-src { font: var(--f-callout-b); }
.post-src small { font: var(--f-caption); flex: none; }

/* Notes */
.note-h { font: var(--f-headline); align-items: center; }
.note-h b { min-width: 0; font-weight: 600; }
.note-h small { font: var(--f-caption); flex: none; }
.note p { font: var(--f-subhead); }
.tags span { font: var(--f-caption); }
.vmenu .mh { font: var(--f-caption); }
.share .mi, .vmenu .mi { font: var(--f-subhead); }
/* Artifact */
.art-head b { font: var(--f-headline); }
.ver { font: var(--f-footnote-m); }
/* Scheduled (sub-page header, sections, list rows) */
.rem-card { font: var(--f-callout); }
.rem-card .rh { font: var(--f-headline); }
.rsec { font: var(--f-subhead-b); }
.rem > div { flex: 1; min-width: 0; }
.rem b { font: var(--f-callout); }
.rem small { display: block; font: var(--f-footnote); }

/* Working panel and badge */

.wbadge { font: var(--f-footnote-b); }
/* The pet (pet.rs: subhead semibold heading, footnote lines) */
.bub { font: var(--f-footnote); }
.trow > div { flex: 1; min-width: 0; }
.trow b { font: var(--f-footnote-b); }
.trow small { font: var(--f-caption); }

/* One column on narrow pages, but never wider than the page: one-line labels shorten instead. */
@media (max-width: 960px) { .split, .split.flip { grid-template-columns: minmax(0, 1fr); } }

/* ---------- A question in the chat (chat/question_panel.rs) and the header's "needs you" pill ---------- */

/* ---------- An agent's page (agents.rs): picture, name and model, instructions, what's shared ---------- */
.agent-win { height: 660px; margin-top: 8px; }
.apage { position: relative; overflow: hidden; }
.amore { position: absolute; top: 14px; right: 16px; width: 18px; height: 18px; color: var(--w-muted); }
.acol { width: 100%; max-width: 620px; margin: 0 auto; padding: 32px 32px 0; }
.atop { display: flex; align-items: center; gap: 16px; }
.atop .big-wrap { width: 76px; margin: 0; flex: none; }
.atop .big-av { width: 76px; height: 76px; }
.aname { min-width: 0; }
.aname b { display: block; font: var(--f-title2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amodel { display: flex; align-items: center; gap: 8px; margin-top: 6px; font: var(--f-callout); color: var(--w-muted); white-space: nowrap; }
.mpill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--w-border); border-radius: 999px; color: var(--w-text); }
.mpill .claude { width: 13px; height: 13px; color: #d97757; }
.mpill svg:last-child { width: 12px; height: 12px; color: var(--w-muted); }
.alabel { margin-top: 24px; font: var(--f-headline); }
.abox { margin-top: 8px; min-height: 104px; padding: 10px 12px; border: 1px solid var(--w-border); border-radius: 14px; font: var(--f-callout); }
.ahint { margin-top: 8px; font: var(--f-subhead); color: var(--w-muted); }
.aline { border: 0; border-top: 1px solid var(--w-line); margin: 24px 0 0; }
.aseg { margin-top: 8px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 3px; border-radius: 12px; background: var(--w-raise); font: var(--f-callout); text-align: center; }
.aseg span { padding: 5px; border-radius: 9px; color: var(--w-muted); }
.aseg .on { background: var(--w-strong); color: var(--w-text); font-weight: 600; }
.amonth { margin-top: 16px; font: var(--f-footnote-b); color: var(--w-muted); }
.agrid { margin-top: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.th { aspect-ratio: 1; overflow: hidden; background: var(--w-sunk); display: grid; place-items: center; }
.th.t2 { display: flex; align-items: flex-end; gap: 6%; padding: 18% 12% 14%; background: #0f1012; }
.th.t2 i { flex: 1; background: #5a8cff; border-radius: 3px 3px 0 0; }
.th.t2 i:nth-child(1) { height: 55%; } .th.t2 i:nth-child(2) { height: 80%; } .th.t2 i:nth-child(3) { height: 40%; } .th.t2 i:nth-child(4) { height: 95%; }
.th.t2 i:nth-child(5) { height: 70%; } .th.t2 i:nth-child(6) { height: 35%; } .th.t2 i:nth-child(7) { height: 60%; }
.th.t3 { background: linear-gradient(160deg, #f28b54, #8a3f8f 60%, #23214f); display: flex; align-items: flex-end; justify-content: center; gap: 8%; padding-bottom: 18%; }
.th.t3 span { width: 22%; height: 40%; border-radius: 6px; background: rgba(255, 255, 255, .92); }
.th.t3 span:nth-child(2) { height: 52%; }
.kind .eb-pic { display: block; margin-bottom: 8px; }
.kinds.three { margin-top: 28px; }

/* ---------- A coding round's result (coding_result.rs): back, Result, the round switcher; the tool, its state and date,
   the title, then the report ---------- */
.result-win { height: 680px; }
/* ui.rs sub_page_header: 8 in, a small back button (28 px, 15 px arrow), the title; coding_result.rs round_switcher:
   "Round", then each round's number in a segmented track, the shown one raised; 14 px from the bar's end */
.rhead { flex: none; height: 44px; display: flex; align-items: center; gap: 4px; padding: 0 8px; }
.rhead > svg { width: 28px; height: 28px; padding: 6.5px; flex: none; color: var(--w-text); }
.rhead b { font: var(--f-headline); padding-left: 4px; }
.rround { margin: 0 14px 0 auto; display: inline-flex; align-items: center; gap: 8px; font: var(--f-footnote-m); color: var(--w-muted); white-space: nowrap; }
.rtrack { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 12px; background: var(--w-strong); }
.rtrack i { font-style: normal; height: 24px; min-width: 26px; padding: 0 8px; display: grid; place-items: center; border-radius: 10px; border: 1px solid transparent; }
.rtrack i.on { background: var(--w-pop); border-color: var(--w-border); font-weight: 600; color: var(--w-text); }
.rbody { flex: 1; min-height: 0; overflow: hidden; width: 100%; max-width: 820px; margin: 0 auto; padding: 28px 20px 20px; font: 400 15px/23px var(--sys); }
.rhero { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.rhero > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* Share (Button secondary, small): 28 px, 10 in, a 15 px icon, on the surface with a border */
.rshare { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--w-border); background: var(--w-raise); color: var(--w-text); font: var(--f-footnote-b); }
.rshare svg { width: 15px; height: 15px; }
.rhero .tool { width: 44px; height: 44px; }
.rhero .tool svg { width: 35px; height: 35px; }
.rmeta { display: flex; align-items: center; gap: 4px; font: var(--f-subhead-b); color: var(--w-muted); }
.rmeta svg { width: 14px; height: 14px; flex: none; }
.rtitle { font: 700 22.5px/30px var(--sys); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbody p { margin: 0 0 12px; }
.rbody h4 { margin: 16px 0 4px; font: 600 16px/22px var(--sys); }
.rbody ul { margin: 0; padding-left: 20px; }
.rbody li { margin: 2px 0; }
/* a proof picture where the report names it (inline_picture): its own shape, 240 to 640 wide, rounded 14, no caption */
.rproof { margin-top: 12px; width: 240px; }
@media (max-width: 760px) {
  .agent-win, .result-win { height: auto; }
  .acol { padding: 24px 16px 20px; }
  .rbody { overflow: visible; }
  .amodel { flex-wrap: wrap; }
}
.kind .eb-pic { width: auto; height: 18px; }
.hero-win .msgs { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px); mask-image: linear-gradient(to bottom, transparent 0, #000 28px); }
@media (max-width: 760px) { .hero-win .msgs { -webkit-mask-image: none; mask-image: none; } }

/* ---------- The download button: off-white with the Apple mark, sized like the site's other buttons (.button) ---------- */
.dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid #f7f7f7;
  background: #f7f7f7;
  color: #111111;
  font: 500 16px/1 "GoogleSans", system-ui, -apple-system, sans-serif;
  white-space: nowrap;
  transition: background-color .2s, opacity .2s;
}
.dl-btn svg { width: 17px; height: 17px; flex: none; margin-top: -2px; }
.dl-btn:hover { background: #ffffff; }
.dl-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero .actions { align-items: center; }
/* The essentials under a download button: small and quiet. */
.dl-note { margin: 14px 0 0; color: var(--faint); font-size: 13.5px; line-height: 1.5; }
.hero .dl-note + .pills { margin-top: 14px; }
.dl-note { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; }
.dl-note span { white-space: nowrap; }
.dl-note span:not(:last-child)::after { content: "·"; margin-left: 8px; }

/* ---------- Current app details (Oct 13) ---------- */
/* The sidebar's app-icon spot: Filo's bare mark (app.rs), 32 px in a 48 px spot */
.rail .me { width: 48px; height: 48px; margin: 0 0 8px; display: grid; place-items: center; border-radius: 14px; }
.m-filo { -webkit-mask-image: url("img/icons/filo-mark.svg"); mask-image: url("img/icons/filo-mark.svg"); }
.rail .me .mask { width: 32px; height: 32px; color: var(--w-text); }

/* The Agents list: ⌄ after the title, a second line ending in the coding tool's mark, unread as an accent time */
.list-head .lh { display: inline-flex; align-items: center; gap: 4px; }
.list-head .vchev { width: 20px; height: 20px; padding: 4px; margin: 0; border-radius: 10px; color: var(--w-muted); }
.l2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.l2 .last { flex: 1; min-width: 0; }
.tm { flex: none; width: 13px; height: 13px; color: var(--w-muted); }
.row.on .tm-claude { color: #d97757; }
.row.on .tm-meta { color: #0081fb; }
.row.on .tm-openai, .row.on .tm-opencode { color: var(--w-text); }

.row.unread .nm small { color: var(--w-accent); font-weight: 600; }
.row.unread .last { color: var(--w-text); }
.vmenu-list { position: absolute; left: 106px; top: 40px; z-index: 3; display: flex; align-items: center; gap: 8px; width: 200px; padding: 8px 12px; border-radius: 12px; background: var(--w-pop); border: 1px solid var(--w-border); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); font: var(--f-subhead); color: var(--w-text); }
.vmenu-list svg { width: 14px; height: 14px; color: var(--w-accent); }
.agent-win .list { position: relative; }
.agent-win .list .vmenu-list { left: 70px; }
.gname { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }

/* Feed: the Glances chip and a glance post (feed_glance.rs) */
.topic .ring .mask { width: 24px; height: 24px; color: var(--w-text); }
.glance { margin: 4px 0 18px; padding: 12px 14px 8px; border-radius: 18px; background: var(--w-raise); border: 1px solid var(--w-border); }
.gby { display: flex; align-items: center; gap: 8px; font: var(--f-footnote-b); }
.gby .av { width: 20px; height: 20px; }
.gby small { font: var(--f-caption); color: var(--w-faint); }
.gchip { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; padding: 1px 8px; border-radius: 999px; background: var(--w-strong); font: var(--f-caption); color: var(--w-muted); }
.gchip svg { width: 12px; height: 12px; }
.gt { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.gt b { font: var(--f-headline); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt small { flex: none; font: var(--f-caption); color: var(--w-faint); }
.gn { font: var(--f-subhead); color: var(--w-muted); }
.gpage { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--w-line); }
.gbars { display: flex; flex-direction: column; gap: 6px; }
.gbar { display: grid; grid-template-columns: 112px 1fr 36px; align-items: center; gap: 8px; font: var(--f-caption); color: var(--w-muted); }
.gbar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbar i { display: block; height: 10px; width: var(--w); border-radius: 5px; background: var(--b, var(--w-accent)); }
.gbar b { color: var(--w-text); font-weight: 600; text-align: right; }
.gq { margin-top: 12px; font: var(--f-footnote-b); }
.gch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.gch span { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--w-border); font: var(--f-footnote); color: var(--w-text); white-space: nowrap; }
.gch .picked { background: var(--w-accent-soft); color: var(--w-on-accent-soft); border-color: transparent; font-weight: 600; }
.gsent { display: flex; align-items: center; gap: 6px; margin-top: 8px; font: var(--f-caption); color: var(--w-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsent svg { width: 14px; height: 14px; flex: none; color: var(--w-success); }
.gacts { display: flex; align-items: center; gap: 4px; margin-top: 8px; font: var(--f-footnote-m); color: var(--w-muted); }
.gacts span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 8px; white-space: nowrap; }
.gacts span.end { margin-left: auto; }
.gacts svg { width: 14px; height: 14px; }
.post-acts .liked { color: #ff6b81; }
@container (max-width: 520px) { .gacts span:nth-child(3) { display: none; } .gbar { grid-template-columns: 96px 1fr 30px; } }

/* The Coding page (coding.rs): the large title, Tools as cards with Ready, a switch and one line of pickers, then Tasks */
.coding-page { height: 780px; }
.cpage { overflow: hidden; }
/* coding.rs: sections 24 apart, each a label, its card 8 under it and a footer 8 under that (ui.rs section) */
.ccol { width: 100%; max-width: 760px; margin: 0 auto; padding: 12px 20px 0; }
.sec { margin: 24px 0 8px; padding: 0 8px; font: var(--f-footnote-b); color: var(--w-muted); }
.ccol > .sec:first-child { margin-top: 0; }
.sec-note { margin-top: 8px; padding: 0 8px; font: var(--f-footnote); color: var(--w-faint); }
.tcards { border-radius: 14px; background: var(--w-raise); }
.tcards > * + * { background: linear-gradient(var(--w-line), var(--w-line)) 16px 0 / calc(100% - 16px) 1px no-repeat; }
/* a tool (render_tool): 12 / 16 in, its 36 px tile, then its name and Ready, its sign-in and its pickers, then its switch */
.tcard { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; }
.tmark { flex: none; width: 36px; height: 36px; display: grid; place-items: center; }
.tmark svg { width: 29px; height: 29px; }
.tmark.tm-claude { color: #d97757; }
.tmark.tm-meta { color: #0081fb; }
.tmark.tm-openai, .tmark.tm-opencode { color: var(--w-text); }
.tcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tname { display: flex; align-items: center; gap: 8px; }
.tname b { font: var(--f-callout); font-weight: 500; }
.tcol > small { font: var(--f-footnote); color: var(--w-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.priv { filter: blur(3.5px); }
/* ui.rs chip, small: a pill on the success tint */
.chip.ok { display: inline-flex; align-items: center; min-height: 18px; padding: 0 6px; border-radius: 999px; background: var(--w-success-soft); color: var(--w-on-success-soft); font: 600 12px/15px var(--sys); }
/* the Switch: 36 × 20, on in the action colour, its thumb raised */
.tog { flex: none; width: 36px; height: 20px; border-radius: 999px; background: var(--w-action); position: relative; }
.tog::after { content: ""; position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--w-pop); }
/* render_pickers: Model takes the free width, then Reasoning and Mode; 8 from label to field, 12 between groups */
.tctl { display: flex; align-items: center; gap: 8px; padding-top: 4px; font: var(--f-footnote); color: var(--w-muted); white-space: nowrap; min-width: 0; }
.tctl .lb + .dd { margin-right: 4px; }
.dd { display: inline-flex; align-items: center; justify-content: space-between; gap: 4px; height: 22.5px; padding: 0 11.25px; border-radius: 10px; border: 1px solid var(--w-border); color: var(--w-text); font: 400 13.125px/18.75px var(--sys); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dd svg { width: 13px; height: 13px; flex: none; color: var(--w-text); }
.dd.dm { background: var(--w-bg); }
/* Where tasks work by default (render_workspace) */
.wsrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; font: var(--f-footnote); color: var(--w-muted); }
.wsrow .dd { flex: none; }
/* a task (render_task): a 34 px line, its mark, title, where and with what, its state in a 100 px column, its age in 68 */
.tasks { border-radius: 14px; background: var(--w-raise); padding: 4px; }
.task { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 10px; font: var(--f-callout); white-space: nowrap; }
.task b { font-weight: 400; flex: none; }
.task.done b { color: var(--w-muted); }
.task small { flex: none; max-width: 240px; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: var(--f-footnote); color: var(--w-faint); }
.tdot { flex: none; width: 14px; height: 14px; display: grid; place-items: center; }
.tdot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--w-success); }
.tspin { flex: none; width: 14px; height: 14px; color: var(--w-accent); animation: spin 1s linear infinite; }
.ts { flex: none; width: 100px; text-align: right; font: var(--f-footnote-m); color: var(--w-success); }
.ts.work { color: var(--w-accent); }
.tt { flex: none; width: 68px; text-align: right; font: var(--f-footnote); color: var(--w-faint); }
@container (max-width: 640px) { .tctl .lb { display: none; } .task small { display: none; } }
.result-row { margin-top: 96px; }

/* The pet's tray, open (pet.rs): a summary line, then rows with a ring round each face */
.bub.tray { padding: 6px; }
.tsum { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 6px; font: var(--f-footnote-m); color: var(--w-muted); }
.tsum svg { width: 14px; height: 14px; }
.trow { border-radius: 10px; }
.trow.need { background: color-mix(in srgb, var(--w-warning) 14%, transparent); }
.trow.need small { color: var(--w-warning); }
.trow .ans { display: inline-block; margin-top: 6px; padding: 3px 12px; border-radius: 999px; background: var(--w-accent); color: var(--w-bg); font: var(--f-footnote-b); }
.av.ring { box-shadow: 0 0 0 2px var(--w-pop), 0 0 0 3.5px var(--w-muted); }
.trow.need .av.ring { box-shadow: 0 0 0 2px var(--w-pop), 0 0 0 3.5px var(--w-warning); }
.pet .badge.need { background: var(--w-warning); color: #1b1300; }
.desk .bub.tray { bottom: 44px; width: 320px; }
.task b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.task small { flex: 0 1 auto; max-width: min(240px, 45%); }
.gname { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pane-head .wbadge { flex: none; }
.tctl { overflow: hidden; }
.tctl .dd { flex: none; }
.ddt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tctl .dm { flex: 1 1 auto; min-width: 0; }
@container (max-width: 460px) { .tctl .dr { display: none; } }

/* ---------- The header's work popover, open (chat/working_panel.rs popover + compact_row) ---------- */
.hero-win .pane { position: relative; }
.wbadge .faces .tool { width: 20px; height: 20px; display: grid; place-items: center; background: transparent; }
.wbadge .faces .tool svg { width: 16px; height: 16px; }
.wbadge .faces .tool + .tool { margin-left: -6px; }
.tool.cx svg { color: var(--w-text); }
.wpop {
  position: absolute;
  z-index: 4;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, calc(100% - 24px));
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 18px;
  background: var(--w-raise);
  border: 1px solid var(--w-border);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}
.prow { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 14px; }
.prow:hover { background: color-mix(in srgb, var(--w-sel) 50%, transparent); }
.prow > .tool { flex: none; width: 22px; height: 22px; margin-top: 1px; display: grid; place-items: center; }
.prow > .tool svg { width: 18px; height: 18px; }
.ptx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ptx b { font: var(--f-footnote-b); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.pst { font: var(--f-caption); color: var(--w-muted); }
.pdet { font: var(--f-caption); color: var(--w-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .25s; }

.crow > .tool.cx svg { color: var(--w-text); }
/* The pill is a button; its popover starts closed and opens with a short fade and drop. */
button.wbadge { border: 1px solid transparent; margin: 0; cursor: pointer; font: var(--f-footnote-b); }
.wbadge.live { display: inline-flex; }
.wbadge.live:hover { filter: brightness(1.12); }
.wbadge:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 2px; }
.wbadge[aria-expanded="true"] { box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.hero-win .wpop { opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-4px) scale(.98); transform-origin: top center;
  transition: opacity .14s ease-out, transform .14s ease-out, visibility 0s linear .14s; }
.hero-win .wpop.open { opacity: 1; visibility: visible; transform: translateX(-50%); transition: opacity .14s ease-out, transform .14s ease-out, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .hero-win .wpop, .hero-win .wpop.open { transition: none; } }

/* ---------- Legal pages (legal.html, privacy.html, terms.html) ---------- */
.legal { padding: 40px 0 24px; }
.backlink { display: inline-block; color: var(--body); font-size: 14px; transition: color .2s; }
.backlink:hover { color: var(--text); }
.doc-head { padding: 36px 0 44px; border-bottom: 1px solid var(--border); }
.doc-eyebrow { margin: 0 0 12px; color: var(--faint); font-size: 13.5px; }
.doc-head h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); }
.doc-sub { margin: 12px 0 0; color: var(--body); font-size: 18px; line-height: 1.5; max-width: 640px; }
.doc-dates { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 28px 0 0; }
.doc-dates dt { color: var(--faint); font-size: 12.5px; margin-bottom: 4px; }
.doc-dates dd { margin: 0; font-size: 15px; }
.textlink { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: #666; }
.textlink:hover { text-decoration-color: var(--text); }
.legal .layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; padding: 48px 0 24px; }
.toc { position: sticky; top: 84px; align-self: start; }
.toc-title { margin: 0 0 14px; color: var(--faint); font-size: 13px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.toc a { display: flex; gap: 10px; color: var(--body); font-size: 14px; line-height: 1.4; transition: color .2s; }
.toc a:hover { color: var(--text); }
.toc-n { flex: none; width: 20px; color: var(--faint); font-variant-numeric: tabular-nums; }
.doc-body { max-width: 720px; }
.doc-sec { padding: 32px 0 8px; border-top: 1px solid var(--border); scroll-margin-top: 80px; }
.doc-sec:first-child { border-top: 0; padding-top: 0; }
.sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.sec-num { flex: none; color: var(--faint); font-size: 13px; font-variant-numeric: tabular-nums; }
.doc-sec h2 { font-size: 24px; letter-spacing: -0.015em; }
.doc-sec p { margin: 0 0 14px; color: var(--body); font-size: 15.5px; line-height: 1.7; }
.doc-sec ul.plain { margin: 0 0 14px; padding: 0; list-style: none; }
.doc-sec ul.plain li { position: relative; margin: 0 0 10px; padding-left: 20px; color: var(--body); font-size: 15.5px; line-height: 1.65; }
.doc-sec ul.plain li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: #666; }
.doc-sec strong { color: var(--text); font-weight: 500; }
.doc-sec code { font: 13px var(--mono); color: var(--text); background: var(--raised); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; }
.plain-terms { margin: 0 0 20px; padding: 16px 20px; border-radius: 14px; background: var(--raised); border: 1px solid var(--border); }
.plain-terms .pt-label { display: block; margin-bottom: 6px; color: var(--faint); font-size: 12.5px; }
.plain-terms p { margin: 0; color: var(--text); font-size: 16px; line-height: 1.6; }
.legal-list { display: grid; gap: 14px; padding: 40px 0 24px; max-width: 720px; }
.legal-card { display: grid; grid-template-columns: 28px 1fr; gap: 4px 12px; padding: 22px 24px; border-radius: 16px; background: var(--raised); border: 1px solid var(--border); transition: border-color .2s; }
.legal-card:hover { border-color: #555; }
.legal-card .sec-num { grid-row: 1 / span 3; padding-top: 3px; }
.legal-card b { font-weight: 500; font-size: 19px; }
.legal-card span:not(.sec-num) { color: var(--body); font-size: 15px; line-height: 1.5; }
.legal-card small { color: var(--faint); font-size: 13px; }
.legal-page footer { border-top: 1px solid var(--border); margin-top: 32px; }
/* 404.html: the heading alone, with the footer lower down instead of a second rule right under it */
.not-found { min-height: 56vh; }
.not-found .doc-head { border-bottom: 0; }

/* ---------- Blog posts (blog/*.html): a centred reading column in the legal pages' type ---------- */
.reading { width: 100%; max-width: 728px; margin-inline: auto; padding: 32px 24px 32px; }
.post-head { padding: 0 0 44px; }
.post-head h1 { font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.22; letter-spacing: -0.02em; }
.post-meta { display: flex; gap: 14px; margin: 22px 0 0; color: var(--faint); font-size: 14px; }
.post-meta span { color: var(--text); }
.post-body { padding: 8px 0 24px; }
.post-body p, .post-body li { color: var(--body); font-size: 17px; line-height: 1.7; }
.post-body p { margin: 0 0 18px; }
.post-body ul { margin: 0 0 18px; padding-left: 22px; }
.post-body li { margin: 0 0 10px; padding-left: 4px; }
.post-body li::marker { color: #666; }
.post-body h2 { margin: 40px 0 14px; font-size: 26px; letter-spacing: -0.015em; }
.post-body strong { color: var(--text); font-weight: 500; }
.post-body code { font: 14px var(--mono); color: var(--text); background: var(--raised); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; }
.post-body img { width: 100%; height: auto; margin: 10px 0; border-radius: 14px; }
@media (max-width: 860px) {
  .legal .layout { grid-template-columns: 1fr; gap: 32px; padding-top: 36px; }
  .toc { position: static; }
}
@media print {
  .top, .toc, .backlink, footer { display: none; }
  body { background: #fff; color: #111; }
  .doc-sec p, .doc-sec li, .doc-sub, .plain-terms p { color: #222 !important; }
  .plain-terms { background: #f3f3f3; }
}
.foot-links { flex-wrap: wrap; justify-content: center; gap: 8px 22px; }

/* The group header as agents.rs render_group draws it: 8 px in at both ends, 12 px apart; the name on a pill (4 px in
   at the left, 12 at the right); the members as 24 px pictures, each with a 2 px ring in the header's colour, overlapping
   by 8 px (each one over the last); then the ⋯ menu. */
.pane-head { padding: 0 8px; }
.gname { padding: 4px 12px 4px 4px; border-radius: 999px; }
.pane-head .stack { gap: 0; }
.stack .av { flex: none; position: relative; }
.gmore { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 10px; color: var(--w-muted); }
.gmore svg { width: 14px; height: 14px; }
@container (max-width: 1060px) { .pane-head .gmore { margin-left: auto; } }
@container (max-width: 640px) { .pane-head .gmore { margin-left: 0; } }
/* margin-top: 0 undoes the Feed glance title's .gt, which put the name 4 px under the picture's middle. */
.gname .gt { min-width: 0; margin-top: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 460px) { .wbadge .faces { display: none; } .wbadge { padding-left: 12px; } }
.gname .gt { display: block; }

/* ---------- Glances: an agent's glance in the chat (chat/glance.rs: a 28 px head, its 16 px icon and title, then the page,
   on a card 10 / 14 / 14 inside, rounded 18) ---------- */
.glance-win { height: 780px; margin-top: 8px; }
.glance-win .msgs { justify-content: flex-end; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px); mask-image: linear-gradient(to bottom, transparent 0, #000 28px); }
.msg.glancecard { align-items: stretch; margin-top: 12px; padding: 10px 14px 14px; border-radius: 18px; background: var(--w-raise); border: 1px solid color-mix(in srgb, var(--w-border) 70%, transparent); }
.mc-head { display: flex; align-items: center; gap: 8px; height: 28px; margin-bottom: 8px; font: var(--f-subhead-b); }
.mc-head svg { width: 16px; height: 16px; flex: none; color: var(--w-faint); }
.mc-page { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mc-panel { min-width: 0; padding: 16px; border-radius: 14px; background: var(--w-strong); }
.kp { border-radius: 12px; background: var(--w-raise); border: 1px solid var(--w-border); overflow: hidden; }
.kp-in { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 12px; border-bottom: 1px solid var(--w-line); font: var(--f-callout); }
.kp-in > svg { width: 14px; height: 14px; flex: none; color: var(--w-muted); }
.kp-ph { color: var(--w-faint); white-space: nowrap; overflow: hidden; }
.caret { display: inline-block; width: 1.5px; height: 17px; margin: 0 1px; vertical-align: -3px; background: var(--w-text); }
.kp kbd { margin-left: auto; padding: 0 5px; border: 1px solid var(--w-border); border-radius: 5px; font: var(--f-caption); color: var(--w-muted); }
.kp-rows { padding: 6px; }
.kp-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; }
.kp-row.on { background: var(--w-strong); }
.kp-row > div { flex: 1; min-width: 0; }
.kp-row b, .kp-row small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-row b { font: var(--f-subhead-b); }
.kp-row small { font: var(--f-caption); color: var(--w-muted); }
.kp-rows.typed b { font-weight: 400; }
.kp-rows.typed b em { font-style: normal; font-weight: 700; }
.kp-ic { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--w-strong); color: var(--w-muted); }
.kp-row.on .kp-ic { background: var(--w-pop); }
.kp-ic svg { width: 14px; height: 14px; }
.kp-ret { flex: none; font: var(--f-footnote); color: var(--w-faint); }
@container (max-width: 680px) { .mc-page { grid-template-columns: 1fr; } .mc-panel + .mc-panel { display: none; } }
@media (max-width: 760px) { .glance-win { height: auto; } .glance-win .msgs { overflow: visible; padding-top: 8px; -webkit-mask-image: none; mask-image: none; } }

/* ---------- The hero's agent chats (agents.rs render_chat): a row opens its agent's chat; the header shows its picture
   and name ("Main agent" after Filo's). The group's ask is a card (conversation.rs render_group_call: 86% wide, 12 x 8
   inside, rounded 18, a 13 px icon and the label in the link colour, then the ask; on the messages' left edge, as wide as
   the task cards under it) and a post or ask a centred chip
   (render_group_link: 12 x 2 inside, the label, then the quote, truncated). A row hovers at half the selection tint. ---------- */
.hero-win .row { cursor: pointer; }
.hero-win .row:not(.on):hover { background: color-mix(in srgb, var(--w-sel) 50%, transparent); }
.hero-win .row.on:hover { background: color-mix(in srgb, var(--w-accent) 32%, transparent); }
.hero-win .row:focus-visible { outline: 2px solid var(--w-accent); outline-offset: -2px; }
.gname .gsub { flex: none; font: var(--f-caption); color: var(--w-muted); }
.gcall { flex: none; align-self: center; width: 86%; margin-top: 12px; display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-radius: 18px; background: var(--w-raise); }
.gc-head, .glink { display: flex; align-items: center; gap: 4px; font: var(--f-caption-b); color: var(--w-link); }
.gc-head svg, .glink svg { width: 13px; height: 13px; flex: none; }
.gc-ask { font: var(--f-footnote); color: var(--w-text); }
.glink { align-self: center; max-width: 86%; min-width: 0; margin: 8px 0; padding: 2px 12px; border-radius: 999px; background: var(--w-raise); }
.glink b { flex: none; font: inherit; }
.glink span { min-width: 0; font: var(--f-caption); color: var(--w-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx span.ok { color: var(--w-success); }
.tool .meta { color: #0081fb; }
/* A new day's mark has a 16 px gap row above its own 8 (conversation.rs Row::Gap); a pause on the same day, its clock
   alone, only the 8 (feed.rs day_rows). */
.msgs > .divider:not(:first-child) { margin-top: 24px; }
.msgs > .divider.pause { margin-top: 8px; }
/* A task card's row is 12 px under what's above it (coding_sessions.rs), with no message's padding on top. */
.msg > .crow:first-child { margin-top: 0; }
/* Messages from one speaker within 5 minutes join (feed.rs share_group): 4 px apart, their inner corners 5 px. */
.msg.joined { padding-top: 4px; }
.bubble.joins-prev { border-top-left-radius: 5px; }
.bubble.joins-next { border-bottom-left-radius: 5px; }
.bubble.mine.joins-prev { border-top-left-radius: 16px; border-top-right-radius: 5px; }
.bubble.mine.joins-next { border-bottom-left-radius: 16px; border-bottom-right-radius: 5px; }
/* A reply that reports a finished round ends in its result (conversation.rs proof_footer): under a faint line, the
   tool's mark, the task and its state pill (agent_work.rs state_pill, small). A late reply shows its time under it. */
.bubble .proof { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--w-border) 60%, transparent); }
.proof .tool { flex: none; width: 16px; height: 16px; display: grid; place-items: center; background: none; }
.proof .tool svg { width: 13px; height: 13px; }
.proof b { flex: 1; min-width: 0; font: var(--f-footnote-b); color: var(--w-text); }
.spill { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 19px; padding: 0 7px; border-radius: 999px; font: 600 12px/15px var(--sys); }
.spill svg { width: 11px; height: 11px; }
.spill.ok { background: var(--w-success-soft); color: var(--w-on-success-soft); }
.msg .late { margin-top: 2px; font: var(--f-caption); color: var(--w-faint); }
/* Where an unread chat's new messages start (seen.rs render_divider). */
.unseen { display: flex; align-items: center; gap: 8px; padding: 8px 0; font: var(--f-caption-b); color: var(--w-accent); }
.unseen::before, .unseen::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--w-accent) 35%, transparent); }
/* The timeline (timeline.rs): a 36 px strip at the chat's right edge, 16 px in from the header and the composer, with a
   dash per message the user sent, 10 apart, 8 in from the edge; the newest, where the chat rests, long and bright. */
.hero-win .pane, .glance-win .pane { position: relative; }
.tl { position: absolute; right: 0; top: 60px; bottom: 70px; width: 36px; display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
.tl > div { position: relative; }
.tl i { position: absolute; right: 8px; height: 2px; border-radius: 1px; }

/* ---------- Feed, Notes and Artifacts as the app draws them now (feed.rs, feed_glance.rs, notes.rs, artifact.rs) ---------- */
/* A page's header buttons (ui.rs page_header): 32 px icon buttons, 8 apart, a 17 px glyph in the text colour. */
.feed-title span, .notes-title span { gap: 8px; color: var(--w-text); }
.feed-title svg, .notes-title svg { padding: 7.5px; box-sizing: content-box; }
.feed-inner { max-width: 720px; }
/* Topics: 68 wide, a 64 px ring (1 px border, 2 px accent once picked) round a 56 px circle on the surface, the name 10 under. */
.topics { gap: 12px; }
.topic { width: 68px; max-width: 68px; gap: 10px; }
.topic .ring { position: relative; width: 64px; height: 64px; border: 1px solid var(--w-border); background: none; }
.topic .ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--w-raise); }
.topic .ring > * { position: relative; }
.topic.on .ring { border: 2px solid var(--w-accent); }
.topic.on .ring::before { inset: 2px; }
.topic .ring svg { width: 24px; height: 24px; color: var(--w-muted); }
.topic .ring .letter { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--w-accent-soft); color: var(--w-on-accent-soft); font: 600 17px/24px var(--sys); }
/* a topic's newest picture is its cover: here the post below */
.topic .ring .cover { width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(120% 90% at 85% 10%, #ffcf8a 0%, rgba(255, 207, 138, 0) 45%), radial-gradient(80% 70% at 10% 90%, #3d6bd8 0%, rgba(61, 107, 216, 0) 60%), linear-gradient(160deg, #f28b54, #8a3f8f 60%, #23214f); }
.updated { margin: 8px 0 20px; }
/* A glance (feed_glance.rs): its card's border at 70%, the note 2 under the title, the page 12 under, the pick in the
   success colour under the page, then ghost buttons (28 px, 10 in, 15 px icons) 2 apart. */
.glance { margin: 0 0 32px; border: 1px solid color-mix(in srgb, var(--w-border) 70%, transparent); }
.gn { margin-top: 2px; }
.gpage { margin-top: 12px; border-top-color: color-mix(in srgb, var(--w-border) 60%, transparent); }
.gsent { margin-top: 8px; font: var(--f-footnote); color: var(--w-success); }
.gsent svg { color: inherit; }
.gacts { gap: 2px; margin-left: -8px; color: var(--w-text); font: var(--f-footnote-b); }
.gacts span { height: 28px; padding: 0 10px; gap: 6px; border-radius: 999px; }
.gacts svg { width: 15px; height: 15px; }
/* A post (feed.rs): its source's letter in a 34 px circle, the name, its age and ⋯; the picture at 1.91 : 1, rounded
   18; icon buttons and Ask; then its title and who shared it. */
.post-src { gap: 8px; min-height: 36px; margin-bottom: 8px; font: var(--f-footnote-b); }
.post-src .src { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--w-strong); color: var(--w-muted); font: 700 13px/18px var(--sys); }
.post-src small { margin-left: auto; }
.post-src svg { flex: none; width: 17px; height: 17px; padding: 9.5px; box-sizing: content-box; margin-right: -9.5px; color: var(--w-muted); }
.post-art { height: auto; aspect-ratio: 1.91; border-radius: 18px; }
.post-acts { gap: 0; margin: 4px -8px 0; color: var(--w-text); }
.post-acts > svg { padding: 7.5px; box-sizing: content-box; }
.post-acts .liked { color: var(--w-accent); }
.post-acts .btn { gap: 6px; padding: 0 10px; border-color: var(--w-border); font: var(--f-footnote-b); }
.post-acts .btn svg { width: 15px; height: 15px; }
.post-copy { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.post-copy > b { font: var(--f-headline); }
.post-by { display: flex; align-items: flex-start; gap: 8px; font: var(--f-subhead); color: var(--w-muted); }
.post-by .av { width: 18px; height: 18px; margin-top: 1px; }
.post-by b { display: block; font-weight: 600; color: var(--w-text); }
/* Notes (notes.rs): the page on the background colour; a row 18 / 12 in, rounded 14, its heading (body, bold) and date
   (caption, secondary at 80%), the preview and the tags 4 apart; its pin in a 28 px button of its own. */
.notes { background: var(--w-list); }
.note { display: flex; align-items: flex-start; min-height: 64px; padding: 18px 12px; border-radius: 14px; }
.note .nb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-right: 8px; }
.note-h { justify-content: space-between; gap: 8px; }
.note-h b { font: 700 15px/23px var(--sys); }
.note-h small { margin-left: 0; color: var(--w-muted); opacity: .8; }
.note p { margin: 0; }
.npin { flex: none; width: 28px; height: 28px; margin-top: -2px; display: grid; place-items: center; border-radius: 50%; color: var(--w-muted); opacity: .8; }
.npin.pinned { color: var(--w-text); opacity: 1; }
.npin svg { width: 17px; height: 17px; }
.tags { margin-top: 0; gap: 4px; }
.tags span { padding: 2px 8px; background: var(--w-strong); border-color: var(--w-border); font: var(--f-micro); }
/* A menu (gpui-component popup_menu): raised, a border, rounded 10, 4 in; 26 px items, 8 in, rounded 8, 2 apart; the
   one under the pointer (or whose submenu is open) on the selection fill. */
.share { width: auto; min-width: 168px; right: 196px; top: 176px; padding: 4px; background: var(--w-pop); border: 1px solid var(--w-border); border-radius: 10px; color: var(--w-text); box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; }
.share .sub { left: calc(100% + 2px); top: -1px; min-width: 168px; padding: 4px; border-radius: 10px; border-color: var(--w-border); box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; }
.share .mi { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; border-radius: 8px; }
.share .mi + .mi { margin-top: 2px; }
.share .mi.on { background: var(--w-sel); }
.share .mi > svg { width: 14px; height: 14px; margin-left: auto; color: var(--w-muted); }
.share .mi .av { width: 20px; height: 20px; }
@media (max-width: 760px) { .share { right: 180px; width: auto; } }
/* An artifact (artifact.rs): the bar 8 in, a small back button, the title 4 in; on the right the version button (its
   mode's icon, "v3" and a chevron, on the selection fill while its menu is open) and 32 px buttons, 17 px glyphs. */
.art-head { gap: 4px; padding: 0 8px; }
.art-head > svg { width: 28px; height: 28px; padding: 6.5px; color: var(--w-text); }
.art-head .tools { gap: 4px; color: var(--w-text); }
.art-head .tools > svg { width: 17px; height: 17px; padding: 7.5px; box-sizing: content-box; }
.ver { gap: 6px; padding: 0 10px; border-color: var(--w-border); background: var(--w-sel); font: var(--f-footnote-b); }
.ver svg { color: var(--w-text); }
.ver svg.up { transform: rotate(180deg); color: var(--w-muted); }
/* the page fills the pane under the bar, on the app's colours, as the artifacts template draws it */
.art-page { --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; margin: 0; border: 0; border-radius: 0; background: var(--w-bg); padding: 28px 20px 0; color: var(--w-text); font: 400 15px/1.55 var(--sys); }
.art-page h1 { margin: 0 0 6px; font: 600 25px/1.25 var(--sys); }
.art-page .sub { margin: 0; color: var(--w-muted); }
.art-page .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.art-page .card { min-width: 0; padding: 12px 14px; border: 1px solid var(--w-border); border-radius: 14px; background: var(--w-pop); }
.art-page .card .label { font-size: 13px; color: var(--w-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-page .card .value { font-size: 20.7px; font-weight: 600; font-variant-numeric: tabular-nums; }
.art-page h2 { margin: 24px 0 10px; font: 600 18.75px/1.25 var(--sys); }
.art-page table { width: 100%; border-collapse: collapse; font-size: 14px; }
.art-page th { text-align: left; font-weight: 500; color: var(--w-faint); font-size: 13px; padding: 0 10px 6px; }
.art-page td { padding: 8px 10px; border-top: 1px solid color-mix(in srgb, var(--w-border) 60%, transparent); }
.art-page .r { text-align: right; font-variant-numeric: tabular-nums; }
.art-page td:last-child { width: 40%; }
.art-page .bar { display: block; height: 8px; width: var(--w); border-radius: 4px; background: var(--c, var(--c1)); }
/* the menu the page draws (web/artifact-menu.js): 260 wide, raised, rounded 12; 30 px items, 15 px icons; versions in
   two lines, the current one marked, the shown one checked */
.vmenu { width: 260px; right: 100px; top: 48px; padding: 6px; border-radius: 12px; border-color: var(--w-border); box-shadow: 0 8px 24px #0004; font: 13px/1.3 var(--sys); }
.vmenu .mi { justify-content: flex-start; gap: 8px; min-height: 30px; padding: 0 8px; border-radius: 4px; color: var(--w-text); align-items: center; font: inherit; }
.vmenu .mi > svg { width: 15px; height: 15px; color: var(--w-muted); }
.vmenu .mi .tick { margin-left: auto; padding-left: 8px; color: var(--w-accent); }
.vmenu .mh { padding: 6px 8px 4px; font-size: 11px; color: var(--w-faint); }
.vmenu hr { margin: 6px 0; border-top-color: var(--w-border); }
.vmenu .ver-row { min-height: 42px; padding: 4px 8px; }
.vmenu .ver-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vmenu .ver-row span { display: flex; align-items: center; gap: 6px; }
.vmenu .ver-row em { font-style: normal; padding: 1px 6px; border-radius: 999px; background: var(--w-success-soft); color: var(--w-on-success-soft); font-size: 10px; font-weight: 600; }
.vmenu .ver-row small { font-size: 11px; color: var(--w-muted); }

/* ---------- Reminders, the pet and the agent page as the app draws them now ---------- */
/* A reminder's banner (scheduled.rs run_job): its title over its note, or "Reminder"; the app's own icon. */
.nicon { flex: none; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: #141416; color: #ececec; }
.nicon .mask { width: 24px; height: 24px; }
/* Scheduled (scheduled.rs): Routines and Check-ins as ui.rs sections (label, then rows on a card, dividers 16 in);
   reminders under their own label, each with its ring, bold title, due line and buttons, a line under each. */
.rsec { padding: 16px 8px 8px; font: var(--f-footnote-b); color: var(--w-muted); }
.rsec.rem-label { padding: 16px 8px 4px; font: var(--f-subhead-b); }
.rsec.checkins { padding-top: 32px; }
.rcard { border-radius: 14px; background: var(--w-raise); overflow: hidden; }
.lrow { display: flex; align-items: center; gap: 12px; min-height: 36px; margin: 4px; padding: 4px 10px; }
.lrow + .lrow { position: relative; }
.lrow + .lrow::before { content: ""; position: absolute; left: 12px; right: -4px; top: -4.5px; height: 1px; background: color-mix(in srgb, var(--w-border) 60%, transparent); }
.lrow > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lrow b { font: var(--f-callout); font-weight: 500; }
.lrow small { font: var(--f-footnote); color: var(--w-muted); }
.lrow .ico { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--w-strong); color: var(--w-text); }
.lrow .ico svg { width: 16px; height: 16px; }
.lrow .trail { flex: none; width: 15px; height: 15px; color: var(--w-faint); }
.lrow .acts { display: flex; color: var(--w-muted); }
.lrow .acts svg, .rem .acts svg { width: 15px; height: 15px; padding: 6.5px; box-sizing: content-box; }
.rfoot { padding: 8px 8px 16px; font: var(--f-footnote); color: var(--w-faint); }
.rem { align-items: flex-start; padding: 14px 0; border-top: 0; border-bottom: 1px solid var(--w-border); }
.rem .dot { width: 26px; height: 26px; margin-top: 1px; border: 1.5px solid var(--w-muted); color: color-mix(in srgb, var(--w-muted) 45%, transparent); }
.rem .dot svg { width: 14px; height: 14px; }
.rem b { font: 700 15px/23px var(--sys); }
.rem small { display: block; margin-top: 4px; font: var(--f-caption); }
.rem .acts { align-self: center; gap: 0; }
/* The menu bar item (menu_bar.rs): the Filo mark as a template image, the unread count beside it. */
.menubar .mb-filo { width: auto; height: auto; display: inline-flex; align-items: center; gap: 4px; border-radius: 0; background: none; }
.menubar .mb-filo::after { content: none; }
.menubar .mb-filo .mask { width: 16px; height: 16px; color: #fff; }
/* The tray (pet.rs): 256 wide, 4 in, raised, a border, rounded 14; its summary in caption semibold; rows 44 high, a
   24 px face in a 32 px ring (an accent arc while working, the warning colour when it needs you), the time after the
   name, the question's row on the warning tint with its answer button under it. */
.bub { border-color: var(--w-border); border-radius: 14px; color: var(--w-text); }
.desk .bub.tray { width: 256px; padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.tsum { height: 22px; padding: 0 0 0 8px; font: var(--f-caption-b); color: var(--w-faint); }
.tsum svg { color: var(--w-muted); margin-right: 4px; }
.trow { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-height: 44px; justify-content: center; padding: 0 8px; border-radius: 10px; }
.trow.need { padding: 8px; background: var(--w-warning-soft); }
.tr1 { display: flex; align-items: center; gap: 8px; }
.tr1 > div { flex: 1; min-width: 0; }
.tface { position: relative; flex: none; width: 32px; height: 32px; display: grid; place-items: center; }
.tface .av { width: 24px; height: 24px; }
.tring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--w-warning); }
.tarc { position: absolute; inset: 0; width: 32px; height: 32px; color: var(--w-link); animation: spin 1s linear infinite; }
.thd { display: flex; align-items: flex-start; gap: 4px; }
.thd b { font: var(--f-footnote-b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow .t { flex: none; margin: 1px 0 0; padding: 0; font: var(--f-caption); color: var(--w-faint); }
.trow small { color: var(--w-muted); }
.trow.need small { color: var(--w-on-warning-soft); }
.trow .ans { align-self: flex-start; display: inline-flex; align-items: center; height: 28px; margin: 0 0 0 40px; padding: 0 10px; border-radius: 999px; background: var(--w-accent); color: var(--w-bg); font: var(--f-footnote-b); }
/* An agent's page (agents.rs render_form): the header row's ⋯ at its end; labels in footnote semibold; the name 22 px;
   the model a small outline button; Instructions a medium input; Shared's tabs a segmented control. */
.acol { padding-top: 44px; }
.atop { position: relative; gap: 18px; }
.amore { top: 0; right: -8px; width: 28px; height: 28px; padding: 5px; }
.aname b { font: 600 22px/30px var(--sys); }
.amodel { font: var(--f-footnote); }
.mpill { height: 24px; gap: 4px; font-size: 13px; }
.mpill .claude { color: var(--w-muted); }
.pencil { background: var(--w-pop); }
.alabel { font: var(--f-footnote-b); color: var(--w-muted); }
.aline + .alabel { margin-top: 20px; }
.abox { min-height: 128px; padding: 8px 12px; border-radius: 10px; font: 400 13.125px/18.75px var(--sys); }
.ahint { font: var(--f-footnote); }
.aseg { padding: 2px; gap: 2px; border-radius: 14px; background: var(--w-strong); font: var(--f-footnote); }
.aseg span { min-height: 28px; padding: 5px; border-radius: 12px; border: 1px solid transparent; font-weight: 500; }
.aseg .on { background: var(--w-pop); border-color: var(--w-border); font-weight: 600; }
.amonth { margin-top: 12px; font: var(--f-caption-b); }

/* ---------- The dev team's story (Oct 15) ---------- */
/* The sidebar's app-icon spot with a picked icon: an avatar on a rounded square in its colour, 32 px (app_icon.rs) */
.rail .me.tile .icon { width: 32px; height: 32px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(#f5a766, #e57f36); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.rail .me.tile img { width: 76%; height: 76%; object-fit: contain; margin-top: 3px; }
/* Code, commits and links in chats and reports */
.win code { font: .86em/1 var(--mono); padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, var(--w-text) 9%, transparent); }
.sha { font: .9em var(--mono); color: var(--w-link); text-decoration: underline; text-underline-offset: 2px; padding: 0 2px; border-radius: 4px; background: color-mix(in srgb, var(--w-link) 14%, transparent); }
.lnk { color: var(--w-link); text-decoration: underline; text-underline-offset: 2px; }
.tool.oc svg { color: var(--w-text); width: 20px; height: 20px; }
/* A post's report row at its bubble's foot (conversation.rs report_footer): a file mark and the report's title */
.bubble button.proof { width: 100%; border: 0; border-top: 1px solid color-mix(in srgb, var(--w-border) 60%, transparent); background: none; color: inherit; font: inherit; padding: 8px 0 0; text-align: left; cursor: pointer; }
.bubble button.proof:active { opacity: .62; }
.bubble button.proof:focus-visible { outline: 2px solid var(--w-accent); outline-offset: 3px; border-radius: 4px; }
.proof .fmark { flex: none; width: 16px; height: 16px; color: var(--w-muted); }
/* The report opened as a page in the hero: Report and back, the agent's picture, who posted it and when */
.rhead .rback { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--w-text); cursor: pointer; }
.rhead .rback:hover { background: var(--w-sel); }
.rhead .rback svg { width: 15px; height: 15px; }
.rhead .rback:focus { outline: none; }
.rhead .rback:focus-visible { outline: 2px solid var(--w-accent); }
.rhero .av { width: 44px; height: 44px; }
.hero-win .rbody { overflow-y: auto; scrollbar-width: none; }
.hero-win .rbody code { white-space: nowrap; }
/* A screenshot of the split diff view: an editor window, the old file on the left and the new one on the right */
.dshot { width: 168px; height: 112px; border-radius: 10px; overflow: hidden; background: #1d1e23; border: 1px solid var(--w-border); display: flex; flex-direction: column; font-family: var(--sys); text-align: left; }
.dbar { flex: none; height: 16px; display: flex; align-items: center; gap: 3px; padding: 0 6px; background: #2a2b31; }
.dbar i { width: 5px; height: 5px; border-radius: 50%; background: #5b5d66; }
.dbar b { margin-left: 5px; font: 600 6.5px/1 var(--sys); color: #d4d7e0; }
.dmode { margin-left: auto; font: 500 5.5px/1 var(--sys); color: #9aa0ad; padding: 2px 4px; border-radius: 3px; background: #3a3c44; }
.dcols { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #34363e; }
.dcol { background: #1d1e23; padding: 5px 0; display: flex; flex-direction: column; gap: 2px; }
.dl { height: 8px; display: flex; align-items: center; gap: 3px; padding: 0 5px 0 4px; }
.dl::before { content: ""; flex: none; width: 6px; height: 3px; margin-right: 2px; border-radius: 1px; background: #474a53; }
.dl i { height: 3px; border-radius: 2px; background: #747886; width: var(--w, 60%); }
.dl i.kw { background: #c59ef0; }
.dl.del { background: rgba(248, 81, 73, .2); }
.dl.del i:not(.kw) { background: #f08a8e; }
.dl.add { background: rgba(63, 185, 80, .2); }
.dl.add i:not(.kw) { background: #74d18e; }
.th.t1 .dshot { zoom: 1.1; border: 0; }
.rproof .dshot { zoom: 1.43; border: 0; }
@container (max-width: 680px) { .th.t1 .dshot { zoom: .58; } }

/* ---------- Two teams over the hero (Oct 15): a segmented switch, then the picked team's window ---------- */
.team-switch { display: flex; width: max-content; max-width: 100%; margin: 0 auto 20px; padding: 3px; gap: 2px; border-radius: 999px; background: #17181b; border: 1px solid rgba(255, 255, 255, .1); }
.team-switch button { border: 0; background: none; color: #a4a8b3; font: inherit; font-size: 15px; line-height: 20px; padding: 8px 18px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s; }
.team-switch button:hover { color: #fff; }
.team-switch button[aria-selected="true"] { background: #2f3137; color: #fff; font-weight: 500; }
.team-switch button:focus-visible { outline: 2px solid #8db8f5; outline-offset: 2px; }
.hero-win[hidden] { display: none; }
/* A newsletter, shared in Writer's chat: the shop's name, a photo strip, two lines and its offer */
.nlshot { width: 168px; height: 112px; border-radius: 10px; overflow: hidden; background: #fbf8f2; display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; font-family: var(--sys); color: #2b2a26; text-align: left; }
.nlhead { display: flex; align-items: baseline; justify-content: space-between; }
.nlhead b { font: 700 8px/1 var(--sys); }
.nlhead span { font: 500 6px/1 var(--sys); color: #8a8578; }
.nlpic { flex: none; height: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.nlpic i { border-radius: 4px; background: linear-gradient(160deg, #c9a46a, #7c5a2e); }
.nlpic i:nth-child(2) { background: linear-gradient(160deg, #9fbf7a, #4d7340); }
.nlpic i:nth-child(3) { background: linear-gradient(160deg, #d98d6a, #8f4a33); }
.nll { display: block; height: 3px; border-radius: 2px; background: #ddd6c8; }
.nll.short { width: 62%; }
.nlbtn { margin-top: auto; align-self: flex-start; padding: 3px 7px; border-radius: 4px; background: #3f6b4a; color: #fff; font: 600 6px/1 var(--sys); }
.th.t1 .nlshot { zoom: 1.1; }
@container (max-width: 680px) { .th.t1 .nlshot { zoom: .58; } }
/* On a phone the chats run their full height, so the timeline beside them has nothing to place */
@media (max-width: 760px) { .tl { display: none; } .team-switch button { font-size: 14px; padding: 7px 14px; } }

/* ---------- The demo videos, in a dialog over the page ---------- */
.button.watch { height: 50px; padding: 0 22px 0 20px; font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; }
.button.watch svg { width: 14px; height: 14px; flex: none; }
.button.watch:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* The dialog fills the screen, clear; its panel sits in the middle, as large as the screen allows at 16:9. */
.demo { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; background: none; color: var(--text); }
.demo[open] { display: grid; place-items: center; animation: demo-in .2s ease-out; }
.demo::backdrop { background: rgba(0, 0, 0, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.demo-panel { width: min(1120px, 100%, (100dvh - 140px) * 16 / 9); }
.demo .team-switch { margin-bottom: 16px; }
.demo-close { position: fixed; top: 16px; right: 16px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); background: #17181b; color: #c9ccd3; cursor: pointer; transition: background-color .15s, color .15s; }
.demo-close:hover { background: #2f3137; color: #fff; }
.demo-close:focus-visible { outline: 2px solid #8db8f5; outline-offset: 2px; }
.demo-close svg { width: 18px; height: 18px; }
html:has(.demo[open]) { overflow: hidden; }
@keyframes demo-in { from { opacity: 0; transform: scale(.98); } }
@media (prefers-reduced-motion: reduce) { .demo[open] { animation: none; } }
.player { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0b0b0d; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.9); }
.player .poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player .play { position: absolute; inset: 0; margin: auto; width: 68px; height: 48px; padding: 0; border: 0; border-radius: 14px; background: none; cursor: pointer; }
.player .play svg { display: block; width: 100%; height: 100%; }
.player .play:focus-visible { outline: 2px solid #8db8f5; outline-offset: 3px; }
.player.started .play { display: none; }
@media (max-width: 760px) {
  .player { border-radius: 12px; }
  .demo-close { top: 12px; right: 12px; }
}