/* Direction A: one composition, two deliberate reading environments. */
:root, html[data-theme="dark"] {
  --mh-motion-ease:cubic-bezier(.42,0,.58,1);
  color-scheme: dark;
  --mh-void: #0D0F12; --mh-bg: #0D0F12; --mh-deep: #090B0E;
  --mh-panel: #15181D; --mh-panel-2: #111419; --mh-s02: #15181D;
  --mh-light: #15181D;
  --mh-line-1: #242930; --mh-line-2: #2B3038; --mh-line-3: #3B424D; --mh-line-btn: #515A67;
  --mh-text: #F4F5F7; --mh-text-2: #CDD2D9; --mh-muted: #A7AFBB; --mh-dim: #969FAC; --mh-dim-deco: #697584;
  --mh-ink: #0D0F12; --mh-ink-2: #A7AFBB;
  --mh-red: #F03C4F; --mh-orange: #F03C4F; --mh-crimson: #F03C4F;
  --mh-accent: #F03C4F; --mh-signal: #F03C4F;
  --mh-action-bg: #F4F5F7; --mh-action-text: #0D0F12;
  --mh-field: #0D0F12; --mh-field-hover: #191D24;
  --mh-selection-bg: #F03C4F; --mh-selection-text: #0D0F12;
  --mh-grad: none;
}
html[data-theme="light"] {
  color-scheme: light;
  --mh-void: #F1F3F5; --mh-bg: #F1F3F5; --mh-deep: #FFFFFF;
  --mh-panel: #FFFFFF; --mh-panel-2: #E9EDF1; --mh-s02: #FFFFFF;
  --mh-light: #FFFFFF;
  --mh-line-1: #D6DCE2; --mh-line-2: #CCD2D9; --mh-line-3: #A9B3BE; --mh-line-btn: #8996A4;
  --mh-text: #13171D; --mh-text-2: #35414D; --mh-muted: #53606C; --mh-dim: #5A6875; --mh-dim-deco: #8996A4;
  --mh-ink: #F1F3F5; --mh-ink-2: #53606C;
  --mh-red: #C41E3A; --mh-orange: #C41E3A; --mh-crimson: #C41E3A;
  --mh-accent: #C41E3A; --mh-signal: #C41E3A;
  --mh-action-bg: #13171D; --mh-action-text: #F4F5F7;
  --mh-field: #F7F8FA; --mh-field-hover: #E9EDF1;
  --mh-selection-bg: #C41E3A; --mh-selection-text: #FFFFFF;
}
html { background: var(--mh-void); accent-color: var(--mh-accent); caret-color: var(--mh-accent); }
body.mh { background: var(--mh-void); color: var(--mh-text); }
::selection { background: var(--mh-selection-bg); color: var(--mh-selection-text); }
:focus-visible { outline-color: var(--mh-accent); }
.mh-logo__word { background: var(--mh-text); }
.mh-pill--white { background: var(--mh-action-bg); color: var(--mh-action-text); }
.mh-pill--white:hover, .mh-pill--white:active { background: var(--mh-action-bg); color: var(--mh-action-text); }
.mh-pill--outline, .mh-pill--outline:hover { color: var(--mh-text); }
.mh-link { color: var(--mh-text); }
.mh-grad-text { background: none; color: var(--mh-signal); -webkit-text-fill-color: currentColor; }
.mh-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  gap: 7px; width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  border: 1px solid var(--mh-line-3); border-radius: 50%; padding: 0;
  background: transparent; color: var(--mh-text); cursor: pointer;
}
.mh-theme-toggle:hover { background: var(--mh-panel-2); border-color: var(--mh-muted); }
.mh-theme-toggle svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.mh-theme-toggle [data-theme-label] { font: 600 13px/1 var(--mh-text-f); }
.mh-theme-toggle:has([data-theme-label]) { width: auto; border-radius: 999px; padding-inline: 12px; }
/* Reveal the incoming theme with one sharp vertical edge; no fading or displacement. */
html[data-theme-transition="wipe"]::view-transition { pointer-events:none; }
html[data-theme-transition="wipe"]::view-transition-group(root),
html[data-theme-transition="wipe"]::view-transition-old(root),
html[data-theme-transition="wipe"]::view-transition-new(root) {
  animation:none;
  mix-blend-mode:normal;
}
html[data-theme-transition="wipe"]::view-transition-old(root) { z-index:1; }
html[data-theme-transition="wipe"]::view-transition-new(root) {
  z-index:2;
  clip-path:inset(0 100% 0 0);
}
@media (forced-colors: active) {
  .mh-theme-toggle { border-color: ButtonText; }
  .mh-logo__word { background: CanvasText; }
}
/* Same-origin page changes use the same quiet motion voice as UI panels.
   Native navigation remains intact when cross-document transitions are unavailable. */
@view-transition { navigation:auto; }
html:not([data-theme-transition="wipe"])::view-transition-old(root) {
  animation:mh-page-out var(--mh-motion-fast,160ms) var(--mh-motion-ease) both;
}
html:not([data-theme-transition="wipe"])::view-transition-new(root) {
  animation:mh-page-in var(--mh-motion-ui,240ms) var(--mh-motion-ease) both;
}
@keyframes mh-page-out { from { opacity:1; } to { opacity:0; } }
@keyframes mh-page-in { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce),(forced-colors:active) {
  @view-transition { navigation:none; }
  html::view-transition-group(root),html::view-transition-old(root),html::view-transition-new(root) { animation:none!important; }
}