/* Homepage-compatible visual baseline. Keep page content factual and calm. */
:root {
  --ux-ink: #273338;
  --ux-muted: #60757a;
  --ux-soft: #84959a;
  --ux-cyan: #2ebabc;
  --ux-cyan-dark: #238f93;
  --ux-blue: #438cff;
  --ux-paper: #f8fbfb;
  --ux-line: rgba(39, 51, 56, .14);
  --ux-gutter: clamp(24px, 6vw, 88px);
  --ux-max: 1240px;
  --mouse-x: 0;
  --mouse-y: 0;
  --pointer-x: 50vw;
  --pointer-y: 50vh;
  --click-lift: 0;
  --layout-scale: 1;
  --band-angle: 20.4deg;
  --diagonal-band-thickness: calc(109px * var(--layout-scale));
  --lower-band-thickness: calc(92px * var(--layout-scale));
}

@keyframes ux-cue-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

html,
body {
  max-width: 100%;
}

body.resource-page,
body.not-found-page {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--ux-ink);
  background: var(--ux-paper);
  font-family: "HarmonyOS Embedded", "HarmonyOS Sans SC Medium", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
}

body.resource-page .site-footer,
body.not-found-page .site-footer {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* Resource pages use the same two-band composition as the home hero. */
body.resource-page .resource-hero,
body.not-found-page .error-hero {
  position: relative;
  display: block;
  min-height: max(680px, 100svh);
  overflow: hidden;
  isolation: isolate;
  background: #fff;
}

body.resource-page .resource-scene,
body.not-found-page .error-bands {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: auto;
}

body.resource-page .resource-scene::before,
body.resource-page .resource-scene::after,
body.not-found-page .error-bands::before,
body.not-found-page .error-bands::after {
  position: absolute;
  display: block;
  content: "";
  pointer-events: none;
  will-change: transform;
}

body.resource-page .resource-scene::before,
body.not-found-page .error-bands::before {
  top: 50%;
  left: 50%;
  width: max(130vw, calc(100vw + 60vh));
  height: clamp(96px, 9.2vw, 154px);
  background: linear-gradient(90deg, #f7fefe 0%, #e5fbfb 28%, #c8f7f7 48%, #9bf0f1 66%, #6be8e9 82%, #45e0e1 100%);
  box-shadow: 0 20px 46px rgba(46, 186, 188, .1);
  transform: translate3d(calc(-50% + var(--scene-shift-x, 0px)), calc(-50% + var(--scene-shift-y, 0px)), 0) rotate(20.4deg);
  transform-origin: center;
}

body.resource-page .resource-scene::after,
body.not-found-page .error-bands::after {
  right: -2%;
  bottom: 0;
  left: 37.5%;
  height: clamp(68px, 7.2vw, 112px);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #f2fdfd 22%, #dbfafa 44%, #acf2f3 68%, #4fe2e3 100%);
  transform: translate3d(var(--scene-shift-x, 0px), 0, 0);
}

body.resource-page .resource-scene::before,
body.resource-page .resource-scene::after {
  transition: transform .2s ease-out;
}

body.resource-page .resource-scene .scene-glow,
body.not-found-page .error-bands .pointer-light {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: clamp(180px, 25vw, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.42), rgba(255,255,255,0) 70%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--site-pointer-x-px, -1000px) - 50%), calc(var(--site-pointer-y-px, -1000px) - 50%), 0);
  transition: opacity .16s ease;
}

html[data-site-pointer-active="true"] body.resource-page .resource-scene .scene-glow,
html[data-site-pointer-active="true"] body.not-found-page .error-bands .pointer-light {
  opacity: .56;
}

body.resource-page .resource-hero-content {
  position: relative;
  z-index: 4;
  display: block;
  width: 100%;
  min-height: inherit;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body.resource-page .resource-hero .copy-stage,
body.not-found-page .error-hero .copy-stage {
  position: absolute;
  top: clamp(92px, 12vh, 164px);
  right: var(--ux-gutter);
  width: min(760px, calc(100% - var(--ux-gutter) * 2));
  text-align: right;
}

body.resource-page .resource-hero .copy-stage .title,
body.not-found-page .error-hero .copy-stage .title {
  max-width: 100%;
  color: var(--ux-ink);
  font-size: clamp(76px, 10.2vw, 156px);
  font-weight: 500;
  line-height: .95;
  text-wrap: balance;
}

body.resource-page .resource-hero .copy-stage .subtitle,
body.not-found-page .error-hero .copy-stage .subtitle {
  max-width: 100%;
  margin-top: clamp(28px, 4vw, 52px);
  color: var(--ux-ink);
  font-size: clamp(26px, 3.65vw, 58px);
  font-weight: 500;
  line-height: 1.12;
  white-space: normal;
  text-wrap: balance;
}

body.resource-page .resource-hero-note,
body.not-found-page .error-actions {
  position: absolute;
  z-index: 5;
  right: auto;
  bottom: clamp(96px, 13vh, 164px);
  left: var(--ux-gutter);
  width: min(560px, calc(100% - var(--ux-gutter) * 2));
  color: var(--ux-muted);
  text-align: left;
}

body.resource-page .resource-hero-note {
  padding-left: 16px;
  border-left: 2px solid rgba(46,186,188,.55);
}

body.resource-page .resource-hero-note strong,
body.resource-page .resource-hero-note .hero-note-copy,
body.resource-page .resource-hero-note .hero-join-hint {
  display: block;
}

body.resource-page .resource-hero-note strong {
  color: #236b70;
  font-size: clamp(14px, 1.35vw, 18px);
  font-weight: 600;
  line-height: 1.4;
}

body.resource-page .resource-hero-note .hero-note-copy {
  margin-top: 8px;
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.7;
}

body.resource-page .resource-hero-note .hero-join-hint {
  margin-top: 6px;
  color: #789095;
  font-size: clamp(12px, 1.05vw, 14px);
  line-height: 1.6;
}

body.resource-page .resource-hero-actions,
body.not-found-page .error-actions .action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px 14px;
  margin-top: 18px;
}

body.resource-page .resource-scroll-cue,
body.not-found-page .error-hero .scroll-cue {
  position: absolute;
  z-index: 6;
  right: auto;
  bottom: 24px;
  left: 50%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 92px;
  padding: 8px 12px 7px;
  border: 0;
  border-bottom: 2px solid var(--ux-cyan);
  border-radius: 0;
  color: var(--ux-muted);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}

body.resource-page .resource-scroll-cue > span[aria-hidden="true"],
body.not-found-page .error-hero .scroll-cue > span[aria-hidden="true"] {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(46, 186, 188, .28);
  border-radius: 50%;
  color: var(--ux-cyan-dark);
  font-size: 18px;
  line-height: 1;
}

body.resource-page .resource-scroll-cue:hover,
body.not-found-page .error-hero .scroll-cue:hover {
  color: var(--ux-cyan-dark);
  border-bottom-color: var(--ux-blue);
  transform: translateX(-50%) translateY(-2px);
}

body.resource-page .resource-scroll-cue:hover > span[aria-hidden="true"],
body.not-found-page .error-hero .scroll-cue:hover > span[aria-hidden="true"] {
  border-color: rgba(67, 140, 255, .42);
}

/* Content below the hero keeps the same white paper, rule lines and scale. */
body.resource-page .content-section {
  position: relative;
  padding: clamp(76px, 9vw, 136px) 0;
  border-top: 1px solid var(--ux-line);
  background: var(--ux-paper);
}

body.resource-page .content-section:nth-of-type(even) {
  background: #fff;
}

body.resource-page .content-inner {
  width: min(var(--ux-max), calc(100% - var(--ux-gutter) * 2));
  margin: 0 auto;
}

body.resource-page .content-header {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  align-items: end;
  gap: clamp(28px, 6vw, 96px);
  margin-bottom: clamp(40px, 5vw, 68px);
}

body.resource-page .content-kicker {
  display: none;
}

body.resource-page .content-title {
  margin: 0;
  color: var(--ux-ink);
  font-size: clamp(40px, 5.3vw, 78px);
  font-weight: 500;
  line-height: 1.04;
  text-wrap: balance;
}

body.resource-page .content-lede,
body.resource-page .prose {
  max-width: 760px;
  margin: 0;
  color: var(--ux-muted);
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.8;
  text-wrap: pretty;
}

body.resource-page .content-grid,
body.resource-page .fact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--ux-line);
  border-bottom: 1px solid var(--ux-line);
}

body.resource-page .content-card,
body.resource-page .fact-card {
  min-width: 0;
  min-height: 142px;
  padding: clamp(24px, 3vw, 38px) clamp(18px, 2.5vw, 32px);
  border: 0;
  border-right: 1px solid var(--ux-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.resource-page .content-card:first-child,
body.resource-page .fact-card:first-child { padding-left: 0; }

body.resource-page .content-card:last-child,
body.resource-page .fact-card:last-child {
  padding-right: 0;
  border-right: 0;
}

body.resource-page .fact-card .fact-value {
  display: block;
  color: var(--ux-cyan-dark);
  font-size: clamp(32px, 3.5vw, 56px);
  font-weight: 500;
  line-height: 1;
  overflow-wrap: anywhere;
}

body.resource-page .fact-card .fact-label {
  display: block;
  margin-top: 14px;
  color: var(--ux-muted);
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.5;
}

body.resource-page .guide-list,
body.resource-page .release-list {
  display: grid;
  border-top: 1px solid var(--ux-line);
}

body.resource-page .guide-step {
  display: grid;
  grid-template-columns: 52px minmax(220px, .72fr) minmax(300px, 1.28fr);
  align-items: start;
  gap: clamp(18px, 2.5vw, 36px);
  min-height: 0;
  margin-bottom: 12px;
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--ux-line);
  border-radius: 6px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 24px rgba(35, 78, 81, .045);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

body.resource-page .guide-step:hover {
  border-color: rgba(46, 186, 188, .34);
  box-shadow: 0 16px 32px rgba(35, 123, 132, .09);
  transform: translateY(-2px);
}

body.resource-page .step-number {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(46, 186, 188, .3);
  border-radius: 50%;
  color: var(--ux-cyan-dark);
  background: rgba(46, 186, 188, .045);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .08em;
}

body.resource-page .guide-step h3 {
  margin: 0;
  color: var(--ux-ink);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}

body.resource-page .guide-step p {
  margin: 10px 0 0;
  color: var(--ux-muted);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.72;
  text-wrap: pretty;
}

body.resource-page .media-frame {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ux-line);
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(35, 78, 81, .06);
}

body.resource-page .media-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 300px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #fff;
}

body.resource-page .media-caption {
  padding: 11px 14px 13px;
  color: var(--ux-muted);
  font-size: 13px;
  line-height: 1.5;
}

body.resource-page .media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 28px);
}

body.resource-page .release-layout {
  display: grid;
  grid-template-columns: minmax(150px, .28fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(30px, 6vw, 92px);
  padding-top: 1px;
  border-top: 1px solid var(--ux-line);
}

/* Download details should show the archive first, then the practical next step. */
body.download-page .release-layout {
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
}

body.download-page .release-mark {
  display: none;
}

body.download-page .release-version {
  font-size: clamp(42px, 5vw, 72px);
}

body.download-page .release-layout > div:last-child {
  min-width: 0;
}

body.download-page .release-next-steps {
  padding: clamp(18px, 2.8vw, 28px);
  border: 1px solid var(--ux-line);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

body.download-page .release-next-eyebrow {
  margin: 0 0 14px;
  color: var(--ux-cyan-dark);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.download-page .release-next-list {
  margin: 0;
  padding-left: 1.2em;
  color: var(--ux-muted);
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.78;
}

body.download-page .release-next-list li + li {
  margin-top: 10px;
}

body.resource-page .release-mark {
  display: grid;
  place-items: center;
  width: min(170px, 100%);
  aspect-ratio: 1;
  padding: 14px;
  border: 1px solid var(--ux-line);
  border-radius: 0;
  background: #fff;
}

body.resource-page .release-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

body.resource-page .release-version {
  margin: 0;
  color: var(--ux-ink);
  font-size: clamp(34px, 4.2vw, 62px);
  font-weight: 500;
  line-height: 1;
}

body.resource-page .release-meta {
  margin-top: 12px;
  color: var(--ux-muted);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
}

body.resource-page .release-entry {
  display: grid;
  grid-template-columns: minmax(130px, .32fr) minmax(0, 1fr);
  gap: clamp(18px, 4vw, 68px);
  padding: clamp(24px, 3.2vw, 42px) 0;
  border-bottom: 1px solid var(--ux-line);
}

body.resource-page .release-entry time {
  color: var(--ux-soft);
  font-size: 16px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

body.resource-page .release-entry h3 {
  margin: 0;
  color: var(--ux-ink);
  font-size: clamp(24px, 2.3vw, 36px);
  font-weight: 500;
  line-height: 1.2;
}

body.resource-page .release-changes {
  margin: 12px 0 0;
  padding-left: 1.15em;
  color: var(--ux-muted);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.72;
}

body.resource-page .code-value {
  display: block;
  max-width: 100%;
  margin-top: 14px;
  padding: 11px 13px;
  overflow-wrap: anywhere;
  border: 1px solid var(--ux-line);
  border-radius: 0;
  color: #37686d;
  background: #fff;
  font: 500 clamp(11px, 1.05vw, 14px)/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* Resource steps without screenshots (download/install instructions) stay compact. */
body.download-page .guide-step {
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
}

body.download-page .guide-step > div {
  min-width: 0;
}

body.download-page .guide-step h3 {
  max-width: 26ch;
}

/* Rules keeps its own markup, but shares the same calm hero proportions. */
body.rules-page .hero {
  min-height: max(680px, calc(100svh - var(--site-nav-height)));
  padding: clamp(92px, 12vh, 164px) var(--ux-gutter) 118px;
}

body.rules-page .hero h1 {
  max-width: min(760px, calc(100% - var(--ux-gutter) * 2));
  font-size: clamp(76px, 10.2vw, 156px);
  line-height: .95;
}

body.rules-page .hero .hero-copy {
  max-width: min(620px, calc(100% - var(--ux-gutter) * 2));
  margin-top: clamp(28px, 4vw, 52px);
  margin-bottom: 22px;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.7;
}

body.rules-page .hero-meta {
  max-width: min(760px, calc(100% - var(--ux-gutter) * 2));
}

body.rules-page .rules-band-main {
  top: 50%;
  left: 50%;
  width: max(130vw, calc(100vw + 60vh));
  height: clamp(96px, 9.2vw, 154px);
  opacity: .72;
  transform: translate(-50%, -50%) rotate(20.4deg);
}

body.rules-page .rules-band-lower {
  right: -2%;
  bottom: 0;
  left: 37.5%;
  width: auto;
  height: clamp(68px, 7.2vw, 112px);
  opacity: .62;
}

/* No directional glyphs inside commands; the underline carries the action. */
body.resource-page .action-link > span[aria-hidden="true"],
body.not-found-page .action-link > span[aria-hidden="true"],
body.mods-page .action-link > span[aria-hidden="true"],
body.history-page .action-link > span[aria-hidden="true"],
body.join-page .action-link > span[aria-hidden="true"],
body.rules-page .action-link > span[aria-hidden="true"],
body.resource-page .card-link > span[aria-hidden="true"],
body.mods-page .mod-card-link > span[aria-hidden="true"],
body.resource-page .mod-card-link > span[aria-hidden="true"] {
  display: none !important;
}

/* Keep hover light local to a real pointer. Nothing glows on touch or idle. */
html:not([data-site-pointer-active="true"]) .diagonal-band::before,
html:not([data-site-pointer-active="true"]) .lower-band-surface::before,
html:not([data-site-pointer-active="true"]) .resource-scene::before,
html:not([data-site-pointer-active="true"]) .resource-scene::after {
  --pointer-sheen-opacity: 0;
}

.diagonal-band::before,
.lower-band-surface::before {
  animation: none !important;
  opacity: var(--pointer-sheen-opacity, 0);
  transform: translate3d(var(--site-sheen-shift-x, 0px), 0, 0) !important;
  transition: opacity .18s ease;
}

html[data-site-pointer-active="true"] .diagonal-band::before,
html[data-site-pointer-active="true"] .lower-band-surface::before {
  opacity: .65;
}

/* Bridge older page-specific markup to the same paper/line system. */
body.mods-page,
body.history-page,
body.join-page,
body.rules-page {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--ux-ink);
  background: var(--ux-paper);
  font-family: "HarmonyOS Embedded", "HarmonyOS Sans SC Medium", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
}

body.mods-page .mods-summary,
body.history-page .overview-grid,
body.join-page .process-grid,
body.join-page .community-grid {
  min-width: 0;
}

body.mods-page .mods-fact,
body.mods-page .mods-origin,
body.mods-page .adaptation-item,
body.mods-page .mod-card,
body.history-page .history-fact,
body.history-page .current-stat,
body.join-page .community-card,
body.join-page .requirement,
body.rules-page .rule-card {
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.mods-page .mod-card,
body.mods-page .adaptation-item,
body.join-page .community-card,
body.join-page .requirement,
body.rules-page .rule-card {
  background: rgba(255,255,255,.72) !important;
}

body.mods-page .mod-card:hover,
body.mods-page .adaptation-item:hover,
body.join-page .community-card:hover,
body.rules-page .rule-card:hover {
  transform: none !important;
  background: rgba(46,186,188,.035) !important;
}

body.history-page .history-fact strong,
body.history-page .current-stat strong,
body.mods-page .mods-fact strong {
  color: var(--ux-cyan-dark) !important;
}

body.rules-page .rule-tools,
body.rules-page .print-button {
  display: none !important;
}

body.rules-page .rule-card {
  border-right: 0 !important;
  border-left: 0 !important;
  border-top: 1px solid var(--ux-line) !important;
}

body.rules-page .rule-card:last-child {
  border-bottom: 1px solid var(--ux-line) !important;
}

body.rules-page .rule-number {
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--ux-cyan-dark) !important;
  background: transparent !important;
}

body.join-page .community-grid {
  align-items: start;
  gap: clamp(14px, 2vw, 22px) !important;
  background: transparent !important;
}

body.join-page .community-card {
  min-height: 0 !important;
  padding: clamp(24px, 3vw, 34px) !important;
  border: 1px solid var(--ux-line) !important;
  border-radius: 4px !important;
  box-shadow: 0 12px 28px rgba(35, 78, 81, .045) !important;
}

body.join-page .community-card .card-link {
  margin-top: 20px !important;
  padding-top: 0 !important;
}

body.mods-page .site-footer,
body.history-page .site-footer,
body.join-page .site-footer,
body.rules-page .site-footer {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
}

@media (max-width: 920px) {
  body.resource-page .content-header { grid-template-columns: 1fr; align-items: start; }
  body.resource-page .content-grid,
  body.resource-page .fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.resource-page .content-card:nth-child(2n),
  body.resource-page .fact-card:nth-child(2n) { border-right: 0; }
  body.resource-page .content-card:nth-child(n+3),
  body.resource-page .fact-card:nth-child(n+3) { border-top: 1px solid var(--ux-line); }
  body.resource-page .guide-step { grid-template-columns: 58px minmax(0, 1fr); }
  body.resource-page .guide-step .media-frame { grid-column: 2; }
  body.resource-page .release-layout { grid-template-columns: 1fr; }
  body.download-page .release-layout { grid-template-columns: 1fr; }
  body.resource-page .release-mark { width: 132px; }
  body.download-page .release-next-steps { padding: 20px; }
}

@media (max-width: 620px) {
  :root { --ux-gutter: 20px; }

  body.resource-page .resource-hero,
  body.not-found-page .error-hero { min-height: 720px; }

  body.resource-page .resource-scene::before,
  body.not-found-page .error-bands::before {
    height: clamp(118px, 30vw, 170px);
  }

  body.resource-page .resource-scene::after,
  body.not-found-page .error-bands::after {
    left: 28%;
    height: clamp(76px, 22vw, 112px);
  }

  body.resource-page .resource-hero .copy-stage,
  body.not-found-page .error-hero .copy-stage {
    top: 106px;
    right: var(--ux-gutter);
    width: calc(100% - var(--ux-gutter) * 2);
  }

  body.resource-page .resource-hero .copy-stage .title,
  body.not-found-page .error-hero .copy-stage .title {
    font-size: clamp(60px, 18vw, 104px);
  }

  body.resource-page .resource-hero .copy-stage .subtitle,
  body.not-found-page .error-hero .copy-stage .subtitle {
    margin-top: 25px;
    font-size: clamp(22px, 6.5vw, 38px);
  }

  body.resource-page .resource-hero-note,
  body.not-found-page .error-actions {
    right: var(--ux-gutter);
    bottom: 92px;
    left: var(--ux-gutter);
    width: auto;
    max-width: none;
  }

  body.resource-page .content-section { padding: 68px 0; }
  body.resource-page .content-grid,
  body.resource-page .fact-grid,
  body.resource-page .media-grid { grid-template-columns: 1fr; }
  body.resource-page .content-card,
  body.resource-page .fact-card { border-right: 0; border-top: 1px solid var(--ux-line); }
  body.resource-page .content-card:first-child,
  body.resource-page .fact-card:first-child { border-top: 0; padding-left: 0; }
  body.resource-page .content-card:last-child,
  body.resource-page .fact-card:last-child { padding-right: 0; }
  body.resource-page .guide-step { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  body.resource-page .guide-step .media-frame { grid-column: 2; }
  body.resource-page .release-entry { grid-template-columns: 1fr; gap: 10px; }
  body.resource-page .media-frame img { max-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  body.resource-page .resource-scene::before,
  body.resource-page .resource-scene::after,
  body.not-found-page .error-bands::before,
  body.not-found-page .error-bands::after,
  .diagonal-band::before,
  .lower-band-surface::before { transition: none !important; animation: none !important; }
}

/* Keep resource-page columns aligned with the homepage, mods and history
   templates. The previous 0.78 / 1.22 split made long mixed-script titles
   collapse into narrow stacks beside an oversized paragraph. */
@media (min-width: 921px) {
  body.resource-page .content-header {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(56px, 8vw, 128px);
  }

  body.resource-page .content-header > :first-child,
  body.resource-page .content-header > .content-lede {
    min-width: 0;
  }

  body.resource-page .content-header > .content-lede {
    max-width: 680px;
    justify-self: end;
  }
}

/* UA heading margins were leaking into the absolute hero copy and creating a
   false gap between the title and subtitle. Hero spacing is explicit here. */
body.resource-page .resource-hero .copy-stage .title,
body.not-found-page .error-hero .copy-stage .title,
body.rules-page .rules-title-stage h1 {
  margin: 0 !important;
}

body.resource-page .resource-hero .copy-stage .subtitle,
body.not-found-page .error-hero .copy-stage .subtitle,
body.rules-page .rules-title-stage .rules-subtitle {
  margin: clamp(10px, 1.5vw, 20px) 0 0 !important;
}

/* Latin titles carry less visual mass than the Chinese display face. Keep
   their measure stable at wide resolutions instead of allowing overflow. */
html[data-site-lang="en"] body.resource-page .resource-hero .copy-stage .title,
html[data-site-lang="en"] body.not-found-page .error-hero .copy-stage .title,
html[data-site-lang="en"] body.rules-page .rules-title-stage h1 {
  font-size: clamp(58px, 7.2vw, 112px);
}

html[data-site-lang="en"] body.resource-page .resource-hero .copy-stage .subtitle,
html[data-site-lang="en"] body.not-found-page .error-hero .copy-stage .subtitle,
html[data-site-lang="en"] body.rules-page .rules-title-stage .rules-subtitle {
  font-size: clamp(24px, 3vw, 48px);
}

@media (max-width: 620px) {
  html[data-site-lang="en"] body.resource-page .resource-hero .copy-stage .title,
  html[data-site-lang="en"] body.not-found-page .error-hero .copy-stage .title,
  html[data-site-lang="en"] body.rules-page .rules-title-stage h1 {
    font-size: clamp(40px, 13vw, 72px);
  }

  html[data-site-lang="en"] body.resource-page .resource-hero .copy-stage .subtitle,
  html[data-site-lang="en"] body.not-found-page .error-hero .copy-stage .subtitle,
  html[data-site-lang="en"] body.rules-page .rules-title-stage .rules-subtitle {
    font-size: clamp(20px, 5.8vw, 32px);
  }
}

/* Resource heroes follow the actual home/mods/history composition: title at
   the upper right, factual actions and notes at the lower left. */
body.resource-page .resource-hero .copy-stage,
body.not-found-page .error-hero .copy-stage {
  top: clamp(108px, 13vh, 148px);
  right: clamp(28px, 7vw, 120px);
  width: min(920px, 76vw);
}

body.resource-page .resource-hero .copy-stage .subtitle,
body.not-found-page .error-hero .copy-stage .subtitle {
  margin-top: clamp(10px, 1.5vw, 20px);
}

body.resource-page .resource-hero-note,
body.not-found-page .error-actions {
  right: auto;
  bottom: clamp(105px, 14vh, 150px);
  left: clamp(28px, 7vw, 120px);
  width: min(520px, 44vw);
  padding-right: 0;
  padding-left: 18px;
  border-right: 0;
  border-left: 2px solid rgba(46,186,188,.5);
  text-align: left;
}

body.resource-page .resource-hero-note strong,
body.resource-page .resource-hero-note .hero-note-copy,
body.resource-page .resource-hero-note .hero-join-hint {
  max-width: 100%;
}

body.resource-page .resource-hero-actions,
body.not-found-page .error-actions .action-row {
  justify-content: flex-start;
}

/* The scene itself owns its sheen. The shared shell may still track the
   pointer for title lights, but it must not make a resource band glow at rest. */
body.resource-page .bands-reveal .diagonal-band::before,
body.resource-page .bands-reveal .lower-band-surface::before,
body.rules-page .bands-reveal .diagonal-band::before,
body.rules-page .bands-reveal .lower-band-surface::before,
body.not-found-page .bands-reveal .diagonal-band::before,
body.not-found-page .bands-reveal .lower-band-surface::before {
  opacity: 0 !important;
}

body.resource-page .bands-reveal.scene-has-pointer .diagonal-band::before,
body.resource-page .bands-reveal.scene-has-pointer .lower-band-surface::before,
body.rules-page .bands-reveal.scene-has-pointer .diagonal-band::before,
body.rules-page .bands-reveal.scene-has-pointer .lower-band-surface::before,
body.not-found-page .bands-reveal.scene-has-pointer .diagonal-band::before,
body.not-found-page .bands-reveal.scene-has-pointer .lower-band-surface::before {
  opacity: .62 !important;
}

/* Home's client snapshot is a quiet overview, not a second hero. */
body.home-page .latest-release-preview {
  padding: clamp(68px, 8vw, 112px) 0;
  border-top: 1px solid var(--ux-line);
  background: var(--ux-paper);
}

body.home-page .latest-release-preview .content-inner {
  width: min(var(--ux-max), calc(100% - var(--ux-gutter) * 2));
  margin: 0 auto;
}

body.home-page .latest-release-preview .content-header {
  grid-template-columns: minmax(0, .4fr) minmax(0, .6fr);
  gap: clamp(26px, 5vw, 74px);
  align-items: end;
  margin-bottom: clamp(30px, 4vw, 48px);
}

body.home-page .latest-release-preview .content-kicker {
  display: inline-flex;
  margin-bottom: 12px;
  color: var(--ux-cyan-dark);
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.3;
}

body.home-page .latest-release-preview .content-kicker::before {
  width: 28px;
  height: 2px;
  background: var(--ux-cyan);
}

body.home-page .latest-release-preview .content-title {
  max-width: 16ch;
  font-size: clamp(38px, 5vw, 70px);
  line-height: 1.04;
}

body.home-page .latest-release-preview .content-lede {
  max-width: 680px;
  margin: 0 0 2px auto;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.72;
  text-wrap: pretty;
}

body.home-page .latest-release-preview .fact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.35vw, 18px);
  border: 0;
}

body.home-page .latest-release-preview .fact-card {
  min-height: 148px;
  padding: clamp(22px, 2.5vw, 32px) clamp(20px, 2.2vw, 30px);
  border: 1px solid rgba(39,51,56,.11);
  border-radius: 6px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 28px rgba(35,78,81,.055);
}

body.home-page .latest-release-preview .fact-card:first-child,
body.home-page .latest-release-preview .fact-card:last-child {
  padding-left: clamp(20px, 2.2vw, 30px);
  padding-right: clamp(20px, 2.2vw, 30px);
}

body.home-page .latest-release-preview .fact-value {
  overflow-wrap: normal;
  white-space: nowrap;
}

body.home-page .latest-release-preview .fact-label {
  margin-top: 11px;
}

body.home-page .latest-release-preview .release-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 24px;
}

/* Keep the home sections in a predictable paper/white rhythm. Classes are
   intentional: section order can change without re-counting every sibling. */
body.home-page .section-tone-light {
  background: #fff !important;
}

body.home-page .section-tone-muted {
  background: var(--ux-paper) !important;
}

/* Rules keeps its own content structure but uses the exact home hero anchors. */
body.rules-page .rules-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  height: max(680px, 100svh);
}

body.rules-page .shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 64px;
}

body.rules-page .hero {
  position: relative;
  display: block;
  width: 100%;
  min-height: max(680px, 100svh);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--ux-line);
  text-align: left;
}

body.rules-page .hero .eyebrow {
  display: none;
}

body.rules-page .rules-title-stage {
  position: absolute;
  z-index: 4;
  top: clamp(108px, 13vh, 148px);
  right: clamp(28px, 7vw, 120px);
  width: min(920px, 76vw);
  text-align: right;
  transform: translate3d(calc((var(--mouse-x) * 18px - var(--click-lift) * 2px) * var(--layout-scale)), calc((var(--mouse-y) * 14px - var(--click-lift) * 10px) * var(--layout-scale)), 0);
  will-change: transform;
}

body.rules-page .rules-title-stage h1 {
  width: 100%;
  max-width: none;
  margin: 0;
  font-size: clamp(76px, 10.2vw, 156px);
  font-weight: 500;
  line-height: .95;
  text-align: right;
  text-wrap: balance;
}

body.rules-page .rules-title-stage .rules-subtitle {
  margin: clamp(10px, 1.5vw, 20px) 0 0;
  color: var(--ux-ink);
  font-size: clamp(26px, 3.65vw, 58px);
  font-weight: 500;
  line-height: 1.12;
  text-align: right;
  text-wrap: balance;
}

body.rules-page .rules-hero-note {
  position: absolute;
  z-index: 5;
  bottom: clamp(105px, 14vh, 150px);
  left: clamp(28px, 7vw, 120px);
  width: min(520px, 44vw);
  padding-left: 18px;
  border-left: 2px solid rgba(46,186,188,.5);
  color: var(--ux-muted);
  text-align: left;
  transform: translate3d(calc(var(--mouse-x) * -7px * var(--layout-scale)), calc(var(--mouse-y) * 5px * var(--layout-scale)), 0);
  will-change: transform;
}

body.rules-page .rules-hero-note .hero-copy {
  text-align: left;
  width: auto;
  max-width: none;
  margin: 0 0 14px;
  color: var(--ux-muted);
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.7;
}

body.rules-page .rules-hero-note .hero-meta {
  width: auto;
  max-width: none;
  margin: 0;
  justify-content: flex-start;
}

body.rules-page .layout {
  width: min(1180px, calc(100% - 48px));
  margin: 44px auto 0;
}

@media (max-width: 920px) {
  body.home-page .latest-release-preview .content-header {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }

  body.home-page .latest-release-preview .content-lede {
    margin-left: 0;
  }

  body.home-page .latest-release-preview .fact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.resource-page .resource-hero-note,
  body.not-found-page .error-actions {
    width: min(620px, calc(100% - var(--ux-gutter) * 2));
  }
}

/* Explicit section tones keep resource pages on the same alternating paper
   rhythm as the home page even when sections are reordered. */
body.resource-page .content-section.section-tone-light {
  background: #fff;
}

body.resource-page .content-section.section-tone-muted {
  background: var(--ux-paper);
}

/* Download is a practical path, not a collection of unrelated utility rows. */
body.download-page .download-release-layout {
  padding-top: clamp(24px, 3vw, 38px);
}

body.download-page .download-file-panel {
  min-width: 0;
}

body.download-page .download-primary-actions,
body.download-page .download-flow-actions,
body.download-page .download-source-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 24px;
}

body.download-page .download-checksum {
  margin-top: clamp(30px, 4vw, 48px);
}

body.download-page .download-checksum-label {
  margin: 0 0 10px;
  color: var(--ux-muted);
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.5;
}

body.download-page .download-checksum .code-value {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 16px 18px;
  overflow-wrap: anywhere;
  border: 1px solid var(--ux-line);
  color: #326d72;
  background: rgba(255,255,255,.72);
  font-size: clamp(11px, 1vw, 14px);
  line-height: 1.55;
  white-space: normal;
}

body.download-page .download-flow {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  border-top: 0;
}

body.download-page .download-flow-card {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  box-sizing: border-box;
  min-height: 0;
  margin: 0;
  padding: clamp(22px, 2.4vw, 28px);
}

body.download-page .download-release-list {
  border-top: 1px solid var(--ux-line);
}

@media (max-width: 920px) {
  body.download-page .download-flow {
    grid-template-columns: 1fr;
  }

  body.download-page .download-flow-card {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  body.download-page .download-flow-card {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 14px;
    padding: 20px 18px;
  }

  body.download-page .download-primary-actions,
  body.download-page .download-flow-actions,
  body.download-page .download-source-actions {
    gap: 8px 14px;
  }
}

@media (max-width: 620px) {
  body.resource-page .resource-hero .copy-stage,
  body.not-found-page .error-hero .copy-stage {
    top: 94px;
    right: 22px;
    width: calc(100vw - 44px);
  }

  body.resource-page .resource-hero .copy-stage .subtitle,
  body.not-found-page .error-hero .copy-stage .subtitle {
    margin-top: 10px;
  }

  body.resource-page .resource-hero-note,
  body.not-found-page .error-actions {
    right: auto;
    bottom: 112px;
    left: 22px;
    width: calc(100vw - 44px);
    padding-right: 0;
    padding-left: 12px;
    border-right: 0;
    border-left: 2px solid rgba(46,186,188,.5);
    text-align: left;
  }

  body.home-page .latest-release-preview .fact-grid {
    grid-template-columns: 1fr;
  }

  body.home-page .latest-release-preview .fact-card {
    min-height: 124px;
  }

  body.rules-page .rules-backdrop,
  body.rules-page .hero {
    min-height: 720px;
    height: 720px;
  }

  body.rules-page .rules-title-stage {
    top: 94px;
    right: 22px;
    width: calc(100vw - 44px);
  }

  body.rules-page .rules-title-stage h1 {
    font-size: clamp(47px, 15vw, 86px);
  }

  body.rules-page .rules-title-stage .rules-subtitle {
    margin-top: 10px;
    font-size: clamp(23px, 7vw, 38px);
  }

  body.rules-page .rules-hero-note {
    right: auto;
    bottom: 112px;
    left: 22px;
    width: calc(100vw - 44px);
    padding-left: 12px;
  }

  body.rules-page .layout {
    width: calc(100% - 32px);
    max-width: none;
    min-width: 0;
    margin: 32px auto 0;
  }

  body.rules-page .rules-stack,
  body.rules-page .warning,
  body.rules-page .enforcement,
  body.rules-page .rule-card,
  body.rules-page .penalty-grid,
  body.rules-page .penalty-step {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.rules-page .enforcement {
    margin-right: 0;
    margin-left: 0;
    padding: 24px 18px;
  }

  body.rules-page .penalty-grid {
    grid-template-columns: 1fr;
  }

  body.rules-page .enforcement *,
  body.rules-page .rule-card * {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Shared homepage scene for resource pages. The markup and motion values here
   intentionally mirror the home hero so aspect-ratio changes do not create a
   second visual language. */
body.resource-page .resource-scene::before,
body.resource-page .resource-scene::after,
body.not-found-page .error-bands::before,
body.not-found-page .error-bands::after {
  display: none !important;
}

body.resource-page .resource-scene,
body.rules-page .rules-backdrop,
body.not-found-page .error-bands {
  background: #fff;
}

body.resource-page .resource-scene > .bands-reveal,
body.rules-page .rules-backdrop > .bands-reveal,
body.not-found-page .error-bands > .bands-reveal {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  clip-path: circle(0% at 100% 100%);
  animation: ux-bands-reveal 1.6s cubic-bezier(.2, .76, .22, 1) forwards;
  pointer-events: none;
}

body.resource-page .resource-scene > .bands-reveal.is-revealed,
body.rules-page .rules-backdrop > .bands-reveal.is-revealed,
body.not-found-page .error-bands > .bands-reveal.is-revealed {
  opacity: 1;
  clip-path: none;
  animation: none;
}

body.resource-page .bands-reveal .lower-band,
body.rules-page .bands-reveal .lower-band,
body.not-found-page .bands-reveal .lower-band {
  position: absolute;
  z-index: 0;
  right: -2%;
  bottom: 0;
  left: 37.5%;
  height: var(--lower-band-thickness);
  contain: paint;
  overflow: hidden;
  transform: translate3d(calc(var(--mouse-x) * 4px * var(--layout-scale)), 0, 0);
  transform-origin: center;
  will-change: transform;
}

body.resource-page .bands-reveal .lower-band-surface,
body.rules-page .bands-reveal .lower-band-surface,
body.not-found-page .bands-reveal .lower-band-surface {
  position: absolute;
  inset: calc(-3px * var(--layout-scale)) 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #f2fdfd 22%, #dbfafa 44%, #acf2f3 68%, #4fe2e3 100%);
  transform: translate3d(0, calc(var(--click-lift) * -2px * var(--layout-scale)), 0);
  will-change: transform;
}

body.resource-page .bands-reveal .diagonal-position,
body.rules-page .bands-reveal .diagonal-position,
body.not-found-page .bands-reveal .diagonal-position {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: max(130vw, calc(100vw + 60vh));
  height: var(--diagonal-band-thickness);
  transform: translate(-50%, -50%) rotate(calc(var(--band-angle) + var(--mouse-x) * .3deg + var(--mouse-y) * .12deg + var(--click-lift) * .12deg)) scale(calc(1 + var(--mouse-y) * .003 + var(--click-lift) * .0015));
  transform-origin: center;
  will-change: transform;
}

body.resource-page .bands-reveal .diagonal-band,
body.rules-page .bands-reveal .diagonal-band,
body.not-found-page .bands-reveal .diagonal-band {
  position: absolute;
  inset: 0;
  contain: paint;
  overflow: hidden;
  background: linear-gradient(90deg, #f7fefe 0%, #e5fbfb 28%, #c8f7f7 48%, #9bf0f1 66%, #6be8e9 82%, #45e0e1 100%);
  box-shadow: 0 20px 46px rgba(46, 186, 188, .1);
}

body.resource-page .bands-reveal .lower-band-surface::before,
body.resource-page .bands-reveal .diagonal-band::before,
body.rules-page .bands-reveal .lower-band-surface::before,
body.rules-page .bands-reveal .diagonal-band::before,
body.not-found-page .bands-reveal .lower-band-surface::before,
body.not-found-page .bands-reveal .diagonal-band::before {
  position: absolute;
  inset: -5% -38%;
  background: linear-gradient(90deg, transparent 0%, rgba(65,226,228,.08) 18%, rgba(255,255,255,.3) 38%, rgba(71,228,230,.22) 52%, rgba(255,255,255,.26) 67%, rgba(66,226,228,.06) 82%, transparent 100%);
  content: "";
  opacity: 0;
  transform: translate3d(var(--site-sheen-shift-x, -120vw), 0, 0);
  transition: opacity .18s ease;
  pointer-events: none;
}

body.resource-page .bands-reveal .lower-band-surface::after,
body.resource-page .bands-reveal .diagonal-band::after,
body.rules-page .bands-reveal .lower-band-surface::after,
body.rules-page .bands-reveal .diagonal-band::after,
body.not-found-page .bands-reveal .lower-band-surface::after,
body.not-found-page .bands-reveal .diagonal-band::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.14) 18%, rgba(255,255,255,0) 48%, rgba(31,204,206,.07) 100%);
  box-shadow: inset 0 calc(1px * var(--layout-scale)) 0 rgba(255,255,255,.5), inset 0 calc(-1px * var(--layout-scale)) 0 rgba(31,201,203,.12);
  content: "";
  pointer-events: none;
}

body.resource-page .bands-reveal.scene-has-pointer .lower-band-surface::before,
body.resource-page .bands-reveal.scene-has-pointer .diagonal-band::before,
body.rules-page .bands-reveal.scene-has-pointer .lower-band-surface::before,
body.rules-page .bands-reveal.scene-has-pointer .diagonal-band::before,
body.not-found-page .bands-reveal.scene-has-pointer .lower-band-surface::before,
body.not-found-page .bands-reveal.scene-has-pointer .diagonal-band::before {
  opacity: .62;
}

body.resource-page .bands-reveal .pointer-light,
body.rules-page .bands-reveal .pointer-light,
body.not-found-page .bands-reveal .pointer-light {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: calc(360px * var(--layout-scale));
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.34) 0%, rgba(255,255,255,.11) 30%, transparent 72%);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity .28s ease;
  pointer-events: none;
  will-change: left, top, opacity;
}

body.resource-page .bands-reveal.scene-has-pointer .pointer-light,
body.rules-page .bands-reveal.scene-has-pointer .pointer-light,
body.not-found-page .bands-reveal.scene-has-pointer .pointer-light {
  opacity: .56;
}

body.resource-page .bands-reveal .click-effects,
body.rules-page .bands-reveal .click-effects,
body.not-found-page .bands-reveal .click-effects {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

body.resource-page .bands-reveal .click-ripple,
body.rules-page .bands-reveal .click-ripple,
body.not-found-page .bands-reveal .click-ripple {
  position: absolute;
  width: calc(52px * var(--layout-scale));
  aspect-ratio: 1;
  border: 1px solid rgba(52,225,227,.58);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.34) 0%, rgba(143,245,246,.14) 34%, rgba(65,226,228,0) 68%);
  transform: translate(-50%, -50%) translateY(calc(8px * var(--layout-scale))) scale(.35);
  animation: ux-click-ripple .65s cubic-bezier(.2,.7,.25,1) forwards;
}

body.resource-page .resource-hero .copy-stage,
body.not-found-page .error-hero .copy-stage {
  transform: translate3d(calc((var(--mouse-x) * 18px - var(--click-lift) * 2px) * var(--layout-scale)), calc((var(--mouse-y) * 14px - var(--click-lift) * 10px) * var(--layout-scale)), 0);
  will-change: transform;
}

body.resource-page .resource-hero-note,
body.not-found-page .error-actions {
  transform: translate3d(calc(var(--mouse-x) * -7px * var(--layout-scale)), calc(var(--mouse-y) * 5px * var(--layout-scale)), 0);
  will-change: transform;
}

@keyframes ux-bands-reveal {
  0% { opacity: 0; clip-path: circle(0% at 100% 100%); }
  20% { opacity: .72; }
  100% { opacity: 1; clip-path: circle(150% at 100% 100%); }
}

@keyframes ux-click-ripple {
  0% { opacity: .9; transform: translate(-50%, -50%) translateY(calc(8px * var(--layout-scale))) scale(.35); }
  55% { opacity: .5; }
  100% { opacity: 0; transform: translate(-50%, -50%) translateY(calc(-22px * var(--layout-scale))) scale(1.22); }
}

@media (max-width: 620px) {
  body.resource-page,
  body.rules-page,
  body.not-found-page { --diagonal-band-thickness: clamp(118px, 30vw, 170px); --lower-band-thickness: clamp(76px, 22vw, 112px); }
}

@media (prefers-reduced-motion: reduce) {
  body.resource-page .resource-scene > .bands-reveal,
  body.rules-page .rules-backdrop > .bands-reveal,
  body.not-found-page .error-bands > .bands-reveal,
  body.resource-page .bands-reveal .click-ripple,
  body.rules-page .bands-reveal .click-ripple,
  body.not-found-page .bands-reveal .click-ripple { animation: none !important; }

  body.resource-page .resource-scene > .bands-reveal,
  body.rules-page .rules-backdrop > .bands-reveal,
  body.not-found-page .error-bands > .bands-reveal { opacity: 1; clip-path: none; }
}

/* One scroll cue for every long page: the quiet centered marker from the home page. */
body.home-page .scroll-cue,
body.mods-page .scroll-cue,
body.history-page .scroll-cue,
body.join-page .scroll-cue,
body.rules-page .scroll-cue,
body.resource-page .resource-scroll-cue,
body.not-found-page .error-hero .scroll-cue {
  position: absolute !important;
  right: auto !important;
  bottom: 22px !important;
  left: 50% !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: max-content !important;
  min-width: 0 !important;
  min-height: 86px;
  box-sizing: border-box;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  color: #5e767b !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: nowrap !important;
  transform: translateX(-50%) !important;
  transition: color .2s ease, transform .2s ease !important;
}

body.home-page .scroll-cue > span[aria-hidden="true"],
body.mods-page .scroll-cue > span[aria-hidden="true"],
body.history-page .scroll-cue > span[aria-hidden="true"],
body.join-page .scroll-cue > span[aria-hidden="true"],
body.rules-page .scroll-cue > span[aria-hidden="true"],
body.resource-page .resource-scroll-cue > span[aria-hidden="true"],
body.not-found-page .error-hero .scroll-cue > span[aria-hidden="true"] {
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  place-items: center;
  flex: 0 0 42px;
  border: 1px solid rgba(46, 186, 188, .28) !important;
  border-radius: 50% !important;
  color: var(--ux-cyan) !important;
  background: rgba(235, 252, 252, .22) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  text-transform: none !important;
  animation: ux-cue-bob 2.4s ease-in-out infinite;
}

body.home-page .scroll-cue:hover,
body.mods-page .scroll-cue:hover,
body.history-page .scroll-cue:hover,
body.join-page .scroll-cue:hover,
body.rules-page .scroll-cue:hover,
body.resource-page .resource-scroll-cue:hover,
body.not-found-page .error-hero .scroll-cue:hover {
  color: var(--ux-cyan-dark) !important;
  transform: translateX(-50%) translateY(-2px) !important;
}

body.home-page .scroll-cue:hover > span[aria-hidden="true"],
body.mods-page .scroll-cue:hover > span[aria-hidden="true"],
body.history-page .scroll-cue:hover > span[aria-hidden="true"],
body.join-page .scroll-cue:hover > span[aria-hidden="true"],
body.rules-page .scroll-cue:hover > span[aria-hidden="true"],
body.resource-page .resource-scroll-cue:hover > span[aria-hidden="true"],
body.not-found-page .error-hero .scroll-cue:hover > span[aria-hidden="true"] {
  border-color: rgba(67, 140, 255, .38) !important;
}

@media (max-width: 620px) {
  body.home-page .scroll-cue,
  body.mods-page .scroll-cue,
  body.history-page .scroll-cue,
  body.join-page .scroll-cue,
  body.rules-page .scroll-cue,
  body.resource-page .resource-scroll-cue,
  body.not-found-page .error-hero .scroll-cue {
    bottom: 16px !important;
    min-height: 90px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .scroll-cue,
  body.mods-page .scroll-cue,
  body.history-page .scroll-cue,
  body.join-page .scroll-cue,
  body.rules-page .scroll-cue,
  body.resource-page .resource-scroll-cue,
  body.not-found-page .error-hero .scroll-cue {
    transition: none !important;
  }

  body.home-page .scroll-cue > span[aria-hidden="true"],
  body.mods-page .scroll-cue > span[aria-hidden="true"],
  body.history-page .scroll-cue > span[aria-hidden="true"],
  body.join-page .scroll-cue > span[aria-hidden="true"],
  body.rules-page .scroll-cue > span[aria-hidden="true"],
  body.resource-page .resource-scroll-cue > span[aria-hidden="true"],
  body.not-found-page .error-hero .scroll-cue > span[aria-hidden="true"] {
    animation: none !important;
  }
}

/* Rules quick navigation follows the site's compact card rhythm. The older
   vertical list made the sidebar much taller than the content it indexed. */
body.rules-page .toc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 6px 10px;
  box-sizing: border-box;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--ux-line);
  border-radius: 4px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 12px 28px rgba(35, 78, 81, .045);
  backdrop-filter: none;
}

body.rules-page .toc-label {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  padding: 0 0 11px;
  border-bottom: 1px solid var(--ux-line);
  color: var(--ux-cyan-dark);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;
}

body.rules-page .toc a {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 32px;
  box-sizing: border-box;
  padding: 7px 8px;
  border-bottom: 1px solid var(--ux-line);
  border-radius: 0;
  color: var(--ux-muted);
  font-size: 12px;
  line-height: 1.35;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}

body.rules-page .toc a:nth-of-type(-n + 2) {
  grid-column: 1 / -1;
  font-weight: 550;
}

body.rules-page .toc a:nth-of-type(n + 3) {
  justify-content: center;
  color: var(--ux-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

body.rules-page .toc a:hover,
body.rules-page .toc a.is-current {
  color: var(--ux-cyan-dark);
  border-color: var(--ux-cyan);
  background: transparent;
  transform: translateY(-1px);
}

/* Keep the directory sheen between the fill and the label. Screen blending
   washed the cyan light out on the near-white card and could cover bare
   numeric labels. */
body.rules-page .toc a.site-inline-fx::after {
  z-index: -1;
  mix-blend-mode: normal;
}

body.rules-page .toc a.site-inline-fx > span {
  position: relative;
  z-index: 1;
}

body.rules-page .toc a.site-inline-fx.site-pointer-hover::after {
  opacity: .78;
}

@media (max-width: 860px) {
  body.rules-page .toc {
    position: relative;
    top: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
    padding: 16px;
    border: 1px solid var(--ux-line);
    border-radius: 4px;
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 12px 28px rgba(35, 78, 81, .045);
  }

  body.rules-page .toc a {
    min-height: 34px;
    padding: 7px 8px;
  }
}

/* Help index follows the mods-page catalogue: factual two-column cards,
   quiet rules and one clear action per topic. It intentionally avoids the
   rounded pill/gradient treatment used by generic dashboard templates. */
body.help-page #topics .content-header {
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(40px, 7vw, 112px);
  margin-bottom: clamp(28px, 4vw, 48px);
}

body.help-page #topics .content-title {
  max-width: 15ch;
}

body.help-page #topics .content-lede {
  max-width: 660px;
  justify-self: end;
}

body.help-page .help-search {
  display: block;
  width: min(620px, 100%);
  margin: 0 0 clamp(26px, 4vw, 44px);
}

body.help-page .help-search .catalog-search-wrap {
  position: relative;
  width: 100%;
}

body.help-page .help-search .catalog-search {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  padding: 0 46px 0 15px;
  border: 1px solid rgba(39, 51, 56, .18);
  border-radius: 0;
  outline: 0;
  color: #2c3d42;
  background: rgba(255, 255, 255, .86);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0;
  transition: border-color .2s ease, box-shadow .2s ease;
}

body.help-page .help-search .catalog-search::placeholder {
  color: var(--ux-soft);
  opacity: 1;
}

body.help-page .help-search .catalog-search:focus {
  border-color: var(--ux-cyan);
  box-shadow: 0 0 0 3px rgba(46, 186, 188, .1);
}

body.help-page .help-search .catalog-search-icon {
  position: absolute;
  top: 50%;
  right: 15px;
  color: #2ba6a8;
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
}

body.help-page .help-search-hint {
  margin: 8px 0 0;
  color: var(--ux-soft);
  font-size: 13px;
  line-height: 1.5;
}

/* Keep the accessible label available to assistive technology without adding
   a second visible line above the catalogue-style search field. */
body.help-page .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;
}

body.help-page .help-topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}

body.help-page .help-topic-card {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  box-sizing: border-box;
  padding: clamp(20px, 2vw, 24px);
  border: 1px solid rgba(39, 51, 56, .12);
  border-radius: 4px;
  color: var(--ux-ink);
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 12px 28px rgba(35, 78, 81, .045);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

body.help-page .help-topic-card:hover {
  border-color: rgba(46, 186, 188, .42);
  box-shadow: 0 16px 34px rgba(35, 78, 81, .09);
  transform: translateY(-2px);
}

body.help-page .help-topic-card.is-hidden {
  display: none;
}

body.help-page .help-topic-kicker {
  margin: 0;
  color: var(--ux-cyan-dark);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
}

body.help-page .help-topic-card h3 {
  margin: 14px 0 0;
  color: var(--ux-ink);
  font-size: clamp(22px, 2.25vw, 32px);
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}

body.help-page .help-topic-card > p:not(.help-topic-kicker) {
  margin: 12px 0 0;
  color: var(--ux-muted);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.72;
  text-wrap: pretty;
}

body.help-page .help-topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 18px;
  padding-top: 14px;
  color: var(--ux-soft);
  font-size: 12px;
  line-height: 1.4;
}

body.help-page .help-topic-tags > span {
  position: relative;
}

body.help-page .help-topic-tags > span + span::before {
  position: absolute;
  top: 0;
  left: -10px;
  color: rgba(39, 51, 56, .3);
  content: "/";
}

body.help-page .help-topic-card .action-link {
  align-self: flex-start;
  margin-top: 18px;
}

body.help-page .help-search-empty {
  margin: 26px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--ux-line);
  color: var(--ux-muted);
  font-size: 15px;
  line-height: 1.7;
}

body.help-page #support .content-header {
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
}

body.help-page #support .release-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 26px;
}

/* Independent help articles use the history page's long-form rhythm and do
   not repeat the hero bands. */
body.help-article-page .article-main {
  background: var(--ux-paper);
}

body.help-article-page .article-main .content-section {
  padding: clamp(64px, 8vw, 116px) 0;
  border-top: 1px solid var(--ux-line);
}

body.help-article-page .article-main .article-intro {
  padding-top: clamp(72px, 9vw, 132px);
}

body.help-article-page .article-inner {
  width: min(var(--ux-max), calc(100% - var(--ux-gutter) * 2));
}

body.help-article-page .article-header {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(44px, 8vw, 124px);
  margin-bottom: 28px;
}

body.help-article-page .article-title {
  max-width: 14ch;
  font-size: clamp(44px, 5.8vw, 82px);
  line-height: 1.02;
}

body.help-article-page .article-header .content-lede {
  max-width: 680px;
  justify-self: end;
}

body.help-article-page .article-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 22px;
}

body.help-article-page .article-note-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  border: 0;
}

body.help-article-page .article-note-grid .content-card {
  box-sizing: border-box;
  min-height: 0;
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--ux-line);
  border-radius: 4px;
  background: rgba(255,255,255,.8);
}

body.help-article-page .article-note-grid .content-card:first-child,
body.help-article-page .article-note-grid .content-card:last-child,
body.help-article-page .article-note-grid .content-card:nth-child(n) {
  padding-left: clamp(20px, 2.2vw, 28px);
  padding-right: clamp(20px, 2.2vw, 28px);
  border-right: 1px solid var(--ux-line);
}

body.help-article-page.asking-help-page .article-note-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.help-article-page .article-step-list {
  gap: clamp(12px, 1.5vw, 18px);
  border-top: 0;
}

body.help-article-page .article-step {
  grid-template-columns: 52px minmax(0, 1fr) minmax(320px, .82fr);
  gap: clamp(18px, 3vw, 42px);
  min-width: 0;
  margin-bottom: 0;
  padding: clamp(26px, 3.6vw, 44px) clamp(22px, 3.2vw, 40px);
  border: 1px solid var(--ux-line);
}

body.help-article-page .article-step > .article-step-detail,
body.help-article-page .article-step > .article-media {
  grid-column: 3;
  min-width: 0;
  align-self: start;
}

/* Short, text-only steps use the full content area after the number. */
body.help-article-page .article-step > div:last-child:not(.article-step-detail) {
  grid-column: 2 / -1;
}

body.help-article-page .article-step .step-number {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 15px;
}

body.help-article-page .article-step h3 {
  font-size: clamp(22px, 2.15vw, 31px);
}

body.help-article-page .article-step p {
  max-width: 760px;
}

body.help-article-page .article-media img {
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
}

body.help-article-page .question-template {
  box-sizing: border-box;
  width: 100%;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--ux-line);
  border-radius: 4px;
  background: rgba(255,255,255,.82);
}

body.help-article-page .question-template pre {
  margin: 0;
  overflow: auto;
  color: #37686d;
  font: 500 clamp(13px, 1.15vw, 16px)/1.72 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

body.help-article-page .article-source-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px 48px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--ux-line);
}

body.help-article-page .article-source-note p {
  max-width: 760px;
  margin: 0;
  color: var(--ux-muted);
  font-size: 14px;
  line-height: 1.75;
}

@media (max-width: 920px) {
  body.help-page #topics .content-header,
  body.help-page #support .content-header,
  body.help-article-page .article-header {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }

  body.help-page #topics .content-lede,
  body.help-page #support .content-lede,
  body.help-article-page .article-header .content-lede {
    justify-self: start;
  }

  body.help-article-page .article-note-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.help-article-page .article-step {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  body.help-article-page .article-step > .article-step-detail,
  body.help-article-page .article-step > .article-media,
  body.help-article-page .article-step > div:last-child:not(.article-step-detail) {
    grid-column: 2;
  }
}

@media (max-width: 620px) {
  body.help-page .help-topic-grid,
  body.help-article-page .article-note-grid {
    grid-template-columns: 1fr;
  }

  body.help-page .help-topic-card {
    min-height: 0;
    padding: 22px 20px 24px;
  }

  body.help-page .help-topic-card h3 {
    font-size: 24px;
  }

  body.help-article-page .article-main .content-section {
    padding: 56px 0;
  }

  body.help-article-page .article-main .article-intro {
    padding-top: calc(var(--site-nav-height) + 44px);
  }

  body.help-article-page .article-title {
    font-size: clamp(38px, 12vw, 58px);
  }

  body.help-article-page .article-step {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding: 22px 18px;
  }

  body.help-article-page .article-step > .article-step-detail,
  body.help-article-page .article-step > .article-media,
  body.help-article-page .article-step > div:last-child:not(.article-step-detail) {
    grid-column: 2;
  }

  body.help-article-page .article-step .step-number {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  body.help-article-page .article-source-note {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* The mobile navigation occupies two fixed rows. First-screen content must
   begin below both rows on every page family that does not use the shared
   scene layout. Keep this guard last so page-specific mobile rules cannot
   pull titles back underneath the header. */
@media (max-width: 820px) {
  body.rules-page .hero {
    box-sizing: border-box;
    padding-top: calc(var(--site-nav-height) + clamp(32px, 5vh, 48px)) !important;
  }

  body.rules-page .rules-title-stage {
    top: calc(var(--site-nav-height) + clamp(28px, 5vh, 44px));
  }

  body.help-article-page .article-main .article-intro {
    padding-top: calc(var(--site-nav-height) + clamp(40px, 8vw, 64px));
  }

  body.resource-page:not(.help-article-page) .resource-hero-content {
    padding-top: calc(var(--site-nav-height) + clamp(56px, 10vw, 74px));
  }

}