@import url("../demo/demo-shell.css");
/* Same paper, ink and card language as the demo and the skin gallery. */
:root{--paper:#f8f8f6;--ink:#15171a;--ink-2:#25282d;--muted:#72777f;--faint:#969ba2;
  --line:#e4e5e5;--chip:#f1f2f3;--chip-hover:#e7e8ea;--card:rgba(255,255,255,.88);
  --shadow:0 7px 30px rgba(0,0,0,.035);--shadow-lift:0 7px 30px rgba(0,0,0,.08);
  --radius:16px;--gutter:28px;--max:1180px;
  --font:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px}
body{margin:0;background-color:var(--paper);background-image:radial-gradient(#d7d9dc 1px,transparent 1px);background-size:24px 24px;color:var(--ink);font:15px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
code{font-family:var(--mono);font-size:.88em;background:var(--chip);border-radius:6px;padding:1px 6px;color:var(--ink-2)}
button{font:inherit;border:0;background:var(--chip);padding:8px 11px;border-radius:10px;font-size:12px;color:#333;cursor:pointer;white-space:nowrap}
button:hover{background:var(--chip-hover)}
button:active{transform:translateY(1px)}
button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #858b94;outline-offset:3px}
boop-face{filter:drop-shadow(0 12px 24px rgba(0,0,0,.08))}
/* Top bar */
.topbar{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:22px var(--gutter);background:rgba(248,248,246,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.04)}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;justify-self:start}
.brand-face{width:36px;height:36px}
.brand-flip{display:grid;place-items:center;width:100%;height:100%}
/* The logo has no edge or glow. On the black bar its plain black face is
   shown reversed, white with dark eyes; skins stay as they are. */
body[data-theme="dark"] .topbar .brand-face boop-face{filter:none;transition:filter .35s ease}
body[data-theme="dark"] .topbar .brand-flip.is-plain boop-face{filter:invert(1)}
.brand-face boop-face,.footer-brand boop-face{filter:none}
.brand-name{font-weight:700;font-size:17px;letter-spacing:-.01em}
.site-nav a{padding:8px 18px}
.ghost-button{justify-self:end;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.9);color:#30343a;font-size:13px;font-weight:600;text-decoration:none;transition:background .15s,border-color .15s}
.ghost-button:hover{background:#fff;border-color:#d3d6da}
.ghost-button svg{width:16px;height:16px;fill:currentColor}
/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:48px;max-width:var(--max);margin:0 auto;padding:72px var(--gutter) 88px;min-height:calc(100vh - 92px)}
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 22px;font-size:13px;color:var(--muted)}
.eyebrow-version{padding:3px 8px;border:1px solid var(--line);border-radius:7px;font-family:var(--mono);font-size:12px;line-height:1.4;color:var(--ink);text-decoration:none;transition:border-color .15s}
.eyebrow-version:hover{border-color:rgba(255,255,255,.35)}
h1{margin:0;font-size:clamp(38px,5.4vw,62px);line-height:1.12;letter-spacing:-.025em;font-weight:720}
.lede{max-width:520px;margin:22px 0 0;font-size:18px;line-height:1.7;color:var(--muted)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border-radius:12px;font-size:14px;font-weight:600;text-decoration:none;transition:background .15s,transform .15s,box-shadow .15s}
.primary-button{background:var(--ink-2);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.12)}
.primary-button:hover{background:#000;transform:translateY(-1px)}
.secondary-button{background:rgba(255,255,255,.92);color:#30343a;border:1px solid var(--line)}
.secondary-button:hover{background:#fff;border-color:#d3d6da}
.install-pill{display:inline-flex;align-items:center;gap:12px;margin-top:18px;padding:9px 12px 9px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.7);color:var(--ink-2)}
.install-pill:hover{background:#fff}
.install-pill code{background:none;padding:0;font-size:13px}
.install-pill .muted{color:var(--faint)}
.copy-icon{width:14px;height:14px;background:currentColor;opacity:.55;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") center/contain no-repeat}
:is(.install-pill,.code-copy)[data-copied] .copy-icon{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");opacity:.9}
.hero-stage{position:relative;min-height:470px;border-radius:24px;background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.045);box-shadow:var(--shadow);display:grid;place-items:center;overflow:hidden}
.hero-avatar{position:relative;z-index:2;display:grid;place-items:center;margin-top:-40px}
/* The haze behind the face: only a fallback where WebGL is not available. */
.hero-aura{position:absolute;left:50%;top:44%;width:440px;height:360px;transform:translate(-50%,-50%);border-radius:50%;filter:blur(46px);opacity:.5;pointer-events:none;
  background:radial-gradient(40% 45% at 30% 40%,#ff9cc8,transparent 70%),radial-gradient(40% 45% at 70% 35%,#b18cff,transparent 70%),radial-gradient(45% 45% at 55% 75%,#7fd4ff,transparent 70%),radial-gradient(35% 35% at 25% 75%,#ffd36e,transparent 70%);
  background-size:140% 140%;animation:aura-drift 9s ease-in-out infinite alternate}
@keyframes aura-drift{from{background-position:0% 0%;transform:translate(-50%,-50%) rotate(0deg)}to{background-position:100% 100%;transform:translate(-50%,-50%) rotate(18deg)}}
.hero-orbit{position:absolute;inset:0;display:grid;place-items:center}
/* The hero: no card, the face stands on the page. */
body[data-hero-style="v2"] h1{font-size:clamp(34px,4.4vw,52px);font-weight:650;line-height:1.18}
/* The wordmark, set tight, with "Face" in a color gradient. */
/* By default the system's own display face, as LobeHub ends up showing:
   Segoe UI Variable on Windows, SF Pro on Apple devices. */
:is(h1.wordmark,.wordmark-mini),body[data-hero-style="v2"] :is(h1.wordmark,.wordmark-mini){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:clamp(60px,8vw,104px);font-weight:800;line-height:1;letter-spacing:-.045em;color:#1c1d20}
body[data-word-font="geist"] :is(h1.wordmark,.wordmark-mini){font-family:Geist,system-ui,sans-serif;font-weight:var(--word-weight,800);letter-spacing:-.045em}
.wordmark-face{background:linear-gradient(105deg,#7c5cff 8%,#d6549e 55%,#f0885f 95%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.wordmark+.lede{margin-top:26px}
body[data-hero-style="v2"] .hero-stage{min-height:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;display:flex;flex-direction:column;align-items:center;gap:6px}
body[data-hero-style="v2"] .hero-orbit{position:relative;inset:auto;width:var(--orbit-w,560px);height:var(--orbit-h,470px);max-width:100%}
body[data-hero-style="v2"] .hero-avatar{margin-top:0}
.hero-note{display:none}
body[data-hero-style="v2"] .hero-orbit{width:var(--disc,440px);height:var(--disc,440px)}
body[data-hero-style="v2"] .hero-aura{z-index:1}
body[data-hero-style="v2"] .hero-avatar{position:relative;z-index:2}
/* The hand-written note sits outside the disc; its arrow is drawn by the
   script from the note to the face, so it always points at the avatar. */
.note-arrow{display:none}
body[data-hero-style="v2"] .note-arrow{display:block;position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none;stroke:#9aa0a6;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body[data-hero-style="v2"] .hero-note{display:block;position:absolute;z-index:3;left:calc(100% - 92px);top:-14px;width:150px;margin:0;font-size:12.5px;line-height:1.75;color:#7f848b;transform:rotate(-4deg);transform-origin:left top}
.note-arrow.is-drawing .note-shaft{animation:note-draw 1s .5s ease-out forwards}
.note-arrow.is-drawing .note-head{animation:note-draw .3s 1.45s ease-out forwards}
@keyframes note-draw{to{stroke-dashoffset:0}}
body[data-hero-style="v2"] .hero-actions{position:static;margin-top:20px;transform:none;padding:0;gap:2px;background:none;box-shadow:none;backdrop-filter:none;flex-wrap:wrap;justify-content:center}
body[data-hero-style="v2"] .hero-actions button{background:none;color:var(--muted);font-size:13px;padding:7px 12px;border-radius:999px}
body[data-hero-style="v2"] .hero-actions button:hover{background:rgba(0,0,0,.045);color:var(--ink)}
body[data-hero-style="v2"] .hero-actions button[aria-pressed="true"]{background:rgba(0,0,0,.06);color:var(--ink);font-weight:600}
.hero-actions{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);display:flex;gap:6px;padding:8px;border-radius:16px;background:var(--card);box-shadow:var(--shadow-lift);backdrop-filter:blur(14px)}
.hero-actions button[aria-pressed="true"],.expression-grid button[aria-pressed="true"]{background:#dfe1e4;color:#202327}
/* Sections */
.section{max-width:var(--max);margin:0 auto;padding:72px var(--gutter)}
.section-head{max-width:var(--max);margin:0 auto 36px;text-align:center}
/* The paragraphs under the headings: one sentence to a line, as written; a line that is still too long breaks into two even halves, never a word left alone. */
.section-head>p{margin-inline:auto}
h2{margin:0;font-size:clamp(28px,3.4vw,40px);line-height:1.2;letter-spacing:-.02em;font-weight:700}
.section-head>p:not(.kicker){margin:14px 0 0;color:var(--muted);font-size:16px}
h3{margin:0;font-size:16px;font-weight:650}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
/* Chat window */
@keyframes bubble-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.also{text-align:center;color:var(--muted);font-size:13px;margin:22px auto 0;max-width:640px}
/* Expressions */
.expressions{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:14px;align-items:stretch}
.expression-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px}
.expression-avatar{height:200px;display:grid;place-items:center}
.expression-caption{margin:0;text-align:center;font-size:13px;color:var(--muted);min-height:44px}
.expression-caption code{display:block;width:max-content;margin:0 auto 6px;font-size:12px}
.expression-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.expression-grid button{padding:16px 14px;border:1px solid var(--line);background:var(--card);border-radius:12px;font-size:14px;font-weight:600;color:var(--ink-2);white-space:normal;transition:border-color .15s,box-shadow .15s}
.expression-grid button:hover{background:#fff;border-color:#d3d6da;box-shadow:0 3px 10px rgba(0,0,0,.05)}
.expression-grid button[aria-pressed="true"]{border-color:#858b94}
/* Skins */
.skin-strip{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.skin-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 6px 12px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);text-decoration:none;color:var(--muted);transition:border-color .15s,transform .15s}
.skin-tile:hover{border-color:#d3d6da}
.skin-tile .tile-face{height:84px;display:grid;place-items:center}
.skin-tile span{font-size:11px;text-align:center;line-height:1.35}
.skin-tile b{font-weight:500;color:var(--faint);font-variant-numeric:tabular-nums}
.center-row{display:flex;justify-content:center;margin-top:26px}
/* Light */
#light{padding-top:56px;padding-bottom:56px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stat{padding:22px}
.stat strong{display:block;font-size:34px;line-height:1.1;letter-spacing:-.02em;font-weight:700}
.stat small{font-size:15px;font-weight:600;margin-left:3px;color:var(--muted)}
.stat span{display:block;margin-top:8px;font-size:13px;color:var(--muted)}
/* Embedded */
.embedded{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:32px;align-items:center}
.embedded-copy>p:not(.kicker){color:var(--muted);margin:14px 0 0}
.embedded-note strong{color:var(--ink-2);font-weight:600}
.embedded-robot{position:relative;aspect-ratio:5/4}
#embedded .embedded-brand{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 9px;margin:0 0 28px}
#embedded .wordmark-mini{font-size:38px;line-height:1;margin:0;text-shadow:none}
#embedded .wordmark-mini .wordmark-face{margin-left:.05em}
.embedded-name{margin-left:4px;font-size:17px;line-height:1;font-weight:400;color:var(--ink-2)}
.embedded-tag{display:block;flex:none;width:auto;height:28.5px}
.embedded-rule{height:1px;margin:64px 0 56px;border:0;background:var(--line)}
#embedded .robot-controls .hero-actions{margin-top:14px}
.robot-turn{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px}
.robot-dial{position:relative;display:block;width:min(280px,56%)}
/* A notch marks the middle, where the robot faces you; the line fills out from it. */
.robot-dial::before{content:"";position:absolute;left:50%;top:50%;width:1px;height:10px;translate:-50% -50%;background:rgba(255,255,255,.28)}
.robot-dial input{position:relative;display:block;width:100%;height:20px;margin:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.robot-dial input::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:rgba(255,255,255,.18)}
.robot-dial input::-moz-range-track{height:2px;border-radius:2px;background:rgba(255,255,255,.18)}
.robot-dial input::-webkit-slider-thumb{width:16px;height:16px;margin-top:-7px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #0d0d0e,0 1px 6px rgba(0,0,0,.5);transition:transform .15s ease;-webkit-appearance:none;appearance:none}
.robot-dial input::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #0d0d0e,0 1px 6px rgba(0,0,0,.5);transition:transform .15s ease}
.robot-dial input:hover::-webkit-slider-thumb,.robot-dial input:active::-webkit-slider-thumb{transform:scale(1.15)}
.robot-dial input:hover::-moz-range-thumb,.robot-dial input:active::-moz-range-thumb{transform:scale(1.15)}
.robot-dial input:focus-visible{outline:2px solid #aeb2b8;outline-offset:3px;border-radius:999px}
/* Arrows on either side of the dial, and the lock further off: an open
   lock while the robot follows the mouse, a closed one once it is held. */
#embedded .robot-step,#embedded .robot-lock{display:inline-flex;align-items:center;gap:7px;padding:5px;border:0;border-radius:8px;background:none;color:var(--muted);font-size:13px;cursor:pointer;transition:color .15s ease}
#embedded .robot-step:hover,#embedded .robot-lock:hover{background:none;color:#fff}
#embedded .robot-step svg,#embedded .robot-lock svg{display:block;flex:none}
#embedded .robot-lock{margin-left:22px}
#embedded .robot-lock .lock-shut,#embedded .robot-lock[aria-pressed="true"] .lock-open{display:none}
#embedded .robot-lock[aria-pressed="true"] .lock-shut{display:block}
.support-boards,.support-screens{list-style:none;margin:0;padding:0;display:grid}
.support-boards{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 28px;margin-top:24px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.support-boards strong{display:block;font-size:30px;line-height:1.1;letter-spacing:-.02em;font-weight:700;color:var(--ink);white-space:nowrap}
.support-row{display:flex;align-items:center;gap:8px;margin-top:10px}
.support-chip{flex:none;width:30px;height:30px;color:var(--ink)}
.support-boards small,.support-screens small{display:block;font-size:12px;line-height:1.5;color:var(--muted);white-space:nowrap}
.support-screens{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:24px 0;border-bottom:1px solid var(--line)}
#embedded .embedded-note{margin-top:24px}
.support-screens li{display:flex;align-items:center;gap:10px}
.support-screens strong{display:block;margin-bottom:2px;font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap}
/* Each screen icon is a small lit display showing a pair of eyes. */
.screen-shape{position:relative;flex:none;display:block;box-sizing:border-box;border:1px solid rgba(255,255,255,.5);
  background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.02) 62%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.screen-shape::before,.screen-shape::after{content:"";position:absolute;top:50%;width:5px;height:6px;margin-top:-3px;border-radius:50%;background:#fff}
.screen-shape::before{left:calc(50% - 7px)}
.screen-shape::after{left:calc(50% + 2px)}
.screen-shape.round{width:30px;height:30px;border-radius:50%}
.screen-shape.soft{width:32px;height:26px;border-radius:6px}
.screen-shape.flat{width:32px;height:22px;border-radius:3px}
.screen-shape.flat::before,.screen-shape.flat::after{border-radius:0}
@media (max-width:760px){
  .support-boards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .support-screens{grid-template-columns:minmax(0,1fr)}
}
.embedded-robot canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .35s}
.embedded-robot canvas.drawn{opacity:1}
#embedded .hero-actions{position:static;transform:none;margin-top:12px;padding:0;gap:2px;background:none;box-shadow:none;backdrop-filter:none;flex-wrap:wrap;justify-content:center;opacity:1}
/* Start */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.step{position:relative;min-width:0;padding:32px 30px;display:flex;flex-direction:column;gap:14px}
.step+.step{border-left:1px solid var(--line)}
#start .steps,#embedded .steps{background:#1a1a1b}
.step-no{font-size:52px;line-height:1;font-weight:500;letter-spacing:-.02em;color:rgba(255,255,255,.22)}
.step h3{margin:6px 0 0;font-size:19px}
.step pre{margin:0;padding:14px;border-radius:12px;background:#25282d;color:#e9eaec;overflow:auto;font-size:12px;line-height:1.6}
.step pre code,body .section .step pre code{background:none;padding:0;color:inherit;font-size:inherit}
.step pre{position:relative;padding-right:44px;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere}
.step p a{color:var(--ink);text-decoration:none;transition:color .15s}
.step p a:hover{color:var(--ink-2)}
body[data-theme="dark"][data-below="dark"] .step p a:hover{color:#fff}
/* Big buttons that open another page carry a small arrow. */
a:is(.primary-button,.secondary-button,.ghost-button):is([target="_blank"],[href*=".html"])::after{content:"";flex:none;width:12px;height:12px;margin-left:7px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l6-6M4 3h5v5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l6-6M4 3h5v5'/%3E%3C/svg%3E") center/contain no-repeat}
#embedded .embedded-note strong{font-size:18px;line-height:1.7}
.code-copy{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:28px;height:28px;padding:0;border-radius:8px}
.step p{margin:0;font-size:13px;color:var(--muted)}
/* Footer */
.footer{max-width:var(--max);margin:40px auto 0;padding:36px var(--gutter) 48px;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:16px 32px;align-items:center}
.footer-brand{display:flex;align-items:center;gap:12px}
.footer-brand strong{display:block;font-size:15px}
.footer-brand span{font-size:12px;color:var(--muted)}
.footer-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 18px;font-size:13px}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--ink)}
.footer-legal{grid-column:1/-1;margin:0;font-size:12px;color:var(--faint)}
@media (max-width:1000px){
  .site-nav{display:none}
  .topbar{grid-template-columns:1fr auto}
  .hero{grid-template-columns:minmax(0,1fr);gap:36px;padding-top:44px;min-height:0;text-align:center}
  .hero-copy{display:flex;flex-direction:column;align-items:center}
  .lede{margin-inline:auto}
  .hero .cta-row{justify-content:center}
  .hero-stage{min-height:400px}
  .skin-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .embedded{grid-template-columns:minmax(0,1fr);padding:24px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .step+.step{border-left:0;border-top:1px solid var(--line)}
  .expressions{grid-template-columns:minmax(0,1fr)}
  .expression-stage{min-height:300px}
}
@media (max-width:640px){
  :root{--gutter:16px}
  .section{padding:52px var(--gutter)}
  .hero-stage{min-height:360px}
  .hero-actions{max-width:calc(100% - 20px);overflow-x:auto}
  .expression-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .skin-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .skin-tile{padding:12px 2px 8px}
  .skin-tile .tile-face{height:60px}
  .stats{grid-template-columns:minmax(0,1fr)}
  .footer{grid-template-columns:minmax(0,1fr)}
  .footer-links{justify-content:flex-start}
  .ghost-button span{display:none}
}
@media (max-width:640px){
  body[data-hero-style="v2"] .hero-stage{min-height:0}
  body[data-hero-style="v2"] .hero-actions{margin-top:20px}
  body[data-hero-style="v2"] .hero-note{left:calc(100% - 106px);top:-30px;width:146px;font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .note-shaft,.note-head{animation:none;stroke-dashoffset:0}
  .hero-aura{animation:none}
}
/* ===== Dark theme =====
   Black page, light type, and a few highlights: a white rim light behind
   the hero face, cards lit along their top edge, and one bright gradient
   taken from the skin gallery button. */
body[data-theme="dark"]{--paper:#000;--ink:#ededed;--ink-2:#f5f5f5;--muted:#a1a1a1;--faint:#6e6e6e;
  --line:rgba(255,255,255,.09);--chip:rgba(255,255,255,.06);--chip-hover:rgba(255,255,255,.11);--card:#0a0a0a;
  --shadow:none;--shadow-lift:0 10px 40px rgba(0,0,0,.6);
  /* The skin gallery button's colors (pink #ff9cc8, violet #b18cff, sky
     #7fd4ff on pale pink), each pushed a little more saturated. */
  --brand:linear-gradient(100deg,#ffc21a 0%,#ff3d9e 30%,#9a4dff 62%,#1fb0ff 100%);
  background-color:#000;background-image:radial-gradient(rgba(255,255,255,.065) 1px,transparent 1px);color:var(--ink);color-scheme:dark}
body[data-theme="dark"][data-below="dark"] boop-face,body[data-theme="dark"] :is(.topbar,.hero) boop-face{filter:none}
body[data-theme="dark"][data-below="dark"] button,body[data-theme="dark"] :is(.topbar,.hero) button{background:var(--chip);color:#d6d6d6}
body[data-theme="dark"][data-below="dark"] button:hover,body[data-theme="dark"] :is(.topbar,.hero) button:hover{background:var(--chip-hover);color:#fff}
body[data-theme="dark"][data-below="dark"] code,body[data-theme="dark"] :is(.topbar,.hero) code{background:var(--chip);color:#e6e6e6}
/* Bar, nav and buttons */
body[data-theme="dark"] .topbar{background:rgba(0,0,0,.72);border-bottom-color:rgba(255,255,255,.06)}
body[data-theme="dark"] .demo-nav{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07);box-shadow:none}
body[data-theme="dark"] .demo-nav a{color:#a1a1a1}
body[data-theme="dark"] .demo-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
body[data-theme="dark"] .ghost-button,body[data-theme="dark"] .hero .secondary-button,body[data-theme="dark"] .install-pill{background:rgba(255,255,255,.03);border-color:var(--line);color:#e6e6e6}
body[data-theme="dark"] .ghost-button:hover,body[data-theme="dark"] .hero .secondary-button:hover,body[data-theme="dark"] .install-pill:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
/* Pale gray at rest, lighting up on hover, though never as white as the
   wordmark. */
body[data-theme="dark"] .hero .primary-button{background:#b3b3b3;color:#000;box-shadow:none;transition:background-color .2s ease,box-shadow .2s ease,transform .15s}
body[data-theme="dark"] .hero .primary-button:hover{background:#e4e4e4;box-shadow:0 8px 30px rgba(255,255,255,.08)}
body[data-theme="dark"][data-below="dark"] .demo-skin-page-link{background:rgba(255,255,255,.05);color:#fff;box-shadow:0 0 0 1px var(--line)}
/* The name: "Boop" in white, "Face" in the skin gallery button's pink,
   violet and sky, pushed well past the button's pastel, led by a warm
   yellow. The gradient's
   direction keeps turning, so every letter cycles through all three colors
   instead of one end staying pink. */
@property --face-turn{syntax:'<angle>';inherits:false;initial-value:0deg}
body[data-theme="dark"] :is(h1.wordmark,.wordmark-mini){color:#fff}
body[data-theme="dark"] .wordmark-face{background-image:linear-gradient(var(--face-turn),#ffc21a 4%,#ff3d9e 30%,#9a4dff 60%,#1fb0ff 94%);
  background-size:100% 100%;
  animation:face-turn 7s linear infinite}
@keyframes face-turn{to{--face-turn:360deg}}
/* Hero: no ring; a white rim light hugs the black face, with a faint haze
   and film grain behind it. */
body[data-theme="dark"] .hero-aura{display:block;top:50%;width:420px;height:420px;opacity:1;filter:blur(30px);animation:none;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 32%,rgba(255,255,255,0) 62%)}
body[data-theme="dark"] #heroFace{--lx:0px;--ly:-2px;--lx2:0px;--ly2:-6px;
  filter:drop-shadow(var(--lx) var(--ly) 1.5px rgba(255,255,255,.95)) drop-shadow(var(--lx2) var(--ly2) 10px rgba(255,255,255,.55)) drop-shadow(0 0 34px rgba(255,255,255,.28)) drop-shadow(0 0 90px rgba(255,255,255,.12))}
.hero-grain{display:none}
body[data-theme="dark"] .hero-grain{display:block;position:absolute;left:50%;top:50%;width:480px;height:480px;transform:translate(-50%,-50%);z-index:1;pointer-events:none;opacity:.22;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 58%);mask:radial-gradient(circle,#000 18%,transparent 58%);animation:grain .9s steps(6) infinite}
@keyframes grain{0%{background-position:0 0}20%{background-position:-40px 20px}40%{background-position:30px -50px}60%{background-position:-60px -10px}80%{background-position:50px 40px}100%{background-position:0 0}}
/* The note is written in black: it hides in the dark and shows only where
   the light falls behind it. */
body[data-theme="dark"] .hero-note{color:#000;font-weight:600}
body[data-theme="dark"] .note-arrow{stroke:#000;stroke-width:2}
/* Lower, below the antenna's level, and lit gray while the pointer is on the
   note or its arrow. */
body[data-hero-style="v2"] .hero-note{top:44px;transition:color .3s ease}
body[data-hero-style="v2"] .note-shaft,body[data-hero-style="v2"] .note-head{transition:stroke .3s ease}
.note-arrow .note-hit{stroke:transparent;stroke-width:18;pointer-events:stroke;stroke-dasharray:none!important;animation:none!important}
body[data-theme="dark"] .note-lit .hero-note{color:#9a9a9a}
body[data-theme="dark"] .note-lit .note-arrow{stroke:#9a9a9a}
body[data-theme="dark"] .lede strong{color:#fff;font-weight:650}
body[data-theme="dark"] .hero-actions button{color:#8f8f8f}
body[data-theme="dark"] .hero-actions button:hover{background:rgba(255,255,255,.07);color:#fff}
body[data-theme="dark"] .hero-actions button[aria-pressed="true"]{background:rgba(255,255,255,.1);color:#fff}
/* Sections: white-to-gray headings, a gradient kicker, and cards lit along
   their top edge with a soft glow that follows the pointer. */
body[data-theme="dark"][data-below="dark"] h2{background:linear-gradient(180deg,#fff 30%,#9a9a9a);-webkit-background-clip:text;background-clip:text;color:transparent}
body[data-theme="dark"][data-below="dark"] .card,body[data-theme="dark"][data-below="dark"] .skin-tile,body[data-theme="dark"][data-below="dark"] .expression-grid button{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)) ,#070707;border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
body[data-theme="dark"][data-below="dark"] .card::before,body[data-theme="dark"][data-below="dark"] .skin-tile::before{content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);pointer-events:none}
body[data-theme="dark"][data-below="dark"] .skin-tile:hover,body[data-theme="dark"][data-below="dark"] .expression-grid button:hover{border-color:rgba(255,255,255,.2);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),#0a0a0a}
body[data-theme="dark"][data-below="dark"] .expression-grid button{color:#d9d9d9}
body[data-theme="dark"][data-below="dark"] .expression-grid button[aria-pressed="true"]{color:#fff;border-color:transparent;background:linear-gradient(#0a0a0a,#0a0a0a) padding-box,var(--brand) border-box;border:1px solid transparent}
body[data-theme="dark"][data-below="dark"] :is(.stat,.support-boards) strong{background:linear-gradient(180deg,#fff 35%,#8a8a8a);-webkit-background-clip:text;background-clip:text;color:transparent}
body[data-theme="dark"][data-below="dark"] .step pre{background:#000;box-shadow:inset 0 0 0 1px var(--line)}
body[data-theme="dark"][data-below="dark"] .footer{border-top-color:var(--line)}
body[data-theme="dark"][data-below="dark"] .footer-links a:hover{color:#fff}
@media (prefers-reduced-motion:reduce){
  body[data-theme="dark"] .wordmark-face,body[data-theme="dark"] .hero-grain{animation:none}
}
@media (max-width:640px){
  body[data-theme="dark"] .hero-aura{width:300px;height:300px}
  body[data-theme="dark"] .hero-grain{width:320px;height:320px}
}
/* With WebGL the shader draws the whole light; the face keeps only a faint
   edge so its outline reads crisply against the glow. */
.hero-light{display:none}
body[data-theme="dark"].has-light .hero-light{display:block;position:absolute;left:50%;top:50%;width:min(900px,100vw);height:min(900px,100vw);transform:translate(-50%,-50%);z-index:0;pointer-events:none}
body[data-theme="dark"].has-light .hero-aura,body[data-theme="dark"].has-light .hero-grain{display:none}
body[data-theme="dark"].has-light #heroFace{filter:drop-shadow(var(--lx) var(--ly) 1px rgba(255,255,255,.55))}
/* Plain black behind the light, so the opaque light canvas meets the page
   without a seam. */
body[data-theme="dark"]{background-image:none}
html{overflow-x:clip}
/* The opaque light canvas sits under everything else in the hero. */
body[data-theme="dark"] .hero-copy,body[data-theme="dark"] .hero-actions{position:relative;left:auto;bottom:auto;z-index:2}
body[data-theme="dark"] .hero-stage{isolation:auto}
/* Gray panels behind the black faces lower on the page (the chat, the
   expression stage and the skin tiles), so the faces stand out. */
body[data-theme="dark"]{--panel:#45474d;--panel-2:#4f5157}
body[data-theme="dark"][data-below="dark"] .expression-stage{background:var(--panel)}
body[data-theme="dark"][data-below="dark"] .expression-caption{color:#b5b5b5}
body[data-theme="dark"][data-below="dark"] .skin-tile b{color:#9a9a9a}
/* The top bar eases between its colors. */
.topbar,.topbar .demo-nav,.topbar .demo-nav a,.topbar .ghost-button,.brand-name{transition:background-color .35s ease,border-color .35s ease,color .35s ease}
body[data-theme="dark"] .brand-name{color:#ededed}
/* Sections fade up as they come into view. */
@media (prefers-reduced-motion:no-preference){
  body[data-theme="dark"] .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
  body[data-theme="dark"] .reveal.is-in{opacity:1;transform:none}
  body[data-theme="dark"] .section-head~.reveal{transition-delay:.08s}
}
@media (prefers-reduced-motion:reduce){
  body[data-theme="dark"] .hero{transform:none}
}
/* Clip, not hide: a hidden overflow would make the body a scroller and stop
   the sticky top bar and first screen from sticking. */
body{overflow-x:clip}
/* The name in the top bar, set like the big wordmark. */
.brand-name{font-family:Geist,system-ui,sans-serif;font-weight:700;font-size:27px;letter-spacing:-.04em}
/* The way into the embedded version turns into a little old monitor on
   hover: faint scan lines, white text with a soft glow, and now and then a
   bright line sweeping down the screen. */
.demo-nav a.nav-crt{position:relative;isolation:isolate;overflow:hidden}
.demo-nav a.nav-crt::before,.demo-nav a.nav-crt::after{content:'';position:absolute;z-index:-1;pointer-events:none;opacity:0;transition:opacity .2s ease}
.demo-nav a.nav-crt::before{inset:0;border-radius:inherit;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),radial-gradient(130% 160% at 50% 45%,#2a2a2a,#0e0e0e 75%);
  box-shadow:inset 0 0 10px rgba(0,0,0,.7)}
.demo-nav a.nav-crt::after{left:0;right:0;top:0;height:14px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.03) 55%,rgba(255,255,255,.12) 92%,transparent);transform:translateY(-120%)}
body .topbar .site-nav a.nav-crt:hover,body .topbar .site-nav a.nav-crt:focus-visible{color:#fff;background:transparent;text-shadow:0 0 6px rgba(255,255,255,.6)}
.demo-nav a.nav-crt:hover::before,.demo-nav a.nav-crt:focus-visible::before{opacity:1}
.demo-nav a.nav-crt:hover::after,.demo-nav a.nav-crt:focus-visible::after{opacity:1;animation:crt-sweep 2.8s .25s linear infinite}
@keyframes crt-sweep{0%{transform:translateY(-120%)}30%{transform:translateY(320%)}100%{transform:translateY(320%)}}
@media (prefers-reduced-motion:reduce){
  .demo-nav a.nav-crt:hover::after{animation:none;opacity:0}
}
/* The skins button's text turns black over its pastel glow. */
body .topbar .site-nav a.demo-nav-skins:hover,body .topbar .site-nav a.demo-nav-skins:focus-visible{color:#000;background:transparent}
/* The light's canvas melts into the page, so it never shows a square edge. */
body[data-theme="dark"].has-light .hero-light{-webkit-mask:radial-gradient(closest-side,#000 62%,transparent 100%);mask:radial-gradient(closest-side,#000 62%,transparent 100%)}
/* The skin gallery button: black text and a black dot over its glow. */
.demo-skin-page-link:hover,.demo-skin-page-link:focus-visible{color:#000}
.demo-skin-page-link:hover::after,.demo-skin-page-link:focus-visible::after{background:#000}
/* A big sign-off above the footer: "Say hello." with a gray full stop and a
   large arrow off to the right; the whole line opens the demo, and the
   arrow moves out toward its corner on hover. */
.hello{max-width:var(--max);margin:56px auto 0;padding:0 var(--gutter);display:flex;justify-content:space-between;align-items:flex-start;gap:24px;color:var(--ink);text-decoration:none}
.hello-word{font-family:Geist,Inter,system-ui,sans-serif;font-weight:500;font-size:clamp(68px,12.5vw,180px);line-height:1.05;letter-spacing:-.04em;white-space:nowrap}
/* A round full stop: the font's own is square. */
.hello-dot{display:inline-block;width:.15em;height:.15em;margin-left:.05em;border-radius:50%;background:#8f959d;transition:background-color .25s ease}
.hello-arrow{flex:none;width:clamp(44px,5.6vw,80px);height:auto;margin-top:clamp(8px,1.2vw,18px);fill:none;stroke:#a3a7ad;stroke-width:8;stroke-linecap:butt;transition:transform .3s cubic-bezier(.3,1.4,.5,1),stroke .25s ease}
.hello:hover .hello-arrow{transform:translate(6px,-6px);stroke:var(--ink)}
.hello:hover .hello-dot{background:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .hello:hover .hello-arrow{transform:none}
}
/* Color fringes on "Say hello.": the faintest warm edge up and to the left
   of each stroke and a cool one down and to the right, offset on the
   diagonal, less than a pixel each way. */
body[data-fringe="on"] .hello-word{text-shadow:-.6px -.6px 0 rgba(214,120,60,.5),.6px .6px 0 rgba(60,120,214,.5)}
body[data-fringe="on"] .hello-dot{box-shadow:-.6px -.6px 0 rgba(214,120,60,.5),.6px .6px 0 rgba(60,120,214,.5)}
/* The same fringe on "Boop" in the hero; "Face" is see-through gradient
   type, so a shadow would show through it and it goes without. */
body[data-fringe="on"] :is(h1.wordmark,.wordmark-mini){text-shadow:-.6px -.6px 0 rgba(255,160,90,.7),.6px .6px 0 rgba(110,170,255,.7)}
body[data-fringe="on"] .wordmark-face{text-shadow:none}
/* The install line: the box sizes itself to the command, so it can't
   scroll; it gets more room around the text, and the command sits on the
   box itself instead of a second, tighter box. */
.install-pill{gap:16px;padding:11px 14px 11px 18px;white-space:nowrap}
body[data-theme="dark"] .hero .install-pill code{background:none;padding:0}
/* Copy breaks by hand at its phrases on wide screens; on phones the lines
   wrap on their own. */
.lede{max-width:560px}
@media (max-width:640px){
  br.wide{display:none}
}
/* The agents section: the slogan, its second line in gray, over the three
   kinds of agent on the left; the demo chat window on the right. */
/* A full-width gray band behind the section. */
#agents,#embedded{position:relative;isolation:isolate;padding-top:96px;padding-bottom:88px}
#agents::before,#embedded::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;translate:-50% 0;background:#ededeb}
.agents{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:44px;align-items:center}
.slogan{margin:0;line-height:1.3;color:var(--ink)}
.slogan span{color:#8f959d}
.agent-list{list-style:none;margin:28px 0 0;padding:0;display:grid}
.agents-lede{margin:18px 0 0;font-size:16px;color:var(--muted)}
.agent-list li{padding:13px 0;border-top:1px solid var(--line)}
.agent-list li:last-child{border-bottom:1px solid var(--line)}
.agent-list h3{font-size:16px}
.agent-list p{margin:4px 0 0;font-size:14px;color:var(--muted)}
@media (max-width:1000px){
  .agents{grid-template-columns:minmax(0,1fr);gap:40px}
}
/* The demo chat as a little app window, tilted a touch over a second card:
   three dots for a title bar, the latest question in a soft gray pill, the
   agent's face beside its name, reply and status, and an input line where
   the next question is typed. */
.flow-stage{position:relative;display:grid;place-items:center;padding:30px 8px;min-width:0}
/* The window and, under it, a second darker card of the same size turned
   the other way, peeking out on the left and at the bottom right. */
.talk-wrap{position:relative;width:100%;max-width:700px}
.talk-back{position:absolute;inset:0;padding:0;border-radius:22px;background:#dfe0dd;transform:translate(-6px,20px) rotate(1.6deg)}
.talk-back:disabled{cursor:default}
.talk{position:relative;width:100%;border-radius:22px;background:#fbfbfa;border:1px solid rgba(0,0,0,.05);box-shadow:0 30px 70px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.03);transform:rotate(-1.4deg);display:grid;grid-template-columns:204px minmax(0,1fr);overflow:hidden}
/* The left column: the window's three dots over the list of bots. */
.talk-side{min-width:0;background:#f2f2f0;border-right:1px solid #e7e7e4}
.talk-bots{list-style:none;margin:0;padding:0 8px 10px;display:grid;gap:2px}
.talk-bot{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;border-radius:12px;background:none;font:inherit;text-align:left;cursor:pointer;transition:background-color .2s ease}
.talk-bot:hover{background:#e9e9e6}
.talk-bot.is-open{background:#e3e3e0}
.talk-bot boop-face{flex:none;pointer-events:none;filter:none}
.talk-bot-text{min-width:0;display:grid;gap:2px}
.talk-bot-name{font-size:13px;font-weight:600;color:#25282d}
.talk-bot-preview{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;color:#8a8f96}
.talk-main{min-width:0;display:flex;flex-direction:column}
.talk-head{padding:13px 24px;border-bottom:1px solid #ececea;font-size:14px;font-weight:600;color:#25282d}
.talk-bar{display:flex;gap:6px;padding:16px 16px}
.talk-bar i{width:8px;height:8px;border-radius:50%;background:#dcdedf}
/* A fixed-height window onto the thread: the newest turn sits at the
   bottom, older ones fade out under the title bar. */
.talk-body{display:flex;flex-direction:column;justify-content:flex-end;height:470px;padding:0 24px 24px;overflow:hidden;
  -webkit-mask:linear-gradient(transparent,#000 72px);mask:linear-gradient(transparent,#000 72px)}
.talk-thread{display:flex;flex-direction:column;gap:20px}
.talk-thread>*{flex:none}
.talk-agent+.talk-ask{margin-top:10px}
.talk-ask{align-self:flex-end;max-width:78%;margin:0;padding:13px 18px;border-radius:18px;background:#eceeef;font-size:14px;line-height:1.6;color:#4b5057}
.talk-agent{display:flex;align-items:flex-start;gap:14px}
.talk-agent boop-face{flex:none;filter:none}
.talk-text{min-width:0;padding-top:2px}
.talk-name{display:flex;align-items:center;gap:10px;margin:0;font-size:14px;color:#4b5057}
.talk-reply{margin:8px 0 0;font-size:15px;line-height:1.7;color:#34383d}
.talk-reply.is-typing{letter-spacing:.2em;color:#9a9da2}
.is-new{animation:bubble-in .38s cubic-bezier(.16,1,.3,1)}
.talk-status{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:12px;color:#7d838a}
.talk-status i{width:6px;height:6px;border-radius:50%;background:#a3a8ad;transition:background-color .3s ease}
.talk-status[data-state="listening"] i{background:#3d8bfd}
.talk-status[data-state="thinking"] i{background:#e0a020;animation:status-pulse 1s ease-in-out infinite}
.talk-status[data-state="done"] i{background:#2fb171}
.talk-status[data-state="asking"] i{background:#e5743a}
.talk-status[data-state="failed"] i{background:#e5484d}
@keyframes status-pulse{50%{opacity:.25}}
.talk-input{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;border-top:1px solid #ececea;font-size:13px;color:#a0a5ab}
.talk-input .is-typing,.talk-input:has(.is-typing){color:#34383d}
.talk-enter{color:#9aaab5}
.talk-enter svg,.talk-plus svg{display:block}
.talk-plus{display:none}
@media (max-width:640px){
  .flow-stage{padding:28px 4px}
  .talk{transform:rotate(-1deg);grid-template-columns:minmax(0,1fr)}
  .talk-body{height:400px;padding:0 20px 20px}
  .talk-side{border-right:0;border-bottom:1px solid #e7e7e4}
  .talk-bots{display:flex;overflow-x:auto;padding:0 10px 10px}
  .talk-bot{padding:6px}
  .talk-bot-text{display:none}
}
/* The "also suits" line sits under the agent list, left-aligned with it,
   clear of the chat window. */
.also-left{text-align:left;margin:22px 0 0;max-width:none}
/* The agents band is black too, and the plain face in the demo window turns
   white. */
body[data-theme="dark"][data-below="dark"] :is(#agents,#embedded)::before{background:#0d0d0e}
body[data-theme="dark"][data-below="dark"] .slogan{background:none;color:#fff}
body[data-theme="dark"][data-below="dark"] .slogan span{color:#8a8a8a}
/* The demo window comes in two looks, graphite and the demo's white, and the
   card behind it is always the other one: click it and the two swap. */
body[data-theme="dark"][data-below="dark"] .talk-wrap{--w-bg:#1f1f21;--w-side:#171718;--w-edge:rgba(255,255,255,.09);--w-line:rgba(255,255,255,.07);--w-ink:#f2f2f3;--w-muted:#9b9ea4;--w-soft:#aeb1b6;--w-text:#ececec;--w-dot:#4b4b4f;--w-hover:rgba(255,255,255,.05);--w-open:rgba(255,255,255,.09);--w-back:#161618;--w-stack-edge:rgba(255,255,255,.12);--w-swatch:#fff;
  --w-field:#2a2a2d;--w-btn:#3a3a3e;--w-btn-ink:#d6d7da;--w-send:#f0f0f0;--w-send-ink:#0a0a0b;--w-focus:rgba(255,255,255,.2);
  --bubble-user:#ececec;--bubble-user-ink:#1b1b1d;--bubble-bot:#2e2e31;--bubble-bot-ink:#e4e4e6}
body[data-theme="dark"][data-below="dark"] .talk-wrap[data-look="light"]{--w-bg:#d8d9dc;--w-side:#cdced2;--w-edge:rgba(0,0,0,.06);--w-line:#c2c3c8;--w-ink:#1f2226;--w-muted:#53575d;--w-soft:#53575d;--w-text:#2b2e33;--w-dot:#aeb0b5;--w-hover:#c4c5ca;--w-open:#bbbcc2;--w-back:#161618;--w-stack-edge:rgba(255,255,255,.12);--w-swatch:#0a0a0b;
  --w-field:#e6e7e9;--w-btn:#c5c6cb;--w-btn-ink:#4a4d53;--w-send:#2b2e33;--w-send-ink:#fff;--w-focus:rgba(0,0,0,.28);
  --bubble-user:#5c6168;--bubble-user-ink:#fff;--bubble-bot:#e9eaec;--bubble-bot-ink:#3d4147}
/* Both cards sit square, since any tilt softens the faces and text. The top
   edge of the one behind is a labelled tab saying what a click will do. */
body[data-theme="dark"][data-below="dark"] .flow-stage{padding-top:52px;padding-right:36px}
/* The card behind is the window's own size, pushed up and to the right so it
   shows along the top and down the right edge, like the next window in a
   stack fanned out. It looks like a window too: dark, with a fine edge. Its
   top edge is a labelled tab saying what a click will do. */
body[data-theme="dark"][data-below="dark"] .talk-wrap{--back-x:28px}
@media (max-width:760px){
  body[data-theme="dark"][data-below="dark"] .talk-wrap{--back-x:10px}
  body[data-theme="dark"][data-below="dark"] .flow-stage{padding-right:18px}
}
body[data-theme="dark"][data-below="dark"] .talk-back{inset:0;background:var(--w-back);border:1px solid var(--w-stack-edge);color:#e8e8e9;cursor:pointer;transform:translate(var(--back-x),-38px);transition:transform .25s cubic-bezier(.3,1.4,.5,1),filter .2s ease}
body[data-theme="dark"][data-below="dark"] .talk-back:hover{background:var(--w-back);filter:brightness(1.25);transform:translate(calc(var(--back-x) + 4px),-44px)}
.talk-tab{display:none}
body[data-theme="dark"][data-below="dark"] .talk-tab{position:absolute;inset:0 0 auto;height:38px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:500;transition:opacity .14s ease}
body[data-theme="dark"][data-below="dark"] .talk-tab i{width:10px;height:10px;border-radius:50%;background:var(--w-swatch);box-shadow:0 0 0 1px rgba(255,255,255,.28)}
body[data-theme="dark"][data-below="dark"] .talk-wrap.is-swapping .talk-tab{opacity:0}
body[data-theme="dark"][data-below="dark"] .talk{background:var(--w-bg);border-color:var(--w-edge);box-shadow:0 30px 80px rgba(0,0,0,.7);transform:none}
/* While the two cards trade places they are blank. */
.talk-side,.talk-main{transition:opacity .14s ease}
.talk.is-blank>*{opacity:0}
body[data-theme="dark"][data-below="dark"] .talk-side{background:var(--w-side);border-right-color:var(--w-line)}
body[data-theme="dark"][data-below="dark"] .talk-bar i{background:var(--w-dot)}
body[data-theme="dark"][data-below="dark"] .talk-bot:hover{background:var(--w-hover)}
body[data-theme="dark"][data-below="dark"] .talk-bot.is-open{background:var(--w-open)}
/* The plain black face turns white on the black window only. */
body[data-theme="dark"][data-below="dark"] .talk-wrap:not([data-look="light"]) .talk boop-face:not([skin]){filter:invert(1)}
body[data-theme="dark"][data-below="dark"] .talk-bot-name,body[data-theme="dark"][data-below="dark"] .talk-head{color:var(--w-ink)}
body[data-theme="dark"][data-below="dark"] .talk-bot-preview{color:var(--w-muted)}
body[data-theme="dark"][data-below="dark"] .talk-head,body[data-theme="dark"][data-below="dark"] .talk-input{border-color:var(--w-line)}
/* Both sides of the chat in soft bubbles, each with one tighter corner on
   the speaker's side. The bot's name sits only at the top of the window. */
body[data-theme="dark"][data-below="dark"] .talk-ask{background:var(--bubble-user);color:var(--bubble-user-ink);border-radius:18px 6px 18px 18px}
body[data-theme="dark"][data-below="dark"] .talk-name{display:none}
body[data-theme="dark"][data-below="dark"] .talk-reply{width:fit-content;margin:0;padding:11px 16px;border-radius:6px 18px 18px 18px;background:var(--bubble-bot);color:var(--bubble-bot-ink);font-size:14px}
body[data-theme="dark"][data-below="dark"] .talk-status{margin:8px 0 0 4px;color:var(--w-soft)}
body[data-theme="dark"][data-below="dark"] .talk-reply.is-typing{color:var(--w-muted)}
body[data-theme="dark"][data-below="dark"] .talk-input{color:var(--w-muted)}
body[data-theme="dark"][data-below="dark"] .talk-input .is-typing,body[data-theme="dark"][data-below="dark"] .talk-input:has(.is-typing){color:var(--w-text)}
body[data-theme="dark"][data-below="dark"] .talk-enter{color:var(--w-muted)}
/* The input line as a pill: a plus on the left for adding things, a round
   send button on the right that lights up while a question is being typed. */
body[data-theme="dark"][data-below="dark"] .talk-input{gap:10px;margin:0 22px 22px;padding:6px;border:1px solid var(--w-line);border-radius:999px;background:var(--w-field);font-size:14px;transition:border-color .25s ease}
body[data-theme="dark"][data-below="dark"] .talk-input:has(.is-typing){border-color:var(--w-focus)}
body[data-theme="dark"][data-below="dark"] #flowInput{flex:1;min-width:0;padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body[data-theme="dark"][data-below="dark"] .talk-plus,body[data-theme="dark"][data-below="dark"] .talk-enter{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--w-btn);color:var(--w-btn-ink);transition:background-color .25s ease,color .25s ease}
body[data-theme="dark"][data-below="dark"] .talk-input:has(.is-typing) .talk-enter{background:var(--w-send);color:var(--w-send-ink)}
@media (max-width:640px){
  body[data-theme="dark"][data-below="dark"] .talk-input{margin:0 14px 14px}
}
@media (max-width:640px){
  body[data-theme="dark"][data-below="dark"] .talk-side{border-bottom-color:var(--w-line)}
}
/* Buttons further down the black page match the ones on the first screen. */
body[data-theme="dark"][data-below="dark"] .sheet .primary-button{background:#b3b3b3;color:#000;box-shadow:none}
body[data-theme="dark"][data-below="dark"] .sheet .primary-button:hover{background:#e4e4e4}
body[data-theme="dark"][data-below="dark"] .sheet .secondary-button{background:rgba(255,255,255,.03);border-color:var(--line);color:#e6e6e6}
body[data-theme="dark"][data-below="dark"] .sheet .secondary-button:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
/* The footer's plain black face turns white on black, like the logo. */
body[data-theme="dark"][data-below="dark"] .footer boop-face{filter:invert(1)}
/* The list rows are plain until hovered or open. */
body[data-theme="dark"][data-below="dark"] .talk-bot{background:none}
/* On black, the fringe on "Say hello." takes the brighter pair used on "Boop". */
body[data-below="dark"][data-fringe="on"] .hello-word{text-shadow:-.6px -.6px 0 rgba(255,160,90,.7),.6px .6px 0 rgba(110,170,255,.7)}
body[data-below="dark"][data-fringe="on"] .hello-dot{box-shadow:-.6px -.6px 0 rgba(255,160,90,.7),.6px .6px 0 rgba(110,170,255,.7)}
/* The expressions stage: the gallery's lit backdrop for the obsidian skin in
   the page's neutral grays, over a faint grid that fades toward the edges,
   with the gallery's soft floor shadow under the face. */
body[data-theme="dark"][data-below="dark"] .expression-stage{background:
  radial-gradient(closest-side at 50% 44%,transparent 45%,#181818 118%),
  linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) center/32px 32px,
  linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) center/32px 32px,
  radial-gradient(at 48% 32%,#3d3d3d 0,#252525 42%,#181818 100%)}
body[data-theme="dark"][data-below="dark"] #exprFace{background:radial-gradient(35.4% 5.8% at 50% 92.1%,rgba(0,0,0,.3),rgba(0,0,0,.12) 50%,transparent)}
/* Color belongs to the skin gallery and the skins button in the top bar.
   Everything else on the black page stays neutral, small text and icons
   above all. */
body[data-theme="dark"][data-below="dark"] .expression-grid button[aria-pressed="true"]{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.34);color:#fff}
body[data-theme="dark"][data-below="dark"] .talk-status[data-state] i{background:var(--w-soft)}
/* No glow following the pointer behind the face on the expressions stage. */
body[data-theme="dark"][data-below="dark"] .expression-stage::after{content:none}
/* The skin tiles are plain flat cards, like the expression buttons above. */
body[data-theme="dark"][data-below="dark"] .skin-tile::before{content:none}
body[data-theme="dark"][data-below="dark"] .expression-stage[data-mode="light"]{border-color:transparent;background:
  radial-gradient(closest-side at 50% 44%,transparent 45%,#838383 125%),
  linear-gradient(rgba(0,0,0,.06) 1px,transparent 1px) center/32px 32px,
  linear-gradient(90deg,rgba(0,0,0,.06) 1px,transparent 1px) center/32px 32px,
  radial-gradient(circle at 50% 40%,#f6f6f6 0,#d1d1d1 42%,#838383 100%)}
body[data-theme="dark"][data-below="dark"] .expression-stage[data-mode="light"]::before{content:none}
body[data-theme="dark"][data-below="dark"] .expression-stage[data-mode="light"] .expression-caption{color:#454545}
body[data-theme="dark"][data-below="dark"] .expression-stage[data-mode="light"] .expression-caption code{background:rgba(0,0,0,.07);color:#2c2c2c}
/* The buttons beside the stage already name each expression, so the caption
   keeps only the code name. */
body[data-theme="dark"][data-below="dark"] .expression-caption{min-height:0}
body[data-theme="dark"][data-below="dark"] .expression-caption span{display:none}
body[data-theme="dark"][data-below="dark"] .expression-caption code{margin:0 auto}
/* The stage's three looks, picked with three small flat buttons in one frame
   along its bottom edge. Each button is painted like the head it brings: the glossy
   skin, white, or black. */
.expr-modes{display:none}
body[data-theme="dark"][data-below="dark"] .expression-stage{position:relative;gap:8px;padding-bottom:40px}
body[data-theme="dark"][data-below="dark"] .expr-modes{position:absolute;left:50%;bottom:12px;translate:-50% 0;display:flex;gap:6px;padding:6px;border-radius:11px;background:rgba(255,255,255,.05)}
body[data-theme="dark"][data-below="dark"] .expr-modes button{width:34px;height:15px;padding:0;border:0;border-radius:5px;transition:box-shadow .15s ease}
body[data-theme="dark"][data-below="dark"] .expr-modes button:hover{box-shadow:0 0 0 1px rgba(0,0,0,.55)}
body[data-theme="dark"][data-below="dark"] .expr-modes button[aria-pressed="true"]{box-shadow:0 0 0 1px #000}
body[data-theme="dark"][data-below="dark"] .expr-modes [data-mode="light"][aria-pressed="true"]{box-shadow:0 0 0 1px rgba(0,0,0,.3)}
body[data-theme="dark"][data-below="dark"] .expr-modes [data-mode="skin"],body[data-theme="dark"][data-below="dark"] .expr-modes [data-mode="skin"]:hover{background:radial-gradient(55% 110% at 84% 118%,rgba(205,205,205,.5),transparent 72%),radial-gradient(90% 150% at 30% 12%,#8e8e8e,#393939 48%,#161616 78%,#080808)}
body[data-theme="dark"][data-below="dark"] .expr-modes [data-mode="dark"],body[data-theme="dark"][data-below="dark"] .expr-modes [data-mode="dark"]:hover{background:#fff}
body[data-theme="dark"][data-below="dark"] .expr-modes [data-mode="light"],body[data-theme="dark"][data-below="dark"] .expr-modes [data-mode="light"]:hover{background:#000}
body[data-theme="dark"][data-below="dark"] .expression-stage[data-mode="light"] .expr-modes{background:rgba(0,0,0,.06)}
/* The skins button and the gallery link light up in the same colors as "Face"
   in the wordmark: a slice of the gradient, much larger than the button,
   drifting slowly round so every color comes past. */
body[data-theme="dark"][data-below="dark"] .demo-nav a.demo-nav-skins::before,body[data-theme="dark"][data-below="dark"] .demo-skin-page-link::before{background:linear-gradient(125deg,#ffc21a 8%,#ff3d9e 36%,#9a4dff 62%,#1fb0ff 92%) calc(50% + cos(var(--face-turn))*50%) calc(50% + sin(var(--face-turn))*50%)/160% 160% no-repeat;animation:face-turn 7s linear infinite paused}
body[data-theme="dark"][data-below="dark"] .demo-nav a.demo-nav-skins:hover::before,body[data-theme="dark"][data-below="dark"] .demo-nav a.demo-nav-skins:focus-visible::before,body[data-theme="dark"][data-below="dark"] .demo-skin-page-link:hover::before,body[data-theme="dark"][data-below="dark"] .demo-skin-page-link:focus-visible::before{animation-play-state:running;box-shadow:none}
body[data-theme="dark"][data-below="dark"] .demo-skin-page-link:hover,body[data-theme="dark"][data-below="dark"] .demo-skin-page-link:focus-visible{background:transparent;color:#000;box-shadow:none}
/* The gallery link's dot wears the same drifting colors, all the time; on the
   colored hover it turns black. */
body[data-theme="dark"][data-below="dark"] .demo-skin-page-link::after{background:linear-gradient(125deg,#ffc21a 8%,#ff3d9e 36%,#9a4dff 62%,#1fb0ff 92%) calc(50% + cos(var(--face-turn))*50%) calc(50% + sin(var(--face-turn))*50%)/160% 160% no-repeat;animation:face-turn 7s linear infinite}
body[data-theme="dark"][data-below="dark"] .demo-skin-page-link:hover::after,body[data-theme="dark"][data-below="dark"] .demo-skin-page-link:focus-visible::after{background:#000;animation:none}
@media (prefers-reduced-motion:reduce){
  body[data-theme="dark"][data-below="dark"] .demo-skin-page-link::after{animation:none}
}
/* In this section the product name leads: the wordmark takes the first line
   at full size, with its Chinese name right under it. */
#embedded .embedded-brand{--brand-size:clamp(32px,3.3vw,48px);gap:10px 13px;margin:0 0 20px}
#embedded .wordmark-mini{font-size:var(--brand-size)}
#embedded .embedded-tag{height:calc(var(--brand-size)*.75)}
#embedded .embedded-name{flex-basis:100%;margin:2px 0 0;font-size:22px;font-weight:600;line-height:1.3;color:var(--ink)}
/* The circuit-board scan behind the robot only: a little larger than the
   robot's column, under it, and faded out toward every edge so it has no
   border and stays clear of the text. */
.embedded-stage{position:relative}
.scan-board{position:absolute;z-index:-1;top:-14%;left:-10%;display:block;width:126%;height:120%;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side ellipse at 50% 44%,#000 35%,rgba(0,0,0,.6) 62%,transparent 100%);
  mask-image:radial-gradient(closest-side ellipse at 50% 44%,#000 35%,rgba(0,0,0,.6) 62%,transparent 100%)}
/* Where the robot, its turn slider and its buttons sit, as tuned on
   2026-11-03 (site/tuner.js can be mounted again to change them). The board
   moves with the robot so its processor stays behind it. */
#embedded .embedded-robot{width:104%;margin-left:-2%;translate:0 -4px}
#embedded .scan-board{translate:0 -4px}
#embedded .robot-turn{translate:0 -16px;opacity:.5}
#embedded .robot-dial{width:min(180px,60vw)}
#embedded .robot-controls .hero-actions{translate:0 16px}
/* Small rounded frames for a version number or the licence: after the
   embedded version's name, and above the wordmark on the first screen. */
.version-tag{display:inline-block;padding:2px 9px;border:1px solid rgba(255,255,255,.2);border-radius:7px;font-size:13px;font-weight:500;line-height:1.5;letter-spacing:.02em;color:var(--muted);text-decoration:none;font-variant-numeric:tabular-nums;transition:border-color .15s,color .15s}
a.version-tag:hover{border-color:rgba(255,255,255,.4);color:var(--ink)}
#embedded .version-tag{margin-left:12px;vertical-align:.2em}
.eyebrow{gap:8px}
/* The expression rows under the first-screen face and under the robot as a
   segmented control: a rounded rectangle like the buttons beside it, with a
   fine edge. The chosen button is only brighter text, no backing, and the
   space from the edge to the first label equals the space between labels. */
body[data-theme="dark"] .hero-actions,body[data-theme="dark"] #embedded .hero-actions{display:flex;flex-wrap:nowrap;width:fit-content;max-width:100%;margin-inline:auto;gap:0;padding:4px 18px;border:.5px solid rgba(255,255,255,.07);border-radius:16px;background:rgba(255,255,255,.03);overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
body[data-theme="dark"] .hero-actions::-webkit-scrollbar{display:none}
body[data-theme="dark"][data-below="dark"] .hero-actions button{flex:none;background:none;padding:7px 18px;border-radius:8px;font-size:14px;font-weight:500;line-height:1.4;color:#9a9a9a;transition:background-color .2s ease,color .2s ease}
body[data-theme="dark"][data-below="dark"] .hero-actions button:hover{background:none;color:#e6e6e6}
body[data-theme="dark"][data-below="dark"] .hero-actions button[aria-pressed="true"]{background:none;box-shadow:none;color:#fff}
@media (max-width:640px){body[data-theme="dark"][data-below="dark"] .hero-actions button{padding:7px 13px;font-size:13px}}
/* The footer on one row: the name on the left, the links on the right, and
   the licence line centred in the space between them. (The links reach past
   the middle of the page, so the page's own centre would overlap them.) */
.footer{grid-template-columns:auto minmax(0,1fr) auto;gap:16px 36px}
.footer-brand{grid-row:1;grid-column:1}
.footer-legal{grid-row:1;grid-column:2;justify-self:center;text-align:center;white-space:nowrap}
.footer-links{grid-row:1;grid-column:3;flex-wrap:nowrap;white-space:nowrap}
@media (max-width:1000px){.footer{grid-template-columns:minmax(0,1fr)}.footer-brand,.footer-legal,.footer-links{grid-row:auto;grid-column:1;justify-self:start}.footer-links{flex-wrap:wrap;white-space:normal;justify-content:flex-start}.footer-legal{text-align:left}}
/* Two ways to put the face on a page, switched by two small tabs above the
   code: in an npm project, or straight into a web page. */
.code-tabs{display:flex;width:fit-content;gap:2px;padding:3px;border-radius:10px;background:rgba(0,0,0,.45)}
body[data-theme="dark"][data-below="dark"] .code-tabs button{padding:6px 13px;border:0;border-radius:7px;background:none;font-size:13px;font-weight:500;line-height:1.4;color:#8f8f8f;cursor:pointer;transition:background-color .15s,color .15s}
body[data-theme="dark"][data-below="dark"] .code-tabs button:hover{background:rgba(255,255,255,.05);color:#e6e6e6}
body[data-theme="dark"][data-below="dark"] .code-tabs button[aria-selected="true"]{background:rgba(255,255,255,.12);color:#fff}
.step pre[hidden]{display:none}
/* The way to every board and screen combination, under the screen types. */
.support-more{display:inline-block;margin-top:16px;font-size:13px;color:var(--ink);text-decoration:none;transition:color .15s}
.support-more:hover{color:#fff}
/* Under each face in the skin wall, the attribute that puts it on a page:
   color="…" for a plain color, skin="…" for a skin. */
.skin-tile b{font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:0}
@media (max-width:640px){.skin-tile b{font-size:8px}}
/* The language button beside GitHub in the top bar, and its list. */
.topbar-end{justify-self:end;display:flex;align-items:center;gap:8px}
.lang-menu{position:relative}
.topbar-end .ghost-button{justify-self:auto}
body[data-theme="dark"] .lang-toggle{cursor:pointer;font:inherit;font-size:13px;font-weight:600}
.lang-toggle svg{width:15px;height:15px;fill:none}
.lang-list{position:absolute;right:0;top:calc(100% + 8px);z-index:50;display:grid;min-width:150px;padding:6px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(14,14,15,.96);box-shadow:0 18px 48px rgba(0,0,0,.6);backdrop-filter:blur(14px)}
.lang-list[hidden]{display:none}
body[data-theme="dark"][data-below="dark"] .lang-list button{display:block;width:100%;padding:8px 12px;border:0;border-radius:9px;background:none;text-align:left;font-size:13px;font-weight:500;color:#a1a1a1;cursor:pointer}
body[data-theme="dark"][data-below="dark"] .lang-list button:hover{background:rgba(255,255,255,.06);color:#fff}
body[data-theme="dark"][data-below="dark"] .lang-list button[aria-checked="true"]{background:rgba(255,255,255,.1);color:#fff}
@media (max-width:640px){.lang-toggle .lang-name{display:none}}


/* On phones the board names are smaller, so two fit side by side. */
@media (max-width:640px){.support-boards strong{font-size:24px}}
/* Each language with its own system fonts for the Chinese characters, kana
   and hangul, so Japanese and Traditional Chinese are not drawn in a
   Simplified Chinese typeface. */
html:lang(zh-TW){--font:Inter,"PingFang TC","Microsoft JhengHei","Noto Sans TC",system-ui,sans-serif}
html:lang(ja){--font:Inter,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo","Noto Sans JP",system-ui,sans-serif}
html:lang(ko){--font:Inter,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif}
/* No lonely last word: headings and short paragraphs share their words out
   evenly over the lines, longer text avoids a single word on the last line.
   This matters most in other languages, whose lines break in other places. */
h2,h3,.lede,.agents-lede,.embedded-note,.step p,.agent-list p,.also,.support-boards small,.support-screens small{text-wrap:balance}
p,li,small{text-wrap:pretty}
.section-head>p{max-width:980px;text-wrap:pretty}
/* A sentence stays whole: lines break between sentences, and a line only
   breaks inside one when the sentence is wider than the column itself (a
   phone), where its words are shared out evenly. */
.s{display:inline-block;max-width:100%;text-wrap:balance}
.section-head>p{text-wrap:wrap}