/*
Generated by frontend/scripts/extract-vignettes.mjs from docs/mockups/vignette-collaboration.html.
The mockup is the design record: change the vignette there and re-run the script.
The OS dark-scheme media block is removed: the vignette follows the app's .dark class only.
*/
/* App baseline: undo Tailwind preflight inside the figure (generated, not in the mockup). */
.vg-collaboration {
  line-height: normal;
  tab-size: 8;
  font-feature-settings: normal;
  font-variation-settings: normal;
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
  margin: revert;
}
.vg-collaboration :where(*), .vg-collaboration :where(*)::before, .vg-collaboration :where(*)::after {
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
}
.vg-collaboration :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre, fieldset) { margin: revert; }
.vg-collaboration :where(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; }
.vg-collaboration :where(hr) { height: revert; color: revert; border-top-width: revert; }
.vg-collaboration :where(a) { color: revert; -webkit-text-decoration: revert; text-decoration: revert; }
.vg-collaboration :where(b, strong) { font-weight: revert; }
.vg-collaboration :where(code, kbd, samp, pre) { font-family: revert; font-feature-settings: revert; font-variation-settings: revert; font-size: revert; }
.vg-collaboration :where(small) { font-size: revert; }
.vg-collaboration :where(sub, sup) { font-size: revert; line-height: revert; position: revert; vertical-align: revert; }
.vg-collaboration :where(table) { text-indent: revert; border-color: revert; border-collapse: revert; }
.vg-collaboration :where(button, input, optgroup, select, textarea) {
  font-family: revert;
  font-feature-settings: revert;
  font-variation-settings: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  color: revert;
  margin: revert;
  padding: revert;
}
.vg-collaboration :where(button, select) { text-transform: revert; }
.vg-collaboration :where(button, input[type="button"], input[type="reset"], input[type="submit"]) {
  appearance: revert;
  background-color: revert;
  background-image: revert;
}
.vg-collaboration :where(fieldset, legend, dialog) { padding: revert; }
.vg-collaboration :where(ol, ul, menu) { list-style: revert; margin: revert; padding: revert; }
.vg-collaboration :where(textarea) { resize: revert; }
.vg-collaboration :where(input, textarea)::placeholder { opacity: revert; color: revert; }
.vg-collaboration :where(button, [role="button"], :disabled) { cursor: revert; }
.vg-collaboration :where(img, svg, video, canvas, audio, iframe, embed, object) { display: revert; vertical-align: revert; }
.vg-collaboration :where(img, video) { max-width: revert; height: revert; }

.vg-collaboration {
  --vg-paper: oklch(0.986 0.002 68);
  --vg-ink: oklch(0.268 0.027 247);
  --vg-blue: oklch(0.535 0.155 247);
  --vg-slate: oklch(0.52 0.031 247);
  --vg-line: oklch(0.898 0.013 247);
  --vg-tint: oklch(0.966 0.006 247);
  --vg-back: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  /* The app screen inside the sheet, at its light-theme values (index.css :root). */
  --vg-app-bg: oklch(0.965 0.01 247);
  --vg-app-bg2: oklch(0.95 0.02 247);
  --vg-app-bg3: oklch(0.9 0.02 247);
  --vg-app-pop: oklch(1 0 0);
  --vg-app-text: oklch(0.25 0.02 247);
  --vg-app-head: oklch(0 0 0);
  --vg-app-muted: oklch(0.52 0.02 247);
  --vg-app-border: oklch(0.91 0.02 247);
  --vg-app-accent: oklch(0.8 0.08 247);
  --vg-app-btn: oklch(0.4 0.02 247);
  --vg-app-ok: oklch(0.5 0.1 160);
  --vg-app-warn: oklch(0.5 0.1 100);
  --vg-app-err: oklch(0.5 0.1 30);
  --vg-app-ring: oklch(0.535 0.155 247);
  --vg-shadow: oklch(0.3 0.02 247 / 0.1);
  position: relative;
  display: block;
  margin: 0;
  padding: 0 12px 12px 0;
  container-type: inline-size;
  font-family: "Barlow", ui-sans-serif, system-ui, sans-serif;
  color: var(--vg-ink);
}

:root[data-theme="dark"] .vg-collaboration,
:root.dark .vg-collaboration {
  --vg-back: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
}
.vg-collaboration .vg-back {
  position: absolute;
  inset: 12px 0 0 12px;
  border-radius: 8px;
  border: 1px solid var(--vg-back-line);
  background: var(--vg-back);
}
.vg-collaboration .vg-sheet {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--vg-line);
  background: #fff;
  box-shadow: 0 40px 50px -8px var(--vg-shadow), 0 20px 25px -5px var(--vg-shadow), 0 8px 10px -6px var(--vg-shadow);
}
.vg-collaboration .vg-mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Title block */
.vg-collaboration .vg-tb {
  display: grid;
  grid-template-columns: 1fr auto;
  border-bottom: 1px solid var(--vg-line);
}
.vg-collaboration .vg-tb > div { padding: 10px 16px; min-width: 0; }
.vg-collaboration .vg-tb > div + div { border-left: 1px solid var(--vg-line); text-align: right; }
.vg-collaboration .vg-eyebrow {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vg-slate);
}
.vg-collaboration .vg-tb-title {
  margin: 3px 0 0;
  font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
}
.vg-collaboration .vg-tb-value {
  margin: 3px 0 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
}

/* Two screens on one sheet */
.vg-collaboration .vg-panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--vg-tint);
  transition: opacity 0.3s ease;
}
.vg-collaboration .vg-panes.vg-dim { opacity: 0; }
.vg-collaboration .vg-pane { display: flex; flex-direction: column; min-width: 0; }
.vg-collaboration .vg-pane + .vg-pane { border-left: 1px solid var(--vg-line); }
.vg-collaboration .vg-who {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--vg-line);
}
.vg-collaboration .vg-who-name {
  font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}
.vg-collaboration .vg-who-co {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vg-slate);
  text-align: right;
  min-width: 0;
}
.vg-collaboration .vg-stack { display: grid; flex: 1; margin: 10px; }
.vg-collaboration .vg-stack > * { grid-area: 1 / 1; min-width: 0; }
.vg-collaboration .vg-screen {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--vg-app-border);
  border-radius: 6px;
  background: var(--vg-app-bg);
  color: var(--vg-app-text);
  overflow: hidden;
}

/* The edit page's mobile title row and action row (StandardEdit.jsx) */
.vg-collaboration .vg-hdr { padding: 10px 10px 10px; border-bottom: 1px solid var(--vg-app-border); }
/* Title and switch on one line, the status value under them at full width,
   so a narrow screen never clips the saved time. */
.vg-collaboration .vg-hdr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; }
.vg-collaboration .vg-hdr-main { display: contents; }
.vg-collaboration .vg-hdr-row .vg-h1 { grid-column: 1; grid-row: 1; }
.vg-collaboration .vg-hdr-row .vg-switch { grid-column: 2; grid-row: 1; }
.vg-collaboration .vg-hdr-row .vg-status { grid-column: 1 / -1; grid-row: 2; margin-top: 2px; }
.vg-collaboration .vg-h1 {
  margin: 0;
  font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--vg-app-head);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vg-collaboration .vg-status {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
}
.vg-collaboration .vg-status[data-s="saved"] { color: var(--vg-app-ok); }
.vg-collaboration .vg-status[data-s="saving"] { color: var(--vg-app-muted); }
.vg-collaboration .vg-status[data-s="unsaved"] { color: var(--vg-app-warn); }
.vg-collaboration .vg-status-time { text-transform: none; letter-spacing: 0; color: var(--vg-app-muted); }
.vg-collaboration .vg-switch {
  display: inline-flex;
  flex-shrink: 0;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--vg-app-border);
  border-radius: 4px;
}
.vg-collaboration .vg-switch span {
  border-radius: 2px;
  padding: 3px 7px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vg-app-muted);
}
.vg-collaboration .vg-switch .vg-on { background: var(--vg-app-bg2); color: var(--vg-app-head); }
.vg-collaboration .vg-btns { display: flex; gap: 8px; margin-top: 10px; }
.vg-collaboration .vg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: box-shadow 0.15s ease, filter 0.15s ease;
}
.vg-collaboration .vg-btn-sec { background: var(--vg-app-bg3); border-color: var(--vg-app-border); color: var(--vg-app-text); }
.vg-collaboration .vg-btn-pri { background: var(--vg-app-btn); color: #fff; }
.vg-collaboration .vg-btn-danger { background: var(--vg-app-err); color: #fff; }
.vg-collaboration .vg-btn-grow { flex: 1; }
.vg-collaboration .vg-btn-off { opacity: 0.5; }
.vg-collaboration .vg-btn.vg-pressed { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vg-app-ring); filter: brightness(0.93); }

/* Notices above the composer: banner and merge notice, layered so the zone
   never changes height */
.vg-collaboration .vg-notices { display: grid; padding: 8px 10px 0; }
.vg-collaboration .vg-notices > * { grid-area: 1 / 1; min-width: 0; transition: opacity 0.35s ease; }
.vg-collaboration .vg-layer { display: flex; flex-direction: column; gap: 8px; }
.vg-collaboration .vg-ghost-layer { visibility: hidden; }
.vg-collaboration .vg-off { opacity: 0; }
.vg-collaboration .vg-merge {
  margin: 0;
  border-left: 2px solid var(--vg-app-border);
  padding-left: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--vg-app-muted);
}
.vg-collaboration .vg-banner {
  border: 1px solid oklch(0.5 0.1 100 / 0.3);
  background: oklch(0.5 0.1 100 / 0.1);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
}
.vg-collaboration .vg-banner p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--vg-app-text); }
.vg-collaboration .vg-banner .vg-btn { font-size: 12px; padding: 3px 9px; }

/* The composer: address gutter + markup buffer (addressGutter.js, specTheme.js) */
.vg-collaboration .vg-editor {
  margin: 8px 0 0;
  border-top: 1px solid var(--vg-app-border);
  background: var(--vg-app-bg);
  padding: 8px 0;
  flex: 1;
}
.vg-collaboration .vg-row {
  display: grid;
  grid-template-columns: 4.6em 1fr;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  transition: background-color 0.6s ease;
}
.vg-collaboration .vg-gut {
  background: var(--vg-app-bg2);
  border-right: 1px solid var(--vg-app-border);
  color: var(--vg-app-muted);
  font-size: 11px;
  line-height: 19.2px;
  text-align: right;
  padding: 0 6px 0 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vg-collaboration .vg-row.vg-active .vg-gut { background: var(--vg-app-bg3); }
.vg-collaboration .vg-row.vg-active .vg-cell { background: var(--vg-app-bg2); }
.vg-collaboration .vg-row.vg-flash .vg-cell { background: oklch(0.8 0.1 247 / 0.25); }
.vg-collaboration .vg-cell {
  display: grid;
  padding: 0 8px;
  font-size: 12px;
  line-height: 19.2px;
  overflow-wrap: anywhere;
  transition: background-color 0.6s ease;
}
.vg-collaboration .vg-cell > span { grid-area: 1 / 1; }
.vg-collaboration .vg-cell .vg-g { visibility: hidden; }
.vg-collaboration .vg-mk { color: var(--vg-app-muted); font-weight: 600; }
.vg-collaboration .vg-caret {
  display: inline-block;
  width: 0;
  height: 1.15em;
  margin-right: -1px;
  border-left: 1px solid var(--vg-app-text);
  vertical-align: -0.2em;
  animation: vg-blink 1s steps(1) infinite;
}
@keyframes vg-blink { 50% { opacity: 0; } }
.vg-collaboration .vg-elide {
  height: 14px;
  display: grid;
  grid-template-columns: 4.6em 1fr;
}
.vg-collaboration .vg-elide > span:first-child { background: var(--vg-app-bg2); border-right: 1px solid var(--vg-app-border); }
.vg-collaboration .vg-elide > span:last-child { margin: 6px 8px 0; border-top: 1px dashed var(--vg-app-border); height: 0; }

/* The clause conflict dialog: ResponsiveDialog as the phone-width bottom sheet */
.vg-collaboration .vg-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 6px;
  overflow: hidden;
  transition: opacity 0.35s ease;
}
.vg-collaboration .vg-overlay { position: absolute; inset: 0; background: oklch(0 0 0 / 0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.vg-collaboration .vg-dialog {
  position: relative;
  margin-top: 28px;
  background: var(--vg-app-pop);
  color: var(--vg-app-text);
  border-radius: 14px 14px 0 0;
  transition: transform 0.35s ease;
}
.vg-collaboration .vg-modal.vg-off { opacity: 0; }
.vg-collaboration .vg-modal.vg-off .vg-dialog { transform: translateY(16px); }
.vg-collaboration .vg-dlg-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--vg-app-border);
}
.vg-collaboration .vg-dlg-title {
  margin: 0;
  font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--vg-app-head);
}
.vg-collaboration .vg-x { flex-shrink: 0; width: 20px; height: 20px; color: var(--vg-app-muted); }
.vg-collaboration .vg-dlg-body { padding: 10px 12px; }
.vg-collaboration .vg-dlg-intro { margin: 0 0 8px; font-size: 13px; line-height: 1.4; color: var(--vg-app-muted); }
.vg-collaboration .vg-dlg-list { border-top: 1px solid var(--vg-app-border); border-bottom: 1px solid var(--vg-app-border); padding: 8px 0 10px; }
.vg-collaboration .vg-legend {
  margin: 0 0 6px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vg-app-head);
}
.vg-collaboration .vg-side {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--vg-app-border);
  border-radius: 6px;
  padding: 7px 9px;
}
.vg-collaboration .vg-side + .vg-side { margin-top: 6px; }
.vg-collaboration .vg-side-label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--vg-app-head); }
.vg-collaboration .vg-radio { width: 13px; height: 13px; border-radius: 50%; border: 1px solid oklch(0.7 0.02 247); background: #fff; flex-shrink: 0; }
.vg-collaboration .vg-side pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.5;
  color: var(--vg-app-text);
}
.vg-collaboration .vg-dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--vg-app-border); }

.vg-collaboration .vg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Narrow: the title block and the two screens stack */
@container (max-width: 499px) {
  .vg-collaboration .vg-tb { grid-template-columns: 1fr; }
  .vg-collaboration .vg-tb > div + div { border-left: 0; border-top: 1px solid var(--vg-line); text-align: left; }
  .vg-collaboration .vg-panes { grid-template-columns: 1fr; }
  .vg-collaboration .vg-pane + .vg-pane { border-left: 0; border-top: 1px solid var(--vg-line); }
}
@media (prefers-reduced-motion: reduce) {
  .vg-collaboration .vg-caret { display: none; }
  .vg-collaboration *, .vg-collaboration { transition: none !important; animation: none !important; }
}

/*
Generated by frontend/scripts/extract-vignettes.mjs from docs/mockups/vignette-compare.html.
The mockup is the design record: change the vignette there and re-run the script.
The OS dark-scheme media block is removed: the vignette follows the app's .dark class only.
*/
/* App baseline: undo Tailwind preflight inside the figure (generated, not in the mockup). */
.vg-compare {
  line-height: normal;
  tab-size: 8;
  font-feature-settings: normal;
  font-variation-settings: normal;
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
  margin: revert;
}
.vg-compare :where(*), .vg-compare :where(*)::before, .vg-compare :where(*)::after {
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
}
.vg-compare :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre, fieldset) { margin: revert; }
.vg-compare :where(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; }
.vg-compare :where(hr) { height: revert; color: revert; border-top-width: revert; }
.vg-compare :where(a) { color: revert; -webkit-text-decoration: revert; text-decoration: revert; }
.vg-compare :where(b, strong) { font-weight: revert; }
.vg-compare :where(code, kbd, samp, pre) { font-family: revert; font-feature-settings: revert; font-variation-settings: revert; font-size: revert; }
.vg-compare :where(small) { font-size: revert; }
.vg-compare :where(sub, sup) { font-size: revert; line-height: revert; position: revert; vertical-align: revert; }
.vg-compare :where(table) { text-indent: revert; border-color: revert; border-collapse: revert; }
.vg-compare :where(button, input, optgroup, select, textarea) {
  font-family: revert;
  font-feature-settings: revert;
  font-variation-settings: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  color: revert;
  margin: revert;
  padding: revert;
}
.vg-compare :where(button, select) { text-transform: revert; }
.vg-compare :where(button, input[type="button"], input[type="reset"], input[type="submit"]) {
  appearance: revert;
  background-color: revert;
  background-image: revert;
}
.vg-compare :where(fieldset, legend, dialog) { padding: revert; }
.vg-compare :where(ol, ul, menu) { list-style: revert; margin: revert; padding: revert; }
.vg-compare :where(textarea) { resize: revert; }
.vg-compare :where(input, textarea)::placeholder { opacity: revert; color: revert; }
.vg-compare :where(button, [role="button"], :disabled) { cursor: revert; }
.vg-compare :where(img, svg, video, canvas, audio, iframe, embed, object) { display: revert; vertical-align: revert; }
.vg-compare :where(img, video) { max-width: revert; height: revert; }

.vg-compare {
  /* index.css LIGHT values: the sheet is the light app in both themes */
  --vg-app: oklch(0.98 0.01 247);
  --vg-paper: oklch(1 0 0);
  --vg-tint: oklch(0.95 0.02 247);
  --vg-ink: oklch(0.25 0.02 247);
  --vg-heading: oklch(0 0 0);
  --vg-slate: oklch(0.52 0.02 247);
  --vg-line: oklch(0.91 0.02 247);
  --vg-input: oklch(0.86 0.02 247);
  --vg-divider: oklch(0.94 0.02 247);
  --vg-field: oklch(0.49 0.2 247);
  --vg-field-ink: oklch(0.99 0.004 247);
  --vg-focus: oklch(0.5 0.1 247);
  --vg-added-text: oklch(0.46 0.125 150);
  --vg-removed-text: oklch(0.48 0.19 27);
  --vg-modified-text: oklch(0.47 0.1 68);
  --vg-moved-text: oklch(0.46 0.2 300);
  --vg-ins-bg: oklch(0.88 0.085 155);
  --vg-del-bg: oklch(0.885 0.06 25);
  --vg-del-word: oklch(0.34 0.03 28);
  --vg-del-strike: oklch(0.45 0.18 28 / 0.8);
  --vg-mark-add: oklch(0.53 0.14 150);
  --vg-mark-del: oklch(0.54 0.21 27);
  --vg-mark-mod: oklch(0.82 0.16 88);
  --vg-mark-mov: oklch(0.52 0.22 300);
  --vg-mark-glyph: oklch(1 0 0);
  --vg-mark-glyph-mod: oklch(0.25 0.02 247);
  /* the backing: dark in both themes (founder 2026-10-25) */
  --vg-back: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --vg-display: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  --vg-body: Barlow, ui-sans-serif, system-ui, sans-serif;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  margin: 0;
  padding: 0 12px 12px 0;
  container-type: inline-size;
  font-family: var(--vg-body);
  color: var(--vg-ink);
}

:root[data-theme="dark"] .vg-compare, :root.dark .vg-compare { --vg-back: oklch(0.26 0.038 247); --vg-back-line: oklch(0.26 0.038 247); }

.vg-compare *, .vg-compare *::before, .vg-compare *::after { box-sizing: border-box; }
.vg-compare p, .vg-compare ul, .vg-compare ol { margin: 0; padding: 0; }
.vg-compare ul, .vg-compare ol { list-style: none; }
.vg-compare table { border-collapse: collapse; border-spacing: 0; }
.vg-compare th, .vg-compare td { padding: 0; }
.vg-compare .vg-back {
  position: absolute; inset: 12px 0 0 12px; border-radius: 8px;
  border: 1px solid var(--vg-back-line); background: var(--vg-back);
}
.vg-compare .vg-sheet {
  position: relative; overflow: hidden; border-radius: 8px;
  border: 1px solid var(--vg-line); background: var(--vg-app);
  padding: 14px 14px 16px;
  box-shadow: 0 18px 40px -18px oklch(0.268 0.027 247 / 0.35), 0 2px 6px oklch(0.268 0.027 247 / 0.08);
}
.vg-compare .vg-label { font-family: var(--vg-mono); font-size: 11px; font-weight: 500; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.15em; color: var(--vg-slate); }
.vg-compare .vg-eyebrow { letter-spacing: 0.2em; }

/* ---------- the page head ---------- */
.vg-compare .vg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding-bottom: 10px; border-bottom: 1px solid var(--vg-line); }
.vg-compare .vg-title { font-family: var(--vg-display); font-weight: 700; font-size: 26px; line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; color: var(--vg-heading); }
.vg-compare .vg-std { font-size: 14px; color: var(--vg-slate); }

/* ---------- the pickers ---------- */
.vg-compare .vg-pick {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px;
  align-items: end; margin-top: 12px;
}
.vg-compare .vg-pk .vg-label { display: block; margin-bottom: 5px; }
.vg-compare .vg-pk.to { grid-column: 1 / -1; grid-row: 2; }
.vg-compare .vg-swap { grid-column: 2; grid-row: 1; }
.vg-compare .vg-actions { grid-column: 1 / -1; display: flex; }
.vg-compare .vg-lb {
  position: relative; display: grid; align-items: center; min-height: 38px;
  padding: 8px 32px 8px 12px; border-radius: 6px; border: 1px solid var(--vg-input);
  background: var(--vg-paper); transition: box-shadow 0.25s ease;
}
.vg-compare .vg-lb > * { grid-area: 1 / 1; transition: opacity 0.3s ease; }
.vg-compare .vg-lb svg { position: absolute; right: 10px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--vg-slate); }
.vg-compare .vg-placeholder { font-size: 14px; color: var(--vg-slate); }
.vg-compare .vg-revline { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 9px; min-width: 0; white-space: nowrap; }
.vg-compare .vg-rv { font-family: var(--vg-mono); font-size: 14px; font-weight: 500; color: var(--vg-heading); }
.vg-compare .vg-rd { font-family: var(--vg-mono); font-size: 12px; color: var(--vg-slate); }
.vg-compare .vg-cur { font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-slate); }
.vg-compare .vg-swap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 6px; color: var(--vg-slate);
}
.vg-compare .vg-swap svg { width: 20px; height: 20px; }
.vg-compare .vg-btn {
  display: grid; width: 100%; min-height: 38px; align-items: center; padding: 8px 16px;
  border-radius: 8px; background: var(--vg-field); color: var(--vg-field-ink);
  font: 500 14px/1.4 var(--vg-body); text-align: center; white-space: nowrap;
  transition: box-shadow 0.25s ease, filter 0.2s ease;
}
.vg-compare .vg-btn > span { grid-area: 1 / 1; transition: opacity 0.2s ease; }
.vg-compare .ring { box-shadow: 0 0 0 2px var(--vg-app), 0 0 0 4px var(--vg-focus); }
.vg-compare .pressed { filter: brightness(0.86); }

/* ---------- the comparison sheet ---------- */
.vg-compare .vg-cmp {
  margin-top: 14px; overflow: hidden; border-radius: 4px; border: 1px solid var(--vg-line);
  background: var(--vg-paper); transition: opacity 0.4s ease;
}
/* title block */
.vg-compare .vg-tb { display: flex; flex-wrap: wrap; align-items: stretch; border-bottom: 1px solid var(--vg-line); }
.vg-compare .vg-tb-title { flex: 1 1 100%; min-width: 0; padding: 12px 14px; }
.vg-compare .vg-tb-h { margin-top: 6px; font-family: var(--vg-display); font-weight: 700; font-size: 20px; line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; color: var(--vg-heading); }
.vg-compare .vg-tb-cell { flex: 1 1 50%; min-width: 0; padding: 9px 14px 10px; border-top: 1px solid var(--vg-line); }
.vg-compare .vg-tb-cell + .vg-tb-cell { border-left: 1px solid var(--vg-line); }
.vg-compare .vg-tb-cell .vg-v { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; font-family: var(--vg-mono); font-size: 15px; color: var(--vg-heading); white-space: nowrap; }
.vg-compare .vg-tb-cell small { font-size: 11px; letter-spacing: 0.04em; color: var(--vg-slate); }

/* summary: one typeset line, then the register of counts */
.vg-compare .vg-sum { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--vg-line); }
.vg-compare .vg-sum-lead { padding: 12px 14px 13px; border-bottom: 1px solid var(--vg-line); }
.vg-compare .vg-line { margin-top: 7px; font-size: 16px; line-height: 1.45; color: var(--vg-heading); }
.vg-compare .vg-line .vg-n { font-family: var(--vg-mono); font-size: 14.5px; font-weight: 500; }
.vg-compare .vg-reg { width: 100%; }
.vg-compare .vg-reg th { padding: 12px 14px 6px 8px; text-align: right; }
.vg-compare .vg-reg th:first-child { padding-left: 14px; text-align: left; }
.vg-compare .vg-reg tbody tr { border-top: 1px solid var(--vg-divider); transition: opacity 0.35s ease; }
.vg-compare .vg-reg tbody tr:first-child, .vg-compare .vg-reg tr.vg-tot { border-top-color: var(--vg-line); }
.vg-compare .vg-kind { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; column-gap: 10px; min-height: 32px; padding: 5px 8px 5px 14px; }
.vg-compare .vg-fig { padding: 5px 14px 5px 8px; text-align: right; font-family: var(--vg-mono); font-size: 15px; font-variant-numeric: tabular-nums; color: var(--vg-heading); }
.vg-compare .vg-fig.none { color: var(--vg-slate); }
.vg-compare .vg-tot .vg-word { color: var(--vg-heading); }
.vg-compare .vg-reg tfoot td { padding: 6px 14px 10px; font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vg-slate); }

/* the mark: a solid square, its glyph drawn once as strokes (ChangeMark.jsx) */
.vg-compare .vg-mk {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 3px; color: var(--vg-mark-glyph);
  transition: opacity 0.35s ease;
}
.vg-compare .vg-mk svg { display: block; width: 14px; height: 14px; overflow: visible; }
.vg-compare .vg-mk.add { background: var(--vg-mark-add); }
.vg-compare .vg-mk.del { background: var(--vg-mark-del); }
.vg-compare .vg-mk.mov { background: var(--vg-mark-mov); }
.vg-compare .vg-mk.mod { background: var(--vg-mark-mod); color: var(--vg-mark-glyph-mod); box-shadow: inset 0 0 0 1.5px var(--vg-modified-text); }
.vg-compare .vg-mk.none { color: var(--vg-slate); box-shadow: inset 0 0 0 1px var(--vg-input); }
.vg-compare .vg-mk.sm { width: 16px; height: 16px; }
.vg-compare .vg-mk.sm svg { width: 11px; height: 11px; }

/* the change word */
.vg-compare .vg-word { font-family: var(--vg-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.vg-compare .vg-word.add { color: var(--vg-added-text); }
.vg-compare .vg-word.del { color: var(--vg-removed-text); }
.vg-compare .vg-word.mod { color: var(--vg-modified-text); }
.vg-compare .vg-word.mov { color: var(--vg-moved-text); }

/* the redline (INS_CLASS / DEL_CLASS) */
.vg-compare ins, .vg-compare del {
  border-radius: 2px; padding: 0 1px; text-decoration-thickness: 1.5px;
  transition: background-color 0.45s ease, text-decoration-color 0.45s ease;
}
.vg-compare ins { background: var(--vg-ins-bg); color: var(--vg-heading); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--vg-added-text); }
.vg-compare del { background: var(--vg-del-bg); color: var(--vg-del-word); text-decoration: line-through; text-decoration-color: var(--vg-removed-text); }
.vg-compare ins.plain { background-color: transparent; text-decoration-color: transparent; }
.vg-compare del.plain { background-color: transparent; }

/* ---------- the toolbar strip ---------- */
.vg-compare .vg-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px;
  padding: 8px 14px; border-bottom: 1px solid var(--vg-line); transition: opacity 0.35s ease;
}
.vg-compare .vg-tools-h { flex: 1 1 100%; font-family: var(--vg-display); font-weight: 700; font-size: 16px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0; color: var(--vg-heading); }
.vg-compare .vg-sw { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 2px; }
.vg-compare .vg-sw .vg-label { margin-right: 6px; letter-spacing: 0.18em; }
.vg-compare .vg-sw .vg-opt { padding: 4px 5px; font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vg-slate); white-space: nowrap; }
.vg-compare .vg-sw .vg-opt.on { font-weight: 600; color: var(--vg-heading); box-shadow: inset 0 -2px 0 var(--vg-heading); }
.vg-compare .vg-sw .vg-c { font-weight: 400; letter-spacing: 0.04em; color: var(--vg-slate); }
.vg-compare .vg-sw .vg-dot { font-family: var(--vg-mono); font-size: 11px; color: var(--vg-slate); opacity: 0.6; }

/* ---------- the entries ---------- */
.vg-compare .vg-entries { padding: 0 14px; }
.vg-compare .vg-e {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--vg-divider); transition: opacity 0.45s ease;
}
.vg-compare .vg-e:last-child { border-bottom: 0; }
.vg-compare .vg-mkc { padding-top: 1px; }
.vg-compare .vg-no { padding-top: 2px; font-family: var(--vg-mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--vg-heading); }
.vg-compare .vg-bd { grid-column: 1 / -1; min-width: 0; margin-top: 4px; }
.vg-compare .vg-tx { margin-top: 5px; font-size: 15px; line-height: 1.6; color: var(--vg-ink); }
.vg-compare .vg-tx.ctx { margin-top: 0; font-size: 14.5px; color: var(--vg-slate); }

/* a field change, nested under its clause */
.vg-compare .vg-fc {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px;
  margin-top: 10px; padding: 10px; border-radius: 3px; border: 1px solid var(--vg-line); background: var(--vg-app);
}
.vg-compare .vg-fc > .vg-mk { margin-top: 2px; }
.vg-compare .vg-fh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.vg-compare .vg-fname { min-width: 0; font-size: 15px; font-weight: 600; color: var(--vg-heading); }
.vg-compare .vg-ftype { font-family: var(--vg-mono); font-size: 11px; color: var(--vg-slate); }
.vg-compare .vg-renamed { margin-top: 2px; font-size: 13.5px; color: var(--vg-slate); }
.vg-compare .vg-fsum { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 8px; font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vg-slate); }
.vg-compare .vg-fsum b { font-weight: 600; }
.vg-compare .vg-fsum b.add { color: var(--vg-added-text); }
.vg-compare .vg-fsum b.del { color: var(--vg-removed-text); }
.vg-compare .vg-fsum b.mod { color: var(--vg-modified-text); }
.vg-compare .vg-opts { margin-top: 9px; border-top: 1px solid var(--vg-divider); }
.vg-compare .vg-o {
  display: grid; grid-template-columns: 16px 20px minmax(0, 1fr); column-gap: 8px; align-items: start;
  padding: 7px 0; border-bottom: 1px solid var(--vg-divider); font-size: 14px; line-height: 1.5;
}
.vg-compare .vg-o > .vg-mk { margin-top: 2px; }
.vg-compare .vg-bx { padding-top: 3px; }
.vg-compare .vg-box {
  position: relative; display: block; width: 14px; height: 14px; border-radius: 2px;
  border: 1.5px solid var(--vg-heading); background: var(--vg-heading);
}
.vg-compare .vg-box::after {
  content: ''; position: absolute; left: 3.5px; top: 0.5px; width: 4px; height: 8px;
  border-right: 2px solid var(--vg-paper); border-bottom: 2px solid var(--vg-paper); transform: rotate(45deg);
}
.vg-compare .vg-box.old { opacity: 0.55; }
.vg-compare .vg-ot { min-width: 0; color: var(--vg-ink); overflow-wrap: anywhere; }
.vg-compare .vg-ot.gone { color: var(--vg-del-word); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--vg-del-strike); }
.vg-compare .vg-key { margin-top: 8px; font-family: var(--vg-mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.06em; color: var(--vg-slate); }

@container (min-width: 520px) {
  .vg-compare .vg-sheet { padding: 16px 18px 18px; }
  .vg-compare .vg-title { font-size: 28px; }
  .vg-compare .vg-pick { grid-template-columns: minmax(0, 0.85fr) auto minmax(0, 1.15fr); }
  .vg-compare .vg-pk.to { grid-column: 3; grid-row: 1; }
  .vg-compare .vg-swap { grid-column: 2; grid-row: 1; }
  .vg-compare .vg-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .vg-compare .vg-btn { width: auto; }
  .vg-compare .vg-tb-title { flex: 1 1 240px; padding: 13px 16px; }
  .vg-compare .vg-tb-h { font-size: 22px; }
  .vg-compare .vg-tb-cell { flex: 0 0 auto; min-width: 112px; padding: 13px 16px; border-top: 0; border-left: 1px solid var(--vg-line); }
  .vg-compare .vg-tools { padding: 8px 16px; }
  .vg-compare .vg-tools-h { flex: 0 0 auto; }
  .vg-compare .vg-entries { padding: 0 16px; }
  .vg-compare .vg-e { grid-template-columns: 20px 56px minmax(0, 1fr); column-gap: 12px; }
  .vg-compare .vg-bd { grid-column: 3; grid-row: 1; margin-top: 0; }
  .vg-compare .vg-fc { padding: 11px 13px; column-gap: 10px; }
  .vg-compare .vg-o { grid-template-columns: 16px 22px minmax(0, 1fr); column-gap: 10px; font-size: 14.5px; }
  .vg-compare .vg-sum { grid-template-columns: minmax(0, 1fr) auto; }
  .vg-compare .vg-sum-lead { padding: 13px 16px; border-bottom: 0; border-right: 1px solid var(--vg-line); }
  .vg-compare .vg-reg th { padding-top: 13px; }
}

.vg-compare .off { opacity: 0; }
.vg-compare .vg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .vg-compare *, .vg-compare *::before, .vg-compare *::after { transition: none !important; }
}

/*
Generated by frontend/scripts/extract-vignettes.mjs from docs/mockups/vignette-comments.html.
The mockup is the design record: change the vignette there and re-run the script.
The OS dark-scheme media block is removed: the vignette follows the app's .dark class only.
*/
/* App baseline: undo Tailwind preflight inside the figure (generated, not in the mockup). */
.vg-comments {
  line-height: normal;
  tab-size: 8;
  font-feature-settings: normal;
  font-variation-settings: normal;
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
  margin: revert;
}
.vg-comments :where(*), .vg-comments :where(*)::before, .vg-comments :where(*)::after {
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
}
.vg-comments :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre, fieldset) { margin: revert; }
.vg-comments :where(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; }
.vg-comments :where(hr) { height: revert; color: revert; border-top-width: revert; }
.vg-comments :where(a) { color: revert; -webkit-text-decoration: revert; text-decoration: revert; }
.vg-comments :where(b, strong) { font-weight: revert; }
.vg-comments :where(code, kbd, samp, pre) { font-family: revert; font-feature-settings: revert; font-variation-settings: revert; font-size: revert; }
.vg-comments :where(small) { font-size: revert; }
.vg-comments :where(sub, sup) { font-size: revert; line-height: revert; position: revert; vertical-align: revert; }
.vg-comments :where(table) { text-indent: revert; border-color: revert; border-collapse: revert; }
.vg-comments :where(button, input, optgroup, select, textarea) {
  font-family: revert;
  font-feature-settings: revert;
  font-variation-settings: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  color: revert;
  margin: revert;
  padding: revert;
}
.vg-comments :where(button, select) { text-transform: revert; }
.vg-comments :where(button, input[type="button"], input[type="reset"], input[type="submit"]) {
  appearance: revert;
  background-color: revert;
  background-image: revert;
}
.vg-comments :where(fieldset, legend, dialog) { padding: revert; }
.vg-comments :where(ol, ul, menu) { list-style: revert; margin: revert; padding: revert; }
.vg-comments :where(textarea) { resize: revert; }
.vg-comments :where(input, textarea)::placeholder { opacity: revert; color: revert; }
.vg-comments :where(button, [role="button"], :disabled) { cursor: revert; }
.vg-comments :where(img, svg, video, canvas, audio, iframe, embed, object) { display: revert; vertical-align: revert; }
.vg-comments :where(img, video) { max-width: revert; height: revert; }

.vg-comments {
  --vg-ink: oklch(0.268 0.027 247);
  --vg-slate: oklch(0.52 0.031 247);
  --vg-blue: oklch(0.535 0.155 247);
  --vg-line: oklch(0.898 0.013 247);
  --vg-tint: oklch(0.966 0.006 247);
  --vg-removed: oklch(0.472 0.142 31);
  /* light app values for the standard page (index.css), and the backing: dark in both themes (founder 2026-10-25) */
  --vg-heading: oklch(0 0 0);
  --vg-secondary: oklch(0.95 0.02 247);
  --vg-tertiary: oklch(0.9 0.02 247);
  --vg-backsheet: oklch(0.26 0.038 247);
  --vg-backline: oklch(0.26 0.038 247);
  --vg-shadow: oklch(0.268 0.027 247 / 0.12);
  position: relative; margin: 0; max-width: 640px; box-sizing: border-box;
  padding: 0 12px 12px 0;
  font-family: Barlow, ui-sans-serif, system-ui, sans-serif; color: var(--vg-ink);
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] .vg-comments, :root.dark .vg-comments { --vg-backsheet: oklch(0.26 0.038 247); --vg-backline: oklch(0.26 0.038 247); --vg-shadow: oklch(0 0 0 / 0.45); }
.vg-comments *, .vg-comments *::before, .vg-comments *::after { box-sizing: border-box; }
.vg-comments p { margin: 0; }
.vg-comments svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.vg-comments .vg-back { position: absolute; inset: 12px 0 0 12px; border-radius: 8px; border: 1px solid var(--vg-backline); background: var(--vg-backsheet); }
.vg-comments .vg-sheet { position: relative; overflow: hidden; border-radius: 8px; border: 1px solid var(--vg-line); background: #fff;
  box-shadow: 0 40px 50px -8px var(--vg-shadow), 0 20px 25px -5px var(--vg-shadow), 0 8px 10px -6px var(--vg-shadow); }

.vg-comments .vg-mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.15em; color: var(--vg-slate); }
.vg-comments .vg-ink { color: var(--vg-ink); }
.vg-comments .vg-stack { display: inline-grid; }
.vg-comments .vg-stack > * { grid-area: 1 / 1; transition: opacity .3s; }
.vg-comments .vg-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Title block */
.vg-comments .vg-tb { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--vg-line); }
.vg-comments .vg-tb-l { padding: 10px 16px; min-width: 0; }
.vg-comments .vg-tb-r { padding: 10px 16px; border-left: 1px solid var(--vg-line); text-align: right; }
.vg-comments .vg-tb-label { letter-spacing: 0.2em; }
.vg-comments .vg-tb-title { margin-top: 2px; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 18px; line-height: 1; text-transform: uppercase; }
.vg-comments .vg-tb-val { margin-top: 3px; font-family: "IBM Plex Mono", monospace; font-size: 13px; font-weight: 500; line-height: 1; text-transform: uppercase; justify-items: end; }

/* Stage: every layer in one grid cell, so the tallest sets the height for the whole loop */
.vg-comments .vg-stage { display: grid; grid-template-columns: minmax(0, 1fr); position: relative; }
.vg-comments .vg-layer { grid-area: 1 / 1; min-width: 0; position: relative; display: flex; flex-direction: column; transition: opacity .45s ease; }

/* The standard page (Standard.jsx): title block, document card, clause rows */
.vg-comments .vg-page { padding: 14px; background: oklch(0.98 0.01 247); transition: opacity .45s ease; }
.vg-comments .vg-std { display: flex; align-items: stretch; border: 1px solid var(--vg-line); border-radius: 8px; background: #fff; }
.vg-comments .vg-std-main { flex: 1; min-width: 0; padding: 12px 16px; }
.vg-comments .vg-std-h { margin-top: 6px; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 26px; line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; color: var(--vg-heading); }
.vg-comments .vg-std-cell { padding: 12px 16px; border-left: 1px solid var(--vg-line); }
.vg-comments .vg-std-v { margin-top: 6px; font-family: "IBM Plex Mono", monospace; font-size: 14px; color: var(--vg-heading); }
.vg-comments .vg-doc { margin-top: 12px; border: 1px solid var(--vg-line); border-radius: 8px; background: #fff; padding: 14px 16px 10px; }
.vg-comments .vg-doc-h { padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--vg-line); font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 18px; line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; color: var(--vg-heading); }
.vg-comments .vg-el { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 28px; column-gap: 8px; align-items: start; padding: 6px 0; font-size: 14px; line-height: 1.6; }
.vg-comments .vg-el-n { font-family: "IBM Plex Mono", monospace; font-size: 13px; line-height: 1.75; color: var(--vg-slate); }
.vg-comments .vg-el-head p { font-weight: 600; color: var(--vg-heading); }
.vg-comments .vg-cbtn { position: relative; display: inline-flex; padding: 4px; border-radius: 4px; color: var(--vg-slate); opacity: 0; transition: opacity .2s, background-color .2s; }
.vg-comments .vg-cbtn > svg { width: 20px; height: 20px; }
.vg-comments .vg-cbtn.vg-show { opacity: 1; }
.vg-comments .vg-cbtn.vg-hov { background: var(--vg-tertiary); }
.vg-comments .vg-cbtn.vg-press { background: oklch(0.85 0.025 247); }
.vg-comments .vg-el-c { position: relative; }
/* the pointer's tip rests on the centre of the comment button (28 px column, 6 px row padding) */
.vg-comments .vg-cursor { position: absolute; left: calc(100% - 15px); top: 19px; width: 18px; height: 22px; z-index: 3; pointer-events: none; transform-origin: 0 0; }
.vg-comments .vg-cursor svg { width: 18px; height: 22px; fill: #fff; stroke: oklch(0.2 0.02 247); stroke-width: 1.3; filter: drop-shadow(0 1px 1px oklch(0 0 0 / 0.25)); }
.vg-comments .vg-pscrim { position: absolute; inset: 0; background: oklch(0.268 0.027 247 / 0.28); transition: opacity .35s; }
.vg-comments .vg-modal { margin: 10px; border: 1px solid var(--vg-line); border-radius: 8px; background: #fff;
  box-shadow: 0 20px 25px -5px oklch(0.268 0.027 247 / 0.25), 0 8px 10px -6px oklch(0.268 0.027 247 / 0.2); transition: opacity .35s ease, transform .35s ease; }
.vg-comments .vg-modal.vg-pre { transform: translateY(12px) scale(0.985); }

/* Dialog chrome (ResponsiveDialog header + body) */
.vg-comments .vg-dh { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--vg-line); }
.vg-comments .vg-dh-main { min-width: 0; flex: 1; }
.vg-comments .vg-eyebrow { letter-spacing: 0.25em; margin-bottom: 4px; }
.vg-comments .vg-dtitle { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.1; text-transform: uppercase; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-comments .vg-addr { margin-top: 4px; font-family: "IBM Plex Mono", monospace; font-size: 14px; }
.vg-comments .vg-dh-icons { display: flex; gap: 10px; color: var(--vg-slate); }
.vg-comments .vg-ic5 { width: 20px; height: 20px; }
.vg-comments .vg-ic6 { width: 22px; height: 22px; }
.vg-comments .vg-ic35 { width: 14px; height: 14px; }
.vg-comments .vg-dbody { padding: 16px; flex: 1; }
.vg-comments .vg-flexcol { display: flex; flex-direction: column; }

.vg-comments .vg-clause { display: grid; grid-template-columns: 3rem 1fr; gap: 8px; border: 1px solid var(--vg-line); border-radius: 8px; padding: 12px 14px; font-size: 14px; line-height: 1.6; margin-bottom: 14px; }
.vg-comments .vg-clause-n { font-family: "IBM Plex Mono", monospace; color: var(--vg-blue); font-weight: 500; }

/* Thread */
.vg-comments .vg-thread { flex: 1; display: grid; align-items: start; }
.vg-comments .vg-empty { align-self: center; padding: 20px 0; text-align: center; letter-spacing: 0.2em; }
.vg-comments .vg-meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 4px; }
.vg-comments .vg-state { display: inline-flex; align-items: center; gap: 4px; color: var(--vg-removed); }
.vg-comments .vg-date { margin-left: auto; }
.vg-comments .vg-prov { margin-top: 6px; font-size: 12px; color: var(--vg-slate); }
.vg-comments .vg-prov b { font-weight: 500; color: var(--vg-ink); }
.vg-comments .vg-body { margin-top: 6px; font-size: 14px; line-height: 1.6; }
.vg-comments .vg-clamp2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 4px; }
.vg-comments .vg-answer { margin-top: 8px; border-left: 2px solid var(--vg-blue); background: var(--vg-tint); padding: 6px 0 6px 12px; transition: opacity .4s; }
.vg-comments .vg-answer-t { margin-top: 4px; font-size: 14px; line-height: 1.6; }
.vg-comments .vg-actions { margin-top: 8px; display: flex; gap: 12px; font-size: 12px; transition: opacity .3s; }
.vg-comments .vg-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--vg-blue); }
.vg-comments .vg-red { color: var(--vg-removed); }

/* Composer */
.vg-comments .vg-composer { margin-top: 14px; border-top: 1px solid var(--vg-line); padding-top: 14px; }
.vg-comments .vg-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.vg-comments .vg-field { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.vg-comments .vg-select { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; border: 1px solid var(--vg-line); border-radius: 6px; background: #fff; padding: 5px 8px 5px 10px; font-family: "IBM Plex Mono", monospace; font-size: 12px; line-height: 1.4; color: var(--vg-ink); white-space: nowrap; max-width: 100%; overflow: hidden; transition: box-shadow .2s; }
.vg-comments .vg-field .vg-select > :first-child, .vg-comments .vg-sel-t { overflow: hidden; text-overflow: ellipsis; }
.vg-comments .vg-select svg { width: 12px; height: 12px; color: var(--vg-slate); }
.vg-comments .vg-select.vg-disabled { color: var(--vg-slate); opacity: .6; }
.vg-comments .vg-select-w { display: flex; justify-content: space-between; width: 100%; margin-top: 0; }
.vg-comments .vg-ring { box-shadow: 0 0 0 2px #fff, 0 0 0 4px oklch(0.535 0.155 247 / 0.6); }
.vg-comments .vg-textarea { position: relative; margin-top: 12px; border: 1px solid var(--vg-line); border-radius: 8px; padding: 8px 12px; font-size: 14px; line-height: 1.5; min-height: calc(4.5em + 18px); transition: box-shadow .2s; }
.vg-comments .vg-ta-sm { margin-top: 4px; }
.vg-comments .vg-ghost { visibility: hidden; }
.vg-comments .vg-over { position: absolute; inset: 8px 12px; }
.vg-comments .vg-ph { color: var(--vg-slate); position: absolute; left: 0; top: 0; }
.vg-comments .vg-caret { display: inline-block; width: 1px; height: 1em; transform: translateY(0.15em); background: var(--vg-ink); margin-left: 1px; }
.vg-comments .vg-cfoot { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vg-comments .vg-count { white-space: nowrap; }
.vg-comments .vg-kbd { margin-left: 12px; }
.vg-comments .vg-btn { display: inline-flex; align-items: center; border-radius: 6px; background: var(--vg-blue); color: #fff; font-size: 14px; font-weight: 500; padding: 8px 16px; line-height: 1.25; transition: opacity .2s, box-shadow .2s, filter .2s; white-space: nowrap; }
.vg-comments .vg-btn.vg-off { opacity: .5; }
.vg-comments .vg-btn.vg-press { filter: brightness(0.88); }
.vg-comments .vg-btn-sm { padding: 6px 12px; flex-shrink: 0; }
.vg-comments .vg-btn2 { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--vg-line); border-radius: 6px; background: var(--vg-tint); color: var(--vg-ink); font-size: 14px; font-weight: 500; padding: 6px 12px; line-height: 1.25; white-space: nowrap; }
.vg-comments .vg-btn2 svg { width: 16px; height: 16px; }

/* Register panels */
.vg-comments .vg-panel { border: 1px solid var(--vg-line); border-radius: 8px; background: #fff; }
.vg-comments .vg-panel + .vg-panel { margin-top: 16px; }
.vg-comments .vg-ptb { display: flex; align-items: stretch; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--vg-line); }
.vg-comments .vg-ptitle { display: flex; align-items: center; padding: 12px 16px; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 16px; line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; }
.vg-comments .vg-ptb-r { display: flex; align-items: center; gap: 12px; padding-right: 12px; }
.vg-comments .vg-pcell { border-left: 1px solid var(--vg-line); padding: 12px 16px; text-align: right; }
.vg-comments .vg-ptb-r .vg-pcell { padding-right: 0; }
.vg-comments .vg-pcell .vg-mono { letter-spacing: 0.2em; }
.vg-comments .vg-pnum { margin-top: 6px; font-family: "IBM Plex Mono", monospace; font-size: 16px; line-height: 1; }
.vg-comments .vg-pline { padding: 10px 16px; border-bottom: 1px solid var(--vg-line); font-size: 12px; line-height: 1.5; color: var(--vg-slate); }
.vg-comments .vg-prow { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; }
.vg-comments .vg-prow-main { min-width: 0; flex: 1; }
.vg-comments .vg-prow .vg-meta { column-gap: 8px; }
.vg-comments .vg-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; border: 1px solid var(--vg-line); border-radius: 4px; padding: 3px 6px; font-family: "IBM Plex Mono", monospace; font-size: 11px; line-height: 1; color: var(--vg-blue); background: #fff; white-space: nowrap; }
.vg-comments .vg-chip svg { width: 12px; height: 12px; }
.vg-comments .vg-chip i { font-style: normal; color: var(--vg-slate); }
.vg-comments .vg-chip { overflow: hidden; }
.vg-comments .vg-chip b { font-weight: 400; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vg-comments .vg-chip i { flex-shrink: 0; }
.vg-comments .vg-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--vg-line); }
.vg-comments .vg-filters .vg-select { margin-top: 0; }
.vg-comments .vg-rrow { padding: 12px 16px; }
.vg-comments .vg-rrow .vg-meta { column-gap: 8px; }
.vg-comments .vg-rrow .vg-prov { margin-top: 4px; }

/* Nested resolve sheet */
.vg-comments .vg-scrim { position: absolute; inset: 0; background: oklch(0.268 0.027 247 / 0.28); transition: opacity .35s; }
.vg-comments .vg-rsheet { position: absolute; left: 50%; top: 50%; width: calc(100% - 24px); max-width: 448px; transform: translate(-50%, -50%); background: #fff; border: 1px solid var(--vg-line); border-radius: 8px;
  box-shadow: 0 20px 25px -5px oklch(0.268 0.027 247 / 0.25), 0 8px 10px -6px oklch(0.268 0.027 247 / 0.2); transition: opacity .35s, transform .35s; }
.vg-comments .vg-rbody { padding: 16px; }
.vg-comments .vg-flabel { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.vg-comments .vg-flabel .vg-stack { font-weight: 400; color: var(--vg-slate); }
.vg-comments .vg-inl { display: inline-grid; }
.vg-comments .vg-mt3 { margin-top: 12px; }
.vg-comments .vg-help { display: grid; margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--vg-slate); }
.vg-comments .vg-rfoot { display: flex; justify-content: flex-end; gap: 12px; border-top: 1px solid var(--vg-line); padding: 12px 16px; }

/* State switches driven by the script */
.vg-comments .vg-hide { opacity: 0; }
.vg-comments .vg-gone { visibility: hidden; }
.vg-comments .vg-noev { pointer-events: none; }

@media (max-width: 420px) {
  .vg-comments .vg-kbd { display: none; }
  .vg-comments .vg-ptb-wrap { flex-wrap: wrap; row-gap: 0; }
  .vg-comments .vg-ptb-wrap .vg-ptitle { flex-basis: 100%; padding-bottom: 0; }
  .vg-comments .vg-ptb-wrap .vg-ptb-r { margin-left: auto; }
  .vg-comments .vg-tb-label { letter-spacing: 0.12em; }
  .vg-comments .vg-tb-val { font-size: 12px; letter-spacing: 0; }
  .vg-comments .vg-tb-title { font-size: 17px; }
  .vg-comments .vg-dbody { padding: 14px 12px; }
  .vg-comments .vg-dh { padding: 12px; }
  .vg-comments .vg-tb-l, .vg-comments .vg-tb-r { padding: 10px 12px; }
  .vg-comments .vg-ptitle { padding: 12px; }
  .vg-comments .vg-pcell { padding: 10px 12px; }
  .vg-comments .vg-prow, .vg-comments .vg-rrow, .vg-comments .vg-filters, .vg-comments .vg-pline { padding-left: 12px; padding-right: 12px; }
  .vg-comments .vg-clause { padding: 10px 12px; grid-template-columns: 2.75rem 1fr; }
  .vg-comments .vg-page { padding: 10px; }
  .vg-comments .vg-std-main, .vg-comments .vg-std-cell { padding: 10px 12px; }
  .vg-comments .vg-std-h { font-size: 22px; }
  .vg-comments .vg-doc { padding: 12px 12px 8px; }
  .vg-comments .vg-el { grid-template-columns: 2.75rem minmax(0, 1fr) 28px; column-gap: 6px; }
  .vg-comments .vg-modal { margin: 8px; }
}

/*
Generated by frontend/scripts/extract-vignettes.mjs from docs/mockups/vignette-sharing.html.
The mockup is the design record: change the vignette there and re-run the script.
The OS dark-scheme media block is removed: the vignette follows the app's .dark class only.
*/
/* App baseline: undo Tailwind preflight inside the figure (generated, not in the mockup). */
.vg-sharing {
  line-height: normal;
  tab-size: 8;
  font-feature-settings: normal;
  font-variation-settings: normal;
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
  margin: revert;
}
.vg-sharing :where(*), .vg-sharing :where(*)::before, .vg-sharing :where(*)::after {
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
}
.vg-sharing :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre, fieldset) { margin: revert; }
.vg-sharing :where(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; }
.vg-sharing :where(hr) { height: revert; color: revert; border-top-width: revert; }
.vg-sharing :where(a) { color: revert; -webkit-text-decoration: revert; text-decoration: revert; }
.vg-sharing :where(b, strong) { font-weight: revert; }
.vg-sharing :where(code, kbd, samp, pre) { font-family: revert; font-feature-settings: revert; font-variation-settings: revert; font-size: revert; }
.vg-sharing :where(small) { font-size: revert; }
.vg-sharing :where(sub, sup) { font-size: revert; line-height: revert; position: revert; vertical-align: revert; }
.vg-sharing :where(table) { text-indent: revert; border-color: revert; border-collapse: revert; }
.vg-sharing :where(button, input, optgroup, select, textarea) {
  font-family: revert;
  font-feature-settings: revert;
  font-variation-settings: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  color: revert;
  margin: revert;
  padding: revert;
}
.vg-sharing :where(button, select) { text-transform: revert; }
.vg-sharing :where(button, input[type="button"], input[type="reset"], input[type="submit"]) {
  appearance: revert;
  background-color: revert;
  background-image: revert;
}
.vg-sharing :where(fieldset, legend, dialog) { padding: revert; }
.vg-sharing :where(ol, ul, menu) { list-style: revert; margin: revert; padding: revert; }
.vg-sharing :where(textarea) { resize: revert; }
.vg-sharing :where(input, textarea)::placeholder { opacity: revert; color: revert; }
.vg-sharing :where(button, [role="button"], :disabled) { cursor: revert; }
.vg-sharing :where(img, svg, video, canvas, audio, iframe, embed, object) { display: revert; vertical-align: revert; }
.vg-sharing :where(img, video) { max-width: revert; height: revert; }

.vg-sharing {
  --vg-paper: oklch(0.986 0.002 68);
  --vg-ink: oklch(0.268 0.027 247);
  --vg-blue: oklch(0.535 0.155 247);
  --vg-safety: oklch(0.575 0.172 38);
  --vg-removed: oklch(0.472 0.142 31);
  --vg-added: oklch(0.485 0.092 164);
  --vg-slate: oklch(0.52 0.031 247);
  --vg-line: oklch(0.898 0.013 247);
  --vg-tint: oklch(0.966 0.006 247);
  --vg-back-bg: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-shadow: oklch(0.268 0.027 247 / 0.14);
  position: relative;
  margin: 0 12px 12px 0;
  font-family: Barlow, ui-sans-serif, system-ui, sans-serif;
  color: var(--vg-ink);
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] .vg-sharing, :root.dark .vg-sharing {
  --vg-back-bg: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-shadow: oklch(0 0 0 / 0.45);
}
.vg-sharing *, .vg-sharing *::before, .vg-sharing *::after { box-sizing: border-box; }
.vg-sharing p { margin: 0; }
.vg-sharing svg { display: block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vg-sharing .vg-mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.vg-sharing .vg-label {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-slate);
}
.vg-sharing .vg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Backing sheet and the paper sheet (white in both themes). */
.vg-sharing .vg-back {
  position: absolute; inset: 0; transform: translate(12px, 12px);
  border-radius: 8px; border: 1px solid var(--vg-back-line); background: var(--vg-back-bg);
}
.vg-sharing .vg-sheet {
  position: relative; overflow: hidden; border-radius: 8px;
  border: 1px solid var(--vg-line); background: #fff;
  box-shadow: 0 40px 50px -8px var(--vg-shadow), 0 20px 25px -5px var(--vg-shadow), 0 8px 10px -6px var(--vg-shadow);
  container-type: inline-size;
}
/* Every layer shares one grid cell, so the sheet is always as tall as its
   tallest state and never changes height during the loop. */
.vg-sharing .vg-stack { display: grid; }
.vg-sharing .vg-stack > * { grid-area: 1 / 1; min-width: 0; }
.vg-sharing .vg-fade { transition: opacity 260ms ease, transform 260ms ease; }

/* Page: breadcrumb, transmittal title block, tabs. */
.vg-sharing .vg-crumbs {
  display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; white-space: nowrap;
  padding: 9px 16px; border-bottom: 1px solid var(--vg-line);
  font-size: 12px; color: var(--vg-slate);
}
.vg-sharing .vg-crumbs b { font-weight: 500; color: var(--vg-ink); }
.vg-sharing .vg-head {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px;
  padding: 14px 16px 0;
}
.vg-sharing .vg-eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--vg-slate);
}
.vg-sharing .vg-title {
  margin-top: 4px; font-family: "Barlow Condensed", ui-sans-serif, sans-serif;
  font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase;
}
.vg-sharing .vg-sub {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 16px 0; font-size: 14px; color: var(--vg-slate);
}
.vg-sharing .vg-chip {
  border-radius: 4px; background: var(--vg-tint); padding: 2px 6px;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em;
}
.vg-sharing .vg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 8px; border: 1px solid transparent; padding: 8px 14px;
  font-family: Barlow, ui-sans-serif, sans-serif; font-weight: 600; font-size: 14px; line-height: 1.2;
  white-space: nowrap; transition: box-shadow 180ms ease, transform 180ms ease, background-color 180ms ease;
}
.vg-sharing .vg-btn svg { width: 18px; height: 18px; }
.vg-sharing .vg-btn-primary { background: var(--vg-ink); color: #fff; }
.vg-sharing .vg-btn-secondary { background: var(--vg-tint); color: var(--vg-ink); border-color: var(--vg-line); }
.vg-sharing .vg-btn-quiet { background: #fff; color: var(--vg-ink); border-color: var(--vg-line); }
.vg-sharing .vg-btn-danger { background: #fff; color: var(--vg-removed); border-color: oklch(0.472 0.142 31 / 0.35); }
.vg-sharing .vg-btn-sm { padding: 5px 9px; font-size: 12px; gap: 5px; border-radius: 6px; }
.vg-sharing .vg-btn-sm svg { width: 14px; height: 14px; }
.vg-sharing .vg-pressed { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vg-blue); transform: translateY(1px); }

.vg-sharing .vg-tabs {
  display: flex; gap: 20px; margin: 14px 16px 0; border-bottom: 1px solid var(--vg-line);
  overflow: hidden;
}
.vg-sharing .vg-tab {
  display: grid; padding: 10px 2px; margin-bottom: -1px; white-space: nowrap;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  border-bottom: 2px solid transparent; color: var(--vg-slate);
  transition: color 260ms ease, border-color 260ms ease;
}
.vg-sharing .vg-tab-links { color: var(--vg-ink); border-bottom-color: var(--vg-ink); }
.vg-sharing.vg-records .vg-tab-links { color: var(--vg-slate); border-bottom-color: transparent; }
.vg-sharing.vg-records .vg-tab-records { color: var(--vg-ink); border-bottom-color: var(--vg-ink); }

.vg-sharing .vg-body { padding: 16px; }

/* Share Links tab */
.vg-sharing .vg-panel-links { opacity: 1; }
.vg-sharing.vg-records .vg-panel-links { opacity: 0; }
.vg-sharing .vg-panel-records { opacity: 0; }
.vg-sharing.vg-records .vg-panel-records { opacity: 1; }

.vg-sharing .vg-empty {
  align-self: start; text-align: center; padding: 28px 16px;
  background: var(--vg-tint); border: 1px solid var(--vg-line); border-radius: 8px;
  font-size: 14px; color: var(--vg-slate); opacity: 1;
}
.vg-sharing .vg-empty p + p { margin-top: 4px; font-size: 13px; }
.vg-sharing.vg-token .vg-empty { opacity: 0; }

.vg-sharing .vg-card {
  align-self: start; background: var(--vg-tint); border: 1px solid var(--vg-line);
  border-radius: 8px; padding: 14px;
}
.vg-sharing .vg-token-card { opacity: 0; transform: translateY(6px); }
.vg-sharing.vg-token .vg-token-card { opacity: 1; transform: none; }
.vg-sharing .vg-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.vg-sharing .vg-status { display: grid; }
.vg-sharing .vg-status > span {
  grid-area: 1 / 1; justify-self: start; border-radius: 4px; padding: 2px 6px;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; transition: opacity 260ms ease;
}
.vg-sharing .vg-st-pending { background: oklch(0.575 0.172 38 / 0.1); color: oklch(0.5 0.15 38); opacity: 1; }
.vg-sharing .vg-st-accepted { background: oklch(0.485 0.092 164 / 0.12); color: var(--vg-added); opacity: 0; }
.vg-sharing.vg-accepted .vg-st-pending { opacity: 0; }
.vg-sharing.vg-accepted .vg-st-accepted { opacity: 1; }
.vg-sharing .vg-strong { font-size: 14px; font-weight: 500; }
.vg-sharing .vg-small { font-size: 12px; color: var(--vg-slate); }
.vg-sharing .vg-field-label { display: block; font-size: 12px; color: var(--vg-slate); margin-bottom: 2px; }
.vg-sharing .vg-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-sharing .vg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 13px; margin-top: 12px; }
.vg-sharing .vg-kv-k { color: var(--vg-slate); }
.vg-sharing .vg-check { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: 12px; }
.vg-sharing .vg-box {
  width: 14px; height: 14px; margin-top: 1px; border-radius: 3px; background: var(--vg-ink); color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
}
.vg-sharing .vg-box svg { width: 11px; height: 11px; stroke-width: 2.5; }
.vg-sharing .vg-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--vg-line);
}
.vg-sharing .vg-resend-wrap { display: flex; overflow: hidden; max-width: 140px; margin-right: 0; transition: max-width 360ms ease, opacity 260ms ease, margin 360ms ease; }
.vg-sharing.vg-accepted .vg-resend-wrap { max-width: 0; opacity: 0; margin-right: -8px; }

/* Access Records tab */
.vg-sharing .vg-rec-head { display: flex; align-items: center; gap: 8px; }
.vg-sharing .vg-rec-title { font-size: 17px; font-weight: 600; }
.vg-sharing .vg-rec-head svg { width: 17px; height: 17px; color: var(--vg-slate); }
.vg-sharing .vg-rec-count { margin: 2px 0 14px; font-size: 13px; color: var(--vg-slate); }
.vg-sharing .vg-rec-card { opacity: 0; transform: translateY(8px); transition: opacity 420ms ease, transform 420ms ease; }
.vg-sharing.vg-row .vg-rec-card { opacity: 1; transform: none; }
.vg-sharing .vg-who { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.vg-sharing .vg-who-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vg-sharing .vg-avatar { padding: 7px; border-radius: 8px; background: #fff; border: 1px solid var(--vg-line); color: var(--vg-slate); }
.vg-sharing .vg-avatar svg { width: 18px; height: 18px; }
.vg-sharing .vg-rev {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; border-radius: 999px;
  padding: 2px 7px; font-size: 12px; font-weight: 500;
  background: oklch(0.575 0.172 38 / 0.08); color: oklch(0.5 0.15 38);
  border: 1px solid oklch(0.575 0.172 38 / 0.25);
}
.vg-sharing .vg-rev svg { width: 13px; height: 13px; }
.vg-sharing .vg-iconlabel { display: flex; align-items: center; gap: 5px; color: var(--vg-slate); }
.vg-sharing .vg-iconlabel svg { width: 13px; height: 13px; }
.vg-sharing .vg-rec-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--vg-line);
}
.vg-sharing .vg-remove {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 500; color: var(--vg-slate);
}
.vg-sharing .vg-remove svg { width: 14px; height: 14px; }

/* The share dialog, over a scrim. */
.vg-sharing .vg-modal {
  display: flex; align-items: flex-start; justify-content: center;
  padding: 10px; background: oklch(0.268 0.027 247 / 0.32);
  opacity: 0; pointer-events: none; transition: opacity 260ms ease;
}
.vg-sharing.vg-dialog .vg-modal { opacity: 1; }
.vg-sharing .vg-dlg {
  width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--vg-line);
  border-radius: 10px; box-shadow: 0 20px 25px -5px oklch(0.268 0.027 247 / 0.2);
  transform: translateY(8px) scale(0.985); transition: transform 260ms ease;
}
.vg-sharing.vg-dialog .vg-dlg { transform: none; }
.vg-sharing .vg-dlg-head { padding: 14px 18px 12px; border-bottom: 1px solid var(--vg-line); }
.vg-sharing .vg-dlg-title {
  font-family: "Barlow Condensed", ui-sans-serif, sans-serif; font-weight: 700; font-size: 21px;
  line-height: 1.05; text-transform: uppercase; letter-spacing: -0.005em; margin-top: 3px;
}
.vg-sharing .vg-dlg-sub { font-size: 13px; color: var(--vg-slate); margin-top: 2px; }
.vg-sharing .vg-dlg-body { padding: 14px 18px 16px; }
.vg-sharing .vg-form { display: grid; gap: 11px; }
.vg-sharing .vg-form > div { min-width: 0; }
.vg-sharing .vg-flabel { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.vg-sharing .vg-req { color: var(--vg-removed); }
.vg-sharing .vg-input {
  position: relative; display: flex; align-items: center; min-width: 0;
  border: 1px solid var(--vg-line); border-radius: 8px; background: #fff;
  padding: 7px 12px; font-size: 13px; line-height: 1.35; transition: box-shadow 180ms ease, border-color 180ms ease;
}
.vg-sharing .vg-input .vg-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-sharing .vg-input .vg-chev { width: 14px; height: 14px; margin-left: 8px; color: var(--vg-slate); }
.vg-sharing .vg-focus { border-color: var(--vg-blue); box-shadow: 0 0 0 3px oklch(0.535 0.155 247 / 0.2); }
.vg-sharing.vg-typing .vg-email { border-color: var(--vg-blue); box-shadow: 0 0 0 3px oklch(0.535 0.155 247 / 0.2); }
.vg-sharing.vg-select .vg-role { border-color: var(--vg-blue); box-shadow: 0 0 0 3px oklch(0.535 0.155 247 / 0.2); }
.vg-sharing .vg-typed-wrap { display: grid; flex: 1; min-width: 0; }
.vg-sharing .vg-typed-wrap > span { grid-area: 1 / 1; overflow: hidden; white-space: nowrap; text-overflow: clip; }
.vg-sharing .vg-ghost { visibility: hidden; }
.vg-sharing .vg-placeholder { color: oklch(0.52 0.031 247 / 0.7); opacity: 0; }
.vg-sharing .vg-caret { display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -0.15em; background: var(--vg-ink); opacity: 0; }
.vg-sharing.vg-typing .vg-caret { opacity: 1; }
.vg-sharing .vg-hint { margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--vg-slate); }
.vg-sharing .vg-menu {
  position: absolute; left: -1px; right: -1px; top: calc(100% + 4px); z-index: 2;
  background: #fff; border: 1px solid var(--vg-line); border-radius: 8px; padding: 4px;
  box-shadow: 0 10px 15px -3px oklch(0.268 0.027 247 / 0.18);
  opacity: 0; transform: translateY(-4px); transition: opacity 180ms ease, transform 180ms ease;
}
.vg-sharing.vg-menu-open .vg-menu { opacity: 1; transform: none; }
.vg-sharing .vg-opt { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-radius: 5px; font-size: 13px; transition: background-color 180ms ease; }
.vg-sharing .vg-opt svg { width: 14px; height: 14px; color: var(--vg-blue); stroke-width: 2; }
.vg-sharing.vg-opt-hover .vg-opt-viewer { background: oklch(0.535 0.155 247 / 0.1); }
.vg-sharing .vg-dlg-actions {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; padding-top: 12px;
  border-top: 1px solid var(--vg-line);
}
.vg-sharing .vg-sendlbl { display: grid; }
.vg-sharing .vg-sendlbl > span { grid-area: 1 / 1; text-align: center; transition: opacity 120ms ease; }
.vg-sharing .vg-sendlbl .vg-sending { opacity: 0; }
.vg-sharing.vg-send .vg-sendlbl .vg-send-word { opacity: 0; }
.vg-sharing.vg-send .vg-sendlbl .vg-sending { opacity: 1; }
.vg-sharing.vg-send .vg-send-btn { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vg-blue); opacity: 0.75; }

.vg-sharing .vg-form-layer { opacity: 1; transition: opacity 220ms ease; }
.vg-sharing.vg-success .vg-form-layer { opacity: 0; }
.vg-sharing .vg-success-layer { align-self: start; opacity: 0; transition: opacity 260ms ease; }
.vg-sharing.vg-success .vg-success-layer { opacity: 1; }
.vg-sharing .vg-ok {
  display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 8px;
  background: oklch(0.485 0.092 164 / 0.08); border: 1px solid oklch(0.485 0.092 164 / 0.3);
}
.vg-sharing .vg-ok svg { width: 24px; height: 24px; color: var(--vg-added); }
.vg-sharing .vg-ok-title { font-weight: 600; font-size: 14px; color: var(--vg-added); overflow-wrap: anywhere; }
.vg-sharing .vg-ok-sub { font-size: 13px; color: var(--vg-slate); margin-top: 3px; }
.vg-sharing .vg-ok-note { margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--vg-slate); }
.vg-sharing .vg-ok-actions { display: flex; justify-content: flex-end; margin-top: 14px; }

.vg-sharing.vg-press-share .vg-share-btn { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vg-blue); transform: translateY(1px); }
.vg-sharing.vg-press-done .vg-done-btn { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vg-blue); transform: translateY(1px); }

@container (max-width: 400px) {
  .vg-sharing .vg-title { font-size: 26px; }
  .vg-sharing .vg-body { padding: 14px 12px; }
  .vg-sharing .vg-crumbs, .vg-sharing .vg-head, .vg-sharing .vg-sub { padding-left: 12px; padding-right: 12px; }
  .vg-sharing .vg-tabs { margin-left: 12px; margin-right: 12px; gap: 16px; }
  .vg-sharing .vg-card { padding: 12px; }
  .vg-sharing .vg-modal { padding: 6px; }
  .vg-sharing .vg-dlg-head, .vg-sharing .vg-dlg-body { padding-left: 13px; padding-right: 13px; }
  .vg-sharing .vg-actions .vg-btn-sm svg { display: none; }
  .vg-sharing .vg-actions { gap: 6px; }
  .vg-sharing.vg-accepted .vg-resend-wrap { margin-right: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-sharing *, .vg-sharing .vg-fade { transition: none !important; }
}

/*
Generated by frontend/scripts/extract-vignettes.mjs from docs/mockups/vignette-export.html.
The mockup is the design record: change the vignette there and re-run the script.
The OS dark-scheme media block is removed: the vignette follows the app's .dark class only.
*/
/* App baseline: undo Tailwind preflight inside the figure (generated, not in the mockup). */
.vg-export {
  line-height: normal;
  tab-size: 8;
  font-feature-settings: normal;
  font-variation-settings: normal;
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
  margin: revert;
}
.vg-export :where(*), .vg-export :where(*)::before, .vg-export :where(*)::after {
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
}
.vg-export :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre, fieldset) { margin: revert; }
.vg-export :where(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; }
.vg-export :where(hr) { height: revert; color: revert; border-top-width: revert; }
.vg-export :where(a) { color: revert; -webkit-text-decoration: revert; text-decoration: revert; }
.vg-export :where(b, strong) { font-weight: revert; }
.vg-export :where(code, kbd, samp, pre) { font-family: revert; font-feature-settings: revert; font-variation-settings: revert; font-size: revert; }
.vg-export :where(small) { font-size: revert; }
.vg-export :where(sub, sup) { font-size: revert; line-height: revert; position: revert; vertical-align: revert; }
.vg-export :where(table) { text-indent: revert; border-color: revert; border-collapse: revert; }
.vg-export :where(button, input, optgroup, select, textarea) {
  font-family: revert;
  font-feature-settings: revert;
  font-variation-settings: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  color: revert;
  margin: revert;
  padding: revert;
}
.vg-export :where(button, select) { text-transform: revert; }
.vg-export :where(button, input[type="button"], input[type="reset"], input[type="submit"]) {
  appearance: revert;
  background-color: revert;
  background-image: revert;
}
.vg-export :where(fieldset, legend, dialog) { padding: revert; }
.vg-export :where(ol, ul, menu) { list-style: revert; margin: revert; padding: revert; }
.vg-export :where(textarea) { resize: revert; }
.vg-export :where(input, textarea)::placeholder { opacity: revert; color: revert; }
.vg-export :where(button, [role="button"], :disabled) { cursor: revert; }
.vg-export :where(img, svg, video, canvas, audio, iframe, embed, object) { display: revert; vertical-align: revert; }
.vg-export :where(img, video) { max-width: revert; height: revert; }

.vg-export {
  --vg-ink: oklch(0.268 0.027 247);
  --vg-blue: oklch(0.535 0.155 247);
  --vg-slate: oklch(0.52 0.031 247);
  --vg-line: oklch(0.898 0.013 247);
  --vg-tint: oklch(0.966 0.006 247);
  --vg-back-bg: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-shadow: oklch(0.268 0.027 247 / 0.14);
  position: relative;
  margin: 0 12px 12px 0;
  font-family: Barlow, ui-sans-serif, system-ui, sans-serif;
  color: var(--vg-ink);
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] .vg-export, :root.dark .vg-export {
  --vg-back-bg: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-shadow: oklch(0 0 0 / 0.45);
}
.vg-export *, .vg-export *::before, .vg-export *::after { box-sizing: border-box; }
.vg-export p { margin: 0; }
.vg-export svg { display: block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vg-export .vg-mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.vg-export .vg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.vg-export .vg-eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--vg-slate);
}
.vg-export .vg-cell-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-slate);
}
.vg-export .vg-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-export .vg-ghost { visibility: hidden; }

/* Backing sheet and the paper sheet (white in both themes). */
.vg-export .vg-back {
  position: absolute; inset: 0; transform: translate(12px, 12px);
  border-radius: 8px; border: 1px solid var(--vg-back-line); background: var(--vg-back-bg);
}
.vg-export .vg-sheet {
  position: relative; overflow: hidden; border-radius: 8px;
  border: 1px solid var(--vg-line); background: #fff;
  box-shadow: 0 40px 50px -8px var(--vg-shadow), 0 20px 25px -5px var(--vg-shadow), 0 8px 10px -6px var(--vg-shadow);
  container-type: inline-size;
}
/* Every layer shares one grid cell, so the sheet is always as tall as its
   tallest layer and never changes height during the loop. */
.vg-export .vg-stack { display: grid; }
.vg-export .vg-stack > * { grid-area: 1 / 1; min-width: 0; }

.vg-export .vg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 8px; border: 1px solid transparent; padding: 8px 14px;
  font-family: Barlow, ui-sans-serif, sans-serif; font-weight: 600; font-size: 14px; line-height: 1.2;
  white-space: nowrap; transition: box-shadow 180ms ease, transform 180ms ease, opacity 180ms ease;
}
.vg-export .vg-btn-primary { background: var(--vg-ink); color: #fff; }
.vg-export .vg-btn-secondary { background: var(--vg-tint); color: var(--vg-ink); border-color: var(--vg-line); }

/* ---- The project page (ProjectRevisionViewPage, reduced) ---- */
.vg-export .vg-page { transition: opacity 320ms ease; }
.vg-export.vg-result .vg-page { opacity: 0; }
.vg-export .vg-crumbs {
  display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; white-space: nowrap;
  padding: 9px 16px; border-bottom: 1px solid var(--vg-line); font-size: 12px; color: var(--vg-slate);
}
.vg-export .vg-crumbs b { font-weight: 500; color: var(--vg-ink); }
.vg-export .vg-head {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--vg-line);
}
.vg-export .vg-title {
  margin-top: 4px; font-family: "Barlow Condensed", ui-sans-serif, sans-serif;
  font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase;
}
.vg-export .vg-trigger {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 38px;
  border-radius: 6px; background: var(--vg-tint); border: 1px solid var(--vg-line);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.vg-export .vg-trigger span { display: flex; flex-direction: column; gap: 4px; }
.vg-export .vg-trigger i { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--vg-ink); }
.vg-export.vg-press-menu .vg-trigger { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vg-blue); transform: translateY(1px); }
.vg-export .vg-menu {
  position: absolute; right: 16px; top: calc(100% - 6px); z-index: 2; width: 190px;
  background: #fff; border: 1px solid var(--vg-line); border-radius: 8px; padding: 4px;
  box-shadow: 0 10px 15px -3px oklch(0.268 0.027 247 / 0.18);
  opacity: 0; transform: translateY(-4px); transition: opacity 180ms ease, transform 180ms ease;
}
.vg-export.vg-menu-open .vg-menu { opacity: 1; transform: none; }
.vg-export .vg-mi { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 5px; font-size: 13px; transition: background-color 160ms ease; }
.vg-export .vg-mi svg { width: 16px; height: 16px; color: var(--vg-slate); }
.vg-export.vg-mi-hover .vg-mi-export { background: oklch(0.535 0.155 247 / 0.1); }
.vg-export .vg-reg { padding: 14px 16px 16px; }
.vg-export .vg-reg ul { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--vg-line); }
.vg-export .vg-reg li { padding: 7px 0; border-bottom: 1px solid var(--vg-line); font-size: 14px; }
.vg-export .vg-reg li span { display: block; }

/* ---- The export dialog (ProjectExportModal.jsx) ---- */
.vg-export .vg-modal {
  position: relative; z-index: 3;
  display: flex; align-items: stretch; justify-content: center;
  padding: 12px; background: oklch(0.268 0.027 247 / 0.32);
  opacity: 0; pointer-events: none; transition: opacity 260ms ease;
}
.vg-export.vg-dialog .vg-modal { opacity: 1; }
.vg-export .vg-dlg {
  display: flex; flex-direction: column; width: 100%; max-width: 480px; background: #fff;
  border: 1px solid var(--vg-line); border-radius: 10px;
  box-shadow: 0 20px 25px -5px oklch(0.268 0.027 247 / 0.2);
  transform: translateY(8px) scale(0.985); transition: transform 260ms ease;
}
.vg-export.vg-dialog .vg-dlg { transform: none; }
.vg-export .vg-dlg-head { padding: 14px 18px 12px; border-bottom: 1px solid var(--vg-line); }
.vg-export .vg-dlg-title {
  font-family: "Barlow Condensed", ui-sans-serif, sans-serif; font-weight: 700; font-size: 22px;
  line-height: 1.05; text-transform: uppercase; letter-spacing: -0.005em; margin-top: 3px;
}
/* The body is a fixed window onto content that scrolls, as the real dialog's does. */
.vg-export .vg-dlg-window { position: relative; flex: 1 1 auto; min-height: 250px; }
.vg-export .vg-dlg-body { position: absolute; inset: 0; overflow: hidden; }
.vg-export .vg-scroll { padding: 14px 18px 16px; will-change: transform; }
.vg-export .vg-ctx {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px;
  padding: 10px 0; border-top: 1px solid var(--vg-line); border-bottom: 1px solid var(--vg-line);
}
.vg-export .vg-ctx-val { margin-top: 3px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; }
.vg-export .vg-flabel { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.vg-export .vg-formats { list-style: none; margin: 0 0 14px; padding: 0; border-top: 1px solid var(--vg-line); border-bottom: 1px solid var(--vg-line); }
.vg-export .vg-formats li { padding: 10px 12px; border-top: 1px solid var(--vg-line); transition: opacity 200ms ease; }
.vg-export .vg-formats li:first-child { border-top: 0; }
.vg-export .vg-formats .vg-on { background: var(--vg-tint); }
.vg-export .vg-fmt { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.vg-export .vg-fmt svg { width: 20px; height: 20px; color: var(--vg-slate); }
.vg-export .vg-blurb { margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--vg-slate); }
.vg-export .vg-opt { display: flex; align-items: flex-start; gap: 8px; transition: opacity 200ms ease; }
.vg-export .vg-opt + .vg-opt { margin-top: 12px; }
.vg-export .vg-box {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; border-radius: 6px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--vg-line); display: grid; place-items: center;
}
.vg-export .vg-box svg { width: 14px; height: 14px; stroke-width: 2.6; color: var(--vg-ink); }
.vg-export .vg-opt-label { font-size: 14px; }
.vg-export .vg-opt-hint { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--vg-slate); }
.vg-export .vg-sel-head { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 6px; }
.vg-export .vg-sel-head .vg-flabel { margin: 0; }
.vg-export .vg-link { font-size: 12px; color: var(--vg-blue); }
.vg-export .vg-specs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--vg-line); border-bottom: 1px solid var(--vg-line); transition: opacity 200ms ease; }
.vg-export .vg-specs li { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-top: 1px solid var(--vg-line); }
.vg-export .vg-specs li:first-child { border-top: 0; }
.vg-export .vg-specs .vg-name { font-size: 14px; }
.vg-export .vg-specs .vg-cell-label { display: block; margin-top: 1px; letter-spacing: 0.12em; }
.vg-export .vg-count { margin-top: 8px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; color: var(--vg-slate); }
.vg-export.vg-busy .vg-formats li, .vg-export.vg-busy .vg-opt, .vg-export.vg-busy .vg-specs, .vg-export.vg-busy .vg-link { opacity: 0.5; }
.vg-export .vg-progress {
  margin-top: 14px; padding: 10px 12px; border: 1px solid var(--vg-line); border-radius: 8px;
  opacity: 0; transition: opacity 200ms ease;
}
.vg-export.vg-busy .vg-progress { opacity: 1; }
.vg-export .vg-ptext { display: grid; font-size: 14px; line-height: 1.4; }
.vg-export .vg-ptext > span { grid-area: 1 / 1; }
.vg-export .vg-bar { margin-top: 8px; height: 6px; border-radius: 999px; background: var(--vg-tint); box-shadow: inset 0 0 0 1px var(--vg-line); opacity: 0; transition: opacity 160ms ease; }
.vg-export.vg-fetching .vg-bar { opacity: 1; }
.vg-export .vg-bar > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--vg-blue); transition: width 220ms ease; }
.vg-export .vg-dlg-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--vg-line); }
.vg-export.vg-busy .vg-cancel { opacity: 0.5; }
.vg-export .vg-golbl { display: grid; }
.vg-export .vg-golbl > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: opacity 120ms ease; }
.vg-export .vg-golbl .vg-going { opacity: 0; }
.vg-export.vg-busy .vg-golbl .vg-go-word { opacity: 0; }
.vg-export.vg-busy .vg-golbl .vg-going { opacity: 1; }
.vg-export .vg-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid oklch(1 0 0 / 0.35); border-top-color: #fff; }
.vg-export.vg-busy .vg-spin { animation: vg-export-spin 800ms linear infinite; }
@keyframes vg-export-spin { to { transform: rotate(360deg); } }
.vg-export.vg-press-go .vg-go { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vg-blue); transform: translateY(1px); }
.vg-export.vg-busy .vg-go { opacity: 0.75; }

/* ---- The PDF it writes, in a reader ---- */
.vg-export .vg-reader {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; background: var(--vg-tint);
  opacity: 0; transform: translateY(6px); transition: opacity 360ms ease, transform 360ms ease;
}
.vg-export.vg-result .vg-reader { opacity: 1; transform: none; }
.vg-export .vg-rbar {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #fff;
  border-bottom: 1px solid var(--vg-line); font-size: 12px; color: var(--vg-slate);
}
.vg-export .vg-rbar svg { width: 16px; height: 16px; }
.vg-export .vg-rbar .vg-mono { flex: 1; min-width: 0; font-size: 12px; color: var(--vg-ink); }
.vg-export .vg-rbody { flex: 1; display: grid; grid-template-columns: 158px 1fr; }
.vg-export .vg-outline { padding: 12px 10px 12px 12px; border-right: 1px solid var(--vg-line); background: #fff; }
.vg-export .vg-outline-h { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.vg-export .vg-bm { display: flex; align-items: flex-start; gap: 4px; padding: 4px 4px; border-radius: 4px; font-size: 12px; line-height: 1.3; transition: background-color 160ms ease; }
.vg-export .vg-bm svg { width: 11px; height: 11px; margin-top: 2px; stroke-width: 2.4; color: var(--vg-slate); transition: transform 200ms ease; }
.vg-export .vg-bm-child { padding-left: 19px; opacity: 0; transition: opacity 260ms ease; }
.vg-export.vg-bm-hover .vg-bm-air { background: oklch(0.535 0.155 247 / 0.1); }
.vg-export.vg-bm-open .vg-bm-air svg { transform: rotate(90deg); }
.vg-export.vg-bm-open .vg-bm-child { opacity: 1; }
.vg-export .vg-pages { padding: 14px; min-width: 0; }

/* The cover page (ProjectPdfDocument CoverPage), at reading size. */
.vg-export .vg-pdf {
  position: relative; background: #fff; border: 1px solid var(--vg-line); border-radius: 2px;
  box-shadow: 0 6px 14px -6px oklch(0.268 0.027 247 / 0.25);
  padding: 16px 18px 48px; color: oklch(0.2 0.01 247);
}
.vg-export .vg-brand {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 3px 6px; border-bottom: 1px solid oklch(0.2 0.01 247);
}
.vg-export .vg-brand b { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; }
.vg-export .vg-brand span { font-size: 11px; color: var(--vg-slate); white-space: nowrap; }
/* The brand line's URL is dropped where the page is too narrow to set it on one line. */
@container (max-width: 620px) { .vg-export .vg-brand span { display: none; } }
.vg-export .vg-cover-title { margin: 26px 0 16px; text-align: center; }
.vg-export .vg-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--vg-slate); }
.vg-export .vg-cover-name { margin-top: 6px; font-size: 26px; line-height: 1.15; font-weight: 700; }
.vg-export .vg-meta { padding: 7px 0; margin-bottom: 14px; border-top: 1px solid var(--vg-line); border-bottom: 1px solid var(--vg-line); }
.vg-export .vg-meta div { display: flex; font-size: 12px; line-height: 1.5; }
.vg-export .vg-meta dt, .vg-export .vg-meta span:first-child { width: 78px; flex-shrink: 0; color: var(--vg-slate); }
.vg-export .vg-contents-h { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--vg-slate); margin-bottom: 2px; }
.vg-export .vg-sec { margin-top: 6px; font-size: 12px; font-weight: 700; line-height: 1.3; }
.vg-export .vg-item { display: flex; align-items: baseline; gap: 8px; margin-left: 10px; font-size: 12px; line-height: 1.4; }
.vg-export .vg-item span:first-child { flex: 1; min-width: 0; }
.vg-export .vg-item span:last-child { font-size: 11px; color: var(--vg-slate); white-space: nowrap; }
.vg-export .vg-pfoot {
  position: absolute; left: 18px; right: 18px; bottom: 14px; display: flex; justify-content: space-between; gap: 8px;
  padding-top: 4px; border-top: 1px solid var(--vg-line); font-size: 11px; color: var(--vg-slate);
}

@container (max-width: 460px) {
  .vg-export .vg-title { font-size: 26px; }
  .vg-export .vg-crumbs, .vg-export .vg-head, .vg-export .vg-reg { padding-left: 12px; padding-right: 12px; }
  .vg-export .vg-menu { right: 12px; }
  .vg-export .vg-modal { padding: 6px; }
  .vg-export .vg-dlg-head, .vg-export .vg-scroll, .vg-export .vg-dlg-foot { padding-left: 13px; padding-right: 13px; }
  .vg-export .vg-rbody { grid-template-columns: 1fr; }
  .vg-export .vg-pages { order: 1; padding: 10px; }
  .vg-export .vg-outline { order: 2; border-right: 0; border-top: 1px solid var(--vg-line); }
  .vg-export .vg-pdf { padding: 12px 12px 44px; }
  .vg-export .vg-pfoot { left: 12px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-export * { transition: none !important; animation: none !important; }
}

/*
Generated by frontend/scripts/extract-vignettes.mjs from docs/mockups/vignette-datasheet.html.
The mockup is the design record: change the vignette there and re-run the script.
The OS dark-scheme media block is removed: the vignette follows the app's .dark class only.
*/
/* App baseline: undo Tailwind preflight inside the figure (generated, not in the mockup). */
.vg-datasheet {
  line-height: normal;
  tab-size: 8;
  font-feature-settings: normal;
  font-variation-settings: normal;
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
  margin: revert;
}
.vg-datasheet :where(*), .vg-datasheet :where(*)::before, .vg-datasheet :where(*)::after {
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
}
.vg-datasheet :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre, fieldset) { margin: revert; }
.vg-datasheet :where(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; }
.vg-datasheet :where(hr) { height: revert; color: revert; border-top-width: revert; }
.vg-datasheet :where(a) { color: revert; -webkit-text-decoration: revert; text-decoration: revert; }
.vg-datasheet :where(b, strong) { font-weight: revert; }
.vg-datasheet :where(code, kbd, samp, pre) { font-family: revert; font-feature-settings: revert; font-variation-settings: revert; font-size: revert; }
.vg-datasheet :where(small) { font-size: revert; }
.vg-datasheet :where(sub, sup) { font-size: revert; line-height: revert; position: revert; vertical-align: revert; }
.vg-datasheet :where(table) { text-indent: revert; border-color: revert; border-collapse: revert; }
.vg-datasheet :where(button, input, optgroup, select, textarea) {
  font-family: revert;
  font-feature-settings: revert;
  font-variation-settings: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  color: revert;
  margin: revert;
  padding: revert;
}
.vg-datasheet :where(button, select) { text-transform: revert; }
.vg-datasheet :where(button, input[type="button"], input[type="reset"], input[type="submit"]) {
  appearance: revert;
  background-color: revert;
  background-image: revert;
}
.vg-datasheet :where(fieldset, legend, dialog) { padding: revert; }
.vg-datasheet :where(ol, ul, menu) { list-style: revert; margin: revert; padding: revert; }
.vg-datasheet :where(textarea) { resize: revert; }
.vg-datasheet :where(input, textarea)::placeholder { opacity: revert; color: revert; }
.vg-datasheet :where(button, [role="button"], :disabled) { cursor: revert; }
.vg-datasheet :where(img, svg, video, canvas, audio, iframe, embed, object) { display: revert; vertical-align: revert; }
.vg-datasheet :where(img, video) { max-width: revert; height: revert; }

.vg-datasheet {
  --vg-ink: oklch(0.25 0.02 247);
  --vg-heading: #000;
  --vg-muted: oklch(0.52 0.02 247);
  --vg-border: oklch(0.91 0.02 247);
  --vg-divider: oklch(0.94 0.02 247);
  --vg-input-line: oklch(0.86 0.02 247);
  --vg-secondary: oklch(0.95 0.02 247);
  --vg-tertiary: oklch(0.9 0.02 247);
  --vg-link: oklch(0.45 0.08 247);
  --vg-info: oklch(0.5 0.1 247);
  --vg-focus: oklch(0.5 0.1 247);
  --vg-error: oklch(0.5 0.1 30);
  --vg-btn: oklch(0.4 0.02 247);
  --vg-warn-bg: oklch(0.96 0.05 100);
  --vg-warn: oklch(0.52 0.1 100);
  --vg-ok-bg: oklch(0.965 0.03 160);
  --vg-ok: oklch(0.5 0.1 160);
  --vg-app: oklch(0.975 0.006 247);
  --vg-select: oklch(0.86 0.06 247);
  --vg-shadow: oklch(0.3 0.02 247 / 0.1);
  --vg-back-bg: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --vg-display: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  --vg-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 0 12px 12px 0;
  container-type: inline-size;
  color: var(--vg-ink);
  font-family: var(--vg-sans);
}

:root[data-theme="dark"] .vg-datasheet, :root.dark .vg-datasheet {
  --vg-back-bg: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-shadow: oklch(0 0 0 / 0.5);
}
.vg-datasheet *, .vg-datasheet *::before, .vg-datasheet *::after { box-sizing: border-box; }
.vg-datasheet p { margin: 0; }
.vg-datasheet svg { display: block; flex-shrink: 0; }
.vg-datasheet .vg-back {
  position: absolute; inset: 12px 0 0 12px;
  border: 1px solid var(--vg-back-line); border-radius: 8px; background: var(--vg-back-bg);
}
/* The sheet is a fixed window onto the page: its height never changes. */
.vg-datasheet .vg-sheet {
  position: relative; overflow: hidden; height: 540px;
  border: 1px solid oklch(0.898 0.013 247); border-radius: 8px; background: var(--vg-app);
  color-scheme: light;
  box-shadow: 0 40px 50px -8px var(--vg-shadow), 0 20px 25px -5px var(--vg-shadow), 0 8px 10px -6px var(--vg-shadow);
}
.vg-datasheet .vg-layer { position: absolute; inset: 0; transition: opacity 450ms ease; }
.vg-datasheet .vg-scroll { padding: 16px 16px 96px; transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
.vg-datasheet .vg-scroll > * + * { margin-top: 16px; }
/* Shared type roles */
.vg-datasheet .vg-micro { font: 400 11px/1.3 var(--vg-mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-muted); }
.vg-datasheet .vg-micro-wide { letter-spacing: 0.25em; }
.vg-datasheet .vg-h1 {
  margin-top: 6px; font: 700 clamp(26px, 6.6cqi, 36px)/1 var(--vg-display); text-transform: uppercase;
  letter-spacing: -0.025em; color: var(--vg-heading);
}
.vg-datasheet .vg-h2 { font: 700 20px/1 var(--vg-display); text-transform: uppercase; letter-spacing: -0.025em; color: var(--vg-heading); }
.vg-datasheet .vg-card {
  border: 1px solid var(--vg-border); border-radius: 8px; background: #fff;
  box-shadow: 0 1px 3px 0 var(--vg-shadow-c, oklch(0.3 0.02 247 / 0.1));
}
/* Title block */
.vg-datasheet .vg-tb-main { padding: 16px 20px; border-bottom: 1px solid var(--vg-border); }
.vg-datasheet .vg-based { margin-top: 8px; font: 400 12px/16px var(--vg-mono); color: var(--vg-muted); }
.vg-datasheet .vg-based span { color: var(--vg-ink); }
.vg-datasheet .vg-strip { padding: 12px 20px; }
.vg-datasheet .vg-indexlink { font: 400 12px/16px var(--vg-mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-link); }
/* Details card */
.vg-datasheet .vg-cardhead { padding: 16px 20px; border-bottom: 1px solid var(--vg-border); }
.vg-datasheet .vg-cardsub { margin-top: 6px; font: 400 12px/16px var(--vg-mono); color: var(--vg-muted); }
.vg-datasheet .vg-cardbody { padding: 20px; }
.vg-datasheet .vg-cardbody > * + * { margin-top: 20px; }
.vg-datasheet .vg-label { margin-bottom: 6px; font: 400 11px/1.3 var(--vg-mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-muted); }
.vg-datasheet .vg-req { color: var(--vg-error); }
.vg-datasheet .vg-help { margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--vg-muted); }
/* Drawn inputs: one line, fixed height, text overlaid on a placeholder slot. */
.vg-datasheet .vg-input {
  position: relative; display: block; width: 100%; overflow: hidden;
  border: 1px solid var(--vg-input-line); border-radius: 8px; background: #fff; color: var(--vg-ink);
  font: 400 14px/20px var(--vg-sans); white-space: nowrap; transition: box-shadow 150ms;
}
.vg-datasheet .vg-name { height: 42px; padding: 10px 12px; font-size: 16px; line-height: 20px; }
.vg-datasheet .vg-textarea { height: 92px; padding: 10px 12px; white-space: normal; }
.vg-datasheet .vg-note { height: 34px; padding: 6px 12px; }
.vg-datasheet .vg-input.is-active { border-color: transparent; box-shadow: 0 0 0 2px var(--vg-focus); }
.vg-datasheet .vg-ph { position: absolute; left: 12px; right: 12px; top: inherit; opacity: 0; color: oklch(0.52 0.02 247 / 0.6); overflow: hidden; text-overflow: ellipsis; }
.vg-datasheet .vg-name .vg-ph, .vg-datasheet .vg-textarea .vg-ph { top: 10px; }
.vg-datasheet .vg-note .vg-ph { top: 6px; color: var(--vg-muted); }
.vg-datasheet .vg-ph.is-on { opacity: 1; }
.vg-datasheet .vg-val { display: inline-flex; align-items: center; max-width: 100%; }
.vg-datasheet .vg-txt { overflow: hidden; text-overflow: clip; }
.vg-datasheet .vg-txt.is-sel { background: var(--vg-select); }
.vg-datasheet .vg-caret { display: none; width: 1px; height: 1.15em; margin-left: 1px; background: var(--vg-ink); animation: vg-ds-blink 1s steps(1) infinite; }
.vg-datasheet .is-active .vg-caret { display: inline-block; }
@keyframes vg-ds-blink { 50% { opacity: 0; } }
/* Elements card */
.vg-datasheet .vg-elhead { display: flex; align-items: stretch; justify-content: space-between; border-bottom: 1px solid var(--vg-border); }
.vg-datasheet .vg-elhead-t { display: flex; min-width: 0; align-items: center; padding: 12px 20px; }
.vg-datasheet .vg-fieldscell { flex-shrink: 0; border-left: 1px solid var(--vg-border); padding: 12px 16px; text-align: right; }
.vg-datasheet .vg-count { margin-top: 6px; font: 400 16px/1 var(--vg-mono); color: var(--vg-heading); }
.vg-datasheet .vg-gap { display: grid; gap: 5px; padding: 10px 20px; border-bottom: 1px solid var(--vg-divider); }
.vg-datasheet .vg-gap i { display: block; height: 1px; background: var(--vg-divider); }
.vg-datasheet .vg-gap i:nth-child(2) { width: 82%; }
.vg-datasheet .vg-gap i:nth-child(3) { width: 64%; }
.vg-datasheet .vg-field { padding: 16px 20px; border-bottom: 1px solid var(--vg-divider); }
.vg-datasheet .vg-field > * + * { margin-top: 12px; }
.vg-datasheet .vg-frow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vg-datasheet .vg-flabel { display: flex; min-width: 0; align-items: baseline; gap: 8px; }
.vg-datasheet .vg-addr { flex-shrink: 0; font: 400 12px/16px var(--vg-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--vg-muted); }
.vg-datasheet .vg-fname { min-width: 0; font-size: 16px; line-height: 22px; color: var(--vg-ink); }
.vg-datasheet .vg-unit { margin-left: 6px; font-family: var(--vg-mono); font-size: 15px; color: var(--vg-muted); }
.vg-datasheet .vg-chev { width: 20px; height: 20px; color: var(--vg-muted); }
.vg-datasheet .vg-ctl { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.vg-datasheet .vg-kebab { width: 20px; height: 20px; color: var(--vg-ink); }
/* Per drawings toggle: both labels share one slot so the row never reflows. */
.vg-datasheet .vg-toggle {
  display: inline-grid; justify-items: end; padding: 4px 8px; border-radius: 4px; text-align: right;
  font: 400 12px/16px var(--vg-mono); letter-spacing: 0.1em; text-transform: uppercase;
  transition: box-shadow 150ms;
}
.vg-datasheet .vg-toggle > span { grid-area: 1 / 1; }
.vg-datasheet .vg-toggle .vg-tl-a { color: var(--vg-muted); visibility: hidden; }
.vg-datasheet .vg-toggle .vg-tl-b { color: var(--vg-info); }
.vg-datasheet .vg-toggle.is-pd .vg-tl-a { visibility: visible; }
.vg-datasheet .vg-toggle.is-pd .vg-tl-b { visibility: hidden; }
.vg-datasheet .vg-toggle.is-press { box-shadow: 0 0 0 2px var(--vg-focus); }
/* Disposition pill (mono status text) */
.vg-datasheet .vg-pill {
  display: flex; max-width: 100%; align-items: baseline; gap: 6px;
  font: 400 12px/16px var(--vg-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--vg-info);
}
.vg-datasheet .vg-pill-l { flex-shrink: 0; font-weight: 500; }
.vg-datasheet .vg-pill-d { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0; color: var(--vg-muted); }
.vg-datasheet .vg-def > * + * { margin-top: 12px; }
.vg-datasheet .vg-swap { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.vg-datasheet .vg-swap > * { grid-area: 1 / 1; transition: opacity 250ms; }
.vg-datasheet .vg-field .vg-swap > .vg-def { opacity: 0; }
.vg-datasheet .vg-field.is-pd .vg-swap > .vg-def { opacity: 1; }
.vg-datasheet .vg-field.is-pd .vg-swap > .vg-range { opacity: 0; }
/* Range */
.vg-datasheet .vg-range > * + * { margin-top: 8px; }
.vg-datasheet .vg-rhead { display: flex; justify-content: space-between; font: 400 14px/20px var(--vg-mono); color: var(--vg-muted); }
.vg-datasheet .vg-rval { font-weight: 500; color: var(--vg-ink); }
.vg-datasheet .vg-runit { margin-left: 4px; font-weight: 400; color: var(--vg-muted); }
.vg-datasheet .vg-slider { display: block; width: 100%; margin: 0; pointer-events: none; }
/* Radio cards */
.vg-datasheet .vg-radios > * + * { margin-top: 8px; }
.vg-datasheet .vg-radio {
  display: flex; align-items: center; padding: 8px 16px; border-radius: 8px; background: var(--vg-tertiary);
  font-size: 14px; line-height: 20px; color: var(--vg-ink);
  box-shadow: 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1);
}
.vg-datasheet .vg-ring { flex-shrink: 0; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; border: 2px solid var(--vg-border); }
.vg-datasheet .vg-check { width: 20px; height: 20px; margin-right: 8px; color: oklch(0.26 0.02 247); }
.vg-datasheet .vg-radio.is-checked .vg-ring { display: none; }
.vg-datasheet .vg-clearrow { display: flex; justify-content: flex-end; }
.vg-datasheet .vg-clear { font: 400 11px/16px var(--vg-mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-muted); }
.vg-datasheet .vg-cardnote { padding: 12px 20px; font-size: 12px; line-height: 1.6; color: var(--vg-muted); }
/* Action bar, pinned to the window's foot */
.vg-datasheet .vg-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 12px 20px; border-top: 1px solid var(--vg-border); background: #fff;
  box-shadow: 0 -1px 3px 0 oklch(0.3 0.02 247 / 0.1);
}
.vg-datasheet .vg-bar-t { display: grid; min-width: 0; font: 400 11px/16px var(--vg-mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-muted); }
.vg-datasheet .vg-bar-t > span { grid-area: 1 / 1; }
.vg-datasheet .vg-bar-ghost { visibility: hidden; }
/* Buttons */
.vg-datasheet .vg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 16px; border-radius: 8px; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap;
  transition: box-shadow 150ms, opacity 200ms;
}
.vg-datasheet .vg-btn-primary { background: var(--vg-btn); color: #fff; }
.vg-datasheet .vg-btn-secondary { background: var(--vg-tertiary); color: var(--vg-ink); border: 1px solid var(--vg-border); padding: 7px 15px; }
.vg-datasheet .vg-btn.is-press { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vg-focus); }
.vg-datasheet .vg-btn.is-disabled { opacity: 0.5; }
/* Dialog */
.vg-datasheet .vg-dlg { display: flex; align-items: center; justify-content: center; padding: 16px; background: oklch(0 0 0 / 0.5); opacity: 0; }
.vg-datasheet .vg-panel {
  width: 100%; max-width: 448px; overflow: hidden; border-radius: 12px; background: #fff;
  box-shadow: 0 20px 25px -5px oklch(0 0 0 / 0.1), 0 8px 10px -6px oklch(0 0 0 / 0.1);
  transform: scale(0.95); transition: transform 200ms ease-out;
}
.vg-datasheet .vg-dlg.is-open { opacity: 1; }
.vg-datasheet .vg-dlg.is-open .vg-panel { transform: scale(1); }
.vg-datasheet .vg-dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--vg-border); }
.vg-datasheet .vg-dtitle { min-width: 0; font: 700 20px/28px var(--vg-display); text-transform: uppercase; letter-spacing: -0.025em; color: var(--vg-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-datasheet .vg-x { width: 24px; height: 24px; color: var(--vg-muted); }
.vg-datasheet .vg-dbody { padding: 24px; }
.vg-datasheet .vg-dbody > * + * { margin-top: 16px; }
.vg-datasheet .vg-dline { font-size: 14px; line-height: 20px; color: var(--vg-muted); }
.vg-datasheet .vg-sum { height: 80px; padding: 8px; border: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--vg-input-line); white-space: normal; }
.vg-datasheet .vg-sum.is-active { box-shadow: 0 0 0 2px var(--vg-focus); }
.vg-datasheet .vg-sum .vg-ph { left: 8px; right: 8px; top: 8px; font-style: italic; color: var(--vg-muted); }
.vg-datasheet .vg-sum .vg-val { display: inline; }
.vg-datasheet .vg-sum .vg-caret { vertical-align: text-bottom; }
.vg-datasheet .vg-rev { font: 400 12px/16px var(--vg-mono); color: var(--vg-muted); }
.vg-datasheet .vg-rev span { color: var(--vg-ink); }
.vg-datasheet .vg-statusline { min-height: 32px; font: 400 12px/16px var(--vg-mono); color: var(--vg-muted); }
.vg-datasheet .vg-dfoot { display: flex; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--vg-border); }
.vg-datasheet .vg-dfoot .vg-btn { flex: 1 1 0; }
.vg-datasheet .vg-spin { display: none; width: 16px; height: 16px; animation: vg-ds-spin 1s linear infinite; }
.vg-datasheet .vg-dc-busy { display: none; }
.vg-datasheet .is-busy .vg-spin { display: block; }
.vg-datasheet .is-busy .vg-dc-busy { display: inline; }
.vg-datasheet .is-busy .vg-dc-idle { display: none; }
@keyframes vg-ds-spin { to { transform: rotate(360deg); } }
/* Draft page */
.vg-datasheet .vg-draft { padding: 16px; opacity: 0; }
.vg-datasheet .vg-projhead { padding: 20px; border-radius: 12px; box-shadow: none; }
.vg-datasheet .vg-notice { margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--vg-border); font-size: 14px; line-height: 20px; color: var(--vg-muted); }
.vg-datasheet .vg-seclabel { display: flex; align-items: center; gap: 8px; margin-top: 24px; color: var(--vg-muted); }
.vg-datasheet .vg-seclabel svg { width: 16px; height: 16px; }
.vg-datasheet .vg-seclabel span { font: 400 11px/1.3 var(--vg-mono); letter-spacing: 0.2em; text-transform: uppercase; }
.vg-datasheet .vg-group { margin-top: 16px; overflow: hidden; border: 1px solid var(--vg-border); border-radius: 12px; background: #fff; }
.vg-datasheet .vg-grouphead { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--vg-border); }
.vg-datasheet .vg-gchev { width: 16px; height: 16px; color: var(--vg-muted); transform: rotate(90deg); }
.vg-datasheet .vg-gname { flex: 1; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--vg-heading); }
.vg-datasheet .vg-gcount { flex-shrink: 0; font: 400 11px/1 var(--vg-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--vg-muted); }
.vg-datasheet .vg-stdrow { padding: 12px 16px; }
.vg-datasheet .vg-stdname { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--vg-link); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vg-datasheet .vg-dsrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px;
  padding: 8px 12px; border: 1px solid var(--vg-border); border-radius: 8px; background: var(--vg-secondary);
  transition: opacity 400ms, transform 400ms;
}
.vg-datasheet .vg-dsname { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--vg-link); }
.vg-datasheet .vg-dsright { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.vg-datasheet .vg-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; font: 400 11px/14px var(--vg-mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.vg-datasheet .vg-tag svg { width: 12px; height: 12px; }
.vg-datasheet .vg-tag-warn { background: var(--vg-warn-bg); color: var(--vg-warn); }
.vg-datasheet .vg-tag-ok { background: var(--vg-ok-bg); color: var(--vg-ok); }
.vg-datasheet .vg-fp { font: 400 11px/1 var(--vg-mono); color: var(--vg-muted); }
.vg-datasheet .vg-rowbtn {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 6px;
  border: 1px solid var(--vg-border); background: #fff; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--vg-ink);
}
.vg-datasheet .vg-rowbtn svg { width: 14px; height: 14px; }
.vg-datasheet .vg-dsrow.is-new { opacity: 0; transform: translateY(4px); }
/* Layer visibility */
.vg-datasheet .vg-sheet.is-final .vg-form { opacity: 0; }
.vg-datasheet .vg-sheet.is-final .vg-draft { opacity: 1; }
.vg-datasheet .vg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@container (max-width: 400px) {
  .vg-datasheet .vg-scroll { padding-left: 10px; padding-right: 10px; }
  .vg-datasheet .vg-field, .vg-datasheet .vg-gap, .vg-datasheet .vg-cardnote { padding-left: 14px; padding-right: 14px; }
  .vg-datasheet .vg-tb-main, .vg-datasheet .vg-strip, .vg-datasheet .vg-cardhead, .vg-datasheet .vg-elhead-t { padding-left: 14px; padding-right: 14px; }
  .vg-datasheet .vg-cardbody { padding: 14px; }
  .vg-datasheet .vg-fieldscell { padding-left: 12px; padding-right: 12px; }
  .vg-datasheet .vg-bar { padding: 10px 14px; }
  .vg-datasheet .vg-radio { padding: 8px 12px; }
  .vg-datasheet .vg-draft { padding: 10px; }
  .vg-datasheet .vg-projhead { padding: 14px; }
  .vg-datasheet .vg-dlg { padding: 10px; }
  .vg-datasheet .vg-dhead, .vg-datasheet .vg-dfoot { padding-left: 16px; padding-right: 16px; }
  .vg-datasheet .vg-dbody { padding: 16px; }
  .vg-datasheet .vg-fp { display: none; }
  .vg-datasheet .vg-stdrow { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-datasheet *, .vg-datasheet *::before { transition: none !important; animation: none !important; }
}

/*
Generated by frontend/scripts/extract-vignettes.mjs from docs/mockups/vignette-recipient.html.
The mockup is the design record: change the vignette there and re-run the script.
The OS dark-scheme media block is removed: the vignette follows the app's .dark class only.
*/
/* App baseline: undo Tailwind preflight inside the figure (generated, not in the mockup). */
.vg-recipient {
  line-height: normal;
  tab-size: 8;
  font-feature-settings: normal;
  font-variation-settings: normal;
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
  margin: revert;
}
.vg-recipient :where(*), .vg-recipient :where(*)::before, .vg-recipient :where(*)::after {
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
}
.vg-recipient :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre, fieldset) { margin: revert; }
.vg-recipient :where(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; }
.vg-recipient :where(hr) { height: revert; color: revert; border-top-width: revert; }
.vg-recipient :where(a) { color: revert; -webkit-text-decoration: revert; text-decoration: revert; }
.vg-recipient :where(b, strong) { font-weight: revert; }
.vg-recipient :where(code, kbd, samp, pre) { font-family: revert; font-feature-settings: revert; font-variation-settings: revert; font-size: revert; }
.vg-recipient :where(small) { font-size: revert; }
.vg-recipient :where(sub, sup) { font-size: revert; line-height: revert; position: revert; vertical-align: revert; }
.vg-recipient :where(table) { text-indent: revert; border-color: revert; border-collapse: revert; }
.vg-recipient :where(button, input, optgroup, select, textarea) {
  font-family: revert;
  font-feature-settings: revert;
  font-variation-settings: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  color: revert;
  margin: revert;
  padding: revert;
}
.vg-recipient :where(button, select) { text-transform: revert; }
.vg-recipient :where(button, input[type="button"], input[type="reset"], input[type="submit"]) {
  appearance: revert;
  background-color: revert;
  background-image: revert;
}
.vg-recipient :where(fieldset, legend, dialog) { padding: revert; }
.vg-recipient :where(ol, ul, menu) { list-style: revert; margin: revert; padding: revert; }
.vg-recipient :where(textarea) { resize: revert; }
.vg-recipient :where(input, textarea)::placeholder { opacity: revert; color: revert; }
.vg-recipient :where(button, [role="button"], :disabled) { cursor: revert; }
.vg-recipient :where(img, svg, video, canvas, audio, iframe, embed, object) { display: revert; vertical-align: revert; }
.vg-recipient :where(img, video) { max-width: revert; height: revert; }

.vg-recipient {
  --vg-paper: oklch(0.986 0.002 68);
  --vg-ink: oklch(0.268 0.027 247);
  --vg-blue: oklch(0.535 0.155 247);
  --vg-slate: oklch(0.52 0.031 247);
  --vg-line: oklch(0.898 0.013 247);
  --vg-tint: oklch(0.966 0.006 247);
  --vg-back-bg: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-shadow: oklch(0.268 0.027 247 / 0.14);
  --vg-scroll: 0px;
  --vg-p0x: 0px; --vg-p0y: 0px;
  --vg-p1x: 0px; --vg-p1y: 0px;
  --vg-p2x: 0px; --vg-p2y: 0px;
  position: relative;
  margin: 0 12px 12px 0;
  font-family: Barlow, ui-sans-serif, system-ui, sans-serif;
  color: var(--vg-ink);
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] .vg-recipient, :root.dark .vg-recipient {
  --vg-back-bg: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-shadow: oklch(0 0 0 / 0.45);
}
.vg-recipient *, .vg-recipient *::before, .vg-recipient *::after { box-sizing: border-box; }
.vg-recipient p, .vg-recipient dl, .vg-recipient dd, .vg-recipient blockquote, .vg-recipient figure { margin: 0; }
.vg-recipient svg { display: block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vg-recipient .vg-mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.vg-recipient .vg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Backing sheet and the form sheet (AuthSheet: rounded-xl, white in both themes here). */
.vg-recipient .vg-back {
  position: absolute; inset: 0; transform: translate(12px, 12px);
  border-radius: 12px; border: 1px solid var(--vg-back-line); background: var(--vg-back-bg);
}
.vg-recipient .vg-sheet {
  position: relative; overflow: hidden; border-radius: 12px;
  border: 1px solid var(--vg-line); background: #fff;
  box-shadow: 0 40px 50px -8px var(--vg-shadow), 0 20px 25px -5px var(--vg-shadow), 0 8px 10px -6px var(--vg-shadow);
  container-type: inline-size;
}
/* Layers share one grid cell, so a cell is as tall as its tallest state. */
.vg-recipient .vg-stack { display: grid; }
.vg-recipient .vg-stack > * { grid-area: 1 / 1; min-width: 0; }

/* Title block: eyebrow, display title, STATUS cell. */
.vg-recipient .vg-tb { display: flex; align-items: stretch; justify-content: space-between; border-bottom: 1px solid var(--vg-line); }
.vg-recipient .vg-tb-main { min-width: 0; padding: 16px 24px; }
.vg-recipient .vg-eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px;
  letter-spacing: 0.25em; color: var(--vg-slate);
}
.vg-recipient .vg-title {
  margin-top: 4px; font-family: "Barlow Condensed", ui-sans-serif, sans-serif;
  font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -0.025em; text-transform: uppercase;
  white-space: nowrap;
}
.vg-recipient .vg-status {
  display: flex; flex-direction: column; justify-content: center; flex-shrink: 0;
  border-left: 1px solid var(--vg-line); padding: 16px 20px; text-align: right;
}
.vg-recipient .vg-status-k { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.2em; color: var(--vg-slate); }
.vg-recipient .vg-status-v { margin-top: 4px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 14px; font-weight: 500; line-height: 1; }
.vg-recipient .vg-swap > * { transition: opacity 160ms ease; }
.vg-recipient .vg-swap > *:not(:first-child) { justify-self: end; }
.vg-recipient .vg-tb-main .vg-swap > * { justify-self: start; }

/* Body: a fixed frame. The valid sheet scrolls inside it. */
.vg-recipient .vg-win { position: relative; height: 476px; overflow: hidden; }
.vg-recipient .vg-layer { padding: 24px; opacity: 0; transition: opacity 160ms ease; }
.vg-recipient .vg-valid { position: relative; transform: translateY(0); }
.vg-recipient.vg-scrolled .vg-valid { transform: translateY(calc(-1 * var(--vg-scroll))); transition: opacity 160ms ease, transform 950ms cubic-bezier(0.45, 0, 0.25, 1); }

.vg-recipient.vg-s-checking .vg-loading,
.vg-recipient.vg-s-valid .vg-valid,
.vg-recipient.vg-s-granted .vg-granted { opacity: 1; }
.vg-recipient .vg-st-checking, .vg-recipient .vg-st-valid, .vg-recipient .vg-st-granted,
.vg-recipient .vg-t-invite, .vg-recipient .vg-t-granted { opacity: 0; }
.vg-recipient.vg-s-checking .vg-st-checking,
.vg-recipient.vg-s-valid .vg-st-valid,
.vg-recipient.vg-s-granted .vg-st-granted,
.vg-recipient.vg-s-checking .vg-t-invite,
.vg-recipient.vg-s-valid .vg-t-invite,
.vg-recipient.vg-s-granted .vg-t-granted { opacity: 1; }
/* The outgoing state leaves first; the incoming one follows, so two never overlap. */
.vg-recipient.vg-s-checking .vg-loading, .vg-recipient.vg-s-valid .vg-valid, .vg-recipient.vg-s-granted .vg-granted,
.vg-recipient.vg-s-checking .vg-st-checking, .vg-recipient.vg-s-valid .vg-st-valid, .vg-recipient.vg-s-granted .vg-st-granted,
.vg-recipient.vg-s-granted .vg-t-granted { transition: opacity 260ms ease 170ms; }
.vg-recipient.vg-s-granted .vg-t-invite { transition: opacity 160ms ease; }
.vg-recipient.vg-s-valid.vg-scrolled .vg-valid { transition: opacity 260ms ease 170ms, transform 950ms cubic-bezier(0.45, 0, 0.25, 1); }

/* Loading state */
.vg-recipient .vg-loading { padding-top: 40px; text-align: center; }
.vg-recipient .vg-spin { width: 32px; height: 32px; margin: 0 auto; color: var(--vg-slate); }
.vg-recipient.vg-s-checking .vg-spin { animation: vg-recipient-spin 1s linear infinite; }
@keyframes vg-recipient-spin { to { transform: rotate(360deg); } }
.vg-recipient .vg-h2 {
  font-family: "Barlow Condensed", ui-sans-serif, sans-serif; font-weight: 700; font-size: 20px;
  line-height: 1.4; letter-spacing: -0.025em; text-transform: uppercase;
}
.vg-recipient .vg-loading .vg-h2 { margin-top: 16px; }
.vg-recipient .vg-text { font-size: 14px; line-height: 1.43; color: var(--vg-slate); }
.vg-recipient .vg-loading .vg-text { margin-top: 8px; }
.vg-recipient .vg-xs { font-size: 12px; line-height: 1.33; color: var(--vg-slate); }
.vg-recipient .vg-strong-ink { font-weight: 500; color: var(--vg-ink); overflow-wrap: anywhere; }

/* Datasheet block */
.vg-recipient .vg-block { border: 1px solid var(--vg-line); background: var(--vg-tint); border-radius: 8px; padding: 16px; }
.vg-recipient .vg-block-k {
  margin-bottom: 8px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--vg-slate);
}
.vg-recipient .vg-dl { display: grid; gap: 8px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; line-height: 1.33; }
.vg-recipient .vg-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.vg-recipient .vg-row dt { color: var(--vg-slate); flex-shrink: 0; }
.vg-recipient .vg-row dd { text-align: right; min-width: 0; }
.vg-recipient .vg-break { word-break: break-all; font-weight: 500; }
.vg-recipient .vg-msg { margin-top: 16px; border-top: 1px solid var(--vg-line); padding-top: 12px; }
.vg-recipient .vg-msg figcaption {
  margin-bottom: 4px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--vg-slate);
}
.vg-recipient .vg-msg blockquote { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; line-height: 1.5; font-style: italic; overflow-wrap: break-word; }

/* Role register */
.vg-recipient .vg-legend {
  display: block; margin-bottom: 8px; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px; line-height: 1.4; letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-slate);
}
.vg-recipient .vg-roles { border: 1px solid var(--vg-line); border-radius: 8px; }
.vg-recipient .vg-roles > * + * { border-top: 1px solid var(--vg-line); }
.vg-recipient .vg-role {
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: start;
  padding: 12px 16px; transition: background-color 180ms ease;
}
.vg-recipient .vg-role:first-child { border-radius: 7px 7px 0 0; }
.vg-recipient .vg-radio {
  grid-row: span 2; margin-top: 3px; width: 16px; height: 16px; border-radius: 999px;
  border: 1px solid oklch(0.52 0.031 247 / 0.75); background: #fff; position: relative;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.vg-recipient .vg-radio::after {
  content: ""; position: absolute; inset: 4px; border-radius: 999px; background: #fff; opacity: 0;
  transition: opacity 140ms ease;
}
.vg-recipient .vg-role-name { font-size: 14px; line-height: 1.43; font-weight: 500; }
.vg-recipient .vg-role-desc { grid-column-start: 2; font-size: 12px; line-height: 1.33; color: var(--vg-slate); }
.vg-recipient .vg-gap { height: 20px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.vg-recipient .vg-gap i { width: 3px; height: 3px; border-radius: 999px; background: var(--vg-line); }
.vg-recipient.vg-hover .vg-role-gc { background: var(--vg-tint); }
.vg-recipient.vg-picked .vg-role-gc .vg-radio { background: var(--vg-blue); border-color: var(--vg-blue); }
.vg-recipient.vg-picked .vg-role-gc .vg-radio::after { opacity: 1; }

/* Buttons (ctaPrimary / ctaSecondary) */
.vg-recipient .vg-btn {
  display: flex; width: 100%; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid transparent; padding: 11px 24px;
  font-size: 16px; line-height: 1.5; font-weight: 600; white-space: nowrap;
  transition: box-shadow 180ms ease, transform 180ms ease, opacity 180ms ease;
}
.vg-recipient .vg-primary { background: var(--vg-blue); color: #fff; box-shadow: 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1); }
.vg-recipient .vg-secondary { border-color: oklch(0.268 0.027 247 / 0.25); color: var(--vg-ink); }
.vg-recipient .vg-btn-lbl { display: grid; }
.vg-recipient .vg-btn-lbl > span { grid-area: 1 / 1; text-align: center; transition: opacity 120ms ease; }
.vg-recipient .vg-accepting { opacity: 0; }
.vg-recipient.vg-press .vg-accept { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vg-blue); transform: translateY(1px); }
.vg-recipient.vg-redeeming .vg-accept { opacity: 0.6; }
.vg-recipient.vg-redeeming .vg-accept-word { opacity: 0; }
.vg-recipient.vg-redeeming .vg-accepting { opacity: 1; }

/* Granted state */
.vg-recipient .vg-check { width: 40px; height: 40px; margin: 0 auto; color: var(--vg-blue); }

/* The pointer, positioned inside the scrolling sheet so it rides the scroll. */
.vg-recipient .vg-ptr {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 3; pointer-events: none;
  opacity: 0; transform: translate(var(--vg-p0x), var(--vg-p0y));
  transition: transform 700ms cubic-bezier(0.45, 0, 0.25, 1), opacity 220ms ease;
  filter: drop-shadow(0 1px 1.5px oklch(0 0 0 / 0.3));
}
.vg-recipient .vg-ptr svg { width: 22px; height: 22px; fill: #fff; stroke: var(--vg-ink); stroke-width: 1.4; }
.vg-recipient.vg-ptr-on .vg-ptr { opacity: 1; }
.vg-recipient.vg-ptr-gc .vg-ptr { transform: translate(var(--vg-p1x), var(--vg-p1y)); }
.vg-recipient.vg-ptr-btn .vg-ptr { transform: translate(var(--vg-p2x), var(--vg-p2y)); }
.vg-recipient.vg-ptr-down .vg-ptr svg { transform: scale(0.88); transform-origin: 4px 3px; }

@container (max-width: 420px) {
  .vg-recipient .vg-tb-main { padding: 14px 16px; }
  .vg-recipient .vg-status { padding: 14px 14px; }
  .vg-recipient .vg-eyebrow { letter-spacing: 0.18em; }
  .vg-recipient .vg-title { font-size: 22px; }
  .vg-recipient .vg-layer { padding: 18px 16px; }
  .vg-recipient .vg-win { height: 520px; }
  .vg-recipient .vg-block { padding: 14px 12px; }
  .vg-recipient .vg-role { padding: 11px 12px; }
  .vg-recipient .vg-btn { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-recipient *, .vg-recipient.vg-scrolled .vg-valid { transition: none !important; animation: none !important; }
}

/*
Generated by frontend/scripts/extract-vignettes.mjs from docs/mockups/vignette-projcompare.html.
The mockup is the design record: change the vignette there and re-run the script.
The OS dark-scheme media block is removed: the vignette follows the app's .dark class only.
*/
/* App baseline: undo Tailwind preflight inside the figure (generated, not in the mockup). */
.vg-projcompare {
  line-height: normal;
  tab-size: 8;
  font-feature-settings: normal;
  font-variation-settings: normal;
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
  margin: revert;
}
.vg-projcompare :where(*), .vg-projcompare :where(*)::before, .vg-projcompare :where(*)::after {
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
}
.vg-projcompare :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre, fieldset) { margin: revert; }
.vg-projcompare :where(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; }
.vg-projcompare :where(hr) { height: revert; color: revert; border-top-width: revert; }
.vg-projcompare :where(a) { color: revert; -webkit-text-decoration: revert; text-decoration: revert; }
.vg-projcompare :where(b, strong) { font-weight: revert; }
.vg-projcompare :where(code, kbd, samp, pre) { font-family: revert; font-feature-settings: revert; font-variation-settings: revert; font-size: revert; }
.vg-projcompare :where(small) { font-size: revert; }
.vg-projcompare :where(sub, sup) { font-size: revert; line-height: revert; position: revert; vertical-align: revert; }
.vg-projcompare :where(table) { text-indent: revert; border-color: revert; border-collapse: revert; }
.vg-projcompare :where(button, input, optgroup, select, textarea) {
  font-family: revert;
  font-feature-settings: revert;
  font-variation-settings: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  color: revert;
  margin: revert;
  padding: revert;
}
.vg-projcompare :where(button, select) { text-transform: revert; }
.vg-projcompare :where(button, input[type="button"], input[type="reset"], input[type="submit"]) {
  appearance: revert;
  background-color: revert;
  background-image: revert;
}
.vg-projcompare :where(fieldset, legend, dialog) { padding: revert; }
.vg-projcompare :where(ol, ul, menu) { list-style: revert; margin: revert; padding: revert; }
.vg-projcompare :where(textarea) { resize: revert; }
.vg-projcompare :where(input, textarea)::placeholder { opacity: revert; color: revert; }
.vg-projcompare :where(button, [role="button"], :disabled) { cursor: revert; }
.vg-projcompare :where(img, svg, video, canvas, audio, iframe, embed, object) { display: revert; vertical-align: revert; }
.vg-projcompare :where(img, video) { max-width: revert; height: revert; }

.vg-projcompare {
  /* index.css LIGHT values: the sheet is the light app in both themes */
  --vg-app: oklch(0.98 0.01 247);
  --vg-paper: oklch(1 0 0);
  --vg-secondary: oklch(0.95 0.02 247);
  --vg-tertiary: oklch(0.9 0.02 247);
  --vg-ink: oklch(0.25 0.02 247);
  --vg-heading: oklch(0 0 0);
  --vg-slate: oklch(0.52 0.02 247);
  --vg-link: oklch(0.45 0.08 247);
  --vg-line: oklch(0.91 0.02 247);
  --vg-input: oklch(0.86 0.02 247);
  --vg-divider: oklch(0.94 0.02 247);
  --vg-focus: oklch(0.5 0.1 247);
  --vg-added-text: oklch(0.46 0.125 150);
  --vg-removed-text: oklch(0.48 0.19 27);
  --vg-modified-text: oklch(0.47 0.1 68);
  --vg-ins-bg: oklch(0.88 0.085 155);
  --vg-del-bg: oklch(0.885 0.06 25);
  --vg-del-word: oklch(0.34 0.03 28);
  --vg-del-strike: oklch(0.45 0.18 28 / 0.8);
  --vg-mark-add: oklch(0.53 0.14 150);
  --vg-mark-del: oklch(0.54 0.21 27);
  --vg-mark-mod: oklch(0.82 0.16 88);
  --vg-mark-glyph: oklch(1 0 0);
  --vg-mark-glyph-mod: oklch(0.25 0.02 247);
  --vg-shadow: 0 1px 3px oklch(0.268 0.027 247 / 0.1), 0 1px 2px oklch(0.268 0.027 247 / 0.06);
  /* the backing: dark in both themes (founder 2026-10-25) */
  --vg-back: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --vg-display: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  --vg-body: Barlow, ui-sans-serif, system-ui, sans-serif;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  margin: 0;
  padding: 0 12px 12px 0;
  container-type: inline-size;
  font-family: var(--vg-body);
  color: var(--vg-ink);
}

:root[data-theme="dark"] .vg-projcompare, :root.dark .vg-projcompare { --vg-back: oklch(0.26 0.038 247); --vg-back-line: oklch(0.26 0.038 247); }

.vg-projcompare *, .vg-projcompare *::before, .vg-projcompare *::after { box-sizing: border-box; }
.vg-projcompare p, .vg-projcompare ul, .vg-projcompare ol { margin: 0; padding: 0; }
.vg-projcompare ul, .vg-projcompare ol { list-style: none; }
.vg-projcompare table { border-collapse: collapse; border-spacing: 0; }
.vg-projcompare th, .vg-projcompare td { padding: 0; }
.vg-projcompare svg { flex: none; }
.vg-projcompare .vg-back {
  position: absolute; inset: 12px 0 0 12px; border-radius: 8px;
  border: 1px solid var(--vg-back-line); background: var(--vg-back);
}
/* The window: one fixed height for the whole loop; the page scrolls inside it. */
.vg-projcompare .vg-sheet {
  position: relative; overflow: hidden; height: 860px; border-radius: 8px;
  border: 1px solid var(--vg-line); background: var(--vg-app);
  box-shadow: 0 18px 40px -18px oklch(0.268 0.027 247 / 0.35), 0 2px 6px oklch(0.268 0.027 247 / 0.08);
}
.vg-projcompare .vg-scene { position: absolute; inset: 0; overflow: hidden; background: var(--vg-app); transition: opacity 0.4s ease; }
.vg-projcompare .vg-page { padding: 16px 10px 40px; }

/* Type roles */
.vg-projcompare .vg-label { font-family: var(--vg-mono); font-size: 11px; font-weight: 500; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.15em; color: var(--vg-slate); }
.vg-projcompare .vg-eyebrow { letter-spacing: 0.22em; }
.vg-projcompare .vg-h1 { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--vg-display); font-weight: 700; font-size: 28px; line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; color: var(--vg-heading); }
.vg-projcompare .vg-h1 svg { width: 24px; height: 24px; }
.vg-projcompare .vg-proj { margin-top: 6px; font-size: 14px; color: var(--vg-slate); }
.vg-projcompare .vg-h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-family: var(--vg-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--vg-slate); }
.vg-projcompare .vg-h3 svg { width: 18px; height: 18px; }
.vg-projcompare .vg-quiet { font-size: 14px; color: var(--vg-slate); }

/* Buttons (ui/Button secondary) */
.vg-projcompare .vg-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 5px 11px; border-radius: 8px; border: 1px solid var(--vg-line);
  background: var(--vg-tertiary); color: var(--vg-ink); font: 500 14px/1.4 var(--vg-body); white-space: nowrap;
}
.vg-projcompare .vg-btn svg { width: 16px; height: 16px; }
.vg-projcompare .vg-btn.icon { padding: 5px 6px; }
.vg-projcompare .vg-btn.dis { opacity: 0.5; }
.vg-projcompare .ring { box-shadow: 0 0 0 2px var(--vg-paper), 0 0 0 4px var(--vg-focus); }

/* Cards */
.vg-projcompare .vg-card { border-radius: 12px; border: 1px solid var(--vg-line); background: var(--vg-paper); box-shadow: var(--vg-shadow); }

/* ---------- the compare page ---------- */
.vg-projcompare .vg-head { margin-bottom: 14px; }
.vg-projcompare .vg-pickers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px; margin-bottom: 14px; }
.vg-projcompare .vg-pickers .vg-label { display: block; margin-bottom: 6px; }
.vg-projcompare .vg-select {
  position: relative; display: grid; align-items: center; min-height: 36px; padding: 6px 30px 6px 9px;
  border-radius: 4px; border: 1px solid var(--vg-input); background: var(--vg-paper);
  font-size: 14px; line-height: 1.4; color: var(--vg-ink); transition: box-shadow 0.25s ease;
}
.vg-projcompare .vg-select > span { grid-area: 1 / 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.3s ease; }
.vg-projcompare .vg-select svg { position: absolute; right: 9px; top: 50%; width: 14px; height: 14px; margin-top: -7px; color: var(--vg-ink); }
.vg-projcompare .vg-rv { margin-right: 8px; font-family: var(--vg-mono); font-size: 13.5px; font-weight: 500; color: var(--vg-heading); }

.vg-projcompare .vg-loadwrap { position: relative; }
.vg-projcompare .vg-loading { position: absolute; left: 0; right: 0; top: 20px; text-align: center; font-size: 15px; color: var(--vg-slate); transition: opacity 0.3s ease; }
.vg-projcompare .vg-diff { padding: 12px; transition: opacity 0.4s ease; }
.vg-projcompare .vg-fromto { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 12px; border-radius: 8px; border: 1px solid var(--vg-line); background: var(--vg-secondary); }
.vg-projcompare .vg-fromto > div { flex: 1; text-align: center; }
.vg-projcompare .vg-fromto .vg-rc { margin-top: 4px; font-family: var(--vg-display); font-weight: 700; font-size: 20px; line-height: 1; text-transform: uppercase; color: var(--vg-heading); }
.vg-projcompare .vg-fromto .vg-arrow { flex: none; padding: 0 12px; color: var(--vg-slate); }
.vg-projcompare .vg-sec { margin-top: 18px; transition: opacity 0.4s ease; }

/* the project's change register */
.vg-projcompare .vg-register { overflow: clip; border-radius: 8px; border: 1px solid var(--vg-line); }
.vg-projcompare .vg-register > li + li { border-top: 1px solid var(--vg-divider); }
.vg-projcompare .vg-fade { transition: opacity 0.4s ease; }
.vg-projcompare .vg-crow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px; transition: opacity 0.4s ease, background-color 0.25s ease, box-shadow 0.25s ease; }
.vg-projcompare .vg-crow > div { min-width: 0; }
.vg-projcompare .vg-cname { font-size: 14px; color: var(--vg-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-projcompare .vg-cname.med { font-weight: 500; }
.vg-projcompare .vg-cname.struck { text-decoration: line-through; }
.vg-projcompare .vg-cmeta { margin-top: 2px; font-family: var(--vg-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--vg-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-projcompare .vg-cmeta.wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; letter-spacing: 0.1em; white-space: normal; }
.vg-projcompare .vg-mark { flex: none; font-family: var(--vg-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; }
.vg-projcompare .vg-mark.added { color: var(--vg-added-text); }
.vg-projcompare .vg-mark.removed { color: var(--vg-removed-text); }
.vg-projcompare .vg-mark.revised { color: var(--vg-modified-text); }
.vg-projcompare .vg-crow.exp { align-items: flex-start; }
.vg-projcompare .vg-chev { width: 16px; height: 16px; margin-top: 2px; color: var(--vg-slate); }
.vg-projcompare .hov { background: var(--vg-secondary); }
.vg-projcompare .vg-crow.ring { box-shadow: inset 0 0 0 2px var(--vg-focus); }

/* the revised standard, opened in place: its bar pins at the top of the window */
.vg-projcompare .vg-stdbar { position: relative; display: flex; align-items: center; background: var(--vg-paper); transition: box-shadow 0.3s ease; }
.vg-projcompare .vg-stdbar > .vg-crow { flex: 1; min-width: 0; }
.vg-projcompare .vg-stdbar.open { position: sticky; top: 0; z-index: 2; gap: 2px; padding-right: 6px; border-bottom: 1px solid var(--vg-divider); box-shadow: var(--vg-shadow); }
.vg-projcompare .vg-stepbtns { display: flex; align-items: center; gap: 3px; }
.vg-projcompare .vg-panel { background: var(--vg-secondary); }
.vg-projcompare .vg-panelbody { padding: 10px 8px; }
.vg-projcompare .vg-panelfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 8px 10px; border-top: 1px solid var(--vg-divider); }
.vg-projcompare .vg-plink { font-family: var(--vg-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--vg-link); }
.vg-projcompare .vg-panelfoot .vg-btn { margin-left: auto; }

/* ---------- the revision register (StandardRevisionCompare, page variant) ---------- */
.vg-projcompare .vg-rr { overflow: hidden; border-radius: 4px; border: 1px solid var(--vg-line); background: var(--vg-paper); transition: opacity 0.4s ease; }
.vg-projcompare .vg-tb { display: flex; flex-wrap: wrap; align-items: stretch; border-bottom: 1px solid var(--vg-line); }
.vg-projcompare .vg-tb-title { flex: 1 1 100%; min-width: 0; padding: 11px 12px; }
.vg-projcompare .vg-tb-h { margin-top: 6px; font-family: var(--vg-display); font-weight: 700; font-size: 20px; line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; color: var(--vg-heading); }
.vg-projcompare .vg-tb-cell { flex: 1 1 50%; min-width: 0; padding: 8px 12px 9px; border-top: 1px solid var(--vg-line); }
.vg-projcompare .vg-tb-cell + .vg-tb-cell { border-left: 1px solid var(--vg-line); }
.vg-projcompare .vg-tb-cell .vg-v { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; font-family: var(--vg-mono); font-size: 15px; color: var(--vg-heading); white-space: nowrap; }
.vg-projcompare .vg-tb-cell small { font-size: 11px; letter-spacing: 0.04em; color: var(--vg-slate); }

.vg-projcompare .vg-sum { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--vg-line); }
.vg-projcompare .vg-sum-lead { padding: 11px 12px 12px; border-bottom: 1px solid var(--vg-line); transition: opacity 0.35s ease; }
.vg-projcompare .vg-line { margin-top: 7px; font-size: 16px; line-height: 1.45; color: var(--vg-heading); }
.vg-projcompare .vg-line .vg-n { font-family: var(--vg-mono); font-size: 14.5px; font-weight: 500; }
.vg-projcompare .vg-reg { width: 100%; }
.vg-projcompare .vg-reg th { padding: 11px 12px 6px 8px; text-align: right; }
.vg-projcompare .vg-reg th:first-child { padding-left: 12px; text-align: left; }
.vg-projcompare .vg-reg tbody tr { border-top: 1px solid var(--vg-divider); transition: opacity 0.35s ease; }
.vg-projcompare .vg-reg tbody tr:first-child, .vg-projcompare .vg-reg tr.vg-tot { border-top-color: var(--vg-line); }
.vg-projcompare .vg-kind { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; column-gap: 10px; min-height: 32px; padding: 5px 8px 5px 12px; }
.vg-projcompare .vg-fig { padding: 5px 12px 5px 8px; text-align: right; font-family: var(--vg-mono); font-size: 15px; font-variant-numeric: tabular-nums; color: var(--vg-heading); }
.vg-projcompare .vg-fig.zero { color: var(--vg-slate); }
.vg-projcompare .vg-tot .vg-word { color: var(--vg-heading); }
.vg-projcompare .vg-reg tfoot td { padding: 6px 12px 10px; font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vg-slate); }

/* the mark: a solid square, its glyph drawn once as strokes (ChangeMark.jsx) */
.vg-projcompare .vg-mk {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 3px; color: var(--vg-mark-glyph);
  transition: opacity 0.35s ease;
}
.vg-projcompare .vg-mk svg { display: block; width: 14px; height: 14px; overflow: visible; }
.vg-projcompare .vg-mk.add { background: var(--vg-mark-add); }
.vg-projcompare .vg-mk.del { background: var(--vg-mark-del); }
.vg-projcompare .vg-mk.mod { background: var(--vg-mark-mod); color: var(--vg-mark-glyph-mod); box-shadow: inset 0 0 0 1.5px var(--vg-modified-text); }
.vg-projcompare .vg-mk.none { color: var(--vg-slate); box-shadow: inset 0 0 0 1px var(--vg-input); }
.vg-projcompare .vg-mk.sm { width: 16px; height: 16px; }
.vg-projcompare .vg-mk.sm svg { width: 11px; height: 11px; }

.vg-projcompare .vg-word { font-family: var(--vg-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.vg-projcompare .vg-word.add { color: var(--vg-added-text); }
.vg-projcompare .vg-word.del { color: var(--vg-removed-text); }
.vg-projcompare .vg-word.mod { color: var(--vg-modified-text); }

/* the redline (INS_CLASS / DEL_CLASS) */
.vg-projcompare ins, .vg-projcompare del {
  border-radius: 2px; padding: 0 1px; text-decoration-thickness: 1.5px;
  transition: background-color 0.45s ease, text-decoration-color 0.45s ease;
}
.vg-projcompare ins { background: var(--vg-ins-bg); color: var(--vg-heading); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--vg-added-text); }
.vg-projcompare del { background: var(--vg-del-bg); color: var(--vg-del-word); text-decoration: line-through; text-decoration-color: var(--vg-removed-text); }
.vg-projcompare ins.plain { background-color: transparent; text-decoration-color: transparent; }
.vg-projcompare del.plain { background-color: transparent; }

/* the toolbar strip */
.vg-projcompare .vg-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
  padding: 8px 12px; border-bottom: 1px solid var(--vg-line); transition: opacity 0.35s ease;
}
.vg-projcompare .vg-tools-h { flex: 1 1 100%; font-family: var(--vg-display); font-weight: 700; font-size: 16px; line-height: 1.2; text-transform: uppercase; color: var(--vg-heading); }
.vg-projcompare .vg-sw { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 2px; }
.vg-projcompare .vg-sw .vg-label { margin-right: 6px; letter-spacing: 0.18em; }
.vg-projcompare .vg-sw .vg-opt { padding: 4px 5px; font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vg-slate); white-space: nowrap; }
.vg-projcompare .vg-sw .vg-opt.on { font-weight: 600; color: var(--vg-heading); box-shadow: inset 0 -2px 0 var(--vg-heading); }
.vg-projcompare .vg-sw .vg-c { font-weight: 400; letter-spacing: 0.04em; color: var(--vg-slate); }
.vg-projcompare .vg-sw .vg-dot { font-family: var(--vg-mono); font-size: 11px; color: var(--vg-slate); opacity: 0.6; }

/* the entries */
.vg-projcompare .vg-entries { padding: 0 12px; }
.vg-projcompare .vg-e {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--vg-divider); transition: opacity 0.45s ease;
}
.vg-projcompare .vg-e:last-child { border-bottom: 0; }
.vg-projcompare .vg-mkc { padding-top: 1px; }
.vg-projcompare .vg-no { padding-top: 2px; font-family: var(--vg-mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--vg-heading); }
.vg-projcompare .vg-bd { grid-column: 1 / -1; min-width: 0; margin-top: 4px; }
.vg-projcompare .vg-tx { margin-top: 5px; font-size: 15px; line-height: 1.6; color: var(--vg-ink); }
.vg-projcompare .vg-tx.ctx { margin-top: 0; font-size: 14.5px; color: var(--vg-slate); }

/* a field change, nested under its clause */
.vg-projcompare .vg-fc {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px;
  margin-top: 10px; padding: 10px; border-radius: 3px; border: 1px solid var(--vg-line); background: var(--vg-app);
}
.vg-projcompare .vg-fc > .vg-mk { margin-top: 2px; }
.vg-projcompare .vg-fh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.vg-projcompare .vg-fname { min-width: 0; font-size: 15px; font-weight: 600; color: var(--vg-heading); }
.vg-projcompare .vg-ftype { font-family: var(--vg-mono); font-size: 11px; color: var(--vg-slate); }
.vg-projcompare .vg-fsum { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 8px; font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vg-slate); }
.vg-projcompare .vg-fsum b { font-weight: 600; transition: opacity 0.35s ease; }
.vg-projcompare .vg-fsum b.add { color: var(--vg-added-text); }
.vg-projcompare .vg-fsum b.mod { color: var(--vg-modified-text); }
.vg-projcompare .vg-opts { margin-top: 9px; border-top: 1px solid var(--vg-divider); }
.vg-projcompare .vg-o {
  display: grid; grid-template-columns: 16px 40px minmax(0, 1fr); column-gap: 8px; align-items: start;
  padding: 7px 0; border-bottom: 1px solid var(--vg-divider); font-size: 14px; line-height: 1.5;
}
.vg-projcompare .vg-o > .vg-mk { margin-top: 2px; }
.vg-projcompare .vg-bx { display: inline-flex; align-items: center; gap: 3px; padding-top: 3px; }
.vg-projcompare .vg-bx > * { transition: opacity 0.35s ease; }
.vg-projcompare .vg-dotbox {
  position: relative; display: block; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--vg-slate);
}
.vg-projcompare .vg-dotbox.on { border-color: var(--vg-heading); background: var(--vg-heading); }
.vg-projcompare .vg-dotbox.on::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px;
  border-radius: 50%; background: var(--vg-paper);
}
.vg-projcompare .vg-dotbox.old { opacity: 0.55; }
.vg-projcompare .vg-to { font-family: var(--vg-mono); font-size: 11px; line-height: 1; color: var(--vg-slate); }
.vg-projcompare .vg-ot { min-width: 0; color: var(--vg-ink); overflow-wrap: anywhere; }
.vg-projcompare .vg-dnote { display: block; margin-top: 2px; font-family: var(--vg-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vg-modified-text); transition: opacity 0.35s ease; }
.vg-projcompare .vg-key { margin-top: 8px; font-family: var(--vg-mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.06em; color: var(--vg-slate); }

@container (min-width: 440px) {
  .vg-projcompare .vg-sheet { height: 700px; }
  .vg-projcompare .vg-page { padding: 18px 18px 40px; }
  .vg-projcompare .vg-h1 { font-size: 32px; }
  .vg-projcompare .vg-h1 svg { width: 26px; height: 26px; }
  .vg-projcompare .vg-pickers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 14px; }
  .vg-projcompare .vg-diff { padding: 14px; }
  .vg-projcompare .vg-crow { padding: 11px 14px; gap: 12px; }
  .vg-projcompare .vg-stdbar.open { gap: 4px; padding-right: 8px; }
  .vg-projcompare .vg-stepbtns { gap: 4px; }
  .vg-projcompare .vg-panelbody { padding: 12px 14px; }
  .vg-projcompare .vg-panelfoot { padding: 9px 14px; gap: 4px 20px; }
}
@container (min-width: 520px) {
  .vg-projcompare .vg-tb-title { flex: 1 1 200px; padding: 12px 14px; }
  .vg-projcompare .vg-tb-cell { flex: 0 0 auto; min-width: 104px; padding: 12px 14px; border-top: 0; border-left: 1px solid var(--vg-line); }
  .vg-projcompare .vg-sum { grid-template-columns: minmax(0, 1fr) auto; }
  .vg-projcompare .vg-sum-lead { padding: 12px 14px; border-bottom: 0; border-right: 1px solid var(--vg-line); }
  .vg-projcompare .vg-tools { padding: 8px 14px; }
  .vg-projcompare .vg-tools-h { flex: 0 0 auto; }
  .vg-projcompare .vg-entries { padding: 0 14px; }
  .vg-projcompare .vg-e { grid-template-columns: 20px 48px minmax(0, 1fr); column-gap: 10px; }
  .vg-projcompare .vg-bd { grid-column: 3; grid-row: 1; margin-top: 0; }
  .vg-projcompare .vg-fc { padding: 11px 12px; column-gap: 10px; }
}

.vg-projcompare .off { opacity: 0; }
.vg-projcompare .gone { display: none !important; }
.vg-projcompare .vg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .vg-projcompare *, .vg-projcompare *::before, .vg-projcompare *::after { transition: none !important; }
}

/*
Generated by frontend/scripts/extract-vignettes.mjs from docs/mockups/vignette-publish.html.
The mockup is the design record: change the vignette there and re-run the script.
The OS dark-scheme media block is removed: the vignette follows the app's .dark class only.
*/
/* App baseline: undo Tailwind preflight inside the figure (generated, not in the mockup). */
.vg-publish {
  line-height: normal;
  tab-size: 8;
  font-feature-settings: normal;
  font-variation-settings: normal;
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
  margin: revert;
}
.vg-publish :where(*), .vg-publish :where(*)::before, .vg-publish :where(*)::after {
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
}
.vg-publish :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre, fieldset) { margin: revert; }
.vg-publish :where(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; }
.vg-publish :where(hr) { height: revert; color: revert; border-top-width: revert; }
.vg-publish :where(a) { color: revert; -webkit-text-decoration: revert; text-decoration: revert; }
.vg-publish :where(b, strong) { font-weight: revert; }
.vg-publish :where(code, kbd, samp, pre) { font-family: revert; font-feature-settings: revert; font-variation-settings: revert; font-size: revert; }
.vg-publish :where(small) { font-size: revert; }
.vg-publish :where(sub, sup) { font-size: revert; line-height: revert; position: revert; vertical-align: revert; }
.vg-publish :where(table) { text-indent: revert; border-color: revert; border-collapse: revert; }
.vg-publish :where(button, input, optgroup, select, textarea) {
  font-family: revert;
  font-feature-settings: revert;
  font-variation-settings: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  color: revert;
  margin: revert;
  padding: revert;
}
.vg-publish :where(button, select) { text-transform: revert; }
.vg-publish :where(button, input[type="button"], input[type="reset"], input[type="submit"]) {
  appearance: revert;
  background-color: revert;
  background-image: revert;
}
.vg-publish :where(fieldset, legend, dialog) { padding: revert; }
.vg-publish :where(ol, ul, menu) { list-style: revert; margin: revert; padding: revert; }
.vg-publish :where(textarea) { resize: revert; }
.vg-publish :where(input, textarea)::placeholder { opacity: revert; color: revert; }
.vg-publish :where(button, [role="button"], :disabled) { cursor: revert; }
.vg-publish :where(img, svg, video, canvas, audio, iframe, embed, object) { display: revert; vertical-align: revert; }
.vg-publish :where(img, video) { max-width: revert; height: revert; }

.vg-publish {
  /* index.css LIGHT values: the sheet is the light app in both themes */
  --vg-app: oklch(0.98 0.01 247);
  --vg-paper: oklch(1 0 0);
  --vg-primary: oklch(0.965 0.01 247);
  --vg-secondary: oklch(0.95 0.02 247);
  --vg-tertiary: oklch(0.9 0.02 247);
  --vg-ink: oklch(0.25 0.02 247);
  --vg-heading: oklch(0 0 0);
  --vg-slate: oklch(0.52 0.02 247);
  --vg-link: oklch(0.45 0.08 247);
  --vg-line: oklch(0.91 0.02 247);
  --vg-input: oklch(0.86 0.02 247);
  --vg-divider: oklch(0.94 0.02 247);
  --vg-focus: oklch(0.5 0.1 247);
  --vg-button: oklch(0.4 0.02 247);
  --vg-error: oklch(0.5 0.15 30);
  --vg-warn-bg: oklch(0.96 0.05 100);
  --vg-warn-text: oklch(0.52 0.1 100);
  --vg-ok: oklch(0.5 0.1 160);
  --vg-ok-bg: oklch(0.965 0.03 160);
  --vg-major-bg: oklch(0.88 0.055 247);
  --vg-major-text: oklch(0.4 0.1 247);
  --vg-minor-bg: oklch(0.94 0.025 247);
  --vg-minor-text: oklch(0.47 0.08 247);
  --vg-shadow: 0 1px 3px oklch(0.3 0.02 247 / 0.1), 0 1px 2px oklch(0.3 0.02 247 / 0.06);
  /* the backing: dark in both themes (founder 2026-10-25) */
  --vg-back: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --vg-display: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  --vg-body: Barlow, ui-sans-serif, system-ui, sans-serif;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  margin: 0;
  padding: 0 12px 12px 0;
  container-type: inline-size;
  font-family: var(--vg-body);
  color: var(--vg-ink);
}

:root[data-theme="dark"] .vg-publish, :root.dark .vg-publish { --vg-back: oklch(0.26 0.038 247); --vg-back-line: oklch(0.26 0.038 247); }

.vg-publish *, .vg-publish *::before, .vg-publish *::after { box-sizing: border-box; }
.vg-publish p, .vg-publish ul, .vg-publish ol { margin: 0; padding: 0; }
.vg-publish ul, .vg-publish ol { list-style: none; }
.vg-publish svg { flex: none; }
.vg-publish .vg-back {
  position: absolute; inset: 12px 0 0 12px; border-radius: 8px;
  border: 1px solid var(--vg-back-line); background: var(--vg-back);
}
/* The window: one fixed height for the whole loop; the scenes cross-fade inside it. */
.vg-publish .vg-sheet {
  position: relative; overflow: hidden; height: 720px; border-radius: 8px;
  border: 1px solid var(--vg-line); background: var(--vg-app);
  box-shadow: 0 18px 40px -18px oklch(0.268 0.027 247 / 0.35), 0 2px 6px oklch(0.268 0.027 247 / 0.08);
}
.vg-publish .vg-scene { position: absolute; inset: 0; overflow: hidden; background: var(--vg-app); transition: opacity 0.45s ease; }
.vg-publish .vg-page { padding: 14px 12px 32px; }

/* Type roles */
.vg-publish .vg-label { font-family: var(--vg-mono); font-size: 11px; font-weight: 500; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.15em; color: var(--vg-slate); }
.vg-publish .vg-eyebrow { letter-spacing: 0.22em; }
.vg-publish .vg-h1 { margin-top: 6px; font-family: var(--vg-display); font-weight: 700; font-size: 28px; line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; color: var(--vg-heading); }
.vg-publish .vg-mono { font-family: var(--vg-mono); }

/* Buttons (ui/Button: primary, secondary, ghost; sm) */
.vg-publish .vg-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 5px 11px; border-radius: 8px; border: 1px solid transparent;
  font: 500 14px/1.4 var(--vg-body); white-space: nowrap;
  transition: box-shadow 0.2s ease, opacity 0.2s ease;
}
.vg-publish .vg-btn svg { width: 16px; height: 16px; }
.vg-publish .vg-btn.pri { background: var(--vg-button); color: var(--vg-paper); }
.vg-publish .vg-btn.sec { background: var(--vg-tertiary); color: var(--vg-ink); border-color: var(--vg-line); }
.vg-publish .vg-btn.gho { background: transparent; color: var(--vg-ink); }
.vg-publish .vg-btn.md { padding: 7px 15px; }
.vg-publish .vg-btn.dim { opacity: 0.5; }
.vg-publish .ring { box-shadow: 0 0 0 2px var(--vg-paper), 0 0 0 4px var(--vg-focus); }

/* ---------- the project bar (ProjectBar) ---------- */
.vg-publish .vg-pbar { border-bottom: 1px solid var(--vg-line); }
.vg-publish .vg-pbar-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.vg-publish .vg-pbar-top > div { min-width: 0; }
.vg-publish .vg-pname { margin-top: 6px; font-family: var(--vg-display); font-weight: 700; font-size: 18px; line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; color: var(--vg-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-publish .vg-actions {
  display: inline-flex; align-items: center; gap: 4px; flex: none; margin-bottom: -2px;
  padding: 3px 9px; border-radius: 6px; border: 1px solid var(--vg-line); background: var(--vg-paper);
  font: 500 14px/1.4 var(--vg-body); color: var(--vg-heading);
}
.vg-publish .vg-actions svg { width: 16px; height: 16px; }
.vg-publish .vg-tabs { position: relative; display: flex; gap: 2px; margin-top: 12px; overflow: hidden; white-space: nowrap; }
.vg-publish .vg-tabs::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 32px; background: linear-gradient(to left, var(--vg-app), transparent); }
.vg-publish .vg-tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px 11px; font-family: var(--vg-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--vg-slate); }
.vg-publish .vg-tab:first-child { padding-left: 0; }
.vg-publish .vg-tab.cur { font-weight: 600; color: var(--vg-heading); }
.vg-publish .vg-tab.cur::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--vg-heading); }
.vg-publish .vg-tab:first-child.cur::after { left: 0; }
.vg-publish .vg-chip { display: inline-grid; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--vg-slate); }
.vg-publish .vg-chip > span { grid-area: 1 / 1; }

/* ---------- the draft page ---------- */
.vg-publish .vg-abar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 18px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--vg-line); background: var(--vg-primary);
}
.vg-publish .vg-badge {
  min-width: 0; padding: 4px 8px; border-radius: 4px; background: var(--vg-warn-bg); color: var(--vg-warn-text);
  font-family: var(--vg-mono); font-size: 11px; line-height: 1.6; letter-spacing: 0.15em; text-transform: uppercase;
}
.vg-publish .vg-abar-r { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* the change panel (StandardRevisionChangeLog) */
.vg-publish .vg-log { margin-top: 16px; overflow: hidden; border-radius: 12px; border: 1px solid var(--vg-line); background: var(--vg-primary); }
.vg-publish .vg-log-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 10px 14px; }
.vg-publish .vg-log-t { display: flex; flex: 1; min-width: 0; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--vg-heading); }
.vg-publish .vg-log-t svg { width: 16px; height: 16px; color: var(--vg-slate); }
.vg-publish .vg-cell { display: inline-flex; align-items: baseline; gap: 6px; }
.vg-publish .vg-cell b { font-family: var(--vg-mono); font-size: 12px; font-weight: 400; color: var(--vg-heading); }
.vg-publish .vg-act { border-top: 1px solid var(--vg-line); }
.vg-publish .vg-act-h { padding: 12px 14px 6px; }
.vg-publish .vg-byline { font-size: 12px; color: var(--vg-slate); }
.vg-publish .vg-why { margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--vg-ink); }
.vg-publish .vg-move { display: flex; align-items: baseline; gap: 12px; padding: 6px 14px; border-top: 1px solid var(--vg-line); }
.vg-publish .vg-move > span:first-child { flex: 1; min-width: 0; font-size: 14px; color: var(--vg-heading); }
.vg-publish .vg-move > span:last-child { flex: none; font-family: var(--vg-mono); font-size: 12px; color: var(--vg-ink); white-space: nowrap; }

/* ---------- the publish dialog (ResponsiveDialog + PublishRevisionModal) ---------- */
.vg-publish .vg-overlay {
  position: absolute; inset: 0; display: grid; padding: 12px; background: oklch(0 0 0 / 0.5);
  transition: opacity 0.3s ease;
}
.vg-publish .vg-dlg {
  align-self: center; justify-self: center; display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 100%;
  overflow: hidden; border-radius: 10px; border: 1px solid var(--vg-line); background: var(--vg-paper);
  box-shadow: 0 20px 25px -5px oklch(0 0 0 / 0.2), 0 8px 10px -6px oklch(0 0 0 / 0.1);
  transition: transform 0.3s ease;
}
.vg-publish .vg-overlay.off .vg-dlg { transform: translateY(8px) scale(0.985); }
.vg-publish .vg-dlg-h { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--vg-line); }
.vg-publish .vg-dlg-h > div { min-width: 0; }
.vg-publish .vg-dlg-t { margin-top: 4px; font-family: var(--vg-display); font-weight: 700; font-size: 20px; line-height: 1.1; text-transform: uppercase; letter-spacing: -0.01em; color: var(--vg-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-publish .vg-x { width: 22px; height: 22px; color: var(--vg-slate); }
.vg-publish .vg-dlg-b { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.vg-publish .vg-form { display: grid; gap: 16px; padding: 16px; }
.vg-publish .vg-form > * { min-width: 0; }
.vg-publish .vg-lead { font-size: 14px; line-height: 1.45; color: var(--vg-slate); }
.vg-publish .vg-info { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--vg-divider); border-bottom: 1px solid var(--vg-divider); }
.vg-publish .vg-info > div { min-width: 0; }
.vg-publish .vg-info-v { margin-top: 4px; font-family: var(--vg-mono); font-size: 14px; color: var(--vg-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-publish .vg-cmp { justify-self: start; font-family: var(--vg-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--vg-link); }
.vg-publish .vg-flabel { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 500; color: var(--vg-ink); }
.vg-publish .vg-req { color: var(--vg-error); }
.vg-publish .vg-in {
  position: relative; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--vg-line); background: var(--vg-paper);
  font-size: 14px; line-height: 20px; color: var(--vg-ink); transition: box-shadow 0.2s ease;
}
.vg-publish .vg-in.focus { box-shadow: 0 0 0 2px var(--vg-focus); }
.vg-publish .vg-in.ta { height: 104px; }
.vg-publish .vg-tw { display: grid; }
.vg-publish .vg-tw > span { grid-area: 1 / 1; min-width: 0; }
.vg-publish .vg-ph { color: var(--vg-slate); }
.vg-publish .vg-in:not(.ta) .vg-tw > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-publish .vg-caret { display: inline-block; width: 1px; height: 1.1em; margin-left: 1px; vertical-align: -0.2em; background: var(--vg-ink); opacity: 0; }
.vg-publish .vg-caret.on { opacity: 1; }
.vg-publish .vg-radios { display: grid; gap: 8px; }
.vg-publish .vg-radio { display: flex; align-items: flex-start; gap: 12px; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--vg-line); }
.vg-publish .vg-radio.on { border-color: var(--vg-focus); background: var(--vg-secondary); }
.vg-publish .vg-dot { flex: none; width: 13px; height: 13px; margin-top: 4px; border-radius: 50%; border: 1px solid var(--vg-slate); background: var(--vg-paper); }
.vg-publish .vg-radio.on .vg-dot { border: 4px solid var(--vg-focus); }
.vg-publish .vg-radio-l { display: block; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--vg-ink); }
.vg-publish .vg-radio-h { display: block; font-size: 12px; line-height: 1.4; color: var(--vg-slate); }
.vg-publish .vg-dlg-f { flex: none; display: flex; justify-content: flex-end; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--vg-line); }
.vg-publish .vg-go { display: inline-grid; }
.vg-publish .vg-go > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.vg-publish .vg-spin { width: 16px; height: 16px; animation: vg-publish-spin 0.9s linear infinite; }
@keyframes vg-publish-spin { to { transform: rotate(360deg); } }

/* ---------- the revision register (ProjectRevisionHistory, RevisionHistoryList) ---------- */
.vg-publish .vg-rhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 22px 0 18px; }
.vg-publish .vg-list { overflow: hidden; border-radius: 12px; border: 1px solid var(--vg-line); background: var(--vg-paper); box-shadow: var(--vg-shadow); }
.vg-publish .vg-list-h { display: flex; justify-content: flex-end; padding: 11px 14px; border-bottom: 1px solid var(--vg-line); }
.vg-publish .vg-list-h .vg-label { display: inline-grid; letter-spacing: 0.1em; }
.vg-publish .vg-list-h .vg-label > span { grid-area: 1 / 1; text-align: right; }
.vg-publish .vg-list > ul > li + li { border-top: 1px solid var(--vg-line); }
.vg-publish .vg-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px; transition: opacity 0.45s ease, background-color 0.45s ease; }
.vg-publish .vg-row.cur { background: var(--vg-secondary); }
.vg-publish .vg-row > div { min-width: 0; }
.vg-publish .vg-rtop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vg-publish .vg-rcode { font-family: var(--vg-display); font-weight: 700; font-size: 18px; line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; color: var(--vg-heading); }
.vg-publish .vg-sev { padding: 2px 6px; border-radius: 4px; font-family: var(--vg-mono); font-size: 11px; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.1em; }
.vg-publish .vg-sev.major { background: var(--vg-major-bg); color: var(--vg-major-text); }
.vg-publish .vg-sev.minor { background: var(--vg-minor-bg); color: var(--vg-minor-text); }
.vg-publish .vg-sev.now { background: var(--vg-ok-bg); color: var(--vg-ok); }
.vg-publish .vg-rname { margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--vg-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-publish .vg-rdesc { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--vg-slate); }
.vg-publish .vg-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-family: var(--vg-mono); font-size: 11px; color: var(--vg-slate); }
.vg-publish .vg-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.vg-publish .vg-meta svg { width: 14px; height: 14px; }
.vg-publish .vg-contrib { margin-top: 4px; font-family: var(--vg-mono); font-size: 11px; color: var(--vg-slate); }

/* ---------- the published revision (ProjectRevisionViewPage, ProjectRevisionView) ---------- */
.vg-publish .vg-mark { padding: 4px 8px; border-radius: 4px; background: var(--vg-secondary); font-family: var(--vg-mono); font-size: 11px; line-height: 1.6; letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-slate); white-space: nowrap; }
.vg-publish .vg-std { margin-top: 24px; }
.vg-publish .vg-slabel { display: flex; align-items: center; gap: 8px; color: var(--vg-slate); }
.vg-publish .vg-slabel svg { width: 16px; height: 16px; }
.vg-publish .vg-slabel .vg-label { letter-spacing: 0.2em; }
.vg-publish .vg-std .vg-log { transition: opacity 0.45s ease; }
.vg-publish .vg-act-h > p, .vg-publish .vg-move { transition: opacity 0.45s ease; }
.vg-publish .vg-row.ring { box-shadow: inset 0 0 0 2px var(--vg-focus); }

@container (min-width: 440px) {
  .vg-publish .vg-sheet { height: 660px; }
  .vg-publish .vg-page { padding: 16px 18px 32px; }
  .vg-publish .vg-h1 { font-size: 32px; }
  .vg-publish .vg-pname { font-size: 19px; }
  .vg-publish .vg-overlay { padding: 18px; }
  .vg-publish .vg-dlg-h { padding: 16px 20px; }
  .vg-publish .vg-form { padding: 18px 20px; }
  .vg-publish .vg-dlg-f { padding: 12px 20px; }
  .vg-publish .vg-dlg-t { font-size: 21px; }
  .vg-publish .vg-row { padding: 16px; }
}

.vg-publish .off { opacity: 0; }
.vg-publish .gone { display: none !important; }
.vg-publish .vg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .vg-publish *, .vg-publish *::before, .vg-publish *::after { transition: none !important; animation: none !important; }
}

/*
Generated by frontend/scripts/extract-vignettes.mjs from docs/mockups/vignette-verify.html.
The mockup is the design record: change the vignette there and re-run the script.
The OS dark-scheme media block is removed: the vignette follows the app's .dark class only.
*/
/* App baseline: undo Tailwind preflight inside the figure (generated, not in the mockup). */
.vg-verify {
  line-height: normal;
  tab-size: 8;
  font-feature-settings: normal;
  font-variation-settings: normal;
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
  margin: revert;
}
.vg-verify :where(*), .vg-verify :where(*)::before, .vg-verify :where(*)::after {
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
}
.vg-verify :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre, fieldset) { margin: revert; }
.vg-verify :where(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; }
.vg-verify :where(hr) { height: revert; color: revert; border-top-width: revert; }
.vg-verify :where(a) { color: revert; -webkit-text-decoration: revert; text-decoration: revert; }
.vg-verify :where(b, strong) { font-weight: revert; }
.vg-verify :where(code, kbd, samp, pre) { font-family: revert; font-feature-settings: revert; font-variation-settings: revert; font-size: revert; }
.vg-verify :where(small) { font-size: revert; }
.vg-verify :where(sub, sup) { font-size: revert; line-height: revert; position: revert; vertical-align: revert; }
.vg-verify :where(table) { text-indent: revert; border-color: revert; border-collapse: revert; }
.vg-verify :where(button, input, optgroup, select, textarea) {
  font-family: revert;
  font-feature-settings: revert;
  font-variation-settings: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  color: revert;
  margin: revert;
  padding: revert;
}
.vg-verify :where(button, select) { text-transform: revert; }
.vg-verify :where(button, input[type="button"], input[type="reset"], input[type="submit"]) {
  appearance: revert;
  background-color: revert;
  background-image: revert;
}
.vg-verify :where(fieldset, legend, dialog) { padding: revert; }
.vg-verify :where(ol, ul, menu) { list-style: revert; margin: revert; padding: revert; }
.vg-verify :where(textarea) { resize: revert; }
.vg-verify :where(input, textarea)::placeholder { opacity: revert; color: revert; }
.vg-verify :where(button, [role="button"], :disabled) { cursor: revert; }
.vg-verify :where(img, svg, video, canvas, audio, iframe, embed, object) { display: revert; vertical-align: revert; }
.vg-verify :where(img, video) { max-width: revert; height: revert; }

.vg-verify {
  --vg-paper: oklch(1 0 0);
  --vg-ink: oklch(0.268 0.027 247);
  --vg-blue: oklch(0.535 0.155 247);
  --vg-slate: oklch(0.52 0.031 247);
  --vg-line: oklch(0.898 0.013 247);
  --vg-tint: oklch(0.966 0.006 247);
  --vg-success: oklch(0.485 0.092 164);
  --vg-accent-line: oklch(0.535 0.155 247 / 0.35);
  --vg-accent-strong: oklch(0.535 0.155 247 / 0.7);
  --vg-back: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-shadow: oklch(0.268 0.027 247 / 0.16);
  --vg-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --vg-display: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  --vg-body: Barlow, ui-sans-serif, system-ui, sans-serif;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  margin: 0;
  padding: 0 12px 12px 0;
  font-family: var(--vg-body);
  color: var(--vg-ink);
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] .vg-verify, :root.dark .vg-verify { --vg-back: oklch(0.26 0.038 247); --vg-back-line: oklch(0.26 0.038 247); --vg-shadow: oklch(0 0 0 / 0.45); }

.vg-verify *, .vg-verify *::before, .vg-verify *::after { box-sizing: border-box; }
.vg-verify p, .vg-verify dl, .vg-verify dd, .vg-verify dt { margin: 0; padding: 0; }
.vg-verify svg { display: block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vg-verify .vg-back {
  position: absolute; inset: 12px 0 0 12px; border-radius: 8px;
  border: 1px solid var(--vg-back-line); background: var(--vg-back);
}
.vg-verify .vg-sheet {
  position: relative; overflow: hidden; border-radius: 8px;
  border: 1px solid var(--vg-line); background: var(--vg-paper);
  box-shadow: 0 30px 40px -12px var(--vg-shadow), 0 2px 6px oklch(0.268 0.027 247 / 0.08);
  container-type: inline-size;
}
/* The pages share one grid cell, so the sheet is as tall as the tallest and never
   changes height. Only opacity and transform move between them. */
.vg-verify .vg-stack { display: grid; }
.vg-verify .vg-stack > * { grid-area: 1 / 1; min-width: 0; transition: opacity 0.4s ease; }
.vg-verify .vg-mono { font-family: var(--vg-mono); }
.vg-verify .vg-label { font-family: var(--vg-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--vg-slate); }
.vg-verify .vg-display { font-family: var(--vg-display); font-weight: 700; text-transform: uppercase; line-height: 1; letter-spacing: -0.01em; }
.vg-verify .vg-eyebrow { font-family: var(--vg-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.25em; color: var(--vg-slate); }

/* ---------- The published project revision page ---------- */
.vg-verify .vg-app { padding: 14px; display: grid; gap: 14px; align-content: start; }
.vg-verify .vg-tb { border: 1px solid var(--vg-line); border-radius: 12px; padding: 16px; }
.vg-verify .vg-tb-title { margin-top: 6px; font-size: 32px; }
.vg-verify .vg-cells { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 14px; padding: 10px 0; border-top: 1px solid var(--vg-line); border-bottom: 1px solid var(--vg-line); }
.vg-verify .vg-cell-v { margin-top: 3px; font-family: var(--vg-mono); font-size: 14px; }
.vg-verify .vg-aside { margin-top: 14px; border: 1px solid var(--vg-accent-line); background: var(--vg-tint); border-radius: 8px; padding: 14px; }
.vg-verify .vg-aside-row { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; min-width: 0; }
.vg-verify .vg-aside-code { font-size: 24px; }
.vg-verify .vg-aside-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-verify .vg-issued { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-family: var(--vg-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--vg-slate); }
.vg-verify .vg-issued svg { width: 14px; height: 14px; }
.vg-verify .vg-fp { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--vg-line); }
.vg-verify .vg-fp-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.vg-verify .vg-fp-head > span { display: flex; align-items: center; gap: 6px; }
.vg-verify .vg-fp-head svg { width: 16px; height: 16px; color: var(--vg-slate); }
.vg-verify .vg-fp-code { display: block; margin-top: 4px; font-family: var(--vg-mono); font-size: 14px; color: var(--vg-ink); letter-spacing: 0.02em; }
.vg-verify .vg-fp-algo { margin-top: 4px; font-family: var(--vg-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--vg-slate); }
.vg-verify .vg-seclabel { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vg-verify .vg-seclabel > span { display: flex; align-items: center; gap: 8px; }
.vg-verify .vg-seclabel svg { width: 16px; height: 16px; color: var(--vg-slate); }
.vg-verify .vg-seclabel-t { font-family: var(--vg-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--vg-slate); }
.vg-verify .vg-rail { margin-top: 10px; border: 1px solid var(--vg-line); border-radius: 12px; padding: 16px; }
.vg-verify .vg-rail dl { display: grid; gap: 12px; font-size: 14px; }
.vg-verify .vg-rail dt { display: flex; align-items: center; gap: 6px; }
.vg-verify .vg-rail dt svg { width: 14px; height: 14px; color: var(--vg-slate); }
.vg-verify .vg-rail dd { margin-top: 2px; }
.vg-verify .vg-hash { font-family: var(--vg-mono); font-size: 12px; overflow-wrap: anywhere; word-break: break-all; }

/* ---------- The certificate check (/verify/file) ---------- */
.vg-verify .vg-chk { position: relative; padding: 18px 16px; }
.vg-verify .vg-chk-h { margin-top: 4px; font-size: 30px; }
.vg-verify .vg-chk-intro { margin-top: 10px; font-size: 14px; line-height: 1.55; }
.vg-verify .vg-drop {
  margin-top: 18px; padding: 26px 18px; border-radius: 12px; border: 1px dashed var(--vg-line);
  background: var(--vg-paper); text-align: center;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.vg-verify .vg-drop.drag { border-color: var(--vg-accent-strong); background: var(--vg-tint); }
.vg-verify .vg-drop > svg { width: 32px; height: 32px; margin: 0 auto; color: var(--vg-slate); }
.vg-verify .vg-drop-h { margin-top: 12px; font-size: 20px; }
.vg-verify .vg-drop-p { max-width: 28rem; margin: 8px auto 0; font-size: 14px; line-height: 1.55; }
.vg-verify .vg-drop-fmt { max-width: 28rem; margin: 8px auto 0; }
.vg-verify .vg-pick {
  display: inline-grid; margin-top: 18px; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--vg-line);
  background: var(--vg-tint); font-family: var(--vg-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em;
  transition: opacity 0.2s ease;
}
.vg-verify .vg-pick > span { grid-area: 1 / 1; transition: opacity 0.2s ease; }
.vg-verify .vg-pick.busy { opacity: 0.6; }
.vg-verify .vg-nothing { margin-top: 22px; }
.vg-verify .vg-nothing-p { max-width: 28rem; margin: 4px auto 0; font-size: 12px; line-height: 1.55; color: var(--vg-slate); }

/* The operating system's drag image: the file on its way into the drop zone. */
.vg-verify .vg-tile {
  position: absolute; left: 50%; top: 52%; z-index: 2;
  display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px);
  padding: 8px 12px; border-radius: 6px; border: 1px solid var(--vg-line); background: var(--vg-paper);
  box-shadow: 0 12px 24px -8px oklch(0.268 0.027 247 / 0.35);
  font-family: var(--vg-mono); font-size: 12px; white-space: nowrap;
  opacity: 0; transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, transform 1.2s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.vg-verify .vg-tile svg { width: 18px; height: 18px; color: var(--vg-slate); }
.vg-verify .vg-tile > span { overflow: hidden; text-overflow: ellipsis; }
.vg-verify .vg-tile.show { opacity: 0.96; }
.vg-verify .vg-tile.away { transform: translate(-30%, -260%); }

.vg-verify .vg-strip { margin-top: 18px; padding: 12px 16px; border: 1px solid var(--vg-line); border-radius: 12px; }
.vg-verify .vg-strip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.vg-verify .vg-strip-name { min-width: 0; font-family: var(--vg-mono); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.vg-verify .vg-again { margin-left: auto; font-family: var(--vg-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--vg-blue); }
.vg-verify .vg-strip-p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--vg-slate); }

.vg-verify .vg-att { margin-top: 14px; border: 1px solid var(--vg-line); border-radius: 12px; overflow: hidden; }
.vg-verify .vg-att-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; padding: 14px 18px; border-bottom: 1px solid var(--vg-line); }
.vg-verify .vg-att-h { margin-top: 6px; font-size: 28px; }
.vg-verify .vg-dv { margin-top: 2px; font-family: var(--vg-mono); font-size: 14px; overflow-wrap: anywhere; }
.vg-verify .vg-ok { color: var(--vg-success); }
.vg-verify .vg-att-body { padding: 14px 18px 16px; }
.vg-verify .vg-claim { display: flex; align-items: flex-start; gap: 12px; }
.vg-verify .vg-claim > svg { width: 24px; height: 24px; margin-top: 2px; color: var(--vg-success); }
.vg-verify .vg-claim-h { font-size: 17px; font-weight: 600; }
.vg-verify .vg-claim-p { margin-top: 4px; font-size: 14px; line-height: 1.55; }
.vg-verify .vg-claim-p b { font-weight: 600; }
.vg-verify .vg-dcells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--vg-line); }
.vg-verify .vg-dcells .vg-vid { font-size: 11px; word-break: break-all; }
.vg-verify .vg-bound { padding: 14px 18px; border-top: 1px solid var(--vg-line); background: var(--vg-tint); font-size: 14px; line-height: 1.55; }
.vg-verify .vg-bound b { font-weight: 600; }
.vg-verify .vg-bound-link { margin-top: 8px; font-family: var(--vg-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--vg-blue); }
/* The arrow is not in the Plex Mono subset, so it renders in a fallback font whose
   metrics can arrive late and grow the line box by a pixel. A fixed box with a
   fixed baseline keeps the line height independent of whichever font draws it. */
.vg-verify .vg-again, .vg-verify .vg-bound-link { line-height: 16px; }
.vg-verify .vg-arrow { display: inline-block; height: 14px; line-height: 14px; vertical-align: -2px; overflow: hidden; }
.vg-verify .vg-rise { transition: opacity 0.45s ease, transform 0.45s ease; }
.vg-verify .vg-rise.off { transform: translateY(6px); }

.vg-verify .off { opacity: 0; }
.vg-verify .vg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@container (max-width: 420px) {
  .vg-verify .vg-app { padding: 12px; }
  .vg-verify .vg-tb, .vg-verify .vg-rail { padding: 14px 12px; }
  .vg-verify .vg-tb-title { font-size: 28px; }
  .vg-verify .vg-chk { padding: 16px 12px; }
  .vg-verify .vg-chk-h { font-size: 26px; }
  .vg-verify .vg-drop { padding: 22px 12px; }
  .vg-verify .vg-strip { padding: 12px; }
  .vg-verify .vg-again { margin-left: 0; }
  .vg-verify .vg-att-head, .vg-verify .vg-att-body, .vg-verify .vg-bound { padding-left: 12px; padding-right: 12px; }
  .vg-verify .vg-att-h { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-verify *, .vg-verify *::before, .vg-verify *::after { transition: none !important; }
}

/*
Generated by frontend/scripts/extract-vignettes.mjs from docs/mockups/vignette-parameter.html.
The mockup is the design record: change the vignette there and re-run the script.
The OS dark-scheme media block is removed: the vignette follows the app's .dark class only.
*/
/* App baseline: undo Tailwind preflight inside the figure (generated, not in the mockup). */
.vg-parameter {
  line-height: normal;
  tab-size: 8;
  font-feature-settings: normal;
  font-variation-settings: normal;
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
  margin: revert;
}
.vg-parameter :where(*), .vg-parameter :where(*)::before, .vg-parameter :where(*)::after {
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
}
.vg-parameter :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre, fieldset) { margin: revert; }
.vg-parameter :where(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; }
.vg-parameter :where(hr) { height: revert; color: revert; border-top-width: revert; }
.vg-parameter :where(a) { color: revert; -webkit-text-decoration: revert; text-decoration: revert; }
.vg-parameter :where(b, strong) { font-weight: revert; }
.vg-parameter :where(code, kbd, samp, pre) { font-family: revert; font-feature-settings: revert; font-variation-settings: revert; font-size: revert; }
.vg-parameter :where(small) { font-size: revert; }
.vg-parameter :where(sub, sup) { font-size: revert; line-height: revert; position: revert; vertical-align: revert; }
.vg-parameter :where(table) { text-indent: revert; border-color: revert; border-collapse: revert; }
.vg-parameter :where(button, input, optgroup, select, textarea) {
  font-family: revert;
  font-feature-settings: revert;
  font-variation-settings: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  color: revert;
  margin: revert;
  padding: revert;
}
.vg-parameter :where(button, select) { text-transform: revert; }
.vg-parameter :where(button, input[type="button"], input[type="reset"], input[type="submit"]) {
  appearance: revert;
  background-color: revert;
  background-image: revert;
}
.vg-parameter :where(fieldset, legend, dialog) { padding: revert; }
.vg-parameter :where(ol, ul, menu) { list-style: revert; margin: revert; padding: revert; }
.vg-parameter :where(textarea) { resize: revert; }
.vg-parameter :where(input, textarea)::placeholder { opacity: revert; color: revert; }
.vg-parameter :where(button, [role="button"], :disabled) { cursor: revert; }
.vg-parameter :where(img, svg, video, canvas, audio, iframe, embed, object) { display: revert; vertical-align: revert; }
.vg-parameter :where(img, video) { max-width: revert; height: revert; }

.vg-parameter {
  /* App light-theme values (frontend/src/index.css), drawn on a paper-white sheet in both themes */
  --vg-text: oklch(0.25 0.02 247);
  --vg-heading: #000;
  --vg-muted: oklch(0.52 0.02 247);
  --vg-link: oklch(0.45 0.08 247);
  --vg-border: oklch(0.91 0.02 247);
  --vg-divider: oklch(0.94 0.02 247);
  --vg-input-line: oklch(0.86 0.02 247);
  --vg-focus: oklch(0.5 0.1 247);
  --vg-tertiary: oklch(0.9 0.02 247);
  --vg-btn-primary: oklch(0.4 0.02 247);
  --vg-warn-text: oklch(0.52 0.1 100);
  --vg-warn-bg: oklch(0.96 0.05 100);
  --vg-warn-line: oklch(0.95 0.08 100);
  --vg-shadow: oklch(0.3 0.02 247 / 0.1);
  /* Marketing frame (draft-* palette) */
  --vg-back-bg: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-frame-shadow: oklch(0.3 0.02 247 / 0.1);
  --vg-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --vg-display: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  --vg-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 0 12px 12px 0;
  container-type: inline-size;
  color: var(--vg-text);
  font-family: var(--vg-sans);
}

:root[data-theme="dark"] .vg-parameter, :root.dark .vg-parameter {
  --vg-back-bg: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-frame-shadow: oklch(0 0 0 / 0.5);
}
.vg-parameter *, .vg-parameter *::before, .vg-parameter *::after { box-sizing: border-box; }
.vg-parameter p { margin: 0; }
.vg-parameter ul { list-style: none; margin: 0; padding: 0; }
.vg-parameter svg { display: block; flex-shrink: 0; }
.vg-parameter .vg-back {
  position: absolute; inset: 12px 0 0 12px;
  border: 1px solid var(--vg-back-line); border-radius: 8px; background: var(--vg-back-bg);
}
.vg-parameter .vg-sheet {
  position: relative; overflow: hidden;
  border: 1px solid var(--vg-border); border-radius: 8px; background: #fff;
  padding: 20px;
  box-shadow: 0 40px 50px -8px var(--vg-frame-shadow), 0 20px 25px -5px var(--vg-frame-shadow), 0 8px 10px -6px var(--vg-frame-shadow);
}
/* Buttons (components/ui/Button.jsx) */
.vg-parameter .vg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px; border: 1px solid transparent;
  font: 500 14px/20px var(--vg-sans); white-space: nowrap;
  transition: box-shadow 150ms, transform 150ms, background-color 200ms;
}
.vg-parameter .vg-btn-secondary { background: var(--vg-tertiary); border-color: var(--vg-border); color: var(--vg-text); }
.vg-parameter .vg-btn-primary { background: var(--vg-btn-primary); color: #fff; }
.vg-parameter .vg-btn-ghost { background: transparent; color: var(--vg-text); }
.vg-parameter .vg-i5 { width: 20px; height: 20px; }
.vg-parameter .vg-i4 { width: 16px; height: 16px; }
.vg-parameter .is-press { box-shadow: 0 0 0 2px var(--vg-focus); transform: translateY(1px); }
/* Page header */
.vg-parameter .vg-pagehead { margin-bottom: 20px; }
.vg-parameter .vg-backbtn { margin-bottom: 16px; }
.vg-parameter .vg-eyebrow {
  font: 400 11px/1.4 var(--vg-mono); letter-spacing: 0.25em; text-transform: uppercase; color: var(--vg-muted);
}
.vg-parameter .vg-h1 {
  margin-top: 6px; font: 700 clamp(28px, 8cqi, 36px)/1 var(--vg-display); text-transform: uppercase;
  letter-spacing: -0.025em; color: var(--vg-heading);
}
.vg-parameter .vg-lead { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--vg-muted); }
/* Title block */
.vg-parameter .vg-tb {
  display: flex; flex-wrap: wrap; align-items: flex-start; margin-bottom: 20px;
  border: 1px solid var(--vg-border); border-radius: 12px; background: #fff; padding: 12px 20px;
  box-shadow: 0 1px 3px 0 var(--vg-shadow), 0 1px 2px -1px var(--vg-shadow);
}
.vg-parameter .vg-dc { padding: 8px 16px; }
.vg-parameter .vg-dc + .vg-dc { border-left: 1px solid var(--vg-divider); }
.vg-parameter .vg-dc:first-child { padding-left: 0; }
.vg-parameter .vg-dc:last-child { padding-right: 0; }
.vg-parameter .vg-label {
  display: block; font: 400 11px/1.3 var(--vg-mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-muted);
}
.vg-parameter .vg-dv {
  display: block; margin-top: 4px; font: 400 18px/1 var(--vg-mono); color: var(--vg-heading); transition: color 200ms;
}
.vg-parameter .vg-dv.vg-warn { color: var(--vg-warn-text); }
.vg-parameter .vg-dv.is-tick { animation: vg-param-tick 600ms ease-out; }
@keyframes vg-param-tick { 0% { opacity: 0.2; } 100% { opacity: 1; } }
/* Register */
.vg-parameter .vg-card {
  overflow: hidden; border: 1px solid var(--vg-border); border-radius: 12px; background: #fff;
  box-shadow: 0 1px 3px 0 var(--vg-shadow), 0 1px 2px -1px var(--vg-shadow);
}
.vg-parameter .vg-list { position: relative; overflow: hidden; }
.vg-parameter .vg-row {
  padding: 16px 20px; border-left: 2px solid transparent;
  transition: background-color 250ms, border-color 250ms, opacity 350ms;
}
.vg-parameter .vg-row + .vg-row { border-top: 1px solid var(--vg-border); }
.vg-parameter .vg-row.is-open { border-left-color: var(--vg-warn-line); background: var(--vg-warn-bg); }
.vg-parameter .vg-row.is-under { opacity: 0; }
.vg-parameter .vg-rowmain { display: flex; flex-direction: column; gap: 12px; }
.vg-parameter .vg-left { min-width: 0; }
.vg-parameter .vg-name {
  font: 400 14px/20px var(--vg-mono); color: var(--vg-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vg-parameter .vg-nodesc { margin-top: 4px; font-size: 14px; line-height: 20px; font-style: italic; color: var(--vg-muted); }
.vg-parameter .vg-asserted { margin-top: 8px; }
.vg-parameter .vg-stds { margin-top: 4px; display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 4px; }
.vg-parameter .vg-stds li { min-width: 0; font: 400 12px/16px var(--vg-mono); color: var(--vg-link); }
.vg-parameter .vg-right { flex-shrink: 0; }
.vg-parameter .vg-ans { margin-top: 4px; font: 400 14px/20px var(--vg-mono); color: var(--vg-text); }
.vg-parameter .vg-ans.vg-tbd { text-transform: uppercase; letter-spacing: 0.15em; color: var(--vg-warn-text); }
.vg-parameter .vg-right .vg-btn { margin-top: 8px; }
/* Inline answer form: closed unless editing */
.vg-parameter .vg-form { display: none; margin-top: 16px; }
.vg-parameter .vg-row.is-editing .vg-form { display: block; }
.vg-parameter .vg-row.is-editing [data-vg="alt-btn"] { display: none; }
.vg-parameter .vg-fields { display: grid; grid-template-columns: 1fr; gap: 12px; }
.vg-parameter .vg-input {
  display: block; width: 100%; margin: 4px 0 0; padding: 8px 12px;
  border: 1px solid var(--vg-input-line); border-radius: 8px; background: #fff; color: var(--vg-text);
  font: 400 14px/20px var(--vg-sans); outline: none; pointer-events: none; transition: box-shadow 150ms, border-color 150ms;
}
.vg-parameter .vg-input.is-active { box-shadow: 0 0 0 2px var(--vg-focus); border-color: transparent; }
.vg-parameter .vg-actions { margin-top: 12px; display: flex; justify-content: flex-end; gap: 8px; }
/* Measuring the closed list: form shut, button shown */
.vg-parameter.is-measuring .vg-form { display: none !important; }
.vg-parameter.is-measuring [data-vg="alt-btn"] { display: inline-flex !important; }
.vg-parameter.is-measuring .vg-mk .vg-mk-open { display: inline !important; }
.vg-parameter.is-measuring .vg-mk .vg-mk-ans { display: none !important; }
/* Standard page card over the lower register rows */
.vg-parameter .vg-std {
  position: absolute; left: 20px; right: 20px; top: 60%; bottom: 20px; overflow: hidden;
  border: 1px solid var(--vg-border); border-radius: 8px; background: #fff;
  box-shadow: 0 -10px 30px -6px var(--vg-shadow), 0 8px 24px -6px oklch(0.3 0.02 247 / 0.16);
  opacity: 0; transform: translateY(16px);
  transition: opacity 450ms ease-out, transform 450ms ease-out;
}
.vg-parameter .vg-std.is-shown { opacity: 1; transform: none; }
.vg-parameter .vg-std-tb { padding: 12px 20px 10px; border-bottom: 1px solid var(--vg-border); }
.vg-parameter .vg-std-title {
  margin-top: 6px; font: 700 clamp(22px, 5cqi, 24px)/1 var(--vg-display); text-transform: uppercase;
  letter-spacing: -0.025em; color: var(--vg-heading);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vg-parameter .vg-std-body { padding: 0 20px 10px; }
/* Hanging gutter addresses (layoutPrimitives.jsx, sm: values) */
.vg-parameter .vg-gut {
  display: inline-block; white-space: nowrap; font: 400 14px/1 var(--vg-mono);
  font-variant-numeric: tabular-nums; color: var(--vg-muted); font-weight: 400;
}
.vg-parameter .vg-part { margin: 12px 0 6px 20px; font-weight: 600; color: var(--vg-heading); }
.vg-parameter .vg-gut1 { width: 32px; margin-left: -32px; }
.vg-parameter .vg-part-t { font: 700 18px/1.3 var(--vg-display); text-transform: uppercase; letter-spacing: -0.025em; }
.vg-parameter .vg-sec { margin: 8px 0 4px 40px; font: 600 15px/1.4 var(--vg-sans); color: var(--vg-heading); }
.vg-parameter .vg-gut2 { width: 46.4px; margin-left: -46.4px; }
.vg-parameter .vg-clause { margin: 4px 0 0 60px; font-size: 15px; line-height: 1.625; color: var(--vg-text); }
.vg-parameter .vg-gut3 { width: 60.8px; margin-left: -60.8px; }
/* Parameter marker (ParameterMarker.jsx) */
.vg-parameter .vg-mk { border-bottom: 1px dashed; transition: color 300ms, border-color 300ms, background-color 600ms; }
.vg-parameter .vg-mk-open { color: var(--vg-warn-text); }
.vg-parameter .vg-mk { color: var(--vg-warn-text); border-color: var(--vg-warn-line); }
.vg-parameter .vg-mk-tbd { margin-left: 4px; font: 400 0.85em var(--vg-mono); text-transform: uppercase; letter-spacing: 0.1em; }
.vg-parameter .vg-mk-ans { display: none; }
.vg-parameter .vg-mk.is-answered { color: var(--vg-link); border-color: var(--vg-link); }
.vg-parameter .vg-mk.is-answered .vg-mk-open { display: none; }
.vg-parameter .vg-mk.is-answered .vg-mk-ans { display: inline; }
.vg-parameter .vg-mk.is-flash { background-color: oklch(0.45 0.08 247 / 0.12); }
/* Pointer */
.vg-parameter .vg-pointer {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0;
  transition: transform 700ms cubic-bezier(0.45, 0, 0.2, 1), opacity 250ms;
  filter: drop-shadow(0 1px 1px oklch(0 0 0 / 0.25));
}
.vg-parameter .vg-pointer.is-shown { opacity: 1; }
.vg-parameter .vg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@container (min-width: 440px) {
  .vg-parameter .vg-fields { grid-template-columns: 1fr 1fr; }
}
@container (min-width: 480px) {
  .vg-parameter .vg-rowmain { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .vg-parameter .vg-left { flex: 1; }
  .vg-parameter .vg-right { width: 150px; }
}
@container (max-width: 400px) {
  .vg-parameter .vg-sheet { padding: 14px 12px; }
  .vg-parameter .vg-row { padding: 14px 14px; }
  .vg-parameter .vg-tb { padding: 10px 14px; }
  .vg-parameter .vg-dc { padding: 6px 10px; }
  .vg-parameter .vg-std { left: 12px; right: 12px; bottom: 14px; }
  .vg-parameter .vg-std-tb { padding: 12px 14px 10px; }
  .vg-parameter .vg-std-body { padding: 2px 14px 14px 24px; }
  .vg-parameter .vg-std-title { white-space: normal; }
  /* Phone gutter values (layoutPrimitives.jsx base) */
  .vg-parameter .vg-gut { font-size: 12px; }
  .vg-parameter .vg-part { margin-left: 12px; }
  .vg-parameter .vg-gut1 { width: 23.2px; margin-left: -23.2px; }
  .vg-parameter .vg-sec { margin-left: 20px; }
  .vg-parameter .vg-gut2 { width: 33.6px; margin-left: -33.6px; }
  .vg-parameter .vg-clause { margin-left: 28px; font-size: 14px; }
  .vg-parameter .vg-gut3 { width: 44px; margin-left: -44px; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-parameter * { transition: none !important; animation: none !important; }
}

/*
Generated by frontend/scripts/extract-vignettes.mjs from docs/mockups/vignette-checklist.html.
The mockup is the design record: change the vignette there and re-run the script.
The OS dark-scheme media block is removed: the vignette follows the app's .dark class only.
*/
/* App baseline: undo Tailwind preflight inside the figure (generated, not in the mockup). */
.vg-checklist {
  line-height: normal;
  tab-size: 8;
  font-feature-settings: normal;
  font-variation-settings: normal;
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
  margin: revert;
}
.vg-checklist :where(*), .vg-checklist :where(*)::before, .vg-checklist :where(*)::after {
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
}
.vg-checklist :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre, fieldset) { margin: revert; }
.vg-checklist :where(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; }
.vg-checklist :where(hr) { height: revert; color: revert; border-top-width: revert; }
.vg-checklist :where(a) { color: revert; -webkit-text-decoration: revert; text-decoration: revert; }
.vg-checklist :where(b, strong) { font-weight: revert; }
.vg-checklist :where(code, kbd, samp, pre) { font-family: revert; font-feature-settings: revert; font-variation-settings: revert; font-size: revert; }
.vg-checklist :where(small) { font-size: revert; }
.vg-checklist :where(sub, sup) { font-size: revert; line-height: revert; position: revert; vertical-align: revert; }
.vg-checklist :where(table) { text-indent: revert; border-color: revert; border-collapse: revert; }
.vg-checklist :where(button, input, optgroup, select, textarea) {
  font-family: revert;
  font-feature-settings: revert;
  font-variation-settings: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  color: revert;
  margin: revert;
  padding: revert;
}
.vg-checklist :where(button, select) { text-transform: revert; }
.vg-checklist :where(button, input[type="button"], input[type="reset"], input[type="submit"]) {
  appearance: revert;
  background-color: revert;
  background-image: revert;
}
.vg-checklist :where(fieldset, legend, dialog) { padding: revert; }
.vg-checklist :where(ol, ul, menu) { list-style: revert; margin: revert; padding: revert; }
.vg-checklist :where(textarea) { resize: revert; }
.vg-checklist :where(input, textarea)::placeholder { opacity: revert; color: revert; }
.vg-checklist :where(button, [role="button"], :disabled) { cursor: revert; }
.vg-checklist :where(img, svg, video, canvas, audio, iframe, embed, object) { display: revert; vertical-align: revert; }
.vg-checklist :where(img, video) { max-width: revert; height: revert; }

.vg-checklist {
  --vg-ink: oklch(0.268 0.027 247);
  --vg-slate: oklch(0.52 0.031 247);
  --vg-line: oklch(0.898 0.013 247);
  --vg-divider: oklch(0.94 0.02 247);
  --vg-tint: oklch(0.966 0.006 247);
  --vg-blue: oklch(0.535 0.155 247);
  --vg-input-line: oklch(0.86 0.02 247);
  --vg-focus: oklch(0.5 0.1 247);
  --vg-warn: oklch(0.5 0.1 100);
  --vg-ok: oklch(0.5 0.1 160);
  --vg-shadow: oklch(0.3 0.02 247 / 0.1);
  --vg-back-bg: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --vg-display: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  --vg-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 0 12px 12px 0;
  container-type: inline-size;
  color: var(--vg-ink);
  font-family: var(--vg-sans);
}

:root[data-theme="dark"] .vg-checklist, :root.dark .vg-checklist {
  --vg-back-bg: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-shadow: oklch(0 0 0 / 0.5);
}
.vg-checklist *, .vg-checklist *::before, .vg-checklist *::after { box-sizing: border-box; }
.vg-checklist p { margin: 0; }
.vg-checklist svg { display: block; flex-shrink: 0; }
.vg-checklist .vg-back {
  position: absolute; inset: 12px 0 0 12px;
  border: 1px solid var(--vg-back-line); border-radius: 8px; background: var(--vg-back-bg);
}
.vg-checklist .vg-sheet {
  position: relative; overflow: hidden;
  border: 1px solid var(--vg-line); border-radius: 8px; background: #fff;
  padding: 20px;
  box-shadow: 0 40px 50px -8px var(--vg-shadow), 0 20px 25px -5px var(--vg-shadow), 0 8px 10px -6px var(--vg-shadow);
}
/* Page header */
.vg-checklist .vg-pagehead { margin-bottom: 18px; }
.vg-checklist .vg-eyebrow {
  font: 400 11px/1.4 var(--vg-mono); letter-spacing: 0.25em; text-transform: uppercase; color: var(--vg-slate);
}
.vg-checklist .vg-h1 {
  margin-top: 6px; display: flex; align-items: center; gap: 8px;
  font: 700 clamp(26px, 7.5cqi, 36px)/1 var(--vg-display); text-transform: uppercase; letter-spacing: -0.025em; color: #000;
}
.vg-checklist .vg-h1-icon { width: 0.9em; height: 0.9em; }
.vg-checklist .vg-project {
  margin-top: 8px; font: 400 11px/1.4 var(--vg-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--vg-slate);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Card */
.vg-checklist .vg-card {
  border: 1px solid var(--vg-line); border-radius: 12px; background: #fff;
  box-shadow: 0 1px 3px 0 oklch(0.3 0.02 247 / 0.1), 0 1px 2px -1px oklch(0.3 0.02 247 / 0.1);
}
.vg-checklist .vg-tb {
  display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between;
  border-bottom: 1px solid var(--vg-line);
}
.vg-checklist .vg-tb-title { display: flex; min-width: 0; align-items: center; padding: 12px 20px; }
.vg-checklist .vg-tb-title span {
  font: 700 20px/1 var(--vg-display); text-transform: uppercase; letter-spacing: -0.025em; color: #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vg-checklist .vg-tb-cells { display: flex; align-items: stretch; }
.vg-checklist .vg-cell { border-left: 1px solid var(--vg-line); padding: 12px 16px; text-align: right; }
.vg-checklist .vg-cell-label {
  font: 400 11px/1.3 var(--vg-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--vg-slate);
}
.vg-checklist .vg-status {
  margin-top: 6px; font: 400 12px/1 var(--vg-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--vg-warn);
  white-space: nowrap;
}
.vg-checklist .vg-exportcsv {
  display: flex; align-items: center; gap: 6px; border-left: 1px solid var(--vg-line); padding: 12px 16px;
  font: 400 12px/1 var(--vg-mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-blue); white-space: nowrap;
}
.vg-checklist .vg-exportcsv svg { width: 16px; height: 16px; }
/* Groups and rows */
.vg-checklist .vg-group + .vg-group { border-top: 1px solid var(--vg-line); }
.vg-checklist .vg-gh {
  display: flex; align-items: center; gap: 6px; padding: 8px 20px; border-bottom: 1px solid var(--vg-divider);
  font: 400 11px/1.3 var(--vg-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--vg-slate);
}
.vg-checklist .vg-gh svg { width: 14px; height: 14px; }
.vg-checklist .vg-gh span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-checklist .vg-rows { list-style: none; margin: 0; padding: 0; }
.vg-checklist .vg-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 20px; }
.vg-checklist .vg-row + .vg-row { border-top: 1px solid var(--vg-divider); }
.vg-checklist .vg-box {
  margin-top: 2px; width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--vg-input-line); border-radius: 4px; background: #fff; color: transparent;
  transition: background-color 200ms, border-color 200ms, color 200ms, box-shadow 200ms;
}
.vg-checklist .vg-box svg { width: 14px; height: 14px; }
.vg-checklist .vg-row.is-resolved .vg-box { border-color: var(--vg-ok); background: var(--vg-ok); color: #fff; }
.vg-checklist .vg-box.is-press { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vg-focus); border-color: var(--vg-blue); }
.vg-checklist .vg-body { min-width: 0; flex: 1; }
.vg-checklist .vg-addr {
  font: 400 12px/1.4 var(--vg-mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-slate);
}
.vg-checklist .vg-clause { margin-top: 4px; font-size: 14px; line-height: 20px; transition: color 200ms; }
.vg-checklist .vg-row.is-resolved .vg-clause { color: var(--vg-slate); }
.vg-checklist .vg-loc {
  margin-top: 4px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px;
  font-size: 12px; line-height: 16px; color: var(--vg-slate);
}
.vg-checklist .vg-loc-l { font: 400 11px/16px var(--vg-mono); letter-spacing: 0.15em; text-transform: uppercase; }
.vg-checklist .vg-loc-v { font: 400 12px/16px var(--vg-mono); color: var(--vg-ink); }
/* The input block and the attribution line share one slot, sized to the larger. */
.vg-checklist .vg-swap { display: grid; }
.vg-checklist .vg-swap > * { grid-area: 1 / 1; transition: opacity 250ms; }
.vg-checklist .vg-open { margin-top: 8px; }
.vg-checklist .vg-done { margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--vg-slate); opacity: 0; }
.vg-checklist .vg-row.is-resolved .vg-open { opacity: 0; }
.vg-checklist .vg-row.is-resolved .vg-done { opacity: 1; }
.vg-checklist .vg-addressed {
  font: 400 11px/16px var(--vg-mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-ink);
}
.vg-checklist .vg-label {
  display: block; font: 400 11px/1.3 var(--vg-mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-slate);
}
.vg-checklist .vg-input {
  display: block; width: 100%; margin: 4px 0 0; padding: 6px 10px;
  border: 1px solid var(--vg-input-line); border-radius: 6px; background: #fff; color: var(--vg-ink);
  font: 400 14px/20px var(--vg-sans); outline: none; pointer-events: none; transition: box-shadow 150ms;
}
.vg-checklist .vg-input::placeholder { color: var(--vg-slate); opacity: 1; }
.vg-checklist .vg-input.is-active { box-shadow: 0 0 0 2px var(--vg-focus); }
/* Reveal: groups and rows hold their space while hidden. */
.vg-checklist .vg-gh, .vg-checklist .vg-row { transition: opacity 350ms ease-out; }
.vg-checklist .is-hidden { opacity: 0; }
.vg-checklist .vg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@container (max-width: 400px) {
  .vg-checklist .vg-sheet { padding: 14px 12px; }
  .vg-checklist .vg-row { padding: 12px 14px; gap: 10px; }
  .vg-checklist .vg-gh, .vg-checklist .vg-tb-title { padding-left: 14px; padding-right: 14px; }
  .vg-checklist .vg-cell, .vg-checklist .vg-exportcsv { padding-left: 14px; padding-right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-checklist * { transition: none !important; }
}

/*
Generated by frontend/scripts/extract-vignettes.mjs from docs/mockups/vignette-library.html.
The mockup is the design record: change the vignette there and re-run the script.
The OS dark-scheme media block is removed: the vignette follows the app's .dark class only.
*/
/* App baseline: undo Tailwind preflight inside the figure (generated, not in the mockup). */
.vg-library {
  line-height: normal;
  tab-size: 8;
  font-feature-settings: normal;
  font-variation-settings: normal;
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
  margin: revert;
}
.vg-library :where(*), .vg-library :where(*)::before, .vg-library :where(*)::after {
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
}
.vg-library :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre, fieldset) { margin: revert; }
.vg-library :where(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; }
.vg-library :where(hr) { height: revert; color: revert; border-top-width: revert; }
.vg-library :where(a) { color: revert; -webkit-text-decoration: revert; text-decoration: revert; }
.vg-library :where(b, strong) { font-weight: revert; }
.vg-library :where(code, kbd, samp, pre) { font-family: revert; font-feature-settings: revert; font-variation-settings: revert; font-size: revert; }
.vg-library :where(small) { font-size: revert; }
.vg-library :where(sub, sup) { font-size: revert; line-height: revert; position: revert; vertical-align: revert; }
.vg-library :where(table) { text-indent: revert; border-color: revert; border-collapse: revert; }
.vg-library :where(button, input, optgroup, select, textarea) {
  font-family: revert;
  font-feature-settings: revert;
  font-variation-settings: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  color: revert;
  margin: revert;
  padding: revert;
}
.vg-library :where(button, select) { text-transform: revert; }
.vg-library :where(button, input[type="button"], input[type="reset"], input[type="submit"]) {
  appearance: revert;
  background-color: revert;
  background-image: revert;
}
.vg-library :where(fieldset, legend, dialog) { padding: revert; }
.vg-library :where(ol, ul, menu) { list-style: revert; margin: revert; padding: revert; }
.vg-library :where(textarea) { resize: revert; }
.vg-library :where(input, textarea)::placeholder { opacity: revert; color: revert; }
.vg-library :where(button, [role="button"], :disabled) { cursor: revert; }
.vg-library :where(img, svg, video, canvas, audio, iframe, embed, object) { display: revert; vertical-align: revert; }
.vg-library :where(img, video) { max-width: revert; height: revert; }

.vg-library {
  /* index.css LIGHT values: the sheet is the light app in both themes */
  --vg-app: oklch(0.98 0.01 247);
  --vg-paper: oklch(1 0 0);
  --vg-ink: oklch(0.25 0.02 247);
  --vg-heading: oklch(0 0 0);
  --vg-slate: oklch(0.52 0.02 247);
  --vg-line: oklch(0.91 0.02 247);
  --vg-input: oklch(0.86 0.02 247);
  --vg-divider: oklch(0.94 0.02 247);
  --vg-field: oklch(0.49 0.2 247);
  --vg-field-ink: oklch(0.99 0.004 247);
  --vg-focus: oklch(0.5 0.1 247);
  --vg-warn-bg: oklch(0.96 0.05 100);
  --vg-warn-text: oklch(0.45 0.1 100);
  --vg-warn-line: oklch(0.88 0.08 100);
  --vg-warn-strong: oklch(0.57 0.115 90);
  --vg-added-text: oklch(0.46 0.125 150);
  --vg-removed-text: oklch(0.48 0.19 27);
  --vg-modified-text: oklch(0.47 0.1 68);
  --vg-ins-bg: oklch(0.88 0.085 155);
  --vg-del-bg: oklch(0.885 0.06 25);
  --vg-del-word: oklch(0.34 0.03 28);
  --vg-mark-add: oklch(0.53 0.14 150);
  --vg-mark-del: oklch(0.54 0.21 27);
  --vg-mark-mod: oklch(0.82 0.16 88);
  --vg-mark-glyph: oklch(1 0 0);
  --vg-mark-glyph-mod: oklch(0.25 0.02 247);
  /* the backing: dark in both themes (founder 2026-10-25) */
  --vg-back: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --vg-display: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  --vg-body: Barlow, ui-sans-serif, system-ui, sans-serif;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  margin: 0;
  padding: 0 12px 12px 0;
  container-type: inline-size;
  font-family: var(--vg-body);
  color: var(--vg-ink);
}

:root[data-theme="dark"] .vg-library, :root.dark .vg-library { --vg-back: oklch(0.26 0.038 247); --vg-back-line: oklch(0.26 0.038 247); }

.vg-library *, .vg-library *::before, .vg-library *::after { box-sizing: border-box; }
.vg-library p, .vg-library ul, .vg-library ol, .vg-library dl, .vg-library dd { margin: 0; padding: 0; }
.vg-library ul, .vg-library ol { list-style: none; }
.vg-library table { border-collapse: collapse; border-spacing: 0; }
.vg-library th, .vg-library td { padding: 0; }
.vg-library .vg-back {
  position: absolute; inset: 12px 0 0 12px; border-radius: 8px;
  border: 1px solid var(--vg-back-line); background: var(--vg-back);
}
.vg-library .vg-sheet {
  position: relative; overflow: hidden; border-radius: 8px;
  border: 1px solid var(--vg-line); background: var(--vg-app);
  padding: 14px 14px 16px;
  box-shadow: 0 18px 40px -18px oklch(0.268 0.027 247 / 0.35), 0 2px 6px oklch(0.268 0.027 247 / 0.08);
}
.vg-library .vg-label { font-family: var(--vg-mono); font-size: 11px; font-weight: 500; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.15em; color: var(--vg-slate); }
.vg-library .vg-eyebrow { letter-spacing: 0.2em; }
.vg-library .vg-card { overflow: hidden; border-radius: 4px; border: 1px solid var(--vg-line); background: var(--vg-paper); }
.vg-library .off { opacity: 0; }

/* ---------- the standard's title block ---------- */
.vg-library .vg-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 12px; padding: 12px 14px; }
.vg-library .vg-top-t { min-width: 0; flex: 1 1 160px; }
.vg-library .vg-h1 { margin-top: 6px; font-family: var(--vg-display); font-weight: 700; font-size: 26px; line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; color: var(--vg-heading); }
.vg-library .vg-side { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%; min-width: 0; }
.vg-library .vg-chip { padding: 3px 8px; border-radius: 4px; border: 1px solid var(--vg-line); font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vg-slate); }
.vg-library .vg-flag {
  display: inline-flex; max-width: 100%; align-items: center; gap: 7px; padding: 4px 8px;
  border-radius: 4px; border: 1px solid var(--vg-warn-line); background: var(--vg-warn-bg); color: var(--vg-warn-text);
  font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.35;
  transition: box-shadow 0.25s ease, opacity 0.4s ease;
}
.vg-library .vg-flag svg { flex: none; width: 14px; height: 14px; }
.vg-library .vg-flag .vg-tr { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-library .vg-flag .vg-n { flex: none; white-space: nowrap; }
.vg-library .vg-cells { display: flex; flex-wrap: wrap; border-top: 1px solid var(--vg-line); }
.vg-library .vg-cell { min-width: 0; padding: 9px 14px 10px; }
.vg-library .vg-cell + .vg-cell { border-left: 1px solid var(--vg-line); }
.vg-library .vg-cell.grow { flex: 1 1 0; }
.vg-library .vg-v { display: grid; margin-top: 5px; font-family: var(--vg-mono); font-size: 14px; color: var(--vg-heading); }
.vg-library .vg-v > * { grid-area: 1 / 1; transition: opacity 0.4s ease; }
.vg-library .vg-v.txt { font-family: var(--vg-body); font-size: 15px; }

/* ---------- the review ---------- */
.vg-library .vg-panel { margin-top: 14px; border-top: 3px solid var(--vg-warn-strong); transition: opacity 0.4s ease; }
.vg-library .vg-tb { display: flex; flex-wrap: wrap; align-items: stretch; border-bottom: 1px solid var(--vg-line); }
.vg-library .vg-tb-title { flex: 1 1 100%; min-width: 0; padding: 12px 14px; }
.vg-library .vg-tb-h { margin-top: 6px; font-family: var(--vg-display); font-weight: 700; font-size: 20px; line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; color: var(--vg-heading); }
.vg-library .vg-tb .vg-cell { flex: 1 1 50%; border-top: 1px solid var(--vg-line); }
.vg-library .vg-tb .vg-v { font-size: 13px; line-height: 1.35; }

/* summary: one typeset line, then the register of counts */
.vg-library .vg-sum { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--vg-line); }
.vg-library .vg-sum-lead { padding: 12px 14px 13px; border-bottom: 1px solid var(--vg-line); }
.vg-library .vg-line { margin-top: 7px; font-size: 16px; line-height: 1.45; color: var(--vg-heading); }
.vg-library .vg-reg { width: 100%; }
.vg-library .vg-reg th { padding: 12px 14px 6px 8px; text-align: right; }
.vg-library .vg-reg th:first-child { padding-left: 14px; text-align: left; }
.vg-library .vg-reg tbody tr { border-top: 1px solid var(--vg-divider); transition: opacity 0.35s ease; }
.vg-library .vg-reg tbody tr:first-child, .vg-library .vg-reg tr.vg-tot { border-top-color: var(--vg-line); }
.vg-library .vg-kind { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; column-gap: 10px; min-height: 32px; padding: 5px 8px 5px 14px; }
.vg-library .vg-fig { padding: 5px 14px 5px 8px; text-align: right; font-family: var(--vg-mono); font-size: 15px; font-variant-numeric: tabular-nums; color: var(--vg-heading); }
.vg-library .vg-fig.none { color: var(--vg-slate); }
.vg-library .vg-tot .vg-word { color: var(--vg-heading); }

/* the mark: a solid square, its glyph drawn once as strokes (ChangeMark.jsx) */
.vg-library .vg-mk {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 3px; color: var(--vg-mark-glyph);
}
.vg-library .vg-mk svg { display: block; width: 14px; height: 14px; overflow: visible; }
.vg-library .vg-mk.add { background: var(--vg-mark-add); }
.vg-library .vg-mk.del { background: var(--vg-mark-del); }
.vg-library .vg-mk.mod { background: var(--vg-mark-mod); color: var(--vg-mark-glyph-mod); box-shadow: inset 0 0 0 1.5px var(--vg-modified-text); }
.vg-library .vg-mk.none { color: var(--vg-slate); box-shadow: inset 0 0 0 1px var(--vg-input); }

/* the change word */
.vg-library .vg-word { font-family: var(--vg-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vg-slate); }
.vg-library .vg-word.add { color: var(--vg-added-text); }
.vg-library .vg-word.del { color: var(--vg-removed-text); }
.vg-library .vg-word.mod { color: var(--vg-modified-text); }

/* the redline (INS_CLASS / DEL_CLASS) */
.vg-library ins, .vg-library del {
  border-radius: 2px; padding: 0 1px; text-decoration-thickness: 1.5px;
  transition: background-color 0.45s ease, text-decoration-color 0.45s ease;
}
.vg-library ins { background: var(--vg-ins-bg); color: var(--vg-heading); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--vg-added-text); }
.vg-library del { background: var(--vg-del-bg); color: var(--vg-del-word); text-decoration: line-through; text-decoration-color: var(--vg-removed-text); }
.vg-library ins.plain { background-color: transparent; text-decoration-color: transparent; }
.vg-library del.plain { background-color: transparent; }

/* ---------- the entries ---------- */
.vg-library .vg-entries { padding: 0 14px; }
.vg-library .vg-e {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--vg-divider); transition: opacity 0.45s ease;
}
.vg-library .vg-e:last-child { border-bottom: 0; }
.vg-library .vg-mkc { padding-top: 1px; }
.vg-library .vg-no { padding-top: 2px; font-family: var(--vg-mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--vg-heading); }
.vg-library .vg-bd { grid-column: 1 / -1; min-width: 0; margin-top: 4px; }
.vg-library .vg-tx { margin-top: 5px; font-size: 15px; line-height: 1.6; color: var(--vg-ink); }

/* ---------- the actions, the draft, the finished copy ---------- */
.vg-library .vg-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; transition: opacity 0.4s ease; }
.vg-library .vg-btn {
  display: inline-grid; min-height: 38px; align-items: center; padding: 8px 16px;
  border-radius: 8px; background: var(--vg-field); color: var(--vg-field-ink);
  font: 500 14px/1.4 var(--vg-body); text-align: center; white-space: nowrap;
  transition: box-shadow 0.25s ease, filter 0.2s ease;
}
.vg-library .vg-btn > span { grid-area: 1 / 1; transition: opacity 0.2s ease; }
.vg-library .vg-note { flex: 1 1 220px; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--vg-slate); }
.vg-library .ring { box-shadow: 0 0 0 2px var(--vg-app), 0 0 0 4px var(--vg-focus); }
.vg-library .pressed { filter: brightness(0.86); }
.vg-library .vg-draft {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px;
  padding: 2px 0 2px 12px; border-left: 3px solid var(--vg-warn-strong); transition: opacity 0.4s ease;
}
.vg-library .vg-draft p { flex: 1 1 240px; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--vg-ink); }
.vg-library .vg-done { margin-top: 14px; transition: opacity 0.45s ease; }
.vg-library .vg-from { padding: 12px 14px; border-bottom: 1px solid var(--vg-line); }
.vg-library .vg-from-l { margin-top: 5px; font-size: 15px; color: var(--vg-ink); }
.vg-library .vg-from-s { margin-top: 3px; font-size: 14px; color: var(--vg-slate); }
.vg-library .vg-vals { width: 100%; }
.vg-library .vg-vals th { padding: 10px 14px 4px; text-align: left; }
.vg-library .vg-vals td { padding: 7px 14px; border-top: 1px solid var(--vg-divider); vertical-align: baseline; }
.vg-library .vg-vals tr:first-child td { border-top: 0; }
.vg-library .vg-fl { font-size: 14px; line-height: 1.4; color: var(--vg-ink); }
.vg-library .vg-fv { font-family: var(--vg-mono); font-size: 14px; color: var(--vg-heading); white-space: nowrap; text-align: right; }
.vg-library .vg-fk { width: 1%; padding-left: 0 !important; text-align: right; }
.vg-library .vg-fk .vg-word { transition: opacity 0.35s ease; }

@container (min-width: 520px) {
  .vg-library .vg-sheet { padding: 16px 18px 18px; }
  .vg-library .vg-top { padding: 13px 16px; }
  .vg-library .vg-h1 { font-size: 28px; }
  .vg-library .vg-side { align-items: flex-end; }
  .vg-library .vg-cell { padding: 10px 16px 11px; }
  .vg-library .vg-tb-title { flex: 1 1 100%; padding: 13px 16px; }
  .vg-library .vg-tb-h { font-size: 22px; }
  .vg-library .vg-entries { padding: 0 16px; }
  .vg-library .vg-e { grid-template-columns: 20px 56px minmax(0, 1fr); column-gap: 12px; }
  .vg-library .vg-bd { grid-column: 3; grid-row: 1; margin-top: 0; }
  .vg-library .vg-sum { grid-template-columns: minmax(0, 1fr) auto; }
  .vg-library .vg-sum-lead { padding: 13px 16px; border-bottom: 0; border-right: 1px solid var(--vg-line); }
  .vg-library .vg-reg th { padding-top: 13px; }
  .vg-library .vg-from { padding: 13px 16px; }
  .vg-library .vg-vals th { padding-left: 16px; padding-right: 16px; }
  .vg-library .vg-vals td { padding-left: 16px; padding-right: 16px; }
}

.vg-library .vg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .vg-library *, .vg-library *::before, .vg-library *::after { transition: none !important; }
}

/*
Generated by frontend/scripts/extract-vignettes.mjs from docs/mockups/vignette-company.html.
The mockup is the design record: change the vignette there and re-run the script.
The OS dark-scheme media block is removed: the vignette follows the app's .dark class only.
*/
/* App baseline: undo Tailwind preflight inside the figure (generated, not in the mockup). */
.vg-company {
  line-height: normal;
  tab-size: 8;
  font-feature-settings: normal;
  font-variation-settings: normal;
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
  margin: revert;
}
.vg-company :where(*), .vg-company :where(*)::before, .vg-company :where(*)::after {
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
}
.vg-company :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre, fieldset) { margin: revert; }
.vg-company :where(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; }
.vg-company :where(hr) { height: revert; color: revert; border-top-width: revert; }
.vg-company :where(a) { color: revert; -webkit-text-decoration: revert; text-decoration: revert; }
.vg-company :where(b, strong) { font-weight: revert; }
.vg-company :where(code, kbd, samp, pre) { font-family: revert; font-feature-settings: revert; font-variation-settings: revert; font-size: revert; }
.vg-company :where(small) { font-size: revert; }
.vg-company :where(sub, sup) { font-size: revert; line-height: revert; position: revert; vertical-align: revert; }
.vg-company :where(table) { text-indent: revert; border-color: revert; border-collapse: revert; }
.vg-company :where(button, input, optgroup, select, textarea) {
  font-family: revert;
  font-feature-settings: revert;
  font-variation-settings: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  color: revert;
  margin: revert;
  padding: revert;
}
.vg-company :where(button, select) { text-transform: revert; }
.vg-company :where(button, input[type="button"], input[type="reset"], input[type="submit"]) {
  appearance: revert;
  background-color: revert;
  background-image: revert;
}
.vg-company :where(fieldset, legend, dialog) { padding: revert; }
.vg-company :where(ol, ul, menu) { list-style: revert; margin: revert; padding: revert; }
.vg-company :where(textarea) { resize: revert; }
.vg-company :where(input, textarea)::placeholder { opacity: revert; color: revert; }
.vg-company :where(button, [role="button"], :disabled) { cursor: revert; }
.vg-company :where(img, svg, video, canvas, audio, iframe, embed, object) { display: revert; vertical-align: revert; }
.vg-company :where(img, video) { max-width: revert; height: revert; }

.vg-company {
  --vg-ink: oklch(0.268 0.027 247);
  --vg-blue: oklch(0.535 0.155 247);
  --vg-removed: oklch(0.472 0.142 31);
  --vg-added: oklch(0.485 0.092 164);
  --vg-slate: oklch(0.52 0.031 247);
  --vg-line: oklch(0.898 0.013 247);
  --vg-tint: oklch(0.966 0.006 247);
  --vg-tint2: oklch(0.94 0.009 247);
  --vg-back-bg: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-shadow: oklch(0.268 0.027 247 / 0.14);
  --vg-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  position: relative;
  margin: 0 12px 12px 0;
  font-family: Barlow, ui-sans-serif, system-ui, sans-serif;
  color: var(--vg-ink);
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] .vg-company, :root.dark .vg-company {
  --vg-back-bg: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-shadow: oklch(0 0 0 / 0.45);
}
.vg-company *, .vg-company *::before, .vg-company *::after { box-sizing: border-box; }
.vg-company p { margin: 0; }
.vg-company svg { display: block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vg-company .vg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.vg-company .vg-mono { font-family: var(--vg-mono); }
.vg-company .vg-lbl {
  font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--vg-slate);
}
.vg-company .vg-eyebrow {
  font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--vg-slate);
}
.vg-company .vg-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Backing sheet and the paper sheet (white in both themes). */
.vg-company .vg-back {
  position: absolute; inset: 0; transform: translate(12px, 12px);
  border-radius: 8px; border: 1px solid var(--vg-back-line); background: var(--vg-back-bg);
}
.vg-company .vg-sheet {
  position: relative; overflow: hidden; border-radius: 8px;
  border: 1px solid var(--vg-line); background: #fff;
  box-shadow: 0 40px 50px -8px var(--vg-shadow), 0 20px 25px -5px var(--vg-shadow), 0 8px 10px -6px var(--vg-shadow);
  container-type: inline-size;
}
/* Every layer shares one grid cell, so the sheet is always as tall as its
   tallest state and never changes height during the loop. */
.vg-company .vg-stack { display: grid; }
.vg-company .vg-stack > * { grid-area: 1 / 1; min-width: 0; }
.vg-company .vg-layer { align-self: start; opacity: 0; transition: opacity 260ms ease; }
.vg-company .vg-swap { display: grid; }
.vg-company .vg-swap > * { grid-area: 1 / 1; transition: opacity 220ms ease; }

/* Buttons (components/ui/Button) */
.vg-company .vg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 8px; border: 1px solid transparent; padding: 7px 12px;
  font-weight: 600; font-size: 13px; line-height: 1.2; white-space: nowrap;
  transition: box-shadow 180ms ease, transform 180ms ease, opacity 220ms ease;
}
.vg-company .vg-btn svg { width: 16px; height: 16px; }
.vg-company .vg-btn-primary { background: var(--vg-ink); color: #fff; }
.vg-company .vg-btn-secondary { background: var(--vg-tint); color: var(--vg-ink); border-color: var(--vg-line); }
.vg-company .vg-ibtn {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px;
  background: var(--vg-tint); border: 1px solid var(--vg-line); color: var(--vg-ink);
}
.vg-company .vg-ibtn svg { width: 15px; height: 15px; }
.vg-company .vg-ibtn-danger { background: #fff; color: var(--vg-removed); border-color: oklch(0.472 0.142 31 / 0.35); }
.vg-company .vg-ring { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vg-blue); transform: translateY(1px); }
.vg-company .vg-link { color: var(--vg-blue); }
.vg-company .vg-index {
  font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--vg-blue); border-radius: 4px; transition: box-shadow 180ms ease;
}

/* ---------- Standards page (StandardsLibrary.jsx) ---------- */
.vg-company .vg-page { padding: 16px 16px 18px; }
.vg-company .vg-lhead {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--vg-line);
}
.vg-company .vg-lhead-l { display: flex; align-items: stretch; gap: 16px; }
.vg-company .vg-h1 {
  margin-top: 5px; font-family: "Barlow Condensed", ui-sans-serif, sans-serif; font-weight: 700;
  font-size: 32px; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase;
}
.vg-company .vg-cell { border-left: 1px solid var(--vg-line); padding-left: 16px; }
.vg-company .vg-cell-v { margin-top: 6px; font-family: var(--vg-mono); font-size: 15px; line-height: 1; }
.vg-company .vg-create { transition: opacity 220ms ease; }
.vg-company.vg-tab-global .vg-create { opacity: 0; }

.vg-company .vg-filters { display: flex; gap: 10px; margin-top: 14px; }
.vg-company .vg-field {
  position: relative; display: flex; align-items: center; gap: 8px; min-width: 0;
  border: 1px solid var(--vg-line); border-radius: 8px; background: #fff;
  padding: 8px 10px; font-size: 13px; line-height: 1.35;
  transition: box-shadow 180ms ease, border-color 180ms ease;
}
.vg-company .vg-field > svg { width: 17px; height: 17px; color: var(--vg-slate); }
.vg-company .vg-search { flex: 1; }
.vg-company .vg-filter { flex: 0 0 38%; }
.vg-company.vg-typing .vg-search { border-color: var(--vg-blue); box-shadow: 0 0 0 3px oklch(0.535 0.155 247 / 0.2); }
.vg-company .vg-ph { color: oklch(0.52 0.031 247 / 0.8); }
.vg-company .vg-typed-wrap { display: grid; flex: 1; min-width: 0; }
.vg-company .vg-typed-wrap > span { grid-area: 1 / 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vg-company .vg-ghost { visibility: hidden; }
.vg-company .vg-caret { display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -0.15em; background: var(--vg-ink); opacity: 0; }
.vg-company.vg-typing .vg-caret { opacity: 1; }
.vg-company .vg-clear { opacity: 0; transition: opacity 180ms ease; }
.vg-company.vg-results .vg-clear { opacity: 1; }

.vg-company .vg-matchslot { height: 30px; display: flex; align-items: flex-end; }
.vg-company .vg-matchlbl { opacity: 0; transition: opacity 220ms ease; letter-spacing: 0.22em; }
.vg-company.vg-results .vg-matchlbl { opacity: 1; }

.vg-company .vg-tabs {
  display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 10px; margin-bottom: 14px;
  border-bottom: 1px solid var(--vg-line);
}
.vg-company .vg-tab {
  display: flex; align-items: baseline; gap: 6px; margin-bottom: -1px; padding-bottom: 8px;
  border-bottom: 2px solid transparent; font-family: var(--vg-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--vg-slate);
  transition: color 220ms ease, border-color 220ms ease, box-shadow 180ms ease;
}
.vg-company .vg-tab .vg-n { color: var(--vg-slate); letter-spacing: 0.1em; }
.vg-company .vg-tab-company { color: var(--vg-ink); border-bottom-color: var(--vg-ink); }
.vg-company.vg-tab-global .vg-tab-company { color: var(--vg-slate); border-bottom-color: transparent; }
.vg-company.vg-tab-global .vg-tab-glob { color: var(--vg-ink); border-bottom-color: var(--vg-ink); }

/* Register (HierarchicalStandardList.jsx) */
.vg-company .vg-reg { border: 1px solid var(--vg-line); border-radius: 8px; overflow: hidden; background: #fff; }
.vg-company .vg-libh { display: flex; align-items: stretch; background: var(--vg-tint); }
.vg-company .vg-libh-b {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px;
}
.vg-company .vg-libh-n { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.vg-company .vg-libname {
  font-family: var(--vg-mono); font-size: 14px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vg-company .vg-libcount { font-family: var(--vg-mono); font-size: 12px; letter-spacing: 0.15em; color: var(--vg-slate); }
.vg-company .vg-chev { width: 14px; height: 14px; color: var(--vg-slate); }
.vg-company .vg-open > .vg-cath .vg-chev, .vg-company .vg-libh .vg-chev { transform: rotate(180deg); }
.vg-company .vg-param {
  display: flex; align-items: center; padding: 0 14px; border-left: 1px solid var(--vg-line);
  font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-blue);
}
.vg-company .vg-libbody { padding: 5px 6px 6px; display: grid; gap: 2px; }
.vg-company .vg-cat { margin-left: 4px; }
.vg-company .vg-cath {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 10px;
  border-radius: 4px;
}
.vg-company .vg-cath-n { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.vg-company .vg-catname { font-family: var(--vg-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.vg-company .vg-catcount { font-family: var(--vg-mono); font-size: 12px; color: var(--vg-slate); }
.vg-company .vg-catp { margin-left: 10px; padding-left: 8px; border-left: 1px solid var(--vg-line); }
.vg-company .vg-catp > .vg-cat { margin: 1px 0; }
.vg-company .vg-items > * + * { border-top: 1px solid var(--vg-line); }
.vg-company .vg-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 4px 10px;
}
.vg-company .vg-item-l { min-width: 0; flex: 1; padding-top: 3px; }
.vg-company .vg-name { font-size: 14px; font-weight: 500; line-height: 1.3; transition: color 180ms ease; }
.vg-company .vg-desc {
  margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--vg-slate);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vg-company .vg-cust { margin-top: 5px; font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vg-slate); }
.vg-company .vg-acts { display: flex; gap: 6px; flex-shrink: 0; }
.vg-company.vg-row-hover .vg-hit .vg-name { color: var(--vg-blue); }
.vg-company.vg-row-hover .vg-hit { background: var(--vg-tint); }
.vg-company .vg-new { opacity: 0; transform: translateY(4px); transition: opacity 420ms ease, transform 420ms ease, background-color 600ms ease; }
.vg-company.vg-newrow .vg-new { opacity: 1; transform: none; }

/* Panel and layer visibility, by scene. */
.vg-company .vg-lib { opacity: 1; }
.vg-company.vg-std-on .vg-lib, .vg-company.vg-copy-on .vg-lib { opacity: 0; }
.vg-company.vg-std-on .vg-std { opacity: 1; }
.vg-company.vg-copy-on .vg-copy { opacity: 1; }
.vg-company .vg-p-comp0 { opacity: 1; }
.vg-company.vg-tab-global .vg-p-comp0, .vg-company.vg-added .vg-p-comp0 { opacity: 0; }
.vg-company.vg-tab-global .vg-p-gbrowse { opacity: 1; }
.vg-company.vg-tab-global.vg-results .vg-p-gbrowse { opacity: 0; }
.vg-company.vg-tab-global.vg-results .vg-p-gsearch { opacity: 1; }
.vg-company.vg-added .vg-p-comp1 { opacity: 1; }
.vg-company.vg-tab-global.vg-added .vg-p-comp1 { opacity: 0; }
.vg-company .vg-v-adopt, .vg-company .vg-v-9 { opacity: 0; }
.vg-company.vg-tab-global .vg-v-file, .vg-company.vg-added .vg-v-8 { opacity: 0; }
.vg-company .vg-cell { transition: opacity 220ms ease; }
.vg-company.vg-tab-global .vg-cell { opacity: 0; }
.vg-company.vg-added .vg-v-9 { opacity: 1; }
.vg-company.vg-added.vg-tab-global .vg-v-9b { opacity: 0; }
.vg-company.vg-press-gtab .vg-tab-glob, .vg-company.vg-press-ctab .vg-tab-company { box-shadow: 0 0 0 2px var(--vg-blue); border-radius: 3px; }

/* ---------- Standard page (Standard.jsx) ---------- */
.vg-company .vg-back-link { display: inline-flex; gap: 6px; }
.vg-company .vg-ok {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; margin-bottom: 12px;
  border-radius: 8px; border: 1px solid oklch(0.485 0.092 164 / 0.55); background: oklch(0.485 0.092 164 / 0.08);
}
.vg-company .vg-ok > svg { width: 19px; height: 19px; color: var(--vg-added); margin-top: 1px; }
.vg-company .vg-ok-body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.vg-company .vg-ok-msg { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--vg-added); }
.vg-company .vg-ok .vg-x { width: 17px; height: 17px; color: var(--vg-added); }
.vg-company.vg-press-link .vg-ok .vg-index { box-shadow: 0 0 0 2px var(--vg-blue); }
.vg-company .vg-tb { margin-top: 12px; border: 1px solid var(--vg-line); border-radius: 8px; background: #fff; }
.vg-company .vg-tb-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 13px 16px; }
.vg-company .vg-tb-title {
  margin-top: 5px; font-family: "Barlow Condensed", ui-sans-serif, sans-serif; font-weight: 700;
  font-size: 26px; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase;
}
.vg-company .vg-stamp {
  flex-shrink: 0; border: 1px solid var(--vg-line); border-radius: 4px; padding: 3px 7px;
  font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vg-slate);
}
.vg-company .vg-dl { display: flex; flex-wrap: wrap; border-top: 1px solid var(--vg-line); }
.vg-company .vg-dl > div { min-width: 0; padding: 8px 14px; border-right: 1px solid var(--vg-line); }
.vg-company .vg-dl > div:last-child { border-right: 0; }
.vg-company .vg-dl .vg-dd { margin-top: 3px; font-family: var(--vg-mono); font-size: 13px; }
.vg-company .vg-actrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vg-company.vg-press-cust .vg-cust-btn { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vg-blue); transform: translateY(1px); }
.vg-company .vg-card { margin-top: 14px; border: 1px solid var(--vg-line); border-radius: 8px; padding: 12px 16px; background: #fff; }
.vg-company .vg-lineage { margin-top: 4px; font-size: 14px; }
.vg-company .vg-doc { margin-top: 14px; border: 1px solid var(--vg-line); border-radius: 8px; padding: 14px 16px 0; position: relative; overflow: hidden; height: 132px; }
.vg-company .vg-doc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: linear-gradient(to bottom, rgb(255 255 255 / 0), #fff); }
.vg-company .vg-doc-tall { height: 300px; }
.vg-company .vg-doc-h { display: flex; gap: 12px; align-items: baseline; font-family: "Barlow Condensed", ui-sans-serif, sans-serif; font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: 0.02em; }
.vg-company .vg-addr { font-family: var(--vg-mono); font-size: 13px; color: var(--vg-slate); font-weight: 400; }
.vg-company .vg-clause { display: flex; gap: 12px; margin-top: 8px; font-size: 14px; line-height: 1.5; }

/* ---------- Customize dialog (CustomizeStandardDialog.jsx) ---------- */
.vg-company .vg-modal {
  display: flex; align-items: flex-start; justify-content: center; padding: 12px;
  background: oklch(0.268 0.027 247 / 0.32); opacity: 0; transition: opacity 260ms ease;
  position: relative; z-index: 2;
}
.vg-company.vg-dialog .vg-modal { opacity: 1; }
.vg-company .vg-dlg {
  width: 100%; max-width: 560px; background: #fff; border: 1px solid var(--vg-line); border-radius: 10px;
  box-shadow: 0 20px 25px -5px oklch(0.268 0.027 247 / 0.2);
  transform: translateY(8px) scale(0.985); transition: transform 260ms ease;
}
.vg-company.vg-dialog .vg-dlg { transform: none; }
.vg-company .vg-dlg-head { display: flex; justify-content: space-between; gap: 12px; padding: 13px 16px 11px; border-bottom: 1px solid var(--vg-line); }
.vg-company .vg-dlg-title {
  margin-top: 3px; font-family: "Barlow Condensed", ui-sans-serif, sans-serif; font-weight: 700;
  font-size: 21px; line-height: 1.05; text-transform: uppercase; letter-spacing: -0.005em;
}
.vg-company .vg-dlg-head > svg { width: 18px; height: 18px; color: var(--vg-slate); }
.vg-company .vg-dlg-body { padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 13px; }
.vg-company .vg-dlg-body > *, .vg-company .vg-two > * { min-width: 0; }
.vg-company .vg-dlg { overflow: hidden; }
.vg-company .vg-src { border: 1px solid var(--vg-line); border-radius: 8px; padding: 8px 12px; }
.vg-company .vg-src-name { margin-top: 3px; font-weight: 600; font-size: 14px; }
.vg-company .vg-src-meta { margin-top: 2px; font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vg-slate); }
.vg-company .vg-intro { font-size: 13px; color: var(--vg-slate); }
.vg-company .vg-flbl { display: block; margin-bottom: 5px; }
.vg-company .vg-sel { justify-content: space-between; }
.vg-company .vg-sel .vg-chev { width: 13px; height: 13px; }
.vg-company .vg-dests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--vg-line); border-radius: 8px; overflow: hidden; }
.vg-company .vg-dest { padding: 9px 11px; border-left: 1px solid var(--vg-line); min-width: 0; }
.vg-company .vg-dest:first-child { border-left: 0; }
.vg-company .vg-dest-sel { background: var(--vg-tint); box-shadow: inset 3px 0 0 var(--vg-blue); }
.vg-company .vg-dest-top { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; }
.vg-company .vg-radio { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--vg-slate); flex-shrink: 0; display: grid; place-items: center; }
.vg-company .vg-dest-sel .vg-radio { border-color: var(--vg-blue); }
.vg-company .vg-dest-sel .vg-radio::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vg-blue); }
.vg-company .vg-dest-sub { margin-top: 4px; padding-left: 21px; font-size: 12px; line-height: 1.35; color: var(--vg-slate); }
.vg-company .vg-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.vg-company .vg-note { font-size: 12px; line-height: 1.4; color: var(--vg-slate); }
.vg-company .vg-dlg-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 11px 16px 13px; border-top: 1px solid var(--vg-line); }
.vg-company .vg-go { min-width: 104px; }
.vg-company.vg-press-go .vg-go { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vg-blue); transform: translateY(1px); }
.vg-company.vg-checking .vg-go, .vg-company.vg-customizing .vg-go { opacity: 0.75; }
.vg-company .vg-golbl { display: grid; }
.vg-company .vg-golbl > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; opacity: 0; transition: opacity 120ms ease; }
.vg-company .vg-golbl .vg-g0 { opacity: 1; }
.vg-company.vg-checking .vg-golbl .vg-g0, .vg-company.vg-customizing .vg-golbl .vg-g0 { opacity: 0; }
.vg-company.vg-checking .vg-golbl .vg-g1 { opacity: 1; }
.vg-company.vg-customizing .vg-golbl .vg-g2 { opacity: 1; }
.vg-company .vg-spin { width: 14px; height: 14px; }
.vg-company.vg-checking .vg-spin, .vg-company.vg-customizing .vg-spin { animation: vg-company-spin 900ms linear infinite; }
@keyframes vg-company-spin { to { transform: rotate(360deg); } }

@container (max-width: 470px) {
  .vg-company .vg-page { padding: 14px 12px 16px; }
  .vg-company .vg-filters { flex-direction: column; gap: 8px; }
  .vg-company .vg-filter { flex: none; }
  .vg-company .vg-h1 { font-size: 28px; }
  .vg-company .vg-tb-title { font-size: 22px; }
  .vg-company .vg-tb-top, .vg-company .vg-card, .vg-company .vg-doc { padding-left: 12px; padding-right: 12px; }
  .vg-company .vg-dl > div { padding: 7px 10px; }
  .vg-company .vg-dests { grid-template-columns: 1fr; }
  .vg-company .vg-dest { border-left: 0; border-top: 1px solid var(--vg-line); }
  .vg-company .vg-dest:first-child { border-top: 0; }
  .vg-company .vg-two { grid-template-columns: 1fr; }
  .vg-company .vg-modal { padding: 6px; }
  .vg-company .vg-dlg-head, .vg-company .vg-dlg-body, .vg-company .vg-dlg-foot { padding-left: 12px; padding-right: 12px; }
  .vg-company .vg-libh-b { padding: 8px 10px; }
  .vg-company .vg-param { padding: 0 10px; }
  .vg-company .vg-catp { margin-left: 6px; padding-left: 5px; }
  .vg-company .vg-cath, .vg-company .vg-item { padding-left: 7px; padding-right: 4px; }
  .vg-company .vg-ibtn { width: 24px; height: 24px; }
  .vg-company .vg-acts { gap: 4px; }
  .vg-company .vg-tabs { gap: 4px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-company *, .vg-company *::before, .vg-company *::after { transition: none !important; animation: none !important; }
}

/*
Generated by frontend/scripts/extract-vignettes.mjs from docs/mockups/vignette-addstandard.html.
The mockup is the design record: change the vignette there and re-run the script.
The OS dark-scheme media block is removed: the vignette follows the app's .dark class only.
*/
/* App baseline: undo Tailwind preflight inside the figure (generated, not in the mockup). */
.vg-addstandard {
  line-height: normal;
  tab-size: 8;
  font-feature-settings: normal;
  font-variation-settings: normal;
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
  margin: revert;
}
.vg-addstandard :where(*), .vg-addstandard :where(*)::before, .vg-addstandard :where(*)::after {
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
}
.vg-addstandard :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre, fieldset) { margin: revert; }
.vg-addstandard :where(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; }
.vg-addstandard :where(hr) { height: revert; color: revert; border-top-width: revert; }
.vg-addstandard :where(a) { color: revert; -webkit-text-decoration: revert; text-decoration: revert; }
.vg-addstandard :where(b, strong) { font-weight: revert; }
.vg-addstandard :where(code, kbd, samp, pre) { font-family: revert; font-feature-settings: revert; font-variation-settings: revert; font-size: revert; }
.vg-addstandard :where(small) { font-size: revert; }
.vg-addstandard :where(sub, sup) { font-size: revert; line-height: revert; position: revert; vertical-align: revert; }
.vg-addstandard :where(table) { text-indent: revert; border-color: revert; border-collapse: revert; }
.vg-addstandard :where(button, input, optgroup, select, textarea) {
  font-family: revert;
  font-feature-settings: revert;
  font-variation-settings: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  color: revert;
  margin: revert;
  padding: revert;
}
.vg-addstandard :where(button, select) { text-transform: revert; }
.vg-addstandard :where(button, input[type="button"], input[type="reset"], input[type="submit"]) {
  appearance: revert;
  background-color: revert;
  background-image: revert;
}
.vg-addstandard :where(fieldset, legend, dialog) { padding: revert; }
.vg-addstandard :where(ol, ul, menu) { list-style: revert; margin: revert; padding: revert; }
.vg-addstandard :where(textarea) { resize: revert; }
.vg-addstandard :where(input, textarea)::placeholder { opacity: revert; color: revert; }
.vg-addstandard :where(button, [role="button"], :disabled) { cursor: revert; }
.vg-addstandard :where(img, svg, video, canvas, audio, iframe, embed, object) { display: revert; vertical-align: revert; }
.vg-addstandard :where(img, video) { max-width: revert; height: revert; }

.vg-addstandard {
  --vg-ink: oklch(0.268 0.027 247);
  --vg-blue: oklch(0.535 0.155 247);
  --vg-added: oklch(0.485 0.092 164);
  --vg-slate: oklch(0.52 0.031 247);
  --vg-line: oklch(0.898 0.013 247);
  --vg-tint: oklch(0.966 0.006 247);
  --vg-tint2: oklch(0.94 0.009 247);
  --vg-warn-bg: oklch(0.96 0.05 100);
  --vg-warn-text: oklch(0.5 0.1 100);
  --vg-major: oklch(0.4 0.1 247);
  --vg-back-bg: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-shadow: oklch(0.268 0.027 247 / 0.14);
  --vg-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  position: relative;
  margin: 0 12px 12px 0;
  font-family: Barlow, ui-sans-serif, system-ui, sans-serif;
  color: var(--vg-ink);
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] .vg-addstandard, :root.dark .vg-addstandard {
  --vg-back-bg: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-shadow: oklch(0 0 0 / 0.45);
}
.vg-addstandard *, .vg-addstandard *::before, .vg-addstandard *::after { box-sizing: border-box; }
.vg-addstandard p { margin: 0; }
.vg-addstandard svg { display: block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vg-addstandard .vg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.vg-addstandard .vg-lbl {
  font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--vg-slate);
}
.vg-addstandard .vg-eyebrow {
  font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--vg-slate);
}
.vg-addstandard .vg-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Backing sheet and the paper sheet (white in both themes). */
.vg-addstandard .vg-back {
  position: absolute; inset: 0; transform: translate(12px, 12px);
  border-radius: 8px; border: 1px solid var(--vg-back-line); background: var(--vg-back-bg);
}
.vg-addstandard .vg-sheet {
  position: relative; overflow: hidden; border-radius: 8px;
  border: 1px solid var(--vg-line); background: #fff;
  box-shadow: 0 40px 50px -8px var(--vg-shadow), 0 20px 25px -5px var(--vg-shadow), 0 8px 10px -6px var(--vg-shadow);
  container-type: inline-size;
}
/* Every layer shares one grid cell, so the sheet is always as tall as its
   tallest state and never changes height during the loop. */
.vg-addstandard .vg-stack { display: grid; }
.vg-addstandard .vg-stack > * { grid-area: 1 / 1; min-width: 0; }
.vg-addstandard .vg-layer { align-self: start; opacity: 0; transition: opacity 260ms ease; }
.vg-addstandard .vg-swap { display: inline-grid; }
.vg-addstandard .vg-swap > * { grid-area: 1 / 1; transition: opacity 220ms ease; }

/* Buttons (components/ui/Button, size sm) */
.vg-addstandard .vg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 8px; border: 1px solid transparent; padding: 6px 11px;
  font-weight: 500; font-size: 13px; line-height: 1.2; white-space: nowrap;
  transition: box-shadow 180ms ease, transform 180ms ease, opacity 220ms ease;
}
.vg-addstandard .vg-btn svg { width: 15px; height: 15px; }
.vg-addstandard .vg-btn-primary { background: var(--vg-ink); color: #fff; }
.vg-addstandard .vg-btn-secondary { background: var(--vg-tint); color: var(--vg-ink); border-color: var(--vg-line); }
.vg-addstandard .vg-btn-ghost { background: transparent; color: var(--vg-ink); }
.vg-addstandard .vg-sbtn {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 8px; border: 1px solid var(--vg-line);
  background: var(--vg-tint); padding: 5px 9px; font-size: 12px; font-weight: 500; line-height: 1.2; white-space: nowrap;
}
.vg-addstandard .vg-sbtn svg { width: 13px; height: 13px; }
.vg-addstandard .vg-mgr {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; border-radius: 8px; border: 1px solid var(--vg-line);
  background: var(--vg-tint); padding: 5px 10px; font-size: 13px; color: var(--vg-slate); white-space: nowrap;
}
.vg-addstandard .vg-mgr svg { width: 15px; height: 15px; }
.vg-addstandard .vg-x { width: 22px; height: 22px; color: var(--vg-slate); }
.vg-addstandard .vg-link { color: var(--vg-blue); }

/* ---------- Draft page (ProjectDraftPage.jsx + ProjectRevisionView.jsx) ---------- */
.vg-addstandard .vg-page { padding: 14px 14px 18px; }
.vg-addstandard .vg-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--vg-line); border-radius: 12px; padding: 10px 12px;
}
.vg-addstandard .vg-bar-l { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.vg-addstandard .vg-bar-r { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.vg-addstandard .vg-badge {
  border-radius: 4px; background: var(--vg-warn-bg); color: var(--vg-warn-text); padding: 4px 8px;
  font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; line-height: 1.5;
}
.vg-addstandard .vg-notice-slot { margin-top: 10px; }
.vg-addstandard .vg-notice {
  border-left: 2px solid var(--vg-line); padding-left: 12px; font-size: 14px; line-height: 1.45; color: var(--vg-slate);
  opacity: 0; transition: opacity 320ms ease;
}
.vg-addstandard.vg-noticed .vg-notice { opacity: 1; }

.vg-addstandard .vg-tb { margin-top: 10px; border: 1px solid var(--vg-line); border-radius: 12px; padding: 14px 16px 16px; }
.vg-addstandard .vg-h1 {
  margin-top: 6px; font-family: "Barlow Condensed", ui-sans-serif, sans-serif; font-weight: 700;
  font-size: 30px; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase;
}
.vg-addstandard .vg-cells { display: flex; gap: 28px; margin-top: 12px; padding: 9px 0; border-top: 1px solid var(--vg-line); border-bottom: 1px solid var(--vg-line); }
.vg-addstandard .vg-cell-v { margin-top: 2px; font-family: var(--vg-mono); font-size: 14px; }
.vg-addstandard .vg-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.vg-addstandard .vg-tile { border: 1px solid var(--vg-line); border-radius: 8px; padding: 9px 11px; min-width: 0; }
.vg-addstandard .vg-tile-l { display: flex; align-items: center; gap: 5px; font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vg-slate); }
.vg-addstandard .vg-tile-l svg { width: 13px; height: 13px; }
.vg-addstandard .vg-tile-v { margin-top: 6px; font-family: "Barlow Condensed", ui-sans-serif, sans-serif; font-weight: 700; font-size: 28px; line-height: 1; }
.vg-addstandard .vg-tile-ok { background: oklch(0.485 0.092 164 / 0.07); }
.vg-addstandard .vg-tile-ok .vg-tile-v { color: var(--vg-added); }
.vg-addstandard .vg-tile-spec { transition: box-shadow 400ms ease; }
.vg-addstandard.vg-flash .vg-tile-spec { box-shadow: 0 0 0 2px oklch(0.535 0.155 247 / 0.35); }

.vg-addstandard .vg-sechead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 18px; }
.vg-addstandard .vg-sechead-l { display: flex; align-items: center; gap: 7px; color: var(--vg-slate); }
.vg-addstandard .vg-sechead-l svg { width: 15px; height: 15px; }
.vg-addstandard .vg-sechead-l p { font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
.vg-addstandard .vg-sechead-r { display: flex; align-items: center; gap: 7px; }
.vg-addstandard.vg-press-add .vg-add-btn { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vg-blue); transform: translateY(1px); }

.vg-addstandard .vg-reg { margin-top: 12px; display: grid; gap: 10px; }
.vg-addstandard .vg-sec { border: 1px solid var(--vg-line); border-radius: 12px; overflow: hidden; background: #fff; }
.vg-addstandard .vg-sec-h { display: flex; align-items: center; gap: 10px; padding: 9px 14px; }
.vg-addstandard .vg-sec-h > svg { width: 15px; height: 15px; color: var(--vg-slate); }
.vg-addstandard .vg-open > .vg-sec-h > svg { transform: rotate(90deg); }
.vg-addstandard .vg-sec-n { flex: 1; font-size: 14px; font-weight: 600; }
.vg-addstandard .vg-sec-c { flex-shrink: 0; font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vg-slate); }
.vg-addstandard .vg-sec-body { border-top: 1px solid var(--vg-line); }
.vg-addstandard .vg-subs { padding: 8px; display: grid; gap: 8px; }
.vg-addstandard .vg-rows > * + * { border-top: 1px solid var(--vg-line); }
.vg-addstandard .vg-row { padding: 11px 14px; transition: background-color 900ms ease; }
.vg-addstandard .vg-row-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.vg-addstandard .vg-row-name { font-size: 14px; font-weight: 600; color: var(--vg-blue); }
.vg-addstandard .vg-chip {
  flex-shrink: 0; border-radius: 4px; background: var(--vg-tint2); padding: 2px 6px;
  font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vg-slate);
}
.vg-addstandard .vg-row-desc { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--vg-slate); }
.vg-addstandard .vg-ds {
  margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  border: 1px solid var(--vg-line); border-radius: 8px; background: var(--vg-tint); padding: 6px 10px;
}
.vg-addstandard .vg-ds-n { font-size: 13px; font-weight: 500; color: var(--vg-blue); }
.vg-addstandard .vg-ds-r { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.vg-addstandard .vg-pill {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 4px; padding: 2px 6px;
  background: oklch(0.485 0.092 164 / 0.1); color: var(--vg-added);
  font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.vg-addstandard .vg-pill svg { width: 12px; height: 12px; }
.vg-addstandard .vg-rbtn { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; border: 1px solid var(--vg-line); background: #fff; padding: 3px 8px; font-size: 12px; font-weight: 500; }
.vg-addstandard .vg-rbtn svg { width: 12px; height: 12px; }
.vg-addstandard .vg-acts { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 7px; }
.vg-addstandard .vg-hl { background: oklch(0.535 0.155 247 / 0.07); }
.vg-addstandard.vg-settled .vg-hl { background: transparent; }

.vg-addstandard .vg-reg-before { opacity: 1; }
.vg-addstandard.vg-added .vg-reg-before { opacity: 0; }
.vg-addstandard.vg-added .vg-reg-after { opacity: 1; }
.vg-addstandard .vg-v8 { opacity: 1; }
.vg-addstandard .vg-v9 { opacity: 0; }
.vg-addstandard.vg-added .vg-v8 { opacity: 0; }
.vg-addstandard.vg-added .vg-v9 { opacity: 1; }

/* ---------- Dialogs (ResponsiveDialog) ---------- */
.vg-addstandard .vg-modal {
  display: flex; align-items: flex-start; justify-content: center; padding: 14px 12px;
  background: oklch(0.268 0.027 247 / 0.32); opacity: 0; transition: opacity 260ms ease;
  position: relative; pointer-events: none;
}
.vg-addstandard .vg-m1 { z-index: 2; }
.vg-addstandard .vg-m2 { z-index: 3; padding-top: 40px; }
.vg-addstandard.vg-browser .vg-m1 { opacity: 1; }
.vg-addstandard.vg-assign .vg-m2 { opacity: 1; }
.vg-addstandard .vg-dlg {
  width: 100%; background: #fff; border: 1px solid var(--vg-line); border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 25px -5px oklch(0.268 0.027 247 / 0.2);
  transform: translateY(8px) scale(0.985); transition: transform 260ms ease;
}
.vg-addstandard .vg-m2 .vg-dlg { max-width: 470px; }
.vg-addstandard.vg-browser .vg-m1 .vg-dlg, .vg-addstandard.vg-assign .vg-m2 .vg-dlg { transform: none; }
.vg-addstandard .vg-dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 13px 16px 12px; border-bottom: 1px solid var(--vg-line); }
.vg-addstandard .vg-dlg-hl { min-width: 0; flex: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.vg-addstandard .vg-b-title { font-size: 19px; font-weight: 700; line-height: 1.2; }
.vg-addstandard .vg-sub { margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--vg-slate); }
.vg-addstandard .vg-a-title {
  margin-top: 3px; font-family: "Barlow Condensed", ui-sans-serif, sans-serif; font-weight: 700;
  font-size: 21px; line-height: 1.05; text-transform: uppercase; letter-spacing: -0.005em;
}
.vg-addstandard .vg-dlg-body { padding: 14px 16px; }
.vg-addstandard .vg-dlg-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 11px 16px 13px; border-top: 1px solid var(--vg-line); }

/* Browser: search, filter, tabs, register */
.vg-addstandard .vg-filters { display: flex; gap: 10px; }
.vg-addstandard .vg-field {
  position: relative; display: flex; align-items: center; gap: 8px; min-width: 0;
  border: 1px solid var(--vg-line); border-radius: 8px; background: #fff;
  padding: 8px 10px; font-size: 13px; line-height: 1.35;
  transition: box-shadow 180ms ease, border-color 180ms ease;
}
.vg-addstandard .vg-field > svg { width: 17px; height: 17px; color: var(--vg-slate); }
.vg-addstandard .vg-search { flex: 1; }
.vg-addstandard .vg-filter { flex: 0 0 40%; }
.vg-addstandard.vg-typing .vg-search { border-color: var(--vg-blue); box-shadow: 0 0 0 3px oklch(0.535 0.155 247 / 0.2); }
.vg-addstandard .vg-ph { color: oklch(0.52 0.031 247 / 0.8); }
.vg-addstandard .vg-typed-wrap { display: grid; flex: 1; min-width: 0; }
.vg-addstandard .vg-typed-wrap > span { grid-area: 1 / 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vg-addstandard .vg-ghost { visibility: hidden; }
.vg-addstandard .vg-caret { display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -0.15em; background: var(--vg-ink); opacity: 0; }
.vg-addstandard.vg-typing .vg-caret { opacity: 1; }
.vg-addstandard .vg-clear { opacity: 0; transition: opacity 180ms ease; }
.vg-addstandard.vg-results .vg-clear { opacity: 1; }

.vg-addstandard .vg-tabs {
  display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px; margin-bottom: 14px;
  border-bottom: 1px solid var(--vg-line);
}
.vg-addstandard .vg-tab {
  margin-bottom: -1px; padding-bottom: 8px; border-bottom: 2px solid transparent;
  font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vg-slate);
  transition: color 220ms ease, border-color 220ms ease, box-shadow 180ms ease;
}
.vg-addstandard .vg-tab-company { color: var(--vg-ink); border-bottom-color: var(--vg-ink); }
.vg-addstandard.vg-tab-global .vg-tab-company { color: var(--vg-slate); border-bottom-color: transparent; }
.vg-addstandard.vg-tab-global .vg-tab-glob { color: var(--vg-ink); border-bottom-color: var(--vg-ink); }
.vg-addstandard.vg-press-gtab .vg-tab-glob { box-shadow: 0 0 0 2px var(--vg-blue); border-radius: 3px; }

.vg-addstandard .vg-p-comp { opacity: 1; }
.vg-addstandard.vg-tab-global .vg-p-comp { opacity: 0; }
.vg-addstandard.vg-tab-global .vg-p-gbrowse { opacity: 1; }
.vg-addstandard.vg-tab-global.vg-results .vg-p-gbrowse { opacity: 0; }
.vg-addstandard.vg-tab-global.vg-results .vg-p-gsearch { opacity: 1; }

/* Register (HierarchicalStandardList.jsx) */
.vg-addstandard .vg-hreg { border: 1px solid var(--vg-line); border-radius: 8px; overflow: hidden; background: #fff; }
.vg-addstandard .vg-libh { display: flex; align-items: stretch; background: var(--vg-tint); }
.vg-addstandard .vg-libh-b { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; }
.vg-addstandard .vg-libh-n { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.vg-addstandard .vg-libname { font-family: var(--vg-mono); font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.vg-addstandard .vg-libcount { font-family: var(--vg-mono); font-size: 12px; letter-spacing: 0.15em; color: var(--vg-slate); }
.vg-addstandard .vg-chev { width: 14px; height: 14px; color: var(--vg-slate); }
.vg-addstandard .vg-libh .vg-chev, .vg-addstandard .vg-cat.vg-open > .vg-cath .vg-chev { transform: rotate(180deg); }
.vg-addstandard .vg-param {
  display: flex; align-items: center; padding: 0 14px; border-left: 1px solid var(--vg-line);
  font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-blue);
}
.vg-addstandard .vg-libbody { padding: 5px 6px 6px; display: grid; gap: 2px; }
.vg-addstandard .vg-cat { margin-left: 4px; }
.vg-addstandard .vg-cath { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 10px; border-radius: 4px; }
.vg-addstandard .vg-cath-n { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.vg-addstandard .vg-catname { font-family: var(--vg-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.vg-addstandard .vg-catcount { font-family: var(--vg-mono); font-size: 12px; color: var(--vg-slate); }
.vg-addstandard .vg-catp { margin-left: 10px; padding-left: 8px; border-left: 1px solid var(--vg-line); }
.vg-addstandard .vg-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 8px 10px; }
.vg-addstandard .vg-item-l { min-width: 0; flex: 1; }
.vg-addstandard .vg-name { font-size: 14px; font-weight: 500; line-height: 1.3; }
.vg-addstandard .vg-desc {
  margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--vg-slate);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vg-addstandard.vg-press-row .vg-row-add { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vg-blue); transform: translateY(1px); }
.vg-addstandard.vg-press-row .vg-hit { background: var(--vg-tint); }

/* Add dialog (CategoryAssignmentModal.jsx, import mode) */
.vg-addstandard .vg-a-eyebrow { font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--vg-slate); }
.vg-addstandard .vg-stdblock { border-top: 1px solid var(--vg-line); border-bottom: 1px solid var(--vg-line); padding: 11px 0; }
.vg-addstandard .vg-std-n { margin-top: 4px; font-family: var(--vg-mono); font-size: 14px; }
.vg-addstandard .vg-std-m { margin-top: 4px; font-size: 12px; color: var(--vg-slate); }
.vg-addstandard .vg-lic { margin-top: 10px; display: grid; gap: 2px; font-size: 12px; line-height: 1.55; color: var(--vg-slate); }
.vg-addstandard .vg-lic u { color: var(--vg-blue); }
.vg-addstandard .vg-form { margin-top: 14px; display: grid; gap: 14px; }
.vg-addstandard .vg-flbl { font-size: 14px; font-weight: 500; margin-bottom: 5px; }
.vg-addstandard .vg-flbl span { color: var(--vg-slate); font-weight: 400; }
.vg-addstandard .vg-help { margin-top: 7px; display: flex; align-items: flex-start; gap: 7px; border-radius: 8px; background: var(--vg-tint2); padding: 7px 8px; font-size: 12px; line-height: 1.45; color: var(--vg-slate); }
.vg-addstandard .vg-help svg { width: 15px; height: 15px; margin-top: 1px; }
.vg-addstandard .vg-revh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.vg-addstandard .vg-revh-l { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; }
.vg-addstandard .vg-revh-l svg { width: 15px; height: 15px; color: var(--vg-slate); }
.vg-addstandard .vg-revh-r { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--vg-blue); }
.vg-addstandard .vg-revh-r svg { width: 12px; height: 12px; }
.vg-addstandard .vg-revs { border: 1px solid var(--vg-line); border-radius: 8px; overflow: hidden; }
.vg-addstandard .vg-rev { padding: 8px 12px; background: var(--vg-tint); }
.vg-addstandard .vg-rev + .vg-rev { border-top: 1px solid var(--vg-line); }
.vg-addstandard .vg-rev-sel { background: var(--vg-tint2); box-shadow: inset 2px 0 0 var(--vg-blue); }
.vg-addstandard .vg-rev-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vg-addstandard .vg-rev-l { display: flex; align-items: center; gap: 8px; }
.vg-addstandard .vg-rev-code { font-family: var(--vg-mono); font-size: 14px; font-weight: 600; }
.vg-addstandard .vg-rev-sel .vg-rev-code { color: var(--vg-blue); }
.vg-addstandard .vg-sev { font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-major); }
.vg-addstandard .vg-latest { font-family: var(--vg-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-added); }
.vg-addstandard .vg-rev-top > svg { width: 15px; height: 15px; color: var(--vg-blue); }
.vg-addstandard .vg-rev-s { margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--vg-slate); }
.vg-addstandard .vg-go { min-width: 118px; }
.vg-addstandard.vg-press-go .vg-go { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vg-blue); transform: translateY(1px); }
.vg-addstandard.vg-adding .vg-go, .vg-addstandard.vg-adding .vg-cancel { opacity: 0.6; }
.vg-addstandard .vg-golbl { display: grid; }
.vg-addstandard .vg-golbl > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: opacity 120ms ease; }
.vg-addstandard .vg-g1 { opacity: 0; }
.vg-addstandard.vg-adding .vg-g0 { opacity: 0; }
.vg-addstandard.vg-adding .vg-g1 { opacity: 1; }
.vg-addstandard .vg-spin { width: 14px; height: 14px; }
.vg-addstandard.vg-adding .vg-spin { animation: vg-addstandard-spin 900ms linear infinite; }
@keyframes vg-addstandard-spin { to { transform: rotate(360deg); } }

@container (max-width: 470px) {
  .vg-addstandard .vg-page { padding: 12px 10px 16px; }
  .vg-addstandard .vg-tb { padding: 12px 12px 14px; }
  .vg-addstandard .vg-h1 { font-size: 26px; }
  .vg-addstandard .vg-row { padding: 10px 11px; }
  .vg-addstandard .vg-sec-h { padding: 8px 11px; gap: 8px; }
  .vg-addstandard .vg-filters { flex-direction: column; gap: 8px; }
  .vg-addstandard .vg-filter { flex: none; }
  .vg-addstandard .vg-modal { padding: 8px 6px; }
  .vg-addstandard .vg-m2 { padding-top: 24px; }
  .vg-addstandard .vg-dlg-head, .vg-addstandard .vg-dlg-body, .vg-addstandard .vg-dlg-foot { padding-left: 12px; padding-right: 12px; }
  .vg-addstandard .vg-dlg-hl { flex-direction: column; gap: 8px; }
  .vg-addstandard .vg-tabs { gap: 6px 16px; }
  .vg-addstandard .vg-item { flex-direction: column; gap: 8px; }
  .vg-addstandard .vg-libh-b { padding: 8px 10px; }
  .vg-addstandard .vg-param { padding: 0 10px; }
  .vg-addstandard .vg-catp { margin-left: 6px; padding-left: 5px; }
  .vg-addstandard .vg-cath, .vg-addstandard .vg-item { padding-left: 7px; padding-right: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-addstandard *, .vg-addstandard *::before, .vg-addstandard *::after { transition: none !important; animation: none !important; }
}

/*
Generated by frontend/scripts/extract-vignettes.mjs from docs/mockups/vignette-apikey.html.
The mockup is the design record: change the vignette there and re-run the script.
The OS dark-scheme media block is removed: the vignette follows the app's .dark class only.
*/
/* App baseline: undo Tailwind preflight inside the figure (generated, not in the mockup). */
.vg-apikey {
  line-height: normal;
  tab-size: 8;
  font-feature-settings: normal;
  font-variation-settings: normal;
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
  margin: revert;
}
.vg-apikey :where(*), .vg-apikey :where(*)::before, .vg-apikey :where(*)::after {
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
}
.vg-apikey :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre, fieldset) { margin: revert; }
.vg-apikey :where(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; }
.vg-apikey :where(hr) { height: revert; color: revert; border-top-width: revert; }
.vg-apikey :where(a) { color: revert; -webkit-text-decoration: revert; text-decoration: revert; }
.vg-apikey :where(b, strong) { font-weight: revert; }
.vg-apikey :where(code, kbd, samp, pre) { font-family: revert; font-feature-settings: revert; font-variation-settings: revert; font-size: revert; }
.vg-apikey :where(small) { font-size: revert; }
.vg-apikey :where(sub, sup) { font-size: revert; line-height: revert; position: revert; vertical-align: revert; }
.vg-apikey :where(table) { text-indent: revert; border-color: revert; border-collapse: revert; }
.vg-apikey :where(button, input, optgroup, select, textarea) {
  font-family: revert;
  font-feature-settings: revert;
  font-variation-settings: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  color: revert;
  margin: revert;
  padding: revert;
}
.vg-apikey :where(button, select) { text-transform: revert; }
.vg-apikey :where(button, input[type="button"], input[type="reset"], input[type="submit"]) {
  appearance: revert;
  background-color: revert;
  background-image: revert;
}
.vg-apikey :where(fieldset, legend, dialog) { padding: revert; }
.vg-apikey :where(ol, ul, menu) { list-style: revert; margin: revert; padding: revert; }
.vg-apikey :where(textarea) { resize: revert; }
.vg-apikey :where(input, textarea)::placeholder { opacity: revert; color: revert; }
.vg-apikey :where(button, [role="button"], :disabled) { cursor: revert; }
.vg-apikey :where(img, svg, video, canvas, audio, iframe, embed, object) { display: revert; vertical-align: revert; }
.vg-apikey :where(img, video) { max-width: revert; height: revert; }

.vg-apikey {
  --vg-ink: oklch(0.268 0.027 247);
  --vg-blue: oklch(0.535 0.155 247);
  --vg-removed: oklch(0.472 0.142 31);
  --vg-added: oklch(0.485 0.092 164);
  --vg-slate: oklch(0.52 0.031 247);
  --vg-line: oklch(0.898 0.013 247);
  --vg-tint: oklch(0.966 0.006 247);
  --vg-tint2: oklch(0.935 0.009 247);
  --vg-back-bg: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-shadow: oklch(0.268 0.027 247 / 0.14);
  position: relative;
  margin: 0 12px 12px 0;
  font-family: Barlow, ui-sans-serif, system-ui, sans-serif;
  color: var(--vg-ink);
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] .vg-apikey, :root.dark .vg-apikey {
  --vg-back-bg: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-shadow: oklch(0 0 0 / 0.45);
}
.vg-apikey *, .vg-apikey *::before, .vg-apikey *::after { box-sizing: border-box; }
.vg-apikey p { margin: 0; }
.vg-apikey svg { display: block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vg-apikey .vg-mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.vg-apikey .vg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.vg-apikey .vg-back {
  position: absolute; inset: 0; transform: translate(12px, 12px);
  border-radius: 8px; border: 1px solid var(--vg-back-line); background: var(--vg-back-bg);
}
.vg-apikey .vg-sheet {
  position: relative; overflow: hidden; border-radius: 8px;
  border: 1px solid var(--vg-line); background: #fff;
  box-shadow: 0 40px 50px -8px var(--vg-shadow), 0 20px 25px -5px var(--vg-shadow), 0 8px 10px -6px var(--vg-shadow);
  container-type: inline-size;
}
/* Every layer shares one grid cell: the sheet is always as tall as its tallest
   state and never changes height during the loop. */
.vg-apikey .vg-stack { display: grid; }
.vg-apikey .vg-stack > * { grid-area: 1 / 1; min-width: 0; }

/* Profile page: section index and the Integrations section. */
.vg-apikey .vg-page { display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; padding: 16px; background: var(--vg-tint); }
.vg-apikey .vg-card { background: #fff; border: 1px solid var(--vg-line); border-radius: 8px; overflow: hidden; }
.vg-apikey .vg-nav { flex-shrink: 0; }
.vg-apikey .vg-nav-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-left: 2px solid transparent; border-top: 1px solid var(--vg-line);
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--vg-slate); white-space: nowrap; overflow: hidden;
}
.vg-apikey .vg-nav-row:first-child { border-top: 0; }
.vg-apikey .vg-nav-row svg { width: 18px; height: 18px; }
.vg-apikey .vg-nav-row.vg-on { border-left-color: var(--vg-blue); background: var(--vg-tint); color: var(--vg-blue); }
.vg-apikey .vg-main { min-width: 0; }

.vg-apikey .vg-titleblock { display: flex; align-items: stretch; justify-content: space-between; border-bottom: 1px solid var(--vg-line); }
.vg-apikey .vg-h2 {
  padding: 12px 18px; font-family: "Barlow Condensed", ui-sans-serif, sans-serif; font-weight: 700;
  font-size: 21px; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; align-self: center;
}
.vg-apikey .vg-onfile {
  flex-shrink: 0; border-left: 1px solid var(--vg-line); padding: 10px 14px; text-align: right;
  opacity: 0; transition: opacity 360ms ease;
}
.vg-apikey.vg-listed .vg-onfile { opacity: 1; }
.vg-apikey .vg-cell-k { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vg-slate); }
.vg-apikey .vg-cell-v { margin-top: 6px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 16px; line-height: 1; }
.vg-apikey .vg-learn {
  display: inline-block; padding: 14px 18px; font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-blue);
}
.vg-apikey .vg-empty { padding: 0 18px 28px; transition: opacity 300ms ease; }
.vg-apikey.vg-listed .vg-empty { opacity: 0; }
.vg-apikey .vg-empty p + p { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--vg-slate); max-width: 28rem; }
.vg-apikey .vg-keyrow {
  align-self: start; border-top: 1px solid var(--vg-line); padding: 12px 18px;
  opacity: 0; transform: translateY(6px); transition: opacity 420ms ease, transform 420ms ease;
}
.vg-apikey.vg-listed .vg-keyrow { opacity: 1; transform: none; }
.vg-apikey .vg-kr1, .vg-apikey .vg-kr2 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vg-apikey .vg-kr2 { margin-top: 4px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; color: var(--vg-slate); }
.vg-apikey .vg-kname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 15px; }
.vg-apikey .vg-active { flex-shrink: 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-added); }
.vg-apikey .vg-trunc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-apikey .vg-used { display: flex; flex-shrink: 0; gap: 8px; }
.vg-apikey .vg-foot { display: flex; justify-content: flex-end; border-top: 1px solid var(--vg-line); padding: 12px 18px; }

.vg-apikey .vg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 8px; border: 1px solid transparent; padding: 8px 16px;
  font-family: Barlow, ui-sans-serif, sans-serif; font-weight: 600; font-size: 14px; line-height: 1.2;
  white-space: nowrap; transition: box-shadow 180ms ease, transform 180ms ease, background-color 180ms ease, opacity 180ms ease;
}
.vg-apikey .vg-btn svg { width: 16px; height: 16px; }
.vg-apikey .vg-btn-sm { padding: 6px 12px; }
.vg-apikey .vg-btn-primary { background: var(--vg-ink); color: #fff; }
.vg-apikey .vg-btn-secondary { background: var(--vg-tint2); color: var(--vg-ink); border-color: var(--vg-line); }
.vg-apikey .vg-btn-ghost { background: transparent; color: var(--vg-ink); }
.vg-apikey .vg-press { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vg-blue); transform: translateY(1px); }
.vg-apikey.vg-p-create .vg-create-btn,
.vg-apikey.vg-p-next .vg-next-btn,
.vg-apikey.vg-p-submit .vg-submit-btn,
.vg-apikey.vg-p-copy .vg-copy-btn,
.vg-apikey.vg-p-done .vg-done-btn { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--vg-blue); transform: translateY(1px); }
.vg-apikey.vg-p-copy .vg-copy-btn { background: var(--vg-tint2); }

/* The dialog (ResponsiveDialog, size lg) over a scrim. */
.vg-apikey .vg-sheet > .vg-stack { position: relative; }
.vg-apikey .vg-modal {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 12px; background: oklch(0.268 0.027 247 / 0.32);
  opacity: 0; pointer-events: none; transition: opacity 260ms ease;
}
.vg-apikey.vg-dialog .vg-modal { opacity: 1; }
.vg-apikey .vg-dlg {
  width: 100%; max-width: 480px; background: #fff; border: 1px solid var(--vg-line);
  border-radius: 10px; box-shadow: 0 20px 25px -5px oklch(0.268 0.027 247 / 0.2);
  transform: translateY(8px) scale(0.985); transition: transform 260ms ease;
}
.vg-apikey.vg-dialog .vg-dlg { transform: none; }
.vg-apikey .vg-dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--vg-line); }
.vg-apikey .vg-eyebrow { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--vg-slate); margin-bottom: 4px; }
.vg-apikey .vg-dlg-title > span {
  font-family: "Barlow Condensed", ui-sans-serif, sans-serif; font-weight: 700; font-size: 21px;
  line-height: 1.1; text-transform: uppercase; letter-spacing: -0.01em; white-space: nowrap;
  transition: opacity 220ms ease;
}
.vg-apikey .vg-t-done { opacity: 0; }
.vg-apikey[data-step="4"] .vg-t-create { opacity: 0; }
.vg-apikey[data-step="4"] .vg-t-done { opacity: 1; }
.vg-apikey .vg-x { color: var(--vg-slate); transition: opacity 220ms ease; }
.vg-apikey .vg-x svg { width: 22px; height: 22px; }
.vg-apikey[data-step="4"] .vg-x { opacity: 0; }
.vg-apikey .vg-dlg-body { position: relative; overflow: hidden; transition: height 280ms ease; }

/* Each step is its own layer; the script sets the body to the active layer's height,
   so the card fits each step and stays centered in the frame. */
.vg-apikey .vg-layer { position: absolute; left: 0; right: 0; top: 0; padding: 18px 20px; opacity: 0; transition: opacity 150ms ease; }
.vg-apikey[data-step="1"] .vg-l1, .vg-apikey[data-step="2"] .vg-l2,
.vg-apikey[data-step="3"] .vg-l3, .vg-apikey[data-step="4"] .vg-l4 { opacity: 1; transition: opacity 220ms ease 160ms; }

.vg-apikey .vg-bar { display: flex; gap: 8px; margin-bottom: 20px; }
.vg-apikey .vg-bar span { height: 6px; flex: 1; border-radius: 999px; background: var(--vg-tint2); transition: background-color 260ms ease; }
.vg-apikey .vg-bar span.vg-done { background: var(--vg-ink); }

/* Step 1 */
.vg-apikey .vg-flabel { display: block; font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.vg-apikey .vg-req { color: var(--vg-removed); }
.vg-apikey .vg-input {
  position: relative; display: grid; border-radius: 8px; background: var(--vg-tint2);
  padding: 8px; font-size: 14px; line-height: 1.4; transition: box-shadow 180ms ease;
}
.vg-apikey .vg-input > span { grid-area: 1 / 1; min-width: 0; }
.vg-apikey .vg-input.vg-one > span { white-space: nowrap; overflow: hidden; }
.vg-apikey .vg-input.vg-area { height: calc(3 * 1.4em + 16px); overflow: hidden; align-content: start; }
.vg-apikey .vg-ghost { visibility: hidden; }
.vg-apikey .vg-ph { color: oklch(0.52 0.031 247 / 0.75); }
.vg-apikey .vg-caret { display: inline-block; width: 1px; height: 1.05em; margin-left: 1px; vertical-align: -0.18em; background: var(--vg-ink); opacity: 0; }
.vg-apikey.vg-f-name .vg-name-in, .vg-apikey.vg-f-desc .vg-desc-in { box-shadow: 0 0 0 2px var(--vg-blue); }
.vg-apikey.vg-f-name .vg-name-in .vg-caret, .vg-apikey.vg-f-desc .vg-desc-in .vg-caret { opacity: 1; }
.vg-apikey .vg-count { margin-top: 4px; font-size: 12px; color: var(--vg-slate); }
.vg-apikey .vg-f + .vg-f { margin-top: 16px; }
.vg-apikey .vg-audit { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--vg-line); font-size: 12px; line-height: 1.45; color: var(--vg-slate); }
.vg-apikey .vg-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--vg-line); }
.vg-apikey .vg-actions.vg-split { justify-content: space-between; }
.vg-apikey .vg-actions.vg-start { justify-content: flex-start; }

/* Step 2 */
.vg-apikey .vg-lead { font-size: 14px; color: var(--vg-slate); }
.vg-apikey .vg-tpl { overflow: hidden; margin-top: 16px; border-top: 1px solid var(--vg-line); border-bottom: 1px solid var(--vg-line); }
.vg-apikey .vg-tpl > div { padding: 10px 12px; transition: background-color 200ms ease; }
.vg-apikey .vg-tpl > div + div { border-top: 1px solid var(--vg-line); }
.vg-apikey .vg-tpl b { display: block; font-size: 14px; font-weight: 500; }
.vg-apikey .vg-tpl i { display: block; margin-top: 3px; font-style: normal; font-size: 12px; line-height: 1.4; color: var(--vg-slate); }
.vg-apikey.vg-pick .vg-tpl-ro { background: var(--vg-tint); }
.vg-apikey.vg-picked .vg-tpl-ro { box-shadow: inset 0 0 0 2px var(--vg-blue); }

/* Step 3 */
.vg-apikey .vg-l3-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vg-apikey .vg-selcount { font-size: 12px; font-weight: 500; color: var(--vg-blue); }
.vg-apikey .vg-viewport {
  position: relative; margin-top: 16px; height: 132px; overflow: hidden;
  border: 1px solid var(--vg-line); border-radius: 8px;
}
.vg-apikey .vg-groups { will-change: transform; }
.vg-apikey .vg-ghead {
  display: flex; align-items: center; justify-content: space-between; padding: 8px 12px;
  background: var(--vg-tint); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase; border-top: 1px solid var(--vg-line);
}
.vg-apikey .vg-groups > div:first-child .vg-ghead { border-top: 0; }
.vg-apikey .vg-ghead svg { width: 16px; height: 16px; color: var(--vg-slate); transform: rotate(180deg); }
.vg-apikey .vg-gbody { padding: 6px 12px; }
.vg-apikey .vg-perm { display: flex; align-items: center; gap: 8px; padding: 4px 4px; font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; }
.vg-apikey .vg-cb {
  width: 15px; height: 15px; border-radius: 4px; border: 1px solid oklch(0.78 0.02 247); background: #fff;
  display: grid; place-items: center; flex-shrink: 0; color: #fff;
}
.vg-apikey .vg-cb svg { width: 11px; height: 11px; stroke-width: 3; opacity: 0; }
.vg-apikey .vg-perm.vg-on .vg-cb { background: var(--vg-blue); border-color: var(--vg-blue); }
.vg-apikey .vg-perm.vg-on .vg-cb svg { opacity: 1; }
.vg-apikey .vg-submitlbl { display: grid; }
.vg-apikey .vg-submitlbl > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: opacity 120ms ease; }
.vg-apikey .vg-creating { opacity: 0; }
.vg-apikey.vg-submitting .vg-create-word { opacity: 0; }
.vg-apikey.vg-submitting .vg-creating { opacity: 1; }
.vg-apikey.vg-submitting .vg-submit-btn { opacity: 0.6; }
.vg-apikey .vg-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid oklch(1 0 0 / 0.35); border-top-color: #fff; }
.vg-apikey.vg-submitting .vg-spin { animation: vg-apikey-spin 800ms linear infinite; }
@keyframes vg-apikey-spin { to { transform: rotate(360deg); } }

/* Step 4 */
.vg-apikey .vg-made { font-size: 14px; line-height: 1.45; }
.vg-apikey .vg-made b { font-weight: 500; }
.vg-apikey .vg-keylbl { margin-top: 16px; margin-bottom: 4px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-slate); }
.vg-apikey .vg-keybox { display: flex; align-items: flex-start; gap: 8px; }
.vg-apikey .vg-code {
  flex: 1; min-width: 0; padding: 12px; border-radius: 8px; background: var(--vg-tint);
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; line-height: 1.5; word-break: break-all;
}
.vg-apikey .vg-copylbl { display: grid; }
.vg-apikey .vg-copylbl > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; transition: opacity 160ms ease; }
.vg-apikey .vg-copied { opacity: 0; }
.vg-apikey.vg-copied-on .vg-copy-word { opacity: 0; }
.vg-apikey.vg-copied-on .vg-copied { opacity: 1; }
.vg-apikey .vg-notice { margin-top: 16px; font-size: 14px; }

@container (max-width: 479px) {
  .vg-apikey .vg-nav { display: none; }
  .vg-apikey .vg-page { justify-content: center; padding: 10px; }
  .vg-apikey .vg-h2, .vg-apikey .vg-learn { padding-left: 14px; padding-right: 14px; }
  .vg-apikey .vg-empty { padding-left: 14px; padding-right: 14px; }
  .vg-apikey .vg-keyrow, .vg-apikey .vg-foot { padding-left: 14px; padding-right: 14px; }
  .vg-apikey .vg-modal { padding: 6px; }
  .vg-apikey .vg-dlg-head, .vg-apikey .vg-layer { padding-left: 14px; padding-right: 14px; }
}
@container (max-width: 359px) {
  .vg-apikey .vg-kr2 { flex-wrap: wrap; row-gap: 2px; }
  .vg-apikey .vg-dlg-title > span { font-size: 19px; }
  .vg-apikey .vg-code { font-size: 12px; padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-apikey * { transition: none !important; animation: none !important; }
}

/*
Generated by frontend/scripts/extract-vignettes.mjs from docs/mockups/vignette-convert.html.
The mockup is the design record: change the vignette there and re-run the script.
The OS dark-scheme media block is removed: the vignette follows the app's .dark class only.
*/
/* App baseline: undo Tailwind preflight inside the figure (generated, not in the mockup). */
.vg-convert {
  line-height: normal;
  tab-size: 8;
  font-feature-settings: normal;
  font-variation-settings: normal;
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
  margin: revert;
}
.vg-convert :where(*), .vg-convert :where(*)::before, .vg-convert :where(*)::after {
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
}
.vg-convert :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre, fieldset) { margin: revert; }
.vg-convert :where(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; }
.vg-convert :where(hr) { height: revert; color: revert; border-top-width: revert; }
.vg-convert :where(a) { color: revert; -webkit-text-decoration: revert; text-decoration: revert; }
.vg-convert :where(b, strong) { font-weight: revert; }
.vg-convert :where(code, kbd, samp, pre) { font-family: revert; font-feature-settings: revert; font-variation-settings: revert; font-size: revert; }
.vg-convert :where(small) { font-size: revert; }
.vg-convert :where(sub, sup) { font-size: revert; line-height: revert; position: revert; vertical-align: revert; }
.vg-convert :where(table) { text-indent: revert; border-color: revert; border-collapse: revert; }
.vg-convert :where(button, input, optgroup, select, textarea) {
  font-family: revert;
  font-feature-settings: revert;
  font-variation-settings: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  color: revert;
  margin: revert;
  padding: revert;
}
.vg-convert :where(button, select) { text-transform: revert; }
.vg-convert :where(button, input[type="button"], input[type="reset"], input[type="submit"]) {
  appearance: revert;
  background-color: revert;
  background-image: revert;
}
.vg-convert :where(fieldset, legend, dialog) { padding: revert; }
.vg-convert :where(ol, ul, menu) { list-style: revert; margin: revert; padding: revert; }
.vg-convert :where(textarea) { resize: revert; }
.vg-convert :where(input, textarea)::placeholder { opacity: revert; color: revert; }
.vg-convert :where(button, [role="button"], :disabled) { cursor: revert; }
.vg-convert :where(img, svg, video, canvas, audio, iframe, embed, object) { display: revert; vertical-align: revert; }
.vg-convert :where(img, video) { max-width: revert; height: revert; }

.vg-convert {
  --vg-ink: oklch(0.268 0.027 247);
  --vg-mist: oklch(0.94 0.01 247);
  --vg-mist-muted: oklch(0.749 0.03 247);
  --vg-term: oklch(0.268 0.027 247);
  --vg-term-line: oklch(0.268 0.027 247);
  --vg-rule: oklch(1 0 0 / 0.1);
  --vg-band: oklch(1 0 0 / 0.055);
  --vg-back-bg: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-shadow: oklch(0.268 0.027 247 / 0.16);
  position: relative;
  margin: 0 12px 12px 0;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--vg-mist);
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] .vg-convert, :root.dark .vg-convert {
  --vg-term-line: oklch(1 0 0 / 0.1);
  --vg-back-bg: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-shadow: oklch(0 0 0 / 0.45);
}
.vg-convert *, .vg-convert *::before, .vg-convert *::after { box-sizing: border-box; }
.vg-convert p { margin: 0; }
.vg-convert .vg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Backing sheet and the terminal pane (dark in both themes). */
.vg-convert .vg-back {
  position: absolute; inset: 0; transform: translate(12px, 12px);
  border-radius: 8px; border: 1px solid var(--vg-back-line); background: var(--vg-back-bg);
}
.vg-convert .vg-term {
  position: relative; overflow: hidden; border-radius: 8px;
  border: 1px solid var(--vg-term-line); background: var(--vg-term);
  box-shadow: 0 40px 50px -8px var(--vg-shadow), 0 20px 25px -5px var(--vg-shadow), 0 8px 10px -6px var(--vg-shadow);
  container-type: inline-size;
}
.vg-convert .vg-bar {
  padding: 9px 16px; border-bottom: 1px solid var(--vg-rule);
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-mist-muted);
}
.vg-convert .vg-screen { padding: 12px 0 16px; font-size: 13px; line-height: 1.55; }

/* Every line is in the flow from the start and only changes opacity, so the pane
   is always as tall as the finished transcript. */
.vg-convert .vg-ln { padding: 0 16px; opacity: 0; transition: opacity 200ms ease; }
.vg-convert .vg-ln.vg-on { opacity: 1; }
.vg-convert .vg-row { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1ch; }
.vg-convert .vg-pr { color: var(--vg-mist-muted); font-weight: 500; }
.vg-convert .vg-you { background: var(--vg-band); padding-top: 3px; padding-bottom: 3px; font-weight: 500; }
.vg-convert .vg-gap { margin-top: 10px; }
.vg-convert .vg-session { margin: 12px 16px 10px; border-top: 1px solid var(--vg-rule); opacity: 0; transition: opacity 200ms ease; }
.vg-convert .vg-session.vg-on { opacity: 1; }

/* Typed text overlays an invisible ghost of the full line; the overlay is out of
   flow, so a half-typed line can never change the line's height. Terminal input
   wraps by character. */
.vg-convert .vg-tw { position: relative; min-width: 0; white-space: pre-wrap; word-break: break-all; }
.vg-convert .vg-ghost { visibility: hidden; }
.vg-convert .vg-typed { position: absolute; inset: 0; }
.vg-convert .vg-caret { position: relative; display: inline-block; width: 0; height: 1em; vertical-align: -0.12em; opacity: 0; }
.vg-convert .vg-caret::before {
  content: ""; position: absolute; left: 0; top: 0; width: 0.6em; height: 1.2em; margin-top: -0.1em;
  background: var(--vg-mist); opacity: 0.85;
}
.vg-convert .vg-caret.vg-show { opacity: 1; }
.vg-convert .vg-caret.vg-blink { animation: vg-convert-blink 1.1s steps(1, end) infinite; }
@keyframes vg-convert-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* Shell output and the pasted prompt: whole, word-wrapped. The prompt's own line
   breaks are source wrapping, so the paste reflows to the pane's width. */
.vg-convert .vg-out { white-space: pre-wrap; overflow-wrap: anywhere; }
.vg-convert .vg-paste {
  color: var(--vg-mist-muted); font-weight: 400; font-size: 12px; line-height: 1.5;
  white-space: normal; overflow-wrap: anywhere;
}
.vg-convert .vg-paste-first { padding-top: 6px; }
.vg-convert .vg-paste-last { padding-bottom: 6px; }

/* Tool calls: dim, smaller, clipped results. */
.vg-convert .vg-tool { color: var(--vg-mist-muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.vg-convert .vg-tool b { font-weight: 500; color: var(--vg-mist); opacity: 0.8; }
.vg-convert .vg-res {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  word-break: break-all;
}
.vg-convert .vg-note { font-style: italic; }

/* The four agents. Each status cell stacks every state it will show in one grid
   area and shows one at a time, so the cell always holds the size of its longest
   state, at any width. */
.vg-convert .vg-agents { margin-top: 10px; }
.vg-convert .vg-agent + .vg-agent { margin-top: 6px; }
.vg-convert .vg-st { display: grid; min-width: 0; }
.vg-convert .vg-st > span { grid-area: 1 / 1; visibility: hidden; word-break: break-all; }
.vg-convert .vg-st > span.vg-cur { visibility: visible; }
.vg-convert .vg-st > span.vg-done { color: var(--vg-mist); font-weight: 500; }

/* The agent's answer: regular weight, word-wrapped, bullets hang. */
.vg-convert .vg-say { font-weight: 400; }
.vg-convert .vg-bul { padding-left: calc(16px + 2ch); }
.vg-convert .vg-bul .vg-row { column-gap: 1ch; }

@container (max-width: 400px) {
  .vg-convert .vg-screen { font-size: 12px; }
  .vg-convert .vg-tool, .vg-convert .vg-paste { font-size: 11px; }
  .vg-convert .vg-ln, .vg-convert .vg-bar { padding-left: 12px; padding-right: 12px; }
  .vg-convert .vg-bul { padding-left: calc(12px + 2ch); }
  .vg-convert .vg-session { margin-left: 12px; margin-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-convert .vg-ln, .vg-convert .vg-session { transition: none !important; }
  .vg-convert .vg-caret.vg-blink { animation: none !important; }
}

/*
Generated by frontend/scripts/extract-vignettes.mjs from docs/mockups/vignette-ask.html.
The mockup is the design record: change the vignette there and re-run the script.
The OS dark-scheme media block is removed: the vignette follows the app's .dark class only.
*/
/* App baseline: undo Tailwind preflight inside the figure (generated, not in the mockup). */
.vg-ask {
  line-height: normal;
  tab-size: 8;
  font-feature-settings: normal;
  font-variation-settings: normal;
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
  margin: revert;
}
.vg-ask :where(*), .vg-ask :where(*)::before, .vg-ask :where(*)::after {
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
}
.vg-ask :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre, fieldset) { margin: revert; }
.vg-ask :where(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; }
.vg-ask :where(hr) { height: revert; color: revert; border-top-width: revert; }
.vg-ask :where(a) { color: revert; -webkit-text-decoration: revert; text-decoration: revert; }
.vg-ask :where(b, strong) { font-weight: revert; }
.vg-ask :where(code, kbd, samp, pre) { font-family: revert; font-feature-settings: revert; font-variation-settings: revert; font-size: revert; }
.vg-ask :where(small) { font-size: revert; }
.vg-ask :where(sub, sup) { font-size: revert; line-height: revert; position: revert; vertical-align: revert; }
.vg-ask :where(table) { text-indent: revert; border-color: revert; border-collapse: revert; }
.vg-ask :where(button, input, optgroup, select, textarea) {
  font-family: revert;
  font-feature-settings: revert;
  font-variation-settings: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  color: revert;
  margin: revert;
  padding: revert;
}
.vg-ask :where(button, select) { text-transform: revert; }
.vg-ask :where(button, input[type="button"], input[type="reset"], input[type="submit"]) {
  appearance: revert;
  background-color: revert;
  background-image: revert;
}
.vg-ask :where(fieldset, legend, dialog) { padding: revert; }
.vg-ask :where(ol, ul, menu) { list-style: revert; margin: revert; padding: revert; }
.vg-ask :where(textarea) { resize: revert; }
.vg-ask :where(input, textarea)::placeholder { opacity: revert; color: revert; }
.vg-ask :where(button, [role="button"], :disabled) { cursor: revert; }
.vg-ask :where(img, svg, video, canvas, audio, iframe, embed, object) { display: revert; vertical-align: revert; }
.vg-ask :where(img, video) { max-width: revert; height: revert; }

.vg-ask {
  --vg-ink: oklch(0.268 0.027 247);
  --vg-slate: oklch(0.52 0.031 247);
  --vg-blue: oklch(0.535 0.155 247);
  --vg-line: oklch(0.898 0.013 247);
  --vg-tint: oklch(0.966 0.006 247);
  --vg-paper: #fff;
  --vg-backsheet: oklch(0.26 0.038 247);
  --vg-backline: oklch(0.26 0.038 247);
  --vg-shadow: oklch(0.268 0.027 247 / 0.12);
  position: relative;
  margin: 0 12px 12px 0;
  font-family: Barlow, ui-sans-serif, system-ui, sans-serif;
  color: var(--vg-ink);
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] .vg-ask, :root.dark .vg-ask {
  --vg-backsheet: oklch(0.26 0.038 247);
  --vg-backline: oklch(0.26 0.038 247);
  --vg-shadow: oklch(0 0 0 / 0.45);
}
.vg-ask *, .vg-ask *::before, .vg-ask *::after { box-sizing: border-box; }
.vg-ask p { margin: 0; }
.vg-ask svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vg-ask .vg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.vg-ask .vg-mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
/* monoTag in SynCAIChat.jsx: 10 px uppercase, 0.15em; 11 px here for the floor. */
.vg-ask .vg-tag {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--vg-slate);
}
.vg-ask .vg-muted { color: var(--vg-slate); }
.vg-ask .vg-link { color: var(--vg-blue); text-decoration: underline; }

/* Phase layers: everything a later phase shows is already in the DOM and holds
   its space; JS toggles .vg-on. Hidden layers keep their size. */
.vg-ask [data-show]:not(.vg-on) { visibility: hidden; }
.vg-ask .vg-stack { display: grid; }
.vg-ask .vg-stack > * { grid-area: 1 / 1; min-width: 0; }

/* Backing sheet and the window (paper-white in both themes). */
.vg-ask .vg-back {
  position: absolute; inset: 0; transform: translate(12px, 12px);
  border-radius: 12px; border: 1px solid var(--vg-backline); background: var(--vg-backsheet);
}
.vg-ask .vg-win {
  position: relative; overflow: hidden; border-radius: 12px;
  border: 1px solid var(--vg-line); background: var(--vg-paper);
  box-shadow: 0 25px 50px -12px var(--vg-shadow), 0 8px 10px -6px var(--vg-shadow);
  display: flex; flex-direction: column;
}

/* AIChatBubble title block */
.vg-ask .vg-grip { position: absolute; left: 0; top: 0; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: var(--vg-slate); }
.vg-ask .vg-grip svg { width: 12px; height: 12px; transform: scaleX(-1); }
.vg-ask .vg-tb { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--vg-line); }
.vg-ask .vg-tb-eyebrow { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.25em; color: var(--vg-slate); }
.vg-ask .vg-tb-title { font-family: "Barlow Condensed", ui-sans-serif, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -0.025em; text-transform: uppercase; color: var(--vg-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-ask .vg-tb-x { margin: -4px; padding: 8px; color: var(--vg-slate); flex-shrink: 0; }
.vg-ask .vg-tb-x svg { width: 24px; height: 24px; }

/* AIChatPanel status strip and credits strip */
.vg-ask .vg-strip { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--vg-line); background: var(--vg-tint); }
.vg-ask .vg-auto { display: flex; min-width: 0; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--vg-slate); }
.vg-ask .vg-auto span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-ask .vg-check { width: 14px; height: 14px; flex-shrink: 0; border-radius: 3px; border: 1px solid var(--vg-line); background: var(--vg-paper); }
.vg-ask .vg-auto svg { width: 16px; height: 16px; flex-shrink: 0; }
.vg-ask .vg-strip-btns { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; color: var(--vg-slate); }
.vg-ask .vg-strip-btns span { padding: 4px; }
.vg-ask .vg-strip-btns svg { width: 16px; height: 16px; }
.vg-ask .vg-credits { padding: 6px 12px; border-bottom: 1px solid var(--vg-line); background: var(--vg-line); }
.vg-ask .vg-credits p { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; line-height: 16px; color: var(--vg-slate); overflow-wrap: break-word; }

/* Body: the conversation layer is in flow and sets the height; the pre-send layer
   (empty state + composer being typed into) sits over it, so its composer can grow
   upward exactly as the real window's does without changing the figure. */
.vg-ask .vg-body { position: relative; background: var(--vg-tint); }
.vg-ask .vg-layer { display: flex; flex-direction: column; background: var(--vg-tint); }
.vg-ask .vg-layer-pre { position: absolute; inset: 0; }
.vg-ask .vg-list { display: flex; flex-direction: column; gap: 4px; padding: 16px; flex: 1 1 auto; min-height: 0; }
.vg-ask .vg-layer-pre .vg-list { overflow: hidden; }

/* Empty state */
.vg-ask .vg-empty { margin: auto; max-width: 280px; text-align: center; }
.vg-ask .vg-empty .vg-tag { margin-bottom: 8px; }
.vg-ask .vg-intro { margin-bottom: 12px; font-size: 12px; line-height: 16px; color: var(--vg-slate); }
.vg-ask .vg-prompt { display: block; width: 100%; margin-top: 6px; border-radius: 6px; border: 1px solid var(--vg-line); background: var(--vg-paper); padding: 8px 12px; text-align: left; font-size: 12px; line-height: 16px; color: var(--vg-ink); }

/* Messages */
.vg-ask .vg-msg { margin-bottom: 8px; }
.vg-ask .vg-msg .vg-tag { margin-bottom: 4px; }
.vg-ask .vg-you { margin-left: auto; max-width: 85%; }
.vg-ask .vg-you .vg-tag { text-align: right; }
.vg-ask .vg-card { border-radius: 8px; border: 1px solid var(--vg-line); background: var(--vg-paper); padding: 8px 12px; }
.vg-ask .vg-prose { font-size: 14px; line-height: 1.714; color: var(--vg-ink); }
.vg-ask .vg-ai { margin-right: auto; max-width: 92%; }
.vg-ask .vg-turn { display: flex; flex-direction: column; gap: 4px; }
.vg-ask .vg-traces { margin-left: 2px; border-left: 1px solid var(--vg-line); padding-left: 8px; }
.vg-ask .vg-trace { margin: 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--vg-slate); line-height: 16px; }
.vg-ask .vg-trace .vg-detail { margin-left: 4px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; text-transform: none; letter-spacing: 0; }
.vg-ask .vg-loading { margin-right: auto; }
.vg-ask .vg-loading .vg-tag { margin-bottom: 4px; }
.vg-ask .vg-load-line { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; color: var(--vg-slate); vertical-align: middle; }
.vg-ask .vg-load-line svg { width: 14px; height: 14px; }
.vg-ask.vg-run .vg-load-line svg { animation: vg-ask-spin 1s linear infinite; }
@keyframes vg-ask-spin { to { transform: rotate(360deg); } }
.vg-ask .vg-stop { margin-left: 12px; vertical-align: middle; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--vg-blue); }

/* Citation chip (useChat chipClass) and the quotation's document control */
.vg-ask .vg-chip { color: var(--vg-blue); text-decoration: underline; font-weight: 600; border-radius: 2px; }
/* The clicked chip: ChatCitationChip's focus-visible treatment (ring-2 in
   --focus-ring, light value, ring-offset-1 in Tailwind's default white,
   rounded-[2px]). A box-shadow, so it never moves a line. */
.vg-ask .vg-chip.vg-sel { box-shadow: 0 0 0 1px #fff, 0 0 0 3px oklch(0.5 0.1 247); }
.vg-ask .vg-doc { display: inline-flex; vertical-align: baseline; margin-left: 4px; color: var(--vg-slate); }
.vg-ask .vg-doc svg { width: 14px; height: 14px; transform: translateY(2px); }

/* Composer */
.vg-ask .vg-form { flex-shrink: 0; border-top: 1px solid var(--vg-line); padding: 12px; }
.vg-ask .vg-field { display: flex; align-items: flex-end; gap: 4px; border-radius: 8px; border: 1px solid var(--vg-line); background: var(--vg-paper); padding: 6px; }
.vg-ask .vg-input { min-width: 0; flex: 1; padding: 4px 6px; font-size: 14px; line-height: 20px; color: var(--vg-ink); overflow-wrap: break-word; }
.vg-ask .vg-ph { color: var(--vg-slate); }
.vg-ask .vg-caret { display: inline-block; width: 1px; height: 1.05em; margin-left: 1px; vertical-align: -0.15em; background: var(--vg-ink); }
.vg-ask .vg-send { display: inline-flex; width: 32px; height: 32px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 6px; background: var(--vg-ink); color: #fff; opacity: 0.5; }
.vg-ask .vg-send.vg-ready { opacity: 1; }
.vg-ask .vg-send svg { width: 16px; height: 16px; }
.vg-ask .vg-disc { flex-shrink: 0; padding: 0 12px 8px; text-align: center; font-size: 11px; line-height: 1.375; color: var(--vg-slate); background: var(--vg-tint); }

/* CitationResolutionModal in ResponsiveDialog, opened over the chat inside the
   window frame. Absolute, so opening it never moves anything. */
.vg-ask .vg-win { container-type: inline-size; }
.vg-ask .vg-modal { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 16px; }
.vg-ask .vg-scrim { position: absolute; inset: 0; background: oklch(0 0 0 / 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.vg-ask .vg-dlg {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 42rem; max-height: 100%;
  overflow: hidden; border-radius: 12px; background: var(--vg-paper);
  box-shadow: 0 20px 25px -5px oklch(0 0 0 / 0.1), 0 8px 10px -6px oklch(0 0 0 / 0.1);
}
.vg-ask .vg-dlg-head { display: flex; flex-shrink: 0; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--vg-line); padding: 16px 24px; }
.vg-ask .vg-dlg-eyebrow { margin-bottom: 4px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.25em; color: var(--vg-slate); }
.vg-ask .vg-dlg-title { font-family: "Barlow Condensed", ui-sans-serif, sans-serif; font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: -0.025em; text-transform: uppercase; color: var(--vg-ink); }
.vg-ask .vg-dlg-coord { display: inline-block; margin-top: 2px; }
.vg-ask .vg-dlg-x { margin: -4px; padding: 4px; flex-shrink: 0; color: var(--vg-slate); }
.vg-ask .vg-dlg-x svg { width: 24px; height: 24px; }
.vg-ask .vg-dlg-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 24px; }
.vg-ask .vg-dlg-body > * + * { margin-top: 16px; }
.vg-ask .vg-dlg-foot { display: flex; flex-shrink: 0; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--vg-line); padding: 16px 24px; }
.vg-ask .vg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; border: 1px solid var(--vg-line); background: var(--vg-line); padding: 8px 16px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--vg-ink); }
.vg-ask .vg-btn svg { width: 16px; height: 16px; }
.vg-ask .vg-note { font-size: 12px; line-height: 16px; color: var(--vg-slate); }
.vg-ask .vg-target { border-top: 1px solid var(--vg-tint); padding-top: 8px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em; color: var(--vg-slate); overflow-wrap: anywhere; }

/* StandardRenderer, compact, read-only: hanging addresses in the gutter. */
.vg-ask .vg-src { border-radius: 8px; border: 1px solid var(--vg-line); padding: 12px 16px; font-size: 14px; line-height: 20px; }
.vg-ask .vg-src h3, .vg-ask .vg-src h4 { margin-top: 24px; margin-bottom: 8px; margin-right: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--vg-ink); }
.vg-ask .vg-l1 { margin-left: 0.75rem; }
.vg-ask .vg-l2 { margin-left: 1.25rem; }
.vg-ask .vg-l3 { margin-left: 1.75rem; }
.vg-ask .vg-gut { display: inline-block; white-space: nowrap; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; color: var(--vg-slate); }
.vg-ask .vg-l1 > .vg-gut { width: 1.45rem; margin-left: -1.45rem; }
.vg-ask .vg-l2 > .vg-gut { width: 2.1rem; margin-left: -2.1rem; }
.vg-ask .vg-l3 > .vg-gut { width: 2.75rem; margin-left: -2.75rem; }
.vg-ask .vg-part { font-family: "Barlow Condensed", ui-sans-serif, sans-serif; font-size: 18px; line-height: 28px; font-weight: 700; letter-spacing: -0.025em; text-transform: uppercase; }
.vg-ask .vg-clause { margin-top: 6px; margin-bottom: 6px; line-height: 1.625; color: var(--vg-ink); }
.vg-ask .vg-ds { margin-top: 8px; border-radius: 4px; border: 1px solid var(--vg-line); background: oklch(0.898 0.013 247 / 0.5); padding: 8px; }
.vg-ask .vg-ds-label { display: block; margin-bottom: 4px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--vg-ink); }
.vg-ask .vg-select { position: relative; display: block; width: 100%; border-radius: 8px; background: var(--vg-paper); padding: 4px 8px; font-size: 12px; line-height: 16px; color: var(--vg-ink); opacity: 0.5; }
.vg-ask .vg-select svg { position: absolute; right: 8px; top: 6px; width: 12px; height: 12px; fill: var(--vg-slate); stroke: none; }

/* At sm and up the product widens the gutter and sets addresses at text-sm. */
@container (min-width: 420px) {
  .vg-ask .vg-l1 { margin-left: 1.25rem; }
  .vg-ask .vg-l2 { margin-left: 2.5rem; }
  .vg-ask .vg-l3 { margin-left: 3.75rem; }
  .vg-ask .vg-gut { font-size: 14px; }
  .vg-ask .vg-l1 > .vg-gut { width: 2rem; margin-left: -2rem; }
  .vg-ask .vg-l2 > .vg-gut { width: 2.9rem; margin-left: -2.9rem; }
  .vg-ask .vg-l3 > .vg-gut { width: 3.8rem; margin-left: -3.8rem; }
}

/* Below md the product draws ResponsiveDialog as a bottom sheet. */
@container (max-width: 419px) {
  .vg-ask .vg-modal { align-items: flex-end; padding: 0; }
  .vg-ask .vg-dlg { max-height: 90%; border-radius: 16px 16px 0 0; }
  .vg-ask .vg-dlg-head, .vg-ask .vg-dlg-foot { padding: 16px; }
  .vg-ask .vg-dlg-body { padding: 16px; }
  .vg-ask .vg-dlg-foot { flex-direction: column; }
}

/* The pointer */
.vg-ask .vg-ptr { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; }
.vg-ask .vg-ptr svg { width: 22px; height: 22px; stroke: none; position: absolute; left: 0; top: 0; }
.vg-ask .vg-ptr .vg-hand { left: -7px; top: -1px; }

@media (prefers-reduced-motion: reduce) {
  .vg-ask * { animation: none !important; transition: none !important; }
}

/*
Generated by frontend/scripts/extract-vignettes.mjs from docs/mockups/vignette-agent-api.html.
The mockup is the design record: change the vignette there and re-run the script.
The OS dark-scheme media block is removed: the vignette follows the app's .dark class only.
*/
/* App baseline: undo Tailwind preflight inside the figure (generated, not in the mockup). */
.vg-agentapi {
  line-height: normal;
  tab-size: 8;
  font-feature-settings: normal;
  font-variation-settings: normal;
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
  margin: revert;
}
.vg-agentapi :where(*), .vg-agentapi :where(*)::before, .vg-agentapi :where(*)::after {
  box-sizing: revert;
  border-width: revert;
  border-style: revert;
  border-color: revert;
}
.vg-agentapi :where(blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre, fieldset) { margin: revert; }
.vg-agentapi :where(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; }
.vg-agentapi :where(hr) { height: revert; color: revert; border-top-width: revert; }
.vg-agentapi :where(a) { color: revert; -webkit-text-decoration: revert; text-decoration: revert; }
.vg-agentapi :where(b, strong) { font-weight: revert; }
.vg-agentapi :where(code, kbd, samp, pre) { font-family: revert; font-feature-settings: revert; font-variation-settings: revert; font-size: revert; }
.vg-agentapi :where(small) { font-size: revert; }
.vg-agentapi :where(sub, sup) { font-size: revert; line-height: revert; position: revert; vertical-align: revert; }
.vg-agentapi :where(table) { text-indent: revert; border-color: revert; border-collapse: revert; }
.vg-agentapi :where(button, input, optgroup, select, textarea) {
  font-family: revert;
  font-feature-settings: revert;
  font-variation-settings: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  letter-spacing: revert;
  color: revert;
  margin: revert;
  padding: revert;
}
.vg-agentapi :where(button, select) { text-transform: revert; }
.vg-agentapi :where(button, input[type="button"], input[type="reset"], input[type="submit"]) {
  appearance: revert;
  background-color: revert;
  background-image: revert;
}
.vg-agentapi :where(fieldset, legend, dialog) { padding: revert; }
.vg-agentapi :where(ol, ul, menu) { list-style: revert; margin: revert; padding: revert; }
.vg-agentapi :where(textarea) { resize: revert; }
.vg-agentapi :where(input, textarea)::placeholder { opacity: revert; color: revert; }
.vg-agentapi :where(button, [role="button"], :disabled) { cursor: revert; }
.vg-agentapi :where(img, svg, video, canvas, audio, iframe, embed, object) { display: revert; vertical-align: revert; }
.vg-agentapi :where(img, video) { max-width: revert; height: revert; }

.vg-agentapi {
  --vg-ink: oklch(0.268 0.027 247);
  --vg-mist: oklch(0.94 0.01 247);
  --vg-mist-muted: oklch(0.749 0.03 247);
  --vg-term: oklch(0.268 0.027 247);
  --vg-term-line: oklch(0.268 0.027 247);
  --vg-rule: oklch(1 0 0 / 0.1);
  --vg-band: oklch(1 0 0 / 0.055);
  --vg-back-bg: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-shadow: oklch(0.268 0.027 247 / 0.16);
  position: relative;
  margin: 0 12px 12px 0;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--vg-mist);
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] .vg-agentapi, :root.dark .vg-agentapi {
  --vg-term-line: oklch(1 0 0 / 0.1);
  --vg-back-bg: oklch(0.26 0.038 247);
  --vg-back-line: oklch(0.26 0.038 247);
  --vg-shadow: oklch(0 0 0 / 0.45);
}
.vg-agentapi *, .vg-agentapi *::before, .vg-agentapi *::after { box-sizing: border-box; }
.vg-agentapi p { margin: 0; }
.vg-agentapi .vg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Backing sheet and the terminal pane (dark in both themes). */
.vg-agentapi .vg-back {
  position: absolute; inset: 0; transform: translate(12px, 12px);
  border-radius: 8px; border: 1px solid var(--vg-back-line); background: var(--vg-back-bg);
}
.vg-agentapi .vg-term {
  position: relative; overflow: hidden; border-radius: 8px;
  border: 1px solid var(--vg-term-line); background: var(--vg-term);
  box-shadow: 0 40px 50px -8px var(--vg-shadow), 0 20px 25px -5px var(--vg-shadow), 0 8px 10px -6px var(--vg-shadow);
  container-type: inline-size;
}
.vg-agentapi .vg-bar {
  padding: 9px 16px; border-bottom: 1px solid var(--vg-rule);
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--vg-mist-muted);
}
.vg-agentapi .vg-screen { padding: 12px 0 16px; font-size: 13px; line-height: 1.55; }

/* Every line is in the flow from the start and only changes opacity, so the pane
   is always as tall as the finished transcript. */
.vg-agentapi .vg-ln { padding: 0 16px; opacity: 0; transition: opacity 200ms ease; }
.vg-agentapi .vg-ln.vg-on { opacity: 1; }
.vg-agentapi .vg-row { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1ch; }
.vg-agentapi .vg-pr { color: var(--vg-mist-muted); font-weight: 500; }
.vg-agentapi .vg-you { background: var(--vg-band); padding-top: 3px; padding-bottom: 3px; font-weight: 500; }
.vg-agentapi .vg-gap { margin-top: 10px; }
.vg-agentapi .vg-session { margin: 12px 16px 10px; border-top: 1px solid var(--vg-rule); opacity: 0; transition: opacity 200ms ease; }
.vg-agentapi .vg-session.vg-on { opacity: 1; }

/* Typed text overlays an invisible ghost of the full line; the overlay is out of
   flow, so a half-typed line can never change the line's height. Terminal input
   wraps by character. */
.vg-agentapi .vg-tw { position: relative; min-width: 0; white-space: pre-wrap; word-break: break-all; }
.vg-agentapi .vg-ghost { visibility: hidden; }
.vg-agentapi .vg-typed { position: absolute; inset: 0; }
.vg-agentapi .vg-caret { position: relative; display: inline-block; width: 0; height: 1em; vertical-align: -0.12em; opacity: 0; }
.vg-agentapi .vg-caret::before {
  content: ""; position: absolute; left: 0; top: 0; width: 0.6em; height: 1.2em; margin-top: -0.1em;
  background: var(--vg-mist); opacity: 0.85;
}
.vg-agentapi .vg-caret.vg-show { opacity: 1; }
.vg-agentapi .vg-caret.vg-blink { animation: vg-agentapi-blink 1.1s steps(1, end) infinite; }
@keyframes vg-agentapi-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* Tool calls: dim, smaller, clipped results. */
.vg-agentapi .vg-tool { color: var(--vg-mist-muted); font-size: 12px; line-height: 1.5; }
.vg-agentapi .vg-tool b { font-weight: 500; color: var(--vg-mist); opacity: 0.8; }
.vg-agentapi .vg-res {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  word-break: break-all;
}
.vg-agentapi .vg-note { font-style: italic; }

/* The agent's answer: regular weight, word-wrapped, bullets hang. */
.vg-agentapi .vg-say { font-weight: 400; }
.vg-agentapi .vg-bul { padding-left: calc(16px + 2ch); }
.vg-agentapi .vg-bul .vg-row { column-gap: 1ch; }

@container (max-width: 400px) {
  .vg-agentapi .vg-screen { font-size: 12px; }
  .vg-agentapi .vg-tool { font-size: 11px; }
  .vg-agentapi .vg-ln, .vg-agentapi .vg-bar { padding-left: 12px; padding-right: 12px; }
  .vg-agentapi .vg-bul { padding-left: calc(12px + 2ch); }
  .vg-agentapi .vg-session { margin-left: 12px; margin-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-agentapi .vg-ln, .vg-agentapi .vg-session { transition: none !important; }
  .vg-agentapi .vg-caret.vg-blink { animation: none !important; }
}

/* GENERATED by frontend/scripts/fetch-fonts.mjs — do not edit by hand.
 *
 * Self-hosted @font-face rules for the families the design language uses: the
 * app's Barlow, Barlow Condensed and IBM Plex Mono, and the public site's
 * variable Archivo and Source Serif 4 (one file per subset, range descriptors).
 * Regenerate with: node frontend/scripts/fetch-fonts.mjs
 *
 * The files live in frontend/public/fonts/web/ and are served by nginx with
 * "expires 1y; immutable" (the woff2 extension is in the static-asset location).
 * Fonts are licensed SIL OFL 1.1 — see public/fonts/web/OFL.txt.
 */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  /* swap, not block: text is readable from the first paint. With the preloads in
     the document head the swap window is short enough to be invisible on a warm
     connection, and on a cold one readable-in-a-fallback beats invisible. */
  font-display: swap;
  src: url('/fonts/web/archivo-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  /* swap, not block: text is readable from the first paint. With the preloads in
     the document head the swap window is short enough to be invisible on a warm
     connection, and on a cold one readable-in-a-fallback beats invisible. */
  font-display: swap;
  src: url('/fonts/web/archivo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  /* swap, not block: text is readable from the first paint. With the preloads in
     the document head the swap window is short enough to be invisible on a warm
     connection, and on a cold one readable-in-a-fallback beats invisible. */
  font-display: swap;
  src: url('/fonts/web/barlow-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  /* swap, not block: text is readable from the first paint. With the preloads in
     the document head the swap window is short enough to be invisible on a warm
     connection, and on a cold one readable-in-a-fallback beats invisible. */
  font-display: swap;
  src: url('/fonts/web/barlow-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  /* swap, not block: text is readable from the first paint. With the preloads in
     the document head the swap window is short enough to be invisible on a warm
     connection, and on a cold one readable-in-a-fallback beats invisible. */
  font-display: swap;
  src: url('/fonts/web/barlow-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  /* swap, not block: text is readable from the first paint. With the preloads in
     the document head the swap window is short enough to be invisible on a warm
     connection, and on a cold one readable-in-a-fallback beats invisible. */
  font-display: swap;
  src: url('/fonts/web/barlow-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  /* swap, not block: text is readable from the first paint. With the preloads in
     the document head the swap window is short enough to be invisible on a warm
     connection, and on a cold one readable-in-a-fallback beats invisible. */
  font-display: swap;
  src: url('/fonts/web/barlow-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  /* swap, not block: text is readable from the first paint. With the preloads in
     the document head the swap window is short enough to be invisible on a warm
     connection, and on a cold one readable-in-a-fallback beats invisible. */
  font-display: swap;
  src: url('/fonts/web/barlow-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  /* swap, not block: text is readable from the first paint. With the preloads in
     the document head the swap window is short enough to be invisible on a warm
     connection, and on a cold one readable-in-a-fallback beats invisible. */
  font-display: swap;
  src: url('/fonts/web/barlow-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  /* swap, not block: text is readable from the first paint. With the preloads in
     the document head the swap window is short enough to be invisible on a warm
     connection, and on a cold one readable-in-a-fallback beats invisible. */
  font-display: swap;
  src: url('/fonts/web/barlow-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  /* swap, not block: text is readable from the first paint. With the preloads in
     the document head the swap window is short enough to be invisible on a warm
     connection, and on a cold one readable-in-a-fallback beats invisible. */
  font-display: swap;
  src: url('/fonts/web/barlow-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  /* swap, not block: text is readable from the first paint. With the preloads in
     the document head the swap window is short enough to be invisible on a warm
     connection, and on a cold one readable-in-a-fallback beats invisible. */
  font-display: swap;
  src: url('/fonts/web/barlow-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  /* swap, not block: text is readable from the first paint. With the preloads in
     the document head the swap window is short enough to be invisible on a warm
     connection, and on a cold one readable-in-a-fallback beats invisible. */
  font-display: swap;
  src: url('/fonts/web/barlow-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  /* swap, not block: text is readable from the first paint. With the preloads in
     the document head the swap window is short enough to be invisible on a warm
     connection, and on a cold one readable-in-a-fallback beats invisible. */
  font-display: swap;
  src: url('/fonts/web/barlow-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  /* swap, not block: text is readable from the first paint. With the preloads in
     the document head the swap window is short enough to be invisible on a warm
     connection, and on a cold one readable-in-a-fallback beats invisible. */
  font-display: swap;
  src: url('/fonts/web/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  /* swap, not block: text is readable from the first paint. With the preloads in
     the document head the swap window is short enough to be invisible on a warm
     connection, and on a cold one readable-in-a-fallback beats invisible. */
  font-display: swap;
  src: url('/fonts/web/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  /* swap, not block: text is readable from the first paint. With the preloads in
     the document head the swap window is short enough to be invisible on a warm
     connection, and on a cold one readable-in-a-fallback beats invisible. */
  font-display: swap;
  src: url('/fonts/web/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  /* swap, not block: text is readable from the first paint. With the preloads in
     the document head the swap window is short enough to be invisible on a warm
     connection, and on a cold one readable-in-a-fallback beats invisible. */
  font-display: swap;
  src: url('/fonts/web/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  /* swap, not block: text is readable from the first paint. With the preloads in
     the document head the swap window is short enough to be invisible on a warm
     connection, and on a cold one readable-in-a-fallback beats invisible. */
  font-display: swap;
  src: url('/fonts/web/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  /* swap, not block: text is readable from the first paint. With the preloads in
     the document head the swap window is short enough to be invisible on a warm
     connection, and on a cold one readable-in-a-fallback beats invisible. */
  font-display: swap;
  src: url('/fonts/web/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  /* swap, not block: text is readable from the first paint. With the preloads in
     the document head the swap window is short enough to be invisible on a warm
     connection, and on a cold one readable-in-a-fallback beats invisible. */
  font-display: swap;
  src: url('/fonts/web/source-serif-4-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  /* swap, not block: text is readable from the first paint. With the preloads in
     the document head the swap window is short enough to be invisible on a warm
     connection, and on a cold one readable-in-a-fallback beats invisible. */
  font-display: swap;
  src: url('/fonts/web/source-serif-4-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Self-hosted @font-face rules (generated — see scripts/fetch-fonts.mjs).
   css-loader inlines this at build time, so it costs no extra request: the
   rules land in the same extracted stylesheet the document already blocks on,
   which is the whole point of not loading them from fonts.googleapis.com.
   Must stay above the @tailwind directives — @import has to precede all other
   rules. */

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com *//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  html {
    scrollbar-gutter: stable;
  }

  /* A placeholder must never read as a value. Preflight's default (gray-400,
     L≈0.71) sits close to dark-mode body text (--text-default, L 0.88), so an
     example like "Initial creation" looked filled in while the form still
     refused to submit (fresh-eyes review 2026-09-26). The theme's muted token
     is further from both themes' text; a `placeholder:` utility still wins. */
  input::placeholder,
  textarea::placeholder {
    color: var(--text-muted);
  }
.\!container{
  width: 100% !important;
}
.container{
  width: 100%;
}
@media (min-width: 640px){

  .\!container{
    max-width: 640px !important;
  }

  .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){

  .\!container{
    max-width: 768px !important;
  }

  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){

  .\!container{
    max-width: 1024px !important;
  }

  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){

  .\!container{
    max-width: 1280px !important;
  }

  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1536px){

  .\!container{
    max-width: 1536px !important;
  }

  .container{
    max-width: 1536px;
  }
}
.prose{
  color: var(--tw-prose-body);
  max-width: 65ch;
}
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}
.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}
.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-bold);
  font-weight: 600;
}
.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-alpha;
}
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-alpha;
}
.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-roman;
}
.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-roman;
}
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-roman;
}
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-roman;
}
.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: decimal;
}
.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{
  font-weight: 400;
  color: var(--tw-prose-counters);
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{
  color: var(--tw-prose-bullets);
}
.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}
.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}
.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-inline-start: 1em;
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content: close-quote;
}
.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}
.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 900;
  color: inherit;
}
.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}
.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 800;
  color: inherit;
}
.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}
.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 700;
  color: inherit;
}
.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 700;
  color: inherit;
}
.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  padding-inline-start: 0.375em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content: "`";
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content: "`";
}
.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
  font-size: 0.875em;
}
.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
  font-size: 0.9em;
}
.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-inline-start: 1.1428571em;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content: none;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content: none;
}
.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}
.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}
.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}
.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width: 0;
}
.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  vertical-align: baseline;
}
.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}
.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  vertical-align: top;
}
.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  text-align: start;
}
.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}
.prose{
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: rgb(17 24 39 / 10%);
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}
.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0.375em;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0.375em;
}
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
}
.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 1.25em;
}
.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
}
.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 1.25em;
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.5em;
  padding-inline-start: 1.625em;
}
.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end: 0;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-top: 0.5714286em;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end: 0;
}
.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 0;
}
.prose-sm{
  font-size: 0.875rem;
  line-height: 1.7142857;
}
.prose-sm :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
}
.prose-sm :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 1.2857143em;
  line-height: 1.5555556;
  margin-top: 0.8888889em;
  margin-bottom: 0.8888889em;
}
.prose-sm :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.3333333em;
  margin-bottom: 1.3333333em;
  padding-inline-start: 1.1111111em;
}
.prose-sm :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 2.1428571em;
  margin-top: 0;
  margin-bottom: 0.8em;
  line-height: 1.2;
}
.prose-sm :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 1.4285714em;
  margin-top: 1.6em;
  margin-bottom: 0.8em;
  line-height: 1.4;
}
.prose-sm :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 1.2857143em;
  margin-top: 1.5555556em;
  margin-bottom: 0.4444444em;
  line-height: 1.5555556;
}
.prose-sm :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.4285714em;
  margin-bottom: 0.5714286em;
  line-height: 1.4285714;
}
.prose-sm :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}
.prose-sm :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}
.prose-sm :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
  margin-bottom: 0;
}
.prose-sm :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}
.prose-sm :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8571429em;
  border-radius: 0.3125rem;
  padding-top: 0.1428571em;
  padding-inline-end: 0.3571429em;
  padding-bottom: 0.1428571em;
  padding-inline-start: 0.3571429em;
}
.prose-sm :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8571429em;
}
.prose-sm :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.9em;
}
.prose-sm :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8888889em;
}
.prose-sm :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8571429em;
  line-height: 1.6666667;
  margin-top: 1.6666667em;
  margin-bottom: 1.6666667em;
  border-radius: 0.25rem;
  padding-top: 0.6666667em;
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}
.prose-sm :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
  padding-inline-start: 1.5714286em;
}
.prose-sm :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
  padding-inline-start: 1.5714286em;
}
.prose-sm :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.2857143em;
  margin-bottom: 0.2857143em;
}
.prose-sm :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0.4285714em;
}
.prose-sm :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0.4285714em;
}
.prose-sm :where(.prose-sm > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.5714286em;
  margin-bottom: 0.5714286em;
}
.prose-sm :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.1428571em;
}
.prose-sm :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 1.1428571em;
}
.prose-sm :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.1428571em;
}
.prose-sm :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 1.1428571em;
}
.prose-sm :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.5714286em;
  margin-bottom: 0.5714286em;
}
.prose-sm :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.1428571em;
  margin-bottom: 1.1428571em;
}
.prose-sm :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.1428571em;
}
.prose-sm :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.2857143em;
  padding-inline-start: 1.5714286em;
}
.prose-sm :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2.8571429em;
  margin-bottom: 2.8571429em;
}
.prose-sm :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose-sm :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose-sm :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose-sm :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose-sm :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8571429em;
  line-height: 1.5;
}
.prose-sm :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}
.prose-sm :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0;
}
.prose-sm :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end: 0;
}
.prose-sm :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-top: 0.6666667em;
  padding-inline-end: 1em;
  padding-bottom: 0.6666667em;
  padding-inline-start: 1em;
}
.prose-sm :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-start: 0;
}
.prose-sm :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-inline-end: 0;
}
.prose-sm :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
}
.prose-sm :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
  margin-bottom: 0;
}
.prose-sm :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-size: 0.8571429em;
  line-height: 1.3333333;
  margin-top: 0.6666667em;
}
.prose-sm :where(.prose-sm > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose-sm :where(.prose-sm > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 0;
}
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none{
  pointer-events: none;
}
.pointer-events-auto{
  pointer-events: auto;
}
.visible{
  visibility: visible;
}
.invisible{
  visibility: hidden;
}
.collapse{
  visibility: collapse;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.inset-0{
  inset: 0px;
}
.inset-x-0{
  left: 0px;
  right: 0px;
}
.inset-y-0{
  top: 0px;
  bottom: 0px;
}
.-left-3\.5{
  left: -0.875rem;
}
.-left-px{
  left: -1px;
}
.-right-1{
  right: -0.25rem;
}
.-right-3\.5{
  right: -0.875rem;
}
.-top-0\.5{
  top: -0.125rem;
}
.-top-1{
  top: -0.25rem;
}
.-top-\[1\.6em\]{
  top: -1.6em;
}
.bottom-0{
  bottom: 0px;
}
.bottom-1{
  bottom: 0.25rem;
}
.bottom-1\/2{
  bottom: 50%;
}
.bottom-10{
  bottom: 2.5rem;
}
.bottom-2{
  bottom: 0.5rem;
}
.bottom-3{
  bottom: 0.75rem;
}
.bottom-\[5px\]{
  bottom: 5px;
}
.bottom-\[calc\(100\%\+8px\)\]{
  bottom: calc(100% + 8px);
}
.bottom-\[calc\(4rem\+env\(safe-area-inset-bottom\)\)\]{
  bottom: calc(4rem + env(safe-area-inset-bottom));
}
.bottom-full{
  bottom: 100%;
}
.left-0{
  left: 0px;
}
.left-1\.5{
  left: 0.375rem;
}
.left-1\/2{
  left: 50%;
}
.left-2{
  left: 0.5rem;
}
.left-2\.5{
  left: 0.625rem;
}
.left-3{
  left: 0.75rem;
}
.left-4{
  left: 1rem;
}
.left-\[26px\]{
  left: 26px;
}
.left-\[calc\(50\%\+6px\)\]{
  left: calc(50% + 6px);
}
.right-0{
  right: 0px;
}
.right-1{
  right: 0.25rem;
}
.right-1\.5{
  right: 0.375rem;
}
.right-2{
  right: 0.5rem;
}
.right-2\.5{
  right: 0.625rem;
}
.right-4{
  right: 1rem;
}
.right-6{
  right: 1.5rem;
}
.right-\[136px\]{
  right: 136px;
}
.right-\[5px\]{
  right: 5px;
}
.right-\[calc\(var\(--app-shell-right\2c 0px\)\+1rem\)\]{
  right: calc(var(--app-shell-right,0px) + 1rem);
}
.right-full{
  right: 100%;
}
.top-0{
  top: 0px;
}
.top-1\.5{
  top: 0.375rem;
}
.top-1\/2{
  top: 50%;
}
.top-16{
  top: 4rem;
}
.top-2{
  top: 0.5rem;
}
.top-2\.5{
  top: 0.625rem;
}
.top-20{
  top: 5rem;
}
.top-4{
  top: 1rem;
}
.top-5{
  top: 1.25rem;
}
.top-\[-1px\]{
  top: -1px;
}
.top-\[-3px\]{
  top: -3px;
}
.top-\[10px\]{
  top: 10px;
}
.top-\[25px\]{
  top: 25px;
}
.top-\[3px\]{
  top: 3px;
}
.top-\[5\.5px\]{
  top: 5.5px;
}
.top-\[5px\]{
  top: 5px;
}
.top-\[9\.5px\]{
  top: 9.5px;
}
.top-\[calc\(100\%\+10px\)\]{
  top: calc(100% + 10px);
}
.top-\[var\(--app-header-h\2c 4rem\)\]{
  top: var(--app-header-h,4rem);
}
.top-full{
  top: 100%;
}
.top-px{
  top: 1px;
}
.z-0{
  z-index: 0;
}
.z-10{
  z-index: 10;
}
.z-20{
  z-index: 20;
}
.z-30{
  z-index: 30;
}
.z-40{
  z-index: 40;
}
.z-50{
  z-index: 50;
}
.z-\[1\]{
  z-index: 1;
}
.z-\[29\]{
  z-index: 29;
}
.z-\[2\]{
  z-index: 2;
}
.z-\[60\]{
  z-index: 60;
}
.z-\[70\]{
  z-index: 70;
}
.z-\[80\]{
  z-index: 80;
}
.order-1{
  order: 1;
}
.order-2{
  order: 2;
}
.order-3{
  order: 3;
}
.order-4{
  order: 4;
}
.col-span-1{
  grid-column: span 1 / span 1;
}
.col-span-2{
  grid-column: span 2 / span 2;
}
.col-span-3{
  grid-column: span 3 / span 3;
}
.col-span-4{
  grid-column: span 4 / span 4;
}
.col-span-6{
  grid-column: span 6 / span 6;
}
.col-span-full{
  grid-column: 1 / -1;
}
.col-start-1{
  grid-column-start: 1;
}
.col-start-2{
  grid-column-start: 2;
}
.row-span-2{
  grid-row: span 2 / span 2;
}
.row-start-1{
  grid-row-start: 1;
}
.row-start-2{
  grid-row-start: 2;
}
.float-right{
  float: right;
}
.-m-1{
  margin: -0.25rem;
}
.m-5{
  margin: 1.25rem;
}
.m-auto{
  margin: auto;
}
.-mx-1{
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-mx-2{
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.-mx-3{
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
.-mx-4{
  margin-left: -1rem;
  margin-right: -1rem;
}
.-mx-6{
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}
.-my-2{
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}
.mx-1{
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-1\.5{
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}
.mx-2{
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-4{
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-\[0\.45em\]{
  margin-left: 0.45em;
  margin-right: 0.45em;
}
.mx-\[0\.5em\]{
  margin-left: 0.5em;
  margin-right: 0.5em;
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.my-1{
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-1\.5{
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}
.my-2{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-3{
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.-mb-4{
  margin-bottom: -1rem;
}
.-mb-px{
  margin-bottom: -1px;
}
.-ml-1{
  margin-left: -0.25rem;
}
.-ml-1\.5{
  margin-left: -0.375rem;
}
.-ml-4{
  margin-left: -1rem;
}
.-ml-\[3\.5px\]{
  margin-left: -3.5px;
}
.-ml-\[4\.5px\]{
  margin-left: -4.5px;
}
.-ml-\[9px\]{
  margin-left: -9px;
}
.-ml-px{
  margin-left: -1px;
}
.-mr-0\.5{
  margin-right: -0.125rem;
}
.-mr-1{
  margin-right: -0.25rem;
}
.-mr-1\.5{
  margin-right: -0.375rem;
}
.-mt-0\.5{
  margin-top: -0.125rem;
}
.-mt-1{
  margin-top: -0.25rem;
}
.-mt-2{
  margin-top: -0.5rem;
}
.-mt-\[5px\]{
  margin-top: -5px;
}
.-mt-px{
  margin-top: -1px;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-0\.5{
  margin-bottom: 0.125rem;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.mb-1\.5{
  margin-bottom: 0.375rem;
}
.mb-2{
  margin-bottom: 0.5rem;
}
.mb-2\.5{
  margin-bottom: 0.625rem;
}
.mb-3{
  margin-bottom: 0.75rem;
}
.mb-4{
  margin-bottom: 1rem;
}
.mb-5{
  margin-bottom: 1.25rem;
}
.mb-6{
  margin-bottom: 1.5rem;
}
.mb-8{
  margin-bottom: 2rem;
}
.mb-px{
  margin-bottom: 1px;
}
.ml-0\.5{
  margin-left: 0.125rem;
}
.ml-1{
  margin-left: 0.25rem;
}
.ml-1\.5{
  margin-left: 0.375rem;
}
.ml-2{
  margin-left: 0.5rem;
}
.ml-3{
  margin-left: 0.75rem;
}
.ml-4{
  margin-left: 1rem;
}
.ml-5{
  margin-left: 1.25rem;
}
.ml-6{
  margin-left: 1.5rem;
}
.ml-\[calc\(-1\.45rem_-_var\(--gutter-x\2c 0px\)\)\]{
  margin-left: calc(-1.45rem - var(--gutter-x,0px));
}
.ml-\[calc\(-2\.1rem_-_var\(--gutter-x\2c 0px\)\)\]{
  margin-left: calc(-2.1rem - var(--gutter-x,0px));
}
.ml-\[calc\(-2\.75rem_-_var\(--gutter-x\2c 0px\)\)\]{
  margin-left: calc(-2.75rem - var(--gutter-x,0px));
}
.ml-\[calc\(-3\.4rem_-_var\(--gutter-x\2c 0px\)\)\]{
  margin-left: calc(-3.4rem - var(--gutter-x,0px));
}
.ml-\[calc\(-4\.05rem_-_var\(--gutter-x\2c 0px\)\)\]{
  margin-left: calc(-4.05rem - var(--gutter-x,0px));
}
.ml-\[calc\(-4\.7rem_-_var\(--gutter-x\2c 0px\)\)\]{
  margin-left: calc(-4.7rem - var(--gutter-x,0px));
}
.ml-\[calc\(0\.75rem_\+_var\(--gutter-x\2c 0px\)\)\]{
  margin-left: calc(0.75rem + var(--gutter-x,0px));
}
.ml-\[calc\(1\.25rem_\+_var\(--gutter-x\2c 0px\)\)\]{
  margin-left: calc(1.25rem + var(--gutter-x,0px));
}
.ml-\[calc\(1\.75rem_\+_var\(--gutter-x\2c 0px\)\)\]{
  margin-left: calc(1.75rem + var(--gutter-x,0px));
}
.ml-\[calc\(2\.25rem_\+_var\(--gutter-x\2c 0px\)\)\]{
  margin-left: calc(2.25rem + var(--gutter-x,0px));
}
.ml-\[calc\(2\.75rem_\+_var\(--gutter-x\2c 0px\)\)\]{
  margin-left: calc(2.75rem + var(--gutter-x,0px));
}
.ml-\[calc\(3\.25rem_\+_var\(--gutter-x\2c 0px\)\)\]{
  margin-left: calc(3.25rem + var(--gutter-x,0px));
}
.ml-auto{
  margin-left: auto;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-1\.5{
  margin-right: 0.375rem;
}
.mr-2{
  margin-right: 0.5rem;
}
.mr-3{
  margin-right: 0.75rem;
}
.mr-4{
  margin-right: 1rem;
}
.mr-auto{
  margin-right: auto;
}
.mt-0{
  margin-top: 0px;
}
.mt-0\.5{
  margin-top: 0.125rem;
}
.mt-1{
  margin-top: 0.25rem;
}
.mt-1\.5{
  margin-top: 0.375rem;
}
.mt-10{
  margin-top: 2.5rem;
}
.mt-12{
  margin-top: 3rem;
}
.mt-2{
  margin-top: 0.5rem;
}
.mt-2\.5{
  margin-top: 0.625rem;
}
.mt-3{
  margin-top: 0.75rem;
}
.mt-3\.5{
  margin-top: 0.875rem;
}
.mt-4{
  margin-top: 1rem;
}
.mt-5{
  margin-top: 1.25rem;
}
.mt-6{
  margin-top: 1.5rem;
}
.mt-8{
  margin-top: 2rem;
}
.mt-\[5px\]{
  margin-top: 5px;
}
.mt-px{
  margin-top: 1px;
}
.line-clamp-1{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.\!block{
  display: block !important;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.table{
  display: table;
}
.table-cell{
  display: table-cell;
}
.grid{
  display: grid;
}
.contents{
  display: contents;
}
.hidden{
  display: none;
}
.size-3{
  width: 0.75rem;
  height: 0.75rem;
}
.size-4{
  width: 1rem;
  height: 1rem;
}
.size-5{
  width: 1.25rem;
  height: 1.25rem;
}
.size-6{
  width: 1.5rem;
  height: 1.5rem;
}
.h-0{
  height: 0px;
}
.h-0\.5{
  height: 0.125rem;
}
.h-1{
  height: 0.25rem;
}
.h-1\.5{
  height: 0.375rem;
}
.h-10{
  height: 2.5rem;
}
.h-12{
  height: 3rem;
}
.h-14{
  height: 3.5rem;
}
.h-16{
  height: 4rem;
}
.h-2{
  height: 0.5rem;
}
.h-2\.5{
  height: 0.625rem;
}
.h-20{
  height: 5rem;
}
.h-28{
  height: 7rem;
}
.h-3{
  height: 0.75rem;
}
.h-3\.5{
  height: 0.875rem;
}
.h-4{
  height: 1rem;
}
.h-40{
  height: 10rem;
}
.h-5{
  height: 1.25rem;
}
.h-56{
  height: 14rem;
}
.h-6{
  height: 1.5rem;
}
.h-7{
  height: 1.75rem;
}
.h-8{
  height: 2rem;
}
.h-9{
  height: 2.25rem;
}
.h-\[11px\]{
  height: 11px;
}
.h-\[14px\]{
  height: 14px;
}
.h-\[15px\]{
  height: 15px;
}
.h-\[18px\]{
  height: 18px;
}
.h-\[22px\]{
  height: 22px;
}
.h-\[26px\]{
  height: 26px;
}
.h-\[300px\]{
  height: 300px;
}
.h-\[30px\]{
  height: 30px;
}
.h-\[34px\]{
  height: 34px;
}
.h-\[38px\]{
  height: 38px;
}
.h-\[3px\]{
  height: 3px;
}
.h-\[400px\]{
  height: 400px;
}
.h-\[5px\]{
  height: 5px;
}
.h-\[600px\]{
  height: 600px;
}
.h-\[7px\]{
  height: 7px;
}
.h-\[9px\]{
  height: 9px;
}
.h-\[calc\(100\%-64px\)\]{
  height: calc(100% - 64px);
}
.h-\[calc\(100dvh-16rem\)\]{
  height: calc(100dvh - 16rem);
}
.h-\[calc\(100vh-175px\)\]{
  height: calc(100vh - 175px);
}
.h-\[calc\(100vh-350px\)\]{
  height: calc(100vh - 350px);
}
.h-\[calc\(100vh-var\(--app-header-h\2c 4rem\)\)\]{
  height: calc(100vh - var(--app-header-h,4rem));
}
.h-\[calc\(4rem\+env\(safe-area-inset-bottom\)\)\]{
  height: calc(4rem + env(safe-area-inset-bottom));
}
.h-auto{
  height: auto;
}
.h-full{
  height: 100%;
}
.h-px{
  height: 1px;
}
.h-screen{
  height: 100vh;
}
.max-h-24{
  max-height: 6rem;
}
.max-h-40{
  max-height: 10rem;
}
.max-h-48{
  max-height: 12rem;
}
.max-h-60{
  max-height: 15rem;
}
.max-h-64{
  max-height: 16rem;
}
.max-h-72{
  max-height: 18rem;
}
.max-h-80{
  max-height: 20rem;
}
.max-h-96{
  max-height: 24rem;
}
.max-h-\[1000px\]{
  max-height: 1000px;
}
.max-h-\[160px\]{
  max-height: 160px;
}
.max-h-\[28rem\]{
  max-height: 28rem;
}
.max-h-\[300px\]{
  max-height: 300px;
}
.max-h-\[50vh\]{
  max-height: 50vh;
}
.max-h-\[60vh\]{
  max-height: 60vh;
}
.max-h-\[70dvh\]{
  max-height: 70dvh;
}
.max-h-\[80vh\]{
  max-height: 80vh;
}
.max-h-\[90dvh\]{
  max-height: 90dvh;
}
.max-h-\[calc\(100dvh-19rem\)\]{
  max-height: calc(100dvh - 19rem);
}
.max-h-\[calc\(100dvh-20rem\)\]{
  max-height: calc(100dvh - 20rem);
}
.max-h-\[calc\(100vh-5rem\)\]{
  max-height: calc(100vh - 5rem);
}
.max-h-\[calc\(100vh-var\(--app-header-h\2c 4rem\)-3\.5rem\)\]{
  max-height: calc(100vh - var(--app-header-h,4rem) - 3.5rem);
}
.min-h-0{
  min-height: 0px;
}
.min-h-8{
  min-height: 2rem;
}
.min-h-\[1\.25rem\]{
  min-height: 1.25rem;
}
.min-h-\[120px\]{
  min-height: 120px;
}
.min-h-\[2\.5rem\]{
  min-height: 2.5rem;
}
.min-h-\[26px\]{
  min-height: 26px;
}
.min-h-\[30px\]{
  min-height: 30px;
}
.min-h-\[32px\]{
  min-height: 32px;
}
.min-h-\[36px\]{
  min-height: 36px;
}
.min-h-\[38px\]{
  min-height: 38px;
}
.min-h-\[400px\]{
  min-height: 400px;
}
.min-h-\[44px\]{
  min-height: 44px;
}
.min-h-\[500px\]{
  min-height: 500px;
}
.min-h-\[60vh\]{
  min-height: 60vh;
}
.min-h-\[64px\]{
  min-height: 64px;
}
.min-h-dvh{
  min-height: 100dvh;
}
.min-h-full{
  min-height: 100%;
}
.min-h-screen{
  min-height: 100vh;
}
.w-0{
  width: 0px;
}
.w-0\.5{
  width: 0.125rem;
}
.w-1\.5{
  width: 0.375rem;
}
.w-1\/2{
  width: 50%;
}
.w-1\/3{
  width: 33.333333%;
}
.w-10{
  width: 2.5rem;
}
.w-11{
  width: 2.75rem;
}
.w-12{
  width: 3rem;
}
.w-14{
  width: 3.5rem;
}
.w-16{
  width: 4rem;
}
.w-2{
  width: 0.5rem;
}
.w-2\.5{
  width: 0.625rem;
}
.w-2\/3{
  width: 66.666667%;
}
.w-20{
  width: 5rem;
}
.w-24{
  width: 6rem;
}
.w-28{
  width: 7rem;
}
.w-3{
  width: 0.75rem;
}
.w-3\.5{
  width: 0.875rem;
}
.w-3\/4{
  width: 75%;
}
.w-32{
  width: 8rem;
}
.w-36{
  width: 9rem;
}
.w-4{
  width: 1rem;
}
.w-4\/6{
  width: 66.666667%;
}
.w-40{
  width: 10rem;
}
.w-44{
  width: 11rem;
}
.w-48{
  width: 12rem;
}
.w-5{
  width: 1.25rem;
}
.w-5\/6{
  width: 83.333333%;
}
.w-56{
  width: 14rem;
}
.w-6{
  width: 1.5rem;
}
.w-60{
  width: 15rem;
}
.w-64{
  width: 16rem;
}
.w-7{
  width: 1.75rem;
}
.w-72{
  width: 18rem;
}
.w-8{
  width: 2rem;
}
.w-80{
  width: 20rem;
}
.w-9{
  width: 2.25rem;
}
.w-96{
  width: 24rem;
}
.w-\[11px\]{
  width: 11px;
}
.w-\[150px\]{
  width: 150px;
}
.w-\[18px\]{
  width: 18px;
}
.w-\[24rem\]{
  width: 24rem;
}
.w-\[26px\]{
  width: 26px;
}
.w-\[272px\]{
  width: 272px;
}
.w-\[2px\]{
  width: 2px;
}
.w-\[30px\]{
  width: 30px;
}
.w-\[340px\]{
  width: 340px;
}
.w-\[38px\]{
  width: 38px;
}
.w-\[3px\]{
  width: 3px;
}
.w-\[7px\]{
  width: 7px;
}
.w-\[9px\]{
  width: 9px;
}
.w-\[calc\(1\.45rem_\+_var\(--gutter-x\2c 0px\)\)\]{
  width: calc(1.45rem + var(--gutter-x,0px));
}
.w-\[calc\(100\%\+2rem\)\]{
  width: calc(100% + 2rem);
}
.w-\[calc\(2\.1rem_\+_var\(--gutter-x\2c 0px\)\)\]{
  width: calc(2.1rem + var(--gutter-x,0px));
}
.w-\[calc\(2\.75rem_\+_var\(--gutter-x\2c 0px\)\)\]{
  width: calc(2.75rem + var(--gutter-x,0px));
}
.w-\[calc\(3\.4rem_\+_var\(--gutter-x\2c 0px\)\)\]{
  width: calc(3.4rem + var(--gutter-x,0px));
}
.w-\[calc\(4\.05rem_\+_var\(--gutter-x\2c 0px\)\)\]{
  width: calc(4.05rem + var(--gutter-x,0px));
}
.w-\[calc\(4\.7rem_\+_var\(--gutter-x\2c 0px\)\)\]{
  width: calc(4.7rem + var(--gutter-x,0px));
}
.w-\[min\(24rem\2c calc\(100vw-2rem\)\)\]{
  width: min(24rem, calc(100vw - 2rem));
}
.w-\[var\(--button-width\)\]{
  width: var(--button-width);
}
.w-\[var\(--input-width\)\]{
  width: var(--input-width);
}
.w-fit{
  width: fit-content;
}
.w-full{
  width: 100%;
}
.w-max{
  width: max-content;
}
.w-px{
  width: 1px;
}
.min-w-0{
  min-width: 0px;
}
.min-w-\[120px\]{
  min-width: 120px;
}
.min-w-\[128px\]{
  min-width: 128px;
}
.min-w-\[12rem\]{
  min-width: 12rem;
}
.min-w-\[14rem\]{
  min-width: 14rem;
}
.min-w-\[150px\]{
  min-width: 150px;
}
.min-w-\[16px\]{
  min-width: 16px;
}
.min-w-\[1rem\]{
  min-width: 1rem;
}
.min-w-\[200px\]{
  min-width: 200px;
}
.min-w-\[2em\]{
  min-width: 2em;
}
.min-w-\[36rem\]{
  min-width: 36rem;
}
.min-w-\[480px\]{
  min-width: 480px;
}
.min-w-\[540px\]{
  min-width: 540px;
}
.min-w-\[640px\]{
  min-width: 640px;
}
.min-w-\[8rem\]{
  min-width: 8rem;
}
.min-w-\[calc\(1\.45rem_\+_var\(--gutter-x\2c 0px\)\)\]{
  min-width: calc(1.45rem + var(--gutter-x,0px));
}
.min-w-\[calc\(2\.1rem_\+_var\(--gutter-x\2c 0px\)\)\]{
  min-width: calc(2.1rem + var(--gutter-x,0px));
}
.min-w-\[calc\(2\.75rem_\+_var\(--gutter-x\2c 0px\)\)\]{
  min-width: calc(2.75rem + var(--gutter-x,0px));
}
.min-w-\[calc\(3\.4rem_\+_var\(--gutter-x\2c 0px\)\)\]{
  min-width: calc(3.4rem + var(--gutter-x,0px));
}
.min-w-\[calc\(4\.05rem_\+_var\(--gutter-x\2c 0px\)\)\]{
  min-width: calc(4.05rem + var(--gutter-x,0px));
}
.min-w-\[calc\(4\.7rem_\+_var\(--gutter-x\2c 0px\)\)\]{
  min-width: calc(4.7rem + var(--gutter-x,0px));
}
.min-w-full{
  min-width: 100%;
}
.\!max-w-\[min\(32rem\2c calc\(100vw_-_2rem\)\)\]{
  max-width: min(32rem, calc(100vw - 2rem)) !important;
}
.max-w-2xl{
  max-width: 42rem;
}
.max-w-3xl{
  max-width: 48rem;
}
.max-w-4xl{
  max-width: 56rem;
}
.max-w-6xl{
  max-width: 72rem;
}
.max-w-7xl{
  max-width: 80rem;
}
.max-w-\[11rem\]{
  max-width: 11rem;
}
.max-w-\[12rem\]{
  max-width: 12rem;
}
.max-w-\[14rem\]{
  max-width: 14rem;
}
.max-w-\[150px\]{
  max-width: 150px;
}
.max-w-\[16rem\]{
  max-width: 16rem;
}
.max-w-\[200px\]{
  max-width: 200px;
}
.max-w-\[250px\]{
  max-width: 250px;
}
.max-w-\[280px\]{
  max-width: 280px;
}
.max-w-\[30ch\]{
  max-width: 30ch;
}
.max-w-\[34em\]{
  max-width: 34em;
}
.max-w-\[40rem\]{
  max-width: 40rem;
}
.max-w-\[46em\]{
  max-width: 46em;
}
.max-w-\[50\%\]{
  max-width: 50%;
}
.max-w-\[560px\]{
  max-width: 560px;
}
.max-w-\[56ch\]{
  max-width: 56ch;
}
.max-w-\[60ch\]{
  max-width: 60ch;
}
.max-w-\[72ch\]{
  max-width: 72ch;
}
.max-w-\[78ch\]{
  max-width: 78ch;
}
.max-w-\[80\%\]{
  max-width: 80%;
}
.max-w-\[85\%\]{
  max-width: 85%;
}
.max-w-\[90ch\]{
  max-width: 90ch;
}
.max-w-\[92\%\]{
  max-width: 92%;
}
.max-w-\[9rem\]{
  max-width: 9rem;
}
.max-w-\[calc\(100vw-2rem\)\]{
  max-width: calc(100vw - 2rem);
}
.max-w-\[calc\(100vw-3rem\)\]{
  max-width: calc(100vw - 3rem);
}
.max-w-full{
  max-width: 100%;
}
.max-w-lg{
  max-width: 32rem;
}
.max-w-md{
  max-width: 28rem;
}
.max-w-none{
  max-width: none;
}
.max-w-prose{
  max-width: 65ch;
}
.max-w-sm{
  max-width: 24rem;
}
.max-w-xl{
  max-width: 36rem;
}
.max-w-xs{
  max-width: 20rem;
}
.flex-1{
  flex: 1 1 0%;
}
.flex-\[1_1_300px\]{
  flex: 1 1 300px;
}
.flex-none{
  flex: none;
}
.flex-shrink-0{
  flex-shrink: 0;
}
.shrink{
  flex-shrink: 1;
}
.shrink-0{
  flex-shrink: 0;
}
.flex-grow{
  flex-grow: 1;
}
.grow{
  flex-grow: 1;
}
.basis-1\/2{
  flex-basis: 50%;
}
.basis-48{
  flex-basis: 12rem;
}
.basis-full{
  flex-basis: 100%;
}
.border-collapse{
  border-collapse: collapse;
}
.origin-top-left{
  transform-origin: top left;
}
.-translate-x-1\/2{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-\[1\.5px\]{
  --tw-translate-x: -1.5px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-full{
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-px{
  --tw-translate-x: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1{
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0{
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0\.5{
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1{
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-4{
  --tw-translate-x: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-5{
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-6{
  --tw-translate-x: 1.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0{
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-full{
  --tw-translate-y: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45{
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90{
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-100{
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-95{
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-scale-x-100{
  --tw-scale-x: -1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse{

  50%{
    opacity: .5;
  }
}
.animate-pulse{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin{

  to{
    transform: rotate(360deg);
  }
}
.animate-spin{
  animation: spin 1s linear infinite;
}
.cursor-default{
  cursor: default;
}
.cursor-ew-resize{
  cursor: ew-resize;
}
.cursor-grab{
  cursor: grab;
}
.cursor-grabbing{
  cursor: grabbing;
}
.cursor-help{
  cursor: help;
}
.cursor-not-allowed{
  cursor: not-allowed;
}
.cursor-ns-resize{
  cursor: ns-resize;
}
.cursor-nwse-resize{
  cursor: nwse-resize;
}
.cursor-pointer{
  cursor: pointer;
}
.touch-none{
  touch-action: none;
}
.select-none{
  -webkit-user-select: none;
          user-select: none;
}
.select-text{
  -webkit-user-select: text;
          user-select: text;
}
.select-all{
  -webkit-user-select: all;
          user-select: all;
}
.resize-none{
  resize: none;
}
.resize-y{
  resize: vertical;
}
.resize{
  resize: both;
}
.scroll-mt-16{
  scroll-margin-top: 4rem;
}
.scroll-mt-20{
  scroll-margin-top: 5rem;
}
.scroll-mt-24{
  scroll-margin-top: 6rem;
}
.scroll-mt-6{
  scroll-margin-top: 1.5rem;
}
.list-decimal{
  list-style-type: decimal;
}
.list-disc{
  list-style-type: disc;
}
.list-none{
  list-style-type: none;
}
.appearance-none{
  appearance: none;
}
.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12{
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-\[16px_44px_minmax\(0\2c 1fr\)\]{
  grid-template-columns: 16px 44px minmax(0,1fr);
}
.grid-cols-\[16px_minmax\(0\2c 1fr\)\]{
  grid-template-columns: 16px minmax(0,1fr);
}
.grid-cols-\[18px_1fr\]{
  grid-template-columns: 18px 1fr;
}
.grid-cols-\[1fr_auto\]{
  grid-template-columns: 1fr auto;
}
.grid-cols-\[1fr_auto_auto\]{
  grid-template-columns: 1fr auto auto;
}
.grid-cols-\[20px_72px_minmax\(0\2c 1fr\)\]{
  grid-template-columns: 20px 72px minmax(0,1fr);
}
.grid-cols-\[22px_56px_1fr\]{
  grid-template-columns: 22px 56px 1fr;
}
.grid-cols-\[22px_70px_1fr\]{
  grid-template-columns: 22px 70px 1fr;
}
.grid-cols-\[22px_minmax\(0\2c 1fr\)\]{
  grid-template-columns: 22px minmax(0,1fr);
}
.grid-cols-\[3px_minmax\(0\2c 1fr\)\]{
  grid-template-columns: 3px minmax(0,1fr);
}
.grid-cols-\[52px_minmax\(0\2c 1fr\)\]{
  grid-template-columns: 52px minmax(0,1fr);
}
.grid-cols-\[58px_minmax\(0\2c 1fr\)_auto\]{
  grid-template-columns: 58px minmax(0,1fr) auto;
}
.grid-cols-\[64px_minmax\(0\2c 1fr\)\]{
  grid-template-columns: 64px minmax(0,1fr);
}
.grid-cols-\[64px_minmax\(0\2c 1fr\)_150px\]{
  grid-template-columns: 64px minmax(0,1fr) 150px;
}
.grid-cols-\[auto_1fr\]{
  grid-template-columns: auto 1fr;
}
.grid-cols-\[minmax\(0\2c 1\.25fr\)_minmax\(0\2c 1fr\)\]{
  grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
}
.grid-cols-\[minmax\(0\2c 1fr\)_104px_120px\]{
  grid-template-columns: minmax(0,1fr) 104px 120px;
}
.grid-cols-\[minmax\(0\2c 1fr\)_110px\]{
  grid-template-columns: minmax(0,1fr) 110px;
}
.grid-cols-\[minmax\(0\2c 1fr\)_120px\]{
  grid-template-columns: minmax(0,1fr) 120px;
}
.grid-cols-\[minmax\(0\2c 1fr\)_120px_64px\]{
  grid-template-columns: minmax(0,1fr) 120px 64px;
}
.grid-cols-\[minmax\(0\2c 1fr\)_56px_84px_92px\]{
  grid-template-columns: minmax(0,1fr) 56px 84px 92px;
}
.grid-cols-\[minmax\(0\2c 1fr\)_72px_120px\]{
  grid-template-columns: minmax(0,1fr) 72px 120px;
}
.grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 1\.05fr\)\]{
  grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
}
.flex-row{
  flex-direction: row;
}
.flex-col{
  flex-direction: column;
}
.flex-col-reverse{
  flex-direction: column-reverse;
}
.flex-wrap{
  flex-wrap: wrap;
}
.items-start{
  align-items: flex-start;
}
.items-end{
  align-items: flex-end;
}
.items-center{
  align-items: center;
}
.items-baseline{
  align-items: baseline;
}
.items-stretch{
  align-items: stretch;
}
.justify-start{
  justify-content: flex-start;
}
.justify-end{
  justify-content: flex-end;
}
.justify-center{
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.gap-0\.5{
  gap: 0.125rem;
}
.gap-1{
  gap: 0.25rem;
}
.gap-1\.5{
  gap: 0.375rem;
}
.gap-2{
  gap: 0.5rem;
}
.gap-2\.5{
  gap: 0.625rem;
}
.gap-3{
  gap: 0.75rem;
}
.gap-3\.5{
  gap: 0.875rem;
}
.gap-4{
  gap: 1rem;
}
.gap-5{
  gap: 1.25rem;
}
.gap-6{
  gap: 1.5rem;
}
.gap-8{
  gap: 2rem;
}
.gap-\[3px\]{
  gap: 3px;
}
.gap-\[7px\]{
  gap: 7px;
}
.gap-px{
  gap: 1px;
}
.gap-x-1\.5{
  column-gap: 0.375rem;
}
.gap-x-2{
  column-gap: 0.5rem;
}
.gap-x-2\.5{
  column-gap: 0.625rem;
}
.gap-x-3{
  column-gap: 0.75rem;
}
.gap-x-3\.5{
  column-gap: 0.875rem;
}
.gap-x-4{
  column-gap: 1rem;
}
.gap-x-5{
  column-gap: 1.25rem;
}
.gap-x-6{
  column-gap: 1.5rem;
}
.gap-x-7{
  column-gap: 1.75rem;
}
.gap-x-8{
  column-gap: 2rem;
}
.gap-x-\[18px\]{
  column-gap: 18px;
}
.gap-x-\[22px\]{
  column-gap: 22px;
}
.gap-y-0\.5{
  row-gap: 0.125rem;
}
.gap-y-1{
  row-gap: 0.25rem;
}
.gap-y-1\.5{
  row-gap: 0.375rem;
}
.gap-y-2{
  row-gap: 0.5rem;
}
.gap-y-3{
  row-gap: 0.75rem;
}
.gap-y-4{
  row-gap: 1rem;
}
.gap-y-6{
  row-gap: 1.5rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-3\.5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.space-y-container > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(var(--spacing-container) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(var(--spacing-container) * var(--tw-space-y-reverse));
}
.divide-x > :not([hidden]) ~ :not([hidden]){
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-draft-line > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: oklch(0.898 0.013 247 / var(--tw-divide-opacity, 1));
}
.divide-theme-border-default > :not([hidden]) ~ :not([hidden]){
  border-color: var(--border-default);
}
.divide-theme-border-divider > :not([hidden]) ~ :not([hidden]){
  border-color: var(--border-divider);
}
.self-start{
  align-self: flex-start;
}
.self-center{
  align-self: center;
}
.justify-self-end{
  justify-self: end;
}
.overflow-auto{
  overflow: auto;
}
.overflow-hidden{
  overflow: hidden;
}
.overflow-clip{
  overflow: clip;
}
.overflow-x-auto{
  overflow-x: auto;
}
.overflow-y-auto{
  overflow-y: auto;
}
.overflow-x-hidden{
  overflow-x: hidden;
}
.overscroll-contain{
  overscroll-behavior: contain;
}
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-normal{
  white-space: normal;
}
.whitespace-nowrap{
  white-space: nowrap;
}
.whitespace-pre-line{
  white-space: pre-line;
}
.whitespace-pre-wrap{
  white-space: pre-wrap;
}
.text-balance{
  text-wrap: balance;
}
.text-pretty{
  text-wrap: pretty;
}
.break-words{
  overflow-wrap: break-word;
}
.break-all{
  word-break: break-all;
}
.rounded{
  border-radius: 0.25rem;
}
.rounded-2xl{
  border-radius: 1rem;
}
.rounded-\[2px\]{
  border-radius: 2px;
}
.rounded-\[3px\]{
  border-radius: 3px;
}
.rounded-\[4px\]{
  border-radius: 4px;
}
.rounded-full{
  border-radius: 9999px;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.rounded-md{
  border-radius: 0.375rem;
}
.rounded-sm{
  border-radius: 0.125rem;
}
.rounded-xl{
  border-radius: 0.75rem;
}
.rounded-b-xl{
  border-bottom-right-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}
.rounded-l{
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.rounded-r{
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.rounded-r-lg{
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.rounded-t{
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.rounded-t-2xl{
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.rounded-t-lg{
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.rounded-bl{
  border-bottom-left-radius: 0.25rem;
}
.rounded-br-md{
  border-bottom-right-radius: 0.375rem;
}
.border{
  border-width: 1px;
}
.border-0{
  border-width: 0px;
}
.border-2{
  border-width: 2px;
}
.border-4{
  border-width: 4px;
}
.border-\[1\.5px\]{
  border-width: 1.5px;
}
.border-x-\[5px\]{
  border-left-width: 5px;
  border-right-width: 5px;
}
.border-x-\[6px\]{
  border-left-width: 6px;
  border-right-width: 6px;
}
.border-y{
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-y-\[4px\]{
  border-top-width: 4px;
  border-bottom-width: 4px;
}
.border-y-\[5px\]{
  border-top-width: 5px;
  border-bottom-width: 5px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-b-0{
  border-bottom-width: 0px;
}
.border-b-2{
  border-bottom-width: 2px;
}
.border-l{
  border-left-width: 1px;
}
.border-l-0{
  border-left-width: 0px;
}
.border-l-2{
  border-left-width: 2px;
}
.border-l-4{
  border-left-width: 4px;
}
.border-l-\[1\.5px\]{
  border-left-width: 1.5px;
}
.border-l-\[3px\]{
  border-left-width: 3px;
}
.border-l-\[6px\]{
  border-left-width: 6px;
}
.border-l-\[7px\]{
  border-left-width: 7px;
}
.border-r{
  border-right-width: 1px;
}
.border-r-\[6px\]{
  border-right-width: 6px;
}
.border-r-\[7px\]{
  border-right-width: 7px;
}
.border-t{
  border-top-width: 1px;
}
.border-t-2{
  border-top-width: 2px;
}
.border-t-\[1\.5px\]{
  border-top-width: 1.5px;
}
.border-t-\[3px\]{
  border-top-width: 3px;
}
.border-t-\[7px\]{
  border-top-width: 7px;
}
.border-t-\[8px\]{
  border-top-width: 8px;
}
.border-solid{
  border-style: solid;
}
.border-dashed{
  border-style: dashed;
}
.border-dotted{
  border-style: dotted;
}
.border-none{
  border-style: none;
}
.border-amber-200{
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-amber-500\/20{
  border-color: rgb(245 158 11 / 0.2);
}
.border-current{
  border-color: currentColor;
}
.border-draft-ink\/25{
  border-color: oklch(0.268 0.027 247 / 0.25);
}
.border-draft-ink\/40{
  border-color: oklch(0.268 0.027 247 / 0.4);
}
.border-draft-ink\/70{
  border-color: oklch(0.268 0.027 247 / 0.7);
}
.border-draft-line{
  --tw-border-opacity: 1;
  border-color: oklch(0.898 0.013 247 / var(--tw-border-opacity, 1));
}
.border-gray-500\/30{
  border-color: rgb(107 114 128 / 0.3);
}
.border-green-500\/50{
  border-color: rgb(34 197 94 / 0.5);
}
.border-mk-accent-text{
  border-color: var(--mk-accent-text);
}
.border-mk-rule{
  border-color: var(--mk-rule);
}
.border-red-300{
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.border-red-500\/50{
  border-color: rgb(239 68 68 / 0.5);
}
.border-theme-border-accent{
  border-color: var(--border-accent);
}
.border-theme-border-accent-opacity-50{
  border-color: var(--border-accent-opacity-50);
}
.border-theme-border-default{
  border-color: var(--border-default);
}
.border-theme-border-divider{
  border-color: var(--border-divider);
}
.border-theme-border-info{
  border-color: var(--border-info);
}
.border-theme-border-input{
  border-color: var(--border-input);
}
.border-theme-border-warning{
  border-color: var(--border-warning);
}
.border-theme-field{
  border-color: var(--field);
}
.border-theme-field-ink{
  border-color: var(--field-ink);
}
.border-theme-field-rule{
  border-color: var(--field-rule);
}
.border-theme-focus-ring{
  border-color: var(--focus-ring);
}
.border-theme-status-error{
  border-color: var(--status-error);
}
.border-theme-status-info{
  border-color: var(--status-info);
}
.border-theme-status-success{
  border-color: var(--status-success);
}
.border-theme-status-warning{
  border-color: var(--status-warning);
}
.border-theme-text-accent{
  border-color: var(--text-accent);
}
.border-theme-text-heading{
  border-color: var(--text-heading);
}
.border-theme-text-link{
  border-color: var(--text-link);
}
.border-theme-text-muted{
  border-color: var(--text-muted);
}
.border-transparent{
  border-color: transparent;
}
.border-white\/10{
  border-color: rgb(255 255 255 / 0.1);
}
.border-yellow-500\/50{
  border-color: rgb(234 179 8 / 0.5);
}
.border-x-transparent{
  border-left-color: transparent;
  border-right-color: transparent;
}
.border-y-transparent{
  border-top-color: transparent;
  border-bottom-color: transparent;
}
.border-b-theme-text-heading{
  border-bottom-color: var(--text-heading);
}
.border-l-\[var\(--diff-added-border\)\]{
  border-left-color: var(--diff-added-border);
}
.border-l-\[var\(--diff-modified-border\)\]{
  border-left-color: var(--diff-modified-border);
}
.border-l-\[var\(--diff-moved-border\)\]{
  border-left-color: var(--diff-moved-border);
}
.border-l-\[var\(--diff-removed-border\)\]{
  border-left-color: var(--diff-removed-border);
}
.border-l-\[var\(--rev-add-bar\)\]{
  border-left-color: var(--rev-add-bar);
}
.border-l-theme-border-accent{
  border-left-color: var(--border-accent);
}
.border-l-theme-text-accent{
  border-left-color: var(--text-accent);
}
.border-l-transparent{
  border-left-color: transparent;
}
.border-t-theme-border-warning{
  border-top-color: var(--border-warning);
}
.border-t-theme-text-accent{
  border-top-color: var(--text-accent);
}
.border-t-theme-text-link{
  border-top-color: var(--text-link);
}
.bg-\[var\(--diff-added-bg\)\]{
  background-color: var(--diff-added-bg);
}
.bg-\[var\(--diff-modified-bg\)\]{
  background-color: var(--diff-modified-bg);
}
.bg-\[var\(--diff-moved-bg\)\]{
  background-color: var(--diff-moved-bg);
}
.bg-\[var\(--diff-removed-bg\)\]{
  background-color: var(--diff-removed-bg);
}
.bg-\[var\(--mark-add\)\]{
  background-color: var(--mark-add);
}
.bg-\[var\(--mark-del\)\]{
  background-color: var(--mark-del);
}
.bg-\[var\(--mark-mod\)\]{
  background-color: var(--mark-mod);
}
.bg-\[var\(--mark-mov\)\]{
  background-color: var(--mark-mov);
}
.bg-\[var\(--rev-add-bar\)\]{
  background-color: var(--rev-add-bar);
}
.bg-\[var\(--rev-del-bar\)\]{
  background-color: var(--rev-del-bar);
}
.bg-\[var\(--rev-del-bg\)\]{
  background-color: var(--rev-del-bg);
}
.bg-\[var\(--rev-ins-bg\)\]{
  background-color: var(--rev-ins-bg);
}
.bg-\[var\(--rev-mod-bar\)\]{
  background-color: var(--rev-mod-bar);
}
.bg-\[var\(--rev-move-bar\)\]{
  background-color: var(--rev-move-bar);
}
.bg-amber-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-500\/10{
  background-color: rgb(245 158 11 / 0.1);
}
.bg-amber-500\/20{
  background-color: rgb(245 158 11 / 0.2);
}
.bg-black\/30{
  background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/50{
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/60{
  background-color: rgb(0 0 0 / 0.6);
}
.bg-blue-100{
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-500\/20{
  background-color: rgb(59 130 246 / 0.2);
}
.bg-current{
  background-color: currentColor;
}
.bg-cyan-500\/20{
  background-color: rgb(6 182 212 / 0.2);
}
.bg-draft-blue{
  --tw-bg-opacity: 1;
  background-color: oklch(0.535 0.155 247 / var(--tw-bg-opacity, 1));
}
.bg-draft-ink{
  --tw-bg-opacity: 1;
  background-color: oklch(0.268 0.027 247 / var(--tw-bg-opacity, 1));
}
.bg-draft-line{
  --tw-bg-opacity: 1;
  background-color: oklch(0.898 0.013 247 / var(--tw-bg-opacity, 1));
}
.bg-draft-paper{
  --tw-bg-opacity: 1;
  background-color: oklch(0.986 0.002 68 / var(--tw-bg-opacity, 1));
}
.bg-draft-tint{
  --tw-bg-opacity: 1;
  background-color: oklch(0.966 0.006 247 / var(--tw-bg-opacity, 1));
}
.bg-gray-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-50{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-500{
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}
.bg-gray-500\/10{
  background-color: rgb(107 114 128 / 0.1);
}
.bg-green-100{
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-500{
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-500\/10{
  background-color: rgb(34 197 94 / 0.1);
}
.bg-orange-100{
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}
.bg-purple-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-500\/10{
  background-color: rgb(168 85 247 / 0.1);
}
.bg-purple-500\/20{
  background-color: rgb(168 85 247 / 0.2);
}
.bg-red-50{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-500{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-500\/10{
  background-color: rgb(239 68 68 / 0.1);
}
.bg-theme-bg-accent{
  background-color: var(--bg-accent);
}
.bg-theme-bg-app{
  background-color: var(--bg-app);
}
.bg-theme-bg-button-default{
  background-color: var(--bg-button-default);
}
.bg-theme-bg-hover-error{
  background-color: var(--bg-hover-error);
}
.bg-theme-bg-hover-success{
  background-color: var(--bg-hover-success);
}
.bg-theme-bg-info{
  background-color: var(--bg-info);
}
.bg-theme-bg-input{
  background-color: var(--bg-input);
}
.bg-theme-bg-overlay{
  background-color: var(--bg-overlay);
}
.bg-theme-bg-popover{
  background-color: var(--bg-popover);
}
.bg-theme-bg-primary{
  background-color: var(--bg-primary);
}
.bg-theme-bg-secondary{
  background-color: var(--bg-secondary);
}
.bg-theme-bg-tertiary{
  background-color: var(--bg-tertiary);
}
.bg-theme-bg-warning{
  background-color: var(--bg-warning);
}
.bg-theme-border-accent{
  background-color: var(--border-accent);
}
.bg-theme-border-default{
  background-color: var(--border-default);
}
.bg-theme-border-divider{
  background-color: var(--border-divider);
}
.bg-theme-field{
  background-color: var(--field);
}
.bg-theme-field-ink{
  background-color: var(--field-ink);
}
.bg-theme-gradient-primary-start{
  background-color: var(--gradient-primary-start);
}
.bg-theme-severity-major-bg{
  background-color: var(--severity-major-bg);
}
.bg-theme-severity-minor-bg{
  background-color: var(--severity-minor-bg);
}
.bg-theme-severity-patch-bg{
  background-color: var(--severity-patch-bg);
}
.bg-theme-status-error{
  background-color: var(--status-error);
}
.bg-theme-status-success{
  background-color: var(--status-success);
}
.bg-theme-status-warning{
  background-color: var(--status-warning);
}
.bg-theme-text-accent{
  background-color: var(--text-accent);
}
.bg-theme-text-button-default{
  background-color: var(--text-button-default);
}
.bg-theme-text-heading{
  background-color: var(--text-heading);
}
.bg-theme-text-info{
  background-color: var(--text-info);
}
.bg-theme-text-link{
  background-color: var(--text-link);
}
.bg-theme-text-muted{
  background-color: var(--text-muted);
}
.bg-transparent{
  background-color: transparent;
}
.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-yellow-100{
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500{
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}
.bg-yellow-500\/10{
  background-color: rgb(234 179 8 / 0.1);
}
.bg-opacity-10{
  --tw-bg-opacity: 0.1;
}
.bg-opacity-30{
  --tw-bg-opacity: 0.3;
}
.bg-gradient-to-br{
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-l{
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-r{
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-radial-center{
  background-image: radial-gradient(circle at center, var(--gradient-radial-start), var(--gradient-radial-end));
}
.from-blue-500{
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-theme-bg-app{
  --tw-gradient-from: var(--bg-app) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-theme-gradient-primary-start{
  --tw-gradient-from: var(--gradient-primary-start) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-indigo-600{
  --tw-gradient-to: #4f46e5 var(--tw-gradient-to-position);
}
.to-theme-gradient-primary-end{
  --tw-gradient-to: var(--gradient-primary-end) var(--tw-gradient-to-position);
}
.to-transparent{
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.bg-clip-text{
  -webkit-background-clip: text;
          background-clip: text;
}
.bg-no-repeat{
  background-repeat: no-repeat;
}
.fill-theme-icon-default{
  fill: var(--icon-default);
}
.fill-theme-text-default{
  fill: var(--text-default);
}
.fill-theme-text-muted{
  fill: var(--text-muted);
}
.\!p-1{
  padding: 0.25rem !important;
}
.p-0{
  padding: 0px;
}
.p-0\.5{
  padding: 0.125rem;
}
.p-1{
  padding: 0.25rem;
}
.p-1\.5{
  padding: 0.375rem;
}
.p-2{
  padding: 0.5rem;
}
.p-2\.5{
  padding: 0.625rem;
}
.p-3{
  padding: 0.75rem;
}
.p-3\.5{
  padding: 0.875rem;
}
.p-4{
  padding: 1rem;
}
.p-5{
  padding: 1.25rem;
}
.p-6{
  padding: 1.5rem;
}
.p-8{
  padding: 2rem;
}
.px-0{
  padding-left: 0px;
  padding-right: 0px;
}
.px-0\.5{
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5{
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5{
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-\[10px\]{
  padding-left: 10px;
  padding-right: 10px;
}
.px-\[14px\]{
  padding-left: 14px;
  padding-right: 14px;
}
.px-\[18px\]{
  padding-left: 18px;
  padding-right: 18px;
}
.px-\[22px\]{
  padding-left: 22px;
  padding-right: 22px;
}
.px-\[3px\]{
  padding-left: 3px;
  padding-right: 3px;
}
.px-px{
  padding-left: 1px;
  padding-right: 1px;
}
.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16{
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20{
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-24{
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5{
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-\[11px\]{
  padding-top: 11px;
  padding-bottom: 11px;
}
.py-\[13px\]{
  padding-top: 13px;
  padding-bottom: 13px;
}
.py-\[18px\]{
  padding-top: 18px;
  padding-bottom: 18px;
}
.py-\[3px\]{
  padding-top: 3px;
  padding-bottom: 3px;
}
.py-\[4px\]{
  padding-top: 4px;
  padding-bottom: 4px;
}
.py-\[7px\]{
  padding-top: 7px;
  padding-bottom: 7px;
}
.py-px{
  padding-top: 1px;
  padding-bottom: 1px;
}
.pb-0{
  padding-bottom: 0px;
}
.pb-0\.5{
  padding-bottom: 0.125rem;
}
.pb-1{
  padding-bottom: 0.25rem;
}
.pb-1\.5{
  padding-bottom: 0.375rem;
}
.pb-10{
  padding-bottom: 2.5rem;
}
.pb-12{
  padding-bottom: 3rem;
}
.pb-16{
  padding-bottom: 4rem;
}
.pb-2{
  padding-bottom: 0.5rem;
}
.pb-2\.5{
  padding-bottom: 0.625rem;
}
.pb-20{
  padding-bottom: 5rem;
}
.pb-3{
  padding-bottom: 0.75rem;
}
.pb-3\.5{
  padding-bottom: 0.875rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pb-5{
  padding-bottom: 1.25rem;
}
.pb-6{
  padding-bottom: 1.5rem;
}
.pb-8{
  padding-bottom: 2rem;
}
.pb-\[11px\]{
  padding-bottom: 11px;
}
.pb-\[calc\(4rem\+env\(safe-area-inset-bottom\)\)\]{
  padding-bottom: calc(4rem + env(safe-area-inset-bottom));
}
.pb-\[calc\(5\.5rem\+env\(safe-area-inset-bottom\)\)\]{
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
}
.pb-\[calc\(7rem\+env\(safe-area-inset-bottom\)\)\]{
  padding-bottom: calc(7rem + env(safe-area-inset-bottom));
}
.pl-0{
  padding-left: 0px;
}
.pl-1{
  padding-left: 0.25rem;
}
.pl-10{
  padding-left: 2.5rem;
}
.pl-11{
  padding-left: 2.75rem;
}
.pl-12{
  padding-left: 3rem;
}
.pl-14{
  padding-left: 3.5rem;
}
.pl-2{
  padding-left: 0.5rem;
}
.pl-2\.5{
  padding-left: 0.625rem;
}
.pl-3{
  padding-left: 0.75rem;
}
.pl-3\.5{
  padding-left: 0.875rem;
}
.pl-4{
  padding-left: 1rem;
}
.pl-5{
  padding-left: 1.25rem;
}
.pl-6{
  padding-left: 1.5rem;
}
.pl-7{
  padding-left: 1.75rem;
}
.pl-8{
  padding-left: 2rem;
}
.pl-9{
  padding-left: 2.25rem;
}
.pl-\[0\.7rem\]{
  padding-left: 0.7rem;
}
.pl-\[1\.375rem\]{
  padding-left: 1.375rem;
}
.pl-\[106px\]{
  padding-left: 106px;
}
.pl-\[26px\]{
  padding-left: 26px;
}
.pl-\[4\.625rem\]{
  padding-left: 4.625rem;
}
.pl-px{
  padding-left: 1px;
}
.pr-0\.5{
  padding-right: 0.125rem;
}
.pr-1{
  padding-right: 0.25rem;
}
.pr-1\.5{
  padding-right: 0.375rem;
}
.pr-10{
  padding-right: 2.5rem;
}
.pr-12{
  padding-right: 3rem;
}
.pr-2{
  padding-right: 0.5rem;
}
.pr-2\.5{
  padding-right: 0.625rem;
}
.pr-20{
  padding-right: 5rem;
}
.pr-3{
  padding-right: 0.75rem;
}
.pr-4{
  padding-right: 1rem;
}
.pr-5{
  padding-right: 1.25rem;
}
.pr-6{
  padding-right: 1.5rem;
}
.pr-7{
  padding-right: 1.75rem;
}
.pr-8{
  padding-right: 2rem;
}
.pr-9{
  padding-right: 2.25rem;
}
.pr-\[0\.06em\]{
  padding-right: 0.06em;
}
.pt-0{
  padding-top: 0px;
}
.pt-0\.5{
  padding-top: 0.125rem;
}
.pt-1{
  padding-top: 0.25rem;
}
.pt-1\.5{
  padding-top: 0.375rem;
}
.pt-12{
  padding-top: 3rem;
}
.pt-16{
  padding-top: 4rem;
}
.pt-2{
  padding-top: 0.5rem;
}
.pt-2\.5{
  padding-top: 0.625rem;
}
.pt-20{
  padding-top: 5rem;
}
.pt-28{
  padding-top: 7rem;
}
.pt-3{
  padding-top: 0.75rem;
}
.pt-3\.5{
  padding-top: 0.875rem;
}
.pt-4{
  padding-top: 1rem;
}
.pt-5{
  padding-top: 1.25rem;
}
.pt-6{
  padding-top: 1.5rem;
}
.pt-8{
  padding-top: 2rem;
}
.pt-\[18px\]{
  padding-top: 18px;
}
.pt-\[3px\]{
  padding-top: 3px;
}
.pt-\[9px\]{
  padding-top: 9px;
}
.pt-px{
  padding-top: 1px;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}
.align-baseline{
  vertical-align: baseline;
}
.align-top{
  vertical-align: top;
}
.align-middle{
  vertical-align: middle;
}
.align-super{
  vertical-align: super;
}
.align-\[1px\]{
  vertical-align: 1px;
}
.font-archivo{
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
}
.font-barlow{
  font-family: Barlow, ui-sans-serif, system-ui, sans-serif;
}
.font-display{
  font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
}
.font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans{
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.font-spec{
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-6xl{
  font-size: 3.75rem;
  line-height: 1;
}
.text-\[0\.3em\]{
  font-size: 0.3em;
}
.text-\[0\.65rem\]{
  font-size: 0.65rem;
}
.text-\[0\.85em\]{
  font-size: 0.85em;
}
.text-\[0\.92em\]{
  font-size: 0.92em;
}
.text-\[0px\]{
  font-size: 0px;
}
.text-\[10\.5px\]{
  font-size: 10.5px;
}
.text-\[10px\]{
  font-size: 10px;
}
.text-\[11\.5px\]{
  font-size: 11.5px;
}
.text-\[11px\]{
  font-size: 11px;
}
.text-\[12\.5px\]{
  font-size: 12.5px;
}
.text-\[12px\]{
  font-size: 12px;
}
.text-\[13\.5px\]{
  font-size: 13.5px;
}
.text-\[13px\]{
  font-size: 13px;
}
.text-\[14\.5px\]{
  font-size: 14.5px;
}
.text-\[15px\]{
  font-size: 15px;
}
.text-\[17px\]{
  font-size: 17px;
}
.text-\[22px\]{
  font-size: 22px;
}
.text-\[26px\]{
  font-size: 26px;
}
.text-\[28px\]{
  font-size: 28px;
}
.text-\[9\.5px\]{
  font-size: 9.5px;
}
.text-\[9px\]{
  font-size: 9px;
}
.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-sm\/6{
  font-size: 0.875rem;
  line-height: 1.5rem;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold{
  font-weight: 700;
}
.font-extrabold{
  font-weight: 800;
}
.font-medium{
  font-weight: 500;
}
.font-normal{
  font-weight: 400;
}
.font-semibold{
  font-weight: 600;
}
.uppercase{
  text-transform: uppercase;
}
.lowercase{
  text-transform: lowercase;
}
.capitalize{
  text-transform: capitalize;
}
.normal-case{
  text-transform: none;
}
.italic{
  font-style: italic;
}
.ordinal{
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.tabular-nums{
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-4{
  line-height: 1rem;
}
.leading-\[1\.7\]{
  line-height: 1.7;
}
.leading-none{
  line-height: 1;
}
.leading-normal{
  line-height: 1.5;
}
.leading-relaxed{
  line-height: 1.625;
}
.leading-snug{
  line-height: 1.375;
}
.leading-tight{
  line-height: 1.25;
}
.tracking-\[0\.03em\]{
  letter-spacing: 0.03em;
}
.tracking-\[0\.04em\]{
  letter-spacing: 0.04em;
}
.tracking-\[0\.05em\]{
  letter-spacing: 0.05em;
}
.tracking-\[0\.06em\]{
  letter-spacing: 0.06em;
}
.tracking-\[0\.08em\]{
  letter-spacing: 0.08em;
}
.tracking-\[0\.12em\]{
  letter-spacing: 0.12em;
}
.tracking-\[0\.14em\]{
  letter-spacing: 0.14em;
}
.tracking-\[0\.15em\]{
  letter-spacing: 0.15em;
}
.tracking-\[0\.16em\]{
  letter-spacing: 0.16em;
}
.tracking-\[0\.18em\]{
  letter-spacing: 0.18em;
}
.tracking-\[0\.1em\]{
  letter-spacing: 0.1em;
}
.tracking-\[0\.22em\]{
  letter-spacing: 0.22em;
}
.tracking-\[0\.25em\]{
  letter-spacing: 0.25em;
}
.tracking-\[0\.28em\]{
  letter-spacing: 0.28em;
}
.tracking-\[0\.2em\]{
  letter-spacing: 0.2em;
}
.tracking-\[0\.3em\]{
  letter-spacing: 0.3em;
}
.tracking-normal{
  letter-spacing: 0em;
}
.tracking-tight{
  letter-spacing: -0.025em;
}
.tracking-wide{
  letter-spacing: 0.025em;
}
.tracking-wider{
  letter-spacing: 0.05em;
}
.text-\[color\:var\(--wordmark\)\]{
  color: var(--wordmark);
}
.text-\[var\(--diff-added-text\)\]{
  color: var(--diff-added-text);
}
.text-\[var\(--diff-meta-text\)\]{
  color: var(--diff-meta-text);
}
.text-\[var\(--diff-modified-text\)\]{
  color: var(--diff-modified-text);
}
.text-\[var\(--diff-moved-text\)\]{
  color: var(--diff-moved-text);
}
.text-\[var\(--diff-removed-text\)\]{
  color: var(--diff-removed-text);
}
.text-\[var\(--mark-glyph\)\]{
  color: var(--mark-glyph);
}
.text-\[var\(--mark-glyph-mod\)\]{
  color: var(--mark-glyph-mod);
}
.text-\[var\(--rev-del-word\)\]{
  color: var(--rev-del-word);
}
.text-amber-400{
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-amber-600{
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-700{
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-800{
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-blue-400{
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-blue-600{
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-800{
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-cyan-400{
  --tw-text-opacity: 1;
  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
}
.text-draft-blue{
  --tw-text-opacity: 1;
  color: oklch(0.535 0.155 247 / var(--tw-text-opacity, 1));
}
.text-draft-ink{
  --tw-text-opacity: 1;
  color: oklch(0.268 0.027 247 / var(--tw-text-opacity, 1));
}
.text-draft-mist{
  --tw-text-opacity: 1;
  color: oklch(0.94 0.01 247 / var(--tw-text-opacity, 1));
}
.text-draft-mist-muted{
  --tw-text-opacity: 1;
  color: oklch(0.749 0.03 247 / var(--tw-text-opacity, 1));
}
.text-draft-slate{
  --tw-text-opacity: 1;
  color: oklch(0.52 0.031 247 / var(--tw-text-opacity, 1));
}
.text-gray-500{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-800{
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-green-600{
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-800{
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-inherit{
  color: inherit;
}
.text-mk-accent-text{
  color: var(--mk-accent-text);
}
.text-mk-ink{
  color: var(--mk-ink);
}
.text-mk-muted{
  color: var(--mk-muted);
}
.text-orange-800{
  --tw-text-opacity: 1;
  color: rgb(154 52 18 / var(--tw-text-opacity, 1));
}
.text-purple-400{
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.text-purple-600{
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.text-purple-800{
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}
.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-theme-bg-button-default{
  color: var(--bg-button-default);
}
.text-theme-bg-popover{
  color: var(--bg-popover);
}
.text-theme-border-accent{
  color: var(--border-accent);
}
.text-theme-field-ink{
  color: var(--field-ink);
}
.text-theme-field-muted{
  color: var(--field-muted);
}
.text-theme-icon-default{
  color: var(--icon-default);
}
.text-theme-severity-major-text{
  color: var(--severity-major-text);
}
.text-theme-severity-minor-text{
  color: var(--severity-minor-text);
}
.text-theme-severity-patch-text{
  color: var(--severity-patch-text);
}
.text-theme-status-error{
  color: var(--status-error);
}
.text-theme-status-info{
  color: var(--status-info);
}
.text-theme-status-success{
  color: var(--status-success);
}
.text-theme-status-warning{
  color: var(--status-warning);
}
.text-theme-text-accent{
  color: var(--text-accent);
}
.text-theme-text-button-default{
  color: var(--text-button-default);
}
.text-theme-text-default{
  color: var(--text-default);
}
.text-theme-text-heading{
  color: var(--text-heading);
}
.text-theme-text-info{
  color: var(--text-info);
}
.text-theme-text-link{
  color: var(--text-link);
}
.text-theme-text-muted{
  color: var(--text-muted);
}
.text-theme-text-warning{
  color: var(--text-warning);
}
.text-transparent{
  color: transparent;
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/90{
  color: rgb(255 255 255 / 0.9);
}
.text-yellow-600{
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.text-yellow-800{
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.underline{
  text-decoration-line: underline;
}
.line-through{
  text-decoration-line: line-through;
}
.no-underline{
  text-decoration-line: none;
}
.decoration-\[color\:var\(--diff-added-text\)\]{
  text-decoration-color: var(--diff-added-text);
}
.decoration-\[color\:var\(--diff-removed-text\)\]{
  text-decoration-color: var(--diff-removed-text);
}
.decoration-\[color\:var\(--rev-del-strike\)\]{
  text-decoration-color: var(--rev-del-strike);
}
.decoration-theme-status-error{
  text-decoration-color: var(--status-error);
}
.decoration-theme-status-warning{
  text-decoration-color: var(--status-warning);
}
.decoration-dotted{
  text-decoration-style: dotted;
}
.decoration-2{
  text-decoration-thickness: 2px;
}
.decoration-\[length\:1\.5px\]{
  text-decoration-thickness: 1.5px;
}
.underline-offset-2{
  text-underline-offset: 2px;
}
.underline-offset-\[3px\]{
  text-underline-offset: 3px;
}
.placeholder-draft-slate\/50::placeholder{
  color: oklch(0.52 0.031 247 / 0.5);
}
.placeholder-theme-text-muted::placeholder{
  color: var(--text-muted);
}
.accent-\[var\(--text-link\)\]{
  accent-color: var(--text-link);
}
.accent-draft-blue{
  accent-color: oklch(0.535 0.155 247 / 1);
}
.accent-theme-text-accent{
  accent-color: var(--text-accent);
}
.opacity-0{
  opacity: 0;
}
.opacity-100{
  opacity: 1;
}
.opacity-25{
  opacity: 0.25;
}
.opacity-40{
  opacity: 0.4;
}
.opacity-50{
  opacity: 0.5;
}
.opacity-55{
  opacity: 0.55;
}
.opacity-60{
  opacity: 0.6;
}
.opacity-70{
  opacity: 0.7;
}
.opacity-75{
  opacity: 0.75;
}
.opacity-80{
  opacity: 0.8;
}
.opacity-90{
  opacity: 0.9;
}
.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl{
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_10px_rgba\(234\2c 179\2c 8\2c 0\.1\)\]{
  --tw-shadow: 0 0 10px rgba(234,179,8,0.1);
  --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_10px_rgba\(239\2c 68\2c 68\2c 0\.1\)\]{
  --tw-shadow: 0 0 10px rgba(239,68,68,0.1);
  --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_10px_rgba\(34\2c 197\2c 94\2c 0\.1\)\]{
  --tw-shadow: 0 0 10px rgba(34,197,94,0.1);
  --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_-1\.5px_0_var\(--text-heading\)\]{
  --tw-shadow: inset 0 -1.5px 0 var(--text-heading);
  --tw-shadow-colored: inset 0 -1.5px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_-2px_0_var\(--text-heading\)\]{
  --tw-shadow: inset 0 -2px 0 var(--text-heading);
  --tw-shadow-colored: inset 0 -2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_0_0_1\.5px_var\(--mark-edge-mod\)\]{
  --tw-shadow: inset 0 0 0 1.5px var(--mark-edge-mod);
  --tw-shadow-colored: inset 0 0 0 1.5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_0_0_1px_var\(--border-input\)\]{
  --tw-shadow: inset 0 0 0 1px var(--border-input);
  --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_2px_0_0_0_var\(--border-accent\)\]{
  --tw-shadow: inset 2px 0 0 0 var(--border-accent);
  --tw-shadow-colored: inset 2px 0 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_2px_0_0_currentColor\]{
  --tw-shadow: inset 2px 0 0 currentColor;
  --tw-shadow-colored: inset 2px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_3px_0_0_var\(--field-ink\)\]{
  --tw-shadow: inset 3px 0 0 var(--field-ink);
  --tw-shadow-colored: inset 3px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_3px_0_0_var\(--status-error\)\]{
  --tw-shadow: inset 3px 0 0 var(--status-error);
  --tw-shadow-colored: inset 3px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_3px_0_0_var\(--text-heading\)\]{
  --tw-shadow: inset 3px 0 0 var(--text-heading);
  --tw-shadow-colored: inset 3px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_3px_0_0_var\(--text-link\)\]{
  --tw-shadow: inset 3px 0 0 var(--text-link);
  --tw-shadow-colored: inset 3px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_4px_0_0_var\(--field-ink\)\]{
  --tw-shadow: inset 4px 0 0 var(--field-ink);
  --tw-shadow-colored: inset 4px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-card{
  --tw-shadow: 0 20px 25px -5px var(--shadow-card-hover), 0 8px 10px -6px var(--shadow-card-hover);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-default{
  --tw-shadow: 0 1px 3px 0 var(--shadow-default), 0 1px 2px -1px var(--shadow-default);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl{
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline{
  outline-style: solid;
}
.ring{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-inset{
  --tw-ring-inset: inset;
}
.ring-theme-border-accent{
  --tw-ring-color: var(--border-accent);
}
.ring-theme-border-default{
  --tw-ring-color: var(--border-default);
}
.ring-theme-focus-ring{
  --tw-ring-color: var(--focus-ring);
}
.ring-theme-status-error{
  --tw-ring-color: var(--status-error);
}
.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert{
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-sm{
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-none{
  transition-property: none;
}
.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-100{
  transition-duration: 100ms;
}
.duration-150{
  transition-duration: 150ms;
}
.duration-200{
  transition-duration: 200ms;
}
.duration-300{
  transition-duration: 300ms;
}
.ease-in{
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.pb-safe{
  padding-bottom: env(safe-area-inset-bottom);
}
.pl-safe{
  padding-left: env(safe-area-inset-left);
}
.pr-safe{
  padding-right: env(safe-area-inset-right);
}
.pt-safe-4{
  padding-top: max(1rem, env(safe-area-inset-top));
}
.pb-safe-4{
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
.pl-safe-4{
  padding-left: max(1rem, env(safe-area-inset-left));
}
.pr-safe-4{
  padding-right: max(1rem, env(safe-area-inset-right));
}
.bottom-safe-4{
  bottom: max(1rem, env(safe-area-inset-bottom));
}
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--border-input) transparent;
  }
  .scrollbar-thin::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: var(--border-input);
    border-radius: 4px;
  }
  .scrollbar-thin::-webkit-scrollbar-button {
    display: none;
  }
.\[--anchor-gap\:4px\]{
  --anchor-gap: 4px;
}
.\[--anchor-gap\:8px\]{
  --anchor-gap: 8px;
}
.\[--anchor-gap\:var\(--spacing-1\)\]{
  --anchor-gap: var(--spacing-1);
}
.\[--anchor-max-height\:15rem\]{
  --anchor-max-height: 15rem;
}
.\[background-image\:url\(\'data\:image\/svg\+xml\2c \%3Csvg\%20xmlns\%3D\%22http\%3A\/\/www\.w3\.org\/2000\/svg\%22\%20viewBox\%3D\%220\%200\%2020\%2020\%22\%20fill\%3D\%22\%239CA3AF\%22\%3E\%3Cpath\%20fill-rule\%3D\%22evenodd\%22\%20d\%3D\%22M5\.23\%207\.21a\.75\.75\%200\%20011\.06\.02L10\%2011\.168l3\.71-3\.938a\.75\.75\%200\%20111\.08\%201\.04l-4\.25\%204\.5a\.75\.75\%200\%2001-1\.08\%200l-4\.25-4\.5a\.75\.75\%200\%2001\.02-1\.06z\%22\%20clip-rule\%3D\%22evenodd\%22\%20\/\%3E\%3C\/svg\%3E\'\)\]{
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22%239CA3AF%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M5.23%207.21a.75.75%200%20011.06.02L10%2011.168l3.71-3.938a.75.75%200%20111.08%201.04l-4.25%204.5a.75.75%200%2001-1.08%200l-4.25-4.5a.75.75%200%2001.02-1.06z%22%20clip-rule%3D%22evenodd%22%20/%3E%3C/svg%3E");
}
.\[background-position\:right_0\.25rem_center\]{
  background-position: right 0.25rem center;
}
.\[background-size\:1rem\]{
  background-size: 1rem;
}
.\[box-decoration-break\:clone\]{
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.\[contain-intrinsic-size\:auto_96px\]{
  contain-intrinsic-size: auto 96px;
}
.\[content-visibility\:auto\]{
  content-visibility: auto;
}
.\[font-stretch\:112\%\]{
  font-stretch: 112%;
}
.\[overflow-wrap\:anywhere\]{
  overflow-wrap: anywhere;
}
.\[scrollbar-width\:none\]{
  scrollbar-width: none;
}

/* Reserve the vertical scrollbar gutter so centered content doesn't shift
   horizontally when a page's scrollbar appears/disappears (e.g. navigating
   between wiki views or expanding a category folder). */

/* Thin, theme-aware scrollbar for scroll containers that would otherwise show
   the native (on Windows/Chromium, spin-arrow-buttoned) scrollbar — the chat
   message list and the composer textarea. `scrollbar-color` alone switches
   Chromium off the native Windows control; the ::-webkit rules are a Safari
   fallback (ignored by engines that honor the standard properties).
   `--border-input` themes the thumb in dark mode for free. */

/* Base (Light) Theme Variables - OKLCH Format (Exact conversions from hex) */
:root {
  /* Background Colors */
  --bg-app: oklch(0.98 0.01 247);
  --bg-primary: oklch(0.965 0.01 247);
  --bg-secondary: oklch(0.95 0.02 247);
  --bg-tertiary: oklch(0.9 0.02 247);
  --bg-input: oklch(1 0 none); /* #ffffff */
  --bg-input-disabled: oklch(0.96 0.02 247);
  --bg-button-default: oklch(0.4 0.02 247);
  --bg-button-default-hover: oklch(0.35 0.02 247);
  --bg-combobox-option-hover: oklch(0.7 0.02 247);
  --bg-popover: oklch(1 0 none); /* #ffffff */
  --bg-overlay: oklch(0 0 none / 0.5); /* rgba(0, 0, 0, 0.5) */
  --bg-accent: oklch(0.8 0.1 247 / 0.15); /* rgba(153, 204, 204, 0.15) */

  /* Text Colors */
  --text-default: oklch(0.25 0.02 247);
  --text-heading: oklch(0 0 none); /* #000000 */
  --text-muted: oklch(0.52 0.02 247); /* 4.76:1 on --bg-secondary (0.55 was 4.19:1, failed AA) */
  --text-link: oklch(0.45 0.08 247); /* #3f3f3f */
  --text-link-hover: oklch(0.4 0.1 247);
  --text-accent: oklch(0.8 0.08 247);
  --text-button-default: oklch(1 0 none); /* #ffffff */
  --text-hero: oklch(1 0 none); /* #ffffff */
  /* The SYNC wordmark on app pages (components/Wordmark.jsx): direction E's
     accent text, the same value as marketing.css --mk-accent-text and the wiki's
     --wordmark in renderPage.js. Change all three together. */
  --wordmark: oklch(0.49 0.2 247);
  /* The app rail's field (app shell Phase 6, AppRail.jsx): the help pages'
     cobalt field (marketing.css --mk-field and its ink, muted and rule), as
     theme tokens so app surfaces never borrow the --mk-* variables, which
     exist only inside .mk. Cobalt on app pages is this rail, the primary
     action and the wordmark, nothing else. */
  --field: oklch(0.49 0.2 247);
  --field-hover: oklch(0.43 0.19 247);
  --field-ink: oklch(0.99 0.004 247);
  --field-muted: oklch(0.89 0.045 247);
  --field-rule: oklch(1 0 0 / 0.22);

  /* Wave Colors */
  --wave-1-primary: oklch(0.5 0.2 247);
  --wave-1-secondary: oklch(0.6 0.2 247);
  --wave-2-primary: oklch(0.75 0.2 247);
  --wave-2-secondary: oklch(0.8 0.2 247);
  --wave-3-primary: oklch(0.25 0.2 247);
  --wave-3-secondary: oklch(0.3 0.2 247);

  /* Border Colors */
  --border-default: oklch(0.91 0.02 247);
  --border-input: oklch(0.86 0.02 247);
  --border-input-disabled: oklch(0.94 0.02 247);
  --border-divider: oklch(0.94 0.02 247);
  --border-accent: oklch(0.8 0.08 247);
  --border-accent-opacity-30: oklch(0.8 0.08 247 / 0.3); /* rgba(153, 204, 204, 0.3) */
  --border-accent-opacity-50: oklch(0.8 0.08 247 / 0.5); /* rgba(153, 204, 204, 0.5) */

  /* Gradient Colors */
  --gradient-primary-start: oklch(0.62 0.12 247);
  --gradient-primary-end: oklch(0.8 0.12 247);
  --gradient-secondary-start: oklch(1 0 none); /* #ffffff */
  --gradient-secondary-end: oklch(0.98 0.02 247);
  --gradient-overlay-start: oklch(0 0 none / 0.5); /* rgba(0, 0, 0, 0.5) */
  --gradient-overlay-end: oklch(0 0 none / 0.7); /* rgba(0, 0, 0, 0.7) */
  --gradient-hover-start: oklch(0.96 0.02 247);
  --gradient-hover-end: oklch(0.94 0.02 247);

  /* Shadow Colors */
  --shadow-default: oklch(0.3 0.02 247 / 0.1);
  --shadow-card-hover: oklch(0.2 0.02 247 / 0.15); /* Dark shadow for depth */

  /* Radial Gradient Colors */
  --gradient-radial-start: oklch(0.93 0.02 247); /* #e9ecef */
  --gradient-radial-end: oklch(0.96 0.02 247); /* #f1f3f5 */

  /* Icon Colors */
  --icon-default: oklch(0.26 0.02 247);
  --icon-sun: oklch(0.86 0.17 91); /* #FACC15 */
  --icon-moon: oklch(0.55 0.17 247); /* #6c757d */

  /* Status Colors */
  --status-success: oklch(0.5 0.1 160); /* #28a745 */
  --status-error: oklch(0.5 0.1 30); /* #dc3545 */
  --status-warning: oklch(0.5 0.1 100); /* #ffc107 */
  --status-info: oklch(0.5 0.1 247); /* blue, matches focus hue */
  --focus-ring: oklch(0.5 0.1 247); /* #007bff */

  /* Status Hover Backgrounds - bg-primary lightness with status chroma/hue */
  --bg-hover-success: oklch(0.965 0.03 160);
  --bg-hover-error: oklch(0.965 0.03 30);

  /* Revision severity (founder 2026-10-20): one hue (247), three strengths.
   * Major is the strongest, minor the middle, patch the quietest. Never red,
   * amber or green: a major revision is not a fault. Each text colour is AA on
   * its own tint, on --bg-popover and on --bg-secondary. Used only through
   * utils/revisionSeverity.js. */
  --severity-major-bg: oklch(0.88 0.055 247);
  --severity-major-text: oklch(0.4 0.1 247); /* 6.4:1 on tint, 9.2:1 on popover */
  --severity-minor-bg: oklch(0.94 0.025 247);
  --severity-minor-text: oklch(0.47 0.08 247); /* 5.7:1 on tint, 6.8:1 on popover */
  --severity-patch-bg: oklch(0.97 0.008 247);
  --severity-patch-text: oklch(0.53 0.02 247); /* 4.8:1 on tint, 5.3:1 on popover */

  /* Info Theme Colors */
  --bg-info: oklch(0.92 0.02 247); /* #d1ecf1 */
  --text-info: oklch(0.41 0.08 247); /* #0c5460 */
  --border-info: oklch(0.89 0.02 247); /* #bee5eb */

  /* Warning Theme Colors */
  --bg-warning: oklch(0.96 0.05 100); /* #fff3cd */
  --text-warning: oklch(0.52 0.1 100); /* #856404 */
  --border-warning: oklch(0.95 0.08 100); /* #ffeeba */

  /* Syntax Highlighting Colors (for CodeMirror editor)
   * Using existing hues: 247 (blue), 160 (green), 30 (red/orange), 100 (amber)
   * Light mode: darker colors for visibility on light backgrounds
   */
  --syntax-heading: oklch(0.45 0.15 247); /* # headings - blue */
  --syntax-toc: oklch(0.45 0.12 30); /* ==TOC== markers - brown/orange */
  --syntax-id-tag: oklch(0.45 0.12 160); /* [id=X] tags - green */
  --syntax-datasheet: oklch(0.5 0.15 100); /* ??? delimiters - amber */
  --syntax-yaml-list: oklch(0.4 0.1 247); /* - list items - dark blue */
  --syntax-yaml-key: oklch(0.4 0.18 247); /* label:, type: keys - saturated blue */

  /* Tab Navigation Colors */
  --bg-tab-selected: oklch(0.6 0.1 247); /* wave-2-primary blue for selected state */
  --bg-tab-default: oklch(0.965 0.01 247); /* bg-primary - subtle default */
  --text-tab-selected: oklch(1 0 none); /* white text for contrast on selected */
  --text-tab-default: oklch(0.52 0.02 247); /* text-muted for non-selected */

  /* Standard container spacing */
  --spacing-container: 1.5rem; /* 24px */

  /* Diff text: the change words (Added, Removed, Modified, Moved, ...), Was and
     Now. Light values retuned 2026-10-27 (founder, the revision register,
     docs/mockups/revision-compare-register.html): the 10-25 values below were
     dark (10:1) but low in chroma, so at 10px they read as grey. Now a little
     lighter with more chroma, in sRGB gamut. On --bg-popover / --bg-secondary:
     added 6.72 / 5.82, modified 6.99 / 6.06, removed 7.22 / 6.26,
     moved 7.92 / 6.86. History: retuned 2026-10-25 (founder: "higher contrast, probably
     darker and more saturated ... all of them"): darker, at the most chroma
     sRGB holds at that lightness, hues aligned with the --rev-*-bar marks.
     The old added and modified values were out of gamut and rendered clipped.
     On --bg-popover / --bg-secondary / own tint over --bg-secondary:
     added 10.44 / 9.04 / 7.94, removed 10.78 / 9.34 / 8.14,
     modified 10.04 / 8.69 / 7.62, moved 11.09 / 9.60 / 8.37.
     (Before: 8.39 / 7.27 / 6.38, 9.76 / 8.45 / 7.37, 7.35 / 6.36 / 5.58,
     10.11 / 8.76 / 7.63.) Dark mode sets its own text values below; the bg
     and border tokens are shared by both themes and unchanged. */

  /* Diff Colors - Added/Insert (green, hue 160) */
  --diff-added-bg: oklch(0.5 0.1 160 / 0.1);
  --diff-added-border: oklch(0.5 0.1 160);
  --diff-added-text: oklch(0.46 0.125 150);

  /* Diff Colors - Removed/Delete (red, hue 30) */
  --diff-removed-bg: oklch(0.5 0.1 30 / 0.1);
  --diff-removed-border: oklch(0.5 0.1 30);
  --diff-removed-text: oklch(0.48 0.19 27);

  /* Diff Colors - Modified/Update (amber, hue 100) */
  --diff-modified-bg: oklch(0.5 0.1 100 / 0.1);
  --diff-modified-border: oklch(0.5 0.1 100);
  --diff-modified-text: oklch(0.47 0.1 68);

  /* Diff Colors - Moved/Address Change (purple, hue 300) */
  --diff-moved-bg: oklch(0.5 0.15 300 / 0.1);
  --diff-moved-border: oklch(0.5 0.15 300);
  --diff-moved-text: oklch(0.46 0.2 300);

  /* A change label's quiet part: "· from 5.3.4" and its consequence note.
     Was --text-muted (5.49 / 4.76); now 8.43 / 7.30. Dark keeps --text-muted. */
  --diff-meta-text: oklch(0.42 0.03 247);

  /* Revision compare, quiet rows (docs/mockups/revision-compare-diff-rendering.html,
     option A). Bars are non-text marks (3:1 on the page); word tints sit under
     text that is checked at 4.5:1. Light values retuned 2026-10-19 (founder: the
     light marks read too pale beside dark mode) - darker, more saturated bars and
     clearly tinted ins/del, all in sRGB gamut. On --bg-popover / --bg-secondary:
     bars 5.92/5.13 · 6.58/5.70 · 4.48/3.88 · 7.20/6.23; text-default on ins tint
     11.5, heading 15.1; del word on del tint 8.25; strike on del tint 4.29.
     Muted text is NOT 4.5:1 on either tint (3.95 / 3.81) - keep it off them.
     (Before: bars 4.52 / 5.22 / 3.62 / 5.18 on white; tints 1.21 / 1.25 vs white,
     now 1.39 / 1.44.) */
  --rev-add-bar: oklch(0.49 0.115 155);
  --rev-del-bar: oklch(0.5 0.18 28);
  --rev-mod-bar: oklch(0.57 0.115 90);
  --rev-move-bar: oklch(0.48 0.19 300);
  --rev-ins-bg: oklch(0.88 0.085 155);
  --rev-del-bg: oklch(0.885 0.06 25);
  --rev-del-word: oklch(0.34 0.03 28);
  --rev-del-strike: oklch(0.45 0.18 28 / 0.8);

  /* The revision register's margin mark: a solid square carrying a heavy-stroke
     glyph (+ added, triangle modified, minus removed, arrow moved, two arrows
     replaced; components/revisionCompare/ChangeMark.jsx). The glyph on its fill:
     added 4.95, removed 5.64, moved 6.17 (white glyph); modified is a bright
     amber with an ink glyph (9.09), and as its fill is only 1.76 against white
     it carries a 1.5px edge in the modified word colour (6.99) for its 3:1
     boundary. Dark: the dark word colour is the fill, with a dark glyph. */
  --mark-add: oklch(0.53 0.14 150);
  --mark-del: oklch(0.54 0.21 27);
  --mark-mod: oklch(0.82 0.16 88);
  --mark-mov: oklch(0.52 0.22 300);
  --mark-glyph: oklch(1 0 none);
  --mark-glyph-mod: oklch(0.25 0.02 247);
  --mark-edge-mod: var(--diff-modified-text);
}

/* Dark Theme Variables - OKLCH Format (Redesigned with UX best practices) */
.dark {
  /* Background Colors - Elevation System
   * Design principle: Dark surfaces with progressive lightness for elevation/depth
   * Avoiding pure black for better eye comfort and perceived depth
   * Light mode: 0.98 (bg-app) → 0.965 → 0.95 → 0.9 (lightest backgrounds)
   * Dark mode: 0.15 (bg-app) → 0.18 → 0.22 → 0.26 (elevated surfaces)
   */
  --bg-app: oklch(0.15 0.02 247); /* Very dark blue-grey base, not pure black */
  --bg-primary: oklch(0.18 0.02 247); /* Slightly elevated from app background */
  --bg-secondary: oklch(0.22 0.02 247); /* Secondary surface elevation */
  --bg-tertiary: oklch(0.26 0.02 247); /* Highest elevation background */
  --bg-input: oklch(0.2 0.01 247); /* Inputs slightly elevated for visibility */
  --bg-input-disabled: oklch(0.17 0.01 247); /* Disabled inputs darker than enabled */
  /* Filled-button surface. NOT a mechanical inverse of the light value: this
   * token is always paired with --text-button-default (white), so inverting
   * 0.4 → 0.65 without re-measuring the label produced 3.23:1 on the header
   * "Create account" button — the one action the public site funnels toward,
   * failing AA (4.5:1 for 14px/500 text) in dark while light measured 9.19:1.
   *
   * 0.50 is the ceiling that keeps white text comfortably over 4.5:1 while
   * staying >= 3:1 against the app and primary grounds so the button still
   * reads as a raised surface:
   *   fill 0.50  vs white text 5.98:1 · vs --bg-app 3.29:1 · vs --bg-primary 3.14:1
   *   hover 0.55 vs white text 4.84:1 · vs --bg-app 4.06:1
   * The "lighter on hover" direction of the dark theme is preserved.
   *
   * RULE: never move either token without re-measuring the white label on it.
   */
  --bg-button-default: oklch(0.5 0.02 247);
  --bg-button-default-hover: oklch(0.55 0.02 247); /* lighter on hover, still AA on white */
  --bg-combobox-option-hover: oklch(0.3 0.02 247); /* Subtle hover, inverted from light's 0.7 */
  --bg-popover: oklch(0.2 0.01 247); /* Elevated popover surface */
  --bg-overlay: oklch(0 0 none / 0.75); /* Darker overlay for better focus */
  --bg-accent: oklch(0.65 0.1 247 / 0.15); /* Maintaining accent vibrancy with similar chroma */

  /* Text Colors - Contrast and Hierarchy
   * Design principle: High contrast without harsh pure white
   * Light mode: 0.25 (default) → 0 (heading) with 0.52 (muted)
   * Dark mode: 0.88 (default) → 0.95 (heading) with 0.64 (muted)
   * Maintains ~0.63-0.70 lightness delta for visual hierarchy
   */
  --text-default: oklch(0.88 0.01 247); /* High contrast readable text */
  --text-heading: oklch(0.95 0.01 247); /* Near-white headings with subtle warmth */
  --text-muted: oklch(
    0.64 0.02 247
  ); /* 0.6 was 4.34:1 on the dark header band and 4.1:1 on dashboard cards; 0.64 clears 4.5:1 on both */
  --text-link: oklch(0.68 0.08 247); /* Brighter links with increased chroma for visibility */
  --text-link-hover: oklch(0.78 0.1 247); /* Lighter and more vibrant on hover */
  --text-accent: oklch(0.75 0.08 247); /* Vibrant accent text */
  --text-button-default: oklch(1 0 none);
  --text-hero: oklch(0.95 0.01 247); /* Hero text matches headings */
  --wordmark: oklch(0.74 0.14 247); /* = marketing.css --mk-accent-text, dark */
  /* The rail's field, dark (= marketing.css --mk-field and muted, dark). */
  --field: oklch(0.42 0.17 247);
  --field-hover: oklch(0.48 0.18 247);
  --field-ink: oklch(0.99 0.004 247);
  --field-muted: oklch(0.86 0.05 247);
  --field-rule: oklch(1 0 0 / 0.22);

  /* Wave Colors - UNCHANGED as requested */
  --wave-3-primary: oklch(0.5 0.2 247);
  --wave-3-secondary: oklch(0.6 0.2 247);
  --wave-2-primary: oklch(0.75 0.2 247);
  --wave-2-secondary: oklch(0.8 0.2 247);
  --wave-1-primary: oklch(0.25 0.2 247);
  --wave-1-secondary: oklch(0.3 0.2 247);

  /* Border Colors - Visibility and Definition
   * Design principle: Borders need to be lighter in dark mode for visibility
   * Light mode borders are dark on light (0.91, 0.86, 0.94)
   * Dark mode borders are light on dark (0.32, 0.38, 0.28)
   */
  --border-default: oklch(0.32 0.02 247); /* Visible border on dark backgrounds */
  --border-input: oklch(0.38 0.02 247); /* Slightly lighter input borders for definition */
  --border-input-disabled: oklch(0.25 0.02 247); /* Darker disabled borders */
  --border-divider: oklch(0.28 0.02 247); /* Subtle dividers */
  --border-accent: oklch(0.75 0.08 247); /* Vibrant accent borders */
  --border-accent-opacity-30: oklch(0.75 0.08 247 / 0.3); /* Maintaining opacity variants */
  --border-accent-opacity-50: oklch(0.75 0.08 247 / 0.5);

  /* Gradient Colors - Inverted Flow
   * Design principle: Gradients should flow from darker to lighter in dark mode
   * Primary gradient: Vibrant blues maintained
   * Secondary gradient: Dark base to elevated surface
   * Hover gradient: Subtle elevation change
   */
  --gradient-primary-start: oklch(0.62 0.12 247);
  --gradient-primary-end: oklch(0.8 0.12 247);
  --gradient-secondary-start: oklch(0.15 0.01 247); /* App background start */
  --gradient-secondary-end: oklch(0.22 0.02 247); /* Secondary surface end */
  --gradient-overlay-start: oklch(0 0 none / 0.6); /* Slightly more opaque */
  --gradient-overlay-end: oklch(0 0 none / 0.8); /* Stronger overlay end */
  --gradient-hover-start: oklch(0.24 0.02 247); /* Elevated hover start */
  --gradient-hover-end: oklch(0.2 0.02 247); /* Back to surface */

  /* Shadow Colors - UNCHANGED as requested */
  --shadow-default: oklch(0 0 none / 0.5);
  --shadow-card-hover: oklch(0.15 0.02 247 / 0.5);

  /* Radial Gradient Colors - Subtle Background Variation */
  --gradient-radial-start: oklch(0.22 0.02 247); /* Secondary surface */
  --gradient-radial-end: oklch(0.18 0.01 247); /* Primary surface */

  /* Icon Colors - Clear and Purposeful
   * Design principle: Icons should be clearly visible but not overwhelming
   * Default icon matches default text for consistency
   * Theme icons maintain their semantic meaning
   */
  --icon-default: oklch(0.88 0.01 247); /* Matches text-default */
  --icon-sun: oklch(0.86 0.17 91); /* Warm yellow sun, unchanged */
  --icon-moon: oklch(0.7 0.1 247); /* Brighter moon for dark mode */

  /* Status Colors - Accessible and Vibrant
   * Design principle: Status colors must meet WCAG contrast while maintaining semantic meaning
   * Success: Brighter green for dark backgrounds
   * Error: Vibrant red that's still readable
   * Warning: Bright amber that stands out
   * Focus: Clear blue for keyboard navigation
   */
  --status-success: oklch(0.7 0.15 160); /* Bright green, good contrast */
  --status-error: oklch(0.65 0.18 30); /* Vibrant red, accessible */
  --status-warning: oklch(0.78 0.15 100); /* Bright amber warning */
  --status-info: oklch(0.7 0.15 247); /* Bright blue, good contrast */
  --focus-ring: oklch(0.65 0.15 247); /* Clear focus indication */

  /* Status Hover Backgrounds - bg-primary lightness with status chroma/hue */
  --bg-hover-success: oklch(0.18 0.15 160);
  --bg-hover-error: oklch(0.18 0.18 30);

  /* Revision severity: one hue, three strengths (see the light block). */
  --severity-major-bg: oklch(0.42 0.1 247);
  --severity-major-text: oklch(0.9 0.045 247); /* 6.3:1 on tint, 13.5:1 on popover */
  --severity-minor-bg: oklch(0.3 0.055 247);
  --severity-minor-text: oklch(0.8 0.07 247); /* 7.3:1 on tint, 9.8:1 on popover */
  --severity-patch-bg: oklch(0.24 0.012 247);
  --severity-patch-text: oklch(0.7 0.02 247); /* 6.2:1 on tint, 6.8:1 on popover */

  /* Info Theme Colors - Cohesive Information Display
   * Design principle: Info banners need good contrast while being non-intrusive
   * Background: Dark blue base
   * Text: Light blue for readability
   * Border: Medium blue for definition
   */
  --bg-info: oklch(0.25 0.06 247); /* Dark blue info background */
  --text-info: oklch(0.78 0.08 247); /* Light blue info text */
  --border-info: oklch(0.4 0.08 247); /* Medium blue info border */

  /* Warning Theme Colors - Clear Cautionary Display
   * Design principle: Warnings need attention without being alarming
   * Background: Dark warm amber
   * Text: Bright amber for readability
   * Border: Medium amber for definition
   */
  --bg-warning: oklch(0.28 0.06 100); /* Dark amber warning background */
  --text-warning: oklch(0.82 0.12 100); /* Bright amber warning text */
  --border-warning: oklch(0.45 0.1 100); /* Medium amber warning border */

  /* Syntax Highlighting Colors (for CodeMirror editor)
   * Dark mode: brighter colors for visibility on dark backgrounds
   */
  --syntax-heading: oklch(0.7 0.12 247); /* # headings - bright blue */
  --syntax-toc: oklch(0.72 0.12 30); /* ==TOC== markers - salmon/orange */
  --syntax-id-tag: oklch(0.65 0.12 160); /* [id=X] tags - bright green */
  --syntax-datasheet: oklch(0.75 0.15 100); /* ??? delimiters - bright amber */
  --syntax-yaml-list: oklch(0.68 0.1 247); /* - list items - light blue */
  --syntax-yaml-key: oklch(0.72 0.15 247); /* label:, type: keys - bright blue */

  /* Tab Navigation Colors - Dark Mode */
  --bg-tab-selected: oklch(0.5 0.1 247); /* Slightly darker blue for dark mode, good contrast */
  --bg-tab-default: oklch(0.18 0.02 247); /* bg-primary dark */
  --text-tab-selected: oklch(1 0 none); /* white text for contrast on selected */
  --text-tab-default: oklch(0.64 0.02 247); /* text-muted dark */

  /* Diff Colors - Added/Insert (green, hue 160) - Dark Mode */
  --diff-added-text: oklch(0.7 0.15 160);

  /* Diff Colors - Removed/Delete (red, hue 30) - Dark Mode */
  --diff-removed-text: oklch(0.7 0.15 30);

  /* Diff Colors - Modified/Update (amber, hue 100) - Dark Mode */
  --diff-modified-text: oklch(0.78 0.15 100);

  /* Diff Colors - Moved/Address Change (purple, hue 300) - Dark Mode */
  --diff-moved-text: oklch(0.72 0.18 300);
  --diff-meta-text: var(--text-muted);

  /* Revision compare, quiet rows - Dark Mode. On --bg-popover: bars 6.17 /
     5.05 / 9.11 / 5.97; heading on ins tint 10.2; del word on del tint 7.26. */
  --rev-add-bar: oklch(0.66 0.13 160);
  --rev-del-bar: oklch(0.64 0.14 30);
  --rev-mod-bar: oklch(0.78 0.13 100);
  --rev-move-bar: oklch(0.68 0.14 300);
  --rev-ins-bg: oklch(0.33 0.07 160);
  --rev-del-bg: oklch(0.31 0.07 30);
  --rev-del-word: oklch(0.8 0.02 247);
  --rev-del-strike: oklch(0.7 0.15 30 / 0.55);

  /* The margin mark - Dark Mode: glyph on fill added 7.52, modified 9.46,
     removed 6.60, moved 7.04. */
  --mark-add: var(--diff-added-text);
  --mark-del: var(--diff-removed-text);
  --mark-mod: var(--diff-modified-text);
  --mark-mov: var(--diff-moved-text);
  --mark-glyph: oklch(0.18 0.02 247);
  --mark-glyph-mod: oklch(0.18 0.02 247);
  --mark-edge-mod: var(--diff-modified-text);
}

/* A prerendered page already played its entrance animation before React
   replaced the markup (src/index.js); React's identical copy appears in place. */
.ssg-painted .motion-safe\:animate-rise-1,
.ssg-painted .motion-safe\:animate-rise-2,
.ssg-painted .motion-safe\:animate-rise-3 {
  animation: none;
}
.dark\:prose-invert:is(.dark *){
  --tw-prose-body: var(--tw-prose-invert-body);
  --tw-prose-headings: var(--tw-prose-invert-headings);
  --tw-prose-lead: var(--tw-prose-invert-lead);
  --tw-prose-links: var(--tw-prose-invert-links);
  --tw-prose-bold: var(--tw-prose-invert-bold);
  --tw-prose-counters: var(--tw-prose-invert-counters);
  --tw-prose-bullets: var(--tw-prose-invert-bullets);
  --tw-prose-hr: var(--tw-prose-invert-hr);
  --tw-prose-quotes: var(--tw-prose-invert-quotes);
  --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
  --tw-prose-captions: var(--tw-prose-invert-captions);
  --tw-prose-kbd: var(--tw-prose-invert-kbd);
  --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
  --tw-prose-code: var(--tw-prose-invert-code);
  --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
  --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
  --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
  --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
}
.file\:mr-4::file-selector-button{
  margin-right: 1rem;
}
.file\:rounded-full::file-selector-button{
  border-radius: 9999px;
}
.file\:border-0::file-selector-button{
  border-width: 0px;
}
.file\:bg-theme-bg-button-default::file-selector-button{
  background-color: var(--bg-button-default);
}
.file\:px-4::file-selector-button{
  padding-left: 1rem;
  padding-right: 1rem;
}
.file\:py-2::file-selector-button{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.file\:text-sm::file-selector-button{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:font-semibold::file-selector-button{
  font-weight: 600;
}
.file\:text-theme-text-button-default::file-selector-button{
  color: var(--text-button-default);
}
.placeholder\:italic::placeholder{
  font-style: italic;
}
.placeholder\:text-theme-text-muted::placeholder{
  color: var(--text-muted);
}
.before\:absolute::before{
  content: var(--tw-content);
  position: absolute;
}
.before\:left-\[22\%\]::before{
  content: var(--tw-content);
  left: 22%;
}
.before\:right-\[22\%\]::before{
  content: var(--tw-content);
  right: 22%;
}
.before\:top-\[-1px\]::before{
  content: var(--tw-content);
  top: -1px;
}
.before\:h-0\.5::before{
  content: var(--tw-content);
  height: 0.125rem;
}
.before\:bg-theme-text-heading::before{
  content: var(--tw-content);
  background-color: var(--text-heading);
}
.before\:content-\[\'\'\]::before{
  --tw-content: '';
  content: var(--tw-content);
}
.after\:absolute::after{
  content: var(--tw-content);
  position: absolute;
}
.after\:inset-0::after{
  content: var(--tw-content);
  inset: 0px;
}
.after\:bottom-\[-1px\]::after{
  content: var(--tw-content);
  bottom: -1px;
}
.after\:left-0::after{
  content: var(--tw-content);
  left: 0px;
}
.after\:left-1\/2::after{
  content: var(--tw-content);
  left: 50%;
}
.after\:left-3::after{
  content: var(--tw-content);
  left: 0.75rem;
}
.after\:left-\[3\.5px\]::after{
  content: var(--tw-content);
  left: 3.5px;
}
.after\:right-3::after{
  content: var(--tw-content);
  right: 0.75rem;
}
.after\:top-1\/2::after{
  content: var(--tw-content);
  top: 50%;
}
.after\:top-\[0\.5px\]::after{
  content: var(--tw-content);
  top: 0.5px;
}
.after\:h-0\.5::after{
  content: var(--tw-content);
  height: 0.125rem;
}
.after\:h-1::after{
  content: var(--tw-content);
  height: 0.25rem;
}
.after\:h-2::after{
  content: var(--tw-content);
  height: 0.5rem;
}
.after\:w-1::after{
  content: var(--tw-content);
  width: 0.25rem;
}
.after\:-translate-x-1\/2::after{
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.after\:-translate-y-1\/2::after{
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.after\:rotate-45::after{
  content: var(--tw-content);
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.after\:rounded-full::after{
  content: var(--tw-content);
  border-radius: 9999px;
}
.after\:border-b-2::after{
  content: var(--tw-content);
  border-bottom-width: 2px;
}
.after\:border-r-2::after{
  content: var(--tw-content);
  border-right-width: 2px;
}
.after\:border-theme-bg-popover::after{
  content: var(--tw-content);
  border-color: var(--bg-popover);
}
.after\:bg-theme-bg-popover::after{
  content: var(--tw-content);
  background-color: var(--bg-popover);
}
.after\:bg-theme-text-heading::after{
  content: var(--tw-content);
  background-color: var(--text-heading);
}
.after\:content-\[\'\'\]::after{
  --tw-content: '';
  content: var(--tw-content);
}
.first\:mt-0:first-child{
  margin-top: 0px;
}
.first\:border-l-0:first-child{
  border-left-width: 0px;
}
.first\:border-t-0:first-child{
  border-top-width: 0px;
}
.first\:border-theme-border-default:first-child{
  border-color: var(--border-default);
}
.first\:pl-0:first-child{
  padding-left: 0px;
}
.first\:pt-0:first-child{
  padding-top: 0px;
}
.last\:border-b-0:last-child{
  border-bottom-width: 0px;
}
.last\:border-r-0:last-child{
  border-right-width: 0px;
}
.last\:pb-0:last-child{
  padding-bottom: 0px;
}
.last\:pr-0:last-child{
  padding-right: 0px;
}
.empty\:invisible:empty{
  visibility: hidden;
}
.focus-within\:bg-theme-bg-secondary:focus-within{
  background-color: var(--bg-secondary);
}
.focus-within\:ring-2:focus-within{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-within\:ring-inset:focus-within{
  --tw-ring-inset: inset;
}
.focus-within\:ring-theme-focus-ring:focus-within{
  --tw-ring-color: var(--focus-ring);
}
.hover\:scale-105:hover{
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-draft-ink\/60:hover{
  border-color: oklch(0.268 0.027 247 / 0.6);
}
.hover\:border-theme-border-accent:hover{
  border-color: var(--border-accent);
}
.hover\:border-theme-border-default:hover{
  border-color: var(--border-default);
}
.hover\:border-theme-text-link:hover{
  border-color: var(--text-link);
}
.hover\:border-theme-text-link-hover:hover{
  border-color: var(--text-link-hover);
}
.hover\:border-theme-text-muted:hover{
  border-color: var(--text-muted);
}
.hover\:bg-\[\#1D5FAB\]:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(29 95 171 / var(--tw-bg-opacity, 1));
}
.hover\:bg-draft-tint:hover{
  --tw-bg-opacity: 1;
  background-color: oklch(0.966 0.006 247 / var(--tw-bg-opacity, 1));
}
.hover\:bg-theme-bg-accent:hover{
  background-color: var(--bg-accent);
}
.hover\:bg-theme-bg-button-default-hover:hover{
  background-color: var(--bg-button-default-hover);
}
.hover\:bg-theme-bg-hover-error:hover{
  background-color: var(--bg-hover-error);
}
.hover\:bg-theme-bg-input:hover{
  background-color: var(--bg-input);
}
.hover\:bg-theme-bg-secondary:hover{
  background-color: var(--bg-secondary);
}
.hover\:bg-theme-bg-tertiary:hover{
  background-color: var(--bg-tertiary);
}
.hover\:bg-white\/\[0\.08\]:hover{
  background-color: rgb(255 255 255 / 0.08);
}
.hover\:text-draft-ink:hover{
  --tw-text-opacity: 1;
  color: oklch(0.268 0.027 247 / var(--tw-text-opacity, 1));
}
.hover\:text-mk-ink:hover{
  color: var(--mk-ink);
}
.hover\:text-theme-field-ink:hover{
  color: var(--field-ink);
}
.hover\:text-theme-status-error:hover{
  color: var(--status-error);
}
.hover\:text-theme-text-default:hover{
  color: var(--text-default);
}
.hover\:text-theme-text-heading:hover{
  color: var(--text-heading);
}
.hover\:text-theme-text-link:hover{
  color: var(--text-link);
}
.hover\:text-theme-text-link-hover:hover{
  color: var(--text-link-hover);
}
.hover\:text-theme-text-warning:hover{
  color: var(--text-warning);
}
.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover{
  text-decoration-line: underline;
}
.hover\:underline-offset-\[3px\]:hover{
  text-underline-offset: 3px;
}
.hover\:opacity-70:hover{
  opacity: 0.7;
}
.hover\:opacity-80:hover{
  opacity: 0.8;
}
.hover\:opacity-90:hover{
  opacity: 0.9;
}
.hover\:shadow-\[inset_2px_0_0_var\(--field-muted\)\]:hover{
  --tw-shadow: inset 2px 0 0 var(--field-muted);
  --tw-shadow-colored: inset 2px 0 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-card-hover:hover{
  --tw-shadow: 0 40px 50px -8px var(--shadow-card-hover), 0 20px 25px -5px var(--shadow-card-hover);
  --tw-shadow-colored: 0 40px 50px -8px var(--tw-shadow-color), 0 20px 25px -5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-lg:hover{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:file\:bg-theme-bg-button-default-hover::file-selector-button:hover{
  background-color: var(--bg-button-default-hover);
}
.focus\:not-sr-only:focus{
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
.focus\:absolute:focus{
  position: absolute;
}
.focus\:left-4:focus{
  left: 1rem;
}
.focus\:top-4:focus{
  top: 1rem;
}
.focus\:z-50:focus{
  z-index: 50;
}
.focus\:border-theme-border-accent:focus{
  border-color: var(--border-accent);
}
.focus\:border-theme-focus-ring:focus{
  border-color: var(--focus-ring);
}
.focus\:border-theme-status-error:focus{
  border-color: var(--status-error);
}
.focus\:border-transparent:focus{
  border-color: transparent;
}
.focus\:underline:focus{
  text-decoration-line: underline;
}
.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-0:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-1:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-inset:focus{
  --tw-ring-inset: inset;
}
.focus\:ring-draft-blue:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(0.535 0.155 247 / var(--tw-ring-opacity, 1));
}
.focus\:ring-theme-border-accent:focus{
  --tw-ring-color: var(--border-accent);
}
.focus\:ring-theme-focus-ring:focus{
  --tw-ring-color: var(--focus-ring);
}
.focus\:ring-theme-status-error:focus{
  --tw-ring-color: var(--status-error);
}
.focus-visible\:rounded-full:focus-visible{
  border-radius: 9999px;
}
.focus-visible\:bg-theme-bg-secondary:focus-visible{
  background-color: var(--bg-secondary);
}
.focus-visible\:text-theme-text-default:focus-visible{
  color: var(--text-default);
}
.focus-visible\:text-theme-text-link-hover:focus-visible{
  color: var(--text-link-hover);
}
.focus-visible\:opacity-100:focus-visible{
  opacity: 1;
}
.focus-visible\:outline-none:focus-visible{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:ring-2:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-inset:focus-visible{
  --tw-ring-inset: inset;
}
.focus-visible\:ring-draft-blue:focus-visible{
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(0.535 0.155 247 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-draft-mist:focus-visible{
  --tw-ring-opacity: 1;
  --tw-ring-color: oklch(0.94 0.01 247 / var(--tw-ring-opacity, 1));
}
.focus-visible\:ring-theme-field-ink:focus-visible{
  --tw-ring-color: var(--field-ink);
}
.focus-visible\:ring-theme-focus-ring:focus-visible{
  --tw-ring-color: var(--focus-ring);
}
.focus-visible\:ring-theme-status-error:focus-visible{
  --tw-ring-color: var(--status-error);
}
.focus-visible\:ring-theme-status-success:focus-visible{
  --tw-ring-color: var(--status-success);
}
.focus-visible\:ring-theme-text-button-default:focus-visible{
  --tw-ring-color: var(--text-button-default);
}
.focus-visible\:ring-offset-1:focus-visible{
  --tw-ring-offset-width: 1px;
}
.focus-visible\:ring-offset-2:focus-visible{
  --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-draft-ink:focus-visible{
  --tw-ring-offset-color: oklch(0.268 0.027 247 / 1);
}
.focus-visible\:ring-offset-theme-bg-popover:focus-visible{
  --tw-ring-offset-color: var(--bg-popover);
}
.focus-visible\:ring-offset-white:focus-visible{
  --tw-ring-offset-color: #fff;
}
.disabled\:cursor-default:disabled{
  cursor: default;
}
.disabled\:cursor-not-allowed:disabled{
  cursor: not-allowed;
}
.disabled\:cursor-wait:disabled{
  cursor: wait;
}
.disabled\:bg-draft-tint:disabled{
  --tw-bg-opacity: 1;
  background-color: oklch(0.966 0.006 247 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-theme-bg-input-disabled:disabled{
  background-color: var(--bg-input-disabled);
}
.disabled\:text-draft-slate:disabled{
  --tw-text-opacity: 1;
  color: oklch(0.52 0.031 247 / var(--tw-text-opacity, 1));
}
.disabled\:text-theme-text-muted:disabled{
  color: var(--text-muted);
}
.disabled\:no-underline:disabled{
  text-decoration-line: none;
}
.disabled\:opacity-40:disabled{
  opacity: 0.4;
}
.disabled\:opacity-50:disabled{
  opacity: 0.5;
}
.disabled\:opacity-60:disabled{
  opacity: 0.6;
}
.group\/sub[open] .group-open\/sub\:rotate-90{
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group[open] .group-open\:rotate-90{
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:flex{
  display: flex;
}
.group:hover .group-hover\:text-theme-text-heading{
  color: var(--text-heading);
}
.group\/field:hover .group-hover\/field\:opacity-100{
  opacity: 1;
}
.group:hover .group-hover\:opacity-100{
  opacity: 1;
}
.has-\[\:focus-visible\]\:bg-draft-tint:has(:focus-visible){
  --tw-bg-opacity: 1;
  background-color: oklch(0.966 0.006 247 / var(--tw-bg-opacity, 1));
}
.data-\[closed\]\:-translate-y-1[data-closed]{
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[selected\]\:border-b-2[data-selected]{
  border-bottom-width: 2px;
}
.data-\[selected\]\:border-theme-border-accent[data-selected]{
  border-color: var(--border-accent);
}
.data-\[selected\]\:border-theme-text-heading[data-selected]{
  border-color: var(--text-heading);
}
.data-\[checked\]\:bg-theme-bg-input[data-checked]{
  background-color: var(--bg-input);
}
.data-\[checked\]\:bg-theme-bg-tertiary[data-checked]{
  background-color: var(--bg-tertiary);
}
.data-\[focus\]\:bg-theme-bg-secondary[data-focus]{
  background-color: var(--bg-secondary);
}
.data-\[focus\]\:bg-theme-bg-tertiary[data-focus]{
  background-color: var(--bg-tertiary);
}
.data-\[open\]\:bg-theme-bg-secondary[data-open]{
  background-color: var(--bg-secondary);
}
.data-\[open\]\:bg-theme-bg-tertiary[data-open]{
  background-color: var(--bg-tertiary);
}
.data-\[selected\]\:bg-theme-bg-tertiary[data-selected]{
  background-color: var(--bg-tertiary);
}
.data-\[selected\]\:text-theme-text-default[data-selected]{
  color: var(--text-default);
}
.data-\[selected\]\:text-theme-text-heading[data-selected]{
  color: var(--text-heading);
}
.data-\[closed\]\:opacity-0[data-closed]{
  opacity: 0;
}
.data-\[disabled\]\:opacity-50[data-disabled]{
  opacity: 0.5;
}
.data-\[leave\]\:data-\[closed\]\:opacity-0[data-closed][data-leave]{
  opacity: 0;
}
.data-\[focus\]\:outline-1[data-focus]{
  outline-width: 1px;
}
.data-\[focus\]\:outline-2[data-focus]{
  outline-width: 2px;
}
.data-\[focus\]\:-outline-offset-2[data-focus]{
  outline-offset: -2px;
}
.data-\[focus\]\:outline-theme-focus-ring[data-focus]{
  outline-color: var(--focus-ring);
}
.data-\[focus\]\:outline-white[data-focus]{
  outline-color: #fff;
}
.data-\[focus\]\:ring-2[data-focus]{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.data-\[focus\]\:ring-theme-focus-ring[data-focus]{
  --tw-ring-color: var(--focus-ring);
}
.group[data-selected] .group-data-\[selected\]\:visible{
  visibility: visible;
}
.group[data-checked] .group-data-\[checked\]\:block{
  display: block;
}
.group[data-checked] .group-data-\[checked\]\:hidden{
  display: none;
}
.group[data-checked] .group-data-\[checked\]\:translate-x-7{
  --tw-translate-x: 1.75rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group[data-open] .group-data-\[open\]\:rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group[data-hover] .group-data-\[hover\]\:fill-theme-icon-default{
  fill: var(--icon-default);
}
.group[data-hover] .group-data-\[hover\]\:fill-theme-text-link-hover{
  fill: var(--text-link-hover);
}
.group[data-hover] .group-data-\[hover\]\:text-theme-text-link-hover{
  color: var(--text-link-hover);
}
.group[data-checked] .group-data-\[checked\]\:opacity-100{
  opacity: 1;
}
@media (pointer: coarse){

  .coarse\:top-3\.5{
    top: 0.875rem;
  }

  .coarse\:my-2\.5{
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
  }

  .coarse\:mt-0{
    margin-top: 0px;
  }

  .coarse\:inline-flex{
    display: inline-flex;
  }

  .coarse\:hidden{
    display: none;
  }

  .coarse\:size-6{
    width: 1.5rem;
    height: 1.5rem;
  }

  .coarse\:h-11{
    height: 2.75rem;
  }

  .coarse\:min-h-\[44px\]{
    min-height: 44px;
  }

  .coarse\:w-11{
    width: 2.75rem;
  }

  .coarse\:min-w-\[44px\]{
    min-width: 44px;
  }

  .coarse\:items-center{
    align-items: center;
  }

  .coarse\:justify-center{
    justify-content: center;
  }

  .coarse\:p-2{
    padding: 0.5rem;
  }

  .coarse\:p-2\.5{
    padding: 0.625rem;
  }

  .coarse\:py-1\.5{
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }

  .coarse\:py-2\.5{
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .coarse\:py-3{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .coarse\:py-\[0\.6rem\]{
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  .coarse\:opacity-100{
    opacity: 1;
  }
}
@media (prefers-reduced-motion: no-preference){

  @keyframes pulse{

    50%{
      opacity: .5;
    }
  }

  .motion-safe\:animate-pulse{
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  @keyframes spin{

    to{
      transform: rotate(360deg);
    }
  }

  .motion-safe\:animate-spin{
    animation: spin 1s linear infinite;
  }

  .motion-safe\:transition-transform{
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .motion-safe\:duration-150{
    transition-duration: 150ms;
  }
}
@media (prefers-reduced-motion: reduce){

  .motion-reduce\:transition-none{
    transition-property: none;
  }
}
.dark\:divide-draft-mist\/10:is(.dark *) > :not([hidden]) ~ :not([hidden]){
  border-color: oklch(0.94 0.01 247 / 0.1);
}
.dark\:divide-draft-mist\/15:is(.dark *) > :not([hidden]) ~ :not([hidden]){
  border-color: oklch(0.94 0.01 247 / 0.15);
}
.dark\:divide-draft-mist\/20:is(.dark *) > :not([hidden]) ~ :not([hidden]){
  border-color: oklch(0.94 0.01 247 / 0.2);
}
.dark\:border-amber-800:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(146 64 14 / var(--tw-border-opacity, 1));
}
.dark\:border-draft-mist-muted\/30:is(.dark *){
  border-color: oklch(0.749 0.03 247 / 0.3);
}
.dark\:border-draft-mist\/10:is(.dark *){
  border-color: oklch(0.94 0.01 247 / 0.1);
}
.dark\:border-draft-mist\/15:is(.dark *){
  border-color: oklch(0.94 0.01 247 / 0.15);
}
.dark\:border-draft-mist\/20:is(.dark *){
  border-color: oklch(0.94 0.01 247 / 0.2);
}
.dark\:border-draft-mist\/25:is(.dark *){
  border-color: oklch(0.94 0.01 247 / 0.25);
}
.dark\:border-draft-mist\/70:is(.dark *){
  border-color: oklch(0.94 0.01 247 / 0.7);
}
.dark\:border-draft-night-elev:is(.dark *){
  --tw-border-opacity: 1;
  border-color: oklch(0.26 0.038 247 / var(--tw-border-opacity, 1));
}
.dark\:border-red-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
}
.dark\:border-transparent:is(.dark *){
  border-color: transparent;
}
.dark\:bg-amber-950\/30:is(.dark *){
  background-color: rgb(69 26 3 / 0.3);
}
.dark\:bg-blue-900\/30:is(.dark *){
  background-color: rgb(30 58 138 / 0.3);
}
.dark\:bg-draft-mist\/15:is(.dark *){
  background-color: oklch(0.94 0.01 247 / 0.15);
}
.dark\:bg-draft-night:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: oklch(0.15 0.02 247 / var(--tw-bg-opacity, 1));
}
.dark\:bg-draft-night-elev:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: oklch(0.26 0.038 247 / var(--tw-bg-opacity, 1));
}
.dark\:bg-gray-900\/30:is(.dark *){
  background-color: rgb(17 24 39 / 0.3);
}
.dark\:bg-green-900\/30:is(.dark *){
  background-color: rgb(20 83 45 / 0.3);
}
.dark\:bg-orange-900\/30:is(.dark *){
  background-color: rgb(124 45 18 / 0.3);
}
.dark\:bg-purple-900\/30:is(.dark *){
  background-color: rgb(88 28 135 / 0.3);
}
.dark\:bg-red-900\/20:is(.dark *){
  background-color: rgb(127 29 29 / 0.2);
}
.dark\:bg-yellow-900\/30:is(.dark *){
  background-color: rgb(113 63 18 / 0.3);
}
.dark\:text-amber-200:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.dark\:text-amber-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.dark\:text-draft-mist:is(.dark *){
  --tw-text-opacity: 1;
  color: oklch(0.94 0.01 247 / var(--tw-text-opacity, 1));
}
.dark\:text-draft-mist-muted:is(.dark *){
  --tw-text-opacity: 1;
  color: oklch(0.749 0.03 247 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dark\:text-green-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}
.dark\:text-green-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.dark\:text-orange-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}
.dark\:text-purple-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}
.dark\:text-red-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.dark\:text-red-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.dark\:text-theme-text-warning:is(.dark *){
  color: var(--text-warning);
}
.dark\:text-yellow-300:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.dark\:placeholder-draft-mist-muted\/50:is(.dark *)::placeholder{
  color: oklch(0.749 0.03 247 / 0.5);
}
.dark\:shadow-card:is(.dark *){
  --tw-shadow: 0 20px 25px -5px var(--shadow-card-hover), 0 8px 10px -6px var(--shadow-card-hover);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dark\:hover\:border-draft-mist\/60:hover:is(.dark *){
  border-color: oklch(0.94 0.01 247 / 0.6);
}
.dark\:hover\:bg-draft-night:hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: oklch(0.15 0.02 247 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:text-draft-mist:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: oklch(0.94 0.01 247 / var(--tw-text-opacity, 1));
}
.dark\:focus-visible\:ring-offset-draft-night:focus-visible:is(.dark *){
  --tw-ring-offset-color: oklch(0.15 0.02 247 / 1);
}
.dark\:focus-visible\:ring-offset-draft-night-elev:focus-visible:is(.dark *){
  --tw-ring-offset-color: oklch(0.26 0.038 247 / 1);
}
.dark\:disabled\:bg-draft-night-elev:disabled:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: oklch(0.26 0.038 247 / var(--tw-bg-opacity, 1));
}
.dark\:disabled\:text-draft-mist-muted:disabled:is(.dark *){
  --tw-text-opacity: 1;
  color: oklch(0.749 0.03 247 / var(--tw-text-opacity, 1));
}
.dark\:has-\[\:focus-visible\]\:bg-draft-night:has(:focus-visible):is(.dark *){
  --tw-bg-opacity: 1;
  background-color: oklch(0.15 0.02 247 / var(--tw-bg-opacity, 1));
}
@media (max-width: 899px){

  .max-\[899px\]\:px-2{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
@media not all and (min-width: 768px){

  .max-md\:grid-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .max-md\:border-b{
    border-bottom-width: 1px;
  }

  .max-md\:border-r-0{
    border-right-width: 0px;
  }
}
@media not all and (min-width: 640px){

  .max-sm\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .max-sm\:col-start-2{
    grid-column-start: 2;
  }

  .max-sm\:row-span-3{
    grid-row: span 3 / span 3;
  }

  .max-sm\:row-start-1{
    grid-row-start: 1;
  }

  .max-sm\:row-start-2{
    grid-row-start: 2;
  }

  .max-sm\:ml-2{
    margin-left: 0.5rem;
  }

  .max-sm\:mt-0{
    margin-top: 0px;
  }

  .max-sm\:mt-0\.5{
    margin-top: 0.125rem;
  }

  .max-sm\:mt-1{
    margin-top: 0.25rem;
  }

  .max-sm\:block{
    display: block;
  }

  .max-sm\:inline{
    display: inline;
  }

  .max-sm\:grid{
    display: grid;
  }

  .max-sm\:hidden{
    display: none;
  }

  .max-sm\:w-\[110px\]{
    width: 110px;
  }

  .max-sm\:w-auto{
    width: auto;
  }

  .max-sm\:w-full{
    width: 100%;
  }

  .max-sm\:min-w-0{
    min-width: 0px;
  }

  .max-sm\:flex-\[1_1_50\%\]{
    flex: 1 1 50%;
  }

  .max-sm\:basis-full{
    flex-basis: 100%;
  }

  .max-sm\:grid-cols-\[16px_40px_minmax\(0\2c 1fr\)\]{
    grid-template-columns: 16px 40px minmax(0,1fr);
  }

  .max-sm\:grid-cols-\[20px_minmax\(0\2c 1fr\)\]{
    grid-template-columns: 20px minmax(0,1fr);
  }

  .max-sm\:grid-cols-\[22px_minmax\(0\2c 1fr\)\]{
    grid-template-columns: 22px minmax(0,1fr);
  }

  .max-sm\:grid-cols-\[40px_minmax\(0\2c 1fr\)\]{
    grid-template-columns: 40px minmax(0,1fr);
  }

  .max-sm\:gap-x-1\.5{
    column-gap: 0.375rem;
  }

  .max-sm\:gap-x-2{
    column-gap: 0.5rem;
  }

  .max-sm\:gap-x-2\.5{
    column-gap: 0.625rem;
  }

  .max-sm\:border-l-0{
    border-left-width: 0px;
  }

  .max-sm\:border-t{
    border-top-width: 1px;
  }

  .max-sm\:p-0{
    padding: 0px;
  }

  .max-sm\:p-2\.5{
    padding: 0.625rem;
  }

  .max-sm\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .max-sm\:py-2{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .max-sm\:py-2\.5{
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .max-sm\:py-3\.5{
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }

  .max-sm\:pl-0{
    padding-left: 0px;
  }

  .max-sm\:pl-2\.5{
    padding-left: 0.625rem;
  }

  .max-sm\:pl-4{
    padding-left: 1rem;
  }

  .max-sm\:pl-7{
    padding-left: 1.75rem;
  }

  .max-sm\:pr-2\.5{
    padding-right: 0.625rem;
  }

  .max-sm\:pr-4{
    padding-right: 1rem;
  }

  .max-sm\:pt-3\.5{
    padding-top: 0.875rem;
  }

  .max-sm\:text-base{
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .max-sm\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .max-sm\:text-xl{
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
@media (max-width: 480px){

  .max-\[480px\]\:text-\[10px\]{
    font-size: 10px;
  }

  .max-\[480px\]\:tracking-\[0\.12em\]{
    letter-spacing: 0.12em;
  }
}
@media (min-width: 640px){

  .sm\:col-span-1{
    grid-column: span 1 / span 1;
  }

  .sm\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .sm\:col-span-3{
    grid-column: span 3 / span 3;
  }

  .sm\:col-span-4{
    grid-column: span 4 / span 4;
  }

  .sm\:-mx-6{
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  .sm\:mb-6{
    margin-bottom: 1.5rem;
  }

  .sm\:mb-8{
    margin-bottom: 2rem;
  }

  .sm\:ml-2{
    margin-left: 0.5rem;
  }

  .sm\:ml-4{
    margin-left: 1rem;
  }

  .sm\:ml-8{
    margin-left: 2rem;
  }

  .sm\:ml-\[calc\(-2\.9rem_-_var\(--gutter-x-sm\2c 0px\)\)\]{
    margin-left: calc(-2.9rem - var(--gutter-x-sm,0px));
  }

  .sm\:ml-\[calc\(-2rem_-_var\(--gutter-x-sm\2c 0px\)\)\]{
    margin-left: calc(-2rem - var(--gutter-x-sm,0px));
  }

  .sm\:ml-\[calc\(-3\.8rem_-_var\(--gutter-x-sm\2c 0px\)\)\]{
    margin-left: calc(-3.8rem - var(--gutter-x-sm,0px));
  }

  .sm\:ml-\[calc\(-4\.7rem_-_var\(--gutter-x-sm\2c 0px\)\)\]{
    margin-left: calc(-4.7rem - var(--gutter-x-sm,0px));
  }

  .sm\:ml-\[calc\(-5\.6rem_-_var\(--gutter-x-sm\2c 0px\)\)\]{
    margin-left: calc(-5.6rem - var(--gutter-x-sm,0px));
  }

  .sm\:ml-\[calc\(-6\.5rem_-_var\(--gutter-x-sm\2c 0px\)\)\]{
    margin-left: calc(-6.5rem - var(--gutter-x-sm,0px));
  }

  .sm\:ml-\[calc\(1\.25rem_\+_var\(--gutter-x-sm\2c 0px\)\)\]{
    margin-left: calc(1.25rem + var(--gutter-x-sm,0px));
  }

  .sm\:ml-\[calc\(2\.5rem_\+_var\(--gutter-x-sm\2c 0px\)\)\]{
    margin-left: calc(2.5rem + var(--gutter-x-sm,0px));
  }

  .sm\:ml-\[calc\(3\.75rem_\+_var\(--gutter-x-sm\2c 0px\)\)\]{
    margin-left: calc(3.75rem + var(--gutter-x-sm,0px));
  }

  .sm\:ml-\[calc\(5rem_\+_var\(--gutter-x-sm\2c 0px\)\)\]{
    margin-left: calc(5rem + var(--gutter-x-sm,0px));
  }

  .sm\:ml-\[calc\(6\.25rem_\+_var\(--gutter-x-sm\2c 0px\)\)\]{
    margin-left: calc(6.25rem + var(--gutter-x-sm,0px));
  }

  .sm\:ml-\[calc\(7\.5rem_\+_var\(--gutter-x-sm\2c 0px\)\)\]{
    margin-left: calc(7.5rem + var(--gutter-x-sm,0px));
  }

  .sm\:ml-auto{
    margin-left: auto;
  }

  .sm\:mt-0{
    margin-top: 0px;
  }

  .sm\:block{
    display: block;
  }

  .sm\:inline{
    display: inline;
  }

  .sm\:flex{
    display: flex;
  }

  .sm\:table{
    display: table;
  }

  .sm\:table-cell{
    display: table-cell;
  }

  .sm\:table-header-group{
    display: table-header-group;
  }

  .sm\:table-row-group{
    display: table-row-group;
  }

  .sm\:table-row{
    display: table-row;
  }

  .sm\:grid{
    display: grid;
  }

  .sm\:hidden{
    display: none;
  }

  .sm\:h-5{
    height: 1.25rem;
  }

  .sm\:w-28{
    width: 7rem;
  }

  .sm\:w-40{
    width: 10rem;
  }

  .sm\:w-48{
    width: 12rem;
  }

  .sm\:w-5{
    width: 1.25rem;
  }

  .sm\:w-52{
    width: 13rem;
  }

  .sm\:w-64{
    width: 16rem;
  }

  .sm\:w-72{
    width: 18rem;
  }

  .sm\:w-\[32\%\]{
    width: 32%;
  }

  .sm\:w-\[calc\(2\.9rem_\+_var\(--gutter-x-sm\2c 0px\)\)\]{
    width: calc(2.9rem + var(--gutter-x-sm,0px));
  }

  .sm\:w-\[calc\(2rem_\+_var\(--gutter-x-sm\2c 0px\)\)\]{
    width: calc(2rem + var(--gutter-x-sm,0px));
  }

  .sm\:w-\[calc\(3\.8rem_\+_var\(--gutter-x-sm\2c 0px\)\)\]{
    width: calc(3.8rem + var(--gutter-x-sm,0px));
  }

  .sm\:w-\[calc\(4\.7rem_\+_var\(--gutter-x-sm\2c 0px\)\)\]{
    width: calc(4.7rem + var(--gutter-x-sm,0px));
  }

  .sm\:w-\[calc\(5\.6rem_\+_var\(--gutter-x-sm\2c 0px\)\)\]{
    width: calc(5.6rem + var(--gutter-x-sm,0px));
  }

  .sm\:w-\[calc\(6\.5rem_\+_var\(--gutter-x-sm\2c 0px\)\)\]{
    width: calc(6.5rem + var(--gutter-x-sm,0px));
  }

  .sm\:w-auto{
    width: auto;
  }

  .sm\:w-px{
    width: 1px;
  }

  .sm\:min-w-0{
    min-width: 0px;
  }

  .sm\:min-w-\[22rem\]{
    min-width: 22rem;
  }

  .sm\:min-w-\[calc\(2\.9rem_\+_var\(--gutter-x-sm\2c 0px\)\)\]{
    min-width: calc(2.9rem + var(--gutter-x-sm,0px));
  }

  .sm\:min-w-\[calc\(2rem_\+_var\(--gutter-x-sm\2c 0px\)\)\]{
    min-width: calc(2rem + var(--gutter-x-sm,0px));
  }

  .sm\:min-w-\[calc\(3\.8rem_\+_var\(--gutter-x-sm\2c 0px\)\)\]{
    min-width: calc(3.8rem + var(--gutter-x-sm,0px));
  }

  .sm\:min-w-\[calc\(4\.7rem_\+_var\(--gutter-x-sm\2c 0px\)\)\]{
    min-width: calc(4.7rem + var(--gutter-x-sm,0px));
  }

  .sm\:min-w-\[calc\(5\.6rem_\+_var\(--gutter-x-sm\2c 0px\)\)\]{
    min-width: calc(5.6rem + var(--gutter-x-sm,0px));
  }

  .sm\:min-w-\[calc\(6\.5rem_\+_var\(--gutter-x-sm\2c 0px\)\)\]{
    min-width: calc(6.5rem + var(--gutter-x-sm,0px));
  }

  .sm\:max-w-\[14rem\]{
    max-width: 14rem;
  }

  .sm\:max-w-\[300px\]{
    max-width: 300px;
  }

  .sm\:max-w-\[60\%\]{
    max-width: 60%;
  }

  .sm\:max-w-none{
    max-width: none;
  }

  .sm\:max-w-sm{
    max-width: 24rem;
  }

  .sm\:max-w-xs{
    max-width: 20rem;
  }

  .sm\:flex-1{
    flex: 1 1 0%;
  }

  .sm\:flex-shrink-0{
    flex-shrink: 0;
  }

  .sm\:shrink-0{
    flex-shrink: 0;
  }

  .sm\:basis-0{
    flex-basis: 0px;
  }

  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .sm\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[9rem_1fr\]{
    grid-template-columns: 9rem 1fr;
  }

  .sm\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 1\.05fr\)\]{
    grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  }

  .sm\:grid-cols-\[minmax\(0\2c 2fr\)_1fr_1fr\]{
    grid-template-columns: minmax(0,2fr) 1fr 1fr;
  }

  .sm\:flex-row{
    flex-direction: row;
  }

  .sm\:flex-row-reverse{
    flex-direction: row-reverse;
  }

  .sm\:flex-col{
    flex-direction: column;
  }

  .sm\:flex-wrap{
    flex-wrap: wrap;
  }

  .sm\:flex-nowrap{
    flex-wrap: nowrap;
  }

  .sm\:items-start{
    align-items: flex-start;
  }

  .sm\:items-end{
    align-items: flex-end;
  }

  .sm\:items-center{
    align-items: center;
  }

  .sm\:items-baseline{
    align-items: baseline;
  }

  .sm\:items-stretch{
    align-items: stretch;
  }

  .sm\:justify-end{
    justify-content: flex-end;
  }

  .sm\:justify-between{
    justify-content: space-between;
  }

  .sm\:gap-0{
    gap: 0px;
  }

  .sm\:gap-1\.5{
    gap: 0.375rem;
  }

  .sm\:gap-2{
    gap: 0.5rem;
  }

  .sm\:gap-3{
    gap: 0.75rem;
  }

  .sm\:gap-4{
    gap: 1rem;
  }

  .sm\:gap-6{
    gap: 1.5rem;
  }

  .sm\:gap-8{
    gap: 2rem;
  }

  .sm\:gap-x-6{
    column-gap: 1.5rem;
  }

  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]){
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-x-8 > :not([hidden]) ~ :not([hidden]){
    --tw-space-x-reverse: 0;
    margin-right: calc(2rem * var(--tw-space-x-reverse));
    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:divide-x > :not([hidden]) ~ :not([hidden]){
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }

  .sm\:divide-y-0 > :not([hidden]) ~ :not([hidden]){
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
  }

  .sm\:self-end{
    align-self: flex-end;
  }

  .sm\:overflow-visible{
    overflow: visible;
  }

  .sm\:border-0{
    border-width: 0px;
  }

  .sm\:border-b-0{
    border-bottom-width: 0px;
  }

  .sm\:border-l{
    border-left-width: 1px;
  }

  .sm\:border-r{
    border-right-width: 1px;
  }

  .sm\:border-r-0{
    border-right-width: 0px;
  }

  .sm\:border-t-0{
    border-top-width: 0px;
  }

  .sm\:border-theme-border-default{
    border-color: var(--border-default);
  }

  .sm\:border-theme-border-divider{
    border-color: var(--border-divider);
  }

  .sm\:p-10{
    padding: 2.5rem;
  }

  .sm\:p-6{
    padding: 1.5rem;
  }

  .sm\:p-8{
    padding: 2rem;
  }

  .sm\:px-1\.5{
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }

  .sm\:px-3{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .sm\:px-5{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:px-\[18px\]{
    padding-left: 18px;
    padding-right: 18px;
  }

  .sm\:px-\[22px\]{
    padding-left: 22px;
    padding-right: 22px;
  }

  .sm\:py-0{
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .sm\:py-2{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .sm\:py-4{
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .sm\:py-\[13px\]{
    padding-top: 13px;
    padding-bottom: 13px;
  }

  .sm\:py-\[18px\]{
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .sm\:pl-0{
    padding-left: 0px;
  }

  .sm\:pl-12{
    padding-left: 3rem;
  }

  .sm\:pl-3{
    padding-left: 0.75rem;
  }

  .sm\:pl-36{
    padding-left: 9rem;
  }

  .sm\:pl-6{
    padding-left: 1.5rem;
  }

  .sm\:pl-8{
    padding-left: 2rem;
  }

  .sm\:pr-3{
    padding-right: 0.75rem;
  }

  .sm\:pr-6{
    padding-right: 1.5rem;
  }

  .sm\:pt-0{
    padding-top: 0px;
  }

  .sm\:pt-16{
    padding-top: 4rem;
  }

  .sm\:pt-32{
    padding-top: 8rem;
  }

  .sm\:text-left{
    text-align: left;
  }

  .sm\:text-right{
    text-align: right;
  }

  .sm\:text-3xl{
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl{
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-\[34px\]{
    font-size: 34px;
  }

  .sm\:text-base{
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:tracking-\[0\.15em\]{
    letter-spacing: 0.15em;
  }

  .sm\:first\:border-l:first-child{
    border-left-width: 1px;
  }

  .sm\:first\:border-l-0:first-child{
    border-left-width: 0px;
  }
}
@media (min-width: 768px){

  .md\:sticky{
    position: sticky;
  }

  .md\:top-\[calc\(var\(--app-header-h\2c 4rem\)\+2rem\)\]{
    top: calc(var(--app-header-h,4rem) + 2rem);
  }

  .md\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .md\:block{
    display: block;
  }

  .md\:flex{
    display: flex;
  }

  .md\:table-cell{
    display: table-cell;
  }

  .md\:hidden{
    display: none;
  }

  .md\:max-h-\[85dvh\]{
    max-height: 85dvh;
  }

  .md\:w-1\/2{
    width: 50%;
  }

  .md\:w-56{
    width: 14rem;
  }

  .md\:max-w-2xl{
    max-width: 42rem;
  }

  .md\:max-w-4xl{
    max-width: 56rem;
  }

  .md\:max-w-5xl{
    max-width: 64rem;
  }

  .md\:max-w-6xl{
    max-width: 72rem;
  }

  .md\:max-w-lg{
    max-width: 32rem;
  }

  .md\:max-w-md{
    max-width: 28rem;
  }

  .md\:max-w-sm{
    max-width: 24rem;
  }

  .md\:max-w-xl{
    max-width: 36rem;
  }

  .md\:flex-none{
    flex: none;
  }

  .md\:translate-y-0{
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:scale-100{
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:scale-95{
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-\[104px_minmax\(0\2c 1fr\)_minmax\(0\2c 1fr\)_minmax\(0\2c 140px\)_148px\]{
    grid-template-columns: 104px minmax(0,1fr) minmax(0,1fr) minmax(0,140px) 148px;
  }

  .md\:grid-cols-\[22px_64px_1fr_140px\]{
    grid-template-columns: 22px 64px 1fr 140px;
  }

  .md\:grid-cols-\[22px_70px_120px_1fr_110px\]{
    grid-template-columns: 22px 70px 120px 1fr 110px;
  }

  .md\:grid-cols-\[64px_minmax\(0\2c 1fr\)_150px_150px\]{
    grid-template-columns: 64px minmax(0,1fr) 150px 150px;
  }

  .md\:grid-cols-\[minmax\(0\2c 1fr\)_104px_96px_132px_minmax\(0\2c 160px\)_148px\]{
    grid-template-columns: minmax(0,1fr) 104px 96px 132px minmax(0,160px) 148px;
  }

  .md\:grid-cols-\[minmax\(0\2c 1fr\)_120px_120px_64px\]{
    grid-template-columns: minmax(0,1fr) 120px 120px 64px;
  }

  .md\:grid-cols-\[minmax\(0\2c 1fr\)_120px_200px\]{
    grid-template-columns: minmax(0,1fr) 120px 200px;
  }

  .md\:grid-cols-\[minmax\(0\2c 1fr\)_120px_200px_72px_140px\]{
    grid-template-columns: minmax(0,1fr) 120px 200px 72px 140px;
  }

  .md\:grid-cols-\[minmax\(0\2c 1fr\)_92px_104px_176px_64px_200px_120px\]{
    grid-template-columns: minmax(0,1fr) 92px 104px 176px 64px 200px 120px;
  }

  .md\:grid-cols-\[minmax\(0\2c 1fr\)_92px_96px_176px_64px_108px_104px\]{
    grid-template-columns: minmax(0,1fr) 92px 96px 176px 64px 108px 104px;
  }

  .md\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 200px\)_72px_72px_72px_120px_160px\]{
    grid-template-columns: minmax(0,1fr) minmax(0,200px) 72px 72px 72px 120px 160px;
  }

  .md\:flex-row{
    flex-direction: row;
  }

  .md\:items-center{
    align-items: center;
  }

  .md\:divide-x > :not([hidden]) ~ :not([hidden]){
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }

  .md\:divide-y-0 > :not([hidden]) ~ :not([hidden]){
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
  }

  .md\:rounded-xl{
    border-radius: 0.75rem;
  }

  .md\:border-l{
    border-left-width: 1px;
  }

  .md\:border-r{
    border-right-width: 1px;
  }

  .md\:border-t-0{
    border-top-width: 0px;
  }

  .md\:border-theme-border-default{
    border-color: var(--border-default);
  }

  .md\:p-4{
    padding: 1rem;
  }

  .md\:p-6{
    padding: 1.5rem;
  }

  .md\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:pb-4{
    padding-bottom: 1rem;
  }

  .md\:text-4xl{
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:opacity-0{
    opacity: 0;
  }

  .md\:opacity-100{
    opacity: 1;
  }
}
@media (min-width: 900px){

  .min-\[900px\]\:inline{
    display: inline;
  }
}
@media (min-width: 1024px){

  .lg\:sticky{
    position: sticky;
  }

  .lg\:bottom-10{
    bottom: 2.5rem;
  }

  .lg\:top-16{
    top: 4rem;
  }

  .lg\:order-2{
    order: 2;
  }

  .lg\:order-3{
    order: 3;
  }

  .lg\:col-span-1{
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-5{
    grid-column: span 5 / span 5;
  }

  .lg\:col-start-1{
    grid-column-start: 1;
  }

  .lg\:col-start-2{
    grid-column-start: 2;
  }

  .lg\:col-start-3{
    grid-column-start: 3;
  }

  .lg\:row-span-2{
    grid-row: span 2 / span 2;
  }

  .lg\:row-start-1{
    grid-row-start: 1;
  }

  .lg\:row-start-2{
    grid-row-start: 2;
  }

  .lg\:-mx-10{
    margin-left: -2.5rem;
    margin-right: -2.5rem;
  }

  .lg\:-mt-8{
    margin-top: -2rem;
  }

  .lg\:ml-64{
    margin-left: 16rem;
  }

  .lg\:ml-auto{
    margin-left: auto;
  }

  .lg\:block{
    display: block;
  }

  .lg\:flex{
    display: flex;
  }

  .lg\:inline-flex{
    display: inline-flex;
  }

  .lg\:table-cell{
    display: table-cell;
  }

  .lg\:hidden{
    display: none;
  }

  .lg\:h-\[calc\(100vh-153px\)\]{
    height: calc(100vh - 153px);
  }

  .lg\:h-auto{
    height: auto;
  }

  .lg\:max-h-\[calc\(100dvh-13rem\)\]{
    max-height: calc(100dvh - 13rem);
  }

  .lg\:max-h-\[calc\(100vh-5rem\)\]{
    max-height: calc(100vh - 5rem);
  }

  .lg\:min-h-\[640px\]{
    min-height: 640px;
  }

  .lg\:w-72{
    width: 18rem;
  }

  .lg\:w-px{
    width: 1px;
  }

  .lg\:max-w-\[48rem\]{
    max-width: 48rem;
  }

  .lg\:basis-auto{
    flex-basis: auto;
  }

  .lg\:translate-x-0{
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[15rem_minmax\(0\2c 1fr\)\]{
    grid-template-columns: 15rem minmax(0,1fr);
  }

  .lg\:grid-cols-\[320px_minmax\(0\2c 1fr\)\]{
    grid-template-columns: 320px minmax(0,1fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1\.1fr\)_110px_140px_170px_minmax\(0\2c 1\.6fr\)_120px_96px\]{
    grid-template-columns: minmax(0,1.1fr) 110px 140px 170px minmax(0,1.6fr) 120px 96px;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1\.4fr\)_minmax\(0\2c 1fr\)\]{
    grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_auto_minmax\(0\2c 1fr\)\]{
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 1fr\)_auto\]{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto;
  }

  .lg\:flex-row{
    flex-direction: row;
  }

  .lg\:flex-col{
    flex-direction: column;
  }

  .lg\:items-start{
    align-items: flex-start;
  }

  .lg\:justify-center{
    justify-content: center;
  }

  .lg\:justify-between{
    justify-content: space-between;
  }

  .lg\:gap-8{
    gap: 2rem;
  }

  .lg\:self-start{
    align-self: flex-start;
  }

  .lg\:self-stretch{
    align-self: stretch;
  }

  .lg\:border-b-0{
    border-bottom-width: 0px;
  }

  .lg\:border-l{
    border-left-width: 1px;
  }

  .lg\:border-t-0{
    border-top-width: 0px;
  }

  .lg\:px-10{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .lg\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:py-\[18px\]{
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .lg\:pb-0{
    padding-bottom: 0px;
  }

  .lg\:pl-0{
    padding-left: 0px;
  }

  .lg\:pt-6{
    padding-top: 1.5rem;
  }

  .lg\:pt-8{
    padding-top: 2rem;
  }
}
@media (min-width: 1280px){

  .xl\:inline{
    display: inline;
  }

  .xl\:flex{
    display: flex;
  }

  .xl\:hidden{
    display: none;
  }

  .xl\:w-\[272px\]{
    width: 272px;
  }
}
@media print{

  .print\:block{
    display: block;
  }

  .print\:hidden{
    display: none;
  }

  .print\:border{
    border-width: 1px;
  }

  .print\:border-black{
    --tw-border-opacity: 1;
    border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
  }
}
@media not all and (min-width: 640px){

  .max-sm\:\[\&\+\&\]\:border-l+.max-sm\:\[\&\+\&\]\:border-l{
    border-left-width: 1px;
  }
}
.\[\&\:\:-moz-range-thumb\]\:h-4::-moz-range-thumb{
  height: 1rem;
}
.\[\&\:\:-moz-range-thumb\]\:w-4::-moz-range-thumb{
  width: 1rem;
}
.\[\&\:\:-moz-range-thumb\]\:rounded-full::-moz-range-thumb{
  border-radius: 9999px;
}
.\[\&\:\:-moz-range-thumb\]\:border-0::-moz-range-thumb{
  border-width: 0px;
}
.\[\&\:\:-moz-range-thumb\]\:bg-theme-text-accent::-moz-range-thumb{
  background-color: var(--text-accent);
}
.\[\&\:\:-moz-range-thumb\]\:opacity-0::-moz-range-thumb{
  opacity: 0;
}
.focus-visible\:\[\&\:\:-moz-range-thumb\]\:shadow-\[0_0_0_3px_var\(--focus-ring\)\]::-moz-range-thumb:focus-visible{
  --tw-shadow: 0 0 0 3px var(--focus-ring);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.\[\&\:\:-moz-range-track\]\:h-1\.5::-moz-range-track{
  height: 0.375rem;
}
.\[\&\:\:-moz-range-track\]\:rounded-full::-moz-range-track{
  border-radius: 9999px;
}
.\[\&\:\:-moz-range-track\]\:bg-theme-border-input::-moz-range-track{
  background-color: var(--border-input);
}
.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{
  display: none;
}
.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar{
  display: none;
}
.\[\&\:\:-webkit-slider-runnable-track\]\:h-1\.5::-webkit-slider-runnable-track{
  height: 0.375rem;
}
.\[\&\:\:-webkit-slider-runnable-track\]\:rounded-full::-webkit-slider-runnable-track{
  border-radius: 9999px;
}
.\[\&\:\:-webkit-slider-runnable-track\]\:bg-theme-border-input::-webkit-slider-runnable-track{
  background-color: var(--border-input);
}
.\[\&\:\:-webkit-slider-thumb\]\:-mt-\[5px\]::-webkit-slider-thumb{
  margin-top: -5px;
}
.\[\&\:\:-webkit-slider-thumb\]\:h-4::-webkit-slider-thumb{
  height: 1rem;
}
.\[\&\:\:-webkit-slider-thumb\]\:w-4::-webkit-slider-thumb{
  width: 1rem;
}
.\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb{
  appearance: none;
}
.\[\&\:\:-webkit-slider-thumb\]\:rounded-full::-webkit-slider-thumb{
  border-radius: 9999px;
}
.\[\&\:\:-webkit-slider-thumb\]\:border-0::-webkit-slider-thumb{
  border-width: 0px;
}
.\[\&\:\:-webkit-slider-thumb\]\:bg-theme-text-accent::-webkit-slider-thumb{
  background-color: var(--text-accent);
}
.\[\&\:\:-webkit-slider-thumb\]\:opacity-0::-webkit-slider-thumb{
  opacity: 0;
}
.focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:shadow-\[0_0_0_3px_var\(--focus-ring\)\]::-webkit-slider-thumb:focus-visible{
  --tw-shadow: 0 0 0 3px var(--focus-ring);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.\[\&\:nth-child\(odd\)\]\:border-l-0:nth-child(odd){
  border-left-width: 0px;
}
@media (min-width: 640px){

  .sm\:\[\&\:nth-child\(odd\)\]\:border-l:nth-child(odd){
    border-left-width: 1px;
  }
}
.\[\&\>\*\:first-child\]\:mt-0>*:first-child{
  margin-top: 0px;
}
.\[\&\>\*\:last-child\]\:mb-0>*:last-child{
  margin-bottom: 0px;
}
.page-spec .\[\.page-spec_\&\:hover\]\:text-mk-field-ink:hover{
  color: var(--mk-field-ink);
}
.page-spec .\[\.page-spec_\&\]\:text-mk-field-muted{
  color: var(--mk-field-muted);
}

/* The public site's companion stylesheet (direction E).
 *
 * Source of truth: docs/mockups/site-rebuild-e.html (its \3c style> block, the
 * page shell only). Plan: docs/marketing/site-rebuild-e-build-plan.md,
 * Decisions 2, 4, 5 and 6. This file is the FIDELITY CONTRACT: the page agents
 * write JSX with E's class names (hero, pair, txt-inner, field, plate, steps,
 * qs, closer, btn, ...) and get the mockup's pixels. Change a value here only
 * together with the mockup.
 *
 * SCOPING CONVENTION
 * ------------------
 * Nothing in this file applies outside an element with the class `mk`. Each
 * public page puts `mk` on its root element (the header, if it sits outside the
 * page root, gets `mk` too or is wrapped in an `.mk` element).
 *
 *   - A class rule from the mockup gains a `.mk ` prefix:
 *       .hero h1                 ->  .mk .hero h1
 *     Every class rule gains the same +1 class of specificity, so their order
 *     among themselves is exactly the mockup's. (They also outrank a single
 *     Tailwind utility; inside these classes the mockup wins, by design.)
 *   - An element rule from the mockup gains `:where(.mk) `, which adds NO
 *     specificity, so it behaves like the mockup's bare element rule and any
 *     Tailwind utility still overrides it:
 *       a { ... }                ->  :where(.mk) a { ... }
 *   - The mockup's `body` rule lands on `.mk` itself (the page base).
 *   - Page-level variants sit on the `.mk` element itself or on an ancestor:
 *       .page-spec .site-header  ->  .mk.page-spec .site-header,
 *                                    .page-spec .mk .site-header
 *   - Root-class switches stay on <html> and are written before `.mk`:
 *       html.reveal [data-reveal] .rv  ->  html.reveal .mk [data-reveal] .rv
 *   - Theme is the app's `.dark` class on <html> (ThemeContext), never
 *     prefers-color-scheme and never data-theme (Decision 6):
 *       :root[data-theme="dark"] ->  .dark .mk
 *
 * TOKENS
 * ------
 * The mockup's --paper, --ink, ... are renamed --mk-paper, --mk-ink, ... so they
 * cannot collide with the app's own custom properties (index.css). Tailwind
 * exposes the colours as mk-paper, mk-ink, ... (bg-mk-field, text-mk-muted) and
 * the faces as font-archivo and font-serif4. `.mk-tokens` defines the same
 * properties WITHOUT the page base (paper background, serif body), for a
 * surface such as the app masthead that wants E's colours but not the page.
 *
 * NOT HERE: the mockup's switcher bar and theme/vignette toggles (mockup chrome,
 * Decision 6), `.sr-only` and `[hidden]` (Tailwind's preflight and sr-only
 * utility already do the same), and every `.vg-*` rule (the vignettes carry
 * their own stylesheets). The mockup's --bar was the switcher's height; the
 * site has no switcher, so --mk-bar is 0px and the calc()s keep their shape.
 *
 * Fonts: Archivo and Source Serif 4 are self-hosted variable faces declared in
 * fonts.css (generated by scripts/fetch-fonts.mjs). No Google Fonts link.
 */

/* ── tokens ── */
.mk,
.mk-tokens {
  --mk-paper: oklch(0.978 0.004 80);
  --mk-ink: oklch(0.22 0.03 247);
  --mk-muted: oklch(0.47 0.03 247);
  --mk-rule: oklch(0.87 0.012 247);
  --mk-accent: oklch(
    0.49 0.2 247
  ); /* the one accent: fields, the hero's "Not a copy.", primary buttons */
  --mk-accent-text: oklch(0.49 0.2 247);
  --mk-hero-accent: oklch(
    0.49 0.2 247
  ); /* the hero's "Not a copy.": in dark it stays the button blue, not the lighter text blue (founder, 2026-10-25) */
  --mk-accent-hover: oklch(0.43 0.19 247);
  --mk-field: oklch(0.49 0.2 247);
  --mk-field-ink: oklch(0.99 0.004 247);
  --mk-field-muted: oklch(0.89 0.045 247);
  --mk-field-rule: oklch(1 0 0 / 0.22);
  --mk-tick: oklch(0.87 0.012 247);
  --mk-ring: oklch(0.49 0.2 247);
  --mk-display: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --mk-serif: 'Source Serif 4', ui-serif, Georgia, serif;
  --mk-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --mk-bar: 0px;
  color-scheme: light;
}
.dark .mk,
.dark .mk-tokens {
  --mk-paper: oklch(0.15 0.02 247);
  --mk-ink: oklch(0.95 0.008 247);
  --mk-muted: oklch(0.76 0.03 247);
  --mk-rule: oklch(1 0 0 / 0.13);
  --mk-accent: oklch(0.52 0.2 247);
  --mk-accent-text: oklch(0.74 0.14 247);
  --mk-hero-accent: oklch(0.64 0.19 247);
  --mk-accent-hover: oklch(0.58 0.2 247);
  --mk-field: oklch(0.42 0.17 247);
  --mk-field-muted: oklch(0.86 0.05 247);
  --mk-tick: oklch(1 0 0 / 0.16);
  --mk-ring: oklch(0.74 0.14 247);
  color-scheme: dark;
}

/* ── base (the mockup's body and element rules) ── */
.mk {
  background: var(--mk-paper);
  color: var(--mk-ink);
  font-family: var(--mk-serif);
  font-size: 18px;
  line-height: 1.55;
  overflow-x: clip;
}
/* Preflight already zeroes these margins, sets box-sizing and strips list
   styles; restated so the shell does not depend on it. */
:where(.mk) *,
:where(.mk) *::before,
:where(.mk) *::after {
  box-sizing: border-box;
}
:where(.mk) h1,
:where(.mk) h2,
:where(.mk) h3,
:where(.mk) p,
:where(.mk) ul,
:where(.mk) ol,
:where(.mk) dl,
:where(.mk) dd,
:where(.mk) figure {
  margin: 0;
}
:where(.mk) ul {
  padding: 0;
  list-style: none;
}
/* Preflight resets headings to inherit size and weight; the mockup's headings
   always carry a class that sets both, so only the browser's bold default is
   restored for a bare heading. */
:where(.mk) h1,
:where(.mk) h2,
:where(.mk) h3 {
  font-weight: 700;
}
/* Preflight sets a { text-decoration: inherit }, which removes the underline the
   mockup's plain links (the closer's tertiary line) keep from the browser. This
   ties preflight's `a` on specificity and wins on order, which is why the file
   is imported AFTER index.css (src/index.js), not @imported into it.
   (summary needs no reset: .mk .qs summary sets display and hides the marker.) */
:where(.mk) a {
  color: inherit;
  text-decoration: underline;
}
.mk :focus-visible {
  outline: 2px solid var(--mk-ring);
  outline-offset: 3px;
}
.mk .on-field :focus-visible {
  outline-color: var(--mk-field-ink);
}

.mk .wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 640px) {
  .mk .wrap {
    padding: 0 40px;
  }
}
@media (min-width: 1024px) {
  .mk .wrap {
    padding: 0 72px;
  }
}

/* type roles */
.mk .eyebrow {
  font-family: var(--mk-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mk-muted);
}
.mk .on-field .eyebrow {
  color: var(--mk-field-muted);
}
.mk .display {
  font-family: var(--mk-display);
  font-stretch: 112%;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 0.95;
}
.mk .index-link {
  font-family: var(--mk-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mk-accent-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.mk .index-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mk .on-field .index-link {
  color: var(--mk-field-ink);
}
.mk .trust {
  font-family: var(--mk-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mk-muted);
}
.mk .on-field .trust {
  color: var(--mk-field-muted);
}

/* buttons: one primary, one secondary per group */
.mk .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.mk .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  font-family: var(--mk-display);
  font-stretch: 105%;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0;
  text-decoration: none;
  border-radius: 2px;
  transition:
    background-color 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.mk .btn-primary {
  background: var(--mk-accent);
  color: #fff;
  border: 2px solid var(--mk-accent);
}
.mk .btn-primary:hover {
  background: var(--mk-accent-hover);
  border-color: var(--mk-accent-hover);
}
.mk .btn-secondary {
  background: transparent;
  color: var(--mk-ink);
  border: 2px solid var(--mk-ink);
}
.mk .btn-secondary:hover {
  background: var(--mk-ink);
  color: var(--mk-paper);
}
.mk .on-field .btn-primary {
  background: var(--mk-field-ink);
  color: var(--mk-field);
  border-color: var(--mk-field-ink);
}
.mk .on-field .btn-primary:hover {
  background: transparent;
  color: var(--mk-field-ink);
}
.mk .on-field .btn-secondary {
  color: var(--mk-field-ink);
  border-color: var(--mk-field-ink);
}
.mk .on-field .btn-secondary:hover {
  background: var(--mk-field-ink);
  color: var(--mk-field);
}
@media (max-width: 480px) {
  .mk .actions .btn {
    flex: 1 1 100%;
  }
}

/* ── site header ── */
.mk .site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 28px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.mk .wordmark {
  font-family: var(--mk-display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.06em; /* was 900 / 118% / -0.02em: the letters touched (founder, 2026-10-25) */
  line-height: 1;
  color: var(--mk-accent-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.mk .site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
}
.mk .site-nav a {
  font-family: var(--mk-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mk-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.mk .site-nav a:hover,
.mk .site-nav a[aria-current='page'] {
  color: var(--mk-ink);
}
.mk .site-nav a[aria-current='page'] {
  box-shadow: inset 0 -2px 0 var(--mk-accent-text);
}
/* The logo lines up with the left edge of the layout under it (founder,
 * 2026-10-28). Most public pages are a centred column, so the header keeps the
 * column's .wrap. Help is a full-width rail and article, so its header spans
 * the screen and the wordmark sits over the rail's text: 16px while the rail
 * stacks, 32px beside the article from lg (the rail's padding below). */
.mk.page-help .site-header .wrap {
  max-width: none;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 1024px) {
  .mk.page-help .site-header .wrap {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media (max-width: 480px) {
  .mk .site-nav {
    gap: 0 14px;
  }
  .mk .site-nav a {
    font-size: 10px;
    letter-spacing: 0.12em;
  }
}
.mk.page-spec .site-header,
.page-spec .mk .site-header {
  background: var(--mk-field);
}
.mk.page-spec .site-header .wordmark,
.page-spec .mk .site-header .wordmark {
  color: var(--mk-field-ink);
}
.mk.page-spec .site-header .site-nav a,
.page-spec .mk .site-header .site-nav a {
  color: var(--mk-field-muted);
}
.mk.page-spec .site-header .site-nav a:hover,
.mk.page-spec .site-header .site-nav a[aria-current='page'],
.page-spec .mk .site-header .site-nav a:hover,
.page-spec .mk .site-header .site-nav a[aria-current='page'] {
  color: var(--mk-field-ink);
}
.mk.page-spec .site-header .site-nav a[aria-current='page'],
.page-spec .mk .site-header .site-nav a[aria-current='page'] {
  box-shadow: inset 0 -2px 0 var(--mk-field-ink);
}
.mk.page-spec .site-header :focus-visible,
.page-spec .mk .site-header :focus-visible {
  outline-color: var(--mk-field-ink);
}

/* ── hero: one full-height statement ── */
.mk .hero {
  min-height: calc(100svh - var(--mk-bar) - 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 0 0;
}
.mk .hero .wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
}
.mk .hero h1 {
  font-size: clamp(46px, 8.6vw, 164px);
  margin-top: 28px;
  max-width: 13ch;
}
.mk .hero h1 .accent {
  color: var(--mk-hero-accent);
  display: block;
}
.mk .hero .deck {
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.5;
  max-width: 40ch;
  margin-top: 36px;
}
.mk .hero .actions {
  margin-top: 36px;
}
.mk .hero .under {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 32px;
  margin-top: 16px;
}
.mk .hero-strip {
  margin-top: 56px;
  background: var(--mk-field);
  color: var(--mk-field-ink);
}
.mk .hero-strip .wrap {
  padding-top: 18px;
  padding-bottom: 18px;
}
.mk .hero-strip .trust {
  color: var(--mk-field-ink);
}
.mk .hero.on-field {
  background: var(--mk-field);
  color: var(--mk-field-ink);
  padding-bottom: 72px;
  min-height: calc(100svh - var(--mk-bar) - 72px);
}
.mk .hero.on-field h1 {
  max-width: 12ch;
}

/* ── chapter openers ── */
.mk .opener {
  padding: clamp(96px, 16vh, 180px) 0 clamp(56px, 9vh, 112px);
  border-top: 1px solid var(--mk-rule);
}
.mk .opener h2 {
  font-size: clamp(40px, 6.4vw, 112px);
  margin-top: 20px;
  max-width: 14ch;
}
.mk .opener .wrap > h2:first-child {
  margin-top: 0;
}

/* ── a feature pair: one vignette, one column of text, sides alternate ── */
.mk .pair {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--mk-rule);
}
.mk .pair .txt {
  padding: 56px 16px 40px;
  display: flex;
  align-items: center;
}
.mk .pair .txt-inner {
  max-width: 34rem;
}
.mk .pair .field {
  background: var(--mk-field);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px 48px;
}
.mk .pair .plate {
  width: 100%;
  max-width: 600px;
}
/* The second selector reaches a ported vignette's figure through its host div. */
.mk .pair .plate > figure,
.mk .pair .plate > [data-vignette] > figure {
  margin: 0;
}
.mk .pair h3 {
  font-family: var(--mk-display);
  font-stretch: 110%;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  font-size: clamp(34px, 3.6vw, 58px);
  margin-top: 20px;
}
.mk .pair .line {
  font-size: clamp(20px, 1.55vw, 24px);
  line-height: 1.45;
  margin-top: 22px;
}
.mk .pair .detail {
  font-size: 17px;
  line-height: 1.6;
  color: var(--mk-muted);
  margin-top: 18px;
}
.mk .pair .body {
  font-size: clamp(18px, 1.3vw, 20px);
  line-height: 1.6;
  margin-top: 22px;
}
.mk .pair .index-link {
  margin-top: 18px;
}
.mk .num {
  font-family: var(--mk-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--mk-accent-text);
}
.mk .ticks {
  display: flex;
  gap: 6px;
}
.mk .ticks i {
  display: block;
  width: 22px;
  height: 4px;
  background: var(--mk-tick);
}
.mk .ticks i.on {
  background: var(--mk-accent-text);
}
@media (min-width: 640px) {
  .mk .pair .txt {
    padding: 72px 40px 48px;
  }
  .mk .pair .field {
    padding: 56px 40px 64px;
  }
}
@media (min-width: 1024px) {
  .mk .pair {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    min-height: calc(100svh - var(--mk-bar));
    border-top: 0;
  }
  .mk .pair .txt {
    padding: 96px clamp(40px, 5vw, 96px);
  }
  .mk .pair .field {
    padding: 96px clamp(40px, 5vw, 96px);
  }
  .mk .pair.fl {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .mk .pair.fl .field {
    order: -1;
  }
  .mk .pair + .pair {
    border-top: 0;
  }
  .mk .pair .txt {
    border-top: 1px solid var(--mk-rule);
  }
}

/* a statement screen: a mechanism with no vignette, the field carries it */
.mk .statement {
  background: var(--mk-field);
  color: var(--mk-field-ink);
  padding: 96px 0 104px;
}
.mk .statement .inner {
  max-width: 62rem;
}
.mk .statement h3 {
  font-family: var(--mk-display);
  font-stretch: 112%;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 0.95;
  font-size: clamp(40px, 6vw, 104px);
  margin-top: 22px;
}
.mk .statement .body {
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.45;
  margin-top: 32px;
  max-width: 40ch;
}
.mk .statement .num {
  color: var(--mk-field-ink);
}
@media (min-width: 1024px) {
  .mk .statement {
    min-height: calc(100svh - var(--mk-bar));
    display: flex;
    align-items: center;
  }
  .mk .statement .wrap {
    width: 100%;
  }
}

/* home: how to start, on the field */
.mk .steps {
  background: var(--mk-field);
  color: var(--mk-field-ink);
  padding: 96px 0 104px;
}
.mk .steps h2 {
  font-size: clamp(36px, 5.2vw, 92px);
  margin-top: 20px;
  max-width: 16ch;
}
.mk .steps ol {
  list-style: none;
  padding: 0;
  margin: 64px 0 0;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--mk-field-rule);
}
.mk .steps li {
  padding: 28px 0 32px;
  border-bottom: 1px solid var(--mk-field-rule);
}
.mk .steps .lab {
  font-family: var(--mk-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--mk-field-muted);
}
.mk .steps h3 {
  font-family: var(--mk-display);
  font-stretch: 110%;
  font-weight: 800;
  font-size: clamp(26px, 2.2vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-top: 14px;
}
.mk .steps p {
  font-size: 18px;
  margin-top: 12px;
  color: var(--mk-field-muted);
  max-width: 36ch;
}
@media (min-width: 1024px) {
  .mk .steps {
    min-height: calc(100svh - var(--mk-bar));
    display: flex;
    align-items: center;
  }
  .mk .steps .wrap {
    width: 100%;
  }
  .mk .steps ol {
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--mk-field-rule);
  }
  .mk .steps li {
    border-bottom: 0;
    padding: 32px 40px 40px 0;
  }
  .mk .steps li + li {
    border-left: 1px solid var(--mk-field-rule);
    padding-left: 40px;
  }
  /* Four clauses (Developers Part 1): two by two here, four across from 1280. */
  .mk .steps-4 ol {
    grid-template-columns: repeat(2, 1fr);
  }
  .mk .steps-4 li:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
  .mk .steps-4 li:nth-child(n + 3) {
    border-top: 1px solid var(--mk-field-rule);
  }
}
@media (min-width: 1280px) {
  .mk .steps-4 ol {
    grid-template-columns: repeat(4, 1fr);
  }
  .mk .steps-4 li:nth-child(odd) {
    border-left: 1px solid var(--mk-field-rule);
    padding-left: 40px;
  }
  .mk .steps-4 li:first-child {
    border-left: 0;
    padding-left: 0;
  }
  .mk .steps-4 li:nth-child(n + 3) {
    border-top: 0;
  }
}

/* pricing: one sentence, set large */
.mk .price {
  padding: clamp(96px, 16vh, 180px) 0;
}
.mk .price .big {
  font-family: var(--mk-serif);
  font-size: clamp(26px, 3.2vw, 50px);
  line-height: 1.25;
  font-weight: 400;
  margin-top: 24px;
  max-width: 30ch;
  letter-spacing: -0.01em;
}
.mk .price .index-link {
  margin-top: 28px;
}

/* library */
.mk .library {
  border-top: 1px solid var(--mk-rule);
  padding: clamp(80px, 12vh, 140px) 0;
}
.mk .library .grid {
  display: grid;
  gap: 48px;
}
.mk .library h2 {
  font-size: clamp(36px, 4.6vw, 80px);
  margin-top: 20px;
  max-width: 12ch;
}
.mk .library .body {
  font-size: 19px;
  margin-top: 28px;
  max-width: 40ch;
}
.mk .library .list-label {
  font-family: var(--mk-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mk-muted);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--mk-ink);
}
.mk .reg li a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--mk-rule);
  text-decoration: none;
  min-height: 44px;
}
.mk .reg li a:hover .t {
  color: var(--mk-accent-text);
}
.mk .reg .t {
  font-family: var(--mk-display);
  font-stretch: 100%;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  min-width: 0;
}
.mk .reg .d {
  font-family: var(--mk-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-muted);
  white-space: nowrap;
}
.mk .library .after-list {
  margin-top: 16px;
}
@media (min-width: 1024px) {
  .mk .library .grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 96px;
  }
}

/* sent: the recipient block, a pair on its own */
.mk .pair .cannot {
  font-size: 17px;
  color: var(--mk-muted);
  margin-top: 18px;
}
.mk .pair .trust {
  margin-top: 24px;
}

/* questions */
.mk .qs {
  border-top: 1px solid var(--mk-rule);
  padding: clamp(80px, 12vh, 140px) 0;
}
.mk .qs .grid {
  display: grid;
  gap: 40px;
}
.mk .qs h2 {
  font-size: clamp(40px, 5vw, 88px);
}
.mk .qs details {
  border-bottom: 1px solid var(--mk-rule);
}
.mk .qs details:first-child {
  border-top: 2px solid var(--mk-ink);
}
.mk .qs summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  font-family: var(--mk-display);
  font-stretch: 105%;
  font-weight: 700;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.25;
  min-height: 44px;
}
.mk .qs summary::-webkit-details-marker {
  display: none;
}
.mk .qs summary::after {
  content: '+';
  font-family: var(--mk-mono);
  font-weight: 400;
  color: var(--mk-accent-text);
  font-size: 22px;
  line-height: 1;
}
.mk .qs details[open] summary::after {
  content: '\2212';
}
.mk .qs details p {
  padding: 0 0 26px;
  max-width: 46ch;
  font-size: 18px;
  color: var(--mk-muted);
}
@media (min-width: 1024px) {
  .mk .qs .grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 96px;
  }
}

/* closer: the last full field */
.mk .closer {
  background: var(--mk-field);
  color: var(--mk-field-ink);
  padding: 112px 0 120px;
}
.mk .closer h2 {
  font-size: clamp(44px, 7.6vw, 144px);
  max-width: 12ch;
}
.mk .closer .body {
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.5;
  margin-top: 32px;
  max-width: 40ch;
  color: var(--mk-field-ink);
}
.mk .closer .actions {
  margin-top: 40px;
}
.mk .closer .tertiary {
  margin-top: 20px;
}
.mk .closer .tertiary a {
  color: var(--mk-field-ink);
  font-size: 18px;
  text-underline-offset: 4px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
@media (min-width: 1024px) {
  .mk .closer {
    min-height: calc(100svh - var(--mk-bar));
    display: flex;
    align-items: center;
  }
  .mk .closer .wrap {
    width: 100%;
  }
}

/* where one accent field meets another, a hairline keeps them two */
.mk .steps,
.mk .statement,
.mk .closer {
  box-shadow: inset 0 1px 0 var(--mk-field-rule);
}

/* ── scroll reveals: only when JS runs and motion is allowed; otherwise the finished state ──
   The page code adds `reveal` to <html> (only when IntersectionObserver exists)
   and `in` to each [data-reveal] section as it enters the viewport. The
   keyframes are named mk-rise so they cannot collide with the app's own. */
@media (prefers-reduced-motion: no-preference) {
  .mk .rise {
    animation: mk-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .mk .rise-2 {
    animation-delay: 0.12s;
  }
  .mk .rise-3 {
    animation-delay: 0.24s;
  }
  .mk .rise-4 {
    animation-delay: 0.36s;
  }
  /* A prerendered page's hero already rose before the bundle replaced the
     markup (ssg-painted, src/index.js); React's identical copy appears in place. */
  .ssg-painted .mk .rise {
    animation: none;
  }
  @keyframes mk-rise {
    from {
      opacity: 0;
      transform: translateY(28px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  html.reveal .mk [data-reveal] .rv {
    opacity: 0;
    transform: translateY(36px);
    transition:
      opacity 0.7s ease,
      transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  html.reveal .mk [data-reveal] .rv-2 {
    transition-delay: 0.1s;
  }
  html.reveal .mk [data-reveal] .rv-3 {
    transition-delay: 0.2s;
  }
  html.reveal .mk [data-reveal].in .rv {
    opacity: 1;
    transform: none;
  }
  html.reveal .mk .pair[data-reveal] .field {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 1s cubic-bezier(0.7, 0, 0.2, 1);
  }
  html.reveal .mk .pair.fl[data-reveal] .field {
    clip-path: inset(0 100% 0 0);
  }
  html.reveal .mk .pair[data-reveal].in .field {
    clip-path: inset(0);
  }
  html.reveal .mk .pair[data-reveal] .plate {
    opacity: 0;
    transform: translateY(48px);
    transition:
      opacity 0.7s ease 0.35s,
      transform 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s;
  }
  html.reveal .mk .pair[data-reveal].in .plate {
    opacity: 1;
    transform: none;
  }
  @media (max-width: 1023px) {
    html.reveal .mk .pair[data-reveal] .field,
    html.reveal .mk .pair.fl[data-reveal] .field {
      clip-path: inset(0 0 100% 0);
    }
    html.reveal .mk .pair[data-reveal].in .field {
      clip-path: inset(0);
    }
  }
}

/* Vignettes inside a screen inherit the page's line-height, as in the mockup (its
   body sets 1.55 and the figures take it). Each ported vignette's generated
   baseline resets its figure to line-height: normal to match the standalone
   mockup files, which never set one; that is right in the gallery and wrong on
   a page. Outranks the baseline (.vg-<key>, one class) by specificity. */
.mk .plate > [data-vignette] > figure {
  line-height: 1.55;
}

/* ══ pricing (/pricing, variant B "One sheet" of docs/mockups/pricing-e.html) ══
   The mockup's pricing additions that variant B uses, on the same tokens, type
   roles and spacing scale, renamed to --mk-*. One departure, on the founder's
   brief (2026-10-26): the launch-pricing note is set in the year line's small
   mono register, and from 1024 the three columns share their rows (subgrid),
   so the ledes start level whatever sits under each figure. */

/* routing block: who this page is for */
.mk .who {
  margin-top: 56px;
  max-width: 64rem;
  border-top: 2px solid var(--mk-ink);
}
.mk .who .eyebrow {
  display: block;
  padding-top: 14px;
}
.mk .who ul {
  margin-top: 6px;
}
.mk .who li {
  padding: 14px 0;
  border-top: 1px solid var(--mk-rule);
  font-size: clamp(18px, 1.4vw, 21px);
  line-height: 1.5;
  max-width: 52ch;
}
.mk .who li:first-child {
  border-top: 0;
}
.mk .who .go {
  font-weight: 600;
}
.mk .on-field .who {
  border-top-color: var(--mk-field-ink);
}
.mk .on-field .who li {
  border-top-color: var(--mk-field-rule);
}
@media (min-width: 1024px) {
  .mk .who {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 0 40px;
  }
  .mk .who .eyebrow {
    padding-top: 20px;
  }
  .mk .who ul {
    margin-top: 0;
  }
}

/* a clause list: the number in a mono gutter, one hairline per clause */
.mk .cl {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  border-top: 1px solid var(--mk-rule);
}
.mk .cl li {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 0 12px;
  padding: 12px 0 13px;
  border-bottom: 1px solid var(--mk-rule);
  font-size: 17px;
  line-height: 1.5;
}
.mk .cl .n {
  font-family: var(--mk-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--mk-accent-text);
  padding-top: 4px;
}

/* the everything note (2.0x lead and body), and the purchase-off strings */
.mk .everything {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--mk-muted);
  max-width: 44ch;
}
.mk .everything strong {
  color: var(--mk-ink);
  font-weight: 600;
}
.mk .everything a {
  color: var(--mk-accent-text);
  text-underline-offset: 3px;
}
.mk .off-note {
  font-size: 16px;
  color: var(--mk-muted);
  max-width: 40ch;
}
.mk .off-block {
  margin-top: 18px;
}
.mk .off-block .index-link {
  margin: 0;
}

/* the hero's figure, on the field */
.mk .fig {
  color: var(--mk-field-ink);
}
.mk .fig .amt {
  display: block;
  font-family: var(--mk-display);
  font-stretch: 112%;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.85;
  font-size: clamp(112px, 16vw, 272px);
  white-space: nowrap;
}
.mk .fig .unit {
  display: block;
  font-family: var(--mk-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mk-field-muted);
  margin-top: 26px;
}
.mk .fig .alt {
  display: block;
  font-family: var(--mk-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mk-field-ink);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--mk-field-rule);
  max-width: 26rem;
}

/* B: the hero, the field statement, the sheet */
.mk .hero.on-field.bh {
  min-height: 0;
  padding: 64px 0 72px;
}
.mk .bh .grid {
  display: grid;
  gap: 48px;
}
.mk .bh h1 {
  font-size: clamp(46px, 6.6vw, 124px);
  max-width: 10ch;
}
.mk .bh .fig .amt {
  font-size: clamp(112px, 15vw, 236px);
  /* holds the line while the catalog has not answered */
  min-height: 0.85em;
}
@media (min-width: 1024px) {
  .mk .bh .grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: 72px;
  }
}
.mk .statement.short {
  padding: 48px 0 56px;
}
.mk .statement.short .who {
  margin-top: 0;
}
@media (min-width: 1024px) {
  .mk .statement.short {
    min-height: 0;
    display: block;
  }
}
.mk .sheet {
  padding: clamp(72px, 11vh, 128px) 0;
}
.mk .sheet .cols {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 2px solid var(--mk-ink);
}
.mk .sheet .col {
  padding: 30px 0 40px;
  border-bottom: 1px solid var(--mk-rule);
  min-width: 0;
}
.mk .sheet .lab {
  font-family: var(--mk-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--mk-muted);
}
.mk .sheet h2 {
  font-family: var(--mk-display);
  font-stretch: 110%;
  font-weight: 800;
  font-size: clamp(28px, 2.4vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-top: 14px;
}
.mk .sheet .figrow {
  margin-top: 26px;
  min-height: clamp(58px, 5.6vw, 96px);
  display: flex;
  align-items: flex-end;
}
.mk .sheet .amt {
  font-family: var(--mk-display);
  font-stretch: 112%;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.85;
  font-size: clamp(64px, 6.2vw, 108px);
  color: var(--mk-accent-text);
  white-space: nowrap;
}
.mk .sheet .amt.words {
  font-size: clamp(38px, 3.4vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.mk .sheet .unit {
  display: block;
  font-family: var(--mk-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mk-muted);
  margin-top: 14px;
  min-height: 1.5em;
}
.mk .sheet .alt {
  display: block;
  font-family: var(--mk-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-ink);
  margin-top: 6px;
}
/* under the year line, in its small mono register (sentence case: it is a sentence) */
.mk .sheet .note {
  font-family: var(--mk-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.55;
  color: var(--mk-muted);
  margin-top: 8px;
  max-width: 40ch;
}
.mk .sheet .lede {
  font-size: 18px;
  line-height: 1.5;
  margin-top: 22px;
  max-width: 38ch;
}
.mk .sheet .cl li {
  font-size: 16px;
}
.mk .sheet .after {
  margin-top: 40px;
}
/* no amount yet: the figure keeps its box, unseen, so nothing moves on arrival */
.mk .fig.pending,
.mk .sheet .col.pending .meta {
  visibility: hidden;
}
@media (min-width: 1024px) {
  .mk .sheet .cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--mk-rule);
  }
  .mk .sheet .col {
    border-bottom: 0;
    padding: 32px 36px 44px 0;
  }
  .mk .sheet .col + .col {
    border-left: 1px solid var(--mk-rule);
    padding-left: 36px;
  }
  .mk .sheet .col:last-child {
    padding-right: 0;
  }
  /* label, title, figure, figure notes, lede, the rest: one row each, shared */
  @supports (grid-template-rows: subgrid) {
    .mk .sheet .cols {
      grid-template-rows: repeat(6, auto);
    }
    .mk .sheet .col {
      display: grid;
      grid-row: span 6;
      grid-template-rows: subgrid;
      row-gap: 0;
      align-content: start;
    }
  }
}
.mk .free {
  border-top: 1px solid var(--mk-rule);
  padding: clamp(80px, 12vh, 140px) 0;
}
.mk .free .grid {
  display: grid;
  gap: 32px;
}
.mk .free h2 {
  font-size: clamp(36px, 4.6vw, 80px);
  max-width: 10ch;
}
.mk .free .body {
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.55;
  max-width: 44ch;
}
.mk .free .actions {
  margin-top: 32px;
  align-items: center;
  gap: 12px 28px;
}
@media (min-width: 1024px) {
  .mk .free .grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 96px;
  }
}

/* ══════════ HELP, direction "the field" ══════════
 * Source: docs/mockups/help-e-field.html, `#article` (founder, 2026-10-26).
 * Every help page, /help included, is an article beside the field rail; there
 * is no hub. Two changes from the mockup (founder): "On this page" under each
 * title (.help-toc), and the rail is a sticky block sized to its menu, so its
 * cobalt ends where the menu ends (no full-height column).
 * Markup: components/Help/HelpLayout.jsx (shell, rail) and
 * components/Help/HelpArticle.jsx (article, sections, notes). Pages write plain
 * h2/h3/p/ul/ol/dl/table/pre/code/a inside .help-body and get these rules.
 */

/* ── the rail: the field, the whole help navigation in mono ── */
.mk .rail {
  background: var(--mk-field);
  color: var(--mk-field-ink);
  padding: 16px;
}
.mk .rail-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.mk .rail-home {
  text-decoration: none;
  display: block;
  min-height: 44px;
}
.mk .rail-home .eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 0.25em;
}
.mk .rail-home .rt {
  display: block;
  font-family: var(--mk-display);
  font-stretch: 108%;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-top: 6px;
}
.mk .rail-home:hover .rt {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mk .rail-toggle {
  font-family: var(--mk-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mk-field-ink);
  background: transparent;
  border: 1px solid var(--mk-field-rule);
  border-radius: 2px;
  min-height: 44px;
  padding: 0 14px;
  cursor: pointer;
}
.mk .rail-toggle:hover {
  border-color: var(--mk-field-ink);
}
.mk .rail nav {
  display: none;
  padding-top: 20px;
}
.mk .rail.open nav {
  display: block;
}
.mk .rail-group + .rail-group {
  margin-top: 28px;
}
.mk .rail-label {
  font-family: var(--mk-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mk-field-muted);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mk-field-rule);
}
.mk .rail ul a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  padding: 7px 0 7px 14px;
  font-family: var(--mk-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--mk-field-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--mk-field-rule);
  box-shadow: inset 0 0 0 transparent;
  transition:
    color 0.15s,
    box-shadow 0.15s;
}
.mk .rail ul a:hover {
  color: var(--mk-field-ink);
  box-shadow: inset 2px 0 0 var(--mk-field-muted);
}
.mk .rail ul a[aria-current='page'] {
  color: var(--mk-field-ink);
  box-shadow: inset 4px 0 0 var(--mk-field-ink);
  font-weight: 600;
}
.mk .rail ul a .x {
  flex-shrink: 0;
  font-size: 12px;
  opacity: 0.8;
}
.mk .rail :focus-visible {
  outline-color: var(--mk-field-ink);
  outline-offset: -2px;
}
@media (pointer: coarse) {
  .mk .rail ul a {
    min-height: 44px;
  }
}
@media (min-width: 1024px) {
  .mk.help-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: start;
  }
  /* Sized to its menu and sticky, so the cobalt ends with the menu. */
  .mk .rail {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    padding: 36px 32px 40px;
  }
  .mk .rail-toggle {
    display: none;
  }
  .mk .rail nav {
    display: block;
    padding-top: 32px;
  }
}

/* ── the article on paper ── */
.mk .article {
  padding: 40px 0 96px;
}
.mk .article .wrap {
  max-width: 1080px;
  margin: 0;
}
.mk .art-head {
  padding-bottom: 36px;
  border-bottom: 2px solid var(--mk-ink);
}
.mk .art-head h1 {
  font-size: clamp(38px, 6.4vw, 112px);
  margin-top: 20px;
  max-width: 12ch;
  overflow-wrap: break-word;
}
.mk .art-head .deck {
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.45;
  max-width: 38ch;
  margin-top: 24px;
}
.mk .art-head .deck .sub {
  font-family: var(--mk-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--mk-muted);
  overflow-wrap: anywhere;
}
.mk .art-head .deck > * + * {
  margin-top: 12px;
}
.mk .help-back {
  margin-bottom: 8px;
}

/* On this page: the article's h2 sections, numbered in order, in mono */
.mk .help-toc {
  margin-top: 36px;
  max-width: 56rem;
}
.mk .help-toc .eyebrow {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mk-rule);
}
.mk .help-toc ol {
  list-style: none;
  padding: 0;
  counter-reset: toc;
}
.mk .help-toc li {
  counter-increment: toc;
  break-inside: avoid;
}
.mk .help-toc a {
  display: flex;
  gap: 14px;
  align-items: baseline;
  min-height: 36px;
  padding: 8px 0;
  border-bottom: 1px solid var(--mk-rule);
  font-family: var(--mk-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--mk-accent-text);
  text-decoration: none;
}
.mk .help-toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--mk-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.mk .help-toc a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (pointer: coarse) {
  .mk .help-toc a {
    min-height: 44px;
  }
}
@media (min-width: 1024px) {
  .mk .help-toc ol {
    columns: 2;
    column-gap: 40px;
  }
}
/* the API reference's endpoint list: paths are case-sensitive data, so no
   uppercase and no counter */
.mk .help-endpoints {
  margin-top: 40px;
}
.mk .help-endpoints ul {
  list-style: none;
  padding: 0;
}
.mk .help-endpoints a {
  text-transform: none;
  letter-spacing: 0;
  word-break: break-all;
}
.mk .help-endpoints a::before {
  content: none;
}
@media (min-width: 1024px) {
  .mk .help-endpoints ul {
    columns: 2;
    column-gap: 40px;
  }
}

/* sections and prose */
.mk .help-section {
  padding: 48px 0;
  border-bottom: 1px solid var(--mk-rule);
}
.mk .help-section:last-child {
  border-bottom: 0;
}
.mk .help-body h2 {
  font-family: var(--mk-display);
  font-stretch: 110%;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(28px, 2.8vw, 44px);
  scroll-margin-top: 24px;
}
.mk .help-prose {
  margin-top: 20px;
  font-size: 19px;
  line-height: 1.65;
}
.mk .help-prose > * + * {
  margin-top: 16px;
}
.mk .help-prose > p,
.mk .help-prose > ul,
.mk .help-prose > ol,
.mk .help-prose > h3 {
  max-width: 40rem;
}
/* direct children only: the API reference's endpoint headings are h3s in mono */
.mk .help-prose > h3 {
  font-family: var(--mk-display);
  font-stretch: 105%;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.mk .help-prose > * + h3 {
  margin-top: 36px;
}
.mk .help-prose > h3 + * {
  margin-top: 10px;
}
/* prose lists only (direct children, or nested in a prose list), so a list
   inside a component such as an endpoint keeps its own style */
.mk .help-prose > ul,
.mk .help-prose li > ul {
  list-style: disc;
  padding-left: 1.25em;
}
.mk .help-prose > ol,
.mk .help-prose li > ol {
  list-style: decimal;
  padding-left: 1.5em;
}
.mk .help-prose > :is(ul, ol) > li + li {
  margin-top: 8px;
}
.mk .help-prose li::marker {
  color: var(--mk-muted);
}
.mk .help-body a:not(.index-link, .btn),
.mk .art-head .deck a {
  color: var(--mk-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.mk .help-body a:not(.index-link, .btn):hover,
.mk .art-head .deck a:hover {
  text-decoration-thickness: 2px;
}
.mk .help-body strong {
  font-weight: 600;
}
.mk .help-body code {
  font-family: var(--mk-mono);
  font-size: 0.82em;
  padding: 0.1em 0.35em;
  border-radius: 2px;
  background: color-mix(in oklch, var(--mk-ink) 7%, transparent);
  overflow-wrap: anywhere;
}
.mk .help-body pre {
  font-family: var(--mk-mono);
  font-size: 14px;
  line-height: 1.55;
  max-width: 56rem;
  padding: 16px 18px;
  overflow-x: auto;
  border: 1px solid var(--mk-rule);
  border-radius: 2px;
  background: color-mix(in oklch, var(--mk-ink) 4%, transparent);
  white-space: pre;
}
.mk .help-body pre code {
  font-size: inherit;
  padding: 0;
  background: none;
}

/* tables: mono heads, ruled rows */
.mk .help-table {
  max-width: 56rem;
  overflow-x: auto;
}
.mk .help-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.5;
}
.mk .help-body th {
  font-family: var(--mk-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mk-muted);
  text-align: left;
  padding: 10px 16px 10px 0;
  border-bottom: 2px solid var(--mk-ink);
  vertical-align: bottom;
}
.mk .help-body td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--mk-rule);
  vertical-align: top;
}
.mk .help-body td.mono {
  font-family: var(--mk-mono);
  font-size: 13px;
}

/* a labelled aside */
.mk .help-note {
  max-width: 40rem;
  border-left: 2px solid var(--mk-accent-text);
  padding: 4px 0 4px 18px;
}
.mk .help-note-body {
  margin-top: 8px;
  font-size: 17px;
  line-height: 1.6;
}
.mk .help-body > .help-note {
  margin-top: 40px;
}

/* the numbered steps of a procedure (Getting started) */
.mk .steps-doc {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mk .steps-doc > li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 40px 0 44px;
  border-bottom: 1px solid var(--mk-rule);
}
.mk .steps-doc .sn {
  font-family: var(--mk-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--mk-accent-text);
  font-variant-numeric: tabular-nums;
  padding-top: 6px;
}
.mk .steps-doc .help-prose {
  margin-top: 18px;
}

/* the glossary: terms over definitions, ruled */
.mk .help-terms > div {
  padding: 20px 0;
  border-bottom: 1px solid var(--mk-rule);
  max-width: 44rem;
}
.mk .help-terms > div:last-child {
  border-bottom: 0;
}
.mk .help-terms dt {
  font-family: var(--mk-display);
  font-stretch: 105%;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.25;
}
.mk .help-terms dd {
  margin-top: 6px;
  font-size: 18px;
  line-height: 1.6;
}

/* an index of pages: the title as a link, the description beneath (Overview, API reference) */
.mk .help-index {
  max-width: 48rem;
  border-top: 2px solid var(--mk-ink);
}
.mk .help-prose > .help-index {
  list-style: none;
  padding-left: 0;
  max-width: 48rem;
}
.mk .help-index li {
  border-bottom: 1px solid var(--mk-rule);
}
.mk .help-prose > .help-index > li + li {
  margin-top: 0;
}
.mk .help-body .help-index a {
  display: block;
  padding: 18px 0 20px;
  color: inherit;
  text-decoration: none;
  min-height: 44px;
}
.mk .help-index .t {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--mk-display);
  font-stretch: 105%;
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.25;
}
.mk .help-index .t::after {
  content: '\2192';
  font-family: var(--mk-mono);
  font-weight: 400;
  font-size: 16px;
  color: var(--mk-accent-text);
  flex-shrink: 0;
}
.mk .help-index a[data-leaves] .t::after {
  content: '\2197';
}
.mk .help-index a:hover .t {
  color: var(--mk-accent-text);
}
.mk .help-index .m {
  display: block;
  margin-top: 4px;
  font-family: var(--mk-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--mk-muted);
  overflow-wrap: anywhere;
}
.mk .help-index .d {
  display: block;
  margin-top: 6px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--mk-muted);
}

/* questions (FAQ): E's question idiom; every answer is in the HTML */
/* No rule over the first question: the title block's 2px rule is right above it. */
.mk .help-faq {
  max-width: 48rem;
}
.mk .help-faq details {
  border-bottom: 1px solid var(--mk-rule);
}
.mk .help-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  font-family: var(--mk-display);
  font-stretch: 105%;
  font-weight: 700;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.25;
  min-height: 44px;
}
.mk .help-faq summary::-webkit-details-marker {
  display: none;
}
.mk .help-faq summary::after {
  content: '+';
  font-family: var(--mk-mono);
  font-weight: 400;
  color: var(--mk-accent-text);
  font-size: 22px;
  line-height: 1;
}
.mk .help-faq details[open] summary::after {
  content: '\2212';
}
.mk .help-faq details p {
  padding: 0 0 26px;
  max-width: 40rem;
  font-size: 18px;
  line-height: 1.6;
}
.mk .help-faq + .art-foot {
  border-top: 0;
}

/* the closing line under an article */
.mk .art-foot {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 2px solid var(--mk-ink);
  font-size: 19px;
  line-height: 1.6;
  max-width: 40rem;
}

@media (min-width: 640px) {
  .mk .steps-doc > li {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 0 24px;
  }
}
@media (min-width: 1024px) {
  .mk .article {
    padding: 64px 0 128px;
  }
  .mk .article .wrap {
    padding: 0 clamp(48px, 6vw, 112px);
  }
  .mk .steps-doc > li {
    grid-template-columns: 112px minmax(0, 1fr);
  }
}

/* an index list inside the body is not prose: no prose underline (after the
   prose link rule, which it ties on specificity) */
.mk .help-body .help-toc a {
  text-decoration: none;
}
.mk .help-body .help-toc a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}