:root {
  --paper: #ffffff;
  --ink: #191919;
  --muted: #525252;
  --text-strong: #303030;
  --surface: #f8f8f8;
  --surface-raised: #eeeeee;
  --line-soft: #e8e8e8;
  --line-strong: #bdbdbd;
  --action: #202020;
  --action-hover: #3b3b3b;
  --on-action: #ffffff;
  --glow: #ffffff;
  color-scheme: light;
  --line: #d5d5d5;
  --accent-soft: #eeeeee;
  --accent-strong: #303030;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: Georgia, 'Times New Roman', serif;
}

:root[data-theme="dark"] {
  --paper: #111318;
  --ink: #f0f1f4;
  --text-strong: #e8eaf0;
  --muted: #b0b5c0;
  --surface: #191c23;
  --surface-raised: #262a34;
  --line: #383e4a;
  --line-soft: #2c313b;
  --line-strong: #5c6474;
  --accent-soft: #262a34;
  --accent-strong: #e8eaf0;
  --action: #ebedf3;
  --action-hover: #ffffff;
  --on-action: #161920;
  --glow: #656f92;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 30px;
}
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
button,
input {
  font: inherit;
}
button,
a,
input {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  transition:
    background 0.16s,
    color 0.16s,
    border-color 0.16s;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
  opacity: 0.5;
}
a {
  color: inherit;
  text-decoration: none;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--line-strong);
  outline-offset: 4px;
}
button {
  color: inherit;
}
h1,
h2,
h3,
p {
  margin: 0;
}
em {
  font-weight: 400;
  font-family: var(--serif);
  font-style: italic;
}
svg {
  flex-shrink: 0;
}
.site-header {
  height: 100px;
  max-width: 1240px;
  margin: auto;
  padding: 0 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 27px;
  font-weight: 620;
  letter-spacing: -1.2px;
}
.wordmark > span {
  color: var(--muted);
  margin-left: -10px;
}
.site-header nav {
  display: flex;
  gap: 32px;
  color: var(--muted);
  font-size: 12px;
}
.site-header nav a:hover {
  color: var(--text-strong);
}
.source-link {
  display: inline-flex;
  flex-shrink: 0;
  gap: 8px;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 44px;
  border: 1px solid var(--line);
  padding: 0 14px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.source-link > span {
  color: var(--muted);
}
.source-link:hover {
  background: var(--surface-raised);
}
.hero {
  max-width: 1156px;
  margin: 52px auto 57px;
  text-align: center;
  position: relative;
  padding: 0 35px;
}
.eyebrow {
  font:
    9px/1.5 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  letter-spacing: 1.35px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero > .eyebrow {
  justify-content: center;
}
.eyebrow > span {
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: var(--muted);
}
.hero h1 {
  font-size: clamp(48px, 5.3vw, 76px);
  line-height: 1.035;
  letter-spacing: -3.6px;
  font-weight: 450;
  margin: 27px 0 24px;
  position: relative;
}
.hero h1 em {
  letter-spacing: -3px;
  font-size: 1.035em;
}
.hero-period {
  font-size: 68px;
  position: absolute;
  color: var(--muted);
  transform: rotate(10deg);
  margin-left: 14px;
  margin-top: -7px;
}
.hero > p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
  letter-spacing: -0.1px;
}
.hero-actions {
  display: flex;
  gap: 13px;
  justify-content: center;
  align-items: center;
  margin-top: 28px;
}
.button {
  border: 1px solid var(--line);
  padding: 13px 19px;
  min-height: 44px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  border-radius: 6px;
  background: transparent;
  font-size: 11px;
  font-weight: 550;
}
.button:hover {
  background: var(--surface-raised);
}
.button.primary {
  background: var(--surface-raised);
  border-color: var(--line);
  color: var(--muted);
  box-shadow: 0 2px 2px #74747420;
}
.button.primary:hover {
  background: var(--surface-raised);
}
.button.text-button {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  padding-inline: 10px;
}
.hero-note {
  font:
    8px ui-monospace,
    monospace;
  color: var(--muted);
  letter-spacing: 1px;
  margin-top: 22px;
}
.hero-side-note {
  position: absolute;
  left: 8px;
  bottom: 120px;
  transform: rotate(-90deg);
  font:
    8px/1.8 ui-monospace,
    monospace;
  letter-spacing: 1px;
  color: var(--muted);
}
.hero-scribble {
  position: absolute;
  width: 70px;
  height: 96px;
  right: 103px;
  bottom: 27px;
  color: var(--muted);
  transform: rotate(9deg);
}
.demo-section {
  max-width: 1120px;
  margin: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow:
    0 20px 50px #58585808,
    0 2px 8px #31313103;
  overflow: hidden;
  scroll-margin-top: 40px;
}
.demo-top {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  font:
    8px ui-monospace,
    monospace;
  letter-spacing: 1px;
  color: var(--muted);
}
.demo-dots {
  display: flex;
  gap: 5px;
}
.demo-dots i {
  height: 6px;
  width: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}
.local-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0;
}
.local-status i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--muted);
}
/* The example uses the desktop app's compact navigation and bounded records area. */
.demo-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width, 190px) minmax(0, 1fr);
  height: 540px;
  min-height: 0;
}
.demo-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  padding: 12px 10px;
  background: var(--surface);
  border-right: 1px solid var(--line-soft);
}
.demo-brand { display:flex;align-items:center;gap:6px;margin:0 8px 12px;font-size:18px;letter-spacing:-.7px;font-weight:550; }
.demo-nav-item { display:flex;align-items:center;gap:9px;width:100%;min-height:32px;padding:7px 10px;border:0;border-radius:5px;background:transparent;text-align:left;color:var(--muted);font-size:11px; }
.demo-nav-item:hover,.demo-nav-item[aria-current='page'] { color:var(--text-strong);background:var(--surface-raised); }
.demo-nav-item svg { flex-shrink:0; }
.review-count { margin-left:auto;background:var(--surface-raised);padding:0 5px;border-radius:3px;font-size:9px; }
.demo-sidebar > small { padding:17px 10px 8px;font:8px ui-monospace,monospace;letter-spacing:1px;color:var(--muted); }
.demo-tab { display:flex;align-items:center;gap:9px;width:100%;border:0;border-radius:5px;background:transparent;padding:8px 10px;font-size:11px;color:var(--muted);margin:2px 0; }
.demo-tab[aria-selected='true'] { background:var(--surface-raised);color:var(--text-strong); }
.collection-color { width:6px;height:6px;border-radius:50%;background:var(--muted); }
.demo-tab > span:last-child { margin-left:auto;font-size:9px; }
.demo-settings { margin-top:auto; }
.demo-content { display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;padding:0; }
.demo-breadcrumb { display:flex;align-items:center;gap:10px;height:40px;flex-shrink:0;padding:0 14px;border-bottom:1px solid var(--line-soft);font-size:10px;color:var(--muted); }
.demo-breadcrumb > button { display:flex;align-items:center;gap:6px;padding:0;background:transparent;border:0;color:var(--text-strong);font:inherit;white-space:nowrap; }
.demo-breadcrumb h2 { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:550 11px/1.4 var(--sans);letter-spacing:0;color:var(--text-strong); }
.demo-collection { display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;padding:10px 12px 12px; }
.demo-tools { display:flex;align-items:center;flex-wrap:wrap;flex-shrink:0;gap:6px;margin-bottom:10px;font-size:10px;color:var(--muted); }
.demo-tools button,.demo-tools select { height:30px;min-width:0;border:1px solid var(--line);border-radius:5px;background:var(--paper);color:var(--text-strong);font:inherit;padding:0 8px; }
.demo-tools > button { display:flex;align-items:center;gap:6px; }
.demo-layout { display:flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:5px;background:var(--surface); }
.demo-layout button { display:grid;place-items:center;width:28px;height:24px;border:0;padding:0;background:transparent;color:var(--muted); }
.demo-layout button[aria-pressed='true'] { background:var(--paper);color:var(--text-strong);box-shadow:0 1px 3px #0000000a; }
.demo-group { display:flex;align-items:center;gap:6px;white-space:nowrap; }
.demo-group select { width:100px; }
.demo-search { display:flex;align-items:center;gap:6px;flex:1 1 110px;max-width:200px;min-width:100px;height:30px;margin-left:auto;padding:0 8px;border:1px solid var(--line);border-radius:5px; }
.demo-tools .demo-search input { min-width:0;width:100%;height:100%;border:0;outline:none;background:transparent;font:inherit;color:var(--text-strong); }
.demo-search svg { flex-shrink:0; }
.demo-viewport { display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;overflow:hidden; }
.demo-table { flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:6px; }
.demo-table table { border-collapse:collapse;width:100%;font-size:11px;white-space:nowrap;text-align:left; }
.demo-table th,.demo-table td { padding:12px 10px;border-bottom:1px solid var(--line-soft);font-weight:400; }
.demo-table thead { position:sticky;top:0;z-index:1;background:var(--surface);color:var(--muted);font-size:10px; }
.demo-table tbody th { color:var(--text-strong);font-weight:500; }
.record-initials { display:inline-grid;place-items:center;vertical-align:middle;width:24px;height:27px;margin-right:10px;border-radius:4px;background:var(--surface);font-size:8px;color:var(--muted); }
.demo-table .badge { padding:3px 6px;border-radius:4px;background:var(--surface-raised);font-size:10px; }
.demo-board { display:grid;grid-auto-flow:column;grid-auto-columns:minmax(185px,1fr);grid-template-rows:minmax(0,1fr);gap:10px;flex:1;min-height:0;min-width:0;overflow-x:auto;overflow-y:hidden;padding-bottom:4px; }
.demo-board > section { display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:6px;background:var(--surface); }
.demo-board header { display:flex;align-items:center;gap:8px;flex-shrink:0;padding:12px 10px;color:var(--muted); }
.demo-board header::before { content:'';width:5px;height:5px;border-radius:50%;background:var(--muted);flex-shrink:0; }
.demo-board h3 { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 11px/1.4 var(--sans); }
.demo-board header > span { margin-left:auto;font-size:9px; }
.demo-board-cards { flex:1;min-height:0;overflow:auto;overscroll-behavior-y:contain;scrollbar-width:thin;padding:2px 10px 10px; }
.demo-board article { margin-bottom:8px;padding:12px;min-width:0;border:1px solid var(--line);border-radius:5px;background:var(--paper); }
.demo-board article:last-child { margin-bottom:0; }
.demo-board h4 { font:500 11px/1.5 var(--sans);color:var(--text-strong);overflow-wrap:anywhere; }
.demo-board article > div { min-width:0;margin-top:10px;font-size:10px;color:var(--muted); }
.demo-board article small { display:block;margin-bottom:2px;font-size:9px; }
.demo-board article span { display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.demo-record-count { flex-shrink:0;padding-top:8px;font-size:9px;color:var(--muted); }
.demo-agent-message { display:flex;align-items:center;gap:10px;flex-shrink:0;margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface); }
.agent-glyph { font-size:23px;color:var(--muted); }
.demo-agent-message strong { display:block;font-size:10px;font-weight:500;color:var(--text-strong); }
.demo-agent-message p { margin-top:3px;font-size:9px;line-height:1.6;color:var(--muted); }
.demo-agent-message > button { display:flex;align-items:center;gap:8px;margin-left:auto;padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:var(--paper);white-space:nowrap;font-size:10px;color:var(--text-strong); }
.demo-screen { flex:1;min-height:0;overflow:auto;padding:24px; }
.demo-screen h3 { margin:0 0 18px;font-size:20px;font-weight:500;letter-spacing:-.4px; }
.demo-screen h4 { margin:22px 0 8px;font-size:13px;font-weight:500; }
.demo-screen p,.demo-screen li { font-size:12px;line-height:1.8;color:var(--muted);max-width:440px;margin-bottom:12px; }
.demo-screen ul { padding-left:18px; }
.demo-screen > button,.demo-screen > a { display:block;margin:12px 0;padding:10px 12px;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--text-strong);font-size:12px;text-decoration:none;text-align:left; }
.demo-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font:
    7px ui-monospace,
    monospace;
  color: var(--muted);
  letter-spacing: 0.7px;
  padding: 12px 19px;
  border-top: 1px solid var(--line-soft);
}
.demo-caption > button {
  border: 0;
  background: transparent;
  font: 8px var(--sans);
  color: var(--muted);
}
.demo-empty {
  padding: 28px;
  color: var(--muted);
  text-align: center;
  font-size: 11px;
}
#demo-schema {
  font:
    10px/1.6 ui-monospace,
    monospace;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 14px;
  white-space: pre-wrap;
  max-height: 205px;
  overflow: auto;
  margin: 12px 0 0;
}
.benefit-strip {
  display: flex;
  justify-content: space-between;
  max-width: 920px;
  padding: 28px 0;
  margin: auto;
  color: var(--muted);
  font:
    9px ui-monospace,
    monospace;
}
.section {
  max-width: 1120px;
  margin: auto;
  padding: 108px 0;
}
.section-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 70px;
}
.section h2 {
  font-size: 42px;
  font-weight: 450;
  line-height: 1.2;
  letter-spacing: -1.8px;
  margin-top: 22px;
}
.section h2 em {
  letter-spacing: -1px;
  color: var(--muted);
}
.section-top > p {
  color: var(--muted);
  line-height: 1.9;
  font-size: 12px;
  max-width: 290px;
  padding-bottom: 4px;
}
.how-section {
  border-bottom: 1px solid var(--line);
  padding-top: 80px;
}
.workflow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 55px;
  margin-top: 47px;
}
.step-number {
  font:
    9px ui-monospace,
    monospace;
  color: var(--muted);
  display: block;
  margin-bottom: 17px;
}
.workflow article > h3 {
  font-size: 15px;
  font-weight: 500;
  margin: 27px 0 10px;
  letter-spacing: -0.2px;
}
.workflow article > p {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.9;
  max-width: 290px;
}
.mini-brief,
.mini-schema,
.mini-review {
  height: 156px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  position: relative;
  padding: 20px;
}
.mini-brief > span,
.mini-review > span {
  font:
    7px ui-monospace,
    monospace;
  color: var(--muted);
  letter-spacing: 0.8px;
}
.mini-brief p {
  font: italic 18px/1.45 var(--serif);
  color: var(--muted);
  margin-top: 15px;
  max-width: 220px;
}
.mini-brief > i {
  position: absolute;
  right: 17px;
  bottom: 13px;
  border: 1px solid var(--line-soft);
  padding: 3px 8px;
  border-radius: 4px;
  font-style: normal;
  color: var(--muted);
  background: var(--surface);
}
.mini-schema {
  padding: 15px 22px;
}
.mini-schema > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 12px;
}
.mini-schema small {
  font:
    6px ui-monospace,
    monospace;
  color: var(--muted);
}
.mini-schema p {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 11px;
  font-size: 9px;
  color: var(--muted);
}
.mini-schema p > span {
  color: var(--muted);
  width: 14px;
  font-size: 9px;
}
.mini-schema i {
  margin-left: auto;
  background: var(--surface);
  border-radius: 3px;
  padding: 2px 5px;
  color: var(--muted);
  font:
    7px ui-monospace,
    monospace;
}
.mini-review {
  background: var(--surface);
  border-color: var(--line);
  padding: 17px 20px;
}
.mini-review > span {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
}
.mini-review i {
  font-size: 15px;
  font-style: normal;
}
.mini-review p {
  font-size: 9px;
  color: var(--muted);
  margin-top: 13px;
}
.mini-review p b {
  font-weight: 400;
  margin-right: 10px;
  color: var(--muted);
}
.mini-review > div {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  align-items: center;
  font-size: 8px;
  color: var(--muted);
  margin-top: 14px;
}
.mini-review strong {
  font-weight: 400;
  background: var(--surface-raised);
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
}
.possibilities-section {
  padding: 103px 0 110px;
}
.possibilities-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
}
.possibilities-layout > div > p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.9;
  max-width: 330px;
  margin-top: 24px;
}
.inline-link {
  display: inline-flex;
  align-items: center;
  gap: 21px;
  font-size: 11px;
  color: var(--muted);
}
.possibilities-layout .inline-link {
  margin-top: 23px;
}
.template-note {
  font:
    8px/1.9 ui-monospace,
    monospace;
  letter-spacing: 1px;
  color: var(--muted);
  margin-top: 48px;
}
.possibility-list {
  padding-top: 4px;
}
.possibility-list > button,
.possibility-list > a {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  width: 100%;
  text-align: left;
}
.possibility-list > button:hover,
.possibility-list > a:hover {
  background: var(--surface);
}
.possibility-list > button > span,
.possibility-list > a > span {
  font:
    9px ui-monospace,
    monospace;
  color: var(--muted);
}
.possibility-list > button > span:last-child,
.possibility-list > a > span:last-child {
  margin-left: auto;
  font: 18px var(--sans);
  color: var(--muted);
}
.possibility-list h3 {
  font-size: 15px;
  font-weight: 450;
  color: var(--muted);
}
.possibility-list p {
  font-size: 10px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.6;
}
.principles-section {
  background: var(--surface-raised);
  border-block: 1px solid var(--line);
  padding: 82px 35px;
}
.principles-inner {
  max-width: 1120px;
  margin: auto;
}
.principles-inner h2 {
  font-size: 44px;
  line-height: 1.22;
  font-weight: 450;
  letter-spacing: -1.5px;
  margin-top: 20px;
  color: var(--muted);
}
.principles-inner h2 em {
  color: var(--muted);
}
.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
  margin-top: 46px;
}
.principles-grid article > span {
  font: 24px var(--serif);
  color: var(--muted);
  display: block;
  margin-bottom: 20px;
}
.principles-grid h3 {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 12px;
}
.principles-grid p {
  font-size: 11px;
  line-height: 1.9;
  color: var(--muted);
  max-width: 290px;
}
.principle-footnote {
  font-size: 9px;
  line-height: 1.6;
  color: var(--muted);
  border-top: 1px solid var(--line);
  margin-top: 39px;
  padding-top: 18px;
}
.start-section {
  text-align: center;
  padding-top: 72px;
  padding-bottom: 72px;
}
.start-section h2 { margin-top: 0; }
.start-section > div > p {
  font-size: 13px;
  line-height: 1.9;
  color: var(--muted);
  margin-top: 21px;
}
.start-actions {
  display: flex;
  justify-content: center;
  margin-top: 29px;
}
.preview-notice {
  grid-column: 1/-1;
  font-size: 10px;
  line-height: 1.9;
  color: var(--muted);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 13px 18px;
  max-width: 900px;
  margin: auto;
}
.faq {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  border-top: 1px solid var(--line);
  padding: 55px 0 90px;
}
.faq > .eyebrow {
  align-self: start;
  padding-top: 18px;
}
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 19px 0;
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary span {
  font-size: 18px;
  font-weight: 300;
  color: var(--muted);
}
.faq details[open] summary span {
  transform: rotate(45deg);
}
.faq details p {
  font-size: 11px;
  line-height: 1.9;
  color: var(--muted);
  margin-top: 17px;
  max-width: 620px;
}
.closing {
  background: var(--surface-raised);
  text-align: center;
  padding: 51px 24px 54px;
  color: var(--muted);
}
.asterisk {
  font-size: 39px;
  color: var(--muted);
  display: block;
  margin-bottom: 12px;
}
.closing p {
  font-size: 36px;
  line-height: 1.23;
  letter-spacing: -1.1px;
  font-weight: 450;
}
.closing p em {
  color: var(--muted);
}
.button.dark {
  margin-top: 25px;
  color: var(--on-action);
  background: var(--action);
  border-color: var(--action);
  padding: 12px 18px;
  font-size: 10px;
}
.button.dark:hover {
  background: var(--action);
}
.site-footer {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 1200px;
  margin: auto;
  padding: 36px 36px;
  color: var(--muted);
}
.site-footer .wordmark {
  font-size: 23px;
  color: var(--muted);
}
.site-footer > span {
  font-size: 9px;
}
.site-footer nav {
  display: flex;
  gap: 20px;
  margin-left: auto;
  font-size: 10px;
  color: var(--muted);
}
dialog {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  width: min(620px, calc(100vw - 30px));
  max-height: calc(100vh - 40px);
  margin: auto;
  color: var(--muted);
  background: var(--paper);
  box-shadow: 0 25px 100px #3a3a3a30;
  overflow: auto;
}
dialog::backdrop {
  background: #47474766;
  backdrop-filter: blur(4px);
}
dialog > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 27px;
  border-bottom: 1px solid var(--line-soft);
}
dialog h2 {
  font-size: 25px;
  font-weight: 450;
  letter-spacing: -0.6px;
  margin-top: 12px;
}
dialog > header > button {
  background: none;
  border: 0;
  font-size: 25px;
  color: var(--muted);
  padding: 0 5px;
}
dialog > p {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.8;
  padding: 18px 27px;
}
.proposal-record {
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  margin: 0 27px 25px;
  padding: 18px 21px;
  background: var(--surface);
}
.proposal-record > span {
  font:
    8px ui-monospace,
    monospace;
  letter-spacing: 1px;
  color: var(--muted);
}
.proposal-record h3 {
  font-size: 20px;
  font-weight: 450;
  margin-top: 13px;
}
.proposal-record dl {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  font-size: 11px;
  line-height: 1.7;
  margin: 21px 0 0;
}
.proposal-record dt {
  color: var(--muted);
}
.proposal-record dd {
  margin: 0;
  color: var(--muted);
}
dialog > footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 17px 27px;
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
}
#review-feedback {
  font-size: 11px;
  line-height: 1.7;
  padding: 0 27px 16px;
  color: var(--muted);
}
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 13px 20px;
  border-radius: 7px;
  background: var(--action);
  color: var(--on-action);
  border: 1px solid var(--line-strong);
  font-size: 12px;
  box-shadow: 0 6px 25px #5b5b5b18;
  max-width: calc(100vw - 32px);
  z-index: 30;
  text-align: center;
}
.skip {
  position: absolute;
  left: 24px;
  top: -100px;
  background: var(--surface-raised);
  color: var(--muted);
  padding: 14px 18px;
  z-index: 50;
}
.skip:focus {
  top: 10px;
}
[hidden] {
  display: none !important;
}
@media (min-width: 1500px) {
  .hero {
    margin-top: 67px;
    margin-bottom: 67px;
  }
}
@media (max-width: 1200px) {
  .demo-section {
    margin-inline: 38px;
  }
  .section {
    margin-inline: 55px;
  }
  .benefit-strip {
    margin-inline: 85px;
  }
  .workflow {
    gap: 28px;
  }
  .possibilities-layout {
    gap: 60px;
  }
  .hero-side-note {
    left: 20px;
  }
  .hero-scribble {
    right: 45px;
  }
  .section h2 {
    font-size: 38px;
  }
  .principles-inner {
    padding-inline: 20px;
  }
}
@media (max-width: 850px) {
  .site-header {
    padding: 0 25px;
    height: 85px;
  }
  .site-header nav {
    gap: 19px;
    font-size: 10px;
  }
  .hero {
    margin: 40px auto 42px;
  }
  .hero h1 {
    font-size: 66px;
    letter-spacing: -3.5px;
  }
  .hero h1 em {
    letter-spacing: -3px;
  }
  .hero-period {
    font-size: 45px;
    margin-left: 6px;
  }
  .hero-side-note,
  .hero-scribble {
    display: none;
  }
  .demo-section {
    margin-inline: 23px;
  }
  .demo-shell {
    grid-template-columns: var(--sidebar-width,155px) minmax(0,1fr);
  }
  .demo-sidebar {
    padding: 17px 10px;
  }
  .demo-content { padding: 0; }
  .demo-brand {
    font-size: 16px;
  }
  .demo-tools {
    gap: 8px;
  }
  .demo-tools input {
    width: 120px;
  }

  .demo-agent-message {
    flex-wrap: wrap;
    gap: 8px;
  }
  .demo-agent-message > button {
    margin-left: 34px;
  }
  .demo-top > span:nth-child(2) {
    font-size: 7px;
  }
  .benefit-strip {
    margin-inline: 42px;
    gap: 17px;
    flex-wrap: wrap;
    font-size: 8px;
  }
  .section {
    margin-inline: 38px;
    padding-block: 70px;
  }
  .section-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 23px;
  }
  .section-top > p {
    max-width: 460px;
  }
  .workflow {
    gap: 18px;
  }
  .mini-brief,
  .mini-schema,
  .mini-review {
    padding: 16px 12px;
  }
  .mini-brief p {
    font-size: 16px;
  }
  .mini-review > div {
    gap: 8px;
    font-size: 7px;
  }
  .workflow article > p {
    font-size: 10px;
  }
  .workflow article > h3 {
    font-size: 13px;
  }
  .possibilities-layout {
    gap: 35px;
  }
  .possibilities-layout h2 {
    font-size: 34px;
  }
  .possibility-list > button,
  .possibility-list > a {
    gap: 16px;
  }
  .possibility-list h3 {
    font-size: 13px;
  }
  .principles-section {
    padding: 65px 38px;
  }
  .principles-inner {
    padding: 0;
  }
  .principles-inner h2 {
    font-size: 38px;
  }
  .principles-grid {
    gap: 28px;
  }
  .principles-grid p {
    font-size: 10px;
  }
  .start-section h2 {
    font-size: 38px;
  }
  .preview-notice {
    margin-top: 0;
  }
  .faq {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .site-footer {
    padding: 28px 25px;
    gap: 22px;
  }
  .site-footer > span {
    font-size: 8px;
  }
  .site-footer nav {
    gap: 14px;
    font-size: 9px;
  }
}
@media (max-width: 600px) {
  .site-header {
    height: 80px;
    padding: 0 20px;
  }
  .wordmark {
    font-size: 24px;
    gap: 7px;
  }
  .wordmark img {
    width: 26px;
    height: 28px;
  }
  .site-header nav {
    display: none;
  }
  .hero {
    padding: 0 20px;
    margin-top: 31px;
  }
  .hero > .eyebrow {
    font-size: 7px;
    letter-spacing: 1px;
  }
  .hero h1 {
    font-size: clamp(36px, 10.5vw, 54px);
    letter-spacing: -2.9px;
    margin-top: 25px;
  }
  .hero h1 em {
    letter-spacing: -2.5px;
  }
  .hero-period {
    font-size: 38px;
    margin-top: -3px;
    margin-left: 4px;
  }
  .hero > p {
    font-size: 12px;
    line-height: 1.85;
  }
  .hero-actions {
    gap: 7px;
    margin-top: 23px;
  }
  .button {
    padding: 11px 13px;
    font-size: 10px;
    gap: 12px;
    min-height: 40px;
  }
  .hero-note {
    font-size: 6px;
    letter-spacing: 0.8px;
  }
  .demo-section {
    margin-inline: 14px;
    border-radius: 8px;
  }
  .demo-top {
    height: 34px;
    padding: 0 12px;
  }
  .demo-top > span:nth-child(2) {
    font-size: 5px;
    letter-spacing: 0.6px;
  }
  .local-status {
    font-size: 7px;
  }
  .demo-shell { display:flex;flex-direction:column;height:600px; }
  .demo-sidebar {
    padding: 12px;
    border-bottom: 1px solid var(--line-soft);
    border-right: 0;
    background: var(--surface);
  }
  .demo-sidebar > .demo-brand,
  .demo-sidebar > nav,
  .demo-sidebar > .demo-settings,
  .demo-sidebar > .demo-nav-item,
  .demo-sidebar > small,
  .demo-sidebar-footer {
    display: none;
  }
  .demo-sidebar [role='tablist'] {
    display: flex;
    gap: 5px;
  }
  .demo-tab {
    font-size: 9px;
    gap: 6px;
    justify-content: center;
    padding: 7px;
  }
  .demo-tab > span:last-child {
    margin-left: 0;
    font-size: 7px;
  }
  .demo-content { flex:1;padding:0; }
  .demo-breadcrumb { font-size:10px; }
  .demo-title {
    margin: 18px 0;
  }
  .demo-title h2 {
    font-size: 24px;
  }
  .demo-title p {
    font-size: 8px;
  }
  .demo-title > button {
    font-size: 8px;
    padding: 6px 8px;
  }
  .demo-tools {
    font-size: 8px;
  }
  .demo-tools input {
    font-size: 8px;
    width: 114px;
  }
  .demo-table { min-height:0; }
  .demo-table table {
    font-size: 9px;
  }
  .demo-table th,
  .demo-table td {
    padding: 11px 7px;
  }
  .demo-table thead {
    font-size: 7px;
  }
  .demo-table tbody th {
    min-width: 127px;
    gap: 7px;
  }
  .record-initials {
    width: 20px;
    height: 22px;
    font-size: 6px;
  }
  .demo-table .badge {
    font-size: 7px;
  }
  .demo-agent-message {
    padding: 11px;
    gap: 9px;
    margin-top: 15px;
  }
  .demo-agent-message > div {
    flex: 1;
  }
  .demo-agent-message strong {
    font-size: 9px;
  }
  .demo-agent-message p {
    font-size: 8px;
  }
  .demo-agent-message > button {
    margin-left: 29px;
    font-size: 8px;
  }
  .demo-caption {
    padding: 10px 11px;
    font-size: 5px;
    letter-spacing: 0.5px;
  }
  .demo-caption > button {
    font-size: 7px;
  }
  .benefit-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 15px;
    margin-inline: 35px;
    padding-block: 23px;
    font-size: 7px;
  }
  .section {
    margin-inline: 25px;
    padding-block: 59px;
  }
  .section h2 {
    font-size: 33px;
    letter-spacing: -1.2px;
    margin-top: 18px;
  }
  .section-top {
    gap: 20px;
  }
  .eyebrow {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .section-top > p {
    font-size: 11px;
  }
  .workflow {
    grid-template-columns: 1fr;
    gap: 31px;
    margin-top: 30px;
  }
  .workflow article {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .step-number {
    margin-bottom: 11px;
  }
  .mini-brief,
  .mini-schema,
  .mini-review {
    height: 153px;
    padding: 19px 23px;
  }
  .mini-brief p {
    font-size: 21px;
    max-width: 250px;
  }
  .mini-brief > span,
  .mini-review > span {
    font-size: 8px;
  }
  .mini-schema p {
    font-size: 10px;
    margin-top: 10px;
  }
  .mini-review p {
    font-size: 11px;
  }
  .mini-review > div {
    font-size: 9px;
    margin-top: 13px;
  }
  .workflow article > h3 {
    font-size: 16px;
    margin-top: 20px;
  }
  .workflow article > p {
    font-size: 11px;
    max-width: none;
  }
  .possibilities-layout {
    grid-template-columns: 1fr;
    gap: 29px;
  }
  .possibilities-layout > div > p {
    font-size: 11px;
    margin-top: 19px;
  }
  .template-note {
    display: none;
  }
  .possibility-list > button,
  .possibility-list > a {
    padding: 21px 0;
  }
  .possibility-list h3 {
    font-size: 14px;
  }
  .possibility-list p {
    font-size: 10px;
    max-width: 245px;
  }
  .principles-section {
    padding: 56px 25px;
  }
  .principles-inner h2 {
    font-size: 33px;
    letter-spacing: -1px;
  }
  .principles-grid {
    grid-template-columns: 1fr;
    gap: 29px;
    margin-top: 32px;
  }
  .principles-grid article {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 0 16px;
  }
  .principles-grid article > span {
    grid-row: 1/3;
    font-size: 23px;
    margin-top: -3px;
  }
  .principles-grid h3 {
    font-size: 15px;
    margin-bottom: 9px;
  }
  .principles-grid p {
    font-size: 11px;
    max-width: none;
  }
  .principle-footnote {
    font-size: 8px;
    margin-top: 29px;
    padding-top: 16px;
  }
  .preview-notice {
    font-size: 9px;
    padding: 12px 14px;
  }
  .faq {
    gap: 10px;
  }
  .faq summary {
    font-size: 12px;
    line-height: 1.7;
  }
  .faq details p {
    font-size: 10px;
  }
  .closing {
    padding: 39px 24px 44px;
  }
  .closing p {
    font-size: 31px;
  }
  .asterisk {
    font-size: 32px;
  }
  .site-footer {
    flex-wrap: wrap;
    gap: 16px;
    padding: 24px;
  }
  .site-footer > span {
    order: 3;
    width: 100%;
    font-size: 8px;
  }
  .site-footer nav {
    margin-left: auto;
  }
  .site-footer .wordmark {
    font-size: 21px;
  }
  dialog > header {
    padding: 21px;
  }
  dialog h2 {
    font-size: 24px;
    line-height: 1.2;
  }
  dialog > p {
    padding: 16px 21px;
    font-size: 10px;
  }
  .proposal-record {
    margin-inline: 21px;
    padding: 16px;
  }
  .proposal-record dl {
    grid-template-columns: 75px 1fr;
    gap: 11px;
    font-size: 10px;
  }
  dialog > footer {
    padding: 15px 20px;
    gap: 8px;
  }
  dialog > footer .button {
    font-size: 9px;
    padding: 10px 12px;
  }
  .toast {
    font-size: 10px;
    min-width: 260px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}
/* A quiet palette, with readable text instead of washed-out body copy. */
.hero>p,.section-top>p,.workflow article>p,.possibilities-layout>div>p,.possibility-list p,.principles-grid p,.start-section>div>p,.faq details p,.preview-notice{color:var(--muted)}
.eyebrow,.site-header nav,.source-link,.hero-note,.benefit-strip,.template-note,.principle-footnote,.site-footer>span,.site-footer nav,.faq summary{color:var(--muted)}
.inline-link,.button.text-button{color:var(--text-strong)}.demo-title p,.demo-breadcrumb,.demo-nav-item,.demo-sidebar>small,.demo-sidebar-footer,.demo-tools,.demo-record-count,.demo-table thead,.demo-table tbody td,.demo-caption,.demo-caption>button,.demo-agent-message p{color:var(--muted)}
.demo-tab,.demo-workspace,.demo-top,.demo-title>button,.demo-tools>span:first-child,.demo-table tbody th,.demo-agent-message strong{color:var(--muted)}.demo-tab[aria-selected=true]{color:var(--muted)}.demo-table .badge{color:var(--muted)}.demo-table tr:nth-child(even) .badge{color:var(--muted)}.demo-agent-message>button{color:var(--muted)}.demo-tools input::placeholder{color:var(--muted)}.demo-tools input{color:var(--text-strong)}.demo-caption{font-size:8px}.demo-caption>button{font-size:9px}
.mini-brief>span,.mini-review>span,.mini-brief p,.mini-schema>div,.mini-schema p,.mini-review p,.mini-review strong,.mini-review>div{color:var(--muted)}.mini-schema i,.mini-schema small{color:var(--muted)}.possibility-list h3,.principles-grid h3{color:var(--muted)}.section h2 em,.principles-inner h2 em{color:var(--muted)}.faq summary span{color:var(--muted)}.closing p em{color:var(--muted)}dialog>p,.proposal-record dt,.proposal-record dd,#review-feedback{color:var(--muted)}
@media(max-width:600px){.demo-caption{font-size:6px}.demo-caption>button{font-size:8px}}

/* Clear hierarchy on white: charcoal actions and readable secondary text. */
.button.primary, .button.dark {
  background: var(--action);
  border-color: var(--action);
  color: var(--on-action);
  box-shadow: 0 2px 3px #00000014;
}
.button.primary:hover, .button.dark:hover {
  background: var(--action);
  border-color: var(--action);
  color: var(--on-action);
}
.button.primary > span, .button.dark > span { color:inherit; }
.button { font-size: 12px; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline-color: var(--action);
}
.source-link { border-color:var(--line-strong); color:var(--text-strong); }
.hero h1 { font-weight: 500; }
.hero > p { color:var(--muted); font-size: 16px; }
.hero-note { color:var(--muted); font-size: 10px; }
.eyebrow { color:var(--muted); }
.eyebrow > span { background:var(--action); }
.demo-section { border-color:var(--line-strong); box-shadow: 0 20px 50px #0000000a, 0 2px 8px #00000008; }
.demo-title h2, .demo-brand, .demo-table tbody th,
.workflow h3, .possibility-list h3, .principles-grid h3,
.section h2 em, .principles-inner h2 em { color:var(--text-strong); }
.demo-table thead { color:var(--muted); border-color:var(--line); }
.demo-tab[aria-selected=true] { color:var(--text-strong); background:var(--surface-raised); font-weight: 600; }
.demo-table tbody td { color:var(--muted); }
.demo-table .badge, .demo-table tr:nth-child(even) .badge { color:var(--muted); background:var(--surface-raised); border-color:var(--line); }
.demo-agent-message { border-color:var(--line-strong); background:var(--surface); }
.demo-agent-message > button { color:var(--text-strong); border-color:var(--line-strong); }
.section-top > p, .workflow article > p, .possibility-list p,
.principles-grid p, .faq details p, .start-section > div > p { color:var(--muted); }
.principles-section { background:var(--surface-raised); border-color:var(--line); }
.faq summary { color:var(--text-strong); }
.closing { background:var(--surface-raised); border-top:1px solid var(--line); }
.closing p, .closing p em { color:var(--text-strong); }
.closing .asterisk { color:var(--muted); }
@media (max-width:600px) {
  .hero-actions { flex-wrap: wrap; }
  .hero-note { font-size: 9px; line-height: 1.7; }
}

/* Motion stays decorative; the example always responds to the visitor. */
.reading-progress { position:fixed;inset:0 0 auto;height:3px;z-index:30;pointer-events:none; }
.reading-progress span { display:block;width:100%;height:100%;background:var(--action);transform:scaleX(0);transform-origin:left; }
.hero { animation:enter 650ms ease-out both; }
.hero h1 em { color:var(--text-strong); }
.hero-actions .button { transition:background .18s,color .18s,border-color .18s; }

.button > span, .inline-link > span, .possibility-list > button > span:last-child { display:inline-block;transition:transform .2s; }
.inline-link:hover > span, .possibility-list > button:hover > span:last-child { transform:translate(3px,-2px); }
.wordmark img { transition:transform .3s ease; }
.wordmark:hover img { transform:rotate(-7deg) scale(1.07); }
.reveal.is-visible { animation:enter 600ms ease-out both; }
.workflow article:nth-child(2), .principles-grid article:nth-child(2) { animation-delay:80ms; }
.workflow article:nth-child(3), .principles-grid article:nth-child(3) { animation-delay:160ms; }
.demo-table tbody tr { animation:row-enter 260ms ease-out both;animation-delay:calc(var(--row, 0) * 45ms); }
.demo-table tbody tr:hover { background:var(--surface); }
.possibility-list > button, .possibility-list > a { transition:background .2s,padding .2s; }
.possibility-list > button:hover, .possibility-list > a:hover { background:var(--surface);padding-left:16px;padding-right:16px; }
#review-dialog[open] { animation:enter 220ms ease-out both; }
.faq details[open] p { animation:enter 240ms ease-out; }
.faq summary > span { transition:transform .2s; }
.faq details[open] summary > span { transform:rotate(45deg); }
@keyframes enter { from { opacity:.2;transform:translateY(16px); } to { opacity:1;transform:translateY(0); } }
@keyframes row-enter { from { opacity:.2;transform:translateY(5px); } to { opacity:1;transform:translateY(0); } }
@keyframes pulse { 50% { opacity:.3;transform:scale(.75); } }
@media(max-width:700px) {
  .hero > p { font-size:15px;padding:0 6px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important;transition:none !important;scroll-behavior:auto !important; }
}

/* Day and night are a setting you can play with, with time as the default. */
.header-actions { display:flex;align-items:center;gap:12px; }
.theme-toggle { position:relative;width:64px;height:44px;padding:0;flex-shrink:0;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--text-strong);touch-action:manipulation; }
.theme-toggle:hover { background:var(--surface-raised); }
@media(max-width:350px) { .site-header .source-link { width:44px;font-size:0;gap:0;padding:0; }.site-header .source-link > span { display:none; } }
.moonphase { display:block;width:56px;height:40px;overflow:hidden;pointer-events:none; }
.moonphase-bezel { fill:none;stroke:var(--line-strong);stroke-width:.75; }
.moonphase-rim { fill:none;stroke:url(#moonphase-metal);stroke-width:1.1; }
.moonphase-markers { fill:none;stroke:var(--muted);stroke-width:.65; }
.moonphase-day, .moonphase-night { transition:opacity 350ms ease; }
.moonphase-day { opacity:1; }
.moonphase-night { opacity:0; }
[data-theme=dark] .moonphase-day { opacity:0; }
[data-theme=dark] .moonphase-night { opacity:1; }
@media(prefers-reduced-motion:reduce) { .moonphase-day, .moonphase-night { transition:none; } }
.theme-footer { display:flex;align-items:center;gap:8px;font-size:9px;color:var(--muted); }
.theme-footer button { border:1px solid var(--line);padding:5px 8px;border-radius:20px;background:transparent;font-size:9px; }
.theme-footer button[aria-pressed=true] { background:var(--surface-raised);color:var(--text-strong); }
.site-footer { flex-wrap:wrap;gap:22px; }
::view-transition-old(root), ::view-transition-new(root) { animation:none;mix-blend-mode:normal; }
::view-transition-new(root) { animation:theme-reveal 600ms cubic-bezier(.22,.68,0,1) both; }
@keyframes theme-reveal { from { clip-path:circle(0 at var(--theme-x) var(--theme-y)); } to { clip-path:circle(var(--theme-radius) at var(--theme-x) var(--theme-y)); } }
.hero-period { display:inline-block;padding:0;border:0;background:transparent;line-height:1;cursor:pointer;transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.hero-period:hover { transform:rotate(110deg) scale(1.15); }
.pointer-card { transform:perspective(850px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .22s ease-out,box-shadow .22s;background-image:radial-gradient(180px circle at var(--shine-x,50%) var(--shine-y,50%),color-mix(in srgb,var(--glow) 14%,transparent),transparent); }
.pointer-card:hover { box-shadow:0 10px 32px #0000000d; }
.pointer-card.reveal.is-visible { animation-fill-mode:backwards; }
#schema-shuffle { border:0;background:transparent;color:var(--muted);font:8px var(--sans);padding:3px 0 3px 8px; }
#schema-shuffle:hover { color:var(--text-strong); }
.mini-review .review-trigger { font-size:8px;padding:6px 9px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface-raised);color:var(--text-strong); }
.mini-review .review-trigger:hover { background:var(--action);color:var(--on-action);border-color:var(--action); }

/* A context sculpture: native WebGL, with a static composition as fallback. */
.orbit-stage { position:relative;min-width:0;height:440px;isolation:isolate; }
.orbit-halo { pointer-events:none;position:absolute;inset:8%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--glow) 25%,transparent),transparent 70%); }
#workspace-orbit { width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y; }
#workspace-orbit.is-dragging { cursor:grabbing; }
#workspace-orbit:focus-visible { outline:2px solid var(--line-strong);outline-offset:-12px;border-radius:22px; }
#orbit-fallback { position:absolute;inset:50px;display:flex;justify-content:center;align-items:center;gap:10px; }
#orbit-fallback span { padding:12px 14px;border:1px solid var(--line-strong);background:var(--paper);border-radius:8px;font-size:11px;z-index:1;transition:transform .4s; }
#orbit-fallback span:nth-child(2) { transform:translateY(-46px); }
#orbit-fallback i { position:absolute;border:1px solid var(--line);width:80%;height:70%;border-radius:50%;transform:rotate(35deg); }
#orbit-fallback i:nth-of-type(2) { transform:rotate(-35deg);width:65%; }
#orbit-fallback i:nth-of-type(3) { transform:rotate(90deg);width:55%; }
[data-theme=dark] .demo-section { box-shadow:0 24px 60px #00000035; }
[data-theme=dark] dialog::backdrop { background:#05070bd4; }

@media(max-width:850px) { .site-footer .theme-footer { order:3;width:100%; } }
@media(max-width:600px) { .header-actions { gap:8px; }.theme-toggle { width:56px; }.theme-toggle svg { width:48px;height:34px; }.site-header .source-link { padding-inline:10px; }.theme-footer { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { .pointer-card { transform:none; }.click-ripple { display:none; }::view-transition-new(root) { animation:none; } }

/* Little hand-drawn invitations, with their own space around the content. */
.doodle { position:absolute;display:block;padding:0;border:0;background:transparent;color:var(--muted);cursor:pointer;touch-action:manipulation;transition:color .2s; }
.doodle:hover,.doodle:focus-visible { color:var(--text-strong); }
.doodle svg { display:block;width:100%;height:100%;overflow:visible;pointer-events:none; }
.doodle path { fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0; }
.doodle-ink { transform-box:fill-box;transform-origin:center; }
.possibilities-layout > div:first-child { position:relative; }
.possibilities-doodle { width:116px;height:79px;right:0;bottom:2px;transform:rotate(8deg); }
.closing { position:relative; }
.closing-doodle { width:105px;height:114px;left:calc(50% + 270px);top:104px;transform:rotate(14deg); }
@media(max-width:1200px) {
  .possibilities-doodle { width:90px;height:65px;right:-25px;bottom:35px; }
}
@media(max-width:850px) {
  .doodle.hero-scribble,.possibilities-doodle { display:none; }
  .closing-doodle { left:calc(50% + 215px);width:75px;height:90px;top:117px; }
}
@media(max-width:600px) {
  .closing-doodle { left:auto;right:24px;top:auto;bottom:29px;width:52px;height:67px; }
}
@media(prefers-reduced-motion:reduce) { .doodle-ink { transform:none!important; } }

/* Primary actions stay fixed. Motion belongs to the illustrations. */
.hero-actions .button:hover,.hero-actions .button:active { transform:none;box-shadow:none; }
.hero-actions .button > span { transform:none;transition:none; }
.principles-grid { gap:24px; }
.principles-grid article { padding:26px 24px;border:1px solid var(--line);border-radius:12px;background:var(--surface);min-width:0; }
@media(max-width:600px) { .principles-grid article { padding:24px; }.principles-grid { gap:14px; } }

/* Keep the playful illustration within the use cases, without another pitch. */
.collection-playground { position:relative;max-width:430px;margin-top:20px; }
.collection-playground .orbit-stage { height:270px; }
.possibilities-layout .possibility-list { align-self:center; }
.faq details a { text-decoration:underline;text-underline-offset:3px; }
@media(max-width:600px) {
  .collection-playground { max-width:100%; }
  .collection-playground .orbit-stage { height:230px; }
}

/* Keep the example's content inside its window at every size. */
#demo-schema { flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;margin:0; }
.demo-empty { flex:1;display:grid;place-items:center;min-height:0; }
@media (max-width:900px) {
  .demo-tools { gap:6px; }
  .demo-agent-message { gap:8px; }
}
@media (max-width:600px) {
  .demo-sidebar { flex-shrink:0;padding:8px 12px; }
  .demo-collection { padding:10px; }
  .demo-tools { font-size:10px; }
  .demo-search { max-width:none; }
  .demo-table table { font-size:11px; }
  .demo-table thead { font-size:10px; }
  .demo-agent-message { padding:10px; }
  .demo-agent-message strong { font-size:10px; }
  .demo-agent-message p { font-size:9px; }
  .demo-agent-message > button { font-size:10px; }
  .demo-screen { padding:20px; }
}
.demo-section :focus { outline:none;border-color:transparent;box-shadow:none; }
.demo-section :is(button,select,input,[tabindex]):focus-visible { background-color:var(--surface-raised);color:var(--text-strong); }
.demo-search:has(:focus-visible) { border-color:transparent;background:var(--surface-raised); }

/* One direction, one visible result: keep the example close to the product story. */
.hero > p { max-width:650px;margin-inline:auto;text-wrap:pretty; }
.hero h1 { text-wrap:balance; }
.hero-note { font:11px/1.7 var(--sans);letter-spacing:0; }
.hero-period { font-size:.65em; }
.example-brief { max-width:1120px;margin:0 auto 20px;display:flex;align-items:flex-end;justify-content:space-between;gap:48px;scroll-margin-top:30px; }
.example-brief > div { max-width:660px; }
.example-brief p { margin-top:10px;font:22px/1.5 var(--serif);color:var(--text-strong);text-wrap:pretty; }
.example-brief > span { flex-shrink:0;font-size:11px;line-height:1.8;color:var(--muted);padding-bottom:4px; }
.demo-table table { white-space:normal; }
.demo-table th,.demo-table td { min-width:90px;max-width:180px;line-height:1.6; }
.demo-table tbody th { min-width:150px;white-space:nowrap; }
.demo-table .badge { white-space:nowrap; }
.demo-board h4 { margin:0; }
.collection-color { display:grid;place-items:center;flex-shrink:0;width:20px;height:20px;font-size:8px;background:var(--surface-raised);color:var(--muted);border-radius:4px; }
.demo-breadcrumb #demo-collapse { width:26px;height:26px;justify-content:center;border-radius:4px; }
#demo-collapse:hover { background:var(--surface-raised); }
.demo-shell.is-collapsed { --sidebar-width:52px; }
.demo-shell.is-collapsed .demo-sidebar { padding:12px 6px; }
.demo-shell.is-collapsed .demo-brand { margin:0 auto 12px; }
.demo-shell.is-collapsed :is(.demo-brand > span,.demo-nav-label,.demo-sidebar > small,.review-count,[data-count]) { display:none; }
.demo-shell.is-collapsed :is(.demo-nav-item,.demo-tab) { justify-content:center;padding:8px 0; }
.demo-shell.is-collapsed [role=tablist] { margin-top:16px; }
.demo-connection { border-top:1px solid var(--line);margin-top:24px;padding-top:18px; }
.demo-connection summary { font-size:12px;cursor:pointer;color:var(--text-strong);margin-bottom:12px; }
.demo-connection a { font-size:12px;text-decoration:underline;text-underline-offset:3px; }
.download-note { font-size:11px;line-height:1.7;color:var(--muted); }
.start-actions { flex-direction:column;align-items:center;gap:14px; }
.possibility-list h3 { font-size:17px;line-height:1.4; }
.possibility-list p { font-size:12px;max-width:340px; }
@media(max-width:1200px) {
  .example-brief { margin-inline:38px; }
}
@media(max-width:850px) {
  .example-brief { gap:24px; }
  .example-brief > span { max-width:180px;flex-shrink:1; }
  .example-brief p { font-size:20px; }
}
@media(max-width:600px) {
  .hero { margin-bottom:36px; }
  .hero h1 { line-height:1.12;letter-spacing:-1.8px; }
  .hero h1 em { display:block;letter-spacing:-1.7px;text-wrap:balance; }
  .hero-period { position:absolute;right:0;bottom:2px;margin:0;line-height:1; }
  .hero > p { font-size:14px;line-height:1.75;padding:0; }
  .hero-actions { flex-wrap:wrap;gap:8px; }
  .hero-note { font-size:10px;max-width:260px;margin-inline:auto; }
  .example-brief { margin:0 24px 18px;display:block; }
  .example-brief p { font-size:19px;line-height:1.5; }
  .example-brief > span { display:block;max-width:none;margin-top:10px;font-size:10px; }
  .example-brief > span br { display:none; }
  .demo-shell,.demo-shell.is-collapsed { display:grid;--sidebar-width:48px;height:600px; }
  .demo-sidebar { padding:10px 4px;border-right:1px solid var(--line-soft);border-bottom:0; }
  .demo-sidebar > .demo-brand { display:flex;margin:0 auto 12px; }
  .demo-sidebar > nav { display:block; }
  .demo-sidebar > .demo-settings { display:flex; }
  .demo-sidebar :is(.demo-brand > span,.demo-nav-label,.review-count,[data-count]) { display:none; }
  .demo-sidebar :is(.demo-nav-item,.demo-tab) { justify-content:center;padding:8px 0; }
  .demo-sidebar [role=tablist] { display:block;margin-top:16px; }
  .demo-breadcrumb #demo-collapse { display:none; }
  .demo-breadcrumb { padding:0 10px;gap:7px; }
  .demo-breadcrumb > button { font-size:0;gap:0; }
  .demo-agent-message { flex-wrap:wrap;gap:6px; }
  .demo-agent-message > button { margin-left:29px; }
  .demo-agent-message > div { min-width:120px; }
  .demo-group select { width:85px; }
  .demo-search { flex-basis:100%;max-width:none; }
  .demo-tools > #shape-toggle { order:2; }
  .demo-search { order:3; }
  .demo-screen { padding:16px; }
  .demo-caption > span { max-width:190px;line-height:1.7; }
  .possibility-list h3 { font-size:16px; }
  .possibility-list p { font-size:12px; }
  .start-actions { align-items:center; }
}