:root {
    /* The palette and the type of the replay player, so the site looks like the video. */
    --bg:#eef0ec; --paper:#ffffff; --tint:#e4e8e2; --fg:#1d2320; --muted:#66706a; --line:#cfd4cf;
    --write:#3d4a43; --accent:#1f6fd1; --accent-ink:#1859a8; --soft:#e3eefb; --user:#dfe9e2;
    --warn:#fff3c4; --warnfg:#6b5a2e; --warn-line:#e6d78f; --model-soft:#f1ead6;
    --serif: "IBM Plex Sans Condensed","Arial Narrow",system-ui,sans-serif;
    --sans: "IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
    --mono: "IBM Plex Mono",ui-monospace,Menlo,monospace;
  }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; scroll-padding-top:3.6rem; }
  body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.65 var(--sans); -webkit-font-smoothing:antialiased; }
  a { color:var(--accent-ink); }
  .wrap { max-width:62rem; margin:0 auto; padding:0 20px; }
  code { background:var(--tint); border:1px solid var(--line); padding:.08em .38em; border-radius:5px; font-size:.88em; }
  h1,h2,h3 { font-family:var(--serif); font-weight:600; line-height:1.12; letter-spacing:.005em; margin:0; }
  h2 { font-size:clamp(1.7rem,3.4vw,2.2rem); margin-bottom:.6rem; }
  .lead { color:var(--muted); font-size:1.12rem; max-width:40rem; }
  section { padding:4.5rem 0 0; }
  .eyebrow { text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; font-weight:700; color:var(--accent); margin-bottom:.7rem; }

  nav { position:sticky; top:0; z-index:10; background:rgba(238,240,236,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
  nav .wrap { display:flex; align-items:center; justify-content:space-between; height:3.6rem; }
  .brand { font-family:var(--serif); font-weight:700; font-size:1.25rem; text-decoration:none; color:var(--fg); }
  .brand span { color:var(--accent); }
  nav ul { list-style:none; display:flex; gap:1.4rem; margin:0; padding:0; font-size:.93rem; }
  nav ul a { color:var(--muted); text-decoration:none; }
  nav ul a:hover { color:var(--fg); }
  @media (max-width:640px) { nav ul li:not(:last-child) { display:none; } }

  .hero { padding:4.2rem 0 1rem; background:
      radial-gradient(60rem 28rem at 85% -10%, var(--soft), transparent 70%),
      radial-gradient(40rem 22rem at -10% 10%, #fff3c4, transparent 70%); }
  .hero .wrap { display:grid; grid-template-columns:1.15fr 1fr; gap:3rem; align-items:center; }
  @media (max-width:860px) { .hero .wrap { grid-template-columns:1fr; gap:2rem; } }
  h1 { font-size:clamp(2.4rem,5.6vw,3.9rem); margin-bottom:1.1rem; }
  h1 em { font-style:normal; color:var(--accent); }
  .buttons { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem; }
  .btn { display:inline-block; text-decoration:none; font-weight:600; padding:.7rem 1.25rem; border-radius:10px; border:1px solid var(--write); transition:transform .12s, box-shadow .12s; }
  .btn:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(29,35,32,.16); }
  .btn.primary { background:var(--write); border-color:var(--write); color:#fff; }
  .btn.ghost { background:var(--paper); color:var(--write); }
  .warn { background:var(--warn); color:var(--warnfg); border:1px solid var(--warn-line); border-radius:12px; padding:.8rem 1rem; font-size:.93rem; margin-top:1.6rem; }

  .chat { background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:1.1rem; box-shadow:0 18px 40px rgba(29,35,32,.09); }
  .chat .bar { font-size:.74rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin:0 0 .7rem; display:flex; justify-content:space-between; }
  .msg { max-width:88%; padding:.55rem .85rem; border-radius:14px; font-size:.93rem; line-height:1.45; margin:.45rem 0; }
  .msg.u { background:var(--user); margin-left:auto; border-bottom-right-radius:4px; }
  .msg.a { background:var(--paper); border:1px solid var(--line); border-bottom-left-radius:4px; }
  .note { margin:.9rem 0 .2rem; border:1px dashed var(--accent); border-radius:12px; padding:.6rem .85rem; font-size:.84rem; color:var(--accent-ink); background:#f3f8fe; }
  .note b { display:block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.2rem; }

  .cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr)); gap:1rem; margin-top:1.6rem; }
  .card { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:1.2rem 1.3rem; }
  .card .ico { width:2.3rem; height:2.3rem; border-radius:10px; background:var(--soft); color:var(--accent-ink); display:grid; place-items:center; font-weight:700; margin-bottom:.7rem; }
  .card h3 { font-size:1.15rem; margin-bottom:.35rem; }
  .card p { margin:0; color:var(--muted); font-size:.95rem; }

  .own { margin-top:1.6rem; background:linear-gradient(180deg,var(--soft),#f1f6fd); border:1px solid #c5d9f2; border-radius:18px; padding:1.5rem 1.6rem; }
  .own .cards { margin-top:1rem; }
  .own .card { background:rgba(255,255,255,.75); border-color:#d3e1f4; }

  .demo { margin-top:1.6rem; background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:1rem; box-shadow:0 14px 34px rgba(29,35,32,.07); }
  .tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.8rem; }
  .tabs button { font:inherit; font-size:.92rem; background:var(--tint); color:var(--fg); border:1px solid transparent; border-radius:999px; padding:.4rem 1rem; cursor:pointer; }
  .tabs button[aria-pressed="true"] { background:var(--accent); color:#fff; }
  .demo iframe { width:100%; aspect-ratio:16/9; border:1px solid var(--line); border-radius:12px; background:var(--tint); display:block; }
  .demo .cap { color:var(--muted); font-size:.88rem; margin:.7rem .2rem 0; }

  .classes { margin-top:1.6rem; display:grid; gap:.6rem; }
  .row { display:grid; grid-template-columns:13rem 1fr; gap:1rem; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:.8rem 1.1rem; }
  .row b { font-family:var(--serif); font-size:1.02rem; }
  .row span { color:var(--muted); }
  @media (max-width:640px) { .row { grid-template-columns:1fr; gap:.2rem; } }

  .paths { display:grid; grid-template-columns:repeat(auto-fit,minmax(20rem,1fr)); gap:1rem; margin-top:1.6rem; }
  .path { background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:1.4rem 1.5rem; }
  .path.main { border-color:var(--accent); box-shadow:0 10px 26px rgba(31,111,106,.0); }
  .path h3 { font-size:1.3rem; margin-bottom:.3rem; }
  .path .tagline { color:var(--muted); font-size:.95rem; margin:0 0 .6rem; }
  .path ol { margin:0; padding-left:1.2rem; }
  .path li { margin:.55rem 0; }
  pre { background:#1d2320; color:#e8eee9; border-radius:12px; padding:.9rem 1.1rem; overflow-x:auto; font-size:.84rem; line-height:1.55; margin:.6rem 0 0; }

  table { width:100%; border-collapse:collapse; margin-top:1.4rem; background:var(--paper); border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:.95rem; }
  th,td { text-align:left; padding:.7rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; }
  tr:last-child td { border-bottom:0; }
  th { background:var(--tint); font-weight:600; color:var(--muted); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; }

  footer { margin-top:5rem; border-top:1px solid var(--line); background:var(--tint); }
  footer .wrap { padding:1.6rem 20px; display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between; color:var(--muted); font-size:.9rem; }

  .contact { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.6rem; }
  .contact a { flex:1 1 16rem; display:block; background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:1.1rem 1.3rem; text-decoration:none; color:var(--fg); transition:transform .12s, box-shadow .12s; }
  .contact a:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(29,35,32,.08); border-color:var(--accent); }
  .contact b { display:block; font-family:var(--serif); font-size:1.15rem; }
  .contact span { color:var(--muted); font-size:.93rem; }
  .doc { max-width:44rem; margin:0 auto; padding:3rem 20px 0; }
  .doc h1 { font-size:clamp(2rem,4.5vw,2.8rem); margin-bottom:.6rem; }
  .doc h2 { font-size:1.5rem; margin:2.4rem 0 .5rem; }
  .doc p, .doc li { color:#33403b; }
  .doc .todo { background:var(--warn); color:var(--warnfg); border:1px solid var(--warn-line); border-radius:12px; padding:.7rem 1rem; font-size:.93rem; }

  /* The last section is short: give it room so that its anchor can reach the top of the screen. */
  #contact { min-height:calc(100vh - 13rem); }
  .weave-wrap { margin-top:3rem; text-align:center; }
  .weave { display:block; width:100%; height:12rem; border-radius:18px; background:linear-gradient(180deg,#f3f8fe,#fbf4e0); border:1px solid var(--line); }
  .weave-cap { color:var(--muted); font-family:var(--serif); margin:.8rem 0 0; }