/* The Dela website (dela.daetalabs.com): the home page, Install and Privacy. DESIGN.md, "Website".
   Black and white surfaces, Dela blue as the only accent, liquid glass where something floats, the system theme (light
   or dark). Every colour is a token below. Icons are Lucide line icons in currentColor; only the Dela mark keeps its own. */

@font-face { font-family:"Geist"; src:url("/site/Geist-1.7.2.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }

:root {
  color-scheme:light;
  --page:#ffffff; --tint:#f5f5f7; --raised:#ffffff; --surface2:#f1f1f4; --hover:#e9e9ed;
  --text:#0b0b0d; --muted:#5f5f69; --faint:#6b6b75;
  --line:rgba(0,0,0,.08); --line-strong:rgba(0,0,0,.14);
  --accent:#5B64E0; --accent-hover:#4b54d4; --accent-soft:rgba(91,100,224,.12); --on-accent:#ffffff; --accent-ink:#4d56d6;
  --good:#15803d; --warn:#b45309; --amber:#c2710c;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --card:0 1px 2px rgba(15,23,42,.04), 0 8px 28px rgba(28,34,90,.06);
  --shadow-xl:0 2px 6px rgba(28,34,90,.05), 0 30px 90px -18px rgba(28,34,90,.30);
  /* glass, and the soft colour field it floats on (the same field as Dela Doc) */
  --glass:rgba(255,255,255,.55); --glass-strong:rgba(255,255,255,.82); --glass-line:rgba(15,23,42,.08); --glass-edge:rgba(255,255,255,.9);
  --solid:#ffffff; --pop-shadow:0 0 0 1px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.10), 0 4px 60px 4px rgba(0,0,0,.03);
  --blob1:#c9d2ff; --blob2:#ffd9c4; --blob3:#e4d6ff; --blob4:#bfe0ff;
  --sheet:rgba(255,255,255,.72); --chip:rgba(255,255,255,.88); --chip-line:rgba(15,23,42,.10);
  /* the Dela bubble and its count, as in the extension */
  --disc:rgba(255,255,255,.58); --ring:rgba(91,100,224,.38); --count-bg:#111111; --count-fg:#ffffff;
  /* the liquid mark (the logo keeps these in both themes) and the headline gradient (Dela blues) */
  --liq-1:#C9D2FF; --liq-2:#7C86F2; --liq-3:#4046C9; --liq-edge:rgba(64,70,201,.18);
  --grad-1:#3d44c4; --grad-2:#7C86F2;
  /* the Evidence Engine's steps (flat): a disc per step on a thin line; a finished step and its line take these colours */
  --step-bg:#ffffff; --step-ring:rgba(0,0,0,.12); --step-done-bg:#d5daff; --step-done-ink:#3a41bd;
  --step-line:#e3e3e9; --step-line-done:#aab2ff;
  --font:"Geist", "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --gutter:28px; --nav-h:56px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme:dark;
    --page:#000000; --tint:#0c0c0e; --raised:#151517; --surface2:#1e1e21; --hover:#28282c;
    --text:#f5f5f7; --muted:#a3a3ad; --faint:#8e8e98;
    --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16);
    --accent:#7C86F2; --accent-hover:#8e97f6; --accent-soft:rgba(124,134,242,.18); --on-accent:#0b0d1a; --accent-ink:#8f98f7;
    --good:#3ecf8e; --warn:#f5a524; --amber:#f5a524;
    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --card:0 0 0 .5px rgba(255,255,255,.06);
    --shadow-xl:0 0 0 .5px rgba(255,255,255,.08), 0 40px 120px -24px rgba(0,0,0,.9);
    --glass:rgba(22,22,28,.52); --glass-strong:rgba(32,32,40,.82); --glass-line:rgba(255,255,255,.10); --glass-edge:rgba(255,255,255,.12);
    --solid:#242428; --pop-shadow:inset 0 0 1px rgba(255,255,255,.2), 0 10px 30px rgba(0,0,0,.5);
    --blob1:#2b3290; --blob2:#4a2a22; --blob3:#3a1f58; --blob4:#0f3b52;
    --sheet:rgba(14,14,18,.62); --chip:rgba(255,255,255,.06); --chip-line:rgba(255,255,255,.13);
    --disc:rgba(255,255,255,.06); --ring:rgba(124,134,242,.45); --count-bg:#f2f2f2; --count-fg:#111111;
    --liq-edge:rgba(255,255,255,.18);
    --grad-1:#8f99ff; --grad-2:#d3d9ff;
    --step-bg:#1e1e21; --step-ring:rgba(255,255,255,.12); --step-done-bg:#262c7e; --step-done-ink:#cdd2ff;
    --step-line:#26262a; --step-line-done:#454dbd;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }
body { margin:0; min-height:100vh; background:var(--page); color:var(--text); font:17px/1.55 var(--font); letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip; }
h1, h2, h3, h4, p, figure { margin:0; }
ul, ol { margin:0; padding:0; list-style:none; }
strong, b { font-weight:600; }
a { color:var(--accent-ink); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }
.lead a, .faq a, .page-body a:not(.btn), .page-note a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, currentColor 45%, transparent); }
.lead a:hover, .faq a:hover, .page-body a:not(.btn):hover, .page-note a:hover { text-decoration-color:currentColor; }
button { font:inherit; color:inherit; }
svg { display:block; flex:none; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
::selection { background:var(--accent-soft); }
.defs { position:absolute; width:0; height:0; overflow:hidden; }
.skip { position:fixed; left:16px; top:-64px; z-index:100; padding:10px 16px; border-radius:12px; background:var(--text); color:var(--page); font-weight:500; transition:top .2s var(--ease); }
.skip:focus { top:12px; text-decoration:none; }

/* the Dela mark: liquid gradient body and a soft highlight */
.mark { overflow:visible; }
.mark .body { fill:url(#dl-liquid); stroke:var(--liq-edge); stroke-width:8; stroke-linejoin:round; }
.mark .sheen { fill:url(#dl-sheen); opacity:.55; }
.liq-1 { stop-color:var(--liq-1); } .liq-2 { stop-color:var(--liq-2); } .liq-3 { stop-color:var(--liq-3); }
.sheen-0 { stop-color:#ffffff; stop-opacity:.9; } .sheen-1 { stop-color:#ffffff; stop-opacity:0; }

/* ---------- type ---------- */
.display { font-size:clamp(44px, 6.6vw, 88px); line-height:1.02; letter-spacing:-.048em; font-weight:650; text-wrap:balance; }
.h1 { font-size:clamp(40px, 6vw, 68px); line-height:1.04; letter-spacing:-.045em; font-weight:650; text-wrap:balance; }
.h2 { font-size:clamp(34px, 5.2vw, 64px); line-height:1.05; letter-spacing:-.045em; font-weight:650; text-wrap:balance; }
.eyebrow { margin-bottom:16px; font-size:clamp(15px, 1.25vw, 17px); font-weight:600; letter-spacing:-.012em; color:var(--accent-ink); }
.lead { margin-top:22px; font-size:clamp(18px, 1.55vw, 21px); line-height:1.48; letter-spacing:-.016em; color:var(--muted); text-wrap:pretty; }
.lead strong { color:var(--text); font-weight:550; }
.grad { background:linear-gradient(95deg, var(--grad-1), var(--grad-2)); -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.fine { margin-top:18px; font-size:14px; line-height:1.5; color:var(--muted); }
.muted { color:var(--muted); }
.small { font-size:13px; color:var(--muted); }

/* ---------- layout ---------- */
.wrap { width:min(1080px, calc(100% - 2 * var(--gutter))); margin-inline:auto; }
.wrap.wide { width:min(1240px, calc(100% - 2 * var(--gutter))); }
.wrap.narrow { width:min(820px, calc(100% - 2 * var(--gutter))); }
.center { text-align:center; }
.section { position:relative; padding-block:clamp(96px, 12.5vw, 176px); }
.tint { background:var(--tint); }
.section-head { max-width:880px; margin:0 auto clamp(52px, 7vw, 92px); }
.section-head.center .lead, .center > .lead { max-width:700px; margin-inline:auto; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 26px; border:0; border-radius:999px;
  font-size:17px; font-weight:500; letter-spacing:-.012em; line-height:1; white-space:nowrap; cursor:pointer; text-decoration:none;
  transition:background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.btn:hover { text-decoration:none; }
.btn:active { transform:scale(.97); }
.btn .i { width:18px; height:18px; }
.btn-primary { background:var(--accent); color:var(--on-accent); }
.btn-primary:hover { background:var(--accent-hover); }
.btn-link { min-height:44px; padding:0 4px; background:none; color:var(--accent-ink); }
.btn-link:hover { text-decoration:underline; text-underline-offset:4px; }
.btn-link .i { margin-left:-3px; transition:transform .25s var(--ease); }
.btn-link:hover .i { transform:translateX(3px); }
.btn-sm { min-height:34px; padding:0 15px; font-size:14px; }
.btn-quiet { background:var(--surface2); color:var(--text); cursor:default; }
.cta { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 26px; margin-top:38px; }

/* ---------- header ---------- */
.nav { position:fixed; inset:0 0 auto; z-index:50; }
.nav::before { content:""; position:absolute; inset:0; z-index:-1; background:color-mix(in srgb, var(--page) 74%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:.5px solid var(--line); }
.nav-in { display:flex; align-items:center; gap:28px; height:var(--nav-h); }
.brand { display:inline-flex; align-items:center; gap:8px; flex:none; color:var(--text); }
.brand:hover { text-decoration:none; }
.brand .mark { width:24px; height:24px; transition:transform .7s var(--spring); }
.brand:hover .mark { transform:rotate(45deg); }
.brand .word { width:auto; height:19px; }
.links { display:flex; gap:28px; margin-left:auto; }
.links a { color:var(--muted); font-size:14px; letter-spacing:-.005em; transition:color .2s; }
.links a:hover, .links a[aria-current] { color:var(--text); text-decoration:none; }
.nav-cta { flex:none; }
.menu-btn { display:none; }
.menu { display:none; }
@media (max-width: 880px) {
  .links { display:none; }
  .nav-cta { margin-left:auto; }
  .menu-btn { display:inline-grid; place-items:center; width:40px; height:40px; margin-right:-8px; padding:0; border:0; border-radius:12px; background:none; color:var(--text); cursor:pointer; }
  .menu-btn .i { grid-area:1 / 1; width:22px; height:22px; transition:opacity .2s, transform .3s var(--ease); }
  .menu-btn .i:last-child { opacity:0; transform:rotate(-45deg); }
  .menu-btn[aria-expanded="true"] .i:first-child { opacity:0; transform:rotate(45deg); }
  .menu-btn[aria-expanded="true"] .i:last-child { opacity:1; transform:none; }
  .menu { display:block; position:absolute; top:var(--nav-h); left:0; right:0; max-height:calc(100dvh - var(--nav-h)); overflow:auto; padding:4px 0 28px;
    background:color-mix(in srgb, var(--page) 94%, transparent); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
    border-bottom:.5px solid var(--line); animation:drop .35s var(--ease); }
  .menu .wrap { display:flex; flex-direction:column; }
  .menu a:not(.btn) { padding:14px 0; border-bottom:.5px solid var(--line); color:var(--text); font-size:24px; font-weight:600; letter-spacing:-.03em; }
  .menu a:not(.btn):hover { text-decoration:none; color:var(--accent-ink); }
  .menu .btn { align-self:flex-start; margin-top:24px; }
}
@keyframes drop { from { opacity:0; transform:translateY(-8px); } }

/* ---------- footer ---------- */
.footer { padding:56px 0 32px; background:var(--tint); border-top:.5px solid var(--line); font-size:14px; }
.foot-top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px 64px; }
.foot-brand p { max-width:300px; margin-top:14px; color:var(--muted); }
.foot-links { display:grid; grid-template-columns:repeat(4, minmax(120px, auto)); gap:32px 56px; }
.foot-links h2 { margin-bottom:10px; font-size:13px; font-weight:600; letter-spacing:0; color:var(--text); }
.foot-links a { display:block; padding:5px 0; color:var(--muted); }
.foot-links a:hover { color:var(--text); text-decoration:none; }
.foot-base { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; margin-top:48px; padding-top:20px; border-top:.5px solid var(--line); color:var(--muted); font-size:13px; }
@media (max-width: 640px) { .foot-links { grid-template-columns:repeat(2, minmax(0, 1fr)); width:100%; } }

/* ---------- the soft colour field ---------- */
.field { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.field i { position:absolute; border-radius:50%; background:radial-gradient(closest-side, var(--c), transparent); }
.field .b1 { --c:var(--blob1); width:64vw; height:64vw; left:-18vw; top:-16vw; }
.field .b2 { --c:var(--blob2); width:52vw; height:52vw; right:-14vw; top:-6vw; }
.field .b3 { --c:var(--blob3); width:58vw; height:58vw; right:4vw; bottom:-24vw; }
.field .b4 { --c:var(--blob4); width:48vw; height:48vw; left:0; bottom:-18vw; }
.hero > :not(.field), .doc-section > :not(.field), .final > :not(.field) { position:relative; }

/* ---------- hero ---------- */
.hero { position:relative; overflow:clip; padding:calc(var(--nav-h) + clamp(64px, 9vw, 120px)) 0 clamp(72px, 9vw, 128px); }
.hero .field { opacity:.85; }
.hero-copy { text-align:center; }
.hero .display { max-width:13.2em; margin-inline:auto; }
.hero .lead { max-width:640px; margin-inline:auto; }

/* ---------- the demo: an AI chat with Dela beside it (mirrors extension/content.js) ---------- */
.demo { margin-top:clamp(56px, 8vw, 96px); }
.browser { position:relative; overflow:hidden; border-radius:clamp(16px, 2vw, 24px); background:var(--raised); border:.5px solid var(--line-strong);
  box-shadow:var(--shadow-xl); container:demo / inline-size; }
.bar { display:flex; align-items:center; gap:18px; height:46px; padding:0 18px; background:var(--tint); border-bottom:.5px solid var(--line); }
.dots { display:flex; gap:8px; }
.dots i { width:12px; height:12px; border-radius:50%; background:var(--line-strong); }
.tab { display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 14px; border-radius:9px; background:var(--raised); color:var(--muted); font-size:13px;
  box-shadow:0 0 0 .5px var(--line), var(--shadow-sm); }
.tab .i { width:15px; height:15px; }
.chat { position:relative; display:flex; flex-direction:column; justify-content:flex-end; height:clamp(440px, 34vw, 470px); padding:24px clamp(14px, 3.4vw, 40px) 26px; }
.thread { display:flex; flex-direction:column; justify-content:flex-end; gap:22px; flex:1; min-height:0; width:100%; max-width:620px; margin:0 auto; overflow:hidden;
  font-size:15px; line-height:1.6; -webkit-mask-image:linear-gradient(to bottom, transparent, #000 64px); mask-image:linear-gradient(to bottom, transparent, #000 64px); }
.msg.user { align-self:flex-end; max-width:min(80%, 440px); padding:10px 16px; border-radius:20px 20px 6px 20px; background:var(--surface2); }
.msg.ai { display:flex; align-items:flex-start; gap:12px; }
.ai-icon { display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; border:.5px solid var(--line-strong); color:var(--text); }
.ai-icon .i { width:15px; height:15px; }
.ai-text ol { display:grid; gap:6px; margin-top:8px; padding-left:20px; list-style:decimal; }
.ai-text li::marker { color:var(--muted); }
.composer-row { position:relative; width:100%; max-width:620px; margin:18px auto 0; }
.composer { display:flex; align-items:center; gap:10px; height:54px; padding:0 9px 0 20px; border-radius:27px; background:var(--raised); border:.5px solid var(--line-strong);
  box-shadow:0 2px 12px rgba(0,0,0,.05); font-size:15px; }
.typed { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.typed:empty { display:none; }
.typed:not(:empty) + .placeholder { display:none; }
.typed.caret::after { content:""; display:inline-block; width:1.5px; height:1.05em; margin-left:1px; vertical-align:-.15em; background:var(--accent); animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.placeholder { color:var(--faint); }
.send { display:grid; place-items:center; flex:none; width:36px; height:36px; margin-left:auto; border-radius:50%; background:var(--text); color:var(--page); opacity:.18; transition:opacity .2s; }
.send .i { width:18px; height:18px; }
.composer.typing .send { opacity:1; }

/* Dela: the bubble in the margin beside the message box; finds peek above it, the window opens above it */
.dela { position:absolute; left:calc(100% + 18px); bottom:7px; width:40px; height:40px; }
.ball { position:absolute; inset:0; display:grid; place-items:center; width:100%; height:100%; padding:0; cursor:pointer;
  border-radius:50%; border:1.5px solid var(--ring); background:radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), transparent 55%), var(--disc);
  -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%); box-shadow:inset 0 .5px 0 var(--glass-edge), 0 4px 16px rgba(0,0,0,.16);
  transition:transform .35s var(--spring), box-shadow .25s var(--ease); }
.ball .mark { width:54%; height:54%; transition:transform .7s var(--spring); }
.ball:hover { transform:scale(1.06); box-shadow:inset 0 .5px 0 var(--glass-edge), 0 6px 20px rgba(0,0,0,.2); }
.ball:hover .mark { transform:rotate(45deg); }
.ball:active { transform:scale(.94); transition-duration:.12s; }
.ball[data-loading] .mark { animation:spin 1.2s linear infinite; }
.ball[data-new] { animation:pop .6s var(--spring); }
.ball[data-count="0"] .count { display:none; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pop { 35% { transform:scale(1.14); } }
.count { position:absolute; top:-4px; right:-5px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--count-bg); color:var(--count-fg);
  font-size:10.5px; font-weight:600; line-height:16px; text-align:center; font-variant-numeric:tabular-nums; box-shadow:0 1px 3px rgba(0,0,0,.28); }

.peek, .panel { position:absolute; right:0; bottom:calc(100% + 12px); color:var(--text); background:var(--solid); border:.5px solid var(--glass-line);
  box-shadow:inset 0 .5px 0 var(--glass-edge), var(--pop-shadow); font-size:13px; line-height:1.45; letter-spacing:-.005em; transform-origin:100% 100%; }
.peek { left:0; right:auto; width:min(300px, calc(50cqi - 346px)); padding:10px 12px; border-radius:16px; transform-origin:0 100%; transition:opacity .3s var(--ease), transform .45s var(--ease); }
.peek[data-state="hidden"] { opacity:0; transform:translateY(8px) scale(.97); pointer-events:none; }
.peek .note { display:none; align-items:center; min-height:46px; color:var(--muted); }
.peek[data-state="loading"] .note { display:flex; }
.peek[data-state="loading"] .ticker { display:none; }
.note span { background:linear-gradient(90deg, var(--muted) 30%, var(--text) 50%, var(--muted) 70%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text;
  color:transparent; animation:shimmer 1.6s linear infinite; }
@keyframes shimmer { from { background-position:100% 0; } to { background-position:-100% 0; } }
.ticker { position:relative; height:68px; overflow:hidden; }
.slide { position:absolute; inset:0; opacity:0; transform:translateY(40%); transition:transform .6s var(--ease), opacity .35s var(--ease); }
.slide.on { opacity:1; transform:none; }
.slide.out { opacity:0; transform:translateY(-40%); }
.slide.jump { transition:none; }
.slide-top { display:flex; align-items:center; gap:6px; height:26px; margin-bottom:2px; }
.slide .text, .row .text { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.fmt { display:inline-flex; align-items:center; gap:4px; flex:none; height:22px; padding:0 8px 0 6px; border-radius:11px; background:var(--surface2); color:var(--text);
  font-size:12px; font-weight:500; line-height:1; }
.fmt .i { width:13px; height:13px; }
.v { display:inline-flex; color:var(--muted); }
.v .i { width:14px; height:14px; }
.n { margin-left:auto; color:var(--faint); font-size:12px; font-variant-numeric:tabular-nums; }
.rate { display:inline-flex; gap:2px; flex:none; }
.rate > * { display:grid; place-items:center; width:26px; height:26px; padding:0; border:0; border-radius:13px; background:none; color:var(--muted); }
.rate .i { width:15px; height:15px; }
.rate button { cursor:pointer; transition:background-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease); }
.rate button:hover { background:var(--surface2); color:var(--text); }
.rate button:active { transform:scale(.9); }
.rate button[aria-pressed="true"], .rate .on { color:var(--accent-ink); background:var(--accent-soft); }

.panel { z-index:2; width:min(360px, 92cqi); border-radius:20px; overflow:hidden; animation:rise .32s var(--ease); }
@keyframes rise { from { opacity:0; transform:translateY(8px) scale(.97); } }
.head { display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 8px 4px 16px; }
.head strong { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; font-weight:600; letter-spacing:-.01em; }
.hmark .mark { width:18px; height:18px; }
.x { display:grid; place-items:center; flex:none; width:28px; height:28px; padding:0; border:0; border-radius:14px; background:none; color:var(--muted); }
.x .i { width:16px; height:16px; }
button.x { cursor:pointer; }
button.x:hover { background:var(--surface2); color:var(--text); }
.rows { display:grid; grid-template-columns:minmax(0, 1fr); gap:2px; padding:0 8px 8px; }
.row { position:relative; padding:8px 66px 8px 8px; border-radius:12px; transition:background-color .2s var(--ease); }
.row:hover { background:var(--surface2); }
.row .top { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; min-width:0; margin-bottom:4px; }
.row .rate { position:absolute; top:5px; right:4px; }
.src { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--faint); font-size:12px; }
.lane { display:inline-flex; align-items:center; flex:none; height:18px; padding:0 7px; border-radius:9px; background:var(--accent-soft); color:var(--accent-ink); font-size:10.5px; font-weight:500; line-height:1; }
.lane.explore { background:transparent; color:var(--muted); box-shadow:inset 0 0 0 .5px var(--line-strong); }
.foot { display:flex; align-items:center; gap:2px; padding:8px 8px 8px 10px; border-top:.5px solid var(--line); }
.foot .mode { display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 9px 0 10px; border-radius:15px; background:var(--surface2); font-size:13px; font-weight:500; }
.foot .mode .i { width:12px; height:12px; margin-left:-2px; color:var(--muted); }
.dot { width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }
.foot .grow { flex:1; }
.ibtn { display:grid; place-items:center; width:32px; height:32px; border-radius:16px; color:var(--muted); }
.ibtn .i { width:18px; height:18px; }
.ibtn.doc { color:var(--accent); }

/* narrower windows: the banner reaches over the chat, and the bubble moves beside the message box (after the rules above) */
@container demo (max-width: 1150px) {
  .peek { left:auto; right:0; width:min(320px, 82cqi); transform-origin:100% 100%; }
}
@container demo (max-width: 900px) {
  .composer-row { padding-right:54px; }
  .dela { left:auto; right:0; }
}
.demo figcaption { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:22px; color:var(--muted); font-size:14px; text-align:center; }
.demo-ctl { display:grid; place-items:center; flex:none; width:32px; height:32px; padding:0; border:.5px solid var(--line-strong); border-radius:50%; background:var(--raised); color:var(--text); cursor:pointer; }
.demo-ctl .i { grid-area:1 / 1; width:13px; height:13px; }
.demo-ctl .i:last-child, .demo-ctl[data-paused] .i:first-child { display:none; }
.demo-ctl[data-paused] .i:last-child { display:block; }
/* the run: hidden until each part arrives (only with the script and motion; otherwise everything shows at once) */
.demo[data-ready] .msg { opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .6s var(--ease); }
.demo[data-ready] .msg.on { opacity:1; transform:none; }
.demo[data-ready] .ai-text > p, .demo[data-ready] .ai-text li { opacity:0; transform:translateY(4px); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.demo[data-ready] .ai-text .on { opacity:1; transform:none; }

/* ---------- the problem ---------- */
.problem .h2 { max-width:15em; margin-inline:auto; }
.loop { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:900px; margin:48px auto 52px; }
.loop li { display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px; border-radius:21px; background:var(--surface2); color:var(--muted);
  font-size:16px; font-weight:500; transition:background-color .35s var(--ease), color .35s var(--ease), transform .45s var(--spring); }
.loop li.lit { background:var(--text); color:var(--page); transform:scale(1.05); }
.loop .again { background:none; color:var(--text); box-shadow:inset 0 0 0 1px var(--line-strong); }
.loop .again .i { width:18px; height:18px; }
.question { margin:40px 0 4px; font-size:clamp(30px, 4.2vw, 50px); font-weight:650; line-height:1.1; letter-spacing:-.04em; text-wrap:balance;
  background:linear-gradient(95deg, var(--grad-1), var(--grad-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- how it works ---------- */
.steps { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; }
.step { display:flex; flex-direction:column; padding:clamp(22px, 2.4vw, 30px); border-radius:28px; background:var(--raised); box-shadow:var(--card); }
.step .art { position:relative; display:grid; place-items:center; height:228px; margin-bottom:28px; overflow:hidden; border-radius:18px; background:var(--tint); }
.step h3 { display:flex; align-items:flex-start; gap:10px; font-size:21px; font-weight:600; line-height:1.25; letter-spacing:-.022em; }
.num { display:grid; place-items:center; flex:none; width:26px; height:26px; margin-top:-1px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); font-size:14px; font-weight:600; letter-spacing:0; }
.step p { margin-top:10px; color:var(--muted); font-size:16px; line-height:1.55; }
.art-ask { grid-template-columns:minmax(0, 1fr) auto; justify-items:stretch; gap:10px; padding:0 18px; }
.mini-composer { justify-self:stretch; display:flex; min-width:0; align-items:center; gap:8px; height:46px; padding:0 6px 0 16px; border-radius:23px; background:var(--raised); border:.5px solid var(--line-strong);
  box-shadow:0 2px 10px rgba(0,0,0,.05); font-size:13.5px; white-space:nowrap; }
.mini-composer > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.mini-composer .send { width:32px; height:32px; opacity:1; }
.mini-composer .send .i { width:16px; height:16px; }
.mini-ball { position:relative; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--ring);
  background:radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), transparent 55%), var(--disc); box-shadow:inset 0 .5px 0 var(--glass-edge), 0 4px 16px rgba(0,0,0,.14); }
.mini-ball .mark { width:54%; height:54%; }
.art-keywords { align-content:center; justify-items:stretch; gap:10px; padding:16px 18px; text-align:left; font-size:12.5px; }
.said { color:var(--muted); line-height:1.5; }
.said mark { padding:0 3px; border-radius:5px; background:var(--accent-soft); color:var(--accent-ink); -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.sent, .kept { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.label { display:inline-flex; align-items:center; gap:5px; margin-right:2px; font-size:12px; font-weight:600; color:var(--text); }
.label .i { width:14px; height:14px; }
.kw { display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:12px; background:var(--raised); border:.5px solid var(--line-strong); font-size:12px; }
.kw.intent { border-color:transparent; background:var(--accent-soft); color:var(--accent-ink); font-weight:500; }
.kept > span:last-child { color:var(--muted); font-size:12px; }
.art-find { padding:18px 18px 40px; }
.mini-peek { width:min(272px, 100%); padding:10px 12px; border-radius:16px; background:var(--solid); border:.5px solid var(--glass-line); box-shadow:var(--pop-shadow);
  font-size:13px; line-height:1.45; text-align:left; }
.art-find .mini-ball { position:absolute; right:16px; bottom:12px; }

/* ---------- tiles ---------- */
.tiles { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.tiles.three { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.tile { padding:28px 26px 30px; border-radius:24px; background:var(--tint); }
.tint .tile { background:var(--raised); box-shadow:var(--card); }
.ico { display:grid; place-items:center; flex:none; }
.tile .ico { width:46px; height:46px; margin-bottom:22px; border-radius:14px; background:var(--accent-soft); color:var(--accent); }
.tile .ico .i { width:22px; height:22px; }
.tile h3 { font-size:19px; font-weight:600; line-height:1.25; letter-spacing:-.02em; }
.tile p { margin-top:8px; color:var(--muted); font-size:15.5px; line-height:1.5; }
.more { margin-top:36px; text-align:center; }

/* ---------- learns what helps ---------- */
.split { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(40px, 6vw, 96px); align-items:center; }
.split .h2 { font-size:clamp(34px, 4.4vw, 54px); }
.visual { position:relative; padding:clamp(28px, 5vw, 64px) clamp(16px, 4vw, 48px); overflow:hidden; border-radius:32px; background:var(--page); }
.visual .field { opacity:.9; }
.visual .win { position:relative; }
.points { display:grid; gap:28px; margin-top:44px; }
.points li { display:flex; gap:16px; }
.points .ico { width:42px; height:42px; border-radius:13px; background:var(--raised); color:var(--accent); box-shadow:var(--card); }
.points .ico .i { width:21px; height:21px; }
.points h3 { font-size:18px; font-weight:600; letter-spacing:-.016em; }
.points p { margin-top:4px; color:var(--muted); font-size:16px; line-height:1.55; }
.points p strong { color:var(--text); font-weight:550; }
.win { width:min(400px, 100%); margin-inline:auto; overflow:hidden; border-radius:22px; background:var(--solid); border:.5px solid var(--glass-line);
  box-shadow:inset 0 .5px 0 var(--glass-edge), var(--shadow-xl); font-size:13px; line-height:1.45; }
.situation { margin:2px 8px 8px; padding:10px 12px; border-radius:12px; background:var(--surface2); }
.acts { display:flex; gap:6px; margin-top:8px; }
.btn-mini { display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 12px; border-radius:14px; border:.5px solid var(--line-strong); font-size:12px; font-weight:500; white-space:nowrap; }
.btn-mini .i { width:14px; height:14px; }
.btn-mini.primary { border-color:transparent; background:var(--text); color:var(--page); }
.btn-mini.on { border-color:transparent; background:var(--accent-soft); color:var(--accent-ink); }
.helped { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 10px 10px 16px; border-top:.5px solid var(--line); color:var(--muted); font-size:12px; }

/* ---------- modes ---------- */
.modes { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.mode-card { padding:30px 28px 32px; border-radius:24px; background:var(--tint); }
.mode-card .pill { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 14px; border-radius:16px; background:var(--raised); box-shadow:0 0 0 .5px var(--line-strong);
  font-size:14px; font-weight:600; }
.mode-card .dot { width:8px; height:8px; }
.mode-card[data-mode="temporary"] .dot { background:var(--amber); }
.mode-card[data-mode="off"] .dot { background:var(--faint); }
.mode-card h3 { margin-top:24px; font-size:22px; font-weight:600; letter-spacing:-.022em; }
.mode-card p { margin-top:8px; color:var(--muted); font-size:16px; line-height:1.55; }

/* ---------- Dela Doc ---------- */
.doc-section { overflow:clip; }
.docdemo { max-width:880px; margin:0 auto; }
.talk { display:flex; align-items:center; gap:2px; width:max-content; max-width:100%; margin:0 auto 22px; padding:4px; border-radius:999px; background:var(--glass-strong);
  border:.5px solid var(--glass-line); box-shadow:var(--shadow-sm); -webkit-backdrop-filter:blur(20px) saturate(170%); backdrop-filter:blur(20px) saturate(170%); }
.talk-label { padding:0 10px 0 12px; color:var(--muted); font-size:13px; white-space:nowrap; }
.talk button { height:32px; padding:0 14px; border:0; border-radius:16px; background:none; color:var(--muted); font-size:14px; font-weight:500; cursor:pointer; white-space:nowrap;
  transition:background-color .2s var(--ease), color .2s var(--ease); }
.talk button:hover { color:var(--text); }
.talk button[aria-checked="true"] { background:var(--raised); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.14); }
.docwin { overflow:hidden; border-radius:28px; background:var(--glass); border:1px solid var(--glass-line); box-shadow:var(--shadow-xl), inset 0 1px 0 var(--glass-edge);
  -webkit-backdrop-filter:blur(28px) saturate(170%); backdrop-filter:blur(28px) saturate(170%); }
.dochead { display:flex; align-items:center; gap:12px; height:62px; padding:0 18px 0 26px; font-size:16px; font-weight:500; }
.doc-ic { display:flex; color:var(--accent); }
.dochead .grow { flex:1; }
.share { display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px; border-radius:17px; background:var(--glass-strong); box-shadow:0 0 0 .5px var(--glass-line); font-size:14px; }
.share .i { width:16px; height:16px; }
.docsheet { margin:0 18px; padding:12px 0 6px; border-radius:20px 20px 0 0; background:var(--sheet); }
.doctools { display:flex; align-items:center; gap:14px; width:max-content; max-width:calc(100% - 24px); margin:0 auto; padding:9px 16px; overflow:hidden; border-radius:16px;
  background:var(--glass-strong); box-shadow:0 0 0 .5px var(--glass-line), var(--shadow-sm); color:var(--text); }
.doctools .i { width:17px; height:17px; }
.doctools .sep { width:1px; height:20px; background:var(--line-strong); flex:none; }
.doctools .style { display:inline-flex; align-items:center; gap:8px; font-size:13px; white-space:nowrap; }
.doctools .style .i { width:13px; height:13px; }
.docbody { max-width:640px; margin:0 auto; padding:clamp(28px, 5vw, 48px) clamp(18px, 5vw, 40px) clamp(28px, 4vw, 40px); }
.doctitle { margin-bottom:14px; font-size:clamp(26px, 3.4vw, 34px); font-weight:700; line-height:1.15; letter-spacing:-.03em; }
.docp { font-size:clamp(15px, 1.5vw, 17px); line-height:1.75; }
.ask { display:flex; gap:14px; margin-top:28px; font-size:15px; line-height:1.5; }
.askmark .mark { width:22px; height:22px; }
.askbody { flex:1; min-width:0; }
.chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.chip { height:36px; padding:0 16px; border:1px solid var(--chip-line); border-radius:18px; background:var(--chip); color:var(--text); font-size:15px; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.04); transition:background-color .15s, color .15s, border-color .15s; }
.chip:hover { border-color:var(--accent); }
.chip[aria-pressed="true"] { border-color:transparent; background:var(--accent-soft); color:var(--accent-ink); box-shadow:none; }
.ask.next { animation:rise .45s var(--ease); }
.ask.next .chips { margin-top:12px; }

/* ---------- the Evidence Engine ---------- */
.pipeline { position:relative; display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:8px; margin:0 auto clamp(52px, 6vw, 76px); }
.pipeline::before, .pipeline::after { content:""; position:absolute; z-index:0; top:27px; left:calc(100% / 14); right:calc(100% / 14); height:2px; border-radius:1px; }
.pipeline::before { background:var(--step-line); }
.pipeline::after { background:var(--step-line-done); transform-origin:0 50%; transform:scaleX(var(--p, 1)); transition:transform .5s var(--ease); }
.pipeline[data-ready]::after { transform:scaleX(var(--p, 0)); }
.pipeline li { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; color:var(--text); font-size:14px; font-weight:500; line-height:1.3; }
/* flat discs: no gradient, no shadow, no glow; a finished step simply takes its colours */
.pipeline .ico { width:56px; height:56px; border-radius:50%; background:var(--step-done-bg); color:var(--step-done-ink);
  transition:background-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease); }
.pipeline .ico .i { width:24px; height:24px; }
.pipeline[data-ready] li { color:var(--muted); transition:color .4s var(--ease); }
.pipeline[data-ready] .ico { background:var(--step-bg); color:var(--muted); box-shadow:0 0 0 1px var(--step-ring); }
.pipeline[data-ready] li.lit { color:var(--text); }
.pipeline[data-ready] li.lit .ico { background:var(--step-done-bg); color:var(--step-done-ink); box-shadow:0 0 0 1px transparent; }
.evidence { display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(0, 1fr); gap:20px; align-items:start; }
.results, .verdicts { padding:clamp(22px, 3vw, 36px); border-radius:28px; background:var(--raised); box-shadow:var(--card); }
.rh { display:flex; align-items:center; gap:8px; margin-bottom:10px; color:var(--muted); font-size:13px; font-weight:600; letter-spacing:0; }
.sample { padding:1px 7px; border-radius:6px; background:var(--accent-soft); color:var(--accent-ink); font-size:11px; font-weight:500; }
.conclusion { font-size:17px; line-height:1.6; }
.change { margin-top:10px; color:var(--muted); font-size:14px; }
.funnel { margin:16px 0 30px; color:var(--muted); font-size:14px; }
.funnel summary, .verdict summary, .faq summary { list-style:none; cursor:pointer; }
.funnel summary::-webkit-details-marker, .verdict summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display:none; }
.funnel .why { margin-left:6px; color:var(--accent-ink); }
.funnel summary:hover .why { text-decoration:underline; text-underline-offset:3px; }
.funnel p { margin-top:6px; }
.claim { padding:18px 20px; border-radius:18px; background:var(--tint); }
.claim + .claim { margin-top:10px; }
.claim-text { font-size:16px; font-weight:500; line-height:1.45; letter-spacing:-.012em; }
.verdict summary { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; width:max-content; max-width:calc(100% + 8px); margin:8px 0 0 -8px; padding:4px 8px; border-radius:9px;
  transition:background-color .2s var(--ease); }
.verdict summary:hover { background:var(--hover); }
.verdict .meta .i { width:14px; height:14px; transition:transform .25s var(--ease); }
.verdict[open] .meta .i { transform:rotate(180deg); }
.badge { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:550; }
.badge .i { width:16px; height:16px; }
.badge.verified { color:var(--good); }
.badge.contested { color:var(--warn); }
.badge.single, .badge.unverified { color:var(--muted); }
.meta { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:13px; }
.how { margin-top:10px; padding-top:10px; border-top:.5px solid var(--line); }
.how-h { margin-bottom:6px; font-size:12px; font-weight:600; }
.src-list, .how ul { display:grid; gap:2px; }
.how .src { display:flex; align-items:center; gap:10px; padding:4px 0; overflow:visible; white-space:normal; color:var(--text); font-size:14px; }
.how .src .i { width:15px; height:15px; }
.how .src.supports .i { color:var(--good); }
.how .src.against .i { color:var(--warn); }
.how .src em { margin-left:auto; padding-left:8px; color:var(--muted); font-size:13px; font-style:normal; white-space:nowrap; }
.conflict { margin-top:12px; padding:12px 14px; border-radius:14px; background:color-mix(in srgb, var(--warn) 10%, transparent); font-size:14px; line-height:1.5; }
.conflict .help { margin-top:6px; color:var(--muted); }
.verdicts h3 { margin-bottom:20px; font-size:19px; font-weight:600; letter-spacing:-.02em; }
.verdicts li + li { margin-top:16px; padding-top:16px; border-top:.5px solid var(--line); }
.verdicts p { margin-top:5px; color:var(--muted); font-size:15px; line-height:1.5; }

/* ---------- three short points ---------- */
.trio { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(28px, 4vw, 52px); margin-top:clamp(56px, 7vw, 88px); }
.trio .ico { justify-content:start; margin-bottom:14px; color:var(--accent); }
.trio .ico .i { width:28px; height:28px; }
.trio h3 { font-size:19px; font-weight:600; letter-spacing:-.02em; }
.trio p { margin-top:6px; color:var(--muted); font-size:16px; line-height:1.55; }
.doc-section .cta { flex-direction:column; gap:14px; margin-top:clamp(52px, 6vw, 72px); }
.doc-section .cta .fine { margin-top:0; }

/* ---------- AI sites ---------- */
.sites { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:920px; margin:48px auto 40px; }
.sites li { display:inline-flex; align-items:center; height:44px; padding:0 20px; border-radius:22px; background:var(--raised); box-shadow:0 0 0 .5px var(--line), var(--shadow-sm);
  font-size:16px; font-weight:500; letter-spacing:-.012em; }
.platforms { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 36px; margin-top:32px; color:var(--muted); font-size:15px; }
.platforms li { display:inline-flex; align-items:center; gap:10px; }
.platforms .ico { color:var(--text); }

/* ---------- questions ---------- */
.faq { border-top:.5px solid var(--line-strong); }
.faq details { border-bottom:.5px solid var(--line-strong); }
.faq summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 4px; font-size:clamp(18px, 1.8vw, 21px); font-weight:600; letter-spacing:-.022em; }
.faq summary:hover { color:var(--accent-ink); }
.faq summary .i { width:20px; height:20px; color:var(--muted); transition:transform .3s var(--ease); }
.faq details[open] summary .i { transform:rotate(180deg); }
.faq details > div { max-width:700px; padding:0 4px 26px; color:var(--muted); font-size:17px; line-height:1.6; }
.faq details > div p + p { margin-top:10px; }

/* ---------- the last word ---------- */
.final { overflow:clip; }
.final .field { opacity:.8; }
.final-mark { display:inline-flex; width:68px; height:68px; margin-bottom:30px; }
.final-mark .mark { width:100%; height:100%; filter:drop-shadow(0 10px 14px rgba(0,0,0,.16)); }
.final .display { max-width:11.5em; margin-inline:auto; font-size:clamp(40px, 6.2vw, 84px); }
.final .display .grad { display:block; }

/* ---------- Install and Privacy ---------- */
.page-head { padding:calc(var(--nav-h) + clamp(56px, 8vw, 104px)) 0 clamp(36px, 5vw, 56px); }
.page-body { padding-bottom:clamp(80px, 10vw, 128px); }
.page-body p + p, .page-body p + ol, .page-body p + ul, .page-body ol + p, .page-body ul + p { margin-top:12px; }
.page-body ol, .page-body ul { padding-left:20px; }
.page-body ol { list-style:decimal; }
.page-body ul { list-style:disc; }
.page-body li { margin:0 0 8px; line-height:1.55; }
.page-body li::marker { color:var(--faint); }
.page-body .steps-list { display:grid; gap:16px; padding:0; list-style:none; }
.step-card { display:flex; gap:20px; margin:0; padding:clamp(22px, 3vw, 30px); border-radius:24px; background:var(--tint); }
.step-card > div { min-width:0; flex:1; }
.step-card .num { width:32px; height:32px; font-size:15px; }
.step-card h2, .policy h2 { margin:3px 0 14px; font-size:21px; font-weight:600; letter-spacing:-.022em; }
.step-card .btn { margin:2px 0 6px; }
.policy { padding:clamp(22px, 3vw, 30px); border-radius:24px; background:var(--tint); }
.policy + .policy { margin-top:16px; }
.policies > .small { margin-top:24px; }
code { padding:2px 6px; border:.5px solid var(--line-strong); border-radius:6px; background:var(--surface2); font:13px/1.4 var(--mono); overflow-wrap:anywhere; }
.page-note { display:flex; align-items:flex-start; gap:12px; margin-top:24px; padding:16px 18px; border-radius:16px; background:var(--tint); color:var(--muted); font-size:15px; }

/* ---------- scrolling in (only with the script, and only for what starts below the fold) ---------- */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* ---------- smaller screens ---------- */
@media (max-width: 1080px) {
  .tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .split, .evidence { grid-template-columns:minmax(0, 1fr); }
  .split .copy { text-align:center; }
  .split .copy .lead { margin-inline:auto; max-width:640px; }
  .points { max-width:560px; margin-inline:auto; text-align:left; }
  .steps, .modes, .trio { grid-template-columns:minmax(0, 1fr); max-width:580px; margin-inline:auto; }
  .tiles.three { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pipeline { grid-template-columns:minmax(0, 1fr); gap:14px; max-width:340px; }
  .pipeline::before, .pipeline::after { top:28px; bottom:28px; left:27px; right:auto; width:2px; height:auto; }
  .pipeline::after { transform-origin:50% 0; transform:scaleY(var(--p, 1)); }
  .pipeline[data-ready]::after { transform:scaleY(var(--p, 0)); }
  .pipeline li { flex-direction:row; gap:18px; text-align:left; }
}
@media (max-width: 640px) {
  :root { --gutter:16px; }
  body { font-size:16px; }
  .btn { font-size:16px; }
  .chat { height:540px; }
  .thread { font-size:14px; gap:16px; }
  /* finds: a row to swipe through instead of a long column */
  .tiles:not(.three) { grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:78%; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--gutter)); padding:4px var(--gutter) 12px; scroll-padding-inline:var(--gutter); scrollbar-width:none; }
  .tiles:not(.three)::-webkit-scrollbar { display:none; }
  .tiles:not(.three) .tile { scroll-snap-align:start; }
  .tiles.three { grid-template-columns:minmax(0, 1fr); gap:12px; }
  .tiles.three .tile { display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:16px; padding:20px; }
  .tiles.three .tile .ico { grid-row:span 2; margin:0; }
  .doctools { gap:12px; }
  .doctools .style, .doctools .style + .sep { display:none; }
  .dochead { padding-left:20px; }
  .docsheet { margin:0 8px; }
  .talk-label { display:none; }
  .faq summary { padding:20px 2px; }
  .step-card { flex-direction:column; gap:12px; }
}
@media (max-width: 380px) {
  .sites li { height:40px; padding:0 16px; font-size:15px; }
}

/* ---------- Ask Dela (site.js): a bubble on every page; you ask on purpose. The messages, finds, rating and code card are
   shared with the demo ---------- */
.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.ask-form { display:flex; align-items:flex-end; gap:10px; padding:10px 10px 10px 20px; border:1px solid var(--line-strong); border-radius:26px;
  background:var(--raised); box-shadow:var(--card); transition:border-color .15s, box-shadow .15s; }
.ask-form:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft), var(--card); }
.ask-form textarea { flex:1; min-width:0; min-height:32px; max-height:160px; padding:6px 0; border:0; outline:0; resize:none; background:none; color:var(--text);
  font:inherit; font-size:17px; line-height:1.45; }
.ask-form textarea::placeholder { color:var(--faint); }
.ask-send { display:grid; place-items:center; flex:none; width:40px; height:40px; border:0; border-radius:50%; background:var(--accent); color:var(--on-accent); cursor:pointer; }
.ask-send:hover { background:var(--accent-hover); }
.ask-send:disabled { opacity:.5; cursor:default; }
.ask-hint { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:12px; font-size:13px; color:var(--faint); }
.ask-hint .i { width:14px; height:14px; flex:none; }
.ask-hint a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.ask-out { display:grid; gap:14px; margin-top:22px; }
.ask-out:empty { display:none; }
.ask-msg { display:grid; gap:8px; font-size:16px; line-height:1.5; }
.ask-msg p { margin:0; }
.ask-msg.ask-you { justify-self:end; max-width:85%; padding:10px 16px; border-radius:20px 20px 6px 20px; background:var(--surface2); }
.ask-msg.ask-dela { padding:18px 20px; border:1px solid var(--line); border-radius:20px; background:var(--raised); box-shadow:var(--card); }
.ask-msg.ask-error { color:var(--warn); }
.ask-msg.ask-wait { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:15px; }
.ask-strong { display:flex; align-items:center; gap:8px; font-weight:600; }
.ask-strong .i { width:18px; height:18px; color:var(--accent-ink); }
.ask-small { font-size:13px; color:var(--faint); }
.ask-dots { display:inline-flex; gap:4px; }
.ask-dots i { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:askdot 1.2s var(--ease) infinite; }
.ask-dots i:nth-child(2) { animation-delay:.15s; }
.ask-dots i:nth-child(3) { animation-delay:.3s; }
@keyframes askdot { 0%, 80%, 100% { opacity:.25; transform:translateY(0); } 40% { opacity:1; transform:translateY(-3px); } }
.ask-finds { display:grid; gap:10px; }
.ask-find { display:grid; gap:6px; padding:14px 16px; border:1px solid var(--line); border-radius:16px; background:var(--page); }
.ask-find-top { display:flex; align-items:center; gap:8px; min-width:0; font-size:12px; color:var(--faint); }
.ask-find-top .fmt { font-weight:600; color:var(--accent-ink); }
.ask-find-top .v .i { width:14px; height:14px; color:var(--accent-ink); }
.ask-find-top .src { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ask-find-text { font-weight:550; }
.ask-find-take { font-size:15px; color:var(--muted); }
.ask-find-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:4px; }
.ask-thumbs { display:inline-flex; gap:2px; margin-left:auto; }
.ask-ic[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent-ink); }
.ask-find.dimmed { opacity:.55; }
.ask-find-actions .btn-mini { cursor:pointer; background:none; color:var(--text); }
.ask-find-actions .btn-mini.primary { background:var(--text); color:var(--page); text-decoration:none; }
.ask-mail { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.ask-email { flex:1 1 220px; min-width:0; height:40px; padding:0 14px; border:1px solid var(--line-strong); border-radius:20px; background:var(--page); color:var(--text); font:inherit; font-size:15px; }
.ask-email:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.ask-mail .btn-sm { min-height:40px; }
.ask-thanks { display:flex; align-items:center; gap:8px; color:var(--good); font-size:15px; }
.ask-thanks .i { width:18px; height:18px; }
.ask-rate { padding:16px 18px; border:1px dashed var(--line-strong); border-radius:16px; }
.ask-q { display:grid; gap:10px; }
.ask-q p { margin:0; font-weight:550; }
.ask-chips { display:flex; flex-wrap:wrap; gap:8px; }
.ask-chips .chip { display:inline-flex; align-items:center; gap:6px; font-size:14px; }
.ask-chips .chip .i { width:16px; height:16px; }
.ask-chips .chip.quiet { border-color:transparent; background:none; box-shadow:none; color:var(--muted); }
.ask-pop { width:min(420px, calc(100vw - 32px)); padding:28px; border:1px solid var(--glass-line); border-radius:24px; background:var(--glass-strong);
  -webkit-backdrop-filter:blur(24px) saturate(1.4); backdrop-filter:blur(24px) saturate(1.4); color:var(--text); box-shadow:var(--shadow-xl); text-align:center; }
.ask-pop::backdrop { background:rgba(0,0,0,.35); }
.ask-pop:focus { outline:none; }
.ask-pop .btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; box-shadow:none; }
.ask-pop .eyebrow { margin-bottom:8px; }
.ask-pop .h3 { margin:0; font-size:24px; line-height:1.2; letter-spacing:-.02em; font-weight:650; }
.ask-pop-lead { margin:8px 0 18px; color:var(--muted); font-size:16px; }
.ask-pop-x { position:absolute; top:12px; right:12px; display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:50%; background:none; color:var(--muted); cursor:pointer; }
.ask-pop-x:hover { background:var(--hover); color:var(--text); }
.ask-code { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; padding:12px 14px; border:0; border-radius:14px; background:var(--accent-soft); }
.ask-code .label { font-size:12px; color:var(--muted); }
.ask-code strong { font-family:var(--mono); font-size:18px; letter-spacing:.06em; color:var(--accent-ink); }
.ask-code .btn-mini { cursor:pointer; background:var(--raised); color:var(--text); }
.ask-copied { width:100%; font-size:12px; color:var(--good); }
.ask-copied:empty { display:none; }
.ask-pop-cta { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:20px; }
.ask-pop-fine { margin:12px 0 0; font-size:12px; color:var(--faint); }
@media (max-width: 640px) {
  .ask-form { padding-left:16px; border-radius:22px; }
  .ask-msg.ask-dela { padding:16px; }
  .ask-pop { padding:24px 20px; }
}

/* the share menu (finds on the site): small and quiet, like the Dela window's */
.sharepop { position:fixed; z-index:80; min-width:184px; padding:4px; border:1px solid var(--line-strong); border-radius:14px; background:var(--solid); box-shadow:var(--pop-shadow); animation:askin .16s var(--ease); }
.sp-row { display:flex; align-items:center; gap:10px; width:100%; height:36px; padding:0 10px; border:0; border-radius:9px; background:none; color:var(--text); font:inherit; font-size:14px; text-align:left; cursor:pointer; }
.sp-row:hover, .sp-row:focus-visible { background:var(--hover); outline:none; }
.sp-row > span:not(.sp-gap) { flex:1; }
.sp-row .i { width:16px; height:16px; flex:none; color:var(--muted); }
.sp-row .i:last-child:not(:first-child) { width:13px; height:13px; color:var(--faint); }
.sp-gap { width:16px; flex:none; }
.sp-done { display:block; padding:2px 10px 4px; font-size:12px; color:var(--good); }
.sp-done:empty { display:none; }

/* Ask Dela's bubble and window: bottom right, floating in glass */
.askdock { position:fixed; right:max(20px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom)); z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.askbubble { display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 20px 0 8px; border:1.5px solid var(--ring); border-radius:26px; cursor:pointer;
  background:radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), transparent 55%), var(--glass-strong); color:var(--text); font:inherit; font-size:15px; font-weight:600;
  -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%); box-shadow:inset 0 .5px 0 var(--glass-edge), 0 8px 28px rgba(0,0,0,.18);
  transition:transform .35s var(--spring), box-shadow .25s var(--ease); }
.askbubble .mark { width:34px; height:34px; transition:transform .7s var(--spring); }
.askbubble:hover { transform:translateY(-2px); }
.askbubble:hover .mark { transform:rotate(45deg); }
.askdock.open .askbubble { padding-right:8px; }
.askdock.open .askbubble span { display:none; }
.askpanel { display:flex; flex-direction:column; width:min(400px, calc(100vw - 32px)); height:min(600px, calc(100vh - 120px)); border:1px solid var(--glass-line); border-radius:24px;
  background:var(--glass-strong); -webkit-backdrop-filter:blur(28px) saturate(1.5); backdrop-filter:blur(28px) saturate(1.5); box-shadow:var(--shadow-xl); overflow:hidden;
  animation:askin .3s var(--ease); }
@keyframes askin { from { opacity:0; transform:translateY(10px) scale(.98); } }
.askpanel-head { display:flex; align-items:center; gap:10px; padding:14px 14px 12px 16px; border-bottom:1px solid var(--line); }
.askpanel-head > div { display:grid; flex:1; line-height:1.2; }
.askpanel-head strong { font-size:16px; }
.askpanel-head span { font-size:12px; color:var(--faint); }
.askpanel-mark .mark { display:block; width:28px; height:28px; }
.askpanel-x { display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:50%; background:none; color:var(--muted); cursor:pointer; }
.askpanel-x:hover { background:var(--hover); color:var(--text); }
.askpanel .askbox { display:flex; flex-direction:column; flex:1; min-height:0; }
.askpanel .ask-out { flex:1; min-height:0; align-content:start; margin:0; padding:18px 18px 12px; overflow-y:auto; overscroll-behavior:contain; }
.askpanel .ask-out:empty { display:grid; }
.askpanel .ask-form { margin:0 12px; padding:6px 6px 6px 16px; border-radius:22px; box-shadow:none; }
.askpanel .ask-form textarea { font-size:15px; }
.askpanel .ask-send { width:36px; height:36px; }
.askpanel .ask-hint { margin:8px 12px 12px; font-size:12px; }
.askpanel .ask-msg { font-size:15px; }
.askpanel .ask-msg.ask-dela { padding:0; border:0; background:none; box-shadow:none; }
.askpanel .ask-msg.ask-you { max-width:80%; }
.askpanel .ask-form { margin-bottom:14px; }
.askpanel .ask-find { padding:12px 14px; }
/* Ask Dela: first-time card, suggestions, answers */
.ask-meet { display:grid; gap:12px; align-content:start; flex:1; padding:22px 20px; overflow-y:auto; }
.ask-meet .eyebrow { margin:0; font-size:13px; }
.ask-meet h2 { margin:0; font-size:20px; line-height:1.25; letter-spacing:-.02em; font-weight:650; }
.ask-two { display:grid; gap:10px; margin:4px 0 6px; }
.ask-two > div { padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--page); }
.ask-two strong { display:flex; align-items:center; gap:8px; font-size:14px; }
.ask-two strong .i { width:16px; height:16px; color:var(--accent-ink); }
.ask-two p { margin:4px 0 0; font-size:13px; color:var(--muted); line-height:1.45; }
.ask-meet .btn { justify-self:start; }
.ask-chips { display:flex; flex-wrap:wrap; gap:6px; }
.ask-chip { padding:6px 12px; border:1px solid var(--chip-line); border-radius:16px; background:var(--chip); color:var(--text); font:inherit; font-size:13px; cursor:pointer; text-align:left; }
.ask-chip:hover { border-color:var(--accent); }
.ask-li { position:relative; padding-left:14px; }
.ask-li::before { content:""; position:absolute; left:2px; top:.7em; width:4px; height:4px; border-radius:50%; background:var(--muted); }
.ask-src { display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:13px; color:var(--faint); }
.ask-src .i { width:14px; height:14px; margin-right:2px; }
.ask-src a { color:var(--accent-ink); }
.ask-help { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--faint); }
.ask-ic { display:grid; place-items:center; width:28px; height:28px; border:0; border-radius:50%; background:none; color:var(--muted); cursor:pointer; }
.ask-ic:hover { background:var(--hover); color:var(--text); }
.ask-ic .i { width:15px; height:15px; }
@media (max-width: 640px) {
  .askdock { right:12px; bottom:12px; left:12px; align-items:flex-end; }
  .askpanel { width:100%; height:min(640px, calc(100vh - 96px)); }
}

/* ---------- the demo page (/demo): one chat, three looks; the Dela bubble is the same in all three ---------- */
.dm-page { position:relative; padding:calc(var(--nav-h) + 48px) 0 clamp(72px, 9vw, 120px); overflow:hidden; }
.dm-head { max-width:760px; margin:0 auto 32px; }
.dm-head .lead { margin-top:14px; }
.dm { position:relative; max-width:1080px; margin:0 auto; }
.dm-tabs { display:flex; justify-content:center; gap:6px; margin-bottom:16px; }
.dm-tab { height:40px; padding:0 20px; border:1px solid var(--chip-line); border-radius:20px; background:var(--chip); color:var(--text); font:inherit; font-size:15px; font-weight:550; cursor:pointer; }
.dm-tab[aria-selected="true"] { border-color:transparent; background:var(--text); color:var(--page); }
.dm-app { --ai-bg:#ffffff; --ai-side:#f9f9f9; --ai-text:#0d0d0d; --ai-muted:#6b6b6b; --ai-line:rgba(0,0,0,.08); --ai-bubble:#f1f1f1; --ai-composer:#ffffff; --ai-send:#0d0d0d; --ai-on-send:#ffffff; --ai-font:var(--font); --ai-head:var(--font);
  display:grid; grid-template-columns:220px 1fr; height:min(680px, calc(100vh - 140px)); min-height:520px; border:1px solid var(--line-strong); border-radius:22px; overflow:hidden;
  background:var(--ai-bg); color:var(--ai-text); font-family:var(--ai-font); box-shadow:var(--shadow-xl); }
.dm-app[data-ai="gemini"] { --ai-bg:#ffffff; --ai-side:#f0f4f9; --ai-text:#1f1f1f; --ai-muted:#5f6368; --ai-bubble:#e9eef6; --ai-composer:#f0f4f9; --ai-send:#1f1f1f; --ai-on-send:#ffffff; }
.dm-app[data-ai="claude"] { --ai-bg:#faf9f5; --ai-side:#f3f1ea; --ai-text:#1f1e1d; --ai-muted:#73726c; --ai-bubble:#f0eee6; --ai-composer:#ffffff; --ai-send:#c96442; --ai-on-send:#ffffff;
  --ai-head:ui-serif, Georgia, "Times New Roman", serif; }
@media (prefers-color-scheme: dark) {
  .dm-app { --ai-bg:#212121; --ai-side:#181818; --ai-text:#ececec; --ai-muted:#a0a0a0; --ai-line:rgba(255,255,255,.08); --ai-bubble:#303030; --ai-composer:#303030; --ai-send:#ececec; --ai-on-send:#0d0d0d; }
  .dm-app[data-ai="gemini"] { --ai-bg:#131314; --ai-side:#1e1f20; --ai-text:#e3e3e3; --ai-muted:#9aa0a6; --ai-bubble:#282a2c; --ai-composer:#1e1f20; --ai-send:#e3e3e3; --ai-on-send:#131314; }
  .dm-app[data-ai="claude"] { --ai-bg:#262624; --ai-side:#1f1e1d; --ai-text:#f5f4ef; --ai-muted:#a6a39a; --ai-bubble:#30302e; --ai-composer:#30302e; --ai-send:#c96442; --ai-on-send:#ffffff; }
}
.dm-side { display:flex; flex-direction:column; gap:12px; padding:14px; background:var(--ai-side); border-right:1px solid var(--ai-line); }
.dm-new { display:flex; align-items:center; gap:10px; height:38px; padding:0 12px; border:0; border-radius:10px; background:none; color:var(--ai-text); font:inherit; font-size:14px; cursor:pointer; text-align:left; }
.dm-new:hover { background:var(--ai-bubble); }
.dm-new .i { width:18px; height:18px; }
.dm-left { margin:0 12px; font-size:12px; color:var(--ai-muted); }
.dm-label { margin:auto 12px 4px; font-size:12px; color:var(--ai-muted); }
.dm-main { position:relative; display:flex; flex-direction:column; min-width:0; min-height:0; }
.dm-top { display:flex; align-items:center; gap:10px; padding:12px 16px; }
.dm-picker { position:relative; }
.dm-model { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 10px; border:0; border-radius:10px; background:none; color:var(--ai-text); font:inherit; font-size:16px; font-weight:600; cursor:pointer; }
.dm-model:hover { background:var(--ai-bubble); }
.dm-model .i { width:16px; height:16px; color:var(--ai-muted); }
.dm-tag { margin-left:auto; padding:3px 10px; border:1px solid var(--ai-line); border-radius:999px; font-size:12px; color:var(--ai-muted); }
.dm-menu { position:absolute; top:calc(100% + 6px); left:0; z-index:5; width:280px; padding:6px; border:1px solid var(--ai-line); border-radius:16px; background:var(--ai-bg); box-shadow:var(--pop-shadow); }
.dm-item { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:0; border-radius:10px; background:none; color:var(--ai-text); font:inherit; text-align:left; cursor:pointer; }
.dm-item:hover { background:var(--ai-bubble); }
.dm-item > span { display:grid; flex:1; }
.dm-item strong { font-size:14px; font-weight:600; }
.dm-item small { font-size:12px; color:var(--ai-muted); }
.dm-item .i { width:16px; height:16px; color:var(--ai-muted); }
.dm-item.locked strong { color:var(--ai-muted); }
.dm-locked { display:grid; gap:10px; padding:10px 12px; font-size:14px; }
.dm-locked p { margin:0; }
.dm-locked .btn-link { justify-self:start; min-height:30px; color:var(--ai-muted); }
.dm-thread { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:18px; padding:8px max(24px, calc((100% - 720px) / 2)) 24px; }
.dm-empty { margin:auto; text-align:center; }
.dm-empty h2 { margin:0; font-family:var(--ai-head); font-size:clamp(24px, 3vw, 32px); font-weight:500; letter-spacing:-.02em; }
.dm-app[data-ai="gemini"] .dm-empty h2 { background:linear-gradient(90deg, #4285f4, #9b72cb, #d96570); -webkit-background-clip:text; background-clip:text; color:transparent; }
.dm-msg { font-size:16px; line-height:1.6; }
.dm-msg p { margin:0 0 10px; }
.dm-msg p:last-child { margin-bottom:0; }
.dm-msg ul, .dm-msg ol { margin:0 0 10px; padding-left:22px; }
.dm-msg.you { align-self:flex-end; max-width:75%; padding:10px 16px; border-radius:20px; background:var(--ai-bubble); }
.dm-app[data-ai="gemini"] .dm-msg.you { border-radius:20px 4px 20px 20px; }
.dm-msg.ai { align-self:stretch; }
.dm-msg.ai.error { color:var(--warn); }
.dm-msg.typing { display:flex; align-items:center; height:24px; }
.dm-full { display:grid; justify-items:center; gap:10px; padding:16px; border:1px dashed var(--ai-line); border-radius:16px; color:var(--ai-muted); text-align:center; }
.dm-full p { margin:0; }
.dm-bottom { position:relative; display:flex; align-items:flex-end; gap:14px; padding:0 max(24px, calc((100% - 720px) / 2)); }
.dm-composer { flex:1; display:flex; align-items:flex-end; gap:8px; min-width:0; padding:10px 10px 10px 18px; border:1px solid var(--ai-line); border-radius:28px; background:var(--ai-composer);
  box-shadow:0 2px 10px rgba(0,0,0,.05); }
.dm-app[data-ai="claude"] .dm-composer { border-radius:18px; }
.dm-composer textarea { flex:1; min-width:0; min-height:28px; max-height:140px; padding:4px 0; border:0; outline:0; resize:none; background:none; color:var(--ai-text); font:inherit; font-size:16px; line-height:1.45; }
.dm-composer textarea::placeholder { color:var(--ai-muted); }
.dm-send { display:grid; place-items:center; flex:none; width:36px; height:36px; border:0; border-radius:50%; background:var(--ai-send); color:var(--ai-on-send); cursor:pointer; }
.dm-app[data-ai="claude"] .dm-send { border-radius:10px; }
.dm-send:disabled { opacity:.35; cursor:default; }
.dm-send .i { width:18px; height:18px; }
.dm-fine { margin:10px auto 14px; padding:0 24px; max-width:720px; font-size:12px; color:var(--ai-muted); text-align:center; }
/* the Dela bubble, beside the message box: the same in every view */
.dm-dela { position:relative; flex:none; width:44px; height:44px; margin-bottom:4px; }
.dm-bubble { position:absolute; inset:0; display:grid; place-items:center; padding:0; border-radius:50%; border:1.5px solid var(--ring); cursor:pointer;
  background:radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), transparent 55%), var(--disc); color:var(--text);
  -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%); box-shadow:inset 0 .5px 0 var(--glass-edge), 0 4px 16px rgba(0,0,0,.16);
  transition:transform .35s var(--spring); }
.dm-bubble .mark { width:54%; height:54%; transition:transform .7s var(--spring); }
.dm-bubble:hover { transform:scale(1.06); }
.dm-bubble[data-loading] .mark { animation:spin 1.2s linear infinite; }
.dm-bubble[data-loading]::before { content:""; position:absolute; inset:-4px; border-radius:50%; padding:2px; background:conic-gradient(from 0deg, var(--liq-1), var(--liq-2), var(--liq-3), var(--liq-1));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); animation:spin 1.6s linear infinite; }
.dm-peek { position:absolute; right:0; bottom:calc(100% + 10px); width:min(320px, 70vw); }
.dm-peek-in { display:grid; gap:6px; width:100%; padding:12px 14px; border:1px solid var(--glass-line); border-radius:16px; background:var(--glass-strong); color:var(--text);
  -webkit-backdrop-filter:blur(24px) saturate(1.4); backdrop-filter:blur(24px) saturate(1.4); box-shadow:var(--pop-shadow); font:inherit; text-align:left; cursor:pointer; animation:askin .3s var(--ease); }
.dm-peek-top { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--faint); }
.dm-peek-top .fmt { font-weight:600; color:var(--accent-ink); }
.dm-peek-top .i { width:14px; height:14px; color:var(--accent-ink); }
.dm-peek-top .n { margin-left:auto; }
.dm-peek-text { font-size:14px; line-height:1.45; font-weight:500; }
.dm-panel { position:absolute; right:0; bottom:calc(100% + 10px); z-index:6; display:flex; flex-direction:column; width:min(380px, 80vw); max-height:min(480px, 60vh);
  border:1px solid var(--glass-line); border-radius:20px; background:var(--glass-strong); color:var(--text); -webkit-backdrop-filter:blur(28px) saturate(1.5); backdrop-filter:blur(28px) saturate(1.5);
  box-shadow:var(--shadow-xl); overflow:hidden; font-family:var(--font); animation:askin .3s var(--ease); }
.dm-panel-head { display:flex; align-items:center; gap:10px; padding:12px 12px 10px 16px; border-bottom:1px solid var(--line); font-size:14px; }
.dm-panel-head strong { flex:1; }
.dm-panel-x { display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:50%; background:none; color:var(--muted); cursor:pointer; }
.dm-panel-x:hover { background:var(--hover); }
.dm-panel-body { display:grid; gap:10px; padding:12px; overflow-y:auto; }
.dm-panel .ask-find { padding:12px 14px; }
@media (max-width: 860px) {
  .dm-app { grid-template-columns:1fr; grid-template-rows:auto minmax(0, 1fr); height:calc(100vh - 120px); min-height:480px; }
  .dm-side { flex-direction:row; align-items:center; padding:8px 10px; border-right:0; border-bottom:1px solid var(--ai-line); }
  .dm-label { display:none; }
  .dm-left { margin:0 0 0 auto; }
  .dm-thread, .dm-bottom { padding-left:14px; padding-right:14px; }
  .dm-tab { padding:0 14px; }
}

/* ---------- less motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* the demo's pause button stops its motion too */
.demo[data-paused] *, .demo[data-paused] *::after { animation-play-state:paused !important; }