:root {
  --canvas: #ffffff;
  --ink: #111114;
  --muted: #676679;
  --line: #e8e7f1;
  --soft: #f7f6fc;
  --violet: #6e40ff;
  --violet-deep: #4b22d6;
  --sky: #328bf5;
  --cyan: #27b5cc;
  --mint: #35bd91;
  --sun: #f2bd19;
  --coral: #f2765c;
  --rose: #ef6482;
  --indigo: #5d70e7;
  --gold: #e1b95b;
  --gold-bright: #f7d47e;
  --gold-deep: #a87309;
  --gold-soft: #fff6d8;
  --deep-sea: #071c3f;
  --header: 76px;
  --gutter: clamp(20px, 3vw, 56px);
  --content: 1540px;
  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: #fff; }
button, input, select, a { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(110, 64, 255, 0.28);
  outline-offset: 3px;
}
[hidden] { display: none !important; }
.page-shell { min-height: 100dvh; }

.site-header {
  height: var(--header);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand {
  font-size: clamp(1.35rem, 1.8vw, 1.82rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  text-decoration: none;
  white-space: nowrap;
}
.brand span { color: var(--violet); }
.site-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0px, 0.45vw, 8px);
  white-space: nowrap;
}
.site-nav a {
  padding: 10px 8px;
  color: #4b4a56;
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
  border-radius: 10px;
}
.site-nav a:hover { color: var(--ink); background: #f5f3ff; }
.site-nav a[aria-current="page"] { color: var(--violet-deep); box-shadow: inset 0 -2px var(--violet); border-radius: 0; }
.account-button {
  min-width: 80px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #d9d7e5;
  border-radius: 12px;
  background: #fff;
  font-size: 0.84rem;
  font-weight: 750;
  cursor: pointer;
}
.account-button:hover { border-color: var(--violet); }
.site-header [data-auth-user] img,
.site-header [data-auth-user] .avatar {
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  object-fit: cover;
  border-radius: 50% !important;
}

main { overflow: clip; }
.atlas-hero {
  position: relative;
  max-width: var(--content);
  margin: 0 auto;
  padding: 44px var(--gutter) 24px;
  display: grid;
  grid-template-columns: minmax(330px, 0.78fr) minmax(640px, 2fr);
  gap: clamp(34px, 4vw, 70px);
  align-items: stretch;
}
.atlas-intro { position: relative; padding-top: 8px; min-width: 0; }
.atlas-intro h1 {
  position: relative;
  display: inline-block;
  margin: 0;
  font-size: clamp(2.8rem, 5.1vw, 5.8rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 900;
}
.atlas-intro h1::after {
  content: "";
  position: absolute;
  left: 1%;
  right: -4%;
  bottom: -12px;
  height: 9px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright) 42%, #fff0a8 56%, var(--gold) 78%, transparent);
  clip-path: polygon(0 47%, 16% 24%, 31% 57%, 47% 28%, 63% 68%, 80% 36%, 100% 54%, 100% 78%, 81% 63%, 63% 90%, 47% 51%, 31% 80%, 16% 48%, 0 72%);
}
.atlas-intro > p:first-of-type {
  max-width: 38ch;
  margin: 32px 0 28px;
  color: #30303a;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.75;
}
.search-shell { position: relative; z-index: 12; }
.search-box {
  min-height: 56px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 0 14px 0 17px;
  border: 2px solid var(--violet);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(72, 45, 170, 0.08);
}
.search-box svg, .featured-item svg, .read-action svg, .starter-guide svg, .active-filter-bar svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.search-box input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 0.93rem;
}
.search-box input::placeholder { color: #878599; }
.search-box kbd {
  padding: 3px 7px;
  color: #7f7d90;
  border: 1px solid #dfddeb;
  border-radius: 7px;
  background: #f8f7fc;
  font: 600 0.7rem/1.2 "Noto Sans SC", sans-serif;
}
.search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 56px rgba(55, 45, 105, 0.16);
}
.search-suggestions a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 11px;
  text-decoration: none;
}
.search-suggestions a:hover { background: var(--soft); }
.search-suggestions strong, .search-suggestions small { display: block; }
.search-suggestions strong { font-size: 0.86rem; }
.search-suggestions small { margin-top: 3px; color: var(--muted); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-suggestions p { margin: 0; padding: 14px; color: var(--muted); font-size: 0.84rem; }
.suggestion-mark, .featured-mark, .method-mark {
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 850;
}
.suggestion-mark { width: 34px; height: 34px; border-radius: 10px; }
.popular-searches {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.popular-searches span { color: var(--muted); font-size: 0.75rem; }
.popular-searches button {
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  color: #4d4b59;
  background: #f4f3f8;
  font-size: 0.72rem;
  cursor: pointer;
}
.popular-searches button:hover { color: var(--violet-deep); background: #ece8ff; }
.promise-note {
  max-width: 42ch;
  margin: 24px 0 0 !important;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: #716f80 !important;
  font-size: 0.78rem !important;
  line-height: 1.7 !important;
}

.atlas-panel {
  position: relative;
  min-width: 0;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--gold) 48%, #fff);
  border-radius: 24px;
  background: linear-gradient(145deg, #fff 0%, var(--gold-soft) 100%);
  box-shadow: 0 24px 54px rgba(95, 68, 11, 0.1);
  overflow: hidden;
}
.atlas-panel::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: -8%;
  right: -7%;
  top: 51%;
  height: 10px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-deep) 12%, var(--gold-bright) 43%, #fff2ad 51%, var(--gold) 74%, transparent 100%);
  clip-path: polygon(0 42%, 14% 18%, 28% 56%, 43% 21%, 59% 71%, 73% 32%, 87% 61%, 100% 34%, 100% 72%, 87% 92%, 73% 61%, 59% 100%, 43% 52%, 28% 86%, 14% 51%, 0 76%);
  transform: rotate(-1.5deg);
  pointer-events: none;
}
.atlas-panel-heading {
  position: relative;
  z-index: 3;
  height: 32px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.atlas-panel-heading h2 { margin: 0; font-size: 1.08rem; font-weight: 850; }
.atlas-panel-heading button {
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--violet-deep);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}
.category-atlas {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(112px, 1fr));
  gap: 4px;
}
.atlas-zone {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 13px;
  padding: 22px;
  border: 0;
  border-radius: 18px;
  text-align: left;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms ease, filter 180ms ease;
  overflow: hidden;
}
.atlas-zone:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(43, 38, 82, 0.15); }
.atlas-zone.is-selected { box-shadow: inset 0 0 0 3px #17151f, inset 0 -5px var(--gold), 0 18px 42px rgba(40, 35, 78, 0.18); }
.atlas-zone::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -34px;
  width: 110px;
  height: 110px;
  border: 18px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  pointer-events: none;
}
.zone-content { grid-column: span 4; background: #dcd2ff; }
.zone-design { grid-column: span 4; background: #bfe0ff; }
.zone-service { grid-column: span 4; background: #bfeadf; }
.zone-automation { grid-column: span 4; background: #c9efd6; }
.zone-product { grid-column: span 4; background: #ffe49a; }
.zone-education { grid-column: span 4; background: #ffd0c2; }
.zone-commerce { grid-column: span 5; background: #f6c9d7; }
.zone-game { grid-column: span 7; background: #ced5ff; }
.zone-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  font-weight: 900;
}
.zone-copy strong, .zone-copy small { display: block; }
.zone-copy strong { font-size: clamp(0.98rem, 1.2vw, 1.15rem); line-height: 1.25; }
.zone-copy small { margin-top: 10px; color: rgba(20, 19, 27, 0.72); font-size: 0.74rem; line-height: 1.55; }
.zone-count { align-self: end; white-space: nowrap; color: rgba(20, 19, 27, 0.62); font-size: 0.7rem; font-weight: 700; }

.editorial-rail {
  max-width: calc(var(--content) - var(--gutter) * 2);
  min-height: 120px;
  margin: 14px auto 0;
  padding: 18px 0;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.route-finder {
  max-width: calc(var(--content) - var(--gutter) * 2);
  margin: 34px auto 14px;
  padding: 30px;
  border: 1px solid #ddd9ef;
  border-radius: 24px;
  background: #f8f7fc;
}
.route-finder-heading { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(320px, 1.1fr); gap: 36px; align-items: end; }
.route-finder-heading span { color: var(--violet-deep); font-size: .72rem; font-weight: 850; }
.route-finder-heading h2 { margin: 7px 0 0; max-width: 18ch; font-size: clamp(1.65rem, 2.4vw, 2.45rem); line-height: 1.15; letter-spacing: -.035em; }
.route-finder-heading p { margin: 0; max-width: 64ch; color: var(--muted); font-size: .86rem; line-height: 1.75; }
.route-finder-form { margin-top: 24px; display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)) auto; gap: 9px; }
.route-finder-form label { min-width: 0; padding: 10px 12px; border: 1px solid #dedbea; border-radius: 12px; background: rgba(255,255,255,.82); }
.route-finder-form label span { display: block; margin-bottom: 5px; color: #777486; font-size: .64rem; }
.route-finder-form select { width: 100%; min-height: 28px; padding: 0; border: 0; outline: 0; background: transparent; color: #27242e; font-size: .76rem; font-weight: 700; }
.route-finder-form > button { min-height: 58px; align-self: stretch; padding: 0 18px; border: 0; border-radius: 12px; background: #17151f; color: #fff; font-size: .78rem; font-weight: 800; cursor: pointer; }
.route-finder-form > button:hover { background: var(--violet-deep); }
.route-results { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.route-empty { grid-column: 1 / -1; min-height: 84px; display: flex; flex-direction: column; justify-content: center; padding: 18px 20px; border-top: 1px solid #dcd8e9; color: var(--muted); }
.route-empty strong { color: #302d38; font-size: .84rem; }
.route-empty span { margin-top: 5px; font-size: .72rem; }
.route-card { min-width: 0; padding: 20px; border: 1px solid #dedbe9; border-radius: 16px; background: rgba(255,255,255,.92); }
.route-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.route-rank { color: var(--violet-deep); font-size: .7rem; font-weight: 900; }
.route-category { padding: 5px 8px; border-radius: 8px; color: #24212b; font-size: .64rem; font-weight: 750; }
.route-card h3 { margin: 16px 0 0; font-size: 1.04rem; line-height: 1.45; }
.route-card > p { min-height: 3.8em; margin: 8px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.65; }
.route-card dl { margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.route-card dl div { min-width: 0; padding: 10px 7px 11px 0; }
.route-card dt { color: #858293; font-size: .6rem; }
.route-card dd { margin: 4px 0 0; overflow-wrap: anywhere; font-size: .69rem; font-weight: 750; }
.route-reason, .route-limit { margin-top: 14px; }
.route-reason strong, .route-limit strong { font-size: .68rem; }
.route-reason ul { margin: 7px 0 0; padding-left: 17px; color: #4d4a56; font-size: .69rem; line-height: 1.6; }
.route-limit p { margin: 6px 0 0; min-height: 2.9em; color: #9b4d37; font-size: .68rem; line-height: 1.5; }
.route-card > a { margin-top: 16px; min-height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #ebe6ff; color: var(--violet-deep); text-decoration: none; font-size: .72rem; font-weight: 800; }
.route-card > a:hover { background: #ded5ff; }
.editorial-rail header { display: flex; flex-direction: column; justify-content: center; }
.editorial-rail h2 { margin: 0; font-size: 1.22rem; }
.editorial-rail header p { margin: 7px 0 0; color: var(--muted); font-size: 0.76rem; line-height: 1.55; }
.featured-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.featured-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  gap: 11px;
  align-items: center;
  padding: 8px 15px;
  border-left: 1px solid var(--line);
  text-decoration: none;
}
.featured-item:hover strong { color: var(--violet-deep); }
.featured-item:nth-child(n+4) { border-top: 1px solid var(--line); }
.featured-item strong, .featured-item small { display: block; }
.featured-item strong { font-size: 0.8rem; line-height: 1.35; }
.featured-item small { margin-top: 5px; color: var(--muted); font-size: 0.67rem; }
.featured-item svg { width: 17px; height: 17px; color: var(--violet); }
.featured-mark { width: 42px; height: 42px; border-radius: 12px; }

.method-section {
  max-width: var(--content);
  margin: 0 auto;
  padding: 32px var(--gutter) 76px;
  display: grid;
  grid-template-columns: 225px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  scroll-margin-top: calc(var(--header) + 16px);
}
.filter-panel {
  position: sticky;
  top: calc(var(--header) + 20px);
  padding-right: 24px;
  border-right: 1px solid var(--line);
}
.filter-heading { display: flex; align-items: center; justify-content: space-between; }
.filter-heading h2 { margin: 0; font-size: 1.1rem; }
.filter-heading button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.74rem;
  cursor: pointer;
}
.filter-panel fieldset { margin: 24px 0 0; padding: 0; border: 0; }
.filter-panel legend { width: 100%; margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--line); font-size: 0.76rem; font-weight: 800; }
.filter-panel label {
  min-height: 31px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4f4d59;
  font-size: 0.76rem;
  cursor: pointer;
}
.filter-panel input { width: 15px; height: 15px; accent-color: var(--violet); }
.filter-swatch { width: 8px; height: 8px; border-radius: 3px; }
.method-results { min-width: 0; }
.method-results-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  padding-bottom: 18px;
}
.method-results-heading h2 { margin: 0; font-size: clamp(1.5rem, 2vw, 2rem); letter-spacing: -0.025em; }
.method-results-heading p { margin: 7px 0 0; color: var(--muted); font-size: 0.8rem; }
.sort-control { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.75rem; }
.sort-control select {
  min-height: 40px;
  padding: 0 34px 0 12px;
  border: 1px solid #dcd9e7;
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font-size: 0.76rem;
}
.method-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 18px;
  padding: 8px;
  border-radius: 14px;
  background: #f5f3fb;
}
.method-category-tab {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 0;
  border-radius: 10px;
  color: #4f4b5c;
  background: transparent;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}
.method-category-tab:hover { color: var(--violet-deep); background: #fff; }
.method-category-tab:active { transform: translateY(1px); }
.method-category-tab:focus-visible { outline: 3px solid rgba(110, 64, 255, 0.28); outline-offset: 2px; }
.method-category-tab.is-selected { color: #fff; background: #211a3e; }
.method-category-tab.is-selected:hover { color: #fff; background: var(--violet-deep); }
.category-tab-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 3px; }
.category-tab-dot.is-all { background: var(--violet); }
.method-category-tab.is-selected .category-tab-dot { box-shadow: 0 0 0 2px rgba(255,255,255,.42); }
.method-category-tab small {
  min-width: 20px;
  padding: 2px 5px;
  border-radius: 7px;
  color: #777185;
  background: rgba(255,255,255,.72);
  font-size: 0.64rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.method-category-tab.is-selected small { color: #211a3e; background: #fff; }
.active-filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
.active-filter-bar > span { color: var(--muted); font-size: 0.72rem; }
.active-filter-bar button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 1px solid #dcd8ec;
  border-radius: 9px;
  background: #f7f5ff;
  color: var(--violet-deep);
  font-size: 0.72rem;
  cursor: pointer;
}
.active-filter-bar svg { width: 13px; height: 13px; }
.method-list { border-top: 1px solid #dcdbe6; }
.method-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(260px, 2.3fr) minmax(120px, 0.8fr) 82px 96px minmax(125px, 0.9fr) 88px;
  gap: 14px;
  align-items: center;
  min-height: 92px;
  padding: 14px 6px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background 150ms ease;
}
.method-row:hover { background: #faf9ff; }
.method-row:hover .read-action svg { transform: translateX(3px); }
.method-row.is-leading { min-height: 126px; }
.method-mark { width: 42px; height: 42px; border-radius: 12px; }
.method-main { min-width: 0; }
.method-main > strong, .method-main > small { display: block; }
.method-category { display: inline-block; margin-bottom: 5px; color: var(--violet-deep); font-size: 0.68rem; font-weight: 750; }
.method-main > strong { font-size: 0.94rem; line-height: 1.35; }
.method-main > small { margin-top: 5px; color: var(--muted); font-size: 0.75rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.method-fit small, .method-fit strong, .method-meta small, .method-meta strong, .method-model small, .method-model strong { display: block; }
.method-fit small, .method-meta small, .method-model small { margin-bottom: 5px; color: #8b8998; font-size: 0.65rem; }
.method-fit strong, .method-meta strong, .method-model strong { color: #4a4854; font-size: 0.72rem; font-weight: 650; line-height: 1.45; }
.read-action { display: inline-flex; justify-content: flex-end; align-items: center; gap: 4px; color: var(--violet-deep); font-size: 0.72rem; font-weight: 750; white-space: nowrap; }
.read-action svg { width: 16px; height: 16px; }
.empty-state { padding: 90px 20px; text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.empty-state h3 { margin: 0; font-size: 1.4rem; }
.empty-state p { margin: 10px 0 20px; color: var(--muted); }
.empty-state button { min-height: 42px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--violet); color: #fff; font-weight: 750; cursor: pointer; }
.empty-actions { display: flex; justify-content: center; gap: 10px; }
.empty-actions a, .empty-actions button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 12px; padding: 0 18px; color: var(--ink); background: #fff; font-weight: 750; text-decoration: none; cursor: pointer; }
.empty-actions button { border-color: var(--violet); color: #fff; background: var(--violet); }

.starter-guide {
  max-width: calc(var(--content) - var(--gutter) * 2);
  margin: 0 auto 72px;
  padding: 30px 0;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(360px, 1.2fr);
  gap: 36px;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.starter-guide h2 { margin: 0; font-size: clamp(1.55rem, 2.2vw, 2.2rem); letter-spacing: -0.03em; }
.starter-guide > div p { max-width: 58ch; margin: 12px 0 0; color: var(--muted); line-height: 1.75; }
.starter-guide > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 20px;
  align-items: center;
  padding: 24px 26px;
  border-radius: 18px;
  background: #ece8ff;
  text-decoration: none;
}
.starter-guide > a:hover { background: #e5dfff; }
.starter-guide strong, .starter-guide small { display: block; }
.starter-guide strong { font-size: 1rem; }
.starter-guide small { margin-top: 7px; color: #6c6681; font-size: 0.75rem; }
.starter-guide svg { color: var(--violet); }

.ecosystem-next {
  padding: 58px max(var(--gutter), calc((100vw - var(--content)) / 2 + var(--gutter)));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
  background: #101017;
  color: #fff;
}
.ecosystem-next h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 3.1rem); }
.ecosystem-next p { max-width: 62ch; margin: 12px 0 0; color: #c8c5d2; line-height: 1.75; }
.ecosystem-next nav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ecosystem-next a { padding: 12px 15px; border: 1px solid #4c4858; border-radius: 12px; text-decoration: none; font-size: 0.78rem; font-weight: 700; }
.ecosystem-next a:hover { border-color: #fff; }
.site-footer {
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid #25242c;
  background: #101017;
  color: #aaa6b4;
  font-size: 0.72rem;
}
.site-footer a { color: inherit; }
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 100;
  max-width: min(90vw, 440px);
  padding: 12px 16px;
  border-radius: 12px;
  background: #15131c;
  color: #fff;
  font-size: 0.82rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.swatch-content { background: var(--violet); }
.swatch-design { background: var(--sky); }
.swatch-service { background: var(--cyan); }
.swatch-automation { background: var(--mint); }
.swatch-product { background: var(--sun); color: #2b2200; }
.swatch-education { background: var(--coral); }
.swatch-commerce { background: var(--rose); }
.swatch-game { background: var(--indigo); }

/* Article reading surface */
.article-page { background: #fff; }
.article-shell {
  max-width: 1380px;
  margin: 0 auto;
  padding: 34px var(--gutter) 84px;
}
.article-breadcrumb { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 0.76rem; }
.article-breadcrumb a { color: var(--violet-deep); text-decoration: none; }
.article-hero {
  margin-top: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 58px;
  align-items: end;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
.article-category { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--violet-deep); font-size: 0.78rem; font-weight: 800; }
.article-category::before { content: ""; width: 30px; height: 4px; border-radius: 4px; background: currentColor; }
.article-hero h1 { max-width: 900px; margin: 0; font-size: clamp(2.6rem, 5vw, 5rem); line-height: 1.02; letter-spacing: -0.04em; }
.article-deck { max-width: 72ch; margin: 20px 0 0; color: #575561; font-size: 1.05rem; line-height: 1.85; }
.article-quick-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.article-quick-actions button, .article-quick-actions a { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: .78rem; font-weight: 750; text-decoration: none; cursor: pointer; }
.article-quick-actions button { border-color: var(--violet); background: var(--violet); color: #fff; }
.article-quick-actions button:hover { background: var(--violet-deep); }
.article-quick-actions a:hover { border-color: #cfc7ff; color: var(--violet-deep); }
.article-facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #2a2931; }
.article-facts div { padding: 15px 0; border-bottom: 1px solid var(--line); }
.article-facts div:nth-child(odd) { padding-right: 16px; }
.article-facts div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.article-facts dt { color: var(--muted); font-size: 0.68rem; }
.article-facts dd { margin: 6px 0 0; font-size: 0.8rem; font-weight: 750; line-height: 1.45; }
.article-layout { display: grid; grid-template-columns: minmax(0, 780px) 260px; justify-content: space-between; gap: 70px; padding-top: 44px; }
.article-body { min-width: 0; }
.article-body section { padding: 0 0 44px; }
.article-body h2 { margin: 0 0 18px; font-size: clamp(1.55rem, 2.4vw, 2.25rem); letter-spacing: -0.03em; }
.article-body p { color: #4f4d58; font-size: 1rem; line-height: 1.9; }
.article-lead-box { padding: 25px 28px; border-radius: 18px; background: #f1efff; }
.article-lead-box strong { display: block; margin-bottom: 8px; font-size: 1.05rem; }
.article-lead-box p { margin: 0; }
.article-steps { margin: 0; padding: 0; list-style: none; counter-reset: article-step; }
.article-steps li { position: relative; min-height: 78px; padding: 2px 0 26px 58px; counter-increment: article-step; color: #4f4d58; line-height: 1.8; }
.article-steps li::before { content: counter(article-step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: #17151f; color: #fff; font-size: 0.78rem; font-weight: 800; }
.article-steps li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 41px; bottom: 2px; width: 1px; background: #d9d7e3; }
.article-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.article-list-panel { padding-top: 18px; border-top: 1px solid var(--line); }
.article-list-panel h3 { margin: 0 0 14px; font-size: 1rem; }
.article-list-panel ul { margin: 0; padding-left: 19px; color: #55535e; line-height: 1.8; }
.article-list-panel li + li { margin-top: 7px; }
.risk-panel h3 { color: var(--coral); }
.article-tools { display: flex; flex-wrap: wrap; gap: 10px; }
.article-tools a { padding: 10px 13px; border: 1px solid #dcd9e7; border-radius: 11px; color: var(--violet-deep); text-decoration: none; font-size: 0.78rem; font-weight: 700; }
.article-tools a:hover { border-color: var(--violet); background: #f6f3ff; }
.project-progress-panel { padding: 28px; border-radius: 20px; background: #101017; color: #fff; }
.project-progress-panel h2 { color: #fff; }
.project-progress-panel p { color: #c7c4d0; }
.project-progress-panel button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--violet); color: #fff; font-weight: 750; cursor: pointer; }
.project-progress-panel button:disabled { opacity: .48; cursor: not-allowed; }
.project-panel-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.project-panel-heading > div > span { color: #b7a8ff; font-size: .68rem; font-weight: 800; }
.project-panel-heading h2 { margin: 7px 0 0; }
.project-panel-heading p { margin: 8px 0 0; font-size: .82rem; }
.project-status { padding: 7px 10px; border: 1px solid #504c5b; border-radius: 9px; color: #d5d1de; font-size: .68rem; white-space: nowrap; }
.project-status.status-in_progress, .project-status.status-started { border-color: #6650d5; color: #d8ceff; }
.project-status.status-completed { border-color: #2d8a69; color: #9be0c8; }
.project-status.status-paused { border-color: #936f28; color: #f4d58f; }
.project-progress-list { margin: 22px 0; padding: 0; list-style: none; }
.project-progress-list li + li { margin-top: 8px; }
.project-progress-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: stretch; }
.project-progress-list button { width: 100%; min-height: 58px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; text-align: left; background: #282630; color: #fff; font-size: 0.78rem; font-weight: 600; }
.project-progress-list li.is-complete button { background: #174d3c; }
.project-progress-list button > span:first-child { flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #807c8c; border-radius: 7px; }
.project-progress-list button > span:last-child { min-width: 0; display: block; }
.project-progress-list button strong, .project-progress-list button small { display: block; }
.project-progress-list button small { margin-top: 4px; color: #bdb8c7; font-size: .66rem; font-weight: 500; line-height: 1.45; }
.project-progress-list nav { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; width: 124px; }
.project-progress-list nav a { padding: 5px 7px; border: 1px solid #484451; border-radius: 7px; color: #c9c3d4; text-decoration: none; font-size: .61rem; }
.project-progress-list nav a:hover { border-color: #8d79e8; color: #fff; }
.project-primary-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.project-primary-actions button.is-secondary, .project-primary-actions a { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; border: 1px solid #4b4754; border-radius: 12px; background: transparent; color: #ded9e5; text-decoration: none; font-size: .75rem; font-weight: 750; }
.project-primary-actions button.is-secondary:hover, .project-primary-actions a:hover { border-color: #9a84ff; color: #fff; }
.project-record { margin-top: 22px; padding-top: 18px; border-top: 1px solid #37333f; }
.project-record summary { cursor: pointer; color: #f2eff6; font-size: .82rem; font-weight: 800; }
.project-record summary span { margin-left: 7px; color: #a9a3b3; font-size: .65rem; font-weight: 600; }
.project-record form { margin-top: 17px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.project-record label { min-width: 0; color: #bbb5c5; font-size: .67rem; }
.project-record label.is-wide { grid-column: 1 / -1; }
.project-record input:not([type="checkbox"]), .project-record select, .project-record textarea { width: 100%; margin-top: 6px; padding: 10px 11px; border: 1px solid #4a4652; border-radius: 9px; outline: 0; background: #201e25; color: #fff; font-size: .75rem; }
.project-record input:focus, .project-record select:focus, .project-record textarea:focus { border-color: #9e89ff; }
.project-record textarea { resize: vertical; line-height: 1.6; }
.project-record form > button { justify-self: start; }
.project-ack { display: flex; align-items: flex-start; gap: 8px; color: #d5c89b !important; line-height: 1.6; }
.project-ack input { margin-top: 3px; accent-color: var(--violet); }
.project-evidence-list { margin: 18px 0 0; padding: 0; list-style: none; }
.project-evidence-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid #37333f; }
.project-evidence-list li > span { color: #a99bf0; font-size: .66rem; }
.project-evidence-list strong { font-size: .76rem; }
.project-evidence-list p { margin: 4px 0 0; color: #bdb7c6; font-size: .7rem; line-height: 1.55; }
.project-evidence-list a { display: inline-block; margin-top: 6px; color: #bbaeff; font-size: .68rem; }
.project-empty-note { margin: 14px 0 0 !important; font-size: .7rem !important; }
.article-aside { position: sticky; top: calc(var(--header) + 24px); align-self: start; }
.article-toc { padding: 18px 0; border-top: 1px solid #222129; border-bottom: 1px solid var(--line); }
.article-toc strong { display: block; margin-bottom: 12px; font-size: 0.76rem; }
.article-toc a { display: block; padding: 7px 0; color: var(--muted); font-size: 0.75rem; text-decoration: none; }
.article-toc a:hover { color: var(--violet-deep); }
.article-related { margin-top: 30px; }
.article-related h3 { margin: 0 0 10px; font-size: 0.86rem; }
.article-related a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.76rem; line-height: 1.5; text-decoration: none; }
.article-related a:hover { color: var(--violet-deep); }
.article-back { margin-top: 42px; display: flex; gap: 10px; flex-wrap: wrap; }
.article-back a { padding: 11px 14px; border-radius: 11px; background: #f1efff; color: var(--violet-deep); text-decoration: none; font-size: 0.78rem; font-weight: 700; }

.practice-lab { padding-bottom: 56px !important; }
.practice-lab-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
  padding-bottom: 22px;
}
.practice-lab-heading h2 { margin-bottom: 10px; }
.practice-lab-heading p { max-width: 69ch; margin: 0; }
.practice-lab-heading > span {
  min-width: 116px;
  padding: 10px 12px;
  border-radius: 11px;
  background: var(--sun);
  color: #2c2400;
  font-size: 0.76rem;
  font-weight: 850;
  text-align: center;
}
.practice-goal {
  padding: 23px 26px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 7px 24px;
  border-top: 1px solid #302e36;
  border-bottom: 1px solid var(--line);
  background: #fbfaff;
}
.practice-goal strong { grid-row: span 2; font-size: 0.84rem; }
.practice-goal p { margin: 0; color: #292731; font-weight: 700; }
.practice-goal small { color: var(--muted); font-size: 0.75rem; line-height: 1.6; }
.practice-kit-list { margin-top: 18px; border-top: 1px solid var(--line); }
.practice-kit-row { padding: 34px 0 40px; border-bottom: 1px solid var(--line); }
.practice-kit-media {
  margin: 0 0 28px;
  overflow: hidden;
  border-radius: 16px;
  background: #17151f;
}
.practice-kit-media img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.practice-kit-media figcaption { padding: 10px 13px 12px; color: #c8c5d1; font-size: 0.69rem; line-height: 1.55; }
.practice-kit-content > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.practice-kit-content > header span { color: var(--violet-deep); font-size: 0.7rem; font-weight: 800; }
.practice-kit-content h3 { margin: 5px 0 0; font-size: clamp(1.45rem, 2.4vw, 2rem); letter-spacing: -0.025em; }
.practice-kit-fit { padding: 7px 10px; border-radius: 9px; background: #f0edff; color: #4c2ec5; font-size: 0.7rem; white-space: nowrap; }
.practice-kit-summary { margin: 18px 0 0; color: #292731 !important; font-size: 1.02rem !important; font-weight: 700; line-height: 1.75 !important; }
.practice-kit-reason { margin: 10px 0 0; }
.practice-kit-metrics {
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #302e36;
  border-bottom: 1px solid var(--line);
}
.practice-kit-metrics > div { min-width: 0; padding: 14px 12px 15px 0; }
.practice-kit-metrics > div + div { padding-left: 12px; border-left: 1px solid var(--line); }
.practice-kit-metrics dt { color: var(--muted); font-size: 0.65rem; }
.practice-kit-metrics dd { margin: 6px 0 0; overflow-wrap: anywhere; color: #24222a; font-size: 0.78rem; font-weight: 800; line-height: 1.45; }
.practice-kit-output { margin-top: 22px; display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 18px; }
.practice-kit-output strong { font-size: 0.8rem; }
.practice-kit-output p { margin: 0; color: #302e36; font-size: 0.88rem; font-weight: 650; line-height: 1.7; }
.practice-kit-steps {
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 26px;
  list-style: none;
}
.practice-kit-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 11px; padding: 17px 0; border-top: 1px solid var(--line); }
.practice-kit-steps li > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #18161f; color: #fff; font-size: 0.7rem; font-weight: 850; }
.practice-kit-steps strong { display: block; font-size: 0.82rem; }
.practice-kit-steps p { margin: 5px 0 0; color: #55525e; font-size: 0.8rem; line-height: 1.65; }
.practice-kit-steps small { display: block; margin-top: 7px; color: #4a31a2; font-size: 0.7rem; font-weight: 650; line-height: 1.55; }
.practice-kit-warning { margin: 6px 0 0 !important; padding: 16px 18px; border-radius: 12px; background: #fff6e8; color: #60451a !important; font-size: 0.76rem !important; line-height: 1.7 !important; }
.practice-kit-actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.practice-kit-actions a {
  min-height: 41px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d3cee6;
  border-radius: 11px;
  color: #3f2f82;
  font-size: 0.75rem;
  font-weight: 800;
  text-decoration: none;
}
.practice-kit-actions a:hover { border-color: var(--violet); background: #f8f6ff; }
.practice-kit-actions a:focus-visible { outline: 3px solid rgba(110, 64, 255, 0.25); outline-offset: 2px; }
.practice-kit-actions a.is-primary { border-color: #211a3e; background: #211a3e; color: #fff; }
.practice-runbook { margin-top: 36px; padding: 30px; border-radius: 18px; background: #121118; color: #fff; }
.practice-runbook h3 { margin: 0; font-size: 1.25rem; }
.practice-runbook > div p { margin: 8px 0 0; color: #c7c3cf; font-size: 0.8rem; line-height: 1.65; }
.practice-runbook ol { margin: 25px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; list-style: none; }
.practice-runbook li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 13px; padding: 14px 0; border-top: 1px solid #35323e; }
.practice-runbook li span { color: #baaaff; font-size: 0.72rem; font-weight: 850; }
.practice-runbook li p { margin: 0; color: #f0edf5; font-size: 0.82rem; line-height: 1.7; }
.practice-acceptance { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.practice-acceptance section { padding: 19px 0 0 !important; border-top: 1px solid #2b2932; }
.practice-acceptance h3 { margin: 0 0 13px; font-size: 0.94rem; }
.practice-acceptance ul { margin: 0; padding-left: 19px; color: #55525e; font-size: 0.82rem; line-height: 1.75; }
.practice-acceptance li + li { margin-top: 7px; }

.article-hero.is-editorial h1 { font-size: clamp(2.6rem, 4vw, 4.2rem); }
.editorial-hero-media {
  margin: 0 0 46px;
  overflow: hidden;
  border-radius: 20px;
  background: #1d1d22;
}
.editorial-hero-media img {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}
.editorial-hero-media figcaption {
  padding: 12px 16px 14px;
  background: #1d1d22;
  color: #d0cdd7;
  font-size: 0.72rem;
  line-height: 1.6;
}
.editorial-opening { padding-bottom: 50px !important; }
.editorial-eyebrow {
  display: block;
  margin-bottom: 20px;
  color: var(--violet-deep);
  font-size: 0.76rem;
  font-weight: 800;
}
.editorial-opening > p:first-of-type {
  margin-top: 0;
  color: #26242c;
  font-size: 1.24rem;
  font-weight: 650;
  line-height: 1.75;
  letter-spacing: -0.01em;
}
.editorial-opening blockquote {
  margin: 34px 0 0;
  padding: 24px 0;
  border-top: 1px solid #24222a;
  border-bottom: 1px solid #d8d5df;
  color: #24222a;
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  font-weight: 850;
  line-height: 1.35;
  letter-spacing: -0.035em;
}
.editorial-section > p { max-width: 69ch; }
.editorial-evidence {
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 26px;
}
.editorial-evidence > div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.editorial-evidence span { color: var(--violet-deep); font-size: 0.7rem; font-weight: 850; }
.editorial-evidence p { margin: 0; color: #302e36; font-size: 0.86rem; font-weight: 650; line-height: 1.65; }
.source-proof {
  padding: 28px;
  border-radius: 20px;
  background: #f1efff;
}
.source-proof-heading { max-width: 64ch; }
.source-proof-heading > span { color: var(--violet-deep); font-size: 0.72rem; font-weight: 800; }
.source-proof-heading h3 { margin: 7px 0 0; font-size: 1.42rem; }
.source-proof-heading p { margin: 9px 0 0; font-size: 0.88rem; line-height: 1.7; }
.source-proof dl {
  margin: 25px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}
.source-proof dl > div { padding: 13px 0; border-top: 1px solid #d8d3ee; }
.source-proof dt { color: #6c6878; font-size: 0.68rem; }
.source-proof dd { margin: 5px 0 0; color: #24222a; font-size: 0.78rem; font-weight: 750; line-height: 1.5; }
.source-proof code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.source-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 9px; }
.source-actions a {
  min-height: 42px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c8c1e5;
  border-radius: 11px;
  color: #3f2f82;
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}
.source-actions a:hover { border-color: var(--violet); background: #fff; }
.source-actions a:active { transform: translateY(1px); }
.source-actions a.is-primary { border-color: #211a3e; background: #211a3e; color: #fff; }
.source-actions a.is-primary:hover { border-color: var(--violet-deep); background: var(--violet-deep); }

@media (max-width: 1240px) {
  .site-header { gap: 14px; }
  .site-nav { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
  .atlas-hero { grid-template-columns: minmax(300px, 0.72fr) minmax(560px, 1.6fr); gap: 28px; }
  .category-atlas { grid-template-rows: repeat(3, minmax(102px, 1fr)); }
  .atlas-zone { padding: 17px; }
  .zone-count { display: none; }
  .editorial-rail { margin-left: var(--gutter); margin-right: var(--gutter); }
  .method-row { grid-template-columns: 42px minmax(240px, 2fr) 115px 80px 90px 82px; }
  .method-model { display: none; }
  .article-layout { grid-template-columns: minmax(0, 1fr) 230px; gap: 45px; }
}

@media (max-width: 960px) {
  .site-header { grid-template-columns: auto minmax(0, 1fr) auto; }
  .atlas-hero { grid-template-columns: 1fr; padding-top: 34px; }
  .route-finder { margin-left: var(--gutter); margin-right: var(--gutter); }
  .route-finder-heading { grid-template-columns: 1fr; gap: 12px; }
  .route-finder-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-finder-form > button { grid-column: 1 / -1; }
  .route-results { grid-template-columns: 1fr; }
  .atlas-intro { max-width: 720px; }
  .atlas-intro h1 { font-size: clamp(3.4rem, 10vw, 5rem); }
  .category-atlas { grid-template-rows: none; }
  .atlas-zone { grid-column: span 6; min-height: 120px; }
  .editorial-rail { grid-template-columns: 1fr; }
  .editorial-rail header { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: baseline; }
  .featured-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured-item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .method-section { grid-template-columns: 1fr; }
  .filter-panel { position: static; padding: 18px; border: 1px solid var(--line); border-radius: 16px; }
  .filter-panel fieldset { display: inline-block; width: calc(33% - 10px); vertical-align: top; margin-right: 10px; }
  .method-row { grid-template-columns: 42px minmax(220px, 2fr) 110px 80px 82px; }
  .method-row .method-meta:nth-of-type(2) { display: none; }
  .starter-guide { margin-left: var(--gutter); margin-right: var(--gutter); grid-template-columns: 1fr; }
  .ecosystem-next { grid-template-columns: 1fr; }
  .ecosystem-next nav { justify-content: flex-start; }
  .article-hero { grid-template-columns: 1fr; }
  .article-facts { max-width: 640px; }
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { position: static; }
  .article-toc { display: flex; flex-wrap: wrap; gap: 8px 18px; }
  .article-toc strong { width: 100%; margin-bottom: 0; }
}

@media (max-width: 680px) {
  :root { --header: 64px; --gutter: 16px; }
  .site-header { gap: 12px; }
  .brand { font-size: 1.18rem; }
  .site-nav { order: 3; grid-column: 1 / -1; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); border-top: 1px solid var(--line); }
  .site-nav a { padding: 9px 8px; font-size: 0.73rem; }
  .site-header { height: auto; min-height: var(--header); padding-top: 10px; }
  .account-button { min-width: 64px; min-height: 36px; padding: 0 10px; }
  .atlas-hero { padding-top: 30px; }
  .route-finder { padding: 22px 18px; border-radius: 18px; }
  .route-finder-heading h2 { font-size: 1.65rem; }
  .route-finder-form { grid-template-columns: 1fr; }
  .atlas-intro h1 { font-size: clamp(3rem, 15vw, 4.5rem); }
  .atlas-intro > p:first-of-type { margin-top: 12px; }
  .search-box { min-height: 52px; }
  .search-box kbd { display: none; }
  .promise-note { margin-top: 18px !important; }
  .atlas-panel-heading { margin-top: 6px; }
  .category-atlas {
    display: flex;
    gap: 8px;
    margin-right: calc(var(--gutter) * -1);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .category-atlas::-webkit-scrollbar { display: none; }
  .atlas-zone { flex: 0 0 76vw; min-height: 138px; scroll-snap-align: start; }
  .zone-count { display: block; }
  .editorial-rail { margin-top: 8px; }
  .editorial-rail header { display: block; }
  .featured-list { grid-template-columns: 1fr; }
  .featured-item { border-left: 0; border-top: 1px solid var(--line); }
  .method-section { padding-top: 24px; }
  .filter-panel { overflow: hidden; }
  .filter-panel fieldset { display: block; width: 100%; margin: 18px 0 0; }
  .category-filter-list { display: grid; grid-template-columns: 1fr 1fr; }
  .method-results-heading { align-items: flex-start; }
  .sort-control { display: grid; gap: 4px; }
  .method-category-tabs {
    flex-wrap: nowrap;
    margin-right: calc(var(--gutter) * -1);
    padding-right: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .method-category-tabs::-webkit-scrollbar { display: none; }
  .method-category-tab { min-height: 44px; flex: 0 0 auto; scroll-snap-align: start; }
  .method-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 118px;
    padding: 16px 4px;
  }
  .method-row.is-leading { min-height: 132px; }
  .method-mark { width: 38px; height: 38px; }
  .method-fit, .method-meta, .method-model { display: none !important; }
  .read-action { align-self: center; font-size: 0; }
  .read-action svg { width: 20px; height: 20px; }
  .method-main > strong { font-size: 0.91rem; }
  .method-main > small { font-size: 0.73rem; }
  .starter-guide { margin-bottom: 48px; }
  .starter-guide > a { padding: 20px; }
  .ecosystem-next { padding-top: 42px; padding-bottom: 42px; }
  .ecosystem-next nav { display: grid; }
  .site-footer { align-items: flex-start; flex-direction: column; }
  .article-shell { padding-top: 24px; }
  .article-hero { margin-top: 20px; gap: 30px; }
  .article-hero h1 { font-size: clamp(2.25rem, 12vw, 3.6rem); }
  .article-deck { font-size: 0.98rem; }
  .article-columns { grid-template-columns: 1fr; }
  .article-facts { grid-template-columns: 1fr; }
  .article-facts div:nth-child(even) { padding-left: 0; border-left: 0; }
  .article-layout { padding-top: 32px; }
  .article-body section { padding-bottom: 36px; }
  .article-hero.is-editorial h1 { font-size: clamp(2.2rem, 11vw, 3.25rem); }
  .practice-lab-heading { grid-template-columns: 1fr; gap: 12px; align-items: start; }
  .practice-lab-heading > span { justify-self: start; }
  .practice-goal { grid-template-columns: 1fr; padding: 20px; }
  .practice-goal strong { grid-row: auto; }
  .practice-kit-row { padding-top: 28px; }
  .practice-kit-media { margin-bottom: 22px; border-radius: 13px; }
  .practice-kit-metrics { grid-template-columns: 1fr 1fr; }
  .practice-kit-metrics > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .practice-kit-metrics > div:nth-child(4) { border-top: 1px solid var(--line); }
  .practice-kit-output { grid-template-columns: 1fr; gap: 6px; }
  .practice-kit-steps { grid-template-columns: 1fr; }
  .practice-kit-actions { display: grid; grid-template-columns: 1fr; }
  .practice-kit-actions a { width: 100%; }
  .practice-runbook { padding: 23px 20px; border-radius: 15px; }
  .practice-acceptance { grid-template-columns: 1fr; gap: 22px; }
  .editorial-hero-media { margin-bottom: 34px; border-radius: 16px; }
  .editorial-hero-media figcaption { padding: 10px 12px 12px; }
  .editorial-opening > p:first-of-type { font-size: 1.08rem; }
  .editorial-opening blockquote { font-size: 1.55rem; }
  .editorial-evidence, .source-proof dl { grid-template-columns: 1fr; }
  .source-proof { padding: 22px; border-radius: 16px; }
  .source-actions { display: grid; grid-template-columns: 1fr; }
  .source-actions a { width: 100%; }
  .project-progress-panel { padding: 22px 18px; }
  .project-panel-heading { grid-template-columns: 1fr; gap: 10px; }
  .project-status { justify-self: start; }
  .project-progress-list li { grid-template-columns: 1fr; }
  .project-progress-list nav { width: auto; padding: 0 3px 6px; }
  .project-record form { grid-template-columns: 1fr; }
  .project-record label.is-wide { grid-column: auto; }
  .project-primary-actions { display: grid; }
  .project-primary-actions > * { width: 100%; justify-content: center; }
  .article-page .sl-companion-dock,
  .monetization-page .sl-companion-dock { width: 64px; min-height: 68px; display: block; }
  .article-page .sl-companion-character,
  .monetization-page .sl-companion-character { width: 64px; height: 64px; }
  .article-page .sl-companion-presence,
  .monetization-page .sl-companion-presence { left: -1px; bottom: -2px; min-height: 23px; padding: 0 7px; font-size: 10px; }
  .article-page .sl-companion-callout,
  .monetization-page .sl-companion-callout { display: none; }
}

.money-competition{position:relative;overflow:hidden;margin:38px auto 70px;padding:38px;border:1px solid rgba(225,185,91,.48);border-radius:26px;background:linear-gradient(135deg,#071c3f 0%,#0b2853 56%,#12325e 100%);color:#fff;box-shadow:0 30px 70px rgba(7,28,63,.2)}
.money-competition::after{content:"";position:absolute;right:-105px;top:-180px;width:460px;height:460px;border:1px solid rgba(247,212,126,.28);border-radius:50%;box-shadow:0 18px 55px rgba(0,0,0,.18),inset 0 0 0 42px rgba(225,185,91,.035),inset 0 0 0 86px rgba(225,185,91,.025);pointer-events:none}
.money-competition-heading{position:relative;z-index:2;display:flex;justify-content:space-between;gap:32px;align-items:end;padding-bottom:26px;border-bottom:1px solid rgba(247,212,126,.22)}.money-competition-heading>div>span{color:var(--gold-bright);font-size:12px;font-weight:850;letter-spacing:.08em}.money-competition-heading h2{max-width:760px;margin:8px 0 0;font-size:clamp(28px,3.4vw,46px);line-height:1.1;letter-spacing:-.035em}.money-competition-heading>p{max-width:430px;margin:0;color:#c7d5e7;line-height:1.75}.money-competition-layout{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);gap:28px;padding-top:28px}.money-competition-lead{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:390px;padding:38px;border:1px solid rgba(247,212,126,.42);border-radius:20px;background:linear-gradient(148deg,rgba(255,255,255,.1),rgba(255,255,255,.035));color:#fff;text-decoration:none;box-shadow:0 22px 46px rgba(0,0,0,.18)}
.money-competition-lead::before{content:"";position:absolute;z-index:-1;top:-42%;bottom:-42%;left:-48%;width:32%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,242,183,.48),rgba(255,255,255,.7),rgba(255,226,126,.42),transparent);animation:gold-opportunity-sweep 4.8s cubic-bezier(.16,1,.3,1) infinite;pointer-events:none}
.money-competition-state{color:var(--gold-bright);font-size:12px;font-weight:850}.money-prize-lockup{display:flex;align-items:end;gap:16px;margin:30px 0 4px}.money-prize-lockup strong{color:var(--gold-bright);font-size:clamp(70px,8vw,118px);font-weight:900;letter-spacing:-.07em;line-height:.78;text-shadow:0 8px 26px rgba(109,69,0,.38)}.money-prize-lockup span{padding-bottom:10px;color:#ffe9a7;font-size:clamp(16px,1.5vw,22px);font-weight:800}.money-prize-official{color:#aebed2;font-size:12px}.money-competition-lead h3{margin:28px 0 9px;font-size:clamp(23px,2.2vw,31px);line-height:1.25}.money-competition-lead p{max-width:68ch;margin:0;color:#d0ddec;line-height:1.75}.money-competition-action{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:auto;padding-top:28px;color:#fff;font-size:14px;font-weight:850}.money-competition-action b{padding:8px 10px;border-radius:9px;background:var(--gold-bright);color:#4d3400;font-size:12px}.money-competition-list{display:flex;flex-direction:column}.money-competition-list-title{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 12px;color:#fff}.money-competition-list-title strong{font-size:17px}.money-competition-list-title span{color:#99aec8;font-size:11px}.money-competition-list>a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;padding:19px 4px;border-bottom:1px solid rgba(199,213,231,.18);color:#fff;text-decoration:none}.money-competition-list>a:hover strong{color:var(--gold-bright)}.money-competition-list>a>span{display:flex;flex-direction:column;gap:5px}.money-competition-list>a>span:last-child{text-align:right}.money-competition-list strong{font-size:15px}.money-competition-list b{color:var(--gold-bright);font-size:20px}.money-competition-list small{color:#9fb0c7;font-size:11px}.money-competition-list .money-competition-all{display:block;margin-top:auto;border-bottom:0;color:var(--gold-bright);font-weight:850}.money-competition>footer{position:relative;z-index:2;display:flex;justify-content:space-between;padding-top:22px;color:#91a5bf;font-size:11px}.money-competition-loading{padding:48px;text-align:center;color:#c7d5e7}
@media(max-width:820px){.money-competition-heading{align-items:flex-start;flex-direction:column}.money-competition-layout{grid-template-columns:1fr}.money-competition>footer{align-items:flex-start;flex-direction:column;gap:5px}}
@media(max-width:560px){.money-competition{margin:20px auto 48px;padding:22px;border-radius:19px}.money-competition-lead{min-height:360px;padding:25px}.money-prize-lockup{align-items:flex-start;flex-direction:column;gap:6px;margin-top:28px}.money-prize-lockup strong{font-size:76px}.money-prize-lockup span{padding:0}.money-competition-list>a{grid-template-columns:1fr}.money-competition-list>a>span:last-child{text-align:left}}

@keyframes gold-opportunity-sweep{0%,58%{transform:translateX(0) skewX(-18deg);opacity:0}64%{opacity:1}88%,100%{transform:translateX(560%) skewX(-18deg);opacity:0}}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}