/* Help visual foundation v1. Opt in with .help-ui; existing pages are unaffected. */
.help-ui {
  color-scheme: dark;
  --help-bg: #191c1d;
  --help-surface: #202425;
  --help-surface-raised: #272b2c;
  --help-heading: #f4ead2;
  --help-text: #d5d2ca;
  --help-muted: #aaa9a3;
  --help-accent: #d6b477;
  --help-border: #625744;
  --help-divider: #3e403b;
  --help-hover: #30302a;
  --help-selected: #3c3425;
  --help-focus: #f1ce8c;
  --help-button-top: #dec396;
  --help-button-bottom: #b58c52;
  --help-button-text: #241b11;
  --help-art: url('assets/ruins-dark.png?v=2');
  --help-art-blend: screen;
  --help-art-opacity: .46;
  --help-font-heading: Georgia, 'Times New Roman', serif;
  --help-font-body: Arial, Helvetica, sans-serif;
  --help-text-small: .8125rem;
  --help-text-body: 1rem;
  --help-text-lead: 1.125rem;
  --help-text-h1: clamp(2rem, 3.4vw, 2.75rem);
  --help-text-h2: clamp(1.5rem, 2.4vw, 1.875rem);
  --help-space-1: 4px;
  --help-space-2: 8px;
  --help-space-3: 12px;
  --help-space-4: 16px;
  --help-space-5: 24px;
  --help-space-6: 32px;
  --help-space-7: 48px;
  --help-radius: 5px;
  --help-control-height: 44px;
  --help-header-height: 64px;
  --help-nav-width: 216px;
  --help-toc-width: 192px;
  --help-layout-max: 1440px;
  --help-article-max: 800px;
  --help-duration: 140ms;
  font: var(--help-text-body)/1.55 var(--help-font-body);
  color: var(--help-text);
  background: var(--help-bg);
}
.help-ui[data-theme='light'] {
  color-scheme: light;
  --help-bg: #f5f0e5;
  --help-surface: #faf6ed;
  --help-surface-raised: #fffaf1;
  --help-heading: #321c13;
  --help-text: #4b3d32;
  --help-muted: #706253;
  --help-accent: #80582c;
  --help-border: #b9a17e;
  --help-divider: #ded2bf;
  --help-hover: #eee4d2;
  --help-selected: #e1d1b5;
  --help-focus: #795020;
  --help-button-top: #e2cba5;
  --help-button-bottom: #bc9660;
  --help-art: url('assets/ruins-light.png?v=2');
  --help-art-blend: multiply;
  --help-art-opacity: .62;
}
.help-ui *, .help-ui *::before, .help-ui *::after { box-sizing: border-box; }
.help-ui h1, .help-ui h2, .help-ui h3 { color: var(--help-heading); font-family: var(--help-font-heading); font-weight: 400; line-height: 1.15; }
.help-ui h1 { font-size: var(--help-text-h1); margin: 0 0 12px; }
.help-ui h2 { font-size: var(--help-text-h2); margin: 24px 0 12px; }
.help-ui h3 { font-size: 1.25rem; margin: 0 0 8px; }
.help-ui p { margin: 0 0 16px; }
.help-ui a { color: var(--help-accent); text-underline-offset: 4px; }
.help-ui a:hover { text-decoration-thickness: 2px; }
.help-ui :focus-visible { outline: 2px solid var(--help-focus); outline-offset: 4px; }
.help-ui .help-muted { color: var(--help-muted); }
.help-ui .help-lead { font: var(--help-text-lead)/1.5 var(--help-font-heading); color: var(--help-heading); }
.help-ui .help-panel { background: var(--help-surface); border: 1px solid var(--help-border); border-radius: var(--help-radius); padding: 24px; }
.help-ui .help-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--help-control-height); padding: 8px 16px; border: 1px solid var(--help-accent); border-radius: 4px; font: 600 .9375rem/1.3 var(--help-font-heading); color: var(--help-button-text); background: linear-gradient(var(--help-button-top), var(--help-button-bottom)); box-shadow: inset 0 0 0 1px #ffffff26; cursor: pointer; text-decoration: none; transition: filter var(--help-duration), transform var(--help-duration); }
.help-ui .help-button:hover { filter: brightness(1.08); }
.help-ui .help-button:active { transform: translateY(1px); filter: brightness(.96); }
.help-ui .help-button:disabled { opacity: .45; cursor: not-allowed; filter: none; transform: none; }
.help-ui .help-input { min-height: var(--help-control-height); width: 100%; padding: 8px 12px; font: inherit; color: var(--help-text); border: 1px solid var(--help-border); background: var(--help-surface); border-radius: var(--help-radius); }
.help-ui .help-input::placeholder { color: var(--help-muted); opacity: 1; }
.help-ui .help-nav-link { display: flex; align-items: center; min-height: 44px; padding: 8px 16px; color: var(--help-text); text-decoration: none; border-left: 3px solid transparent; border-radius: 3px; }
.help-ui .help-nav-link:hover { background: var(--help-hover); }
.help-ui .help-nav-link[aria-current='page'] { color: var(--help-heading); background: var(--help-selected); border-left-color: var(--help-accent); }
.help-ui .help-icon { display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.help-ui .help-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--help-accent); text-decoration: none; }
.help-ui .help-brand .help-icon { width: 42px; height: 42px; }
.help-ui .help-brand-name { display: block; font: 400 24px/1.05 var(--help-font-heading); letter-spacing: .14em; }
.help-ui .help-brand-subtitle { display: block; margin-top: 4px; color: var(--help-heading); font: 11px/1.2 var(--help-font-heading); letter-spacing: .2em; }
.help-ui .help-hero { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; border: 1px solid var(--help-border); border-radius: var(--help-radius); }
.help-ui .help-decoration { position: relative; isolation: isolate; overflow: hidden; }
.help-ui .help-decoration::before { content: ''; position: absolute; z-index: -1; inset: 0; background: var(--help-art) right bottom / cover no-repeat; mix-blend-mode: var(--help-art-blend); opacity: var(--help-art-opacity); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .help-ui { --help-duration: 0ms; } }