:root, html[data-theme="light"] { --color-primary: #c4386e; --color-primary-vivid: #e41961; --color-primary-hover: #c01555; --color-primary-bg: #fdf0f4; --color-bg: #ffffff; --color-bg-secondary: #fbfcfe; --color-bg-tertiary: #f5f8fc; --color-surface: #ffffff; --color-border: #e5e7eb; --color-border-light: #f0f0f0; --color-text: #1a1d27; --color-text-secondary: #4b5563; --color-text-tertiary: #9ca3af; --color-heading: #22252f; --color-sidebar-bg: #fcfdff; --color-sidebar-text: #4b5563; --color-sidebar-hover-bg: #f5f8fc; --color-sidebar-active-bg: transparent; --color-sidebar-active-text: #2f3a4a; --color-sidebar-active-border: #8a98ad; --color-sidebar-category: #22252f; --color-code-bg: #fcfdff; --color-code-text: #1a1d27; --color-code-inline-bg: #eaebec; --color-code-inline-text: #c01555; --color-code-header-bg: #f7f9fc; --color-callout-surface: #f8f7f4; --color-callout-border: #d7d2c8; --color-callout-icon-chip-bg: #ece8e1; --color-callout-title: #2a2730; --color-callout-info-bg: #eef5fa; --color-callout-info-border: #9cb9cc; --color-callout-info-icon: #2e617f; --color-callout-info-chip-bg: #ddeaf3; --color-callout-info-text: #1f4c67; --color-callout-warning-bg: #faf3e8; --color-callout-warning-border: #dab88c; --color-callout-warning-icon: #8c5c1e; --color-callout-warning-chip-bg: #f2e2cc; --color-callout-warning-text: #6a461a; --color-callout-tip-bg: #ecf6f0; --color-callout-tip-border: #9fc8ae; --color-callout-tip-icon: #2f6a4a; --color-callout-tip-chip-bg: #d9ecdf; --color-callout-tip-text: #25563b; --color-callout-danger-bg: #faeeee; --color-callout-danger-border: #d5a2a0; --color-callout-danger-icon: #8a3e3d; --color-callout-danger-chip-bg: #f1dcdc; --color-callout-danger-text: #6a2f2e; --color-callout-info-gradient: rgba(156, 185, 204, 0.14); --color-callout-warning-gradient: rgba(218, 184, 140, 0.14); --color-callout-tip-gradient: rgba(159, 200, 174, 0.14); --color-callout-danger-gradient: rgba(213, 162, 160, 0.14); --color-button-bg: #ffffff; --color-button-text: #2a2730; --color-button-border: #d6d9e0; --color-button-hover-bg: #f4f6fa; --color-button-hover-border: #bcc4d3; --color-button-info-bg: #e9f3fa; --color-button-info-text: #1f4c67; --color-button-info-border: #a7c2d4; --color-button-info-hover-bg: #dcecf7; --color-button-warning-bg: #faf0df; --color-button-warning-text: #6a461a; --color-button-warning-border: #debc8d; --color-button-warning-hover-bg: #f4e3c8; --color-button-tip-bg: #e8f4ed; --color-button-tip-text: #25563b; --color-button-tip-border: #a8cdb6; --color-button-tip-hover-bg: #dceee4; --color-button-danger-bg: #f9e9e9; --color-button-danger-text: #6a2f2e; --color-button-danger-border: #d6a8a7; --color-button-danger-hover-bg: #f1dcdc; --color-badge-bg: #f1f3f8; --color-badge-text: #364152; --color-badge-border: #d3d9e4; --color-badge-info-bg: #e8f1f8; --color-badge-info-text: #285774; --color-badge-warning-bg: #f8eedc; --color-badge-warning-text: #6a481d; --color-badge-tip-bg: #e8f4ec; --color-badge-tip-text: #2e6147; --color-badge-danger-bg: #f7e8e8; --color-badge-danger-text: #6e3130; --color-badge-cloud-bg: #ede8f8; --color-badge-cloud-text: #4a3578; --color-tooltip-bg: #1f2430; --color-tooltip-text: #f7f8fa; --color-tooltip-border: #2e3648; --color-step-number-bg: #fdf0f4; --color-step-number-text: #d94a7b; --color-step-line: #cbd5e1; --color-card-bg: #ffffff; --color-card-border: #e5e7eb; --color-card-hover-border: #d1d5db; --color-card-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); --color-card-icon: #4b5563; --color-card-active-border: #d94a7b; --color-card-active-shadow: 0 0 0 2px rgba(217, 74, 123, 0.15); --color-search-backdrop: rgba(0, 0, 0, 0.4); --color-search-bg: #ffffff; --color-search-result-hover: #f8f9fa; --color-search-highlight: #fdf0f4; --color-header-bg: #ffffff; --color-header-border: #e5e7eb; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1); --shadow-overlay: 0 20px 60px rgba(0, 0, 0, 0.15); --prism-comment: #6b7280; --prism-keyword: #d94a7b; --prism-string: #059669; --prism-number: #d97706; --prism-function: #2563eb; --prism-operator: #6b7280; --prism-class: #7c3aed; --prism-punctuation: #4b5563; --prism-property: #0891b2; --prism-tag: #dc2626; --prism-attr-name: #d97706; --prism-attr-value: #059669} html[data-theme="dark"] { --color-primary: #f0507f; --color-primary-vivid: #f0507f; --color-primary-hover: #f5739a; --color-primary-bg: rgba(228, 25, 97, 0.12); --color-bg: #1a1d27; --color-bg-secondary: #22252f; --color-bg-tertiary: #2a2d38; --color-surface: #22252f; --color-border: #363944; --color-border-light: #2e3140; --color-text: #e5e7eb; --color-text-secondary: #9ca3af; --color-text-tertiary: #6b7280; --color-heading: #f3f4f6; --color-sidebar-bg: #1e2028; --color-sidebar-text: #9ca3af; --color-sidebar-hover-bg: #2a2d38; --color-sidebar-active-bg: transparent; --color-sidebar-active-text: #d4deed; --color-sidebar-active-border: #7e90ab; --color-sidebar-category: #e5e7eb; --color-code-bg: #16181f; --color-code-text: #e5e7eb; --color-code-inline-bg: #2a2d38; --color-code-inline-text: #f76b95; --color-code-header-bg: #1e2028; --color-callout-surface: #252832; --color-callout-border: #3c414e; --color-callout-icon-chip-bg: #303544; --color-callout-title: #f0edf6; --color-callout-info-bg: #1f2e3a; --color-callout-info-border: #3d5c74; --color-callout-info-icon: #91bfde; --color-callout-info-chip-bg: #273c4c; --color-callout-info-text: #c4def0; --color-callout-warning-bg: #33281f; --color-callout-warning-border: #6b4f33; --color-callout-warning-icon: #e3ba80; --color-callout-warning-chip-bg: #423223; --color-callout-warning-text: #f0d4aa; --color-callout-tip-bg: #1f3027; --color-callout-tip-border: #3e664f; --color-callout-tip-icon: #95d2ad; --color-callout-tip-chip-bg: #294133; --color-callout-tip-text: #c2e9d0; --color-callout-danger-bg: #332323; --color-callout-danger-border: #6f4444; --color-callout-danger-icon: #e2a6a6; --color-callout-danger-chip-bg: #422d2d; --color-callout-danger-text: #f0c6c6; --color-callout-info-gradient: rgba(61, 92, 116, 0.18); --color-callout-warning-gradient: rgba(107, 79, 51, 0.18); --color-callout-tip-gradient: rgba(62, 102, 79, 0.18); --color-callout-danger-gradient: rgba(111, 68, 68, 0.18); --color-button-bg: #2a2e3a; --color-button-text: #e6e9f0; --color-button-border: #434a5e; --color-button-hover-bg: #32384a; --color-button-hover-border: #57617a; --color-button-info-bg: #243646; --color-button-info-text: #c4def0; --color-button-info-border: #3d5f78; --color-button-info-hover-bg: #2c4256; --color-button-warning-bg: #3a2f23; --color-button-warning-text: #f0d4aa; --color-button-warning-border: #755839; --color-button-warning-hover-bg: #463726; --color-button-tip-bg: #24382d; --color-button-tip-text: #c2e9d0; --color-button-tip-border: #456f57; --color-button-tip-hover-bg: #2b4536; --color-button-danger-bg: #3a2727; --color-button-danger-text: #f0c6c6; --color-button-danger-border: #764848; --color-button-danger-hover-bg: #463131; --color-badge-bg: #2e3342; --color-badge-text: #d5dbe7; --color-badge-border: #454c61; --color-badge-info-bg: #283d4d; --color-badge-info-text: #c4def0; --color-badge-warning-bg: #3a3025; --color-badge-warning-text: #f0d4aa; --color-badge-tip-bg: #283d31; --color-badge-tip-text: #c2e9d0; --color-badge-danger-bg: #3a2a2a; --color-badge-danger-text: #f0c6c6; --color-badge-cloud-bg: #332b46; --color-badge-cloud-text: #d4c6f0; --color-tooltip-bg: #e9ecf4; --color-tooltip-text: #1a2030; --color-tooltip-border: #c2cbda; --color-step-number-bg: rgba(228, 25, 97, 0.12); --color-step-number-text: #f0507f; --color-step-line: #4b5563; --color-card-bg: #22252f; --color-card-border: #363944; --color-card-hover-border: #4b5563; --color-card-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); --color-card-icon: #9ca3af; --color-card-active-border: #f0507f; --color-card-active-shadow: 0 0 0 2px rgba(240, 80, 127, 0.2); --color-search-backdrop: rgba(0, 0, 0, 0.6); --color-search-bg: #22252f; --color-search-result-hover: #2a2d38; --color-search-highlight: rgba(228, 25, 97, 0.15); --color-header-bg: #1e2028; --color-header-border: #363944; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4); --shadow-overlay: 0 20px 60px rgba(0, 0, 0, 0.5); --prism-comment: #6b7280; --prism-keyword: #f0507f; --prism-string: #34d399; --prism-number: #fbbf24; --prism-function: #60a5fa; --prism-operator: #9ca3af; --prism-class: #a78bfa; --prism-punctuation: #9ca3af; --prism-property: #22d3ee; --prism-tag: #f87171; --prism-attr-name: #fbbf24; --prism-attr-value: #34d399} :root { --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --font-heading: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; --font-body: Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif; --font-mono: "Mononoki", "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Cascadia Code", Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --font-size-code-inline: var(--text-base); --leading-tight: 1.25; --leading-normal: 1.6; --leading-relaxed: 1.75; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --sidebar-width: 320px; --toc-width: 300px; --content-max-width: 100ch; --header-height: 60px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 350ms ease; --z-sidebar: 100; --z-header: 200; --z-toc-mobile: 150; --z-overlay: 300; --z-search: 400} *, *::before, *::after { box-sizing: border-box} * { margin: 0; padding: 0} html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--space-md))} body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text); background-color: var(--color-bg); min-height: 100vh} img, picture, video, canvas, svg { display: block; max-width: 100%} input, button, textarea, select { font: inherit; color: inherit} button { cursor: pointer; background: none; border: none} a { color: inherit; text-decoration: none} ul, ol { list-style: none} table { border-collapse: collapse; border-spacing: 0} h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word} p { overflow-wrap: break-word} code, pre, kbd, samp { font-family: var(--font-mono)} [hidden] { display: none !important} @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important} } .hh-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); height: var(--header-height); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-lg); background: var(--color-header-bg); border-bottom: 1px solid var(--color-header-border); view-transition-name: site-header} .hh-header-left { display: flex; align-items: center; gap: var(--space-sm)} .hh-header-menu-toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); color: var(--color-text-secondary); transition: background var(--transition-fast), color var(--transition-fast)} .hh-header-menu-toggle:hover { background: var(--color-bg-tertiary); color: var(--color-text)} .hh-header-logo { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-lg); color: var(--color-heading); text-decoration: none} .hh-header-logo-img { height: 28px; width: auto} html[data-theme="light"] .hh-header-logo-img-dark, html[data-theme="dark"] .hh-header-logo-img-light { display: none} html[data-theme="light"] .hh-header-logo-img-light, html[data-theme="dark"] .hh-header-logo-img-dark { display: block} .hh-header-nav { display: flex; align-items: center; gap: var(--space-xs)} .hh-header-nav-link { padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); border-radius: var(--radius-md); transition: color var(--transition-fast), background var(--transition-fast)} .hh-header-nav-link:hover { color: var(--color-text); background: var(--color-bg-tertiary)} .hh-header-nav-link-active { color: var(--color-primary)} .hh-header-right { display: flex; align-items: center; gap: var(--space-sm)} .search-bar { margin: 0} .search-bar .search-box { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); min-width: 200px} .search-bar .search-box:focus-within, .search-bar .search-box:hover { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary)} .search-bar .search-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: var(--text-sm); color: var(--color-text); padding: 0} .search-bar .search-input::placeholder { color: var(--color-badge-text)} .search-bar .search-btn { display: inline-flex; align-items: center; justify-content: center; color: var(--color-badge-text); text-decoration: none; flex-shrink: 0} .search-bar .search-btn:hover { color: var(--color-primary)} .search-bar .search-btn svg { width: 16px; height: 16px} .hh-docs-layout { display: grid; grid-template-columns: var(--sidebar-width) 1fr var(--toc-width); margin-top: var(--header-height); min-height: calc(100vh - var(--header-height))} .hh-docs-layout-two-column { grid-template-columns: var(--sidebar-width) minmax(0, 1fr)} .hh-sidebar { position: fixed; top: var(--header-height); left: 0; bottom: 0; width: var(--sidebar-width); z-index: var(--z-sidebar); overflow-y: auto; overflow-x: hidden; background: var(--color-sidebar-bg); border-right: 1px solid var(--color-border); padding: var(--space-lg) 0; -webkit-overflow-scrolling: touch; view-transition-name: site-sidebar} .hh-sidebar::-webkit-scrollbar { width: 4px} .hh-sidebar::-webkit-scrollbar-track { background: transparent} .hh-sidebar::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px} .hh-main { grid-column: 2; min-width: 0; padding: var(--space-2xl) var(--space-2xl); display: flex; justify-content: center; view-transition-name: main-content} .hh-content { width: 100%; max-width: var(--content-max-width)} .hh-toc { grid-column: 3; position: relative} .hh-toc-sticky { position: sticky; top: calc(var(--header-height) + var(--space-xl)); padding: var(--space-lg); max-height: calc(100vh - var(--header-height) - var(--space-2xl)); overflow-y: auto} .hh-toc-sticky::-webkit-scrollbar { width: 3px} .hh-toc-sticky::-webkit-scrollbar-track { background: transparent} .hh-toc-sticky::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px} .hh-toc-toggle { display: none; position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: var(--z-toc-mobile); width: auto; height: auto; padding: var(--space-md) var(--space-sm); flex-direction: column; align-items: center; gap: var(--space-xs); background: var(--color-surface); border: 1px solid var(--color-border); border-right: none; border-radius: var(--radius-md) 0 0 var(--radius-md); box-shadow: var(--shadow-md); color: var(--color-text-secondary); font-size: var(--text-xs); font-family: var(--font-heading); font-weight: var(--weight-medium); letter-spacing: 0.04em; writing-mode: vertical-rl; transition: background var(--transition-fast), color var(--transition-fast), right var(--transition-fast)} .hh-toc-toggle:hover { background: var(--color-bg-tertiary); color: var(--color-text)} .hh-toc-toggle svg { width: 22px; height: 22px; writing-mode: horizontal-tb} .hh-sidebar-overlay { display: none; position: fixed; inset: 0; z-index: calc(var(--z-sidebar) - 1); background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity var(--transition-normal)} .hh-sidebar-overlay-visible { display: block; opacity: 1} .hh-skip-link { position: absolute; top: -100%; left: var(--space-md); z-index: 9999; padding: var(--space-sm) var(--space-md); background: var(--color-primary); color: #fff; border-radius: var(--radius-md); font-weight: var(--weight-semibold); font-size: var(--text-sm)} .hh-skip-link:focus { top: var(--space-sm)} @media (max-width: 1279px) { .hh-docs-layout { grid-template-columns: var(--sidebar-width) 1fr} .hh-toc { display: none} .hh-toc-toggle { display: flex} .hh-toc { display: block; position: fixed; top: var(--header-height); right: -280px; bottom: 0; z-index: var(--z-toc-mobile); width: 280px; max-height: calc(100vh - var(--header-height)); overflow-y: auto; background: var(--color-surface); border-left: 1px solid var(--color-border); box-shadow: var(--shadow-lg); padding: var(--space-lg); transition: right var(--transition-fast)} .hh-toc-mobile-open { right: 0} .hh-toc-mobile-open ~ .hh-toc-toggle { right: 280px} .hh-toc-mobile-open ~ .hh-back-to-top { right: calc(280px + var(--space-sm))} } @media (max-width: 1023px) { .hh-docs-layout { grid-template-columns: 1fr} .hh-header-menu-toggle { display: flex} .hh-header-nav { display: none} .hh-sidebar { transform: translateX(-100%); transition: transform var(--transition-normal); box-shadow: none} .hh-sidebar-open { transform: translateX(0); box-shadow: var(--shadow-lg)} .hh-main { grid-column: 1; padding: var(--space-xl) var(--space-lg)} } @media (max-width: 767px) { .hh-header { padding: 0 var(--space-md)} .search-bar .search-box { min-width: auto} .hh-main { padding: var(--space-lg) var(--space-md)} } @font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-sans/PlusJakartaSans-Latin.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face { font-family: "Mononoki"; src: url("../fonts/mononoki/mononoki-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: optional} @font-face { font-family: "Mononoki"; src: url("../fonts/mononoki/mononoki-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: optional} @font-face { font-family: "Mononoki"; src: url("../fonts/mononoki/mononoki-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: optional} @font-face { font-family: "Mononoki"; src: url("../fonts/mononoki/mononoki-BoldItalic.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: optional} h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--weight-semibold); color: var(--color-heading); line-height: var(--leading-tight)} .hh-content-body h1 { font-size: var(--text-4xl); margin-top: var(--space-3xl); margin-bottom: var(--space-lg)} .hh-content-body h2 { font-size: var(--text-3xl); margin-top: var(--space-xl); margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border)} .hh-content-body h3 { font-size: var(--text-xl); margin-top: var(--space-2xl); margin-bottom: var(--space-sm); &.hh-steps-title { margin-top: 0} } .hh-content-body h4 { font-size: var(--text-lg); margin-top: var(--space-xl); margin-bottom: var(--space-sm)} .hh-content-body h5, .hh-content-body h6 { font-size: var(--text-base); margin-top: var(--space-xl); margin-bottom: var(--space-sm)} .hh-heading-anchor { display: inline-flex; align-items: center; margin-left: var(--space-sm); color: var(--color-text-tertiary); opacity: 0.2; vertical-align: middle; transition: opacity var(--transition-normal), color var(--transition-normal), transform var(--transition-normal); border-bottom: none !important} .hh-content-body h2:hover .hh-heading-anchor, .hh-content-body h3:hover .hh-heading-anchor { opacity: 0.5} .hh-heading-anchor:hover { opacity: 1; color: var(--color-primary); transform: scale(1.15)} .hh-heading-anchor:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; opacity: 1; color: var(--color-primary)} .hh-heading-anchor-copied { opacity: 1; color: var(--color-success, #16a34a); transform: scale(1.15)} .hh-content-header { margin-bottom: var(--space-2xl)} .hh-content-subtitle { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-secondary); margin-top: var(--space-sm); margin-bottom: 0} .hh-content-category-label { display: inline-block; font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-sm)} .hh-content-title { font-size: var(--text-4xl); font-weight: var(--weight-bold); color: var(--color-heading); line-height: var(--leading-tight); margin-bottom: var(--space-md)} .hh-content-description { font-size: var(--text-lg); color: var(--color-text-secondary); line-height: var(--leading-relaxed)} .hh-content-body p { margin-bottom: var(--space-lg); line-height: var(--leading-normal)} .hh-content-body strong { font-weight: var(--weight-semibold); color: var(--color-heading)} .hh-content-body em { font-style: italic} .hh-content-subtitle a, .hh-content-body a { color: var(--color-primary); text-decoration: underline; text-decoration-color: color-mix( in srgb, var(--color-primary) 40%, transparent ); text-underline-offset: 2px; transition: text-decoration-color var(--transition-fast), color var(--transition-fast)} .hh-content-body a:hover { text-decoration-color: var(--color-primary)} .hh-content-body a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px} .hh-content-body a[href^="http"]:not([href*="hannonhill.com"])::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 3px; vertical-align: middle; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat} .hh-content-body ul { list-style: disc; padding-left: var(--space-xl); margin-bottom: var(--space-lg)} .hh-content-body ol { list-style: decimal; padding-left: var(--space-xl); margin-bottom: var(--space-lg)} .hh-content-body li { margin-bottom: var(--space-sm); line-height: var(--leading-tight)} .hh-content-body li > ul, .hh-content-body li > ol { margin-top: var(--space-sm); margin-bottom: 0} .hh-content-body blockquote { border-left: 3px solid var(--color-border); padding-left: var(--space-lg); margin: var(--space-lg) 0; color: var(--color-text-secondary); font-style: italic} .hh-content-body blockquote p:last-child { margin-bottom: 0} .hh-content-body code:not([class*="language-"]) { background: var(--color-code-inline-bg); color: var(--color-code-inline-text); font-family: var(--font-mono); font-size: var(--font-size-code-inline); padding: 0.15em 0.4em; border-radius: var(--radius-sm); word-break: break-word} .hh-content-body hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-2xl) 0} .hh-content-body img { border-radius: var(--radius-md); border: 1px solid var(--color-border); margin: var(--space-lg) 0} .hh-content-footer { margin-top: var(--space-3xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-border)} .hh-content-meta { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-xl)} .hh-content-pagination { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md)} .hh-content-prev, .hh-content-next { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: border-color var(--transition-fast), box-shadow var(--transition-fast)} .hh-content-prev:hover, .hh-content-next:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm)} .hh-content-prev span:first-child, .hh-content-next span:first-child { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); font-weight: var(--weight-medium)} .hh-content-prev span:last-child, .hh-content-next span:last-child { font-weight: var(--weight-medium); color: var(--color-primary)} .hh-content-next { text-align: right} .hh-sidebar-nav { padding: 0} .hh-sidebar-section { margin-bottom: var(--space-sm)} .hh-sidebar-category { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-sm) var(--space-lg); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-sidebar-category); border-radius: 0; transition: color var(--transition-fast); text-align: left} .hh-sidebar-category:hover { color: var(--color-text); background: var(--color-sidebar-hover-bg)} .hh-sidebar-chevron { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-text-tertiary); transition: transform var(--transition-fast)} .hh-sidebar-category[aria-expanded="true"] .hh-sidebar-chevron { transform: rotate(90deg)} .hh-sidebar-pages { padding: 2px 0 var(--space-xs); overflow: hidden; transition: max-height var(--transition-normal), opacity var(--transition-fast); opacity: 1} .hh-sidebar-link { display: block; padding: 5px var(--space-lg) 5px calc(var(--space-lg) + var(--space-sm)); font-size: var(--text-base); color: var(--color-sidebar-text); border-radius: 0; border-left: 2px solid transparent; margin: 0; transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); line-height: var(--leading-normal)} .hh-sidebar-link:hover { color: var(--color-text); background: var(--color-sidebar-hover-bg)} .hh-sidebar-link-active { color: var(--color-sidebar-active-text); border-left-color: var(--color-sidebar-active-border); font-weight: var(--weight-medium)} .hh-sidebar-divider { height: 1px; background: var(--color-border); margin: var(--space-md) var(--space-md)} .hh-toc-title { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-badge-text); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-md)} .hh-toc-list { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--color-border)} .hh-toc-link { display: block; padding: 4px 0 4px var(--space-md); font-size: var(--text-base); font-weight: 600; color: var(--color-badge-text); line-height: var(--leading-normal); border-left: 2px solid transparent; margin-left: -1px; transition: color var(--transition-fast), border-color var(--transition-fast)} .hh-toc-link:hover { color: var(--color-text)} .hh-toc-link-active { color: var(--color-primary); border-left-color: var(--color-primary)} .hh-toc-link-h3 { padding-left: calc(var(--space-md) + var(--space-sm)); font-size: var(--text-xs); font-weight: 200} .hh-toc-mobile-open .hh-toc-title { margin-bottom: var(--space-sm)} .hh-toc-mobile-open .hh-toc-list { border-left: none} .hh-toc-mobile-open .hh-toc-link { padding: 6px var(--space-sm); border-left: none; border-radius: var(--radius-sm)} .hh-toc-mobile-open .hh-toc-link:hover { background: var(--color-bg-tertiary)} .hh-toc-mobile-open .hh-toc-link-active { background: var(--color-primary-bg); color: var(--color-primary)} .hh-breadcrumb { margin-bottom: var(--space-lg)} .hh-breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); list-style: none; padding: 0; margin: 0} .hh-breadcrumb-item { display: flex; align-items: center; font-size: var(--text-sm); color: var(--color-text-tertiary)} .hh-breadcrumb-item:not(:last-child)::after { content: '/'; margin-left: var(--space-xs); color: var(--color-text-tertiary)} .hh-breadcrumb-link { color: var(--color-text-secondary); transition: color var(--transition-fast)} .hh-breadcrumb-link:hover { color: var(--color-primary)} .hh-breadcrumb-item-current { color: var(--color-text); font-weight: var(--weight-medium)} .hh-code-block { margin: var(--space-lg) 0; border-radius: var(--radius-lg); border: 1px solid var(--color-border); overflow: hidden; background: var(--color-code-bg); resize: both; overflow: auto} .hh-code-block-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) var(--space-md); background: var(--color-code-header-bg); border-bottom: 1px solid var(--color-border); min-height: 40px} .hh-code-block-language, .hh-code-block-filename { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-heading); font-weight: var(--weight-medium)} .hh-code-block-filename { color: var(--color-text-secondary)} .hh-code-block-copy { display: flex; align-items: center; gap: var(--space-xs); padding: 4px var(--space-sm); font-size: var(--text-xs); color: var(--color-heading); border-radius: var(--radius-sm); transition: color var(--transition-fast), background var(--transition-fast)} .hh-code-block-copy:hover { color: var(--color-text); background: var(--color-bg-tertiary)} .hh-code-block-copy svg { width: 14px; height: 14px} .hh-code-block-copy-copied { color: var(--color-callout-tip-icon)} .hh-code-block-body { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; background: linear-gradient(transparent 95%, color-mix(in srgb, var(--color-border) 30%, transparent) 100%) 0 0 / 100% calc(1.75em) repeat-y, var(--color-code-bg)} .hh-code-block[data-no-gutter] .hh-code-block-body { grid-template-columns: minmax(0, 1fr)} .hh-code-block-gutter { padding: var(--space-md) var(--space-sm); background: color-mix(in srgb, var(--color-code-header-bg) 80%, var(--color-bg) 20%); border-right: 1px solid var(--color-border); min-width: 3.5ch; text-align: right; user-select: none} .hh-code-block-line-number { display: block; font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: color-mix(in srgb, var(--color-text-secondary) 80%, var(--color-text) 20%)} .hh-code-block-pre { margin: 0; padding: var(--space-md) var(--space-lg); overflow-x: auto; -webkit-overflow-scrolling: touch; background: transparent} .hh-code-block-pre code { font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: color-mix(in srgb, var(--color-code-text) 78%, var(--color-heading) 22%); background: transparent; padding: 0} .hh-code-block-pre::-webkit-scrollbar { height: 6px} .hh-code-block-pre::-webkit-scrollbar-track { background: transparent} .hh-code-block-pre::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px} .hh-code-block-tabs { display: flex; gap: 2px} .hh-code-block-tab { padding: 4px var(--space-sm); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-tertiary); border-radius: var(--radius-sm); transition: color var(--transition-fast), background var(--transition-fast); font-weight: var(--weight-medium)} .hh-code-block-tab:hover { color: var(--color-text); background: var(--color-bg-tertiary)} .hh-code-block-tab-active { color: var(--color-primary); background: var(--color-primary-bg)} html[data-theme="dark"] .hh-code-block-tab { color: var(--color-text-secondary)} html[data-theme="dark"] .hh-code-block-tab-active { color: var(--color-primary-hover)} .hh-code-block-panel { display: none} .hh-code-block-panel-active { display: block} .hh-content-body pre:not(.hh-code-block-pre) { margin: var(--space-lg) 0; padding: var(--space-md) var(--space-lg); background: var(--color-code-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow-x: auto; -webkit-overflow-scrolling: touch} .hh-content-body pre:not(.hh-code-block-pre) code { font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-code-text); background: transparent; padding: 0} .hh-callout { display: flex; gap: var(--space-md); padding: var(--space-md) var(--space-lg); margin: var(--space-lg) 0; border: 1px solid var(--color-callout-border); border-radius: var(--radius-md); background: var(--color-callout-surface); box-shadow: var(--shadow-sm)} .hh-callout-info::before, .hh-callout-warning::before, .hh-callout-tip::before, .hh-callout-danger::before { content: ''; flex-shrink: 0; width: 1.875rem; height: 1.875rem; margin-top: 1px; -webkit-mask: var(--_callout-icon) center/20px no-repeat; mask: var(--_callout-icon) center/20px no-repeat} .hh-callout:has(.hh-callout-icon)::before { display: none} .hh-callout-info::before { --_callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E"); background-color: var(--color-callout-info-icon)} .hh-callout-warning::before { --_callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); background-color: var(--color-callout-warning-icon)} .hh-callout-tip::before { --_callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E"); background-color: var(--color-callout-tip-icon)} .hh-callout-danger::before { --_callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E"); background-color: var(--color-callout-danger-icon)} .hh-callout.hh-callout-gradient::before { width: 1.25rem; height: 1.25rem; margin-top: 3px} .hh-callout-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.875rem; height: 1.875rem; margin-top: 1px; border-radius: var(--radius-sm); background: var(--color-callout-icon-chip-bg); color: var(--color-text-secondary)} .hh-callout-icon svg { --size: 20px; width: var(--size); height: var(--size)} .hh-callout-content { flex: 1; min-width: 0} .hh-callout-title { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--space-xs); color: var(--color-callout-title)} .hh-callout-content p { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text-secondary); margin-bottom: 0} .hh-callout-content p + p { margin-top: var(--space-sm)} .hh-callout-info { border-color: var(--color-callout-info-border); background: transparent} .hh-callout-info .hh-callout-icon { background: transparent; color: var(--color-callout-info-icon)} .hh-callout-info .hh-callout-title { color: var(--color-callout-info-text)} .hh-callout-warning { border-color: var(--color-callout-warning-border); background: var(--color-callout-warning-bg)} .hh-callout-warning .hh-callout-icon { background: transparent; color: var(--color-callout-warning-icon)} .hh-callout-warning .hh-callout-title { color: var(--color-callout-warning-text)} .hh-callout-tip { border-color: var(--color-callout-tip-border); background: var(--color-callout-tip-bg)} .hh-callout-tip .hh-callout-icon { background: transparent; color: var(--color-callout-tip-icon)} .hh-callout-tip .hh-callout-title { color: var(--color-callout-tip-text)} .hh-callout-danger { border-color: var(--color-callout-danger-border); background: var(--color-callout-danger-bg)} .hh-callout-danger .hh-callout-icon { background: transparent; color: var(--color-callout-danger-icon)} .hh-callout-danger .hh-callout-title { color: var(--color-callout-danger-text)} .hh-callout.hh-callout-gradient { border: none; border-left: 3px solid var(--color-callout-border); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: linear-gradient(120deg, rgba(215, 210, 200, 0.18) 0%, transparent 58%); box-shadow: none} .hh-callout.hh-callout-gradient .hh-callout-icon { background: transparent; color: var(--color-text-secondary); width: 1.25rem; height: 1.25rem; margin-top: 3px} .hh-callout.hh-callout-gradient.hh-callout-info { border-left-color: var(--color-callout-info-border); background: linear-gradient(120deg, var(--color-callout-info-gradient) 0%, transparent 58%)} .hh-callout.hh-callout-gradient.hh-callout-info .hh-callout-icon { color: var(--color-callout-info-icon)} .hh-callout.hh-callout-gradient.hh-callout-info .hh-callout-title { color: var(--color-callout-info-text)} .hh-callout.hh-callout-gradient.hh-callout-warning { border-left-color: var(--color-callout-warning-border); background: linear-gradient(120deg, var(--color-callout-warning-gradient) 0%, transparent 58%)} .hh-callout.hh-callout-gradient.hh-callout-warning .hh-callout-icon { color: var(--color-callout-warning-icon)} .hh-callout.hh-callout-gradient.hh-callout-warning .hh-callout-title { color: var(--color-callout-warning-text)} .hh-callout.hh-callout-gradient.hh-callout-tip { border-left-color: var(--color-callout-tip-border); background: linear-gradient(120deg, var(--color-callout-tip-gradient) 0%, transparent 58%)} .hh-callout.hh-callout-gradient.hh-callout-tip .hh-callout-icon { color: var(--color-callout-tip-icon)} .hh-callout.hh-callout-gradient.hh-callout-tip .hh-callout-title { color: var(--color-callout-tip-text)} .hh-callout.hh-callout-gradient.hh-callout-danger { border-left-color: var(--color-callout-danger-border); background: linear-gradient(120deg, var(--color-callout-danger-gradient) 0%, transparent 58%)} .hh-callout.hh-callout-gradient.hh-callout-danger .hh-callout-icon { color: var(--color-callout-danger-icon)} .hh-callout.hh-callout-gradient.hh-callout-danger .hh-callout-title { color: var(--color-callout-danger-text)} .hh-accordion { --_duration: 0.2s; border: 1px solid var(--color-border); border-radius: var(--radius-md); margin: var(--space-md) 0; overflow: hidden; background: var(--color-bg); box-shadow: var(--shadow-sm)} .hh-accordion-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-md) var(--space-lg); text-align: left; font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-heading); background: var(--color-bg-secondary); transition: background var(--transition-fast); cursor: pointer; list-style: none; border: 0} .hh-accordion-trigger:hover { background: var(--color-bg-tertiary)} .hh-accordion-trigger::-webkit-details-marker { display: none} .hh-accordion-title { flex: 1; min-width: 0} .hh-accordion-chevron { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-text-tertiary); transition: transform var(--transition-normal); margin-left: var(--space-md)} .hh-accordion[open] .hh-accordion-chevron, .hh-accordion-trigger[aria-expanded="true"] .hh-accordion-chevron { transform: rotate(180deg)} .hh-accordion-panel { overflow: hidden; border-top: 1px solid var(--color-border)} .hh-accordion-content { padding: var(--space-md) var(--space-lg) var(--space-lg)} .hh-accordion-content p:last-child { margin-bottom: 0} @media (prefers-reduced-motion: no-preference) { .hh-accordion { interpolate-size: allow-keywords} .hh-accordion::details-content { opacity: 0; block-size: 0; overflow-y: clip; transition: content-visibility var(--_duration) allow-discrete, opacity var(--_duration), block-size var(--_duration)} .hh-accordion[open]::details-content { opacity: 1; block-size: auto} } @supports not selector(details::details-content) { .hh-accordion .hh-accordion-panel { max-height: 0; transition: max-height var(--transition-slow)} .hh-accordion[open] .hh-accordion-panel { max-height: 2000px} } @media (prefers-reduced-motion: reduce) { .hh-accordion-chevron { transition: none} .hh-accordion::details-content, .hh-accordion .hh-accordion-panel { transition: none} } .hh-steps { margin: var(--space-xl) 0; padding-left: 0} .hh-steps-item { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-md); position: relative; padding-bottom: var(--space-xl)} .hh-steps-item:last-child { padding-bottom: 0} .hh-steps-item:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 40px; bottom: 0; width: 2px; background: var(--color-step-line); z-index: 0} .hh-steps-number { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-step-number-bg); color: var(--color-step-number-text); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-bold); flex-shrink: 0; position: relative; z-index: 1} .hh-steps-content { padding-top: 4px} .hh-steps-title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-heading); margin-bottom: var(--space-sm); line-height: var(--leading-tight)} .hh-steps-description { font-size: var(--text-base); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin-bottom: var(--space-md)} .hh-steps-description:last-child { margin-bottom: 0} .hh-steps-content .hh-code-block { margin-top: var(--space-sm); margin-bottom: 0} .hh-tabs { margin: var(--space-lg) 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden} .hh-tabs-list { display: flex; border-bottom: 1px solid var(--color-border); background: var(--color-bg-secondary); overflow-x: auto; -webkit-overflow-scrolling: touch} .hh-tabs-tab { padding: var(--space-sm) var(--space-lg); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color var(--transition-fast), border-color var(--transition-fast)} .hh-tabs-tab:hover { color: var(--color-text)} .hh-tabs-tab-active { color: var(--color-primary); border-bottom-color: var(--color-primary)} html[data-theme="dark"] .hh-tabs-tab-active { color: var(--color-primary-hover); border-bottom-color: var(--color-primary-hover)} .hh-tabs-panel { display: none; padding: var(--space-lg)} .hh-tabs-panel-active { display: block} .hh-tabs-panel > *:first-child { margin-top: 0} .hh-tabs-panel > *:last-child { margin-bottom: 0} .hh-table-scroll { margin: var(--space-lg) 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-border); border-radius: var(--radius-lg)} .hh-table-scroll > table { margin: 0; border: none; border-radius: 0} .hh-content-body table { width: 100%; font-size: var(--text-sm); line-height: var(--leading-normal); margin: var(--space-lg) 0; border-collapse: separate; border-spacing: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg)} .hh-content-body table caption { padding: var(--space-sm) var(--space-md); font-size: var(--text-xs); font-family: var(--font-heading); font-weight: var(--weight-semibold); color: var(--color-text-secondary); text-align: left; caption-side: top} .hh-content-body table th { padding: var(--space-sm) var(--space-md); text-align: left; vertical-align: top; font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); background: var(--color-bg-secondary); border-bottom: 2px solid var(--color-border); white-space: nowrap; position: sticky; top: var(--header-height); z-index: 1} .hh-content-body table td { padding: var(--space-sm) var(--space-md); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border-light)} .hh-content-body table tbody tr:last-child td { border-bottom: none} .hh-content-body table tbody tr:nth-child(even) { background: var(--color-bg-secondary)} .hh-content-body table tbody tr { transition: background var(--transition-fast)} .hh-content-body table tbody tr:hover { background: var(--color-bg-tertiary)} .hh-content-body table code { font-size: 0.85em} .hh-content-body table thead tr:first-child th:first-child, .hh-content-body table tbody:first-child tr:first-child td:first-child { border-top-left-radius: var(--radius-lg)} .hh-content-body table thead tr:first-child th:last-child, .hh-content-body table tbody:first-child tr:first-child td:last-child { border-top-right-radius: var(--radius-lg)} .hh-content-body table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-lg)} .hh-content-body table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-lg)} .hh-table-scroll > table thead tr:first-child th:first-child, .hh-table-scroll > table thead tr:first-child th:last-child, .hh-table-scroll > table tbody:first-child tr:first-child td:first-child, .hh-table-scroll > table tbody:first-child tr:first-child td:last-child, .hh-table-scroll > table tbody tr:last-child td:first-child, .hh-table-scroll > table tbody tr:last-child td:last-child { border-radius: 0} @media print { .hh-content-body table { border: 1px solid #ccc; page-break-inside: avoid} .hh-content-body table th { background: #f5f5f5 !important} .hh-content-body table tbody tr:hover { background: inherit} } #cludo-search-form { margin: 0 0 var(--space-xl)} #cludo-search-form .input-group { display: flex; align-items: stretch; gap: var(--space-sm); width: 100%} #cludo-search-form .form-control { flex: 1; min-width: 0; padding: var(--space-sm) var(--space-md); font-size: var(--text-base); color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast)} #cludo-search-form .form-control::placeholder { color: var(--color-text-tertiary)} #cludo-search-form .form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary)} #cludo-search-form .input-group-btn { display: inline-flex; align-items: stretch} #cludo-search-form .btn, #cludo-search-form #search-button { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: var(--space-sm) var(--space-lg); font-size: var(--text-sm); font-weight: var(--weight-medium); color: #fff; background: var(--color-primary); border: 1px solid var(--color-primary); border-radius: var(--radius-lg); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast)} #cludo-search-form .btn:hover, #cludo-search-form #search-button:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover)} #cludo-search-results { margin-top: var(--space-xl)} #cludo-search-results .search-result-count { font-size: var(--text-sm); color: var(--color-text-tertiary); margin-bottom: var(--space-md)} #cludo-search-results .search-did-you-mean { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-md)} #cludo-search-results .search-did-you-mean a { color: var(--color-primary); text-decoration: underline} #cludo-search-results .search-results { display: flex; flex-direction: column; gap: var(--space-md)} #cludo-search-results .search-results ul, #cludo-search-results .search-results ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-md)} #cludo-search-results .search-result, #cludo-search-results .cludo-result, #cludo-search-results li { padding: var(--space-md) var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: border-color var(--transition-fast), box-shadow var(--transition-fast)} #cludo-search-results .search-result:hover, #cludo-search-results .cludo-result:hover, #cludo-search-results li:hover { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary)} #cludo-search-results .search-result h2, #cludo-search-results .search-result h3, #cludo-search-results .cludo-result h2, #cludo-search-results .cludo-result h3, #cludo-search-results li h2, #cludo-search-results li h3 { margin: 0 0 var(--space-xs); font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug)} #cludo-search-results .search-result a, #cludo-search-results .cludo-result a, #cludo-search-results li a { color: var(--color-primary); text-decoration: none} #cludo-search-results .search-result a:hover, #cludo-search-results .cludo-result a:hover, #cludo-search-results li a:hover { text-decoration: underline} #cludo-search-results .search-result-description, #cludo-search-results .cludo-result-description, #cludo-search-results .search-result p { margin: var(--space-xs) 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal)} #cludo-search-results .search-result-url, #cludo-search-results .cludo-result-url { display: block; margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-text-tertiary); word-break: break-all} #cludo-search-results mark, #cludo-search-results .highlight { background: var(--color-search-highlight); color: var(--color-primary); border-radius: 2px; padding: 0 2px} #cludo-search-results .search-pagination, #cludo-search-results .pagination { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; margin-top: var(--space-xl); padding: 0; list-style: none} #cludo-search-results .search-pagination a, #cludo-search-results .pagination a, #cludo-search-results .search-pagination span, #cludo-search-results .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--space-sm); font-size: var(--text-sm); color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; transition: border-color var(--transition-fast), color var(--transition-fast)} #cludo-search-results .search-pagination a:hover, #cludo-search-results .pagination a:hover { border-color: var(--color-primary); color: var(--color-primary)} #cludo-search-results .search-pagination .active, #cludo-search-results .pagination .active, #cludo-search-results .search-pagination [aria-current="page"], #cludo-search-results .pagination [aria-current="page"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff} #cludo-search-results .search-no-results, #cludo-search-results .no-results { padding: var(--space-2xl) var(--space-lg); text-align: center; color: var(--color-text-tertiary); font-size: var(--text-sm); background: var(--color-bg-tertiary); border-radius: var(--radius-lg)} @media (max-width: 600px) { #cludo-search-form .input-group { flex-direction: column} #cludo-search-form .input-group-btn, #cludo-search-form .btn, #cludo-search-form #search-button { width: 100%; margin: 0} } .hh-theme-toggle { position: relative} .hh-theme-toggle-button { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); color: var(--color-text-secondary); transition: background var(--transition-fast), color var(--transition-fast)} .hh-theme-toggle-button:hover { background: var(--color-bg-tertiary); color: var(--color-text)} .hh-theme-toggle-button svg { width: 18px; height: 18px} .hh-theme-toggle-icon { display: none} html[data-theme="light"] .hh-theme-toggle-icon-light { display: block} html[data-theme="dark"] .hh-theme-toggle-icon-dark { display: block} .hh-theme-toggle-system .hh-theme-toggle-icon-light, .hh-theme-toggle-system .hh-theme-toggle-icon-dark { display: none} .hh-theme-toggle-system .hh-theme-toggle-icon-system { display: block} .hh-theme-toggle-dropdown { position: absolute; top: calc(100% + var(--space-sm)); right: 0; width: 160px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-xs); z-index: 10} .hh-theme-toggle-option { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); color: var(--color-text-secondary); border-radius: var(--radius-md); text-align: left; transition: background var(--transition-fast), color var(--transition-fast)} .hh-theme-toggle-option:hover { background: var(--color-bg-tertiary); color: var(--color-text)} .hh-theme-toggle-option svg { width: 16px; height: 16px; flex-shrink: 0} .hh-theme-toggle-option-active { color: var(--color-primary); font-weight: var(--weight-medium)} .hh-theme-toggle-check { margin-left: auto; width: 14px; height: 14px; color: var(--color-primary)} .hh-card-grid { display: grid; gap: var(--space-lg); margin: var(--space-xl) 0} .hh-card-grid-2col { grid-template-columns: repeat(2, minmax(0, 1fr))} .hh-card-grid-3col { grid-template-columns: repeat(3, minmax(0, 1fr))} @media (max-width: 768px) { .hh-card-grid-2col, .hh-card-grid-3col { grid-template-columns: 1fr} } @media (min-width: 769px) and (max-width: 1024px) { .hh-card-grid-3col { grid-template-columns: repeat(2, 1fr)} } .hh-card { display: block; background: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: var(--radius-xl); padding: var(--space-lg); text-decoration: none; color: inherit; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast)} .hh-card:hover { border-color: var(--color-card-hover-border); box-shadow: var(--color-card-hover-shadow); transform: translateY(-1px)} .hh-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px} .hh-card-active { border-color: var(--color-card-active-border); box-shadow: var(--color-card-active-shadow)} .hh-card-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: var(--space-md); background: var(--color-primary-bg); border-radius: var(--radius-md); color: var(--color-primary-vivid)} .hh-card-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round} .hh-card-title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-heading); margin-bottom: var(--space-sm); line-height: var(--leading-tight)} .hh-card-description { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); margin: 0} .hh-card-highlight { padding: var(--space-xl)} .hh-card-highlight .hh-card-title { font-size: var(--text-xl)} .hh-card-highlight .hh-card-description { font-size: var(--text-base)} .hh-card-compact { padding: var(--space-md)} .hh-card-compact .hh-card-icon { width: 32px; height: 32px; margin-bottom: var(--space-sm)} .hh-card-compact .hh-card-icon svg { width: 20px; height: 20px} .hh-card-compact .hh-card-title { font-size: var(--text-base)} .hh-card-compact .hh-card-description { font-size: var(--text-sm)} .hh-card-section-heading { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--color-heading); text-align: center; margin-bottom: var(--space-xl)} .hh-hero { background: linear-gradient(160deg, #2C3040 0%, #363B48 60%, #3A3F50 100%); border-radius: var(--radius-xl); padding: var(--space-3xl) var(--space-2xl); margin-bottom: var(--space-2xl); position: relative; overflow: hidden} .hh-hero::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(to bottom, var(--color-primary-vivid), var(--color-primary)); border-radius: var(--radius-xl) 0 0 var(--radius-xl)} .hh-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; border-radius: inherit} .hh-hero .hh-content-category-label { color: var(--color-primary-vivid); opacity: 0.9} .hh-hero .hh-content-title { color: #F3F4F6; font-size: clamp(var(--text-3xl), 3vw, 2.5rem)} .hh-hero .hh-content-description { color: #9CA3AF} @media (max-width: 767px) { .hh-hero { padding: var(--space-2xl) var(--space-lg); border-radius: var(--radius-lg)} } .hh-site-footer { position: relative; z-index: calc(var(--z-sidebar) + 1); border-top: 1px solid var(--color-border); background: var(--color-bg-secondary)} .hh-site-footer-inner { max-width: 1100px; margin: 0 auto; padding: var(--space-lg) var(--space-2xl) var(--space-xl); display: grid; gap: var(--space-sm)} .hh-site-footer-social, .hh-site-footer-primary, .hh-site-footer-links { display: flex; flex-wrap: wrap; gap: var(--space-md)} .hh-site-footer-social, .hh-site-footer-primary { padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border-light)} .hh-site-footer-social-link, .hh-site-footer-primary-link, .hh-site-footer-link { font-size: var(--text-sm); color: var(--color-text-secondary); transition: color var(--transition-fast)} .hh-site-footer-social-link:hover, .hh-site-footer-primary-link:hover, .hh-site-footer-link:hover { color: var(--color-primary)} .hh-site-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md)} .hh-site-footer-copyright { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary)} @media (max-width: 1024px) { .hh-site-footer-inner { padding: var(--space-lg) var(--space-lg) var(--space-xl)} } .hh-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 2.25rem; padding: 0.5rem 0.9rem; border: 1px solid var(--color-button-border); border-radius: var(--radius-md); background: var(--color-button-bg); color: var(--color-button-text); font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1; text-decoration: none; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast)} .hh-btn:hover { background: var(--color-button-hover-bg); border-color: var(--color-button-hover-border)} .hh-btn:active { transform: translateY(1px)} .hh-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px} .hh-btn-info { background: var(--color-button-info-bg); color: var(--color-button-info-text); border-color: var(--color-button-info-border)} .hh-btn-info:hover { background: var(--color-button-info-hover-bg)} .hh-btn-warning { background: var(--color-button-warning-bg); color: var(--color-button-warning-text); border-color: var(--color-button-warning-border)} .hh-btn-warning:hover { background: var(--color-button-warning-hover-bg)} .hh-btn-tip { background: var(--color-button-tip-bg); color: var(--color-button-tip-text); border-color: var(--color-button-tip-border)} .hh-btn-tip:hover { background: var(--color-button-tip-hover-bg)} .hh-btn-danger { background: var(--color-button-danger-bg); color: var(--color-button-danger-text); border-color: var(--color-button-danger-border)} .hh-btn-danger:hover { background: var(--color-button-danger-hover-bg)} .hh-btn-sm { min-height: 1.875rem; padding: 0.35rem 0.65rem; font-size: var(--text-xs)} .hh-btn-lg { min-height: 2.75rem; padding: 0.75rem 1.1rem} .hh-btn-group { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-md) 0 var(--space-lg)} .hh-badge, .hh-pill { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.2em 0.55em; border: 1px solid var(--color-badge-border); border-radius: 999px; background: var(--color-badge-bg); color: var(--color-badge-text); font-size: 0.75rem; font-weight: var(--weight-semibold); line-height: 1.35; letter-spacing: 0.01em; white-space: nowrap; vertical-align: middle} .hh-badge-info, .hh-pill-info { background: var(--color-badge-info-bg); color: var(--color-badge-info-text)} .hh-badge-warning, .hh-pill-warning { background: var(--color-badge-warning-bg); color: var(--color-badge-warning-text)} .hh-badge-tip, .hh-pill-tip { background: var(--color-badge-tip-bg); color: var(--color-badge-tip-text)} .hh-badge-danger, .hh-pill-danger { background: var(--color-badge-danger-bg); color: var(--color-badge-danger-text)} .hh-badge-outline, .hh-pill-outline { background: transparent} .hh-badge-feature { background: var(--color-badge-tip-bg); color: var(--color-badge-tip-text)} .hh-badge-fix { background: var(--color-badge-danger-bg); color: var(--color-badge-danger-text)} .hh-badge-improvement { background: var(--color-badge-info-bg); color: var(--color-badge-info-text)} .hh-badge-breaking { background: var(--color-badge-warning-bg); color: var(--color-badge-warning-text)} .hh-badge-deprecated { background: var(--color-badge-bg); color: var(--color-badge-text)} .hh-badge-cloud { background: var(--color-badge-cloud-bg); color: var(--color-badge-cloud-text)} .hh-badge + .hh-badge, .hh-badge + .hh-pill, .hh-pill + .hh-badge, .hh-pill + .hh-pill { margin-left: var(--space-xs)} .hh-release-controls { position: sticky; top: var(--header-height); z-index: 50; background: var(--color-bg); padding: var(--space-lg) 0 var(--space-md); border-bottom: 1px solid var(--color-border-light); margin-bottom: var(--space-xl)} .hh-release-search { display: flex; align-items: center; gap: var(--space-sm); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); transition: border-color var(--transition-fast)} .hh-release-search:focus-within { border-color: var(--color-primary)} .hh-release-search svg { color: var(--color-text-tertiary); flex-shrink: 0} .hh-release-search-input { background: none; border: none; outline: none; color: var(--color-text); font-size: var(--text-sm); font-family: var(--font-body); width: 100%} .hh-release-search-input::placeholder { color: var(--color-text-tertiary)} .hh-release-filters { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center} .hh-release-filter-label { font-size: var(--text-xs); color: var(--color-text-tertiary); font-weight: var(--weight-medium); margin-right: var(--space-xs)} .hh-release-filter-btn { font-size: var(--text-xs); font-weight: var(--weight-semibold); padding: 0.25em 0.75em; border-radius: 999px; border: 1px solid var(--color-border); background: transparent; color: var(--color-text-secondary); cursor: pointer; font-family: var(--font-body); transition: all var(--transition-fast)} .hh-release-filter-btn:hover { border-color: var(--color-text-tertiary)} .hh-release-filter-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px} .hh-release-filter-btn.active { background: var(--color-bg-tertiary); border-color: var(--color-text-secondary); color: var(--color-text)} .hh-release-filter-btn[data-filter="feature"] { color: var(--color-badge-tip-text); border-color: var(--color-badge-tip-bg)} .hh-release-filter-btn[data-filter="feature"].active { background: var(--color-badge-tip-bg)} .hh-release-filter-btn[data-filter="fix"] { color: var(--color-badge-danger-text); border-color: var(--color-badge-danger-bg)} .hh-release-filter-btn[data-filter="fix"].active { background: var(--color-badge-danger-bg)} .hh-release-filter-btn[data-filter="improvement"] { color: var(--color-badge-info-text); border-color: var(--color-badge-info-bg)} .hh-release-filter-btn[data-filter="improvement"].active { background: var(--color-badge-info-bg)} .hh-release-filter-btn[data-filter="breaking"] { color: var(--color-badge-warning-text); border-color: var(--color-badge-warning-bg)} .hh-release-filter-btn[data-filter="breaking"].active { background: var(--color-badge-warning-bg)} .hh-release-filter-btn[data-filter="deprecated"] { color: var(--color-badge-text); border-color: var(--color-badge-bg)} .hh-release-filter-btn[data-filter="deprecated"].active { background: var(--color-badge-bg)} .hh-release-filter-btn[data-filter="cloud"] { color: var(--color-badge-cloud-text); border-color: var(--color-badge-cloud-bg)} .hh-release-filter-btn[data-filter="cloud"].active { background: var(--color-badge-cloud-bg)} .hh-release-timeline { position: relative; padding-left: 168px; padding-bottom: var(--space-3xl); min-height: 200px} .hh-release-timeline::before { content: ''; position: absolute; left: 144px; top: 8px; bottom: 0; width: 0; border-left: 2px dashed var(--color-primary); opacity: 0.3} .hh-release-month { position: sticky; top: var(--release-month-sticky-top, 180px); z-index: 40; background: var(--color-bg); margin-left: -168px; width: 130px; text-align: right; margin-bottom: var(--space-md); margin-top: var(--space-sm); padding: var(--space-xs) 0} .hh-release-month:first-child { margin-top: 0} .hh-release-month-dot { position: absolute; left: 139px; top: 3px; width: 12px; height: 12px; background: var(--color-primary); border-radius: 50%; border: 2px solid var(--color-bg); z-index: 2} .hh-release-month-label { font-size: var(--text-sm); font-weight: var(--weight-bold); font-family: var(--font-heading); color: var(--color-primary); letter-spacing: 0.3px} .hh-release-month-group { margin-bottom: var(--space-xl)} .hh-release-card { position: relative; background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-xl); padding: var(--space-lg) var(--space-lg); margin-bottom: var(--space-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast)} .hh-release-card:hover { border-color: var(--color-card-hover-border); box-shadow: var(--color-card-hover-shadow); transform: translateY(-1px)} .hh-release-card::before { content: ''; position: absolute; left: -26px; top: var(--space-lg); width: 6px; height: 6px; background: var(--color-border); border-radius: 50%} .hh-release-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-sm); gap: var(--space-sm)} .hh-release-card-badge { flex-shrink: 0} .hh-release-card-version { font-size: var(--text-xs); color: var(--color-text-tertiary); font-weight: var(--weight-medium)} .hh-release-card h3 { font-size: var(--text-base); font-weight: var(--weight-semibold); font-family: var(--font-heading); color: var(--color-heading); margin: 0 0 var(--space-xs); line-height: var(--leading-tight)} .hh-release-card p { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); margin: 0} .hh-release-card-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--color-primary); text-decoration: none; font-weight: var(--weight-medium); margin-top: var(--space-sm); transition: color var(--transition-fast)} .hh-release-card-link:hover { color: var(--color-primary-hover)} .hh-release-loading, .hh-release-error, .hh-release-empty { text-align: center; padding: var(--space-3xl) var(--space-lg); color: var(--color-text-tertiary); font-size: var(--text-sm)} .hh-release-loading::before { content: ''; display: block; width: 28px; height: 28px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: hh-spin 0.6s linear infinite; margin: 0 auto var(--space-md)} @keyframes hh-spin { to { transform: rotate(360deg)} } .hh-release-empty a { color: var(--color-primary); text-decoration: none; font-weight: var(--weight-medium)} .hh-release-empty a:hover { color: var(--color-primary-hover)} .hh-release-load-more { display: flex; justify-content: center; padding: var(--space-xl) 0 var(--space-md)} .hh-release-load-more-btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-xl); font-size: var(--text-sm); font-weight: var(--weight-semibold); font-family: var(--font-body); color: var(--color-primary); background: transparent; border: 1px dashed var(--color-primary); border-radius: var(--radius-lg); cursor: pointer; transition: all var(--transition-fast)} .hh-release-load-more-btn:hover { background: var(--color-primary-bg); border-style: solid} .hh-release-load-more-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px} .hh-badge-cloud svg { width: 12px; height: 12px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round} .hh-release-card-version-cloud { color: var(--color-badge-cloud-text)} .hh-release-card-version-cloud svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px} @media (max-width: 767px) { .hh-release-timeline { padding-left: var(--space-xl)} .hh-release-timeline::before { left: 5px} .hh-release-month { margin-left: 0; width: auto; text-align: left} .hh-release-month-dot { left: calc(-1 * var(--space-xl) + 1px)} .hh-release-card::before { left: calc(-1 * var(--space-xl) + 4px)} .hh-release-card { padding: var(--space-md)} } .hh-version-hero { position: relative; background: linear-gradient( 135deg, var(--color-primary-bg) 0%, var(--color-surface) 80% ); border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary); border-radius: 0 var(--radius-xl) var(--radius-xl) 0; padding: var(--space-lg) var(--space-xl); margin-bottom: var(--space-xl); box-shadow: var(--shadow-sm)} .hh-version-hero.hh-version-hero-previous { background: var(--color-surface)} .hh-version-hero-meta { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); flex-wrap: wrap} .hh-version-hero-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--color-text-tertiary); flex-shrink: 0} .hh-version-hero-date-icon { color: var(--color-primary); flex-shrink: 0} .hh-version-hero-date { font-size: var(--text-base); font-weight: var(--weight-semibold); font-family: var(--font-heading); color: var(--color-heading)} .hh-version-hero-lead { font-size: var(--text-lg); color: var(--color-text-secondary); line-height: var(--leading-relaxed); margin: 0 0 var(--space-lg)} .hh-version-hero-stats { display: flex; gap: var(--space-lg); flex-wrap: wrap; padding-top: var(--space-md); border-top: 1px solid var(--color-border-light)} .hh-version-stat { font-size: var(--text-xs); color: var(--color-text-tertiary); display: inline-flex; flex-direction: column; align-items: center; gap: 0; text-transform: uppercase; letter-spacing: 0.06em} .hh-version-stat strong { display: block; font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--color-heading); line-height: 1.1; letter-spacing: -0.02em} .hh-release-detail h3#highlights, .hh-release-detail h3#features, .hh-release-detail h3#improvements, .hh-release-detail h3#fixed { display: flex; align-items: center; gap: var(--space-sm)} .hh-release-detail h3#highlights::after, .hh-release-detail h3#features::after, .hh-release-detail h3#improvements::after, .hh-release-detail h3#fixed::after { content: ""; flex: 1; height: 2px; background: linear-gradient(to right, var(--color-border), transparent); border-radius: 1px} .hh-release-detail h3#features { color: var(--color-callout-tip-text)} .hh-release-detail h3#improvements { color: var(--color-callout-info-text)} .hh-release-detail h3#fixed { color: var(--color-callout-danger-text)} .hh-release-detail h3#highlights + ul, .hh-release-detail h3#features + ul, .hh-release-detail h3#improvements + ul, .hh-release-detail h3#fixed + ul { list-style: none; padding-left: var(--space-lg); margin-top: var(--space-sm)} .hh-release-detail h3#highlights + ul { border-left: 3px solid var(--color-primary)} .hh-release-detail h3#features + ul { border-left: 3px solid var(--color-callout-tip-border)} .hh-release-detail h3#improvements + ul { border-left: 3px solid var(--color-callout-info-border)} .hh-release-detail h3#fixed + ul { border-left: 3px solid var(--color-callout-danger-border)} .hh-release-detail h3#highlights + ul > li, .hh-release-detail h3#features + ul > li, .hh-release-detail h3#improvements + ul > li, .hh-release-detail h3#fixed + ul > li { position: relative; padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-md); margin-bottom: var(--space-xs); border-radius: var(--radius-sm); transition: background var(--transition-fast), padding-left var(--transition-fast)} .hh-release-detail h3#highlights + ul > li:hover, .hh-release-detail h3#features + ul > li:hover, .hh-release-detail h3#improvements + ul > li:hover, .hh-release-detail h3#fixed + ul > li:hover { background: var(--color-bg-tertiary); padding-left: calc(var(--space-md) + 4px)} .hh-release-detail h3#highlights + ul > li::before, .hh-release-detail h3#features + ul > li::before, .hh-release-detail h3#improvements + ul > li::before, .hh-release-detail h3#fixed + ul > li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 6px; height: 6px; border-radius: 50%} .hh-release-detail h3#highlights + ul > li::before { background: var(--color-primary)} .hh-release-detail h3#features + ul > li::before { background: var(--color-callout-tip-icon)} .hh-release-detail h3#improvements + ul > li::before { background: var(--color-callout-info-icon)} .hh-release-detail h3#fixed + ul > li::before { background: var(--color-callout-danger-icon)} .hh-content-body a.hh-version-card-featured { display: grid; gap: var(--space-sm); background: linear-gradient( 135deg, var(--color-primary-bg) 0%, var(--color-card-bg) 50% ); border: 1px solid var(--color-card-border); border-left: 4px solid var(--color-primary); border-radius: 0 var(--radius-xl) var(--radius-xl) 0; padding: var(--space-xl); text-decoration: none; color: inherit; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast)} .hh-content-body a.hh-version-card-featured:hover { border-color: var(--color-card-hover-border); border-left-color: var(--color-primary); box-shadow: var(--color-card-hover-shadow); transform: translateY(-1px); text-decoration: none} .hh-content-body a.hh-version-card-featured:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px} .hh-content-body a.hh-version-card-featured::after, .hh-content-body a.hh-version-card::after { display: none} .hh-version-card-meta { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap} .hh-version-card-meta .hh-version-hero-date { font-size: var(--text-sm)} .hh-content-body .hh-version-card-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--color-heading); line-height: var(--leading-tight); border-bottom: none; padding-bottom: 0} .hh-version-card-featured > p { font-size: var(--text-base); color: var(--color-text-secondary); line-height: var(--leading-normal)} .hh-version-card-stats { display: flex; gap: var(--space-sm); flex-wrap: wrap} .hh-content-body a.hh-version-card { display: grid; gap: var(--space-md); background: var(--color-card-bg); border: 1px solid var(--color-card-border); border-radius: var(--radius-xl); padding: var(--space-lg); text-decoration: none; color: inherit; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast)} .hh-content-body a.hh-version-card-featured > *, .hh-content-body a.hh-version-card > * { margin: 0} .hh-content-body a.hh-version-card:hover { border-color: var(--color-card-hover-border); box-shadow: var(--color-card-hover-shadow); transform: translateY(-1px); text-decoration: none} .hh-content-body a.hh-version-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px} a.hh-version-card .hh-version-card-title { font-size: var(--text-lg)} a.hh-version-card > p { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal)} .hh-version-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); margin: var(--space-lg) 0} @media (max-width: 768px) { .hh-version-grid { grid-template-columns: 1fr} } .hh-version-nav-links { display: flex; gap: var(--space-lg); padding-top: var(--space-xl); border-top: 1px solid var(--color-border-light); margin-top: var(--space-xl)} .hh-version-nav-links a { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast)} .hh-version-nav-links a:hover { color: var(--color-primary-hover)} .hh-version-archive-list { margin: var(--space-md) 0 var(--space-xl)} .hh-version-archive-list .hh-accordion { border-left: 3px solid var(--color-callout-tip-border); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-bottom: var(--space-sm)} .hh-version-archive-list .hh-accordion:first-child { border-left-color: var(--color-primary)} .hh-version-archive-list .hh-accordion:first-child .hh-accordion-trigger { background: linear-gradient( 135deg, var(--color-primary-bg) 0%, var(--color-bg-secondary) 70% )} .hh-version-archive-list .hh-accordion:first-child .hh-accordion-trigger:hover { background: linear-gradient( 135deg, var(--color-primary-bg) 0%, var(--color-bg-tertiary) 70% )} .hh-version-archive-list .hh-accordion-trigger { gap: var(--space-sm); flex-wrap: wrap} .hh-accordion-dates { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; flex-shrink: 0; gap: 2px} .hh-accordion-date-row { display: flex; align-items: center; gap: var(--space-xs)} .hh-accordion-dates .hh-version-hero-date { font-size: var(--text-sm)} .hh-accordion-eol { font-size: var(--text-xs); color: var(--color-text-secondary); white-space: nowrap} .hh-accordion-eol strong { color: var(--color-callout-warning-icon)} #hh-archive-eol tr { transition: background var(--transition-fast)} #hh-archive-eol tr:hover { background: var(--color-bg-tertiary)} h2#supported::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-callout-tip-icon); margin-right: var(--space-sm); vertical-align: middle; position: relative; top: -1px} h2#end-of-life::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-tertiary); margin-right: var(--space-sm); vertical-align: middle; position: relative; top: -1px} .hh-accordion-latest-icon { color: var(--color-callout-tip-icon); flex-shrink: 0} .hh-verified-badge { position: relative; display: inline-flex; align-items: center; vertical-align: middle; margin-left: 4px; cursor: help} .hh-verified-badge [data-tooltip] { display: inline-flex} .hh-verified-badge .hh-verified-icon { color: var(--color-callout-tip-icon)} @media (max-width: 767px) { .hh-version-hero { padding: var(--space-md)} .hh-version-hero-stats { gap: var(--space-md)} .hh-version-card-featured { padding: var(--space-lg)} .hh-version-card-title { font-size: var(--text-lg)} } .hh-tooltip { position: relative; display: inline-flex; align-items: center; gap: var(--space-xs)} .hh-tooltip [data-tooltip], .hh-tooltip-trigger { cursor: help} .hh-tooltip [data-tooltip]::after, .hh-tooltip [data-tooltip]::before, .hh-tooltip-trigger::after, .hh-tooltip-trigger::before { position: absolute; left: 50%; opacity: 0; pointer-events: none; transition: opacity var(--transition-fast), transform var(--transition-fast)} .hh-tooltip [data-tooltip]::after, .hh-tooltip-trigger::after { content: attr(data-tooltip); bottom: calc(100% + 11px); transform: translate(-50%, 4px); min-width: max-content; max-width: min(36ch, 90vw); padding: 0.45rem 0.6rem; border: 1px solid var(--color-tooltip-border); border-radius: var(--radius-sm); background: var(--color-tooltip-bg); color: var(--color-tooltip-text); font-size: var(--text-xs); line-height: 1.45; text-align: left; box-shadow: var(--shadow-lg); z-index: var(--z-overlay)} .hh-tooltip [data-tooltip]::before, .hh-tooltip-trigger::before { content: ""; bottom: calc(100% + 5px); transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--color-tooltip-bg); z-index: var(--z-overlay)} .hh-tooltip [data-tooltip]:hover::after, .hh-tooltip [data-tooltip]:hover::before, .hh-tooltip [data-tooltip]:focus-visible::after, .hh-tooltip [data-tooltip]:focus-visible::before, .hh-tooltip-trigger:hover::after, .hh-tooltip-trigger:hover::before, .hh-tooltip-trigger:focus-visible::after, .hh-tooltip-trigger:focus-visible::before { opacity: 1} .hh-tooltip [data-tooltip]:hover::after, .hh-tooltip [data-tooltip]:focus-visible::after, .hh-tooltip-trigger:hover::after, .hh-tooltip-trigger:focus-visible::after { transform: translate(-50%, 0)} @media (prefers-reduced-motion: reduce) { .hh-tooltip [data-tooltip]::after, .hh-tooltip [data-tooltip]::before, .hh-tooltip-trigger::after, .hh-tooltip-trigger::before { transition: none} } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0} .text-center { text-align: center} .text-right { text-align: right} .text-left { text-align: left} .mt-0 { margin-top: 0} .mt-sm { margin-top: var(--space-sm)} .mt-md { margin-top: var(--space-md)} .mt-lg { margin-top: var(--space-lg)} .mt-xl { margin-top: var(--space-xl)} .mb-0 { margin-bottom: 0} .mb-sm { margin-bottom: var(--space-sm)} .mb-md { margin-bottom: var(--space-md)} .mb-lg { margin-bottom: var(--space-lg)} .mb-xl { margin-bottom: var(--space-xl)} .hidden { display: none} .block { display: block} .inline { display: inline} .flex { display: flex} .focus-ring:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm)} @keyframes hh-back-to-top-reveal { from { opacity: 0} to { opacity: 1} } .hh-back-to-top { position: fixed; bottom: var(--space-xl); right: calc(var(--toc-width) + var(--space-xs)); z-index: calc(var(--z-toc-mobile) - 1); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-bg); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); color: var(--color-text-secondary); opacity: 0; pointer-events: auto; animation: hh-back-to-top-reveal linear both; animation-timeline: scroll(root); animation-range: 300px 400px; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), right var(--transition-fast)} .hh-back-to-top:hover { background: var(--color-bg-tertiary); color: var(--color-text); border-color: var(--color-primary); box-shadow: var(--shadow-lg)} .hh-back-to-top svg { flex-shrink: 0} @media (max-width: 1279px) { .hh-back-to-top { right: var(--space-sm)} } @media (prefers-reduced-motion: reduce) { .hh-back-to-top { animation: none; opacity: 0} } .cludo-feedback .feedback-assistant .feedback-container { width: 100%!important}