:root {
  color-scheme: light;
  --xnl-color-canvas: #F5F7F8;
  --xnl-color-surface: #FFFFFF;
  --xnl-color-ink: #17201D;
  --xnl-color-secondary-ink: #5E6864;
  --xnl-color-muted: #66706C;
  --xnl-color-subtle: #7C8581;
  --xnl-color-line: #E3E8E6;
  --xnl-color-care: #0B7A5C;
  --xnl-color-care-soft: #E8F4EF;
  --xnl-color-information: #245448;
  --xnl-color-success: #2F855A;
  --xnl-color-success-ink: #1E6040;
  --xnl-color-success-soft: #E5F6EB;
  --xnl-color-attention: #9A6716;
  --xnl-color-attention-accent: #D08B45;
  --xnl-color-attention-soft: #FFF3DB;
  --xnl-color-danger: #C44949;
  --xnl-color-danger-ink: #9B2C2C;
  --xnl-color-danger-soft: #FFF0F0;
  --xnl-color-like: #E3474F;
  --xnl-color-like-soft: #FFECEF;
  --ink: var(--xnl-color-ink);
  --muted: var(--xnl-color-muted);
  --line: var(--xnl-color-line);
  --paper: var(--xnl-color-canvas);
  --surface: var(--xnl-color-surface);
  --forest: var(--xnl-color-care);
  --forest-dark: var(--xnl-color-information);
  --mint: var(--xnl-color-care-soft);
  --amber: var(--xnl-color-attention-accent);
  --amber-soft: var(--xnl-color-attention-soft);
  --coral: var(--xnl-color-danger);
  --coral-soft: var(--xnl-color-danger-soft);
  --cool: #dceef0;
  --shadow: 0 14px 34px rgba(21, 42, 34, 0.08);
  --radius-control: 7px;
  --radius-panel: 8px;
  --content-width: 760px;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-family: var(--font-ui);
  font-synthesis: none;
}

/* Development labels must never compete with the user-facing product surface. */
.prototype-note { display: none !important; }

/* Newcomer readability floor shared by the whole product. */
main p { font-size: max(14px, .875rem) !important; line-height: 1.62 !important; }
main :where(small, em, label) { font-size: max(12px, .75rem) !important; line-height: 1.45 !important; }
main :where(button, input, select, textarea) { font-size: max(14px, .875rem) !important; }
main :where([class*="eyebrow"], [class*="caption"], [class*="meta"], [class*="status"], [class*="note"]) {
  font-size: max(12px, .75rem) !important;
  line-height: 1.45;
}
main button:not([aria-label]),
main a[class]:not([aria-label]) { min-height: 44px; }
:where(main, dialog) details > summary { min-height: 48px; }
:where(main, dialog) details:not([open]) > :not(summary) { display: none !important; }
:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--forest) 35%, transparent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

.has-image-fallback { position: relative; }
.xnl-image-fallback {
  min-height: 96px;
  padding: 18px;
  background: #eaf3ed;
  color: #4e665b;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}