/* Default theme base styles. Brand-neutral; values from the ht-tokens palette.
   theme_config overrides arrive as --hm-* custom properties on :root. */
/* Fonts are self-hosted (SIL OFL 1.1, see fonts/OFL.txt); no third-party requests. */
@font-face { font-family: "Geist"; src: url("/theme/assets/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/theme/assets/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* shiro / sumi palette. Colour is scarce: shu (red) is only the mark and the primary CTA. */
  --hm-shu: #c23b22;
  --hm-shu-dark: #a02f1a;
  --hm-sumi: #141417;
  --hm-hai: #66666c;
  --hm-label: #6e6e73;
  --hm-hair: #e6e6e6;
  --hm-shiro: #fafaf8;
  --hm-kinu: #e4e3de;
  --hm-kasumi: #f4f3ef;
  --hm-sumi-soft: #2a2a2f;

  --ht-fg: var(--hm-text);
  --ht-fg-muted: var(--hm-hai);
  --ht-line: var(--hm-hair);
  --ht-surface: var(--hm-bg);
  --ht-surface-2: var(--hm-shiro);

  /* theme_config overrides land on these. --hm-primary colours the primary CTA only. */
  --hm-primary: var(--hm-shu);
  --hm-bg: #ffffff;
  --hm-text: var(--hm-sumi);
  --hm-font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --hm-font-heading: var(--hm-font);
  --hm-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --hm-font-kanji: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", "Noto Sans CJK JP", "Meiryo", sans-serif;
  --hm-radius-sm: 6px;
  --hm-radius-md: 10px;
  --hm-radius-lg: 16px;
  --hm-container: 75rem;
  --color-brand: var(--hm-primary);
  --hm-focus: var(--hm-sumi);
  color-scheme: light;
}

/* Dark mode is opt-in: light is the default whatever the OS prefers, and the
   header toggle sets data-theme="dark" on <html> (remembered in localStorage).
   The inline token style only carries values the owner chose (never the stock
   defaults), so a site that sets its own background or text colour wins here by
   being emitted after this sheet. */
:root[data-theme="dark"] {
  --hm-sumi: #ececea;
  --hm-sumi-soft: #d4d4d0;
  --hm-hai: #a3a3a8;
  --hm-label: #8a8a90;
  --hm-hair: #2c2c31;
  --hm-shiro: #1b1b1f;
  --hm-kinu: #2f2f35;
  --hm-kasumi: #1e1e22;
  --hm-bg: #111114;
  --hm-focus: #fafaf8;
  --ht-surface-2: var(--hm-shiro);
  color-scheme: dark;
}
[data-theme="dark"] .hm-tok--k { color: #b9a6f0; }
[data-theme="dark"] .hm-tok--s { color: #8fcf9d; }
[data-theme="dark"] .hm-tok--c { color: #77777e; }
[data-theme="dark"] .hm-cta--dark { background: #26262b; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; /* short pages keep the footer at the bottom */
  margin: 0;
  overflow-x: clip; /* alignfull/alignwide use 100vw, which includes a classic scrollbar */
  background: var(--hm-bg);
  color: var(--hm-text);
  font-family: var(--hm-font);
  font-size: 1rem;
  line-height: 1.6;
  font-kerning: normal;
  font-feature-settings: "rlig" 1, "calt" 0, "ss11" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--hm-font-heading); font-weight: 450; line-height: 1.15; letter-spacing: -0.04em; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -0.06em; }
h2 { font-size: clamp(1.875rem, 3vw, 2.5rem); line-height: 1.12; }
h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 3px; border-radius: 2px; }
code, kbd, pre, samp { font-family: var(--hm-font-mono); }
img, svg, video { max-width: 100%; height: auto; }
picture { display: contents; }

.hm-container { width: 100%; max-width: var(--hm-container); margin: 0 auto; padding: 0 1.5rem; }

.hm-skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ht-fg); color: var(--hm-bg); padding: 0.5rem 1rem;
}
.hm-skip:focus { left: 0.5rem; top: 0.5rem; }
main { flex: 1 0 auto; }
main:focus { outline: none; } /* focus target of the skip link, not a control */
.hm-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Sections: hairline separated bands. */
.hm-section { padding: clamp(4rem, 8vw, 7rem) 0; border-top: 1px solid var(--hm-hair); }
.hm-section:first-child { border-top: 0; }

/* Buttons: pill, shu fill for the primary CTA, hairline outline for the rest. */
.hm-btn {
  white-space: nowrap; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 1.1rem; border-radius: 999px;
  background: var(--hm-primary); color: #fff; text-decoration: none; font-size: 0.875rem; font-weight: 500; line-height: 1.2;
  border: 1px solid var(--hm-primary); transition: background 0.15s, border-color 0.15s, filter 0.15s;
}
.hm-btn:hover { filter: brightness(0.88); }

/* Header + nav */
.hm-header {
  position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--hm-hair);
  background: color-mix(in srgb, var(--hm-bg) 92%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
}
.hm-header__inner { display: flex; align-items: center; gap: 1.5rem; height: 4rem; }
.hm-logo { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.65rem; color: var(--hm-text); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; text-decoration: none; }
.hm-logo__mark { font-family: var(--hm-font-kanji); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.04em; text-transform: none; color: var(--hm-shu); }
.hm-logo img { display: block; }
.hm-nav-wrap { margin-left: auto; }
.hm-nav { position: relative; font-size: 0.875rem; }
.hm-nav__toggle { cursor: pointer; list-style: none; padding: 0.4rem 0.2rem; font-weight: 500; color: var(--hm-hai); }
.hm-nav__toggle::-webkit-details-marker { display: none; }
.hm-nav__list, .hm-nav__sub { list-style: none; margin: 0; padding: 0; }
.hm-nav__list {
  position: absolute; right: 0; top: 100%; min-width: 14rem; z-index: 50;
  background: var(--hm-bg); border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); padding: 0.5rem;
}
.hm-nav__list a { display: block; padding: 0.35rem 0.5rem; color: var(--hm-hai); text-decoration: none; }
.hm-nav__list a:hover { color: var(--hm-text); background: var(--ht-surface-2); border-radius: var(--hm-radius-sm); }
.hm-nav__sub { padding-left: 0.75rem; }
.hm-nav__toggle:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 2px; }
/* Mobile: a scrim behind the open menu. The header's backdrop-filter makes it the
   containing block of fixed children, so this covers the viewport only while the
   sticky header is at the top, which it always is. z-index -1 keeps it under the header content. */
@media (max-width: 47.99rem) {
  .hm-nav[open]::before { content: ""; position: fixed; z-index: -1; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.35); }
}
.hm-nav a[aria-current="page"], .hm-footer a[aria-current="page"] { color: var(--hm-text); font-weight: 500; }

@media (min-width: 48rem) {
  .hm-nav > summary { display: none; }
  .hm-nav::details-content { content-visibility: visible; display: contents; } /* no-JS: list shows without [open] */
  .hm-nav > .hm-nav__list { display: flex; }
  .hm-nav > .hm-nav__list {
    position: static; border: 0; padding: 0; min-width: 0; background: transparent; gap: 1.75rem; align-items: center;
  }
  .hm-header__cta { min-height: 2.125rem; padding: 0 0.9rem; font-size: 0.8125rem; }
  .hm-nav__list > li { position: relative; }
  .hm-nav__sub {
    display: none; position: absolute; left: 0; top: 100%; min-width: 12rem; padding: 0.5rem;
    background: var(--hm-bg); border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md);
  }
  .hm-nav__list > li:hover > .hm-nav__sub, .hm-nav__list > li:focus-within > .hm-nav__sub { display: block; }
}

/* Menu item styling declared in theme.json ("menu"). Classes sit on the link, the
   plain-text span or the footer heading; :is() keeps them above the list rules. */
.hm-nav__list :where(li) > span { display: block; padding: 0.35rem 0.5rem; color: var(--hm-hai); }
:is(a, span, p).hm-nav__item--default { font-weight: 400; }
:is(a, span, p).hm-nav__item--button {
  display: inline-block; padding: 0.4rem 0.9rem; border-radius: var(--hm-radius-sm);
  background: var(--hm-primary); color: var(--hm-bg); font-weight: 500;
}
.hm-nav__sub .hm-nav__item--button { margin-top: 0.25rem; }
:is(a, span, p).hm-nav__item--button:hover { background: var(--hm-shu-dark); color: var(--hm-bg); }
:is(a, span, p).hm-nav__item--link { text-decoration: underline; text-underline-offset: 0.2em; }
:is(a, span, p).hm-nav__item--muted { color: var(--hm-label); font-weight: 400; }
:is(a, span, p).hm-nav-color--accent { color: var(--hm-primary); }
:is(a, span, p).hm-nav-color--ink { color: var(--hm-text); }
:is(a, span, p).hm-nav-color--muted { color: var(--hm-label); }
:is(a, span, p).hm-nav-color--danger { color: var(--hm-shu-dark); }
/* A button keeps its fill: a colour class on a button recolours the fill (never the text, which
   would match the primary fill) and the label is white on the red fills, the page background on ink and muted (both flip with the dark set). */
:is(a, span, p).hm-nav__item--button.hm-nav-color--accent { background: var(--hm-primary); color: #ffffff; }
:is(a, span, p).hm-nav__item--button.hm-nav-color--ink { background: var(--hm-text); color: var(--hm-bg); }
:is(a, span, p).hm-nav__item--button.hm-nav-color--muted { background: var(--hm-label); color: var(--hm-bg); }
:is(a, span, p).hm-nav__item--button.hm-nav-color--danger { background: var(--hm-shu-dark); color: #ffffff; }
/* The plain button darkens on hover (rule above); a coloured one has the same specificity and comes later, so it needs its own hover. */
:is(a, span, p).hm-nav__item--button[class*="hm-nav-color--"]:hover { filter: brightness(0.9); }
.hm-nav__badge {
  display: inline-block; margin-left: 0.35em; padding: 0 0.4em; border: 1px solid var(--hm-hair);
  border-radius: var(--hm-radius-sm); font-size: 0.6875rem; font-weight: 500; line-height: 1.5; vertical-align: middle;
}
.hm-nav__badge--new { background: var(--hm-primary); border-color: var(--hm-primary); color: var(--hm-bg); }
.hm-nav__badge--beta { color: var(--hm-hai); }
.hm-nav__list [data-icon]::after, .hm-footer [data-icon]::after, .hm-menu [data-icon]::after {
  content: ""; display: inline-block; width: 1em; height: 1em; margin-left: 0.3em; vertical-align: -0.1em;
  background: currentColor; mask: var(--hm-menu-icon) center / contain no-repeat;
}
[data-icon="arrow"] { --hm-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
[data-icon="external"] { --hm-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v6H4V6h6'/%3E%3C/svg%3E"); }
[data-icon="doc"] { --hm-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 3h8l4 4v14H6zM14 3v4h4'/%3E%3C/svg%3E"); }
@media (max-width: 47.99rem) { li:has(> .hm-show-desktop), .hm-show-desktop { display: none; } }
@media (min-width: 48rem) { li:has(> .hm-show-mobile), .hm-show-mobile { display: none; } }

/* Footer */
.hm-footer { border-top: 1px solid var(--hm-hair); background: var(--hm-bg); padding: 3rem 0 2.25rem; color: var(--hm-hai); font-size: 0.8125rem; }
.hm-footer a { color: var(--hm-hai); text-decoration: none; }
.hm-footer a:hover { color: var(--hm-text); }
.hm-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.hm-footer__title { color: var(--hm-text); font-weight: 500; margin-bottom: 0.5rem; }
.hm-footer ul { list-style: none; margin: 0; padding: 0; }
.hm-footer li { margin: 0.25rem 0; }
.hm-social { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem !important; }
.hm-footer__legal { margin: 0; }

/* Errors */
.hm-error { padding: 6rem 0; text-align: center; }
.hm-error__code { font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); margin-bottom: 0.5rem; }

/* Sanitised html / rich-text bodies */
.hm-html-body { line-height: 1.7; }
.hm-html-body > :first-child { margin-top: 0; }
.hm-html-body > :last-child { margin-bottom: 0; }
.hm-html-body h2 { margin-top: 2em; }
.hm-html-body h3 { margin-top: 1.5em; }
.hm-html-body ul, .hm-html-body ol { padding-left: 1.4em; margin: 0 0 1em; }
.hm-html-body li { margin: 0.25em 0; }
.hm-html-body blockquote { margin: 1.5em 0; padding: 0 1em; border-left: 3px solid var(--ht-line); color: var(--ht-fg-muted); }
.hm-html-body pre, .hm-html-body code { font-family: var(--hm-font-mono); font-size: 0.9em; }
.hm-html-body pre { background: var(--ht-surface-2); border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); padding: 1rem; overflow-x: auto; }
.hm-html-body :not(pre) > code { background: var(--ht-surface-2); padding: 0.1em 0.35em; border-radius: var(--hm-radius-sm); }
.hm-html-body table { border-collapse: collapse; width: 100%; margin: 1.5em 0; }
.hm-html-body th, .hm-html-body td { border: 1px solid var(--ht-line); padding: 0.5rem 0.75rem; text-align: left; }
.hm-html-body details { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); padding: 0.75rem 1rem; margin: 0.75rem 0; }
.hm-html-body summary { cursor: pointer; font-weight: 600; }
.hm-html-body hr { border: 0; border-top: 1px solid var(--ht-line); margin: 2em 0; }
.hm-html-body img { border-radius: var(--hm-radius-md); }

.hm-prose, .hm-html-body { color: var(--hm-hai); }

/* Light/dark toggle in the header: invisible until the head script wires it up. It keeps its box meanwhile
   (visibility, not display), so showing it does not push the nav sideways (layout shift). */
.hm-theme-toggle {
  flex: none; display: inline-grid; place-items: center; width: 2.125rem; height: 2.125rem; padding: 0;
  border: 1px solid var(--hm-hair); border-radius: 999px; background: transparent; color: var(--hm-hai); cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.hm-theme-toggle[hidden] { display: inline-grid; visibility: hidden; }
.hm-theme-toggle:hover { color: var(--hm-text); border-color: var(--hm-text); }
.hm-theme-toggle:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 2px; }
.hm-theme-toggle svg { width: 1rem; height: 1rem; }
.hm-theme-toggle__sun, [data-theme="dark"] .hm-theme-toggle__moon { display: none; }
[data-theme="dark"] .hm-theme-toggle__sun { display: block; }

@media (max-width: 47.99rem) {
  .hm-header__inner { gap: 0.75rem; }
  .hm-logo { letter-spacing: 0.18em; gap: 0.5rem; }
}

/* Shared section partials: section-head, code-panel. */
.hm-section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; align-items: end; margin-bottom: 3rem; }
.hm-section-head__eyebrow { margin: 0 0 1rem; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-section-head__heading { margin: 0; font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
.hm-section-head__subheading { margin: 0; color: var(--hm-hai); font-size: 1.0625rem; line-height: 1.6; }
.hm-frame { min-width: 0; max-width: 100%; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); background: var(--hm-kasumi); overflow: hidden; }
.hm-frame__bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; border-bottom: 1px solid var(--hm-hair); background: var(--hm-shiro); font-family: var(--hm-font-mono); font-size: 0.75rem; color: var(--hm-hai); }
.hm-frame__dots { display: inline-flex; gap: 0.35rem; }
.hm-frame__dots i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--hm-kinu); }
.hm-frame__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hm-text); }
.hm-frame__meta { flex-shrink: 0; margin-left: auto; white-space: nowrap; color: var(--hm-label); }
.hm-frame .hm-code { max-width: 100%; } /* long lines scroll inside the card instead of being clipped */
.hm-code { margin: 0; padding: 1.25rem; overflow-x: auto; font-size: 0.8125rem; line-height: 1.65; color: var(--hm-sumi-soft); tab-size: 2; }
.hm-code code { font-family: inherit; white-space: pre; }
.hm-tok--k { color: #5b4a8a; }
.hm-tok--s { color: #3f6e4a; }
.hm-tok--c { color: #9a9a9f; }
.hm-outs { display: flex; flex-wrap: wrap; gap: 1px; margin: 1rem 0 0; background: var(--hm-hair); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); overflow: hidden; }
.hm-outs > div { flex: 1 1 8rem; padding: 0.75rem 1rem; background: var(--hm-bg); }
.hm-outs dt { font-family: var(--hm-font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hm-label); }
.hm-outs dd { margin: 0.25rem 0 0; font-size: 0.9375rem; }
@media (max-width: 960px) { .hm-section-head { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; } }

/* Blog layouts: single post, archive, taxonomy, author and search. */

/* Listing header (archive, taxonomy, author, search) */
.hm-listing { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 6rem); }
.hm-listing__header { margin-bottom: 2.5rem; }
.hm-listing__eyebrow { margin: 0 0 0.75rem; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-listing__title { margin: 0 0 0.5rem; font-size: clamp(2rem, 4.5vw, 3.25rem); }
.hm-listing__lede { margin: 0 0 1.25rem; color: var(--hm-hai); font-size: 1.0625rem; }
.hm-empty { color: var(--hm-hai); padding: 2rem 0; }
.hm-author-head { display: flex; align-items: flex-start; gap: 1.5rem; }
.hm-author-head .hm-listing__lede { margin-bottom: 0; }

/* Cards */
.hm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 2rem 1.75rem; align-items: start; } /* start: a short, imageless card is not stretched to the tallest in its row */
.hm-card { display: flex; flex-direction: column; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); background: var(--hm-bg); overflow: hidden; transition: border-color 0.15s, transform 0.15s; }
.hm-card:hover { border-color: var(--hm-kinu); transform: translateY(-2px); }
.hm-card:focus-within { border-color: var(--hm-hai); }
.hm-card__media { display: block; aspect-ratio: 16 / 9; background: var(--hm-kasumi); overflow: hidden; }
.hm-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-card__body { display: flex; flex-direction: column; padding: 1.25rem 1.375rem 1.375rem; }
.hm-card__cat { margin: 0 0 0.5rem; font-family: var(--hm-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-card__title { margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
.hm-card__title a { text-decoration: none; }
.hm-card__title a:hover { text-decoration: underline; }
.hm-card__excerpt { margin: 0 0 1rem; color: var(--hm-hai); font-size: 0.9375rem; }
.hm-card .hm-meta { margin: 0; }

/* Meta line: author, date, reading time */
.hm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; margin: 0 0 1.5rem; font-size: 0.8125rem; color: var(--hm-label); }
.hm-meta a { color: var(--hm-hai); text-decoration: none; }
.hm-meta a:hover { color: var(--hm-text); text-decoration: underline; }
.hm-meta__author { display: inline-flex; align-items: center; gap: 0.5rem; }
.hm-avatar { border-radius: 50%; object-fit: cover; background: var(--hm-kasumi); }
.hm-avatar--sm { width: 1.5rem; height: 1.5rem; }
.hm-avatar--lg { width: 4.5rem; height: 4.5rem; flex: none; }

/* Term chips */
.hm-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 1.25rem; padding: 0; }
.hm-chip { display: inline-block; padding: 0.2rem 0.75rem; border: 1px solid var(--hm-hair); border-radius: 999px; font-size: 0.8125rem; color: var(--hm-hai); text-decoration: none; transition: border-color 0.15s, color 0.15s; }
.hm-chip:hover { border-color: var(--hm-hai); color: var(--hm-text); }

/* Single post */
.hm-article { max-width: 46rem; padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.hm-article__title { margin: 0 0 1rem; font-size: clamp(2.25rem, 5vw, 3.5rem); }
.hm-article__lede { margin: 0 0 1.25rem; font-size: 1.25rem; line-height: 1.5; color: var(--hm-hai); }
.hm-article__image { margin: 0 -1.5rem 2.5rem; }
.hm-article__image img { display: block; width: 100%; border-radius: var(--hm-radius-lg); }
.hm-article__footer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hm-hair); }
.hm-entry { font-size: 1.0625rem; line-height: 1.75; color: var(--hm-text); overflow-wrap: break-word; }
.hm-entry > :first-child { margin-top: 0; }
.hm-entry h2 { margin: 2em 0 0.6em; font-size: clamp(1.5rem, 3vw, 2rem); }
.hm-entry h3 { margin: 1.75em 0 0.5em; }
.hm-entry a { color: var(--hm-primary); }
.hm-entry pre { overflow-x: auto; padding: 1rem; background: var(--hm-kasumi); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); font-size: 0.875rem; }
.hm-entry :not(pre) > code { padding: 0.1em 0.35em; background: var(--hm-kasumi); border-radius: var(--hm-radius-sm); font-size: 0.9em; }
.hm-entry img { border-radius: var(--hm-radius-md); }
.hm-entry hr { border: 0; border-top: 1px solid var(--hm-hair); margin: 2.5em 0; }
.hm-page-body { padding-top: 3rem; padding-bottom: 3rem; max-width: 48rem; }

/* Author box and related posts */
.hm-author-box { display: flex; align-items: flex-start; gap: 1rem; margin-top: 2rem; padding: 1.25rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); background: var(--hm-kasumi); }
.hm-author-box p { margin: 0; }
.hm-author-box .hm-meta { margin: 0; }
.hm-author-box .hm-author-bio { margin-top: 0.25rem; font-size: 0.9375rem; color: var(--hm-hai); }
.hm-related { padding-top: 2rem; padding-bottom: 5rem; border-top: 1px solid var(--hm-hair); }
.hm-related__title { font-size: 1.5rem; margin-bottom: 1.5rem; }

/* Pagination */
.hm-pagination { margin-top: 3rem; }
.hm-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.hm-pagination a, .hm-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 2.5rem; padding: 0 0.75rem; border: 1px solid var(--hm-hair); border-radius: 999px; font-size: 0.875rem; color: var(--hm-hai); text-decoration: none; }
.hm-pagination span { border: 0; min-width: 1.5rem; padding: 0; }
.hm-pagination a:hover { border-color: var(--hm-hai); color: var(--hm-text); }
.hm-pagination a[aria-current="page"] { background: var(--hm-text); border-color: var(--hm-text); color: var(--hm-bg); }

/* Search form */
.hm-search { display: flex; gap: 0.75rem; margin: 1.5rem 0 1rem; max-width: 36rem; }
.hm-search .hm-btn { flex: none; }
.hm-search__input { flex: 1 1 auto; min-width: 0; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--hm-kinu); border-radius: 999px; background: var(--hm-bg); color: var(--hm-text); font: inherit; }
.hm-search__input:focus-visible { border-color: var(--hm-text); }

@media (max-width: 47.99rem) {
  .hm-article__image { margin-inline: -1.5rem; }
  .hm-article__image img { border-radius: 0; }
}

/* Changelog archive (archive-release layout) */
.hm-changelog__release { scroll-margin-top: 5rem; padding: 1.5rem 0 2rem; border-bottom: 1px solid var(--hm-hair); }
.hm-changelog__release:target { background: var(--hm-kasumi); box-shadow: -1rem 0 0 var(--hm-kasumi), 1rem 0 0 var(--hm-kasumi); border-radius: var(--hm-radius-sm); }
.hm-changelog__version { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0 0 1rem; font-size: 1.5rem; }
.hm-changelog__date { margin-left: auto; font-size: 0.9375rem; font-weight: 400; }
.hm-changelog__channel { font-weight: 400; }
.hm-changelog__yanked { font-weight: 400; border-color: var(--hm-shu); color: var(--hm-shu); }
.hm-changelog__summary { margin: 0 0 1rem; color: var(--hm-hai); }
.hm-changelog__group { margin: 1.25rem 0 0.5rem; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hm-hai); }
.hm-changelog__list { margin: 0; padding-left: 1.25rem; line-height: 1.6; }
.hm-changelog__list li + li { margin-top: 0.25rem; }
@media (max-width: 40rem) {
  .hm-changelog__version { font-size: 1.25rem; }
  .hm-changelog__date { margin-left: 0; flex-basis: 100%; }
}

/* Floating contact link: one fixed link, text is its name. */
.hm-contact-float {
  position: fixed;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 15; /* under the sticky header (20), so an open menu and its scrim cover it */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 1.25rem;
  border-radius: 999px;
  background: var(--hm-primary);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.hm-contact-float--bottom-right { right: calc(1rem + env(safe-area-inset-right)); }
.hm-contact-float--bottom-left { left: calc(1rem + env(safe-area-inset-left)); }
/* The consent "Cookie settings" button owns the bottom-left corner: stack above it. */
body:has(.hm-consent-reopen) .hm-contact-float--bottom-left { bottom: calc(4rem + env(safe-area-inset-bottom)); }
/* Reserve room so the link never covers the last content or a focused control. */
html:has(.hm-contact-float) { scroll-padding-bottom: 5rem; }
body:has(.hm-contact-float) { padding-bottom: 5rem; }
.hm-contact-float:hover { filter: brightness(0.88); }
.hm-contact-float:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; box-shadow: 0 0 0 3px var(--hm-primary), 0 0 0 6px #fff; }
@media print { .hm-contact-float { display: none; } }

/* Docs layout (single-doc): sidebar menu, article, on-page TOC. */
.hm-doc { display: block; padding: 1.5rem 1.5rem 4rem; }
.hm-doc__nav, .hm-doc__toc { display: none; }
.hm-doc__navm { margin-bottom: 1.5rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); padding: 0.75rem 1rem; }
.hm-doc__navm summary { cursor: pointer; font-weight: 500; }
.hm-doc__navm summary:focus-visible, .hm-doc a:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 2px; }
.hm-doc__main { min-width: 0; }
/* The article is a readable column centred in its track. */
.hm-doc__main > * { max-width: 46rem; margin-inline: auto; }
.hm-doc__title { margin-block: 0 1.5rem; font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -0.02em; }

/* Sidebar tree */
.hm-doc-nav { list-style: none; margin: 0; padding: 0; font-size: 0.9375rem; }
.hm-doc-nav .hm-doc-nav { margin: 0.25rem 0 0.5rem 0.75rem; padding-left: 0.75rem; border-left: 1px solid var(--hm-hair); }
.hm-doc-nav li { margin: 0.125rem 0; }
.hm-doc-nav a { display: block; padding: 0.25rem 0.5rem; border-radius: var(--hm-radius-sm); color: var(--hm-hai); text-decoration: none; }
.hm-doc-nav a:hover { color: var(--hm-text); background: var(--hm-kasumi); }
.hm-doc-nav a[aria-current="page"] { color: var(--hm-text); background: var(--hm-kasumi); font-weight: 600; box-shadow: inset 2px 0 0 var(--hm-primary); }
.hm-doc-nav__group { display: block; padding: 0.5rem 0.5rem 0.25rem; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-hai); }

/* Collapsible sections */
.hm-doc-nav summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 0.375rem 0.5rem; border-radius: var(--hm-radius-sm); font-weight: 600; color: var(--hm-text); }
.hm-doc-nav summary::-webkit-details-marker { display: none; }
.hm-doc-nav summary::after { content: ""; width: 0.4rem; height: 0.4rem; margin-right: 0.25rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
.hm-doc-nav details[open] > summary::after { transform: rotate(45deg); }
.hm-doc-nav summary:hover { color: var(--hm-text); background: var(--hm-kasumi); }
.hm-doc-nav summary:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 2px; }

/* Sidebar search */
.hm-doc__search { margin: 0 0 1rem; }
.hm-doc__search input[type="search"] { width: 100%; box-sizing: border-box; padding: 0.5rem 0.75rem; border: 1px solid var(--hm-hai); border-radius: var(--hm-radius-md); background: transparent; color: var(--hm-text); font: inherit; font-size: 0.875rem; }
.hm-doc__search input[type="search"]:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 2px; }

/* Breadcrumbs */
.hm-doc__crumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; list-style: none; margin: 0 0 1rem; padding: 0; font-size: 0.8125rem; color: var(--hm-label); }
.hm-doc__crumbs li + li::before { content: "/"; margin-right: 0.5rem; }
.hm-doc__crumbs li + li[data-sep]::before { content: attr(data-sep); }
.hm-doc__crumbs a { color: var(--hm-hai); text-decoration: none; }
.hm-doc__crumbs a:hover { color: var(--hm-text); text-decoration: underline; }

/* Headings clear the sticky site header (4rem), like the essay aside in sections/content.css */
.hm-doc .hm-prose :is(h2, h3) { scroll-margin-top: 6rem; }

/* Prev / next */
.hm-doc__pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-block: 3rem 0; padding-top: 1.5rem; border-top: 1px solid var(--hm-hair); }
.hm-doc__pager a { display: block; padding: 0.75rem 1rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); text-decoration: none; }
.hm-doc__pager a:hover { border-color: var(--hm-hai); }
.hm-doc__pager span { display: block; font-size: 0.75rem; color: var(--hm-label); }
.hm-doc__next { margin-left: auto; text-align: right; }

/* Card grids on the landing page and section indexes */
/* Wider than the text but on its left edge: margin-left is the text column's offset. */
.hm-doc__main > .hm-doc-cards, .hm-doc__main > .hm-doc-cards__label { max-width: 60rem; margin-left: max(0px, calc((100% - 46rem) / 2)); margin-right: 0; }
.hm-doc-cards { list-style: none; margin-block: 0 2rem; margin-inline: auto; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.hm-doc-cards__label { margin-block: 2rem 0.75rem; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-hai); }
.hm-doc-card { position: relative; padding: 1rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); }
.hm-doc-card:hover, .hm-doc-card:focus-within { border-color: var(--hm-hai); }
.hm-doc-card__link { color: var(--hm-text); font-weight: 600; text-decoration: none; }
.hm-doc-card__link::after { content: ""; position: absolute; inset: 0; }
.hm-doc-card__link:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 2px; }
.hm-doc-card p { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--hm-hai); }

/* Next steps block at the end of a guide (list rendered by the docs tool) */
.hm-doc .hm-prose ul.hm-next-steps, .hm-doc .hm-prose h2#next-steps + ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.hm-doc .hm-prose ul.hm-next-steps li, .hm-doc .hm-prose h2#next-steps + ul li { margin: 0; padding: 0.75rem 1rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); }
.hm-doc .hm-prose ul.hm-next-steps a, .hm-doc .hm-prose h2#next-steps + ul a { font-weight: 600; text-decoration: none; }

/* On-page TOC */
.hm-doc__toc-title { margin: 0 0 0.5rem; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-hai); }
.hm-doc__toc ol { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.hm-doc__toc a { display: block; padding: 0.2rem 0; color: var(--hm-hai); text-decoration: none; }
.hm-doc__toc a:hover { color: var(--hm-text); text-decoration: underline; }
.hm-doc__toc-l3 { padding-left: 0.875rem; }

@media (min-width: 60rem) {
  /* Edge to edge: no container, a third track is kept (empty without a TOC) so the article stays centred. */
  .hm-doc { display: grid; grid-template-columns: 16rem minmax(0, 1fr) 14rem; gap: 2.5rem; align-items: start; }
  .hm-doc__navm { display: none; }
  /* The article comes first in the source so the skip link lands on it; the columns are placed here. */
  .hm-doc__nav { grid-column: 1; grid-row: 1; }
  .hm-doc__main { grid-column: 2; grid-row: 1; }
  .hm-doc__toc { grid-column: 3; grid-row: 1; }
  /* Without a TOC the article takes the third track (until wide screens, where the empty track keeps it centred). */
  .hm-doc:not(:has(.hm-doc__toc)) { grid-template-columns: 16rem minmax(0, 1fr); }
  .hm-doc__nav, .hm-doc__toc { display: block; position: sticky; top: 6rem; max-height: calc(100vh - 7rem); overflow-y: auto; padding: 4px; }
}

@media (min-width: 90rem) {
  .hm-doc:not(:has(.hm-doc__toc)) { grid-template-columns: 16rem minmax(0, 1fr) 14rem; }
}

.hm-registry { padding-block: clamp(2rem, 5vw, 4rem); }
.hm-registry__crumbs { font-size: 0.875rem; color: var(--ht-fg-muted); margin-bottom: 1.5rem; }
.hm-registry__header { margin-bottom: 2rem; }
.hm-registry__title { margin: 0 0 0.5rem; }
.hm-registry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-registry__tier { padding: 0.1rem 0.5rem; border: 1px solid var(--hm-hair); border-radius: 999px; background: var(--hm-shiro); }
.hm-registry__lede { margin: 0.75rem 0 0; font-size: 1.1rem; color: var(--ht-fg-muted); }
.hm-registry__cols { display: grid; gap: 2rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.hm-registry__cols--single { grid-template-columns: minmax(0, 1fr); }
.hm-registry__shot { display: block; max-width: 100%; height: auto; margin-bottom: 1.5rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); }
.hm-registry__h { font-size: 1.125rem; margin: 1.5rem 0 0.5rem; }
.hm-registry__main > .hm-registry__h:first-child { margin-top: 0; }
.hm-registry__side { padding: 1.25rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); background: var(--hm-shiro); }
.hm-registry__side .hm-registry__h:first-of-type { margin-top: 1rem; }
.hm-registry__facts { display: grid; grid-template-columns: auto 1fr; gap: 0.375rem 1rem; margin: 0; }
.hm-registry__facts dt { color: var(--hm-label); }
.hm-registry__facts dd { margin: 0; overflow-wrap: anywhere; }
.hm-registry__perms { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.375rem; }
.hm-registry__warn { color: var(--hm-shu); }
.hm-registry__install { margin: 2rem 0 0; font-family: var(--hm-font-mono); font-size: 0.8125rem; color: var(--hm-label); }
@media (max-width: 48rem) { .hm-registry__cols { grid-template-columns: minmax(0, 1fr); } }

/* WordPress compatibility: the core Gutenberg block classes that imported or
   pasted content carries. Scoped to .hm-entry / .hm-prose so they only style
   rich-text bodies. Colours come from the theme tokens. */

/* Alignment. alignwide and alignfull break out of the 46rem article column. */
.hm-entry .alignleft { float: left; margin: 0.25em 1.5em 1em 0; max-width: 50%; }
.hm-entry .alignright { float: right; margin: 0.25em 0 1em 1.5em; max-width: 50%; }
.hm-entry .aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; }
.hm-entry .alignwide { width: min(75rem, calc(100vw - 3rem)); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.hm-entry .alignfull { width: 100vw; max-width: none; margin-left: 50%; transform: translateX(-50%); }
/* A wide image stays a banner, not a full screen: cap its height and crop. */
.hm-entry img.alignwide, .hm-entry img.alignfull, .hm-entry .alignwide img, .hm-entry .alignfull img { width: 100%; max-height: min(32rem, 70vh); object-fit: cover; }
.hm-entry::after { content: ""; display: table; clear: both; }

/* Images and captions */
.wp-block-image, .wp-block-gallery figure { margin: 1.75em 0; }
.wp-block-image img { display: block; max-width: 100%; height: auto; }
.wp-block-image.aligncenter img { margin-inline: auto; }
.wp-block-image figcaption, figure.wp-caption figcaption, .wp-element-caption, .wp-caption-text { margin-top: 0.6em; font-size: 0.8125rem; color: var(--hm-label); text-align: center; }
.wp-block-gallery { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding: 0; margin: 1.75em 0; }
.wp-block-gallery .wp-block-image { flex: 1 1 12rem; margin: 0; }

/* Quote */
.wp-block-quote { margin: 1.75em 0; padding: 0.25em 0 0.25em 1.25em; border-left: 3px solid var(--hm-primary); color: var(--hm-hai); font-size: 1.125em; }
.wp-block-quote p { margin: 0 0 0.5em; }
.wp-block-quote cite, .wp-block-quote__citation { display: block; font-size: 0.8125rem; font-style: normal; color: var(--hm-label); }
.wp-block-pullquote { margin: 2em 0; padding: 1.5em 0; border-block: 1px solid var(--hm-hair); text-align: center; font-size: 1.375em; }
.wp-block-pullquote blockquote { margin: 0; padding: 0; border: 0; }

/* Table. Cells keep a readable minimum width, so a wide table scrolls sideways
   inside its own box (never the page) and edge shadows hint that there is more. */
.wp-block-table, .hm-entry > table {
  margin: 1.75em 0; max-width: 100%; overflow-x: auto;
  background:
    linear-gradient(to right, var(--hm-bg) 30%, transparent) left / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--hm-bg) 30%, transparent) right / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.28), transparent) left / 0.75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.28), transparent) right / 0.75rem 100% no-repeat scroll;
}
.hm-entry > table { display: block; width: max-content; border-collapse: collapse; font-size: 0.9375rem; }
.wp-block-table table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.hm-entry th, .hm-entry td { min-width: 7rem; }
.wp-block-table th, .wp-block-table td, .hm-entry > table th, .hm-entry > table td { padding: 0.5rem 0.75rem; border: 1px solid var(--hm-hair); text-align: left; }
.wp-block-table thead th, .hm-entry > table thead th { background: var(--hm-kasumi); }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--hm-kasumi); }
.wp-block-table figcaption { margin-top: 0.6em; font-size: 0.8125rem; color: var(--hm-label); text-align: center; }

/* Columns */
.wp-block-columns { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; margin: 1.75em 0; }
.wp-block-column { flex: 1 1 14rem; min-width: 0; }
.wp-block-column > :first-child { margin-top: 0; }
.wp-block-column > :last-child { margin-bottom: 0; }
@media (min-width: 48rem) { .wp-block-columns { flex-wrap: nowrap; } }

/* Buttons */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5em 0; }
.wp-block-button__link { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1.25rem; border: 1px solid var(--hm-primary); border-radius: 999px; background: var(--hm-primary); color: #fff; font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.wp-block-button__link:hover { filter: brightness(0.88); }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--hm-primary); }
.hm-entry .wp-block-button__link { color: #fff; }
.hm-entry .wp-block-button.is-style-outline .wp-block-button__link { color: var(--hm-primary); }

/* Embeds: responsive 16:9 by default */
.wp-block-embed { margin: 1.75em 0; }
.wp-block-embed__wrapper { position: relative; }
.wp-embed-aspect-16-9 .wp-block-embed__wrapper, .wp-has-aspect-ratio .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }
.wp-embed-aspect-4-3 .wp-block-embed__wrapper { aspect-ratio: 4 / 3; }
.wp-embed-aspect-1-1 .wp-block-embed__wrapper { aspect-ratio: 1 / 1; }
.wp-block-embed iframe, .wp-block-embed video { width: 100%; height: 100%; border: 0; }
.wp-block-embed:not([class*="wp-embed-aspect"]) iframe { aspect-ratio: 16 / 9; height: auto; }
.wp-block-embed figcaption { margin-top: 0.6em; font-size: 0.8125rem; color: var(--hm-label); text-align: center; }

/* Misc core blocks */
.wp-block-separator { border: 0; border-top: 1px solid var(--hm-hair); margin: 2.5em auto; }
.wp-block-code, .wp-block-preformatted { overflow-x: auto; }
.wp-block-group { margin: 1.75em 0; }
.wp-block-group.has-background { padding: 1.5rem; border-radius: var(--hm-radius-md); }
.wp-block-cover { position: relative; display: flex; align-items: center; justify-content: center; min-height: 14rem; padding: 2rem; margin: 1.75em 0; overflow: hidden; border-radius: var(--hm-radius-md); background: var(--hm-sumi-soft); color: #fff; }
.wp-block-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wp-block-cover__inner-container { position: relative; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }
.has-text-align-left { text-align: left; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Colour classes: the editor's default palette on the theme's own ink */
.has-black-color { color: #141417; }
.has-white-color { color: #ffffff; }
.has-gray-color, .has-cyan-bluish-gray-color { color: #66666c; }
.has-vivid-red-color, .has-red-color { color: #cf2e2e; }
.has-vivid-green-cyan-color, .has-green-color { color: #00a96e; }
.has-vivid-cyan-blue-color, .has-blue-color { color: #0693e3; }
.has-black-background-color { background-color: #141417; }
.has-white-background-color { background-color: #ffffff; }
.has-gray-background-color, .has-cyan-bluish-gray-background-color { background-color: #abb8c3; }
.has-vivid-red-background-color, .has-red-background-color { background-color: #cf2e2e; }
.has-vivid-green-cyan-background-color, .has-green-background-color { background-color: #00a96e; }
.has-vivid-cyan-blue-background-color, .has-blue-background-color { background-color: #0693e3; }
.has-background:not(.has-text-color) { color: var(--hm-sumi); }
.has-black-background-color, .has-vivid-red-background-color, .has-vivid-cyan-blue-background-color { color: #fff; }
.has-small-font-size { font-size: 0.8125em; }
.has-medium-font-size { font-size: 1.125em; }
.has-large-font-size { font-size: 1.5em; }
.has-x-large-font-size { font-size: 2em; }

[data-theme="dark"] .has-black-color { color: #ececea; }
@media (max-width: 47.99rem) {
  .hm-entry .alignleft, .hm-entry .alignright { float: none; max-width: 100%; margin: 1em 0; }
}

/* Design tokens and self-hosted fonts shared by the other zz-* files (the 0 sorts first).
   --hd-label is the mockup's #8a8a8f label grey darkened to the nearest AA-passing grey (4.5:1 on kasumi). */
@font-face{font-family:"Geist";src:url("/theme/assets/fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/theme/assets/fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{--hm-container:76rem;--hm-bg:var(--hm-shiro);--hd-card:color-mix(in srgb,var(--hm-bg),#fff 80%);--hd-ik:#fbefec;--hd-hair:#ebebe8;--hd-hair2:#e2e2de;--hd-ink2:#3a3a40;--hd-hai:#6b6b70;--hd-label:#6f6f74;--hd-shadow:0 1px 2px rgba(20,20,23,.04),0 8px 24px -12px rgba(20,20,23,.10);--hd-r-lg:20px;--hd-r-md:12px;--hd-r-sm:8px}
:root[data-theme="dark"]{--hd-card:var(--hm-bg);--hd-ik:rgba(194,59,34,.15);--hd-hair:var(--hm-hair);--hd-hair2:var(--hm-kinu);--hd-ink2:var(--hm-sumi-soft,var(--hm-text));--hd-hai:var(--hm-hai);--hd-label:var(--hm-hai)}
body{background:var(--hm-bg)}

/* ---------- WordPress security advisories (.hda: layouts single-advisory, archive-advisory) ---------- */
.hda-badge{display:inline-block;margin:0 0 18px;padding:6px 12px;border:1px solid color-mix(in srgb,var(--hm-shu) 45%,transparent);border-radius:999px;background:color-mix(in srgb,var(--hm-shu) 8%,transparent);font:500 12px/1 var(--hm-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--hd-shu-text)}
.hda-meta__alerts{margin-left:auto;font-weight:500;color:var(--hm-text);text-decoration:none;border-bottom:1px solid var(--hm-shu);padding-bottom:1px}
.hda-meta__alerts:hover{color:var(--hd-shu-text)}
.hda .hdb-body table{display:table;border:1px solid var(--hm-hair);border-radius:12px;border-collapse:separate;border-spacing:0;overflow:hidden}
.hda .hdb-body table tr:last-child>*{border-bottom:0}
.hda .hdb-body tbody th{width:34%;background:var(--hm-shiro);text-transform:none;letter-spacing:0;font:500 14px var(--hm-font);color:var(--hm-hai)}
.hda .hdb-body tbody td{color:var(--hm-text)}
.hda-after{max-width:calc(var(--hdb-measure) + 3rem);padding-bottom:56px;display:grid;gap:40px}
.hda-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.hda-alerts{padding:28px;border:1px solid var(--hm-hair);border-radius:16px;background:var(--hm-shiro);scroll-margin-top:96px}
.hda-alerts h2{margin:10px 0 6px;font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--hm-text)}
.hda-alerts>p:not(.hdb-eyebrow){margin:0;color:var(--hm-hai);font-size:15.5px;line-height:1.6}
.hda-alerts__form{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.hda-alerts__form input[type=email]{flex:1 1 16rem;height:44px;padding:0 16px;border:1px solid var(--hm-hair);border-radius:999px;background:var(--hm-bg);color:var(--hm-text);font:15px var(--hm-font)}
.hda-alerts__form input[type=email]:focus-visible,.hda-alerts__form button:focus-visible{outline:2px solid var(--hm-focus);outline-offset:2px}
.hda-alerts__form button{cursor:pointer}
.hda-alerts .hda-alerts__ok,.hda-alerts .hda-alerts__err{margin-top:16px;padding:12px 16px;border-radius:10px;font-weight:500;color:var(--hm-text)}
.hda-alerts .hda-alerts__ok{background:color-mix(in srgb,#2f9e5b 12%,transparent)}
.hda-alerts .hda-alerts__err{background:color-mix(in srgb,var(--hm-shu) 12%,transparent)}

.hda-reframe{padding-top:40px;border-top:1px solid var(--hm-hair)}
.hda-reframe h2{margin:12px 0 14px;font-size:clamp(26px,3vw,32px);font-weight:600;line-height:1.15;letter-spacing:-.03em;color:var(--hm-text);text-wrap:balance}
.hda-reframe__lede{margin:0 0 24px;font-size:17px;line-height:1.7;color:var(--hm-hai)}
.hda-table{overflow-x:auto;border:1px solid var(--hm-hair);border-radius:12px}
.hda-table table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.hda-table th,.hda-table td{padding:12px 14px;border-bottom:1px solid var(--hm-hair);text-align:left;vertical-align:top}
.hda-table tbody tr:last-child>*{border-bottom:0}
.hda-table thead th{font:500 12px var(--hm-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--hm-label);background:var(--hm-shiro)}
.hda-table tbody th{width:24%;font-weight:600;color:var(--hm-text)}
.hda-table td{color:var(--hm-hai)}
.hda-table td:last-child{color:var(--hm-text);background:color-mix(in srgb,var(--hm-shu) 4%,transparent)}
.hda-note{margin-top:20px;padding:16px 18px;border-left:2px solid var(--hm-shu);background:var(--hm-shiro);border-radius:0 10px 10px 0}
.hda-note p{margin:0;font-size:15px;line-height:1.6;color:var(--hm-hai)}
.hda-note strong{color:var(--hm-text)}
.hda-cta{margin-top:28px;padding:28px;border-radius:16px;background:var(--hm-sumi,#141417);color:#e8e8ea}
.hda-cta h3{margin:0 0 8px;font-size:21px;font-weight:600;letter-spacing:-.015em;color:#fff}
.hda-cta p{margin:0;font-size:15.5px;line-height:1.6;color:#b9b9c0}
.hda-cta__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:20px}
.hda-cta .hdp-btn:not(.hdp-btn--primary){background:transparent;color:#fff;border-color:#3a3a42}
.hda-cta .hdp-btn:not(.hdp-btn--primary):hover{border-color:#fff}
.hda-cta__more{color:#e8e8ea;font-size:15px;text-decoration:underline;text-decoration-color:#55555e;text-underline-offset:3px}
.hda-cta__more:hover{color:#fff;text-decoration-color:var(--hm-shu)}
@media (max-width:47.99rem){
  .hda-alerts,.hda-cta{padding:22px}
  .hda-meta__alerts{margin-left:0}
}

/* Remote code execution tracker (archive page 1) */
.hda-rce-box{padding-bottom:56px}
.hda-rce h2,.hda-arch-h{margin:10px 0 10px;font-size:clamp(24px,2.6vw,30px);font-weight:600;line-height:1.15;letter-spacing:-.025em;color:var(--hm-text)}
.hda-arch-h{margin:0 0 24px}
.hda-rce__lede{max-width:44rem;margin:0 0 22px;font-size:16px;line-height:1.65;color:var(--hm-hai)}
.hda-rce__wrap{overflow-x:auto;border:1px solid var(--hm-hair);border-radius:12px}
.hda-rce__table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.hda-rce__table th,.hda-rce__table td{padding:13px 16px;border-bottom:1px solid var(--hm-hair);text-align:left;vertical-align:top}
.hda-rce__table tbody tr:last-child>*{border-bottom:0}
.hda-rce__table thead th{font:500 12px var(--hm-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--hm-label);background:var(--hm-shiro);white-space:nowrap}
.hda-rce__table tbody th{font-weight:600}
.hda-rce__table tbody th a{color:var(--hm-text);text-decoration:none;border-bottom:1px solid var(--hm-shu)}
.hda-rce__table tbody th a:hover{color:var(--hd-shu-text)}
.hda-rce__table tbody th a:focus-visible{outline:2px solid var(--hm-focus);outline-offset:2px}
.hda-rce__table td{color:var(--hm-hai)}
.hda-rce__table tbody tr:hover>*{background:color-mix(in srgb,var(--hm-shiro) 70%,transparent)}
.hda-rce__mono,.hda-rce__table time{font-family:var(--hm-font-mono);font-size:13.5px;white-space:nowrap}
.hda-rce__na{color:var(--hm-label)}
.hda-rce__pill{display:inline-block;padding:3px 10px;border:1px solid var(--hm-hair);border-radius:999px;font:500 12px/1.4 var(--hm-font-mono);white-space:nowrap;color:var(--hm-hai)}
.hda-rce__pill--yes{border-color:color-mix(in srgb,var(--hm-shu) 45%,transparent);background:color-mix(in srgb,var(--hm-shu) 10%,transparent);color:var(--hd-shu-text)}
@media (max-width:47.99rem){
.hda-rce__wrap{overflow:visible;border:0;border-radius:0}
.hda-rce__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hda-rce__table,.hda-rce__table tbody,.hda-rce__table tr,.hda-rce__table th,.hda-rce__table td{display:block}
.hda-rce__table tr{margin:0 0 14px;padding:6px 0;border:1px solid var(--hm-hair);border-radius:12px}
.hda-rce__table tbody th,.hda-rce__table td{display:flex;gap:16px;justify-content:space-between;padding:8px 16px;border-bottom:0}
.hda-rce__table tbody th{font-size:16px}
.hda-rce__table td::before{content:attr(data-label);flex:none;font:500 12px/1.6 var(--hm-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--hm-label)}
.hda-rce__table td{text-align:right}
.hda-rce__table tbody tr:hover>*{background:none}
}

/* No 01/02 counters on advisory headings or the "On this page" list, and a tighter gap above each section */
.hda .hdb-body h2::before,.hda .hdb-toc a::before{content:none;display:none}
.hda .hdb-body h2{margin:1.5em 0 .55em}
.hda .hdb-body h3{margin:1.4em 0 .5em}

/* A single advisory card: keep the art uncropped beside the text */
@media (min-width:60rem){
  .hda .hdb-arch .hdp-grid>.hdp-card:only-child .hdp-card__media{flex-basis:58%;min-height:0;aspect-ratio:400/220;align-self:flex-start}
  .hda .hdb-arch .hdp-grid>.hdp-card:only-child .hdp-card__body{align-self:stretch;padding:20px 40px}
}
/* The tracker sits below the header button, not against it */
.hda .hda-rce-box{padding-top:40px}

/* Blog: post cards (homepage widget, archive, related), the post page and the archive.
   Classes start with hdp- (cards, CTA) or hdb- (blog pages), so nothing else changes. */

/* ---------- cards ---------- */
.hdp-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.hdp-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--hm-hair);border-radius:16px;background:var(--hm-bg);overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s}
.hdp-card:hover{border-color:color-mix(in srgb,var(--hm-text) 28%,var(--hm-hair));box-shadow:0 18px 40px -24px rgba(0,0,0,.25);transform:translateY(-2px)}
.hdp-card__media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--hm-shiro);border-bottom:1px solid var(--hm-hair)}
.hdp-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;display:block;transition:transform .4s}
.hdp-card:hover .hdp-card__media img{transform:scale(1.02)}
.hdp-card:hover .hdp-card__media--art{text-decoration:none}
.hdp-art{position:absolute;inset:0;width:100%;height:100%;display:block;transition:transform .4s}
.hdp-card:hover .hdp-art{transform:scale(1.03)}
.hdp-art__bg{fill:var(--hm-kasumi)}.hdp-art__ink{fill:var(--hm-sumi)}.hdp-art__card{fill:var(--hm-bg);stroke:var(--hm-text)}.hdp-art__dot{fill:var(--hm-shu)}
.hdp-art__line{stroke:var(--hm-hair);fill:none}.hdp-art__line--dark{stroke:color-mix(in srgb,var(--hm-bg) 18%,var(--hm-sumi))}
.hdp-art__tiles rect{fill:var(--hm-bg);stroke:var(--hm-kinu);stroke-dasharray:3 3}
.hdp-art__stroke{stroke:var(--hm-text);stroke-width:1.5;fill:none}
.hdp-art__rings circle{fill:none;stroke:var(--hm-kinu)}
.hdp-card__body{display:flex;flex-direction:column;gap:10px;padding:24px;flex:1}
.hdp-card p.hdp-card__cat{margin:0;font:400 11px/1 var(--hm-font-mono);letter-spacing:.04em;color:var(--hd-shu-text)}
.hdp-card .hdp-card__title{margin:0;font-size:20px;font-weight:450;line-height:1.25;letter-spacing:-.025em;text-wrap:balance}
.hdp-card__title a{color:var(--hm-text);text-decoration:none}
.hdp-card__title a::after{content:"";position:absolute;inset:0;border-radius:16px}
.hdp-card__title a:focus-visible{outline:none}
.hdp-card:has(.hdp-card__title a:focus-visible){outline:2px solid var(--hm-focus,var(--hm-shu));outline-offset:2px}
.hdp-card p.hdp-card__excerpt{margin:0;color:var(--hm-hai);font-size:15px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hdp-card p.hdp-meta{margin:auto 0 0;padding-top:6px;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--hm-label)}
/* archive: 3 equal cards per row (2 posts share the row, 1 post gets the wide card below) */
.hdp-grid--arch{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
@media (min-width:60rem){.hdp-grid--arch:has(>.hdp-card:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}}
/* one post: a wide card instead of a lonely column */
.hdp-grid>.hdp-card:only-child{grid-column:1/-1}
.hdp-grid>.hdp-card:only-child .hdp-card__body{padding:40px 44px;justify-content:center}
.hdp-grid>.hdp-card:only-child .hdp-card__title.hdp-card__title{font-size:clamp(24px,3vw,32px);letter-spacing:-.025em}
.hdp-grid>.hdp-card:only-child p.hdp-card__excerpt.hdp-card__excerpt{font-size:17px}
@media (min-width:60rem){
  .hdp-grid>.hdp-card:only-child{flex-direction:row}
  .hdp-grid>.hdp-card:only-child .hdp-card__media{flex:0 0 46%;aspect-ratio:auto;min-height:280px;border-bottom:0;border-right:1px solid var(--hm-hair)}
}

/* ---------- homepage widget ---------- */
.hd-blog__all,.hdb-related__head a{font-size:15px;font-weight:450;color:var(--hm-text);text-decoration:none;border-bottom:1px solid var(--hm-hair);padding-bottom:2px;white-space:nowrap}
.hd-blog__all:hover,.hdb-related__head a:hover{color:var(--hd-shu-text);border-color:var(--hm-shu)}

/* ---------- buttons and closing CTA ---------- */
.hdp-btn{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:999px;font:450 15px var(--hm-font);text-decoration:none;border:1px solid var(--hm-hair);background:var(--hm-bg);color:var(--hm-text)}
.hdp-btn:hover{border-color:var(--hm-text)}
.hdp-btn--primary{background:var(--hm-shu);border-color:var(--hm-shu);color:#fff}
.hdp-btn--primary:hover{background:var(--hm-shu-dark);border-color:var(--hm-shu-dark)}
.hdp-cta{text-align:center;padding:112px 0;background:var(--hm-shiro);border-top:1px solid var(--hm-hair)}
.hdp-cta h2{margin:16px auto 16px;max-width:18ch;font-size:clamp(32px,4.5vw,52px);font-weight:450;line-height:1.05;letter-spacing:-.055em;color:var(--hm-text)}
.hdp-cta p{margin:0 auto;max-width:36rem;color:var(--hm-hai);font-size:18px}
.hdp-cta__cmd{display:inline-flex;align-items:center;gap:.75rem;max-width:100%;margin:28px auto 0;padding:.4rem .4rem .4rem 1rem;border:1px solid var(--hm-hair);border-radius:999px;background:var(--hm-bg)}
.hdp-cta__cmd code{font:.875rem var(--hm-font-mono);color:var(--hm-text);overflow-x:auto;white-space:nowrap}
.hdp-cta__copy{display:inline-flex;align-items:center;gap:.4rem;height:2.25rem;padding:0 .8rem;border:0;border-radius:999px;background:var(--hm-kasumi);color:var(--hm-text);font:450 .8125rem var(--hm-font);cursor:pointer}
.hdp-cta__copy:hover{background:var(--hm-kinu)}
.hdp-cta__copy:focus-visible{outline:2px solid var(--hm-focus);outline-offset:2px}
.hdb-feeds{margin:24px 0 0;display:flex;flex-wrap:wrap;gap:.6rem}
.hdp-cta__row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px}

/* ---------- post page ---------- */
.hdb{--hdb-measure:44rem}
.hdb-progress{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--hm-shu);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}
@supports (animation-timeline:scroll()){
  .hdb-progress{animation:hdb-progress linear both;animation-timeline:scroll(root)}
  @keyframes hdb-progress{to{transform:scaleX(1)}}
}
@media (prefers-reduced-motion:reduce){.hdb-progress{display:none}}
.hdb-eyebrow{margin:0;font:400 12px/1 var(--hm-font-mono);letter-spacing:.04em;color:var(--hm-label)}
.hdb-head,.hdb-grid{display:grid;grid-template-columns:240px minmax(0,46rem);column-gap:4rem;justify-content:center}
.hdb-head{padding-top:3.5rem;padding-bottom:2.5rem}
.hdb-head>*{grid-column:2}
.hdb-crumb{margin:0 0 1.6rem;display:flex;gap:.45rem;font:400 12px var(--hm-font-mono);letter-spacing:.02em;color:var(--hd-label)}
.hdb-crumb a{color:var(--hd-label);text-decoration:none}
.hdb-crumb a:hover{color:var(--hd-shu-text)}
.hdb-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.1rem;padding:0;list-style:none;font:400 12px var(--hm-font-mono)}
.hdb-chips a{display:block;padding:3px 9px;border:1px solid var(--hd-hair2);border-radius:999px;background:var(--hd-card);color:var(--hd-hai);text-decoration:none}
.hdb-chips a:hover{border-color:var(--hm-text)}
.hdb-chips .hdb-chips__cat{border-color:var(--hm-text);background:var(--hm-text);color:var(--hm-bg)}
.hdb-head h1,.hdb-arch-head h1{margin:0;font-size:clamp(2.2rem,4.4vw,3.4rem);font-weight:450;line-height:1.06;letter-spacing:-.045em;text-wrap:balance;color:var(--hm-text)}
.hdb-lede{max-width:36rem;margin:1.3rem 0 0;font-size:1.2rem;line-height:1.75;color:var(--hd-ink2);text-wrap:pretty}
.hdb-meta{display:flex;align-items:center;gap:.8rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--hd-hair)}
.hdb-meta__av{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--hm-text);color:var(--hm-bg);font:400 12px var(--hm-font-mono)}
.hdb-meta__name{font-weight:450;color:var(--hm-text)}
.hdb-meta__name a{color:inherit;text-decoration:none}
.hdb-meta__date{margin-top:2px;font:400 12.5px var(--hm-font-mono);color:var(--hd-label)}
.hdb-meta__date span::before{content:"\00b7" / "";margin:0 .5rem}
.hdb-share{margin:0 0 0 auto;display:flex;gap:.4rem}
.hdb-share__btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--hd-hair2);border-radius:999px;background:var(--hd-card);padding:.4rem .9rem;font:400 13px/1.5 var(--hm-font);color:var(--hd-ink2);text-decoration:none;cursor:pointer}
.hdb-share__btn:hover{border-color:var(--hm-text)}
.hdb-share__btn:focus-visible{outline:2px solid var(--hm-focus);outline-offset:2px}
.hdb-share .hdb-share__sq{width:34px;padding:.4rem 0}
.hdb-hero{margin:0 auto}
.hdb-hero img{display:block;width:100%;height:auto;aspect-ratio:1200/480;object-fit:cover;border:1px solid var(--hd-hair);border-radius:var(--hd-r-lg);box-shadow:var(--hd-shadow)}

.hdb-grid{margin-top:3.5rem;padding-bottom:2.5rem}
.hdb-body{grid-column:2;grid-row:1;max-width:none}
.hdb-toc{display:block;grid-column:1;grid-row:1;position:sticky;top:96px;align-self:start}
.hdb-toclbl{margin:0 0 .8rem;font:400 11.5px var(--hm-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--hd-label)}
.hdb-toc ol{counter-reset:hdb-t;list-style:none;margin:0;padding:0}
.hdb-toc a{display:flex;gap:.6rem;padding:.42rem 0 .42rem .8rem;border-left:1px solid var(--hd-hair2);font-size:13.5px;line-height:1.4;color:var(--hd-hai);text-decoration:none;transition:color .15s,border-color .15s}
.hdb-toc li{counter-increment:hdb-t}
.hdb-toc a::before{content:counter(hdb-t,decimal-leading-zero);padding-top:2px;font:400 11px var(--hm-font-mono);color:var(--hd-label)}
.hdb-toc a:hover{color:var(--hm-text)}
.hdb-toc a[aria-current]{color:var(--hm-text);border-left-color:var(--hm-shu)}
.hdb-toc a[aria-current]::before{color:var(--hd-shu-text)}
@media (max-width:66.25rem){.hdb-head,.hdb-grid{grid-template-columns:minmax(0,1fr);column-gap:0}.hdb-head>*,.hdb-body{grid-column:1}.hdb-toc{display:none}}
@media (max-width:40rem){.hdb-share{display:none}}

/* prose */
.hdb-body{font-size:17.5px;line-height:1.75;color:var(--hd-ink2)}
.hdb-body>:first-child{margin-top:0}
.hdb-body p,.hdb-body ul,.hdb-body ol,.hdb-body blockquote,.hdb-body pre,.hdb-body figure,.hdb-body table{margin:0 0 1.35em}
.hdb-body h2{margin:3.6rem 0 1.2rem;font-size:1.85rem;font-weight:450;line-height:1.15;letter-spacing:-.035em;color:var(--hm-text);scroll-margin-top:96px}
.hdb-body{counter-reset:hdb-h}
.hdb-body h2{counter-increment:hdb-h}
.hdb-body h2::before{content:counter(hdb-h,decimal-leading-zero);display:block;margin-bottom:.6rem;font:400 12px/1 var(--hm-font-mono);letter-spacing:0;color:var(--hd-shu-text)}
.hdb-body h3{margin:1.9em 0 .55em;font-size:21px;font-weight:500;line-height:1.3;letter-spacing:-.015em;color:var(--hm-text);scroll-margin-top:96px}
.hdb-body h4{margin:1.6em 0 .5em;font-size:18px;font-weight:500;color:var(--hm-text)}
.hdb-body strong{color:var(--hm-text);font-weight:500}
.hdb-body a{color:var(--hm-text);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--hm-shu) 55%,transparent);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .15s,text-decoration-color .15s}
.hdb-body a:hover{color:var(--hd-shu-text);text-decoration-color:var(--hm-shu)}
.hdb-body ul,.hdb-body ol{padding-left:1.3em}
.hdb-body li{margin:.4em 0;padding-left:.2em}
.hdb-body li::marker{color:var(--hm-label)}
.hdb-body ol>li::marker{font:400 .85em var(--hm-font-mono)}
.hdb-body blockquote{padding:4px 0 4px 24px;border-left:2px solid var(--hm-shu);color:var(--hm-text);font-size:20px;line-height:1.55;letter-spacing:-.01em}
.hdb-body blockquote p:last-child{margin-bottom:0}
.hdb-body :not(pre)>code{font:.84em var(--hm-font-mono);background:var(--hd-code,#f0f0ec);border:1px solid var(--hm-hair);border-radius:5px;padding:.1em .35em}
.hdb-body pre{background:#141417;color:#e8e8ea;border-radius:14px;padding:20px 22px;overflow:auto;font:14px/1.65 var(--hm-font-mono);tab-size:2}
.hdb-body pre code{background:none;border:0;padding:0;font:inherit;color:inherit}
.hdb-body img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--hm-hair)}
.hdb-body figcaption{margin-top:10px;font-size:14px;color:var(--hm-label);text-align:center}
.hdb-body hr{border:0;border-top:1px solid var(--hm-hair);margin:3em 0}
.hdb-body table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5;display:block;overflow-x:auto}
.hdb-body th,.hdb-body td{padding:10px 14px;border-bottom:1px solid var(--hm-hair);text-align:left;vertical-align:top}
.hdb-body th{font:400 12px var(--hm-font-mono);letter-spacing:.04em;color:var(--hm-label)}

/* end of post */
.hdb-foot{display:grid;grid-template-columns:240px minmax(0,46rem);column-gap:4rem;justify-content:center;padding-bottom:72px}
.hdb-foot>*{grid-column:2}
@media (max-width:66.25rem){.hdb-foot{grid-template-columns:minmax(0,1fr);column-gap:0}.hdb-foot>*{grid-column:1}}
.hdb-tags{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hdb-tags a{display:inline-block;padding:6px 12px;border:1px solid var(--hm-hair);border-radius:999px;font:400 12px/1 var(--hm-font-mono);letter-spacing:.04em;color:var(--hm-hai);text-decoration:none}
.hdb-tags a:hover{color:var(--hd-shu-text);border-color:var(--hm-shu)}
.hdb-author{display:flex;gap:20px;align-items:flex-start;padding:28px;border:1px solid var(--hm-hair);border-radius:16px;background:var(--hm-shiro)}
.hdb-author img{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover}
.hdb-author p{margin:0}
.hdb-author__name{margin-top:8px !important;font-size:18px;font-weight:450;letter-spacing:-.01em;color:var(--hm-text)}
.hdb-author__name a{color:inherit;text-decoration:none}
.hdb-author__job{font-size:14px;color:var(--hm-label)}
.hdb-author__links{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px}
.hdb-author__links a{color:var(--hm-text);text-decoration:underline;text-decoration-color:var(--hm-hair);text-underline-offset:3px}
.hdb-author__links a:hover{color:var(--hd-shu-text);text-decoration-color:var(--hm-shu)}
.hdb-author__bio{margin-top:10px !important;font-size:15.5px;line-height:1.6;color:var(--hm-hai)}
.hdb-related{padding-top:72px;padding-bottom:96px;border-top:1px solid var(--hm-hair)}
.hdb-related__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:32px}
.hdb-related__head h2{margin:0;font-size:clamp(26px,3vw,34px);font-weight:450;letter-spacing:-.035em;color:var(--hm-text)}

/* ---------- archive ---------- */
.hdb-arch-head{padding-top:4.5rem;padding-bottom:1rem}
.hdb-arch-head .hdb-crumb{margin:0 0 1.6rem;gap:.45rem;letter-spacing:.02em}
.hdb-arch-head .hdb-crumb [aria-current]{color:var(--hd-label)}
.hdb-arch-head h1{margin:0;font-size:3rem;line-height:1.02;letter-spacing:-.06em}
.hdb-arch-head .hdb-lede{max-width:36rem;margin:1.4rem 0 0;font-size:1.2rem;line-height:1.75;color:var(--hd-ink2)}
.hdb-arch-head .hdb-feeds{gap:.6rem;margin:2.2rem 0 0}
.hdb-arch-head .hdp-btn{height:40px;padding:0 1.1rem;border-color:var(--hd-hair2);background:var(--hd-card);font-size:15px}
.hdb-arch-head .hdp-btn:hover{border-color:var(--hd-hair3,#cfcfca)}
.hdb-arch-head .hdb-tags{margin:28px 0 0}
.hdb-arch{padding-top:2.5rem;padding-bottom:6rem}
.hdb-arch .hm-pagination{margin-top:48px}
.hdb-empty{color:var(--hm-hai)}

@media (max-width:47.99rem){
  .hdb-head{padding-top:3.5rem}
  .hdb-arch-head{padding-top:56px}
  .hdb-body{font-size:17px}
  .hdb-author{flex-direction:column;padding:22px}
  .hdp-grid>.hdp-card:only-child .hdp-card__body{padding:24px}
  .hdp-cta{padding:80px 0}
}
:root[data-theme="dark"] .hdp-card:hover{box-shadow:0 18px 40px -24px rgba(0,0,0,.7)}
:root[data-theme="dark"] .hdb-body pre{background:#1b1b1f;box-shadow:0 0 0 1px var(--hm-hair)}
@media (prefers-reduced-motion:reduce){.hdp-card,.hdp-card__media img,.hdp-art{transition:none}.hdp-card:hover,.hdp-card:hover .hdp-card__media img,.hdp-card:hover .hdp-art{transform:none}}
:root[data-theme="dark"] .hdb-body :not(pre)>code{background:var(--hm-kinu)}

/* The shared header and footer, styled like the homepage design. Loaded on every page. */
:root{--hd-shu-text:var(--hm-shu-dark);--hd-hair3:#cfcfca;--hd-head-bg:color-mix(in srgb,var(--hm-bg) 82%,transparent)}:root[data-theme="dark"]{--hd-shu-text:#ff9e85;--hd-hair3:var(--hm-hai);--hd-head-bg:color-mix(in srgb,var(--hm-bg) 82%,transparent)}
.hdc.hdc-head{background:var(--hd-head-bg);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.hdc.hdc-head.scrolled{border-bottom-color:var(--hd-hair)}
.hdc .hm-header__inner{gap:2rem}
.hdc .hm-logo{font-size:1rem;letter-spacing:-.01em;text-transform:none;gap:.625rem}
.hdc .hm-logo__mark{font-size:1.25rem}
.hdc-wm{display:block;height:21px;width:auto}.hdc-wm__dot{fill:var(--hatamoto-dot,#c23b22)}[data-theme="dark"]{--hatamoto-dot:#ff9e85}.hdc-foot .hdc-wm{height:21px}
.hdc .hm-nav-wrap{margin-left:0}
.hdc .hm-nav{font-size:15px}
.hdc .hm-nav__list>li>a{color:var(--hd-ink2);transition:color .15s}
.hdc .hm-nav__list>li>a:hover{background:none;color:var(--hm-text)}
.hdc .hm-nav__list>li>a[aria-current="page"]{font-weight:500;color:var(--hm-text);text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:2px;text-underline-offset:6px}
.hdc a:focus-visible,.hdc summary:focus-visible,.hdc button:focus-visible,.hdc input:focus-visible{outline:2px solid var(--hm-focus);outline-offset:2px}
.hdi{flex:none;display:block}
.hdc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hdc .hdk-form{position:relative;display:flex;align-items:center}
.hdc .hdk-form input{width:180px;height:34px;padding:0 3rem 0 .8rem;border:1px solid var(--hd-hair2);border-radius:var(--hd-r-sm);background:var(--hd-card);color:var(--hm-text);font:inherit;font-size:14px;transition:border-color .15s}
.hdc .hdk-form input:hover{border-color:var(--hd-hair3)}
.hdc .hdk-form input::placeholder{color:var(--hd-label);opacity:1}
.hdc .hdk-kbd{position:absolute;right:.4rem;padding:1px 6px;border:1px solid var(--hd-hair);border-radius:5px;background:var(--hm-bg);font:400 11px var(--hm-font-mono);color:var(--hd-hai);pointer-events:none}
:root[data-theme="dark"] .hdc .hdk-kbd{background:var(--hm-kasumi)}
.hdc .hdk-go{display:none;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:0;border-radius:50%;background:transparent;color:var(--hm-hai);cursor:pointer;text-decoration:none}
.hdc-right{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.hdc .hm-theme-toggle,.hdc-gh{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:var(--hd-r-sm);background:transparent;color:var(--hm-text);text-decoration:none}
.hdc .hm-theme-toggle:hover,.hdc-gh:hover{background:var(--hm-kasumi);color:var(--hm-text)}
.hdc-gh svg{width:19px;height:19px}
.hdc .hdc-cta{display:inline-flex;align-items:center;height:34px;min-height:34px;padding:0 .9rem;border:1px solid var(--hd-hair2);border-radius:var(--hd-r-sm);background:var(--hd-card);color:var(--hm-text);font-size:14px;font-weight:450;transition:border-color .15s}
.hdc .hdc-cta:hover{border-color:var(--hd-hair3);background:var(--hd-card);color:var(--hm-text);filter:none}
@media (max-width:47.99rem){
  .hdc .hm-header__inner{gap:.5rem}
  .hdc .hm-logo{flex:0 1 auto;min-width:0}.hdc .hm-logo__name{overflow:hidden;text-overflow:ellipsis}
  .hdc-right{order:2;flex:none;gap:.5rem}
  .hdc .hm-nav-wrap{order:3;flex:none;margin-left:0}
  .hdc .hdc-cta{display:none}
  /* chrome.js adds .hdk-js once the palette exists; without it the collapsed box would hide typed text, so show the /search link instead */
  .hdc .hdk-go{display:inline-flex;color:var(--hm-text)}
  .hdc .hdk-form:not(.hdk-js) input,.hdc .hdk-form:not(.hdk-js) .hdk-kbd{display:none}
  .hdc .hdk-form.hdk-js .hdk-go{display:none}
  .hdc .hdk-form input{width:48px;padding:0;color:transparent;cursor:pointer}
  .hdc .hdk-form input::placeholder{color:transparent}
  .hdc .hdk-kbd{display:block;right:auto;left:50%;transform:translateX(-50%)}
  .hdc .hm-nav__toggle{position:relative;display:block;box-sizing:border-box;width:38px;height:34px;padding:0;border:1px solid var(--hd-hair2);border-radius:var(--hd-r-sm);background:var(--hd-card);color:var(--hm-text);font-size:0;transition:border-color .15s}
  .hdc .hm-nav__toggle:hover{border-color:var(--hd-hair3)}
  .hdc .hm-nav__toggle::before{content:"";position:absolute;left:50%;top:50%;margin:-5.5px 0 0 -7px;width:14px;height:11px;background:linear-gradient(currentColor 0 0) 0 0/100% 1.5px no-repeat,linear-gradient(currentColor 0 0) 0 50%/100% 1.5px no-repeat,linear-gradient(currentColor 0 0) 0 100%/100% 1.5px no-repeat}
}
@media (max-width:22.49rem){.hdc .hm-logo__name{display:none}}
@media (min-width:48rem){.hdc .hm-nav>.hm-nav__list{gap:1.4rem}.hdc .hm-nav__list>li>a{padding:0}}
@media (min-width:48rem) and (max-width:63.99rem){.hdc .hdk-form input,.hdc .hdk-kbd{display:none}.hdc .hdk-go{display:inline-flex}.hdc .hm-nav>.hm-nav__list{gap:.9rem}.hdc .hm-header__inner{gap:.75rem}}
.hdc-foot{margin-top:4rem;padding:0;border-top:1px solid var(--hd-hair);background:transparent;font-size:14px}
.hdc-foot a:focus-visible{outline:2px solid var(--hm-focus);outline-offset:2px}
.hdc-foot__top{display:grid;gap:2rem;padding:4rem 0 0}
@media (min-width:64rem){.hdc-foot__top{grid-template-columns:calc((100% - 8rem)*1.4/5.4) 1fr}}
.hdc-foot__brand p{margin:.8rem 0 0;max-width:18rem;color:var(--hd-hai);line-height:1.6}
.hdc-foot a.hdc-foot__mark{display:inline-flex;padding:10px 0;color:var(--hm-text)}
.hdc-foot .hdc-foot__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 2rem}
@media (min-width:40rem){.hdc-foot .hdc-foot__cols{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hdc-foot__h{margin:0 0 .8rem;font:400 12px var(--hm-font-mono);letter-spacing:.04em;color:var(--hd-label)}
.hdc-foot .hdc-foot__h a{color:var(--hd-label)}
.hdc-foot ul{list-style:none;margin:0;padding:0;display:block}
.hdc-foot li{margin:0}
.hdc-foot__col a{display:block;padding:.22rem 0;color:var(--hd-ink2);font-size:14px;line-height:1.6}
.hdc-foot__col a:hover{color:var(--hm-text)}
.hdc-foot__col a[aria-current="page"]{color:var(--hm-text);font-weight:500;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.hdc-foot__base{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:3rem;padding:1.5rem 0 2.5rem;border-top:1px solid var(--hd-hair)}
.hdc-foot__meta{display:flex;align-items:center;gap:.5rem 1.5rem;flex-wrap:wrap}
.hdc-foot__meta p{margin:0}
.hdc-foot__status{display:inline-flex;align-items:center;gap:.5rem;font:400 12px var(--hm-font-mono);letter-spacing:.04em;color:var(--hd-shu-text)}
.hdc-foot__status span{width:.5rem;height:.5rem;border-radius:50%;background:var(--hm-shu)}
.hdc-foot__legal{color:var(--hd-label);font:400 12px var(--hm-font-mono)}
.hdc-foot a.hdc-foot__gh{display:inline-flex;color:var(--hm-hai)}
.hdc-foot a.hdc-foot__gh:hover{color:var(--hm-text)}
/* Mobile menu scrim: start it below the sticky header, so the header keeps its colour and only the page is dimmed. */
@media (max-width:47.99rem){.hdc .hm-nav[open]::before{top:100%;height:100vh}}

/* Plugin and theme directories (sections/plugin_directory.html, sections/theme_directory.html). Scoped to .hm-plugin-directory. */
body .hm-container.hm-plugin-directory{padding-block:0 6rem}
body .hm-plugin-directory__header{max-width:none;margin:0 0 3.5rem;padding-top:1.6rem}
body .hm-plugin-directory__heading{margin:0;font-size:3rem;font-weight:450;line-height:1.02;letter-spacing:-.06em;text-wrap:wrap}
body .hm-plugin-directory__subheading{max-width:36rem;margin:1.4rem 0 0;font-size:1.2rem;line-height:1.75;color:var(--hd-ink2);text-wrap:wrap}
body .hm-plugin-directory__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:2.2rem 0 0}
body .hm-plugin-directory__actions .hm-btn{height:40px;min-height:40px;padding:0 1.1rem;border-radius:999px;font-size:15px;font-weight:450;text-decoration:none}
body .hm-plugin-directory__actions .hm-plugin-directory__btn--ghost{border-color:var(--hd-hair2);background:var(--hd-card);color:var(--hm-text)}
body .hm-plugin-directory__actions .hm-plugin-directory__btn--ghost:hover{border-color:var(--hd-hair3)}
:root[data-theme="dark"] body .hm-plugin-directory__actions .hm-btn:not(.hm-plugin-directory__btn--ghost){border-color:var(--hm-text);background:var(--hm-text);color:var(--hm-bg)}
body .hm-plugin-directory__tools{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin:0 0 1rem}
body .hm-plugin-directory__search{width:100%;max-width:22rem;height:40px;padding:0 .9rem;font:400 14.5px var(--hm-font);color:var(--hm-text);background:var(--hd-card);border:1px solid var(--hd-hair2);border-radius:var(--hd-r-sm)}
body .hm-plugin-directory__count{margin:0;font:400 12px var(--hm-font-mono);letter-spacing:.04em;color:var(--hd-label)}
body .hm-plugin-directory__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;background:none;border:0}
body .hm-plugin-directory__card{display:flex;flex-direction:column;gap:.5rem;padding:1.3rem;border:1px solid var(--hd-hair);border-radius:var(--hd-r-lg);background:var(--hd-card);box-shadow:var(--hd-shadow);transition:transform .2s}
body .hm-plugin-directory__card:hover{background:var(--hd-card);transform:translateY(-2px)}
body .hm-plugin-directory__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0;font:400 11.5px var(--hm-font-mono);letter-spacing:0;text-transform:none}
body .hm-plugin-directory__tag,body .hm-plugin-directory__tier{display:inline-block;padding:2px 8px;border:0;border-radius:6px;background:var(--hm-kasumi);color:var(--hd-hai);font:400 11.5px var(--hm-font-mono)}
body .hm-plugin-directory__tier{background:var(--hd-ik);color:var(--hd-shu-text)}
body .hm-plugin-directory__title{margin:0;font-size:1.05rem;font-weight:450;line-height:1.4;letter-spacing:-.01em}
body .hm-plugin-directory__title a{color:var(--hm-text);text-decoration:none}
body .hm-plugin-directory__author{margin:0;font-size:14.5px;color:var(--hd-hai)}
body .hm-plugin-directory__description{display:-webkit-box;margin:0;overflow:hidden;font-size:14.5px;line-height:1.6;color:var(--hd-hai);-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}
body .hm-plugin-directory__foot{display:flex;flex-wrap:wrap;align-items:center;margin-top:auto;padding-top:.8rem;font:400 12px var(--hm-font-mono);color:var(--hd-label)}
body .hm-plugin-directory__foot>*+*::before{content:"\00b7";margin:0 .45rem}
body .hm-plugin-directory__warn{display:inline-flex;margin-left:.3rem;color:var(--hd-shu-text)}
body .hm-plugin-directory__foot>.hm-plugin-directory__warn::before{content:none}
body .hm-plugin-directory__lines{flex:0 0 100%;margin-top:.5rem;font:inherit;color:inherit}
body .hm-plugin-directory__foot>.hm-plugin-directory__lines::before{content:none}
body .hm-plugin-directory__lines summary{display:inline;cursor:pointer;list-style:none;color:inherit}
body .hm-plugin-directory__lines summary::-webkit-details-marker{display:none}
body .hm-plugin-directory__lines summary:hover,body .hm-plugin-directory__source:hover{color:var(--hm-text)}
body .hm-plugin-directory__lines ul{margin:.6rem 0 0;padding-left:1.1rem;display:grid;gap:.375rem;font:400 12px/1.5 var(--hm-font-mono)}
body .hm-plugin-directory__source{margin:0;font:inherit;font-weight:400;color:inherit;text-decoration:none}
body .hm-plugin-directory__hint{margin:2rem 0 0;font:400 .85rem var(--hm-font);color:var(--hd-hai)}
body .hm-plugin-directory__state{padding:1.5rem;border:1px solid var(--hd-hair);border-radius:var(--hd-r-md);background:var(--hd-card);color:var(--hd-hai)}
body .hm-plugin-directory a:focus-visible,body .hm-plugin-directory summary:focus-visible,body .hm-plugin-directory input:focus-visible{outline:2px solid var(--hm-focus);outline-offset:2px}
@media (max-width:63.99rem){body .hm-plugin-directory__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:47.99rem){body .hm-plugin-directory__grid{grid-template-columns:minmax(0,1fr)}.hm-plugin-directory__heading{font-size:2.4rem}}
@media (prefers-reduced-motion:reduce){body .hm-plugin-directory__card{transition:none}.hm-plugin-directory__card:hover{transform:none}}
/* Themes: generated gradient previews (the three values of the mockup), cycling by card position. */
body .hm-theme-directory__thumb{height:170px;margin-bottom:.4rem;overflow:hidden;border:1px solid var(--hd-hair);border-radius:var(--hd-r-md);background:linear-gradient(135deg,#fafaf8 0 60%,#141417 60%)}
body .hm-theme-directory .hm-plugin-directory__card:nth-child(3n+2) .hm-theme-directory__thumb{background:radial-gradient(120% 80% at 50% 110%,#c23b22,#141417 60%)}
body .hm-theme-directory .hm-plugin-directory__card:nth-child(3n+3) .hm-theme-directory__thumb{background:linear-gradient(180deg,#e4e3de,#f4f3ef)}
body .hm-theme-directory .hm-plugin-directory__foot>*::before{content:none}
body .hm-plugin-directory__other{display:inline-block;margin-top:1.1rem;font-size:14.5px;color:var(--hd-hai);text-decoration:none}
body .hm-plugin-directory__other:hover{color:var(--hm-text)}

/* Docs shell (core layouts/single-doc.html): grouped sidebar, header and card grid like the mockup. Scoped to .hm-doc. */
body .hm-doc{max-width:calc(76rem + 3rem);margin-inline:auto;padding:3rem 1.5rem 5rem}
body .hm-doc__title{margin:0;font-size:clamp(2.1rem,4vw,2.6rem);font-weight:450;line-height:1.02;letter-spacing:-.06em}
body .hm-doc__main>*{max-width:46rem;margin-inline:0}
body .hm-doc__crumbs ol{gap:.25rem .45rem;margin:0 0 1.6rem;font:400 12px var(--hm-font-mono);letter-spacing:.02em;color:var(--hd-label)}
body .hm-doc__crumbs li+li::before{margin-right:.45rem}
body .hm-doc__crumbs a{color:var(--hd-label)}
body .hm-doc__crumbs a:hover{color:var(--hm-text);text-decoration:none}
body .hm-doc__crumbs [aria-current]{color:var(--hd-label)}
body .hm-doc .hm-prose{margin-top:1.4rem}
/* Sidebar search */
body .hm-doc__search{margin:0 0 .6rem}
body .hm-doc__search input[type="search"]{height:36px;padding:0 .8rem;border:1px solid var(--hd-hair2);border-radius:var(--hd-r-sm);background:var(--hd-card);font:400 14.5px var(--hm-font)}
/* Sidebar: sections are mono group labels (still native <details>), links are plain rows with a kasumi active pill */
body .hm-doc-nav{font-size:14.5px}
body .hm-doc-nav .hm-doc-nav{margin:0;padding:0;border:0}
body .hm-doc-nav li{margin:0}
body .hm-doc-nav a{padding:.32rem .6rem;margin:0 -.6rem;border-radius:7px;color:var(--hd-ink2);line-height:1.6}
body .hm-doc-nav a:hover,body .hm-doc-nav a[aria-current="page"]{background:var(--hm-kasumi);color:var(--hm-text);font-weight:400;box-shadow:none}
body .hm-doc-nav a[aria-current="page"]{font-weight:500;box-shadow:inset 3px 0 0 var(--hm-shu)}
body .hm-doc-nav summary{padding:.3rem 0;margin-top:.4rem;border-radius:0;font:400 12px var(--hm-font-mono);letter-spacing:.04em;color:var(--hd-label)}
body .hm-doc-nav summary:hover{background:none;color:var(--hm-text)}
body .hm-doc-nav summary::after{width:.35rem;height:.35rem;border-width:1.5px}
body .hm-doc-nav__group{padding:.9rem 0 .2rem;font:400 12px var(--hm-font-mono);letter-spacing:.04em;text-transform:none;color:var(--hd-label)}
body .hm-doc__navm{border-color:var(--hd-hair);border-radius:var(--hd-r-md);background:var(--hd-card)}
/* On this page */
body .hm-doc__toc-title{font:400 12px var(--hm-font-mono);letter-spacing:.04em;text-transform:none;color:var(--hd-label)}
body .hm-doc__toc a{color:var(--hd-hai)}
/* Section cards: the mockup's two-column cell grid */
body .hm-doc__main>.hm-doc-cards,body .hm-doc__main>.hm-doc-cards__label{max-width:none;margin-left:0}
body .hm-doc-cards{grid-template-columns:repeat(2,minmax(0,1fr));margin-block:0 1rem}
body .hm-doc-cards__label{margin-block:2.5rem 1rem;font:400 12px var(--hm-font-mono);letter-spacing:.04em;text-transform:none;color:var(--hd-label)}
body .hm-doc-card{padding:1.6rem;border-color:var(--hd-hair);border-radius:var(--hd-r-lg);background:var(--hd-card);box-shadow:var(--hd-shadow)}
body .hm-doc-card:hover,body .hm-doc-card:focus-within{border-color:var(--hd-hair2)}
body .hm-doc-card__link{font-size:1.05rem;font-weight:500;line-height:1.4;letter-spacing:-.01em}
body .hm-doc-card p{margin:.5rem 0 0;font-size:15px;color:var(--hd-hai)}
@media (min-width:60rem){
body .hm-doc{grid-template-columns:230px minmax(0,1fr) 14rem;gap:3rem}
body .hm-doc:not(:has(.hm-doc__toc)){grid-template-columns:230px minmax(0,1fr)}
body .hm-doc__nav,body .hm-doc__toc{top:6rem;padding:4px}
body .hm-doc__nav{margin:-4px -10px 0;padding:4px 10px}
}
@media (max-width:47.99rem){body .hm-doc-cards{grid-template-columns:minmax(0,1fr)}body .hm-doc{padding-top:1.5rem}}

/* Changelog (layouts/archive-release.html): dir header, then a date column beside each release. Scoped to .hm-changelog. */
body .hm-container.hm-changelog{padding-block:0 4rem}
body .hm-changelog__header{max-width:none;margin:0 0 1rem;padding-top:4.5rem}
body .hm-changelog__crumb{margin:0 0 1.6rem;font:400 12px var(--hm-font-mono);letter-spacing:.02em;color:var(--hd-label)}
body .hm-changelog__crumb a{color:var(--hd-label);text-decoration:none}
body .hm-changelog__crumb a:hover{color:var(--hm-text)}
body .hm-changelog .hm-listing__title{margin:0;font-size:3rem;font-weight:450;line-height:1.02;letter-spacing:-.06em;text-wrap:wrap}
body .hm-changelog .hm-listing__lede{max-width:36rem;margin:1.4rem 0 0;font-size:1.2rem;line-height:1.75;color:var(--hd-ink2);text-wrap:wrap}
body .hm-changelog__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:2.2rem 0 0}
body .hm-changelog__btn{height:40px;min-height:40px;padding:0 1.1rem;border:1px solid var(--hd-hair2);border-radius:999px;background:var(--hd-card);color:var(--hm-text);font-size:15px;font-weight:450;text-decoration:none}
body .hm-changelog__btn:hover{border-color:var(--hd-hair3)}
body .hm-changelog__release{display:grid;grid-template-columns:170px minmax(0,1fr);gap:2rem;padding:2.4rem 0;border-bottom:1px solid var(--hd-hair)}
body .hm-changelog__release:target{background:none;box-shadow:none;border-radius:0}
body .hm-changelog__when{position:sticky;top:90px;align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;font:400 12.5px var(--hm-font-mono);color:var(--hd-label)}
body .hm-changelog__date{margin:0;font:inherit;color:inherit}
body .hm-changelog__channel,body .hm-changelog__yanked{padding:2px 8px;border:0;border-radius:6px;background:var(--hm-kasumi);color:var(--hd-hai);font:400 11.5px var(--hm-font-mono)}
body .hm-changelog__yanked{background:var(--hd-ik);color:var(--hd-shu-text)}
body .hm-changelog__body{min-width:0}
body .hm-changelog__version{margin:0;font-size:1.4rem;font-weight:450;line-height:1.3;letter-spacing:-.04em}
body .hm-changelog__summary{margin:.8rem 0 0;line-height:1.6;font-size:15px;color:var(--hd-ink2)}
body .hm-changelog__group{margin:1.3rem 0 .4rem;font:400 12px var(--hm-font-mono);letter-spacing:.04em;text-transform:none;color:var(--hd-label)}
body .hm-changelog__list{margin:.6rem 0 0;padding-left:1.1rem;font-size:15px;line-height:1.6;color:var(--hd-ink2)}
body .hm-changelog__more{margin-top:1rem}
body .hm-changelog__more>summary{display:inline-block;cursor:pointer;font:400 12px var(--hm-font-mono);letter-spacing:.04em;color:var(--hd-label)}
body .hm-changelog__more>summary:hover{color:var(--hm-text)}
body .hm-changelog a:focus-visible,body .hm-changelog summary:focus-visible{outline:2px solid var(--hm-focus);outline-offset:2px}
@media (max-width:47.99rem){
body .hm-changelog__release{grid-template-columns:minmax(0,1fr);gap:2rem}
body .hm-changelog__when{position:static;flex-direction:row;align-items:center;gap:.6rem}
}

/* Getting started and other step-by-step docs: ordered lists become numbered steps, code blocks become the mockup's code cards. Styled by content shape, scoped to .hm-doc .hm-entry. */
body .hm-doc .hm-entry ol{counter-reset:hd-step;margin:1.4rem 0 0;padding:0;list-style:none}
body .hm-doc .hm-entry ol>li{counter-increment:hd-step;margin:2.2rem 0 0;padding:0;font-size:15px;line-height:1.7;color:var(--hd-ink2)}
body .hm-doc .hm-entry ol>li:first-child{margin-top:0}
body .hm-doc .hm-entry ol>li::before{content:counter(hd-step,decimal-leading-zero);display:block;margin-bottom:.4rem;font:400 12px var(--hm-font-mono);letter-spacing:.04em;color:var(--hd-label)}
body .hm-doc .hm-entry ol>li>a:first-child{font-size:1.05rem;font-weight:500;letter-spacing:-.01em;color:var(--hm-text)}
body .hm-doc .hm-entry pre{margin:.8rem 0 0;padding:1.1rem 1.2rem;overflow:auto;border:1px solid var(--hd-hair);border-radius:var(--hd-r-lg);background:var(--hd-card);box-shadow:var(--hd-shadow);font:400 13px/1.7 var(--hm-font-mono);color:var(--hd-ink2)}
body .hm-doc .hm-entry pre code{padding:0;border:0;background:none;font:inherit;color:inherit}

/* hatamoto.dev homepage. Every rule is scoped to .hdh, so no other page changes. Colours come from --hm-* tokens (dark mode follows). */
.hdh{color:var(--hm-text);overflow-x:clip}
.hdh [id]{scroll-margin-top:5rem}
.hdh h1,.hdh h2,.hdh h3,.hdh p,.hdh ul{margin:0}
.hdh ul{list-style:none;padding:0}
.hdh a:focus-visible,.hdh button:focus-visible{outline:2px solid var(--hm-focus);outline-offset:2px}
.hdh h1{font-size:clamp(2.6rem,5.2vw,4rem);font-weight:450;line-height:1.02;text-wrap:wrap;letter-spacing:-.06em}
.hdh h2{font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:450;line-height:1.15;text-wrap:wrap;letter-spacing:-.055em}
.hdh h3{font-size:1.05rem;font-weight:500;line-height:1.4;letter-spacing:-.01em}
.hdh .hdh-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font:400 12px var(--hm-font-mono);letter-spacing:.04em;color:var(--hd-label)}
.hdh .hdh-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--hm-shu)}
.hdh .hdh-lede{margin-top:1.4rem;max-width:36rem;font-size:1.2rem;line-height:1.75;color:var(--hd-ink2)}
.hdh .hdh-center{text-align:center}
.hdh .hdh-center .hdh-lede{margin-left:auto;margin-right:auto}
.hdh .hdh-center h2{margin-top:.7rem}
.hdh .hdh-sec{padding:6rem 0}
.hdh .hdh-sec--tight{padding:2rem 0 4rem}
.hdh .hdh-sechead{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;margin-bottom:2.5rem}
.hdh .hdh-sechead h2{margin-top:.6rem;max-width:22ch}
.hdh .hdh-btn{display:inline-flex;align-items:center;gap:.45rem;height:40px;padding:0 1.1rem;border:1px solid var(--hd-hair2);border-radius:999px;background:var(--hd-card);color:var(--hm-text);font:450 15px var(--hm-font);text-decoration:none;transition:border-color .15s}
.hdh .hdh-btn:hover{border-color:var(--hd-hair3)}
.hdh .hdh-btn--primary{background:var(--hm-shu);border-color:var(--hm-shu);color:#fff}
.hdh .hdh-btn--primary:hover{background:var(--hm-shu-dark);border-color:var(--hm-shu-dark)}
.hdh .hdi{width:16px;height:16px}

/* hero */
.hdh .hdh-hero{padding:6rem 0 4rem}
.hdh .hdh-hero__in{display:grid;gap:4rem;align-items:center;grid-template-columns:minmax(0,1fr)}
.hdh .hdh-hero__in>*{min-width:0}
@media (min-width:1061px){.hdh .hdh-hero__in{grid-template-columns:1fr 1fr}.hdh .hdh-hero__in>*{min-width:auto}}
.hdh .hdh-hero h1{max-width:13ch}
.hdh .hdh-pill{display:inline-flex;gap:.5rem;align-items:center;margin-bottom:1.6rem;padding:4px 12px 4px 4px;border:1px solid var(--hd-hair2);border-radius:999px;background:var(--hd-card);color:var(--hd-ink2);font-size:13.5px;text-decoration:none}
.hdh .hdh-pill b{padding:1px 9px;border-radius:999px;background:var(--hm-kasumi);color:var(--hm-text);font:400 12px var(--hm-font-mono)}
.hdh .hdh-pill:hover{border-color:var(--hd-hair3)}
.hdh .hdh-pill .hdi{width:14px;height:14px}
.hdh .hdh-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.4rem}
.hdh .hdh-chips li{padding:4px 10px;border:1px solid var(--hd-hair2);border-radius:999px;background:var(--hd-card);font:400 12px var(--hm-font-mono);color:var(--hd-ink2)}
.hdh .hdh-vis{position:relative;padding:2.5rem 0 0}
.hdh .hdh-sun{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#d5492e,#c23b22 62%,#b2341d);right:-60px;top:-30px;z-index:0}
@media (max-width:1060px){.hdh .hdh-sun{right:-20px}}
.hdh .hdh-shot{position:relative;z-index:1;margin:0;border:1px solid var(--hd-hair);border-radius:var(--hd-r-lg);background:var(--hd-card);overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.03),0 20px 50px -20px rgba(20,20,23,.18)}
.hdh .hdh-shot__bar{display:flex;align-items:center;gap:.4rem;padding:.7rem 1rem;border-bottom:1px solid var(--hd-hair);font:400 12px var(--hm-font);color:var(--hd-hai)}
.hdh .hdh-shot__bar i{width:9px;height:9px;border-radius:50%;background:#e6e6e2}
:root[data-theme="dark"] .hdh .hdh-shot__bar i{background:var(--hm-kinu)}
.hdh .hdh-shot__bar span{margin-left:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdh .hdh-shot img{display:block;width:100%;height:auto}

/* install box: panes stack without JS, become tabs with it */
.hdh .hdh-ib{margin-top:1.8rem;max-width:40rem;text-align:left}
.hdh .hdh-ib__tabs{display:flex;gap:1.1rem;margin:0 0 .7rem 1.3rem}
.hdh .hdh-ib__tabs button{padding:0 0 4px;border:0;border-bottom:1.5px solid transparent;border-radius:0;background:none;color:var(--hd-hai);font:inherit;font-size:14px;cursor:pointer}
.hdh .hdh-ib__tabs button[aria-selected="true"]{color:var(--hm-text);border-bottom-color:var(--hm-shu)}
.hdh .hdh-ib__pane{margin-top:.75rem}
.hdh .hdh-ib__pane[hidden]{display:none}
.hdh .hdh-ib__label{margin:0 0 .35rem 1.3rem;font:400 12px/1 var(--hm-font-mono);letter-spacing:.04em;color:var(--hd-label)}
.hdh .hdh-ib.is-tabs .hdh-ib__label{display:none}
.hdh .hdh-ib.is-tabs .hdh-ib__pane{margin-top:0}
.hdh .hdh-ib__cmd{display:flex;flex-wrap:nowrap;align-items:center;gap:.7rem;padding:.75rem .8rem .75rem 1.3rem;border:1px solid var(--hd-hair2);border-radius:999px;background:var(--hd-card);box-shadow:var(--hd-shadow);color:var(--hm-text);font:400 14px var(--hm-font-mono);overflow:hidden;white-space:nowrap}
.hdh .hdh-ib__p{flex:none;color:var(--hm-shu);font:inherit}
.hdh .hdh-ib__cmd code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font:inherit;color:inherit}
.hdh .hdh-ib__cmd button{flex:none;margin-left:auto;padding:4px 8px;border:0;border-radius:6px;background:transparent;color:var(--hd-hai);font:400 12px var(--hm-font-mono);cursor:pointer}
.hdh .hdh-ib__cmd button:hover{background:var(--hm-kasumi)}
.hdh .hdh-ib__note{margin:.7rem 0 0 1.3rem;max-width:36rem;font-size:13px;color:var(--hd-hai)}
.hdh .hdh-ib--c{margin:2rem auto 0}
.hdh .hdh-ib--c .hdh-ib__tabs{justify-content:center;margin-left:0}
.hdh .hdh-ib--c .hdh-ib__label{margin-left:0;text-align:center}
.hdh .hdh-ib--c .hdh-ib__note{margin:.7rem auto 0;text-align:center}

/* dotted frame with an illustration (shared by the pile and the entity figure) */
.hdh .hdh-frame{position:relative;margin:3rem 0 2rem;padding:2rem;border:1px solid var(--hd-hair2);border-radius:var(--hd-r-lg);background:var(--hd-card) radial-gradient(#e6e6e2 1px,transparent 1px) 0 0/22px 22px}
:root[data-theme="dark"] .hdh .hdh-frame{background:var(--hm-bg) radial-gradient(var(--hm-kinu) 1px,transparent 1px) 0 0/22px 22px}
@media (max-width:640px){.hdh .hdh-frame{padding:.8rem}}
.hdh .hdh-ill{display:block;width:100%;height:auto;font-family:var(--hm-font)}
.hdh .hdh-ill__l{font:400 10.5px var(--hm-font-mono);letter-spacing:.06em;fill:var(--hd-label)}
.hdh .hdh-ill__h{font:500 19px var(--hm-font);letter-spacing:-.4px;fill:var(--hm-text)}
.hdh .hdh-ill__m{font:400 12.5px var(--hm-font-mono);fill:var(--hm-text)}
.hdh .hdh-ill__s{font:400 11px var(--hm-font-mono);fill:var(--hd-ink2)}
.hdh .hdh-ill .hdh-ill__mut{fill:var(--hd-label)}
.hdh .hdh-ill__brand{font:500 34px var(--hm-font);letter-spacing:-1.5px;fill:var(--hm-text)}
.hdh .hdh-ill__tile{fill:var(--hd-card);stroke:var(--hd-hair3);stroke-dasharray:4 3}
.hdh .hdh-ill__box{fill:var(--hd-card);stroke:var(--hm-text);stroke-width:1.25}
.hdh .hdh-ill__chip{fill:var(--hm-kasumi)}
.hdh .hdh-ill__arrow{fill:none;stroke:var(--hm-text);stroke-width:1.5}
.hdh .hdh-ill__ah{fill:var(--hm-text)}

/* specs, stats, cards */
.hdh .hdh-ruled{position:relative}
.hdh .hdh-pl{position:absolute;z-index:2;width:13px;height:13px;pointer-events:none}
.hdh .hdh-pl::before,.hdh .hdh-pl::after{content:"";position:absolute;background:var(--hm-text)}
.hdh .hdh-pl::before{left:6px;top:0;width:1px;height:13px}
.hdh .hdh-pl::after{top:6px;left:0;height:1px;width:13px}
.hdh .hdh-pl.tl{left:-7px;top:-7px}.hdh .hdh-pl.tr{right:-7px;top:-7px}.hdh .hdh-pl.bl{left:-7px;bottom:-7px}.hdh .hdh-pl.br{right:-7px;bottom:-7px}
.hdh .hdh-specs,.hdh .hdh-stats{display:grid;grid-template-columns:1fr;border-top:1px solid var(--hd-hair2);border-left:1px solid var(--hd-hair2);background:var(--hd-card)}
@media (min-width:64rem){.hdh .hdh-specs{grid-template-columns:repeat(3,minmax(0,1fr))}.hdh .hdh-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hdh .hdh-specs--3{margin-top:0}
.hdh .hdh-ruled:has(.hdh-specs--3){margin-top:2rem}
.hdh .hdh-specs>li,.hdh .hdh-stats>li{position:relative;border-right:1px solid var(--hd-hair2);border-bottom:1px solid var(--hd-hair2)}
.hdh .hdh-spec{display:flex;flex-direction:column;min-height:250px;padding:2.2rem 2rem 2rem}
.hdh .hdh-spec__n{margin-bottom:1.3rem;font:400 12px var(--hm-font-mono);letter-spacing:.04em;color:var(--hd-label)}
.hdh .hdh-spec__ik{display:grid;place-items:center;width:40px;height:40px;margin-bottom:1.2rem;border-radius:50%;background:var(--hd-ik);color:var(--hm-shu)}
.hdh .hdh-spec__ik svg{width:19px;height:19px}
.hdh .hdh-spec h3{font-size:1.25rem;font-weight:450;letter-spacing:-.035em}
.hdh .hdh-spec p{margin:.55rem 0 0;font-size:15px;line-height:1.6;color:var(--hd-hai)}
.hdh .hdh-spec code{margin-top:auto;padding:1.3rem 0 0;background:none;font:400 12.5px var(--hm-font-mono);color:var(--hd-ink2)}
.hdh .hdh-spec code::before{content:"";display:inline-block;width:6px;height:6px;margin-right:.55rem;border-radius:50%;background:var(--hm-shu);vertical-align:middle}
.hdh .hdh-stats li{display:block;padding:2rem}
.hdh .hdh-stats__n{display:block;font:400 3rem/1 var(--hm-font);letter-spacing:-.06em}
.hdh .hdh-stats__n--red{color:var(--hm-shu)}
.hdh .hdh-stats__l{display:block;margin-top:.8rem;font-size:14.5px;line-height:1.6;color:var(--hd-hai)}
.hdh .hdh-btn--sm{height:34px;padding:0 .9rem;border-radius:var(--hd-r-sm);font-size:14px}
.hdh .hdh-sechead h2{max-width:22ch}
.hdh .hdh-ill__card{fill:var(--hd-card);stroke:var(--hd-hair2)}
.hdh .hdh-ill__rule{stroke:var(--hd-hair)}
.hdh .hdh-ill__conn{fill:none;stroke:var(--hd-hair3);stroke-width:1.25}
.hdh .hdh-ill__arrow2{fill:none;stroke:#b9b9b4;stroke-width:1.5}
.hdh .hdh-ill__ah2{fill:#b9b9b4}
.hdh .hdh-ill__lc--on{fill:var(--hm-text)}
.hdh .hdh-ill__m.hdh-ill__on{fill:var(--hm-bg)}
.hdh .hdh-svg__card,.hdh .hdh-svg__out{fill:var(--hm-bg);stroke:var(--hm-hair)}
.hdh .hdh-svg__card{stroke:var(--hm-text)}
.hdh .hdh-svg__dot{fill:var(--hm-shu)}
.hdh .hdh-svg__line{stroke:var(--hm-hair);fill:none}
.hdh .hdh-svg__flow path{stroke:var(--hm-text);stroke-width:1.25;fill:none}
.hdh .hdh-svg__h{font-size:18px;font-weight:500;fill:var(--hm-text)}
.hdh .hdh-svg__m{font:13px var(--hm-font-mono);fill:var(--hm-label)}
.hdh .hdh-svg__t{font-size:15px;fill:var(--hm-text)}
.hdh .hdh-cards{display:grid;gap:1rem}
@media (min-width:40rem){.hdh .hdh-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.hdh .hdh-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hdh .hdh-card{display:flex;flex-direction:column;height:100%;min-height:240px;padding:1.7rem;border:1px solid var(--hd-hair);border-radius:var(--hd-r-lg);background:var(--hd-card);box-shadow:var(--hd-shadow);color:var(--hm-text);text-decoration:none;transition:box-shadow .2s,transform .2s}
.hdh .hdh-card:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(0,0,0,.04),0 18px 40px -18px rgba(20,20,23,.2)}
.hdh .hdh-card__k{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--hm-kasumi);color:var(--hd-ink2)}
.hdh .hdh-card h3{margin-top:1.2rem;font-size:1.15rem;font-weight:500;letter-spacing:-.02em}
.hdh .hdh-card p{margin:.45rem 0 0;font-size:15px;line-height:1.6;color:var(--hd-hai)}
.hdh .hdh-card__go{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:1.2rem;font:400 14px var(--hm-font);color:var(--hd-ink2)}
.hdh .hdh-card:hover .hdh-card__go{color:var(--hm-text)}
.hdh .hdh-card__go svg{width:14px;height:14px}

/* blog teaser cards */
:is(.hdh,.hdb-arch) .hdp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
@media (max-width:63.99rem){:is(.hdh,.hdb-arch) .hdp-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}}
:is(.hdh,.hdb-arch) .hdp-card{border-radius:var(--hd-r-lg);border-color:var(--hd-hair);background:var(--hd-card);box-shadow:var(--hd-shadow)}
:is(.hdh,.hdb-arch) .hdp-card:hover{border-color:var(--hd-hair);box-shadow:0 1px 2px rgba(0,0,0,.04),0 18px 40px -18px rgba(20,20,23,.2)}
:is(.hdh,.hdb-arch) .hdp-card__media{aspect-ratio:400/220}
:is(.hdh,.hdb-arch) .hdp-card__body{gap:0;padding:0}
:is(.hdh,.hdb-arch) .hdp-card p.hdp-card__cat{order:0;padding:1.2rem 1.4rem 0;font:400 12px var(--hm-font-mono);letter-spacing:0;color:var(--hd-label)}
:is(.hdh,.hdb-arch) .hdp-card .hdp-card__title{order:2;text-wrap:wrap;padding:.7rem 1.4rem 0;font-size:1.12rem;line-height:1.35;letter-spacing:-.025em}
:is(.hdh,.hdb-arch) .hdp-card p.hdp-card__excerpt{order:3;padding:.5rem 1.4rem 0;font-size:14.5px;line-height:1.6;color:var(--hd-hai)}
:is(.hdh,.hdb-arch) .hdp-card p.hdp-meta{order:1;margin:0;padding:1.2rem 1.4rem 0;gap:0 .6rem;font:400 12px var(--hm-font-mono);color:var(--hd-label)}
:is(.hdh,.hdb-arch) .hdp-card p.hdp-meta .hdp-meta__au{display:none}
:is(.hdh,.hdb-arch) .hdp-card p.hdp-meta time+span::before{content:"\00b7" / "";margin-right:.6rem}
:is(.hdh,.hdb-arch) .hdp-card p.hdp-card__by{order:5;display:flex;align-items:center;gap:.55rem;margin:auto 0 0;padding:1.2rem 1.4rem 1.3rem;font-size:13.5px;color:var(--hd-ink2)}
:is(.hdh,.hdb-arch) .hdp-card__av{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--hm-text);color:var(--hm-bg);font:500 9.5px var(--hm-font-mono)}

/* closing band: white card with a rising sun */
.hdh .hdh-cta{padding:0 0 6rem;background:none;border:0;text-align:center}
.hdh .hdh-cta>.hm-container{position:relative;width:min(1168px,calc(100% - 3rem));max-width:none;margin-inline:auto;overflow:hidden;padding:5rem 2rem 4.5rem;border:1px solid var(--hd-hair2);border-radius:28px;background:var(--hd-card)}
.hdh .hdh-cta>.hm-container>*{position:relative}
.hdh .hdh-cta>.hm-container::after{content:"";position:absolute;left:50%;bottom:-430px;width:520px;height:520px;border-radius:50%;background:#c23b22;opacity:.95;transform:translateX(-50%);z-index:0}
.hdh .hdh-cta h2{margin-inline:auto;max-width:none}
.hdh .hdh-cta .hdh-lede{margin-inline:auto}
.hdh .hdh-cta__row{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin:2rem 0 3rem}
.hdh .hdh-btn--primary{border-color:var(--hm-text);background:var(--hm-text);color:var(--hm-bg)}
.hdh .hdh-btn--primary:hover{border-color:var(--hm-text);opacity:.88}

@media (max-width:47.99rem){.hdh .hdh-sec{padding:4rem 0}.hdh .hdh-hero{padding:3rem 0 3.5rem}.hdh .hdh-cta{padding:0 0 4rem}}
@media (prefers-reduced-motion:reduce){.hdh .hdh-card{transition:none}.hdh .hdh-card:hover{transform:none}}

/* Product mega menu (.hdm). Opens with <details open> or hover; works without JS. */
.hdm .hdm__sum{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .5rem;color:var(--hd-ink2);border-radius:var(--hm-radius-sm);transition:color .15s}
.hdm .hdm__sum::-webkit-details-marker{display:none}
.hdm .hdm__sum:hover,.hdm .hdm__det[open]>.hdm__sum{color:var(--hm-text)}
.hdm .hdm__sum:focus-visible,.hdm .hdm__item:focus-visible,.hdm .hdm__feat:focus-visible{outline:2px solid var(--hm-focus);outline-offset:2px}
.hdm .hdm__chev{width:12px;height:12px;opacity:.6;transition:transform .15s}
.hdm .hdm__det[open] .hdm__chev{transform:rotate(180deg)}
.hdm .hdm__panel{padding:.25rem 0 .5rem}
.hdm .hdm__grid{display:grid;gap:1.25rem}
.hdm .hdm__h{margin:0 0 .5rem;font:400 12px var(--hm-font-mono);letter-spacing:.04em;color:var(--hd-label)}
.hdm .hdm__h span{display:none}
.hdm .hm-nav__list a.hdm__item{display:flex;gap:.75rem;align-items:flex-start;padding:.6rem;margin:0 -.6rem;border-radius:var(--hd-r-md);color:var(--hm-text)}
.hdm .hm-nav__list a.hdm__item:hover{background:var(--hm-kasumi)}
.hdm .hdm__ico{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;border:1px solid var(--hd-hair);background:var(--hd-card);color:var(--hd-ink2)}
.hdm .hdm__ico svg{width:16px;height:16px}
.hdm .hdm__txt{display:block;min-width:0}
.hdm .hdm__t{display:block;font-weight:450;font-size:14.5px;line-height:1.35;color:var(--hm-text)}
.hdm .hdm__d{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--hd-hai)}
.hdm .hm-nav__list a.hdm__feat{display:flex;flex-direction:column;gap:.5rem;padding:1.2rem;border:0;border-radius:var(--hd-r-md);background:var(--hm-kasumi);color:var(--hm-text)}
.hdm .hdm__eyebrow{display:inline-flex;align-items:center;gap:.5rem;font:400 12px var(--hm-font-mono);letter-spacing:.04em;color:var(--hd-label)}

.hdm .hdm__big{font-size:2rem;line-height:1;font-weight:400;letter-spacing:-.05em;color:var(--hm-text)}
.hdm .hdm__fd{font-size:13px;line-height:1.6;color:var(--hd-hai)}
.hdm .hdm__go{font:400 12px var(--hm-font-mono);color:var(--hd-shu-text)}
.hdm .hdm__go::after{content:" →"}
@media (max-width:47.99rem){
  /* the list anchors to the sticky header (full width), not to the narrow nav box; a card inset 1rem like the mockup */
  .hdm .hm-nav{position:static}
  .hdm .hm-nav[open]::before{display:none}
  .hdm .hm-nav__list{left:1rem;right:1rem;top:64px;width:auto;box-sizing:border-box;max-height:calc(100vh - 5rem);overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:.9rem;padding:1rem 1.2rem;background:var(--hd-card);border:1px solid var(--hd-hair);border-radius:var(--hd-r-lg)}
  .hdm .hm-nav__list>li>a,.hdm .hdm__sum{padding:0;font-size:15px}
  .hdm .hdm__panel{padding-left:.25rem}
}
@media (min-width:48rem){
  .hdm .hm-nav,.hdm .hdm__prod{position:static}
  .hdm .hdm__sum{padding:0}
  .hdm .hdm__det::details-content{content-visibility:visible;display:contents}
  .hdm .hdm__panel{display:none;position:absolute;left:max(1.5rem,calc(50% - 38rem));top:100%;z-index:60;width:min(76rem,calc(100% - 3rem));box-sizing:border-box;padding:1.5rem;background:var(--hd-card);border:1px solid var(--hd-hair);border-radius:var(--hd-r-lg);box-shadow:0 24px 60px -24px rgba(20,20,23,.22)}
  .hdm .hdm__det[open]>.hdm__panel,.hdm .hdm__prod:hover>.hdm__det>.hdm__panel{display:block}
  .hdm .hdm__panel::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:1.5rem}
  .hdm .hdm__grid{grid-template-columns:repeat(4,1fr) 1.1fr;gap:1.5rem}
}
@media (min-width:48rem) and (max-width:63.99rem){.hdm .hdm__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.hdm .hdm__chev{transition:none}}

section[id^="hb-"]{--hd-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
/* Benefit pages: restyles core sections whose ids start with hb-. Nothing here reaches other pages. */
section[id^="hb-"]{padding-block:clamp(3rem,6vw,5rem);border-top:0;background:transparent}
section[id^="hb-"] .hm-btn{height:40px;min-height:40px;padding:0 1.1rem;border-color:var(--hm-text);background:var(--hm-text);color:var(--hm-bg);font-size:15px;font-weight:450}
section[id^="hb-"] .hm-btn:hover{filter:none;opacity:.88}
section[id^="hb-"] .hm-btn--secondary{border-color:var(--hd-hair2);background:var(--hd-card);color:var(--hm-text)}
section[id^="hb-"] .hm-btn--secondary:hover{border-color:var(--hd-hair3);opacity:1}
section[id^="hb-"][id$="-hero"]{padding-block:2rem 3.5rem}
section[id^="hb-"] .hm-hero{gap:4rem;align-items:center;text-align:left;justify-items:stretch}
section[id^="hb-"] .hm-hero:has(.hm-hero__media){grid-template-columns:1fr 1fr}
section[id^="hb-"] .hm-hero--centered .hm-hero__body{max-width:none}
section[id^="hb-"] .hm-hero__headline{max-width:none;margin:0;font-size:clamp(2.3rem,4.2vw,3.4rem);font-weight:450;line-height:1.02;text-wrap:wrap;letter-spacing:-.06em}
section[id^="hb-"] .hm-hero__eyebrow{margin:0 0 23px;font:400 12px/1.4 var(--hm-font-mono);letter-spacing:.04em;text-transform:none;color:var(--hd-label)}
section[id^="hb-"] .hm-hero__eyebrow{display:flex;align-items:center;gap:.5rem}
section[id^="hb-"] .hm-hero__eyebrow::before,section[id^="hb-"][id$="-next"] .hm-features__item:not(:has(.hm-features__icon))::before{content:"";flex:none;background:currentColor;-webkit-mask:var(--hd-ico) center/contain no-repeat;mask:var(--hd-ico) center/contain no-repeat}
section[id^="hb-"] .hm-hero__eyebrow::before{width:14px;height:14px}
section[id^="hb-"] .hm-hero__subheadline{max-width:36rem;margin:1.4rem 0 0;font-size:1.2rem;line-height:1.75;color:var(--hd-ink2)}
section[id^="hb-"] .hm-hero--centered .hm-hero__subheadline{margin-inline:0}
section[id^="hb-"] .hm-hero__actions{justify-content:flex-start;gap:.6rem;margin-top:2.2rem}
section[id^="hb-"] .hm-hero__media--panel{min-width:0}
section[id^="hb-"] .hm-frame{border:1px solid var(--hd-hair);border-radius:var(--hd-r-lg);background:var(--hd-card);overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.03),0 20px 50px -20px rgba(20,20,23,.18)}
section[id^="hb-"] .hm-frame__bar{gap:.4rem;padding:.7rem 1rem;border-bottom:1px solid var(--hd-hair);background:var(--hd-card);font:400 12px var(--hm-font);color:var(--hd-hai)}
section[id^="hb-"] .hm-frame__dots{gap:.4rem}
section[id^="hb-"] .hm-frame__dots i{width:9px;height:9px;background:#e6e6e2}
:root[data-theme="dark"] section[id^="hb-"] .hm-frame__dots i{background:var(--hm-kinu)}
section[id^="hb-"] .hm-frame__title{margin-left:.6rem;color:var(--hd-hai)}
section[id^="hb-"] .hm-frame__meta{font:400 12px var(--hm-font-mono);color:var(--hd-label)}
section[id^="hb-"] .hm-code{margin:0;overflow:hidden;font-family:var(--hm-font-mono);font-size:13px;line-height:1.7;color:var(--hd-ink2)}
section[id^="hb-"] .hm-code code{white-space:pre-wrap;overflow-wrap:anywhere}
section[id^="hb-"] .hm-outs{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.75rem;margin:1rem 0 0}
section[id^="hb-"] .hm-outs>div{padding:.75rem 1rem;border:1px solid var(--hm-hair);border-radius:var(--hm-radius-md);background:var(--hm-bg)}
section[id^="hb-"][id$="-problem"]{padding-block:1rem 3rem;border-top:0}
section[id^="hb-"][id$="-problem"] .hm-value-proposition{width:min(1168px,calc(100% - 3rem));max-width:none;margin-inline:auto;padding:2.2rem 2.4rem;border:1px solid var(--hd-hair);border-radius:var(--hd-r-lg);background:var(--hd-card);box-shadow:var(--hd-shadow);text-align:left}
section[id^="hb-"][id$="-problem"] .hm-value-proposition::before{content:"The problem";display:block;margin-bottom:.5rem;font:400 12px/25.6px var(--hm-font-mono);letter-spacing:.04em;color:var(--hd-shu-text)}
section[id^="hb-"][id$="-problem"] .hm-value-proposition__headline{margin:0;max-width:none;font-size:1.5rem;font-weight:450;letter-spacing:-.04em;line-height:1.2}
section[id^="hb-"][id$="-problem"] .hm-value-proposition__paragraph{margin:.7rem 0 0;max-width:46rem;font-size:1rem;color:var(--hd-ink2)}
section[id^="hb-"][id$="-stats"]{padding-block:0 4rem;border-top:0}
section[id^="hb-"] .hm-stats__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1rem;margin:0}
section[id^="hb-"] .hm-stats__item{display:grid;gap:0;align-content:start;justify-content:stretch;margin:0;padding:1.6rem;border:1px solid var(--hd-hair);border-radius:var(--hd-r-lg);background:var(--hd-card);box-shadow:var(--hd-shadow)}
section[id^="hb-"] .hm-stats__label{order:2;margin:.7rem 0 0;font-size:14px;line-height:1.45;font-weight:400;letter-spacing:0;text-transform:none;color:var(--hd-hai)}
section[id^="hb-"] .hm-stats__value{display:contents}
section[id^="hb-"] .hm-stats__number{order:1;font-size:2.6rem;font-weight:400;line-height:1;letter-spacing:-.06em;color:var(--hm-text)}
section[id^="hb-"] .hm-stats__item:nth-child(2) .hm-stats__number,section[id^="hb-"] .hm-stats__item:nth-child(3) .hm-stats__number{color:var(--hd-shu-text)}
section[id^="hb-"] .hm-stats__description{order:3;display:block;margin-top:.2rem;font-size:14px;color:var(--hd-hai)}
section[id^="hb-"] .hm-features__header{margin-bottom:2.2rem}
section[id^="hb-"] .hm-features__heading{max-width:none;font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:450;letter-spacing:-.055em;line-height:1.15}
section[id^="hb-"] .hm-features__subheading{color:var(--hm-hai)}
section[id^="hb-"] .hm-features--cards .hm-features__list{display:grid;gap:1rem;margin:0;padding:0;border:0;background:transparent;overflow:visible;list-style:none}
section[id^="hb-"] .hm-features--cards .hm-features__item{display:grid;gap:0;align-content:start;padding:1.6rem;border:1px solid var(--hd-hair);border-radius:var(--hd-r-lg);background:var(--hd-card);box-shadow:var(--hd-shadow)}
section[id^="hb-"] .hm-features--cards .hm-features__title{margin:0;font-size:1.05rem;font-weight:500;letter-spacing:-.01em;line-height:1.4}
section[id^="hb-"] .hm-features--cards .hm-features__description{margin:.5rem 0 0;font-size:15px;line-height:1.6;color:var(--hd-hai)}
section[id^="hb-"] .hm-features__tags{margin-top:1.1rem;padding:0;border:0;font:400 12px/1.5 var(--hm-font-mono);color:var(--hd-label)}
section[id^="hb-"] .hm-features__tags::before{content:"How \2192  ";color:var(--hd-label)}
section[id^="hb-"] .hm-features__icon{color:var(--hd-ink2)}
section[id^="hb-"] .hm-features--minimal .hm-features__list{display:block;columns:2;column-gap:3rem;margin:0;padding:0;border:0;background:transparent;list-style:none}
section[id^="hb-"] .hm-features--minimal .hm-features__item:hover{background:transparent}
section[id^="hb-"] .hm-features--minimal .hm-features__item{position:relative;break-inside:avoid;display:block;padding:.75rem 0 .75rem 1.3rem;border:0;border-bottom:1px solid var(--hm-hair);background:transparent;box-shadow:none}
section[id^="hb-"] .hm-features--minimal .hm-features__item::before{content:"";position:absolute;left:0;top:1.35rem;width:6px;height:6px;border-radius:50%;background:var(--hm-shu)}
section[id^="hb-"] .hm-features--minimal .hm-features__title{display:inline;margin:0;font-size:15px;font-weight:450;letter-spacing:0;color:var(--hd-ink2)}
section[id^="hb-"] .hm-features--minimal .hm-features__description{display:inline;margin:0 0 0 .4rem;font-size:.9375rem;color:var(--hm-hai)}
section[id^="hb-"][id$="-next"]{padding-block:3rem;border-top:1px solid var(--hm-hair)}
section[id^="hb-"][id$="-next"] .hm-features__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:0;padding:0;list-style:none;border:0;background:transparent;overflow:visible}
section[id^="hb-"][id$="-next"] .hm-features__item{position:relative;display:grid;gap:.3rem;padding:1.3rem 1.4rem;border:1px solid var(--hd-hair);border-radius:var(--hd-r-lg);background:var(--hd-card);box-shadow:var(--hd-shadow)}
section[id^="hb-"][id$="-next"] .hm-features__item{grid-template-columns:36px 1fr;column-gap:1rem;align-items:center}
section[id^="hb-"][id$="-next"] .hm-features__item>:not(.hm-features__icon){grid-column:2}
section[id^="hb-"][id$="-next"] .hm-features__item:not(:has(.hm-features__icon))::before{grid-column:1;grid-row:1/span 4;width:36px;height:36px;border-radius:10px;background:var(--hm-kasumi);-webkit-mask:none;mask:none;color:var(--hd-ink2)}
section[id^="hb-"][id$="-next"] .hm-features__item:not(:has(.hm-features__icon))::after{content:"";grid-column:1;grid-row:1/span 4;place-self:center;width:18px;height:18px;background:var(--hd-ink2);-webkit-mask:var(--hd-ico) center/contain no-repeat;mask:var(--hd-ico) center/contain no-repeat}
section[id^="hb-"][id$="-next"] .hm-features__icon{grid-column:1;grid-row:1/span 4;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--hm-kasumi);color:var(--hd-ink2);margin:0;font-size:1.125rem;line-height:1}
section[id^="hb-"][id$="-next"] .hm-features__category,section[id^="hb-"][id$="-next"] .hm-features__item:not(:has(.hm-features__category)) .hm-features__title::before{display:block;font:400 11.5px/1.3 var(--hm-font-mono);color:var(--hd-label)}
section[id^="hb-"][id$="-next"] .hm-features__item:not(:has(.hm-features__category)) .hm-features__title::before{content:"Next";font-weight:400;letter-spacing:0}
section[id^="hb-"][id$="-next"] .hm-features__item:hover{border-color:var(--hd-hair2)}
section[id^="hb-"][id$="-next"] .hm-features__title{font-size:1.0625rem}
section[id^="hb-"][id$="-next"] .hm-features__link{font:400 .8125rem var(--hm-font-mono);color:var(--hd-shu-text);text-decoration:none}
section[id^="hb-"][id$="-next"] .hm-features__link::after{content:"";position:absolute;inset:0;border-radius:var(--hm-radius-lg)}
section[id^="hb-"][id$="-hood"] .hm-features__header{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;max-width:none}
section[id^="hb-"][id$="-hood"] .hm-btn.hdb-docs{flex:none;height:34px;min-height:34px;padding:0 .9rem;font-size:14px;border-radius:var(--hd-r-sm);text-decoration:none}
section[id^="hb-"] .hm-faq{max-width:52rem}
section[id^="hb-"] .hm-faq__heading{font-size:clamp(1.75rem,3.4vw,2.25rem);font-weight:450;letter-spacing:-.055em}
section[id^="hb-"] .hm-faq__item{border-bottom:1px solid var(--hm-hair)}
section[id^="hb-"] .hm-faq__question{display:flex;justify-content:space-between;gap:1rem;padding:1.1rem 0;cursor:pointer;list-style:none;font-size:1.0625rem;font-weight:450}
section[id^="hb-"] .hm-faq__question::-webkit-details-marker{display:none}
section[id^="hb-"] .hm-faq__question::after{content:"+";content:"+" / "";flex:none;font-family:var(--hm-font-mono);font-weight:400;color:var(--hm-label)}
section[id^="hb-"] .hm-faq__item[open]>.hm-faq__question::after{content:"\2212";content:"\2212" / ""}
section[id^="hb-"] .hm-faq__answer{padding:0 0 1.25rem;color:var(--hm-hai)}
section[id^="hb-"][id$="-cta"]{padding-block:6rem}
section[id^="hb-"] .hm-cta{position:relative;width:min(1168px,calc(100% - 3rem));max-width:none;margin-inline:auto;overflow:hidden;padding:5rem 2rem 4.5rem;border:1px solid var(--hd-hair2);border-radius:28px;background:var(--hd-card);text-align:center}
section[id^="hb-"] .hm-cta>*{position:relative}
section[id^="hb-"] .hm-cta::after{content:"";position:absolute;left:50%;bottom:-430px;width:520px;height:520px;border-radius:50%;background:#c23b22;opacity:.95;transform:translateX(-50%);z-index:0}
section[id^="hb-"] .hm-cta__headline{max-width:none;margin-inline:auto;font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:450;letter-spacing:-.055em;line-height:1.15}
section[id^="hb-"] .hm-cta__subheadline{max-width:36rem;margin:1.4rem auto 0;font-size:1.2rem;line-height:1.75;color:var(--hd-ink2)}
section[id^="hb-"] .hm-cta__actions{margin:2rem 0 3rem}
section[id^="hb-"] a:focus-visible,section[id^="hb-"] summary:focus-visible,section[id^="hb-"] .hm-btn:focus-visible{outline:2px solid var(--hm-focus);outline-offset:2px}
@media (max-width:47.99rem){
section[id^="hb-"] .hm-hero,section[id^="hb-"] .hm-hero:has(.hm-hero__media){grid-template-columns:minmax(0,1fr);gap:2.5rem}
section[id^="hb-"] .hm-cta{padding:3.5rem 1.25rem 3rem}
section[id^="hb-"][id$="-cta"]{padding-block:4rem}
section[id^="hb-"] .hm-features--minimal .hm-features__list{columns:1}
section[id^="hb-"][id$="-next"] .hm-features__list{grid-template-columns:1fr}
section[id^="hb-"][id$="-problem"] .hm-value-proposition{padding:1.5rem}
}
@media (min-width:48rem){
section[id^="hb-"] .hm-features--cols-2 .hm-features__list{grid-template-columns:repeat(2,minmax(0,1fr))}
section[id^="hb-"] .hm-features--cols-3 .hm-features__list{grid-template-columns:repeat(3,minmax(0,1fr))}
section[id^="hb-"][id$="-next"] .hm-features--cols-3 .hm-features__list,section[id^="hb-"][id$="-next"] .hm-features--cols-2 .hm-features__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Dark mode: the core primary button is ink on a near-black page. Flip it to the light ink token (--hm-sumi turns light in dark) with page-colour text. */
:root[data-theme="dark"] section[id^="cmp-"] .hm-btn:not(.hm-btn--secondary){background:var(--hm-sumi);border-color:var(--hm-sumi);color:var(--hm-bg)}
/* Breadcrumb above the first section of builder pages (layouts/single-page.html). */
.hdb-crumb--page{margin:0 auto;padding-top:4.5rem;align-items:center;gap:.4rem;letter-spacing:.02em}
.hdb-crumb--page [aria-current]{color:var(--hm-text)}
/* The owner's primary colour is black, so core's link colour vanishes on the dark background. */
:root[data-theme="dark"] .hm-entry a:not([class]){color:var(--hm-sumi)}

/* Search palette (.hdk), built by chrome.js. */
dialog.hdk{width:min(620px,92vw);margin:12vh auto auto;padding:0;overflow:hidden;border:1px solid var(--hd-hair);border-radius:var(--hd-r-lg);background:var(--hd-card);color:var(--hm-text);box-shadow:0 30px 80px -24px rgba(20,20,23,.3)}
dialog.hdk::backdrop{background:color-mix(in srgb,var(--hm-bg) 60%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
:root[data-theme="dark"] dialog.hdk::backdrop{background:color-mix(in srgb,var(--hm-bg) 60%,transparent)}
.hdk .hdk__in{display:block;width:100%;height:auto;padding:1.1rem 1.25rem;border:0;border-bottom:1px solid var(--hd-hair);background:transparent;color:var(--hm-text);font:inherit;font-size:1rem}
.hdk .hdk__in:focus-visible{outline:2px solid var(--hm-focus);outline-offset:-2px}
.hdk .hdk__list{list-style:none;margin:0;padding:.4rem;max-height:52vh;overflow:auto}
.hdk .hdk__opt{display:flex;gap:.8rem;align-items:center;padding:.65rem .8rem;border-radius:var(--hd-r-md);font-size:14.5px;cursor:pointer}
.hdk .hdk__opt[aria-selected="true"]{background:var(--hm-kasumi);box-shadow:inset 3px 0 0 var(--hm-shu);outline:2px solid transparent;outline-offset:-2px}
@media (forced-colors:active){.hdk .hdk__opt[aria-selected="true"]{outline-color:Highlight}}
.hdk .hdk__k{flex:none;display:inline-grid;place-items:center;width:20px;color:var(--hd-ink2)}
.hdk .hdk__k svg{width:16px;height:16px}
.hdk .hdk__tx{display:block;min-width:0}
.hdk .hdk__tx b{display:block;font-weight:450;color:var(--hm-text)}
.hdk .hdk__d{display:block;font-size:.8rem;color:var(--hd-hai)}
.hdk .hdk__g{margin-left:auto;flex:none;font:400 11px var(--hm-font-mono);color:var(--hd-label)}
.hdk .hdk__none{padding:.75rem .8rem;color:var(--hd-label);font-size:14px}
.hdk .hdk__hint{display:flex;align-items:center;gap:1rem;margin:0;padding:.55rem 1rem;border-top:1px solid var(--hd-hair);font:400 11.5px var(--hm-font-mono);color:var(--hd-label)}
@media (prefers-reduced-motion:no-preference){dialog.hdk[open]{animation:hdk-in .12s ease-out}@keyframes hdk-in{from{opacity:0;transform:translateY(-6px)}}}
.hdk .hdk__x{flex:none;margin:-.4rem 0 -.4rem auto;padding:.1rem .7rem;border:1px solid var(--hm-hair);border-radius:999px;background:transparent;color:var(--hm-text);font:inherit;font-size:.75rem;cursor:pointer}
.hdk .hdk__x:focus-visible{outline:2px solid var(--hm-focus);outline-offset:2px}

/* Comparison pages: styles for sections whose ids start with cmp-. Nothing here reaches other pages. */
section[id^="cmp-"]{border-top:0;padding-block:6rem}
section[id^="cmp-"] .hm-hero{text-align:left;justify-items:start}
section[id^="cmp-"] .hm-hero--centered .hm-hero__body{max-width:48rem}
section[id^="cmp-"] .hm-hero__headline{max-width:none;margin-inline:0;font-size:clamp(2.3rem,4.2vw,3.4rem);font-weight:450;line-height:1.04;text-wrap:wrap;letter-spacing:-.06em}
section[id^="cmp-"] .hdv-eyebrow{margin:0 0 .8rem}
section[id^="cmp-"] .hm-hero__subheadline{max-width:40rem;margin-inline:0;font-size:1.2rem;line-height:1.75;color:var(--hd-ink2)}
section[id^="cmp-"] .hm-hero__actions{justify-content:flex-start;gap:.6rem;margin-top:2.2rem}
section[id^="cmp-"] .hm-btn{height:40px;min-height:40px;padding:0 1.1rem;border-color:var(--hm-text);background:var(--hm-text);color:var(--hm-bg);font-size:15px;font-weight:450}
section[id^="cmp-"] .hm-btn:hover{filter:none;opacity:.88}
section[id^="cmp-"] .hm-btn--secondary{border-color:var(--hd-hair2);background:var(--hd-card);color:var(--hm-text)}
section[id^="cmp-"] .hdv-plug h2,section[id^="cmp-"] #compare h2{margin:0;color:var(--hm-text);max-width:24ch;font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:450;line-height:1.1;letter-spacing:-.055em}
section[id^="cmp-"] .hdv-lede{margin:1rem 0 0;max-width:40rem;color:var(--hd-hai)}
section[id^="cmp-"] .hm-process__heading{max-width:24ch;font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:450;line-height:1.1;letter-spacing:-.055em}
section[id^="cmp-"] .hm-process__subheading{color:var(--hm-hai)}
section[id^="cmp-"] .hm-process--cards .hm-process__steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin:2rem 0 0;padding:0;list-style:none}
section[id^="cmp-"] .hm-process--cards .hm-process__step{display:grid;gap:.6rem;align-content:start;padding:1.5rem;border:1px solid var(--hm-hair);border-radius:var(--hm-radius-lg);background:var(--hm-bg)}
section[id^="cmp-"] .hm-process__marker{font:400 .75rem/1 var(--hm-font-mono);color:var(--hd-shu-text)}
section[id^="cmp-"] .hm-process__title{margin:0;font-size:1.0625rem;font-weight:500}
section[id^="cmp-"] .hm-process__description{font-size:.9375rem;color:var(--hm-hai)}
section[id^="cmp-"] .hm-process__description a{color:var(--hm-text);text-decoration:underline;text-underline-offset:3px}
section[id^="cmp-"] .hm-faq{max-width:52rem}
section[id^="cmp-"] .hm-faq__heading{font-size:clamp(1.75rem,3.4vw,2.25rem);font-weight:450;letter-spacing:-.055em}
section[id^="cmp-"] .hm-faq__item{border-bottom:1px solid var(--hm-hair)}
section[id^="cmp-"] .hm-faq__question{padding:1rem 0;cursor:pointer;font-size:1.0625rem;font-weight:450}
section[id^="cmp-"] .hm-faq__answer{padding:0 0 1.25rem;color:var(--hm-hai)}
section[id^="cmp-"][id$="-cta"]{padding-block:6rem}
section[id^="cmp-"] .hm-cta{position:relative;width:min(1168px,calc(100% - 3rem));max-width:none;margin-inline:auto;overflow:hidden;padding:5rem 2rem 4.5rem;border:1px solid var(--hd-hair2);border-radius:28px;background:var(--hd-card);text-align:center}
section[id^="cmp-"] .hm-cta>*{position:relative}
section[id^="cmp-"] .hm-cta::after{content:"";position:absolute;left:50%;bottom:-430px;width:520px;height:520px;border-radius:50%;background:#c23b22;opacity:.95;transform:translateX(-50%);z-index:0}
section[id^="cmp-"] .hm-cta__headline{max-width:none;margin-inline:auto;font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:450;letter-spacing:-.055em;line-height:1.15}
section[id^="cmp-"] .hm-cta__subheadline{max-width:36rem;margin:1.4rem auto 0;font-size:1.2rem;line-height:1.75;color:var(--hd-ink2)}
section[id^="cmp-"] .hm-cta__actions{margin:2rem 0 3rem}
section[id^="cmp-"] a:focus-visible,section[id^="cmp-"] summary:focus-visible,section[id^="cmp-"] .hm-btn:focus-visible{outline:2px solid var(--hm-focus);outline-offset:2px}
/* Layout like the mockup: on the vs pages the hero and the score card sit side by side (a grid on <main>, only when the hero section exists). */
:root{--hdv-plus:linear-gradient(var(--hm-text),var(--hm-text));--hdv-plus-pos:left 6px top 0,left 0 top 6px,right 6px top 0,right 0 top 6px,left 6px bottom 0,left 0 bottom 6px,right 6px bottom 0,right 0 bottom 6px;--hdv-plus-size:1px 13px,13px 1px,1px 13px,13px 1px,1px 13px,13px 1px,1px 13px,13px 1px}
main:has(>#cmp-hero){--hdv-pad:max(1.5rem,calc((100% - 1168px)/2));display:grid;grid-template-columns:var(--hdv-pad) minmax(0,1fr) 4rem minmax(0,1fr) var(--hdv-pad);align-items:start}
main:has(>#cmp-hero)>*{grid-column:1/-1}
main:has(>#cmp-hero)>.hdb-crumb--page{grid-column:2/5;max-width:none;margin:0 0 1.8rem;padding:4.5rem 0 0}
main:has(>#cmp-hero)>#cmp-hero{grid-column:2/3;grid-row:2;padding:0 0 3.5rem}
main:has(>#cmp-hero)>#cmp-score{grid-column:4/5;grid-row:2;align-self:center;padding:0 0 3.5rem}
#cmp-hero .hm-container,#cmp-score .hm-container{max-width:none;padding-inline:0}
main:has(>#cmp-hero)>#cmp-arch{padding-block:2rem}
@media (max-width:66.25rem){
main:has(>#cmp-hero)>.hdb-crumb--page,main:has(>#cmp-hero)>#cmp-hero,main:has(>#cmp-hero)>#cmp-score{grid-column:2/5}
main:has(>#cmp-hero)>#cmp-hero{padding-bottom:2.5rem}
main:has(>#cmp-hero)>#cmp-score{grid-row:3;padding-bottom:3rem}
}
section[id^="cmp-"] .hm-hero__eyebrow,section[id^="cmp-"] .hdv-eyebrow,section[id^="cmp-"] .hm-process__eyebrow{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1rem;font:400 12px/1.4 var(--hm-font-mono);letter-spacing:.04em;text-transform:none;color:var(--hd-label)}
section[id^="cmp-"] .hm-hero__eyebrow::before,section[id^="cmp-"] .hdv-eyebrow::before,section[id^="cmp-"] .hm-process__eyebrow::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--hm-shu)}
/* Score card: heading row, three ruled cells, proportion bar (added by vs.js from the real numbers), note below. Plus markers at the corners. */
#cmp-score .hm-stats{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
#cmp-score .hm-stats__header{display:contents}
#cmp-score .hm-stats::before{content:"";grid-area:1/1/4/2;border:1px solid var(--hd-hair2);background:var(--hd-card)}
#cmp-score .hm-stats::after,section[id^="cmp-"] .hm-features--cards .hm-features__list::after{content:"";pointer-events:none;background-image:var(--hdv-plus),var(--hdv-plus),var(--hdv-plus),var(--hdv-plus),var(--hdv-plus),var(--hdv-plus),var(--hdv-plus),var(--hdv-plus);background-position:var(--hdv-plus-pos);background-size:var(--hdv-plus-size);background-repeat:no-repeat}
#cmp-score .hm-stats::after{grid-area:1/1/4/2;margin:-7px;justify-self:stretch;align-self:stretch;z-index:2}
#cmp-score .hm-stats__heading{grid-column:1;grid-row:1;position:relative;z-index:1;margin:0;padding:.85rem 1.5rem;border-bottom:1px solid var(--hd-hair2);font:400 12px/1.4 var(--hm-font-mono);letter-spacing:.04em;text-transform:none;color:var(--hd-label)}
#cmp-score .hm-stats__subheading{grid-column:1;grid-row:4;margin:.8rem 0 0;font-size:13px;line-height:1.6;color:var(--hd-hai)}
#cmp-score .hm-stats__list{grid-column:1;grid-row:2;position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
#cmp-score .hm-stats:has(.hdv-bar3) .hm-stats__list{border-bottom:1px solid var(--hd-hair2)}
#cmp-score .hm-stats__item{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin:0;padding:1.8rem 1.5rem;border:0;border-right:1px solid var(--hd-hair2);border-radius:0;background:none;box-shadow:none}
#cmp-score .hm-stats__item:last-child{border-right:0}
#cmp-score .hm-stats__value{display:contents}
#cmp-score .hm-stats__number{order:1;font-size:clamp(2.5rem,5vw,3.6rem);font-weight:400;line-height:1;letter-spacing:-.06em;color:var(--hm-text)}
#cmp-score .hm-stats__label{order:2;margin:.8rem 0 0;font-size:14.5px;font-weight:400;line-height:1.6;letter-spacing:0;text-transform:none;color:var(--hm-text)}
#cmp-score .hm-stats__description{order:3;display:block;margin:.3rem 0 0;font-size:13px;line-height:1.6;color:var(--hd-hai)}
#cmp-score .hm-stats__item:first-child .hm-stats__number{color:var(--hd-shu-text)}
#cmp-score .hm-stats__item:last-child .hm-stats__number{color:var(--hd-label)}
#cmp-score .hdv-bar3{grid-column:1;grid-row:3;position:relative;z-index:1;display:flex;gap:3px;height:10px;margin:0}
#cmp-score .hdv-bar3 i{display:block;height:100%;background:var(--hm-sumi)}
#cmp-score .hdv-bar3 i:first-child{background:var(--hm-shu)}
#cmp-score .hdv-bar3 i:nth-child(2){background:var(--hm-kinu)}
/* Architecture diagram: dotted frame, two columns split by a hairline, tiles like the mockup, the sun behind the Hatamoto card. */
#cmp-arch .hdv-archwrap{position:relative;padding-top:0}
#cmp-arch .hdv-archwrap>.hdv-eyebrow{display:flex;justify-content:center;margin-bottom:.7rem}
#cmp-arch .hdv-archwrap>h2{max-width:none;color:var(--hm-text);margin:0;text-align:center;font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:450;line-height:1.15;letter-spacing:-.055em}
#cmp-arch .hdv-arch{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;column-gap:17.4%;margin:3rem 0 2rem;padding:2rem 3.8% 2rem;border:1px solid var(--hd-hair2);border-radius:var(--hd-r-lg);background:#fdfdfc radial-gradient(#e6e6e2 1px,transparent 1px) 0 0/22px 22px}
:root[data-theme="dark"] #cmp-arch .hdv-arch{background:var(--hm-bg) radial-gradient(var(--hm-kinu) 1px,transparent 1px) 0 0/22px 22px}
#cmp-arch .hdv-arch::before{content:"";position:absolute;left:50%;top:2.35rem;bottom:2.35rem;width:1px;background:var(--hd-hair2)}
#cmp-arch .hdv-arch__col{position:relative;display:flex;flex-direction:column;padding:1.4rem 0 .4rem;border:0;border-radius:0;background:none}
#cmp-arch .hdv-arch__col h3{order:0;margin:0 0 1.5rem;font:400 11.6px/1.4 var(--hm-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--hd-label)}
#cmp-arch .hdv-arch__list{display:flex;flex-direction:column;gap:6.6px;margin:0;padding:0;list-style:none}
#cmp-arch .hdv-arch__list li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:0;padding:.5rem 1rem;border:1px solid #cfcfca;border-radius:9px;background:var(--hd-card);font:400 13.8px/1.5 var(--hm-font-mono);color:var(--hm-text)}
:root[data-theme="dark"] #cmp-arch .hdv-arch__list li{border-color:var(--hm-kinu)}
#cmp-arch .hdv-arch__list li strong{flex:none;font-weight:400}
#cmp-arch .hdv-arch__list li span{font-size:12.1px;text-align:right;color:var(--hd-label)}
#cmp-arch .hdv-arch__col--was .hdv-arch__list li:nth-child(5){border-style:dashed;border-color:var(--hm-shu)}
#cmp-arch .hdv-arch__col p{order:3;margin:auto 0 0;padding-top:1.5rem;font:400 12.1px/1.4 var(--hm-font-mono);color:var(--hd-label)}
#cmp-arch .hdv-arch__col--now .hdv-arch__list{position:relative}
#cmp-arch .hdv-arch__col--now .hdv-arch__list li{background:var(--hd-card);position:relative}
#cmp-arch .hdv-arch__col--now .hdv-arch__list li:first-child{display:block;padding:1.4rem 1.4rem 1.6rem;border:1.25px solid var(--hm-sumi);border-radius:16px;font:400 13px/1.7 var(--hm-font);color:var(--hd-hai)}
#cmp-arch .hdv-arch__col--now .hdv-arch__list li:first-child::after{content:"";position:absolute;z-index:-1;right:-22px;bottom:-26px;width:88px;height:88px;border-radius:50%;background:#c23b22}
#cmp-arch .hdv-arch__col--now .hdv-arch__list li:last-child{z-index:1}
/* Six differences: one ruled 3x2 grid of white cells with plus markers. */
#cmp-keys .hm-features__header{margin-bottom:2.2rem}
#cmp-keys .hm-features__heading{max-width:24ch;margin:0;font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:450;line-height:1.15;letter-spacing:-.055em}
#cmp-keys .hm-features__list{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--hd-hair2);border-left:1px solid var(--hd-hair2);background:var(--hd-card)}
#cmp-keys .hm-features__list::after{position:absolute;inset:-7px}
#cmp-keys .hm-features__item{position:relative;display:flex;flex-direction:column;min-height:250px;padding:2.2rem 2rem 2rem;border:0;border-right:1px solid var(--hd-hair2);border-bottom:1px solid var(--hd-hair2);border-radius:0;background:none;box-shadow:none}
#cmp-keys .hm-features__item:hover{border-color:var(--hd-hair2)}
#cmp-keys .hm-features__number{margin-bottom:1.3rem;font:400 12px/1.6 var(--hm-font-mono);letter-spacing:.04em;color:var(--hd-label)}
#cmp-keys .hm-features__title{margin:0;font-size:1.25rem;font-weight:450;line-height:1.4;letter-spacing:-.035em}
#cmp-keys .hm-features__description{margin:.55rem 0 0;font-size:15px;line-height:1.6;color:var(--hd-hai)}
#cmp-keys .hm-features__link{margin-top:auto;padding:1.3rem 0 0 calc(6px + .55rem);background:radial-gradient(circle,var(--hm-shu) 3px,transparent 3.5px) 0 calc(100% - .55em)/6px 6px no-repeat;font:400 12.5px/1.6 var(--hm-font-mono);color:var(--hd-ink2);text-decoration:none}
#cmp-keys .hm-features__link::before{content:"";position:absolute;inset:0}
#cmp-keys .hm-features__link::after{content:" →";position:static;inset:auto}
#cmp-keys .hm-features__item:has(.hm-features__link:focus-visible){outline:2px solid var(--hm-focus);outline-offset:2px}
@media (max-width:63.99rem){
#cmp-keys .hm-features__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:47.99rem){
#cmp-keys .hm-features__list{grid-template-columns:minmax(0,1fr)}
#cmp-arch .hdv-arch{grid-template-columns:1fr;row-gap:0;padding:1rem}
#cmp-arch .hdv-arch::before{display:none}
#cmp-score .hm-stats__list{grid-template-columns:minmax(0,1fr)}
#cmp-score .hm-stats__item{border-right:0;border-bottom:1px solid var(--hd-hair2)}
#cmp-score .hm-stats__item:last-child{border-bottom:0}
}
@media (max-width:47.99rem){
section[id^="cmp-"] .hm-cta{padding:3.5rem 1.25rem 3rem}
section[id^="cmp-"][id$="-cta"]{padding-block:4rem}
}
/* Line-by-line comparison: one card per group (the table stays a real table in the markup, its row groups are laid out as cards). */
#compare{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:2rem;align-items:end}
#compare>*{grid-column:1/-1}
#compare .hdv-lede{margin-top:.5rem;color:var(--hd-hai)}
#compare>.hdv-eyebrow{margin-bottom:.6rem}
#compare>.hdv-eyebrow,#compare>h2,#compare>.hdv-lede{grid-column:1}
#compare>.hdv-filter{grid-column:2;grid-row:1/4;margin-bottom:.2rem}
.hdv-filter{display:flex;gap:.3rem;padding:4px;border:1px solid var(--hd-hair2);border-radius:999px;background:var(--hd-card)}
.hdv-filter button{white-space:nowrap;border:0;border-radius:999px;background:none;padding:.4rem .85rem;font:inherit;font-size:13.5px;line-height:1.5;color:var(--hd-hai);cursor:pointer}
.hdv-filter button[aria-pressed="true"]{background:var(--hm-sumi);color:var(--hm-bg)}
.hdv-filter button:focus-visible{outline:2px solid var(--hm-focus);outline-offset:2px}
section[id^="cmp-"] [hidden]{display:none!important}
section[id^="cmp-"] .hdv-table{display:block;width:100%;margin-top:2.2rem;border:0;background:none;font-size:14.5px;line-height:1.6;overflow:visible}
section[id^="cmp-"] .hdv-table caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section[id^="cmp-"] .hdv-table thead,section[id^="cmp-"] .hdv-table tbody,section[id^="cmp-"] .hdv-table tr{display:block}
section[id^="cmp-"] .hdv-table tr{display:grid;grid-template-columns:1.1fr 1.5fr 1.5fr 110px;gap:1.2rem;align-items:baseline}
section[id^="cmp-"] .hdv-table th,section[id^="cmp-"] .hdv-table td{padding:0;border:0;text-align:left;font-weight:400;color:var(--hd-ink2)}
section[id^="cmp-"] .hdv-table thead tr{margin-bottom:.4rem;padding:.55rem 1.4rem}
section[id^="cmp-"] .hdv-table thead th{font:400 11.5px/1.4 var(--hm-font-mono);letter-spacing:0;color:var(--hd-label)}
section[id^="cmp-"] .hdv-table tbody{margin-top:1rem;border:1px solid var(--hd-hair);border-radius:var(--hd-r-lg);background:var(--hd-card);box-shadow:var(--hd-shadow);overflow:hidden}
section[id^="cmp-"] .hdv-table tbody:first-of-type{margin-top:0}
section[id^="cmp-"] .hdv-table tbody tr{padding:.85rem 1.4rem;border-bottom:1px solid var(--hd-hair)}
section[id^="cmp-"] .hdv-table tbody tr:last-child{border-bottom:0}
section[id^="cmp-"] .hdv-table tbody th[scope="row"]{font-weight:450;color:var(--hm-text)}
section[id^="cmp-"] .hdv-table .hdv-group{display:block;padding:0}
section[id^="cmp-"] .hdv-table .hdv-group th{display:flex;align-items:center;gap:.3rem;padding:1.1rem 1.4rem;font-size:1.1rem;font-weight:450;line-height:1.4;letter-spacing:-.025em;color:var(--hm-text)}
section[id^="cmp-"] .hdv-table .hdv-group .hdv-n:first-of-type{margin-left:auto}
section[id^="cmp-"] .hdv-n{white-space:nowrap;padding:2px 6px;border-radius:6px;font:400 11.5px/1.5 var(--hm-font-mono);letter-spacing:0;background:var(--hm-kasumi);color:var(--hd-hai)}
section[id^="cmp-"] .hdv-n--h,section[id^="cmp-"] .hdv-v--h{background:var(--hd-ik);color:var(--hd-shu-text)}
section[id^="cmp-"] .hdv-n--w,section[id^="cmp-"] .hdv-v--w{background:var(--hm-sumi);color:var(--hm-bg)}
section[id^="cmp-"] .hdv-v{display:inline-block;padding:3px 9px;border-radius:999px;font:400 11.5px/1.5 var(--hm-font-mono);white-space:nowrap}
section[id^="cmp-"] .hdv-v--e{background:var(--hm-kasumi);color:var(--hd-hai)}
section[id^="cmp-"] .hdv-note{margin:1.4rem 0 0;font-size:13px;color:var(--hd-hai)}
section[id^="cmp-"] .hdv-note a{color:var(--hm-text);text-decoration:underline;text-underline-offset:3px}
/* Plugins table: ruled grid with plus markers. */
section[id^="cmp-"] .hdv-table--plug{position:relative;margin-top:2.5rem;border-top:1px solid var(--hd-hair2);border-left:1px solid var(--hd-hair2);background:var(--hd-card);font-size:15px}
section[id^="cmp-"] .hdv-table--plug::after{content:"";position:absolute;inset:-7px;pointer-events:none;background-image:var(--hdv-plus),var(--hdv-plus),var(--hdv-plus),var(--hdv-plus),var(--hdv-plus),var(--hdv-plus),var(--hdv-plus),var(--hdv-plus);background-position:var(--hdv-plus-pos);background-size:var(--hdv-plus-size);background-repeat:no-repeat}
section[id^="cmp-"] .hdv-table--plug thead tr,section[id^="cmp-"] .hdv-table--plug tbody tr{grid-template-columns:180px 1fr 1fr;gap:1.5rem;align-items:center;margin:0;padding:.95rem 1.6rem;border-right:1px solid var(--hd-hair2);border-bottom:1px solid var(--hd-hair2)}
section[id^="cmp-"] .hdv-table--plug thead tr{background:var(--hm-bg)}
section[id^="cmp-"] .hdv-table--plug thead th{font-size:12px}
section[id^="cmp-"] .hdv-table--plug tbody{margin:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
section[id^="cmp-"] .hdv-table--plug tbody tr:last-child{border-bottom:1px solid var(--hd-hair2)}
section[id^="cmp-"] .hdv-table--plug .hdv-was{color:var(--hd-hai);text-decoration:line-through;text-decoration-color:#a9a9a4;text-decoration-thickness:1px}
section[id^="cmp-"] .hdv-table--plug .hdv-now{color:var(--hd-ink2)}
section[id^="cmp-"] .hdv-table--plug .hdv-now::before{content:"";display:inline-block;width:7px;height:7px;margin-right:.65rem;border-radius:50%;background:var(--hm-shu);vertical-align:middle}
/* "When WordPress is the better choice" card. */
section[id^="cmp-"] .hdv-honest{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:3rem;padding:2.6rem;border:1px solid var(--hd-hair2);border-radius:var(--hd-r-lg);background:var(--hd-card);box-shadow:var(--hd-shadow);overflow:hidden}
section[id^="cmp-"] .hdv-honest::after{content:"";position:absolute;right:-60px;top:-60px;width:160px;height:160px;border-radius:50%;background:var(--hm-shu);opacity:.9;pointer-events:none}
section[id^="cmp-"] .hdv-honest h2{margin:0;color:var(--hm-text);font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:450;line-height:1.15;letter-spacing:-.055em}
section[id^="cmp-"] .hdv-honest p:not(.hdv-eyebrow){max-width:36rem;margin:1.4rem 0 0;font-size:1.05rem;line-height:1.75;color:var(--hd-ink2)}
section[id^="cmp-"] .hdv-honest ul{position:relative;z-index:1;align-self:center;display:block;margin:0;padding:0 2.5rem 0 0;list-style:none}
section[id^="cmp-"] .hdv-honest li{position:static;display:flex;gap:.8rem;padding:.85rem 0;border-bottom:1px solid var(--hd-hair);font-size:15px;color:var(--hd-ink2)}
section[id^="cmp-"] .hdv-honest li::before{content:"\2192";position:static;width:auto;height:auto;border-radius:0;background:none;font-family:var(--hm-font-mono);color:var(--hd-label)}
/* Other comparisons: the shared white cards. */
#cmp-more .hm-features__header{margin-bottom:2.2rem}
#cmp-more .hm-features__heading{max-width:none;margin:0;font-size:clamp(1.9rem,3.2vw,2.5rem);font-weight:450;line-height:1.15;letter-spacing:-.055em}
#cmp-more .hm-features__list{border:0;background:none;overflow:visible;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:0;padding:0;list-style:none}
#cmp-more .hm-features__item{position:relative;display:flex;flex-direction:column;padding:1.6rem;border:1px solid var(--hd-hair);border-radius:var(--hd-r-lg);background:var(--hd-card);box-shadow:var(--hd-shadow)}
#cmp-more .hm-features__item:hover{border-color:var(--hd-hair2)}
#cmp-more .hm-features__title{margin:0;font-size:1.05rem;font-weight:500;line-height:1.4;letter-spacing:-.01em}
#cmp-more .hm-features__description{margin:.5rem 0 0;font-size:15px;line-height:1.6;color:var(--hd-hai)}
#cmp-more .hm-features__link{margin-top:auto;padding-top:1.1rem;font:400 12.5px/1.5 var(--hm-font-mono);color:var(--hd-shu-text);text-decoration:none}
#cmp-more .hm-features__link::after{content:"";position:absolute;inset:0;border-radius:var(--hd-r-lg)}
#cmp-more .hm-features__link:focus-visible{outline:none}
#cmp-more .hm-features__item:has(.hm-features__link:focus-visible){outline:2px solid var(--hm-focus);outline-offset:2px}
@media (max-width:63.99rem){#cmp-more .hm-features__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:47.99rem){
#cmp-more .hm-features__list{grid-template-columns:minmax(0,1fr)}
section[id^="cmp-"] .hdv-honest{grid-template-columns:1fr;gap:1.5rem;padding:1.75rem}
#compare>.hdv-filter{grid-column:1;grid-row:auto;justify-self:start;flex-wrap:wrap;margin-top:1.4rem;max-width:100%;border-radius:22px}
section[id^="cmp-"] .hdv-table--plug thead tr,section[id^="cmp-"] .hdv-table--plug tbody tr{grid-template-columns:1fr;gap:.2rem}
}
@media (max-width:40rem){
section[id^="cmp-"] .hdv-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
section[id^="cmp-"] .hdv-table tbody tr:not(.hdv-group){grid-template-columns:1fr;gap:.2rem}
section[id^="cmp-"] .hdv-table tbody tr:not(.hdv-group) td:nth-of-type(1)::before{content:"Hatamoto: ";font-weight:450;color:var(--hm-text)}
section[id^="cmp-"] .hdv-table tbody tr:not(.hdv-group) td:nth-of-type(2)::before{content:"Other: ";font-weight:450;color:var(--hm-text)}
section[id^="cmp-"] .hdv-table tbody tr:not(.hdv-group) td:nth-of-type(3){padding-top:.5rem}
section[id^="cmp-"] .hdv-table--plug tbody tr td:nth-of-type(1)::before,section[id^="cmp-"] .hdv-table--plug tbody tr td:nth-of-type(2)::before{content:""}
section[id^="cmp-"] .hdv-honest li{padding-inline:0}
section[id^="cmp-"] .hdv-table .hdv-group th{flex-wrap:wrap;padding-inline:1.1rem}
section[id^="cmp-"] .hdv-table .hdv-group .hdv-n:first-of-type{margin-left:0}
section[id^="cmp-"] .hdv-table tbody tr:not(.hdv-group){padding-inline:1.1rem}
}
@media (prefers-reduced-motion:reduce){section[id^="cmp-"] *{transition:none!important}}

.hm-card-columns__grid { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); background: var(--hm-hair); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); overflow: hidden; }
@media (min-width: 64rem) {
  .hm-card-columns--cols-2 .hm-card-columns__grid { grid-template-columns: repeat(2, 1fr); }
  .hm-card-columns--cols-3 .hm-card-columns__grid { grid-template-columns: repeat(3, 1fr); }
  .hm-card-columns--cols-4 .hm-card-columns__grid { grid-template-columns: repeat(4, 1fr); }
}
.hm-card-columns__col { background: var(--hm-bg); padding: 2rem 1.75rem; }
.hm-card-columns__label { margin: 0 0 0.75rem; font-family: var(--hm-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-card-columns__title { margin: 0 0 0.5rem; font-size: 1.25rem; }
.hm-card-columns__description { margin: 0 0 1.25rem; color: var(--ht-fg-muted); }
.hm-card-columns__items { list-style: none; margin: 0; padding: 0; font-family: var(--hm-font-mono); font-size: 0.8125rem; }
.hm-card-columns__items li { padding: 0.5rem 0; border-top: 1px dashed var(--hm-hair); color: var(--hm-text); }
.hm-card-columns__notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem; margin-top: 1.5rem; padding: 1.5rem; background: var(--hm-shiro); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); }
.hm-card-columns__note-title { margin: 0 0 0.25rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; }
.hm-card-columns__note-text { margin: 0; font-size: 0.875rem; color: var(--ht-fg-muted); }

/* client_logos renders with the shared .hm-logo-strip styles (see logo_strip.css). */

.hm-comparison__sides { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); background: var(--hm-hair); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); overflow: hidden; }
.hm-comparison__side { background: var(--hm-bg); padding: 2rem 1.75rem; }
.hm-comparison__side--positive { background: var(--hm-shiro); }
.hm-comparison__tag { margin: 0 0 0.75rem; font-family: var(--hm-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-comparison__side--positive .hm-comparison__tag { color: var(--hm-shu); }
.hm-comparison__title { margin: 0 0 1.25rem; font-size: 1.375rem; }
.hm-comparison__items { list-style: none; margin: 0; padding: 0; }
.hm-comparison__items li { position: relative; padding: 0.625rem 0 0.625rem 1.75rem; border-top: 1px solid var(--hm-hair); }
/* Glyphs are pseudo-elements so the canvas editor never edits them. */
.hm-comparison__items li::before { position: absolute; left: 0; top: 0.625rem; font-family: var(--hm-font-mono); }
.hm-comparison__side--negative .hm-comparison__items li { color: var(--hm-hai); text-decoration: line-through; }
.hm-comparison__side--negative .hm-comparison__items li::before { content: "\00d7"; color: var(--hm-label); }
.hm-comparison__side--positive .hm-comparison__items li::before { content: "\2713"; color: var(--hm-shu); }

.hm-contact-form { max-width: 40rem; }
.hm-contact-form--split { max-width: var(--hm-container); display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.hm-contact-form__subheading { color: var(--ht-fg-muted); }
.hm-form { display: grid; gap: 1rem; }
.hm-form__field { display: grid; gap: 0.35rem; }
.hm-form__label, .hm-form__group legend { font-weight: 600; }
.hm-form input[type="text"], .hm-form input[type="email"], .hm-form input[type="tel"], .hm-form textarea, .hm-form select {
  width: 100%; padding: 0.6rem 0.75rem; font: inherit; color: inherit; background: var(--hm-bg);
  border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md);
}
.hm-form__group { border: 0; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.hm-form__check { display: flex; gap: 0.5rem; align-items: baseline; }
.hm-form__help { color: var(--ht-fg-muted); }
.hm-form__submit { justify-self: start; cursor: pointer; font: inherit; font-size: 0.875rem; font-weight: 500; }
.hm-form__captcha { min-height: 1px; }
.hm-form__error { padding: 0.75rem 1rem; border-radius: var(--hm-radius-md); border: 1px solid var(--ht-line); }
.hm-form__success { padding: 0.75rem 1rem; border-radius: var(--hm-radius-md); background: var(--ht-surface-2); border: 1px solid var(--ht-line); }
/* Honeypot: off-screen, not display:none, so naive bots still fill it. */
.hm-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 48rem) { .hm-contact-form--split { grid-template-columns: 1fr; } }

.hm-contact-info__heading { margin-bottom: 1.5rem; }
.hm-contact-info__body { display: grid; gap: 1.5rem; }
.hm-contact-info__address { font-style: normal; }
.hm-contact-info__line { display: block; }
.hm-contact-info__channels { list-style: none; margin: 0; padding: 0; }
.hm-contact-info__hours { margin: 0; }
.hm-contact-info__hours-row { display: flex; gap: 1rem; justify-content: space-between; max-width: 20rem; padding: 0.2rem 0; border-bottom: 1px solid var(--ht-line); }
.hm-contact-info__hours dt { font-weight: 600; }
.hm-contact-info__hours dd { margin: 0; color: var(--ht-fg-muted); }
.hm-contact-info__map { margin-top: 1.5rem; }
.hm-contact-info__map iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--hm-radius-md); }
@media (min-width: 48rem) {
  .hm-contact-info--inline .hm-contact-info__body { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}
.hm-contact-info--card .hm-contact-info__body { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.75rem; background: var(--ht-surface); }

/* .hm-prose is the shared rich-text flow styling (content, overview). */
.hm-prose > :last-child { margin-bottom: 0; }
.hm-prose img { border-radius: var(--hm-radius-md); }
.hm-prose ul, .hm-prose ol { padding-left: 1.4rem; margin: 0 0 1em; }
.hm-prose blockquote { margin: 0 0 1em; padding-left: 1rem; border-left: 3px solid var(--ht-line); color: var(--ht-fg-muted); }
.hm-content { max-width: 48rem; }
.hm-content__headline { margin-bottom: 0.75em; }

/* essay: sticky aside + long-form prose column. */
.hm-content--essay { max-width: var(--hm-container); display: grid; grid-template-columns: 16rem minmax(0, 44rem); gap: 3rem 5rem; align-items: start; }
.hm-content--essay .hm-content__aside { position: sticky; top: 6rem; }
.hm-content__glyph { display: block; font-family: var(--hm-font-kanji); font-size: 3.5rem; line-height: 1; color: var(--hm-shu); margin-bottom: 1rem; }
.hm-content__aside-text { margin: 0; font-family: var(--hm-font-mono); font-size: 0.8125rem; line-height: 1.6; color: var(--hm-hai); }
.hm-content__eyebrow { margin: 0 0 1rem; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-content--essay .hm-prose { font-size: 1.0625rem; line-height: 1.7; }
.hm-content--essay .hm-prose h3 { margin: 2em 0 0.5em; font-size: 1.25rem; }
.hm-content--essay .hm-prose code { padding: 0.1em 0.35em; border-radius: var(--hm-radius-sm); background: var(--hm-kasumi); font-size: 0.9em; }
@media (max-width: 960px) {
  .hm-content--essay { grid-template-columns: minmax(0, 1fr); }
  .hm-content--essay .hm-content__aside { display: none; }
}

.hm-cta { text-align: center; padding-top: 1rem; padding-bottom: 1rem; }
.hm-cta__headline { max-width: 20ch; margin-inline: auto; }
.hm-cta__subheadline { max-width: 52ch; margin: 1rem auto 0; font-size: 1.0625rem; color: var(--hm-hai); }
.hm-cta__actions { margin: 1.25rem 0 0; }
.hm-cta--tinted { background: var(--ht-surface-2); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); padding: 3.5rem 1.5rem; }
.hm-cta--dark { background: var(--hm-sumi); color: #fff; border-radius: var(--hm-radius-lg); padding: 3.5rem 1.5rem; }
.hm-cta--dark h2 { color: #fff; }
.hm-cta--dark .hm-cta__subheadline { color: rgba(255, 255, 255, 0.8); }

.hm-faq { max-width: 48rem; }
.hm-faq__subheading { color: var(--ht-fg-muted); }
.hm-faq__item { border-bottom: 1px solid var(--ht-line); padding: 0.9rem 0; }
.hm-faq__question { cursor: pointer; font-weight: 500; }
.hm-faq__answer { margin-top: 0.6rem; color: var(--ht-fg-muted); }
.hm-faq--cards .hm-faq__list { display: grid; gap: 0.75rem; }
.hm-faq--cards .hm-faq__item { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); padding: 0.9rem 1.1rem; }

.hm-features__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-features__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-features__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--hm-hair); border: 1px solid var(--hm-hair); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.hm-features--cols-2 .hm-features__list { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
@media (min-width: 48rem) {
  .hm-features--cols-2 .hm-features__list { grid-template-columns: repeat(2, 1fr); }
  .hm-features--cols-3 .hm-features__list { grid-template-columns: repeat(3, 1fr); }
  .hm-features--cols-4 .hm-features__list { grid-template-columns: repeat(4, 1fr); }
}
.hm-features__item { background: var(--hm-bg); padding: 1.75rem 1.75rem 2rem; }
.hm-features__item:hover { background: var(--hm-shiro); }
.hm-features__icon { display: inline-block; font-size: 1.75rem; line-height: 1; margin-bottom: 0.75rem; }
.hm-features__title { margin-bottom: 0.35em; }
.hm-features__description { color: var(--ht-fg-muted); margin-bottom: 0.75em; }
.hm-features__link { font-weight: 600; }

.hm-features--centered .hm-features__header, .hm-features--centered .hm-features__item { text-align: center; }
.hm-features--centered .hm-features__header { margin-left: auto; margin-right: auto; }

/* bento: framed cells with number, category, description and a tag footer. */
.hm-features--bento .hm-features__list { border-radius: var(--hm-radius-lg); overflow: hidden; }
.hm-features--bento .hm-features__item { min-height: 236px; display: flex; flex-direction: column; gap: 0.5rem; position: relative; }
.hm-features--bento .hm-features__number { font-family: var(--hm-font-mono); font-size: 0.75rem; color: var(--hm-label); }
.hm-features--bento .hm-features__category { font-family: var(--hm-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-features--bento .hm-features__badge { position: absolute; top: 1.25rem; right: 1.25rem; padding: 0.15rem 0.6rem; border-radius: 999px; border: 1px solid var(--hm-hair); background: var(--hm-kasumi); font-family: var(--hm-font-mono); font-size: 0.6875rem; color: var(--hm-hai); }
.hm-features__tags { margin-top: auto; padding-top: 1rem; font-family: var(--hm-font-mono); font-size: 0.75rem; color: var(--hm-hai); }

/* hero — also defines .hm-btn--secondary, reused by other sections. */
.hm-btn--secondary { background: var(--hm-bg); color: var(--hm-text); border-color: var(--hm-hair); }
.hm-btn--secondary:hover { border-color: var(--hm-text); filter: none; }
.hm-hero { display: grid; gap: 3.5rem; align-items: center; }
.hm-section--hero { padding-block: clamp(3.5rem, 7vw, 6rem); border-top: 0; }
.hm-hero__headline { max-width: 16ch; margin: 0; }
.hm-hero--centered { text-align: center; justify-items: center; }
.hm-hero--centered .hm-hero__body { max-width: 48rem; }
.hm-hero--centered .hm-hero__headline { margin-inline: auto; }
.hm-hero--split { grid-template-columns: 1fr 1fr; }
.hm-hero__eyebrow { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); margin-bottom: 1rem; }
.hm-hero__subheadline { max-width: 68ch; margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.6; color: var(--hm-hai); }
.hm-hero--centered .hm-hero__subheadline { margin-inline: auto; }
.hm-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; align-items: center; }
.hm-hero--centered .hm-hero__actions { justify-content: center; }
.hm-hero__image { display: block; width: 100%; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); }
@media (max-width: 48rem) { .hm-hero--split { grid-template-columns: 1fr; } }

.hm-hero__chip { display: inline-block; margin-top: 1.25rem; padding: 0.4rem 0.75rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-sm); background: var(--hm-kasumi); font-size: 0.8125rem; color: var(--hm-sumi-soft); }
.hm-hero__media--panel { min-width: 0; text-align: left; }

/* optional strip (stripLabel + stripItems): label on its own row, items wrapping under it. */
.hm-hero__strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; margin-top: 2rem; }
.hm-hero--centered .hm-hero__strip { justify-content: center; }
.hm-hero__strip-label { flex: 0 0 100%; font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-hero__strip-items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.hm-hero--centered .hm-hero__strip-items { justify-content: center; }
.hm-hero__strip-items li { font-size: 0.9375rem; color: var(--hm-text); }

.hm-html-body { overflow-wrap: anywhere; }
.hm-html-body > :last-child { margin-bottom: 0; }
.hm-html-body details { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); padding: 0.75rem 1rem; margin: 0 0 0.75rem; }
.hm-html-body summary { cursor: pointer; font-weight: 600; }
/* Bespoke html blocks that bring their own full-width section chrome: avoid doubling the band padding and rule. */
.hm-section--html:has(> .hm-container > .hm-html-body > section:only-child) { padding-block: 0; border-top: 0; }
.hm-section--html:has(> .hm-container > .hm-html-body > section:only-child) > .hm-container { max-width: none; padding: 0; }

.hm-link-directory__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-link-directory__eyebrow { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); margin-bottom: 1rem; }
.hm-link-directory__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-link-directory__columns { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.hm-link-directory__column-heading { font-size: 1rem; margin-bottom: 0.75rem; }
.hm-link-directory__links { list-style: none; margin: 0; padding: 0; }
.hm-link-directory__links li { margin: 0.35rem 0; }

.hm-logo-strip__heading { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); text-align: center; margin-bottom: 1.5rem; }
.hm-logo-strip__viewport { display: flex; overflow: hidden; }
.hm-logo-strip__track { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 3rem; flex: 1 0 auto; }
.hm-logo-strip__item img { display: block; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: 0.75; transition: opacity 0.15s, filter 0.15s; }
.hm-logo-strip__item img:hover { filter: none; opacity: 1; }
.hm-logo-strip__item--sm img { height: 1.5rem; }
.hm-logo-strip__item--md img { height: 2.25rem; }
.hm-logo-strip__item--lg img { height: 3.25rem; }
/* Marquee: two identical tracks slide left by their own width, looping seamlessly. */
.hm-logo-strip--marquee .hm-logo-strip__track { flex-wrap: nowrap; justify-content: space-around; padding-right: 3rem; animation: hm-logo-marquee 40s linear infinite; }
.hm-logo-strip--marquee .hm-logo-strip__viewport:hover .hm-logo-strip__track { animation-play-state: paused; }
@keyframes hm-logo-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .hm-logo-strip--marquee .hm-logo-strip__track { animation: none; flex-wrap: wrap; padding-right: 0; }
  .hm-logo-strip__track--clone { display: none; }
}

.hm-overview { display: grid; gap: 2.5rem; align-items: center; }
.hm-overview--with-image { grid-template-columns: 1fr 1fr; }
.hm-overview__eyebrow { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); margin-bottom: 1rem; }
.hm-overview__subheading { font-size: 1.15rem; color: var(--ht-fg-muted); }
.hm-overview__items { margin: 1rem 0 0; padding-left: 1.2rem; }
.hm-overview__item + .hm-overview__item { margin-top: 0.35rem; }
.hm-overview__image { display: block; width: 100%; border-radius: var(--hm-radius-lg); }
@media (max-width: 48rem) { .hm-overview--with-image { grid-template-columns: 1fr; } }

.hm-container.hm-plugin-directory { padding-block: clamp(4rem, 8vw, 7rem); }
.hm-section--plugin_directory > .hm-container.hm-plugin-directory { padding-block: 0; }
.hm-plugin-directory__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-plugin-directory__eyebrow { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); margin-bottom: 1rem; }
.hm-plugin-directory__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-plugin-directory__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.hm-plugin-directory__btn--ghost { background: transparent; color: var(--hm-text); border-color: var(--ht-line); }
.hm-plugin-directory__tools { margin-bottom: 1.5rem; }
.hm-plugin-directory__search { width: 100%; max-width: 32rem; padding: 0.6rem 0.75rem; font: inherit; color: inherit; background: var(--hm-bg); border: 1px solid var(--ht-line); border-radius: var(--hm-radius-md); }
.hm-plugin-directory__count { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--ht-fg-muted); }
.hm-plugin-directory__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--hm-hair); border: 1px solid var(--hm-hair); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.hm-plugin-directory__card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.75rem 1.75rem 2rem; background: var(--hm-bg); }
.hm-plugin-directory__card:hover { background: var(--hm-shiro); }
.hm-plugin-directory__card[hidden], .hm-plugin-directory__search[hidden], .hm-plugin-directory__count[hidden] { display: none; }
.hm-plugin-directory__title { margin: 0; font-size: 1.125rem; }
.hm-plugin-directory__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; font-family: var(--hm-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-plugin-directory__tier { padding: 0.1rem 0.5rem; border: 1px solid var(--hm-hair); border-radius: 999px; background: var(--hm-shiro); }
.hm-plugin-directory__author { margin: 0; font-size: 0.875rem; color: var(--ht-fg-muted); }
.hm-plugin-directory__description { margin: 0; color: var(--ht-fg-muted); }
.hm-plugin-directory__perms { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0; font-family: var(--hm-font-mono); font-size: 0.75rem; color: var(--hm-label); }
.hm-plugin-directory__warn { border: 0; padding: 0; color: var(--hm-shu); }
.hm-plugin-directory__lines { font-size: 0.8125rem; color: var(--ht-fg-muted); }
.hm-plugin-directory__lines summary { cursor: pointer; color: var(--hm-label); }
.hm-plugin-directory__lines ul { margin: 0.5rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.375rem; }
.hm-plugin-directory__source { margin-top: auto; font-size: 0.875rem; font-weight: 500; }
.hm-plugin-directory__state { padding: 1.5rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); background: var(--hm-shiro); color: var(--ht-fg-muted); }
.hm-plugin-directory__hint { margin: 1.5rem 0 0; font-family: var(--hm-font-mono); font-size: 0.8125rem; color: var(--hm-label); }

.hm-pricing__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-pricing__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-pricing__tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: stretch; }
.hm-pricing__tier { position: relative; display: flex; flex-direction: column; border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.75rem; background: var(--ht-surface); }
.hm-pricing__tier--popular { border-color: var(--hm-text); box-shadow: 0 0 0 1px var(--hm-text); }
.hm-pricing__badge { align-self: flex-start; background: var(--hm-text); color: var(--hm-bg); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15rem 0.6rem; border-radius: 999px; margin-bottom: 0.75rem; }
.hm-pricing__description { color: var(--ht-fg-muted); }
.hm-pricing__price { margin: 0.5rem 0 1.25rem; }
.hm-pricing__amount { font-family: var(--hm-font-heading); font-size: 2.5rem; font-weight: 450; letter-spacing: -0.04em; }
.hm-pricing__currency { font-size: 1.25rem; font-weight: 600; margin-right: 0.1rem; vertical-align: 0.6em; }
.hm-pricing__period { color: var(--ht-fg-muted); margin-left: 0.15rem; }
.hm-pricing__features { list-style: none; margin: 0 0 1.5rem; padding: 0; flex: 1; }
.hm-pricing__feature { padding: 0.3rem 0 0.3rem 1.5rem; position: relative; }
.hm-pricing__feature::before { content: "\2713"; position: absolute; left: 0; font-weight: 700; }
.hm-pricing__feature--excluded { color: var(--ht-fg-muted); text-decoration: line-through; }
.hm-pricing__feature--excluded::before { content: "\2715"; }
.hm-pricing__cta { text-align: center; }
.hm-pricing--table .hm-pricing__tiers { grid-template-columns: 1fr; }
@media (min-width: 48rem) {
  .hm-pricing--table .hm-pricing__tier { display: grid; grid-template-columns: 1.2fr 1fr 2fr auto; gap: 0 1.5rem; align-items: center; }
  .hm-pricing--table .hm-pricing__price, .hm-pricing--table .hm-pricing__features { margin: 0; }
  .hm-pricing--table .hm-pricing__badge { grid-column: 1 / -1; }
}

.hm-process { max-width: 52rem; }
.hm-process__eyebrow { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-label); margin-bottom: 1rem; }
.hm-process__subheading { color: var(--ht-fg-muted); }
.hm-process__steps { list-style: none; counter-reset: hm-step; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.hm-process__step { counter-increment: hm-step; display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; }
.hm-process__marker {
  display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; min-width: 2.5rem; padding: 0 0.4rem;
  border-radius: 999px; border: 1px solid var(--hm-hair); background: var(--hm-bg); color: var(--hm-text); font-family: var(--hm-font-mono); font-size: 0.8125rem; font-weight: 500;
}
.hm-process__marker:empty::before { content: counter(hm-step); }
.hm-process__title { margin-bottom: 0.25rem; }
.hm-process__description { color: var(--ht-fg-muted); }

/* cards: adds a command box per step; keeps the .hm-container width cap like every other section. */
.hm-process--cards { max-width: var(--hm-container); }
.hm-process--cards .hm-process__steps { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1px; background: var(--hm-hair); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-lg); overflow: hidden; }
.hm-process--cards .hm-process__step { display: block; background: var(--hm-bg); padding: 1.75rem; }
.hm-process--cards .hm-process__marker { margin-bottom: 1rem; border-radius: var(--hm-radius-sm); }
.hm-process--cards .hm-code { margin-top: 1rem; padding: 0.75rem 1rem; border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); background: var(--hm-kasumi); }

.hm-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem 5rem; align-items: start; }
.hm-split--wide-code { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.hm-split--text-right .hm-split__text { order: 2; }
.hm-split__heading { margin: 0 0 1rem; font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.hm-split__lede { color: var(--ht-fg-muted); font-size: 1.0625rem; line-height: 1.65; margin-bottom: 1.5rem; }
.hm-split__defs { margin: 0 0 1.5rem; border-top: 1px solid var(--hm-hair); }
.hm-split__defs > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 0.875rem 0; border-bottom: 1px solid var(--hm-hair); }
.hm-split__defs dt { font-family: var(--hm-font-mono); font-size: 0.8125rem; color: var(--hm-text); }
.hm-split__defs dd { margin: 0; color: var(--ht-fg-muted); }
.hm-split__chips { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; background: var(--hm-hair); border: 1px solid var(--hm-hair); border-radius: var(--hm-radius-md); overflow: hidden; }
.hm-split__chips li { background: var(--hm-bg); padding: 0.875rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.hm-split__chip { font-size: 0.8125rem; color: var(--hm-text); }
.hm-split__caption { font-size: 0.8125rem; color: var(--hm-hai); }
.hm-split__footnote { font-size: 0.9375rem; color: var(--hm-hai); }
.hm-split__footnote code, .hm-split__lede code { padding: 0.1em 0.35em; border-radius: var(--hm-radius-sm); background: var(--hm-kasumi); font-size: 0.9em; }
/* panelHeight: match — panel column stretches to the text column; the code panel grows, outputs sit at the bottom. */
@media (min-width: 961px) {
  .hm-split--match { align-items: stretch; }
  .hm-split--match .hm-split__text > :last-child { margin-bottom: 0; }
  .hm-split--match .hm-split__panel { display: flex; flex-direction: column; min-width: 0; }
  .hm-split--match .hm-split__panel > .hm-frame { flex: 1 1 auto; display: flex; flex-direction: column; }
  .hm-split--match .hm-split__panel > .hm-frame > .hm-code { flex: 1 1 auto; }
  .hm-split--match .hm-split__panel > .hm-outs:first-child { margin-top: auto; }
}
@media (max-width: 960px) {
  .hm-split, .hm-split--wide-code { grid-template-columns: minmax(0, 1fr); }
  .hm-split--text-right .hm-split__text { order: 0; }
}

.hm-stats__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-stats__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-stats__list { display: grid; gap: 1.5rem; margin: 0; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
@media (min-width: 48rem) {
  .hm-stats--cols-2 .hm-stats__list { grid-template-columns: repeat(2, 1fr); }
  .hm-stats--cols-3 .hm-stats__list { grid-template-columns: repeat(3, 1fr); }
  .hm-stats--cols-4 .hm-stats__list { grid-template-columns: repeat(4, 1fr); }
}
.hm-stats__item { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.25rem; }
.hm-stats__value { margin: 0; display: flex; flex-direction: column; }
.hm-stats__number { font-family: var(--hm-font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: 450; line-height: 1.1; letter-spacing: -0.05em; }
.hm-stats__label { color: var(--hm-label); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.hm-stats__description { color: var(--ht-fg-muted); font-size: 0.9rem; }
.hm-stats--cards .hm-stats__item { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.5rem; background: var(--ht-surface-2); }
.hm-stats--bordered .hm-stats__item { border-left: 1px solid var(--hm-text); padding-left: 1rem; }

.hm-sticky-sidebar { display: grid; gap: 2rem; }
.hm-sticky-sidebar__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-sticky-sidebar__aside { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.5rem; background: var(--ht-surface-2); align-self: start; }
.hm-sticky-sidebar__facts { margin: 0 0 1.25rem; }
.hm-sticky-sidebar__fact { padding: 0.5rem 0; border-bottom: 1px solid var(--ht-line); }
.hm-sticky-sidebar__fact dt { font-size: 0.85rem; color: var(--ht-fg-muted); }
.hm-sticky-sidebar__fact dd { margin: 0; font-weight: 600; }
.hm-sticky-sidebar__cta { display: block; text-align: center; }
@media (min-width: 60rem) {
  .hm-sticky-sidebar { grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; }
  .hm-sticky-sidebar__aside { position: sticky; top: 1.5rem; }
}

.hm-section--tag_strip { padding: 1.75rem 0; }
.hm-tag-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.hm-tag-strip__label { font-family: var(--hm-font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-label); }
.hm-tag-strip__items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0; }
.hm-tag-strip__items li { padding: 0 1.25rem; border-left: 1px solid var(--hm-hair); font-size: 0.9375rem; color: var(--hm-text); }
.hm-tag-strip__items li:first-child { padding-left: 0; border-left: 0; }

.hm-team__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-team__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-team__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
@media (min-width: 48rem) {
  .hm-team--cols-2 .hm-team__list { grid-template-columns: repeat(2, 1fr); }
  .hm-team--cols-3 .hm-team__list { grid-template-columns: repeat(3, 1fr); }
  .hm-team--cols-4 .hm-team__list { grid-template-columns: repeat(4, 1fr); }
}
.hm-team__photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--hm-radius-md); margin-bottom: 1rem; }
.hm-team__name { margin-bottom: 0.15em; }
.hm-team__title { color: var(--ht-fg-muted); margin-bottom: 0.5em; }
.hm-team__bio { font-size: 0.95rem; }
.hm-team__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.9rem; }
.hm-team--cards .hm-team__member { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.25rem; background: var(--ht-surface); }
.hm-team--centered .hm-team__member, .hm-team--centered .hm-team__header { text-align: center; }
.hm-team--centered .hm-team__header { margin-left: auto; margin-right: auto; }
.hm-team--centered .hm-team__photo { width: 8rem; height: 8rem; border-radius: 50%; margin-left: auto; margin-right: auto; }
.hm-team--centered .hm-team__social { justify-content: center; }
.hm-team--simple .hm-team__photo { display: none; }

.hm-testimonials__header { max-width: 42rem; margin-bottom: 2.5rem; }
.hm-testimonials__subheading { color: var(--ht-fg-muted); font-size: 1.1rem; }
.hm-testimonials__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.hm-testimonials__item { border: 1px solid var(--ht-line); border-radius: var(--hm-radius-lg); padding: 1.5rem; background: var(--ht-surface); }
.hm-testimonials__figure { margin: 0; display: flex; flex-direction: column; height: 100%; }
.hm-testimonials__rating { margin: 0 0 0.75rem; letter-spacing: 0.05em; }
.hm-testimonials__quote { margin: 0 0 1.25rem; flex: 1; font-size: 1.05rem; color: var(--hm-text); }
.hm-testimonials__author { display: flex; align-items: center; gap: 0.75rem; }
.hm-testimonials__avatar { border-radius: 50%; object-fit: cover; flex: none; }
.hm-testimonials__person { display: flex; flex-direction: column; line-height: 1.3; }
.hm-testimonials__role { color: var(--ht-fg-muted); font-size: 0.9rem; }
.hm-testimonials--featured .hm-testimonials__list { grid-template-columns: 1fr; max-width: 48rem; margin: 0 auto; }
.hm-testimonials--featured .hm-testimonials__item { border: 0; background: transparent; padding: 1rem 0; text-align: center; }
.hm-testimonials--featured .hm-testimonials__quote { font-size: 1.5rem; font-family: var(--hm-font-heading); line-height: 1.35; }
.hm-testimonials--featured .hm-testimonials__author { justify-content: center; text-align: left; }

.hm-theme-directory__shot { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.hm-plugin-directory__other { display: inline-block; margin-top: 1rem; font-size: 0.875rem; font-weight: 500; }
.hm-section--theme_directory > .hm-container.hm-plugin-directory { padding-block: 0; }

.hm-value-proposition { max-width: 44rem; text-align: center; }
.hm-value-proposition__paragraph { font-size: 1.2rem; color: var(--ht-fg-muted); margin-bottom: 0; }