:root {
    --viz-1:#2a78d6; --viz-2:#eb6834; --viz-3:#1baf7a; --viz-pos:#2a78d6; --viz-neg:#e34948; --viz-mid:#f0efec;
    --bg:#ffffff; --bg-2:#f7f9fc; --line:#e6e9ef; --line-2:#d5dbe5;
    --ink:#0f172a; --ink-2:#475569; --muted:#6b7280;
    --blue:#2563eb; --blue-2:#1d4ed8; --blue-soft:#eaf1ff; --blue-line:#c7d7fb;
    --phat:#eb6834; --phat-soft:#fdeee6; --amber:#b45309; --amber-soft:#fff4e0; --green:#15803d; --green-soft:#e8f7ee; --red:#b91c1c;
    --user:#eef3fb;
    --sans:"Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; min-height:100vh; font:15px/1.6 var(--sans); color:var(--ink); background:var(--bg); display:flex; flex-direction:column; -webkit-font-smoothing:antialiased; }
  ::selection { background:var(--blue-soft); }
  a { color:var(--blue); text-decoration:none; }

  header { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 24px; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
  .brand { display:flex; align-items:center; gap:12px; }
  .wordmark { display:flex; align-items:center; gap:8px; font-weight:700; font-size:17px; letter-spacing:-.01em; color:var(--ink); background:transparent; border:0; padding:4px 6px; margin-left:-6px; border-radius:10px; cursor:pointer; font-family:inherit; }
  .wordmark:hover { background:var(--bg-2); }
  .wordmark .logo { width:26px; height:26px; }
  .hero-logo { width:132px; height:132px; margin:0 auto 22px; display:block; filter:drop-shadow(0 18px 34px rgba(37,99,235,.22)); animation:float 7s ease-in-out infinite; }
  @keyframes float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-6px) } }
  @media (prefers-reduced-motion: reduce) { .hero-logo { animation:none; } }
  .pill { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-2); border:1px solid var(--line); background:var(--bg); border-radius:999px; padding:5px 11px; }
  .pill .dot { width:7px; height:7px; border-radius:50%; background:#f59e0b; }
  .pill.live .dot { background:#22c55e; }
  .right { display:flex; align-items:center; gap:8px; }
  nav.links { display:flex; gap:4px; margin-left:10px; }
  nav.links a { font-size:13.5px; font-weight:500; color:var(--ink-2); padding:6px 10px; border-radius:8px; }
  nav.links a:hover { background:var(--bg-2); color:var(--ink); }
  body:not(.home) nav.links { display:none; }
  .btn { font:500 13.5px var(--sans); border:1px solid var(--line-2); background:var(--bg); color:var(--ink); border-radius:10px; padding:7px 13px; cursor:pointer; transition:background .12s, border-color .12s, box-shadow .12s; }
  .btn:hover { background:var(--bg-2); border-color:#c4ccd8; }
  .btn.primary { background:var(--blue); border-color:var(--blue); color:#fff; }
  .btn.primary:hover { background:var(--blue-2); border-color:var(--blue-2); }
  .btn.quiet { border-color:transparent; color:var(--ink-2); }
  .btn.quiet:hover { background:var(--bg-2); color:var(--ink); }
  .avatar { width:30px; height:30px; border-radius:50%; background:var(--blue-soft); color:var(--blue); font-weight:600; font-size:13px; display:grid; place-items:center; border:1px solid var(--blue-line); }
  .menu { position:relative; display:flex; align-items:center; gap:8px; }
  .menu .pop { position:absolute; right:0; top:40px; min-width:200px; background:var(--bg); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:6px; display:none; z-index:6; }
  .menu.on .pop { display:block; }
  .pop button { display:block; width:100%; text-align:left; font:14px var(--sans); border:0; background:transparent; padding:9px 10px; border-radius:8px; cursor:pointer; color:var(--ink); }
  .pop button:hover { background:var(--bg-2); }
  .pop .who { padding:8px 10px 6px; font-size:12.5px; color:var(--muted); border-bottom:1px solid var(--line); margin-bottom:4px; }

  main { flex:1; display:flex; flex-direction:column; width:100%; max-width:760px; margin:0 auto; padding:0 18px; }
  body.home main { flex:0 0 auto; }
  body.home #composer { position:static; background:none; padding:6px 0 4px; }
  body.home #thread { padding-bottom:6px; }
  body.home .foot { display:none; }
  #chips { display:none; flex-wrap:wrap; justify-content:center; gap:8px; margin:12px 0 30px; }
  body.home #chips { display:flex; }
  .chip-q { display:inline-flex; align-items:center; gap:7px; font:500 13.5px var(--sans); border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:999px; padding:8px 14px 8px 11px; cursor:pointer; box-shadow:0 1px 2px rgba(15,23,42,.04); }
  .chip-q:hover { border-color:var(--blue-line); color:var(--blue); background:var(--blue-soft); }
  .chip-q .ic { width:16px; height:16px; color:var(--blue); display:inline-grid; } .chip-q .ic svg { width:16px; height:16px; }
  #chips .status { width:100%; text-align:center; font-size:12.5px; color:var(--muted); margin-top:6px; }
  #landing { display:none; }
  body.home #landing { display:block; }
  #thread { flex:1; padding:8px 0 28px; }

  /* empty state */
  body.home { background:#fff radial-gradient(900px 420px at 50% -60px, #eaf1ff 0%, rgba(234,241,255,.55) 45%, rgba(255,255,255,0) 72%) no-repeat; }
  .hero-bg { position:absolute; left:50%; top:-90px; transform:translateX(-50%); width:min(1200px, 140vw); height:560px; z-index:-1; pointer-events:none; }
  .empty { position:relative; text-align:center; margin:5vh 0 10px; padding-top:34px; }
  .empty svg.curve { position:absolute; left:50%; top:0; transform:translateX(-50%); width:min(760px, 100%); height:180px; overflow:visible; }
  .empty h1 { font-size:clamp(26px, 3.6vw, 34px); font-weight:600; letter-spacing:-.02em; line-height:1.2; margin:0 auto 10px; max-width:620px; }
  .empty h1 em { font-style:normal; color:var(--blue); }
  .empty p { color:var(--ink-2); margin:0 auto 14px; max-width:600px; font-size:16px; }
  .empty .eyebrow { display:inline-block; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); background:var(--blue-soft); border-radius:999px; padding:4px 10px; margin-bottom:12px; }
  .suggest { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; }
  .sug { text-align:left; font:inherit; border:1px solid var(--line); background:var(--bg); border-radius:12px; padding:12px 14px; cursor:pointer; color:var(--ink); transition:border-color .12s, box-shadow .12s, transform .12s; }
  .sug:hover { border-color:var(--blue-line); box-shadow:var(--shadow); transform:translateY(-1px); }
  .sug .k { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--blue); margin-bottom:5px; }
  .sug .t { font-size:13.5px; line-height:1.4; color:var(--ink-2); }

  /* thread */
  .turn { margin:20px 0; animation:rise .3s ease both; }
  @keyframes rise { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
  .user { background:var(--user); border-radius:16px 16px 4px 16px; padding:10px 14px; max-width:78%; margin-left:auto; width:fit-content; white-space:pre-wrap; font-size:14.5px; }
  .bot { padding:0 2px; font-size:15px; }
  .bot h3 { font-size:16px; font-weight:600; margin:14px 0 6px; letter-spacing:-.01em; }
  .bot p { margin:8px 0; }
  .bot ul { margin:6px 0 10px 20px; padding:0; } .bot li { margin:3px 0; }
  .bot code { font-family:ui-monospace, Menlo, monospace; font-size:12.5px; background:var(--bg-2); padding:1px 5px; border-radius:5px; }
  .bot table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:13.5px; margin:10px 0; }
  .bot th, .bot td { padding:7px 8px; border-bottom:1px solid var(--line); text-align:right; vertical-align:top; }
  .bot th:first-child, .bot td:first-child { text-align:left; }
  .bot th { font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
  .meta { font-size:11.5px; color:var(--muted); margin-top:8px; }
  .typing { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:13.5px; }
  .typing i { width:6px; height:6px; border-radius:50%; background:var(--blue); animation:pulse 1.2s infinite ease-in-out; }
  .typing i:nth-child(2) { animation-delay:.2s } .typing i:nth-child(3) { animation-delay:.4s }
  @keyframes pulse { 0%,80%,100% { transform:scale(.5); opacity:.4 } 40% { transform:scale(1); opacity:1 } }

  /* cards */
  .cards { display:flex; flex-wrap:wrap; gap:10px; margin:2px 0 14px; }
  .inst { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:11px 13px 12px; font-size:12.5px; flex:1 1 260px; max-width:100%; box-shadow:var(--shadow); }
  .inst .h { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:7px; }
  .inst .h b { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--blue); }
  .inst .h span { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .inst .sub { color:var(--muted); font-size:11.5px; margin:2px 0 6px; }
  .inst .note { color:var(--amber); font-size:11.5px; margin-top:7px; padding-top:7px; border-top:1px dashed var(--line); }
  .inst table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:12.5px; }
  .inst th, .inst td { padding:3px 5px; border-bottom:1px solid var(--line); text-align:right; }
  .inst th:first-child, .inst td:first-child { text-align:left; }
  .inst th { font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
  .inst .kv { display:grid; grid-template-columns:auto 1fr; gap:2px 12px; }
  .inst details.more summary { cursor:pointer; font-size:11.5px; color:var(--blue); font-weight:600; margin:2px 0 6px; list-style:none; }
  .inst details.more summary::-webkit-details-marker { display:none; }
  .inst details.more summary:before { content:"▸ "; } .inst details.more[open] summary:before { content:"▾ "; }
  .inst .kv span { color:var(--muted); } .inst .kv b { font-weight:500; font-variant-numeric:tabular-nums; }
  .inst.error { border-color:#f3c2c2; background:#fff8f8; } .inst.error .h b { color:var(--red); }
  .nw { white-space:nowrap; }
  .meter { display:inline-block; vertical-align:middle; width:56px; height:5px; border-radius:8px; background:var(--bg-2); margin-right:6px; overflow:hidden; border:1px solid var(--line); }
  .meter i { display:block; height:100%; background:var(--blue); }
  .chip { display:inline-block; font-size:11px; font-weight:600; letter-spacing:.05em; padding:3px 8px; border-radius:6px; margin:0 6px 6px 0; }
  .chip.q { color:var(--blue); background:var(--blue-soft); } .chip.p { color:var(--phat); background:var(--phat-soft); }
  .ladder { width:100%; height:auto; display:block; margin:2px 0 8px; }
  .thumbs { display:flex; flex-wrap:wrap; gap:6px; }
  .thumbs img { width:104px; height:68px; object-fit:cover; border:1px solid var(--line); border-radius:8px; cursor:zoom-in; background:#fff; }

  /* composer */
  #composer { position:sticky; bottom:0; padding:12px 0 16px; background:linear-gradient(to top, var(--bg) 70%, transparent); }
  #composer form { display:flex; align-items:flex-end; gap:8px; border:1px solid var(--line-2); border-radius:16px; padding:8px 8px 8px 16px; background:var(--bg); box-shadow:var(--shadow); transition:border-color .12s, box-shadow .12s; }
  #composer form:focus-within { border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-soft); }
  #composer textarea { flex:1; font:15px/1.45 var(--sans); color:var(--ink); border:0; outline:0; resize:none; background:transparent; max-height:170px; padding:6px 0; }
  #composer textarea::placeholder { color:var(--muted); }
  .send { width:36px; height:36px; border:0; border-radius:10px; background:var(--blue); color:#fff; cursor:pointer; display:grid; place-items:center; transition:background .12s; }
  .send:hover { background:var(--blue-2); } .send:disabled { opacity:.4; }
  .send svg { width:16px; height:16px; }
  .foot { text-align:center; color:var(--muted); font-size:11.5px; margin-top:9px; }

  /* landing */
  .wrap { width:100%; max-width:1100px; margin:0 auto; padding:0 24px; }
  .sec { padding:64px 0 24px; }
  .sec h2 { font-size:clamp(24px, 3vw, 32px); font-weight:700; letter-spacing:-.02em; text-align:center; margin:0 0 8px; }
  .sec .lead { text-align:center; color:var(--ink-2); font-size:16px; margin:0 auto 34px; max-width:640px; }
  .grid { display:grid; gap:16px; }
  .g2 { grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
  .g2.see { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  @media (max-width: 720px) { .g2.see { grid-template-columns:1fr; } }
  .g3 { grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
  .g4 { grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
  .vis { background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:16px 18px 14px; box-shadow:var(--shadow); }
  .vis h3 { font-size:15px; font-weight:600; margin:0 0 2px; }
  .vis .cap { font-size:12.5px; color:var(--muted); margin-bottom:10px; }
  .vis svg { width:100%; height:auto; display:block; }
  .vis table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:12.5px; }
  .vis th, .vis td { padding:4px 5px; border-bottom:1px solid var(--line); text-align:right; }
  .vis th:first-child, .vis td:first-child { text-align:left; }
  .vis th { font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
  .tile { background:var(--bg); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
  .tile-bar { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1px solid var(--line); font-size:11.5px; color:var(--muted); }
  .tile-bar .logo { width:18px; height:18px; display:block; }
  .tile-img { display:block; background:#fff; }
  .tile-img { padding:8px; background:#fbfcfe; }
  .tile-img img { width:100%; height:196px; object-fit:contain; display:block; transition:transform .25s; }
  .tile:hover .tile-img img { transform:scale(1.02); }
  .tile-cap { padding:12px 14px 14px; }
  .tile-cap h3 { font-size:15px; font-weight:600; margin:0 0 4px; }
  .tile-cap p { font-size:13.5px; color:var(--ink-2); margin:0; }
  .tile-body { padding:12px 14px 6px; }
  .tile-trade { font-size:12.5px; color:var(--ink-2); margin-bottom:8px; }
  .tile-body table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:13px; }
  .tile-body th, .tile-body td { padding:5px 6px; border-bottom:1px solid var(--line); text-align:right; }
  .tile-body th:first-child, .tile-body td:first-child { text-align:left; }
  .tile-body th { font-size:11px; font-weight:600; color:var(--blue); text-transform:uppercase; letter-spacing:.05em; }
  .tile-flags { font-size:11.5px; color:var(--muted); margin-top:8px; }
  .unlock { background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:20px; display:flex; flex-direction:column; box-shadow:var(--shadow); }
  .unlock .k { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin-bottom:8px; }
  .unlock h3 { font-size:17px; font-weight:600; margin:0 0 6px; letter-spacing:-.01em; }
  .unlock p { color:var(--ink-2); font-size:14px; margin:0 0 14px; flex:1; }
  .unlock .try { text-align:left; font:13px var(--sans); border:1px solid var(--blue-line); background:var(--blue-soft); color:var(--blue); border-radius:10px; padding:9px 12px; cursor:pointer; }
  .unlock .try:hover { background:#dde8ff; }
  .unlock .try span { color:var(--ink); font-weight:500; }
  .pillar { background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:20px; }
  .pillar .ic { width:38px; height:38px; border-radius:10px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; margin-bottom:12px; }
  .pillar .ic svg { width:20px; height:20px; }
  .pillar h3 { font-size:16px; font-weight:600; margin:0 0 6px; }
  .pillar p { color:var(--ink-2); font-size:14px; margin:0; }
  .steps { counter-reset:step; }
  .step { display:grid; grid-template-columns:44px 1fr; gap:14px; padding:18px 0; border-top:1px solid var(--line); }
  .step .n { width:36px; height:36px; border-radius:50%; background:var(--ink); color:#fff; font-weight:600; display:grid; place-items:center; font-size:14px; }
  .step h3 { font-size:16px; font-weight:600; margin:6px 0 4px; }
  .step p { color:var(--ink-2); margin:0; font-size:14.5px; }
  .stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin:0 0 20px; }
  .stat { background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
  .stat b { display:block; font-size:24px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
  .stat span { font-size:12.5px; color:var(--muted); }
  .cta { text-align:center; background:linear-gradient(180deg, var(--blue-soft), #fff); border:1px solid var(--blue-line); border-radius:20px; padding:44px 24px; margin:40px 0 10px; }
  .cta h2 { margin-bottom:8px; } .cta p { color:var(--ink-2); margin:0 auto 20px; max-width:560px; }
  .faq { max-width:820px; margin:0 auto; }
  .faq details { border-top:1px solid var(--line); padding:14px 4px; }
  .faq details:last-child { border-bottom:1px solid var(--line); }
  .faq summary { cursor:pointer; font-weight:600; font-size:15.5px; list-style:none; display:flex; justify-content:space-between; align-items:center; }
  .faq summary::-webkit-details-marker { display:none; }
  .faq summary:after { content:"+"; color:var(--muted); font-weight:400; font-size:20px; }
  .faq details[open] summary:after { content:"–"; }
  .faq p { color:var(--ink-2); margin:10px 0 0; font-size:14.5px; }
  footer { text-align:center; color:var(--muted); font-size:12.5px; padding:36px 24px 28px; border-top:1px solid var(--line); margin-top:40px; }
  /* modals and drawers */
  .overlay { position:fixed; inset:0; z-index:8; background:rgba(15,23,42,.35); display:none; align-items:center; justify-content:center; padding:20px; }
  .overlay.on { display:flex; }
  /* while a panel is open the page behind it does not scroll: the wheel over the dimmed background does nothing, and a
     panel scrolled to its end does not carry on into the page */
  html:has(.overlay.on), html:has(.overlay.on) body, html:has(.drawer.on), html:has(.drawer.on) body { overflow:hidden; }
  .overlay, .overlay .modal, .overlay .palette, .drawer { overscroll-behavior:contain; }
  .modal { width:min(420px, 100%); background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:0 24px 60px rgba(15,23,42,.18); }
  .modal h2 { font-size:18px; font-weight:600; margin:0 0 4px; letter-spacing:-.01em; }
  .modal .sub { color:var(--muted); font-size:13px; margin-bottom:16px; }
  .tabs { display:flex; gap:6px; margin-bottom:14px; background:var(--bg-2); padding:4px; border-radius:10px; }
  .tabs button { flex:1; font:500 13px var(--sans); padding:7px; border-radius:8px; border:0; background:transparent; color:var(--ink-2); cursor:pointer; }
  .tabs button.on { background:var(--bg); color:var(--ink); box-shadow:var(--shadow); }
  .field { display:block; margin:10px 0; }
  .field span { display:block; font-size:12px; font-weight:500; color:var(--ink-2); margin-bottom:5px; }
  .field input, .field textarea { width:100%; font:14px var(--sans); color:var(--ink); background:var(--bg); border:1px solid var(--line-2); border-radius:10px; padding:9px 12px; outline:0; }
  .field input:focus, .field textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
  .wide { width:100%; margin-top:12px; padding:10px; }
  .err { color:var(--red); font-size:13px; margin-top:10px; min-height:18px; }
  .drawer { position:fixed; top:0; right:0; bottom:0; width:min(380px, 100%); z-index:7; background:var(--bg); border-left:1px solid var(--line); transform:translateX(105%); transition:transform .22s ease; padding:20px 22px; overflow:auto; box-shadow:-12px 0 40px rgba(15,23,42,.08); }
  .drawer.on { transform:none; }
  .drawer h2 { font-size:15px; font-weight:600; margin:0 0 14px; display:flex; justify-content:space-between; align-items:center; }
  .hist { list-style:none; margin:0; padding:0; }
  .hist li { border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:8px; cursor:pointer; }
  .hist li:hover { border-color:var(--blue-line); background:var(--bg-2); }
  .hist .t { font-size:13.5px; line-height:1.35; }
  .hist .m { font-size:11.5px; color:var(--muted); margin-top:4px; display:flex; justify-content:space-between; }
  .hist .m button { font:11.5px var(--sans); border:0; background:transparent; color:var(--muted); cursor:pointer; }
  .hist .m button:hover { color:var(--red); }
  .budget { font-size:12.5px; color:var(--ink-2); margin:6px 0 14px; }
  .budget .bar { height:5px; background:var(--bg-2); border:1px solid var(--line); border-radius:8px; margin-top:6px; overflow:hidden; }
  .budget .bar i { display:block; height:100%; background:var(--blue); }
  .invite { font-family:ui-monospace, Menlo, monospace; font-size:13px; color:var(--green); background:var(--green-soft); padding:8px 10px; border-radius:8px; margin-top:8px; word-break:break-all; }
  #toast { position:fixed; left:50%; top:64px; transform:translateX(-50%); background:var(--ink); color:#fff; font-size:13px; padding:8px 14px; border-radius:999px; display:none; z-index:9; }
  #modal { position:fixed; inset:0; background:rgba(15,23,42,.75); display:none; align-items:center; justify-content:center; z-index:9; }
  #modal img { max-width:96vw; max-height:94vh; background:#fff; border-radius:10px; }
  @media (max-width: 1180px) { nav.links { display:none !important; } .pill { display:none; } }
  @media (max-width: 640px) { .user { max-width:92%; } header { padding:10px 14px; } #clear { display:none; } }
  header { flex-wrap:nowrap; } .right { flex-shrink:0; white-space:nowrap; }
  /* ===== today's map (modules) ===== */
  .mods { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:14px; }
  .mod { background:var(--bg); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; min-width:0; }
  .mod.open { grid-column:1 / -1; }
  .mod .mh { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px 10px; border-bottom:1px solid var(--line); }
  .mod .mh h3 { font-size:16px; font-weight:600; margin:0; } .mod .mh .tag { font-size:12px; color:var(--muted); }
  .mod .lock { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:4px 8px; border-radius:999px; }
  .mod .lock.on { color:var(--green); background:var(--green-soft); } .mod .lock.off { color:var(--amber); background:var(--amber-soft); }
  .mod .mb { padding:12px 16px 14px; }
  .mod .mb p { margin:6px 0; font-size:14px; color:var(--ink-2); }
  .mod ul.del { margin:8px 0 12px 18px; padding:0; font-size:13.5px; color:var(--ink-2); } .mod ul.del li { margin:3px 0; }
  .mod .price { font-size:22px; font-weight:700; letter-spacing:-.02em; } .mod .price span { font-size:12.5px; font-weight:400; color:var(--muted); }
  .mod .taste { font-size:13px; color:var(--ink); background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:8px 10px; margin:8px 0 12px; }
  .mod .actions { display:flex; gap:8px; align-items:center; margin-top:8px; }
  .mod details.read { border-top:1px solid var(--line); padding:8px 0; }
  .mod details.read summary { cursor:pointer; font-size:13px; font-weight:600; color:var(--blue); list-style:none; }
  .mod details.read summary::-webkit-details-marker { display:none; } .mod details.read summary:before { content:"▸ "; } .mod details.read[open] summary:before { content:"▾ "; }
  .mod .readbody { font-size:14px; padding:6px 0 2px; } .mod .readbody p { margin:6px 0; color:var(--ink); } .mod .readbody table { width:100%; border-collapse:collapse; font-size:13px; } .mod .readbody td, .mod .readbody th { padding:4px 6px; border-bottom:1px solid var(--line); text-align:right; } .mod .readbody td:first-child, .mod .readbody th:first-child { text-align:left; }
  .mod .kv { display:grid; grid-template-columns:auto 1fr; gap:2px 12px; font-size:13px; margin:6px 0; } .mod .kv span { color:var(--muted); } .mod .kv b { font-weight:500; }
  .mod table.lv { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; margin:6px 0 10px; } .mod table.lv td, .mod table.lv th { padding:4px 6px; border-bottom:1px solid var(--line); text-align:right; } .mod table.lv td:first-child, .mod table.lv th:first-child { text-align:left; } .mod table.lv th { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
  .pricing { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; }
  .plan { background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; }
  .plan.best { border-color:var(--blue-line); background:var(--blue-soft); }
  .plan h3 { font-size:15px; font-weight:600; margin:0 0 4px; } .plan .tag { font-size:12.5px; color:var(--ink-2); flex:1; }
  .plan .price { font-size:26px; font-weight:700; letter-spacing:-.02em; margin:10px 0 6px; } .plan .price span { font-size:12.5px; font-weight:400; color:var(--muted); }
  .plan .btn { width:100%; }
  /* ===== charts ===== */
  .viz { position:relative; margin:6px 0 4px; }
  .viz svg { width:100%; height:auto; display:block; overflow:visible; }
  .viz .grid { stroke:var(--line); stroke-width:1; }
  /* the chart kit: real-size type, hairline axes, labels with a halo, the hover aura */
  .viz svg.vk { margin:0; }
  .viz svg.vk .axis { font-size:11px; font-variant-numeric:tabular-nums; }
  .viz svg.vk .lab { font-size:12px; }
  .viz .axisline { stroke:var(--line-2); stroke-width:1; }
  .viz .ref { stroke:var(--muted); stroke-opacity:.6; stroke-width:1; stroke-dasharray:2 3; }
  .viz .halo { stroke:var(--bg); stroke-width:3px; paint-order:stroke; stroke-linejoin:round; }
  .viz .ptitle { fill:var(--ink-2); font:600 11px var(--sans); letter-spacing:.02em; }
  .viz svg.vk path { transition:stroke-width .15s ease; } .viz svg.vk circle { transition:opacity .15s ease; }
  .viz .axis { fill:var(--muted); font-size:10.5px; font-family:var(--sans); }
  .viz .lab { fill:var(--ink-2); font-size:11px; font-family:var(--sans); }
  .viz .lab.strong { fill:var(--ink); font-weight:600; }
  .viz .s1 { stroke:var(--viz-1); } .viz .s2 { stroke:var(--viz-2); } .viz .s3 { stroke:var(--viz-3); }
  .viz .f1 { fill:var(--viz-1); } .viz .f2 { fill:var(--viz-2); } .viz .f3 { fill:var(--viz-3); }
  .viz .pos { fill:var(--viz-pos); } .viz .neg { fill:var(--viz-neg); } .viz .zero { stroke:var(--muted); }
  .viz .ink { stroke:var(--ink); } .viz .inkf { fill:var(--ink); } .viz .bgf { fill:var(--bg); }
  .viz .hair { stroke:var(--ink); stroke-opacity:.5; stroke-dasharray:3 3; pointer-events:none; }
  .viz .mark { transition:r .1s; }
  .viz-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 2px; }
  .viz-head b { font-size:12px; font-weight:600; color:var(--ink); }
  .viz-legend { display:flex; flex-wrap:wrap; gap:10px; font-size:11.5px; color:var(--ink-2); }
  .tempo-track { margin-top:14px; border-top:1px solid var(--line); font-size:12.5px; }
  .tempo-track .tt-head { display:flex; justify-content:space-between; padding:9px 0 4px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  .tempo-track .tt-row { display:grid; grid-template-columns:8.5em 3.6em minmax(80px,1fr) 5.6em minmax(0,1.6fr); gap:10px; align-items:center; padding:6px 0; border-top:1px solid var(--line); }
  .tempo-track .tt-name { color:var(--ink); font-weight:600; }
  .tempo-track .tt-px, .tempo-track .tt-v { font-variant-numeric:tabular-nums; color:var(--ink-2); }
  .tempo-track .tt-v { text-align:right; }
  .tempo-track .tt-bar { position:relative; height:8px; border-radius:4px; background:var(--viz-mid); }
  .tempo-track .tt-bar i { position:absolute; left:0; top:0; bottom:0; border-radius:4px; opacity:.75; }
  .tempo-track .tt-bar b { position:absolute; top:-3px; bottom:-3px; width:1.5px; background:var(--ink); opacity:.45; }
  .tempo-track .tt-role { color:var(--muted); }
  .tempo-track .tt-spot .tt-name, .tempo-track .tt-spot .tt-role { color:var(--muted); font-weight:500; }
  @media (max-width:640px) { .tempo-track .tt-row { grid-template-columns:7.5em 3.6em minmax(60px,1fr) 4.8em; } .tempo-track .tt-role { grid-column:1 / -1; margin-top:-2px; } }
  .viz-legend i { display:inline-block; width:14px; height:3px; border-radius:2px; vertical-align:middle; margin-right:5px; }
  .viz-legend .sw { display:inline-block; width:10px; height:10px; border-radius:2px; vertical-align:middle; margin-right:5px; }
  .viz-tools { display:flex; gap:6px; }
  .viz-tools button { font:11px var(--sans); border:1px solid var(--line); background:transparent; color:var(--ink-2); border-radius:8px; padding:3px 8px; cursor:pointer; }
  .viz-tools button.on, .viz-tools button:hover { color:var(--blue); border-color:var(--blue-line); background:var(--blue-soft); }
  .viz table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:12px; margin-top:6px; }
  .viz th, .viz td { padding:3px 6px; border-bottom:1px solid var(--line); text-align:right; }
  .viz th:first-child, .viz td:first-child { text-align:left; }
  .viz th { font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
  #viztip { position:fixed; z-index:20; pointer-events:none; display:none; background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(10px) saturate(1.4); backdrop-filter:blur(10px) saturate(1.4); color:var(--ink); border:1px solid rgba(22,24,29,.08); border-radius:12px; padding:9px 12px; font-size:12px; box-shadow:0 14px 34px rgba(22,24,29,.14), 0 2px 6px rgba(22,24,29,.06); min-width:160px; }
  #viztip .t { font-weight:600; margin-bottom:4px; } #viztip .r { display:flex; justify-content:space-between; gap:14px; } #viztip .r i { display:inline-block; width:12px; height:3px; border-radius:2px; vertical-align:middle; margin-right:6px; }
  #viztip .r b { font-variant-numeric:tabular-nums; }
  #charts { width:min(760px, 100%); }
  #charts .vizcard { border:1px solid var(--line); border-radius:12px; padding:10px 12px 8px; margin-bottom:12px; background:var(--bg); }
  #charts .vizcard h3 { font-size:14px; font-weight:600; margin:0 0 2px; } #charts .vizcard .cap { font-size:12px; color:var(--muted); margin-bottom:6px; }
  /* ===== light theme extras ===== */
  html[data-theme="light"] #sky, html[data-theme="light"] .nebula, html[data-theme="light"] .orbit { display:none; }
  html[data-theme="light"] .unlock .art { background:radial-gradient(400px 220px at 50% 120%, #1a2350, #0b1020 75%); border-bottom:1px solid var(--line); }
  html[data-theme="light"] .hero-logo { filter:drop-shadow(0 18px 34px rgba(37,99,235,.22)); }
  /* the map ladder's colours follow the theme */
  .ladder .lbl { fill:var(--ink-2); } .ladder .val { fill:var(--ink); } .ladder .dim { fill:var(--muted); } .ladder .spot { fill:var(--blue); }
  .ladder .tick { stroke:var(--ink-2); } .ladder .lead { stroke:var(--line-2); } .ladder .rail { stroke:var(--line-2); }
  .ladder .box { fill:var(--blue); } .ladder .dot { fill:var(--bg); stroke:var(--blue); }
  .theme { width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); background:transparent; color:var(--ink-2); cursor:pointer; display:grid; place-items:center; }
  .theme:hover { color:var(--ink); background:var(--bg-2); } .theme svg { width:17px; height:17px; }

  /* ===== views: the landing (home) and the desk ===== */
  main { display:none; max-width:none; padding:0; }
  body.desk main { display:flex; }
  body.desk #landing { display:none; }
  .desk-only, .home-only, .narrow-only { display:none; }
  body.desk .desk-only { display:inline-block; }
  body.home .home-only { display:inline-block; }
  .desk-wrap { display:grid; grid-template-columns:minmax(0, 1fr) 400px; width:100%; flex:1; }
  .desk-main { padding:22px 26px 60px; max-width:1040px; width:100%; margin:0 auto; min-width:0; }
  .desk-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:4px 0 16px; }
  .desk-head h2 { font-size:24px; font-weight:700; letter-spacing:-.02em; margin:0; }
  .desk-head .status { font-size:13px; color:var(--muted); margin-top:2px; }
  .dock { position:sticky; top:57px; height:calc(100vh - 57px); display:flex; flex-direction:column; border-left:1px solid var(--line); background:var(--bg); min-width:0; }
  .dock .dh { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line); }
  .dock .dt b { display:block; font-size:14px; font-weight:600; } .dock .dt span { font-size:11.5px; color:var(--muted); }
  .dock .dtools { display:flex; gap:2px; }
  .dock #thread { flex:1; overflow:auto; padding:10px 14px 6px; }
  .dock .turn { margin:12px 0; } .dock .bot { font-size:14px; } .dock .user { max-width:88%; font-size:13.5px; }
  .dock .cards { gap:8px; } .dock .inst { flex:1 1 100%; }
  .dock #chips { display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 8px; margin:0; justify-content:flex-start; }
  .dock .chip-q { font-size:12.5px; padding:6px 10px 6px 8px; }
  .dock #composer { position:static; padding:10px 12px 10px; background:none; border-top:1px solid var(--line); }
  .dock #composer form { border-radius:14px; padding:6px 6px 6px 12px; }
  .dock #composer textarea { font-size:14px; }
  .dock .foot { font-size:11px; margin-top:6px; }
  .a-empty { text-align:center; padding:26px 10px 8px; }
  .a-empty .logo { width:44px; height:44px; margin:0 auto 10px; display:block; }
  .a-empty h3 { font-size:15px; font-weight:600; margin:0 0 4px; } .a-empty p { font-size:13px; color:var(--ink-2); margin:0; }
  .gate { margin:12px 14px 0; padding:12px 14px; border:1px solid var(--blue-line); background:var(--blue-soft); border-radius:12px; font-size:13px; }
  .gate b { display:block; margin-bottom:4px; } .gate p { margin:0 0 8px; color:var(--ink-2); }
  .mod .ask { margin-left:auto; }
  .mod .headline { font-size:16.5px; font-weight:500; line-height:1.45; color:var(--ink); margin:2px 0 12px; letter-spacing:-.005em; }
  .mod .ins { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:10px; margin:0 0 14px; }
  .mod .in { border:1px solid var(--line); background:var(--bg-2); border-radius:12px; padding:10px 12px; }
  .mod .in .k { display:block; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--blue); margin-bottom:3px; }
  .mod .in b { display:block; font-size:15px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
  .mod .in p { font-size:12.5px; color:var(--ink-2); margin:4px 0 0; line-height:1.45; }
  .mod details.nums summary { color:var(--ink-2); }
  .mod .jump { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 6px; }
  .mod .jump a { font-size:12px; font-weight:500; color:var(--ink-2); border:1px solid var(--line); border-radius:999px; padding:4px 10px; }
  .mod .jump a:hover { color:var(--blue); border-color:var(--blue-line); background:var(--blue-soft); }
  .sec2 { border-top:1px solid var(--line); padding:18px 0 8px; scroll-margin-top:70px; }
  .sec2-h h4 { font-size:16px; font-weight:600; letter-spacing:-.01em; margin:0 0 2px; }
  .sec2-h p { font-size:13.5px; color:var(--ink-2); margin:0 0 12px; }
  .mod details.how { border-top:0; padding:4px 0 2px; }
  .mod details.how summary { font-size:12.5px; color:var(--muted); font-weight:500; }
  .mod details.how ul { margin:8px 0 4px 18px; padding:0; font-size:13.5px; color:var(--ink-2); } .mod details.how li { margin:5px 0; }
  .mod table.struct td:nth-child(2) { text-align:left; color:var(--ink-2); } .mod table.struct th:nth-child(2) { text-align:left; }
  .mod .marks { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 8px; font-size:12.5px; }
  .mod .marks span { border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-variant-numeric:tabular-nums; }
  .mod .marks i { font-style:normal; color:var(--muted); margin-right:4px; }
  .mod .cheat { border:1px solid var(--line); border-radius:12px; padding:10px 12px 6px; margin:0 0 12px; background:var(--bg-2); }
  .mod .cheat-h { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-bottom:4px; } .mod .cheat-h b { font-size:13px; } .mod .cheat-h span { font-size:12px; color:var(--muted); }
  .mod .cheat table.lv td { text-align:left; } .mod .cheat table.lv th { text-align:left; }
  .mod .cheat tr.here td { color:var(--blue); font-weight:600; }
  .mod .cheat tr.here td .sub { font-weight:400; }
  .mod .cheat tr.band td { color:var(--ink-2); font-style:normal; background:var(--blue-soft); }
  .mod .cheat tr.k-level td:first-child { font-weight:600; }
  .mod .cheat tr.k-box td, .mod .cheat tr.k-rail td { color:var(--ink-2); }
  .mod .cheat td .sub { font-size:11px; color:var(--muted); margin-top:1px; }
  .mod .cheat td:last-child { color:var(--ink-2); }
  abbr[title] { text-decoration:none; border-bottom:1px dotted var(--line-2); cursor:help; }
  @media (max-width: 1040px) {
    .desk-wrap { grid-template-columns:1fr; }
    body.desk .narrow-only { display:inline-block; }
    .dock { position:fixed; top:0; right:0; bottom:0; height:auto; width:min(440px, 100%); z-index:7; transform:translateX(105%); transition:transform .22s ease; box-shadow:-12px 0 40px rgba(15,23,42,.12); }
    .dock.on { transform:none; }
  }
  /* ===== the landing hero ===== */
  .hero { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:44px; align-items:center; padding:64px 0 34px; }
  .hero .eyebrow { display:inline-block; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); background:var(--blue-soft); border-radius:999px; padding:4px 10px; margin-bottom:16px; }
  .hero h1 { font-size:clamp(34px, 4.6vw, 56px); font-weight:700; letter-spacing:-.03em; line-height:1.06; margin:0 0 16px; }
  .hero h1 em { font-style:normal; color:var(--blue); }
  .hero .sub { font-size:17px; color:var(--ink-2); margin:0 0 22px; max-width:540px; }
  .hero .ctas { display:flex; flex-wrap:wrap; gap:10px; }
  .btn.big { padding:11px 20px; font-size:15px; border-radius:12px; }
  .hero-note { font-size:12.5px; color:var(--muted); margin-top:12px; }
  .preview { background:none; border:0; box-shadow:none; overflow:visible; }
  .desk-art svg { width:100%; height:auto; display:block; overflow:visible; filter:drop-shadow(0 24px 40px rgba(37,99,235,.18)); animation:float 8s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) { .desk-art svg { animation:none; } }
  .preview .bar { display:flex; align-items:center; gap:6px; padding:9px 12px; border-bottom:1px solid var(--line); font-size:11.5px; color:var(--muted); }
  .preview .bar i { width:9px; height:9px; border-radius:50%; background:var(--line-2); display:inline-block; }
  .preview .bar span { margin-left:8px; }
  .preview .body { padding:12px 14px 14px; }
  .preview svg { width:100%; height:auto; display:block; }
  .preview .rows { display:grid; grid-template-columns:auto 1fr auto auto; gap:4px 12px; font-size:12px; margin:8px 0 0; font-variant-numeric:tabular-nums; align-items:center; }
  .preview .rows span:nth-child(4n+1) { color:var(--ink-2); } .preview .rows .h { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
  .preview .bubble { margin-top:12px; border:1px solid var(--line); border-radius:12px; padding:9px 11px; font-size:12.5px; background:var(--bg-2); }
  .preview .bubble .q { color:var(--blue); font-weight:600; margin-bottom:3px; }
  .strip { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0; margin:10px 0 0; }
  .strip b { display:block; font-size:16px; font-weight:600; letter-spacing:-.01em; } .strip span { font-size:13px; color:var(--muted); }
  .compare { overflow:auto; border:1px solid var(--line); border-radius:16px; background:var(--bg); box-shadow:var(--shadow); }
  .compare table { width:100%; border-collapse:collapse; font-size:14px; }
  .compare th, .compare td { padding:12px 16px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
  .compare tr:last-child td { border-bottom:0; }
  .compare th { font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
  .compare td:first-child { font-weight:600; width:18%; }
  .compare td:nth-child(2) { color:var(--muted); }
  .compare .us { background:var(--blue-soft); color:var(--ink); }
  .compare th.us { color:var(--blue); }
  .cat { background:var(--bg); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
  .cat .art { height:140px; background:radial-gradient(400px 220px at 50% 120%, #1a2350, #0b1020 75%); border-bottom:1px solid var(--line); }
  .cat .art svg { width:100%; height:100%; display:block; }
  .cat .cb { padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
  .cat h3 { font-size:17px; font-weight:600; margin:0 0 4px; letter-spacing:-.01em; }
  .cat .tag { font-size:13.5px; color:var(--ink-2); margin:0 0 10px; }
  .cat ul { margin:0 0 14px 18px; padding:0; font-size:13px; color:var(--ink-2); flex:1; } .cat li { margin:3px 0; }
  .cat .actions { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .cat .price { font-size:20px; font-weight:700; letter-spacing:-.02em; } .cat .price span { font-size:12px; font-weight:400; color:var(--muted); }
  .cat.best { border-color:var(--blue-line); }
  .bundle { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; background:var(--blue-soft); border:1px solid var(--blue-line); border-radius:16px; padding:18px 22px; }
  .bundle h3 { font-size:17px; font-weight:600; margin:0 0 3px; } .bundle p { margin:0; font-size:13.5px; color:var(--ink-2); }
  .bundle .actions { display:flex; align-items:center; gap:14px; } .bundle .price { font-size:22px; font-weight:700; letter-spacing:-.02em; } .bundle .price span { font-size:12px; font-weight:400; color:var(--muted); }
  .plan.wide-plan { grid-column:1 / -1; flex-direction:row; align-items:center; gap:16px; flex-wrap:wrap; } .plan.wide-plan h3 { margin:0; } .plan.wide-plan .tag { flex:1; } .plan.wide-plan .price { margin:0; } .plan.wide-plan .btn { width:auto; }
  .guide { display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:28px; align-items:center; background:var(--bg); border:1px solid var(--line); border-radius:18px; padding:26px 28px; box-shadow:var(--shadow); }
  .guide-copy p { font-size:15.5px; color:var(--ink-2); margin:0 0 12px; } .guide-copy p:last-child { margin:0; }
  .guide-art { border-radius:14px; background:radial-gradient(420px 240px at 50% 120%, #1a2350, #0b1020 75%); overflow:hidden; }
  .guide-art svg { width:100%; height:auto; display:block; }
  @media (max-width: 860px) { .guide { grid-template-columns:1fr; } }
  @media (max-width: 860px) { .hero { grid-template-columns:1fr; padding-top:36px; } .hero h1 { font-size:clamp(32px, 8vw, 44px); } }
  #unlock-grid .unlock { padding:14px 16px; } #unlock-grid .unlock .art { display:none; } #unlock-grid .unlock h3 { font-size:15px; } #unlock-grid .unlock p { font-size:13px; margin-bottom:10px; }

  /* ===== management ===== */
  #manage { display:none; } body.manage #manage { display:block; }
  #account { display:none; } body.account #account { display:block; } body.account #landing { display:none; }
  .mg { padding-top:22px; padding-bottom:60px; max-width:1180px; }
  .mgcard { background:var(--bg); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:16px 18px; margin-bottom:14px; }
  .mgh { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; } .mgh h3 { font-size:16px; font-weight:600; margin:0; } .mgh span { font-size:12.5px; color:var(--muted); }
  .mgscroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .mgt { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; min-width:760px; }
  .mgt th { font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
  .mgt td { padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
  .mgt td:nth-child(3), .mgt td:nth-child(4) { white-space:nowrap; }
  .mgt tr:last-child td { border-bottom:0; }
  .mgt .who b { display:block; font-weight:600; } .mgt .who span { color:var(--muted); font-size:12px; }
  .mgt .num { text-align:right; white-space:nowrap; } .mgt th.num { text-align:right; }
  .mchip { font:500 12px var(--sans); border:1px solid var(--line-2); background:transparent; color:var(--muted); border-radius:999px; padding:4px 10px; cursor:pointer; margin:2px 4px 2px 0; white-space:nowrap; }
  .mchip.on { color:var(--green); border-color:var(--green); background:var(--green-soft); }
  .mchip:hover { border-color:var(--blue-line); }
  .badge { font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; border-radius:999px; padding:2px 7px; color:var(--blue); background:var(--blue-soft); margin-left:6px; }
  .mgform { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; } .mgform input { flex:1 1 260px; font:14px var(--sans); color:var(--ink); background:var(--bg); border:1px solid var(--line-2); border-radius:10px; padding:9px 12px; outline:0; }
  .newinvite { border:1px solid var(--blue-line); background:var(--blue-soft); border-radius:12px; padding:12px 14px; margin-bottom:12px; font-size:13.5px; }
  .newinvite code { font-family:ui-monospace, Menlo, monospace; font-size:15px; font-weight:600; }
  .newinvite .btn { margin-top:8px; margin-right:6px; }
  .mgkv { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:13.5px; } .mgkv span { color:var(--muted); } .mgkv b { font-weight:500; }
  /* ===== the market chart ===== */
  .chartcard { margin-bottom:14px; }
  .chart-tools { display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; }
  .chart-tools button, .chart-groups button { font:500 12px var(--sans); border:1px solid var(--line-2); background:transparent; color:var(--ink-2); border-radius:8px; padding:5px 9px; cursor:pointer; }
  .chart-tools button.on { color:var(--blue); border-color:var(--blue-line); background:var(--blue-soft); }
  .chart-groups { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
  .chart-groups button { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 11px; }
  .chart-groups button .sw { width:9px; height:9px; border-radius:50%; display:inline-block; }
  .chart-groups button.on { color:var(--ink); border-color:var(--line-2); background:var(--bg-2); }
  .chart-groups button:not(.on) .sw { opacity:.3; }
  .chart-groups button.locked { opacity:.6; }
  .chart-wrap { display:grid; grid-template-columns:minmax(0, 1fr) 230px; gap:12px; align-items:stretch; }
  #pricechart { height:470px; border:1px solid var(--line); border-radius:12px; overflow:hidden; position:relative; background:var(--bg-2); }
  .chart-legend { height:470px; overflow:auto; border:1px solid var(--line); border-radius:12px; padding:6px; font-size:12px; }
  .chart-legend .lr { display:grid; grid-template-columns:10px 1fr auto; gap:7px; align-items:center; padding:4px 6px; border-radius:7px; cursor:default; }
  .chart-legend .lr:hover, .chart-legend .lr.hot { background:var(--blue-soft); }
  .chart-legend .lr i { width:10px; height:3px; border-radius:2px; display:block; }
  .chart-legend .lr b { font-weight:600; font-variant-numeric:tabular-nums; }
  .chart-legend .lr span { color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .chart-legend .lr.spot { color:var(--green); } .chart-legend .lr.spot span { color:var(--green); font-weight:600; }
  .chart-legend .lr.off { opacity:.45; }
  .livedot { color:var(--muted); } .livedot.on { color:var(--green); font-weight:600; } .livedot.on:before { content:" ●"; font-size:9px; vertical-align:1px; }
  .tvrow { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .tvsteps { margin:0 0 12px 18px; padding:0; font-size:13.5px; color:var(--ink-2); } .tvsteps li { margin:6px 0; }
  #tv-code { width:100%; height:150px; font:11.5px/1.45 ui-monospace, Menlo, monospace; color:var(--ink); background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:10px; resize:vertical; }
  .chart-note { font-size:12px; color:var(--muted); margin-top:8px; min-height:34px; }
  .chart-note b { color:var(--ink); font-weight:600; }
  @media (max-width: 900px) { .chart-wrap { grid-template-columns:1fr; } .chart-legend { height:auto; max-height:220px; } #pricechart { height:380px; } }
  /* ===== phones ===== */
  @media (max-width: 640px) {
    .wrap { padding:0 16px; }
    .hero { padding:28px 0 20px; gap:26px; }
    .hero h1 { font-size:clamp(30px, 9.6vw, 40px); }
    .hero .sub { font-size:15.5px; }
    .hero .ctas .btn { flex:1 1 auto; text-align:center; }
    .strip { grid-template-columns:1fr 1fr; gap:12px; padding:16px 0; }
    .sec { padding:44px 0 12px; }
    .sec h2 { font-size:26px; }
    .compare { border:0; background:none; box-shadow:none; overflow:visible; }
    .compare table, .compare tbody, .compare tr, .compare td { display:block; width:100%; }
    .compare thead { display:none; }
    .compare tr { background:var(--bg); border:1px solid var(--line); border-radius:14px; margin-bottom:10px; overflow:hidden; box-shadow:var(--shadow); }
    .compare td { padding:10px 14px; border-bottom:1px solid var(--line); width:auto; }
    .compare td:first-child { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; padding-bottom:6px; }
    .compare td:nth-child(2):before { content:"Gamma maps: "; font-weight:600; color:var(--muted); }
    .compare td.us:before { content:"morphic: "; font-weight:600; color:var(--blue); }
    .compare tr:last-child td { border-bottom:1px solid var(--line); } .compare td:last-child { border-bottom:0; }
    .bundle { padding:16px; } .bundle .actions { width:100%; justify-content:space-between; }
    .cta { padding:30px 18px; }
    .desk-main { padding:16px 12px 40px; }
    .desk-head { flex-direction:column; align-items:flex-start; gap:8px; }
    .mod .mh { flex-wrap:wrap; padding:12px 12px 8px; } .mod .ask { margin-left:0; order:3; }
    .mod .mb { padding:10px 12px 12px; }
    .mod .headline { font-size:15.5px; }
    .mod .ins { grid-template-columns:1fr 1fr; gap:8px; }
    .mod .in b { font-size:14px; } .mod .in p { font-size:12px; }
    .mod .cheat { padding:8px 8px 4px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .mod .cheat table.lv { min-width:560px; font-size:12px; }
    .mod details.read .readbody { overflow-x:auto; }
    .mod .readbody table { min-width:480px; }
    .mod .kv { grid-template-columns:1fr; gap:0 0; } .mod .kv span { margin-top:6px; }
    .dock { width:100%; }
    .dock .dh { padding:10px 12px; }
    .dock #thread { padding:8px 12px 4px; }
    .dock .user { max-width:94%; }
    .dock #composer { padding:8px 10px 10px; }
    header { padding:10px 12px; gap:6px; }
    .wordmark { font-size:16px; }
    .btn { padding:7px 11px; }
    .right { gap:6px; }
    .drawer { width:100%; padding:16px 14px; }
    #charts .vizcard { padding:8px; }
    .modal { padding:18px; }
    #viztip { max-width:70vw; }
    .a-empty { padding:16px 6px 4px; }
    footer { padding:28px 16px 24px; }
  }
  @media (max-width: 400px) { .mod .ins { grid-template-columns:1fr; } .strip { grid-template-columns:1fr; } }

  /* ===== desk: the chart from side to side, the modules in a column below ===== */
  .desk-wrap { display:block; }
  .desk-main { max-width:none; padding:16px 22px 90px; }
  .desk-head, .mods { max-width:1180px; margin-left:auto; margin-right:auto; }
  .desk-head { margin-bottom:12px; }
  .chartcard { width:100%; }
  #pricechart, .chart-legend { height:clamp(460px, 66vh, 860px); }
  .chart-wrap { grid-template-columns:minmax(0, 1fr) 250px; }
  @media (max-width: 900px) { #pricechart { height:clamp(380px, 58vh, 620px); } .chart-legend { height:auto; max-height:220px; } .chart-wrap { grid-template-columns:1fr; } .desk-main { padding:12px 10px 90px; } }
  /* ===== Ask Lens: a small floating panel, opened from its own button ===== */
  .dock, .dock.on { position:fixed; top:auto; left:auto; right:20px; bottom:86px; width:min(390px, calc(100vw - 24px)); height:min(600px, calc(100vh - 150px)); z-index:8;
    border:1px solid var(--line-2); border-radius:18px; overflow:hidden; box-shadow:0 24px 70px rgba(2,6,23,.45); background:var(--bg); display:flex; flex-direction:column; }
  .dock { opacity:0; transform:translateY(14px) scale(.98); pointer-events:none; transition:opacity .16s ease, transform .16s ease; }
  .dock.on { opacity:1; transform:none; pointer-events:auto; }
  .fab { display:none; position:fixed; right:20px; bottom:22px; z-index:8; align-items:center; gap:8px; font:600 14px var(--sans); color:#fff; background:var(--blue); border:0; border-radius:999px; padding:12px 18px 12px 14px; cursor:pointer; box-shadow:0 12px 30px rgba(37,99,235,.35); }
  .fab svg { width:20px; height:20px; }
  body.desk .fab { display:inline-flex; }
  body.dock-open .fab span { display:none; } body.dock-open .fab { padding:12px; }
  @media (max-width: 640px) { .dock, .dock.on { right:0; bottom:0; width:100%; height:100%; border-radius:0; border:0; } body.dock-open .fab { display:none; } .fab { right:14px; bottom:16px; } }
  /* ===== philosophy ===== */
  #philosophy { display:none; } body.philosophy #philosophy { display:block; }
  body.philosophy main, body.philosophy #landing, body.manage #landing { display:none; }
  .philo { max-width:760px; margin:0 auto; padding:26px 22px 40px; }
  .philo .eyebrow { display:inline-block; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); background:var(--blue-soft); border-radius:999px; padding:4px 10px; margin:18px 0 14px; }
  .philo h1 { font-size:clamp(25.8px, 3.8vw, 39.6px); font-weight:700; letter-spacing:-.03em; line-height:1.1; margin:0 0 18px; }
  .philo .lede { font-size:19px; line-height:1.6; color:var(--ink-2); margin:0 0 30px; }
  .philo h2 { font-size:22px; font-weight:600; letter-spacing:-.015em; margin:38px 0 10px; }
  .philo p, .philo li { font-size:16.5px; line-height:1.72; color:var(--ink-2); } .philo p { margin:0 0 14px; }
  .philo ul { margin:0 0 14px 20px; padding:0; } .philo li { margin:6px 0; }
  .philo blockquote { margin:18px 0; padding:16px 20px; border-left:3px solid var(--blue); background:var(--blue-soft); border-radius:0 12px 12px 0; font-size:19px; line-height:1.55; color:var(--ink); font-weight:500; }
  .philo .cta { margin-top:44px; } .philo footer { margin-top:30px; }
  body.philosophy nav.links { display:none; }

  /* ===== odds on the chart, the plan ===== */
  .chart-col { position:relative; min-width:0; }
  #odds-readout { display:none; position:absolute; left:10px; top:10px; z-index:3; gap:12px; align-items:baseline; font-size:12px; color:var(--ink-2); background:color-mix(in srgb, var(--bg) 86%, transparent); border:1px solid var(--line); border-radius:10px; padding:6px 10px; pointer-events:none; backdrop-filter:blur(6px); }
  #odds-readout b { color:var(--ink); font-size:13px; font-variant-numeric:tabular-nums; } #odds-readout em { font-style:normal; font-weight:600; font-variant-numeric:tabular-nums; }
  #odds-readout em.q { color:#2B3FD6; } #odds-readout em.p { color:#DA9861; }
  .planbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 10px; }
  .planhint { font-size:13px; color:var(--ink-2); } .planhint b { color:var(--ink); }
  .plancard { border:1px solid var(--blue-line); background:var(--blue-soft); border-radius:14px; padding:14px 16px; margin-top:12px; }
  .plan-h { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; align-items:flex-start; }
  .plan-h b { display:block; font-size:15px; } .plan-h span { font-size:14px; color:var(--ink); }
  .plan-live { font-size:13.5px; margin:10px 0 2px; color:var(--ink); }
  .dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; background:var(--muted); } .dot.good { background:#5fae8b; } .dot.bad { background:#D87A92; }
  .plan-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:12px; margin-top:12px; }
  .pcol { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
  .pcol h5 { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; font-weight:600; margin:0 0 10px; }
  .vchip { font-size:11px; font-weight:600; border-radius:999px; padding:3px 9px; } .vchip.good { color:#5fae8b; background:rgba(95,174,139,.14); } .vchip.bad { color:#D87A92; background:rgba(216,122,146,.14); } .vchip.flat { color:var(--ink-2); background:var(--bg-2); }
  .split { display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--bg-2); } .split i { display:block; height:100%; } .split .t { background:#5fae8b; } .split .n { background:var(--line-2); } .split .s { background:#D87A92; }
  .splitkey { display:flex; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--ink-2); margin:6px 0 12px; } .splitkey em { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; } .splitkey em.t { background:#5fae8b; } .splitkey em.n { background:var(--line-2); } .splitkey em.s { background:#D87A92; } .splitkey b { color:var(--ink); }
  .needbar { position:relative; height:8px; border-radius:4px; background:var(--bg-2); } .needbar i { display:block; height:100%; border-radius:4px; background:var(--blue); } .needbar u { position:absolute; top:-4px; width:2px; height:16px; background:var(--ink); }
  .needkey { display:flex; justify-content:space-between; font-size:12px; color:var(--ink-2); margin:6px 0 10px; } .needkey b { color:var(--ink); }
  .kv2 { display:grid; grid-template-columns:1fr auto; gap:3px 10px; font-size:12.5px; } .kv2 span { color:var(--ink-2); } .kv2 b { font-weight:600; font-variant-numeric:tabular-nums; }
  .checks { list-style:none; margin:0; padding:0; font-size:13px; } .checks li { position:relative; padding:4px 0 4px 20px; color:var(--ink-2); }
  .checks li:before { position:absolute; left:0; top:4px; font-weight:700; } .checks li.y:before { content:"+"; color:#5fae8b; } .checks li.x:before { content:"-"; color:#D87A92; } .checks li.o:before { content:"·"; color:var(--muted); }
  .checks li.y, .checks li.x { color:var(--ink); }
  .pnote { font-size:12px; color:var(--muted); margin:10px 0 0; }
  .oddsladder { margin:4px 0 10px; }
  .olh, .ol { display:grid; grid-template-columns:minmax(150px, 1.1fr) 64px minmax(110px, 1fr) minmax(110px, 1fr); gap:10px; align-items:center; }
  .olh span { font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding-bottom:4px; }
  .ol { padding:7px 0; border-top:1px solid var(--line); }
  .ol .nm b { display:block; font-size:13.5px; } .ol .nm i { font-style:normal; font-size:12px; color:var(--muted); }
  .ol .pr { font-variant-numeric:tabular-nums; font-weight:600; text-align:right; }
  .obar { position:relative; height:22px; border-radius:6px; background:var(--bg-2); overflow:hidden; } .obar i { display:block; height:100%; border-radius:6px; }
  .obar.touch i { background:linear-gradient(90deg, rgba(43,63,214,.35), rgba(43,63,214,.85)); } .obar.beyond i { background:linear-gradient(90deg, rgba(43,63,214,.3), rgba(43,63,214,.8)); }
  .obar em { position:absolute; left:8px; top:3px; font-style:normal; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); }
  @media (max-width: 640px) { .olh, .ol { grid-template-columns:1fr 54px 1fr 1fr; gap:6px; } }
  .pwhint { font-size:12px; color:var(--muted); margin:2px 0 10px; line-height:1.45; }

  /* =====================================================================================================
     v3 · the professional layer. Neutral graphite surfaces, hairline borders, one accent the reader picks,
     monospaced numerals, tighter radii. Everything above keeps working; this layer restyles it.
     ===================================================================================================== */
  :root { --page:#f3f4f6; --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --r:10px; --r-sm:7px; --on-accent:#ffffff; --chart-h:clamp(460px, 66vh, 860px);
    --bg:#ffffff; --bg-2:#f4f5f8; --line:#e3e6eb; --line-2:#ccd2db; --ink:#0c111b; --ink-2:#465163; --muted:#7a8494;
    --blue:#2458e6; --blue-2:#1b45bd; --blue-soft:color-mix(in srgb, var(--blue) 9%, transparent); --blue-line:color-mix(in srgb, var(--blue) 30%, transparent);
    --green:#0f8a4f; --green-soft:rgba(15,138,79,.10); --red:#c8323c; --amber:#a8610a; --amber-soft:rgba(168,97,10,.10); --user:var(--blue-soft);
    --shadow:0 1px 0 rgba(12,17,27,.03), 0 8px 24px rgba(12,17,27,.06); }
  html[data-nums="plain"] { --mono:var(--sans); }
  html[data-chart-h="compact"] { --chart-h:400px; } html[data-chart-h="tall"] { --chart-h:clamp(560px, 82vh, 1100px); }

  html[data-theme] body { background:var(--page); font-feature-settings:"cv11", "ss01"; letter-spacing:-.003em; }
  body.desk #sky, body.manage #sky, body.desk .nebula, body.manage .nebula { display:none !important; }
  ::selection { background:color-mix(in srgb, var(--blue) 30%, transparent); }
  * { scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
  :focus-visible { outline:2px solid var(--blue); outline-offset:2px; border-radius:4px; }

  /* chrome */
  html[data-theme] header { padding:9px 22px; background:color-mix(in srgb, var(--page) 86%, transparent); backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid var(--line); }
  html[data-theme] .wordmark { font-size:15.5px; font-weight:600; letter-spacing:-.01em; }
  html[data-theme] .pill { font:500 11.5px var(--mono); letter-spacing:0; border-radius:6px; padding:5px 9px; background:var(--bg); border-color:var(--line); color:var(--ink-2); }
  html[data-theme] .pill .dot { box-shadow:none; width:6px; height:6px; }
  html[data-theme] .btn { font:500 13px var(--sans); border-radius:8px; padding:7px 12px; background:var(--bg); border-color:var(--line-2); color:var(--ink); box-shadow:none; }
  html[data-theme] .btn:has(svg) { display:inline-flex; align-items:center; gap:7px; justify-content:center; }
  html[data-theme] .btn svg { width:15px; height:15px; }
  html[data-theme] .btn:hover { background:var(--bg-2); border-color:color-mix(in srgb, var(--ink) 28%, transparent); }
  html[data-theme] .btn.primary { background:var(--blue); border-color:var(--blue); color:var(--on-accent); font-weight:600; box-shadow:none; }
  html[data-theme] .btn.primary:hover { background:var(--blue-2); border-color:var(--blue-2); box-shadow:none; }
  html[data-theme] .btn.quiet { background:transparent; border-color:transparent; color:var(--ink-2); }
  html[data-theme] .btn.quiet:hover { background:var(--bg-2); color:var(--ink); border-color:transparent; }
  html[data-theme] .btn.big { padding:11px 20px; font-size:15px; border-radius:10px; }
  html[data-theme] .btn.wide { width:100%; }
  html[data-theme] .btn:disabled { opacity:.45; cursor:default; }
  html[data-theme] .avatar { border-radius:8px; width:30px; height:30px; background:var(--bg); border-color:var(--line-2); color:var(--ink); font:600 12px var(--mono); }
  html[data-theme] .theme { border-radius:8px; width:32px; height:32px; border-color:var(--line-2); background:var(--bg); }
  html[data-theme] .menu .pop { background:var(--bg); border-color:var(--line-2); border-radius:10px; box-shadow:var(--shadow); padding:5px; }
  html[data-theme] .pop button { font-size:13px; padding:8px 10px; border-radius:6px; }
  html[data-theme] #toast { border-radius:8px; background:var(--ink); color:var(--page); font-weight:500; box-shadow:var(--shadow); }
  html[data-theme] .send { background:var(--blue); color:var(--on-accent); box-shadow:none; }
  html[data-theme] .typing i { background:var(--blue); }
  html[data-theme] .field input, html[data-theme] .field textarea { border-radius:8px; background:var(--bg-2); border-color:var(--line-2); }
  html[data-theme] .field input:focus, html[data-theme] .field textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); outline:0; }

  /* surfaces */
  html[data-theme] .mod, html[data-theme] .drawer, html[data-theme] .modal, html[data-theme] .inst, html[data-theme] .dock { background:var(--bg); backdrop-filter:none; border-color:var(--line); }
  html[data-theme] .mod { border-radius:var(--r); box-shadow:none; }
  html[data-theme] .mods { gap:12px; }
  html[data-theme] .drawer { box-shadow:-24px 0 60px rgba(0,0,0,.28); }
  html[data-theme] .dock, html[data-theme] .dock.on { border:1px solid var(--line-2); border-radius:12px; box-shadow:0 24px 70px rgba(0,0,0,.45); }
  html[data-theme] .fab { background:var(--blue); color:var(--on-accent); border-radius:10px; font:600 13px var(--sans); padding:10px 15px 10px 12px; box-shadow:0 10px 28px rgba(0,0,0,.35); }
  html[data-theme] body.dock-open .fab { padding:10px; }
  html[data-theme] .fab svg { width:18px; height:18px; }

  /* the desk */
  html[data-theme] .desk-main { padding:14px 20px 90px; }
  html[data-theme] .desk-head { margin:2px 0 12px; align-items:center; max-width:none; }
  html[data-theme] .mods { max-width:none; }
  html[data-theme] .sec2-h p, html[data-theme] .mod details.how ul { max-width:980px; }
  html[data-theme] .desk-head h2 { font-size:19px; font-weight:600; letter-spacing:-.02em; }
  html[data-theme] .desk-head .status { font-size:12.5px; }
  .desk-tools { display:flex; align-items:center; gap:6px; flex-shrink:0; }
  html[data-theme] .mod .mh { padding:10px 16px; }
  html[data-theme] .mod .mh h3 { font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
  html[data-theme] .mod .mh .tag { font-size:12px; color:var(--muted); margin-top:1px; text-transform:none; letter-spacing:0; }
  html[data-theme] .mod .lock { font:600 10px var(--mono); letter-spacing:.08em; border-radius:5px; padding:4px 7px; }
  html[data-theme] .mod .lock.on { background:transparent; border:1px solid var(--line-2); color:var(--ink-2); }
  html[data-theme] .mod .lock.on::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green); margin-right:6px; vertical-align:1px; }
  html[data-theme] .mod .mb { padding:14px 16px 16px; }
  html[data-theme] .mod .headline { font-size:17px; font-weight:500; line-height:1.42; letter-spacing:-.012em; max-width:1040px; margin:2px 0 14px; }
  html[data-theme] .mod .ins { gap:8px; }
  html[data-theme] .mod .in { background:var(--bg-2); border-color:var(--line); border-radius:8px; padding:11px 13px 12px; }
  html[data-theme] .mod .in .k { font-size:10px; letter-spacing:.1em; color:var(--muted); margin-bottom:5px; }
  html[data-theme] .mod .in b { font-size:15.5px; letter-spacing:-.012em; }
  html[data-theme] .mod .in p { font-size:12.5px; line-height:1.5; }
  html[data-theme] .mod .cheat { background:var(--bg-2); border-radius:8px; border-color:var(--line); }
  html[data-theme] .mod .jump { gap:4px; margin-bottom:8px; }
  html[data-theme] .mod .jump a { border-radius:6px; font-size:12px; padding:5px 10px; background:var(--bg-2); border-color:transparent; }
  html[data-theme] .mod .jump a:hover { background:var(--blue-soft); color:var(--blue); border-color:transparent; }
  html[data-theme] .sec2 { padding:20px 0 8px; }
  html[data-theme] .sec2-h h4 { font-size:15px; font-weight:600; letter-spacing:-.01em; display:flex; align-items:center; gap:9px; }
  html[data-theme] .sec2-h h4::before { content:""; width:3px; height:14px; border-radius:2px; background:var(--blue); flex:0 0 auto; }
  html[data-theme] .sec2-h p { margin-left:12px; }
  html[data-theme] .mod .marks span { border-radius:6px; font-family:var(--mono); font-size:12px; background:var(--bg-2); border-color:transparent; }
  html[data-theme] .mod .marks i { font-family:var(--sans); }

  /* numerals */
  .chart-legend .lr b, .ol .pr, .obar em, .kv b, .kv2 b, #odds-readout b, #odds-readout em, .sstrip b, .sstrip small, .splitkey b, .needkey b, .mod .price, #viztip .r b { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
  .mod table.lv td:nth-child(2), .bot td { font-family:var(--mono); font-size:.94em; letter-spacing:-.02em; }

  /* the session strip */
  .sstrip { display:flex; align-items:stretch; border:1px solid var(--line); border-radius:var(--r); background:var(--bg); margin:0 0 12px; overflow-x:auto; scrollbar-width:none; }
  .sstrip::-webkit-scrollbar { display:none; }
  .sstrip .c { padding:9px 18px 10px 16px; border-right:1px solid var(--line); white-space:nowrap; flex:0 0 auto; }
  .sstrip .c:last-child { border-right:0; flex:1 0 auto; }
  .sstrip .k { display:flex; align-items:center; gap:6px; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
  .sstrip b { font-size:15px; font-weight:600; color:var(--ink); } .sstrip b u { text-decoration:none; font:400 11px var(--sans); color:var(--muted); letter-spacing:0; margin:0 2px; }
  .sstrip .sym b { font-size:17px; }
  .sstrip small { font-size:11.5px; color:var(--muted); margin-left:8px; font-weight:500; } .sstrip small em { font-style:normal; font-weight:600; }
  .sstrip .up { color:var(--green); } .sstrip .dn { color:var(--red); }
  .sstrip .txt b { font:600 13.5px var(--sans); letter-spacing:-.005em; } .sstrip .where.out { color:var(--amber); }
  .sstrip .pulse { width:6px; height:6px; border-radius:50%; background:var(--muted); display:inline-block; }
  .sstrip .pulse.on { background:var(--green); box-shadow:0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent); animation:ping 2s infinite; }
  @keyframes ping { 70% { box-shadow:0 0 0 6px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }
  @media (prefers-reduced-motion: reduce) { .sstrip .pulse.on { animation:none; } }

  /* the chart card */
  html[data-theme] .chart-tools { gap:0; border:1px solid var(--line-2); border-radius:8px; overflow:hidden; flex-wrap:nowrap; }
  html[data-theme] .chart-tools button { border:0; border-radius:0; padding:6px 11px; font:500 12px var(--mono); background:transparent; color:var(--ink-2); }
  html[data-theme] .chart-tools button + button { border-left:1px solid var(--line); }
  html[data-theme] .chart-tools button:hover { color:var(--ink); background:var(--bg-2); }
  html[data-theme] .chart-tools button.on { background:var(--blue-soft); color:var(--blue); }
  html[data-theme] .chart-groups button { border-radius:7px; border-color:var(--line); padding:5px 10px; font-size:12px; }
  html[data-theme] .chart-groups button.on { border-color:var(--line-2); background:var(--bg-2); color:var(--ink); }
  html[data-theme] .chart-groups button .sw { width:8px; height:8px; border-radius:2px; }
  html[data-theme] #pricechart { height:var(--chart-h); border-radius:8px; background:var(--bg); border-color:var(--line); }
  html[data-theme] .chart-legend { height:var(--chart-h); border-radius:8px; border-color:var(--line); padding:5px; }
  html[data-theme] .chart-legend .lr { border-radius:5px; padding:4px 7px; }
  html[data-theme] .chart-legend .lr b { font-size:12px; font-weight:500; display:inline-flex; align-items:center; gap:4px; }
  .chart-legend .lr.mine span { color:var(--ink); }
  .chart-legend .lr b button { border:0; background:transparent; color:var(--muted); cursor:pointer; font:500 14px var(--sans); line-height:1; padding:0 2px; border-radius:4px; }
  .chart-legend .lr b button:hover { color:var(--red); }
  html[data-legend="off"] .chart-wrap { grid-template-columns:minmax(0, 1fr); } html[data-legend="off"] .chart-legend { display:none; }
  @media (max-width: 900px) { :root { --chart-h:clamp(380px, 58vh, 620px); } html[data-theme] .chart-legend { height:auto; max-height:220px; } }
  html[data-theme] #odds-readout { border-radius:7px; font-size:11.5px; background:color-mix(in srgb, var(--bg) 90%, transparent); }
  html[data-theme] #viztip { border-radius:8px; background:var(--bg); border-color:var(--line-2); }
  html[data-theme] .plancard { border-radius:var(--r); background:var(--bg-2); border-color:var(--line-2); }
  html[data-theme] .pcol { border-radius:8px; background:var(--bg); }
  html[data-theme] .vchip { border-radius:5px; font-family:var(--sans); }
  html[data-theme] .obar { border-radius:4px; height:20px; } html[data-theme] .obar i { border-radius:4px; }
  html[data-theme] .obar.touch i { background:linear-gradient(90deg, color-mix(in srgb, var(--blue) 30%, transparent), color-mix(in srgb, var(--blue) 80%, transparent)); }
  html[data-theme] .obar.beyond i { background:linear-gradient(90deg, color-mix(in srgb, var(--ink) 14%, transparent), color-mix(in srgb, var(--ink) 42%, transparent)); }
  html[data-theme] .obar em { font-size:11.5px; top:2px; }
  html[data-theme] .olh span { letter-spacing:.1em; font-size:10px; }

  /* compact density */
  html[data-density="compact"] body { font-size:14px; }
  html[data-density="compact"] .desk-main { padding-top:10px; }
  html[data-density="compact"] .mod .mh { padding:7px 14px; } html[data-density="compact"] .mod .mb { padding:10px 14px 12px; }
  html[data-density="compact"] .mod .headline { font-size:15.5px; margin-bottom:10px; }
  html[data-density="compact"] .mod .in { padding:8px 11px 9px; } html[data-density="compact"] .mod .in b { font-size:14.5px; } html[data-density="compact"] .mod .in p { font-size:12px; line-height:1.4; }
  html[data-density="compact"] .sec2 { padding:13px 0 4px; } html[data-density="compact"] .sec2-h p { margin-bottom:8px; font-size:13px; }
  html[data-density="compact"] .ol { padding:4px 0; } html[data-density="compact"] .sstrip .c { padding:6px 14px 7px 13px; }
  html[data-density="compact"] .chart-legend .lr { padding:2px 7px; }

  /* Customize */
  .cz h3 { font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:20px 0 6px; padding-top:14px; border-top:1px solid var(--line); }
  .cz #cz-body h3:first-child { border-top:0; padding-top:0; margin-top:4px; }
  .czrow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0; font-size:13.5px; }
  .czrow small { display:block; font-size:11.5px; color:var(--muted); line-height:1.35; }
  .seg { display:inline-flex; border:1px solid var(--line-2); border-radius:8px; overflow:hidden; flex:0 0 auto; }
  .seg button { font:500 12px var(--sans); border:0; background:transparent; color:var(--ink-2); padding:6px 9px; cursor:pointer; white-space:nowrap; }
  .seg button + button { border-left:1px solid var(--line); } .seg button:hover { color:var(--ink); background:var(--bg-2); }
  .seg button.on { background:var(--blue-soft); color:var(--blue); font-weight:600; }
  .swatches { display:inline-flex; gap:8px; } .swatches button { width:22px; height:22px; border-radius:50%; border:3px solid var(--bg); outline:1px solid var(--line-2); cursor:pointer; padding:0; }
  .swatches button.on { outline:2px solid var(--ink); }
  .czhint { font-size:12px; color:var(--muted); margin:0 0 8px; line-height:1.45; }
  .lvrow { display:grid; grid-template-columns:minmax(0, 1fr) 92px auto; gap:6px; margin-bottom:6px; }
  .lvrow input { font:13px var(--sans); color:var(--ink); background:var(--bg-2); border:1px solid var(--line-2); border-radius:7px; padding:6px 8px; min-width:0; } .lvrow input[type=number] { font-family:var(--mono); }
  .lvrow input:focus { outline:0; border-color:var(--blue); }
  .czmods { list-style:none; margin:0; padding:0; } .czmods li { border:1px solid var(--line); border-radius:8px; padding:7px 9px; margin-bottom:6px; background:var(--bg-2); }
  .czmods .mrow { display:flex; align-items:center; justify-content:space-between; } .czmods .mrow .btn { padding:3px 8px; }
  .tick { display:inline-flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; } .tick input { accent-color:var(--blue); width:15px; height:15px; margin:0; }
  .czmods .secs { display:flex; flex-wrap:wrap; gap:4px 14px; margin:7px 0 2px 23px; } .czmods .secs .tick { font-size:12.5px; color:var(--ink-2); }
  .czfoot { display:flex; align-items:center; gap:12px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
  html[data-theme] .drawer h2 { font-size:14px; }

  /* landing and philosophy: the same restraint */
  html[data-theme] .hero h1, html[data-theme] .hero h1 em, html[data-theme] .empty h1, html[data-theme] .empty h1 em { text-shadow:none; }
  html[data-theme] .hero .eyebrow, html[data-theme] .empty .eyebrow, html[data-theme] .eyebrow { border-radius:6px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; }
  html[data-theme] .step .n { background:var(--blue); color:var(--on-accent); }
  html[data-theme] .meter i { background:var(--blue); box-shadow:none; }
  html[data-theme] .cta { background:linear-gradient(180deg, var(--blue-soft), transparent); border-color:var(--blue-line); }
  @media (max-width: 640px) { html[data-theme] .desk-main { padding:10px 10px 90px; } html[data-theme] header { padding:8px 12px; } .czrow { flex-wrap:wrap; } }
  body.home #sky, body.home .nebula, body.philosophy #sky, body.philosophy .nebula { display:none !important; }
  html[data-theme] body.home, html[data-theme] body.philosophy { background:var(--page); }
  body.home header { border-bottom-color:transparent; }
  html[data-theme] nav.links a { font-size:13px; color:var(--ink-2); font-weight:500; } html[data-theme] nav.links a:hover { color:var(--ink); background:transparent; }
  body.home .btn.primary, .lp .btn.primary { border-radius:999px !important; }
  .lp .wrap { max-width:1120px; }
  .lp-hero { text-align:center; padding:104px 0 20px; }
  .lp-eyebrow { display:inline-block; font:500 11.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--line-2); border-radius:999px; padding:5px 12px; margin-bottom:26px; }
  .lp-hero h1 { font-size:clamp(36.1px, 5.7vw, 72.2px); font-weight:600; letter-spacing:-.04em; line-height:1.02; margin:0 0 22px; color:var(--ink); }
  .lp-hero h1 em { font-style:normal; color:var(--blue); }
  .lp-sub { font-size:clamp(16px, 1.5vw, 19px); line-height:1.55; color:var(--ink-2); max-width:640px; margin:0 auto 30px; }
  .lp-ctas { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:22px; }
  .lp-link { font-size:14.5px; font-weight:500; color:var(--blue); } .lp-link:hover { color:var(--blue-2); }
  .lp-art { width:100%; max-width:1500px; margin:26px auto 0; padding:0 12px; }
  .lp-art svg { width:100%; height:auto; display:block; overflow:visible; }
  .lp-art .nz { fill:none; stroke:var(--ink); stroke-width:1; } .lp-art .nt { fill:var(--muted); font:500 10.5px var(--mono); }
  .lp-art .ring { fill:var(--page); stroke:var(--blue); stroke-width:1.6; } .lp-art .glow { fill:var(--blue); opacity:.10; }
  .lp-art .curve { fill:none; stroke:var(--blue); stroke-width:1.8; } .lp-art .area { fill:var(--blue); opacity:.05; } .lp-art .box { fill:var(--blue); opacity:.10; }
  .lp-art .ax { stroke:var(--line-2); stroke-width:1; } .lp-art .rail { fill:none; stroke:var(--blue); stroke-width:1; stroke-dasharray:2 5; opacity:.5; } .lp-art .tk { stroke:var(--ink-2); stroke-width:1; stroke-dasharray:3 4; }
  .lp-art .lb { fill:var(--ink); font:500 12px var(--sans); } .lp-art .ls { fill:var(--ink-2); font:500 11px var(--mono); } .lp-art .dot { fill:var(--blue); }
  .lp-state { font-size:clamp(22px, 3vw, 36px); font-weight:500; letter-spacing:-.025em; line-height:1.22; color:var(--muted); max-width:900px; margin:70px 0 0; padding-bottom:56px; border-bottom:1px solid var(--line); }
  .lp-state b { color:var(--ink); font-weight:500; }
  .lp-sec { padding:110px 0 0; } .lp-sec h2, .lp-cta h2 { font-size:clamp(24.1px, 3.4vw, 39.6px); font-weight:600; letter-spacing:-.035em; line-height:1.08; text-align:center; margin:0 0 16px; color:var(--ink); }
  .lp-lead { text-align:center; color:var(--ink-2); font-size:17px; line-height:1.55; max-width:660px; margin:0 auto 46px; }
  .lp-cap { font:600 10.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
  .lp-vs { display:grid; grid-template-columns:minmax(0, 1fr) 56px minmax(0, 1fr); gap:0; align-items:stretch; }
  .lp-noise, .lp-read { background:var(--bg); border:1px solid var(--line); border-radius:18px; padding:26px 28px 22px; }
  .lp-read { border-color:var(--blue-line); background:linear-gradient(180deg, var(--blue-soft), transparent 70%), var(--bg); }
  .lp-mid { display:grid; place-items:center; color:var(--blue); } .lp-mid svg { width:40px; height:40px; }
  .nrow { display:grid; grid-template-columns:150px minmax(0, 1fr) 46px; gap:10px; align-items:center; padding:11px 0; border-top:1px solid var(--line); font-size:14px; }
  .nrow span { font:500 12.5px var(--mono); color:var(--ink); } .nrow i { font-style:normal; color:var(--ink-2); }
  .nrow b { font:600 10.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; text-align:center; border-radius:5px; padding:3px 0; }
  .nrow b.up { color:var(--green); background:var(--green-soft); } .nrow b.dn { color:var(--red); background:color-mix(in srgb, var(--red) 13%, transparent); } .nrow b.qm { color:var(--amber); background:var(--amber-soft); }
  .nfoot { font-size:12px; color:var(--muted); border-top:1px solid var(--line); padding-top:14px; margin-top:2px; }
  .rhead { font-size:19px; font-weight:500; letter-spacing:-.015em; line-height:1.35; color:var(--ink); margin:0 0 12px; }
  .rrow { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:4px 14px; align-items:baseline; padding:11px 0; border-top:1px solid var(--line); font-size:14px; }
  .rrow span { color:var(--ink-2); } .rrow b { font:600 14px var(--mono); color:var(--ink); letter-spacing:-.02em; }
  .rrow em { grid-column:1 / -1; height:4px; border-radius:2px; background:var(--bg-2); overflow:hidden; display:block; } .rrow em u { display:block; height:100%; background:var(--blue); border-radius:2px; }
  .lp-read .nfoot { margin-top:0; }
  .lp-steps { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:44px; }
  .lp-steps .n { font:500 12px var(--mono); color:var(--blue); display:block; margin-bottom:14px; padding-top:16px; border-top:1px solid var(--line-2); }
  .lp-steps h3, .lp-who h3 { font-size:18px; font-weight:600; letter-spacing:-.02em; margin:0 0 8px; color:var(--ink); }
  .lp-steps p, .lp-who p { font-size:14.5px; line-height:1.6; color:var(--ink-2); margin:0; }
  .lp-stats { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:30px; margin-top:110px; padding:54px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center; }
  .lp-stats b { display:block; font-size:clamp(44px, 5.4vw, 68px); font-weight:500; letter-spacing:-.04em; line-height:1; color:var(--ink); margin-bottom:12px; }
  .lp-stats span { display:block; font-size:13.5px; color:var(--ink-2); line-height:1.45; max-width:220px; margin:0 auto; }
  .lp .preview { max-width:940px; margin:0 auto; }
  .lp .compare { border-radius:18px; background:var(--bg); border-color:var(--line); backdrop-filter:none; }
  .lp-guide { max-width:700px; margin:0 auto; } .lp-guide p { font-size:17px; line-height:1.65; color:var(--ink-2); margin:0 0 18px; }
  .lp-who { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:34px; margin-top:44px; } .lp-who > div { border-top:1px solid var(--line-2); padding-top:18px; }
  .lp .cat, .lp .bundle { border-radius:18px; background:var(--bg); backdrop-filter:none; box-shadow:none; border-color:var(--line); }
  .lp .bundle { background:linear-gradient(180deg, var(--blue-soft), transparent), var(--bg); border-color:var(--blue-line); }
  .lp-cta { text-align:center; margin-top:120px; padding:80px 24px; border:1px solid var(--line); border-radius:24px; background:radial-gradient(600px 240px at 50% 0%, var(--blue-soft), transparent 70%), var(--bg); }
  .lp-cta p { color:var(--ink-2); font-size:16.5px; margin:0 0 26px; }
  .lp .faq { max-width:760px; } .lp .faq summary { font-weight:500; font-size:16px; padding:4px 0; } .lp #faq { padding-bottom:40px; }
  .lp footer { border-top:1px solid var(--line); margin-top:60px; }
  @media (max-width: 860px) {
    .lp-hero { padding:56px 0 8px; } .lp-sec { padding-top:72px; } .lp-stats { grid-template-columns:repeat(2, minmax(0, 1fr)); margin-top:72px; padding:36px 0; }
    .lp-vs { grid-template-columns:1fr; } .lp-mid { padding:14px 0; transform:rotate(90deg); } .lp-steps { grid-template-columns:1fr; gap:26px; } .lp-who { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px; }
    .nrow { grid-template-columns:112px minmax(0, 1fr) 42px; font-size:13px; } .lp-noise, .lp-read { padding:20px 18px 18px; } .lp-cta { padding:52px 18px; margin-top:80px; } .lp-state { margin-top:44px; padding-bottom:40px; }
  }
  @media (max-width: 520px) { .lp-who { grid-template-columns:1fr; } }

  /* =====================================================================================================
     v5 · the logo's palette. Warm paper, charcoal line, four pastels (lilac, aqua, apricot, rose).
     The motif is the logo's own: an outlined shape with a pastel block set off behind it.
     ===================================================================================================== */
  :root { --lilac:#C99BF2; --aqua:#98DDE7; --apricot:#F3C98E; --rose:#ED9AA6; --char:#464A4D;
    --page:#f8f2e9; --bg:#FFFFFF; --bg-2:#f5eee3; --line:#eae0d2; --line-2:#d8ccba; --ink:#2e3032; --ink-2:#5e5d5b; --muted:#948c80; --on-accent:#FFFFFF;
    --blue:#b8525f; --blue-2:#983f4c; --blue-soft:color-mix(in srgb, var(--blue) 9%, transparent); --blue-line:color-mix(in srgb, var(--blue) 30%, transparent);
    --green:#3d8c69; --green-soft:rgba(61,140,105,.12); --red:#c04f5c; --amber:#a8721a; --amber-soft:rgba(243,201,142,.35); --phat:#c4862a; --phat-soft:rgba(243,201,142,.3); --user:var(--bg-2);
    --viz-1:#2B3FD6; --viz-2:#DA9861; --viz-3:#55AFBD; --viz-pos:#55AFBD; --viz-neg:#D87A92; --viz-mid:#efe7da;
    --shadow:0 1px 0 rgba(70,74,77,.04), 0 10px 30px rgba(110,90,60,.10); }
  html[data-accent="apricot"] { --blue:#b4761c; --blue-2:#925e12; } html[data-accent="lilac"] { --blue:#2B3FD6; --blue-2:#1F30B4; }
  html[data-accent="aqua"] { --blue:#23818f; --blue-2:#196873; }    html[data-accent="charcoal"] { --blue:#464A4D; --blue-2:#2e3032; }
  /* #theme: the light/dark switch is shown again (2026-10-17) */

  /* the backdrop: a pastel wash and the mark, faded, drifting with the pointer */
  html { --mx:0; --my:0; background:var(--page); }
  html[data-theme] body, html[data-theme] body.home, html[data-theme] body.philosophy { background:transparent; }
  #bgwash { position:fixed; inset:-8%; z-index:-2; pointer-events:none; filter:blur(30px); transform:translate(calc(var(--mx) * -18px), calc(var(--my) * -18px));
    background:radial-gradient(38vw 30vw at 10% 6%, rgba(201,155,242,.26), transparent 70%), radial-gradient(36vw 28vw at 94% 12%, rgba(152,221,231,.30), transparent 70%),
               radial-gradient(44vw 32vw at 84% 96%, rgba(243,201,142,.40), transparent 70%), radial-gradient(34vw 28vw at 6% 94%, rgba(237,154,166,.26), transparent 70%), var(--page); }
  #bgmark { position:fixed; z-index:-1; pointer-events:none; right:max(-40px, 3vw); top:52%; width:min(76vh, 46vw, 720px); transform:translateY(-50%) translate(calc(var(--mx) * 10px), calc(var(--my) * 10px)); opacity:.15; transition:opacity .4s ease; }
  #bgmark svg { width:100%; height:auto; display:block; overflow:visible; } #bgmark svg[data-lm] path { stroke-width:2.6; } #bgmark .bm { will-change:transform; }
  body.desk #bgmark, body.manage #bgmark { opacity:.09; } body.philosophy #bgmark { opacity:.13; }
  @media (max-width: 860px) { #bgmark { width:120vw; right:-34vw; opacity:.12; } }

  /* the mark itself */
  svg[data-lm] path { fill:none; stroke:var(--char); stroke-width:4; stroke-linecap:square; stroke-linejoin:miter; }
  svg[data-lm] .lm-piece { transform-box:view-box; transform-origin:center; animation-duration:9s; animation-timing-function:cubic-bezier(.45,0,.25,1); animation-iteration-count:infinite; }
  svg[data-lm] .lm-top { animation-name:lm-top; } svg[data-lm] .lm-left { animation-name:lm-left; } svg[data-lm] .lm-middle { animation-name:lm-middle; } svg[data-lm] .lm-right { animation-name:lm-right; } svg[data-lm] .lm-bottom { animation-name:lm-bottom; }
  @keyframes lm-top { 0%,12%,88%,100% { transform:translate(0,0) } 38%,62% { transform:translate(-22px,12px) } }
  @keyframes lm-left { 0%,12%,88%,100% { transform:translate(0,0) } 38%,62% { transform:translate(12px,-16px) } }
  @keyframes lm-middle { 0%,16%,88%,100% { transform:translate(0,0) } 42%,62% { transform:translate(10px,8px) } }
  @keyframes lm-right { 0%,12%,88%,100% { transform:translate(0,0) } 38%,62% { transform:translate(-12px,16px) } }
  @keyframes lm-bottom { 0%,12%,88%,100% { transform:translate(0,0) } 38%,62% { transform:translate(22px,-12px) } }
  svg[data-lm] .lm-link { animation:lm-links 9s ease-in-out infinite; } svg[data-lm] .lm-outer { animation:lm-outer 9s ease-in-out infinite; }
  @keyframes lm-links { 0%,12%,88%,100% { opacity:1 } 28%,72% { opacity:0 } }
  @keyframes lm-outer { 0%,12%,88%,100% { transform:translate(0,0); opacity:1 } 38%,62% { transform:translate(-6px,-4px); opacity:.45 } }
  @media (prefers-reduced-motion: reduce) { svg[data-lm] .lm-piece, svg[data-lm] .lm-link, svg[data-lm] .lm-outer { animation:none !important; } }
  html[data-theme] .wordmark { gap:9px; font-size:17px; letter-spacing:-.02em; }
  html[data-theme] .wordmark .logo { width:34px; height:36px; } .wordmark svg[data-lm] path { stroke-width:8; }
  .a-empty svg[data-lm] { width:54px; height:58px; } .a-empty svg[data-lm] path, .lp-mid svg[data-lm] path { stroke-width:7; }
  .lp-mid svg { width:46px; height:50px; }
  .lp-art .ring { fill:var(--bg); stroke:var(--line-2); stroke-width:1; } .lp-art svg[data-lm] path { stroke-width:6; }

  /* the status is a dot */
  html[data-theme] .pill { display:inline-flex !important; border:0; background:transparent; padding:6px; cursor:help; } #pilltext { display:none; }
  html[data-theme] .pill .dot { width:8px; height:8px; background:#e0a93a; box-shadow:0 0 0 3px rgba(224,169,58,.2); } html[data-theme] .pill.live .dot { background:#4fae84; box-shadow:0 0 0 3px rgba(79,174,132,.22); }

  /* chrome on paper */
  html[data-theme] header { background:color-mix(in srgb, var(--page) 80%, transparent); }
  html[data-theme] .btn.primary { background:var(--char); border-color:var(--char); color:#FFFFFF; }
  html[data-theme] .btn.primary:hover { background:var(--ink); border-color:var(--ink); }
  html[data-theme] .fab { background:var(--char); color:#FFFFFF; box-shadow:0 8px 22px rgba(48,56,60,.18); border-radius:8px; }
  html[data-theme] #toast { background:var(--char); color:#FFFFFF; }
  html[data-theme] .send { background:var(--char); color:#FFFFFF; }
  html[data-theme] .dock, html[data-theme] .dock.on { box-shadow:0 24px 60px rgba(110,90,60,.22); }
  html[data-theme] .drawer { box-shadow:-24px 0 60px rgba(110,90,60,.16); }
  html[data-theme] .overlay { background:rgba(70,60,45,.32); }
  .sstrip .pulse.on { background:#4fae84; }
  html[data-theme] .sec2-h h4::before { background:var(--rose); }
  html[data-theme] .mod .lock.on::before { background:#4fae84; }
  html[data-theme] .obar.touch i { background:linear-gradient(90deg, rgba(201,155,242,.45), rgba(43,63,214,.85)); }
  html[data-theme] .obar.beyond i { background:linear-gradient(90deg, rgba(243,201,142,.55), rgba(218,152,97,.85)); }
  html[data-theme] .split .t { background:#5fae8b; } html[data-theme] .split .s { background:#D87A92; } .splitkey em.t { background:#5fae8b; } .splitkey em.s { background:#D87A92; }

  /* the landing: outlined shapes with a pastel block behind, like the mark */
  .lp-hero h1 em { color:var(--ink); background:linear-gradient(transparent 62%, var(--apricot) 62%, var(--apricot) 92%, transparent 92%); padding:0 .08em; }
  .lp-eyebrow { background:var(--bg); border-color:var(--line-2); }
  .lp .btn.primary.big { box-shadow:none; transition:transform .12s ease, box-shadow .12s ease; border-radius:8px !important; }
  .lp .btn.primary.big:hover { transform:translate(2px, 2px); box-shadow:0 4px 12px rgba(48,56,60,.14); }
  body.home .btn.primary { border-radius:8px !important; }
  .lp-noise, .lp-read, .lp-cta, .lp .cat, .lp .bundle, .lp .compare { border:1.5px solid var(--char); border-radius:4px; background:var(--bg); }
  .lp-noise { box-shadow:none; } .lp-read { box-shadow:none; background:var(--bg); }
  .lp .compare { box-shadow:none; overflow:hidden; } .lp-cta { box-shadow:none; background:var(--bg); }
  .lp .cat:nth-child(1) { box-shadow:none; } .lp .cat:nth-child(2) { box-shadow:none; } .lp .cat:nth-child(3) { box-shadow:none; }
  .lp .bundle { box-shadow:none; background:var(--bg); margin-top:10px; }
  .lp-art .nz { stroke:var(--char); } .lp-art .curve { stroke:var(--char); stroke-width:2; } .lp-art .dot { fill:var(--char); }
  .lp-art .area { fill:var(--aqua); opacity:.30; } .lp-art .box { fill:var(--apricot); opacity:.55; } .lp-art .rail { stroke:var(--char); opacity:.35; } .lp-art .glow { fill:var(--rose); }
  .lp-steps .n { color:var(--ink); border-top:1.5px solid var(--char); } .lp-steps > div:nth-child(1) .n::after, .lp-steps > div:nth-child(2) .n::after, .lp-steps > div:nth-child(3) .n::after { content:""; display:inline-block; width:22px; height:9px; margin-left:10px; vertical-align:0; }
  .lp-steps > div:nth-child(1) .n::after { background:var(--lilac); } .lp-steps > div:nth-child(2) .n::after { background:var(--aqua); } .lp-steps > div:nth-child(3) .n::after { background:var(--rose); }
  .lp-stats { border-color:var(--line-2); } .lp-stats b { color:var(--ink); }
  .lp-stats > div:nth-child(1) b { text-shadow:5px 5px 0 var(--lilac); } .lp-stats > div:nth-child(2) b { text-shadow:5px 5px 0 var(--aqua); } .lp-stats > div:nth-child(3) b { text-shadow:5px 5px 0 var(--apricot); } .lp-stats > div:nth-child(4) b { text-shadow:5px 5px 0 var(--rose); }
  .lp-who > div { border-top:1.5px solid var(--char); } .lp-state { color:var(--muted); border-bottom-color:var(--line-2); } .lp-link { color:var(--ink); text-decoration:underline; text-decoration-color:var(--rose); text-decoration-thickness:2px; text-underline-offset:4px; }
  .rrow em u { background:var(--char); } .rrow em { background:var(--bg-2); }
  html[data-theme] .compare th.us, html[data-theme] .compare td.us { background:color-mix(in srgb, var(--apricot) 22%, transparent); color:var(--ink); }
  html[data-theme] .cta { background:var(--bg); }

  /* =====================================================================================================
     v6 · the design sketch. Cool paper, thin overlapping rectangular geometry, richer lilac / cyan / peach /
     coral, light-weight tight headlines. Wording unchanged; this layer restyles the landing and the desk.
     ===================================================================================================== */
  :root { --page:#FFFFFF; --bg:#FFFFFF; --bg-2:#F4F5F7; --line:#E5E7EB; --line-2:#CDD2D9; --ink:#16181D; --ink-2:#3D424B; --muted:#6B7280; --char:#22252B; --on-accent:#ffffff;
    --lilac:#C7CEF8; --aqua:#A7E4ED; --apricot:#F5CC9B; --rose:#F1B5C2; --purple:#6373E6; --cyan:#55AFBD; --peach:#DA9861; --coral:#D87A92;
    --blue:#2B3FD6; --blue-2:#1F30B4; --green:#3D8C69; --green-soft:rgba(61,140,105,.13); --red:#B9506A; --amber:#A8672A; --amber-soft:rgba(218,152,97,.22); --phat:#C07F45; --phat-soft:rgba(218,152,97,.22);
    --viz-1:#2B3FD6; --viz-2:#DA9861; --viz-3:#55AFBD; --viz-pos:#55AFBD; --viz-neg:#D87A92; --viz-mid:#E1E4DE; --shadow:0 10px 30px rgba(48,56,60,.10);
    --head:"Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
  html[data-accent="rose"] { --blue:#B9506A; --blue-2:#983c55; } html[data-accent="apricot"] { --blue:#A8672A; --blue-2:#87501d; }
  html[data-accent="lilac"] { --blue:#2B3FD6; --blue-2:#1F30B4; } html[data-accent="aqua"] { --blue:#2F8896; --blue-2:#216b77; } html[data-accent="charcoal"] { --blue:#16181D; --blue-2:#1f2528; }
  html { background:var(--page); }
  html[data-theme] header { background:var(--page); backdrop-filter:none; }
  body.home header { padding:18px 5%; border-bottom-color:transparent; }
  html[data-theme] .btn { border-radius:5px; }
  html[data-theme] .btn.primary { background:var(--ink); border-color:var(--ink); color:#fff; } html[data-theme] .btn.primary:hover { background:#4D5353; border-color:#4D5353; }
  body.home .btn.primary { border-radius:5px !important; }
  html[data-theme] .fab { background:var(--ink); color:#fff; border-radius:5px; box-shadow:0 10px 26px rgba(48,56,60,.25); }
  html[data-theme] #toast, html[data-theme] .send { background:var(--ink); color:#fff; }
  html[data-theme] .dock, html[data-theme] .dock.on { box-shadow:0 24px 60px rgba(48,56,60,.22); } html[data-theme] .drawer { box-shadow:-24px 0 60px rgba(48,56,60,.16); } html[data-theme] .overlay { background:rgba(48,56,60,.34); }
  html[data-theme] .mod { border-color:var(--line-2); border-radius:8px; }
  html[data-theme] .sec2-h h4::before { background:var(--purple); }
  html[data-theme] .obar.touch i { background:linear-gradient(90deg, rgba(199,206,248,.7), rgba(43,63,214,.9)); } html[data-theme] .obar.beyond i { background:linear-gradient(90deg, rgba(245,204,155,.75), rgba(218,152,97,.95)); }
  html[data-theme] .split .t { background:#55AFBD; } html[data-theme] .split .s { background:#D87A92; } .splitkey em.t { background:#55AFBD; } .splitkey em.s { background:#D87A92; }
  html[data-theme] .compare th.us, html[data-theme] .compare td.us { background:rgba(199,206,248,.28); color:var(--ink); }

  /* the mark */
  html[data-theme] .wordmark { gap:8px; font:800 30px var(--head); letter-spacing:-.055em; color:var(--ink); padding:2px 6px; }
  html[data-theme] .wordmark:hover { background:transparent; }
  html[data-theme] .wordmark .logo { width:40px; height:44px; overflow:visible; flex-shrink:0; }
  body.desk .wordmark, body.manage .wordmark { font-size:24px; } body.desk .wordmark .logo, body.manage .wordmark .logo { width:32px; height:35px; }
  svg[data-mark] .accent { transform-box:fill-box; transform-origin:center; transition:transform .65s cubic-bezier(.2,.8,.2,1); }
  .wordmark:is(:hover, :focus-visible) .a { animation:logo-top 1.8s ease-in-out infinite; } .wordmark:is(:hover, :focus-visible) .b { animation:logo-side 1.8s ease-in-out -.3s infinite; }
  .wordmark:is(:hover, :focus-visible) .c, .wordmark:is(:hover, :focus-visible) .d { animation:logo-center 1.8s ease-in-out -.6s infinite; } .wordmark:is(:hover, :focus-visible) .e { animation:logo-bottom 1.8s ease-in-out -.9s infinite; }
  @keyframes logo-top { 0%,100% { transform:translate(0,0) } 50% { transform:translate(18px,-12px) } } @keyframes logo-side { 0%,100% { transform:translate(0,0) } 50% { transform:translate(-15px,18px) } }
  @keyframes logo-center { 0%,100% { transform:translate(0,0) } 50% { transform:translate(12px,-10px) } } @keyframes logo-bottom { 0%,100% { transform:translate(0,0) } 50% { transform:translate(-18px,12px) } }
  @media (prefers-reduced-motion: reduce) { svg[data-mark] .accent { animation:none !important; transition:none !important; } }
  .a-empty svg[data-mark] { width:52px; height:58px; } .lp-mid svg[data-mark] { width:46px; height:52px; }
  html[data-theme] .pill .dot { background:#DA9861; box-shadow:0 0 0 3px rgba(218,152,97,.22); } html[data-theme] .pill.live .dot { background:#4fae84; box-shadow:0 0 0 3px rgba(79,174,132,.22); }

  /* the landing */
  .lp .wrap { max-width:1240px; padding:0 40px; }
  .lp h1, .lp h2, .lp-stats b, .lp .price { font-family:var(--head); font-weight:800; } .lp h3 { font-family:var(--head); font-weight:700; } .lp-state { font-family:var(--head); font-weight:600; }
  .lp-herobox { position:relative; min-height:660px; height:calc(100svh - 84px); max-height:860px; display:flex; align-items:center; justify-content:center; isolation:isolate; overflow:hidden; }
  #field { position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
  .lp-hero { text-align:center; padding:70px 24px 95px; max-width:980px; position:relative; z-index:1; }
  .lp-hero h1 { font-size:clamp(37.8px, 5.3vw, 75.7px); letter-spacing:-.06em; line-height:1.08; margin:0; }
  .lp-hero h1 em { color:var(--ink); padding:0; background:linear-gradient(transparent 80%, #B798CC80 80%, #B798CC80 96%, transparent 96%); }
  .lp-eyebrow, .lp-eb, .lp-cap { font:600 12px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); border:0; background:none; padding:0; border-radius:0; }
  .lp-eyebrow { display:inline-flex; align-items:center; gap:9px; margin-bottom:25px; } .lp-eyebrow::before { content:""; width:8px; height:8px; background:var(--purple); }
  .lp-eb { margin-bottom:20px; } .lp-cap { font-size:11px; color:var(--muted); }
  .lp-sub { font-size:18px; line-height:1.65; color:var(--muted); max-width:650px; margin:27px auto; }
  .lp-ctas { gap:28px; }
  .lp .btn.primary.big { box-shadow:none; min-height:48px; padding:14px 23px; font-size:14px; font-weight:500; border-radius:5px !important; transition:background .2s, transform .2s; }
  .lp .btn.primary.big:hover { transform:translateY(-2px); box-shadow:none; }
  .lp-link { font-size:14px; font-weight:400; color:var(--ink); text-decoration:none; border-bottom:1px solid #7A808A; padding:7px 0; } .lp-link:hover { color:#2B3FD6; }
  .lp-herobottom { position:absolute; bottom:20px; right:5%; }
  .motion { border:1px solid #BFC8C2; background:#FFFFFFD9; padding:8px 12px; border-radius:4px; font:12px var(--sans); color:var(--muted); cursor:pointer; }
  .lp-art { margin:0 auto; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#F4F5F7; padding:26px 12px; max-width:none; } .lp-art svg { max-width:1400px; margin:0 auto; }
  .lp-art .nz { stroke:var(--char); } .lp-art .curve { stroke:var(--char); stroke-width:1.8; } .lp-art .dot { fill:var(--char); } .lp-art .rail { stroke:var(--char); opacity:.35; }
  .lp-art .area { fill:#A7E4ED; opacity:.45; } .lp-art .box { fill:#C7CEF8; opacity:.75; } .lp-art .ring { fill:var(--bg); stroke:var(--line-2); } .lp-art .glow { fill:var(--coral); }
  .lp-state { font-size:clamp(24px, 3vw, 38px); letter-spacing:-.04em; line-height:1.2; color:var(--muted); margin:90px 0 0; padding-bottom:70px; border-bottom:1px solid var(--line); max-width:none; } .lp-state b { color:var(--ink); font-weight:400; }
  .lp-sec { padding:110px 0 0; }
  .lp-intro { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:44px; }
  .lp-sec h2, .lp-cta h2 { text-align:left; font-size:clamp(29.2px, 3.4vw, 46.4px); letter-spacing:-.05em; line-height:1.08; margin:0; max-width:760px; }
  .lp-lead { text-align:left; max-width:380px; margin:0; font-size:16px; line-height:1.55; color:var(--muted); flex-shrink:0; }
  .lp-noise, .lp-read, .lp .compare { border:1px solid #D5D9DF; border-radius:8px; background:var(--bg); box-shadow:none; }
  .lp-read { background:#EEF1FE; box-shadow:none; } .lp .compare { box-shadow:none; }
  .nrow b { border-radius:8px; } .nrow b.up { color:#2F8896; background:rgba(167,228,237,.5); } .nrow b.dn { color:#B9506A; background:rgba(216,122,146,.2); } .nrow b.qm { color:#A8672A; background:rgba(245,204,155,.5); }
  .rhead { font-family:var(--head); font-weight:700; font-size:24px; letter-spacing:-.035em; line-height:1.2; margin-bottom:16px; }
  .rrow em { background:#D6CEDD; } .rrow em u { background:#2B3FD6; } .rrow, .nrow, .nfoot { border-top-color:#DAD6E0; } .lp-noise .nrow, .lp-noise .nfoot { border-top-color:var(--line); }
  .lp-steps { gap:60px; }
  .lp-who .w4 { display:flex; align-items:center; gap:10px; font:500 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
  .lp-who .w4::after { content:""; width:22px; height:9px; } .lp-who > div:nth-child(1) .w4::after { background:var(--lilac); } .lp-who > div:nth-child(2) .w4::after { background:var(--aqua); }
  .lp-who > div:nth-child(3) .w4::after { background:var(--rose); } .lp-who > div:nth-child(4) .w4::after { background:#F5CC9B; }
  .lp-gex .nrow { grid-template-columns:70px minmax(0, 1fr) 58px; } .lp-gex .nrow i { display:block; }
  .lp-gex .nrow i u { display:block; height:8px; border-radius:2px; background:#B9C0CB; } .lp-gex .nrow i u.neg { background:rgba(216,122,146,.55); }
  .lp-gex .nrow b.gv { color:var(--ink-2); background:#F1F2F5; text-transform:none; letter-spacing:0; }
  .lp-steps .n { height:52px; width:66px; display:grid; place-items:center; margin-bottom:25px; padding:0; font:400 16px var(--sans); color:var(--ink); border:1px solid #5A6062; }
  .lp-steps .n::after { display:none !important; }
  .lp-steps > div:nth-child(1) .n { box-shadow:none; } .lp-steps > div:nth-child(2) .n { box-shadow:none; } .lp-steps > div:nth-child(3) .n { box-shadow:none; }
  .lp-steps h3 { font-size:23px; letter-spacing:-.035em; margin-bottom:17px; } .lp-steps p, .lp-who p { font-size:15px; color:var(--muted); }
  .lp-stats { border-color:var(--line); } .lp-stats b { font-size:clamp(46px, 5.6vw, 72px); letter-spacing:-.05em; text-shadow:none !important; } .lp-stats span { color:var(--muted); }
  .lp-guide { display:grid; grid-template-columns:180px minmax(0, 1fr); gap:50px; align-items:center; background:#D9DFD8; padding:42px; max-width:none; } .lp-guide p { font-size:16px; line-height:1.65; color:var(--ink-2); max-width:760px; }
  .philosophy-mark { height:140px; position:relative; } .philosophy-mark span { border:2px solid #515859; position:absolute; width:100px; height:60px; left:12px; top:15px; }
  .philosophy-mark span:nth-child(2) { left:65px; top:44px; width:65px; height:90px; background:#A7E4ED70; } .philosophy-mark span:nth-child(3) { left:20px; top:82px; width:135px; height:38px; background:#C7CEF855; }
  .lp .grid.g3 { gap:22px; grid-template-columns:repeat(3, minmax(0, 1fr)); }
  @media (max-width: 860px) { .lp .grid.g3 { grid-template-columns:1fr; } }
  .lp .cat { border:1px solid #D5D9DF; border-radius:0; background:#FAFAFB; box-shadow:none !important; position:relative; padding-top:7px; }
  .lp .cat::before { content:""; position:absolute; top:0; left:0; right:0; height:7px; background:#C7CEF8; } .lp .cat:nth-child(2)::before { background:#A7E4ED; } .lp .cat:nth-child(3)::before { background:#F5CC9B; }
  .lp .cat .art { display:none; } .lp .cat h3 { font-size:27px; letter-spacing:-.035em; } .lp .cat .cb { padding:24px 27px 28px; }
  .lp .cat ul { list-style:none; padding:0; margin:20px 0 26px; } .lp .cat li { padding:10px 0; border-top:1px solid #ECEEF1; color:var(--muted); font-size:14px; }
  .lp .price { font-size:35px; letter-spacing:-.045em; } .lp .price span { font:400 14px var(--sans); letter-spacing:0; color:var(--muted); }
  .lp .bundle { background:#DCE1FC; border:0; border-radius:0; box-shadow:none; padding:32px; margin-top:2px; } .lp .bundle h3 { font-size:28px; letter-spacing:-.035em; }
  .lp-who { gap:34px; margin-top:0; } .lp-who > div { border-top:1px solid var(--line-2); } .lp-who h3 { font-size:21px; letter-spacing:-.035em; }
  .lp-cta { text-align:left; display:flex; align-items:center; justify-content:space-between; gap:40px; overflow:hidden; background:#D9D2E0; border:0; border-radius:0; box-shadow:none; padding:65px; margin-top:110px; }
  .lp-cta h2 { font-size:clamp(34.4px, 4.3vw, 55px); margin:0 0 20px; } .lp-cta p { color:var(--muted); margin-bottom:25px; } .lp-cta .lp-ctas { justify-content:flex-start; }
  .lp-cta-logo svg { width:230px; height:260px; transform:rotate(-5deg); display:block; }
  .lp #faq { display:grid; grid-template-columns:1fr 1.5fr; gap:60px; border-top:1px solid var(--line); margin-top:110px; padding:110px 0 40px; } .lp #faq .lp-intro { display:block; margin:0; }
  .lp .faq { max-width:none; margin:0; } .lp .faq details, .lp .faq details:last-child { border-top:0; border-bottom:1px solid #CAD0CB; padding:0; }
  .lp .faq summary { padding:23px 30px 23px 0; font-size:16px; font-weight:400; } .lp .faq p { font-size:15px; line-height:1.7; padding:0 25px 24px 0; margin:0; color:var(--muted); }
  .lp footer { border-top:0; margin-top:40px; color:var(--muted); }
  html[data-theme] nav.links a { font-size:14px; font-weight:400; color:var(--ink); } html[data-theme] nav.links a:hover { color:#2B3FD6; } html[data-theme] nav.links { gap:14px; margin-left:26px; }
  @media (max-width: 860px) {
    .lp .wrap { padding:0 22px; } .lp-herobox { height:auto; min-height:610px; } .lp-hero { padding:85px 20px 110px; } .lp-hero h1 { font-size:clamp(32.7px, 6.7vw, 49.9px); } .lp-sub { font-size:16px; }
    .lp-sec { padding-top:65px; } .lp-intro { display:block; } .lp-lead { margin-top:24px; max-width:460px; } .lp-steps { gap:40px; }
    .lp-guide { grid-template-columns:1fr; padding:28px; gap:20px; } .philosophy-mark { width:160px; } .lp-cta { padding:35px 28px; margin-top:65px; position:relative; isolation:isolate; }
    .lp-cta-logo { position:absolute; right:-50px; bottom:25px; opacity:.13; z-index:-1; } .lp-cta-logo svg { width:190px; height:210px; }
    .lp #faq { grid-template-columns:1fr; gap:24px; margin-top:65px; padding-top:65px; } .lp-state { margin-top:60px; padding-bottom:48px; }
    html[data-theme] .wordmark { font-size:26px; } html[data-theme] .wordmark .logo { width:34px; height:38px; }
  }

  /* ===== v7 · paint, paper and the hand-drawn mark: a still hero, a brush stroke under headlines, the mark drawing itself at the close ===== */
  .lp-herobox { background:var(--page); }
  .lp-intro h2 { position:relative; }
  .lp-intro h2::after { content:""; display:block; width:min(260px, 55%); height:14px; margin-top:8px; background:linear-gradient(100deg, rgba(174,126,207,.29), rgba(98,192,205,.22), transparent); transform:rotate(-1.5deg); filter:blur(1px); }
  .brush-signature { position:relative; max-width:1160px; margin:15px auto 60px; padding:75px 7% 85px; min-height:585px; display:grid; grid-template-columns:minmax(0, 1fr) minmax(270px, 420px); align-items:center; gap:40px; isolation:isolate; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .brush-signature::before { content:""; position:absolute; inset:-30px -10%; z-index:-2; background:url("/art/pastel-brushes.jpg") no-repeat center center / cover; opacity:.35; transform:rotate(180deg); pointer-events:none; }
  .brush-signature::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,.05) 50%, rgba(255,255,255,.8)); pointer-events:none; }
  .signature-intro h2 { font:800 clamp(36.1px, 4.3vw, 57.6px)/1.05 var(--head); letter-spacing:-.05em; max-width:520px; margin:0; color:var(--ink); }
  .signature-intro p { margin:26px 0 28px; max-width:380px; font-size:16px; color:var(--muted); } .signature-intro .lp-ctas { justify-content:flex-start; }
  .signature-art { width:100%; max-width:420px; aspect-ratio:1; position:relative; justify-self:center; } .signature-art svg { width:100%; height:100%; overflow:visible; }
  .signature-art .pigment { opacity:0; transform-box:fill-box; transform-origin:center; transform:translate(9px, 8px); transition:opacity 1.1s ease, transform 1.8s cubic-bezier(.2,.8,.2,1); }
  .signature-art.is-visible .pigment { opacity:.7; transform:translate(0, 0); }
  .signature-art .draw-line { fill:none; stroke:#3D4547; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:var(--length); stroke-dashoffset:var(--length); }
  .signature-art.is-visible .draw-line { animation:draw-path 2.4s cubic-bezier(.35,0,.3,1) forwards; animation-delay:var(--delay); }
  .signature-art.is-visible .pigment:nth-child(2) { transition-delay:.45s; } .signature-art.is-visible .pigment:nth-child(3) { transition-delay:.85s; } .signature-art.is-visible .pigment:nth-child(4) { transition-delay:1.15s; } .signature-art.is-visible .pigment:nth-child(5) { transition-delay:1.35s; }
  @keyframes draw-path { to { stroke-dashoffset:0; } }
  .lp #faq { padding-bottom:90px; } .lp footer { margin-top:0; border-top:0; }
  @media (max-width: 860px) { .brush-signature { grid-template-columns:1fr; gap:20px; min-height:0; margin:0 22px 40px; padding:60px 15px 70px; } .signature-art { max-width:340px; } .signature-intro h2 { font-size:clamp(34.4px, 8.6vw, 48.2px); } }
  @media (prefers-reduced-motion: reduce) { .signature-art .draw-line { stroke-dashoffset:0 !important; animation:none !important; } .signature-art .pigment { opacity:.7 !important; transform:none !important; transition:none !important; } }
  .lp .cat .cb { padding-bottom:22px; } .lp .cat ul { margin-bottom:0; }
  .chart-legend .lr.implied span, .chart-legend .lr.implied b { color:var(--blue); font-weight:600; }

  /* ===== search and the volatility panel ===== */
  #searchbtn { color:var(--ink-2); gap:8px; padding:6px 8px 6px 10px; } #searchbtn span { font-size:13px; }
  header #customize-btn { color:var(--ink-2); gap:7px; padding:6px 10px; } header #customize-btn svg { width:15px; height:15px; } header #customize-btn span { font-size:13px; }
  kbd { font:500 11px var(--mono); color:var(--muted); border:1px solid var(--line-2); border-radius:4px; padding:1px 5px; background:var(--bg-2); }
  #search { align-items:flex-start; padding-top:12vh; }
  .palette { width:min(640px, 100%); background:var(--bg); border:1px solid var(--line-2); border-radius:10px; box-shadow:0 30px 80px rgba(48,56,60,.28); overflow:hidden; }
  .pal-in { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); } .pal-in svg { width:18px; height:18px; color:var(--muted); flex:0 0 auto; }
  .pal-in input { flex:1; min-width:0; border:0; outline:0; background:transparent; font:16px var(--sans); color:var(--ink); } .pal-in input::placeholder { color:var(--muted); }
  .pal-res { max-height:min(52vh, 460px); overflow:auto; padding:6px; }
  .pal-g { font:600 10px var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:10px 10px 4px; }
  .pal-r { display:block; width:100%; text-align:left; border:0; background:transparent; border-radius:6px; padding:8px 10px; cursor:pointer; font-family:var(--sans); color:var(--ink); }
  .pal-r b { display:block; font-size:14px; font-weight:500; } .pal-r span { display:block; font-size:12.5px; color:var(--muted); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pal-r.on, .pal-r:hover { background:var(--blue-soft); } .pal-r.on b { color:var(--blue); }
  .pal-foot { display:flex; gap:16px; padding:9px 14px; border-top:1px solid var(--line); font-size:11.5px; color:var(--muted); } .pal-foot kbd { margin-right:3px; }
  html[data-theme] .volmodal { width:min(800px, 100%); max-height:92vh; overflow:auto; padding:22px 24px 20px; border-radius:10px; text-align:left; }
  .vol-h { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; } .vol-h h2 { font:800 22.4px var(--head); letter-spacing:-.04em; margin:0 0 2px; } .vol-h p { font-size:13px; color:var(--muted); margin:0; }
  .vol-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
  .vol-key { font-size:12.5px; color:var(--ink-2); display:inline-flex; align-items:center; gap:7px; } .vol-key i { display:inline-block; width:18px; height:0; border-top:2.5px solid var(--viz-1); margin-left:8px; } .vol-key i.kthen { border-top:2px dashed var(--viz-2); }
  .volsvg { width:100%; height:auto; display:block; } .volsvg .vg { stroke:var(--line); stroke-width:1; } .volsvg .vt { fill:var(--muted); font:500 11px var(--mono); } .volsvg .vv { fill:var(--ink); font:600 11px var(--mono); }
  .volsvg .vnow { fill:none; stroke:var(--viz-1); stroke-width:2.6; } .volsvg .vthen { fill:none; stroke:var(--viz-2); stroke-width:2; stroke-dasharray:6 5; }
  .volsvg .dnow { fill:var(--bg); stroke:var(--viz-1); stroke-width:2.2; } .volsvg .dthen { fill:var(--viz-2); } .volsvg .vmark { stroke:var(--ink); stroke-width:1; stroke-dasharray:3 3; }
  .vol-slide { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:18px; align-items:center; margin:6px 0 2px; padding:0 2px; }
  .vol-slide input[type=range] { width:100%; accent-color:var(--viz-2); height:26px; }
  .vol-when b { display:block; font:600 14px var(--mono); } .vol-when span { font-size:12px; color:var(--muted); }
  .vol-quick { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; } .vol-quick .btn { padding:4px 9px; font-size:12px; }
  .voltab { width:100%; border-collapse:collapse; font-size:13px; margin-top:8px; } .voltab th, .voltab td { padding:6px 8px; border-bottom:1px solid var(--line); text-align:right; }
  .voltab th { font:600 10px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .voltab th:first-child, .voltab td:first-child { text-align:left; color:var(--ink-2); }
  .voltab td { font-family:var(--mono); font-size:12.5px; } .voltab td:first-child { font-family:var(--sans); font-size:13px; } .voltab em { font-style:normal; font-weight:600; } .voltab .up { color:var(--amber); } .voltab .dn { color:#2F8896; }
  .vol-note { font-size:12px; color:var(--muted); margin:10px 0 0; line-height:1.5; } .volin { margin:6px 0 10px; }
  @media (max-width: 640px) { #searchbtn span, #searchbtn kbd, header #customize-btn span { display:none; } #search { padding-top:6vh; } .pal-foot span:last-child { display:none; } html[data-theme] .volmodal { padding:16px 14px; } .vol-slide { grid-template-columns:1fr; gap:4px; } }

  .seg.multi button { display:inline-flex; align-items:center; gap:6px; } .seg.multi button i, .voltab th i { display:inline-block; width:9px; height:9px; border-radius:2px; opacity:.35; } .seg.multi button.on i, .voltab th i { opacity:1; } .voltab th i { margin-right:6px; }
  .vol-hint { font-size:12px; color:var(--muted); }
  .vol-legend { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:12px; color:var(--ink-2); margin:2px 0 6px; } .vol-legend span { display:inline-flex; align-items:center; gap:6px; } .vol-legend svg { width:22px; height:6px; }
  .vol-legend button { border:0; background:transparent; color:var(--muted); cursor:pointer; font:500 14px var(--sans); line-height:1; padding:0 2px; } .vol-legend button:hover { color:var(--red); }
  .vol-slide { grid-template-columns:minmax(0, 1fr) auto auto; } .volsvg .vpin { stroke:var(--muted); stroke-width:1; stroke-dasharray:1 3; }
  .voltab + .voltab { margin-top:16px; } .voltab th:first-child { color:var(--ink); }
  @media (max-width: 640px) { .vol-slide { grid-template-columns:1fr; } .vol-hint { display:none; } }

  /* ===== the auction: volume at price, VWAP bands, TPO ===== */
  .aucsvg { width:100%; height:auto; display:block; } .aucsvg .ag { stroke:var(--line); stroke-width:1; } .aucsvg .at { fill:var(--muted); font:500 11px var(--mono); } .aucsvg .ah { fill:var(--ink); font:600 13px var(--sans); }
  .aucsvg .al { fill:var(--ink-2); font:500 10.5px var(--mono); } .aucsvg .ap { fill:var(--ink); font:600 11px var(--mono); } .aucsvg .aw { fill:var(--ink); font:600 10.5px var(--mono); }
  .aucsvg .avl { stroke-width:1; stroke-dasharray:3 3; opacity:.9; } .aucsvg .avw { stroke:var(--ink); stroke-width:1.6; } .aucsvg .alast { stroke:var(--ink); stroke-width:1; stroke-dasharray:1 4; } .aucsvg .alt { fill:var(--ink); font:600 11px var(--mono); }
  .auccap { font-size:12px; color:var(--muted); margin:6px 0 2px; line-height:1.5; }
  .tpohead { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
  .tpokey { font-size:12px; color:var(--ink-2); display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; } .tpokey i { display:inline-block; width:12px; height:12px; border-radius:2px; margin-left:10px; }
  .tpokey .k-poc { background:rgba(43,63,214,.45); } .tpokey .k-va { background:rgba(43,63,214,.14); } .tpokey .k-ib { background:#55AFBD; width:4px; } .tpokey .k-sp { background:transparent; border:1px dashed var(--coral, #D87A92); }
  .tpo { font:500 12px/1 var(--mono); max-height:560px; overflow:auto; border:1px solid var(--line); border-radius:8px; padding:6px 0; background:var(--bg); }
  .tpo .tr { display:grid; grid-template-columns:58px 6px minmax(0, 1fr) 30px; gap:8px; align-items:center; padding:2px 10px; }
  .tpo .tp { color:var(--muted); text-align:right; } .tpo .tn { color:var(--muted); text-align:right; font-size:11px; }
  .tpo .tib { height:14px; border-radius:2px; } .tpo .tib.on { background:#55AFBD; }
  .tpo .tl { letter-spacing:.32em; white-space:nowrap; color:var(--ink); } .tpo .tl b { font-weight:500; } .tpo .tl b.ib { color:#2F8896; font-weight:700; }
  .tpo .tr.va { background:rgba(43,63,214,.10); } .tpo .tr.poc { background:rgba(43,63,214,.34); } .tpo .tr.poc .tp, .tpo .tr.poc .tn { color:var(--ink); font-weight:700; }
  .tpo .tr.sp .tl b { outline:1px dashed #D87A92; outline-offset:1px; }

  /* =====================================================================================================
     v8 · the doodle identity: the pencil mark, a left-set typographic hero, drawn icons, pencil underlines,
     four characters, a doodled map and the mark drawing itself at the close. Wording unchanged.
     ===================================================================================================== */
  /* One drawn identity from the first mark to the final signature. */
svg[data-mark="doodle"] .doodle-color,
svg[data-mark="doodle"] .doodle-ink {
  transform-box: fill-box;
  transform-origin: center;
}
  svg[data-mark="doodle"] .doodle-color { transition: transform .55s cubic-bezier(.18,.8,.25,1); }
  svg[data-mark="doodle"] .doodle-ink { transition: transform .65s cubic-bezier(.18,.8,.25,1); }
  .wordmark:is(:hover,:focus-visible) .doodle-color:nth-child(1) { transform: translate(-3px,-6px) rotate(-2deg); }
  .wordmark:is(:hover,:focus-visible) .doodle-color:nth-child(2) { transform: translate(-6px,4px) rotate(2deg); }
  .wordmark:is(:hover,:focus-visible) .doodle-color:nth-child(3) { transform: translate(3px,-3px) rotate(-3deg); }
  .wordmark:is(:hover,:focus-visible) .doodle-color:nth-child(4) { transform: translate(5px,4px) rotate(2deg); }
  .wordmark:is(:hover,:focus-visible) .doodle-color:nth-child(5) { transform: translate(2px,6px) rotate(-2deg); }
  .wordmark:is(:hover,:focus-visible) .doodle-ink { transform: rotate(-1.5deg) scale(1.025); }
  svg[data-mark="doodle"] .doodle-hatching,
svg[data-mark="doodle"] .doodle-second-pass { transition: opacity .45s ease, transform .6s ease; }
  .wordmark:is(:hover,:focus-visible) .doodle-hatching { opacity: .75; transform: translate(2px,-1px); }
  .wordmark:is(:hover,:focus-visible) .doodle-second-pass { opacity: .65; }
  .section-spirit {
  --figure-shift-x: 0px;
  --figure-shift-y: 0px;
  margin: 0;
  min-width: 0;
  justify-self: center;
  position: relative;
  display: grid;
  place-items: center;
  touch-action: pan-y;
  transform: translate3d(var(--figure-shift-x),var(--figure-shift-y),0);
  transition: transform .45s cubic-bezier(.2,.75,.2,1), opacity .8s ease;
}
  .section-spirit::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 25px;
  height: 1px;
  background: #87958e8c;
  transform: rotate(-2deg);
}
  .section-spirit img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: saturate(.88);
}
  .section-spirit figcaption {
  position: relative;
  width: 100%;
  margin-top: 4px;
  padding-top: 9px;
  color: #4B515B;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
}
  .section-spirit--listen { width: min(100%,215px); }
  .section-spirit--reach { width: min(100%,224px); }
  .section-spirit--connect { width: min(100%,248px); }
  .section-spirit--listen img { animation: spirit-listen 7.8s ease-in-out infinite; transform-origin: 52% 90%; }
  .section-spirit--reach img { animation: spirit-reach 8.7s ease-in-out infinite; transform-origin: 45% 92%; }
  .section-spirit--connect img { animation: spirit-connect 6.2s ease-in-out infinite; transform-origin: 50% 88%; }
  .section-spirit:is(:hover,:focus-within) img { filter: saturate(1.08) drop-shadow(0 5px 0 #848e851c); }
  @keyframes spirit-listen {
  0%,100% { transform: rotate(-1.5deg); }
  35% { transform: rotate(2deg); }
  66% { transform: rotate(-2deg) translateY(-2px); }
}
  @keyframes spirit-reach {
  0%,100% { transform: translateX(0) rotate(0); }
  42% { transform: translateX(7px) rotate(-2deg); }
  74% { transform: translateX(2px) rotate(1deg); }
}
  @keyframes spirit-connect {
  0%,100% { transform: translateX(0) rotate(-1deg) scaleX(1); }
  38% { transform: translateX(-3px) rotate(1deg) scaleX(1.025); }
  70% { transform: translateX(4px) rotate(-.5deg) scaleX(.985); }
}
  .signature-art .draw-line { stroke: #3f4443; stroke-width: 4.7; }
  .signature-art .second-pass {
  fill: none;
  stroke: #676b68;
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity .8s ease 2s;
}
  .signature-art.is-visible .second-pass { opacity: .43; }
  .signature-art .pigment { filter: url(#signature-paper-edge); }
  .signature-art.is-visible .pigment { opacity: .77; }
  .signature-art .signature-hatch { opacity: 0; transition: opacity .9s ease 1.5s; }
  .signature-art.is-visible .signature-hatch { opacity: .42; }
  @media (max-width: 760px) { .section-spirit figcaption { font-size: 9px; letter-spacing: .11em; } .section-spirit::before { bottom: 22px; } }
  @media (max-width: 430px) { .section-spirit figcaption { letter-spacing: .05em; } }
  @media (prefers-reduced-motion: reduce) { svg[data-mark="doodle"] .doodle-color,
  svg[data-mark="doodle"] .doodle-ink,
  svg[data-mark="doodle"] .doodle-hatching,
  svg[data-mark="doodle"] .doodle-second-pass,
  .section-spirit,
  .section-spirit img { animation: none !important; transition: none !important; transform: none !important; } .signature-art .second-pass { opacity: .43; transition: none; } .signature-art .signature-hatch { opacity: .42; transition: none; } }
  /* Four small drawn keys introduce the perspectives. */
.ribbon {
  display: grid;
  grid-template-columns: repeat(4,max-content);
  justify-content: space-evenly;
  align-items: center;
  gap: 20px;
  padding: 15px 5%;
}
  .ribbon-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  color: #16181D;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
  .ribbon-icon { display: block; width: 40px; height: 40px; overflow: visible; flex: none; }
  .ribbon-icon .icon-wash { opacity: .8; }
  .ribbon-icon .icon-ink {
  fill: none;
  stroke: #3f4847;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
  .ribbon-icon .icon-dot { fill: #f0f3ee; stroke: #3f4847; stroke-width: 2; }
  .ribbon-icon .icon-scribble { fill: none; stroke: #8d6471; stroke-width: 1; stroke-linecap: round; opacity: .65; }
  .ribbon-item:hover .ribbon-icon { animation: icon-hello .6s cubic-bezier(.25,.7,.2,1); }
  @keyframes icon-hello {
  0%,100% { transform: rotate(0); }
  35% { transform: rotate(-8deg) translateY(-2px); }
  70% { transform: rotate(4deg); }
}
  .philosophy-map-wrap { width: 100%; max-width: 330px; }
  .philosophy-map { display: block; width: 100%; height: auto; overflow: visible; }
  .philosophy-map .map-contours { stroke-width: 1.2; opacity: .48; }
  .philosophy-map .map-route { transition: stroke-dashoffset 1.65s cubic-bezier(.22,.7,.2,1); }
  .philosophy-map .map-route:nth-child(2) { transition-delay: .45s; }
  .philosophy-map .map-route:nth-child(3) { transition-delay: .65s; }
  .philosophy-map .map-route:nth-child(4) { transition-delay: .85s; }
  .philosophy-map.is-drawn .map-route { stroke-dashoffset: 0 !important; }
  .philosophy-map .map-waypoints { opacity: .75; transition: opacity .6s ease 1.15s; }
  .philosophy-map.is-drawn .map-waypoints { opacity: 1; }
  .philosophy-copy { min-width: 0; }
  .philosophy-copy p { max-width: 650px; }
  @media (max-width: 1000px) { .ribbon { gap: 14px; } .ribbon-item { gap: 8px; font-size: 10px; letter-spacing: .1em; } .ribbon-icon { width: 34px; height: 34px; } }
  @media (max-width: 760px) { .ribbon { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 8px; padding: 17px 20px; } .ribbon-item { justify-content: center; } .philosophy-map-wrap { max-width: 300px; margin: 0 auto; } }
  @media (max-width: 420px) { .ribbon-item { font-size: 9px; gap: 5px; letter-spacing: .05em; } .ribbon-icon { width: 28px; height: 28px; } }
  @media (prefers-reduced-motion: reduce) { .ribbon-item:hover .ribbon-icon { animation: none !important; } .philosophy-map .map-route { stroke-dashoffset: 0 !important; transition: none !important; } .philosophy-map .map-waypoints { opacity: 1; transition: none; } }
  /* A fourth member of the doodle family keeps the questions company. */
.faq-intro { min-width: 0; }
  .faq-persona {
  position: relative;
  width: min(100%,300px);
  margin: 38px 0 0 8px;
  padding-bottom: 16px;
}
  .faq-persona::after {
  content: "";
  position: absolute;
  bottom: 29px;
  left: 6%;
  right: 10%;
  height: 1px;
  background: #87948c8c;
  transform: rotate(-2deg);
}
  .faq-persona svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform-origin: 50% 86%;
  animation: persona-think 8.3s ease-in-out infinite;
}
  .faq-persona .persona-question {
  transform-box: fill-box;
  transform-origin: center;
  animation: persona-question 5.4s ease-in-out infinite;
}
  .faq-persona .persona-gesture {
  transform-box: fill-box;
  transform-origin: 8% 90%;
  animation: persona-gesture 6.6s ease-in-out infinite;
}
  .faq-persona .persona-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: persona-blink 7.5s linear infinite;
}
  .faq-persona figcaption {
  position: relative;
  z-index: 1;
  color: #4B515B;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
}
  @keyframes persona-think {
  0%,100% { transform: rotate(-.7deg); }
  45% { transform: rotate(1.2deg); }
  72% { transform: rotate(-1.1deg); }
}
  @keyframes persona-question {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  52% { transform: translateY(-5px) rotate(3deg); }
}
  @keyframes persona-gesture {
  0%,100% { transform: rotate(0); }
  48% { transform: rotate(-5deg); }
}
  @keyframes persona-blink {
  0%,45%,48%,100% { transform: scaleY(1); }
  46%,47% { transform: scaleY(.13); }
}
  @media (max-width: 760px) { .faq-persona { width: min(72vw,260px); margin: 30px auto 4px; } }
  @media (prefers-reduced-motion: reduce) { .faq-persona svg,
  .faq-persona .persona-question,
  .faq-persona .persona-gesture,
  .faq-persona .persona-eye { animation: none !important; transform: none !important; } }
  .signature-art .construction{fill:none;stroke:#727679;stroke-width:1.25;stroke-dasharray:3 7;opacity:.28}
  .signature-art .registration{fill:none;stroke:#696E70;stroke-width:1.2;opacity:.48}
  .signature-art.is-visible .construction{animation:construction-fade 3.7s ease-out forwards}
  @keyframes construction-fade{0%,55%{opacity:.35}100%{opacity:.12}}
  .signature-caption{position:absolute;bottom:0;right:0;font-size:12px;letter-spacing:.08em;color:#5C6668}
  /* the mark in the header */
  html[data-theme] .wordmark .logo { width:54px; height:58px; } body.desk .wordmark .logo, body.manage .wordmark .logo { width:40px; height:43px; }
  .a-empty svg[data-mark="doodle"] { width:64px; height:68px; } .lp-mid svg[data-mark="doodle"] { width:54px; height:58px; }
  /* the hero: a typographic canvas, set left */
  .lp-herobox { display:flex; flex-direction:column; align-items:stretch; justify-content:center; min-height:min(780px, calc(100svh - 100px)); height:auto; max-height:none; padding:88px max(7.5vw, calc((100vw - 1350px) / 2)) 64px;
    background:radial-gradient(circle at 88% 12%, #cbb1d92b, transparent 35%), radial-gradient(circle at 6% 95%, #b6dce02a, transparent 38%), var(--page); }
  .lp-hero { text-align:left; width:100%; max-width:1100px; padding:0; }
  .lp-eyebrow { justify-content:flex-start; margin-bottom:33px; }
  .lp-hero h1 { max-width:1030px; font-size:clamp(53.3px, 7vw, 101.5px); line-height:.98; letter-spacing:-.065em; text-wrap:balance; }
  .lp-hero h1 em { display:inline-block; color:#2B3FD6; position:relative; background:linear-gradient(transparent 82%, #C7CEF8C8 82%, #C7CEF8C8 96%, transparent 96%); padding:0 .02em 0 0; }
  .lp-sub { margin:36px 0 30px; max-width:630px; font-size:18px; }
  .lp-hero .lp-ctas { justify-content:flex-start; gap:31px; }
  /* the ribbon of drawn icons */
  .lp-ribbon { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#F4F5F7; }
  /* section headings: a drafted dash before the number, an uneven pencil stroke under the headline */
  .lp-eb::before { content:""; display:inline-block; width:19px; height:1px; background:#3D424B; vertical-align:middle; transform:rotate(-8deg); margin-right:8px; }
  .lp-intro h2::after { content:""; display:block; width:min(300px, 72%); height:28px; margin-top:4px; background:url("/art/doodle-underline.svg") left center / 100% 100% no-repeat; filter:none; transform:rotate(-1.2deg); }
  #how-it-works .lp-intro h2::after { width:min(260px, 68%); transform:rotate(1.1deg) scaleX(-1); } #know-your-odds .lp-intro h2::after { width:min(285px, 70%); transform:rotate(.7deg); }
  /* the characters sit in the heading row */
  .lp-intro.ill { display:grid; align-items:center; gap:30px; }
  .lp-intro.ill-a { grid-template-columns:minmax(0, 1.25fr) minmax(170px, .45fr) minmax(210px, .75fr); }
  .lp-intro.ill-b { grid-template-columns:minmax(170px, .45fr) minmax(0, .95fr) minmax(235px, .8fr); } .lp-intro.ill-b .section-spirit { grid-column:1; grid-row:1; } .lp-intro.ill-b > div { grid-column:2; grid-row:1; } .lp-intro.ill-b > p { grid-column:3; grid-row:1; }
  .lp-intro.ill-c { grid-template-columns:minmax(0, 1.15fr) minmax(215px, .75fr) minmax(190px, .5fr); } .lp-intro.ill-c .section-spirit { grid-column:3; grid-row:1; } .lp-intro.ill-c > p { grid-column:2; grid-row:1; }
  .lp-intro.ill .lp-lead { max-width:none; }
  /* the map panel */
  .lp-guide { grid-template-columns:minmax(220px, 330px) minmax(0, 1fr); gap:clamp(26px, 4vw, 66px); min-height:295px; padding:34px clamp(28px, 4vw, 56px); background:#dce3dd; border:1px solid #CDD2D9; }
  /* the questions' keeper */
  .lp #faq .faq-persona { margin:34px 0 0 0; }
  @media (max-width: 1050px) {
    .lp-intro.ill-a, .lp-intro.ill-c { grid-template-columns:minmax(0, 1fr) 180px; } .lp-intro.ill-a > p, .lp-intro.ill-c > p { grid-column:1; grid-row:2; margin-top:-14px; }
    .lp-intro.ill-a .section-spirit, .lp-intro.ill-c .section-spirit { grid-column:2; grid-row:1 / span 2; }
    .lp-intro.ill-b { grid-template-columns:180px minmax(0, 1fr); } .lp-intro.ill-b .section-spirit { grid-column:1; grid-row:1 / span 2; } .lp-intro.ill-b > div { grid-column:2; grid-row:1; } .lp-intro.ill-b > p { grid-column:2; grid-row:2; margin-top:-8px; }
  }
  @media (max-width: 860px) {
    html[data-theme] .wordmark .logo { width:46px; height:50px; }
    .lp-herobox { min-height:0; padding:65px 22px 48px; } .lp-hero h1 { font-size:clamp(42.1px, 8.8vw, 65.4px); } .lp-sub { font-size:16px; margin:26px 0; }
    .lp-intro.ill, .lp-intro.ill-a, .lp-intro.ill-b, .lp-intro.ill-c { display:grid; grid-template-columns:minmax(0, 1fr) 120px; gap:10px 16px; }
    .lp-intro.ill > div, .lp-intro.ill-b > div { grid-column:1 / -1; grid-row:1; } .lp-intro.ill .section-spirit, .lp-intro.ill-b .section-spirit { grid-column:2; grid-row:2; width:118px; }
    .lp-intro.ill > p, .lp-intro.ill-b > p { grid-column:1; grid-row:2; margin:0; align-self:center; }
    .lp-guide { grid-template-columns:1fr; gap:14px; padding:28px; min-height:0; }
  }
  @media (max-width: 440px) { .lp-hero h1 { font-size:clamp(37px, 9.5vw, 47.3px); } }
  html[data-theme] #searchbtn, html[data-theme] header #customize-btn { display:none; } html[data-theme] body.desk #searchbtn, html[data-theme] body.desk header #customize-btn { display:inline-flex; }

  /* =====================================================================================================
     v9 · the signed-in map in the doodle identity: light tight headlines, drafted dashes and pencil underlines,
     paper cards with a soft offset, the drawn icons on each part, the question-keeper in the assistant.
     ===================================================================================================== */
  html[data-theme] body.desk, html[data-theme] body.manage { background:radial-gradient(circle at 92% 0%, #cbb1d926, transparent 30%), radial-gradient(circle at 0% 38%, #b6dce024, transparent 30%), var(--page); background-attachment:fixed; }
  html[data-theme] .desk-main { padding:26px max(22px, 3vw) 100px; }
  html[data-theme] .desk-head { margin:6px 0 20px; align-items:flex-end; }
  html[data-theme] .desk-head h2 { font:800 clamp(29.2px, 3.4vw, 43px)/1.02 var(--head); letter-spacing:-.055em; color:var(--ink); }
  html[data-theme] .desk-head h2::after { content:""; display:block; width:min(230px, 90%); height:22px; margin-top:2px; background:url("/art/doodle-underline.svg") left center / 100% 100% no-repeat; transform:rotate(-1.2deg); }
  html[data-theme] .desk-head .status { font-size:13.5px; color:var(--muted); margin-top:4px; }
  /* the strip: the page's ribbon, with light numerals */
  html[data-theme] .sstrip { background:#F4F5F7; border:0; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); border-radius:0; margin:0 calc(-1 * max(22px, 3vw)) 26px; padding:0 max(22px, 3vw); }
  html[data-theme] .sstrip .c { padding:14px 26px 15px 0; margin-right:26px; border-right:1px solid #DDE0E5; } html[data-theme] .sstrip .c:last-child { border-right:0; }
  html[data-theme] .sstrip .k { font:600 10.5px var(--sans); letter-spacing:.14em; color:#16181D; margin-bottom:4px; }
  html[data-theme] .sstrip b { font:800 24px/1.1 var(--head); letter-spacing:-.04em; color:var(--ink); } html[data-theme] .sstrip .sym b { font-size:30px; }
  html[data-theme] .sstrip b u { font:400 12px var(--sans); letter-spacing:0; } html[data-theme] .sstrip .txt b { font:800 20px var(--head); letter-spacing:-.03em; }
  html[data-theme] .sstrip small { font:400 12px var(--sans); letter-spacing:0; }
  /* the cards: paper with a soft offset, as in the sketch's reading */
  html[data-theme] .mod { border:1px solid #D5D9DF; border-radius:8px; background:#FFFFFF; box-shadow:none; }
  html[data-theme] .mods { gap:34px; } html[data-theme] .chartcard { margin-bottom:34px; }
  html[data-theme] .mod .mh { padding:18px 26px; border-bottom:1px solid var(--line); gap:14px; }
  .mh-ic { display:inline-grid; place-items:center; flex:0 0 auto; } .mh-ic:empty { display:none; } .mh-ic .ribbon-icon { width:38px; height:38px; }
  #mods { counter-reset:part; } #mods .mod.open { counter-increment:part; }
  html[data-theme] .mod .mh h3 { font:600 11.5px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#16181D; }
  html[data-theme] #mods .mod.open .mh h3::before { content:"0" counter(part) " / "; }
  html[data-theme] .mod .mh .tag { font-size:12.5px; color:var(--muted); margin-top:3px; }
  html[data-theme] .mod .mb { padding:26px 26px 28px; }
  html[data-theme] .mod .headline { font:700 clamp(22px, 2.3vw, 30px)/1.2 var(--head); letter-spacing:-.04em; color:var(--ink); max-width:1080px; margin:0 0 20px; }
  html[data-theme] .mod .jump { gap:7px; margin-bottom:6px; }
  html[data-theme] .mod .jump a { border:1px solid #E5E7EB; background:transparent; border-radius:20px; font-size:12px; padding:6px 12px; color:var(--ink-2); }
  html[data-theme] .mod .jump a:hover { background:var(--acc-tint); color:var(--ink); border-color:var(--acc-line); }
  /* the sections: a drafted dash and a light headline */
  html[data-theme] .sec2 { border-top:1px solid var(--line); padding:34px 0 12px; margin-top:22px; }
  html[data-theme] .sec2-h h4 { font:800 clamp(18.9px, 1.9vw, 24.1px)/1.1 var(--head); letter-spacing:-.04em; gap:12px; margin-bottom:8px; }
  html[data-theme] .sec2-h h4::before { width:19px; height:1px; border-radius:0; background:#3D424B; transform:rotate(-8deg); }
  html[data-theme] .sec2-h p { margin:0 0 20px 31px; font-size:15px; color:var(--muted); max-width:720px; }
  /* the tiles */
  html[data-theme] .mod .ins { gap:14px; margin-bottom:20px; }
  html[data-theme] .mod .in { background:#FAFAFB; border:1px solid #E5E7EB; border-radius:0; padding:18px 18px 18px; position:relative; }
  html[data-theme] .mod .in::before { content:""; position:absolute; top:0; left:0; right:0; height:5px; background:var(--acc-soft); }
  html[data-theme] .mod .in:nth-child(4n+2)::before { background:#A7E4ED; } html[data-theme] .mod .in:nth-child(4n+3)::before { background:#F5CC9B; } html[data-theme] .mod .in:nth-child(4n+4)::before { background:#F1B5C2; }
  html[data-theme] .mod .in .k { font:600 10.5px var(--sans); letter-spacing:.14em; color:#4B515B; margin:4px 0 8px; }
  html[data-theme] .mod .in b { font:800 22px/1.15 var(--head); letter-spacing:-.04em; }
  html[data-theme] .mod .in p { font-size:13.5px; line-height:1.6; color:var(--muted); margin-top:8px; }
  html[data-theme] .mod .cheat { background:#FAFAFB; border:1px solid #E5E7EB; border-radius:0; }
  html[data-theme] .mod .marks span { border:1px solid #E5E7EB; background:transparent; border-radius:20px; }
  html[data-theme] .mod details.how summary, html[data-theme] .mod details.nums summary { font-size:13px; color:var(--ink-2); border-bottom:1px solid #7A808A; display:inline-block; padding:5px 0; list-style:none; cursor:pointer; }
  html[data-theme] .mod details.how summary::-webkit-details-marker, html[data-theme] .mod details.nums summary::-webkit-details-marker { display:none; }
  html[data-theme] .mod details.how summary::before, html[data-theme] .mod details.nums summary::before { content:""; }
  /* the odds ladder and the plan card */
  html[data-theme] .ol { padding:12px 0; border-top:1px solid #ECEEF1; } html[data-theme] .ol .nm b { font:700 17px var(--head); letter-spacing:-.03em; } html[data-theme] .ol .pr { font-size:14px; }
  html[data-theme] .obar { border-radius:0; background:#F4F5F7; } html[data-theme] .obar i { border-radius:0; }
  html[data-theme] .plancard { background:var(--acc-tint); border:1px solid var(--acc-line); border-radius:0; } html[data-theme] .pcol { border-radius:0; background:#FFFFFF; border-color:#E5E7EB; }
  html[data-theme] .plan-h b { font:800 22px var(--head); letter-spacing:-.04em; }
  /* the chart card */
  html[data-theme] #pricechart, html[data-theme] .chart-legend { border-radius:0; border-color:#E5E7EB; background:#FFFFFF; }
  html[data-theme] .chart-groups button { border-radius:20px; border-color:#E5E7EB; padding:6px 12px; } html[data-theme] .chart-groups button.on { background:var(--acc-tint); border-color:var(--acc-line); }
  html[data-theme] .chart-tools { border-radius:8px; border-color:#CDD2D9; } html[data-theme] .chart-tools button.on { background:var(--acc-fill); color:var(--ink); }
  /* the assistant */
  html[data-theme] .fab { background:#FFFFFF; color:var(--ink); border:1px solid #8C9292; border-radius:5px; box-shadow:0 8px 22px rgba(48,56,60,.18); padding:8px 16px 8px 10px; font-weight:500; }
  html[data-theme] .fab .ribbon-icon { width:30px; height:30px; } html[data-theme] body.dock-open .fab { padding:8px; }
  html[data-theme] .dock, html[data-theme] .dock.on { border:1px solid #D5D9DF; border-radius:8px; background:#FFFFFF; box-shadow:0 24px 60px rgba(48,56,60,.18); }
  html[data-theme] .dock .dt b { font:800 20px var(--head); letter-spacing:-.035em; }
  .a-empty > svg:first-child { width:150px; height:auto; display:block; margin:0 auto 4px; overflow:visible; } html[data-theme] .a-empty h3 { font:800 21px var(--head); letter-spacing:-.035em; }
  html[data-theme] .chip-q { border-radius:20px; border-color:#E5E7EB; background:transparent; } html[data-theme] .chip-q:hover { background:var(--acc-tint); color:var(--ink); border-color:var(--acc-line); }
  /* drawers, search, the volatility panel */
  html[data-theme] .drawer { background:#FFFFFF; border-left:1px solid #D5D9DF; } html[data-theme] .drawer h2 { font:800 22px var(--head); letter-spacing:-.04em; }
  html[data-theme] .palette { border:1px solid #D5D9DF; border-radius:8px; background:#FFFFFF; box-shadow:0 30px 80px rgba(48,56,60,.2); }
  html[data-theme] .volmodal { border:1px solid #D5D9DF; border-radius:8px; background:#FFFFFF; box-shadow:0 30px 80px rgba(48,56,60,.2); }
  html[data-theme] .seg { border-radius:8px; } html[data-theme] .seg button.on { background:var(--acc-fill); color:var(--ink); }
  html[data-density="compact"] .mod .mb { padding:16px 18px 18px; } html[data-density="compact"] .mod .in { padding:12px 14px; } html[data-density="compact"] .mod .in b { font-size:19px; }
  html[data-density="compact"] .sec2 { padding:22px 0 6px; margin-top:12px; } html[data-density="compact"] .mods { gap:22px; } html[data-density="compact"] .sstrip b { font-size:20px; } html[data-density="compact"] .mod .headline { font-size:21px; }
  @media (max-width: 860px) {
    html[data-theme] .desk-main { padding:18px 14px 100px; } html[data-theme] .sstrip { margin:0 -14px 20px; padding:0 14px; } html[data-theme] .sstrip b { font-size:20px; } html[data-theme] .sstrip .sym b { font-size:24px; }
    html[data-theme] .mod { box-shadow:none; } html[data-theme] .mod .mh { padding:14px 16px; } html[data-theme] .mod .mb { padding:18px 16px 20px; } html[data-theme] .sec2-h p { margin-left:0; }
    .mh-ic .ribbon-icon { width:30px; height:30px; } html[data-theme] .mods { gap:24px; }
  }
  .chart-vol { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:-2px 0 12px; } .chart-vol:empty { display:none; }
  .chart-vol .vl { font:600 10px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 2px 0 8px; } .chart-vol .vl:first-child { margin-left:0; }
  .chart-vol button { font:500 12px var(--sans); border:1px solid #E5E7EB; background:transparent; color:var(--ink-2); border-radius:20px; padding:4px 11px; cursor:pointer; }
  .chart-vol button.on { background:rgba(85,175,189,.18); border-color:#8FC7CF; color:var(--ink); }

  /* ===== v10 · management in the doodle identity: the same paper cards, numbered parts, light numerals ===== */
  html[data-theme] .mg { max-width:1240px; padding:26px max(22px, 3vw) 90px; }
  html[data-theme] .mg .desk-head { display:grid; grid-template-columns:minmax(0, 1fr) 170px auto; align-items:end; gap:26px; }
  .mg-spirit { width:170px; margin:0 0 -6px; } .mg-spirit::before { bottom:6px; }
  html[data-theme] .mg .stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:0; background:#F4F5F7; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); margin:0 0 34px; }
  html[data-theme] .mg .stat { background:transparent; border:0; border-right:1px solid #DDE0E5; border-radius:0; padding:16px 22px 17px; } html[data-theme] .mg .stat:last-child { border-right:0; }
  html[data-theme] .mg .stat b { font:800 34px/1.05 var(--head); letter-spacing:-.045em; color:var(--ink); }
  html[data-theme] .mg .stat span { display:block; font:600 10.5px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#16181D; margin-top:6px; }
  .mg { counter-reset:mgpart; }
  html[data-theme] .mgcard { counter-increment:mgpart; background:#FFFFFF; border:1px solid #D5D9DF; border-radius:8px; box-shadow:none; padding:0; margin-bottom:34px; overflow:hidden; }
  html[data-theme] .mgcard:nth-of-type(2n) { box-shadow:none; }
  html[data-theme] .mgh { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin:0; padding:18px 26px; border-bottom:1px solid var(--line); }
  html[data-theme] .mgh h3 { font:600 11.5px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#16181D; }
  html[data-theme] .mgh h3::before { content:""; display:inline-block; width:19px; height:1px; background:#3D424B; vertical-align:middle; transform:rotate(-8deg); margin-right:10px; }
  html[data-theme] .mgh h3::after { content:""; } html[data-theme] .mgcard .mgh h3 { counter-reset:none; }
  html[data-theme] .mgh h3 { display:inline-flex; align-items:center; } html[data-theme] .mgh h3 > *, html[data-theme] .mgh h3 { white-space:nowrap; }
  html[data-theme] .mgh span { font-size:13px; color:var(--muted); }
  html[data-theme] .mgscroll, html[data-theme] .mgkv, html[data-theme] .mgform, html[data-theme] #mg-newinvite { margin-left:26px; margin-right:26px; }
  html[data-theme] .mgscroll { padding:8px 0 16px; } html[data-theme] .mgform { margin-top:20px; margin-bottom:14px; }
  html[data-theme] .mgt { font-size:13.5px; } html[data-theme] .mgt th { font:600 10.5px var(--sans); letter-spacing:.12em; color:#4B515B; padding:12px 10px; border-bottom:1px solid #DDE0E5; }
  html[data-theme] .mgt td { padding:14px 10px; border-bottom:1px solid #ECEEF1; } html[data-theme] .mgt .num { font-family:var(--mono); font-size:12.5px; }
  html[data-theme] .mgt .who b { font:700 17px var(--head); letter-spacing:-.03em; } html[data-theme] .mgt .who span { font-size:12.5px; }
  html[data-theme] .mgt code { font:500 13px var(--mono); background:#F4F5F7; padding:3px 7px; border-radius:8px; }
  html[data-theme] .badge { font:600 10px var(--sans); letter-spacing:.1em; text-transform:uppercase; background:var(--acc-fill); color:var(--ink); border-radius:8px; padding:2px 6px; margin-left:8px; vertical-align:2px; }
  html[data-theme] .mchip { font:500 12.5px var(--sans); border:1px solid #E5E7EB; background:transparent; color:var(--muted); border-radius:20px; padding:6px 13px; }
  html[data-theme] .mchip.on { color:#1F5C46; border-color:#8CC9AE; background:rgba(61,140,105,.13); } html[data-theme] .mchip:hover { border-color:#8C9292; color:var(--ink); }
  html[data-theme] .mgform input { border:1px solid #D5D9DF; border-radius:4px; background:#fff; padding:12px 15px; font-size:14px; } html[data-theme] .mgform input:focus { outline:0; border-color:var(--acc); }
  html[data-theme] .newinvite { background:var(--acc-tint); border:1px solid var(--acc-line); border-left:3px solid var(--acc-mid); border-radius:0; padding:18px 20px; } html[data-theme] .newinvite code { font:600 17px var(--mono); }
  html[data-theme] .mgkv { padding:22px 0 26px; gap:10px 28px; font-size:14px; } html[data-theme] .mgkv span { font:600 10.5px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:#4B515B; align-self:center; } html[data-theme] .mgkv b { font-weight:400; color:var(--ink); }
  @media (max-width: 860px) {
    html[data-theme] .mg { padding:18px 14px 80px; } html[data-theme] .mg .desk-head { grid-template-columns:minmax(0, 1fr) 110px; } .mg-spirit { width:110px; } html[data-theme] .mg .desk-tools { grid-column:1 / -1; }
    html[data-theme] .mgcard { box-shadow:none; margin-bottom:24px; } html[data-theme] .mgh { padding:14px 16px; flex-wrap:wrap; } html[data-theme] .mgscroll, html[data-theme] .mgkv, html[data-theme] .mgform, html[data-theme] #mg-newinvite { margin-left:16px; margin-right:16px; }
    html[data-theme] .mg .stat { padding:12px 14px; border-bottom:1px solid #DDE0E5; } html[data-theme] .mg .stat b { font-size:26px; }
  }

  /* ===== v11 · philosophy in the doodle identity, and the academy ===== */
  #academy { display:none; } body.academy #academy { display:block; }
  body.academy main, body.academy #landing { display:none; }
  html[data-theme] body.philosophy, html[data-theme] body.academy { background:radial-gradient(circle at 88% 6%, #cbb1d92b, transparent 32%), radial-gradient(circle at 4% 60%, #b6dce02a, transparent 34%), var(--page); background-attachment:fixed; }
  html[data-theme] .philo, .ac { max-width:1000px; margin:0 auto; padding:30px 40px 60px; }
  .philo-head, .ac-head { display:grid; grid-template-columns:minmax(0, 1fr) 190px; gap:40px; align-items:end; margin:18px 0 10px; }
  .philo-head .section-spirit, .ac-head .section-spirit { width:190px; }
  html[data-theme] .philo .eyebrow, .ac-eb { display:block; font:600 12px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); background:none; border:0; border-radius:0; padding:0; margin:0 0 20px; }
  html[data-theme] .philo .eyebrow::before, .ac-eb::before { content:""; display:inline-block; width:19px; height:1px; background:#3D424B; vertical-align:middle; transform:rotate(-8deg); margin-right:8px; }
  html[data-theme] .philo h1, .ac h1 { font:800 clamp(34.4px, 4.8vw, 61.9px)/1.02 var(--head); letter-spacing:-.06em; color:var(--ink); margin:0; text-wrap:balance; }
  html[data-theme] .philo h1::after, .ac h1::after { content:""; display:block; width:min(300px, 60%); height:28px; margin-top:6px; background:url("/art/doodle-underline.svg") left center / 100% 100% no-repeat; transform:rotate(-1.2deg); }
  html[data-theme] .philo .lede, .ac-lede { font-size:19px; line-height:1.6; color:var(--muted); max-width:720px; margin:26px 0 20px; }
  html[data-theme] .philo h2 { font:800 clamp(22.4px, 2.6vw, 31px)/1.1 var(--head); letter-spacing:-.045em; color:var(--ink); margin:64px 0 16px; padding-top:28px; border-top:1px solid var(--line); }
  html[data-theme] .philo p, html[data-theme] .philo li { font-size:17px; line-height:1.75; color:var(--ink-2); max-width:720px; }
  html[data-theme] .philo blockquote { margin:24px 0; padding:26px 30px; border:1px solid #CDD2D9; border-left:1px solid #CDD2D9; background:#dce3dd; border-radius:0; font:800 24px/1.3 var(--head); letter-spacing:-.035em; color:var(--ink); max-width:760px; }
  html[data-theme] .philo ul { list-style:none; margin:0 0 14px; padding:0; max-width:720px; } html[data-theme] .philo li { padding:12px 0; border-top:1px solid #E5E7EB; margin:0; }
  html[data-theme] .philo .cta { text-align:left; margin-top:70px; padding:44px 46px; background:#FFFFFF; border:1px solid #D5D9DF; border-radius:8px; box-shadow:none; }
  html[data-theme] .philo .cta h2 { border:0; padding:0; margin:0 0 10px; font-size:clamp(25.8px, 3.1vw, 37.8px); } html[data-theme] .philo footer, .ac footer { border-top:0; text-align:left; padding:30px 0 0; margin-top:20px; color:var(--muted); font-size:12.5px; }
  /* the blog (2026-10-20), in the clean front-page language [user: "massive.com", "no doodles"]: a faint grid behind
     the head, a pill, flat hairline cards with a drawn cover, one blue accent, the navy closing card. The list at
     /blog, one article at /blog/<slug>, both built into the page on the server */
  #blog { display:none; } body.blog #blog { display:block; }
  body.blog main, body.blog #landing { display:none; }
  html[data-theme] body.blog { background:#FFFFFF; }
  .bl { padding:0 0 40px; }
  .bl-pill { display:inline-flex; align-items:center; gap:8px; border:1px solid #E1E6F2; background:#F5F7FD; border-radius:999px; padding:5px 13px 5px 10px; font:500 12.5px var(--sans); color:#3D424B; }
  .bl-pill::before { content:""; width:7px; height:7px; border-radius:50%; background:#2B3FD6; }
  .bl-kicker { display:block; font:600 13px var(--sans); color:#2B3FD6; margin:0 0 12px; }
  .bl-hero { position:relative; isolation:isolate; text-align:center; padding:84px 24px 64px; border-bottom:1px solid #EEF0F4; }
  .bl-hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(#EDF0F5 1px, transparent 1px), linear-gradient(90deg, #EDF0F5 1px, transparent 1px);
    background-size:128px 128px; background-position:center -1px; -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 55%, transparent 96%); mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 55%, transparent 96%); }
  .bl-hero-in { max-width:760px; margin:0 auto; }
  .bl-hero h1 { font:800 clamp(38px, 5vw, 64px)/1.04 var(--head); letter-spacing:-.045em; color:#16181D; margin:20px 0 0; }
  .bl-lede { font-size:18px; line-height:1.6; color:#5B616B; margin:18px auto 0; max-width:600px; }
  .bl-wrap { width:min(1160px, calc(100% - 48px)); margin:56px auto 0; }
  .bl-empty { text-align:center; color:#6B7280; font-size:16px; margin:20px 0 60px; }
  .bl-sec { font:700 clamp(22px, 2vw, 28px)/1.2 var(--head); letter-spacing:-.03em; color:#16181D; margin:72px 0 22px; }
  /* the drawn cover */
  .bl-cover { display:block; width:100%; height:auto; }
  .bl-cover .cv-bg { fill:#F5F7FD; } .bl-cover .cv-grid { stroke:#E4E8F4; stroke-width:1; fill:none; } .bl-cover .cv-base { stroke:#C9D0E4; stroke-width:1.5; fill:none; }
  .bl-cover .cv-curve { stroke:#2B3FD6; stroke-width:3; fill:none; stroke-linejoin:round; } .bl-cover .cv-area { fill:rgba(43,63,214,.14); }
  .bl-cover .cv-level { stroke:#16181D; stroke-width:1.5; stroke-dasharray:6 6; fill:none; } .bl-cover .cv-dot { fill:#FFFFFF; stroke:#2B3FD6; stroke-width:3; }
  .bl-cover .cv-path { stroke:#16181D; stroke-width:2; fill:none; stroke-linejoin:round; opacity:.85; } .bl-cover .cv-thin { stroke:#9AA3B5; stroke-width:1.5; opacity:.7; }
  .bl-cover .cv-band { fill:rgba(43,63,214,.12); } .bl-cover .cv-vol { fill:#D9DEEB; } .bl-cover .cv-vol.on { fill:rgba(43,63,214,.32); } .bl-cover .cv-start { fill:#16181D; }
  img.bl-cover-img { object-fit:cover; background:#F5F7FD; }
  /* cover colours: posts.json "color" (blue when unset); dark mode follows through the generated theme */
  .bl-cover.cv-c-teal .cv-bg { fill:#F0F9FA; } .bl-cover.cv-c-teal .cv-grid { stroke:#DCEFF2; } .bl-cover.cv-c-teal .cv-curve { stroke:#0B8A99; } .bl-cover.cv-c-teal .cv-dot { stroke:#0B8A99; } .bl-cover.cv-c-teal .cv-area { fill:rgba(11,138,153,.16); } .bl-cover.cv-c-teal .cv-band { fill:rgba(11,138,153,.13); } .bl-cover.cv-c-teal .cv-vol.on { fill:rgba(11,138,153,.34); }
  .bl-cover.cv-c-orange .cv-bg { fill:#FDF6F0; } .bl-cover.cv-c-orange .cv-grid { stroke:#F5E5D7; } .bl-cover.cv-c-orange .cv-curve { stroke:#D9681A; } .bl-cover.cv-c-orange .cv-dot { stroke:#D9681A; } .bl-cover.cv-c-orange .cv-area { fill:rgba(217,104,26,.16); } .bl-cover.cv-c-orange .cv-band { fill:rgba(217,104,26,.13); } .bl-cover.cv-c-orange .cv-vol.on { fill:rgba(217,104,26,.34); }
  .bl-cover.cv-c-violet .cv-bg { fill:#F7F3FD; } .bl-cover.cv-c-violet .cv-grid { stroke:#E8DEF8; } .bl-cover.cv-c-violet .cv-curve { stroke:#7A3FD1; } .bl-cover.cv-c-violet .cv-dot { stroke:#7A3FD1; } .bl-cover.cv-c-violet .cv-area { fill:rgba(122,63,209,.16); } .bl-cover.cv-c-violet .cv-band { fill:rgba(122,63,209,.13); } .bl-cover.cv-c-violet .cv-vol.on { fill:rgba(122,63,209,.34); }
  .bl-cover.cv-c-green .cv-bg { fill:#F1F9F5; } .bl-cover.cv-c-green .cv-grid { stroke:#DCEFE5; } .bl-cover.cv-c-green .cv-curve { stroke:#1C8A5A; } .bl-cover.cv-c-green .cv-dot { stroke:#1C8A5A; } .bl-cover.cv-c-green .cv-area { fill:rgba(28,138,90,.16); } .bl-cover.cv-c-green .cv-band { fill:rgba(28,138,90,.13); } .bl-cover.cv-c-green .cv-vol.on { fill:rgba(28,138,90,.34); }
  .bl-cover.cv-c-rose .cv-bg { fill:#FCF3F6; } .bl-cover.cv-c-rose .cv-grid { stroke:#F5DFE7; } .bl-cover.cv-c-rose .cv-curve { stroke:#C73E6A; } .bl-cover.cv-c-rose .cv-dot { stroke:#C73E6A; } .bl-cover.cv-c-rose .cv-area { fill:rgba(199,62,106,.16); } .bl-cover.cv-c-rose .cv-band { fill:rgba(199,62,106,.13); } .bl-cover.cv-c-rose .cv-vol.on { fill:rgba(199,62,106,.34); }
  /* the latest article, large */
  .bl-feat { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); border:1px solid #E3E7EE; border-radius:16px; overflow:hidden; color:inherit; text-decoration:none; background:#FFFFFF; transition:border-color .15s ease; }
  .bl-feat:is(:hover, :focus-visible) { border-color:#C9CFD8; } .bl-feat:is(:hover, :focus-visible) h2 { color:#2B3FD6; }
  .bl-feat-t { display:flex; flex-direction:column; padding:44px 44px 40px; }
  .bl-feat h2 { font:800 clamp(26px, 2.6vw, 36px)/1.12 var(--head); letter-spacing:-.04em; color:#16181D; margin:0 0 14px; transition:color .15s ease; }
  .bl-feat p { font-size:16px; line-height:1.6; color:#5B616B; margin:0 0 26px; flex:1; }
  .bl-feat .bl-cover { height:100%; min-height:300px; border-left:1px solid #EEF0F4; }
  .bl-read { display:inline-flex; gap:8px; align-items:center; margin-top:24px; font:600 14px var(--sans); color:#2B3FD6; } .bl-read i { font-style:normal; transition:transform .15s ease; } .bl-feat:hover .bl-read i { transform:translateX(3px); }
  /* the other articles */
  .bl-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:20px; }
  .bl-card { display:flex; flex-direction:column; border:1px solid #E3E7EE; border-radius:12px; overflow:hidden; background:#FFFFFF; color:inherit; text-decoration:none; transition:border-color .15s ease; }
  .bl-card:is(:hover, :focus-visible) { border-color:#C9CFD8; } .bl-card:is(:hover, :focus-visible) h3 { color:#2B3FD6; }
  .bl-card .bl-cover { border-bottom:1px solid #EEF0F4; aspect-ratio:2 / 1; height:auto; }
  .bl-cb { display:flex; flex-direction:column; gap:10px; padding:20px 22px 22px; flex:1; }
  .bl-card h3 { font:700 19px/1.25 var(--head); letter-spacing:-.025em; color:#16181D; margin:0; transition:color .15s ease; }
  .bl-card p { margin:0 0 6px; color:#5B616B; font-size:14.5px; line-height:1.6; flex:1; }
  .bl-by { display:flex; align-items:center; gap:11px; font-size:12.5px; color:#6B7280; } .bl-by b { display:block; color:#16181D; font:600 13.5px var(--sans); }
  .bl-av { border-radius:50%; border:1px solid #E3E7EE; background:#FFFFFF; object-fit:cover; flex:none; }
  /* one article */
  .bl-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:60; pointer-events:none; } .bl-progress i { display:block; height:100%; width:0; background:#2B3FD6; }
  .bl-art-head { width:min(1012px, calc(100% - 48px)); margin:0 auto; padding:34px 0 0; }
  .bl-back { display:inline-block; font:500 13.5px var(--sans); color:#6B7280; text-decoration:none; margin:0 0 30px; } .bl-back::before { content:"\2190  "; } .bl-back:hover { color:#2B3FD6; }
  .bl-art-head h1 { font:800 clamp(34px, 4.4vw, 56px)/1.06 var(--head); letter-spacing:-.045em; color:#16181D; margin:0; max-width:940px; text-wrap:balance; }
  .bl-sub { font-size:19px; line-height:1.6; color:#5B616B; margin:20px 0 0; max-width:760px; }
  .bl-meta { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:30px 0 30px; padding:18px 0; border-top:1px solid #EEF0F4; border-bottom:1px solid #EEF0F4; }
  .bl-share { display:flex; gap:8px; } .bl-share a, .bl-share button { width:36px; height:36px; display:grid; place-items:center; border:1px solid #E3E7EE; border-radius:8px; background:#FFFFFF; color:#3D424B; cursor:pointer; padding:0; transition:border-color .15s ease, color .15s ease; }
  .bl-share a:hover, .bl-share button:hover { border-color:#2B3FD6; color:#2B3FD6; } .bl-share svg { width:17px; height:17px; } .bl-share .done { border-color:#2B3FD6; color:#2B3FD6; }
  .bl-cover-wide { border-radius:16px; border:1px solid #E3E7EE; aspect-ratio:10 / 3; }
  .bl-art-grid { width:min(1012px, calc(100% - 48px)); margin:56px auto 0; display:grid; grid-template-columns:minmax(0, 700px); gap:72px; }
  .bl-art-grid.has-toc { grid-template-columns:minmax(0, 700px) 240px; }
  .bl-toc { position:sticky; top:92px; align-self:start; display:flex; flex-direction:column; gap:2px; font-size:13.5px; border-left:1px solid #EEF0F4; padding-left:2px; }
  .bl-toc b { font:600 12px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#8C939E; margin:0 0 10px 16px; }
  .bl-toc a { color:#6B7280; text-decoration:none; padding:5px 0 5px 16px; margin-left:-3px; border-left:2px solid transparent; line-height:1.4; } .bl-toc a:hover { color:#16181D; } .bl-toc a.on { color:#16181D; border-left-color:#2B3FD6; font-weight:500; }
  /* the article's text */
  .bl-body { min-width:0; }
  .bl-body h2 { font:700 clamp(24px, 2.2vw, 30px)/1.2 var(--head); letter-spacing:-.03em; color:#16181D; margin:60px 0 16px; scroll-margin-top:90px; }
  .bl-body h3 { font:700 20px/1.3 var(--head); letter-spacing:-.02em; color:#16181D; margin:38px 0 10px; }
  .bl-body p, .bl-body li { font-size:17.5px; line-height:1.78; color:#3D424B; } .bl-body p { margin:0 0 18px; }
  .bl-body ul, .bl-body ol { margin:0 0 20px; padding-left:24px; } .bl-body li { margin:8px 0; padding-left:4px; } .bl-body li::marker { color:#2B3FD6; font-weight:600; }
  .bl-body b, .bl-body strong { color:#16181D; font-weight:650; }
  .bl-body a { color:#2B3FD6; text-decoration:underline; text-decoration-color:rgba(43,63,214,.35); text-underline-offset:3px; } .bl-body a:hover { text-decoration-color:#2B3FD6; }
  .bl-key { background:#F5F7FD; border:1px solid #E1E6F2; border-radius:14px; padding:28px 32px 14px; margin:0 0 12px; }
  .bl-key h2 { font:600 13px var(--sans); letter-spacing:0; color:#2B3FD6; margin:0 0 10px; }
  .bl-key ul { list-style:none; padding:0; } .bl-key li { position:relative; padding-left:30px; font-size:16.5px; line-height:1.65; color:#16181D; margin:12px 0; }
  .bl-key li::before { content:""; position:absolute; left:2px; top:.42em; width:16px; height:16px; border-radius:50%; background:#2B3FD6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
  .bl-body blockquote { margin:28px 0; padding:4px 0 4px 22px; border-left:3px solid #2B3FD6; font:600 21px/1.45 var(--head); letter-spacing:-.02em; color:#16181D; }
  .bl-body figure { margin:32px 0; } .bl-body img { display:block; max-width:100%; height:auto; border:1px solid #E3E7EE; border-radius:12px; } .bl-body figcaption { font-size:13px; color:#6B7280; margin-top:10px; }
  .bl-body table { width:100%; border-collapse:separate; border-spacing:0; margin:24px 0 26px; border:1px solid #E3E7EE; border-radius:12px; overflow:hidden; font-size:15px; }
  .bl-body th { background:#F7F8FA; font:600 11.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:#5B616B; text-align:left; padding:12px 16px; border-bottom:1px solid #E3E7EE; vertical-align:bottom; }
  .bl-body td { padding:12px 16px; border-bottom:1px solid #EEF0F4; color:#3D424B; line-height:1.5; vertical-align:top; font-variant-numeric:tabular-nums; } .bl-body tr:last-child td { border-bottom:0; }
  .bl-body tbody tr:hover td { background:#FAFBFC; }
  .bl-body code { font:500 .9em var(--mono); background:#F1F3F6; border-radius:4px; padding:1px 5px; }
  .bl-body .bl-formula { font:500 16px/1.6 var(--mono); color:#FFFFFF; background:#0E1424; border-radius:12px; padding:20px 24px; margin:6px 0 22px; overflow-x:auto; }
  .bl-body section.bl-faq { margin-top:8px; } .bl-body section.bl-faq h3 { margin:0; padding:24px 0 8px; border-top:1px solid #EEF0F4; font-size:18.5px; } .bl-body section.bl-faq h2 + h3 { border-top:0; padding-top:4px; }
  .bl-body .bl-note { font-size:13.5px; line-height:1.65; color:#6B7280; margin-top:34px; padding-top:20px; border-top:1px solid #EEF0F4; }
  /* the close */
  .bl-cta { width:min(1012px, calc(100% - 48px)); margin:88px auto 0; }
  .bl-cta > div { background:radial-gradient(120% 140% at 85% 110%, #27306A 0%, #0E1424 55%); border-radius:16px; padding:56px 64px; }
  .bl-cta .bl-kicker { color:#9DA8FF; } .bl-cta h2 { font:800 clamp(26px, 2.8vw, 40px)/1.1 var(--head); letter-spacing:-.04em; color:#FFFFFF; margin:0; max-width:640px; }
  .bl-cta p { color:#A7AFBF; font-size:16px; line-height:1.6; margin:16px 0 28px; max-width:480px; }
  .bl-btn { display:inline-block; background:#2B3FD6; color:#FFFFFF; border-radius:6px; padding:12px 20px; font:600 14.5px var(--sans); text-decoration:none; } .bl-btn:hover { background:#3B4FE6; }
  .bl-more { width:min(1012px, calc(100% - 48px)); margin:0 auto; }
  .bl-foot { width:min(1012px, calc(100% - 48px)); margin:56px auto 0; padding:24px 0 0; border-top:1px solid #EEF0F4; text-align:left; color:#8C939E; font-size:12.5px; }
  .bl-wrap + .bl-foot { width:min(1160px, calc(100% - 48px)); margin-top:72px; }
  /* the latest articles on the front page (#from-the-blog) and in the academy (.ftb-ac), built by the server [2026-10-22] */
  #from-the-blog .bl-grid { width:min(1160px, 100%); margin:0 auto; grid-template-columns:repeat(auto-fit, minmax(290px, 370px)); justify-content:center; }
  .ftb-all { text-align:center; margin:24px 0 0; } .ftb-all a { font:600 14.5px var(--sans); color:#2B3FD6; text-decoration:none; } .ftb-all a::after { content:"  \2192"; } .ftb-all a:hover { color:#2233B8; }
  .ftb-ac { margin-top:64px; } .ftb-ac .ac-eb { margin-bottom:14px; } .ftb-h { font:800 clamp(22.4px, 2.6vw, 31px)/1.1 var(--head); letter-spacing:-.045em; color:var(--ink); margin:0 0 22px; } .ftb-ac .ftb-all { text-align:left; }
  @media (max-width: 1100px) { .bl-art-grid.has-toc { grid-template-columns:minmax(0, 700px); } .bl-toc { display:none; } }
  @media (max-width: 860px) {
    .bl-hero { padding:56px 20px 44px; } .bl-wrap { width:calc(100% - 32px); margin-top:32px; }
    .bl-feat { grid-template-columns:1fr; } .bl-feat .bl-cover { order:-1; min-height:0; aspect-ratio:2 / 1; height:auto; border-left:0; border-bottom:1px solid #EEF0F4; } .bl-feat-t { padding:26px 22px 24px; }
    .bl-grid { grid-template-columns:1fr; } .bl-art-head, .bl-art-grid, .bl-cta, .bl-more, .bl-foot { width:calc(100% - 32px); }
    .bl-art-grid { margin-top:36px; } .bl-cover-wide { aspect-ratio:2 / 1; } .bl-cta > div { padding:36px 24px; } .bl-key { padding:22px 20px 8px; }
    .bl-body p, .bl-body li { font-size:16.5px; } .bl-body table { display:block; overflow-x:auto; font-size:14px; } .bl-body th, .bl-body td { min-width:120px; padding:10px 12px; }
  }
  /* the academy */
  .ac-progress { display:flex; align-items:center; gap:14px; font-size:13px; color:var(--muted); margin-top:8px; } .ac-bar { width:220px; height:8px; background:#D9DED8; overflow:hidden; } .ac-bar i { display:block; height:100%; background:var(--acc-mid); transition:width .3s ease; }
  .ac-track { margin-top:70px; } .ac-th { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; }
  .ac-th h2, .ac-gloss h2 { font:800 clamp(22.4px, 2.6vw, 31px)/1.1 var(--head); letter-spacing:-.045em; margin:0; color:var(--ink); max-width:640px; } .ac-th .ac-eb { margin-bottom:14px; }
  .ac-count { font:500 12px var(--mono); color:var(--muted); white-space:nowrap; padding-bottom:6px; }
  .ac-lesson { border:1px solid #D5D9DF; background:#FAFAFB; margin-bottom:10px; position:relative; } .ac-lesson::before { content:""; position:absolute; top:0; bottom:0; left:0; width:6px; background:var(--acc-soft); }
  .ac-track:nth-of-type(5n+2) .ac-lesson::before { background:#A7E4ED; } .ac-track:nth-of-type(5n+3) .ac-lesson::before { background:#F5CC9B; } .ac-track:nth-of-type(5n+4) .ac-lesson::before { background:#F1B5C2; } .ac-track:nth-of-type(5n+5) .ac-lesson::before { background:#DDE0E5; }
  .ac-lesson.open { background:#FFFFFF; border-color:#D5D9DF; box-shadow:none; margin:18px 0 26px; }
  .ac-lh { display:grid; grid-template-columns:44px minmax(0, 1fr) auto; gap:14px; align-items:center; width:100%; text-align:left; border:0; background:transparent; padding:18px 22px 18px 26px; cursor:pointer; font-family:var(--sans); color:var(--ink); }
  .ac-n { font:500 12px var(--mono); color:var(--muted); } .ac-t { font:800 21px/1.2 var(--head); letter-spacing:-.035em; } .ac-m { font:600 10.5px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
  .ac-lesson.done .ac-m { color:#1F5C46; } .ac-lesson.done .ac-m::before { content:"✓ "; }
  .ac-lh:hover .ac-t { color:#2B3FD6; }
  .ac-gate { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:18px 32px; align-items:center; border:1px solid #D5D9DF; background:#FFFFFF; padding:26px 30px 26px 36px; margin:0 0 40px; position:relative; }
  .ac-gate::before { content:""; position:absolute; top:0; bottom:0; left:0; width:6px; background:#2B3FD6; }
  .ac-gate h3 { font:800 26px/1.15 var(--head); letter-spacing:-.035em; margin:8px 0 8px; } .ac-gate p { margin:0; color:var(--ink-2); font-size:15.5px; line-height:1.6; max-width:580px; }
  .ac-gate-ctas { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
  @media (max-width: 720px) { .ac-gate { grid-template-columns:1fr; padding:22px 20px 22px 28px; } .ac-gate-ctas { justify-content:flex-start; } }
  .ac-lock { width:11px; height:11px; vertical-align:-1px; margin-right:5px; }
  .ac-free { display:inline-block; margin-left:10px; padding:3px 9px; border-radius:999px; background:#EEF0FD; color:#2B3FD6; font:600 10.5px var(--sans); letter-spacing:.08em; text-transform:uppercase; vertical-align:4px; }
  .ac-tease { position:relative; max-height:150px; overflow:hidden; } .ac-tease::after { content:""; position:absolute; left:0; right:0; bottom:0; height:46px; background:linear-gradient(rgba(255,255,255,0), #FFFFFF 85%); pointer-events:none; }   /* only the last line fades: the opening stays readable */
  .ac-unlock { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:12px; } .ac-unlock span { color:var(--muted); font-size:14px; }
  .ac-body { padding:4px 30px 28px 84px; } .ac-body > p { font-size:16.5px; line-height:1.72; color:var(--ink-2); margin:0 0 14px; max-width:680px; }
  .ac-q { margin:24px 0 20px; padding:22px 24px; background:var(--acc-tint); border-left:3px solid var(--acc-mid); max-width:680px; } .ac-q .ac-eb { font-size:11px; margin-bottom:10px; } .ac-q > p { font:700 19px/1.3 var(--head); letter-spacing:-.03em; color:var(--ink); margin:0 0 14px; }
  .ac-opt { display:block; width:100%; text-align:left; font:14.5px var(--sans); color:var(--ink); background:#FFFFFF; border:1px solid var(--acc-line); border-radius:4px; padding:11px 14px; margin-bottom:7px; cursor:pointer; }
  .ac-opt:hover:not(:disabled) { border-color:var(--acc); } .ac-opt.right { background:rgba(61,140,105,.16); border-color:#8CC9AE; } .ac-opt.wrong { background:rgba(216,122,146,.18); border-color:#D87A92; } .ac-opt:disabled { cursor:default; }
  .ac-why { font:14.5px/1.6 var(--sans) !important; letter-spacing:0 !important; color:var(--ink-2) !important; margin:12px 0 0 !important; }
  .ac-foot { display:flex; flex-wrap:wrap; gap:10px; }
  .ac-gloss { margin-top:90px; padding-top:40px; border-top:1px solid var(--line); } .ac-gloss > p { color:var(--muted); margin:10px 0 24px; }
  #ac-glossary { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:0 34px; } .ac-term { padding:14px 0; border-top:1px solid #E5E7EB; } .ac-term b { display:block; font:700 18px var(--head); letter-spacing:-.03em; margin-bottom:3px; } .ac-term span { font-size:13.5px; line-height:1.55; color:var(--muted); }
  @media (max-width: 860px) {
    html[data-theme] .philo, .ac { padding:18px 20px 50px; } .philo-head, .ac-head { grid-template-columns:minmax(0, 1fr) 110px; gap:16px; } .philo-head .section-spirit, .ac-head .section-spirit { width:110px; }
    body.academy nav.links, body.philosophy nav.links, body.blog nav.links { display:none; } .ac-body { padding:2px 18px 22px 22px; } .ac-lh { grid-template-columns:30px minmax(0, 1fr) auto; padding:15px 14px 15px 20px; gap:10px; } .ac-t { font-size:18px; }
    .ac-th { display:block; } .ac-count { display:block; margin-top:8px; } .ac-track { margin-top:50px; } html[data-theme] .philo .cta { padding:28px 24px; } html[data-theme] .philo h2 { margin-top:46px; }
  }

  /* ===== lesson diagrams, and the volatility monitor viewer ===== */
  .ac-fig { margin:8px 0 22px; max-width:680px; background:#FFFFFF; border:1px solid #E5E7EB; padding:16px 16px 10px; } .ac-fig svg { width:100%; height:auto; display:block; overflow:visible; }
  .ac-fig figcaption { font:500 10.5px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:right; margin-top:4px; }
  .ac-fig .dt { font:500 13px var(--sans); fill:#16181D; } .ac-fig .ds { font:500 11px var(--mono); fill:#6B7280; } .ac-fig .dh { font:700 19px var(--head); letter-spacing:-.03em; fill:#16181D; } .ac-fig .dl { font:600 15px var(--mono); fill:#16181D; }
  html[data-theme] .monmodal { width:min(1180px, 100%); height:min(92vh, 900px); display:flex; flex-direction:column; padding:22px 24px 0; border:1px solid #D5D9DF; border-radius:8px; background:#FFFFFF; box-shadow:0 30px 80px rgba(48,56,60,.2); text-align:left; overflow:hidden; }
  .mon-grid { display:grid; grid-template-columns:270px minmax(0, 1fr); gap:24px; flex:1; min-height:0; }
  .mon-list { overflow:auto; padding-bottom:20px; border-right:1px solid var(--line); padding-right:16px; }
  .mon-list button { display:block; width:100%; text-align:left; border:0; border-left:4px solid transparent; background:transparent; padding:10px 12px; cursor:pointer; font-family:var(--sans); color:var(--ink); }
  .mon-list button b { display:block; font:700 16px var(--head); letter-spacing:-.03em; } .mon-list button span { display:block; font-size:12px; line-height:1.4; color:var(--muted); margin-top:2px; }
  .mon-list button:hover { background:#F4F5F7; } .mon-list button.on { border-left-color:var(--acc-mid); background:var(--acc-tint); }
  .mon-main { overflow:auto; padding:0 6px 26px 0; } .mon-main h3 { font:800 24.1px/1.1 var(--head); letter-spacing:-.045em; margin:0 0 4px; } .mon-about { color:var(--muted); font-size:14px; margin:0 0 14px; }
  .mon-main img { display:block; width:100%; height:auto; border:1px solid #E5E7EB; background:#fff; } .mon-sec { margin-top:22px; } .mon-sec .ac-eb { margin-bottom:8px; font-size:11px; }
  .mon-sec .bot { font-size:14px; } .mon-sec .bot table { font-size:12px; display:block; overflow-x:auto; white-space:nowrap; } .mon-sec .bot li { margin:6px 0; line-height:1.55; }
  @media (max-width: 860px) { .mon-grid { grid-template-columns:1fr; gap:12px; } .mon-list { display:flex; gap:6px; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); padding:0 0 10px; } .mon-list button { flex:0 0 auto; width:auto; border-left:0; border-bottom:3px solid transparent; padding:6px 10px; } .mon-list button span { display:none; } .mon-list button.on { border-bottom-color:var(--acc-mid); }
    html[data-theme] .monmodal { padding:16px 14px 0; } .ac-fig { padding:10px 8px 8px; } }
  /* the monitor's native charts */
  #mon-filter { width:100%; font:13px var(--sans); color:var(--ink); background:#fff; border:1px solid #D5D9DF; border-radius:4px; padding:9px 11px; margin-bottom:8px; } #mon-filter:focus { outline:0; border-color:var(--acc); }
  .mon-list { display:flex; flex-direction:column; } #mon-items { overflow:auto; flex:1; min-height:0; } .mon-g { font:600 10px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:12px 12px 4px; }
  .mon-bar { display:flex; justify-content:flex-end; margin:-34px 0 8px; min-height:30px; } .mon-chart { border:1px solid #E5E7EB; background:#FFFFFF; padding:10px; min-height:120px; } .mon-lc { height:min(52vh, 460px); }
  .mon-legend { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:12.5px; color:var(--ink-2); margin:0 0 8px; min-height:20px; } .mon-legend span { display:inline-flex; align-items:center; gap:6px; } .mon-legend i { display:inline-block; width:12px; height:3px; }
  .mon-legend b { font:600 12.5px var(--mono); color:var(--ink); } .mon-legend em { font-style:normal; font-size:11.5px; color:var(--muted); } .mon-legend .mon-date { font:600 12px var(--mono); color:var(--ink); }
  #mon-reads details { margin-top:14px; } #mon-reads .bot { font-size:14px; }
  @media (max-width: 860px) { .mon-list { flex-direction:column; } #mon-items { display:flex; gap:6px; overflow-x:auto; } .mon-g { display:none; } #mon-items button { flex:0 0 auto; } .mon-bar { margin:0 0 8px; justify-content:flex-start; } .mon-lc { height:320px; } }
  .chart-ctl { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-left:auto; } .ctl-l { font:600 10px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .chart-ctl .ctl-l + .chart-tools { margin-left:0; }
  .chart-ctl .chart-tools + .ctl-l { margin-left:10px; }
  @media (max-width: 860px) { .chart-ctl { margin-left:0; width:100%; } }

  /* ===== v12 · the volatility monitor in the doodle identity ===== */
  html[data-theme] .monmodal { width:min(1280px, 100%); height:min(94vh, 960px); padding:30px 34px 0; border:1px solid #D5D9DF; border-radius:8px; box-shadow:0 30px 80px rgba(48,56,60,.2);
    background:radial-gradient(circle at 96% 0%, #cbb1d926, transparent 34%), radial-gradient(circle at 0% 100%, #b6dce024, transparent 36%), #FFFFFF; }
  html[data-theme] .volmodal { padding:30px 34px 28px; box-shadow:0 30px 80px rgba(48,56,60,.2); }
  .mon-h { display:grid; grid-template-columns:minmax(0, 1fr) auto auto; align-items:end; gap:22px; margin-bottom:22px; padding-bottom:20px; border-bottom:1px solid var(--line); }
  .mon-h .ac-eb { margin-bottom:12px; font-size:11px; }
  html[data-theme] .mon-h h2 { font:800 clamp(25.8px, 3.1vw, 39.6px)/1.02 var(--head); letter-spacing:-.055em; margin:0; color:var(--ink); }
  html[data-theme] .mon-h h2::after { content:""; display:block; width:min(250px, 80%); height:22px; margin-top:2px; background:url("/art/doodle-underline.svg") left center / 100% 100% no-repeat; transform:rotate(-1.2deg); }
  .mon-h p { font-size:13.5px; color:var(--muted); margin:6px 0 0; } .mon-h .btn { align-self:start; }
  .mon-spirit { width:118px; margin:0 0 -8px; } .mon-spirit::before { bottom:4px; }
  .mon-grid { grid-template-columns:300px minmax(0, 1fr); gap:30px; }
  .mon-list { border-right:1px solid var(--line); padding-right:20px; }
  #mon-filter { border:1px solid #D5D9DF; border-radius:4px; background:#fff; padding:12px 14px; font-size:14px; margin-bottom:6px; }
  #mon-items { counter-reset:mong; padding-bottom:24px; }
  .mon-g { counter-increment:mong; font:600 10.5px var(--sans); letter-spacing:.14em; color:#16181D; padding:20px 4px 8px; display:flex; align-items:center; gap:8px; }
  .mon-g::before { content:""; width:17px; height:1px; background:#3D424B; transform:rotate(-8deg); flex:0 0 auto; } .mon-g::after { content:"0" counter(mong); order:-1; font:500 10.5px var(--mono); color:var(--muted); letter-spacing:0; }
  .mon-list button { border:1px solid transparent; border-left:5px solid var(--acc-soft); background:#FAFAFB; margin-bottom:6px; padding:11px 13px; border-radius:0; }
  .mon-list button b { font:700 17px/1.2 var(--head); letter-spacing:-.035em; } .mon-list button span { font-size:12.5px; margin-top:3px; }
  .mon-list button:hover { background:#F4F5F7; border-color:#E5E7EB; border-left-color:var(--acc-mid); }
  .mon-list button.on { background:var(--acc-tint); border-color:var(--acc-line); border-left-color:var(--acc); box-shadow:none; }
  .mon-main { padding:0 8px 34px 0; }
  html[data-theme] .mon-main h3 { font:800 clamp(22.4px, 2.4vw, 31px)/1.08 var(--head); letter-spacing:-.045em; margin:0 0 6px; display:flex; align-items:center; gap:12px; }
  html[data-theme] .mon-main h3::before { content:""; width:19px; height:1px; background:#3D424B; transform:rotate(-8deg); flex:0 0 auto; }
  .mon-about { font-size:15px; margin:0 0 16px 31px; max-width:640px; }
  .mon-bar { margin:-44px 0 14px; } html[data-theme] .mon-bar .seg { border:0; gap:6px; overflow:visible; border-radius:0; }
  html[data-theme] .mon-bar .seg button, html[data-theme] .vol-top .seg button { border:1px solid #E5E7EB; border-radius:20px; padding:5px 12px; font:500 12px var(--sans); background:transparent; color:var(--ink-2); }
  html[data-theme] .mon-bar .seg button + button, html[data-theme] .vol-top .seg button + button { border-left:1px solid #E5E7EB; }
  html[data-theme] .mon-bar .seg button.on, html[data-theme] .vol-top .seg button.on { background:var(--acc-fill); border-color:var(--acc-line); color:var(--ink); font-weight:600; }
  html[data-theme] .vol-top .seg { border:0; gap:6px; overflow:visible; }
  .mon-legend { gap:8px 10px; margin:0 0 12px; } .mon-legend span { border:1px solid #E5E7EB; border-radius:20px; padding:4px 11px; background:#FFFFFF; font-size:12px; } .mon-legend i { width:14px; height:4px; border-radius:2px; }
  .mon-legend span.mon-date { border-color:#16181D; background:#16181D; color:#fff; } .mon-legend .mon-date { color:#fff; }
  .mon-chart { border:1px solid #D5D9DF; background:#FFFFFF; padding:14px; box-shadow:none; }
  html[data-theme] .mon-main .vol-note, html[data-theme] .volmodal .vol-note { font-size:12.5px; line-height:1.6; color:var(--muted); margin:18px 0 0; max-width:760px; padding-left:14px; border-left:3px solid var(--acc-soft); }
  #mon-reads details { margin-top:20px; border-top:1px solid var(--line); padding-top:14px; }
  #mon-reads summary { display:inline-block; list-style:none; cursor:pointer; font-size:13px; color:var(--ink-2); border-bottom:1px solid #7A808A; padding:5px 0; } #mon-reads summary::-webkit-details-marker { display:none; }
  #mon-reads .bot { margin-top:12px; background:var(--acc-tint); border-left:3px solid var(--acc-mid); padding:16px 20px; font-size:14px; } #mon-reads .bot li { margin:7px 0; line-height:1.6; }
  .volsvg .vv { font-size:11.5px; } html[data-theme] .voltab th { letter-spacing:.12em; color:#4B515B; } html[data-theme] .voltab td:first-child { font:700 15px var(--head); letter-spacing:-.02em; color:var(--ink); }
  html[data-theme] .volmodal .volsvg, html[data-theme] .vol-slide { background:transparent; }
  .vol-slide input[type=range], #mon-range { accent-color:var(--acc); }
  @media (max-width: 860px) {
    html[data-theme] .monmodal { padding:18px 16px 0; height:96vh; } .mon-h { grid-template-columns:minmax(0, 1fr) auto; gap:10px; padding-bottom:12px; margin-bottom:12px; } .mon-spirit { display:none; }
    .mon-grid { grid-template-columns:1fr; gap:10px; } .mon-list { border-right:0; padding-right:0; border-bottom:1px solid var(--line); } #mon-items { display:flex; gap:6px; overflow-x:auto; padding-bottom:10px; }
    .mon-g { display:none; }
    .mon-list button { flex:0 0 auto; width:auto; margin:0; border-left-width:3px; } .mon-list button span { display:none; } .mon-list button b { font-size:15px; white-space:nowrap; }
    .mon-bar { margin:0 0 10px; justify-content:flex-start; } .mon-about { margin-left:0; } .mon-chart { padding:8px; box-shadow:none; }
  }

  /* ===== v13 · the academy in the doodle identity: a left-set hero, the ribbon of tracks, landing-style sections, step boxes ===== */
  html[data-theme] body.academy, html[data-theme] body.blog { background:var(--page); }
  .ac-hero { background:radial-gradient(circle at 88% 12%, #cbb1d92b, transparent 35%), radial-gradient(circle at 6% 95%, #b6dce02a, transparent 38%), var(--page); padding:34px max(7.5vw, calc((100vw - 1350px) / 2)) 56px; }
  .ac-hero-in { max-width:1240px; }
  .ac-hero .ac-head { grid-template-columns:minmax(0, 1fr) minmax(190px, 260px); gap:60px; align-items:center; margin:26px 0 0; }
  .ac-hero .ac-head .section-spirit { width:100%; max-width:260px; }
  .ac-hero :is(h1, h2) { font:800 clamp(46.4px, 6.4vw, 92.9px)/.98 var(--head); letter-spacing:-.065em; color:var(--ink); margin:0; text-wrap:balance; }
  .ac-hero :is(h1, h2)::after { display:none; }
  .ac-hero :is(h1, h2) em { font-style:normal; display:inline-block; color:#2B3FD6; background:linear-gradient(transparent 82%, #C7CEF8C8 82%, #C7CEF8C8 96%, transparent 96%); padding-right:.02em; }
  .ac-hero .ac-eb { margin-bottom:30px; } .ac-hero .ac-eb::before { width:8px; height:8px; background:var(--purple); transform:none; }
  .ac-hero .ac-lede { font-size:18px; line-height:1.65; max-width:640px; margin:34px 0 26px; }
  .ac-progress { gap:16px; font-size:13px; } .ac-bar { width:260px; height:10px; background:#D9DED8; border:1px solid #CDD2D9; } .ac-bar i { background:linear-gradient(90deg, var(--acc-soft), var(--acc-mid)); }
  .ac-ribbon { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#F4F5F7; grid-template-columns:repeat(5, max-content); }
  .ac-ribbon .ribbon-item { cursor:pointer; text-decoration:none; } .ac-ribbon .ribbon-item:hover span { color:#2B3FD6; }
  .ac { max-width:1240px; padding:0 40px 40px; }
  .ac-track { margin-top:0; padding-top:110px; }
  .ac-th { align-items:flex-end; margin-bottom:38px; }
  .ac-th h2, .ac-gloss h2 { font:800 clamp(29.2px, 3.4vw, 46.4px)/1.08 var(--head); letter-spacing:-.05em; max-width:780px; }
  .ac-th h2::after, .ac-gloss h2::after { content:""; display:block; width:min(300px, 60%); height:28px; margin-top:4px; background:url("/art/doodle-underline.svg") left center / 100% 100% no-repeat; transform:rotate(-1.2deg); }
  .ac-track.t2 .ac-th h2::after, .ac-track.t4 .ac-th h2::after { transform:rotate(1.1deg) scaleX(-1); width:min(260px, 55%); }
  .ac-count { font:500 12px var(--sans); letter-spacing:.02em; color:var(--muted); padding-bottom:40px; } .ac-count b { font:800 30px var(--head); letter-spacing:-.04em; color:var(--ink); margin-right:4px; }
  /* lessons: a numbered box with the track's colour set off behind it */
  .ac-lesson { border:0; border-top:1px solid #DDE0E5; background:transparent; margin:0; } .ac-lesson::before { display:none; } .ac-track .ac-lesson:last-child { border-bottom:1px solid #DDE0E5; }
  .ac-lh { grid-template-columns:66px minmax(0, 1fr) auto; gap:26px; padding:20px 4px; }
  .ac-n { height:46px; width:58px; display:grid; place-items:center; font:400 15px var(--sans); color:var(--ink); border:1px solid #5A6062; background:var(--page); box-shadow:none; }
  .ac-track.t2 .ac-n { box-shadow:none; } .ac-track.t3 .ac-n { box-shadow:none; } .ac-track.t4 .ac-n { box-shadow:none; } .ac-track.t5 .ac-n { box-shadow:none; }
  .ac-lesson.done .ac-n { background:#16181D; color:#fff; border-color:#16181D; }
  .ac-t { font:800 24px/1.15 var(--head); letter-spacing:-.04em; } .ac-m { font:600 10.5px var(--sans); letter-spacing:.14em; }
  .ac-lesson.open { background:#FFFFFF; border:1px solid #D5D9DF; border-radius:8px; box-shadow:none; margin:22px 0 34px; } .ac-lesson.open + .ac-lesson { border-top:0; }
  .ac-lesson.open .ac-lh { padding:22px 26px; border-bottom:1px solid var(--line); }
  .ac-body { padding:28px 30px 32px 118px; } .ac-body > p { font-size:17px; line-height:1.75; max-width:700px; }
  .ac-fig { max-width:700px; border:1px solid #D5D9DF; background:#FFFFFF; box-shadow:none; margin:14px 0 28px; }
  .ac-q { max-width:700px; margin:30px 0 24px; padding:26px 28px; } .ac-q > p { font-size:22px; }
  .ac-opt { border-radius:20px; padding:11px 18px; background:#FFFFFF; }
  .ac-gloss { margin-top:110px; padding-top:0; border-top:0; }
  .ac-gloss-h { display:grid; grid-template-columns:minmax(0, 1fr) 190px; gap:40px; align-items:end; margin-bottom:30px; } .ac-gloss-h .section-spirit { width:170px; } .ac-gloss-h p { color:var(--muted); margin:12px 0 0; }
  #ac-glossary { gap:0 44px; } .ac-term { padding:16px 0; border-top:1px solid #DDE0E5; } .ac-term b { font-size:20px; }
  .ac-close { margin-top:100px; } .ac-close .signature-intro h2 { font:800 clamp(36.1px, 4.3vw, 57.6px)/1.05 var(--head); letter-spacing:-.05em; }
  .ac-close-mark svg { width:min(100%, 340px); height:auto; display:block; margin:0 auto; overflow:visible; }
  .ac-footer { text-align:center; color:var(--muted); font-size:12.5px; padding:10px 24px 40px; border:0; margin:0; }
  @media (max-width: 1000px) { .ac-ribbon { grid-template-columns:repeat(3, max-content); } }
  @media (max-width: 860px) {
    .ac-hero { padding:22px 22px 40px; } .ac-hero .ac-head { grid-template-columns:minmax(0, 1fr) 96px; gap:14px; align-items:start; } .ac-hero :is(h1, h2) { font-size:clamp(37.8px, 10.3vw, 60.2px); } .ac-hero .ac-lede { font-size:16px; margin:24px 0 20px; }
    .ac-hero .section-spirit figcaption { display:none; } .ac-bar { width:160px; }
    .ac-ribbon { grid-template-columns:repeat(2, minmax(0, 1fr)); } .ac-ribbon .ribbon-item { justify-content:flex-start; }
    .ac { padding:0 20px 30px; } .ac-track { padding-top:64px; } .ac-th { margin-bottom:22px; } .ac-count { padding-bottom:0; }
    .ac-lh { grid-template-columns:48px minmax(0, 1fr); gap:14px; padding:16px 2px; } .ac-m { grid-column:2; } .ac-n { height:38px; width:44px; font-size:13px; box-shadow:none; } .ac-t { font-size:20px; }
    .ac-lesson.open .ac-lh { padding:16px; } .ac-body { padding:18px 16px 22px; } .ac-q { padding:18px; } .ac-q > p { font-size:19px; }
    .ac-gloss { margin-top:64px; } .ac-gloss-h { grid-template-columns:minmax(0, 1fr) 100px; gap:14px; } .ac-gloss-h .section-spirit { width:100px; } .ac-close { margin-top:60px; }
  }
  /* ===== v14 · the search palette in the doodle identity: a paper sheet, a light headline input, toned step marks ===== */
  html[data-theme] #search { background:rgba(255,255,255,.58); backdrop-filter:blur(6px) saturate(1.05); -webkit-backdrop-filter:blur(6px) saturate(1.05); padding-top:11vh; }
  html[data-theme] .palette { width:min(680px, 100%); border:1px solid #D5D9DF; border-radius:6px; background:#FFFFFF; box-shadow:0 30px 70px rgba(48,56,60,.16); overflow:visible; position:relative; }
  html[data-theme] .palette::before { content:""; position:absolute; left:58px; width:190px; top:60px; height:12px; background:url(/art/doodle-underline.svg) left center/contain no-repeat; opacity:.75; pointer-events:none; }
  html[data-theme] .pal-in { padding:20px 22px 22px; gap:14px; border-bottom:1px solid #DDE0E5; }
  html[data-theme] .pal-in svg { width:22px; height:22px; color:#16181D; stroke-width:1.6; }
  html[data-theme] .pal-in input { font:800 24px/1.2 var(--head); letter-spacing:-.035em; color:#16181D; }
  html[data-theme] .pal-in input::placeholder { color:#9097A1; font-size:16px; letter-spacing:-.01em; }
  html[data-theme] .palette kbd { font:500 10.5px var(--mono); color:#16181D; background:#FFFFFF; border:1px solid #16181D; border-radius:8px; padding:2px 6px; box-shadow:2px 2px 0 #DDE0E5; }
  html[data-theme] .pal-res { max-height:min(54vh, 480px); padding:6px 12px 12px; }
  html[data-theme] .pal-g { display:flex; align-items:center; gap:9px; font:600 10px var(--sans); letter-spacing:.16em; color:#16181D; padding:16px 10px 8px; }
  html[data-theme] .pal-g::before { content:""; width:18px; height:1.5px; background:currentColor; transform:rotate(-3deg); }
  html[data-theme] .pal-r { display:flex; align-items:center; gap:14px; padding:9px 10px; border:1px solid transparent; border-radius:4px; }
  html[data-theme] .pal-ic { flex:0 0 auto; width:14px; height:14px; border:1px solid #D5D9DF; background:#FFFFFF; box-shadow:none; }
  html[data-theme] .pal-tx { flex:1; min-width:0; }
  html[data-theme] .pal-r b { font:700 15.5px/1.3 var(--head); letter-spacing:-.02em; color:#16181D; }
  html[data-theme] .pal-r span { font-size:12.5px; color:#6B7280; margin-top:2px; }
  html[data-theme] .pal-go { font:500 12px var(--mono); font-style:normal; color:#16181D; opacity:0; }
  html[data-theme] .pal-r:hover { background:#F4F5F7; }
  html[data-theme] .pal-r.on { background:#FFFFFF; border-color:#16181D; box-shadow:none; }
  html[data-theme] .pal-r.on b { color:#16181D; } html[data-theme] .pal-r.on .pal-go { opacity:1; }
  html[data-theme] .t-lilac { --tone:#C7CEF8; } html[data-theme] .t-cyan { --tone:#A7E4ED; } html[data-theme] .t-peach { --tone:#F5CC9B; } html[data-theme] .t-coral { --tone:#F1B5C2; }
  html[data-theme] .pal-g.t-lilac::before { background:#2B3FD6; } html[data-theme] .pal-g.t-cyan::before { background:#55AFBD; } html[data-theme] .pal-g.t-peach::before { background:#DA9861; } html[data-theme] .pal-g.t-coral::before { background:#D87A92; }
  html[data-theme] .pal-foot { padding:11px 22px; gap:18px; border-top:1px solid #DDE0E5; background:#F4F5F7; border-radius:0 0 5px 5px; font-size:11.5px; color:#6B7280; align-items:center; }
  html[data-theme] .pal-foot span:last-child { margin-left:auto; }
  html[data-theme] #searchbtn, html[data-theme] header #customize-btn { border:1px solid #D5D9DF; border-radius:4px; background:#FFFFFF; }
  html[data-theme] #searchbtn:hover { border-color:#16181D; box-shadow:0 4px 12px rgba(48,56,60,.14); }
  html[data-theme] #searchbtn kbd { border-color:#D5D9DF; }
  @media (max-width: 640px) { html[data-theme] #search { padding-top:5vh; } html[data-theme] .palette { box-shadow:0 18px 44px rgba(48,56,60,.16); } html[data-theme] .palette::before { top:52px; left:50px; } html[data-theme] .pal-in { padding:16px 16px 20px; } html[data-theme] .pal-in input { font-size:20px; } html[data-theme] .pal-in input::placeholder { font-size:14px; } html[data-theme] .pal-res { padding:4px 6px 8px; } }
  /* ===== v15 · the customize drawer in the doodle identity: a paper sheet, numbered sections, boxed controls with toned offsets ===== */
  html[data-theme] .drawer.cz { width:min(440px, 100%); padding:0 26px 96px; background:#FFFFFF; border-left:1px solid #D5D9DF; box-shadow:-30px 0 70px rgba(48,56,60,.14); counter-reset:czsec; }
  html[data-theme] .drawer.cz:not(.on) { box-shadow:none; }
  html[data-theme] .cz > h2 { position:sticky; top:0; z-index:2; margin:0 -26px 6px; padding:24px 26px 22px; background:#FFFFFF url(/art/doodle-underline.svg) 26px calc(100% - 8px)/190px 12px no-repeat; border-bottom:1px solid #DDE0E5; font:800 24.1px/1.1 var(--head); letter-spacing:-.045em; color:#16181D; }
  html[data-theme] .cz > h2 .btn { font:500 12px var(--sans); letter-spacing:0; border:1px solid #16181D; border-radius:8px; padding:5px 11px; background:#FFFFFF; color:#16181D; }
  html[data-theme] .cz > h2 .btn:hover { box-shadow:0 4px 12px rgba(48,56,60,.14); }
  html[data-theme] .cz h3 { counter-increment:czsec; --tone:#C7CEF8; --tone-d:#2B3FD6; display:flex; align-items:center; gap:10px; font:600 10.5px var(--sans); letter-spacing:.16em; color:#16181D; margin:30px 0 10px; padding:0; border:0; }
  html[data-theme] .cz #cz-body h3:first-child { margin-top:22px; }
  html[data-theme] .cz h3::before { content:"0" counter(czsec); display:inline-grid; place-items:center; width:26px; height:22px; font:500 10.5px var(--mono); letter-spacing:0; border:1px solid #D5D9DF; background:#FFFFFF; box-shadow:none; }
  html[data-theme] .cz h3::after { content:""; flex:1; height:1px; background:#DDE0E5; margin-left:4px; }
  html[data-theme] .cz h3:nth-of-type(2) { --tone:#A7E4ED; } html[data-theme] .cz h3:nth-of-type(3) { --tone:#F5CC9B; } html[data-theme] .cz h3:nth-of-type(4) { --tone:#F1B5C2; }
  html[data-theme] .czrow { padding:9px 0; border-bottom:1px solid #ECEEF1; font-size:13.5px; color:#16181D; }
  html[data-theme] .czrow small { color:#7A808A; margin-top:1px; }
  html[data-theme] .cz .seg { border:1px solid #16181D; border-radius:8px; background:#FFFFFF; }
  html[data-theme] .cz .seg button { padding:6px 9px; color:#4B515B; } html[data-theme] .cz .seg button + button { border-left:1px solid #DDE0E5; }
  html[data-theme] .cz .seg button:hover { background:#F4F5F7; color:#16181D; }
  html[data-theme] .cz .seg button.on { background:var(--acc-soft); color:#16181D; font-weight:600; }
  html[data-theme] .cz .swatches { gap:10px; }
  html[data-theme] .cz .swatches button { width:22px; height:22px; border-radius:2px; border:1px solid #D5D9DF; outline:0; transition:transform .12s ease, box-shadow .12s ease; }
  html[data-theme] .cz .swatches button.on { box-shadow:0 0 0 2px #FFFFFF, 0 0 0 3.5px #16181D; }
  html[data-theme] .czhint { font-size:12.5px; color:#6B7280; margin:0 0 10px; }
  html[data-theme] .cz .lvrow { gap:8px; margin-bottom:8px; }
  html[data-theme] .cz .lvrow input { background:#FFFFFF; border:1px solid #D5D9DF; border-radius:8px; padding:7px 9px; }
  html[data-theme] .cz .lvrow input:focus { border-color:#16181D; box-shadow:0 0 0 3px rgba(48,56,60,.10); }
  html[data-theme] .cz .lvrow .btn, html[data-theme] .czfoot .btn { border:1px solid #16181D; border-radius:8px; background:#FFFFFF; color:#16181D; }
  html[data-theme] .cz .lvrow.add .btn { background:#16181D; color:#FFFFFF; }
  html[data-theme] .cz .lvrow .btn:hover, html[data-theme] .czfoot .btn:hover { box-shadow:0 4px 12px rgba(48,56,60,.14); }
  html[data-theme] .czmods li { --tone:#C7CEF8; border:1px solid #D5D9DF; border-radius:8px; background:#FFFFFF; padding:10px 12px; margin:0 0 10px; box-shadow:none; }
  html[data-theme] .czmods li:nth-child(2) { --tone:#A7E4ED; } html[data-theme] .czmods li:nth-child(3) { --tone:#F5CC9B; }
  html[data-theme] .czmods .mrow b { font:700 16px var(--head); letter-spacing:-.025em; }
  html[data-theme] .czmods .mrow .btn { border:1px solid #D5D9DF; border-radius:8px; padding:2px 8px; margin-left:4px; background:transparent; } html[data-theme] .czmods .mrow .btn:not(:disabled):hover { border-color:#16181D; }
  html[data-theme] .czmods .mrow .btn:disabled { opacity:.35; }
  html[data-theme] .czmods .secs { margin:9px 0 2px 25px; padding-top:9px; border-top:1px dashed #DDE0E5; gap:6px 16px; }
  html[data-theme] .cz .tick input { appearance:none; -webkit-appearance:none; width:15px; height:15px; border:1px solid #D5D9DF; border-radius:2px; background:#FFFFFF; cursor:pointer; flex:0 0 auto; display:inline-grid; place-items:center; }
  html[data-theme] .cz .tick input:checked { background:var(--tone, var(--acc-soft)); }
  html[data-theme] .cz .tick input:checked::after { content:""; width:7px; height:4px; border-left:1.6px solid #16181D; border-bottom:1.6px solid #16181D; transform:translateY(-1px) rotate(-45deg); }
  html[data-theme] .czfoot { margin-top:26px; padding-top:16px; border-top:1px solid #DDE0E5; color:#6B7280; line-height:1.4; }
  @media (max-width: 640px) { html[data-theme] .drawer.cz { padding:0 16px 96px; border-left:0; box-shadow:none; } html[data-theme] .cz > h2 { margin:0 -16px 6px; padding:18px 16px 20px; background-position:16px calc(100% - 7px); font-size:24px; } }
  /* ===== v16 · the threads, session charts and profile drawers in the doodle identity (the shell v15 gave the customize drawer) ===== */
  html[data-theme] #hist, html[data-theme] #charts, html[data-theme] #prof { --tone:#F1B5C2; padding:0 26px 96px; background:#FFFFFF; border-left:1px solid #D5D9DF; box-shadow:-30px 0 70px rgba(48,56,60,.14); }
  html[data-theme] #charts { --tone:#A7E4ED; } html[data-theme] #prof { --tone:#F5CC9B; width:min(440px, 100%); } html[data-theme] #hist { width:min(420px, 100%); }
  html[data-theme] #hist:not(.on), html[data-theme] #charts:not(.on), html[data-theme] #prof:not(.on) { box-shadow:none; }
  html[data-theme] #hist > h2, html[data-theme] #charts > h2, html[data-theme] #prof > h2 { position:sticky; top:0; z-index:2; margin:0 -26px 18px; padding:24px 26px 22px; background:#FFFFFF url(/art/doodle-underline.svg) 26px calc(100% - 8px)/150px 12px no-repeat; border-bottom:1px solid #DDE0E5; font:800 24.1px/1.1 var(--head); letter-spacing:-.045em; color:#16181D; gap:12px; }
  html[data-theme] .drawer > h2 .btn { font:500 12px var(--sans); letter-spacing:0; border:1px solid #16181D; border-radius:8px; padding:5px 11px; background:#FFFFFF; color:#16181D; margin-left:auto; }
  html[data-theme] .drawer > h2 .btn:hover { box-shadow:0 4px 12px rgba(48,56,60,.14); }
  html[data-theme] #charts-date { font:500 11px var(--mono) !important; letter-spacing:0; color:#6B7280 !important; align-self:flex-end; padding-bottom:5px; }
  /* threads and keys: paper cards, an ink edge and the tone's offset on hover */
  html[data-theme] .drawer .hist li { border:1px solid #D5D9DF; border-radius:8px; background:#FFFFFF; padding:12px 14px; margin:0 0 10px; transition:box-shadow .12s ease, border-color .12s ease, transform .12s ease; }
  html[data-theme] .drawer .hist li[data-id]:hover { border-color:#16181D; background:#FFFFFF; box-shadow:0 4px 12px rgba(48,56,60,.14); transform:translateY(-1px); }
  html[data-theme] .drawer .hist .t { font:700 15.5px/1.3 var(--head); letter-spacing:-.02em; color:#16181D; }
  html[data-theme] .drawer .hist .m { font:500 11px var(--mono); color:#7A808A; margin-top:7px; align-items:center; }
  html[data-theme] .drawer .hist .m button { font:500 11px var(--sans); color:#7A808A; border-bottom:1px solid transparent; padding:0; } html[data-theme] .drawer .hist .m button:hover { color:#B4506B; border-bottom-color:#B4506B; }
  /* session charts: each chart a paper card with its own offset */
  html[data-theme] #charts .vizcard { --tone:#C7CEF8; border:1px solid #D5D9DF; border-radius:8px; background:#FFFFFF; padding:16px 18px 12px; margin:0 0 16px; box-shadow:none; }
  html[data-theme] #charts .vizcard:nth-of-type(2) { --tone:#A7E4ED; } html[data-theme] #charts .vizcard:nth-of-type(3) { --tone:#F5CC9B; } html[data-theme] #charts .vizcard:nth-of-type(4) { --tone:#F1B5C2; }
  html[data-theme] #charts .vizcard h3 { font:700 19px/1.2 var(--head); letter-spacing:-.03em; color:#16181D; margin:0 0 4px; }
  html[data-theme] #charts .vizcard .cap { font-size:12.5px; color:#6B7280; margin-bottom:10px; line-height:1.45; }
  /* profile: boxed fields, light section headlines */
  html[data-theme] #prof .budget { border:1px solid #D5D9DF; border-radius:8px; background:#FFFFFF; padding:11px 13px; font-size:12.5px; color:#4B515B; margin-bottom:14px; }
  html[data-theme] #prof .budget .bar { height:6px; border:1px solid #16181D; border-radius:0; background:#FFFFFF; margin-top:8px; overflow:hidden; } html[data-theme] #prof .budget .bar i { display:block; height:100%; background:#F5CC9B; border-radius:0; }
  html[data-theme] #prof .field span { font:600 10px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#4B515B; }
  html[data-theme] #prof .field input, html[data-theme] #prof .field textarea { background:#FFFFFF; border:1px solid #D5D9DF; border-radius:8px; padding:9px 11px; }
  html[data-theme] #prof .field input:focus, html[data-theme] #prof .field textarea:focus { border-color:#16181D; box-shadow:0 0 0 3px rgba(48,56,60,.10); }
  html[data-theme] #prof form h2, html[data-theme] #prof #mcpbox h2 { display:block; font:800 22px/1.15 var(--head); letter-spacing:-.04em; color:#16181D; margin:6px 0 10px !important; }
  html[data-theme] #prof #pwform, html[data-theme] #prof #mcpbox { margin-top:26px !important; padding-top:20px !important; border-top:1px solid #DDE0E5 !important; }
  html[data-theme] #prof .btn { border:1px solid #16181D; border-radius:8px; background:#FFFFFF; color:#16181D; }
  html[data-theme] #prof .btn.primary { background:#16181D; color:#FFFFFF; }
  html[data-theme] #prof .btn:hover { box-shadow:0 4px 12px rgba(48,56,60,.14); }
  html[data-theme] #prof .pwhint { font-size:12px; color:#7A808A; line-height:1.45; }
  html[data-theme] #prof #key-snippet { background:#FFFFFF !important; border:1px dashed #D5D9DF !important; border-radius:8px !important; font-family:var(--mono); }
  html[data-theme] #prof .invite { color:#16181D; padding:10px 12px; margin-top:10px; border:1px solid #D5D9DF; border-radius:8px; background:#FFFFFF; box-shadow:none; font-family:var(--mono); word-break:break-all; }
  @media (max-width: 640px) { html[data-theme] #hist, html[data-theme] #charts, html[data-theme] #prof { padding:0 16px 96px; border-left:0; box-shadow:none; } html[data-theme] #hist > h2, html[data-theme] #charts > h2, html[data-theme] #prof > h2 { margin:0 -16px 14px; padding:18px 16px 20px; background-position:16px calc(100% - 7px); font-size:24px; } html[data-theme] #charts .vizcard { padding:12px 10px 8px; } }
  /* ===== v17 · Ask Lens in the doodle identity: a paper sheet with an ink edge, a light headline, boxed turns and a boxed composer ===== */
  html[data-theme] .dock, html[data-theme] .dock.on { width:min(420px, calc(100vw - 24px)); height:min(640px, calc(100vh - 140px)); border:1px solid #D5D9DF; border-radius:6px; background:#FFFFFF; box-shadow:0 26px 60px rgba(48,56,60,.16); overflow:hidden; }
  html[data-theme] .dock .dh { padding:18px 18px 20px; border-bottom:1px solid #DDE0E5; background:#FFFFFF url(/art/doodle-underline.svg) 18px calc(100% - 7px)/120px 11px no-repeat; align-items:flex-start; }
  html[data-theme] .dock .dt b { font:800 22.4px/1.05 var(--head); letter-spacing:-.045em; color:#16181D; }
  html[data-theme] .dock .dt span { display:block; font:400 12px var(--sans); color:#7A808A; margin-top:5px; white-space:nowrap; }
  html[data-theme] .dock .dtools { gap:5px; padding-top:2px; }
  html[data-theme] .dock .dtools .btn { font:500 11.5px var(--sans); border:1px solid #D5D9DF; border-radius:8px; padding:4px 8px; background:transparent; color:#16181D; }
  html[data-theme] .dock .dtools .btn:hover { border-color:#16181D; box-shadow:0 4px 12px rgba(48,56,60,.14); }
  html[data-theme] .dock #thread { padding:12px 18px 8px; }
  html[data-theme] .dock .turn { margin:14px 0; }
  html[data-theme] .dock .user { background:#FFFFFF; border:1px solid #D5D9DF; border-radius:8px; padding:9px 12px; box-shadow:none; font-size:13.5px; color:#16181D; }
  html[data-theme] .dock .bot { font-size:14px; line-height:1.55; color:#16181D; padding:0 0 0 12px; border-left:2px solid #A7E4ED; }
  html[data-theme] .dock .bot h3 { font:700 17px/1.25 var(--head); letter-spacing:-.025em; margin:14px 0 6px; }
  html[data-theme] .dock .bot code { background:#F4F5F7; border-radius:2px; font-family:var(--mono); }
  html[data-theme] .dock .bot th { font:600 9.5px var(--sans); letter-spacing:.12em; color:#7A808A; } html[data-theme] .dock .bot th, html[data-theme] .dock .bot td { border-bottom-color:#E5E7EB; }
  html[data-theme] .dock .inst { border:1px solid #D5D9DF; border-radius:8px; background:#FFFFFF; box-shadow:3px 3px 0 #ECEEF1; }
  html[data-theme] .dock .inst .h b { font:600 9.5px var(--sans); letter-spacing:.14em; color:#16181D; }
  html[data-theme] .dock .typing { font-size:12.5px; color:#7A808A; } html[data-theme] .dock .typing i { width:6px; height:6px; border-radius:1px; background:#16181D; }
  html[data-theme] .dock .typing i:nth-child(1) { background:#6373E6; } html[data-theme] .dock .typing i:nth-child(2) { background:#55AFBD; } html[data-theme] .dock .typing i:nth-child(3) { background:#DA9861; }
  html[data-theme] .dock #chips { padding:2px 18px 12px; gap:7px; }
  html[data-theme] .dock .chip-q { font:500 12.5px var(--sans); color:#16181D; background:#FFFFFF; border:1px solid #D5D9DF; border-radius:8px; padding:6px 10px; box-shadow:none; }
  html[data-theme] .dock .chip-q:hover { border-color:#16181D; background:#FFFFFF; color:#16181D; box-shadow:0 4px 12px rgba(48,56,60,.14); }
  html[data-theme] .dock .chip-q .ic { color:var(--acc); }
  html[data-theme] .dock #composer { padding:12px 18px 12px; border-top:1px solid #DDE0E5; background:#F4F5F7; }
  html[data-theme] .dock #composer form { border:1px solid #D5D9DF; border-radius:8px; background:#FFFFFF; padding:5px 5px 5px 12px; box-shadow:none; transition:box-shadow .12s ease; }
  html[data-theme] .dock #composer form:focus-within { border-color:#16181D; box-shadow:0 0 0 3px rgba(48,56,60,.10); }
  html[data-theme] .dock .send { width:34px; height:34px; border-radius:2px; background:#16181D; color:#FFFFFF; } html[data-theme] .dock .send:hover { background:#1F2629; }
  html[data-theme] .dock .foot { font-size:10.5px; line-height:1.4; color:#7A808A; margin-top:9px; text-align:left; }
  html[data-theme] .dock .gate { margin:14px 18px 0; padding:14px 16px; border:1px solid #D5D9DF; border-radius:8px; background:#FFFFFF; box-shadow:none; }
  html[data-theme] .dock .gate b { font:700 18px/1.2 var(--head); letter-spacing:-.03em; margin-bottom:6px; } html[data-theme] .dock .gate p { font-size:13px; color:#4B515B; }
  html[data-theme] .dock .gate .btn.primary { border-radius:8px !important; background:#16181D; border-color:#16181D; color:#FFFFFF; }
  @media (max-width: 640px) { html[data-theme] .dock, html[data-theme] .dock.on { width:100%; height:100%; border:0; border-radius:0; box-shadow:none; } html[data-theme] .dock .dh { padding:14px 14px 18px; background-position:14px calc(100% - 6px); } html[data-theme] .dock #thread { padding:10px 14px 6px; } html[data-theme] .dock #chips { padding:2px 14px 10px; } html[data-theme] .dock #composer { padding:10px 14px 12px; } }
  html[data-theme] .dock .a-empty h3 { font:800 24px/1.1 var(--head); letter-spacing:-.04em; color:#16181D; } html[data-theme] .dock .a-empty p { font-size:13px; color:#6B7280; line-height:1.5; }
  html[data-theme] .dock .bot .meta { font:500 10.5px var(--mono); color:#9097A1; margin-top:8px; }
  /* ===== v18 · sign in and registration in the doodle identity: a paper sheet, the mark, a light headline, boxed fields ===== */
  html[data-theme] #auth { background:rgba(255,255,255,.6); backdrop-filter:blur(6px) saturate(1.05); -webkit-backdrop-filter:blur(6px) saturate(1.05); overflow:auto; }
  html[data-theme] #auth .modal { position:relative; width:min(440px, 100%); margin:auto; padding:30px 30px 20px; border:1px solid #D5D9DF; border-radius:6px; background:#FFFFFF; box-shadow:0 30px 70px rgba(48,56,60,.16); text-align:left; }
  html[data-theme] #auth .a-mark { position:absolute; top:22px; right:24px; width:54px; pointer-events:none; } html[data-theme] #auth .a-mark svg { width:100%; height:auto; display:block; overflow:visible; }
  html[data-theme] #auth .modal h2 { font:800 29.2px/1.05 var(--head); letter-spacing:-.05em; color:#16181D; margin:0 70px 14px 0; padding-bottom:14px; background:url(/art/doodle-underline.svg) left bottom/150px 12px no-repeat; }
  html[data-theme] #auth .modal .sub { font-size:13.5px; line-height:1.5; color:#6B7280; margin:0 0 20px; }
  html[data-theme] #auth .tabs { gap:0; padding:0; margin-bottom:18px; background:#FFFFFF; border:1px solid #16181D; border-radius:8px; overflow:hidden; }
  html[data-theme] #auth .tabs button { font:500 13px var(--sans); padding:9px 8px; border-radius:0; color:#4B515B; box-shadow:none; } html[data-theme] #auth .tabs button + button { border-left:1px solid #16181D; }
  html[data-theme] #auth .tabs button:hover { background:#F4F5F7; color:#16181D; }
  html[data-theme] #auth .tabs button.on { background:var(--acc-soft); color:#16181D; font-weight:600; }
  html[data-theme] #auth .field { margin:12px 0; }
  html[data-theme] #auth .field span { font:600 10px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#4B515B; margin-bottom:6px; }
  html[data-theme] #auth .field input { background:#FFFFFF; border:1px solid #D5D9DF; border-radius:8px; padding:10px 12px; font-size:14.5px; color:#16181D; }
  html[data-theme] #auth .field input:focus { border-color:#16181D; box-shadow:0 0 0 3px rgba(48,56,60,.10); }
  html[data-theme] #auth .pwhint { font-size:12px; line-height:1.45; color:#7A808A; margin:4px 0 12px; padding:9px 11px; border:1px dashed #D5D9DF; border-radius:8px; background:#FFFFFF; }
  html[data-theme] #auth .btn.primary { margin-top:8px; padding:11px 14px; border:1px solid #D5D9DF; border-radius:8px !important; background:#16181D; color:#FFFFFF; font:600 14px var(--sans); transition:transform .12s ease, box-shadow .12s ease; }
  html[data-theme] #auth .btn.primary:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(48,56,60,.14); }
  html[data-theme] #auth .err { font-size:12.5px; color:#B4506B; margin-top:10px; min-height:16px; }
  html[data-theme] #auth #a-cancel { font:500 12.5px var(--sans); color:#6B7280; border:0; border-bottom:1px solid #D5D9DF; border-radius:0; padding:2px 0; background:transparent; } html[data-theme] #auth #a-cancel:hover { color:#16181D; border-bottom-color:#16181D; }
  @media (max-width: 640px) { html[data-theme] #auth { padding:14px; align-items:flex-start; } html[data-theme] #auth .modal { padding:22px 18px 16px; box-shadow:0 18px 44px rgba(48,56,60,.16); } html[data-theme] #auth .modal h2 { font-size:28px; } html[data-theme] #auth .a-mark { width:44px; top:18px; right:16px; } }
  /* ===== v19 · the offer in the doodle identity: the three readings as paper cards, the one price as a signed sheet, the locked card on the map ===== */
  html[data-theme] .lp .cat { border:1px solid #D5D9DF; border-radius:8px; background:#FFFFFF; padding-top:0; margin:0; box-shadow:none !important; }
  html[data-theme] .lp .cat:nth-child(2) { box-shadow:none !important; } html[data-theme] .lp .cat:nth-child(3) { box-shadow:none !important; }
  html[data-theme] .lp .cat::before { display:none; }
  html[data-theme] .lp .cat .cb { padding:26px 26px 26px; }
  html[data-theme] .lp .cat h3 { font:800 25.8px/1.05 var(--head); letter-spacing:-.045em; color:#16181D; margin:0 0 10px; padding-bottom:12px; background:url(/art/doodle-underline.svg) left bottom/120px 10px no-repeat; }
  html[data-theme] .lp .cat .tag { font-size:14px; line-height:1.5; color:#4B515B; }
  html[data-theme] .lp .cat ul { margin:18px 0 0; } html[data-theme] .lp .cat li { position:relative; padding:10px 0 10px 24px; border-top:1px solid #ECEEF1; color:#4B515B; font-size:13.5px; line-height:1.45; }
  html[data-theme] .lp .cat li::before { content:""; position:absolute; left:2px; top:15px; width:9px; height:9px; border:1px solid #D5D9DF; background:#C7CEF8; }
  html[data-theme] .lp .cat:nth-child(2) li::before { background:#A7E4ED; } html[data-theme] .lp .cat:nth-child(3) li::before { background:#F5CC9B; }
  html[data-theme] .lp .bundle { position:relative; isolation:isolate; overflow:hidden; margin:30px 0 0; padding:40px 44px; border:1px solid #D5D9DF; border-radius:8px; background:#FFFFFF; box-shadow:none; align-items:center; }
  html[data-theme] .lp .bundle::before { content:""; position:absolute; inset:-10% -8% -10% 42%; z-index:-1; background:url(/art/pastel-brushes.jpg) right center/cover no-repeat; opacity:.55; mask-image:linear-gradient(90deg, transparent, #000 35%); -webkit-mask-image:linear-gradient(90deg, transparent, #000 35%); }
  html[data-theme] .lp .bundle h3 { font:800 37.8px/1 var(--head); letter-spacing:-.05em; color:#16181D; margin:0 0 10px; }
  html[data-theme] .lp .bundle p { font-size:15px; line-height:1.55; color:#4B515B; max-width:520px; }
  html[data-theme] .lp .bundle .actions { gap:20px; }
  html[data-theme] .lp .bundle .price { font:800 46px/1 var(--head); letter-spacing:-.05em; color:#16181D; } html[data-theme] .lp .bundle .price span { font:500 12px var(--mono); letter-spacing:0; color:#4B515B; margin-left:4px; }
  html[data-theme] .lp .bundle .btn { border:1px solid #D5D9DF; border-radius:8px !important; padding:12px 20px; font:600 14px var(--sans); background:#16181D; color:#FFFFFF; transition:transform .12s ease, box-shadow .12s ease; }
  html[data-theme] .lp .bundle .btn:not(:disabled):hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(48,56,60,.14); }
  html[data-theme] .lp .bundle .btn:disabled { background:#FFFFFF; color:#16181D; opacity:1; }
  /* the locked card on the map: the same offer, read where the map would be */
  html[data-theme] .mod.offer { border:1px solid #D5D9DF; border-radius:8px; background:#FFFFFF; box-shadow:none; margin:0; position:relative; isolation:isolate; overflow:hidden; }
  html[data-theme] .mod.offer::before { content:""; position:absolute; inset:-10% -8% -10% 55%; z-index:-1; background:url(/art/pastel-brushes.jpg) right center/cover no-repeat; opacity:.45; mask-image:linear-gradient(90deg, transparent, #000 40%); -webkit-mask-image:linear-gradient(90deg, transparent, #000 40%); }
  html[data-theme] .mod.offer .mh { padding:28px 32px 0; border:0; background:transparent; align-items:flex-start; }
  html[data-theme] .mod.offer .mh h3 { font:800 37.8px/1 var(--head); letter-spacing:-.05em; text-transform:none; color:#16181D; padding-bottom:12px; background:url(/art/doodle-underline.svg) left bottom/150px 12px no-repeat; }
  html[data-theme] .mod.offer .mh .tag { font-size:14px; color:#4B515B; margin-top:6px; }
  html[data-theme] .mod.offer .lock.off { font:500 10.5px var(--mono); letter-spacing:.08em; color:#16181D; background:#FFFFFF; border:1px solid #16181D; border-radius:8px; padding:4px 8px; }
  html[data-theme] .mod.offer .mb { padding:16px 32px 32px; }
  html[data-theme] .mod.offer .mb > p { font-size:15px; line-height:1.55; color:#4B515B; max-width:620px; margin:0 0 18px; }
  html[data-theme] .mod.offer .del { list-style:none; margin:0 0 26px; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; max-width:860px; }
  html[data-theme] .mod.offer .del li { border:1px solid #16181D; border-radius:8px; background:#FFFFFF; padding:14px 16px; font-size:13.5px; line-height:1.5; color:#4B515B; box-shadow:none; }
  html[data-theme] .mod.offer .del li:nth-child(2) { box-shadow:none; } html[data-theme] .mod.offer .del li:nth-child(3) { box-shadow:none; }
  html[data-theme] .mod.offer .del li b { display:block; font:700 19px/1.2 var(--head); letter-spacing:-.03em; color:#16181D; margin-bottom:6px; }
  html[data-theme] .mod.offer .actions { gap:20px; margin-top:0; }
  html[data-theme] .mod.offer .price { font:800 46px/1 var(--head); letter-spacing:-.05em; color:#16181D; } html[data-theme] .mod.offer .price span { font:500 12px var(--mono); letter-spacing:0; color:#4B515B; margin-left:4px; }
  html[data-theme] .mod.offer .btn.primary { border:1px solid #D5D9DF; border-radius:8px !important; padding:12px 20px; font:600 14px var(--sans); background:#16181D; color:#FFFFFF; transition:transform .12s ease, box-shadow .12s ease; }
  html[data-theme] .mod.offer .btn.primary:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(48,56,60,.14); }
  @media (max-width: 640px) { html[data-theme] .lp .cat { margin:0; box-shadow:none !important; } html[data-theme] .lp .cat .cb { padding:20px 18px; } html[data-theme] .lp .bundle { padding:26px 20px; margin:22px 0 0; box-shadow:none; } html[data-theme] .lp .bundle h3 { font-size:34px; } html[data-theme] .lp .bundle .price { font-size:38px; } html[data-theme] .mod.offer { margin:0; box-shadow:none; } html[data-theme] .mod.offer .mh { padding:20px 18px 0; } html[data-theme] .mod.offer .mh h3 { font-size:34px; } html[data-theme] .mod.offer .mb { padding:12px 18px 22px; } html[data-theme] .mod.offer .price { font-size:38px; } html[data-theme] .mod.offer .actions { flex-wrap:wrap; } }
  /* ===== v20 · the accent the reader picks drives the selection colour: offsets, fills, the active state. The three-tone sets stay as they are ===== */
  html[data-accent="lilac"] { --acc:#2B3FD6; --acc-mid:#6373E6; --acc-soft:#C7CEF8; --acc-fill:#DCE1FC; --acc-tint:#EEF1FE; --acc-line:#C2C9F3; }
  html[data-accent="aqua"] { --acc:#2F8896; --acc-mid:#55AFBD; --acc-soft:#A7E4ED; --acc-fill:#BFE6EB; --acc-tint:#E4F3F5; --acc-line:#A9CDD3; }
  html[data-accent="apricot"] { --acc:#A8672A; --acc-mid:#DA9861; --acc-soft:#F5CC9B; --acc-fill:#F3D7B7; --acc-tint:#F8EEE2; --acc-line:#DCC3A6; }
  html[data-accent="rose"] { --acc:#B9506A; --acc-mid:#D87A92; --acc-soft:#F1B5C2; --acc-fill:#F0C6D0; --acc-tint:#F8E8EC; --acc-line:#DDB7C1; }
  html[data-accent="charcoal"] { --acc:#16181D; --acc-mid:#6B7280; --acc-soft:#DDE0E5; --acc-fill:#E5E7EB; --acc-tint:#F4F5F7; --acc-line:#CDD2D9; }
  :root { --acc:#2B3FD6; --acc-mid:#6373E6; --acc-soft:#C7CEF8; --acc-fill:#DCE1FC; --acc-tint:#EEF1FE; --acc-line:#C2C9F3; }
  html[data-theme] .pal-r.on, html[data-theme] .pal-r:hover { background:var(--acc-tint); } html[data-theme] .pal-r.on b { color:var(--ink); }
  html[data-theme] .mod .in::before { background:var(--acc-soft); }
  /* the wordmark: "lens" with a small "trading" beneath it */
  html[data-theme] .wordmark .wm-text { display:inline-flex; flex-direction:column; align-items:flex-start; line-height:1; }
  @font-face { font-family:"Cardo"; font-style:normal; font-weight:400; font-display:swap; src:url(/art/cardo-regular.woff2) format("woff2"); }   /* Cardo, SIL Open Font License; a subset for the mark */
  @font-face { font-family:"Cardo"; font-style:italic; font-weight:400; font-display:swap; src:url(/art/cardo-italic.woff2) format("woff2"); }
  html[data-theme] .wordmark .wm-name { font-family:"Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-weight:800; font-style:normal; font-size:25px; letter-spacing:-.045em; line-height:1; color:#131418; }   /* the wordmark of the homepage concept: heavy, tight, black, with a blue full stop */
  html[data-theme] .wordmark .wm-dot { font-style:normal; color:#2B3FD6; margin-left:.01em; }
  body.desk .wordmark .wm-name, body.manage .wordmark .wm-name { font-size:22px; }
  html[data-theme] .wordmark .wm-sub { font:600 9px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:#6B7280; margin:3px 0 0 2px; }
  body.desk .wordmark .wm-sub, body.manage .wordmark .wm-sub { font-size:8px; letter-spacing:.2em; margin-top:2px; }
  /* ===== the header mark on hover: the ink redraws itself line by line, the colours drop in and then drift, the hatching follows ===== */
  @keyframes wm-draw { 0% { stroke-dashoffset:0; } 38%, 46% { stroke-dashoffset:1; } 100% { stroke-dashoffset:0; } }   /* the line is taken back, then drawn again */
  @keyframes wm-pop { 0% { transform:none; opacity:1; } 34%, 48% { transform:translate(var(--px, 0), var(--py, 0)) scale(.35) rotate(var(--pr, 0deg)); opacity:0; } 86% { opacity:1; } 100% { transform:none; opacity:1; } }   /* each block leaves the way it came, then returns */
  @keyframes wm-float { 0%, 100% { transform:none; } 50% { transform:translate(var(--fx, 0), var(--fy, 0)) rotate(var(--fr, 0deg)); } }
  @keyframes wm-hatch { 0%, 100% { opacity:.42; transform:none; } 25%, 60% { opacity:0; transform:translate(-6px, 3px); } }
  .wordmark:is(:hover, :focus-visible) .doodle-ink { transform:none; }
  .wordmark:is(:hover, :focus-visible) .doodle-ink path { stroke-dasharray:1; animation:wm-draw 1.7s cubic-bezier(.6, 0, .25, 1) both; }
  .wordmark:is(:hover, :focus-visible) .doodle-ink path:nth-child(2) { animation-delay:.08s; } .wordmark:is(:hover, :focus-visible) .doodle-ink path:nth-child(3) { animation-delay:.16s; }
  .wordmark:is(:hover, :focus-visible) .doodle-ink path:nth-child(4) { animation-delay:.24s; } .wordmark:is(:hover, :focus-visible) .doodle-ink path:nth-child(5) { animation-delay:.32s; }
  .wordmark:is(:hover, :focus-visible) .doodle-ink path:nth-child(6) { animation-delay:.4s; }
  .wordmark:is(:hover, :focus-visible) .doodle-color:nth-child(n) { transform:none; animation:wm-pop 1.6s cubic-bezier(.4, 0, .3, 1) var(--d, 0s) both; }   /* it ends exactly where it rests: moving the mouse away changes nothing */
  .wordmark .doodle-color:nth-child(1) { --d:0s; --px:-30px; --py:-60px; --pr:-14deg; --fx:-5px; --fy:-9px; --fr:-2deg; }
  .wordmark .doodle-color:nth-child(2) { --d:.06s; --px:-70px; --py:20px; --pr:12deg; --fx:-9px; --fy:6px; --fr:2.5deg; }
  .wordmark .doodle-color:nth-child(3) { --d:.12s; --px:0px; --py:-40px; --pr:-10deg; --fx:5px; --fy:-6px; --fr:-3deg; }
  .wordmark .doodle-color:nth-child(4) { --d:.18s; --px:70px; --py:-20px; --pr:14deg; --fx:8px; --fy:6px; --fr:2deg; }
  .wordmark .doodle-color:nth-child(5) { --d:.24s; --px:20px; --py:70px; --pr:-12deg; --fx:4px; --fy:9px; --fr:-2deg; }
  .wordmark:is(:hover, :focus-visible) .doodle-hatching { animation:wm-hatch 1.9s ease both; opacity:.42; transform:none; }
  .wordmark:is(:hover, :focus-visible) .doodle-second-pass { opacity:.42; }

  @media (prefers-reduced-motion: reduce) { .wordmark:is(:hover, :focus-visible) .doodle-ink path, .wordmark:is(:hover, :focus-visible) .doodle-color:nth-child(n), .wordmark:is(:hover, :focus-visible) .doodle-hatching { animation:none; } html[data-theme] .wordmark .wm-sub { transition:none; } }
  /* ===== v21 · the top menu: grouped items that open paper cards, and a split primary button ===== */
  html[data-theme] nav.links { align-items:center; gap:6px; margin-left:30px; }
  html[data-theme] nav.links > a, html[data-theme] .nv-t { display:inline-flex; align-items:center; gap:7px; font:400 15px var(--sans); color:#16181D; background:transparent; border:0; border-radius:4px; padding:8px 12px; cursor:pointer; text-decoration:none; transition:background .15s ease; }
  html[data-theme] nav.links > a:hover, html[data-theme] nav.links .nv:is(:hover, .on) > .nv-t { color:#16181D; background:#EEF0F3; }
  .nv { position:relative; } .nv .car { width:11px; height:11px; transition:transform .2s ease; } .nv:is(:hover, .on) > .nv-t .car, .nv.on > .nv-t .car { transform:rotate(180deg); }
  .nv-pop { position:absolute; left:0; top:calc(100% + 10px); z-index:20; width:230px; max-width:calc(100vw - 28px); white-space:normal; text-align:left; padding:8px; background:#FFFFFF; border:1px solid #D5D9DF; border-radius:5px; box-shadow:0 18px 44px rgba(48,56,60,.16); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
  .nv-pop::before { content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }   /* the gap the pointer crosses on its way down */
  .nv-pop.nv-right { left:auto; right:0; }
  .nv:hover > .nv-pop, .nv.on > .nv-pop, .nv:focus-within > .nv-pop { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
  .nv-pop a { display:block; padding:10px 12px; border-radius:8px; text-decoration:none; color:#16181D; }
  .nv-pop a b { font:700 17px/1.25 var(--head); letter-spacing:-.025em; } .nv-pop a span { grid-column:2; font-size:12.5px; line-height:1.4; color:#6B7280; margin-top:2px; }
  .nv-pop a:is(:hover, :focus-visible) { background:#F4F5F7; outline:0; }
  html[data-theme] #anon { display:flex; align-items:center; gap:10px; }
  html[data-theme] #signin-btn { font:400 15px var(--sans); border:0; background:transparent; color:#16181D; padding:8px 12px; border-radius:4px; } html[data-theme] #signin-btn:hover { background:#EEF0F3; box-shadow:none; }
  .ctasplit { display:inline-flex; align-items:stretch; border-radius:7px; transition:transform .14s ease, box-shadow .14s ease; }
  .ctasplit:hover, .ctasplit.on { transform:translateY(-1px); box-shadow:0 8px 18px rgba(48,56,60,.22); }
  html[data-theme] .ctasplit .btn.primary { font:500 15px var(--sans); background:#1F2629; border:0; color:#FFFFFF; padding:10px 18px; margin:0; box-shadow:none; transform:none; }
  html[data-theme] .ctasplit .split-m { border-radius:7px 0 0 7px !important; } html[data-theme] .ctasplit .split-c { border-radius:0 7px 7px 0 !important; padding:10px 13px; border-left:1px solid rgba(246,247,243,.28); }
  html[data-theme] .ctasplit .btn.primary:hover { background:#16181D; } html[data-theme] .ctasplit .split-c .car { width:12px; height:12px; }
  @media (max-width: 640px) { html[data-theme] #signin-btn { display:none; } html[data-theme] .ctasplit .btn.primary { font-size:14px; padding:9px 13px; } html[data-theme] .ctasplit .split-c { padding:9px 10px; } .nv-pop.nv-right { right:6px; width:230px; box-shadow:0 18px 44px rgba(48,56,60,.16); } .ctasplit:hover, .ctasplit.on { transform:none; box-shadow:none; } }
  @media (prefers-reduced-motion: reduce) { .nv-pop, .nv .car, .ctasplit { transition:none; } }
  /* full-text hits: the matched words in the palette, and a short glow on the passage the reader lands on */
  html[data-theme] .pal-r span mark { background:var(--acc-fill); color:#16181D; padding:0 1px; border-radius:2px; }
  html[data-theme] .pal-r span { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  @keyframes found { 0% { background-color:var(--acc-fill); } 100% { background-color:transparent; } }
  .found { animation:found 2.6s ease-out; border-radius:8px; }
  html[data-theme] #readpanel .volmodal { width:min(860px, 100%); } #read-body { font-size:14.5px; line-height:1.65; } #read-body table { font-size:13px; }
  /* ===== v22 · the account drawer: an overview card, numbered sections, devices, your data ===== */
  html[data-theme] #prof.acct { counter-reset:acsec; width:min(460px, 100%); }
  html[data-theme] #prof.acct > h3 { counter-increment:acsec; display:flex; align-items:center; gap:10px; font:600 10.5px var(--sans); letter-spacing:.16em; text-transform:uppercase; color:#16181D; margin:32px 0 10px; }
  html[data-theme] #prof.acct > h3::before { content:"0" counter(acsec); display:inline-grid; place-items:center; width:26px; height:22px; font:500 10.5px var(--mono); letter-spacing:0; border:1px solid #D5D9DF; background:#FFFFFF; }
  html[data-theme] #prof.acct > h3::after { content:""; flex:1; height:1px; background:#DDE0E5; margin-left:4px; }
  .acct-card { border:1px solid #D5D9DF; border-radius:8px; background:#FFFFFF; padding:16px 18px 10px; margin-bottom:14px; }
  .acct-id b { display:block; font:800 20px/1.2 var(--head); letter-spacing:-.03em; color:#16181D; word-break:break-all; } .acct-id span { display:block; font-size:12px; color:#7A808A; margin:3px 0 12px; }
  .acct-kv { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:8px 0; border-top:1px solid #ECEEF1; font-size:13px; color:#4B515B; }
  .acct-kv b { font:500 13px var(--mono); color:#16181D; } .acct-kv b.ok { color:#2F7A5B; } .acct-kv b.off { color:#B4506B; }
  .acct-card .btn.primary { margin:6px 0 8px; }
  .field2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .field2 .field { margin:6px 0; min-width:0; }
  .acct-sub { font:600 10px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#4B515B; margin:22px 0 8px; }
  html[data-theme] #prof #acct-revoke { margin-top:2px; } html[data-theme] #prof #acct-revoke:disabled { opacity:.55; cursor:default; box-shadow:none; }
  html[data-theme] #prof #acct-export { display:inline-flex; text-decoration:none; }
  .acct-danger { margin-top:18px; border-top:1px dashed #DDE0E5; padding-top:12px; } .acct-danger summary { cursor:pointer; font-size:13px; color:#B4506B; list-style:none; } .acct-danger summary::-webkit-details-marker { display:none; }
  .acct-danger[open] summary { margin-bottom:10px; } html[data-theme] #prof .btn.danger { border-color:#B4506B; color:#B4506B; background:#FFFFFF; } html[data-theme] #prof .btn.danger:hover { background:#B4506B; color:#FFFFFF; }
  html[data-theme] #prof #mcpbox { margin-top:0 !important; padding-top:0 !important; border-top:0 !important; }
  html[data-theme] #prof #pwform { margin-top:0 !important; padding-top:0 !important; border-top:0 !important; }
  @media (max-width: 640px) { .field2 { grid-template-columns:1fr; gap:0; } }
  .acct-tick { display:flex; align-items:flex-start; gap:12px; cursor:pointer; margin:4px 0 8px; } .acct-tick b { display:block; font:700 16px/1.25 var(--head); letter-spacing:-.02em; color:#16181D; } .acct-tick small { display:block; font-size:12.5px; line-height:1.45; color:#6B7280; margin-top:3px; }
  html[data-theme] #prof .acct-tick input { appearance:none; -webkit-appearance:none; width:18px; height:18px; margin:2px 0 0; border:1px solid #D5D9DF; border-radius:2px; background:#FFFFFF; cursor:pointer; flex:0 0 auto; display:inline-grid; place-items:center; }
  html[data-theme] #prof .acct-tick input:checked { background:var(--acc-soft); } html[data-theme] #prof .acct-tick input:checked::after { content:""; width:8px; height:4px; border-left:1.8px solid #16181D; border-bottom:1.8px solid #16181D; transform:translateY(-1px) rotate(-45deg); }
  html[data-theme] #prof #nt-test:disabled { opacity:.5; cursor:default; box-shadow:none; }
  .conv-q { margin:18px 0 8px; padding:11px 14px; border:1px solid #D5D9DF; border-radius:8px; background:#FFFFFF; font-size:14.5px; white-space:pre-wrap; } .conv-q span { display:block; font:500 10.5px var(--mono); color:#9097A1; margin-bottom:4px; }
  .conv-a { padding:0 0 6px 14px; border-left:2px solid #A7E4ED; } .conv-a .meta { font:500 10.5px var(--mono); color:#9097A1; margin-top:8px; }
  html[data-theme] .mgt tr.mgconv:hover td { background:#F4F5F7; }
  .clinks { display:flex; flex-direction:column; gap:6px; } .clink { text-align:left; border:1px solid #D5D9DF; border-radius:8px; background:#FFFFFF; padding:9px 11px; cursor:pointer; font-family:var(--sans); color:#16181D; }
  .clink:hover { border-color:#16181D; background:#FFFFFF; } .clink b { display:block; font:700 15px/1.25 var(--head); letter-spacing:-.02em; } .clink span { display:block; font-size:12px; line-height:1.4; color:#6B7280; margin-top:2px; }
  html[data-theme] #auth .tabs button { padding:9px 4px; font-size:12.5px; }
  .waitok { font-size:14.5px; line-height:1.55; color:#4B515B; border:1px solid #D5D9DF; border-radius:8px; background:#FFFFFF; padding:14px 16px; margin:6px 0 12px; } .waitok b { display:block; font:800 20px/1.2 var(--head); letter-spacing:-.03em; color:#16181D; margin-bottom:4px; }
  html[data-theme] #mg-waitnew .newinvite { margin:14px 16px 0; }
  body.academy #deskbtn, body.philosophy #deskbtn, body.blog #deskbtn, body.manage #deskbtn, body.account #deskbtn { display:inline-block; }   /* the way back to the map, now that the menu no longer lists it */
  /* the positional-awareness doodle (section 06): the routes are drawn toward the open space, then a marker travels the last one */
  .section-spirit--position { width:min(100%, 250px); } .section-spirit--position::before { display:none; }
  .section-spirit--position svg { display:block; width:100%; height:auto; overflow:visible; }
  @keyframes pos-route { 0% { stroke-dashoffset:1; } 30%, 88% { stroke-dashoffset:0; } 100% { stroke-dashoffset:0; opacity:0; } }
  @keyframes pos-open { 0%, 30% { stroke-dashoffset:1; } 55%, 88% { stroke-dashoffset:0; } 100% { stroke-dashoffset:0; opacity:0; } }
  @keyframes pos-dot { 0%, 52% { opacity:0; offset-distance:0%; } 58% { opacity:1; offset-distance:0%; } 82% { opacity:1; offset-distance:100%; } 90%, 100% { opacity:0; offset-distance:100%; } }
  @keyframes pos-breathe { 0%, 100% { opacity:.76; } 50% { opacity:.62; } }
  .section-spirit--position .doodle-route { stroke-dasharray:1; animation:pos-route 6s ease-in-out infinite; }
  .section-spirit--position .doodle-route--two { animation-delay:.25s; }
  .section-spirit--position .doodle-route--open { animation-name:pos-open; animation-delay:0s; }
  .section-spirit--position .doodle-move-dot { transform:none; offset-path:path("M155 134Q190 103 238 112"); offset-rotate:0deg; animation:pos-dot 6s ease-in-out infinite; }
  .section-spirit--position .doodle-washes { animation:pos-breathe 6s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) { .section-spirit--position .doodle-route, .section-spirit--position .doodle-move-dot, .section-spirit--position .doodle-washes { animation:none; } .section-spirit--position .doodle-route { stroke-dasharray:none; } }
  @media (max-width: 760px) { html[data-theme] .compare td:first-child { width:auto; display:block; } }   /* the row label was squeezed to a fifth of the card on phones, one word per line */
  .an-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px 4px; font-size:13px; color:var(--ink-2); } .an-bar b { font:500 15px var(--mono); color:var(--ink); }
  #an-chart { padding:8px 20px 0; } .an-svg { width:100%; height:auto; display:block; } .an-b { fill:var(--acc-mid); } .an-g { stroke:#E5E7EB; stroke-width:1; } .an-t { font:10px var(--mono); fill:#9097A1; }
  .an-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:0 36px; padding:6px 20px 18px; } .an-box { min-width:0; }
  .an-box h4 { font:600 10px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#4B515B; margin:20px 0 6px; } .an-box .mgt { width:100%; table-layout:fixed; min-width:0; } .an-box .mgt td { padding:7px 0; font-size:13px; } .an-box .mgt td.num { width:86px; text-align:right; white-space:nowrap; } .an-box .mgt td:first-child { max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .an-pc { color:#9097A1; font-size:11.5px; margin-left:4px; } .an-none { font-size:13px; color:var(--muted); margin:4px 0; }
  html[data-theme] .wordmark .logo { display:none; }   /* the header carries the word alone, as in the homepage concept; the mark stays as the tab icon and in the closing block */
  /* ===== animation 1 · the hero's light: four soft fields of the palette drifting slowly behind the headline ===== */
  .lp-aurora { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:linear-gradient(105deg, #FFFFFF 0%, #FFFFFF 38%, #F4F5F7 100%); }
  .lp-aurora i { position:absolute; display:block; border-radius:50%; filter:blur(72px); opacity:.55; will-change:transform; }
  .lp-aurora i:nth-child(1) { width:46vw; height:46vw; right:-8vw; top:-14vw; background:#C7CEF8; animation:au-a 22s ease-in-out infinite alternate; }
  .lp-aurora i:nth-child(2) { width:38vw; height:38vw; right:14vw; top:18vw; background:#A7E4ED; opacity:.42; animation:au-b 27s ease-in-out infinite alternate; }
  .lp-aurora i:nth-child(3) { width:34vw; height:34vw; right:-10vw; top:16vw; background:#2B3FD6; opacity:.30; animation:au-c 31s ease-in-out infinite alternate; }
  .lp-aurora i:nth-child(4) { width:26vw; height:26vw; right:30vw; top:-12vw; background:#DCE1FC; opacity:.5; animation:au-b 24s ease-in-out -8s infinite alternate-reverse; }
  .lp-aurora::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,.92) 34%, rgba(255,255,255,0) 68%); }   /* the words stay on white */
  @keyframes au-a { from { transform:translate3d(0, 0, 0) scale(1); } to { transform:translate3d(-9vw, 7vw, 0) scale(1.12); } }
  @keyframes au-b { from { transform:translate3d(0, 0, 0) scale(1.05); } to { transform:translate3d(8vw, -5vw, 0) scale(.92); } }
  @keyframes au-c { from { transform:translate3d(0, 0, 0) scale(.95); } to { transform:translate3d(-7vw, -6vw, 0) scale(1.15); } }
  @media (max-width: 760px) { .lp-aurora i { filter:blur(48px); } .lp-aurora i:nth-child(1) { width:90vw; height:90vw; right:-40vw; top:-30vw; } .lp-aurora i:nth-child(2) { width:70vw; height:70vw; right:-20vw; top:60vw; } .lp-aurora i:nth-child(3) { width:60vw; height:60vw; right:-34vw; top:30vw; } .lp-aurora i:nth-child(4) { display:none; } .lp-aurora::after { background:linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,.88) 55%, rgba(255,255,255,.35) 100%); } }
  /* ===== animation 2 · the page arrives as it is read: sections rise into place, and the odds bars fill when they are reached ===== */
  .rv { opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
  .rv.in { opacity:1; transform:none; }
  .rv .rrow em u { transform-origin:left center; transition:transform 1.1s cubic-bezier(.2, .8, .2, 1) .25s; } .rv:not(.in) .rrow em u { transform:scaleX(0); }   /* grows by scale, not width [2026-10-28] */
  .rv .rrow:nth-child(3) em u { transition-delay:.45s; }
  @media (prefers-reduced-motion: reduce) { .lp-aurora i { animation:none; } .rv { opacity:1; transform:none; transition:none; } .rv:not(.in) .rrow em u { transform:none; } }
  /* the reversion bands' readout: the last bar's mean and bands, in one quiet row */
  .chart-sd { display:flex; flex-wrap:wrap; gap:6px 18px; margin:0 0 10px; font:500 12px var(--sans); color:var(--ink-2); } .chart-sd:empty { display:none; }
  .chart-sd span { display:inline-flex; gap:6px; align-items:baseline; } .chart-sd em { font-style:normal; color:var(--ink-3, #6B7280); } .chart-sd b { font:600 12px var(--mono); color:var(--ink); }
  .chart-mr { display:flex; flex-wrap:wrap; gap:6px 18px; margin:0 0 10px; font:500 12px var(--sans); color:var(--ink-2); } .chart-mr:empty { display:none; }
  /* the CTA readout as a panel, not a run of text [user 2026-10-23: "this is not how we present data"]: the position, the three
     thresholds as a table, the flows as a scenario grid, the vol-control triggers as a small matrix. Same numbers as before. */
  .chart-cta { margin:0 0 14px; border:1px solid var(--line); border-radius:10px; background:var(--bg-2, transparent); font:500 12.5px var(--sans); color:var(--ink-2); } .chart-cta:empty { display:none; }
  .chart-cta .ct-h { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; padding:10px 14px; border-bottom:1px solid var(--line); }
  .chart-cta .ct-h b { font:600 12.5px var(--sans); color:var(--ink); letter-spacing:.01em; } .chart-cta .ct-h span { color:var(--muted); }
  .chart-cta .ct-g { display:grid; grid-template-columns:minmax(200px, .8fr) minmax(300px, 1.1fr) minmax(360px, 1.4fr); }
  .chart-cta .ct-c { padding:12px 14px; min-width:0; } .chart-cta .ct-c + .ct-c { border-left:1px solid var(--line); }
  .chart-cta .ct-g2 { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); border-top:1px solid var(--line); }
  .chart-cta h5 { margin:0 0 8px; font:600 10.5px var(--sans); letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
  .chart-cta .ct-k { margin:0 0 12px; } .chart-cta .ct-k:last-child { margin:0; } .chart-cta .ct-k i { display:block; font-style:normal; color:var(--muted); font-size:11.5px; }
  .chart-cta .ct-k strong { display:block; font:600 17px var(--mono); color:var(--ink); letter-spacing:-.01em; margin:1px 0; } .chart-cta .ct-k strong small { font:500 12px var(--sans); color:var(--ink-2); margin-left:4px; }
  .chart-cta table { width:100%; border-collapse:collapse; } .chart-cta th { text-align:left; font:600 10.5px var(--sans); letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:0 8px 6px 0; white-space:nowrap; }
  .chart-cta td { padding:6px 8px 6px 0; border-top:1px solid var(--line); white-space:nowrap; vertical-align:top; } .chart-cta td.n, .chart-cta th.n { text-align:right; padding-right:0; padding-left:8px; }
  .chart-cta td b { font:600 12.5px var(--mono); color:var(--ink); } .chart-cta td small { display:block; font:500 11px var(--mono); color:var(--muted); margin-top:1px; }
  .chart-cta .ct-sw { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:7px; vertical-align:0; }
  #chart-cta .ct-note { margin:8px 0 0; font:500 11.5px/1.45 var(--sans); color:var(--muted); white-space:normal; }
  .chart-cta .ct-g2 table { width:auto; } .chart-cta .ct-g2 td.n, .chart-cta .ct-g2 th.n { padding-left:36px; }
  @media (max-width: 1100px) { .chart-cta .ct-g { grid-template-columns:1fr 1fr; } .chart-cta .ct-g .ct-c:last-child { grid-column:1 / -1; border-left:0; border-top:1px solid var(--line); } }
  @media (max-width: 700px) { .chart-cta .ct-g, .chart-cta .ct-g2 { grid-template-columns:1fr; } .chart-cta .ct-c + .ct-c { border-left:0; border-top:1px solid var(--line); } .chart-cta .ct-c { overflow-x:auto; } }
  .chart-mr span { display:inline-flex; gap:6px; align-items:baseline; } .chart-mr em { font-style:normal; color:var(--ink-3, #6B7280); } .chart-mr b { font:600 12px var(--mono); color:var(--ink); }
  /* the hero line is two full sentences: sized so each sits on one line on a wide screen, and wraps cleanly on a phone */
  html[data-theme] .lp-hero h1 { font-size:clamp(31px, 4.45vw, 64px); line-height:1.08; max-width:none; }
  html[data-theme] .lp-hero h1 em { display:inline; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
  #landing #catalog .cat ul { display:none; }   /* the front page keeps each reading to its one sentence */
  #landing #catalog .cat:not(.catbundle) .tag { font-size:14px; line-height:1.55; color:var(--ink-2); margin:10px 0 0; }   /* each reading with its one sentence [2026-10-12] */
  #landing #catalog .cat-v { transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
  #landing #catalog .cat-v:hover { transform:translateY(-3px); border-color:#B8C0F2; box-shadow:0 14px 34px rgba(43,63,214,.10) !important; }
  #landing #catalog .cat-art { background:linear-gradient(180deg, #F3F5FE, #FFFFFF); border-bottom:1px solid #E8EAF0; padding:18px 22px 10px; }
  #landing #catalog .cat-art svg { display:block; width:100%; height:auto; }
  #landing #catalog .cat-art .cv-t { font:500 9.5px var(--mono); fill:#687274; letter-spacing:.04em; } #landing #catalog .cat-art .cv-b { font:600 10.5px var(--mono); fill:#2B3FD6; }
  #landing #catalog .cat-v .cb h3::after { display:none; }
  #landing .lp-steps h3, #landing .lp-who h3 { margin-bottom:0; }
  /* the sentence sits under its headline; the character stands alone beside them */
  @media (min-width: 761px) {
    .lp-intro.ill-a, .lp-intro.ill-c { grid-template-columns:minmax(0, 1fr) minmax(170px, 240px); } .lp-intro.ill-c .section-spirit { grid-column:2; grid-row:1; }
    .lp-intro.ill-b { grid-template-columns:minmax(170px, 240px) minmax(0, 1fr); }
  }
  .lp-intro.ill > div > .lp-lead { margin:22px 0 0; max-width:520px; }
  /* ===== pricing: its own page ===== */
  #pricing { display:none; } body.pricing #pricing { display:block; }
  body.pricing { display:flex; grid-template-columns:none; gap:0; margin:0; }   /* an older .pricing grid class shares the name: the page keeps the body's own layout */
  body.pricing main, body.pricing #landing, body.pricing nav.links { display:none; } body.pricing #deskbtn { display:inline-block; }
  html[data-theme] body.pricing { background:var(--page); }
  .pr-wrap { max-width:620px; margin:0 auto; padding:26px 22px 80px; }
  .pr-wrap .lp-eb { margin:26px 0 12px; }
  .pr-wrap h1 { font:800 clamp(30px, 4.4vw, 48px)/1.08 var(--head); letter-spacing:-.04em; color:var(--ink); margin:0 0 12px; }
  .pr-sub { font-size:17px; color:var(--ink-2); margin:0 0 34px; }
  .pr-card { border:1px solid var(--line, #D5D9DF); border-radius:12px; background:var(--bg, #fff); padding:34px; }
  .pr-top { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; padding-bottom:24px; border-bottom:1px solid var(--line-2, #ECEEF1); }
  .pr-top h2 { font:800 26px var(--head); letter-spacing:-.035em; margin:0 0 4px; color:var(--ink); } .pr-top p { margin:0; font-size:13.5px; color:var(--ink-2); }
  .pr-price { font:800 46px/1 var(--head); letter-spacing:-.04em; color:var(--ink); } .pr-price span { font:400 13px var(--mono); letter-spacing:0; color:var(--ink-2); }
  .pr-list { list-style:none; margin:22px 0 28px; padding:0; } .pr-list li { position:relative; padding:9px 0 9px 26px; font-size:15px; color:var(--ink); }
  .pr-list li::before { content:""; position:absolute; left:2px; top:15px; width:11px; height:6px; border-left:2px solid var(--acc, #2B3FD6); border-bottom:2px solid var(--acc, #2B3FD6); transform:rotate(-45deg); }
  .pr-card .btn.big { width:100%; justify-content:center; }
  .pr-note { font-size:12.5px; color:var(--ink-2); margin:18px 0 0; text-align:center; }
  /* pricing card of 2026-10-26: the price line under the price, a benefit line under each item, what comes after the
     button, the button in the accent, and a light-purple frame with a slow sheen and a soft glow */
  /* the about page (2026-10-26): the philosophy page's look at its own address, then its own blocks */
  #about { display:none; } body.about #about { display:block; }
  body.about main, body.about #landing, body.about nav.links { display:none; }
  body.about #sky, body.about .nebula { display:none !important; }
  html[data-theme] body.about { background:radial-gradient(circle at 88% 6%, #cbb1d92b, transparent 32%), radial-gradient(circle at 4% 60%, #b6dce02a, transparent 34%), var(--page); background-attachment:fixed; }
  body.about #bgmark { opacity:.13; } body.about #deskbtn { display:inline-block; }
  .co .co-k { display:block; font:600 11.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#2B3FD6; margin:0 0 -6px; }
  html[data-theme] .co h2.co-h { border-top:0; padding-top:0; margin-top:14px; }
  .co .co-sec { margin-top:72px; padding-top:30px; border-top:1px solid var(--line); }
  .co .co-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin:22px 0 10px; max-width:720px; }
  .co .co-card { border:1px solid var(--line); border-radius:10px; padding:18px 20px; background:var(--bg); }
  .co .co-card b { display:block; font:700 16.5px/1.3 var(--head); letter-spacing:-.02em; color:var(--ink); margin-bottom:6px; }
  .co .co-card span { display:block; font-size:15px; line-height:1.6; color:var(--ink-2); }
  .co .co-commit { list-style:none; margin:22px 0 0; padding:0; max-width:720px; counter-reset:c; }
  html[data-theme] .co .co-commit li { counter-increment:c; position:relative; padding:18px 0 18px 54px; border-top:1px solid var(--line); margin:0; font-size:16px; line-height:1.65; }
  .co .co-commit li::before { content:counter(c, decimal-leading-zero); position:absolute; left:0; top:18px; font:700 15px var(--mono); color:#2B3FD6; }
  .co .co-commit b { display:block; color:var(--ink); font-weight:650; margin-bottom:4px; }
  .co .co-quote { margin:26px 0 8px; font:800 clamp(22px, 2.6vw, 30px)/1.25 var(--head); letter-spacing:-.035em; color:var(--ink); max-width:680px; }
  .co .co-quote em { font-style:normal; color:#2B3FD6; }
  .co .cta .co-alt { display:inline-block; margin-left:18px; font-size:15px; }
  #about-cta { background:#2B3FD6 !important; border-color:#2B3FD6 !important; color:#FFFFFF !important; box-shadow:none !important; }
  #about-cta:hover { background:#2233B8 !important; border-color:#2233B8 !important; }
  @media (max-width:640px) { .co .co-grid { grid-template-columns:minmax(0, 1fr); } .co .cta .co-alt { display:block; margin:14px 0 0; } }
  #pr-terms:empty { display:none; }
  .pr-top .pr-pts { flex-basis:100%; margin:-6px 0 0; font-size:13.5px; color:var(--ink-2); }
  .pr-list li b { display:block; font-weight:600; color:var(--ink); }
  .pr-list li span { display:block; margin-top:2px; font-size:13.5px; line-height:1.5; color:var(--ink-2); }
  .pr-next { margin:12px 0 0; font-size:13px; color:var(--ink-2); text-align:center; }
  #pr-go { background:#2B3FD6 !important; border-color:#2B3FD6 !important; color:#FFFFFF !important; box-shadow:none !important; }
  #pr-go:hover { background:#2233B8 !important; border-color:#2233B8 !important; }
  .pr-card, html[data-theme] .pr-card { position:relative; border-color:transparent; box-shadow:0 0 0 1px rgba(124,139,240,.10), 0 18px 48px -18px rgba(43,63,214,.28), 0 0 28px rgba(124,139,240,.10); }
  .pr-card::before { content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; pointer-events:none;
    background:linear-gradient(115deg, #D5DAFB 0%, #C7CEF8 30%, #7C8BF0 45%, #2B3FD6 50%, #7C8BF0 55%, #C7CEF8 70%, #D5DAFB 100%); background-size:300% 100%;
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
    animation:pr-shine 7s ease-in-out infinite alternate; }
  @keyframes pr-shine { from { background-position:0% 50%; } to { background-position:100% 50%; } }
  @media (prefers-reduced-motion: reduce) { .pr-card::before { animation:none; background-position:50% 50%; } }
  /* an account whose address is not confirmed yet: the map waits behind one card */
  .verify-gate { display:none; max-width:520px; margin:70px auto; padding:34px; border:1px solid var(--line, #D5D9DF); border-radius:12px; background:var(--bg, #fff); text-align:center; }
  .verify-gate h2 { font:800 26px var(--head); letter-spacing:-.035em; margin:0 0 10px; color:var(--ink); } .verify-gate p { font-size:15px; line-height:1.55; color:var(--ink-2); margin:0 0 22px; }
  .vg-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
  body.unverified.desk .verify-gate { display:block; } body.unverified.desk main > *:not(.desk-wrap), body.unverified.desk .desk-wrap > *:not(.desk-main), body.unverified.desk .desk-main > *:not(.verify-gate), body.unverified .fab, body.unverified #dock { display:none !important; }
  /* the logo: the four-block mark left of the word (the brand kit's lockup) */
  html[data-theme] .wordmark { display:inline-flex; align-items:center; gap:8px; }
  html[data-theme] .wordmark .wm-mark { display:block; height:28px; width:28px; flex:none; transition:transform .5s cubic-bezier(.2, .8, .2, 1); }
  html[data-theme] .wordmark:is(:hover, :focus-visible) .wm-mark { transform:rotate(-90deg); }
  @media (prefers-reduced-motion: reduce) { html[data-theme] .wordmark:is(:hover, :focus-visible) .wm-mark { transform:none; } }
  @media (max-width: 640px) { html[data-theme] .wordmark .wm-mark { height:24px; width:24px; } html[data-theme] .wordmark { gap:6px; } }
  /* ===== the owner's editor for the public pages ===== */
  /* the engine explains: the button, the thinking, the reveal */
  .magic { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px; font:600 13.5px var(--sans); color:#fff; border:0; border-radius:999px; padding:9px 16px 9px 13px; cursor:pointer;
    background:linear-gradient(120deg, #2B3FD6 0%, #5468E8 55%, #7E6CEB 100%); box-shadow:0 6px 18px rgba(43,63,214,.26); transition:transform .15s ease, box-shadow .15s ease; }
  .magic svg { width:16px; height:16px; } .magic:hover { transform:translateY(-1px); box-shadow:0 10px 24px rgba(43,63,214,.32); }
  .magic::after { content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-18deg); }
  .magic:hover::after { animation:ex-sheen .9s ease; } @keyframes ex-sheen { to { left:130%; } }
  .explain-sec { display:inline-flex; align-items:center; gap:5px; margin-top:8px; font:600 12px var(--sans); color:#2B3FD6; background:rgba(43,63,214,.07); border:1px solid rgba(43,63,214,.18); border-radius:999px; padding:4px 11px 4px 9px; cursor:pointer; }
  .explain-sec svg { width:13px; height:13px; } .explain-sec:hover { background:rgba(43,63,214,.12); }
  /* top right of the section, level with its title; on a phone it sits under the title instead */
  .sec2-h.has-ex { position:relative; padding-right:190px; } .sec2-h.has-ex .explain-sec { position:absolute; top:-2px; right:0; margin:0; }
  @media (max-width: 640px) { .sec2-h.has-ex { padding-right:0; display:flex; flex-direction:column; } .sec2-h.has-ex .explain-sec { position:static; order:3; align-self:flex-start; margin:-4px 0 12px 12px; } }
  #explain { z-index:30; } .ex-modal { width:min(820px, 100%); max-height:88vh; overflow:auto; padding:22px 26px 26px; }
  .ex-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; } .ex-eb { display:flex; align-items:center; gap:7px; font:600 11px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:#2B3FD6; } .ex-eb svg { width:14px; height:14px; }
  .ex-think { display:flex; flex-direction:column; align-items:center; gap:22px; padding:46px 0 40px; }
  .ex-scan { width:200px; height:90px; overflow:visible; filter:drop-shadow(0 8px 18px rgba(43,63,214,.18)); }
  .ex-scan .ex-curve { stroke-dasharray:200; stroke-dashoffset:200; animation:ex-draw 2.2s cubic-bezier(.45,.05,.3,1) infinite; }
  .ex-scan .ex-area { opacity:0; animation:ex-fill 2.2s ease infinite; }
  .ex-scan .ex-beam { animation:ex-sweep 2.2s cubic-bezier(.45,.05,.3,1) infinite; }
  .ex-scan .ex-ticks line { stroke:#C9CEDA; stroke-width:2; stroke-linecap:round; animation:ex-tick 2.2s ease infinite; }
  .ex-scan .ex-ticks line:nth-child(1) { animation-delay:.38s; } .ex-scan .ex-ticks line:nth-child(2) { animation-delay:.52s; } .ex-scan .ex-ticks line:nth-child(3) { animation-delay:.63s; }
  .ex-scan .ex-ticks line:nth-child(4) { animation-delay:.74s; } .ex-scan .ex-ticks line:nth-child(5) { animation-delay:.88s; }
  @keyframes ex-draw { 0% { stroke-dashoffset:200; } 55%, 80% { stroke-dashoffset:0; } 100% { stroke-dashoffset:-200; } }
  @keyframes ex-fill { 0%, 25% { opacity:0; } 55%, 78% { opacity:1; } 100% { opacity:0; } }
  @keyframes ex-sweep { 0% { transform:translateX(0); } 55% { transform:translateX(160px); } 100% { transform:translateX(160px); opacity:0; } }
  @keyframes ex-tick { 0%, 100% { stroke:#C9CEDA; } 12% { stroke:#2B3FD6; } 40% { stroke:#7E6CEB; } }
  .ex-steps { list-style:none; margin:0; padding:0; display:grid; gap:8px; min-width:280px; } .ex-steps li { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); opacity:.35; transition:opacity .3s ease, color .3s ease; }
  .ex-steps li.on { opacity:1; color:var(--ink); } .ex-steps li.done { opacity:.8; } .ex-steps li b { width:16px; height:16px; border-radius:50%; border:1.5px solid currentColor; display:inline-grid; place-items:center; font-size:10px; flex:none; }
  .ex-steps li.on b { border-color:#2B3FD6; border-top-color:transparent; animation:ex-spin .8s linear infinite; } .ex-steps li.done b { background:#2B3FD6; border-color:#2B3FD6; color:#fff; }
  @keyframes ex-spin { to { transform:rotate(360deg); } }
  .ex-out h2 { font:700 24px/1.2 var(--sans); letter-spacing:-.02em; margin:4px 0 6px; } .ex-out .ex-note { color:var(--muted); font-size:13px; line-height:1.55; margin:0 0 18px; }
  .ex-part { opacity:0; transform:translateY(6px); animation:ex-in .45s ease forwards; padding:16px 0; border-top:1px solid var(--line); } .ex-part h3 { font:650 16px var(--sans); margin:0 0 8px; }
  .ex-part { font-size:14.5px; line-height:1.65; } .ex-part table { font-size:13px; width:100%; border-collapse:collapse; } .ex-part td, .ex-part th { padding:5px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
  @keyframes ex-in { to { opacity:1; transform:none; } }
  .ex-foot { margin-top:14px; font-size:12px; color:var(--muted); }
  .ex-source { margin:6px 0 0; padding-top:14px; border-top:1px solid var(--line); font-size:12px; line-height:1.55; color:var(--muted); } .ex-out h2 + .ex-part { border-top:0; padding-top:6px; }
  @media (prefers-reduced-motion: reduce) { .ex-scan *, .ex-steps li.on b, .magic:hover::after { animation:none; } .ex-scan .ex-curve { stroke-dashoffset:0; } .ex-scan .ex-area { opacity:1; } .ex-part { animation-duration:.01s; } }
  .edm-tabs { display:flex; gap:6px; margin:0 0 14px; } .edm-tabs button { font:600 13px var(--sans); border:1px solid var(--line); background:var(--bg); color:var(--ink-2); border-radius:999px; padding:6px 14px; cursor:pointer; } .edm-tabs button.on { background:var(--ink); color:var(--bg); border-color:var(--ink); }
  .edm-field { padding:12px 0; border-top:1px solid var(--line); } .edm-field label { display:block; font:600 13px var(--sans); color:var(--ink); margin-bottom:6px; }
  .edm-field textarea { width:100%; box-sizing:border-box; font:14px/1.45 var(--sans); border:1px solid var(--line-2); border-radius:8px; padding:8px 10px; resize:vertical; }
  .edm-meta { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--muted); margin-top:5px; } .edm-meta .over { color:#B9506A; font-weight:600; }
  .edm-meta button { font:500 12px var(--sans); background:none; border:0; color:var(--ink-2); text-decoration:underline; cursor:pointer; padding:0; }
  .edm-hist { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:4px 14px; align-items:start; padding:10px 0; border-top:1px solid var(--line); font-size:13px; }
  .edm-hist .w { color:var(--muted); font-size:12px; white-space:nowrap; } .edm-hist .c b { display:block; font-weight:600; color:var(--ink); } .edm-hist .c span { display:block; color:var(--ink-2); overflow-wrap:anywhere; }
  .edm-hist .c del { color:var(--muted); } .edm-rules { margin:14px 0 0; font-size:12px; line-height:1.5; } .edm-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
  .edfab { display:none; position:fixed; left:20px; bottom:22px; z-index:40; font:600 13.5px var(--sans); color:#fff; background:#16181D; border:0; border-radius:999px; padding:11px 18px; cursor:pointer; box-shadow:0 10px 26px rgba(22,24,29,.22); }
  body.can-edit.home:not(.editing) #ed-open, body.can-edit.pricing:not(.editing) #ed-open, body.can-edit.about:not(.editing) #ed-open { display:block; }
  body.can-edit.blog:not(.editing) #ed-pagemeta { display:block; }   /* the blog's titles and descriptions: the page details panel, opened at this page */
  .edbar { display:none; position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:60; align-items:center; gap:10px; background:#fff; border:1px solid #D5D9DF; border-radius:12px; padding:10px 12px 10px 16px; box-shadow:0 14px 40px rgba(22,24,29,.18); font:500 13.5px var(--sans); color:#3D424B; max-width:calc(100vw - 24px); flex-wrap:wrap; }
  body.editing .edbar { display:flex; }
  body.editing [data-edk] { outline:1px dashed rgba(43,63,214,.45); outline-offset:3px; cursor:text; border-radius:2px; min-width:8px; }
  body.editing [data-edk]:hover { outline-color:#2B3FD6; background:rgba(43,63,214,.04); } body.editing [data-edk]:focus { outline:2px solid #2B3FD6; background:rgba(43,63,214,.05); }
  body.editing [data-edk].ed-dirty { outline-style:solid; outline-color:#DA9861; }
  body.editing .rv { opacity:1 !important; transform:none !important; } body.editing .lp-intro h2::after { pointer-events:none; }
  /* the agreement every reader signs before using morphic */
  #terms { z-index:10; background:rgba(255,255,255,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); overflow:auto; }
  #terms .modal { position:relative; width:min(720px, 100%); margin:auto; padding:26px 28px 20px; border:1px solid #D5D9DF; border-radius:6px; background:#FFFFFF; box-shadow:0 30px 70px rgba(48,56,60,.16); color:#16181D; }
  #terms h2 { font:800 26px/1.1 var(--head, var(--sans)); letter-spacing:-.04em; margin:0 0 6px; }
  #terms .sub { font-size:13.5px; line-height:1.5; color:#6B7280; margin:0 0 14px; }
  #terms .tdoc { max-height:min(46vh, 460px); overflow:auto; border:1px solid #D5D9DF; border-radius:8px; padding:14px 18px; font-size:13.5px; line-height:1.55; background:#FCFCFD; }
  #terms .tdoc h1 { font-size:17px; line-height:1.3; margin:0 0 2px; } #terms .tdoc h2 { font:700 14px/1.3 var(--sans); letter-spacing:0; margin:18px 0 6px; }
  #terms .tdoc p { margin:0 0 8px; } #terms .tdoc .lg-meta { color:#6B7280; font-size:12px; }
  #terms .tdoc .lg-key { background:#F4F5F7; border:1px solid #E3E6EA; border-radius:8px; padding:10px 12px; margin:12px 0; }
  #terms .tprog { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12px; color:#6B7280; margin:8px 0 12px; } #terms .tprog a { color:#4B515B; }
  #terms .tprog .done { color:#2F7D5B; font-weight:600; }
  #terms .tchecks { display:grid; gap:8px; margin:0 0 12px; }
  #terms .tchecks label { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.45; cursor:pointer; }
  #terms .tchecks input { width:17px; height:17px; margin:1px 0 0; flex:0 0 auto; accent-color:#16181D; }
  #terms .tchecks label.off { color:#9AA0A8; cursor:not-allowed; }
  #terms .field { display:block; margin:10px 0; } #terms .field span { display:block; font:600 10px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#4B515B; margin-bottom:6px; }
  #terms .field input { width:100%; box-sizing:border-box; background:#FFFFFF; border:1px solid #D5D9DF; border-radius:8px; padding:10px 12px; font:italic 17px Georgia, "Times New Roman", serif; color:#16181D; outline:0; }
  #terms .field input:focus { border-color:#16181D; box-shadow:0 0 0 3px rgba(48,56,60,.10); } #terms .field input:disabled { background:#F4F5F7; }
  #terms .tsigned { font-size:12px; color:#6B7280; margin:-4px 0 6px; }
  #terms .tact { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:12px; }
  #terms .btn.primary { padding:11px 16px; border:1px solid #16181D; border-radius:8px; background:#16181D; color:#FFFFFF; font:600 14px var(--sans); cursor:pointer; }
  #terms .btn.primary:disabled { background:#C9CDD3; border-color:#C9CDD3; cursor:not-allowed; }
  #terms .btn.quiet { font:500 12.5px var(--sans); color:#6B7280; border:0; border-bottom:1px solid #D5D9DF; border-radius:0; padding:2px 0; background:transparent; cursor:pointer; }
  #terms .err { font-size:12.5px; color:#B4506B; margin-top:8px; min-height:16px; }
  .legal-link { color:inherit; text-decoration:underline; text-underline-offset:2px; }
  @media (max-width: 640px) { #terms { padding:10px; align-items:flex-start; } #terms .modal { padding:20px 16px 16px; } #terms h2 { font-size:23px; } #terms .tdoc { max-height:42vh; padding:12px 12px; } }
  /* ===== the watermark on every chart, and the share button ===== */
  .viz::after, .chart-col::after, .mon-chart::after { content:"morphic."; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); font:800 clamp(30px, 5vw, 64px)/1 Inter, sans-serif; letter-spacing:-.045em; color:#16181D; opacity:.045; pointer-events:none; z-index:3; white-space:nowrap; }
  .mon-chart { position:relative; }
  .sharebtn { display:inline-flex; align-items:center; gap:6px; font:500 11.5px var(--sans); border:1px solid var(--line); background:#fff; color:var(--ink-2); border-radius:999px; padding:3px 10px 3px 8px; cursor:pointer; line-height:1.4; }
  .sharebtn:hover { color:var(--ink); border-color:#C9CED6; }
  .sharebtn svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .viz > .sharebtn.float { position:absolute; top:0; right:0; z-index:4; }
  .mon-bar { gap:8px; align-items:center; }
  .sharemenu { position:fixed; z-index:400; min-width:220px; width:260px; max-height:calc(100vh - 16px); overflow:auto; background:#fff; border:1px solid #E4E7EC; border-radius:12px; box-shadow:0 16px 40px rgba(22,24,29,.14); padding:6px; display:none; }
  .sharemenu.on { display:block; }
  .sharemenu .sm-h { padding:8px 10px 6px; font-size:12px; color:#6B7280; }
  .sharemenu button { display:flex; align-items:center; gap:10px; width:100%; border:0; background:transparent; padding:8px 10px; border-radius:8px; font:500 13px var(--sans); color:#16181D; cursor:pointer; text-align:left; }
  .sharemenu button:hover { background:#F3F4F7; }
  .sharemenu button svg { width:16px; height:16px; flex:none; }
  .sharemenu hr { border:0; border-top:1px solid #EEF0F3; margin:5px 4px; }
  .sharemenu .sm-prev { margin:4px 6px 6px; border:1px solid #EEF0F3; border-radius:8px; overflow:hidden; background:#F7F8FA; min-height:60px; display:grid; place-items:center; font-size:11.5px; color:#9AA1AB; }
  .sharemenu .sm-prev img { display:block; width:100%; height:auto; }
  .chart-legend .lr.spot.closed span, .chart-legend .lr.spot.closed b { color:var(--muted); font-weight:500; } .chart-legend .lr.spot.closed i { background:var(--muted) !important; }
  .pr-price .pr-trial { display:block; margin-top:8px; font:600 12px var(--sans); letter-spacing:0; color:#1F7A55; background:#E6F5EE; border-radius:999px; padding:4px 10px; text-align:center; }
  /* ===== the monitor fits the screen: a short header, the chart takes the height that is left, a full-screen switch ===== */
  html[data-theme] .monmodal { padding-top:18px; }
  .mon-h { align-items:center; gap:16px; margin-bottom:14px; padding-bottom:12px; }
  .mon-h .ac-eb { display:none; }
  html[data-theme] .mon-h h2 { font-size:clamp(21px, 2.1vw, 26px); }
  html[data-theme] .mon-h h2::after { display:none; }
  .mon-h p { margin-top:3px; font-size:13px; }
  .mon-spirit { width:58px; margin:0; } .mon-spirit::before { display:none; }
  .mon-h .btn { align-self:center; }
  .mon-acts { display:flex; gap:8px; align-items:center; }
  .mon-max { display:inline-flex; align-items:center; gap:7px; } .mon-max svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .mon-max .mx-in { display:none; } #monpanel.max .mon-max .mx-in { display:inline; } #monpanel.max .mon-max .mx-out { display:none; }
  #monpanel.max { padding:0; }
  html[data-theme] #monpanel.max .monmodal { width:100vw; height:100vh; max-width:none; max-height:none; border:0; border-radius:0; }
  .mon-main { display:flex; flex-direction:column; padding-bottom:12px; } .mon-main > * { flex:none; }
  .mon-about { margin-bottom:10px; } .mon-bar { margin:-36px 0 10px; } .mon-legend { margin-bottom:10px; }
  .mon-main.fill .mon-chart { flex:1 1 0; min-height:300px; display:flex; flex-direction:column; }
  .mon-main.fill .mon-lc { flex:1 1 0; height:auto; min-height:270px; }
  html[data-theme] .mon-main .vol-note { margin-top:12px; }
  @media (max-width: 860px) { .mon-acts .mon-max { display:none; } .mon-bar { margin:0 0 10px; } .mon-main.fill .mon-chart { min-height:340px; } }
  .mon-legend span.mon-asof { border:0; background:transparent; color:var(--muted); padding-left:2px; }
  .mon-legend { gap:6px 6px; } .mon-legend span { padding:3px 9px; font-size:11.5px; } .mon-legend b { font-size:12px; } .mon-legend em { font-size:11px; }

  /* ===== the account page (2026-10-12): a page of its own, a section menu on the left, each section a card ===== */
  html[data-theme] body.account { background:radial-gradient(circle at 92% 0%, #cbb1d926, transparent 30%), radial-gradient(circle at 0% 38%, #b6dce024, transparent 30%), var(--page); background-attachment:fixed; }
  .acctpg { padding-top:22px; padding-bottom:90px; max-width:1120px; }
  .acct-grid { display:grid; grid-template-columns:210px minmax(0, 1fr); gap:44px; align-items:start; margin-top:22px; }
  .acct-nav { position:sticky; top:90px; display:flex; flex-direction:column; gap:2px; }
  .acct-nav button { text-align:left; border:0; border-left:2px solid #E3E6EB; background:transparent; padding:9px 14px; font:500 14px var(--sans); color:var(--ink-2); cursor:pointer; }
  .acct-nav button:hover { color:var(--ink); background:#F4F5F7; } .acct-nav button.on { border-left-color:var(--acc); color:var(--ink); font-weight:600; background:var(--acc-tint); }
  html[data-theme] #prof.acct.acct-body { width:auto; max-width:780px; }
  .acct-sec { scroll-margin-top:96px; margin-bottom:18px; } .acct-sec.acct-card { padding:22px 26px 20px; }
  .acct-sec > h3 { font:700 19px/1.2 var(--head); letter-spacing:-.025em; color:var(--ink); margin:0 0 8px; }
  .acct-ov { display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr); gap:18px; align-items:stretch; } .acct-ov .acct-card { margin:0; height:100%; }
  .acct-lens .acct-sub { margin-top:2px; } .acct-lens .budget { margin:6px 0 10px; }
  #account .btn.wide { width:auto; min-width:220px; } #account .acct-card .btn + .btn, #account .acct-card a.btn + a.btn { margin-left:8px; }
  #account .field2 { gap:14px; } #account form .field { max-width:560px; }
  @media (max-width: 860px) { .acct-grid { grid-template-columns:1fr; gap:14px; } .acct-nav { position:sticky; top:62px; z-index:3; flex-direction:row; overflow-x:auto; gap:6px; padding:8px 0; background:var(--page); scrollbar-width:none; } .acct-nav::-webkit-scrollbar { display:none; }
    .acct-nav button { flex:0 0 auto; border-left:0; border:1px solid #E3E6EB; border-radius:20px; padding:6px 12px; font-size:13px; } .acct-nav button.on { border-color:var(--acc-line); }
    .acct-ov { grid-template-columns:1fr; } .acct-sec.acct-card { padding:18px 16px; } #account .btn.wide { width:100%; } }

  /* ===== drawing on the chart (2026-10-12): a tool strip at the left edge, the chart on the whole screen ===== */
  .chart-col { padding-left:42px; } #odds-readout { left:52px; }
  .dtools { position:absolute; left:0; top:0; width:36px; display:flex; flex-direction:column; align-items:center; gap:1px; padding:4px 0; border:1px solid #E5E7EB; background:#FFFFFF; z-index:4; max-height:100%; overflow-y:auto; scrollbar-width:none; }
  .dtools::-webkit-scrollbar { display:none; }
  .dtools button { width:30px; height:30px; flex:0 0 auto; display:grid; place-items:center; border:0; border-radius:4px; background:transparent; color:#4B515B; cursor:pointer; padding:0; }
  .dtools button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .dtools button:hover { background:#F1F3F6; color:#16181D; } .dtools button.on { background:rgba(43,63,214,.10); color:#2B3FD6; } .dtools button:disabled { opacity:.35; cursor:default; background:transparent; }
  .dtools .dsep { width:22px; height:1px; background:#E5E7EB; margin:4px 0; flex:0 0 auto; }
  .chart-full { display:inline-flex; align-items:center; gap:6px; } .chart-full svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  html[data-theme] #chartcard.full { position:fixed; inset:0; z-index:70; margin:0; max-width:none; width:auto; border-radius:0; border:0; overflow-y:auto; background:var(--bg, #FFFFFF); box-shadow:none; transform:none; }
  html[data-theme] #chartcard.full #pricechart, html[data-theme] #chartcard.full .chart-legend { height:calc(100vh - 170px); min-height:360px; }
  html:has(#chartcard.full), html:has(#chartcard.full) body { overflow:hidden; }
  #chartcard.full .tvrow, #chartcard.full .chart-note { display:none; }
  @media (max-width: 640px) { .chart-col { padding-left:36px; } .dtools { width:32px; } .dtools button { width:28px; height:28px; } .chart-full span { display:none; } }

  /* ===== the explainer film (2026-10-12): plays muted while in view, pauses out of view ===== */
  .lp-film { margin:56px 0 0; }
  .viz .viz-note { font-size:12.5px; line-height:1.55; color:var(--muted); margin:10px 0 0; max-width:860px; }
  .lp-film-box { position:relative; aspect-ratio:16 / 9; border:1px solid #D5D9DF; border-radius:10px; overflow:hidden; background:#F5F6FA; box-shadow:0 24px 60px rgba(48,56,60,.12); }
  .lp-film video { display:block; width:100%; height:100%; object-fit:cover; cursor:pointer; }
  .lp-film-ctl { position:absolute; right:12px; bottom:14px; display:flex; gap:6px; opacity:0; transition:opacity .2s ease; }
  .lp-film-box:hover .lp-film-ctl, .lp-film:not(.playing) .lp-film-ctl, .lp-film-ctl:focus-within { opacity:1; }
  .lp-film-ctl button { width:36px; height:36px; border:0; border-radius:50%; background:rgba(22,24,29,.72); color:#FFFFFF; display:grid; place-items:center; cursor:pointer; padding:0; backdrop-filter:blur(4px); }
  .lp-film-ctl button:hover { background:rgba(22,24,29,.9); } .lp-film-ctl svg { width:17px; height:17px; }
  .lp-film .i-pause { display:none; } .lp-film.playing .i-pause { display:block; } .lp-film.playing .i-play { display:none; }
  .lp-film figcaption { margin-top:12px; font-size:13px; color:var(--muted); }
  @media (max-width: 640px) { .lp-film { margin-top:32px; } .lp-film-ctl { opacity:1; } }

  /* the film in the hero (2026-10-12): text left, film right; stacked on a narrow screen */
  .lp-herobox .lp-film { margin:0; position:relative; z-index:1; }
  .lp-herobox.hero-split { display:grid; grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr); gap:clamp(36px, 4vw, 72px); align-items:center; }
  .lp-herobox.hero-split .lp-hero h1 { font-size:clamp(40px, 4.4vw, 70px); }
  .lp-herobox.hero-split .lp-sub { margin:28px 0 26px; }
  @media (max-width: 980px) { .lp-herobox.hero-split { grid-template-columns:1fr; gap:36px; } .lp-herobox.hero-split .lp-hero h1 { font-size:clamp(36px, 8vw, 56px); } }

  /* the walkthrough of how the levels are built */
  .bwalk { margin:0 0 10px; } .bw-top { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
  .bw-n { font:600 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
  .bw-dots { display:flex; gap:6px; } .bw-dots button { width:9px; height:9px; border-radius:50%; border:1px solid #9AA1AB; background:transparent; padding:0; cursor:pointer; } .bw-dots button.on { background:#2B3FD6; border-color:#2B3FD6; }
  .bw-ctl { display:flex; gap:6px; margin-left:auto; } .bw-ctl .btn { padding:5px 12px; font-size:13px; } .bw-ctl .btn:disabled { opacity:.4; cursor:default; }
  .bw-h { display:block; font:700 16px/1.3 var(--head); letter-spacing:-.02em; color:var(--ink); margin:12px 0 4px; } .bw-txt { font-size:14px; line-height:1.55; color:var(--ink-2); margin:0; max-width:880px; min-height:3.1em; }

  /* ===== the clean front page (2026-10-15) [user: "i like how the massive.com website looks", "no doodles"]: no drawn
     characters, underlines or brushes; a faint grid behind the hero; centred section heads with a blue eyebrow; one
     dark band; flat cards with a facts row; one blue accent for the buttons ===== */
  .section-spirit, .faq-persona, .signature-art, .lp-mid, .lp-ribbon .ribbon-icon { display:none !important; }
  .lp-intro h2::after, html[data-theme] .mon-h h2::after { display:none !important; content:none !important; }
  html[data-theme] .lp-herobox { background:#FFFFFF; position:relative; isolation:isolate; }
  .lp-aurora { display:none !important; }
  .lp-herobox::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(#EDF0F5 1px, transparent 1px), linear-gradient(90deg, #EDF0F5 1px, transparent 1px);
    background-size:128px 128px; background-position:-1px -1px; -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 55%, transparent 96%); mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 55%, transparent 96%); }
  .lp-hero .lp-eyebrow { border:1px solid #E1E6F2; background:#F5F7FD; border-radius:999px; padding:5px 13px 5px 9px; font:500 12.5px var(--sans); letter-spacing:0; text-transform:none; color:#3D424B; }
  .lp-hero .lp-eyebrow::before { width:7px; height:7px; border-radius:50%; background:#2B3FD6; }
  .lp-hero h1 em { background:none !important; color:#2B3FD6; }
  .lp .btn.primary, #hero-cta, #cta-btn { background:#2B3FD6 !important; border-color:#2B3FD6 !important; color:#FFFFFF !important; border-radius:6px; box-shadow:none !important; }
  .lp .btn.primary:hover, #hero-cta:hover, #cta-btn:hover { background:#2233B8 !important; border-color:#2233B8 !important; }
  .lp-ribbon .ribbon-item { gap:0; } .lp-ribbon .ribbon-item::before { content:""; width:6px; height:6px; border-radius:50%; background:#2B3FD6; margin-right:10px; display:inline-block; }
  /* section heads: centred, a small blue eyebrow, a short bold title */
  .lp-sec .lp-intro, .lp-sec .lp-intro.ill { display:block; text-align:center; max-width:820px; margin:0 auto 52px; }
  .lp-sec .lp-intro .lp-lead, .lp-sec .lp-intro.ill > div > .lp-lead { margin:16px auto 0; max-width:640px; }   /* the illustrated intro too: its older margin:0 left the lead off centre */
  .lp-sec .lp-intro > div > h2 { margin-left:auto; margin-right:auto; }   /* the title's 760px box sits in the middle of the 820px head, not at its left edge */
  .lp-sec .lp-eb { color:#2B3FD6; font:600 13px var(--sans); letter-spacing:0; text-transform:none; margin-bottom:12px; } .lp-sec .lp-eb::before { display:none; }
  html[data-theme] .lp-sec .lp-intro h2 { font-size:clamp(28px, 3.1vw, 44px); letter-spacing:-.035em; line-height:1.1; text-align:center; }
  /* cards: flat, hairline, a facts row */
  html[data-theme] .lp .cat, #landing #catalog .cat-v { border-radius:10px; border:1px solid #E3E7EE; box-shadow:none !important; }
  #landing #catalog .cat-v .cb h3::after { display:none; }
  .cat-facts { display:flex; gap:18px; margin:16px 0 2px; padding-top:12px; border-top:1px solid #EEF0F4; } .cat-facts span { display:flex; flex-direction:column; gap:3px; }
  .cat-facts em { font:600 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; font-style:normal; color:#8C939E; } .cat-facts b { font:600 13px var(--sans); color:#16181D; }
  /* the close: a plain, centred call to action */
  .brush-signature { display:block; min-height:0; text-align:center; padding:96px 24px 110px; margin:0 auto; max-width:900px; }
  .brush-signature::before, .brush-signature::after { display:none !important; }
  .brush-signature .lp-ctas { justify-content:center; } .brush-signature .lp-eb { color:#2B3FD6; font:600 13px var(--sans); letter-spacing:0; text-transform:none; } .brush-signature .lp-eb::before { display:none; }
  .lp-vs { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:24px; }
  .lp-sec .lp-intro .lp-lead, .lp-sec .lp-intro p { text-align:center; }
  html[data-theme] .lp .cat h3, .lp .cat h3 { background:none !important; padding-bottom:0; font:700 22px/1.15 var(--head); letter-spacing:-.03em; }
  .brush-signature .signature-intro { text-align:center; margin:0 auto; max-width:760px; }
  .brush-signature .signature-intro h2 { max-width:none; font:800 clamp(32px, 3.6vw, 52px)/1.06 var(--head); letter-spacing:-.045em; }
  .brush-signature .signature-intro p { margin:18px auto 26px; max-width:none; }
  .brush-signature .signature-intro .lp-ctas { justify-content:center; }
  .lp-steps .n { height:auto; width:auto; display:inline-block; padding:0; border:0; margin-bottom:12px; font:600 13px var(--mono); color:#2B3FD6; }
  .lp-steps .n::after { display:none !important; }
  .lp-steps > div { border:1px solid #E3E7EE; border-radius:10px; padding:22px 22px 24px; background:#FFFFFF; }
  @media (max-width: 860px) { .cat-facts { gap:12px; flex-wrap:wrap; } .lp-vs { grid-template-columns:1fr; } }

  /* the menus as panels (2026-10-15) [user: "what about the menu", massive.com]: a heading, a grid of items with dark
     square icons, a title and one line each, and a light footer strip */
  .nv-pop.nv-mega { width:680px; padding:22px 22px 0; border-radius:16px; border:1px solid #E3E7EE; box-shadow:0 24px 60px rgba(22,24,29,.12); overflow:hidden; }
  .nv-pop.nv-mega.nv-mega-s { width:560px; }
  .nv-mega .mh-t { font:600 13px var(--sans); color:#5B616B; margin:0 0 12px 6px; }
  .nv-mega .mg { display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; padding-bottom:16px; }
  .nv-mega .mg a { display:grid; grid-template-columns:44px minmax(0, 1fr); gap:14px; align-items:center; padding:10px; border-radius:10px; }
  .nv-mega .mi { width:44px; height:44px; border-radius:10px; background:#EEF0FB; color:#3445C9; display:grid; place-items:center; transition:background .15s ease; }
  .nv-mega .mi svg { width:21px; height:21px; } .nv-mega .mg a:is(:hover, :focus-visible) .mi { background:#E1E5FA; }
  .nv-mega .mt b { display:block; font:650 15px/1.25 var(--sans); letter-spacing:-.01em; color:#16181D; } .nv-mega .mt span { display:block; font-size:13px; line-height:1.4; color:#6B7280; margin-top:2px; }
  .nv-mega .mf { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; margin:0 -22px; background:#F7F8FA; border-top:1px solid #EEF0F4; }
  .nv-mega .mf a { display:flex; align-items:center; justify-content:center; gap:9px; padding:15px 12px; border-radius:0; font:600 14px var(--sans); color:#16181D; }
  .nv-mega .mf a + a { border-left:1px solid #EEF0F4; } .nv-mega .mf a svg { width:18px; height:18px; color:#5B616B; } .nv-mega .mf a:is(:hover, :focus-visible) { background:#EFF1F5; }
  @media (max-width: 760px) { .nv-pop.nv-mega, .nv-pop.nv-mega.nv-mega-s { width:calc(100vw - 28px); } .nv-mega .mg { grid-template-columns:1fr; } }

  /* the front page composed like massive.com (2026-10-15) [user: "the section look rich and composed. lets make it as
     clean and rich in concise content"]: a dark band with points and an example map, a facts strip, icon cards, a grey
     band for the modules, a split with the pipeline, a check grid, Ask Lens, a two-column FAQ, a dark closing card and
     a four-column footer */
  .mx-dark, .mx-gray { position:relative; }
  .mx-dark { border-image:conic-gradient(#F3F5FA 0 0) fill 0 / / 0 100vmax; padding:104px 0 96px; margin-top:110px; }
  .mx-gray { border-image:conic-gradient(#F7F8FA 0 0) fill 0 / / 0 100vmax; padding:104px 0 104px; margin-top:110px; }
  .mx-gray + .lp-sec { padding-top:104px; } .mx-dark + .lp-sec { padding-top:104px; }
  .mx-split { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); gap:64px; align-items:center; }
  .mx-copy .lp-eb { color:#2B3FD6; font:600 13px var(--sans); letter-spacing:0; text-transform:none; margin-bottom:12px; } .mx-copy .lp-eb::before { display:none; }
  html[data-theme] .lp-sec .mx-copy h2 { font:700 clamp(28px, 2.7vw, 40px)/1.12 var(--head); letter-spacing:-.035em; text-align:left; margin:0; max-width:560px; }
  .mx-copy .lp-lead { text-align:left !important; margin:18px 0 0; max-width:540px; font-size:16.5px; line-height:1.6; }
  .mx-dark .lp-eb { color:#8C9BFF; } html[data-theme] .mx-dark .mx-copy h2 { color:#FFFFFF; } .mx-dark .lp-lead { color:#A7AFBF; }
  .mx-pts { list-style:none; margin:30px 0 0; padding:0; display:grid; gap:20px; max-width:540px; }
  .mx-pts li { display:grid; grid-template-columns:22px minmax(0, 1fr); gap:14px; align-items:start; }
  .mx-pts i svg { width:20px; height:20px; fill:none; stroke:#6F82FF; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; margin-top:2px; }
  .mx-pts p { margin:0; font-size:15px; line-height:1.6; color:#A7AFBF; } .mx-pts b { color:#FFFFFF; font-weight:600; }
  /* the example map, set like a code panel */
  .mx-term { margin:0; background:#151C30; border:1px solid #242C45; border-radius:12px; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.25); }
  /* the readings as buttons that look pressable (2026-10-21) [user: "the tabs at the top are unnoticeable"] */
  .mx-tabs { position:relative; display:flex; align-items:center; gap:8px; padding:12px 14px; background:#121829; border-bottom:1px solid #242C45; }
  .mx-tabs button { position:relative; z-index:1; font:600 13.5px var(--sans); color:#E3E8F5; background:rgba(255,255,255,.04); border:1px solid rgba(125,141,255,.42); padding:8px 16px; border-radius:999px; cursor:pointer;
    transition:background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; }
  .mx-tabs button:hover { color:#FFFFFF; border-color:rgba(140,155,255,.9); box-shadow:0 0 16px rgba(111,130,255,.32); }
  .mx-tabs button.on { background:#2B3FD6; border-color:#5F73FF; color:#FFFFFF; box-shadow:0 0 22px rgba(80,100,255,.55); }
  .mx-tabs button:focus-visible { outline:2px solid #8C9BFF; outline-offset:3px; }
  /* the glowing thumb slides from reading to reading (2026-10-21) [user: "a little more luminous", "a sliding effect from button to button"] */
  .mx-thumb { position:absolute; left:0; top:0; z-index:0; width:0; height:0; border-radius:999px; pointer-events:none; opacity:0;
    background:linear-gradient(180deg, #5468FF, #2B3FD6); box-shadow:0 0 0 1px rgba(150,165,255,.65), 0 0 26px rgba(80,100,255,.65), inset 0 1px 0 rgba(255,255,255,.3);
    transition:transform .5s cubic-bezier(.2, .85, .2, 1), width .5s cubic-bezier(.2, .85, .2, 1), opacity .3s ease; }
  .mx-tabs.slide .mx-thumb { opacity:1; } .mx-tabs.slide button.on { background:transparent; border-color:transparent; box-shadow:none; }
  @media (prefers-reduced-motion: reduce) { .mx-thumb { transition:opacity .3s ease; } }
  .mx-tabs span { margin-left:auto; font:600 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#5D6680; padding-right:4px; }
  .mx-pane { display:none; padding:14px 20px 18px; } .mx-pane.on { display:block; }
  .mx-r { display:grid; grid-template-columns:110px 128px minmax(0, 1fr) 150px; gap:14px; align-items:center; padding:11px 0; border-bottom:1px solid #1E2640; font:13px var(--mono); }
  .mx-r span { color:#8C96AB; } .mx-r b { color:#FFFFFF; font-weight:600; } .mx-r em { font-style:normal; color:#8C9BFF; text-align:right; white-space:nowrap; }
  .mx-r i { display:block; height:4px; border-radius:2px; background:#1E2640; } .mx-r i u { display:block; height:100%; border-radius:2px; background:#6F82FF; }
  .mx-r.k b { color:#C9D0FF; } .mx-r i:empty { background:none; }
  .mx-note { margin:14px 0 0; font-size:13.5px; line-height:1.5; color:#A7AFBF; }
  .mx-stats { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1px; margin-top:80px; background:#242C45; border:1px solid #242C45; border-radius:12px; overflow:hidden; }
  .mx-stats div { background:#151C30; padding:30px 20px; text-align:center; }
  .mx-stats b { display:block; font:700 clamp(22px, 2vw, 30px)/1.1 var(--head); letter-spacing:-.03em; color:#FFFFFF; }
  .mx-stats span { display:block; margin-top:8px; font:500 13px var(--sans); color:#8C96AB; }
  /* the routine: cards with an icon tile on the top edge */
  .lp-who.mx-cards { gap:24px; margin-top:28px; } .lp-who.mx-cards > div { position:relative; border:1px solid #E3E7EE; border-top:1px solid #E3E7EE; border-radius:12px; padding:42px 22px 24px; background:#FFFFFF; }
  .lp-who.mx-cards > div::before { display:none; }
  .mx-ic { position:absolute; top:-20px; left:22px; width:42px; height:42px; border-radius:10px; background:#EEF0FB; display:grid; place-items:center; }
  .mx-ic svg { width:21px; height:21px; fill:none; stroke:#3445C9; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .lp-who.mx-cards .w4::after { display:none; } .lp-who.mx-cards .w4 { color:#2B3FD6; }
  .lp-who.mx-cards h3 { font-size:19px; } .lp-who.mx-cards p { font-size:14.5px; line-height:1.55; }
  /* the modules, in the grey band */
  .mx-pill { display:inline-block !important; border:1px solid #D9DEF7; background:#EEF1FD; border-radius:999px; padding:4px 12px; }
  /* why trust it: the copy beside the pipeline, then the checks */
  .mx-more { display:inline-flex; gap:6px; margin-top:22px; font:600 15px var(--sans); color:#16181D; text-decoration:none; } .mx-more:hover { color:#2B3FD6; }
  .mx-pipe { margin:0 auto; width:100%; max-width:440px; display:grid; justify-items:center; }
  .mx-pipe > div { width:100%; border-radius:12px; text-align:center; }
  .pp-src { border:1px solid #D5DAE3; background:#FFFFFF; padding:16px 16px 18px; box-shadow:0 1px 2px rgba(22,24,29,.04); }
  .pp-src em { display:block; font:600 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; font-style:normal; color:#6B7280; margin-bottom:12px; }
  .pp-src div { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; } .pp-src span { border:1px solid #E3E7EE; border-radius:8px; padding:10px 6px; font:600 13px var(--sans); color:#16181D; background:#FFFFFF; }
  .pp-wire { display:block; width:2px; height:52px; background:repeating-linear-gradient(#2B3FD6 0 6px, transparent 6px 12px); position:relative; }
  .pp-wire::before, .pp-wire::after { content:""; position:absolute; left:50%; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:#2B3FD6; } .pp-wire::before { top:-4px; } .pp-wire::after { bottom:-4px; opacity:.5; }
  .pp-eng { background:linear-gradient(160deg, #3D52F0, #2233B8); color:#FFFFFF; padding:24px 20px 22px; box-shadow:0 24px 48px rgba(43,63,214,.28); }
  .pp-ic { width:46px; height:46px; margin:0 auto 12px; border-radius:11px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); display:grid; place-items:center; }
  .pp-ic svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .pp-eng b, .pp-out b { display:block; font:700 18px var(--head); letter-spacing:-.02em; } .pp-eng span, .pp-out span { display:block; margin-top:4px; font-size:13.5px; opacity:.85; }
  .pp-eng em { display:inline-flex; align-items:center; gap:7px; margin-top:14px; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.14); font:500 12.5px var(--sans); font-style:normal; }
  .pp-eng em::before { content:""; width:7px; height:7px; border-radius:50%; background:#5FE0A6; }
  .pp-out { border:1.5px dashed #C9CFDA; background:#FAFBFC; padding:20px; color:#16181D; } .pp-out .pp-ic { background:#F0F2F6; border-color:#E3E7EE; color:#5B616B; } .pp-out span { color:#6B7280; opacity:1; }
  .mx-checks { display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 2fr); gap:56px; margin-top:110px; padding-top:72px; border-top:1px solid #EEF0F4; }
  .mx-ch-h .lp-eb { color:#2B3FD6; font:600 13px var(--sans); letter-spacing:0; text-transform:none; margin-bottom:10px; } .mx-ch-h .lp-eb::before { display:none; }
  .mx-ch-h h3 { font:700 clamp(24px, 2.2vw, 32px)/1.15 var(--head); letter-spacing:-.035em; margin:0; color:#16181D; } .mx-ch-h p { margin:14px 0 0; font-size:15.5px; line-height:1.6; color:#5B616B; }
  .mx-ch-g { display:grid; grid-template-columns:1fr 1fr; gap:34px 40px; }
  .mx-ch-g > div { display:grid; grid-template-columns:24px minmax(0, 1fr); column-gap:14px; } .mx-ch-g i { grid-row:span 2; }
  .mx-ch-g i svg { width:20px; height:20px; fill:none; stroke:#3445C9; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; margin-top:2px; }
  .mx-ch-g h4 { margin:0 0 6px; font:650 16px var(--sans); color:#16181D; } .mx-ch-g p { margin:0; font-size:14.5px; line-height:1.6; color:#5B616B; }
  /* Ask Lens */
  .mx-chat { margin:0 auto; max-width:760px; background:#151C30; border:1px solid #242C45; border-radius:12px; overflow:hidden; text-align:left; box-shadow:0 24px 50px rgba(14,20,36,.18); }
  .mx-chat-h { display:flex; align-items:center; gap:7px; padding:12px 16px; background:#121829; border-bottom:1px solid #242C45; }
  .mx-chat-h i { width:10px; height:10px; border-radius:50%; background:#E0646F; } .mx-chat-h i:nth-child(2) { background:#E5B451; } .mx-chat-h i:nth-child(3) { background:#5FBF7A; }
  .mx-chat-h span { margin-left:10px; font:500 12px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#8C96AB; } .mx-chat-h em { margin-left:auto; font:600 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; font-style:normal; color:#7C86A0; }
  .mx-chat p { margin:0; padding:16px 20px; display:grid; grid-template-columns:48px minmax(0, 1fr); gap:10px; font:14px/1.6 var(--mono); }
  .mx-chat p span { font-size:12px; color:#5D6680; padding-top:1px; } .mx-chat .q { color:#FFFFFF; } .mx-chat .q span { color:#5FBF9A; } .mx-chat .a { color:#C3CADA; border-top:1px solid #1E2640; } .mx-chat .a span { color:#8C9BFF; }
  .mx-three { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:36px; max-width:900px; margin:52px auto 0; }
  .mx-three h3 { margin:0 0 8px; font:650 16px var(--sans); color:#16181D; } .mx-three p { margin:0; font-size:14.5px; line-height:1.6; color:#5B616B; }
  /* questions: the heading beside the answers */
  #landing .mx-faq { border-top:0; } .mx-faq { display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 2fr); gap:56px; align-items:start; }
  .mx-faq-h .lp-eb { color:#2B3FD6; font:600 13px var(--sans); letter-spacing:0; text-transform:none; margin-bottom:10px; } .mx-faq-h .lp-eb::before { display:none; }
  html[data-theme] .lp-sec .mx-faq-h h2 { font:700 clamp(26px, 2.4vw, 36px)/1.12 var(--head); letter-spacing:-.035em; text-align:left; margin:0; }
  .mx-faq-h .lp-lead { text-align:left !important; margin:14px 0 0; font-size:15.5px; } .mx-faq .faq { margin:0; max-width:none; }
  /* the closing card */
  .mx-cta { width:min(1160px, calc(100% - 48px)); margin:110px auto 0; padding:0; }
  .mx-cta-in { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, .95fr); gap:32px; align-items:center; background:radial-gradient(120% 140% at 85% 110%, #27306A 0%, #0E1424 55%); border-radius:16px; padding:56px 0 56px 64px; overflow:hidden; box-shadow:0 30px 60px rgba(14,20,36,.22); }
  html[data-theme] .mx-cta h2 { font:800 clamp(28px, 2.9vw, 42px)/1.08 var(--head); letter-spacing:-.04em; color:#FFFFFF; margin:0; text-align:left; }
  .mx-cta p { color:#A7AFBF; font-size:16px; line-height:1.6; margin:16px 0 26px; max-width:440px; } .mx-cta .lp-ctas { justify-content:flex-start; align-items:center; gap:22px; }
  .mx-cta .mx-more { margin:0; color:#FFFFFF; } .mx-cta .mx-more:hover { color:#C9D0FF; } .mx-cta-art { width:100%; height:auto; display:block; }
  /* the footer */
  #landing > footer.mx-foot { width:min(1160px, calc(100% - 48px)); max-width:none; margin:96px auto 0; padding:64px 0 40px; border-top:1px solid #EEF0F4; text-align:left; font-size:14px; color:#5B616B; background:none; }
  .mf-top { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2.2fr); gap:48px; }
  .mf-wm { font:800 24px var(--head); letter-spacing:-.04em; color:#16181D; text-decoration:none; } .mf-wm i { font-style:normal; color:#2B3FD6; }
  .mf-brand p { margin:12px 0 0; max-width:260px; line-height:1.55; }
  /* morphic elsewhere: small monochrome marks under the tagline (Simple Icons, CC0) [2026-10-22] */
  .mf-social { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
  .mf-social a { display:inline-grid; place-items:center; width:34px; height:34px; border:1px solid #E3E6EB; border-radius:50%; color:#5B616B; text-decoration:none; transition:color .15s, border-color .15s; }
  .mf-social a:hover, .mf-social a:focus-visible { color:#2B3FD6; border-color:#2B3FD6; }
  .mf-social svg { width:15px; height:15px; fill:currentColor; }
  .mf-cols { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px; }
  .mf-cols h3 { margin:0 0 14px; font:650 14px var(--sans); color:#16181D; } .mf-cols a { display:block; margin:0 0 10px; color:#5B616B; text-decoration:none; } .mf-cols a:hover { color:#2B3FD6; }
  .mf-bot { display:flex; justify-content:space-between; align-items:flex-start; gap:32px; margin-top:52px; padding-top:24px; border-top:1px solid #EEF0F4; font-size:12.5px; color:#6B7280; } .mf-bot p { margin:0; max-width:720px; line-height:1.55; } .mf-bot span { white-space:nowrap; }
  @media (max-width: 960px) {
    .mx-split, .mx-checks, .mx-faq, .mf-top { grid-template-columns:1fr; gap:40px; } .mx-stats { grid-template-columns:repeat(2, minmax(0, 1fr)); margin-top:56px; }
    .mx-cta-in { grid-template-columns:1fr; padding:44px 28px 0; } .mx-cta-art { margin:0 -28px 0 0; width:calc(100% + 28px); }
    .mx-three { grid-template-columns:1fr; gap:22px; } .lp-who.mx-cards { gap:34px 18px; }
  }
  @media (max-width: 860px) { .mx-gray { margin-top:72px; padding:64px 0; } .mx-dark { margin-top:72px; padding:64px 0; } .mx-gray + .lp-sec { padding-top:64px; } .mx-dark + .lp-sec { padding-top:64px; } .mx-checks { margin-top:64px; padding-top:48px; } .mx-cta, #landing > footer.mx-foot { width:calc(100% - 32px); } .mx-cta { margin-top:72px; } }
  @media (max-width: 620px) {
    .mx-r { grid-template-columns:96px minmax(0, 1fr) auto; } .mx-r i { display:none; } .mx-r em { white-space:normal; font-size:12px; }
    .mx-ch-g, .mf-cols { grid-template-columns:1fr 1fr; } .mx-tabs { gap:6px; padding:10px; } .mx-tabs button { padding:7px 11px; font-size:12px; } .mx-tabs span { display:none; } .mf-bot { flex-direction:column; gap:12px; }
    .pp-src div { grid-template-columns:1fr; }
  }
  /* the GEX tool mock (2026-10-15) [user: "create a mock up of them and show why its so impossible to understand"] */
  .gx-mock { margin:4px 0 14px; } .gx-mock svg { display:block; width:100%; height:auto; border-radius:10px; box-shadow:0 18px 40px rgba(14,20,36,.18); }
  .gx-read { display:block; width:100%; height:auto; margin:6px 0 18px; }
  .gx-q { list-style:none; counter-reset:gq; margin:0 0 14px; padding:0; display:grid; gap:9px; }
  .gx-q li { counter-increment:gq; display:grid; grid-template-columns:22px minmax(0, 1fr); gap:10px; align-items:start; font-size:14px; line-height:1.45; color:var(--ink); }
  .gx-q li::before { content:counter(gq); width:20px; height:20px; border-radius:50%; background:#2B3FD6; color:#FFFFFF; font:700 11px/20px var(--sans); text-align:center; }
  /* "How a map is made" (2026-10-20) [user: the twelve steps "exactly", "no tons of cards, make it video"]: a captioned film of the steps; the
     steps also stand as text, out of sight, for readers of the page's words (screen readers, search engines) */
  #map-made .mm-intro { justify-content:center; margin-bottom:0; } #map-made .mm-intro h2 { margin:0; }
  .mm-text { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  /* the band made light (2026-10-15) [user: the white to dark blue was "too contrasty"; picked the light band, C]: only the example map stays dark */
  .mx-dark .lp-eb { color:#2B3FD6; } html[data-theme] .mx-dark .mx-copy h2 { color:#16181D; } .mx-dark .lp-lead, .mx-dark .mx-pts p { color:#5B616B; } .mx-dark .mx-pts b { color:#16181D; } .mx-dark .mx-pts i svg { stroke:#3445C9; }
  .mx-dark .mx-stats { background:#E3E7EE; border-color:#E3E7EE; } .mx-dark .mx-stats div { background:#FFFFFF; } .mx-dark .mx-stats b { color:#16181D; } .mx-dark .mx-stats span { color:#6B7280; }
  /* the film as part of the page (2026-10-15) [user: "remove the frame line. make it look like its part of the background"]:
     no border, corners or shadow; the film is multiplied onto the hero so the grid runs through its light ground, and its
     edges are feathered so the ground fades out instead of ending in a line */
  .lp-herobox .lp-film { z-index:auto; }
  .lp-film-box { border:0; border-radius:0; box-shadow:none; background:transparent; overflow:visible; }
  .lp-film video { mix-blend-mode:multiply;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%, #000 94%, transparent 100%);
    -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%, #000 94%, transparent 100%); mask-composite:intersect; }
  .lp-film video:fullscreen, .lp-film-box:fullscreen video { -webkit-mask-image:none; mask-image:none; mix-blend-mode:normal; }
  .lp-film figcaption { margin-top:4px; }
  .lp-note { margin:14px 0 0; font-size:13px; color:#6B7280; }
  /* hero copy of 2026-10-26: a one-line tagline between the headline and the grey lead, in the headline's ink */
  .lp-hero .lp-tag { margin:24px 0 0; max-width:640px; font-size:clamp(19px, 1.6vw, 22px); line-height:1.4; font-weight:500; letter-spacing:-.015em; color:#16181D; }
  .lp-hero .lp-tag + .lp-sub { margin-top:14px; }
  /* the two marked words in the tagline: an accent line draws itself under each, the second after the first */
  .lp-hero .lp-tag .lp-mark { font-style:normal; position:relative; white-space:nowrap; }
  .lp-hero .lp-tag .lp-mark::after { content:""; position:absolute; left:0; right:0; bottom:-.12em; height:.11em; min-height:2px; border-radius:2px; background:#2B3FD6; transform:scaleX(0); transform-origin:left center; animation:lp-mark-draw .7s cubic-bezier(.65,0,.35,1) .5s forwards; }
  .lp-hero .lp-tag .lp-mark:last-of-type::after { animation-delay:1.05s; }
  @keyframes lp-mark-draw { to { transform:scaleX(1); } }
  @media (prefers-reduced-motion: reduce) { .lp-hero .lp-tag .lp-mark::after { animation:none; transform:none; } }
  /* the headline's turning word: it slides up and out, the next one rises in; its box holds the longest word's width,
     so the headline never reflows as the word changes */
  .lp-hero h1 em.rot, html[data-theme] .lp-hero h1 em.rot { display:inline-block; text-align:left; white-space:nowrap; transition:transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s ease; will-change:transform, opacity; }
  .lp-hero h1 em.rot.rot-out { transform:translateY(-.32em); opacity:0; }
  .lp-hero h1 em.rot.rot-in { transform:translateY(.32em); opacity:0; transition:none; }
  /* "Know the" and the longest word (9.2 em) always share the first line: the headline breaks only at its own line
     breaks, and gives up a few points of size where its column is too narrow, with about 5% to spare for font rendering */
  .lp-herobox.hero-split .lp-hero { container-type:inline-size; }
  .lp-herobox.hero-split .lp-hero h1 { font-size:min(clamp(40px, 4.4vw, 70px), 10.3cqi); white-space:nowrap; }
  @media (max-width: 980px) { .lp-herobox.hero-split .lp-hero h1 { font-size:min(clamp(36px, 8vw, 56px), 10.3cqi); } }
  .tempo-track .tt-note { margin:2px 0 8px; font-size:12.5px; line-height:1.5; color:var(--muted); max-width:820px; }
  .tempo-live .lt-row { display:grid; grid-template-columns:minmax(11em, 15em) 7.5em minmax(0, 1fr); gap:10px; align-items:baseline; padding:7px 0; border-top:1px solid var(--line); }
  .tempo-live .lt-k { color:var(--ink); font-weight:600; display:flex; align-items:center; gap:7px; } .tempo-live .lt-k i { width:9px; height:9px; border-radius:2px; flex:none; opacity:.75; }
  .tempo-live .lt-n { font-variant-numeric:tabular-nums; color:var(--ink); text-align:right; } .tempo-live .lt-w { color:var(--muted); }
  .tempo-live .lt-weak .lt-k, .tempo-live .lt-weak .lt-n { color:var(--muted); font-weight:500; } .tempo-live .lt-foot { margin-top:8px; font-size:11.5px; }
  .tempo-live .lt-v { font-style:normal; font-weight:600; font-size:11px; padding:2px 7px; border-radius:999px; white-space:nowrap; background:color-mix(in srgb, var(--ink) 7%, transparent); color:var(--ink-2); }
  .tempo-live .lt-ok { background:color-mix(in srgb, var(--viz-1) 14%, transparent); color:var(--viz-1); } .tempo-live .lt-no { background:color-mix(in srgb, var(--viz-2) 16%, transparent); color:var(--viz-2); }
  @media (max-width:640px) { .tempo-live .lt-row { grid-template-columns:minmax(0, 1fr) auto; } .tempo-live .lt-w { grid-column:1 / -1; } }
  .tempo-track .tt-vd { font-style:normal; font-weight:600; font-size:11px; padding:2px 7px; border-radius:999px; margin-right:8px; white-space:nowrap; } .tempo-track .vd-ab { color:#2B3FD6; background:#EEF1FD; } .tempo-track .vd-ch { color:#B4572E; background:#FBEEE6; }
  /* the analytics section, cookie metrics and readers (2026-10-20) */
  #an-deep { padding:0 20px 18px; } #an-deep .an-grid { padding:6px 0 0; }
  .an-sect { margin-top:22px; border-top:1px solid var(--line); padding-top:4px; } .an-sect h4 { font:600 10px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#4B515B; margin:18px 0 6px; }
  .an-note { font-size:13px; color:var(--ink-2); margin:0 0 12px; } .an-note b { font-weight:600; color:var(--ink); }
  .an-ks { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin:0 0 12px; }
  .an-k { border:1px solid var(--line); border-radius:10px; padding:12px 14px; } .an-k b { display:block; font:600 20px var(--sans); letter-spacing:-.02em; color:var(--ink); } .an-k span { font-size:12px; color:var(--muted); }
  .an-r { fill:#55AFBD; } .an-legend { display:flex; gap:16px; font-size:12px; color:var(--muted); margin:2px 0 4px; } .an-legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px; }
  .an-legend i.an-b { background:var(--acc-mid); } .an-legend i.an-r { background:#55AFBD; }
  .an-w th { font:600 10px var(--sans); letter-spacing:.06em; text-transform:uppercase; color:#8C939E; text-align:right; padding:4px 6px; } .an-w th:first-child { text-align:left; }
  .an-w td { padding:5px 6px; } .an-sub { display:block; font-size:11px; color:var(--muted); }
  .an-heat { background:rgba(99,115,230,calc(var(--h) * .45)); }
  .an-box.an-wide { grid-column:1 / -1; } .an-box .mgt.an-w { table-layout:auto; } .an-w td.who { overflow-wrap:anywhere; }
  /* the menu on phones and tablets (2026-10-20) */
  .mnav-btn { display:none; width:40px; height:40px; border:1px solid #E3E7EE; border-radius:10px; background:#FFFFFF; color:#16181D; place-items:center; cursor:pointer; padding:0; margin-left:6px; }
  .mnav-btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; } .mnav-btn .i-close { display:none; }
  .mnav-btn.on .i-open { display:none; } .mnav-btn.on .i-close { display:block; }
  @media (max-width: 1180px) { body:not(.desk):not(.manage) .mnav-btn { display:grid; } }
  /* signed in on a phone [2026-10-26]: "Open morphic" is in the menu, so the header drops its button and the menu button
     stays on screen; the smallest phones get a narrower side margin */
  @media (max-width: 560px) { body:not(.desk):not(.manage) header #deskbtn { display:none !important; } }
  @media (max-width: 380px) { html[data-theme] body:not(.desk):not(.manage) header, body:not(.desk):not(.manage) header { padding-left:14px; padding-right:14px; } }
  @media (max-width: 520px) { body:not(.desk):not(.manage) #anon .ctasplit { display:none; } }   /* the menu carries Sign in and Get access on phones */
  .mnav { position:fixed; left:0; right:0; top:var(--mnav-top, 60px); bottom:0; z-index:40; background:rgba(22,24,29,.18); }
  .mnav[hidden] { display:none; }
  .mnav-in { background:#FFFFFF; border-bottom:1px solid #E3E7EE; box-shadow:0 24px 50px rgba(22,24,29,.14); max-height:100%; overflow:auto; padding:10px 16px 18px; }
  .mn-g { padding:10px 0 6px; border-bottom:1px solid #EEF0F4; } .mn-h { font:600 11px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:#8C939E; margin:4px 6px 6px; }
  .mnav-in .mg, .mnav-in a:not(.mn-l):not(.mn-f):not(.btn) { display:grid; grid-template-columns:40px minmax(0, 1fr); gap:12px; align-items:center; padding:9px 6px; border-radius:10px; text-decoration:none; color:#16181D; }
  .mnav-in .mi { width:40px; height:40px; border-radius:10px; background:#EEF0FB; color:#3445C9; display:grid; place-items:center; } .mnav-in .mi svg { width:20px; height:20px; }
  .mnav-in .mt b { display:block; font:650 15px/1.25 var(--sans); color:#16181D; } .mnav-in .mt span { display:block; font-size:13px; line-height:1.4; color:#6B7280; margin-top:1px; }
  .mnav-in a.mn-f { display:flex; align-items:center; gap:8px; padding:10px 6px; font:600 14px var(--sans); color:#16181D; text-decoration:none; } .mnav-in a.mn-f svg { width:18px; height:18px; color:#5B616B; }
  .mnav-in a.mn-l { display:block; padding:14px 6px; font:650 16px var(--sans); color:#16181D; text-decoration:none; border-bottom:1px solid #EEF0F4; }
  .mn-acts { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:16px 2px 4px; } .mn-acts .btn { justify-content:center; text-align:center; padding:12px; font-size:15px; }
  #mnav .mn-acts .btn.primary { background:#2B3FD6; border-color:#2B3FD6; color:#FFFFFF; }
  body.mnav-open { overflow:hidden; }
  /* embed mode (2026-10-22): APP2's reading dock frames this page and shows one section at a time, chart on the left and the
     takeaways on the right; everything else is hidden. Only inside a frame, only with ?embed=1. */
  html.embed body > *:not(main):not(.desk-main):not(#viztip):not(#sharemenu):not(#toast) { display:none !important; }   /* the share menu and its toast stay: Share works inside APP2's dock [user 2026-10-23: "share doesn't work on app2"] */
  html.embed header, html.embed #gac, html.embed .fab, html.embed .sstrip, html.embed .mod.chartcard, html.embed #mnav, html.embed footer { display:none !important; }
  html.embed body, html.embed .desk-main { background:var(--embed-bg, var(--bg)) !important; padding:0 !important; margin:0 !important; }
  html.embed .desk-main > :not(.mods) { display:none !important; } html.embed .mods { display:block !important; } html.embed .mod { border:0 !important; box-shadow:none !important; background:transparent !important; margin:0 !important; }
  html.embed .mod > :not(.mb), html.embed .mb > :not(.sec2) { display:none !important; } html.embed .mb { padding:0 !important; }
  html.embed .sec2 { display:none !important; }
  html.embed .sec2.embed-on { display:grid !important; grid-template-columns:minmax(0, 1.45fr) minmax(300px, 1fr); gap:14px 30px; padding:18px 22px 28px !important; margin:0 !important; border:0 !important; align-items:start; }
  html.embed .sec2.embed-on > .sec2-h { display:none !important; }
  html.embed .sec2.embed-on > .ins { grid-column:2; grid-row:1 / span 6; display:flex !important; flex-direction:column; gap:10px; margin:0 !important; overflow:visible !important; padding:0 !important; }
  html.embed .sec2.embed-on > .ins > * { flex:none !important; }
  html.embed .sec2.embed-on > :not(.sec2-h):not(.ins) { grid-column:1; min-width:0; }
  html.embed[data-theme="dark"] { --embed-bg:#0E0F13; }
  /* no yellow in the terminal's dock [user 2026-10-22: "change the other yellows too"]: the positioning odds in silver, the third card strip in rose */
  html.embed { --viz-2:#4A5366 !important; } html.embed[data-theme="dark"] { --viz-2:#D5DAE6 !important; }
  html.embed[data-theme] .mod .in:nth-child(4n+3)::before { background:#E8798F !important; }
  /* the application on phones (2026-10-22) [user: "now let's fix the app on mobile"]: the day's numbers as a grid instead of a
     strip running off the screen, each section's cards as a row to swipe instead of a column to scroll, the chart wide (no
     drawing column, the reading chips on one swipe row, the level list capped), Ask Lens a round button that does not cover text */
  @media (max-width: 640px) {
    html[data-theme] body.desk .sstrip { display:grid; grid-template-columns:1fr 1fr; overflow:visible; }
    html[data-theme] body.desk .sstrip .c { padding:10px 12px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); white-space:normal; min-width:0; }
    html[data-theme] body.desk .sstrip .c:nth-child(2n + 1) { border-right:1px solid var(--line); } html[data-theme] body.desk .sstrip .c:nth-child(2n) { border-right:0; }
    html[data-theme] body.desk .sstrip .c.sym { grid-column:1 / -1; border-right:0; } html[data-theme] body.desk .sstrip .c.sym ~ .c:nth-child(2n) { border-right:1px solid var(--line); } html[data-theme] body.desk .sstrip .c.sym ~ .c:nth-child(2n + 1) { border-right:0; }
    html[data-theme] body.desk .sstrip .c:last-child { grid-column:auto; }
    html[data-theme] body.desk .sstrip small { display:block; margin:2px 0 0; white-space:normal; }
    html[data-theme] body.desk .mod .ins { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px; margin:0 -16px 14px; padding:0 16px 6px; scrollbar-width:none; overscroll-behavior-x:contain; }
    html[data-theme] body.desk .mod .ins::-webkit-scrollbar { display:none; }
    html[data-theme] body.desk .mod .ins > * { flex:0 0 80%; scroll-snap-align:start; min-width:0; }
    html[data-theme] body.desk .dtools { display:none; } html[data-theme] body.desk .chart-col { padding-left:0; } html[data-theme] body.desk #odds-readout { left:8px; }
    html[data-theme] body.desk .chart-groups { flex-wrap:nowrap; overflow-x:auto; margin:0 -14px 10px; padding:0 14px 4px; scrollbar-width:none; } .chart-groups::-webkit-scrollbar { display:none; }
    html[data-theme] body.desk .chart-groups button { flex:0 0 auto; }
    html[data-theme] body.desk .chart-legend { max-height:196px; overflow-y:auto; }
    html[data-theme] body.desk .fab { width:52px; height:52px; padding:0; border-radius:50%; justify-content:center; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); }
    html[data-theme] body.desk .fab span { display:none; }
    /* the odds table: a level and its price on one line, its two chances side by side under it [2026-10-22: "tighten the odds table"] */
    html[data-theme] .olh, html[data-theme] .ol { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:6px 10px; }
    html[data-theme] .olh span:nth-child(-n + 2) { display:none; }
    html[data-theme] .ol { padding:10px 0; } html[data-theme] .ol .nm { min-width:0; } html[data-theme] .ol .pr { text-align:right; font-size:15px; }
    html[data-theme] .ol .nm b { display:inline; font-size:15.5px; margin-right:6px; } html[data-theme] .ol .nm i { display:inline; font-size:11.5px; }
    /* the time-at-price table: denser rows, a shorter window that opens on the point of control [2026-10-22: "the tpo table too"] */
    .tpo { max-height:340px; font-size:11px; } .tpo .tr { grid-template-columns:44px 5px minmax(0, 1fr) 22px; gap:6px; padding:1px 8px; } .tpo .tl { letter-spacing:.2em; } .tpo .tib { height:11px; }
  }
  /* phones (2026-10-22) [user: "the mobile experience is not good. its very not good actually"]: one alignment, tighter rhythm,
     single-column grids, films edge to edge, the heads full width, the header on the content's margin, the menu's actions always in reach */
  @media (max-width: 760px) {
    #landing .lp-sec h2, #landing .lp-intro, #landing .lp-intro .lp-lead, #landing .lp-intro .lp-eb, #landing .lp-sec > .lp-eb { text-align:left; }
    #landing .lp-intro > div, #landing .lp-lead { margin-left:0; margin-right:0; }
    #landing .lp-sec { padding-top:56px; } #landing .mx-dark, #landing .mx-gray { margin-top:56px; padding-top:52px; padding-bottom:52px; }
    #landing .lp-intro { margin-bottom:28px; }
    .mx-ch-g { grid-template-columns:1fr !important; gap:20px; } .mx-checks { margin-top:48px; padding-top:36px; }
    #landing .lp-film { margin-left:-22px; margin-right:-22px; }
    #landing .lp-film video { -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 6%, #000 95%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 6%, #000 95%, transparent 100%); }
    #landing .lp-film figcaption { padding:0 22px; }
    .philo-head, .ac-head, .ac-hero .ac-head { grid-template-columns:minmax(0, 1fr) !important; }
    .philo-head .section-spirit, .ac-head .section-spirit { display:none; }
    html[data-theme] body:not(.desk):not(.manage) header { padding-left:22px; padding-right:22px; }
    .lp #faq { margin-top:24px; padding-top:48px; }
    .mn-acts { position:sticky; bottom:-18px; margin:8px -16px -18px; padding:14px 16px calc(14px + env(safe-area-inset-bottom)); background:#FFFFFF; border-top:1px solid #EEF0F4; }
  }
  #how-it-works .mx-r i u, #how-it-works .mx-term { will-change:transform; }   /* the GSAP prototype animates these */
  /* ===== dark theme: generated by tools/dark_theme.py, do not edit by hand ===== */
  html[data-theme="dark"] { --viz-1:#7FAEE6; --viz-mid:#181D2F; --bg:#0D1019; --bg-2:#111421; --line:#1A2033; --line-2:#232B44; --blue:#739BF2; --blue-2:#7897ED; --blue-soft:#19253E; --blue-line:#19243E; --phat-soft:#3E2619; --amber:#F8A96D; --amber-soft:#3E3119; --green:#7CE9A5; --green-soft:#171C2D; --red:#EB7A7A; --user:#141827; --shadow:0 1px 2px rgba(0,0,0,0.154), 0 8px 24px rgba(0,0,0,0.206); }
  html[data-theme="dark"] header { background:rgba(13,16,25,0.9); }
  html[data-theme="dark"] .btn:hover { border-color:#2E3858; }
  html[data-theme="dark"] .btn.primary { color:#0D1019; }
  html[data-theme="dark"] .chip-q { box-shadow:0 1px 2px rgba(0,0,0,0.154); }
  html[data-theme="dark"] body.home { background:#0D1019 radial-gradient(900px 420px at 50% -60px, #19253E 0%, rgba(25,37,62,0.55) 45%, rgba(13,16,25,0.0) 72%) no-repeat; }
  html[data-theme="dark"] .inst.error { background:#0F131E; }
  html[data-theme="dark"] .thumbs img { background:#0D1019; }
  html[data-theme="dark"] .send { color:#0D1019; }
  html[data-theme="dark"] .tile-img { background:#0D1019; }
  html[data-theme="dark"] .tile-img { background:#0F121D; }
  html[data-theme="dark"] .unlock .try:hover { background:#19253E; }
  html[data-theme="dark"] .step .n { color:#0D1019; }
  html[data-theme="dark"] .cta { background:linear-gradient(180deg, var(--blue-soft), #0D1019); }
  html[data-theme="dark"] .modal { box-shadow:0 24px 60px rgba(0,0,0,0.518); }
  html[data-theme="dark"] .drawer { box-shadow:-12px 0 40px rgba(0,0,0,0.258); }
  html[data-theme="dark"] #viztip { background:rgba(13,16,25,0.88); box-shadow:0 14px 34px rgba(0,0,0,0.414), 0 2px 6px rgba(0,0,0,0.206); }
  @media (max-width: 1040px) { html[data-theme="dark"] .dock { box-shadow:-12px 0 40px rgba(0,0,0,0.362); } }
  html[data-theme="dark"] .dock, html[data-theme="dark"] .dock.on { box-shadow:0 24px 70px rgba(0,0,0,0.6); }
  html[data-theme="dark"] .fab { color:#0D1019; box-shadow:0 12px 30px rgba(255,255,255,0.017); }
  html[data-theme="dark"] #odds-readout em.q { color:#7F8BE6; }
  html[data-theme="dark"] #odds-readout em.p { color:#E2AE83; }
  html[data-theme="dark"] .vchip.good { color:#99CCB5; }
  html[data-theme="dark"] .vchip.bad { color:#DC899E; }
  html[data-theme="dark"] .checks li.y:before { color:#99CCB5; }
  html[data-theme="dark"] .checks li.x:before { color:#DC899E; }
  html[data-theme="dark"] { --page:#141827; --on-accent:#0D1019; --bg:#0D1019; --bg-2:#131725; --line:#1C2337; --line-2:#2A3351; --ink:#EBECEF; --blue:#7696EF; --blue-2:#7997EC; --green:#75F0B5; --red:#E0858B; --amber:#F6B96F; --shadow:0 1px 0 rgba(0,0,0,0.128), 0 8px 24px rgba(0,0,0,0.206); }
  html[data-theme="dark"] .drawer { box-shadow:-24px 0 60px rgba(0,0,0,0.6); }
  html[data-theme="dark"] .dock, html[data-theme="dark"] .dock.on { box-shadow:0 24px 70px rgba(0,0,0,0.6); }
  html[data-theme="dark"] .fab { box-shadow:0 10px 28px rgba(0,0,0,0.6); }
  html[data-theme="dark"] { --char:#B8BBC5; --page:#161B2C; --bg:#0D1019; --bg-2:#191F31; --line:#3B2E1C; --ink:#D1D3DA; --ink-2:#A7ABB7; --muted:#7A8197; --on-accent:#0D1019; --blue:#D2939B; --blue-2:#D2939C; --green:#94D1B6; --red:#D78E97; --amber:#EAC07B; --viz-1:#7F8BE6; --viz-mid:#3D2F1A; --shadow:0 1px 0 rgba(0,0,0,0.154), 0 10px 30px rgba(0,0,0,0.31); }
  html[data-theme="dark"][data-accent="apricot"] { --blue:#EABD7B; --blue-2:#EEBE77; }
  html[data-theme="dark"][data-accent="lilac"] { --blue:#7F8BE6; --blue-2:#7C89E9; }
  html[data-theme="dark"][data-accent="aqua"] { --blue:#84D5E1; --blue-2:#81D8E4; }
  html[data-theme="dark"][data-accent="charcoal"] { --blue:#B8BBC5; --blue-2:#D1D3DA; }
  html[data-theme="dark"] .pill .dot { box-shadow:0 0 0 3px rgba(255,255,255,0.01); }
  html[data-theme="dark"] .pill.live .dot { box-shadow:0 0 0 3px rgba(0,0,0,0.6); }
  html[data-theme="dark"] .btn.primary { color:#0D1019; }
  html[data-theme="dark"] .fab { color:#0D1019; box-shadow:0 8px 22px rgba(0,0,0,0.518); }
  html[data-theme="dark"] .send { color:#0D1019; }
  html[data-theme="dark"] .dock, html[data-theme="dark"] .dock.on { box-shadow:0 24px 60px rgba(0,0,0,0.6); }
  html[data-theme="dark"] .drawer { box-shadow:-24px 0 60px rgba(0,0,0,0.466); }
  html[data-theme="dark"] .lp .btn.primary.big:hover { box-shadow:0 4px 12px rgba(0,0,0,0.414); }
  html[data-theme="dark"] { --page:#0D1019; --bg:#0D1019; --bg-2:#131826; --line:#1C2236; --line-2:#2A3352; --ink:#E9EAED; --ink-2:#BDBFC9; --char:#DBDDE2; --on-accent:#0D1019; --lilac:#191E3E; --purple:#7B89EA; --blue:#7F8BE6; --blue-2:#7C89E9; --green:#94D1B6; --red:#D392A2; --amber:#E0B185; --viz-1:#7F8BE6; --viz-mid:#21283F; --shadow:0 10px 30px rgba(0,0,0,0.31); }
  html[data-theme="dark"][data-accent="rose"] { --blue:#D392A2; --blue-2:#D491A3; }
  html[data-theme="dark"][data-accent="apricot"] { --blue:#E0B185; --blue-2:#E4B181; }
  html[data-theme="dark"][data-accent="lilac"] { --blue:#7F8BE6; --blue-2:#7C89E9; }
  html[data-theme="dark"][data-accent="aqua"] { --blue:#8BD0DA; --blue-2:#87D2DE; }
  html[data-theme="dark"][data-accent="charcoal"] { --blue:#E9EAED; --blue-2:#DEE0E4; }
  html[data-theme="dark"] .btn.primary { color:#0D1019; }
  html[data-theme="dark"] .btn.primary:hover { background:#B2B5C0; border-color:#B2B5C0; }
  html[data-theme="dark"] .fab { color:#0D1019; box-shadow:0 10px 26px rgba(0,0,0,0.6); }
  html[data-theme="dark"] .dock, html[data-theme="dark"] .dock.on { box-shadow:0 24px 60px rgba(0,0,0,0.6); }
  html[data-theme="dark"] .drawer { box-shadow:-24px 0 60px rgba(0,0,0,0.466); }
  html[data-theme="dark"] .obar.touch i { background:linear-gradient(90deg, rgba(25,30,62,0.7), rgba(43,63,214,.9)); }
  html[data-theme="dark"] .compare th.us, html[data-theme="dark"] .compare td.us { background:rgba(25,30,62,0.28); }
  html[data-theme="dark"] .pill .dot { box-shadow:0 0 0 3px rgba(255,255,255,0.011); }
  html[data-theme="dark"] .pill.live .dot { box-shadow:0 0 0 3px rgba(0,0,0,0.6); }
  html[data-theme="dark"] .lp-link { border-bottom:1px solid #83899D; }
  html[data-theme="dark"] .lp-link:hover { color:#7F8BE6; }
  html[data-theme="dark"] .motion { border:1px solid #454957; background:rgba(13,16,25,0.851); }
  html[data-theme="dark"] .lp-art { background:#131826; }
  html[data-theme="dark"] .lp-art .box { fill:#9BA8F3; }
  html[data-theme="dark"] .lp-noise, html[data-theme="dark"] .lp-read, html[data-theme="dark"] .lp .compare { border:1px solid #252D48; }
  html[data-theme="dark"] .lp-read { background:#131725; }
  html[data-theme="dark"] .nrow b.up { color:#8BD0DA; }
  html[data-theme="dark"] .nrow b.dn { color:#D392A2; }
  html[data-theme="dark"] .nrow b.qm { color:#E0B185; }
  html[data-theme="dark"] .rrow em { background:#28314E; }
  html[data-theme="dark"] .rrow, html[data-theme="dark"] .nrow, html[data-theme="dark"] .nfoot { border-top-color:#252D47; }
  html[data-theme="dark"] .lp-gex .nrow i u { background:#464A59; }
  html[data-theme="dark"] .lp-gex .nrow b.gv { background:#151A29; }
  html[data-theme="dark"] .lp-steps .n { border:1px solid #A6AAB6; }
  html[data-theme="dark"] .lp-guide { background:#242C46; }
  html[data-theme="dark"] .philosophy-mark span { border:2px solid #AEB1BD; }
  html[data-theme="dark"] .philosophy-mark span:nth-child(3) { background:rgba(25,30,62,0.333); }
  html[data-theme="dark"] .lp .cat { border:1px solid #252D48; background:#10141F; }
  html[data-theme="dark"] .lp .cat::before { background:#191E3E; }
  html[data-theme="dark"] .lp .cat li { border-top:1px solid #181D2E; }
  html[data-theme="dark"] .lp .bundle { background:#191F3E; }
  html[data-theme="dark"] .lp-cta { background:#262E4A; }
  html[data-theme="dark"] .lp .faq details, html[data-theme="dark"] .lp .faq details:last-child { border-bottom:1px solid #2E385A; }
  html[data-theme="dark"] nav.links a:hover { color:#7F8BE6; }
  html[data-theme="dark"] .brush-signature::after { background:linear-gradient(90deg, rgba(13,16,25,0.85), rgba(13,16,25,0.05) 50%, rgba(13,16,25,0.8)); }
  html[data-theme="dark"] .signature-art .draw-line { stroke:#BFC1CA; }
  html[data-theme="dark"] .palette { box-shadow:0 30px 80px rgba(0,0,0,0.6); }
  html[data-theme="dark"] .voltab .dn { color:#8BD0DA; }
  html[data-theme="dark"] .tpo .tl b.ib { color:#8BD0DA; }
  html[data-theme="dark"] .section-spirit::before { background:rgba(118,125,147,0.549); }
  html[data-theme="dark"] .section-spirit figcaption { color:#B0B3BE; }
  html[data-theme="dark"] .section-spirit:is(:hover,:focus-within) img { filter:saturate(1.08) drop-shadow(0 5px 0 rgba(123,130,151,0.11)); }
  html[data-theme="dark"] .signature-art .draw-line { stroke:#BFC2CB; }
  html[data-theme="dark"] .signature-art .second-pass { stroke:#9DA1AF; }
  html[data-theme="dark"] .ribbon-item { color:#E9EAED; }
  html[data-theme="dark"] .ribbon-icon .icon-ink { stroke:#BDC0C9; }
  html[data-theme="dark"] .ribbon-icon .icon-dot { fill:#161B2C; stroke:#BDC0C9; }
  html[data-theme="dark"] .ribbon-icon .icon-scribble { stroke:#C0A5AE; }
  html[data-theme="dark"] .faq-persona::after { background:rgba(119,125,148,0.549); }
  html[data-theme="dark"] .faq-persona figcaption { color:#B0B3BE; }
  html[data-theme="dark"] .signature-art .construction { stroke:#9296A5; }
  html[data-theme="dark"] .signature-art .registration { stroke:#9A9EAC; }
  html[data-theme="dark"] .signature-caption { color:#A3A7B4; }
  html[data-theme="dark"] .lp-hero h1 em { color:#7F8BE6; background:linear-gradient(transparent 82%, rgba(25,30,62,0.784) 82%, rgba(25,30,62,0.784) 96%, transparent 96%); }
  html[data-theme="dark"] .lp-ribbon { background:#131826; }
  html[data-theme="dark"] .lp-eb::before { background:#BDBFC9; }
  html[data-theme="dark"] .lp-guide { background:#222941; border:1px solid #2A3352; }
  html[data-theme="dark"] .sstrip { background:#131826; }
  html[data-theme="dark"] .sstrip .c { border-right:1px solid #21283F; }
  html[data-theme="dark"] .sstrip .k { color:#E9EAED; }
  html[data-theme="dark"] .mod { border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] .mod .mh h3 { color:#E9EAED; }
  html[data-theme="dark"] .mod .jump a { border:1px solid #1C2236; }
  html[data-theme="dark"] .sec2-h h4::before { background:#BDBFC9; }
  html[data-theme="dark"] .mod .in { background:#10141F; border:1px solid #1C2236; }
  html[data-theme="dark"] .mod .in .k { color:#B0B3BE; }
  html[data-theme="dark"] .mod .cheat { background:#10141F; border:1px solid #1C2236; }
  html[data-theme="dark"] .mod .marks span { border:1px solid #1C2236; }
  html[data-theme="dark"] .mod details.how summary, html[data-theme="dark"] .mod details.nums summary { border-bottom:1px solid #83899D; }
  html[data-theme="dark"] .ol { border-top:1px solid #181D2E; }
  html[data-theme="dark"] .obar { background:#131826; }
  html[data-theme="dark"] .pcol { background:#0D1019; border-color:#1C2236; }
  html[data-theme="dark"] #pricechart, html[data-theme="dark"] .chart-legend { border-color:#1C2236; background:#0D1019; }
  html[data-theme="dark"] .chart-groups button { border-color:#1C2236; }
  html[data-theme="dark"] .chart-tools { border-color:#2A3352; }
  html[data-theme="dark"] .fab { background:#0D1019; border:1px solid #757C93; box-shadow:0 8px 22px rgba(0,0,0,0.518); }
  html[data-theme="dark"] .dock, html[data-theme="dark"] .dock.on { border:1px solid #252D48; background:#0D1019; box-shadow:0 24px 60px rgba(0,0,0,0.518); }
  html[data-theme="dark"] .chip-q { border-color:#1C2236; }
  html[data-theme="dark"] .drawer { background:#0D1019; border-left:1px solid #252D48; }
  html[data-theme="dark"] .palette { border:1px solid #252D48; background:#0D1019; box-shadow:0 30px 80px rgba(0,0,0,0.57); }
  html[data-theme="dark"] .volmodal { border:1px solid #252D48; background:#0D1019; box-shadow:0 30px 80px rgba(0,0,0,0.57); }
  html[data-theme="dark"] .chart-vol button { border:1px solid #1C2236; }
  html[data-theme="dark"] .mg .stats { background:#131826; }
  html[data-theme="dark"] .mg .stat { border-right:1px solid #21283F; }
  html[data-theme="dark"] .mg .stat span { color:#E9EAED; }
  html[data-theme="dark"] .mgcard { background:#0D1019; border:1px solid #252D48; }
  html[data-theme="dark"] .mgh h3 { color:#E9EAED; }
  html[data-theme="dark"] .mgh h3::before { background:#BDBFC9; }
  html[data-theme="dark"] .mgt th { color:#B0B3BE; border-bottom:1px solid #21283F; }
  html[data-theme="dark"] .mgt td { border-bottom:1px solid #181D2E; }
  html[data-theme="dark"] .mgt code { background:#131826; }
  html[data-theme="dark"] .mchip { border:1px solid #1C2236; }
  html[data-theme="dark"] .mchip.on { color:#8DD8BD; }
  html[data-theme="dark"] .mchip:hover { border-color:#757C93; }
  html[data-theme="dark"] .mgform input { border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] .mgkv span { color:#B0B3BE; }
  @media (max-width: 860px) { html[data-theme="dark"] .mg .stat { border-bottom:1px solid #21283F; } }
  html[data-theme="dark"] .philo .eyebrow::before, html[data-theme="dark"] .ac-eb::before { background:#BDBFC9; }
  html[data-theme="dark"] .philo blockquote { border:1px solid #2A3352; border-left:1px solid #2A3352; background:#222941; }
  html[data-theme="dark"] .philo li { border-top:1px solid #1C2236; }
  html[data-theme="dark"] .philo .cta { background:#0D1019; border:1px solid #252D48; }
  html[data-theme="dark"] body.blog { background:#0D1019; }
  html[data-theme="dark"] .bl-pill { border:1px solid #1B2134; background:#111521; color:#BDBFC9; }
  html[data-theme="dark"] .bl-kicker { color:#7F8BE6; }
  html[data-theme="dark"] .bl-hero { border-bottom:1px solid #161B2B; }
  html[data-theme="dark"] .bl-hero::before { background-image:linear-gradient(#161B2B 1px, transparent 1px), linear-gradient(90deg, #161B2B 1px, transparent 1px); -webkit-mask-image:linear-gradient(180deg, #F4F4F6 0%, rgba(0,0,0,.55) 55%, transparent 96%); mask-image:linear-gradient(180deg, #F4F4F6 0%, rgba(0,0,0,.55) 55%, transparent 96%); }
  html[data-theme="dark"] .bl-hero h1 { color:#E9EAED; }
  html[data-theme="dark"] .bl-lede { color:#A2A6B3; }
  html[data-theme="dark"] .bl-empty { color:#ACB0B9; }
  html[data-theme="dark"] .bl-sec { color:#E9EAED; }
  html[data-theme="dark"] .bl-cover .cv-bg { fill:#111521; }
  html[data-theme="dark"] .bl-cover .cv-grid { stroke:#191F31; }
  html[data-theme="dark"] .bl-cover .cv-curve { stroke:#7F8BE6; }
  html[data-theme="dark"] .bl-cover .cv-area { fill:rgba(127,139,230,0.14); }
  html[data-theme="dark"] .bl-cover .cv-level { stroke:#E9EAED; }
  html[data-theme="dark"] .bl-cover .cv-dot { fill:#0D1019; stroke:#7F8BE6; }
  html[data-theme="dark"] .bl-cover .cv-path { stroke:#E9EAED; }
  html[data-theme="dark"] .bl-cover .cv-thin { stroke:#A7AFBE; }
  html[data-theme="dark"] .bl-cover .cv-band { fill:rgba(127,139,230,0.12); }
  html[data-theme="dark"] .bl-cover .cv-vol { fill:#20273E; }
  html[data-theme="dark"] .bl-cover .cv-vol.on { fill:rgba(127,139,230,0.32); }
  html[data-theme="dark"] .bl-cover .cv-start { fill:#E9EAED; }
  html[data-theme="dark"] img.bl-cover-img { background:#111521; }
  html[data-theme="dark"] .bl-cover.cv-c-teal .cv-bg { fill:#141826; }
  html[data-theme="dark"] .bl-cover.cv-c-teal .cv-grid { stroke:#ADDAE1; }
  html[data-theme="dark"] .bl-cover.cv-c-teal .cv-curve { stroke:#70E7F5; }
  html[data-theme="dark"] .bl-cover.cv-c-teal .cv-dot { stroke:#70E7F5; }
  html[data-theme="dark"] .bl-cover.cv-c-teal .cv-area { fill:rgba(112,231,245,0.16); }
  html[data-theme="dark"] .bl-cover.cv-c-teal .cv-band { fill:rgba(112,231,245,0.13); }
  html[data-theme="dark"] .bl-cover.cv-c-teal .cv-vol.on { fill:rgba(112,231,245,0.34); }
  html[data-theme="dark"] .bl-cover.cv-c-orange .cv-bg { fill:#131724; }
  html[data-theme="dark"] .bl-cover.cv-c-orange .cv-grid { stroke:#E9C5A5; }
  html[data-theme="dark"] .bl-cover.cv-c-orange .cv-curve { stroke:#EFA776; }
  html[data-theme="dark"] .bl-cover.cv-c-orange .cv-dot { stroke:#EFA776; }
  html[data-theme="dark"] .bl-cover.cv-c-orange .cv-area { fill:rgba(239,167,118,0.16); }
  html[data-theme="dark"] .bl-cover.cv-c-orange .cv-band { fill:rgba(239,167,118,0.13); }
  html[data-theme="dark"] .bl-cover.cv-c-orange .cv-vol.on { fill:rgba(239,167,118,0.34); }
  html[data-theme="dark"] .bl-cover.cv-c-violet .cv-bg { fill:#121622; }
  html[data-theme="dark"] .bl-cover.cv-c-violet .cv-grid { stroke:#BEA2EB; }
  html[data-theme="dark"] .bl-cover.cv-c-violet .cv-curve { stroke:#AA84E1; }
  html[data-theme="dark"] .bl-cover.cv-c-violet .cv-dot { stroke:#AA84E1; }
  html[data-theme="dark"] .bl-cover.cv-c-violet .cv-area { fill:rgba(170,132,225,0.16); }
  html[data-theme="dark"] .bl-cover.cv-c-violet .cv-band { fill:rgba(170,132,225,0.13); }
  html[data-theme="dark"] .bl-cover.cv-c-violet .cv-vol.on { fill:rgba(170,132,225,0.34); }
  html[data-theme="dark"] .bl-cover.cv-c-green .cv-bg { fill:#141826; }
  html[data-theme="dark"] .bl-cover.cv-c-green .cv-grid { stroke:#1D2439; }
  html[data-theme="dark"] .bl-cover.cv-c-green .cv-curve { stroke:#80E5B9; }
  html[data-theme="dark"] .bl-cover.cv-c-green .cv-dot { stroke:#80E5B9; }
  html[data-theme="dark"] .bl-cover.cv-c-green .cv-area { fill:rgba(128,229,185,0.16); }
  html[data-theme="dark"] .bl-cover.cv-c-green .cv-band { fill:rgba(128,229,185,0.13); }
  html[data-theme="dark"] .bl-cover.cv-c-green .cv-vol.on { fill:rgba(128,229,185,0.34); }
  html[data-theme="dark"] .bl-cover.cv-c-rose .cv-bg { fill:#121623; }
  html[data-theme="dark"] .bl-cover.cv-c-rose .cv-grid { stroke:#E4AABF; }
  html[data-theme="dark"] .bl-cover.cv-c-rose .cv-curve { stroke:#DD88A3; }
  html[data-theme="dark"] .bl-cover.cv-c-rose .cv-dot { stroke:#DD88A3; }
  html[data-theme="dark"] .bl-cover.cv-c-rose .cv-area { fill:rgba(221,136,163,0.16); }
  html[data-theme="dark"] .bl-cover.cv-c-rose .cv-band { fill:rgba(221,136,163,0.13); }
  html[data-theme="dark"] .bl-cover.cv-c-rose .cv-vol.on { fill:rgba(221,136,163,0.34); }
  html[data-theme="dark"] .bl-feat { border:1px solid #1B2135; background:#0D1019; }
  html[data-theme="dark"] .bl-feat:is(:hover, :focus-visible) { border-color:#2C3555; }
  html[data-theme="dark"] .bl-feat:is(:hover, :focus-visible) h2 { color:#7F8BE6; }
  html[data-theme="dark"] .bl-feat h2 { color:#E9EAED; }
  html[data-theme="dark"] .bl-feat p { color:#A2A6B3; }
  html[data-theme="dark"] .bl-feat .bl-cover { border-left:1px solid #161B2B; }
  html[data-theme="dark"] .bl-read { color:#7F8BE6; }
  html[data-theme="dark"] .bl-card { border:1px solid #1B2135; background:#0D1019; }
  html[data-theme="dark"] .bl-card:is(:hover, :focus-visible) { border-color:#2C3555; }
  html[data-theme="dark"] .bl-card:is(:hover, :focus-visible) h3 { color:#7F8BE6; }
  html[data-theme="dark"] .bl-card .bl-cover { border-bottom:1px solid #161B2B; }
  html[data-theme="dark"] .bl-card h3 { color:#E9EAED; }
  html[data-theme="dark"] .bl-card p { color:#A2A6B3; }
  html[data-theme="dark"] .bl-by { color:#ACB0B9; }
  html[data-theme="dark"] .bl-by b { color:#E9EAED; }
  html[data-theme="dark"] .bl-av { border:1px solid #1B2135; background:#0D1019; }
  html[data-theme="dark"] .bl-back { color:#ACB0B9; }
  html[data-theme="dark"] .bl-back:hover { color:#7F8BE6; }
  html[data-theme="dark"] .bl-art-head h1 { color:#E9EAED; }
  html[data-theme="dark"] .bl-sub { color:#A2A6B3; }
  html[data-theme="dark"] .bl-meta { border-top:1px solid #161B2B; border-bottom:1px solid #161B2B; }
  html[data-theme="dark"] .bl-share a, html[data-theme="dark"] .bl-share button { border:1px solid #1B2135; background:#0D1019; color:#BDBFC9; }
  html[data-theme="dark"] .bl-share a:hover, html[data-theme="dark"] .bl-share button:hover { color:#7F8BE6; }
  html[data-theme="dark"] .bl-share .done { color:#7F8BE6; }
  html[data-theme="dark"] .bl-cover-wide { border:1px solid #1B2135; }
  html[data-theme="dark"] .bl-toc { border-left:1px solid #161B2B; }
  html[data-theme="dark"] .bl-toc b { color:#6F768D; }
  html[data-theme="dark"] .bl-toc a { color:#ACB0B9; }
  html[data-theme="dark"] .bl-toc a:hover { color:#E9EAED; }
  html[data-theme="dark"] .bl-toc a.on { color:#E9EAED; }
  html[data-theme="dark"] .bl-body h2 { color:#E9EAED; }
  html[data-theme="dark"] .bl-body h3 { color:#E9EAED; }
  html[data-theme="dark"] .bl-body p, html[data-theme="dark"] .bl-body li { color:#BDBFC9; }
  html[data-theme="dark"] .bl-body li::marker { color:#7F8BE6; }
  html[data-theme="dark"] .bl-body b, html[data-theme="dark"] .bl-body strong { color:#E9EAED; }
  html[data-theme="dark"] .bl-body a { color:#7F8BE6; text-decoration-color:rgba(127,139,230,0.35); }
  html[data-theme="dark"] .bl-body a:hover { text-decoration-color:#7F8BE6; }
  html[data-theme="dark"] .bl-key { background:#111521; border:1px solid #1B2134; }
  html[data-theme="dark"] .bl-key h2 { color:#7F8BE6; }
  html[data-theme="dark"] .bl-key li { color:#E9EAED; }
  html[data-theme="dark"] .bl-body blockquote { color:#E9EAED; }
  html[data-theme="dark"] .bl-body img { border:1px solid #1B2135; }
  html[data-theme="dark"] .bl-body figcaption { color:#ACB0B9; }
  html[data-theme="dark"] .bl-body table { border:1px solid #1B2135; }
  html[data-theme="dark"] .bl-body th { background:#111522; color:#A2A6B3; border-bottom:1px solid #1B2135; }
  html[data-theme="dark"] .bl-body td { border-bottom:1px solid #161B2B; color:#BDBFC9; }
  html[data-theme="dark"] .bl-body tbody tr:hover td { background:#10131F; }
  html[data-theme="dark"] .bl-body code { background:#151928; }
  html[data-theme="dark"] .bl-body section.bl-faq h3 { border-top:1px solid #161B2B; }
  html[data-theme="dark"] .bl-body .bl-note { color:#ACB0B9; border-top:1px solid #161B2B; }
  html[data-theme="dark"] .bl-foot { border-top:1px solid #161B2B; color:#6F768D; }
  html[data-theme="dark"] .ftb-all a { color:#7F8BE6; }
  html[data-theme="dark"] .ftb-all a:hover { color:#7E8AE7; }
  @media (max-width: 860px) { html[data-theme="dark"] .bl-feat .bl-cover { border-bottom:1px solid #161B2B; } }
  html[data-theme="dark"] .ac-bar { background:#252D47; }
  html[data-theme="dark"] .ac-lesson { border:1px solid #252D48; background:#10141F; }
  html[data-theme="dark"] .ac-track:nth-of-type(5n+5) .ac-lesson::before { background:#21283F; }
  html[data-theme="dark"] .ac-lesson.open { background:#0D1019; border-color:#252D48; }
  html[data-theme="dark"] .ac-lesson.done .ac-m { color:#8DD8BD; }
  html[data-theme="dark"] .ac-lh:hover .ac-t { color:#7F8BE6; }
  html[data-theme="dark"] .ac-gate { border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] .ac-free { background:#131826; color:#7F8BE6; }
  html[data-theme="dark"] .ac-tease::after { background:linear-gradient(rgba(13,16,25,0.0), #0D1019 85%); }
  html[data-theme="dark"] .ac-opt { background:#0D1019; }
  html[data-theme="dark"] .ac-term { border-top:1px solid #1C2236; }
  html[data-theme="dark"] .ac-fig { background:#0D1019; border:1px solid #1C2236; }
  html[data-theme="dark"] .ac-fig .dt { fill:#E9EAED; }
  html[data-theme="dark"] .ac-fig .ds { fill:#ACB0B9; }
  html[data-theme="dark"] .ac-fig .dh { fill:#E9EAED; }
  html[data-theme="dark"] .ac-fig .dl { fill:#E9EAED; }
  html[data-theme="dark"] .monmodal { border:1px solid #252D48; background:#0D1019; box-shadow:0 30px 80px rgba(0,0,0,0.57); }
  html[data-theme="dark"] .mon-list button:hover { background:#131826; }
  html[data-theme="dark"] .mon-main img { border:1px solid #1C2236; background:#0D1019; }
  html[data-theme="dark"] #mon-filter { background:#0D1019; border:1px solid #252D48; }
  html[data-theme="dark"] .mon-chart { border:1px solid #1C2236; background:#0D1019; }
  html[data-theme="dark"] .monmodal { border:1px solid #252D48; box-shadow:0 30px 80px rgba(0,0,0,0.57); background:radial-gradient(circle at 96% 0%, #cbb1d926, transparent 34%), radial-gradient(circle at 0% 100%, #b6dce024, transparent 36%), #0D1019; }
  html[data-theme="dark"] .volmodal { box-shadow:0 30px 80px rgba(0,0,0,0.57); }
  html[data-theme="dark"] #mon-filter { border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] .mon-g { color:#E9EAED; }
  html[data-theme="dark"] .mon-g::before { background:#BDBFC9; }
  html[data-theme="dark"] .mon-list button { background:#10141F; }
  html[data-theme="dark"] .mon-list button:hover { background:#131826; border-color:#1C2236; }
  html[data-theme="dark"] .mon-main h3::before { background:#BDBFC9; }
  html[data-theme="dark"] .mon-bar .seg button, html[data-theme="dark"] .vol-top .seg button { border:1px solid #1C2236; }
  html[data-theme="dark"] .mon-bar .seg button + button, html[data-theme="dark"] .vol-top .seg button + button { border-left:1px solid #1C2236; }
  html[data-theme="dark"] .mon-legend span { border:1px solid #1C2236; background:#0D1019; }
  html[data-theme="dark"] .mon-legend span.mon-date { border-color:#E9EAED; background:#E9EAED; color:#0D1019; }
  html[data-theme="dark"] .mon-legend .mon-date { color:#0D1019; }
  html[data-theme="dark"] .mon-chart { border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] #mon-reads summary { border-bottom:1px solid #83899D; }
  html[data-theme="dark"] .voltab th { color:#B0B3BE; }
  html[data-theme="dark"] .ac-hero :is(h1, h2) em { color:#7F8BE6; background:linear-gradient(transparent 82%, rgba(25,30,62,0.784) 82%, rgba(25,30,62,0.784) 96%, transparent 96%); }
  html[data-theme="dark"] .ac-bar { background:#252D47; border:1px solid #2A3352; }
  html[data-theme="dark"] .ac-ribbon { background:#131826; }
  html[data-theme="dark"] .ac-ribbon .ribbon-item:hover span { color:#7F8BE6; }
  html[data-theme="dark"] .ac-lesson { border-top:1px solid #21283F; }
  html[data-theme="dark"] .ac-track .ac-lesson:last-child { border-bottom:1px solid #21283F; }
  html[data-theme="dark"] .ac-n { border:1px solid #A6AAB6; }
  html[data-theme="dark"] .ac-lesson.done .ac-n { background:#E9EAED; color:#0D1019; border-color:#E9EAED; }
  html[data-theme="dark"] .ac-lesson.open { background:#0D1019; border:1px solid #252D48; }
  html[data-theme="dark"] .ac-fig { border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] .ac-opt { background:#0D1019; }
  html[data-theme="dark"] .ac-term { border-top:1px solid #21283F; }
  html[data-theme="dark"] #search { background:rgba(13,16,25,0.58); }
  html[data-theme="dark"] .palette { border:1px solid #252D48; background:#0D1019; box-shadow:0 30px 70px rgba(0,0,0,0.466); }
  html[data-theme="dark"] .pal-in { border-bottom:1px solid #21283F; }
  html[data-theme="dark"] .pal-in svg { color:#E9EAED; }
  html[data-theme="dark"] .pal-in input { color:#E9EAED; }
  html[data-theme="dark"] .pal-in input::placeholder { color:#6C738A; }
  html[data-theme="dark"] .palette kbd { color:#E9EAED; background:#0D1019; border:1px solid #E9EAED; box-shadow:2px 2px 0 rgba(0,0,0,0.35); }
  html[data-theme="dark"] .pal-g { color:#E9EAED; }
  html[data-theme="dark"] .pal-ic { border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] .pal-r b { color:#E9EAED; }
  html[data-theme="dark"] .pal-r span { color:#ACB0B9; }
  html[data-theme="dark"] .pal-go { color:#E9EAED; }
  html[data-theme="dark"] .pal-r:hover { background:#131826; }
  html[data-theme="dark"] .pal-r.on { background:#0D1019; border-color:#E9EAED; }
  html[data-theme="dark"] .pal-r.on b { color:#E9EAED; }
  html[data-theme="dark"] .t-lilac { --tone:#191E3E; }
  html[data-theme="dark"] .pal-foot { border-top:1px solid #21283F; background:#131826; color:#ACB0B9; }
  html[data-theme="dark"] #searchbtn, html[data-theme="dark"] header #customize-btn { border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] #searchbtn:hover { border-color:#E9EAED; box-shadow:0 4px 12px rgba(0,0,0,0.414); }
  html[data-theme="dark"] #searchbtn kbd { border-color:#252D48; }
  @media (max-width: 640px) { html[data-theme="dark"] .palette { box-shadow:0 18px 44px rgba(0,0,0,0.466); } }
  html[data-theme="dark"] .drawer.cz { background:#0D1019; border-left:1px solid #252D48; box-shadow:-30px 0 70px rgba(0,0,0,0.414); }
  html[data-theme="dark"] .cz > h2 { background:#0D1019 url(/art/doodle-underline.svg) 26px calc(100% - 8px)/190px 12px no-repeat; border-bottom:1px solid #21283F; color:#E9EAED; }
  html[data-theme="dark"] .cz > h2 .btn { border:1px solid #E9EAED; background:#0D1019; color:#E9EAED; }
  html[data-theme="dark"] .cz > h2 .btn:hover { box-shadow:0 4px 12px rgba(0,0,0,0.414); }
  html[data-theme="dark"] .cz h3 { --tone:#191E3E; color:#E9EAED; }
  html[data-theme="dark"] .cz h3::before { border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] .cz h3::after { background:#21283F; }
  html[data-theme="dark"] .czrow { border-bottom:1px solid #181D2E; color:#E9EAED; }
  html[data-theme="dark"] .czrow small { color:#83899D; }
  html[data-theme="dark"] .cz .seg { border:1px solid #E9EAED; background:#0D1019; }
  html[data-theme="dark"] .cz .seg button { color:#B0B3BE; }
  html[data-theme="dark"] .cz .seg button + button { border-left:1px solid #21283F; }
  html[data-theme="dark"] .cz .seg button:hover { background:#131826; color:#E9EAED; }
  html[data-theme="dark"] .cz .seg button.on { color:#E9EAED; }
  html[data-theme="dark"] .cz .swatches button { border:1px solid #252D48; }
  html[data-theme="dark"] .cz .swatches button.on { box-shadow:0 0 0 2px rgba(0,0,0,0.35), 0 0 0 3.5px rgba(0,0,0,0.6); }
  html[data-theme="dark"] .czhint { color:#ACB0B9; }
  html[data-theme="dark"] .cz .lvrow input { background:#0D1019; border:1px solid #252D48; }
  html[data-theme="dark"] .cz .lvrow input:focus { border-color:#E9EAED; box-shadow:0 0 0 3px rgba(0,0,0,0.31); }
  html[data-theme="dark"] .cz .lvrow .btn, html[data-theme="dark"] .czfoot .btn { border:1px solid #E9EAED; background:#0D1019; color:#E9EAED; }
  html[data-theme="dark"] .cz .lvrow.add .btn { background:#E9EAED; color:#0D1019; }
  html[data-theme="dark"] .cz .lvrow .btn:hover, html[data-theme="dark"] .czfoot .btn:hover { box-shadow:0 4px 12px rgba(0,0,0,0.414); }
  html[data-theme="dark"] .czmods li { --tone:#191E3E; border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] .czmods .mrow .btn { border:1px solid #252D48; }
  html[data-theme="dark"] .czmods .mrow .btn:not(:disabled):hover { border-color:#E9EAED; }
  html[data-theme="dark"] .czmods .secs { border-top:1px dashed #21283F; }
  html[data-theme="dark"] .cz .tick input { border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] .cz .tick input:checked::after { border-left:1.6px solid #E9EAED; border-bottom:1.6px solid #E9EAED; }
  html[data-theme="dark"] .czfoot { border-top:1px solid #21283F; color:#ACB0B9; }
  html[data-theme="dark"] #hist, html[data-theme="dark"] #charts, html[data-theme="dark"] #prof { background:#0D1019; border-left:1px solid #252D48; box-shadow:-30px 0 70px rgba(0,0,0,0.414); }
  html[data-theme="dark"] #hist > h2, html[data-theme="dark"] #charts > h2, html[data-theme="dark"] #prof > h2 { background:#0D1019 url(/art/doodle-underline.svg) 26px calc(100% - 8px)/150px 12px no-repeat; border-bottom:1px solid #21283F; color:#E9EAED; }
  html[data-theme="dark"] .drawer > h2 .btn { border:1px solid #E9EAED; background:#0D1019; color:#E9EAED; }
  html[data-theme="dark"] .drawer > h2 .btn:hover { box-shadow:0 4px 12px rgba(0,0,0,0.414); }
  html[data-theme="dark"] #charts-date { color:#ACB0B9 !important; }
  html[data-theme="dark"] .drawer .hist li { border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] .drawer .hist li[data-id]:hover { border-color:#E9EAED; background:#0D1019; box-shadow:0 4px 12px rgba(0,0,0,0.414); }
  html[data-theme="dark"] .drawer .hist .t { color:#E9EAED; }
  html[data-theme="dark"] .drawer .hist .m { color:#83899D; }
  html[data-theme="dark"] .drawer .hist .m button { color:#83899D; }
  html[data-theme="dark"] .drawer .hist .m button:hover { color:#D194A4; }
  html[data-theme="dark"] #charts .vizcard { --tone:#191E3E; border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] #charts .vizcard h3 { color:#E9EAED; }
  html[data-theme="dark"] #charts .vizcard .cap { color:#ACB0B9; }
  html[data-theme="dark"] #prof .budget { border:1px solid #252D48; background:#0D1019; color:#B0B3BE; }
  html[data-theme="dark"] #prof .budget .bar { border:1px solid #E9EAED; background:#0D1019; }
  html[data-theme="dark"] #prof .field span { color:#B0B3BE; }
  html[data-theme="dark"] #prof .field input, html[data-theme="dark"] #prof .field textarea { background:#0D1019; border:1px solid #252D48; }
  html[data-theme="dark"] #prof .field input:focus, html[data-theme="dark"] #prof .field textarea:focus { border-color:#E9EAED; box-shadow:0 0 0 3px rgba(0,0,0,0.31); }
  html[data-theme="dark"] #prof form h2, html[data-theme="dark"] #prof #mcpbox h2 { color:#E9EAED; }
  html[data-theme="dark"] #prof #pwform, html[data-theme="dark"] #prof #mcpbox { border-top:1px solid #21283F !important; }
  html[data-theme="dark"] #prof .btn { border:1px solid #E9EAED; background:#0D1019; color:#E9EAED; }
  html[data-theme="dark"] #prof .btn.primary { background:#E9EAED; color:#0D1019; }
  html[data-theme="dark"] #prof .btn:hover { box-shadow:0 4px 12px rgba(0,0,0,0.414); }
  html[data-theme="dark"] #prof .pwhint { color:#83899D; }
  html[data-theme="dark"] #prof #key-snippet { background:#0D1019 !important; border:1px dashed #252D48 !important; }
  html[data-theme="dark"] #prof .invite { color:#E9EAED; border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] .dock, html[data-theme="dark"] .dock.on { border:1px solid #252D48; background:#0D1019; box-shadow:0 26px 60px rgba(0,0,0,0.466); }
  html[data-theme="dark"] .dock .dh { border-bottom:1px solid #21283F; background:#0D1019 url(/art/doodle-underline.svg) 18px calc(100% - 7px)/120px 11px no-repeat; }
  html[data-theme="dark"] .dock .dt b { color:#E9EAED; }
  html[data-theme="dark"] .dock .dt span { color:#83899D; }
  html[data-theme="dark"] .dock .dtools .btn { border:1px solid #252D48; color:#E9EAED; }
  html[data-theme="dark"] .dock .dtools .btn:hover { border-color:#E9EAED; box-shadow:0 4px 12px rgba(0,0,0,0.414); }
  html[data-theme="dark"] .dock .user { background:#0D1019; border:1px solid #252D48; color:#E9EAED; }
  html[data-theme="dark"] .dock .bot { color:#E9EAED; }
  html[data-theme="dark"] .dock .bot code { background:#131826; }
  html[data-theme="dark"] .dock .bot th { color:#83899D; }
  html[data-theme="dark"] .dock .bot th, html[data-theme="dark"] .dock .bot td { border-bottom-color:#1C2236; }
  html[data-theme="dark"] .dock .inst { border:1px solid #252D48; background:#0D1019; box-shadow:3px 3px 0 rgba(0,0,0,0.35); }
  html[data-theme="dark"] .dock .inst .h b { color:#E9EAED; }
  html[data-theme="dark"] .dock .typing { color:#83899D; }
  html[data-theme="dark"] .dock .typing i { background:#E9EAED; }
  html[data-theme="dark"] .dock .chip-q { color:#E9EAED; background:#0D1019; border:1px solid #252D48; }
  html[data-theme="dark"] .dock .chip-q:hover { border-color:#E9EAED; background:#0D1019; color:#E9EAED; box-shadow:0 4px 12px rgba(0,0,0,0.414); }
  html[data-theme="dark"] .dock #composer { border-top:1px solid #21283F; background:#131826; }
  html[data-theme="dark"] .dock #composer form { border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] .dock #composer form:focus-within { border-color:#E9EAED; box-shadow:0 0 0 3px rgba(0,0,0,0.31); }
  html[data-theme="dark"] .dock .send { background:#E9EAED; color:#0D1019; }
  html[data-theme="dark"] .dock .send:hover { background:#DEDFE4; }
  html[data-theme="dark"] .dock .foot { color:#83899D; }
  html[data-theme="dark"] .dock .gate { border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] .dock .gate p { color:#B0B3BE; }
  html[data-theme="dark"] .dock .gate .btn.primary { background:#E9EAED; border-color:#E9EAED; color:#0D1019; }
  html[data-theme="dark"] .dock .a-empty h3 { color:#E9EAED; }
  html[data-theme="dark"] .dock .a-empty p { color:#ACB0B9; }
  html[data-theme="dark"] .dock .bot .meta { color:#6C738A; }
  html[data-theme="dark"] #auth { background:rgba(13,16,25,0.6); }
  html[data-theme="dark"] #auth .modal { border:1px solid #252D48; background:#0D1019; box-shadow:0 30px 70px rgba(0,0,0,0.466); }
  html[data-theme="dark"] #auth .modal h2 { color:#E9EAED; }
  html[data-theme="dark"] #auth .modal .sub { color:#ACB0B9; }
  html[data-theme="dark"] #auth .tabs { background:#0D1019; border:1px solid #E9EAED; }
  html[data-theme="dark"] #auth .tabs button { color:#B0B3BE; }
  html[data-theme="dark"] #auth .tabs button + button { border-left:1px solid #E9EAED; }
  html[data-theme="dark"] #auth .tabs button:hover { background:#131826; color:#E9EAED; }
  html[data-theme="dark"] #auth .tabs button.on { color:#E9EAED; }
  html[data-theme="dark"] #auth .field span { color:#B0B3BE; }
  html[data-theme="dark"] #auth .field input { background:#0D1019; border:1px solid #252D48; color:#E9EAED; }
  html[data-theme="dark"] #auth .field input:focus { border-color:#E9EAED; box-shadow:0 0 0 3px rgba(0,0,0,0.31); }
  html[data-theme="dark"] #auth .pwhint { color:#83899D; border:1px dashed #252D48; background:#0D1019; }
  html[data-theme="dark"] #auth .btn.primary { border:1px solid #252D48; background:#E9EAED; color:#0D1019; }
  html[data-theme="dark"] #auth .btn.primary:hover { box-shadow:0 4px 12px rgba(0,0,0,0.414); }
  html[data-theme="dark"] #auth .err { color:#D194A4; }
  html[data-theme="dark"] #auth #a-cancel { color:#ACB0B9; border-bottom:1px solid #252D48; }
  html[data-theme="dark"] #auth #a-cancel:hover { color:#E9EAED; border-bottom-color:#E9EAED; }
  @media (max-width: 640px) { html[data-theme="dark"] #auth .modal { box-shadow:0 18px 44px rgba(0,0,0,0.466); } }
  html[data-theme="dark"] .lp .cat { border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] .lp .cat h3 { color:#E9EAED; }
  html[data-theme="dark"] .lp .cat .tag { color:#B0B3BE; }
  html[data-theme="dark"] .lp .cat li { border-top:1px solid #181D2E; color:#B0B3BE; }
  html[data-theme="dark"] .lp .cat li::before { border:1px solid #252D48; background:#191E3E; }
  html[data-theme="dark"] .lp .bundle { border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] .lp .bundle::before { mask-image:linear-gradient(90deg, transparent, #F4F4F6 35%); -webkit-mask-image:linear-gradient(90deg, transparent, #F4F4F6 35%); }
  html[data-theme="dark"] .lp .bundle h3 { color:#E9EAED; }
  html[data-theme="dark"] .lp .bundle p { color:#B0B3BE; }
  html[data-theme="dark"] .lp .bundle .price { color:#E9EAED; }
  html[data-theme="dark"] .lp .bundle .price span { color:#B0B3BE; }
  html[data-theme="dark"] .lp .bundle .btn { border:1px solid #252D48; background:#E9EAED; color:#0D1019; }
  html[data-theme="dark"] .lp .bundle .btn:not(:disabled):hover { box-shadow:0 4px 12px rgba(0,0,0,0.414); }
  html[data-theme="dark"] .lp .bundle .btn:disabled { background:#0D1019; color:#E9EAED; }
  html[data-theme="dark"] .mod.offer { border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] .mod.offer::before { mask-image:linear-gradient(90deg, transparent, #F4F4F6 40%); -webkit-mask-image:linear-gradient(90deg, transparent, #F4F4F6 40%); }
  html[data-theme="dark"] .mod.offer .mh h3 { color:#E9EAED; }
  html[data-theme="dark"] .mod.offer .mh .tag { color:#B0B3BE; }
  html[data-theme="dark"] .mod.offer .lock.off { color:#E9EAED; background:#0D1019; border:1px solid #E9EAED; }
  html[data-theme="dark"] .mod.offer .mb > p { color:#B0B3BE; }
  html[data-theme="dark"] .mod.offer .del li { border:1px solid #E9EAED; background:#0D1019; color:#B0B3BE; }
  html[data-theme="dark"] .mod.offer .del li b { color:#E9EAED; }
  html[data-theme="dark"] .mod.offer .price { color:#E9EAED; }
  html[data-theme="dark"] .mod.offer .price span { color:#B0B3BE; }
  html[data-theme="dark"] .mod.offer .btn.primary { border:1px solid #252D48; background:#E9EAED; color:#0D1019; }
  html[data-theme="dark"] .mod.offer .btn.primary:hover { box-shadow:0 4px 12px rgba(0,0,0,0.414); }
  html[data-theme="dark"][data-accent="lilac"] { --acc:#7F8BE6; --acc-soft:#191E3E; --acc-fill:#191F3E; --acc-tint:#131725; }
  html[data-theme="dark"][data-accent="aqua"] { --acc:#8BD0DA; --acc-tint:#191E30; }
  html[data-theme="dark"][data-accent="apricot"] { --acc:#E0B185; --acc-tint:#3E2D19; }
  html[data-theme="dark"][data-accent="rose"] { --acc:#D392A2; --acc-tint:#171C2C; }
  html[data-theme="dark"][data-accent="charcoal"] { --acc:#E9EAED; --acc-soft:#21283F; --acc-fill:#1C2236; --acc-tint:#131826; --acc-line:#2A3352; }
  html[data-theme="dark"] { --acc:#7F8BE6; --acc-soft:#191E3E; --acc-fill:#191F3E; --acc-tint:#131725; }
  html[data-theme="dark"] .wordmark .wm-name { color:#EAEBEE; }
  html[data-theme="dark"] .wordmark .wm-dot { color:#7F8BE6; }
  html[data-theme="dark"] .wordmark .wm-sub { color:#ACB0B9; }
  html[data-theme="dark"] nav.links > a, html[data-theme="dark"] .nv-t { color:#E9EAED; }
  html[data-theme="dark"] nav.links > a:hover, html[data-theme="dark"] nav.links .nv:is(:hover, .on) > .nv-t { color:#E9EAED; background:#161B2C; }
  html[data-theme="dark"] .nv-pop { background:#0D1019; border:1px solid #252D48; box-shadow:0 18px 44px rgba(0,0,0,0.466); }
  html[data-theme="dark"] .nv-pop a { color:#E9EAED; }
  html[data-theme="dark"] .nv-pop a span { color:#ACB0B9; }
  html[data-theme="dark"] .nv-pop a:is(:hover, :focus-visible) { background:#131826; }
  html[data-theme="dark"] #signin-btn { color:#E9EAED; }
  html[data-theme="dark"] #signin-btn:hover { background:#161B2C; }
  html[data-theme="dark"] .ctasplit:hover, html[data-theme="dark"] .ctasplit.on { box-shadow:0 8px 18px rgba(0,0,0,0.6); }
  html[data-theme="dark"] .ctasplit .btn.primary { background:#DEDFE4; color:#0D1019; }
  html[data-theme="dark"] .ctasplit .split-c { border-left:1px solid rgba(20,24,38,0.28); }
  html[data-theme="dark"] .ctasplit .btn.primary:hover { background:#E9EAED; }
  @media (max-width: 640px) { html[data-theme="dark"] .nv-pop.nv-right { box-shadow:0 18px 44px rgba(0,0,0,0.466); } }
  html[data-theme="dark"] .pal-r span mark { color:#E9EAED; }
  html[data-theme="dark"] #prof.acct > h3 { color:#E9EAED; }
  html[data-theme="dark"] #prof.acct > h3::before { border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] #prof.acct > h3::after { background:#21283F; }
  html[data-theme="dark"] .acct-card { border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] .acct-id b { color:#E9EAED; }
  html[data-theme="dark"] .acct-id span { color:#83899D; }
  html[data-theme="dark"] .acct-kv { border-top:1px solid #181D2E; color:#B0B3BE; }
  html[data-theme="dark"] .acct-kv b { color:#E9EAED; }
  html[data-theme="dark"] .acct-kv b.ok { color:#91D4B8; }
  html[data-theme="dark"] .acct-kv b.off { color:#D194A4; }
  html[data-theme="dark"] .acct-sub { color:#B0B3BE; }
  html[data-theme="dark"] .acct-danger { border-top:1px dashed #21283F; }
  html[data-theme="dark"] .acct-danger summary { color:#D194A4; }
  html[data-theme="dark"] #prof .btn.danger { color:#D194A4; background:#0D1019; }
  html[data-theme="dark"] .acct-tick b { color:#E9EAED; }
  html[data-theme="dark"] .acct-tick small { color:#ACB0B9; }
  html[data-theme="dark"] #prof .acct-tick input { border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] #prof .acct-tick input:checked::after { border-left:1.8px solid #E9EAED; border-bottom:1.8px solid #E9EAED; }
  html[data-theme="dark"] .conv-q { border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] .conv-q span { color:#6C738A; }
  html[data-theme="dark"] .conv-a .meta { color:#6C738A; }
  html[data-theme="dark"] .mgt tr.mgconv:hover td { background:#131826; }
  html[data-theme="dark"] .clink { border:1px solid #252D48; background:#0D1019; color:#E9EAED; }
  html[data-theme="dark"] .clink:hover { border-color:#E9EAED; background:#0D1019; }
  html[data-theme="dark"] .clink span { color:#ACB0B9; }
  html[data-theme="dark"] .waitok { color:#B0B3BE; border:1px solid #252D48; background:#0D1019; }
  html[data-theme="dark"] .waitok b { color:#E9EAED; }
  html[data-theme="dark"] .an-g { stroke:#1C2236; }
  html[data-theme="dark"] .an-t { fill:#6C738A; }
  html[data-theme="dark"] .an-box h4 { color:#B0B3BE; }
  html[data-theme="dark"] .an-pc { color:#6C738A; }
  html[data-theme="dark"] .lp-aurora { background:linear-gradient(105deg, #0D1019 0%, #0D1019 38%, #131826 100%); }
  html[data-theme="dark"] .lp-aurora i:nth-child(1) { background:#191E3E; }
  html[data-theme="dark"] .lp-aurora i:nth-child(4) { background:#191F3E; }
  html[data-theme="dark"] .lp-aurora::after { background:linear-gradient(90deg, #0D1019 0%, rgba(13,16,25,0.92) 34%, rgba(13,16,25,0.0) 68%); }
  @media (max-width: 760px) { html[data-theme="dark"] .lp-aurora::after { background:linear-gradient(90deg, #0D1019 0%, rgba(13,16,25,0.88) 55%, rgba(13,16,25,0.35) 100%); } }
  html[data-theme="dark"] .chart-sd em { color:var(--ink-3, #ACB0B9); }
  html[data-theme="dark"] .chart-mr em { color:var(--ink-3, #ACB0B9); }
  html[data-theme="dark"] #landing #catalog .cat-v:hover { box-shadow:0 14px 34px rgba(255,255,255,0.005) !important; }
  html[data-theme="dark"] #landing #catalog .cat-art { background:linear-gradient(180deg, #111522, #0D1019); border-bottom:1px solid #191F31; }
  html[data-theme="dark"] #landing #catalog .cat-art .cv-t { fill:#989DAB; }
  html[data-theme="dark"] #landing #catalog .cat-art .cv-b { fill:#7F8BE6; }
  html[data-theme="dark"] .pr-card { border:1px solid var(--line, #252D48); background:var(--bg, #0D1019); }
  html[data-theme="dark"] .pr-top { border-bottom:1px solid var(--line-2, #181D2E); }
  html[data-theme="dark"] .verify-gate { border:1px solid var(--line, #252D48); background:var(--bg, #0D1019); }
  html[data-theme="dark"] .magic { box-shadow:0 6px 18px rgba(255,255,255,0.013); }
  html[data-theme="dark"] .magic:hover { box-shadow:0 10px 24px rgba(255,255,255,0.016); }
  html[data-theme="dark"] .magic::after { background:linear-gradient(100deg, transparent, rgba(13,16,25,0.35), transparent); }
  html[data-theme="dark"] .explain-sec { color:#7F8BE6; }
  html[data-theme="dark"] .ex-eb { color:#7F8BE6; }
  html[data-theme="dark"] .ex-scan .ex-ticks line { stroke:#2B3554; }
  html[data-theme="dark"] .edm-meta .over { color:#D392A2; }
  html[data-theme="dark"] .edfab { color:#0D1019; background:#E9EAED; box-shadow:0 10px 26px rgba(0,0,0,0.6); }
  html[data-theme="dark"] .edbar { background:#0D1019; border:1px solid #252D48; box-shadow:0 14px 40px rgba(0,0,0,0.518); color:#BDBFC9; }
  html[data-theme="dark"] body.editing [data-edk]:hover { outline-color:#7F8BE6; }
  html[data-theme="dark"] body.editing [data-edk].ed-dirty { outline-color:#E2AE83; }
  html[data-theme="dark"] #terms { background:rgba(13,16,25,0.72); }
  html[data-theme="dark"] #terms .modal { border:1px solid #252D48; background:#0D1019; box-shadow:0 30px 70px rgba(0,0,0,0.466); color:#E9EAED; }
  html[data-theme="dark"] #terms .sub { color:#ACB0B9; }
  html[data-theme="dark"] #terms .tdoc { border:1px solid #252D48; background:#0F121D; }
  html[data-theme="dark"] #terms .tdoc .lg-meta { color:#ACB0B9; }
  html[data-theme="dark"] #terms .tdoc .lg-key { background:#131826; border:1px solid #1D2338; }
  html[data-theme="dark"] #terms .tprog { color:#ACB0B9; }
  html[data-theme="dark"] #terms .tprog a { color:#B0B3BE; }
  html[data-theme="dark"] #terms .tprog .done { color:#90D5B7; }
  html[data-theme="dark"] #terms .tchecks input { accent-color:#E9EAED; }
  html[data-theme="dark"] #terms .tchecks label.off { color:#646B80; }
  html[data-theme="dark"] #terms .field span { color:#B0B3BE; }
  html[data-theme="dark"] #terms .field input { background:#0D1019; border:1px solid #252D48; color:#E9EAED; }
  html[data-theme="dark"] #terms .field input:focus { border-color:#E9EAED; box-shadow:0 0 0 3px rgba(0,0,0,0.31); }
  html[data-theme="dark"] #terms .field input:disabled { background:#131826; }
  html[data-theme="dark"] #terms .tsigned { color:#ACB0B9; }
  html[data-theme="dark"] #terms .btn.primary { border:1px solid #E9EAED; background:#E9EAED; color:#0D1019; }
  html[data-theme="dark"] #terms .btn.primary:disabled { background:#2E3858; border-color:#2E3858; }
  html[data-theme="dark"] #terms .btn.quiet { color:#ACB0B9; border-bottom:1px solid #252D48; }
  html[data-theme="dark"] #terms .err { color:#D194A4; }
  html[data-theme="dark"] .viz::after, html[data-theme="dark"] .chart-col::after, html[data-theme="dark"] .mon-chart::after { color:#E9EAED; }
  html[data-theme="dark"] .sharebtn { background:#0D1019; }
  html[data-theme="dark"] .sharebtn:hover { border-color:#2C3656; }
  html[data-theme="dark"] .sharemenu { background:#0D1019; border:1px solid #1C2236; box-shadow:0 16px 40px rgba(0,0,0,0.414); }
  html[data-theme="dark"] .sharemenu .sm-h { color:#ACB0B9; }
  html[data-theme="dark"] .sharemenu button { color:#E9EAED; }
  html[data-theme="dark"] .sharemenu button:hover { background:#141826; }
  html[data-theme="dark"] .sharemenu hr { border-top:1px solid #161B2C; }
  html[data-theme="dark"] .sharemenu .sm-prev { border:1px solid #161B2C; background:#111522; color:#63697E; }
  html[data-theme="dark"] .pr-price .pr-trial { color:#85E0BB; background:#181E2F; }
  html[data-theme="dark"] .acct-nav button { border-left:2px solid #1C2337; }
  html[data-theme="dark"] .acct-nav button:hover { background:#131826; }
  @media (max-width: 860px) { html[data-theme="dark"] .acct-nav button { border:1px solid #1C2337; } }
  html[data-theme="dark"] .dtools { border:1px solid #1C2236; background:#0D1019; }
  html[data-theme="dark"] .dtools button { color:#B0B3BE; }
  html[data-theme="dark"] .dtools button:hover { background:#151928; color:#E9EAED; }
  html[data-theme="dark"] .dtools button.on { color:#7F8BE6; }
  html[data-theme="dark"] .dtools .dsep { background:#1C2236; }
  html[data-theme="dark"] #chartcard.full { background:var(--bg, #0D1019); }
  html[data-theme="dark"] .lp-film-box { border:1px solid #252D48; background:#121623; box-shadow:0 24px 60px rgba(0,0,0,0.362); }
  html[data-theme="dark"] .bw-dots button { border:1px solid #63697E; }
  html[data-theme="dark"] .lp-herobox { background:#0D1019; }
  html[data-theme="dark"] .lp-herobox::before { background-image:linear-gradient(#161B2B 1px, transparent 1px), linear-gradient(90deg, #161B2B 1px, transparent 1px); -webkit-mask-image:linear-gradient(180deg, #F4F4F6 0%, rgba(0,0,0,.55) 55%, transparent 96%); mask-image:linear-gradient(180deg, #F4F4F6 0%, rgba(0,0,0,.55) 55%, transparent 96%); }
  html[data-theme="dark"] .lp-hero .lp-eyebrow { border:1px solid #1B2134; background:#111521; color:#BDBFC9; }
  html[data-theme="dark"] .lp-hero h1 em { color:#7F8BE6; }
  html[data-theme="dark"] .lp-sec .lp-eb { color:#7F8BE6; }
  html[data-theme="dark"] .lp .cat, html[data-theme="dark"] #landing #catalog .cat-v { border:1px solid #1B2135; }
  html[data-theme="dark"] .cat-facts { border-top:1px solid #161B2B; }
  html[data-theme="dark"] .cat-facts em { color:#6F768D; }
  html[data-theme="dark"] .cat-facts b { color:#E9EAED; }
  html[data-theme="dark"] .brush-signature .lp-eb { color:#7F8BE6; }
  html[data-theme="dark"] .lp-steps .n { color:#7F8BE6; }
  html[data-theme="dark"] .lp-steps > div { border:1px solid #1B2135; background:#0D1019; }
  html[data-theme="dark"] .nv-pop.nv-mega { border:1px solid #1B2135; box-shadow:0 24px 60px rgba(0,0,0,0.362); }
  html[data-theme="dark"] .nv-mega .mh-t { color:#A2A6B3; }
  html[data-theme="dark"] .nv-mega .mi { background:#141827; color:#8590E0; }
  html[data-theme="dark"] .nv-mega .mg a:is(:hover, :focus-visible) .mi { background:#191F3E; }
  html[data-theme="dark"] .nv-mega .mt b { color:#E9EAED; }
  html[data-theme="dark"] .nv-mega .mt span { color:#ACB0B9; }
  html[data-theme="dark"] .nv-mega .mf { background:#111522; border-top:1px solid #161B2B; }
  html[data-theme="dark"] .nv-mega .mf a { color:#E9EAED; }
  html[data-theme="dark"] .nv-mega .mf a + a { border-left:1px solid #161B2B; }
  html[data-theme="dark"] .nv-mega .mf a svg { color:#A2A6B3; }
  html[data-theme="dark"] .nv-mega .mf a:is(:hover, :focus-visible) { background:#161A2A; }
  html[data-theme="dark"] .mx-dark { border-image:conic-gradient(#131724 0 0) fill 0 / / 0 100vmax; }
  html[data-theme="dark"] .mx-gray { border-image:conic-gradient(#111522 0 0) fill 0 / / 0 100vmax; }
  html[data-theme="dark"] .mx-copy .lp-eb { color:#7F8BE6; }
  html[data-theme="dark"] .mx-dark .mx-copy h2 { color:#0D1019; }
  html[data-theme="dark"] .mx-pts b { color:#0D1019; }
  html[data-theme="dark"] .mx-thumb { box-shadow:0 0 0 1px rgba(255,255,255,0.033), 0 0 26px rgba(255,255,255,0.033), inset 0 1px 0 rgba(255,255,255,0.015); }
  html[data-theme="dark"] .mx-stats b { color:#0D1019; }
  html[data-theme="dark"] .mx-stats span { color:#A7AEBE; }
  html[data-theme="dark"] .lp-who.mx-cards > div { border:1px solid #1B2135; border-top:1px solid #1B2135; background:#0D1019; }
  html[data-theme="dark"] .mx-ic { background:#141827; }
  html[data-theme="dark"] .mx-ic svg { stroke:#8590E0; }
  html[data-theme="dark"] .lp-who.mx-cards .w4 { color:#7F8BE6; }
  html[data-theme="dark"] .mx-pill { border:1px solid #191F3E; background:#131826; }
  html[data-theme="dark"] .mx-more { color:#E9EAED; }
  html[data-theme="dark"] .mx-more:hover { color:#7F8BE6; }
  html[data-theme="dark"] .pp-src { border:1px solid #242C46; background:#0D1019; box-shadow:0 1px 2px rgba(0,0,0,0.154); }
  html[data-theme="dark"] .pp-src em { color:#ACB0B9; }
  html[data-theme="dark"] .pp-src span { border:1px solid #1B2135; color:#E9EAED; background:#0D1019; }
  html[data-theme="dark"] .pp-eng { box-shadow:0 24px 48px rgba(255,255,255,0.014); }
  html[data-theme="dark"] .pp-ic { background:rgba(13,16,25,0.16); border:1px solid rgba(13,16,25,0.28); }
  html[data-theme="dark"] .pp-eng em { background:rgba(13,16,25,0.14); }
  html[data-theme="dark"] .pp-out { border:1.5px dashed #2B3554; background:#10131F; color:#E9EAED; }
  html[data-theme="dark"] .pp-out .pp-ic { background:#151A29; border-color:#1B2135; color:#A2A6B3; }
  html[data-theme="dark"] .pp-out span { color:#ACB0B9; }
  html[data-theme="dark"] .mx-checks { border-top:1px solid #161B2B; }
  html[data-theme="dark"] .mx-ch-h .lp-eb { color:#7F8BE6; }
  html[data-theme="dark"] .mx-ch-h h3 { color:#E9EAED; }
  html[data-theme="dark"] .mx-ch-h p { color:#A2A6B3; }
  html[data-theme="dark"] .mx-ch-g i svg { stroke:#8590E0; }
  html[data-theme="dark"] .mx-ch-g h4 { color:#E9EAED; }
  html[data-theme="dark"] .mx-ch-g p { color:#A2A6B3; }
  html[data-theme="dark"] .mx-three h3 { color:#E9EAED; }
  html[data-theme="dark"] .mx-three p { color:#A2A6B3; }
  html[data-theme="dark"] .mx-faq-h .lp-eb { color:#7F8BE6; }
  html[data-theme="dark"] #landing > footer.mx-foot { border-top:1px solid #161B2B; color:#A2A6B3; }
  html[data-theme="dark"] .mf-wm { color:#E9EAED; }
  html[data-theme="dark"] .mf-wm i { color:#7F8BE6; }
  html[data-theme="dark"] .mf-social a { border:1px solid #1C2337; color:#A2A6B3; }
  html[data-theme="dark"] .mf-social a:hover, html[data-theme="dark"] .mf-social a:focus-visible { color:#7F8BE6; }
  html[data-theme="dark"] .mf-cols h3 { color:#E9EAED; }
  html[data-theme="dark"] .mf-cols a { color:#A2A6B3; }
  html[data-theme="dark"] .mf-cols a:hover { color:#7F8BE6; }
  html[data-theme="dark"] .mf-bot { border-top:1px solid #161B2B; color:#8A90A3; }
  html[data-theme="dark"] .mx-dark .lp-eb { color:#7F8BE6; }
  html[data-theme="dark"] .mx-dark .mx-copy h2 { color:#E9EAED; }
  html[data-theme="dark"] .mx-dark .lp-lead, html[data-theme="dark"] .mx-dark .mx-pts p { color:#A2A6B3; }
  html[data-theme="dark"] .mx-dark .mx-pts b { color:#E9EAED; }
  html[data-theme="dark"] .mx-dark .mx-pts i svg { stroke:#8590E0; }
  html[data-theme="dark"] .mx-dark .mx-stats { background:#1B2135; border-color:#1B2135; }
  html[data-theme="dark"] .mx-dark .mx-stats div { background:#0D1019; }
  html[data-theme="dark"] .mx-dark .mx-stats b { color:#E9EAED; }
  html[data-theme="dark"] .mx-dark .mx-stats span { color:#ACB0B9; }
  html[data-theme="dark"] .lp-film video { -webkit-mask-image:linear-gradient(90deg, transparent 0, #F4F4F6 9%, #F4F4F6 91%, transparent 100%), linear-gradient(180deg, transparent 0, #F4F4F6 10%, #F4F4F6 94%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #F4F4F6 9%, #F4F4F6 91%, transparent 100%), linear-gradient(180deg, transparent 0, #F4F4F6 10%, #F4F4F6 94%, transparent 100%); }
  html[data-theme="dark"] .lp-note { color:#ACB0B9; }
  html[data-theme="dark"] .tempo-track .vd-ab { color:#7F8BE6; background:#131826; }
  html[data-theme="dark"] .tempo-track .vd-ch { color:#E0A185; background:#3E2719; }
  html[data-theme="dark"] .an-sect h4 { color:#B0B3BE; }
  html[data-theme="dark"] .an-r { fill:#91CBD4; }
  html[data-theme="dark"] .an-w th { color:#6F768D; }
  html[data-theme="dark"] .mnav-btn { border:1px solid #1B2135; background:#0D1019; color:#E9EAED; }
  html[data-theme="dark"] .mnav-in { background:#0D1019; border-bottom:1px solid #1B2135; box-shadow:0 24px 50px rgba(0,0,0,0.414); }
  html[data-theme="dark"] .mn-g { border-bottom:1px solid #161B2B; }
  html[data-theme="dark"] .mn-h { color:#6F768D; }
  html[data-theme="dark"] .mnav-in .mg, html[data-theme="dark"] .mnav-in a:not(.mn-l):not(.mn-f):not(.btn) { color:#E9EAED; }
  html[data-theme="dark"] .mnav-in .mi { background:#141827; color:#8590E0; }
  html[data-theme="dark"] .mnav-in .mt b { color:#E9EAED; }
  html[data-theme="dark"] .mnav-in .mt span { color:#ACB0B9; }
  html[data-theme="dark"] .mnav-in a.mn-f { color:#E9EAED; }
  html[data-theme="dark"] .mnav-in a.mn-f svg { color:#A2A6B3; }
  html[data-theme="dark"] .mnav-in a.mn-l { color:#E9EAED; border-bottom:1px solid #161B2B; }
  html[data-theme="dark"] html.embed[data-theme="dark"] { --embed-bg:#EDEDF0; }
  html[data-theme="dark"] html.embed[data-theme="dark"] { --viz-2:#232B44 !important; }
  @media (max-width: 760px) { html[data-theme="dark"] #landing .lp-film video { -webkit-mask-image:linear-gradient(180deg, transparent 0, #F4F4F6 6%, #F4F4F6 95%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #F4F4F6 6%, #F4F4F6 95%, transparent 100%); } }
  @media (max-width: 760px) { html[data-theme="dark"] .mn-acts { background:#0D1019; border-top:1px solid #161B2B; } }
  html[data-theme="dark"] .lp-hero .lp-tag { color:#E9EAED; }
  /* colours written into SVG attributes */
  html[data-theme="dark"] [fill="#0F1320"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { fill:#E9EAED; }
  html[data-theme="dark"] [fill="#16181D"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { fill:#E9EAED; }
  html[data-theme="dark"] [fill="#5B616B"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { fill:#A2A6B3; }
  html[data-theme="dark"] [fill="#5D6680"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { fill:#A6ADBF; }
  html[data-theme="dark"] [fill="#B9C0CB"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { fill:#464A59; }
  html[data-theme="dark"] [fill="#E8EBFA"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { fill:#161B2B; }
  html[data-theme="dark"] [fill="#FFFFFF"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { fill:#0D1019; }
  html[data-theme="dark"] [fill="#eef2f7"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { fill:#151A29; }
  html[data-theme="dark"] [fill="#eef2ff"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { fill:#131724; }
  html[data-theme="dark"] [fill="#fff"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { fill:#0D1019; }
  html[data-theme="dark"] [stop-color="#ffffff"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { stop-color:#0D1019; }
  html[data-theme="dark"] [stroke="#0f172a"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { stroke:#8EA4D7; }
  html[data-theme="dark"] [stroke="#16181D"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { stroke:#E9EAED; }
  html[data-theme="dark"] [stroke="#222A42"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { stroke:#9AA6CB; }
  html[data-theme="dark"] [stroke="#2A3352"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { stroke:#9AA5CB; }
  html[data-theme="dark"] [stroke="#2B3FD6"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { stroke:#7F8BE6; }
  html[data-theme="dark"] [stroke="#3A4566"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { stroke:#9DA8C8; }
  html[data-theme="dark"] [stroke="#3f4443"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { stroke:#BFC2CB; }
  html[data-theme="dark"] [stroke="#5FBF9A"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { stroke:#92D3BA; }
  html[data-theme="dark"] [stroke="#7f8ab0"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { stroke:#A0A9C5; }
  html[data-theme="dark"] [stroke="#C9CFDA"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { stroke:#2B3554; }
  html[data-theme="dark"] [stroke="#D5D9DF"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { stroke:#252D48; }
  html[data-theme="dark"] [stroke="#E07A93"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { stroke:#E2839A; }
  html[data-theme="dark"] [stroke="#FFFFFF"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { stroke:#0D1019; }
  html[data-theme="dark"] [stroke="#eef2f7"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { stroke:#151A29; }
  html[data-theme="dark"] [stroke="#fff"]:not(.gx-mock *):not(.mx-cta-art *):not(.mx-term *):not(.lp-film *) { stroke:#0D1019; }
  /* hand-written corrections (tools/dark_overrides.css) */
  html[data-theme="dark"] { color-scheme:dark; }
  /* the film is multiplied onto the light hero; on navy that would black it out, so it sits on the page as it is */
  html[data-theme="dark"] .lp-film video { mix-blend-mode:normal; }
  /* the film: on navy its light ground would glow through the feathered edge, so it becomes a plain framed card */
  html[data-theme="dark"] .lp-film video { -webkit-mask-image:none; mask-image:none; }
  html[data-theme="dark"] .lp-film-box { border:1px solid #262E45; border-radius:12px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.45); }
  html[data-theme="dark"] .lp-film video { filter:brightness(.9); }
  /* icon tiles: soft indigo [user 2026-10-17 picked B]; in dark a translucent indigo tile with a light indigo glyph */
  html[data-theme="dark"] .nv-mega .mi, html[data-theme="dark"] .mx-ic, html[data-theme="dark"] .mnav-in .mi { background:rgba(127,139,230,.14); color:#A9B2F2; }
  html[data-theme="dark"] .nv-mega .mg a:is(:hover, :focus-visible) .mi { background:rgba(127,139,230,.24); }
  html[data-theme="dark"] .mx-ic svg, html[data-theme="dark"] .mx-dark .mx-pts i svg, html[data-theme="dark"] .mx-ch-g i svg { stroke:#A9B2F2; }
/* blog cover colours: in dark, the background and grid stay the neutral cover navy; only the line, dots and shading carry the colour */
html[data-theme="dark"] .bl-cover[class*="cv-c-"] .cv-bg { fill:#111521; }
html[data-theme="dark"] .bl-cover[class*="cv-c-"] .cv-grid { stroke:#191F31; }
/* footer social marks: the hover ring follows the hover colour in dark too */
html[data-theme="dark"] .mf-social a:hover, html[data-theme="dark"] .mf-social a:focus-visible { border-color:#7F8BE6; }
/* hero tagline marks: the drawn line takes the dark accent */
html[data-theme="dark"] .lp-hero .lp-tag .lp-mark::after { background:#7F8BE6; }
/* pricing card: the frame and glow in the dark accent */
html[data-theme="dark"] .pr-card { border-color:transparent; box-shadow:0 0 0 1px rgba(127,139,230,.10), 0 18px 48px -18px rgba(0,0,0,.55), 0 0 30px rgba(127,139,230,.12); }
html[data-theme="dark"] .pr-card::before { background-image:linear-gradient(115deg, #2A3352 0%, #3B4677 30%, #7F8BE6 45%, #B3BBF4 50%, #7F8BE6 55%, #3B4677 70%, #2A3352 100%); }
/* about page: the accent marks in the dark accent */
html[data-theme="dark"] .co .co-k, html[data-theme="dark"] .co .co-commit li::before, html[data-theme="dark"] .co .co-quote em { color:#7F8BE6; }
  /* ===== end of the generated dark theme ===== */

  /* ---- APP1 polish [user 2026-10-26: "only visual polishing now to app1": APP2's layers button and level pills, no numbers box
     beside the chart, calmer controls]. One block, last in the sheet, so it reads as one layer over the rest. ---- */
  html[data-theme] #chartcard .chart-wrap { grid-template-columns:minmax(0, 1fr); }
  html[data-theme] #chartcard .chart-legend { display:none; }
  html[data-theme] #chartcard .chart-ctl { gap:10px; }
  html[data-theme] #chartcard .chart-ctl .chart-tools + .ctl-l { margin-left:6px; }
  html[data-theme] #chart-groups { position:relative; display:flex; flex-wrap:nowrap; gap:0; margin:0 4px 0 0; padding:0; border:0; }
  html[data-theme] #chart-groups .laybtn { display:inline-flex; align-items:center; gap:9px; height:34px; padding:0 12px; border:1px solid var(--line-2); border-radius:10px; background:var(--bg); cursor:pointer;
    font:600 12.5px var(--sans); color:var(--ink); box-shadow:0 1px 2px rgba(15,23,42,.05); }
  html[data-theme] #chart-groups .laybtn:hover, html[data-theme] #chart-groups .laybtn.open { border-color:var(--acc-line, var(--line-2)); background:var(--acc-tint, var(--bg-2)); }
  #chart-groups .laybtn .dots { display:inline-flex; gap:3px; } #chart-groups .laybtn .dots i { width:7px; height:7px; border-radius:50%; background:var(--c); }
  #chart-groups .laybtn small { font:600 11px var(--mono); color:var(--muted); } #chart-groups .laybtn svg { width:12px; height:12px; fill:none; stroke:var(--muted); stroke-width:2; }
  #chart-groups .laypop { position:absolute; top:calc(100% + 8px); left:0; z-index:40; width:388px; max-height:min(72vh, 640px); overflow-y:auto; display:none; padding:8px;
    background:var(--bg); border:1px solid var(--line-2); border-radius:14px; box-shadow:0 18px 50px rgba(15,23,42,.16), 0 2px 6px rgba(15,23,42,.06); }
  html[data-theme="dark"] #chart-groups .laypop { box-shadow:0 18px 50px rgba(0,0,0,.5); }
  #chart-groups .laypop.on { display:block; }
  #chart-groups .laypop .lg { font:600 10px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:10px 10px 6px; }
  html[data-theme] #chart-groups .laypop button.li { display:grid; grid-template-columns:30px minmax(0, 1fr) auto; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:transparent;
    border-radius:10px; padding:8px 10px; cursor:pointer; color:var(--ink); font:inherit; }
  html[data-theme] #chart-groups .laypop button.li:hover { background:var(--bg-2); }
  #chart-groups .laypop .li b { display:block; font:600 13px var(--sans); color:var(--ink); } #chart-groups .laypop .li .w { display:block; font-size:11.5px; color:var(--muted); line-height:1.4; margin-top:1px; }
  #chart-groups .laypop .li.locked b { color:var(--muted); }
  #chart-groups .sw2 { position:relative; width:30px; height:17px; border-radius:999px; background:var(--line-2); transition:background .15s; }
  #chart-groups .sw2::after { content:""; position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%; background:var(--bg); box-shadow:0 1px 2px rgba(0,0,0,.18); transition:transform .15s; }
  #chart-groups .li.on .sw2 { background:var(--c); } #chart-groups .li.on .sw2::after { transform:translateX(13px); }
  html[data-theme] #chartcard .chart-tools { display:inline-flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:10px; background:var(--bg-2); }
  html[data-theme] #chartcard .chart-tools button { border:0; border-radius:7px; padding:5px 10px; font:600 11.5px var(--mono); color:var(--muted); background:transparent; }
  html[data-theme] #chartcard .chart-tools button + button { border-left:0; }
  html[data-theme] #chartcard .chart-tools button:hover { color:var(--ink); background:transparent; }
  html[data-theme] #chartcard .chart-tools button.on { background:var(--bg); color:var(--ink); box-shadow:0 1px 2px rgba(15,23,42,.10), 0 0 0 1px var(--line); }
  html[data-theme="dark"] #chartcard .chart-tools button.on { background:var(--line-2); color:var(--ink); box-shadow:none; }
  html[data-theme] #chartcard .chart-full { height:34px; border:1px solid var(--line-2); border-radius:10px; background:var(--bg); padding:0 12px; box-shadow:0 1px 2px rgba(15,23,42,.05); }
  html[data-theme] #chartcard .tvrow { gap:8px; margin-top:12px; } html[data-theme] #chartcard .tvrow .btn { height:32px; border-radius:9px; font-size:12.5px; }
  html[data-theme] #viztip { border-radius:12px; padding:10px 12px; border:1px solid var(--line-2); background:color-mix(in srgb, var(--bg) 92%, transparent); box-shadow:0 14px 40px rgba(15,23,42,.14);
    -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); }
  html[data-theme="dark"] #viztip { box-shadow:0 14px 40px rgba(0,0,0,.5); }

  /* the replay [user 2026-10-26: "implement the replay function into app1"]: APP2's bar, in APP1's colours */
  html[data-theme] #chartcard .chart-rp { height:34px; border:1px solid var(--line-2); border-radius:10px; background:var(--bg); padding:0 12px; box-shadow:0 1px 2px rgba(15,23,42,.05); }
  html[data-theme] #chartcard .chart-rp svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  html[data-theme] #chartcard .chart-rp.on { border-color:var(--acc-line, var(--blue-line)); background:var(--acc-tint, var(--blue-soft)); color:var(--acc, var(--blue)); }
  #chartcard .rp { position:absolute; left:0; right:0; margin:0 auto; width:max-content; bottom:44px; z-index:8; display:none; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; padding:6px 8px; max-width:calc(100% - 24px);
    border:1px solid var(--line-2); border-radius:14px; background:color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 14px 40px rgba(15,23,42,.14); }
  html[data-theme="dark"] #chartcard .rp { box-shadow:0 14px 40px rgba(0,0,0,.5); }
  #chartcard .rp.on { display:flex; }
  #chartcard .rp button { display:grid; place-items:center; height:30px; min-width:30px; border:0; border-radius:8px; background:transparent; color:var(--ink-2); cursor:pointer; font:600 11.5px var(--mono); padding:0 8px; }
  #chartcard .rp button:hover { background:var(--bg-2); color:var(--ink); } #chartcard .rp button.on { background:var(--bg-2); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); }
  #chartcard .rp button:disabled { opacity:.35; cursor:default; } #chartcard .rp button svg { width:15px; height:15px; }
  #chartcard .rp .pl { background:var(--acc, var(--blue)); color:var(--on-accent, #fff); } #chartcard .rp .pl:hover { background:var(--acc, var(--blue)); color:var(--on-accent, #fff); filter:brightness(1.08); }
  #chartcard .rp .x { font-family:var(--sans); }
  #chartcard .rp input[type=range] { width:min(300px, 22vw); accent-color:var(--acc, var(--blue)); }
  #chartcard .rp .tm { font:600 12px var(--mono); color:var(--ink); min-width:112px; text-align:center; white-space:nowrap; } #chartcard .rp .sep { width:1px; height:20px; background:var(--line); }
  #chartcard .rp .tag { font:600 10px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--acc, var(--blue)); padding:0 2px 0 4px; } #chartcard .rp .mp { font-size:11.5px; color:var(--muted); white-space:nowrap; }
  #rp-sp, #rp-from { display:flex; gap:2px; } #chartcard #rp-from button { font:600 11.5px var(--sans); }
  @media (max-width: 760px) { #chartcard .rp { bottom:38px; } #chartcard .rp .mp, #chartcard .rp .tag { display:none; } #chartcard .rp input[type=range] { width:42vw; } }

  /* ---- loading [user 2026-10-27: "a loading animation until the whole application is fully operated, and each time the app is
     thinking or loading data"]: the app's boot screen (a distribution drawing itself) until the data, the chart and the sections
     are in, then a slim bar at the top while a reader's own action loads or the assistant thinks. Colours are the theme's
     variables, so dark mode follows without a generated twin. ---- */
  #boot { position:fixed; inset:0; z-index:2000; display:grid; place-items:center; background:var(--page, var(--bg)); transition:opacity .35s ease, visibility .35s; }
  #boot.done { opacity:0; visibility:hidden; }
  #boot .bt-in { display:grid; justify-items:center; gap:16px; }
  #boot .bt-word { font:800 38px/1 "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; letter-spacing:-.045em; color:var(--ink); }
  #boot .bt-word i { display:inline-block; font-style:normal; color:var(--acc, var(--blue)); margin-left:.01em; transform-origin:50% 80%; animation:bt-breath 1.6s ease-in-out infinite; }
  #boot .bt-track { position:relative; width:132px; height:2px; border-radius:2px; background:var(--line); overflow:hidden; }
  #boot .bt-track i { position:absolute; top:0; bottom:0; left:-45%; width:45%; border-radius:2px; background:var(--acc, var(--blue)); animation:bt-sweep 1.3s cubic-bezier(.65,0,.35,1) infinite; }
  #boot .bt-msg { font:600 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); min-height:16px; }
  @keyframes bt-breath { 0%, 100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.45); opacity:.55; } }
  @keyframes bt-sweep { 0% { left:-45%; } 100% { left:100%; } }
  html.booting, html.booting body { overflow:hidden; }
  #loadbar { position:fixed; left:0; right:0; top:0; height:2px; z-index:1999; overflow:hidden; opacity:0; transition:opacity .2s; pointer-events:none; }
  #loadbar.on { opacity:1; }
  #loadbar i { position:absolute; top:0; bottom:0; left:0; width:40%; background:linear-gradient(90deg, transparent, var(--acc, var(--blue)), transparent); animation:lb-run 1.1s ease-in-out infinite; will-change:transform; }
  @keyframes lb-run { 0% { transform:translateX(-100%); } 100% { transform:translateX(250%); } }   /* moved, not re-laid out [2026-10-28] */
  @media (prefers-reduced-motion: reduce) {
    #boot .bt-word i { animation:none; } #boot .bt-track i { animation:none; left:0; width:100%; opacity:.5; } #boot .bt-in { animation:bt-pulse 2s ease-in-out infinite; }
    #loadbar i { animation:none; left:0; width:100%; opacity:.6; transform:none; } }
  @keyframes bt-pulse { 0%, 100% { opacity:1; } 50% { opacity:.55; } }
  /* ---- the sections rewritten [user 2026-10-27]: the verdict leads, tiles compare, what changes it, one row per level ---- */
  html[data-theme] .sec2.revamp .sec2-h .vd { font:500 17px/1.55 var(--sans); color:var(--ink); margin:6px 0 16px 12px; max-width:1060px; letter-spacing:-.005em; }
  html[data-theme] .sec2.revamp .sec2-h .vd b { display:inline; font:600 16px var(--mono); letter-spacing:-.02em; color:var(--ink); white-space:nowrap; margin:0; }
  html[data-theme] .sec2.revamp .in b small { font:600 12px var(--mono); color:var(--muted); margin-left:6px; letter-spacing:0; }
  html[data-theme] .sec2.revamp .in .vs { display:block; font:600 12px/1.4 var(--mono); color:var(--ink-2); margin-top:5px; }
  html[data-theme] .sec2.revamp .in p { margin-top:6px; }
  html[data-theme] .sec2.revamp .chg { display:flex; gap:14px; align-items:flex-start; border-left:3px solid var(--acc, var(--blue)); background:var(--bg-2); border-radius:0 10px 10px 0; padding:11px 15px; margin:0 0 18px; }
  html[data-theme] .sec2.revamp .chg span { font:600 10px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--acc, var(--blue)); white-space:nowrap; padding-top:3px; }
  html[data-theme] .sec2.revamp .chg p { margin:0; font-size:13.5px; line-height:1.55; color:var(--ink); }
  html[data-theme] .sec2.revamp .chg p b { display:inline; font:600 13px var(--mono); margin:0; }
  .lvr-w { overflow-x:auto; margin:6px 0 10px; }
  html[data-theme] table.lvr { width:100%; border-collapse:collapse; font-size:12.5px; min-width:860px; }
  html[data-theme] table.lvr th { font:600 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:left; padding:8px 10px; border-bottom:1px solid var(--line-2); }
  html[data-theme] table.lvr td { padding:10px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-2); line-height:1.45; }
  html[data-theme] table.lvr td.n { white-space:nowrap; } html[data-theme] table.lvr td.n b { display:block; font:600 13.5px var(--sans); color:var(--ink); } html[data-theme] table.lvr td.n span { font:600 14.5px var(--mono); color:var(--acc, var(--blue)); }
  html[data-theme] table.lvr .od { font:600 12px var(--mono); color:var(--ink); white-space:nowrap; }
  html[data-theme] table.lvr .ob { height:5px; border-radius:3px; background:var(--line); margin-top:5px; max-width:180px; overflow:hidden; } html[data-theme] table.lvr .ob i { display:block; height:100%; border-radius:3px; background:var(--acc, var(--blue)); }
  html[data-theme] table.lvr .ob.b2 i { opacity:.4; }
  html[data-theme] table.lvr tr.sp td { background:var(--bg-2); color:var(--muted); } html[data-theme] table.lvr tr.sp td.n span { color:var(--ink); }
  html[data-theme] table.lvr .agr { display:inline-block; font:600 10px var(--mono); letter-spacing:.06em; padding:2px 7px; border-radius:6px; background:color-mix(in srgb, var(--green) 14%, transparent); color:var(--green); margin-left:4px; }
  html[data-theme] table.lvr .agr.no { background:color-mix(in srgb, var(--red) 12%, transparent); color:var(--red); }
  /* ===== v8: the modern look [user 2026-10-27: "the layout is pretty much ok but the visuals of the cards, the charts and the graphs
     look old"]. Layout, data ranges and scales untouched: surfaces, type, colour and line only. html[data-look="classic"] (?look=classic)
     keeps the old look for comparison. Palette checked with the dataviz validator (light and dark, colour-blind separation). ===== */
  html[data-look="v8"] { --viz-1:#2B3FD6; --viz-2:#E0731B; --viz-3:#08939F; --viz-4:#9B4FCF; --viz-pos:#0B8FA0; --viz-neg:#D9475C; --viz-mid:#EEF0F4; }
  html[data-look="v8"][data-theme="dark"] { --viz-1:#7A86E4; --viz-2:#D9772F; --viz-3:#1C9AA6; --viz-4:#A274D8; --viz-pos:#22A0AD; --viz-neg:#D9586E; --viz-mid:#161B2A; }
  /* section heads: a dot, not the slanted dash; a firmer title */
  html[data-look="v8"] .sec2-h h4 { font:650 21px/1.2 var(--sans); letter-spacing:-.022em; }
  html[data-look="v8"] .sec2-h h4::before { width:8px; height:8px; border-radius:50%; background:var(--acc, var(--blue)); transform:none; box-shadow:0 0 0 4px color-mix(in srgb, var(--acc, var(--blue)) 14%, transparent); margin-right:2px; }
  html[data-look="v8"] .sec2.revamp .sec2-h .vd { margin-left:22px; }
  /* tiles: clean surfaces, a coloured dot in the label instead of the stripe, numbers in Inter, the comparison as a chip */
  html[data-look="v8"] .mod .ins { gap:12px; }
  html[data-look="v8"] .mod .ins > .in { background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:16px 18px 15px; box-shadow:0 1px 2px rgba(15,23,42,.04); transition:border-color .2s ease, box-shadow .2s ease; }
  html[data-look="v8"] .mod .ins > .in:hover { border-color:var(--line-2); box-shadow:0 8px 24px rgba(15,23,42,.07); }
  html[data-look="v8"][data-theme="dark"] .mod .ins > .in { background:var(--bg-2); box-shadow:none; }
  html[data-look="v8"] .mod .ins > .in::before { display:none; }
  html[data-look="v8"] .mod .ins > .in > .k { display:flex; align-items:center; gap:7px; font:600 10.5px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
  html[data-look="v8"] { --v8-c1:#2B3FD6; --v8-c2:#08939F; --v8-c3:#E0731B; --v8-c4:#9B4FCF; }
  html[data-look="v8"][data-theme="dark"] { --v8-c1:#7A86E4; --v8-c2:#1C9AA6; --v8-c3:#D9772F; --v8-c4:#A274D8; }
  html[data-look="v8"] .mod .ins > .in > .k::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--v8-c1); flex:0 0 auto; }
  html[data-look="v8"] .mod .ins > .in:nth-child(4n+2) > .k::before { background:var(--v8-c2); } html[data-look="v8"] .mod .ins > .in:nth-child(4n+3) > .k::before { background:var(--v8-c3); } html[data-look="v8"] .mod .ins > .in:nth-child(4n+4) > .k::before { background:var(--v8-c4); }
  html[data-theme] .viz .boxnote b { display:inline; font:600 12.5px var(--mono); letter-spacing:0; margin:0; color:var(--ink); }
  html[data-look="v8"] .mod .ins > .in > b { font:650 26px/1.1 var(--sans); letter-spacing:-.028em; font-variant-numeric:tabular-nums; color:var(--ink); }
  html[data-look="v8"] .sec2.revamp .in b small { font:500 12.5px var(--sans); letter-spacing:0; }
  html[data-look="v8"] .sec2.revamp .in .vs { display:inline-flex; align-items:center; margin-top:10px; padding:3px 10px; border-radius:999px; background:var(--bg-2); border:1px solid var(--line); font:600 11.5px var(--mono); color:var(--ink-2); max-width:100%; }
  html[data-look="v8"][data-theme="dark"] .sec2.revamp .in .vs { background:var(--bg); }
  html[data-look="v8"] .mod .ins > .in > p { font-size:13px; line-height:1.55; color:var(--muted); margin-top:10px; }
  /* every section the same way, whether or not anything has marked it "in": a section never wears a tile's frame or stripe */
  html[data-look="v8"] .mod section.sec2 { background:none; border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; padding:34px 0 12px; }
  html[data-look="v8"] .mod section.sec2::before { display:none; }
  /* what changes it: a soft callout */
  html[data-look="v8"] .sec2.revamp .chg { align-items:center; border:1px solid color-mix(in srgb, var(--acc, var(--blue)) 22%, var(--line)); border-left-width:1px; border-radius:14px; background:color-mix(in srgb, var(--acc, var(--blue)) 5%, var(--bg)); padding:12px 16px; }
  html[data-look="v8"] .sec2.revamp .chg span { padding:4px 10px; border-radius:999px; background:color-mix(in srgb, var(--acc, var(--blue)) 12%, transparent); letter-spacing:.1em; }
  /* charts: a soft panel, dotted hairline grid, quiet axes, the watermark small in a corner, fills that fade */
  html[data-look="v8"] .mod .viz { background:linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 85%, transparent) 0%, transparent 75%); border:1px solid var(--line); border-radius:18px; padding:16px 16px 10px; margin:8px 0 10px; }
  html[data-look="v8"] .viz .grid { stroke:var(--line-2); stroke-opacity:.55; stroke-dasharray:1.5 4; stroke-linecap:round; }
  html[data-look="v8"] .viz .axisline, html[data-look="v8"] .viz .zero { stroke:var(--line-2); stroke-opacity:.9; }
  html[data-look="v8"] .viz .axis { fill:var(--muted); font:500 11px var(--sans); font-variant-numeric:tabular-nums; }
  html[data-look="v8"] .viz .lab { font-family:var(--sans); } html[data-look="v8"] .viz .ptitle { font:600 11.5px var(--sans); letter-spacing:.01em; fill:var(--ink-2); }
  html[data-look="v8"] .viz rect.pos, html[data-look="v8"] .viz rect.neg { opacity:.055 !important; }
  html[data-look="v8"] .viz .bstep path.f1, html[data-look="v8"] .viz .bstep path.f2 { opacity:.22 !important; }
  html[data-look="v8"] .viz path.ink { stroke-width:2.2px; }
  html[data-look="v8"] .viz::after, html[data-look="v8"] .chart-col::after { font-size:15px !important; left:auto !important; top:auto !important; right:18px; bottom:12px; transform:none !important; opacity:.5; }
  html[data-look="v8"] .viz-legend .sw { border-radius:999px; }
  /* the level rows: a framed list, rounded bars that fade in */
  html[data-look="v8"] table.lvr { border:1px solid var(--line); border-radius:16px; border-collapse:separate; border-spacing:0; overflow:hidden; }
  html[data-look="v8"] table.lvr th { background:var(--bg-2); border-bottom:1px solid var(--line); padding:10px 12px; }
  html[data-look="v8"] table.lvr td { padding:12px; } html[data-look="v8"] table.lvr tbody tr:last-child td { border-bottom:0; }
  html[data-look="v8"] table.lvr tbody tr:hover td { background:color-mix(in srgb, var(--bg-2) 70%, transparent); }
  html[data-look="v8"] table.lvr .ob { height:6px; background:var(--bg-2); } html[data-look="v8"] table.lvr .ob i { background:linear-gradient(90deg, color-mix(in srgb, var(--viz-1) 45%, transparent), var(--viz-1)); }
  html[data-look="v8"] table.lvr .ob.b2 i { opacity:1; background:linear-gradient(90deg, color-mix(in srgb, var(--viz-2) 40%, transparent), var(--viz-2)); }
  html[data-look="v8"] table.lvr .agr { border-radius:999px; padding:3px 9px; }
  /* the session read woven into the sections [user 2026-10-28]: the brief's prose leads, its own emphasis in the text face */
  html[data-theme] .sec2.revamp .sec2-h .vd.vd-brief { font:400 15.5px/1.68 var(--sans); color:var(--ink); max-width:1080px; letter-spacing:0; }
  html[data-theme] .sec2.revamp .sec2-h .vd.vd-brief b { display:inline; font:650 15.5px/1.68 var(--sans); white-space:normal; letter-spacing:0; color:var(--ink); }
  @media (max-width: 640px) { html[data-theme] .sec2.revamp .sec2-h .vd.vd-brief, html[data-theme] .sec2.revamp .sec2-h .vd.vd-brief b { font-size:14.5px; } }
  /* gist first [user 2026-10-28]: the remainder of a section's text waits behind "Continue reading" */
  .sec2 .vd.gist .r { display:none; } .sec2 .vd.gist.open .r { display:inline; animation:vd-in .35s ease; } .sec2 .vd.gist.open .ell { display:none; }
  @keyframes vd-in { from { opacity:0; } to { opacity:1; } }
  .sec2 .vd-more { display:inline-flex; align-items:center; gap:6px; margin:-8px 0 16px 22px; padding:4px 11px 4px 12px; border-radius:999px; border:1px solid var(--line); background:var(--bg); color:var(--acc, var(--blue)); font:600 12px var(--sans); cursor:pointer; transition:background .15s, border-color .15s; }
  .sec2 .vd-more:hover { background:var(--bg-2); border-color:var(--line-2); } .sec2 .vd-more svg { width:12px; height:12px; transition:transform .2s; }
  .sec2 .vd-more[aria-expanded="true"] svg { transform:rotate(180deg); }
  /* the contents rail [user 2026-10-28]: dots at the left edge, the names on hover, the section in view lit */
  #toc.rail { position:fixed; left:6px; top:50%; transform:translateY(-50%); z-index:30; }
  #toc.rail .toc-in { display:flex; flex-direction:column; padding:8px 6px; border-radius:14px; border:1px solid transparent; transition:background .18s, box-shadow .18s, border-color .18s; }
  #toc.rail:hover .toc-in { background:color-mix(in srgb, var(--bg) 94%, transparent); border-color:var(--line); box-shadow:0 12px 32px rgba(15,23,42,.12); backdrop-filter:blur(8px); }
  #toc.rail a { display:flex; align-items:center; gap:10px; height:22px; padding:0 4px; color:var(--muted); text-decoration:none; font:500 12.5px var(--sans); border-radius:8px; }
  #toc.rail a i { width:9px; height:9px; border-radius:50%; border:1.5px solid var(--line-2); background:var(--bg); flex:none; transition:background .2s, border-color .2s, box-shadow .2s, transform .2s; }
  #toc.rail a span { max-width:0; overflow:hidden; white-space:nowrap; opacity:0; transition:max-width .22s ease, opacity .18s ease; }
  #toc.rail:hover a span { max-width:220px; opacity:1; } #toc.rail a:hover { color:var(--ink); } #toc.rail a:hover i { transform:scale(1.25); }
  #toc.rail a.past i { background:color-mix(in srgb, var(--acc, var(--blue)) 28%, var(--bg)); border-color:color-mix(in srgb, var(--acc, var(--blue)) 45%, var(--line-2)); }
  #toc.rail a.on { color:var(--ink); font-weight:600; } #toc.rail a.on i { background:var(--acc, var(--blue)); border-color:var(--acc, var(--blue)); box-shadow:0 0 0 4px color-mix(in srgb, var(--acc, var(--blue)) 18%, transparent); }
  #toc.rail .toc-g { max-height:0; overflow:hidden; opacity:0; padding-left:23px; font:600 9.5px var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); transition:max-height .2s, opacity .18s, margin .2s; }
  #toc.rail:hover .toc-g { max-height:20px; opacity:1; margin:6px 0 2px; } #toc.rail .toc-sep { display:block; height:10px; }
  #toc.bar { position:fixed; left:0; right:0; z-index:30; overflow-x:auto; scrollbar-width:none; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
  #toc.bar::-webkit-scrollbar { display:none; } #toc.bar .toc-in { display:flex; gap:6px; padding:8px 12px; width:max-content; }
  #toc.bar a { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; border:1px solid var(--line); color:var(--ink-2); text-decoration:none; font:500 12.5px var(--sans); white-space:nowrap; }
  #toc.bar a i { width:6px; height:6px; border-radius:50%; background:var(--line-2); } #toc.bar a.on { background:var(--acc, var(--blue)); border-color:var(--acc, var(--blue)); color:#fff; } #toc.bar a.on i { background:#fff; }
  #toc.bar .toc-sep { width:1px; background:var(--line); margin:4px 4px; }
  body.toc-bar .desk-main { padding-top:58px; } body.toc-bar .sec2, body.toc-bar #chartcard { scroll-margin-top:118px; }
  #chartcard { scroll-margin-top:70px; }
  html.embed #toc { display:none !important; }
  @media print { #toc { display:none !important; } }

  /* the chart's fine print, behind a quiet link [user 2026-10-30] */
  html[data-theme] #chartcard .chart-note { min-height:0; } html[data-theme] #chartcard .chart-note:empty { display:none; }
  #chartcard .about-lk { margin-left:auto; border:0; background:transparent; padding:0 2px; font:500 11.5px var(--sans); color:var(--muted); cursor:pointer; text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px; }
  #chartcard .about-lk:hover { color:var(--ink-2); }
  #chartcard .chart-about { display:none; margin-top:10px; font-size:11.5px; line-height:1.55; color:var(--muted); max-width:860px; } #chartcard .chart-about.on { display:block; }
  #chartcard .chart-about a { color:inherit; } #chartcard.full .chart-about { display:none; }