:root {
  color-scheme: dark;
  --hl-bg: #191722;
  --hl-bg-deep: #12111a;
  --hl-surface: #292637;
  --hl-surface-2: #312e42;
  --hl-surface-3: #201e2b;
  --hl-border: #403c50;
  --hl-text: #f7f6f9;
  --hl-muted: #b7b3c2;
  --hl-muted-2: #8f8a9c;
  --hl-orange: #ff7a1a;
  --hl-orange-soft: #452819;
  --hl-blue: #a9cae7;
  --hl-blue-deep: #263b52;
  --hl-green: #7bd2a0;
  --hl-danger: #f39a98;
  --fo-note-bg: #24233f;
  --fo-note-bg-strong: #2d2a4e;
  --fo-note-border: #8178d8;
  --fo-note-text: #dedbff;
  --fo-note-muted: #aaa5dc;
  --hl-shadow: 0 18px 50px rgba(0, 0, 0, .24);
  --page-width: 1200px;
  --radius: 14px;
  --radius-sm: 8px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-anchor: none; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--hl-bg);
  color: var(--hl-text);
  font-size: 15px;
  line-height: 1.55;
}

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

:focus-visible {
  outline: 3px solid var(--hl-blue);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -60px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 6px;
  background: #fff;
  color: #111;
}

.skip-link:focus { top: 16px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.page-width { width: min(calc(100% - 48px), var(--page-width)); margin-inline: auto; }

.announcement {
  min-height: 43px;
  padding: 9px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-bottom: 1px dashed #9188e5;
  background: #39345f;
  color: #efedff;
  text-align: center;
}

.announcement span:last-child { font-size: 13px; }

.site-header { position: relative; z-index: 30; background: #38354f; box-shadow: 0 1px rgba(255,255,255,.03); }
.site-header__top { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.site-header__actions { display: flex; align-items: center; gap: 28px; font-weight: 650; }
.site-header__actions a:hover { color: var(--hl-orange); }

.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 25px; letter-spacing: -.8px; line-height: .9; }
.brand b { font-weight: 800; }
.brand small { display: block; margin-top: 6px; color: #fff; font-size: 9px; font-style: italic; font-weight: 500; letter-spacing: 0; }
.brand__mark { position: relative; width: 39px; height: 39px; display: grid; grid-template-columns: repeat(3, 8px); grid-auto-rows: 8px; gap: 3px; transform: rotate(-11deg); }
.brand__mark i { display: block; border-radius: 3px; background: var(--hl-orange); }
.brand__mark i:nth-child(2), .brand__mark i:nth-child(4), .brand__mark i:nth-child(6) { background: #fff; }
.brand__mark i:nth-child(3) { transform: translateY(8px); }
.brand__mark i:nth-child(4) { transform: translateY(-5px); }

.site-header__nav { background: rgba(255,255,255,.055); }
.nav-row { min-height: 57px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.main-nav { align-self: stretch; display: flex; align-items: stretch; gap: 5px; }
.main-nav a { position: relative; display: flex; align-items: center; padding: 0 14px; color: #e5e2eb; font-weight: 650; }
.main-nav a:hover, .main-nav a.is-active { color: #fff; }
.main-nav a.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: #fff; }

.global-search { width: min(480px, 42vw); height: 36px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid #f1eef8; border-radius: 9px; }
.global-search svg { width: 20px; height: 20px; fill: none; stroke: #eeeaf3; stroke-width: 2; }
.global-search input { width: 100%; border: 0; outline: 0; background: transparent; color: #fff; }
.global-search input::placeholder { color: #aaa5b5; }

.button, .icon-button, .text-button, .filter-trigger {
  border: 0;
  cursor: pointer;
}

.button { min-height: 40px; padding: 9px 17px; border-radius: 9px; background: #4b465f; font-weight: 750; }
.button:hover { filter: brightness(1.08); }
.button--accent { background: var(--hl-orange); color: #fff; box-shadow: 0 5px 15px rgba(255, 122, 26, .2); }
.button--ghost { border: 1px solid var(--hl-border); background: transparent; }
.button--soft { background: var(--hl-blue-deep); color: #dcefff; }
.button--wide { min-width: 210px; }
.text-button { padding: 6px; background: none; color: var(--hl-orange); font-weight: 750; }
.icon-button { width: 42px; height: 42px; border-radius: 50%; background: #3a364b; font-size: 25px; }

.page-hero { padding: 66px 0 34px; background: radial-gradient(circle at 78% 16%, rgba(255,122,26,.08), transparent 29%), var(--hl-bg); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--hl-muted); font-size: 13px; }
.breadcrumbs span:not(:last-child)::after { content: "/"; margin-left: 8px; color: #6e6979; }
.page-title { max-width: 820px; margin: 16px 0 8px; font-size: clamp(30px, 4vw, 48px); line-height: 1.1; letter-spacing: -1.5px; }
.page-intro { max-width: 760px; margin: 0; color: var(--hl-muted); font-size: 18px; }
.hero-meta { margin-top: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--hl-muted); }
.eyebrow { display: inline-block; color: var(--hl-orange); font-size: 12px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }

.content-section { padding: 0 0 78px; }
.content-section--spaced { padding-top: 38px; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 282px; gap: 24px; align-items: start; }
.layout--wide-aside { grid-template-columns: minmax(0, 1fr) 360px; }
.main-column, .sidebar { min-width: 0; }
.sidebar { display: grid; gap: 16px; position: sticky; top: 20px; }

.surface { border: 1px solid var(--hl-border); border-radius: var(--radius); background: var(--hl-surface); box-shadow: var(--hl-shadow); }
.surface__header { padding: 22px 24px 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.surface__body { padding: 0 24px 24px; }
.surface h2, .surface h3 { margin-top: 0; }
.muted { color: var(--hl-muted); }
.small { font-size: 13px; }

.fo-note { padding: 17px 19px; border: 1px dashed var(--fo-note-border); border-left: 4px solid var(--fo-note-border); border-radius: 10px; background: linear-gradient(135deg, var(--fo-note-bg-strong), var(--fo-note-bg)); color: var(--fo-note-text); box-shadow: 0 12px 30px rgba(15, 13, 37, .18); }
.fo-note__meta { margin-bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.fo-note__label, .fo-inline-label { display: inline-flex; align-items: center; width: fit-content; padding: 3px 7px; border: 1px solid #9188e5; border-radius: 5px; background: #3c3769; color: #eeeaff; font-size: 9px; font-weight: 900; letter-spacing: .09em; line-height: 1.35; text-transform: uppercase; }
.fo-note__scope { color: var(--fo-note-muted); font-size: 10px; font-weight: 650; }
.fo-note__title { display: block; margin-bottom: 3px; color: #fff; font-size: 14px; }
.fo-note p { margin: 0; color: var(--fo-note-text); font-size: 12px; line-height: 1.55; }
.fo-note--compact { padding: 13px 14px; }
.fo-note--compact .fo-note__meta { margin-bottom: 6px; }
.fo-note--compact .fo-note__scope { display: none; }
.fo-note--presentation { margin-bottom: 22px; }
.fo-note--in-content { margin: -3px 0 14px; }
.fo-note--nested { margin: 11px 0 15px; }
.fo-note__link { color: #d8d3ff; font-weight: 800; text-decoration: underline; text-decoration-color: #8178d8; text-underline-offset: 3px; }
.fo-note__link:hover { color: #fff; }
.fo-demo-switch { border: 1px dashed var(--fo-note-border); background: var(--fo-note-bg-strong); color: var(--fo-note-text); }
.fo-inline-label { margin-bottom: 8px; }
.fo-note-card { border-style: dashed; border-color: var(--fo-note-border); background: linear-gradient(135deg, var(--fo-note-bg-strong), var(--fo-note-bg)); }
.fo-presentation { padding-top: 6px; background: linear-gradient(180deg, rgba(78, 69, 137, .08), transparent 62%); }
.fo-presentation .overview-card, .fo-presentation > .page-width > .surface { border-style: dashed; border-color: var(--fo-note-border); background: linear-gradient(145deg, #2b2946, #25233a); }
.fo-presentation .overview-card--recommended { border-color: var(--hl-orange); box-shadow: inset 0 3px var(--hl-orange); }
.search-first-flow { border-style: dashed; border-color: var(--fo-note-border); background: linear-gradient(145deg, #2b2946, #25233a); }

.overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.overview-card { padding: 24px; border: 1px solid var(--hl-border); border-radius: var(--radius); background: var(--hl-surface); }
.overview-card--recommended { border-color: var(--hl-orange); box-shadow: inset 0 3px var(--hl-orange); }
.overview-card__number { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #403b50; color: var(--hl-blue); font-weight: 850; }
.overview-card h2 { margin: 18px 0 8px; font-size: 21px; }
.overview-card p { color: var(--hl-muted); }
.overview-card ul { padding-left: 19px; color: #dfdce5; }
.recommendation { display: inline-flex; padding: 4px 9px; border-radius: 100px; background: var(--hl-orange-soft); color: #ffb47e; font-size: 11px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }

.principles { margin-top: 24px; padding: 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.principle strong { display: block; margin-bottom: 7px; font-size: 16px; }
.principle span { color: var(--hl-muted); font-size: 13px; }
.principle__icon { width: 38px; height: 38px; margin-bottom: 13px; display: grid; place-items: center; border-radius: 10px; background: var(--hl-blue-deep); color: var(--hl-blue); font-weight: 850; }

.story-flow { margin-top: 24px; padding: 28px; }
.flow-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.flow-step { position: relative; min-height: 126px; padding: 18px; border-radius: 12px; background: var(--hl-surface-3); }
.flow-step:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; right: -17px; top: 43px; width: 22px; color: var(--hl-orange); font-size: 21px; }
.flow-step b { display: block; margin: 8px 0 5px; }
.flow-step span { color: var(--hl-muted); font-size: 13px; }

.screen-links { margin-top: 24px; padding: 24px; }
.screen-link-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.screen-link { min-height: 86px; padding: 15px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--hl-border); border-radius: 10px; background: #242231; }
.screen-link:hover { border-color: var(--hl-orange); transform: translateY(-2px); }
.screen-link small { color: var(--hl-muted); }

.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; }
.search-first-demo { max-width: 860px; margin: 30px auto 0; padding: 32px; }
.search-first-demo__intro { max-width: 650px; margin: 0 auto 22px; text-align: center; }
.search-first-demo__intro h2 { margin: 7px 0 8px; font-size: 28px; }
.search-first-demo__intro p { margin: 0; color: var(--hl-muted); }
.autocomplete-search { height: 62px; padding: 0 18px; display: flex; align-items: center; gap: 12px; border: 2px solid #696279; border-radius: 12px; background: #201e2a; box-shadow: 0 10px 34px rgba(0,0,0,.18); }
.autocomplete-search:focus-within { border-color: var(--hl-blue); box-shadow: 0 0 0 3px rgba(126,184,224,.16); }
.autocomplete-search svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: var(--hl-muted); stroke-width: 2; }
.autocomplete-search input { width: 100%; border: 0; outline: 0; background: transparent; color: #fff; font-size: 17px; }
.autocomplete-search input::placeholder { color: #9791a5; }
.search-first-selected { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--hl-muted); font-size: 13px; }
.autocomplete-panel { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.autocomplete-group { overflow: hidden; border: 1px solid var(--hl-border); border-radius: 11px; background: #242231; }
.autocomplete-group__title { padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--hl-border); color: #fff; font-size: 13px; font-weight: 800; }
.autocomplete-group__title small { color: var(--hl-muted); font-size: 10px; font-weight: 600; }
.autocomplete-group > button { width: 100%; min-height: 58px; padding: 10px 13px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 0; border-top: 1px solid rgba(255,255,255,.06); background: transparent; color: var(--hl-text); text-align: left; cursor: pointer; }
.autocomplete-group > button:first-of-type { border-top: 0; }
.autocomplete-group > button:hover:not(:disabled), .autocomplete-group > button:focus-visible { background: var(--hl-orange-soft); }
.autocomplete-group > button:disabled { cursor: not-allowed; opacity: .42; }
.autocomplete-group > button b, .autocomplete-group > button small { display: block; }
.autocomplete-group > button small { margin-top: 3px; color: var(--hl-muted); font-size: 10px; }
.autocomplete-count { min-width: 28px; padding: 4px 7px; border-radius: 100px; background: #3b374a; color: var(--hl-blue); text-align: center; font-size: 11px; font-weight: 850; }
.autocomplete-empty { grid-column: 1 / -1; padding: 28px; display: grid; gap: 6px; border: 1px dashed var(--hl-border); border-radius: 11px; color: var(--hl-muted); text-align: center; }
.autocomplete-empty strong { color: #fff; }
.search-first-results { max-width: 960px; margin: 0 auto; }
.search-first-placeholder { min-height: 120px; padding: 28px; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--hl-muted); text-align: center; }
.search-first-placeholder > span { color: var(--hl-blue); font-size: 38px; }
.search-first-placeholder button { padding: 0; border: 0; background: transparent; color: var(--hl-orange); cursor: pointer; font: inherit; font-weight: 800; }
.search-first-flow { max-width: 960px; margin-inline: auto; }
.flow-steps--three { grid-template-columns: repeat(3, 1fr); }
.alternative-comparison { max-width: 960px; margin: 24px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.alternative-comparison article { padding: 22px; }
.alternative-comparison h3 { margin: 8px 0; }
.alternative-comparison p { margin: 0; color: var(--hl-muted); font-size: 13px; }

.listing-toolbar { margin-bottom: 14px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.listing-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.listing-tabs button { padding: 8px 15px; border: 0; border-radius: 100px; background: #454057; color: #dedbe4; cursor: pointer; font-weight: 750; font-size: 13px; }
.listing-tabs button.is-active { background: var(--hl-blue); color: #1a2430; }
.result-count { color: var(--hl-muted); font-size: 13px; white-space: nowrap; }

.active-filters { margin-bottom: 14px; padding: 14px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 1px solid var(--hl-border); border-radius: 12px; background: var(--hl-surface-3); }
.active-filters__label { margin-right: 3px; color: var(--hl-muted); font-size: 13px; }
.filter-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid #5d5871; border-radius: 100px; background: #3a364b; font-size: 13px; }
.filter-chip--domain { border-color: #c45d16; background: var(--hl-orange-soft); color: #ffd2b2; }
.filter-chip button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: inherit; cursor: pointer; }

.topic-list { overflow: hidden; }
.topic-row { padding: 23px 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; border-top: 1px solid var(--hl-border); }
.topic-row:first-child { border-top: 0; }
.topic-row:hover { background: rgba(255,255,255,.018); }
.topic-row h3 { margin: 0 0 7px; font-size: 18px; line-height: 1.3; }
.topic-row h3 a:hover { color: var(--hl-orange); }
.topic-row__meta { display: flex; flex-wrap: wrap; gap: 5px; color: var(--hl-muted); font-size: 12px; }
.topic-row__stats { min-width: 110px; display: flex; justify-content: flex-end; gap: 14px; color: var(--hl-muted); font-size: 12px; }
.topic-row__stats b { display: block; color: var(--hl-text); font-size: 14px; }
.tag-list { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border-radius: 5px; background: #343145; color: #e2dfe8; font-size: 12px; font-weight: 650; }
.tag--match { background: var(--hl-blue-deep); color: #cbe8ff; }
.tag:hover { filter: brightness(1.12); }

.empty-state { padding: 58px 32px; text-align: center; }
.empty-state__icon { width: 56px; height: 56px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; background: var(--hl-orange-soft); color: var(--hl-orange); font-size: 25px; }
.empty-state h2 { margin-bottom: 7px; }
.empty-state p { max-width: 500px; margin: 0 auto 20px; color: var(--hl-muted); }

.filter-card { overflow: hidden; }
.filter-card__intro { padding: 22px 20px 15px; }
.filter-card__intro h2 { margin: 0 0 3px; font-size: 20px; }
.filter-card__intro p { margin: 0; color: var(--hl-muted); font-size: 12px; }
.tag-search { margin: 0 16px 14px; height: 40px; padding: 0 11px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--hl-border); border-radius: 8px; background: #211f2c; }
.tag-search svg { width: 17px; height: 17px; fill: none; stroke: var(--hl-muted); stroke-width: 2; }
.tag-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--hl-text); }
.domain-filter { border-top: 1px solid var(--hl-border); }
.domain-filter__header { width: 100%; min-height: 49px; padding: 5px 8px 5px 15px; display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: center; gap: 4px; }
.domain-filter__header:hover { background: rgba(255,255,255,.02); }
.domain-select { min-width: 0; min-height: 39px; padding: 5px 0; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.domain-toggle { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--hl-muted); cursor: pointer; }
.domain-toggle:hover { background: rgba(255,255,255,.06); color: #fff; }
.domain-filter__check { width: 18px; height: 18px; border: 1px solid #716b82; border-radius: 4px; display: grid; place-items: center; }
.domain-select.is-selected .domain-filter__check { border-color: var(--hl-orange); background: var(--hl-orange); }
.domain-select.is-selected .domain-filter__check::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 900; }
.domain-filter__name { min-width: 0; font-size: 13px; font-weight: 750; }
.domain-filter__popular { width: 8px; height: 8px; margin-left: 7px; display: inline-block; border-radius: 50%; background: var(--hl-orange); box-shadow: 0 0 0 3px var(--hl-orange-soft); vertical-align: 1px; }
.domain-filter__count { color: var(--hl-muted); font-size: 11px; }
.domain-filter__chevron { transition: transform .2s ease; }
.domain-filter.is-open .domain-filter__chevron { transform: rotate(180deg); }
.domain-filter__tags { padding: 2px 15px 13px 43px; display: none; }
.domain-filter.is-open .domain-filter__tags { display: grid; gap: 4px; }
.tag-option { min-height: 33px; display: grid; grid-template-columns: 17px minmax(0, 1fr) auto; align-items: center; gap: 8px; color: #dcd9e3; cursor: pointer; font-size: 12px; }
.tag-option input { position: absolute; opacity: 0; pointer-events: none; }
.tag-option__check { width: 16px; height: 16px; display: grid; place-items: center; border: 1px solid #716b82; border-radius: 4px; }
.tag-option input:checked + .tag-option__check { border-color: var(--hl-blue); background: var(--hl-blue); color: #172331; }
.tag-option input:checked + .tag-option__check::after { content: "✓"; font-size: 11px; font-weight: 900; }
.tag-option__name { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.tag-option__popular { padding: 2px 5px; display: inline-flex; align-items: center; border-radius: 100px; background: var(--hl-orange-soft); color: #ffb47e; font-size: 9px; font-weight: 850; line-height: 1.35; white-space: nowrap; }
.tag-option__count { color: var(--hl-muted-2); font-size: 11px; }
.tag-option.is-disabled { color: #777282; cursor: not-allowed; }
.tag-option.is-disabled .tag-option__check { opacity: .5; }
.filter-card__footer { padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--hl-border); }
.domain-link { color: var(--hl-orange); font-size: 12px; font-weight: 750; }
.domain-show-all { justify-self: start; padding: 4px 0; font-size: 12px; }
.filter-help { padding: 14px 16px; border-top: 1px solid var(--hl-border); background: var(--hl-surface-3); color: var(--hl-muted); font-size: 11px; }
.flat-tag-list { max-height: 520px; overflow-y: auto; border-top: 1px solid var(--hl-border); scrollbar-color: #625c73 transparent; scrollbar-width: thin; }
.flat-tag-section { padding-bottom: 8px; }
.flat-tag-section + .flat-tag-section { border-top: 1px solid var(--hl-border); }
.flat-tag-section__heading { min-height: 42px; padding: 9px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #242231; }
.flat-tag-section__heading strong { font-size: 12px; }
.flat-tag-section__heading span { color: var(--hl-muted); font-size: 10px; }
.flat-tag-option { min-height: 42px; padding: 5px 12px 5px 14px; display: grid; grid-template-columns: 17px minmax(0, 1fr) auto auto; align-items: center; gap: 7px; cursor: pointer; font-size: 12px; }
.flat-tag-option:hover { background: rgba(255,255,255,.025); }
.flat-tag-option input { position: absolute; opacity: 0; pointer-events: none; }
.flat-tag-option input:focus-visible + .tag-option__check { outline: 2px solid var(--hl-blue); outline-offset: 2px; }
.flat-tag-option input:checked + .tag-option__check { border-color: var(--hl-blue); background: var(--hl-blue); color: #172331; }
.flat-tag-option input:checked + .tag-option__check::after { content: "✓"; font-size: 11px; font-weight: 900; }
.flat-tag-option__name { min-width: 0; overflow-wrap: anywhere; }
.flat-tag-option__status { padding: 3px 6px; border-radius: 100px; background: var(--hl-orange-soft); color: #ffb47e; font-size: 9px; font-weight: 850; text-transform: uppercase; }
.flat-tag-option__count { min-width: 44px; color: var(--hl-muted); text-align: right; line-height: 1.05; }
.flat-tag-option__count b, .flat-tag-option__count small { display: block; }
.flat-tag-option__count b { color: #e8e5ed; font-size: 10px; }
.flat-tag-option__count small { margin-top: 2px; font-size: 8px; }
.flat-tag-expand { margin: 7px 9px 3px; }
.flat-tag-empty { padding: 24px 16px; color: var(--hl-muted); font-size: 12px; line-height: 1.5; text-align: center; }
.flat-filter-card .filter-card__footer { align-items: flex-start; flex-direction: column; gap: 4px; background: var(--hl-surface-3); }
.flat-filter-card .filter-card__footer strong { font-size: 11px; }
.flat-filter-card .filter-card__footer span { color: var(--hl-muted); font-size: 10px; line-height: 1.45; }
.filter-trigger { width: 100%; margin-bottom: 14px; padding: 13px 16px; display: none; align-items: center; justify-content: space-between; border-radius: 10px; background: var(--hl-orange); font-weight: 800; }

.side-card { padding: 21px; }
.side-card h2, .side-card h3 { margin: 0 0 10px; }
.side-card p { margin: 0; color: var(--hl-muted); font-size: 13px; }
.side-card--orange { background: #fb7c25; border-color: #fb7c25; }
.side-card--orange p { color: #fff6ef; }
.side-card--orange .button { width: 100%; margin-top: 18px; background: #fff; color: #25212e; }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metric { padding: 11px; border-radius: 9px; background: #201e2b; }
.metric b { display: block; font-size: 24px; line-height: 1; }
.metric span { color: var(--hl-muted); font-size: 11px; }

.domain-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.domain-card { min-height: 188px; padding: 21px; display: flex; flex-direction: column; border: 1px solid var(--hl-border); border-radius: var(--radius); background: var(--hl-surface); }
.domain-card:hover { border-color: #756e87; transform: translateY(-2px); }
.domain-card__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: var(--hl-blue-deep); color: var(--hl-blue); font-weight: 900; }
.domain-card h2 { margin: 16px 0 6px; font-size: 17px; }
.domain-card p { margin: 0 0 14px; flex: 1; color: var(--hl-muted); font-size: 12px; }
.domain-card__meta { display: flex; justify-content: space-between; color: var(--hl-muted-2); font-size: 11px; }

.domain-hero-card { padding: 30px; }
.domain-hero-card h2 { margin-bottom: 9px; font-size: 26px; }
.domain-hero-card p { max-width: 760px; color: #d6d3dc; }
.popular-tags { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.popular-tags .tag { padding: 7px 11px; background: #383449; }
.section-heading { margin: 34px 0 14px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.section-heading h2 { margin: 0; font-size: 23px; }
.section-heading p { margin: 3px 0 0; color: var(--hl-muted); }
.featured-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 15px; }
.featured-topic { min-height: 225px; padding: 25px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--hl-border); border-radius: var(--radius); background: linear-gradient(180deg, rgba(24,22,34,.05), rgba(24,22,34,.96)), radial-gradient(circle at 82% 18%, #6c3b27 0, #2a2838 45%, #211f2d 100%); }
.featured-topic--small { min-height: 105px; padding: 18px; }
.featured-stack { display: grid; gap: 15px; }
.featured-topic h3 { max-width: 600px; margin: 8px 0 5px; font-size: 21px; }
.featured-topic--small h3 { font-size: 15px; }
.related-links { list-style: none; margin: 0; padding: 0; }
.related-links li + li { border-top: 1px solid var(--hl-border); }
.related-links a { padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.related-links a:hover { color: var(--hl-orange); }

.layout--domain-landing { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
.domain-landing-main { min-width: 0; }
.domain-landing-intro { padding: 30px; }
.domain-landing-intro p { max-width: 780px; margin: 0; color: #d7d4dd; line-height: 1.75; }
.domain-landing-intro p + p { margin-top: 15px; }
.domain-landing-intro__lead { color: #fff !important; font-size: 19px; line-height: 1.6 !important; }
.domain-section { margin-top: 38px; }
.domain-section .section-heading { margin-top: 0; }
.domain-section .section-heading p { max-width: 680px; }
.domain-path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.domain-path-card { min-width: 0; padding: 20px; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 14px; border: 1px solid var(--hl-border); border-radius: var(--radius); background: var(--hl-surface); }
.domain-path-card__step { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--hl-orange-soft); color: #ffad73; font-weight: 900; }
.domain-path-card h3 { margin: 2px 0 7px; font-size: 16px; line-height: 1.3; }
.domain-path-card p { margin: 0; color: var(--hl-muted); font-size: 13px; line-height: 1.55; }
.domain-path-card .popular-tags { margin-top: 14px; }
.domain-path-card .tag { padding: 6px 9px; font-size: 10px; }
.domain-curated-list { overflow: hidden; }
.domain-curated-item { min-height: 78px; padding: 16px 20px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.domain-curated-item + .domain-curated-item { border-top: 1px solid var(--hl-border); }
.domain-curated-item:hover { background: rgba(255,255,255,.025); }
.domain-curated-item__number { color: var(--hl-orange); font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.domain-curated-item b { display: block; line-height: 1.35; }
.domain-curated-item small { display: block; margin-top: 5px; color: var(--hl-muted); }
.domain-evergreen { padding: 30px; border: 1px solid var(--hl-border); border-radius: var(--radius); background: linear-gradient(145deg, #282533, #211f2c); }
.domain-evergreen .section-heading { margin-bottom: 20px; }
.domain-evergreen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.domain-evergreen-grid h3 { margin: 0 0 10px; font-size: 18px; }
.domain-evergreen-grid p { margin: 0; color: #cfccd6; font-size: 14px; line-height: 1.75; }
.domain-evergreen-grid p + p { margin-top: 13px; }
.faq-list { overflow: hidden; }
.faq-list details + details { border-top: 1px solid var(--hl-border); }
.faq-list summary { position: relative; padding: 19px 52px 19px 22px; cursor: pointer; font-weight: 800; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 22px; top: 50%; color: var(--hl-orange); font-size: 22px; transform: translateY(-50%); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { max-width: 720px; margin: -3px 52px 20px 22px; color: var(--hl-muted); font-size: 14px; line-height: 1.65; }
.domain-landing-sidebar .popular-tags { margin-top: 16px; }
.domain-landing-sidebar .tag { font-size: 10px; }

.topic-header-card { padding: 30px; }
.topic-header-card__top { display: flex; justify-content: space-between; gap: 20px; color: var(--hl-muted); font-size: 12px; }
.topic-header-card h1 { margin: 18px 0 22px; font-size: clamp(27px, 4vw, 38px); line-height: 1.15; }
.author-row { padding-top: 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--hl-border); }
.author { display: flex; align-items: center; gap: 12px; }
.avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #77b4cf; color: #fff; font-size: 21px; font-weight: 750; }
.post-body { margin-top: 16px; padding: 30px; color: #ebe8ef; font-size: 16px; }
.post-body p:first-child { margin-top: 0; }
.related-topic-list { display: grid; gap: 4px; }
.related-topic { padding: 13px 0; border-top: 1px solid var(--hl-border); }
.related-topic:first-child { border-top: 0; }
.related-topic h3 { margin: 0 0 6px; font-size: 14px; line-height: 1.35; }
.related-topic h3 a:hover { color: var(--hl-orange); }
.related-topic .tag-list { margin-top: 8px; }

.admin-shell { overflow: hidden; }
.admin-toolbar { padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--hl-border); background: #24212f; }
.admin-toolbar h2 { margin: 0; }
.admin-tabs { padding: 0 22px; display: flex; gap: 22px; border-bottom: 1px solid var(--hl-border); }
.admin-tabs button { padding: 15px 0 12px; border: 0; border-bottom: 3px solid transparent; background: transparent; cursor: pointer; color: var(--hl-muted); font-weight: 750; }
.admin-tabs button.is-active { border-bottom-color: var(--hl-orange); color: #fff; }
.admin-stats { padding: 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.admin-stat { padding: 16px; border: 1px solid var(--hl-border); border-radius: 10px; background: #242231; }
.admin-stat b { display: block; font-size: 26px; }
.admin-stat span { color: var(--hl-muted); font-size: 12px; }
.admin-content { padding: 0 22px 24px; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 13px 12px; border-top: 1px solid var(--hl-border); text-align: left; vertical-align: middle; }
.data-table th { color: var(--hl-muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.data-table td { font-size: 13px; }
.status { display: inline-flex; padding: 4px 8px; border-radius: 100px; font-size: 11px; font-weight: 800; }
.status--good { background: #193c2b; color: var(--hl-green); }
.status--warn { background: #49341e; color: #ffc17b; }
.status--danger { background: #472729; color: var(--hl-danger); }
.row-actions { display: flex; justify-content: flex-end; gap: 6px; }
.row-actions button { padding: 6px 9px; border: 1px solid var(--hl-border); border-radius: 6px; background: transparent; cursor: pointer; }

.drawer { position: fixed; inset: 0; z-index: 100; display: none; }
.drawer.is-open { display: block; }
.drawer__backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(8,7,12,.74); }
.drawer__panel { position: absolute; inset: 0 0 0 auto; width: min(100%, 430px); display: grid; grid-template-rows: auto minmax(0,1fr) auto; background: var(--hl-bg); box-shadow: -20px 0 60px rgba(0,0,0,.4); }
.drawer__header { padding: 17px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--hl-border); }
.drawer__header h2 { margin: 2px 0 0; }
.drawer__content { overflow: auto; padding: 14px; }
.drawer__content .filter-card { box-shadow: none; }
.drawer__content .filter-card__footer, .drawer__content .filter-help { display: none; }
.drawer__footer { padding: 13px 16px calc(13px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--hl-border); background: var(--hl-surface-3); }
.body-locked { overflow: hidden; }

.toast { position: fixed; z-index: 200; left: 50%; bottom: 24px; max-width: min(480px, calc(100% - 32px)); padding: 12px 18px; border: 1px solid #6b647d; border-radius: 10px; background: #302c40; color: #fff; box-shadow: var(--hl-shadow); transform: translate(-50%, 120px); opacity: 0; transition: .25s ease; }
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 1040px) {
  .layout, .layout--wide-aside, .layout--domain-landing { grid-template-columns: minmax(0, 1fr) 260px; }
  .overview-grid { grid-template-columns: 1fr; }
  .principles { grid-template-columns: repeat(2, 1fr); }
  .domain-overview { grid-template-columns: repeat(2, 1fr); }
  .screen-link-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .page-width { width: min(calc(100% - 30px), var(--page-width)); }
  .announcement { justify-content: flex-start; overflow: hidden; white-space: nowrap; }
  .announcement span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .site-header__top { min-height: 64px; }
  .site-header__actions a { display: none; }
  .brand { font-size: 21px; }
  .brand__mark { width: 34px; height: 34px; transform: scale(.9) rotate(-11deg); transform-origin: left center; }
  .nav-row { min-height: auto; display: block; padding-top: 8px; }
  .main-nav { overflow-x: auto; min-height: 46px; }
  .main-nav a { flex: 0 0 auto; padding-inline: 11px; }
  .global-search { width: 100%; margin-bottom: 10px; }
  .page-hero { padding: 42px 0 26px; }
  .page-intro { font-size: 16px; }
  .layout, .layout--wide-aside, .layout--domain-landing { display: block; }
  .sidebar { position: static; margin-top: 18px; }
  .forum-sidebar .filter-card { display: none; }
  .filter-trigger { display: flex; }
  .overview-grid, .domain-overview { grid-template-columns: 1fr; }
  .principles, .flow-steps, .screen-link-grid { grid-template-columns: 1fr; }
  .autocomplete-panel, .alternative-comparison { grid-template-columns: 1fr; }
  .flow-step:not(:last-child)::after { content: "↓"; right: 18px; top: auto; bottom: -19px; }
  .featured-grid { grid-template-columns: 1fr; }
  .domain-evergreen-grid { grid-template-columns: 1fr; }
  .topic-row { grid-template-columns: 1fr; }
  .topic-row__stats { justify-content: flex-start; }
  .admin-shell { overflow-x: auto; }
  .admin-toolbar, .admin-tabs, .admin-stats, .admin-content { min-width: 700px; }
}

@media (max-width: 560px) {
  .site-header__actions .button { padding-inline: 12px; }
  .announcement strong { display: none; }
  .page-title { font-size: 31px; }
  .listing-toolbar { align-items: flex-start; flex-direction: column; }
  .listing-tabs { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; }
  .topic-row, .surface__header, .surface__body { padding-left: 18px; padding-right: 18px; }
  .search-first-demo { padding: 20px 14px; }
  .search-first-demo__intro { text-align: left; }
  .autocomplete-search { height: 56px; padding-inline: 13px; }
  .autocomplete-group__title { align-items: flex-start; flex-direction: column; }
  .topic-header-card, .post-body, .domain-hero-card { padding: 21px; }
  .domain-landing-intro, .domain-evergreen { padding: 21px; }
  .domain-landing-intro__lead { font-size: 17px; }
  .domain-path-grid { grid-template-columns: 1fr; }
  .domain-path-card { padding: 17px; }
  .domain-curated-item { padding-inline: 17px; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; }
  .faq-list summary { padding-left: 18px; }
  .faq-list details p { margin-left: 18px; margin-right: 42px; }
  .topic-header-card__top, .author-row { align-items: flex-start; flex-direction: column; }
  .principles { gap: 16px; }
  .featured-topic { min-height: 190px; }
  .drawer__panel { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}