/* Shard website. See DESIGN.md next to the website folder for the rules behind this file.
   Order: fonts, tokens, base, header, buttons, the split layout, the tree, inner pages,
   docs, footer, icons, plugin recreation. */

@font-face { font-family: "Bricolage Grotesque"; src: url("../assets/fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../assets/fonts/source-sans-3.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../assets/fonts/source-sans-3-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Code Pro"; src: url("../assets/fonts/source-code-pro.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

:root {
  color-scheme: light;
  --page: #ffffff;
  --slab: #f1f3f5;
  --line: #d5dae0;
  --ink: #16202a;
  --soft: #55606b;
  --blue: #0a62c4;
  --blue-deep: #084f9f;
  --green: #17753a;
  --green-bg: #e2f2e7;
  --red: #b3261e;
  --amber: #7a5200;
  --amber-bg: #fcf1cf;
  --display: "Bricolage Grotesque", "Arial Narrow", "Segoe UI", sans-serif;
  --text: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --mono: "Source Code Pro", Consolas, "Courier New", monospace;
  --gutter: max(clamp(16px, 7vw, 100px), calc((100vw - 1560px) / 2));
  --edge: max(clamp(16px, 5vw, 72px), calc((100vw - 1560px) / 2));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--text); font-size: 18px; line-height: 1.5; overflow-x: hidden; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: var(--blue); text-underline-offset: 4px; }
a:hover { color: var(--blue-deep); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
code, kbd, pre { font-family: var(--mono); }
code { font-size: .88em; }
kbd { display: inline-block; padding: 0 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: #fff; font-family: var(--text); font-size: .92em; font-weight: 600; line-height: 1.45; white-space: nowrap; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 16px; background: var(--ink); color: #fff; }
.skip-link:focus { top: 12px; color: #fff; }

h1, h2 { font-family: var(--display); font-stretch: 84%; text-wrap: balance; }
h1 { font-weight: 750; font-size: clamp(2.5rem, 4.6vw, 4.1rem); line-height: .98; letter-spacing: -.032em; }
h2 { font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.02; letter-spacing: -.025em; }
h3 { font-size: 1.2rem; font-weight: 650; line-height: 1.25; }
.lead { font-size: 1.16rem; color: #2b3640; }
.soft { color: var(--soft); }
.small { font-size: .9rem; }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 5; background: var(--page); }
.bar { display: flex; align-items: center; gap: 30px; min-height: 68px; padding: 0 var(--edge) 0 var(--gutter); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: var(--display); font-stretch: 84%; font-weight: 700; font-size: 1.45rem; letter-spacing: -.02em; }
.brand:hover { color: var(--ink); }
.brand svg { width: 28px; height: 28px; }
.brand small { font-family: var(--text); font-stretch: normal; font-weight: 400; font-size: .94rem; letter-spacing: 0; color: var(--soft); }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; align-items: center; gap: 26px; }
.site-nav a { color: var(--soft); text-decoration: none; font-size: 1.03rem; }
.site-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav-toggle { display: none; align-items: center; gap: 8px; height: 38px; margin-left: auto; padding: 0 12px; border: 1.5px solid var(--ink); background: none; font-weight: 600; font-size: 1rem; cursor: pointer; }
.nav-toggle svg { width: 18px; height: 18px; }
.site-nav .nav-get { display: none; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; background: var(--blue); color: #fff; font-weight: 600; font-size: 1.06rem; text-decoration: none; border: 0; cursor: pointer; }
.btn:hover { background: var(--blue-deep); color: #fff; }
.btn.small { min-height: 38px; padding: 0 16px; font-size: 1rem; }
.btn.line { background: none; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.line:hover { background: var(--ink); color: #fff; }
.go { color: var(--ink); font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }

/* ---------- The split: the left says it, the right shows it ---------- */
.split { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
.say { padding: 84px 48px 84px var(--gutter); }
.show { background: var(--slab); padding: 84px var(--edge) 84px 40px; min-width: 0; }
.say-in { position: sticky; top: 32px; max-width: 31rem; }
.say p { margin-top: 18px; }
.say p + p { margin-top: 14px; }
.say .aside { margin-top: 22px; padding-left: 14px; border-left: 3px solid var(--line); font-size: .97rem; color: var(--soft); }
.show-in { max-width: 680px; }
.cap { margin-top: 14px; font-size: .94rem; color: var(--soft); }
.cap button, .textbtn { padding: 0; border: 0; background: none; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

.hero .say { padding-top: clamp(40px, 9vh, 96px); padding-bottom: 72px; align-self: center; }
.hero .show { padding-top: 40px; padding-bottom: 48px; display: flex; flex-direction: column; justify-content: center; }
.hero { min-height: min(calc(100vh - 68px), 860px); }
.hero h1 { font-size: clamp(2.7rem, 5.5vw, 5.2rem); line-height: .96; letter-spacing: -.035em; }
.hero .say p { max-width: 27rem; font-size: 1.12rem; color: #2b3640; margin-top: 26px; }
.hero .say .fine { margin-top: 18px; font-size: .97rem; color: var(--soft); }

/* ---------- The tree: a place, read out like a status report ---------- */
.ask { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ask q { display: block; font-size: 1.18rem; line-height: 1.3; font-weight: 600; quotes: none; }
.ask span { display: block; margin-top: 4px; font-size: .9rem; color: var(--soft); }
.ask-row { display: flex; align-items: flex-end; gap: 16px; }
.ask-row > div:first-child { flex: 1; min-width: 0; }
.seg { flex: none; display: inline-flex; border: 1.5px solid var(--ink); }
.seg button { height: 32px; padding: 0 12px; border: 0; background: none; font-size: .94rem; font-weight: 600; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.tree { padding: 10px 0; }
.tree li { display: flex; align-items: center; gap: 9px; min-height: 33px; margin: 0 -14px; padding: 0 14px 0 calc(14px + var(--d, 0) * 24px); }
.tree .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree .s { margin-left: auto; padding-left: 14px; font-size: .88rem; color: var(--soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tree .s b { font-weight: 600; }
.tree .add { color: var(--green); font-weight: 600; }
.tree .del { color: var(--red); font-weight: 600; }
.tree .edit .s b { color: var(--blue); }
.tree .idle .n { color: var(--soft); }
.tree .new { background: var(--green-bg); box-shadow: inset 3px 0 0 var(--green); }
.tree .new .s { color: var(--green); }
.tree .now { background: var(--blue); color: #fff; box-shadow: none; }
.tree .now .s, .tree .now .add { color: #fff; }
.tree .s .was { display: none; }
/* A piece that is not there (yet, or any more). */
.tree .gone { background: none; box-shadow: none; color: var(--soft); outline: 1.5px dashed #8b95a1; outline-offset: -4px; }
.tree .gone .ic { opacity: .45; filter: grayscale(1); }
.tree .gone .s { color: var(--soft); }
.tree .gone .s .is { display: none; }
.tree .gone .s .was { display: inline; font-style: italic; }
.tree .wait .s { visibility: hidden; }
/* An edit that was undone: the script is still there, as it was. */
.tree .back .s .is { display: none; }
.tree .back .s .was { display: inline; }
.tree .back .s { color: var(--soft); }
/* Longer names and notes, allowed to wrap. */
.tree.loose li { flex-wrap: wrap; row-gap: 0; min-height: 46px; padding-top: 8px; padding-bottom: 8px; }
.tree.loose .n { white-space: normal; font-weight: 600; color: var(--ink); }
.tree.loose .s { white-space: normal; text-align: right; }
.tree.loose .s .was { font-style: normal; }
.tree .err .s { color: var(--red); white-space: normal; text-align: right; }
.tree .tagged .s { display: flex; align-items: center; gap: 8px; }
.owner { display: inline-block; padding: 0 7px; border: 1.5px solid currentColor; font-size: .82rem; font-weight: 600; line-height: 1.45; color: var(--ink); }
.sum { padding-top: 14px; border-top: 1px solid var(--line); font-size: .97rem; color: #2b3640; }
.tree a { color: inherit; text-decoration: none; }
.tree a:hover .n { text-decoration: underline; }
.tree .now a:focus-visible { outline-color: #fff; outline-offset: -2px; }
.tree li.pick { position: relative; }
.tree li.pick:hover { background: #e3e7eb; }
.tree li.pick a::after { content: ""; position: absolute; inset: 0; }
.tree li.pick a { display: flex; align-items: center; gap: 9px; min-width: 0; }

@media (prefers-reduced-motion: no-preference) {
  .tree li { transition: background-color .25s ease, box-shadow .25s ease, color .25s ease; }
}

/* Undo steps and other short stacks */
.steps { margin-top: 18px; border-top: 1px solid var(--line); }
.steps li { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.steps code { font-size: .9rem; font-weight: 600; }
.steps span { margin-left: auto; font-size: .9rem; color: var(--soft); text-align: right; }
.steps li.undone code { text-decoration: line-through; color: var(--soft); font-weight: 400; }
.keyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.key { min-height: 40px; padding: 0 14px; border: 1.5px solid var(--ink); border-bottom-width: 4px; border-radius: 6px; background: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; }
.key:active { border-bottom-width: 2px; transform: translateY(2px); }
.key[disabled] { opacity: .45; cursor: default; }

/* ---------- Inner pages ---------- */
.page-head .say { padding-top: 64px; padding-bottom: 56px; }
.page-head .show { padding-top: 64px; padding-bottom: 56px; display: flex; flex-direction: column; justify-content: flex-end; }
.page-head .lead { max-width: 34rem; }
.band { border-top: 1px solid var(--line); }
.band .say, .band .show { padding-top: 64px; padding-bottom: 64px; }
.band .say p { color: #2b3640; }

/* Name and meaning, one per line: tools, skills, providers, limits */
.defs { border-top: 1px solid var(--line); }
.defs > div, .defs > li { display: grid; grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); gap: 4px 24px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.defs dt, .defs .k { font-weight: 600; }
.defs dt code, .defs .k code { font-size: .92rem; font-weight: 600; }
.defs dd, .defs .v { color: #2b3640; }
.defs .k small, .defs dt small { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-weight: 400; color: var(--soft); font-size: .88rem; }
.defs dt a { color: var(--ink); text-decoration-thickness: 1.5px; }
.defs dt a:hover { color: var(--blue-deep); }
.show h3 { margin: 34px 0 10px; }
.show h3:first-child { margin-top: 0; }
.show-in > p { margin-top: 14px; }
.show-in > p:first-child { margin-top: 0; }
.bullets { display: grid; gap: 8px; margin-top: 12px; }
.bullets li { position: relative; padding-left: 20px; }
.bullets li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 8px; height: 2px; background: var(--ink); }
.cap.first { margin: 0 0 18px; }
.steps.first { margin-top: 0; }
.steps + .cap.first, .shard + .cap.first { margin: 12px 0 28px; }
.note { margin-top: 22px; padding: 14px 16px; background: #fff; border-left: 3px solid var(--blue); font-size: .97rem; }
.note.draft { background: var(--amber-bg); border-left-color: #b7791f; color: #3d2c00; }
.note p + p { margin-top: 8px; }
.todo-tag { display: inline-block; padding: 0 6px; background: var(--amber-bg); color: var(--amber); font-size: .84rem; font-weight: 600; }
.ph { background: var(--amber-bg); color: #3d2c00; padding: 0 3px; }

.table-wrap { margin-top: 16px; overflow-x: auto; background: #fff; border: 1px solid var(--line); }
.table-wrap.first { margin-top: 0; }
td { font-variant-numeric: tabular-nums; }
table { width: 100%; border-collapse: collapse; font-size: .96rem; }
th, td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
thead th { font-weight: 600; background: #fafbfc; white-space: nowrap; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody th { font-weight: 600; }
td .empty { color: var(--soft); }

/* Plans: three rows, not three cards */
.plans { border-top: 1px solid var(--line); }
.plans li { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; gap: 6px 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); }
.plans h3 { font-family: var(--display); font-stretch: 84%; font-weight: 700; font-size: 1.7rem; letter-spacing: -.02em; }
.plans p { color: #2b3640; }
.plans .price { font-weight: 600; color: var(--soft); white-space: nowrap; }

/* Questions: shown open, so the page can be searched and skimmed */
.qa { border-top: 1px solid var(--line); }
.qa > div { padding: 16px 0 18px; border-bottom: 1px solid var(--line); }
.show .qa h3 { margin: 0 0 6px; }
.qa p { max-width: 40rem; color: #2b3640; }

/* Release notes */
.release-tag { font-family: var(--display); font-stretch: 84%; font-weight: 750; font-size: clamp(3rem, 6vw, 5rem); line-height: .9; letter-spacing: -.04em; }

/* Closing call */
.close .say, .close .show { padding-top: 72px; padding-bottom: 80px; }

/* ---------- Prose: docs and legal ---------- */
.prose { max-width: 46rem; font-size: 1.04rem; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 2.8rem; font-size: 1.9rem; }
.prose h3 { margin-top: 2rem; }
.prose h4 { margin-top: 1.5rem; font-size: 1.04rem; font-weight: 650; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6rem; }
.prose .intro { font-size: 1.2rem; color: #2b3640; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose ul { list-style: none; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: ""; position: absolute; left: -1.1rem; top: .68em; width: 8px; height: 2px; background: var(--ink); }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4rem; }
.prose li > ul, .prose li > ol, .prose li > pre, .prose li > p + p { margin-top: .5rem; }
.prose code { padding: 1px 5px; background: var(--slab); }
.prose pre { padding: 14px 16px; background: var(--ink); color: #eef2f6; overflow-x: auto; font-size: .9rem; line-height: 1.55; }
.prose pre code { padding: 0; background: none; font-size: inherit; }
.prose blockquote { padding: 12px 16px; background: var(--slab); border-left: 3px solid var(--ink); }
.prose blockquote p + p { margin-top: .5rem; }
.prose .note { margin-top: 1rem; background: var(--slab); }
.prose .note.draft { background: var(--amber-bg); }
.prose .table-wrap { margin-top: 1rem; }
.prose thead th { background: var(--slab); }
.h-anchor { margin-left: 8px; color: var(--soft); text-decoration: none; font-family: var(--text); font-weight: 400; font-size: .8em; opacity: 0; }
h2:hover .h-anchor, h3:hover .h-anchor, h4:hover .h-anchor, .h-anchor:focus-visible { opacity: 1; }
.see-also { padding-top: 1rem; border-top: 1px solid var(--line); color: var(--soft); }

.docs { display: grid; grid-template-columns: minmax(250px, 23%) minmax(0, 1fr); }
.docs-side { background: var(--slab); padding: 40px 24px 64px var(--gutter); }
.docs-side nav { position: sticky; top: 24px; }
.docs-side summary { display: none; }
.docs-side h2 { margin: 22px 0 4px; font-family: var(--text); font-stretch: normal; font-size: .94rem; font-weight: 600; letter-spacing: 0; color: var(--soft); }
.docs-side .tree { padding: 0; }
.docs-side .tree li { min-height: 32px; margin: 0 -12px; padding: 0 12px; font-size: .98rem; }
.docs-side .tree .n { white-space: normal; line-height: 1.25; }
.docs-side .tree a { padding: 4px 0; }
.docs-side .tree a { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 32px; }
.docs-side .tree li:hover { background: #e3e7eb; }
.docs-side .tree li.now:hover { background: var(--blue); }
.docs-main { display: grid; grid-template-columns: minmax(0, 46rem) 210px; gap: 64px; padding: 48px var(--edge) 80px 56px; min-width: 0; }
.docs-main > article { min-width: 0; }
.crumbs { font-size: .94rem; color: var(--soft); }
.crumbs a { color: var(--soft); }
.docs-main h1 { margin: 8px 0 24px; font-size: clamp(2.2rem, 3.6vw, 3.2rem); }
.toc { font-size: .92rem; }
.toc nav { position: sticky; top: 24px; }
.toc summary { display: none; }
.toc p { font-weight: 600; margin-bottom: 8px; }
.toc li + li { margin-top: 6px; }
.toc a { color: var(--soft); text-decoration: none; }
.toc a:hover, .toc a.is-current { color: var(--ink); text-decoration: underline; }
.pager { display: flex; gap: 16px; margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.pager a { flex: 1; color: var(--ink); text-decoration: none; font-weight: 600; }
.pager a span { display: block; font-weight: 400; font-size: .9rem; color: var(--soft); }
.pager a:hover { text-decoration: underline; }
.pager .next { text-align: right; }
.legal-main { padding: 0 var(--edge) 80px var(--gutter); display: grid; grid-template-columns: minmax(0, 46rem) 230px; gap: 64px; }
.legal-head { padding: 56px var(--edge) 32px var(--gutter); }
.legal-head .note { max-width: 46rem; }
.legal-head .lead { margin-top: 14px; }
.draft-mark { display: inline-block; vertical-align: middle; padding: 2px 10px; background: var(--amber-bg); color: var(--amber); font-family: var(--text); font-stretch: normal; font-size: 1rem; font-weight: 600; letter-spacing: 0; line-height: 1.5; }
.docs-main.home { grid-template-columns: minmax(0, 1fr); }
.home .prose { max-width: 58rem; }
.home .intro { max-width: 44rem; }
.home .defs > div { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); }
.site-footer .say { padding-top: 48px; padding-bottom: 48px; }
.site-footer .show { padding-top: 48px; padding-bottom: 48px; }
.site-footer .brand { font-size: 1.3rem; }
.site-footer .say p { max-width: 24rem; margin-top: 12px; font-size: .94rem; color: var(--soft); }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.foot-cols h2 { font-family: var(--text); font-stretch: normal; font-size: .94rem; font-weight: 600; letter-spacing: 0; color: var(--soft); margin-bottom: 8px; }
.foot-cols li + li { margin-top: 6px; }
.foot-cols a { color: var(--ink); text-decoration: none; font-size: .98rem; }
.foot-cols a:hover { text-decoration: underline; }

/* ---------- Narrow screens ---------- */
@media (max-width: 1080px) {
  .site-nav ul { gap: 18px; }
  .brand small { display: none; }
  .say { padding-right: 28px; }
  .hero h1 { font-size: 2.9rem; }
  .docs-side { padding-left: 40px; }
  .docs-main { gap: 32px; padding-left: 40px; grid-template-columns: minmax(0, 46rem) 180px; }
}
@media (max-width: 920px) {
  .bar { gap: 12px; padding: 0 16px; flex-wrap: wrap; }
  .brand small { display: inline; }
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; order: 3; flex: 0 0 calc(100% + 32px); margin: 0 -16px; padding: 4px 16px 16px; border-top: 1px solid var(--line); }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a { display: block; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 1.1rem; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .say, .band .say, .page-head .say, .close .say { padding: 44px 16px 28px; }
  .show, .band .show, .page-head .show, .close .show { padding: 28px 16px 40px; }
  .say-in { position: static; max-width: 36rem; }
  .hero { min-height: 0; }
  .hero .say { padding: 28px 16px 30px; }
  .hero .show { padding: 24px 16px 30px; }
  .hero .say p { margin-top: 18px; }
  .actions { margin-top: 22px; }
  .tree li { padding-left: calc(14px + var(--d, 0) * 15px); gap: 7px; }
  .tree .s { padding-left: 8px; font-size: .84rem; }
  .tree .wide { display: none; }
  .plans li { grid-template-columns: minmax(0, 1fr) auto; }
  .plans li h3 { grid-area: 1 / 1; }
  .plans .price { grid-area: 1 / 2; }
  .plans li p { grid-area: 2 / 1 / 3 / -1; }
  .docs { grid-template-columns: minmax(0, 1fr); }
  .docs-side { padding: 0; }
  .docs-side nav { position: static; padding: 4px 16px 16px; }
  .docs-side summary, .toc summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-weight: 600; cursor: pointer; list-style: none; }
  .docs-side summary::-webkit-details-marker, .toc summary::-webkit-details-marker { display: none; }
  .docs-side summary::after, .toc summary::after { content: "+"; margin-left: auto; font-weight: 400; font-size: 1.3rem; line-height: 1; color: var(--soft); }
  .docs-side details[open] summary::after, .toc details[open] summary::after { content: "\2212"; }
  .docs-side summary span, .toc summary span { font-weight: 400; color: var(--soft); }
  .docs-main { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 16px 56px; }
  .docs-main > article, .legal-main > article { order: 2; padding-top: 24px; }
  .toc { order: 1; margin: 0 -16px; background: var(--slab); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .toc nav { position: static; padding: 0 16px 14px; }
  .toc p { display: none; }
  .legal-head { padding: 36px 16px 8px; }
  .legal-main { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 16px 56px; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .say { padding-bottom: 8px; }
  table.stack thead { display: none; }
  table.stack tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); }
  table.stack tbody tr:last-child { border-bottom: 0; }
  table.stack td { display: block; padding: 3px 14px; border: 0; }
  table.stack td::before { content: attr(data-label); display: block; font-size: .82rem; color: var(--soft); }
  table.stack td:first-child { font-weight: 600; }
  table.stack td:first-child::before { display: none; }
  table.compact { font-size: .86rem; }
  table.compact th, table.compact td { padding: 8px 8px; }
}
@media (max-width: 600px) {
  .defs > div, .defs > li, .home .defs > div { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .brand small { display: none; }
  h1 { font-size: 2.3rem; }
  .hero h1 { font-size: 2.75rem; }
}

/* icons:start (generated by tools/icons.mjs) */
.ic { flex: none; display: inline-block; width: 18px; height: 18px; background: center / contain no-repeat; }
.ic-workspace { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Ccircle cx=%228%22 cy=%228%22 r=%226.5%22 fill=%22%233d8fd1%22/%3E%3Cpath d=%22M2 7.500c2 1.2 3.2.2 4.2-1s2.6-1.1 3.6 0 1.7 2.6 4 2%22 fill=%22none%22 stroke=%22%239adf9a%22 stroke-width=%221.7%22/%3E%3C/svg%3E"); }
.ic-folder { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M1.5 3.500h4.800l1.5 1.700h6.700v8.300h-13z%22 fill=%22%23dfa82f%22/%3E%3C/svg%3E"); }
.ic-model { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M5 1.5 9 3.700v4.200L5 10.1 1 7.900V3.700z%22 fill=%22%23c3c7cd%22 stroke=%22%236b7280%22 stroke-width=%22.7%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M11 6l4 2.200v4.200l-4 2.2-4-2.200V8.200z%22 fill=%22%23aab0b8%22 stroke=%22%236b7280%22 stroke-width=%22.7%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
.ic-part { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M8 1.5 14 4.8 8 8.1 2 4.800z%22 fill=%22%23c4c3c6%22/%3E%3Cpath d=%22M2 4.8 8 8.100v6.400L2 11.200z%22 fill=%22%23a3a2a5%22/%3E%3Cpath d=%22M14 4.8 8 8.100v6.400l6-3.300z%22 fill=%22%238a898c%22/%3E%3C/svg%3E"); }
.ic-script { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M3 1.5h6.500L13 5v9.500H3z%22 fill=%22%23ffffff%22 stroke=%22%239aa4af%22 stroke-width=%22.8%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M5.5 7.500h5M5.5 9.800h5M5.5 12.100h3%22 stroke=%22%233d8fd1%22 stroke-width=%221.2%22/%3E%3C/svg%3E"); }
.ic-localscript { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M3 1.5h6.500L13 5v9.500H3z%22 fill=%22%23ffffff%22 stroke=%22%239aa4af%22 stroke-width=%22.8%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M5.5 7.500h5M5.5 9.800h5M5.5 12.100h3%22 stroke=%22%233d8fd1%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2211.5%22 cy=%2212%22 r=%222.6%22 fill=%22%233d8fd1%22 stroke=%22%23fff%22 stroke-width=%22.8%22/%3E%3C/svg%3E"); }
.ic-modulescript { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M3 1.5h6.500L13 5v9.500H3z%22 fill=%22%23ffffff%22 stroke=%22%239aa4af%22 stroke-width=%22.8%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M5.5 7.500h5M5.5 9.800h5M5.5 12.100h3%22 stroke=%22%238a63d2%22 stroke-width=%221.2%22/%3E%3C/svg%3E"); }
.ic-remote { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M9.3 1 3 9h4.200l-1 6L12.7 7H8.300z%22 fill=%22%23d9a514%22/%3E%3C/svg%3E"); }
.ic-storage { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Crect x=%221.8%22 y=%222.8%22 width=%2212.4%22 height=%2210.4%22 rx=%221.5%22 fill=%22%237d6bb8%22/%3E%3Cpath d=%22M4.8 6h6.400M4.8 8.300h6.400M4.8 10.600h3.6%22 stroke=%22%23fff%22 stroke-width=%221.2%22/%3E%3C/svg%3E"); }
.ic-service { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Crect x=%221.8%22 y=%221.8%22 width=%2212.4%22 height=%2212.4%22 rx=%221.5%22 fill=%22%233d8fd1%22/%3E%3Cpath d=%22M4.8 5.400h6.400M4.8 8h6.400M4.8 10.600h4%22 stroke=%22%23fff%22 stroke-width=%221.2%22/%3E%3C/svg%3E"); }
.ic-gui { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Crect x=%221.5%22 y=%222.5%22 width=%2213%22 height=%2210%22 rx=%221.5%22 fill=%22%234f9d5d%22/%3E%3Crect x=%224%22 y=%225%22 width=%228%22 height=%225%22 fill=%22%23fff%22 opacity=%22.9%22/%3E%3C/svg%3E"); }
.ic-frame { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Crect x=%222%22 y=%223%22 width=%2212%22 height=%2210%22 rx=%221%22 fill=%22%23fff%22 stroke=%22%234f9d5d%22 stroke-width=%221.4%22/%3E%3C/svg%3E"); }
.ic-prompt { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Crect x=%221.5%22 y=%222.5%22 width=%2213%22 height=%228.5%22 rx=%221.5%22 fill=%22%238b95a1%22/%3E%3Cpath d=%22M5.5 14h5M8 11v3%22 stroke=%22%238b95a1%22 stroke-width=%221.6%22/%3E%3C/svg%3E"); }
.ic-light { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Ccircle cx=%228%22 cy=%226.5%22 r=%224.5%22 fill=%22%23f0c33c%22/%3E%3Cpath d=%22M6.2 12h3.600v2.500H6.200z%22 fill=%22%239aa4af%22/%3E%3C/svg%3E"); }
.ic-page { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M3 1.500h6.500L13 5v9.500H3z%22 fill=%22%23fff%22 stroke=%22%236b7785%22 stroke-width=%221%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M9.5 1.500V5H13%22 fill=%22none%22 stroke=%22%236b7785%22 stroke-width=%221%22/%3E%3C/svg%3E"); }
.ic-key { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Ccircle cx=%225.5%22 cy=%228%22 r=%223.3%22 fill=%22none%22 stroke=%22%2355606b%22 stroke-width=%221.7%22/%3E%3Cpath d=%22M8.8 8H15M12.3 8v2.600M14.3 8v2%22 stroke=%22%2355606b%22 stroke-width=%221.7%22/%3E%3C/svg%3E"); }
.ic-link { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M6.6 9.400a3 3 0 0 0 4.2 0l2.3-2.300a3 3 0 0 0-4.2-4.200l-.9.9M9.4 6.600a3 3 0 0 0-4.2 0L2.9 8.900a3 3 0 0 0 4.2 4.200l.9-.9%22 fill=%22none%22 stroke=%22%2355606b%22 stroke-width=%221.7%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); }
.ic-shard { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M8 1.3 13.8 4.700v6.600L8 14.700l-5.8-3.400V4.700z%22 fill=%22%230f3a47%22 stroke=%22%2315b8ee%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M8 5.5 10.2 6.8 8 8.1 5.8 6.800z%22 fill=%22%238fe9ff%22/%3E%3Cpath d=%22M5.8 6.8 8 8.100v2.500L5.8 9.300z%22 fill=%22%2319c4f2%22/%3E%3Cpath d=%22M10.2 6.8 8 8.100v2.500l2.2-1.300z%22 fill=%22%231d8fd6%22/%3E%3C/svg%3E"); }
.ic-tool { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M10.3 1.800a3.6 3.6 0 0 0-3.4 4.900L1.8 11.800l2.4 2.4 5.1-5.100a3.6 3.6 0 0 0 4.9-3.400l-2.3 1.4-1.5-1.500z%22 fill=%22%236b7785%22/%3E%3C/svg%3E"); }
.ic-slash { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Crect x=%221.5%22 y=%221.5%22 width=%2213%22 height=%2213%22 rx=%222%22 fill=%22%2316202a%22/%3E%3Cpath d=%22M9.8 4 6.2 12%22 stroke=%22%23fff%22 stroke-width=%221.8%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); }
.ic-none { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Crect x=%222.5%22 y=%222.5%22 width=%2211%22 height=%2211%22 rx=%221.5%22 fill=%22none%22 stroke=%22%238b95a1%22 stroke-width=%221.3%22 stroke-dasharray=%222.4 1.8%22/%3E%3C/svg%3E"); }
.ai { flex: none; display: inline-block; width: 15px; height: 15px; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.ai-guidance { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l2.4 5.6 5.6.7-4.2 3.9 1.2 5.800L12 16l-5 3 1.2-5.800L4 9.300l5.6-.7z%22/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l2.4 5.6 5.6.7-4.2 3.9 1.2 5.800L12 16l-5 3 1.2-5.800L4 9.300l5.6-.7z%22/%3E%3C/g%3E%3C/svg%3E"); }
.ai-search { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%226.5%22/%3E%3Cpath d=%22m20 20-4.2-4.2%22/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%226.5%22/%3E%3Cpath d=%22m20 20-4.2-4.2%22/%3E%3C/g%3E%3C/svg%3E"); }
.ai-read { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 5h6a2 2 0 0 1 2 2v12a2 2 0 0 0-2-2H4zM20 5h-6a2 2 0 0 0-2 2v12a2 2 0 0 1 2-2h6z%22/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 5h6a2 2 0 0 1 2 2v12a2 2 0 0 0-2-2H4zM20 5h-6a2 2 0 0 0-2 2v12a2 2 0 0 1 2-2h6z%22/%3E%3C/g%3E%3C/svg%3E"); }
.ai-file { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8zM14 3v5h5%22/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8zM14 3v5h5%22/%3E%3C/g%3E%3C/svg%3E"); }
.ai-edit { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 20h4L19 9l-4-4L4 16zM13.5 6.500l4 4%22/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 20h4L19 9l-4-4L4 16zM13.5 6.500l4 4%22/%3E%3C/g%3E%3C/svg%3E"); }
.ai-run { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m7 5 12 7-12 7z%22/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m7 5 12 7-12 7z%22/%3E%3C/g%3E%3C/svg%3E"); }
.ai-output { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%224%22 width=%2218%22 height=%2216%22 rx=%222%22/%3E%3Cpath d=%22m7 9 3 3-3 3M13 15h4%22/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%224%22 width=%2218%22 height=%2216%22 rx=%222%22/%3E%3Cpath d=%22m7 9 3 3-3 3M13 15h4%22/%3E%3C/g%3E%3C/svg%3E"); }
.ai-objects { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3 20 7.500v9L12 21l-8-4.500v-9zM4 7.500l8 4.5 8-4.500M12 12v9%22/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3 20 7.500v9L12 21l-8-4.500v-9zM4 7.500l8 4.5 8-4.500M12 12v9%22/%3E%3C/g%3E%3C/svg%3E"); }
.ai-agents { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%225.5%22 r=%222.5%22/%3E%3Ccircle cx=%225.5%22 cy=%2218%22 r=%222.5%22/%3E%3Ccircle cx=%2218.5%22 cy=%2218%22 r=%222.5%22/%3E%3Cpath d=%22M10.8 7.7 6.7 15.800M13.2 7.700l4.1 8.100M8 18h8%22/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%225.5%22 r=%222.5%22/%3E%3Ccircle cx=%225.5%22 cy=%2218%22 r=%222.5%22/%3E%3Ccircle cx=%2218.5%22 cy=%2218%22 r=%222.5%22/%3E%3Cpath d=%22M10.8 7.7 6.7 15.800M13.2 7.700l4.1 8.100M8 18h8%22/%3E%3C/g%3E%3C/svg%3E"); }
.ai-docs { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18%22/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18%22/%3E%3C/g%3E%3C/svg%3E"); }
.ai-send { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 19V5M6 11l6-6 6 6%22/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 19V5M6 11l6-6 6 6%22/%3E%3C/g%3E%3C/svg%3E"); }
/* icons:end */

/* =====================================================================
   Plugin recreation (class prefix sh-).
   Rebuilt from dev/plugin/Shard2/Gui/ChatGui_AIDump and Config.Themes.
   The owner will provide a fresh UI dump: replace this section then.
   ===================================================================== */
.shard {
  --b1: #18191e; --b2: #202127; --b3: #2d2f37; --b4: #3c3e48; --border1: #0f1116;
  --tp: #ffffff; --ts: #b4b6be; --toa: #14161c; --al: #08d3f4; --ad: #259ae9; --err: #e75750; --ok: #2cc88c;
  max-width: 520px; border-radius: 6px; overflow: hidden; background: var(--b1); color: var(--tp);
  font-family: var(--text); font-size: 14px; line-height: 1.4; text-align: left;
  box-shadow: 0 1px 0 rgba(22, 32, 42, .08), 0 18px 40px -22px rgba(22, 32, 42, .55);
}
.shard[data-theme="neon"] { --b1: #16161e; --b2: #1a1b26; --b3: #24283b; --b4: #3b4261; --border1: #101014; --tp: #c0caf5; --ts: #8f98c4; --toa: #1a1b26; --al: #7aa2f7; --ad: #bb9af7; --err: #f7768e; --ok: #9ece6a; }
.shard[data-theme="slate"] { --b1: #242933; --b2: #2e3440; --b3: #3b4252; --b4: #434c5e; --border1: #1f232b; --tp: #eceff4; --ts: #a3acbf; --toa: #2e3440; --al: #88c0d0; --ad: #81a1c1; --err: #e2868e; --ok: #a3be8c; }
.shard[data-theme="wood"] { --b1: #1d2021; --b2: #282828; --b3: #3c3836; --b4: #504945; --border1: #141617; --tp: #ebdbb2; --ts: #a89984; --toa: #1d2021; --al: #fabd2f; --ad: #fe8019; --err: #fb4934; --ok: #b8bb26; }
.shard[data-theme="classic-light"] { --b1: #f3f4f6; --b2: #ffffff; --b3: #e5e7eb; --b4: #d1d5db; --border1: #d6dae0; --tp: #1f2328; --ts: #656d76; --toa: #ffffff; --al: #0ea5c8; --ad: #2578be; --err: #dc3545; --ok: #28a745; }
.shard[data-theme="sandstone"] { --b1: #f0ece2; --b2: #faf7f0; --b3: #e8e3d6; --b4: #d6cfbf; --border1: #ddd6c7; --tp: #332d26; --ts: #756a5c; --toa: #faf7f0; --al: #c96d30; --ad: #a0522d; --err: #c0392b; --ok: #3e7a3c; }
.shard[data-theme="classic-light"], .shard[data-theme="sandstone"] { box-shadow: 0 0 0 1px var(--border1), 0 18px 40px -22px rgba(22, 32, 42, .45); }

.sh-bar { display: flex; align-items: center; height: 26px; padding: 0 10px; background: #2b2b2b; color: #c8c8c8; font-size: 12.5px; }
.sh-bar i { margin-left: auto; font-style: normal; color: #8a8a8a; }
.sh-chat { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 12px; background: var(--b2); }
.sh-head { padding: 0 2px 8px; border-bottom: 1px solid color-mix(in srgb, var(--border1) 70%, transparent); }
.sh-title { font-weight: 700; font-size: 17px; line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; margin-top: 2px; color: var(--ts); font-size: 13px; }
.sh-meta i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.sh-meta .req { margin-left: auto; }
.sh-log { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 0; }
.sh-user { align-self: flex-end; max-width: 86%; padding: 8px 12px; border-radius: 5px; background: var(--b4); font-size: 15px; }
.sh-acts { display: flex; flex-direction: column; gap: 1px; }
.sh-act { display: flex; align-items: center; gap: 9px; min-height: 25px; color: var(--ts); }
.sh-act .chev { opacity: .7; }
.sh-act.open { color: var(--tp); }
.sh-detail { margin: 2px 0 6px 24px; border-radius: 5px; overflow: hidden; background: var(--b1); font-size: 13px; }
.sh-detail > div { display: flex; gap: 10px; padding: 7px 10px; }
.sh-detail > div + div { border-top: 1px solid var(--b2); }
.sh-detail .ok { margin-left: auto; color: var(--ts); }
.sh-detail small { display: block; color: var(--ts); font-size: 12px; }
.sh-live { display: flex; align-items: center; gap: 9px; min-height: 25px; }
.sh-live .t { margin-left: auto; color: var(--ts); font-size: 13px; font-variant-numeric: tabular-nums; }
.sh-spin { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--b4); border-top-color: var(--al); }
.sh-worked { color: var(--ts); font-size: 13.5px; }
.sh-say { font-size: 15px; line-height: 1.45; }
.sh-say code { font-family: var(--mono); font-size: 12.5px; padding: 1px 5px; border-radius: 4px; background: var(--b1); }
.sh-review { border: 1px solid var(--border1); border-radius: 6px; background: var(--b1); }
.sh-review-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.sh-review .box { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 5px; background: var(--b2); color: var(--ts); }
.sh-review b { display: block; font-size: 14.5px; font-weight: 600; }
.sh-review small { color: var(--ts); font-size: 12.5px; }
.sh-review .add { color: var(--ok); }
.sh-review .del { color: var(--err); }
.sh-review .open { flex: none; margin-left: auto; font-size: 13.5px; white-space: nowrap; }
.sh-review-head > span:nth-child(2) { min-width: 0; }
.sh-items { border-top: 1px solid var(--border1); padding: 4px 12px 8px; }
.sh-items li { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; font-size: 13.5px; }
.sh-items li small { display: block; }
.sh-items .d { margin-left: auto; white-space: nowrap; font-size: 12.5px; color: var(--ts); font-variant-numeric: tabular-nums; }
.sh-items p { padding-top: 6px; border-top: 1px solid var(--border1); color: var(--ts); font-size: 12px; }
.sh-queue { display: flex; flex-direction: column; gap: 6px; }
.sh-q { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 5px; background: var(--b3); font-size: 14.5px; }
.sh-q > span:first-child { flex: 1; min-width: 0; }
.sh-q .dim { color: var(--ts); }
.sh-btn { flex: none; height: 26px; padding: 0 10px; border: 0; border-radius: 5px; background: var(--b4); color: var(--tp); font-size: 13.5px; cursor: pointer; }
.sh-btn.primary { background: var(--al); color: var(--toa); font-weight: 600; }
.sh-btn[disabled] { opacity: .55; cursor: default; }
[data-steer-demo][data-state="running"] [data-when]:not([data-when~="running"]),
[data-steer-demo][data-state="steering"] [data-when]:not([data-when~="steering"]),
[data-steer-demo][data-state="steered"] [data-when]:not([data-when~="steered"]),
[data-steer-demo][data-state="removed"] [data-when] { display: none; }
.sh-btn:focus-visible { outline: 2px solid var(--tp); outline-offset: 2px; }
.sh-input { display: flex; align-items: center; gap: 6px; min-height: 42px; padding: 6px 6px 6px 12px; border: 2px solid var(--border1); border-radius: 6px; background: var(--b2); }
.sh-input > span:first-child { flex: 1; color: var(--ts); font-size: 15px; }
.sh-stop, .sh-send { display: grid; place-items: center; flex: none; width: 30px; height: 28px; border-radius: 5px; }
.sh-stop { background: var(--b3); }
.sh-stop::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--tp); }
.sh-send { background: var(--al); color: var(--toa); }
.sh-crew { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ts); font-size: 13.5px; }
.sh-crew b { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 5px; background: var(--b3); color: var(--tp); font-weight: 400; }
.themes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin-top: 14px; font-size: .94rem; color: var(--soft); }
.themes button { padding: 2px 8px; border: 0; background: none; color: var(--ink); font-size: .94rem; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.themes button[aria-pressed="true"] { background: var(--ink); color: #fff; text-decoration: none; }

@media (prefers-reduced-motion: no-preference) {
  .sh-spin { animation: sh-spin .9s linear infinite; }
  @keyframes sh-spin { to { transform: rotate(360deg); } }
}