.route-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.route-error{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:1000;padding:14px 20px;border:1px solid #d3cbca;border-radius:8px;background:#fffafc;color:#55444d;box-shadow:0 8px 30px #20121a18;font:14px/1.6 system-ui;max-width:calc(100vw - 32px)}
.route-error button{font:inherit;color:#a53760;background:none;border:0;text-decoration:underline;cursor:pointer}
.site-route h1:focus:not(:focus-visible){outline:none}
.site-route .topbar a{transition:color 160ms ease,background-color 160ms ease,border-color 160ms ease}
::view-transition-old(root){animation:route-leave 150ms ease both}
::view-transition-new(root){animation:route-enter 240ms cubic-bezier(.2,.7,.2,1) both}
@keyframes route-leave{to{opacity:0;transform:translateY(-5px)}}
@keyframes route-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}.site-route .topbar a{transition:none}html{scroll-behavior:auto!important}}

/* Shared site chrome. Every route loads this file, so the header, footer and the
   few components used on several pages live here. Tokens are prefixed so page
   stylesheets that define their own --pink/--line cannot change them.
   Pink text on light grounds uses --mc-link (AA); --mc-action is for fills
   carrying white text. */
:root{--mc-ground:#fbf8f7;--mc-surface:#fffdfc;--mc-ink:#342d32;--mc-heading:#231e22;--mc-muted:#6b5a64;--mc-body:#4f3f48;--mc-line:#ead9df;--mc-soft:#f8e3ea;--mc-action:#c8446f;--mc-action-hover:#b83e65;--mc-link:#ad3a60;--mc-brand:#e4567b;--mc-font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;--mc-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* Header (every page except the homepage, which keeps its first-screen header). */
.site-header{position:relative;z-index:30;display:flex;align-items:center;gap:28px;min-height:84px;padding:0 max(24px,calc((100% - 1320px) / 2));background:var(--mc-surface);border-bottom:1px solid var(--mc-line);font-family:var(--mc-font);color:var(--mc-ink)}
.site-header .brand{display:flex;align-items:center;gap:10px;font:800 28px/1 Arial,Helvetica,sans-serif;letter-spacing:-.06em;color:var(--mc-ink);white-space:nowrap;text-decoration:none}
.site-header .brand b{color:var(--mc-brand);font-weight:800}
.site-header .brand img{width:36px;height:32px;flex:none}
.site-header .site-menu{display:flex;align-items:center;gap:22px;margin-left:auto}
.site-header nav{display:flex;align-items:center;gap:4px}
.site-header nav a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:7px;font-size:15px;font-weight:500;color:#57454f;text-decoration:none;transition:background-color .18s,color .18s}
.site-header nav a:hover{background:#fcecf1;color:var(--mc-link)}
.site-header nav a[aria-current=page]{background:var(--mc-soft);color:var(--mc-link);font-weight:600}
.site-header .site-cta{display:inline-flex;align-items:center;gap:16px;min-height:44px;padding:4px 4px 4px 18px;border:1px solid var(--mc-action);border-radius:7px;background:var(--mc-action);color:#fff;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color .18s}
.site-header .site-cta .arrow{display:grid;place-items:center;width:34px;height:34px;border-radius:5px;background:rgba(255,255,255,.18);font-size:19px}
.site-header .site-cta:hover{background:var(--mc-action-hover);border-color:var(--mc-action-hover);color:#fff}
.menu-toggle{display:none;align-items:center;gap:9px;min-height:44px;margin-left:auto;padding:0 14px;border:1px solid var(--mc-line);border-radius:7px;background:var(--mc-surface);color:var(--mc-ink);font:500 14px/1 var(--mc-font);cursor:pointer}
.menu-icon{position:relative;display:block;width:16px;height:2px;border-radius:2px;background:currentColor}
.menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0;width:16px;height:2px;border-radius:2px;background:currentColor;transition:transform .18s}
.menu-icon::before{top:-5px}.menu-icon::after{top:5px}
[data-open] .menu-icon{background:transparent}
[data-open] .menu-icon::before{transform:translateY(5px) rotate(45deg)}
[data-open] .menu-icon::after{transform:translateY(-5px) rotate(-45deg)}
.site-header a:focus-visible,.site-header button:focus-visible,.site-foot a:focus-visible,.menu-toggle:focus-visible{outline:2px solid var(--mc-action);outline-offset:3px}
@media(max-width:860px){
  .site-header{min-height:68px;gap:12px;padding:0 20px}
  .site-header .brand{font-size:22px}
  .site-header .brand img{width:28px;height:26px}
  .site-header .menu-toggle{display:inline-flex}
  .site-header .site-menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:14px;margin:0;padding:12px 20px 22px;background:var(--mc-surface);border-bottom:1px solid var(--mc-line);box-shadow:0 18px 28px rgba(52,33,44,.1)}
  .site-header[data-open] .site-menu{display:flex}
  .site-header nav{flex-direction:column;align-items:stretch;gap:2px}
  .site-header nav a{min-height:48px;padding:0 12px;font-size:16px}
  .site-header .site-cta{justify-content:space-between;min-height:50px}
}
@media(scripting:none) and (max-width:860px){.site-header{flex-wrap:wrap}.site-header .menu-toggle{display:none}.site-header .site-menu{display:flex;position:static;width:100%;padding:0 0 14px;border:0;box-shadow:none}}

/* Footer: one on every public page. Selectors are qualified because the
   homepage stylesheet styles bare nav/header elements. */
.site-foot{border-top:1px solid var(--mc-line);background:#f6edf0;color:var(--mc-ink);font-family:var(--mc-font)}
.site-foot-main{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px;max-width:1320px;margin:0 auto;padding:56px 24px 40px}
.site-foot .footer-brand{display:inline-block;font:800 26px/1 Arial,Helvetica,sans-serif;letter-spacing:-.05em;color:var(--mc-ink);text-decoration:none}
.site-foot .footer-brand span{color:var(--mc-brand)}
.site-foot .site-foot-brand p{margin:12px 0 14px;max-width:22em;font-size:14px;line-height:1.8;color:var(--mc-muted)}
.site-foot .site-foot-mail{font-size:14px;color:var(--mc-link);text-decoration:underline;text-underline-offset:4px;text-decoration-color:#e0b1c1}
.site-foot nav{display:flex;flex:none;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;font-size:14px;font-weight:400;color:var(--mc-ink)}
.site-foot .site-foot-title{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--mc-ink)}
.site-foot nav a{display:inline-flex;align-items:center;min-height:36px;padding:0;border-radius:0;background:none;color:#57454f;text-decoration:none}
.site-foot nav a:hover{background:none;color:var(--mc-link)}
.site-foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1320px;margin:0 auto;padding:16px 24px 24px;border-top:1px solid var(--mc-line)}
.site-foot-bottom small{font-size:13px;color:var(--mc-muted)}
.site-foot .back-top{display:inline-flex;align-items:center;gap:8px;min-height:36px;font-size:13px;color:#57454f;text-decoration:none}
.site-foot .back-top:hover{color:var(--mc-link)}
@media(max-width:760px){.site-foot-main{grid-template-columns:1fr 1fr;gap:28px 20px;padding:40px 20px 28px}.site-foot-brand{grid-column:1/-1}.site-foot-bottom{padding:14px 20px 22px}}

/* Shared actions. */
.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:52px;padding:5px 5px 5px 22px;border:1px solid var(--mc-action);border-radius:7px;background:var(--mc-action);color:#fff;font:600 15px/1.2 var(--mc-font);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .18s}
.cta .arrow{display:grid;place-items:center;width:42px;height:42px;border-radius:5px;background:rgba(255,255,255,.18);font-size:21px}
.cta:hover{background:var(--mc-action-hover);border-color:var(--mc-action-hover);color:#fff}
.cta-ghost{display:inline-flex;align-items:center;gap:14px;min-height:44px;padding:4px 16px;border:1px solid #dcb3c2;border-radius:7px;background:var(--mc-surface);color:var(--mc-link);font:600 14px/1.2 var(--mc-font);text-decoration:none;cursor:pointer;transition:background-color .18s,border-color .18s}
.cta-ghost:hover{background:#fcf0f4;border-color:var(--mc-action)}
.cta-ghost:disabled{opacity:.6;cursor:wait}
.cta-ghost .arrow{font-size:17px}
.cta:focus-visible,.cta-ghost:focus-visible{outline:2px solid var(--mc-action);outline-offset:3px}

/* Code samples on marketing pages. The doubled class outranks page stylesheets
   that style .codebox for documentation. */
.codebox.mc-code{margin:0;border:1px solid #3d2f36;border-radius:12px;overflow:hidden;background:#241c21;color:#f3e6ec;font-family:var(--mc-mono)}
.codebox.mc-code .code-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px 8px 16px;border-bottom:1px solid #3d2f36;background:#2d2329;font:12px/1.4 var(--mc-mono);color:#dcc8d1}
.codebox.mc-code .copy-btn{flex:none;min-height:32px;padding:4px 10px;border:1px solid #5b4753;border-radius:5px;background:transparent;color:#f7d7e3;font:12px/1 var(--mc-mono);cursor:pointer}
.codebox.mc-code .copy-btn:hover{border-color:#f09ab7}
.codebox.mc-code pre{margin:0;padding:18px 20px;overflow:auto;max-height:460px;border:0;border-radius:0;background:transparent;color:#f3e6ec;font:13px/1.85 var(--mc-mono);tab-size:2;white-space:pre}
.codebox.mc-code pre:focus-visible,.codebox.mc-code .copy-btn:focus-visible{outline:2px solid #f09ab7;outline-offset:-2px}
.codebox.mc-code [role=tablist]{display:flex;flex-wrap:wrap;gap:4px}
.codebox.mc-code [role=tab]{min-height:34px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:#dcc8d1;font:500 13px/1 var(--mc-font);cursor:pointer}
.codebox.mc-code [role=tab]:hover{color:#fff}
.codebox.mc-code [role=tab][aria-selected=true]{background:#4a3440;color:#fff}
.codebox.mc-code [role=tab]:focus-visible{outline:2px solid #f09ab7;outline-offset:1px}
@media(prefers-reduced-motion:reduce){.menu-icon::before,.menu-icon::after,.cta,.cta-ghost,.site-header nav a{transition:none}}

/* Syntax highlighting (site/src/highlight.ts). Light code surfaces by default;
   every colour is at least 4.5:1 on #faf0f4. */
.hl-c{color:#6f5f68}.hl-s{color:#2c6b3f}.hl-k,.hl-t{color:#b0305c}.hl-n,.hl-a{color:#955800}.hl-f,.hl-v{color:#1f5fa3}.hl-p{color:#6a3d8f}
/* Dark code surfaces (home, playground): at least 4.5:1 on #241c21. */
.mc-code .hl-c{color:#a8949f}.mc-code .hl-s{color:#a7d9a4}.mc-code .hl-k,.mc-code .hl-t{color:#ff8fb3}.mc-code .hl-n,.mc-code .hl-a{color:#f5c07a}.mc-code .hl-f,.mc-code .hl-v{color:#9cc9ff}.mc-code .hl-p{color:#e0b3ff}

/* Our own --mc-surface / --mc-font tokens must not leak into embedded widgets:
   custom properties inherit into the widget's shadow root, where the same names
   are its public theming hooks. `initial` makes it use its built-in defaults. */
[data-mc-id]{--mc-surface:initial;--mc-font:initial}