@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 nav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; color: var(--body); }
.top nav a { transition: color .2s; }
.top nav a:hover { color: var(--text); }
.top .button.small { height: 36px; padding: 0 16px; font-size: 14px; }

/* ---------- 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; }
.button.plain { background: transparent; color: var(--body); }
.button.plain:hover { color: var(--text); opacity: 1; }

/* ---------- Hero ---------- */
.hero { text-align: center; padding: 88px 0 0; }
.mark { width: 76px; height: 76px; margin: 0 auto 28px; }
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: 64px 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-on-accent: #060B14;
  --w-bubble: #1D1D1F;
  --w-mine: #253244;
  --w-mine-line: #3D516C;
  --w-success: #5DC879;
  --w-warning: #E6A024;
  --w-danger: #FF8D85;
}
.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-on-accent: #F7FAFF;
  --w-bubble: #EBEAE7;
  --w-mine: #D1DCEB;
  --w-mine-line: #A1AFC4;
  --w-success: #007332;
  --w-warning: #865900;
  --w-danger: #B02A2D;
}
.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-on-accent: #241523;
  --w-bubble: #21372A;
  --w-mine: #1F4933;
  --w-mine-line: #2A6B4A;
  --w-success: #8AC157;
  --w-warning: #FA9A47;
  --w-danger: #FF928A;
}
.th-green-light {
  --w-bg: #E0E4E1;
  --w-list: #F3F7F4;
  --w-rail: #EAF1EC;
  --w-line: #d8e0db;
  --w-border: #C2CEC6;
  --w-raise: #E5EEE8;
  --w-strong: #D8E4DC;
  --w-pop: #F9FDFA;
  --w-sunk: #EAF1EC;
  --w-sel: rgba(27, 125, 80, 0.14);
  --w-text: #332532;
  --w-muted: #534C53;
  --w-faint: #6A6269;
  --w-accent: #1B7D50;
  --w-on-accent: #FFFAFE;
  --w-bubble: #E5EEE8;
  --w-mine: #CEE1D4;
  --w-mine-line: #9CB5A4;
  --w-success: #427000;
  --w-warning: #9A4900;
  --w-danger: #B02A2D;
}
.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-on-accent: #241523;
  --w-bubble: #1E2E3C;
  --w-mine: #26435B;
  --w-mine-line: #376386;
  --w-success: #5DC879;
  --w-warning: #E9A329;
  --w-danger: #FF928A;
}
.th-ocean-light {
  --w-bg: #E4E4E4;
  --w-list: #F7F7F7;
  --w-rail: #EEF0F3;
  --w-line: #dcdfe3;
  --w-border: #C6CCD3;
  --w-raise: #E8EDF2;
  --w-strong: #DBE2E9;
  --w-pop: #FCFCFC;
  --w-sunk: #EEF0F3;
  --w-sel: rgba(38, 114, 175, 0.14);
  --w-text: #332532;
  --w-muted: #544C53;
  --w-faint: #6A626A;
  --w-accent: #2672AF;
  --w-on-accent: #FFFAFE;
  --w-bubble: #E8EDF2;
  --w-mine: #D0DEEC;
  --w-mine-line: #9FB1C4;
  --w-success: #007433;
  --w-warning: #865900;
  --w-danger: #B02A2D;
}
.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-on-accent: #241523;
  --w-bubble: #3A2820;
  --w-mine: #5A3825;
  --w-mine-line: #855235;
  --w-success: #5DC879;
  --w-warning: #E6A525;
  --w-danger: #FF928A;
}
.th-ember-light {
  --w-bg: #E6E4E2;
  --w-list: #F9F7F5;
  --w-rail: #F6EFEC;
  --w-line: #e5deda;
  --w-border: #D5CAC4;
  --w-raise: #F4EBE6;
  --w-strong: #ECDFD9;
  --w-pop: #FDFBF9;
  --w-sunk: #F6EFEC;
  --w-sel: rgba(174, 85, 42, 0.14);
  --w-text: #332632;
  --w-muted: #544C53;
  --w-faint: #6B626A;
  --w-accent: #AE552A;
  --w-on-accent: #FFFAFE;
  --w-bubble: #F4EBE6;
  --w-mine: #EED8CE;
  --w-mine-line: #C7A99C;
  --w-success: #007433;
  --w-warning: #865900;
  --w-danger: #AF283A;
}
.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-on-accent: #241523;
  --w-bubble: #29233C;
  --w-mine: #3F335F;
  --w-mine-line: #604D90;
  --w-success: #5DC879;
  --w-warning: #E9A329;
  --w-danger: #FF928A;
}
.th-iris-light {
  --w-bg: #E5E5E5;
  --w-list: #F7F7F7;
  --w-rail: #F1F0F5;
  --w-line: #dfdee4;
  --w-border: #CCCAD5;
  --w-raise: #EDECF3;
  --w-strong: #E3E1EC;
  --w-pop: #FCFCFC;
  --w-sunk: #F1F0F5;
  --w-sel: rgba(114, 84, 183, 0.14);
  --w-text: #342633;
  --w-muted: #544C53;
  --w-faint: #6B626A;
  --w-accent: #7254B7;
  --w-on-accent: #FFFAFE;
  --w-bubble: #EDECF3;
  --w-mine: #DEDAF0;
  --w-mine-line: #B1ACC9;
  --w-success: #007533;
  --w-warning: #865900;
  --w-danger: #B02A2D;
}

/* ---------- The app window (mock) ---------- */
.win {
  container-type: inline-size;
  position: relative;
  display: flex;
  border-radius: 14px;
  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; }
.bubble.mine { border-color: var(--w-mine-line); }

/* side rail */
.rail {
  flex: none;
  width: 76px;
  margin: 8px 0 8px 8px;
  padding: 36px 0 10px;
  border-radius: 10px;
  background: var(--w-rail);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}
.lights { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; }
.lights i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }
.rail .me { width: 40px; height: 40px; margin: 6px 0 10px; }
.tab {
  width: 62px;
  padding: 7px 0 6px;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--w-muted);
  font-size: 10.5px;
}
.tab svg { width: 19px; height: 19px; }
.tab.on { background: var(--w-sel); color: var(--w-accent); }
.rail .tab:last-child { margin-top: auto; }

/* list column */
.list {
  flex: none;
  width: 268px;
  padding: 14px 8px;
  border-right: 1px solid var(--w-line);
  background: var(--w-list);
}
.list-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 10px; font-size: 17px; font-weight: 600; }
.list-head svg { width: 16px; height: 16px; color: var(--w-muted); }
.row { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 9px; }
.row.on { background: var(--w-sel); }
.row .av { width: 38px; height: 38px; }
.row .tx { flex: 1; min-width: 0; }
.row .nm { display: flex; justify-content: space-between; gap: 6px; font-weight: 600; font-size: 13.5px; }
.row .nm small { font-weight: 400; color: var(--w-faint); font-size: 11.5px; flex: none; }
.row .last { color: var(--w-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .last.work { color: var(--w-accent); display: flex; align-items: center; gap: 5px; }
.row .last.work svg { width: 12px; height: 12px; animation: spin 2.4s linear infinite; }
.row .badge { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--w-raise); color: var(--w-muted); margin-left: 6px; font-weight: 500; }
@keyframes spin { to { transform: rotate(360deg); } }

/* avatars: the app's animals on a coloured disc */
.av {
  flex: none;
  border-radius: 50%;
  background: var(--c, #3a3a40);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.av img { width: 118%; height: 118%; object-fit: cover; margin-top: 18%; }
.av.group { background: var(--w-raise); }
.av.group img { width: 70%; height: 70%; margin: 0; }

/* chat pane */
.pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pane-head { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-bottom: 1px solid var(--w-line); font-weight: 600; font-size: 14.5px; }
.pane-head .av { width: 28px; height: 28px; }
.pane-head .sub { font-weight: 400; color: var(--w-muted); }
.pane-head .end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.stack { display: flex; }
.stack .av { width: 24px; height: 24px; margin-left: -6px; box-shadow: 0 0 0 2px var(--w-bg); }
.msgs { flex: 1; padding: 18px 22px 8px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.who { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--w-muted); margin: 0 0 5px 2px; }
.who .av { width: 18px; height: 18px; }
.bubble {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 14px;
  background: var(--w-bubble);
  border: 1px solid var(--w-line);
}
.bubble.mine { align-self: flex-end; background: var(--w-mine); }
.msg { display: flex; flex-direction: column; }
.mention { color: var(--w-accent); font-weight: 600; }
.divider { align-self: center; font-size: 11.5px; color: var(--w-muted); background: var(--w-raise); padding: 2px 10px; border-radius: 999px; }
.typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--w-muted); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.composer {
  margin: 8px 18px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--w-line);
  border-radius: 999px;
  color: var(--w-muted);
  background: var(--w-bg);
}
.composer svg { width: 16px; height: 16px; }
.composer .ph { flex: 1; }
.composer .pick { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--w-text); }
.composer .pick svg { width: 12px; height: 12px; color: var(--w-muted); }
.composer .pick .claude { color: #d97757; width: 13px; height: 13px; }

/* small cards inside chats */
.card {
  border: 1px solid var(--w-line);
  border-radius: 12px;
  background: var(--w-raise);
  padding: 10px 12px;
}
.card-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--w-line); font-size: 12.5px; font-weight: 600; }
.status { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; padding: 2px 8px; border-radius: 999px; }
.status svg { width: 12px; height: 12px; }
.status.done { color: var(--w-success); background: color-mix(in srgb, var(--w-success) 14%, transparent); }
.status.work { color: var(--w-accent); background: color-mix(in srgb, var(--w-accent) 14%, transparent); }
.status.work svg { animation: spin 2.4s linear infinite; }
.status.need { color: var(--w-warning); background: color-mix(in srgb, var(--w-warning) 14%, transparent); }
.spark { color: #d97757; width: 14px; height: 14px; }
.codex { color: var(--w-text); width: 14px; height: 14px; }

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

/* ---------- Agent editor mock ---------- */
.sheet {
  font-family: var(--sys);
  background: var(--w-bg);
  border: 1px solid var(--w-line);
  border-radius: 16px;
  padding: 22px;
  color: var(--w-text);
  font-size: 13.5px;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.9);
  position: relative;
}
.sheet .top-row { display: flex; align-items: center; gap: 16px; }
.sheet .big-av { width: 76px; height: 76px; --c: #e2655a; }
.swatches { display: flex; gap: 7px; margin-top: 10px; }
.swatches i { width: 20px; height: 20px; border-radius: 50%; background: var(--s); }
.swatches i.on { box-shadow: 0 0 0 2px var(--w-bg), 0 0 0 4px var(--w-text); }
.field { margin-top: 16px; }
.field label { display: block; color: var(--w-muted); font-size: 12px; margin-bottom: 6px; }
.input { border: 1px solid var(--w-line); background: var(--w-raise); border-radius: 10px; padding: 9px 12px; line-height: 1.5; }
.input.area { min-height: 92px; color: var(--w-text); }
.select { display: flex; align-items: center; gap: 8px; }
.select .chev { margin-left: auto; color: var(--w-muted); width: 14px; height: 14px; }
.menu {
  position: absolute;
  right: -18px;
  bottom: -40px;
  width: 236px;
  background: var(--w-pop);
  border: 1px solid var(--w-line);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  font-size: 13px;
}
.menu .mh { padding: 6px 10px 4px; color: var(--w-faint); font-size: 11.5px; display: flex; align-items: center; gap: 6px; }
.menu .mh svg { width: 12px; height: 12px; }
.menu .mi { padding: 6px 10px; border-radius: 7px; display: flex; align-items: center; justify-content: space-between; }
.menu .mi.on { background: var(--w-sel); }
.menu .mi svg { width: 14px; height: 14px; color: var(--w-accent); }
.menu hr { border: 0; border-top: 1px solid var(--w-line); margin: 5px 4px; }

/* ---------- Coding mock ---------- */
.task-head { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--w-line); }
.task-head svg { width: 16px; height: 16px; color: var(--w-muted); }
.task-head b { font-size: 14.5px; }
.task-head span { color: var(--w-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-head .btn { margin-left: auto; }
.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;
}
.btn svg { width: 13px; height: 13px; }
.btn.primary { background: var(--w-text); color: var(--w-bg); border-color: transparent; }
.meta-line { text-align: center; color: var(--w-muted); font-size: 12px; padding: 8px 0 2px; }
.log { padding: 10px 26px 14px; display: flex; flex-direction: column; gap: 9px; }
.cmd { display: flex; align-items: center; gap: 10px; font: 12px/1.4 var(--mono); color: var(--w-muted); white-space: nowrap; overflow: hidden; }
.cmd svg { width: 14px; height: 14px; flex: none; }
.cmd span { overflow: hidden; text-overflow: ellipsis; }
.tb { align-self: flex-start; max-width: 84%; padding: 8px 13px; border-radius: 12px; background: var(--w-bubble); border: 1px solid var(--w-line); }
.tb code { font: 12px var(--mono); background: var(--w-raise); padding: 1px 5px; border-radius: 5px; }
.tb.from { align-self: flex-end; background: var(--w-mine); border-color: transparent; }
.fin { align-self: center; display: inline-flex; align-items: center; gap: 6px; color: var(--w-muted); font-size: 12.5px; }
.fin svg { width: 14px; height: 14px; }
.task-foot { border-top: 1px solid var(--w-line); text-align: center; color: var(--w-muted); font-size: 12px; padding: 11px 16px; }
.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;
}
.ask { width: 360px; left: -36px; bottom: -56px; }
.ask .ah { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ask .status { white-space: nowrap; }
.ask p { margin: 8px 0 10px; color: var(--w-muted); }
.ask pre { margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; background: var(--w-sunk); font: 12px/1.4 var(--mono); color: var(--w-text); white-space: pre-wrap; }
.ask .row-btns { display: flex; gap: 6px; }
.with-float { position: relative; }

/* ---------- Feed mock ---------- */
.feed { flex: 1; min-width: 0; padding: 22px 28px 0; }
.feed-inner { max-width: 560px; margin: 0 auto; }
.feed-title { display: flex; align-items: center; justify-content: space-between; font-size: 24px; font-weight: 700; }
.feed-title span { display: flex; gap: 16px; color: var(--w-muted); }
.feed-title svg { width: 17px; height: 17px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; margin: 16px 0; padding: 3px; border-radius: 10px; background: var(--w-raise); font-size: 12.5px; text-align: center; color: var(--w-muted); }
.seg span { padding: 5px; border-radius: 8px; }
.seg .on { background: var(--w-sel); color: var(--w-text); font-weight: 600; }
.topics { display: flex; gap: 14px; }
.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; }
.topic .ring img { width: 120%; height: 120%; object-fit: cover; margin-top: 18%; }
.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-art .moon { position: absolute; right: 18%; top: 22%; width: 54px; height: 54px; border-radius: 50%; background: #fff3d6; box-shadow: 0 0 60px 14px rgba(255, 236, 190, 0.55); }
.post-art .hill { position: absolute; left: -10%; right: -10%; bottom: -60px; height: 140px; border-radius: 50%; background: #1b1838; }
.post-art .hill.b { left: 30%; bottom: -80px; background: #121029; }
.post-art .tag { position: absolute; left: 14px; bottom: 12px; font-size: 11px; color: #fff; background: rgba(0, 0, 0, .35); padding: 3px 9px; border-radius: 999px; backdrop-filter: blur(6px); }
.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; }
.post-t { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.post-s { color: var(--w-muted); }
.side-chat {
  width: 290px;
  left: -36px;
  top: 300px;
  padding: 0;
  overflow: hidden;
}
.side-chat .sh { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-bottom: 1px solid var(--w-line); font-weight: 600; }
.side-chat .sh .av { width: 22px; height: 22px; --c: #3f9a6f; }
.side-chat .sb { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.side-chat .q { align-self: flex-end; background: var(--w-mine); padding: 7px 11px; border-radius: 12px; max-width: 85%; }
.side-chat .a { background: var(--w-strong); padding: 7px 11px; border-radius: 12px; max-width: 92%; color: var(--w-text); }

/* ---------- Notes mock ---------- */
.notes { flex: 1; min-width: 0; padding: 22px 30px 0; }
.notes-title { display: flex; align-items: center; justify-content: space-between; font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.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.on { background: var(--w-raise); }
.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-h svg { width: 14px; height: 14px; color: var(--w-faint); align-self: center; }
.note-h svg.pinned { color: var(--w-text); }
.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); }
.note.on .tags span { background: var(--w-bg); }
.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 .mh { padding: 6px 10px 4px; color: #8e8e95; font-size: 11.5px; }
.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 { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px 0 18px; }
.art-head > svg { width: 16px; height: 16px; color: var(--w-muted); }
.art-head b { font-size: 14.5px; 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; }
.ap-kick { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8b8f99; }
.ap-title { font-size: 21px; font-weight: 700; margin: 4px 0 2px; }
.ap-sub { color: #9a9ea8; font-size: 12.5px; }
.ap-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.ap-stat { border: 1px solid #25272c; border-radius: 10px; padding: 9px 11px; }
.ap-stat small { color: #8b8f99; font-size: 11px; }
.ap-stat b { display: block; font-size: 18px; margin-top: 2px; }
.ap-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ap-day { border-radius: 10px; border: 1px solid #25272c; border-left: 3px solid var(--d); padding: 9px 10px; font-size: 12px; color: #c4c7ce; }
.ap-day b { display: block; color: #fff; font-size: 12.5px; margin-bottom: 4px; }
.ap-bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-top: 14px; padding-top: 4px; border-top: 1px solid #1e2025; }
.ap-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: #5a8cff; opacity: .85; }
.ap-bars i:nth-child(3n) { background: #8fb4ff; }
.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-card .rh small { font-weight: 400; color: var(--w-muted); font-size: 12.5px; }
.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 .dot.done { background: var(--w-accent); border-color: var(--w-accent); color: var(--w-bg); }
.rem .dot svg { width: 13px; height: 13px; }
.rem b { display: block; font-weight: 600; }
.rem.is-done b { color: var(--w-muted); text-decoration: line-through; text-decoration-color: var(--w-faint); }
.rem small { color: var(--w-muted); display: inline-flex; align-items: center; gap: 4px; }
.rem small svg { width: 12px; height: 12px; }
.rem small.over { color: var(--w-danger); }
.rem .owner { margin-left: auto; width: 26px; height: 26px; }
.rem-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px 0 12px; }
.rem-btns span { height: 34px; border-radius: 999px; display: grid; place-items: center; font-weight: 600; font-size: 13px; background: var(--w-raise); border: 1px solid var(--w-sel); }
.rem-btns span.main { background: var(--w-accent); color: var(--w-bg); border-color: transparent; }
.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 img { width: 34px; height: 34px; border-radius: 8px; background: #000; }
.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);
}
.bub.working { right: 40px; bottom: 168px; width: 300px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; }
.bub.working .av { width: 30px; height: 30px; --c: #8a5cd6; }
.bub.working small { display: block; color: var(--w-muted); }
.bub.working .t { margin-left: auto; color: var(--w-faint); align-self: flex-start; }
.bub.reply { right: 40px; bottom: 24px; width: 300px; padding: 14px 16px; }
.bub.reply b { font-size: 14.5px; display: block; }
.bub.reply .link { color: var(--w-accent); display: block; margin: 4px 0 10px; }
.bub.reply small { color: var(--w-faint); display: block; line-height: 1.6; }
.kbd { font-family: var(--sys); }
.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; }
.sleep { position: absolute; left: 430px; bottom: 34px; width: 92px; opacity: .9; }
.sleep-tip { position: absolute; left: 380px; bottom: 132px; width: 200px; padding: 9px 12px; font-size: 12px; }
.sleep-tip b { display: block; font-size: 12.5px; }
.sleep-tip small { color: rgba(255, 255, 255, 0.55); }

/* ---------- 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; }
.tree {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--raised);
  padding: 18px 20px;
  font: 13px/1.75 var(--mono);
  color: var(--body);
  overflow-x: auto;
  white-space: pre;
}
.tree b { color: var(--text); font-weight: 400; }
.tree i { color: var(--faint); font-style: normal; }

/* ---------- Get started ---------- */
.steps { display: grid; gap: 14px; margin-top: 8px; }
.step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; }
.step .n { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; color: var(--body); font-size: 14px; }
.step h3 { margin-top: 6px; }
.step p { margin: 0; color: var(--body); font-size: 15px; line-height: 1.55; }
.command {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 6px 6px 6px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--raised);
}
.command code {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  color: var(--text);
  font: 13.5px/1.5 var(--mono);
  scrollbar-width: none;
}
.command code::-webkit-scrollbar { display: none; }
.copy-btn {
  flex: none;
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--body);
  font: 500 13px "GoogleSans", system-ui, sans-serif;
  cursor: pointer;
  transition: color .2s;
}
.copy-btn:hover { color: var(--text); }
.note-line { margin: 18px 0 0; color: var(--faint); font-size: 13.5px; line-height: 1.55; }

/* ---------- 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; }
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; }
  .rail { width: 60px; }
  .tab { width: 50px; font-size: 9.5px; }
  .bubble { max-width: 90%; }
}
@container (max-width: 460px) {
  .rail { display: none; }
  .composer .pick.hide-s { 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; }
  .ap-days { grid-template-columns: 1fr 1fr; }
  .ap-stat b { font-size: 15px; white-space: nowrap; }
  .ap-stats { gap: 6px; }
  .log { padding: 10px 14px; }
  .task-head span { display: none; }
}

/* ---------- Page responsiveness ---------- */
@media (max-width: 1220px) {
  .ask, .side-chat { left: -12px; }
  .menu, .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; }
  .menu { right: 8px; }
  .ask { left: 8px; }
  .side-chat { left: 8px; }
  .notif { right: 8px; }
}
@media (max-width: 760px) {
  .top nav { display: none; }
  .top .button.small { margin-left: auto; }
  .hero { padding-top: 56px; }
  .mark { width: 64px; height: 64px; }
  .lede { font-size: 16.5px; }
  section.feature { padding-top: 96px; }
  .win.hero-win { height: 540px; }
  .local-grid, .kinds { grid-template-columns: 1fr; }
  .float-card, .menu, .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; }
  .sleep, .sleep-tip { display: none; }
  .mbmenu { right: 12px; }
  .desk .win-mini { display: none; }
  .bub.reply { right: 12px; left: 12px; bottom: 12px; width: auto; }
  .bub.working { right: 12px; left: 12px; bottom: 168px; width: auto; }
  .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; }
}
.step p code { font: 13px var(--mono); color: var(--text); background: var(--raised); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; }

/* ---------- 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: 30px; height: 19px; object-fit: contain; opacity: .6; }
.tab.on .tab-pic { opacity: 1; }
.eb-pic { width: 24px; height: 16px; object-fit: contain; }

/* ---------- Edit agent ---------- */
.sheet-title { font-size: 19px; font-weight: 700; }
.big-wrap { position: relative; width: 88px; margin: 14px auto 4px; }
.sheet .big-av { width: 88px; height: 88px; }
.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; }
.field label.lrow { display: flex; justify-content: space-between; }
.field label.lrow span { color: var(--w-text); font-weight: 600; }
.sheet .swatches { flex-wrap: wrap; gap: 8px; margin-top: 0; }
.input.select.pill { display: inline-flex; width: auto; padding: 6px 12px; border-radius: 9px; }
.input.select.pill .chev { margin-left: 4px; }
.hint { margin: 8px 0 0; color: var(--w-muted); font-size: 12.5px; }

/* ---------- 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.reply { right: 380px; }
.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.reply, .desk .bub.tray { right: auto; left: 50%; margin-left: -150px; }
  .desk { height: 820px; }
}
@media (max-width: 760px) {
  .desk .bub.tray, .desk .bub.reply { left: 12px; right: 12px; margin-left: 0; width: auto; }
  .desk .pet { bottom: 290px; }
  .desk .pet-shadow { bottom: 282px; }
}
.task-head b { white-space: nowrap; }
.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); }