/* built by scripts/build-docs-site.mjs: examples/gallery/gallery.css (the demos' own styles) + docs/site/src/site.css */
:root{--ground:#f4f1ea;--surface:#fbf9f4;--ink:#1c1b19;--muted:#5d5a53;--line:rgba(28,27,25,.16);--accent:#c2361d;
--font-display:"Fraunces",Georgia,"Times New Roman",serif;--font-flex:"Anybody",Georgia,serif;--font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;--font-text:Georgia,"Iowan Old Style","Times New Roman",serif}
*{box-sizing:border-box}html{background:var(--ground);color:var(--ink)}body{margin:0;font:17px/1.55 var(--font-text);-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:var(--ground)}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--ground);padding:10px 14px;z-index:100;border-radius:6px}.skip:focus{top:12px}
h1,h2,h3{font-family:var(--font-display);font-weight:500}
.lede{max-width:44rem;margin:0 24px 12vh;font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--muted)}
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;padding:0 24px;max-width:1240px;margin:0 auto}
@media (min-width:900px){.layout{grid-template-columns:180px minmax(0,1fr)}}
.family{font-size:clamp(2.2rem,5vw,3.6rem);margin:12vh 0 24px;letter-spacing:-.02em;border-top:1px solid var(--line);padding-top:16px}
.card{margin:0 0 72px}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.card-head h3{font-size:clamp(1.4rem,2.6vw,2rem);margin:0}
.tier{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.what{max-width:46rem;margin:6px 0 18px}
.stage{margin:0 0 18px}
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 28px;margin:0 0 10px;font-size:15px}
.notes dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.notes dd{margin:2px 0 0}
.file{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:14px;color:var(--muted);margin:0}
.file code{font-family:var(--font-mono);overflow-wrap:anywhere}
.hint{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--muted);margin:14px 0 0}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.pill{font:inherit;font-size:15px;padding:10px 16px;border-radius:999px;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;text-decoration:none}
.foot{border-top:1px solid var(--line);margin-top:12vh;padding:24px;font-size:14px;color:var(--muted)}
code{overflow-wrap:anywhere}
.lede-head{font-family:var(--font-display);font-weight:500;color:var(--ink)}
.toolbar{position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:10px 24px;background:rgba(244,241,234,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(8px);font:14px/1.3 var(--font-mono)}
.tb-search{flex:1;min-width:200px;max-width:460px}.tb-search input{width:100%;font:15px var(--font-text);padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.tb-count{margin:0;color:var(--muted)}
.tb-switch,.tb-btn{display:inline-flex;align-items:center;gap:8px;font:inherit;color:var(--ink);background:none;border:0;cursor:pointer;padding:6px 0}
.tb-btn{border:1px solid var(--ink);border-radius:8px;padding:6px 12px;background:var(--surface)}
.tb-track{position:relative;width:36px;height:20px;border-radius:999px;background:#c9c3b6;transition:background .18s ease-out}.tb-track span{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .18s ease-out}
.tb-switch[aria-checked=true] .tb-track{background:var(--accent)}.tb-switch[aria-checked=true] .tb-track span{transform:translateX(16px)}
.tb-phone{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:60px 16px 16px;background:rgba(28,27,25,.72)}
.tb-phone iframe{width:395px;max-width:100%;height:min(760px,calc(100vh - 80px));border:10px solid var(--ink);border-radius:28px;background:var(--ground)}
.tb-close{position:absolute;top:14px;right:16px;background:var(--ground)}
.rm *{transition-duration:0s!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* icon-cloud demo: below 300px the cloud is a wrapped list, so its picture and drag hint give way to the real list */
.cloud-list{font-size:14px}
@container (max-width: 299px){.cloud-art{display:none}.cloud-list{margin:0!important;gap:8px 16px!important;font:18px/1.3 var(--font-display)}}

/* Motomation docs site. Same grounds and inks as the gallery (examples/gallery/gallery.css); the layout is its own. */
:root { --ground: #f4f1ea; --surface: #fbfaf6; --ink: #1c1b19; --muted: #5d5a53; --line: rgba(28,27,25,.14); --accent: #b4441f; --accent-ink: #fff;
  --font-display: "Fraunces", Georgia, serif; --font-text: "Hanken Grotesk", "Helvetica Neue", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-padding-top: 80px; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 16px/1.55 var(--font-text); }
a { color: inherit; text-underline-offset: 3px; }
code, pre { font-family: var(--font-mono); font-size: .86em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bar { position: sticky; top: 0; z-index: 20; display: flex; gap: 14px; align-items: center; padding: 12px 24px; background: rgba(244,241,234,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.brand { font: 600 20px/1 var(--font-display); text-decoration: none; white-space: nowrap; }
.brand span { font-style: italic; font-weight: 400; color: var(--muted); }
.search { flex: 1; max-width: 520px; }
.search input { width: 100%; font: inherit; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.bar-link { font-weight: 600; text-decoration: none; }
.rm-toggle { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; background: none; border: 0; color: var(--ink); cursor: pointer; white-space: nowrap; padding: 6px 0; }
.rm-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #c9c3b6; transition: background .18s ease-out; }
.rm-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .18s ease-out; }
.rm-toggle[aria-checked="true"] .rm-track { background: var(--accent); }
.rm-toggle[aria-checked="true"] .rm-knob { transform: translateX(16px); }
.rm * { transition-duration: 0s !important; }
.index { max-width: 1120px; margin: 0 auto; padding: 48px 24px 96px; }
.index h1 { font: 400 clamp(2rem, 4.6vw, 3.4rem)/1.05 var(--font-display); letter-spacing: -.02em; max-width: 18ch; margin: 0 0 16px; }
.lede { font-size: 18px; color: var(--muted); max-width: 62ch; margin: 0 0 24px; }
.count { font: 13px var(--font-mono); color: var(--muted); margin: 0 0 8px; }
.index h2 { font: 600 13px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 40px 0 12px; }
.results { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.results a { display: grid; gap: 4px; height: 100%; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; transition: border-color .15s ease-out; }
.results a:hover { border-color: var(--ink); }
.results strong { font: 500 19px/1.2 var(--font-display); }
.results .meta { font: 12px var(--font-mono); color: var(--muted); }
.results .what { font-size: 14px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dropdown { position: sticky; top: 61px; z-index: 19; max-height: 60vh; overflow: auto; padding: 16px 24px; background: var(--ground); border-bottom: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.side { position: sticky; top: 61px; align-self: start; max-height: calc(100vh - 61px); overflow: auto; padding: 24px 0 48px; font-size: 14px; }
.side-fam { font: 600 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 18px 0 6px; }
.side ul { list-style: none; margin: 0; padding: 0; }
.side a { display: block; padding: 3px 8px; border-radius: 6px; text-decoration: none; color: var(--muted); }
.side a[aria-current="page"] { background: var(--ink); color: var(--ground); }
.comp { padding: 36px 0 96px; min-width: 0; }
.crumb { font: 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.comp h1 { font: 400 clamp(2.2rem, 5vw, 3.6rem)/1 var(--font-display); letter-spacing: -.02em; margin: 0 0 14px; }
.comp h2 { font: 500 24px/1.2 var(--font-display); margin: 44px 0 14px; }
.toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--surface); }
.seg button { font: inherit; font-size: 14px; border: 0; background: none; color: var(--ink); padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--ink); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.stage { position: relative; min-height: 320px; padding: 28px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.phone { display: grid; place-items: center; padding: 24px; border-radius: 16px; background: #e7e2d7; }
.phone iframe { width: 395px; max-width: 100%; height: 740px; border: 10px solid var(--ink); border-radius: 28px; background: var(--surface); }
.frame { padding: 16px; }
.frame .stage { border: 0; padding: 0; background: none; }
.play .ctls { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.ctl { display: grid; gap: 4px; font-size: 13px; }
.ctl input, .ctl select { font: inherit; font-size: 14px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); min-width: 0; }
.ctl-bool { display: flex; align-items: center; gap: 8px; }
.hint { color: var(--muted); font-size: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; }
.cmd { margin: 0 0 12px; padding: 14px 16px; border-radius: 10px; background: var(--ink); color: #f4f1ea; overflow-x: auto; }
.notes { display: grid; gap: 14px; margin: 0; }
.notes dt { font: 600 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.notes dd { margin: 2px 0 0; max-width: 70ch; }
.table { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 600 12px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
@media (max-width: 860px) { .doc { grid-template-columns: 1fr; } .side { display: none; } .bar { flex-wrap: wrap; } .bar-link { display: none; } .search { order: 3; flex-basis: 100%; max-width: none; } }
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0s !important; } }