:root {
  --ink: #0b0b0b;
  --paper: #fafaf8;
  --white: #ffffff;
  --acid: #c5e803;
  --mint: #c5e803;
  --gold: #c5e803;
  --red: #0b0b0b;
  --muted: #64645f;
  --line: rgba(11, 11, 11, .15);
  --radius: 0;
  --max: 1240px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 300;
  line-height: 1.65;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }

/* AiFan Lab motion language: one quiet awakening, then content stays still. */
:root { --motion-glow: .13; }
html[data-theme="dark"] { --motion-glow: .08; }
.siteTransitionLine {
  position: fixed;
  top: 55px;
  left: 0;
  z-index: 70;
  width: 100%;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0, var(--acid) 44%, #e7ff58 52%, var(--acid) 60%, transparent 100%);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}
.isPageEntering .siteTransitionLine { animation: siteSignalEnter .56s cubic-bezier(.22, 1, .36, 1) both; }
.isPageLeaving .siteTransitionLine { animation: siteSignalLeave .21s cubic-bezier(.4, 0, .2, 1) both; }
.isPageEntering main { animation: pageAwaken .42s cubic-bezier(.22, 1, .36, 1) both; }
.isPageLeaving main {
  opacity: .16;
  transform: translateY(4px);
  filter: blur(1.5px);
  transition: opacity .18s ease, transform .21s ease, filter .18s ease;
}
.libraryPage.isSectionLeaving::after,
.visualReferencePage.isSectionLeaving::after {
  content: "";
  position: fixed;
  inset: 56px 0 0;
  z-index: 69;
  background: #f3f0e8;
}
.motionCapable .motionModule:not(.isRevealed) {
  opacity: 0;
  transform: translateY(10px) scale(.997);
}
.motionCapable .libraryArchive.motionModule:not(.isRevealed) {
  opacity: 1;
  transform: none;
}
.motionModule.isRevealed {
  animation: moduleAwaken .54s cubic-bezier(.22, 1, .36, 1) var(--motion-delay, 0ms) both;
}
@keyframes siteSignalEnter {
  0% { opacity: 0; transform: scaleX(0); }
  28% { opacity: .78; }
  76% { opacity: .48; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
@keyframes siteSignalLeave {
  0% { opacity: 0; transform: scaleX(0); }
  42% { opacity: .72; }
  100% { opacity: .35; transform: scaleX(1); }
}
@keyframes pageAwaken {
  from { opacity: .72; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes moduleAwaken {
  0% { opacity: 0; transform: translateY(10px) scale(.997); filter: drop-shadow(0 0 0 rgba(197, 232, 3, 0)); }
  58% { opacity: 1; filter: drop-shadow(0 0 8px rgba(197, 232, 3, var(--motion-glow))); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 rgba(197, 232, 3, 0)); }
}

.themeToggle {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 26px);
  align-items: center;
  width: 56px;
  height: 30px;
  padding: 2px;
  overflow: hidden;
  border: 1px solid rgba(11, 11, 11, .14);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(11, 11, 11, .07);
  transition: border-color .25s ease, background .25s ease;
}
.themeToggleThumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(11, 11, 11, .16);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), background .25s ease;
}
.themeIcon { position: relative; z-index: 1; width: 16px; height: 16px; justify-self: center; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: color .25s ease, opacity .25s ease; }
.themeIconSun { color: #171714; }
.themeIconMoon { color: #77736b; }
.themeToggle:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }

html[data-theme="dark"] {
  --ink: #f3f3ee;
  --paper: #050505;
  --white: #11110f;
  --muted: #aaa9a2;
  --line: rgba(255, 255, 255, .14);
  --red: #c5e803;
  color-scheme: dark;
}
html[data-theme="dark"] body { background: #050505; }
html[data-theme="dark"] .siteHeader,
html[data-theme="dark"] .homePage .siteHeader,
html[data-theme="dark"] .trainingPage .siteHeader { background: rgba(5, 5, 5, .9); border-color: rgba(255, 255, 255, .11); }
html[data-theme="dark"] .nav a,
html[data-theme="dark"] .homePage .nav a { color: #c9c9c3; }
html[data-theme="dark"] .nav a:hover,
html[data-theme="dark"] .nav a[aria-current="page"],
html[data-theme="dark"] .homePage .nav a:hover,
html[data-theme="dark"] .homePage .nav a[aria-current="page"] { color: #fff; }
html[data-theme="dark"] .brandLogo {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  object-fit: cover;
  filter: invert(1);
  box-shadow: none;
}
html[data-theme="dark"] .themeToggle { border-color: rgba(255, 255, 255, .17); background: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .themeToggleThumb { background: #2c2c28; transform: translateX(26px); box-shadow: 0 2px 9px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .themeIconSun { color: #777770; }
html[data-theme="dark"] .themeIconMoon { color: #f3f3ee; }

html[data-theme="dark"] .homePage,
html[data-theme="dark"] .appleLikeHero,
html[data-theme="dark"] .homeEntrySection { color: #f3f3ee; background: #050505; }
html[data-theme="dark"] .appleEyebrow { color: #8d8d86; }
html[data-theme="dark"] .appleHeroMarkLight { display: none; }
html[data-theme="dark"] .appleHeroMarkDark { display: block; mix-blend-mode: screen; }
html[data-theme="dark"] .heartbeatSignalGlow { stroke: rgba(197, 232, 3, .14); filter: blur(5px); }
html[data-theme="dark"] .heartbeatSignalCore { stroke: rgba(197, 232, 3, .48); filter: drop-shadow(0 0 3px rgba(197, 232, 3, .28)); }
html[data-theme="dark"] .heartbeatParticle {
  fill: #dcff34;
  stroke: rgba(197, 232, 3, .9);
  stroke-width: .25;
  filter: drop-shadow(0 0 2px rgba(225, 255, 84, .95)) drop-shadow(0 0 8px rgba(197, 232, 3, .92));
}
html[data-theme="dark"] .heartbeatParticleHalo {
  fill: rgba(197, 232, 3, .38);
  stroke: none;
  filter: blur(5px) drop-shadow(0 0 10px rgba(197, 232, 3, .9));
}
html[data-theme="dark"] .homeEntryCard {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(18, 18, 16, .92);
  box-shadow: -4px -4px 12px rgba(255, 255, 255, .025), 7px 10px 22px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .055);
}
html[data-theme="dark"] .homeEntryCard:hover,
html[data-theme="dark"] .homeEntryCard:focus-visible { border-color: rgba(197, 232, 3, .28); background: #171713; box-shadow: 0 14px 36px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07); }
html[data-theme="dark"] .homeEntryMeta { color: #787870; }
html[data-theme="dark"] .homeEntryCard p { color: #a9a9a2; }
html[data-theme="dark"] .homeEntryArrow { color: #e7e7e0; }

html[data-theme="dark"] .routeCard,
html[data-theme="dark"] .contentCard,
html[data-theme="dark"] .characterCard,
html[data-theme="dark"] .articleBody blockquote,
html[data-theme="dark"] .process div,
html[data-theme="dark"] .resultGrid div { background: #10100e; }
html[data-theme="dark"] .routeCard p,
html[data-theme="dark"] .articleBody p,
html[data-theme="dark"] .articleBody li { color: #c2c2bc; }
html[data-theme="dark"] .routeCard:hover { color: #0b0b0b; background: var(--acid); }
html[data-theme="dark"] .routeCard:hover p { color: #33332d; }
html[data-theme="dark"] .pill { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .filterBar span { background: #1a1a17; }
html[data-theme="dark"] .filterBar span.active { color: #0b0b0b; background: var(--acid); }
html[data-theme="dark"] .button.primary { color: #0b0b0b; background: var(--acid); border-color: var(--acid); }
html[data-theme="dark"] .button.secondary:hover { color: #0b0b0b; background: var(--acid); }
html[data-theme="dark"] .articleBody .callout,
html[data-theme="dark"] .cta { background: #11110f; }
html[data-theme="dark"] .caseCover,
html[data-theme="dark"] .heroVisual,
html[data-theme="dark"] .characterCard img { background: #161613; }
html[data-theme="dark"] .footerNav a:hover { color: var(--acid); }

@media (max-width: 720px) {
  .themeToggle { width: 50px; grid-template-columns: repeat(2, 23px); }
  .themeToggleThumb { width: 24px; }
  html[data-theme="dark"] .themeToggleThumb { transform: translateX(20px); }
}

@media (prefers-reduced-motion: reduce) {
  .themeToggle, .themeToggleThumb, .themeIcon { transition: none; }
}

.skipLink { position: fixed; top: 8px; left: 8px; z-index: 99; transform: translateY(-140%); padding: 8px 12px; background: var(--acid); }
.skipLink:focus { transform: none; }
.siteHeader {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 56px; padding: 0 max(22px, calc((100vw - var(--max)) / 2));
  background: rgba(243, 240, 232, .94); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
.brandMark { display: grid; place-items: center; width: 45px; height: 30px; border-radius: 0; color: var(--acid); background: var(--ink); font-size: 12px; }
.brandLogo { width: 29px; height: 29px; object-fit: cover; border-radius: 50%; }
.nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
@media (min-width: 721px) {
  .siteHeader:has(.themeToggle) .nav { margin-left: auto; }
}
.nav a {
  position: relative;
  padding: 16px 6px;
  border-radius: 0;
  color: #363632;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .2s ease;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 18px;
  height: 3px;
  background: var(--acid);
  opacity: 0;
  transform: translateX(-50%) scaleX(.25);
  transform-origin: center;
  transition: opacity .18s ease, transform .22s ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); background: transparent; }
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="page"]::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}
body:not(.methodArticlePage):has(.articleLayout) .nav a[aria-current="page"][href="tutorials.html"]::before,
body:has(.archiveTools) .nav a[aria-current="page"][href="library.html"]::before {
  content:"← 返回";
  margin-right:5px;
  color:var(--muted);
  font-size:11px;
}

.wrap { width: min(var(--max), calc(100% - 44px)); margin: 0 auto; }
.eyebrow { margin: 0 0 14px; color: #4b5241; font-size: 12px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.display { margin: 0; font-weight: 200; font-size: clamp(58px, 11vw, 150px); line-height: .83; letter-spacing: -.075em; }
.pageTitle { max-width: 980px; margin: 0; font-weight: 200; font-size: clamp(48px, 8vw, 105px); line-height: .92; letter-spacing: -.06em; }
.lead { max-width: 760px; margin: 24px 0 0; color: var(--muted); font-size: clamp(18px, 2vw, 24px); line-height: 1.65; }
.accent { background: var(--acid); }
.section { padding: clamp(72px, 10vw, 132px) 0; border-top: 1px solid var(--line); }
.sectionHead { display: grid; grid-template-columns: .45fr 1fr; gap: 42px; align-items: end; margin-bottom: 44px; }
.sectionHead h2 { max-width: 900px; margin: 0; font-weight: 200; font-size: clamp(38px, 6vw, 78px); line-height: .97; letter-spacing: -.05em; }
.sectionHead p { max-width: 620px; margin: 18px 0 0; color: var(--muted); }

.homeHero { min-height: min(850px, calc(100vh - 72px)); display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(30px, 6vw, 86px); padding: clamp(64px, 9vw, 116px) 0; }
.homeHero .lead { max-width: 640px; }
.heroVisual { position: relative; min-height: 560px; overflow: hidden; border-radius: 0; background: #efefed; }
.heroVisual img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; }
.heroActions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 0; font-weight: 700; }
.button.primary { background: var(--ink); color: #fff; }
.button.primary:hover { color: var(--ink); background: var(--acid); }
.button.secondary:hover { background: #fff; }
.signalLine { width: 126px; height: 5px; margin: 26px 0; background: var(--acid); }

/* Apple-inspired minimal home, adapted to AiFan Lab */
.homePage { min-height: 100svh; background: #f3f0e8; }
.homePage main {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: calc(100svh - 56px);
  padding-top: 0;
}
.homePage .siteHeader {
  position: sticky;
  inset: 0 0 auto;
  z-index: 20;
  min-height: 56px;
  padding-top: 0;
  padding-bottom: 0;
  background: rgba(243,240,232,.84);
  border-bottom: 1px solid rgba(11,11,11,.08);
  backdrop-filter: saturate(160%) blur(18px);
}
.homePage .homeBrand { gap: 12px; }
.homePage .brandLogo { width: 29px; height: 29px; }
.homePage .nav { gap: 12px; }
.homePage .nav a { padding: 16px 6px; color: var(--ink); font-size: 14px; font-weight: 500; }
.homePage .nav a::after { bottom: 7px; }
.homePage .nav a:hover { background: transparent; }
.appleLikeHero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 0;
  padding: clamp(24px, 4vh, 44px) 24px 14px;
  justify-content: center;
  overflow: hidden;
  color: #1d1d1f;
  background: #f3f0e8;
  text-align: center;
}
.appleHeroCopy { position: relative; z-index: 3; display: grid; justify-items: center; width: 100%; text-align: center; }
.appleHeroCopy > * { width: 100%; text-align: center; }
.appleEyebrow { margin: 11px 0 0; color: #77736b; font-size: 14px; font-weight: 500; letter-spacing: .055em; }
.appleHeroCopy h1 { margin: 0; font-size: clamp(48px, 5.2vw, 72px); font-weight: 600; line-height: 1.07; letter-spacing: -.025em; }
.appleTagline { margin: 13px 0 0; font-size: clamp(22px, 2.25vw, 30px); font-weight: 400; line-height: 1.2; letter-spacing: -.01em; }
.appleSignalVisual {
  position: relative;
  width: min(440px, 40vw);
  margin: clamp(16px, 2.8vh, 28px) auto 0;
}
.appleHeroMark { position: relative; z-index: 2; width: 100%; }
.appleHeroMarkDark { display: none; }
.heartbeatSignal {
  position: absolute;
  top: 66%;
  left: 61%;
  z-index: 1;
  width: min(64vw, 840px);
  height: clamp(52px, 6vw, 76px);
  overflow: visible;
  transform: translateY(-50%);
  pointer-events: auto;
}
.heartbeatSignal path { fill: none; vector-effect: non-scaling-stroke; }
.heartbeatSignalGlow {
  stroke: rgba(197, 232, 3, .1);
  stroke-width: 9;
  filter: blur(6px);
}
.heartbeatSignalCore {
  stroke: rgba(197, 232, 3, .34);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 2px rgba(197, 232, 3, .2));
}
.heartbeatMotionPath { fill: none; stroke: none; }
.heartbeatParticles { pointer-events: none; }
.heartbeatParticle {
  fill: var(--acid);
  stroke: rgba(77, 92, 0, .7);
  stroke-width: .5;
  opacity: 0;
  filter: drop-shadow(0 0 1px rgba(77, 92, 0, .62)) drop-shadow(0 0 7px rgba(197, 232, 3, .88));
}
.heartbeatParticleHalo {
  fill: rgba(197, 232, 3, .2);
  stroke: rgba(105, 126, 0, .58);
  stroke-width: .7;
  opacity: 0;
  filter: blur(2.5px) drop-shadow(0 0 7px rgba(197, 232, 3, .7));
}
.appleHeroCharacters {
  position: absolute;
  right: clamp(4px, 1vw, 14px);
  bottom: 0;
  z-index: 6;
  width: clamp(78px, 7vw, 104px);
  aspect-ratio: 1024 / 1230;
  overflow: hidden;
  margin: 0;
  opacity: .9;
  pointer-events: none;
}
.appleHeroCharacters img { width: 100%; height: auto; }

.homeEntrySection {
  padding: 10px max(110px, calc((100vw - 1240px) / 2)) 18px;
  color: #1d1d1f;
  background: #f3f0e8;
}
.homeEntryGrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.homeEntryCard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: clamp(150px, 21vh, 188px);
  padding: clamp(17px, 1.7vw, 22px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 18px;
  background: rgba(248, 246, 240, .88);
  box-shadow:
    -4px -4px 10px rgba(255, 255, 255, .68),
    5px 7px 16px rgba(91, 80, 61, .08),
    inset 0 1px 0 rgba(255, 255, 255, .82),
    inset 0 -1px 0 rgba(82, 72, 55, .035);
  text-align: left;
  transition: transform .28s ease, background .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.homeEntryCard:hover,
.homeEntryCard:focus-visible {
  border-color: rgba(255, 255, 255, .82);
  transform: translateY(-3px);
  background: rgba(251, 250, 247, .96);
  box-shadow:
    -5px -5px 12px rgba(255, 255, 255, .76),
    7px 10px 20px rgba(91, 80, 61, .11),
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -1px 0 rgba(82, 72, 55, .03);
}
.homeEntryMeta { color: #99958c; font-size: 10px; font-weight: 600; letter-spacing: .1em; }
.homeEntryCard div { margin-top: auto; padding-right: 38px; }
.homeEntryCard h3 { margin: 0 0 8px; font-size: clamp(25px, 2.25vw, 34px); font-weight: 500; line-height: 1; letter-spacing: -.035em; }
.homeEntryCard p { max-width: 24em; margin: 0; color: #5d5952; font-size: clamp(12px, 1vw, 13px); line-height: 1.48; }
.homeEntryArrow {
  position: absolute;
  right: 18px;
  bottom: 17px;
  margin: 0;
  color: #1d1d1f;
  font-size: 20px;
  line-height: 1;
  opacity: .5;
  transition: transform .28s ease, opacity .28s ease, color .22s ease;
}
.homeEntryCard:hover .homeEntryArrow,
.homeEntryCard:focus-visible .homeEntryArrow { color: var(--acid); transform: translate(3px, -3px); opacity: 1; }

.routeGrid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.routeCard { min-height: 350px; display: flex; flex-direction: column; padding: clamp(26px, 4vw, 46px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); transition: transform .2s, background .2s; }
.routeCard:hover { position: relative; z-index: 1; transform: translateY(-6px); background: var(--acid); }
.routeCard .num { color: var(--red); font-weight: 900; }
.routeCard h2, .routeCard h3 { margin: auto 0 14px; font-weight: 200; font-size: clamp(31px, 4vw, 54px); line-height: .95; letter-spacing: -.045em; }
.routeCard p { margin: 0; color: #55544f; }
.routeCard strong { margin-top: 24px; }

.featureBand { color: #f6f1e7; background: var(--ink); }
.featureBand .sectionHead p, .featureBand .eyebrow { color: #bfc4b8; }
.featureGrid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
.featureMain, .featureSide { position: relative; overflow: hidden; min-height: 520px; border: 1px solid rgba(255,255,255,.18); }
.featureMain img { width: 100%; height: 520px; object-fit: cover; opacity: .78; }
.featureCopy { position: absolute; inset: auto 0 0; padding: 32px; background: rgba(0,0,0,.9); }
.featureCopy h3 { max-width: 700px; margin: 8px 0; font-size: clamp(32px, 4vw, 58px); line-height: .98; }
.featureCopy p { max-width: 650px; color: #d8d4cc; }
.featureSide { display: flex; flex-direction: column; justify-content: space-between; padding: 34px; background: #171916; }
.featureSide h3 { margin: 20px 0; font-size: clamp(32px, 4vw, 56px); line-height: .98; }
.metricRow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.metricRow div { padding-top: 18px; border-top: 1px solid #555; }
.metricRow strong { display: block; color: var(--acid); font-size: 34px; }
.metricRow span { color: #aaa; font-size: 13px; }

.storyList { display: grid; gap: 0; border-top: 1px solid var(--line); }
.storyRow { display: grid; grid-template-columns: 140px 1fr 1.2fr 44px; gap: 28px; align-items: center; min-height: 170px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.storyRow .tag { color: var(--red); font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.storyRow h3 { margin: 0; font-size: clamp(25px, 3vw, 39px); line-height: 1.05; }
.storyRow p { margin: 0; color: var(--muted); }
.storyRow .arrow { font-size: 30px; }

.characters { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 6vw, 80px); align-items: center; }
.characterCards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.characterCard { padding: 18px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); }
.characterCard img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #ebe8df; border-radius: 0; }
.characterCard h3 { margin: 18px 0 3px; font-size: 26px; }
.characterCard p { margin: 0; color: var(--muted); }

.pageHero { padding: clamp(86px, 12vw, 160px) 0 clamp(70px, 9vw, 120px); }
.sectionBack { display:inline-flex;align-items:center;margin:0 0 34px;padding:0 0 5px;border-bottom:1px solid transparent;color:var(--muted);font-size:13px;font-weight:700;line-height:1.4;transition:color .18s ease,border-color .18s ease }
.sectionBack:hover,.sectionBack:focus-visible { color:var(--ink);border-bottom-color:var(--acid) }
.sectionBack:focus-visible { outline:2px solid var(--acid);outline-offset:4px }
.pageHeroMeta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.pill { display: inline-flex; padding: 7px 11px; border: 1px solid var(--line); border-radius: 0; background: rgba(255,255,255,.45); font-size: 13px; font-weight: 700; }
.contentGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.contentCard { display: flex; flex-direction: column; min-height: 360px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.contentCard.dark { color: #fff; background: var(--ink); }
.contentCard.visual { padding: 0; overflow: hidden; }
.contentCard.visual img { width: 100%; height: 230px; object-fit: cover; }
.contentCard.visual .cardBody { padding: 26px; }
.contentCard .kicker { color: var(--red); font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.contentCard h2, .contentCard h3 { margin: auto 0 12px; font-weight: 300; font-size: clamp(27px, 3vw, 42px); line-height: 1.04; letter-spacing: -.035em; }
.contentCard.visual h3 { margin-top: 10px; }
.contentCard p { margin: 0; color: var(--muted); }
.contentCard.dark p { color: #bbb; }
.contentCard .cardLink { margin-top: 24px; font-weight: 900; }
.contentCard:hover .cardLink { color: var(--red); }

/* Training shelf / HTML lecture decks */
.trainingPage {
  --training-page: #fafaf8;
  --training-card: #fafaf8;
  --training-text: #0b0b0b;
  --training-muted: #64645f;
  --training-border: rgba(11,11,11,.06);
  --training-shadow: -8px -8px 18px rgba(255,255,255,.92), 10px 12px 26px rgba(157,151,139,.28), inset 0 1px 0 rgba(255,255,255,.65);
  min-height: 100svh;
  background: var(--training-page);
}
.trainingPage .siteHeader { background: rgba(243,240,232,.94); }
.trainingHero { padding: clamp(76px,10vw,142px) 0 clamp(66px,8vw,108px); color:var(--training-text);background:var(--training-page) }
.trainingHeroGrid { display:grid;grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr);gap:clamp(50px,8vw,120px);align-items:end }
.trainingHero h1 { max-width:14ch;margin:18px 0 0;font-size:clamp(52px,7.2vw,104px);font-weight:200;line-height:.94;letter-spacing:-.06em }
.trainingHeroCopy>p { margin:0;color:var(--training-muted);font-size:clamp(17px,1.45vw,21px);line-height:1.75 }
.trainingSummary { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:38px;border-top:1px solid var(--line);border-bottom:1px solid var(--line) }
.trainingSummary div { display:grid;gap:5px;padding:18px 12px 18px 0 }
.trainingSummary strong { font-size:clamp(31px,3vw,44px);font-weight:250;line-height:1 }
.trainingSummary span { color:var(--training-muted);font-size:11px }

.trainingPage main { overflow:hidden }
.trainingDeckHead { display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);gap:30px clamp(48px,8vw,112px);align-items:start;margin-bottom:clamp(44px,6vw,72px) }
.trainingDeckHead>div:first-child { grid-column:1 / -1 }
.trainingDeckHead h1 { max-width:none;margin:15px 0 0;font-size:clamp(46px,5.7vw,78px);font-weight:220;line-height:1;letter-spacing:-.057em;white-space:nowrap }
.trainingDeckIntro { grid-column:2;justify-self:end }
.trainingDeckIntro>p { max-width:610px;margin:0;color:var(--training-muted);font-size:17px;line-height:1.8 }
.trainingAccessNote { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:-22px 0 40px;border:1px solid var(--training-border);border-radius:18px;overflow:hidden;background:var(--training-border) }
.trainingAccessNote>div { padding:22px 26px;background:var(--training-card) }
.trainingAccessLabel { display:block;margin-bottom:9px;color:#718600;font:750 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em }
.trainingAccessNote strong { display:block;font-size:17px;font-weight:720 }
.trainingAccessNote p { margin:7px 0 0;color:var(--training-muted);font-size:13px;line-height:1.65 }
.trainingDeckStage { position:relative;width:100% }
.trainingDeckSide { position:absolute;top:50%;z-index:5;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--training-border);border-radius:50%;color:var(--training-text);background:rgba(250,250,248,.9);box-shadow:-4px -4px 10px rgba(255,255,255,.86),5px 6px 13px rgba(157,151,139,.26);font-size:19px;cursor:pointer;transform:translateY(-50%);backdrop-filter:blur(10px);transition:background .18s ease,color .18s ease,opacity .18s ease,transform .18s ease }
.trainingDeckSidePrev { left:-24px }
.trainingDeckSideNext { right:-24px }
.trainingDeckSide:not(:disabled):hover,.trainingDeckSide:focus-visible { color:#0b0b0b;background:var(--acid);transform:translateY(-50%) scale(1.05) }
.trainingDeckSide:focus-visible { outline:2px solid var(--acid);outline-offset:3px }
.trainingDeckSide:disabled { opacity:.2;cursor:default }
.trainingDeckViewport { --deck-peek:clamp(54px,6vw,88px);width:calc(100% + var(--deck-peek));padding:12px 4px 20px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - var(--deck-peek)),rgba(0,0,0,.42) calc(100% - 22px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - var(--deck-peek)),rgba(0,0,0,.42) calc(100% - 22px),transparent 100%) }
.trainingDeckStage.isAtEnd .trainingDeckViewport { -webkit-mask-image:none;mask-image:none }
.trainingDeckViewport::-webkit-scrollbar { display:none }
.trainingDeckViewport:focus { outline:none }
.trainingDeckViewport:focus-visible { outline:2px solid var(--acid);outline-offset:5px }
.trainingDeckGrid { display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - var(--deck-peek) - 36px)/3);gap:18px;margin:0;padding:0;list-style:none }
.trainingDeckGrid>li { min-width:0;scroll-snap-align:start }
.trainingDeckCard { position:relative;display:flex;min-height:470px;flex-direction:column;padding:clamp(25px,2.4vw,34px);overflow:hidden;border:1px solid var(--training-border);border-radius:22px;color:var(--training-text);background:var(--training-card);box-shadow:var(--training-shadow);transition:transform .25s cubic-bezier(.22,1,.36,1),background .22s ease,color .22s ease,box-shadow .25s ease }
.trainingDeckCard:hover,.trainingDeckCard:focus-visible,.trainingDeckFeatured { color:#0b0b0b;background:var(--acid);box-shadow:-7px -7px 16px rgba(255,255,255,.72),12px 15px 28px rgba(130,145,45,.24) }
.trainingDeckGrid:has(.trainingDeckCard:hover) .trainingDeckFeatured:not(:hover),.trainingDeckGrid:has(.trainingDeckCard:focus-visible) .trainingDeckFeatured:not(:focus-visible) { color:var(--training-text);background:var(--training-card);box-shadow:var(--training-shadow) }
.trainingDeckGrid:has(.trainingDeckCard:hover) .trainingDeckFeatured:not(:hover) .trainingDeckLevel,.trainingDeckGrid:has(.trainingDeckCard:hover) .trainingDeckFeatured:not(:hover)>.kicker,.trainingDeckGrid:has(.trainingDeckCard:focus-visible) .trainingDeckFeatured:not(:focus-visible) .trainingDeckLevel,.trainingDeckGrid:has(.trainingDeckCard:focus-visible) .trainingDeckFeatured:not(:focus-visible)>.kicker { color:var(--training-muted) }
.trainingDeckGrid:has(.trainingDeckCard:hover) .trainingDeckFeatured:not(:hover)>p:not(.kicker):not(.trainingDeckLevel),.trainingDeckGrid:has(.trainingDeckCard:focus-visible) .trainingDeckFeatured:not(:focus-visible)>p:not(.kicker):not(.trainingDeckLevel) { color:var(--training-muted) }
.trainingDeckGrid:has(.trainingDeckCard:hover) .trainingDeckFeatured:not(:hover) .trainingDeckOutcome span,.trainingDeckGrid:has(.trainingDeckCard:focus-visible) .trainingDeckFeatured:not(:focus-visible) .trainingDeckOutcome span { color:var(--training-muted) }
.trainingDeckCard:hover,.trainingDeckCard:focus-visible { transform:translateY(-5px) }
.trainingDeckCard:focus-visible { outline:2px solid var(--acid);outline-offset:4px }
.trainingDeckIndex { font-size:clamp(54px,5.1vw,72px);font-weight:200;line-height:.8;letter-spacing:-.07em }
.trainingDeckLevel { position:absolute;top:28px;right:28px;margin:0;color:var(--training-muted);font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em }
.trainingDeckStatus { position:absolute;top:83px;right:28px;padding:6px 9px;border:1px solid var(--training-border);border-radius:999px;color:var(--training-muted);font:750 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em }
.trainingDeckStatusOpen { color:#111;background:rgba(255,255,255,.42);border-color:rgba(17,17,15,.18) }
.trainingDeckFeatured .trainingDeckLevel,.trainingDeckFeatured>.kicker,.trainingDeckCard:hover .trainingDeckLevel,.trainingDeckCard:hover>.kicker,.trainingDeckCard:focus-visible .trainingDeckLevel,.trainingDeckCard:focus-visible>.kicker { color:#3f490e }
.trainingDeckCard>.kicker { margin:48px 0 12px;color:var(--training-muted);font:700 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em }
.trainingDeckCard h2 { max-width:12ch;margin:0;font-size:clamp(31px,3vw,43px);font-weight:280;line-height:1.02;letter-spacing:-.045em }
.trainingDeckCard>p:not(.kicker):not(.trainingDeckLevel) { margin:18px 0 0;color:var(--training-muted);font-size:14px;line-height:1.7 }
.trainingDeckFeatured>p:not(.kicker):not(.trainingDeckLevel),.trainingDeckCard:hover>p:not(.kicker):not(.trainingDeckLevel),.trainingDeckCard:focus-visible>p:not(.kicker):not(.trainingDeckLevel) { color:#303327 }
.trainingDeckOutcome { display:grid;gap:4px;margin-top:auto;padding-top:26px;border-top:1px solid rgba(100,100,95,.25) }
.trainingDeckOutcome span { color:var(--training-muted);font-size:10px;font-weight:700;letter-spacing:.09em }
.trainingDeckOutcome strong { font-size:16px;font-weight:650 }
.trainingDeckFeatured .trainingDeckOutcome span,.trainingDeckCard:hover .trainingDeckOutcome span,.trainingDeckCard:focus-visible .trainingDeckOutcome span { color:#4b511f }
.trainingDeckLink { display:flex;justify-content:space-between;align-items:center;margin-top:22px;font-size:13px;font-weight:750 }
.trainingDeckLink span { font-size:20px;transition:transform .2s ease }
.trainingDeckCard:hover .trainingDeckLink span,.trainingDeckCard:focus-visible .trainingDeckLink span { transform:translateX(4px) }
.trainingDeckAudio { display:block;margin-top:9px;color:#3f490e;font-size:11px;font-weight:750;letter-spacing:.04em }
.trainingDeckLocked { cursor:not-allowed;opacity:.88 }
.trainingDeckLocked .trainingDeckStatus { color:#111;background:#dbe99b;border-color:rgba(17,17,15,.18) }
.trainingDeckLocked:hover { color:#0b0b0b;background:var(--acid);border-color:rgba(17,17,15,.18);box-shadow:-9px -9px 20px rgba(255,255,255,.76),14px 18px 34px rgba(130,145,45,.3);transform:translateY(-8px) scale(1.025) }
.trainingDeckLocked:hover .trainingDeckLevel,.trainingDeckLocked:hover>.kicker { color:#3f490e }
.trainingDeckLocked:hover>p:not(.kicker):not(.trainingDeckLevel) { color:#303327 }
.trainingDeckLocked:hover .trainingDeckOutcome span { color:#4b511f }
.trainingDeckLocked:hover .trainingDeckStatus { color:var(--acid);background:#171714;border-color:#171714 }
.trainingDeckLocked .trainingDeckLink { min-height:42px;padding:0 13px;border-radius:11px;color:#f7f5ef;background:#171714 }
.trainingDeckLocked:hover .trainingDeckLink { box-shadow:0 8px 18px rgba(17,17,15,.2) }
.trainingDeckLocked .trainingDeckLink span { transform:none!important }
.trainingLockIcon { position:relative;display:inline-block;width:15px;height:12px;border:2px solid var(--acid);border-radius:3px }
.trainingLockIcon::before { content:"";position:absolute;left:50%;bottom:8px;width:8px;height:8px;border:2px solid var(--acid);border-bottom:0;border-radius:8px 8px 0 0;transform:translateX(-50%) }
.trainingDeckFooter { display:flex;align-items:center;justify-content:space-between;gap:24px;margin:12px 4px 0 }
.trainingDeckCounter { color:var(--training-muted);font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em }
.trainingDeckCounter b { color:var(--training-text);font-weight:750 }
.trainingDeckHint { margin:0;color:var(--training-muted);font-size:11px;letter-spacing:.04em }

@media (max-width:980px) {
  .trainingDeckHead { grid-template-columns:1fr;gap:28px }
  .trainingDeckHead>div:first-child,.trainingDeckIntro { grid-column:1 }
  .trainingDeckIntro { max-width:720px;justify-self:start }
  .trainingAccessNote { margin-top:-8px }
  .trainingDeckGrid { grid-auto-columns:calc((100% - var(--deck-peek) - 18px)/2) }
}
@media (max-width:720px) {
  .trainingDeckHead h1 { max-width:9ch;font-size:clamp(42px,12vw,54px);line-height:1.03;white-space:normal;text-wrap:balance }
  .trainingAccessNote { grid-template-columns:1fr;margin-bottom:28px }
  .trainingDeckViewport { --deck-peek:54px;width:calc(100% + 16px);-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 54px),rgba(0,0,0,.42) calc(100% - 18px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 54px),rgba(0,0,0,.42) calc(100% - 18px),transparent 100%) }
  .trainingDeckGrid { grid-auto-columns:calc(100% - 70px);gap:14px }
  .trainingDeckSide { width:42px;height:42px }
  .trainingDeckSidePrev { left:6px }
  .trainingDeckSideNext { right:6px }
  .trainingDeckCard { min-height:440px;padding:24px;border-radius:18px }
  .trainingDeckLevel { top:25px;right:24px }
  .trainingDeckCard>.kicker { margin-top:42px }
  .trainingDeckFooter { align-items:flex-start;flex-direction:column;gap:7px }
  .trainingDeckHint { font-size:10px }
}

.trainingShelf { min-height:calc(100svh - 72px);padding:clamp(60px,8vw,110px) 0;color:var(--training-text);background:var(--training-page);border-top:1px solid var(--line) }
.trainingShelf .eyebrow { color:var(--training-muted) }
.trainingJourneyHead { display:grid;grid-template-columns:.7fr 1fr;gap:clamp(36px,8vw,110px);align-items:end;margin-bottom:clamp(66px,8vw,108px) }
.trainingJourneyHead h2 { margin:12px 0 0;font-size:clamp(43px,6vw,76px);font-weight:220;line-height:.98;letter-spacing:-.05em }
.trainingJourneyHead>p { max-width:650px;margin:0;color:var(--training-muted);font-size:17px;line-height:1.8 }
.trainingLevel { display:grid;grid-template-columns:64px 1fr auto;gap:22px;align-items:center;margin:60px 0 18px;padding-bottom:12px;border-bottom:1px solid var(--line) }
.trainingLevel span,.trainingLevel small { color:var(--training-muted);font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em }
.trainingLevel strong { font-size:15px;font-weight:650;letter-spacing:.02em }
.trainingJourney { display:grid;gap:12px;margin:0;padding:0;list-style:none }
.trainingJourneyCard { display:grid;grid-template-columns:94px minmax(0,1fr) minmax(180px,.34fr) 42px;gap:clamp(18px,3vw,46px);align-items:center;min-height:210px;padding:clamp(24px,3vw,36px);border:1px solid var(--training-border);border-radius:22px;color:var(--training-text);background:var(--training-card);box-shadow:var(--training-shadow);transition:transform .24s ease,background .24s ease,color .24s ease,box-shadow .24s ease }
.trainingJourneyCard:hover,.trainingJourneyCard:focus-visible { color:#0b0b0b;background:var(--acid);transform:translateX(8px);box-shadow:-6px -6px 15px rgba(255,255,255,.74),12px 15px 28px rgba(130,145,45,.28) }
.trainingJourneyCard:focus-visible { outline:2px solid var(--acid);outline-offset:4px }
.trainingJourneyFeatured { border-color:rgba(133,156,9,.45) }
.trainingJourneyIndex { color:var(--acid);font-size:clamp(52px,5.5vw,78px);font-weight:200;line-height:.8;letter-spacing:-.07em }
.trainingJourneyCard:hover .trainingJourneyIndex,.trainingJourneyCard:focus-visible .trainingJourneyIndex { color:#0b0b0b }
.trainingJourneyMain .kicker { margin:0 0 13px;color:var(--training-muted);font:700 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em }
.trainingJourneyMain h3 { margin:0 0 12px;font-size:clamp(30px,3.2vw,46px);font-weight:280;line-height:1;letter-spacing:-.045em }
.trainingJourneyMain>p:not(.kicker) { max-width:700px;margin:0;color:var(--training-muted);font-size:15px;line-height:1.65 }
.trainingJourneyCard:hover .trainingJourneyMain>p,.trainingJourneyCard:focus-visible .trainingJourneyMain>p { color:#3d3d36 }
.trainingJourneyOutcome { display:grid;align-content:center;gap:7px;min-height:104px;padding-left:22px;border-left:1px solid var(--line) }
.trainingJourneyOutcome span { color:var(--training-muted);font-size:10px;font-weight:700;letter-spacing:.1em }
.trainingJourneyOutcome strong { font-size:16px;font-weight:650;line-height:1.35 }
.trainingJourneyOutcome em { width:max-content;padding:5px 8px;color:#5b5b55;background:rgba(128,128,120,.1);font-size:10px;font-style:normal;font-weight:700 }
.trainingJourneyCard:hover .trainingJourneyOutcome em,.trainingJourneyCard:focus-visible .trainingJourneyOutcome em { background:rgba(11,11,11,.1) }
.trainingJourneyArrow { display:grid;place-items:center;width:40px;height:40px;border:1px solid currentColor;border-radius:50%;font-size:20px;transition:transform .24s ease }
.trainingJourneyCard:hover .trainingJourneyArrow,.trainingJourneyCard:focus-visible .trainingJourneyArrow { transform:translateX(4px) }
.trainingUseNote { display:grid;grid-template-columns:.38fr 1fr;gap:clamp(28px,7vw,96px);margin-top:clamp(86px,11vw,150px);padding:clamp(42px,6vw,78px) 0;border-top:7px solid var(--acid);border-bottom:1px solid var(--line) }
.trainingUseNote .eyebrow { grid-row:1 / span 2 }
.trainingUseNote h2 { max-width:18ch;margin:0;font-size:clamp(38px,5vw,66px);font-weight:220;line-height:1;letter-spacing:-.05em }
.trainingUseNote>p:last-child { max-width:760px;margin:10px 0 0;color:var(--training-muted);font-size:16px;line-height:1.8 }

.filterBar { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 28px; }
.filterBar span { padding: 8px 12px; border-radius: 0; background: #e6e2d8; font-size: 13px; font-weight: 700; }
.filterBar span.active { background: var(--ink); color: var(--acid); }

.articleLayout { display: grid; grid-template-columns: 250px minmax(0, 760px); gap: clamp(36px, 7vw, 90px); align-items: start; }
.articleSide { position: sticky; top: 108px; padding-top: 8px; }
.articleSide p { color: var(--muted); font-size: 14px; }
.articleSide a { display: block; padding: 7px 0; border-bottom: 1px solid var(--line); font-weight: 700; }
.articleBody { font-size: 18px; }
.articleBody h2 { margin: 82px 0 20px; font-size: clamp(34px, 5vw, 58px); line-height: 1.04; letter-spacing: -.04em; }
.articleBody h3 { margin: 42px 0 12px; font-size: 26px; line-height: 1.2; }
.articleBody p, .articleBody li { color: #343430; }
.articleBody blockquote { margin: 34px 0; padding: 24px 28px; border-left: 6px solid var(--acid); background: var(--white); font-size: 23px; font-weight: 800; }
.articleBody ul, .articleBody ol { padding-left: 24px; }
.articleBody .callout { margin: 34px 0; padding: 28px; border-radius: var(--radius); background: var(--ink); color: #fff; }
.articleBody .callout p { color: #ddd; }
.articleBody .callout strong { color: var(--acid); }
.process { display: grid; gap: 12px; margin: 30px 0; }
.process div { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 20px; border: 1px solid var(--line); background: var(--white); }
.process b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 0; background: var(--acid); }
.process strong { display: block; margin-bottom: 5px; }

.caseHero { padding: clamp(80px, 10vw, 130px) 0 62px; }
.caseHero .pageTitle { max-width: 1080px; }
.caseFacts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 60px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.caseFacts div { min-height: 140px; padding: 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.caseFacts span { display: block; color: var(--muted); font-size: 13px; }
.caseFacts strong { display: block; margin-top: 18px; font-size: 20px; line-height: 1.3; }
.caseCover { width: 100%; max-height: 720px; object-fit: cover; background: #e5e0d4; }
.resultGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 32px 0; }
.resultGrid div { padding: 26px; border: 1px solid var(--line); background: var(--white); }
.resultGrid strong { display: block; font-size: 23px; }
.resultGrid p { margin-bottom: 0; }

.cta { padding: clamp(65px, 9vw, 110px) 0; color: #fff; background: var(--ink); }
.ctaInner { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.cta h2 { max-width: 900px; margin: 0; font-size: clamp(42px, 7vw, 88px); line-height: .93; letter-spacing: -.05em; }
.cta p { color: #bbb; }
.cta .button { border-color: var(--acid); color: var(--acid); }
.cta .button:hover { color: var(--ink); background: var(--acid); }

.siteFooter { padding: 46px max(22px, calc((100vw - var(--max)) / 2)); border-top: 1px solid var(--line); }
.footerTop { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.footerTop p { max-width: 600px; color: var(--muted); }
.footerNav { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; font-weight: 650; }
.footerNav a:hover { color: #4b5241; }
.footerBottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

@media (max-width: 980px) {
  .siteHeader { align-items: center; }
  .homeHero, .featureGrid, .characters { grid-template-columns: 1fr; }
  .homeHero { min-height: 0; }
  .heroVisual, .heroVisual img { min-height: 430px; }
  .routeGrid, .contentGrid { grid-template-columns: repeat(2, 1fr); }
  .sectionHead { grid-template-columns: 1fr; gap: 8px; }
  .storyRow { grid-template-columns: 100px 1fr 38px; }
  .storyRow p { grid-column: 2; }
  .articleLayout { grid-template-columns: 1fr; }
  .articleSide { position: static; display: none; }
  .caseFacts { grid-template-columns: repeat(2, 1fr); }
  .homeEntryGrid { gap: 9px; }
  .homeEntryCard { padding: 16px; }
  .homeEntryMeta { font-size: 9px; letter-spacing: .08em; }
  .homeEntryCard p { font-size: 12px; }
  .trainingHeroGrid,.trainingJourneyHead { grid-template-columns:1fr }
  .trainingHeroCopy { max-width:720px }
  .trainingJourneyCard { grid-template-columns:76px minmax(0,1fr) 190px 40px }
}

@media (max-width: 720px) {
  .siteHeader { position: sticky;display:flex;align-items:center;min-height:52px;padding:0 14px }
  .brand span { display:none }
  .brandLogo { width:27px;height:27px }
  .nav { justify-content:flex-end;gap:2px;margin:0;padding:0;overflow:visible;flex-wrap:nowrap }
  .nav a { padding:15px 7px;background:transparent;font-size:13px;font-weight:500 }
  .wrap { width: min(100% - 32px, var(--max)); }
  .display { font-size: clamp(58px, 23vw, 100px); }
  .homeHero { padding-top: 54px; }
  .heroVisual, .heroVisual img { min-height: 360px; }
  .routeGrid, .contentGrid, .characterCards, .resultGrid { grid-template-columns: 1fr; }
  .trainingHero { padding-top:54px }
  .trainingHero h1 { font-size:clamp(43px,13vw,66px) }
  .trainingSummary div { padding-right:6px }
  .trainingLevel { grid-template-columns:42px 1fr }
  .trainingLevel small { display:none }
  .trainingJourneyCard { grid-template-columns:48px 1fr 34px;gap:14px;min-height:0;padding:24px 18px;border-radius:17px }
  .trainingJourneyIndex { align-self:start;font-size:43px }
  .trainingJourneyOutcome { grid-column:2 / 4;min-height:0;padding:16px 0 0;border-top:1px solid var(--line);border-left:0 }
  .trainingJourneyArrow { grid-column:3;grid-row:1;width:34px;height:34px }
  .trainingJourneyMain h3 { font-size:31px }
  .trainingUseNote { grid-template-columns:1fr }
  .trainingUseNote .eyebrow { grid-row:auto }
  .routeCard { min-height: 280px; }
  .featureMain, .featureSide, .featureMain img { min-height: 440px; }
  .metricRow { grid-template-columns: 1fr; }
  .storyRow { grid-template-columns: 1fr 34px; gap: 12px; }
  .storyRow .tag, .storyRow p { grid-column: 1; }
  .storyRow .arrow { grid-column: 2; grid-row: 1 / span 3; }
  .caseFacts { grid-template-columns: 1fr; }
  .ctaInner, .footerTop { display: block; }
  .cta .button { margin-top: 26px; }
  .footerNav { margin-top: 24px; }
  .footerBottom { flex-direction: column; gap: 5px; }
  .homePage .siteHeader { position: sticky; display: flex; align-items: center; min-height: 52px; padding: 0 14px; }
  .homePage .brandLogo { width: 27px; height: 27px; }
  .homePage .nav { justify-content: flex-end; gap: 2px; margin: 0; padding: 0; }
  .homePage .nav a { padding: 15px 7px; background: transparent; font-size: 13px; font-weight: 500; }
  .homePage main { min-height: calc(100svh - 52px); padding-top: 0; }
  .appleLikeHero { min-height: 0; padding: 20px 16px 8px; }
  .appleEyebrow { margin-top: 9px; font-size: 12px; }
  .appleHeroCopy h1 { font-size: clamp(40px, 12vw, 50px); }
  .appleTagline { font-size: clamp(20px, 6vw, 24px); }
  .appleSignalVisual { width: min(68vw, 300px); margin-top: 18px; }
  .heartbeatSignal { left: 60%; width: 70vw; height: 50px; }
  .appleHeroCharacters { right: -8px; bottom: 0; width: 82px; opacity: .88; }
  .homeEntrySection { padding: 8px 76px 14px 16px; overflow: hidden; }
  .homeEntryGrid { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .homeEntryGrid::-webkit-scrollbar { display: none; }
  .homeEntryCard,
  .homeEntryCard:nth-child(-n+2),
  .homeEntryCard:nth-child(n+3),
  .homeEntryCard:last-child { flex: 0 0 min(68vw, 240px); min-height: 178px; padding: 18px; border-radius: 16px; scroll-snap-align: start; }
  .homeEntryCard h3 { font-size: 28px; }
  .homeEntryCard p { font-size: 12px; }
  .homeEntryArrow { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .siteTransitionLine { display: none !important; }
  .isPageEntering main,
  .motionModule.isRevealed,
  .libraryArchive.isSectionSwitching .libraryArchiveHead,
  .libraryArchive.isSectionSwitching .libraryGrid { animation: none !important; }
  .motionModule,
  .isPageLeaving main { opacity: 1 !important; transform: none !important; filter: none !important; }
  .heartbeatSignalCore,
  .heartbeatSignalGlow,
  .heartbeatParticle { animation: none !important; }
}

/* Unified archive */
.archiveTools { display:grid;grid-template-columns:minmax(280px,1fr) auto;gap:20px;align-items:end;margin-bottom:34px;padding-bottom:24px;border-bottom:1px solid var(--line) }
.archiveSearch { display:grid;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase }
.archiveSearch input { min-height:48px;padding:0 14px;border:1px solid var(--ink);border-radius:0;background:var(--white);font:inherit }
.archiveFilters { display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line) }
.archiveFilters button { min-height:46px;padding:0 16px;border:0;border-radius:0;background:var(--paper);font-weight:600;cursor:pointer }
.archiveFilters button.active,.archiveFilters button:hover { background:var(--acid) }
.materialGrid { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line) }
.materialCard { display:flex;flex-direction:column;min-height:520px;padding:0;border:0;border-radius:0;background:var(--white);text-align:left;cursor:pointer }
.materialCard img { width:100%;height:250px;object-fit:cover;background:#efefed }
.materialMeta { margin:22px 24px 0;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase }
.materialCard h2 { margin:auto 24px 10px;font-size:30px;font-weight:300;line-height:1.05;letter-spacing:-.03em }
.materialCard p { margin:0 24px;color:var(--muted);font-size:14px }
.materialCard strong { margin:22px 24px 24px;font-size:13px }
.materialCard:hover { background:var(--acid) }
.materialCard:hover .materialMeta,.materialCard:hover p { color:var(--ink) }
.archiveEmpty { padding:40px 0;color:var(--muted) }
.archiveMore { display:flex;justify-content:center;margin-top:34px }
.styleDirectionGrid { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line) }
.styleDirection { margin:0;padding:0 24px 28px;background:var(--white) }
.styleDirection img { width:calc(100% + 48px);height:260px;margin:0 -24px 24px;object-fit:cover;background:#efefed }
.styleDirection span { color:var(--muted);font:700 11px/1.2 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase }
.styleDirection h3 { margin:34px 0 10px;font-size:30px;font-weight:300;line-height:1.05 }
.styleDirection p { margin:0;color:var(--muted) }
.materialDialog { width:min(900px,calc(100% - 32px));max-height:90vh;padding:0;border:1px solid var(--ink);border-radius:0;background:var(--paper) }
.materialDialog::backdrop { background:rgba(0,0,0,.72) }
.dialogClose { position:sticky;top:0;float:right;z-index:2;width:48px;height:48px;border:0;border-radius:0;background:var(--acid);font-size:28px;cursor:pointer }
#dialogBody { padding:52px clamp(24px,5vw,64px) 64px }
#dialogBody h2 { max-width:14ch;margin:0;font-size:clamp(40px,6vw,76px);font-weight:200;line-height:.95;letter-spacing:-.04em }
.dialogSummary { max-width:48em;color:var(--muted);font-size:18px }
.dialogImage { width:100%;max-height:520px;margin:34px 0;object-fit:contain;background:#efefed }
.dialogSection { display:grid;grid-template-columns:150px 1fr;gap:24px;padding:22px 0;border-top:1px solid var(--line) }
.dialogSection span { font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase }
.dialogSection p { margin:0 }
.dialogMeta { display:flex;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid var(--ink);color:var(--muted);font-size:12px }

@media (max-width:900px) { .materialGrid,.styleDirectionGrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:650px) { .archiveTools{grid-template-columns:1fr}.materialGrid,.styleDirectionGrid{grid-template-columns:1fr}.materialCard{min-height:470px}.dialogSection{grid-template-columns:1fr;gap:8px} }

/* Inspiration library / three focused collections */
.libraryPage { background:#f3f0e8 }
.libraryPage .siteHeader { min-height:56px;padding-top:0;padding-bottom:0;background:rgba(243,240,232,.88) }
.libraryPage .brandLogo { width:29px;height:29px }
.libraryPage .nav { gap:12px }
.libraryPage .nav a { padding:16px 6px;color:var(--ink);font-size:14px;font-weight:500 }
.libraryPage .nav a::after { bottom:7px }
.libraryHero { padding:clamp(64px,8vw,96px) 0 clamp(54px,7vw,82px);background:#f3f0e8 }
.libraryHero h1 { max-width:980px;margin:0;font-size:clamp(54px,7vw,88px);font-weight:400;line-height:1;letter-spacing:-.055em }
.librarySections { display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(46px,6vw,66px) }
.librarySection { position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:20px 16px;min-height:142px;padding:22px 54px 22px 22px;border:0;border-radius:22px;color:var(--ink);background:#f3f0e8;box-shadow:-7px -7px 16px rgba(255,255,255,.92),7px 7px 16px rgba(157,151,139,.26);text-align:left;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease }
.librarySection>span { color:#77776f;font:600 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em }
.librarySection>strong { align-self:start;font-size:clamp(22px,2.4vw,34px);font-weight:400;line-height:1.08;letter-spacing:-.035em }
.librarySection>small { grid-column:2;color:#77776f;font-size:12px }
.librarySection::after { content:"↗";position:absolute;right:20px;top:18px;font-size:20px;font-weight:400 }
.librarySection::before { content:"";position:absolute;right:22px;bottom:22px;width:9px;height:9px;border-radius:50%;background:transparent }
.librarySection:hover { transform:translateY(-2px) }
.librarySection:active { transform:none }
.librarySection.active { box-shadow:inset -5px -5px 11px rgba(255,255,255,.92),inset 5px 5px 11px rgba(157,151,139,.28) }
.librarySection.active>span,.librarySection.active>small { color:#62625c }
.librarySection.active::before { background:var(--acid) }
.libraryArchive { padding:clamp(72px,9vw,112px) 0;background:#f7f5ef;scroll-margin-top:52px }
.libraryArchiveHead { display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:64px;align-items:end;padding-bottom:36px;border-bottom:1px solid var(--line) }
.libraryArchiveHead h2 { margin:0;font-size:clamp(36px,5vw,58px);font-weight:400;line-height:1;letter-spacing:-.045em }
.librarySearch { display:grid;gap:9px }
.librarySearch span { color:#686861;font-size:11px;font-weight:700;letter-spacing:.12em }
.librarySearch input { width:100%;height:50px;padding:0 0;border:0;border-bottom:1px solid var(--ink);border-radius:0;outline:0;color:var(--ink);background:transparent;font-size:16px }
.librarySearch input:focus { border-bottom-width:3px;border-bottom-color:#8da600 }
.libraryResultCount { margin:24px 0;color:#6b6b65;font-size:12px;font-weight:600;letter-spacing:.08em }
.libraryGrid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(17,17,15,.16);border:1px solid rgba(17,17,15,.16) }
.libraryCard { display:flex;min-width:0;min-height:560px;flex-direction:column;padding:0;border:0;color:var(--ink);background:#fffefa;text-align:left;cursor:pointer;transition:background .18s ease,transform .18s ease }
.libraryCard:hover { background:#e9e5da }
.libraryCard:focus-visible { position:relative;z-index:1;outline:4px solid var(--acid);outline-offset:-4px }
.libraryCardVisual { position:relative;display:block;overflow:hidden;aspect-ratio:4/3;background:#e7e4dc }
.libraryCardVisual img { width:100%;height:100%;object-fit:cover;transition:transform .45s ease }
.libraryCard:hover .libraryCardVisual img { transform:scale(1.025) }
.libraryTypeBadge { position:absolute;top:14px;right:14px;z-index:1;display:inline-flex;align-items:center;min-height:25px;padding:0 9px;border-radius:999px;color:#fff;background:rgba(17,17,15,.82);backdrop-filter:blur(8px);font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;letter-spacing:.13em }
.libraryCardMeta { margin:22px 24px 0;color:#74746d;font:600 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em;text-transform:uppercase }
.libraryCard>strong { margin:22px 24px 12px;font-size:clamp(26px,2.3vw,34px);font-weight:400;line-height:1.08;letter-spacing:-.035em }
.styleCard>strong { margin-top:18px }
.libraryCard>small { display:-webkit-box;margin:0 24px;overflow:hidden;color:#66665f;font-size:14px;font-weight:400;line-height:1.65;-webkit-box-orient:vertical;-webkit-line-clamp:3 }
.libraryCard>b { display:flex;justify-content:space-between;gap:20px;margin:auto 24px 24px;padding-top:24px;border-top:1px solid rgba(17,17,15,.14);font-size:12px;font-weight:700 }
.libraryCard>b i { font-style:normal;font-size:18px;font-weight:400 }
.libraryStyleVisual { position:relative;display:flex;min-height:255px;align-items:flex-end;justify-content:space-between;padding:22px;overflow:hidden;color:#f3f0e8;background:#181817 }
.libraryStyleVisual::before { content:"";position:absolute;inset:14%;border:1px solid rgba(255,255,255,.24);transform:rotate(-7deg) }
.libraryStyleVisual em { position:relative;z-index:1;font:600 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase }
.libraryStyleVisual i { position:relative;z-index:1;font:300 clamp(80px,10vw,148px)/.72 Georgia,serif;font-style:normal }
.styleCard.architecture .libraryStyleVisual,.libraryStyleHero.architecture { color:#171716;background:#c7bfac }
.styleCard.art .libraryStyleVisual,.libraryStyleHero.art { color:#faf7ec;background:#8b3c2f }
.styleCard.photo .libraryStyleVisual,.libraryStyleHero.photo { color:#f8f6ef;background:#323638 }
.styleCard.fashion .libraryStyleVisual,.libraryStyleHero.fashion { color:#1b1b19;background:#c4d6cc }
.styleCard.design .libraryStyleVisual,.libraryStyleHero.design { color:#171716;background:#d8c750 }
.libraryEmpty { padding:50px 0;color:var(--muted) }
.libraryMore { display:flex;justify-content:center;margin-top:42px }
.libraryMore button { min-width:160px;min-height:48px;border:1px solid var(--ink);border-radius:0;color:var(--ink);background:transparent;font-weight:700;cursor:pointer }
.libraryMore button:hover { background:var(--acid) }
.libraryDialog { width:min(920px,calc(100% - 32px));max-height:92svh;margin:auto;padding:0;overflow:auto;border:0;border-radius:0;color:var(--ink);background:#f3f0e8;box-shadow:0 30px 100px rgba(0,0,0,.35) }
.libraryDialog::backdrop { background:rgba(17,17,15,.72);backdrop-filter:blur(6px) }
.libraryDialogClose { position:sticky;top:0;float:right;z-index:2;width:52px;height:52px;border:0;border-radius:0;color:var(--ink);background:var(--acid);font-size:30px;font-weight:300;cursor:pointer }
#libraryDialogBody { padding:clamp(54px,7vw,82px) clamp(24px,6vw,72px) 72px }
#libraryDialogBody h2 { max-width:13ch;margin:0;font-size:clamp(45px,7vw,82px);font-weight:300;line-height:.94;letter-spacing:-.055em }
.libraryDialogLead { max-width:48em;margin:24px 0 0;color:var(--muted);font-size:18px;line-height:1.7 }
.libraryDialogImage { width:100%;max-height:560px;margin:40px 0;object-fit:contain;background:#e6e2d8 }
.libraryStyleHero { position:relative;display:flex;min-height:380px;align-items:flex-end;justify-content:space-between;margin:40px 0;padding:32px;overflow:hidden;color:#f3f0e8;background:#181817 }
.libraryStyleHero::before { content:"";position:absolute;inset:14%;border:1px solid currentColor;opacity:.3;transform:rotate(-7deg) }
.libraryStyleHero span { position:relative;z-index:1;font-size:clamp(26px,4vw,46px);font-weight:400 }
.libraryStyleHero i { position:relative;z-index:1;font:300 clamp(150px,24vw,280px)/.7 Georgia,serif;font-style:normal }
#libraryDialogBody section { display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding:24px 0;border-top:1px solid var(--line) }
#libraryDialogBody section>span { font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase }
#libraryDialogBody section p { margin:0;white-space:pre-wrap }
.copyPrompt { grid-column:2;justify-self:start;min-height:38px;margin-top:4px;padding:0 13px;border:1px solid var(--ink);border-radius:0;background:transparent;font-size:12px;font-weight:700;cursor:pointer }
.copyPrompt:hover { background:var(--acid) }
#libraryDialogBody footer { display:flex;justify-content:space-between;gap:24px;margin-top:24px;padding-top:20px;border-top:1px solid var(--ink);color:var(--muted);font-size:12px }

@media (max-width:900px) {
  .librarySections { grid-template-columns:1fr }
  .librarySection { min-height:118px }
  .libraryArchiveHead { grid-template-columns:1fr;gap:40px }
  .libraryGrid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:650px) {
  .libraryPage .siteHeader { display:flex;align-items:center;min-height:52px;padding:0 14px }
  .libraryPage .brandLogo { width:27px;height:27px }
  .libraryPage .brand span { display:none }
  .libraryPage .nav { justify-content:flex-end;gap:2px;margin:0;padding:0 }
  .libraryPage .nav a { padding:15px 7px;background:transparent;font-size:13px }
  .libraryHero { padding-top:58px;padding-bottom:62px }
  .libraryHero h1 { font-size:clamp(48px,14vw,62px);line-height:1 }
  .librarySections { margin-top:42px }
  .librarySection { grid-template-columns:36px 1fr;min-height:106px;padding:20px }
  .librarySection>strong { font-size:25px }
  .libraryArchive { padding:74px 0 }
  .libraryGrid { grid-template-columns:1fr }
  .libraryCard { min-height:520px }
  #libraryDialogBody section { grid-template-columns:1fr;gap:10px }
  .copyPrompt { grid-column:1 }
  .libraryStyleHero { min-height:290px }
}

/* Compact gallery treatment, aligned with the AiFan Lab visual system */
.libraryPage { color:var(--ink);background:#f3f0e8 }
.libraryPage .siteHeader { color:var(--ink);background:rgba(243,240,232,.94);border-bottom-color:rgba(11,11,11,.1) }
.libraryPage .nav a { color:var(--ink) }
.libraryHero { padding:18px 0;color:var(--ink);background:#f3f0e8;border-bottom:1px solid var(--line);text-align:left }
.libraryHero>.wrap { display:flex;align-items:center;justify-content:flex-end;gap:32px }
.libraryHero h1 { margin:0;font-size:clamp(30px,3vw,38px);font-weight:500;line-height:1;letter-spacing:-.04em;white-space:nowrap }
.librarySections { display:grid;grid-template-columns:86px 132px;justify-content:end;gap:3px;margin:0;padding:4px;border:1px solid rgba(11,11,11,.1);border-radius:12px;background:#e7e3da;box-shadow:inset 0 1px 2px rgba(11,11,11,.06) }
.librarySection { position:relative;display:inline-flex;width:100%;min-height:36px;align-items:center;justify-content:center;gap:6px;padding:0 10px;border:0;border-radius:8px;color:#66665f;background:transparent;box-shadow:none;font-family:inherit;font-size:13px;text-align:center;transition:color .15s ease,background-color .15s ease,box-shadow .15s ease }
.librarySection>strong { font-size:13px;font-weight:500;line-height:1.25;letter-spacing:0;white-space:nowrap }
.librarySection>small { color:#8a877f;font-size:10px;line-height:1.25;white-space:nowrap }
.librarySection::before,.librarySection::after { content:none }
.librarySection:focus { outline:0 }
.librarySection:focus-visible { box-shadow:0 0 0 2px var(--acid) }
.librarySection:hover { color:var(--ink);background:rgba(255,255,255,.48);border-color:transparent;transform:none }
.librarySection.active { color:#fff;background:var(--ink);border-color:transparent;box-shadow:0 1px 3px rgba(11,11,11,.22) }
.librarySection.active>small { color:rgba(255,255,255,.62) }
.libraryArchive { min-height:70svh;padding:28px 0 96px;color:var(--ink);background:#f3f0e8 }
.libraryArchive.isSectionSwitching .libraryArchiveHead { animation:librarySectionBreathe .38s cubic-bezier(.22,1,.36,1) both }
.libraryArchive.isSectionSwitching .libraryGrid { animation:librarySectionBreathe .48s cubic-bezier(.22,1,.36,1) 45ms both }
@keyframes librarySectionBreathe {
  0% { opacity:.48;transform:translateY(7px) scale(.998);filter:drop-shadow(0 0 0 rgba(197,232,3,0)) }
  58% { opacity:1;filter:drop-shadow(0 0 7px rgba(197,232,3,var(--motion-glow))) }
  100% { opacity:1;transform:translateY(0) scale(1);filter:drop-shadow(0 0 0 rgba(197,232,3,0)) }
}
.libraryArchiveHead { grid-template-columns:minmax(260px,1fr) auto minmax(230px,280px);gap:28px;align-items:center;padding-bottom:22px;border-bottom:1px solid var(--line) }
.libraryArchiveTitle { display:flex;align-items:baseline;gap:13px;min-width:0 }
.libraryArchiveHead h1,.libraryArchiveHead h2 { margin:0;color:var(--ink);font-size:clamp(28px,3vw,38px);font-weight:500;line-height:1.1;letter-spacing:-.035em }
.librarySearch { position:relative;width:100% }
.librarySearch svg { position:absolute;left:0;top:50%;width:16px;height:16px;fill:none;stroke:#77736b;stroke-width:1.7;stroke-linecap:round;transform:translateY(-50%);pointer-events:none }
.librarySearch input { height:40px;padding-left:25px;border-bottom-color:rgba(11,11,11,.32);color:var(--ink);background:transparent;font-size:14px }
.librarySearch input::placeholder { color:#8b887f }
.librarySearch input:focus { border-bottom-width:1px;border-bottom-color:#8da600 }
.libraryResultCount { margin:0;color:#77736b;font-size:12px;font-weight:500;letter-spacing:.02em;white-space:nowrap }
.libraryGrid { grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 18px;margin-top:28px;background:transparent;border:0 }
.libraryGrid[data-section="video"] { grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 20px }
.libraryCard { position:relative;display:flex;min-width:0;min-height:0;flex-direction:column;overflow:visible;border:0;border-radius:0;color:var(--ink);background:transparent;box-shadow:none;text-align:left;transform:translateZ(0) }
.libraryCard:hover { background:transparent;transform:translateY(-2px) }
.libraryCardVisual { position:relative;display:block;width:100%;overflow:hidden;aspect-ratio:4/5;border-radius:12px;background:#e5e1d7 }
.videoCard .libraryCardVisual { aspect-ratio:20/13 }
.libraryCardVisual img { width:100%;height:100%;object-fit:cover }
.libraryCardVisual.isCollage { display:grid;gap:2px;background:#d7d3ca }
.libraryCardVisual.isCollage img { min-width:0;min-height:0;background:#ebe7de;object-fit:cover }
.libraryCardVisual.collage2 { grid-template-columns:repeat(2,minmax(0,1fr)) }
.libraryCardVisual.collage3 { grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1.18fr) minmax(0,.82fr) }
.libraryCardVisual.collage3 img { object-fit:contain }
.libraryCardVisual.collage3 img:first-child { grid-column:1 / -1 }
.libraryCardVisual.collage4 { grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr)) }
.libraryImageCount { position:absolute;left:10px;bottom:10px;display:inline-flex;min-height:22px;align-items:center;padding:0 8px;border:1px solid rgba(255,255,255,.16);border-radius:999px;color:#fff;background:rgba(12,12,14,.72);font-size:9px;font-weight:500;letter-spacing:.04em;backdrop-filter:blur(8px) }
.libraryTypeBadge { top:12px;right:12px;min-height:22px;padding:0 8px;border:1px solid rgba(255,255,255,.14);color:var(--acid);background:rgba(12,12,14,.68);box-shadow:none;backdrop-filter:blur(8px);font-size:8px;letter-spacing:.12em }
.libraryCardCaption { display:flex;min-height:62px;flex-direction:column;align-items:flex-start;padding:12px 2px 0;color:var(--ink);text-align:left }
.libraryCardCaption strong { display:-webkit-box;overflow:hidden;font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.015em;-webkit-box-orient:vertical;-webkit-line-clamp:2 }
.libraryCardCaption small { margin-top:5px;color:#77736b;font-size:10px;font-weight:400;line-height:1.35 }
.imageCard .libraryCardCaption small,.videoCard .libraryCardCaption small { padding-bottom:2px;border-bottom:2px solid transparent;transition:color .18s ease,border-color .18s ease }
.imageCard:hover .libraryCardCaption small,.imageCard:focus-visible .libraryCardCaption small,.videoCard:hover .libraryCardCaption small,.videoCard:focus-visible .libraryCardCaption small { color:#718600;border-bottom-color:var(--acid) }
.libraryCard:focus-visible { outline:2px solid var(--acid);outline-offset:3px }
.styleCard .libraryStyleVisual { width:100%;min-height:0;aspect-ratio:4/5;padding:16px;border-radius:12px }
.styleCard .libraryStyleVisual i { font-size:clamp(68px,8vw,112px) }
.libraryEmpty { color:var(--muted) }
.libraryMore { display:none }
.libraryDialog { width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;color:#f4f4f5;background:rgba(0,0,0,.94);box-shadow:none }
.libraryDialog::backdrop { background:#000 }
.libraryDialogClose { position:fixed;top:18px;right:18px;float:none;z-index:4;width:42px;height:42px;border:1px solid #3f3f46;border-radius:50%;color:#fff;background:rgba(20,20,22,.82);font-size:25px;line-height:1;backdrop-filter:blur(10px) }
.libraryDialogClose:focus { outline:0 }
.libraryDialogClose:focus-visible { border-color:var(--acid);outline:2px solid var(--acid);outline-offset:3px }
#libraryDialogBody { width:100%;height:100%;padding:36px 40px }
.libraryLightboxLayout { display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;width:100%;height:100%;max-width:1200px;margin:0 auto }
.libraryLightboxVisual { display:grid;place-items:center;min-width:0;height:100%;margin:0;overflow:hidden;border-radius:12px;background:#0e0e10 }
.libraryLightboxVisual img { width:100%;height:100%;object-fit:contain }
.libraryLightboxGallery { grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;place-items:stretch;gap:8px;padding:8px;overflow:auto }
.libraryLightboxGallery img { width:100%;height:auto;min-height:220px;max-height:72svh;border-radius:8px;background:#151517;object-fit:contain }
.libraryGalleryImage { display:grid;min-width:0;min-height:220px;padding:0;overflow:hidden;border:0;border-radius:8px;background:#151517;cursor:zoom-in }
.libraryGalleryImage img { min-height:0;max-height:72svh }
.libraryGalleryImage:focus-visible { outline:2px solid var(--acid);outline-offset:-3px }
.libraryLightboxGallery.gallery3 .libraryGalleryImage:first-child { grid-column:1 / -1 }
.libraryImageViewer { position:fixed;inset:0;z-index:8;display:grid;place-items:center;padding:54px;background:rgba(0,0,0,.97);cursor:zoom-out }
.libraryImageViewer[hidden] { display:none }
.libraryImageViewer>img { display:block;max-width:100%;max-height:calc(100dvh - 108px);object-fit:contain;cursor:default }
.libraryImageViewerClose { position:fixed;top:18px;right:18px;width:42px;height:42px;border:1px solid rgba(255,255,255,.34);border-radius:50%;color:#fff;background:rgba(20,20,22,.86);font-size:25px;line-height:1;cursor:pointer }
.libraryImageViewerClose:hover,.libraryImageViewerClose:focus-visible { border-color:var(--acid);outline:2px solid var(--acid);outline-offset:3px }
.libraryImageViewerCount { position:fixed;left:50%;bottom:20px;padding:5px 10px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#d5d5d0;background:rgba(20,20,22,.8);font-size:10px;letter-spacing:.08em;transform:translateX(-50%) }
.libraryLightboxPanel { height:100%;padding:26px;overflow:auto;border:1px solid #27272a;border-radius:12px;background:rgba(20,20,22,.92) }
.libraryLightboxPanel .eyebrow { color:var(--acid) }
.libraryLightboxPanel h2 { max-width:none!important;margin:0!important;color:#fff!important;font-size:clamp(28px,3vw,40px)!important;font-weight:500!important;line-height:1.05!important;letter-spacing:-.04em!important }
.libraryDialogLead { margin:18px 0 26px;color:#a1a1aa;font-size:14px;line-height:1.55 }
.libraryLightboxPanel section { display:block!important;padding:22px 0!important;border-top:1px solid #27272a!important }
.libraryLightboxPanel section>span { display:block;margin-bottom:12px;color:#71717a;font-size:10px!important;letter-spacing:.12em }
.libraryLightboxPanel section p { margin:0;color:#e4e4e7;font-size:13px;line-height:1.6 }
.libraryLightboxPanel .copyPrompt { display:inline-flex;grid-column:auto;min-height:38px;align-items:center;margin-top:16px;padding:0 14px;border:0;border-radius:6px;color:#171719;background:var(--acid) }
.libraryLightboxPanel .copyPrompt:hover { background:#d8f550 }
.libraryLightboxPanel footer { display:flex;justify-content:space-between;gap:18px;margin-top:0;padding-top:20px;border-top:1px solid #27272a;color:#71717a;font-size:11px }
.libraryLightboxPanel footer a { color:#f4f4f5 }
.libraryLightboxLayout>.libraryStyleHero { width:100%;height:100%;min-height:0;margin:0;border-radius:12px }

@media (max-width:1100px) {
  .libraryGrid { grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 14px }
  .libraryGrid[data-section="video"] { grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px }
}
@media (max-width:820px) {
  .libraryGrid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .libraryGrid[data-section="video"] { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .libraryLightboxLayout { grid-template-columns:minmax(0,1fr) 280px }
}
@media (max-width:650px) {
  .libraryPage .siteHeader { color:var(--ink);background:rgba(243,240,232,.96) }
  .libraryHero { padding:18px 0 }
  .libraryHero>.wrap { display:block }
  .libraryHero h1 { font-size:32px }
  .librarySections { grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);justify-content:stretch;gap:3px;width:100%;margin-top:0;overflow:visible }
  .librarySection { min-width:0;min-height:36px;padding:0 8px }
  .libraryArchive { padding:24px 0 64px }
  .libraryArchiveHead { grid-template-columns:1fr;gap:14px;padding-bottom:20px }
  .libraryArchiveHead .librarySections { grid-row:2;width:100% }
  .libraryArchiveHead h1,.libraryArchiveHead h2 { font-size:30px }
  .libraryGrid { grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px;margin-top:22px }
  .libraryGrid[data-section="video"] { grid-template-columns:1fr;gap:24px }
  .libraryCardVisual,.styleCard .libraryStyleVisual { border-radius:10px }
  .libraryCardCaption { min-height:58px;padding-top:9px }
  .libraryCardCaption strong { font-size:13px }
  .libraryCardCaption small { margin-top:4px;font-size:9px }
  .libraryTypeBadge { top:10px;right:10px }
  #libraryDialogBody { padding:64px 12px 12px }
  .libraryLightboxLayout { display:grid;grid-template-columns:1fr;grid-template-rows:minmax(48svh,58svh) auto;gap:12px;height:auto;min-height:100% }
  .libraryLightboxVisual { height:58svh }
  .libraryLightboxGallery { grid-template-columns:1fr;align-content:start }
  .libraryLightboxGallery.gallery3 .libraryGalleryImage:first-child { grid-column:auto }
  .libraryLightboxGallery img { min-height:0;max-height:none }
  .libraryGalleryImage { min-height:0 }
  .libraryImageViewer { padding:60px 12px 48px }
  .libraryLightboxPanel { height:auto;min-height:340px;padding:22px }
  .libraryLightboxLayout>.libraryStyleHero { height:58svh }
}

/* Visual inspiration encyclopedia */
.librarySections a.librarySection { text-decoration:none }
.visualEncyclopediaPage { color:var(--ink);background:#f3f0e8 }
.visualEncyclopediaPage .siteHeader { color:var(--ink);background:rgba(243,240,232,.95);border-bottom-color:rgba(17,17,15,.1) }
.visualEncyclopediaPage .nav a { color:var(--ink) }
.encyclopediaHero { padding:clamp(74px,10vw,132px) 0 clamp(58px,7vw,92px);border-bottom:1px solid var(--line);background:#f3f0e8 }
.encyclopediaHero h1 { max-width:9em;margin:18px 0 0;font-size:clamp(60px,9vw,126px);font-weight:300;line-height:.87;letter-spacing:-.07em }
.encyclopediaHero>.wrap>p:not(.eyebrow) { max-width:690px;margin:36px 0 0;color:#55534c;font-size:clamp(18px,2vw,24px);line-height:1.65 }
.encyclopediaStats { display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:54px;padding-top:24px;border-top:1px solid var(--ink) }
.encyclopediaStats span { color:#6f6c64;font-size:12px }
.encyclopediaStats strong { margin-right:6px;color:var(--ink);font-size:25px;font-weight:500 }
.encyclopediaBrowser { min-height:70svh;padding:0 0 110px }
.encyclopediaTabs { display:flex;gap:0;overflow:auto;border-bottom:1px solid var(--line) }
.encyclopediaTabs button { flex:0 0 auto;min-height:64px;padding:0 22px;border:0;border-bottom:3px solid transparent;color:#77736b;background:transparent;font:600 13px/1 inherit;cursor:pointer }
.encyclopediaTabs button:first-child { padding-left:0 }
.encyclopediaTabs button.active { color:var(--ink);border-bottom-color:var(--acid) }
.encyclopediaTabs small { margin-left:5px;color:#99958c;font-size:9px;font-weight:500 }
.encyclopediaTools { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;padding:34px 0 24px }
.encyclopediaSearch span { display:block;margin-bottom:9px;color:#77736b;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase }
.encyclopediaSearch input { width:100%;height:48px;padding:0;border:0;border-bottom:1px solid rgba(17,17,15,.32);border-radius:0;color:var(--ink);background:transparent;font:400 16px/1 inherit }
.encyclopediaSearch input:focus { border-bottom-color:#7f9400;outline:0 }
.encyclopediaView { display:flex;padding:3px;border:1px solid var(--line);border-radius:9px;background:#e7e3da }
.encyclopediaView button { min-height:34px;padding:0 14px;border:0;border-radius:6px;color:#77736b;background:transparent;font:600 11px/1 inherit;cursor:pointer }
.encyclopediaView button.active { color:#fff;background:var(--ink) }
.encyclopediaDomains { display:flex;flex-wrap:wrap;gap:7px;padding-bottom:26px }
.encyclopediaDomains button { min-height:34px;padding:0 13px;border:1px solid rgba(17,17,15,.16);border-radius:999px;color:#65625c;background:transparent;font:600 11px/1 inherit;cursor:pointer }
.encyclopediaDomains button.active,.encyclopediaDomains button:hover { color:var(--ink);border-color:var(--ink);background:#fffefa }
.encyclopediaResultLine { display:flex;justify-content:space-between;gap:30px;padding:16px 0;border-top:1px solid var(--line) }
.encyclopediaResultLine p { margin:0;color:#7a766f;font-size:11px }
.encyclopediaGrid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 18px;margin-top:28px }
.encyclopediaCard { min-width:0;padding:0;border:0;color:var(--ink);background:transparent;text-align:left;cursor:pointer }
.encyclopediaCard:focus-visible { outline:2px solid var(--acid);outline-offset:4px }
.encyclopediaCardVisual { position:relative;display:block;overflow:hidden;aspect-ratio:4/5;border-radius:13px;background:#ded9cf }
.encyclopediaCardVisual>img { width:100%;height:100%;object-fit:cover;transition:transform .4s ease }
.encyclopediaCard:hover .encyclopediaCardVisual>img { transform:scale(1.025) }
.encyclopediaCardVisual>em { position:absolute;top:12px;right:12px;padding:7px 9px;border-radius:999px;color:#fff;background:rgba(17,17,15,.7);backdrop-filter:blur(8px);font:700 8px/1 ui-monospace,monospace;font-style:normal;letter-spacing:.1em }
.encyclopediaPlaceholder { position:relative;display:grid;width:100%;height:100%;place-items:center;overflow:hidden;background:#b8b1a1 }
.encyclopediaPlaceholder::before { content:"";position:absolute;width:80%;height:80%;border:1px solid rgba(17,17,15,.15);border-radius:50%;transform:translate(26%,-27%) }
.encyclopediaPlaceholder::after { content:"";position:absolute;inset:auto -18% -32% 12%;height:65%;border-radius:50%;background:rgba(255,255,255,.22);filter:blur(2px) }
.encyclopediaPlaceholder[data-domain="摄影肖像"] { color:#f7f4ec;background:#303638 }
.encyclopediaPlaceholder[data-domain="时尚造型"] { background:#c4d6cc }
.encyclopediaPlaceholder[data-domain="产品工业"] { background:#d8c750 }
.encyclopediaPlaceholder[data-domain="食物甜点"] { color:#fff;background:#8b4935 }
.encyclopediaPlaceholder[data-domain="绘画艺术"] { color:#fff;background:#55706b }
.encyclopediaPlaceholder i { position:relative;z-index:1;font:300 clamp(74px,9vw,126px)/1 Georgia,serif;font-style:normal }
.encyclopediaPlaceholder small { position:absolute;left:14px;bottom:13px;z-index:1;font-size:9px;font-weight:700;letter-spacing:.08em }
.encyclopediaCardCopy { display:block;padding:13px 2px 0 }
.encyclopediaCardCopy>small { display:block;color:#858078;font-size:9px;line-height:1.4 }
.encyclopediaCardCopy>strong { display:block;margin-top:8px;font-size:17px;font-weight:600;line-height:1.2 }
.encyclopediaCardCopy>span { display:block;min-height:18px;margin-top:4px;color:#66625b;font-size:11px;line-height:1.45 }
.encyclopediaCardCopy>b { display:flex;flex-wrap:wrap;gap:5px;margin-top:12px }
.encyclopediaCardCopy>b i { padding:5px 7px;border:1px solid rgba(17,17,15,.14);border-radius:999px;color:#67635c;font-size:8px;font-style:normal;font-weight:600 }
.encyclopediaGrid[data-view="list"] { display:block;margin-top:16px;border-top:1px solid var(--line) }
.encyclopediaGrid[data-view="list"] .encyclopediaCard { display:grid;grid-template-columns:86px minmax(150px,.7fr) minmax(0,1.3fr);gap:20px;align-items:center;width:100%;padding:14px 0;border-bottom:1px solid var(--line) }
.encyclopediaGrid[data-view="list"] .encyclopediaCardVisual { width:86px;aspect-ratio:1;border-radius:8px }
.encyclopediaGrid[data-view="list"] .encyclopediaCardVisual>em,.encyclopediaGrid[data-view="list"] .encyclopediaPlaceholder small { display:none }
.encyclopediaGrid[data-view="list"] .encyclopediaPlaceholder i { font-size:42px }
.encyclopediaGrid[data-view="list"] .encyclopediaCardCopy { display:grid;grid-template-columns:minmax(150px,.7fr) minmax(0,1fr) auto;gap:18px;align-items:center;padding:0 }
.encyclopediaGrid[data-view="list"] .encyclopediaCardCopy>small { grid-column:1 }
.encyclopediaGrid[data-view="list"] .encyclopediaCardCopy>strong { grid-column:1;margin:0 }
.encyclopediaGrid[data-view="list"] .encyclopediaCardCopy>span { grid-column:2;grid-row:1 / span 2;margin:0 }
.encyclopediaGrid[data-view="list"] .encyclopediaCardCopy>b { grid-column:3;grid-row:1 / span 2;margin:0;justify-content:flex-end }
.encyclopediaEmpty { margin-top:28px;padding:70px 24px;border:1px solid var(--line);text-align:center }
.encyclopediaEmpty h2 { margin:0;font-size:34px;font-weight:400 }
.encyclopediaEmpty p { max-width:520px;margin:16px auto 0;color:#77736b }
.encyclopediaDialog { width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;color:#f4f4f5;background:rgba(0,0,0,.95) }
.encyclopediaDialog::backdrop { background:#000 }
.encyclopediaDialogClose { position:fixed;top:18px;right:18px;z-index:4;width:42px;height:42px;border:1px solid #3f3f46;border-radius:50%;color:#fff;background:#171719;font-size:26px;cursor:pointer }
#encyclopediaDialogBody { width:100%;height:100%;padding:36px 76px 36px 40px }
.encyclopediaDialogLayout { display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;width:100%;height:100%;max-width:1320px;margin:0 auto }
.encyclopediaDialogVisual { min-width:0;height:100%;overflow:hidden;border-radius:13px;background:#101012 }
.encyclopediaDialogVisual>img,.encyclopediaDialogVisual>.encyclopediaPlaceholder { width:100%;height:100%;object-fit:contain }
.encyclopediaDialogLayout>article { height:100%;padding:30px;overflow:auto;border:1px solid #2b2b2e;border-radius:13px;background:#151517 }
.encyclopediaDialogLayout h2 { margin:10px 0 0;color:#fff;font-size:clamp(36px,4vw,58px);font-weight:400;line-height:.95;letter-spacing:-.05em }
.encyclopediaAlias { margin:14px 0 0;color:#a1a1aa;font-size:15px }
.encyclopediaTraits { display:flex;flex-wrap:wrap;gap:7px;margin-top:24px }
.encyclopediaTraits span { padding:7px 10px;border:1px solid #3a3a3e;border-radius:999px;color:#d4d4d8;font-size:10px }
.encyclopediaDialogLayout section { padding:22px 0;border-top:1px solid #2b2b2e }
.encyclopediaDialogLayout section:first-of-type { margin-top:28px }
.encyclopediaDialogLayout h3 { margin:0 0 10px;color:#77777f;font-size:10px;letter-spacing:.12em;text-transform:uppercase }
.encyclopediaDialogLayout section p { margin:0;color:#e4e4e7;font-size:13px;line-height:1.7;white-space:pre-wrap }
.copyEncyclopediaPrompt { min-height:38px;margin-top:16px;padding:0 14px;border:0;border-radius:6px;color:#151517;background:var(--acid);font-weight:700;cursor:pointer }
.encyclopediaDialogLayout footer { display:flex;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid #2b2b2e;color:#77777f;font-size:10px }
@media (max-width:1060px) { .encyclopediaGrid{grid-template-columns:repeat(3,minmax(0,1fr))}.encyclopediaDialogLayout{grid-template-columns:minmax(0,1fr) 330px} }
@media (max-width:780px) { .encyclopediaGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.encyclopediaResultLine p:last-child{display:none}.encyclopediaGrid[data-view="list"] .encyclopediaCard{grid-template-columns:72px minmax(0,1fr)}.encyclopediaGrid[data-view="list"] .encyclopediaCardVisual{width:72px}.encyclopediaGrid[data-view="list"] .encyclopediaCardCopy{display:block}.encyclopediaGrid[data-view="list"] .encyclopediaCardCopy>span{margin-top:4px}.encyclopediaGrid[data-view="list"] .encyclopediaCardCopy>b{justify-content:flex-start;margin-top:9px}.encyclopediaDialogLayout{grid-template-columns:1fr;grid-template-rows:55svh auto;height:auto;min-height:100%}.encyclopediaDialogVisual{height:55svh}.encyclopediaDialogLayout>article{height:auto}.encyclopediaDialog{overflow:auto}#encyclopediaDialogBody{height:auto;min-height:100%;padding:64px 12px 12px} }

/* Text-first AI visual reference archive */
.visualReferencePage { background:#f5f2ea }
.referenceHero { padding:clamp(72px,9vw,122px) 0 clamp(50px,7vw,82px);border-bottom:1px solid var(--line);background:#f3f0e8 }
.referenceHero h1 { max-width:9em;margin:18px 0 0;font-size:clamp(58px,8.6vw,118px);font-weight:300;line-height:.88;letter-spacing:-.07em }
.referenceHero>.wrap>p:not(.eyebrow) { max-width:760px;margin:32px 0 0;color:#56534c;font-size:clamp(17px,1.8vw,22px);line-height:1.7 }
.referenceStats { display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:48px;padding-top:22px;border-top:1px solid var(--ink) }
.referenceStats span { color:#6d6961;font-size:12px }
.referenceStats strong { margin-right:6px;color:var(--ink);font-size:24px;font-weight:550 }
.referenceArchive { padding:0 0 110px }
.referenceToolbar { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:end;padding:34px 0 24px }
.referenceSearch>span { display:block;margin-bottom:8px;color:#77736b;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase }
.referenceSearch input { width:100%;height:50px;padding:0;border:0;border-bottom:1px solid rgba(17,17,15,.34);border-radius:0;color:var(--ink);background:transparent;font:400 16px/1 inherit }
.referenceSearch input:focus { border-bottom-color:#718600;outline:0 }
.referencePageSize { color:#77736b;font-size:11px }
.referencePageSize select { height:40px;margin-left:7px;padding:0 30px 0 11px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:#fffefa }
.referenceGroups { display:flex;gap:7px;overflow:auto;padding:0 0 24px;border-bottom:1px solid var(--line) }
.referenceGroups button { flex:0 0 auto;min-height:34px;padding:0 13px;border:1px solid rgba(17,17,15,.16);border-radius:999px;color:#66625b;background:transparent;font:600 11px/1 inherit;cursor:pointer }
.referenceGroups button.active,.referenceGroups button:hover { color:#fff;border-color:var(--ink);background:var(--ink) }
.referenceLayout { display:grid;grid-template-columns:220px minmax(0,1fr);gap:38px;align-items:start;padding-top:30px }
.referenceSheetNav { position:sticky;top:84px;max-height:calc(100svh - 110px);overflow:auto;border-top:1px solid var(--ink) }
.referenceSheetNav button { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;min-height:44px;padding:9px 4px;border:0;border-bottom:1px solid var(--line);color:#69655e;background:transparent;text-align:left;cursor:pointer }
.referenceSheetNav button span { overflow:hidden;font:550 11px/1.35 inherit;text-overflow:ellipsis }
.referenceSheetNav button small { color:#98938a;font:500 9px/1 ui-monospace,monospace }
.referenceSheetNav button.active { color:var(--ink);background:linear-gradient(90deg,rgba(202,224,0,.22),transparent) }
.referenceSheetNav button.active span { font-weight:750 }
.referenceMain { min-width:0 }
.referenceHead { display:flex;justify-content:space-between;gap:30px;align-items:flex-end;padding:5px 0 24px }
.referenceHead h2 { margin:7px 0 0;font-size:clamp(34px,4.4vw,62px);font-weight:400;line-height:1;letter-spacing:-.05em }
.referenceHead>div>p:last-child { max-width:650px;margin:13px 0 0;color:#706c64;font-size:12px;line-height:1.7 }
.referenceHead>a { flex:0 0 auto;padding-bottom:3px;border-bottom:1px solid var(--ink);color:var(--ink);font-size:10px;font-weight:700;text-decoration:none }
.referenceResultLine { display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-top:1px solid var(--line) }
.referenceResultLine p { margin:0;color:#7b776f;font-size:10px }
.referenceTableWrap { overflow:auto;border:1px solid var(--line);border-radius:10px;background:#fffefa }
.referenceTable { width:100%;min-width:760px;border-collapse:separate;border-spacing:0;font-size:11px }
.referenceTable th { position:sticky;top:0;z-index:2;max-width:260px;padding:13px 14px;border-right:1px solid #d9d5cc;border-bottom:1px solid #cbc7bd;color:#49463f;background:#e9e5dc;text-align:left;font-size:9px;font-weight:750;letter-spacing:.03em;white-space:nowrap }
.referenceTable th:last-child { border-right:0 }
.referenceTable td { min-width:92px;max-width:330px;padding:12px 14px;border-right:1px solid #ebe7df;border-bottom:1px solid #e3dfd6;color:#302f2b;line-height:1.65;vertical-align:top;white-space:pre-wrap;overflow-wrap:anywhere }
.referenceTable tr:last-child td { border-bottom:0 }
.referenceTable td:last-child { min-width:62px;border-right:0 }
.referenceTable tr:hover td { background:#fbf9f2 }
.referenceTable th:first-child,.referenceTable td:first-child { min-width:68px }
.referenceTable .referenceCombined { min-width:480px;max-width:760px }
.referenceBlank { color:#bbb6ac }
.referenceCellMore { display:block;width:100%;padding:0;border:0;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer;white-space:pre-wrap }
.referenceCellMore .full { display:none }
.referenceCellMore[data-full="true"] .short { display:none }
.referenceCellMore[data-full="true"] .full { display:inline }
.referenceCellMore small { display:block;margin-top:6px;color:#718600;font-size:9px;font-weight:700 }
.referenceCopy,.referenceSheetJump { padding:0;border:0;border-bottom:1px solid #969189;color:#46433d;background:transparent;font:700 9px/1.4 inherit;cursor:pointer }
.referenceSheetJump { color:#5e7000;border-color:#92a900;text-align:left }
.referenceEmpty { padding:70px 20px;color:#77736b;text-align:center }
.referencePagination { display:flex;justify-content:center;align-items:center;gap:18px;padding-top:24px }
.referencePagination button { min-height:38px;padding:0 15px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:#fffefa;font:650 10px/1 inherit;cursor:pointer }
.referencePagination button:disabled { color:#aaa59c;cursor:not-allowed }
.referencePagination span { color:#77736b;font:550 10px/1 ui-monospace,monospace }
@media (max-width:900px) { .referenceLayout{grid-template-columns:180px minmax(0,1fr);gap:24px}.referenceTable .referenceCombined{min-width:360px} }
@media (max-width:700px) {
  .referenceToolbar{grid-template-columns:1fr;gap:14px}.referencePageSize{justify-self:end}
  .referenceLayout{display:block;padding-top:18px}.referenceSheetNav{position:static;display:flex;gap:7px;max-height:none;margin:0 -18px 24px;padding:0 18px;overflow:auto;border:0}.referenceSheetNav>div{display:flex;gap:7px}.referenceSheetNav button{display:block;flex:0 0 auto;width:auto;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;white-space:nowrap}.referenceSheetNav button small{margin-left:5px}.referenceSheetNav button.active{border-color:var(--ink);background:var(--ink);color:#fff}
  .referenceHead{align-items:flex-start}.referenceHead h2{font-size:38px}.referenceResultLine p:last-child{display:none}.referenceTable{min-width:680px}.referenceTable .referenceCombined{min-width:330px}.referenceHero h1{font-size:56px}
}

/* Visual reference library: public reading experience */
.visualReferencePage .siteHeader { min-height:56px;padding-top:0;padding-bottom:0;background:rgba(243,240,232,.9) }
.visualReferencePage .brandLogo { width:29px;height:29px }
.visualReferencePage .nav { gap:12px }
.visualReferencePage .nav a { padding:16px 6px;font-size:14px;font-weight:500 }
.referenceHero { padding:clamp(70px,8vw,104px) 0 clamp(58px,7vw,82px) }
.referenceHero h1 { max-width:none;margin:14px 0 0;font-size:clamp(62px,7.8vw,100px);font-weight:350;line-height:.94;letter-spacing:-.065em }
.referenceHero>.wrap>p:not(.eyebrow) { max-width:820px;margin-top:28px;color:#52514b;font-size:clamp(18px,1.65vw,22px);line-height:1.75 }
.referenceStats { gap:18px 44px;margin-top:46px;padding-top:24px }
.referenceStats span { color:#66645e;font-size:14px }
.referenceStats strong { margin-right:8px;font-size:28px;font-weight:600 }
.referenceArchive { padding:clamp(66px,8vw,98px) 0 110px;background:#f7f5ef }
.referenceBrowseHead { display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:32px }
.referenceBrowseHead h2 { margin:0;font-size:clamp(34px,4vw,50px);font-weight:400;line-height:1;letter-spacing:-.045em }
.referenceGroups { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:0;border:0;overflow:visible }
.referenceGroups button { display:flex;min-width:0;min-height:108px;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:20px;border:1px solid rgba(17,17,15,.16);border-radius:18px;color:var(--ink);background:#f3f0e8;text-align:left;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease }
.referenceGroups button span { font-size:19px;font-weight:650;line-height:1.2 }
.referenceGroups button small { color:#6c6a64;font-size:12px;line-height:1.35 }
.referenceGroups button:hover { transform:translateY(-2px);border-color:#85827a;background:#ebe8df }
.referenceGroups button.active { color:var(--ink);border-color:#a9c100;background:var(--acid) }
.referenceGroups button.active small { color:#35352f }
.referenceToolbar { position:sticky;top:56px;z-index:8;display:grid;grid-template-columns:minmax(300px,1fr) minmax(230px,320px) 140px;gap:18px;align-items:end;margin:42px 0 0;padding:18px 20px;border:1px solid rgba(17,17,15,.14);border-radius:18px;background:rgba(247,245,239,.94);box-shadow:0 12px 30px rgba(42,40,34,.08);backdrop-filter:blur(14px) }
.referenceSearch>span,.referenceCollection>span,.referencePageSize>span { display:block;margin:0 0 8px;color:#66645e;font-size:12px;font-weight:700;letter-spacing:.08em }
.referenceSearch input,.referenceCollection select,.referencePageSize select { width:100%;height:50px;margin:0;padding:0 14px;border:1px solid #c9c5bc;border-radius:10px;color:var(--ink);background:#fffefa;font:500 16px/1 inherit }
.referenceSearch input:focus,.referenceCollection select:focus,.referencePageSize select:focus { border-color:#849800;outline:3px solid rgba(202,224,0,.24) }
.referenceMain { padding-top:clamp(54px,7vw,84px) }
.referenceHead { display:block;max-width:880px;padding:0 0 30px }
.referenceHead h2 { margin:10px 0 0;font-size:clamp(44px,5.5vw,72px);font-weight:400;line-height:.96;letter-spacing:-.055em }
.referenceHead>p:last-child { max-width:720px;margin:18px 0 0;color:#62605a;font-size:16px;line-height:1.75 }
.referenceResultLine { align-items:center;padding:16px 0;border-top:1px solid var(--ink) }
.referenceResultLine p { color:#66645e;font-size:13px }
.referenceResultLine p:first-child { color:var(--ink);font-weight:700 }
.referenceTableWrap { border:1px solid #cbc7bd;border-radius:14px;background:#fffefa }
.referenceTable { min-width:920px;font-size:15px }
.referenceTable th { max-width:320px;padding:16px 18px;color:#35342f;background:#e9e5dc;font-size:12px;letter-spacing:.05em }
.referenceTable td { min-width:112px;max-width:390px;padding:17px 18px;color:#292824;font-size:15px;line-height:1.7 }
.referenceTable th:first-child,.referenceTable td:first-child { min-width:72px;width:72px }
.referenceTable .referenceCombined { min-width:540px;max-width:850px }
.referenceCellMore small { margin-top:9px;font-size:12px }
.referenceCopy,.referenceCollectionJump { min-height:36px;padding:0 2px;border:0;border-bottom:1px solid #77736b;color:#3f3d38;background:transparent;font:700 12px/1.4 inherit }
.referenceCollectionJump { color:#596900;border-color:#718600 }
.referencePalette { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px }
.referencePalette[hidden] { display:none }
.referenceSwatch { overflow:hidden;border:1px solid #cbc7bd;border-radius:16px;background:#fffefa }
.referenceSwatch>div { height:150px;background:var(--swatch);border-bottom:1px solid rgba(17,17,15,.12) }
.referenceSwatch footer { display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:64px;padding:13px 14px }
.referenceSwatch strong { overflow:hidden;font-size:14px;font-weight:650;text-overflow:ellipsis;white-space:nowrap }
.referenceSwatch .referenceCopy { flex:0 0 auto }
.referenceEmpty { margin-top:20px;border:1px solid var(--line);border-radius:14px;background:#fffefa;font-size:16px }
.referencePagination { gap:20px;padding-top:32px }
.referencePagination button { min-width:96px;min-height:46px;border-color:#aaa69e;border-radius:10px;font-size:14px }
.referencePagination span { font-size:13px }

@media (max-width:1000px) {
  .referenceGroups { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .referencePalette { grid-template-columns:repeat(4,minmax(0,1fr)) }
  .referenceToolbar { grid-template-columns:minmax(280px,1fr) minmax(220px,280px) }
  .referencePageSize { grid-column:2 }
}

@media (max-width:700px) {
  .visualReferencePage .siteHeader { display:flex;align-items:center;min-height:52px;padding:0 14px }
  .visualReferencePage .brandLogo { width:27px;height:27px }
  .visualReferencePage .brand span { display:none }
  .visualReferencePage .nav { justify-content:flex-end;gap:2px;margin:0;padding:0 }
  .visualReferencePage .nav a { padding:15px 7px;font-size:13px }
  .referenceHero { padding:62px 0 54px }
  .referenceHero h1 { font-size:clamp(52px,14vw,66px);line-height:.96 }
  .referenceHero>.wrap>p:not(.eyebrow) { margin-top:22px;font-size:17px;line-height:1.7 }
  .referenceStats { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px;padding-top:20px }
  .referenceStats span { font-size:12px;line-height:1.35 }
  .referenceStats strong { display:block;margin:0 0 5px;font-size:23px }
  .referenceArchive { padding:58px 0 82px }
  .referenceBrowseHead { display:block;margin-bottom:24px }
  .referenceBrowseHead h2 { margin-top:10px;font-size:36px }
  .referenceGroups { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px }
  .referenceGroups button { min-height:94px;padding:15px;border-radius:14px }
  .referenceGroups button span { font-size:16px }
  .referenceGroups button small { font-size:11px }
  .referenceToolbar { position:static;grid-template-columns:1fr;gap:14px;margin-top:28px;padding:15px;border-radius:14px }
  .referencePageSize { grid-column:auto }
  .referenceSearch input,.referenceCollection select,.referencePageSize select { height:52px;font-size:16px }
  .referenceMain { padding-top:58px }
  .referenceHead h2 { font-size:44px }
  .referenceHead>p:last-child { font-size:15px }
  .referenceResultLine p { font-size:12px }
  .referenceResultLine p:last-child { display:none }
  .referenceTableWrap { overflow:visible;border:0;background:transparent }
  .referenceTable { display:block;min-width:0;font-size:15px }
  .referenceTable thead { display:none }
  .referenceTable tbody { display:grid;gap:14px }
  .referenceTable tr { display:block;overflow:hidden;border:1px solid #d1cdc4;border-radius:14px;background:#fffefa }
  .referenceTable td,.referenceTable td:first-child,.referenceTable .referenceCombined { display:grid;grid-template-columns:minmax(88px,30%) minmax(0,1fr);gap:14px;width:auto;min-width:0;max-width:none;padding:14px 15px;border:0;border-bottom:1px solid #e3dfd6;font-size:15px;line-height:1.65 }
  .referenceTable td:last-child { border-bottom:0 }
  .referenceTable td::before { content:attr(data-label);color:#76726a;font-size:12px;font-weight:700;line-height:1.5 }
  .referenceTable td.is-empty { display:none }
  .referenceCopy,.referenceCollectionJump { justify-self:start;min-height:30px;font-size:13px }
  .referencePalette { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px }
  .referenceSwatch>div { height:118px }
  .referenceSwatch footer { display:block;min-height:72px;padding:12px }
  .referenceSwatch strong { display:block;font-size:13px }
  .referenceSwatch .referenceCopy { margin-top:7px;font-size:11px }
  .referencePagination { justify-content:space-between;gap:10px }
  .referencePagination button { min-width:88px }
}

/* Visual reference audit: compact navigation, stronger contrast, clear return path */
.visualReferencePage { overflow-x:clip }
.referenceHero { padding:38px 0 30px }
.referenceHeroTop { display:flex;align-items:center;justify-content:space-between;gap:28px }
.referenceHeroTop .eyebrow { margin:0 }
.referenceHero .sectionBack { margin-bottom:38px }
.referenceHero h1 { margin-top:8px;font-size:clamp(42px,5vw,62px);line-height:.98;letter-spacing:-.055em }
.referenceHero>.wrap>p:not(.eyebrow) { max-width:760px;margin-top:14px;font-size:16px;line-height:1.65 }
.referenceHeroUtility { display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,310px);gap:42px;align-items:center;margin-top:24px;padding-top:16px;border-top:1px solid var(--ink) }
.referenceHeroUtility .referenceStats { gap:14px 34px;margin:0;padding:0;border:0 }
.referenceHeroUtility .referenceStats span { font-size:12px }
.referenceHeroUtility .referenceStats strong { margin-right:6px;font-size:22px }
.referenceHeroSearch { position:relative;width:100% }
.referenceHeroSearch svg { position:absolute;left:0;top:50%;width:16px;height:16px;fill:none;stroke:#77736b;stroke-width:1.7;stroke-linecap:round;transform:translateY(-50%);pointer-events:none }
.referenceHeroSearch input { width:100%;height:40px;padding:0 0 0 25px;border:0;border-bottom:1px solid rgba(11,11,11,.32);border-radius:0;color:var(--ink);background:transparent;font:500 14px/1 inherit }
.referenceHeroSearch input::placeholder { color:#8b887f }
.referenceHeroSearch input:focus { border-bottom-color:#8da600;outline:0 }
.referenceArchive { padding-top:34px }
.referenceBrowseHead { display:block;margin-bottom:20px }
.referenceBrowseHead h2 { margin:8px 0 0;font-size:32px }
.referenceGroups { display:flex;flex-wrap:wrap;gap:8px }
.referenceGroups button { display:inline-flex;min-height:46px;min-width:0;width:auto;flex-direction:row;gap:9px;align-items:center;justify-content:flex-start;padding:0 15px;border-radius:999px }
.referenceGroups button span { font-size:14px;font-weight:700;white-space:nowrap }
.referenceGroups button small { font-size:11px;white-space:nowrap }
.referenceToolbar { position:relative;top:auto;grid-template-columns:minmax(230px,1fr) 140px;margin-top:24px;padding:14px 16px;background:#e8e4da;box-shadow:0 8px 20px rgba(42,40,34,.06) }
.referencePath { grid-column:1 / -1;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:0 0 12px;border-bottom:1px solid #bdb8ae }
.referencePath[hidden] { display:none }
.referencePath button { min-height:34px;padding:0;border:0;border-bottom:1px solid #77736b;color:var(--ink);background:transparent;font:700 13px/1 inherit;cursor:pointer }
.referencePath span { color:#66635d;font-size:13px;font-weight:650 }
.referenceSearch input,.referenceCollection select,.referencePageSize select { border-color:#b7b2a8;background:#f3efe6 }
.referenceMain { padding-top:60px }
.referenceBack { position:sticky;top:68px;z-index:6;display:inline-flex;align-items:center;min-height:42px;margin:0 0 24px;padding:0 15px;border:1px solid #817d74;border-radius:999px;color:var(--ink);background:#f7f5ef;box-shadow:0 6px 16px rgba(42,40,34,.08);font:700 13px/1 inherit;cursor:pointer }
.referenceBack[hidden] { display:none }
.referenceBack:hover { border-color:var(--ink);background:var(--acid) }
.referenceNotice { max-width:820px;margin:-8px 0 28px;padding:17px 20px;border-left:4px solid var(--acid);color:#44423d;background:#e3ded3;font-size:15px;line-height:1.7 }
.referenceNotice[hidden] { display:none }
.referenceTableWrap { border-color:#bdb8ae;background:#e8e3d9 }
.referenceTable td { background:#f0ece3 }
.referenceTable tr:nth-child(even) td { background:#e9e4da }
.referenceTable tr:hover td { background:#e1dccf }
.referenceCategoryLabel { color:#53514b;font-weight:650 }
.referenceTableWrap[data-view="detail"] .referenceTable { min-width:760px }
.referenceTableWrap[data-view="detail"] .referenceTable th:nth-child(2),.referenceTableWrap[data-view="detail"] .referenceRecordCell { width:auto;min-width:580px;max-width:none }
.referenceRecordCell { white-space:normal!important }
.referenceRecord { display:block }
.referenceRecordType { display:block;margin-bottom:7px;color:#77736e;font-size:11px;font-weight:750;letter-spacing:.08em }
.referenceRecord>strong { display:block;color:#22211e;font-size:18px;font-weight:650;line-height:1.5 }
.referenceRecord dl { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px;margin:13px 0 0 }
.referenceRecord dl div { min-width:0;padding:10px 0;border-top:1px solid rgba(17,17,15,.13) }
.referenceRecord dt { margin:0 0 4px;color:#77736e;font-size:11px;font-weight:700 }
.referenceRecord dd { margin:0;color:#3b3934;font-size:14px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere }
.referenceSwatch { border-color:#aaa59b;background:#20201e }
.referenceSwatch footer { color:#f6f2e8;background:#20201e }
.referenceSwatch .referenceCopy { color:#f6f2e8;border-color:#aaa59b }

@media (max-width:700px) {
  .referenceHero { padding:30px 0 26px }
  .referenceHeroTop { align-items:stretch;flex-direction:column;gap:14px }
  .referenceHeroTop .librarySections { width:100% }
  .referenceHero .sectionBack { margin-bottom:30px }
  .referenceHero h1 { font-size:clamp(38px,11vw,48px) }
  .referenceHero>.wrap>p:not(.eyebrow) { margin-top:12px;font-size:15px;line-height:1.6 }
  .referenceHeroUtility { grid-template-columns:1fr;gap:14px;margin-top:20px;padding-top:15px }
  .referenceHeroUtility .referenceStats { display:grid;grid-template-columns:repeat(3,1fr);gap:10px }
  .referenceHeroUtility .referenceStats strong { font-size:20px }
  .referenceHeroSearch input { height:38px;font-size:14px }
  .referenceArchive { padding-top:28px }
  .referenceBrowseHead h2 { font-size:28px }
  .referenceGroups { width:100%;flex-wrap:nowrap;margin:0;padding:0 0 8px;overflow-x:auto;scrollbar-width:none }
  .referenceGroups::-webkit-scrollbar { display:none }
  .referenceGroups button { flex:0 0 auto;min-height:42px;padding:0 13px }
  .referenceGroups button small { display:none }
  .referenceToolbar { grid-template-columns:1fr;margin-top:18px;background:#e8e4da }
  .referencePath { align-items:flex-start }
  .referencePath span { max-width:58%;text-align:right }
  .referenceMain { padding-top:46px }
  .referenceBack { top:58px;margin-bottom:20px }
  .referenceNotice { margin-top:-4px;padding:15px 16px;font-size:14px }
  .referenceTable tr { border-color:#bdb8ae;background:#e9e4da }
  .referenceTable td,.referenceTable td:first-child,.referenceTable .referenceCombined { background:transparent }
  .referenceTable tr:nth-child(even) td { background:transparent }
  .referenceTableWrap[data-view="detail"] .referenceTable { min-width:0 }
  .referenceTableWrap[data-view="detail"] .referenceTable th:nth-child(2),.referenceTableWrap[data-view="detail"] .referenceRecordCell { width:auto;min-width:0 }
  .referenceRecord dl { grid-template-columns:1fr }
  .referenceRecord>strong { font-size:17px }
}

/* Featured color entry and content-led titles */
.referenceItemTitle { display:block;color:#22211e;font-size:17px;font-weight:700;line-height:1.45 }
.referenceFeaturedPalette { margin:0 0 34px;padding:26px;border-radius:22px;color:#f7f3e9;background:#1e1e1c;box-shadow:0 18px 42px rgba(32,31,27,.16) }
.referenceFeaturedPalette[hidden] { display:none }
.referenceFeaturedPalette header { display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:22px }
.referenceFeaturedPalette .eyebrow { margin:0;color:#b7b2a7 }
.referenceFeaturedPalette h3 { margin:7px 0 0;color:#fff;font-size:clamp(28px,3.5vw,42px);font-weight:450;line-height:1;letter-spacing:-.04em }
.referenceFeaturedPalette header button { min-height:42px;padding:0;border:0;border-bottom:1px solid #b7b2a7;color:#f7f3e9;background:transparent;font:700 13px/1 inherit;cursor:pointer }
.referenceFeaturedPaletteGrid { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px }
.referenceFeaturedSwatch { min-width:0;padding:0;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:12px;color:inherit;background:#292927;text-align:left;cursor:pointer;transition:transform .18s ease,border-color .18s ease }
.referenceFeaturedSwatch:hover { transform:translateY(-2px);border-color:rgba(255,255,255,.48) }
.referenceFeaturedSwatch:focus-visible { outline:3px solid var(--acid);outline-offset:3px }
.referenceFeaturedSwatch div { height:104px;background:var(--swatch) }
.referenceFeaturedPaletteGrid strong { display:block;overflow:hidden;padding:10px 11px;color:#f7f3e9;font-size:12px;font-weight:650;text-overflow:ellipsis;white-space:nowrap }

/* Visual-reference overview: equal editorial entrances instead of a global table */
.visualReferencePage.isReferenceBooting main,
.visualReferencePage.isReferenceBooting .siteFooter { visibility:hidden }
.referenceOverviewMode .referenceBrowseHead,.referenceOverviewMode .referenceGroups { display:none }
.referenceOverviewMode .referenceToolbar { display:none }
.referenceOverviewMode .referenceCollection,.referenceOverviewMode .referencePageSize { display:none }
.referenceOverviewMode .referenceMain { padding-top:26px }
.referenceOverviewGrid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px }
.referenceOverviewGrid[hidden] { display:none }
.referenceOverviewCard { --card-accent:#879900;--card-accent-rgb:135,153,0;--card-accent-dark:#c5e803;--card-accent-dark-rgb:197,232,3;display:flex;min-width:0;height:350px;flex-direction:column;justify-content:space-between;padding:24px;border:1px solid #cbc7bd;border-radius:22px;color:#171714;background:linear-gradient(90deg,var(--card-accent) 0 28%,transparent 72%) top/100% 4px no-repeat,radial-gradient(circle at 92% 5%,rgba(var(--card-accent-rgb),.13),transparent 34%),#ebe8df;text-align:left;cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background-color .2s ease }
.referenceOverviewCard:hover { transform:translateY(-3px);border-color:color-mix(in srgb,var(--card-accent) 62%,#8f8a80);box-shadow:0 16px 32px rgba(45,42,35,.1) }
.referenceOverviewCard:focus-visible { outline:3px solid var(--acid);outline-offset:4px }
.referenceOverviewCard>header { display:flex;justify-content:space-between;gap:18px;align-items:flex-start;color:#67635c;font:650 11px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em }
.referenceOverviewCard>header strong { flex:0 0 auto;color:#171714;font-family:Inter,"Helvetica Neue","PingFang SC",sans-serif;font-size:12px;letter-spacing:0 }
.referenceOverviewCard>header b { color:var(--card-accent);font-size:14px }
.referenceOverviewCard>div { max-width:520px;margin:42px 0 30px }
.referenceOverviewCard>div p { margin:0;color:var(--card-accent);font-size:11px;font-weight:750;letter-spacing:.12em }
.referenceOverviewCard h3 { max-width:12em;margin:10px 0 0;font-size:clamp(30px,3.2vw,42px);font-weight:480;line-height:1.02;letter-spacing:-.045em }
.referenceOverviewCard>div small { display:block;max-width:31em;margin-top:18px;color:#55524c;font-size:14px;line-height:1.7 }
.referenceOverviewCard>footer { display:flex;flex-wrap:wrap;gap:7px;align-items:flex-end;min-height:44px;padding-top:18px;border-top:1px solid rgba(17,17,15,.18) }
.referenceOverviewCard>footer i { max-width:180px;padding:7px 10px;overflow:hidden;border:1px solid color-mix(in srgb,var(--card-accent) 28%,transparent);border-radius:999px;color:var(--card-accent);background:rgba(255,255,255,.3);font:650 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;text-overflow:ellipsis;white-space:nowrap }
.referenceOverviewCard--color>footer { display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px }
.referenceOverviewCard--color>footer i { display:block;width:auto;max-width:none;height:44px;padding:0;border:1px solid rgba(17,17,15,.16);border-radius:7px;background:var(--swatch) }
.referenceOverviewCard--words { --card-accent:#a86f3d;--card-accent-rgb:168,111,61;--card-accent-dark:#e8ad6b;--card-accent-dark-rgb:232,173,107 }
.referenceOverviewCard--styles { --card-accent:#617641;--card-accent-rgb:97,118,65;--card-accent-dark:#a9cb6b;--card-accent-dark-rgb:169,203,107 }
.referenceOverviewCard--artists { --card-accent:#925e68;--card-accent-rgb:146,94,104;--card-accent-dark:#df92a3;--card-accent-dark-rgb:223,146,163 }
.referenceOverviewCard--materials { --card-accent:#926342;--card-accent-rgb:146,99,66;--card-accent-dark:#d3a06a;--card-accent-dark-rgb:211,160,106 }
.referenceOverviewCard--camera { --card-accent:#4f7180;--card-accent-rgb:79,113,128;--card-accent-dark:#79b5c7;--card-accent-dark-rgb:121,181,199 }

html[data-theme="dark"] .referenceOverviewCard { color:#f3f3ee;border-color:rgba(255,255,255,.13);background:linear-gradient(90deg,var(--card-accent-dark) 0 28%,transparent 72%) top/100% 4px no-repeat,radial-gradient(circle at 92% 5%,rgba(var(--card-accent-dark-rgb),.13),transparent 34%),#171715;box-shadow:inset 0 1px 0 rgba(255,255,255,.025) }
html[data-theme="dark"] .referenceOverviewCard:hover { border-color:color-mix(in srgb,var(--card-accent-dark) 62%,#5f5f59);box-shadow:0 18px 42px rgba(0,0,0,.34) }
html[data-theme="dark"] .referenceOverviewCard>header { color:#a9a79f }
html[data-theme="dark"] .referenceOverviewCard>header strong,html[data-theme="dark"] .referenceOverviewCard h3 { color:#f6f5ef }
html[data-theme="dark"] .referenceOverviewCard>header b,html[data-theme="dark"] .referenceOverviewCard>div p { color:var(--card-accent-dark) }
html[data-theme="dark"] .referenceOverviewCard>div small { color:#b8b6ae }
html[data-theme="dark"] .referenceOverviewCard>footer { border-top-color:rgba(255,255,255,.13) }
html[data-theme="dark"] .referenceOverviewCard>footer i { color:var(--card-accent-dark);border-color:rgba(var(--card-accent-dark-rgb),.34);background:rgba(var(--card-accent-dark-rgb),.1) }
html[data-theme="dark"] .referenceOverviewCard--color>footer i { border-color:rgba(255,255,255,.16);background:var(--swatch) }

@media (max-width:900px) {
  .referenceFeaturedPaletteGrid { grid-template-columns:repeat(4,minmax(0,1fr)) }
}

@media (max-width:700px) {
  .referenceOverviewMode .referenceMain { padding-top:22px }
  .referenceOverviewGrid { grid-template-columns:1fr;gap:12px }
  .referenceOverviewCard { height:320px;padding:20px;border-radius:18px }
  .referenceOverviewCard>header { gap:10px;font-size:9px }
  .referenceOverviewCard>header strong { font-size:11px }
  .referenceOverviewCard>div { margin:34px 0 24px }
  .referenceOverviewCard h3 { font-size:34px }
  .referenceOverviewCard>div small { margin-top:14px;font-size:13px }
  .referenceOverviewCard--color>footer { grid-template-columns:repeat(8,minmax(0,1fr)) }
  .referenceOverviewCard--color>footer i { height:34px }
  .referenceFeaturedPalette { margin-bottom:28px;padding:18px;border-radius:17px }
  .referenceFeaturedPalette header { align-items:flex-start;margin-bottom:17px }
  .referenceFeaturedPalette h3 { font-size:30px }
  .referenceFeaturedPalette header button { min-height:34px;font-size:12px }
  .referenceFeaturedPaletteGrid { grid-template-columns:repeat(3,minmax(0,1fr));gap:8px }
  .referenceFeaturedSwatch div { height:72px }
  .referenceFeaturedPaletteGrid strong { padding:8px;font-size:11px }
  .referenceItemTitle { font-size:16px }
}
@media (max-width:560px) { .encyclopediaHero{padding:66px 0 52px}.encyclopediaHero h1{font-size:62px}.encyclopediaStats{gap:12px 20px;margin-top:40px}.encyclopediaTabs{margin:0 -18px;padding:0 18px}.encyclopediaTabs button{min-height:56px;padding:0 14px}.encyclopediaTabs button:first-child{padding-left:0}.encyclopediaTools{grid-template-columns:1fr;gap:16px}.encyclopediaView{justify-self:start}.encyclopediaGrid{gap:23px 12px}.encyclopediaCardCopy>strong{font-size:14px}.encyclopediaCardCopy>span{font-size:10px}.encyclopediaCardCopy>b{display:none} }

/* About / deliberately minimal */
.aboutPage { --about-surface:#f3f0e8;--about-shadow-light:rgba(255,255,255,.92);--about-shadow-dark:rgba(157,151,139,.36);min-height:100vh;background:var(--about-surface) }
.aboutMinimal { display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,440px);gap:clamp(54px,7vw,104px);align-items:center;min-height:calc(100svh - 72px);padding:clamp(72px,9vw,120px) 0 }
.aboutMinimalCopy { min-width:0;max-width:700px }
.aboutMinimalCopy h1 { margin:0;font-size:clamp(56px,6.4vw,88px);font-weight:300;line-height:1;letter-spacing:-.055em }
.aboutMinimalCopy h1 span,.aboutMinimalCopy h1 strong { display:block }
.aboutMinimalCopy h1 strong { margin-top:5px;font-weight:600;letter-spacing:-.045em }
.aboutMinimalLead { max-width:34em;margin:clamp(34px,4vw,52px) 0 0;color:#353531;font-size:clamp(17px,1.55vw,20px);line-height:1.78 }
.aboutMinimalBelief { margin:24px 0 0;padding-left:16px;border-left:4px solid var(--acid);color:var(--muted);font-size:15px;line-height:1.65 }
.aboutMinimalBelief span { color:#31312e;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase }
.aboutMinimalAreas { display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:clamp(44px,6vw,72px);padding-top:18px;border-top:1px solid var(--line);color:#5f5f5a;font-size:13px }
.aboutMinimalAreas span:not(:last-child)::after { content:"/";margin-left:22px;color:#aaa9a3 }
.aboutExploreGrid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:34px }
.aboutExploreCard { position:relative;min-width:0;min-height:142px;display:flex;flex-direction:column;align-items:flex-start;padding:20px 48px 20px 20px;border:0;border-radius:22px;color:var(--ink);background:var(--about-surface);box-shadow:-7px -7px 16px var(--about-shadow-light),7px 7px 16px rgba(157,151,139,.26);font:inherit;text-align:left;cursor:pointer;transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease }
.aboutExploreCard:hover { transform:translateY(-2px) }
.aboutExploreCard:active { transform:none;box-shadow:inset -5px -5px 11px var(--about-shadow-light),inset 5px 5px 11px rgba(157,151,139,.28) }
.aboutExploreCard:focus-visible { outline:3px solid var(--acid);outline-offset:5px }
.aboutExploreKicker { color:#71716b;font:700 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em }
.aboutExploreCard strong { margin-top:auto;font-size:20px;font-weight:600;line-height:1.15 }
.aboutExploreCard small { margin-top:7px;color:var(--muted);font-size:12px;font-weight:400;line-height:1.5 }
.aboutExploreCard>b { position:absolute;right:18px;top:18px;color:var(--ink);font-size:20px;font-weight:400;transform:scale(1);transform-origin:center;transition:color .18s ease,transform .18s ease }
.aboutExploreCard:hover>b,.aboutExploreCard:focus-visible>b { color:var(--acid);transform:scale(.82) }
.aboutChannelCard { grid-column:1 / -1;min-height:118px }
.aboutContactSleeve { position:relative;width:100%;padding:22px;border:0;border-radius:32px;background:var(--about-surface);box-shadow:-14px -14px 30px var(--about-shadow-light),14px 14px 30px var(--about-shadow-dark);scroll-margin-top:96px;transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease }
.aboutContactSleeve:hover { transform:translateY(-7px);box-shadow:-16px -18px 34px var(--about-shadow-light),16px 20px 36px rgba(157,151,139,.4) }
.aboutContactSleeve::before,.aboutContactSleeve::after { content:none }
.aboutReturnLink { display:inline-flex;align-items:center;margin:0 0 16px 10px;padding:7px 0;border-bottom:2px solid var(--acid);color:#5f5f59;font-size:12px;font-weight:700;transition:color .2s ease,transform .2s ease }
.aboutReturnLink[hidden] { display:none }
.aboutReturnLink:hover,.aboutReturnLink:focus-visible { color:#718600;transform:translateX(-4px) }
.aboutReturnLink:focus-visible { outline:2px solid var(--acid);outline-offset:5px }
.aboutContactSleeveMeta { display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;padding:9px 10px 9px 18px;border:0;border-radius:999px;color:#64645f;background:var(--about-surface);box-shadow:inset -5px -5px 10px var(--about-shadow-light),inset 5px 5px 10px rgba(157,151,139,.26);font:600 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.15em }
.aboutContactSleeveMeta i { display:block;width:30px;height:30px;border-radius:50%;background:var(--acid);box-shadow:-3px -3px 7px var(--about-shadow-light),3px 3px 7px rgba(157,151,139,.32);transform:scale(1);transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease,filter .28s ease }
.aboutContactSleeve:hover .aboutContactSleeveMeta i { transform:scale(.86);box-shadow:0 0 0 6px rgba(197,232,3,.14),-3px -3px 7px var(--about-shadow-light),3px 3px 8px rgba(157,151,139,.35);filter:saturate(1.16) }
.aboutMinimalContact { position:relative;padding:clamp(22px,2.6vw,32px);overflow:hidden;border:0;border-radius:24px;background:var(--about-surface) }
.aboutMinimalContact::before { content:none }
.aboutMinimalContactHead { position:relative;text-align:center }
.aboutMinimalContactHead .eyebrow { margin-bottom:10px;color:#73736d }
.aboutMinimalContactHead h2 { margin:0;font-size:clamp(25px,2.3vw,31px);font-weight:500;line-height:1.2;letter-spacing:-.025em;white-space:nowrap }
.aboutMinimalQr { position:relative;width:min(100%,310px);margin:clamp(28px,3.5vw,40px) auto 26px;padding:16px;border:0;border-radius:24px;background:var(--about-surface);box-shadow:inset -7px -7px 15px var(--about-shadow-light),inset 7px 7px 15px rgba(157,151,139,.34) }
.aboutMinimalQr img { width:100%;height:auto;border-radius:14px }
.aboutMinimalNote { position:relative;margin:0;padding:16px 14px;border:0;border-radius:18px;background:var(--about-surface);box-shadow:-5px -5px 12px var(--about-shadow-light),5px 5px 12px rgba(157,151,139,.28);font-size:14px;font-weight:700;text-align:center }
.aboutMinimalNote small { display:block;margin-top:4px;color:var(--muted);font-size:12px;font-weight:400;line-height:1.55 }
@media (prefers-reduced-motion:reduce) {
  .aboutContactSleeve:hover { transform:none }
  .aboutContactSleeve:hover .aboutContactSleeveMeta i { transform:none }
  .aboutReturnLink,.portfolioLink,.portfolioContact,.portfolioLink b,.portfolioContact b,.textLink { transition:none }
}

.characterDialog {
  --character-paper:#f3f0e8;
  --character-ink:#11110f;
  --character-muted:#686861;
  --character-line:rgba(17,17,15,.15);
  width:min(1120px,calc(100% - 32px));
  max-height:92svh;
  margin:auto;
  padding:0;
  overflow:auto;
  border:0;
  border-radius:18px;
  color:var(--character-ink);
  background:var(--character-paper);
  box-shadow:0 28px 80px rgba(11,11,11,.3);
  font-weight:400;
}
.characterDialog::backdrop { background:rgba(11,11,11,.7);backdrop-filter:blur(8px) }
.characterDialogTop { position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;gap:32px;align-items:flex-start;padding:24px clamp(24px,4vw,46px);border-bottom:1px solid var(--character-line);background:rgba(243,240,232,.95);backdrop-filter:blur(16px) }
.characterDialogTop .eyebrow { margin-bottom:12px;color:var(--character-muted);font-size:10px;font-weight:600 }
.characterDialogTop h2 { max-width:17em;margin:0;font-size:clamp(32px,3.5vw,46px);font-weight:600;line-height:1.06;letter-spacing:-.04em }
.characterDialogClose { display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border:1px solid var(--character-line);border-radius:50%;color:var(--character-ink);background:transparent;font-size:27px;font-weight:300;cursor:pointer }
.characterDialogClose:hover { background:rgba(255,255,255,.45) }
.characterDialogClose:focus-visible { outline:3px solid var(--acid);outline-offset:3px }
.characterArchive { display:grid;gap:18px;padding:18px;background:#d8d8d5 }
.characterArchive section { margin:0;padding:clamp(58px,6vw,84px) clamp(24px,5vw,64px);overflow:hidden;border:0;border-radius:28px;background:var(--character-paper);box-shadow:0 10px 34px rgba(17,17,15,.07) }
.characterArchive section>span,.characterStepCopy>span { display:inline-flex;align-items:center;gap:10px;color:var(--character-muted);font:600 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em }
.characterArchive section>span::before,.characterStepCopy>span::before { content:"";width:10px;height:10px;border-radius:50%;background:var(--acid) }
.characterArchive .characterHero { padding:0;background:var(--character-paper) }
.characterHeroStage { display:grid;place-items:center;height:clamp(360px,52svh,460px);margin:0;overflow:hidden;background:#dedede }
.characterHeroStage img { display:block;width:min(42%,390px);height:auto;object-fit:contain;transform:translateY(-17%) }
.characterHeroIntro { display:grid;grid-template-columns:minmax(180px,.55fr) minmax(0,1.45fr);gap:clamp(36px,7vw,92px);align-items:start;padding:28px clamp(24px,5vw,64px) 30px;background:var(--character-paper) }
.characterHeroIntro>span { color:var(--character-muted);font:600 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em }
.characterHeroIntro>div { display:flex;justify-content:space-between;gap:30px;align-items:baseline }
.characterHeroIntro h3 { margin:0;font-size:clamp(32px,4vw,48px);font-weight:600;line-height:1;letter-spacing:-.04em }
.characterHeroIntro p { max-width:18em;margin:0;color:var(--character-muted);font-size:15px;line-height:1.65 }
.characterProcessOpening { display:block;background:var(--character-paper);color:var(--character-ink) }
.characterProcessOpening>span { margin-bottom:34px }
.characterOpeningCopy { display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,86px);align-items:start }
.characterOpeningCopy h3 { max-width:16em;margin:0;font-size:clamp(36px,4.7vw,58px);font-weight:600;line-height:1.05;letter-spacing:-.045em }
.characterOpeningBody p { max-width:44em;margin:0;color:var(--character-muted);font-size:17px;line-height:1.7 }
.characterOpeningBody p+p { margin-top:24px }
.characterNaming { display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--character-paper) }
.characterNaming>span { grid-column:1 / -1;margin-bottom:34px }
.characterNaming>div { padding:0 36px 0 0;background:transparent }
.characterNaming>div+div { padding:0 0 0 36px;border-left:1px solid var(--character-line) }
.characterNaming h3 { margin:0 0 16px;font-size:clamp(30px,3.4vw,42px);font-weight:600;line-height:1.05;letter-spacing:-.03em }
.characterNaming p { max-width:28em;margin:0;color:var(--character-muted);font-size:17px;line-height:1.7 }
.characterNaming>strong { grid-column:1 / -1;margin-top:42px;padding:22px 0 0;border-top:1px solid var(--character-ink);color:var(--character-ink);background:transparent;font-size:clamp(24px,3.2vw,38px);font-weight:600;line-height:1.2 }
.characterNaming>strong::after { content:"";display:block;width:44px;height:4px;margin-top:22px;background:var(--acid) }
.characterDesignStep { display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:clamp(30px,5vw,64px);background:var(--character-paper) }
.characterStepCopy { display:flex;flex-direction:column;align-items:flex-start;padding:0;background:transparent;border-radius:0 }
.characterDesignStep>.characterStepCopy { min-height:440px;justify-content:center }
.characterStepCopy h3 { max-width:13em;margin:clamp(32px,4vw,48px) 0 18px;font-size:clamp(32px,4vw,48px);font-weight:600;line-height:1.08;letter-spacing:-.04em }
.characterStepCopy p { margin:0;color:var(--character-muted);font-size:17px;line-height:1.7 }
.characterDesignStep figure { margin:0;overflow:hidden;border-radius:22px;background:var(--character-paper);box-shadow:0 8px 26px rgba(17,17,15,.09) }
.characterDesignStep figure img { display:block;width:100%;object-fit:cover;object-position:center;background:transparent }
.characterDesignStep figcaption { padding:13px 16px;border-top:1px solid var(--character-line);color:var(--character-muted);background:var(--character-paper);font-size:12px;line-height:1.5;text-align:center }
.characterPortrait img { aspect-ratio:3 / 4 }
.characterTurnaround { grid-column:1 / -1;margin-top:6px!important }
.characterTurnaround img { aspect-ratio:16 / 9 }
.characterRelationshipTest { background:var(--character-paper);color:var(--character-ink) }
.characterRelationshipTest .characterStepCopy { display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,86px);max-width:none }
.characterRelationshipTest .characterStepCopy>span { grid-column:1 / -1;margin-bottom:4px }
.characterRelationshipTest .characterStepCopy h3 { grid-column:1;margin:0;max-width:16em }
.characterRelationshipTest .characterStepCopy p { grid-column:2;margin:0;color:var(--character-muted) }
.characterPoseGrid { display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:42px;background:transparent }
.characterPoseGrid figure { margin:0;overflow:hidden;border-radius:22px;background:var(--character-paper);box-shadow:0 8px 26px rgba(17,17,15,.09) }
.characterPoseGrid img { display:block;width:100%;aspect-ratio:1 / 1;object-fit:cover;object-position:center;background:transparent }
.characterPoseGrid figcaption { display:flex;justify-content:center;align-items:center;gap:12px;padding:14px 16px;color:var(--character-ink);background:var(--character-paper);font-size:12px;text-align:center }
.characterPoseGrid figcaption b { color:var(--character-ink) }
.characterPoseGrid figcaption b::after { content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-radius:50%;background:var(--acid) }
.characterFinalDefinition { color:#fff;background:#0d0d0c!important }
.characterFinalDefinition>span { color:#9b9b94!important }
.characterFinalDefinition blockquote { max-width:14em;margin:clamp(46px,6vw,68px) 0 26px;font-size:clamp(40px,5.5vw,68px);font-weight:600;line-height:1.05;letter-spacing:-.045em }
.characterFinalDefinition>p { max-width:48em;margin:0;color:#c6c6c0;font-size:17px;line-height:1.7 }
.characterUseRules { display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:46px;border-top:1px solid rgba(255,255,255,.22) }
.characterUseRules span { padding:18px 24px 0 0;color:#fff;background:transparent;font-size:12px;font-weight:600 }

.officialAccountDialog { width:min(560px,calc(100% - 32px));margin:auto;padding:0;overflow:hidden;border:0;border-radius:24px;color:var(--ink);background:var(--about-surface);box-shadow:0 28px 80px rgba(11,11,11,.28) }
.officialAccountDialog::backdrop { background:rgba(11,11,11,.68);backdrop-filter:blur(8px) }
.officialAccountTop { display:flex;justify-content:space-between;gap:28px;align-items:flex-start;padding:26px 28px 22px;border-bottom:1px solid rgba(17,17,15,.13) }
.officialAccountTop .eyebrow { margin-bottom:10px;color:#71716b;font-size:9px;font-weight:700 }
.officialAccountTop h2 { margin:0;font-size:30px;font-weight:600;line-height:1.1;letter-spacing:-.035em }
.officialAccountClose { display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;border:1px solid rgba(17,17,15,.15);border-radius:50%;color:var(--ink);background:transparent;font-size:26px;font-weight:300;cursor:pointer }
.officialAccountClose:hover { background:rgba(255,255,255,.48) }
.officialAccountClose:focus-visible { outline:3px solid var(--acid);outline-offset:3px }
.officialAccountBody { display:grid;grid-template-columns:minmax(0,236px) minmax(0,1fr);gap:30px;align-items:center;padding:30px }
.officialAccountQr { margin:0;padding:16px;border-radius:22px;background:var(--about-surface);box-shadow:inset -7px -7px 15px var(--about-shadow-light),inset 7px 7px 15px rgba(157,151,139,.32) }
.officialAccountQr img { display:block;width:100%;height:auto;border-radius:12px;background:#fff }
.officialAccountCopy { min-width:0 }
.officialAccountCopy span { color:#71716b;font:700 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em }
.officialAccountCopy strong { display:block;margin-top:14px;font-size:28px;font-weight:600;line-height:1.1;letter-spacing:-.03em }
.officialAccountCopy p { margin:18px 0 0;color:var(--muted);font-size:14px;line-height:1.75 }

@media (max-width:900px) {
  .aboutMinimal { grid-template-columns:1fr;min-height:auto;gap:70px;padding:82px 0 }
  .aboutContactSleeve { width:min(100%,440px);margin:0 auto }
  .characterHeroIntro,.characterOpeningCopy,.characterRelationshipTest .characterStepCopy { grid-template-columns:1fr }
  .characterHeroIntro>div { align-items:flex-start }
  .characterRelationshipTest .characterStepCopy h3,.characterRelationshipTest .characterStepCopy p { grid-column:1 }
  .characterRelationshipTest .characterStepCopy p { margin-top:4px }
  .characterDesignStep { grid-template-columns:1fr }
  .characterDesignStep>.characterStepCopy { min-height:auto;justify-content:flex-start }
  .characterTurnaround { grid-column:1 }
  .characterStepCopy h3 { margin-top:44px }
}
@media (max-width:650px) {
  .aboutMinimal { gap:54px;padding:64px 0 }
  .aboutMinimalCopy h1 { font-size:clamp(46px,14vw,62px);line-height:1.04 }
  .aboutMinimalLead { margin-top:34px }
  .aboutMinimalAreas { display:grid;grid-template-columns:repeat(2,1fr);gap:8px 18px }
  .aboutMinimalAreas span:not(:last-child)::after { content:none }
  .aboutExploreGrid { grid-template-columns:1fr;gap:14px }
  .aboutChannelCard { grid-column:1 }
  .aboutContactSleeve { padding:16px;border-radius:26px;box-shadow:-9px -9px 20px var(--about-shadow-light),9px 9px 20px var(--about-shadow-dark) }
  .aboutContactSleeveMeta { margin-bottom:12px }
  .aboutMinimalContact { padding:22px 10px 12px }
  .aboutMinimalContactHead h2 { font-size:25px }
  .aboutMinimalQr { width:min(100%,290px);margin-top:30px }
  .characterDialog { width:calc(100% - 16px);max-height:96svh;border-radius:12px }
  .characterDialogTop { padding:22px 18px 18px }
  .characterDialogTop h2 { font-size:34px }
  .characterDialogClose { width:40px;height:40px }
  .characterArchive { gap:8px;padding:8px;background:#d8d8d5 }
  .characterArchive section { padding:52px 18px;border-radius:20px }
  .characterArchive .characterHero { padding:0 }
  .characterHeroStage { height:440px }
  .characterHeroStage img { width:min(94%,340px);height:auto;transform:translateY(-12%) }
  .characterHeroIntro { gap:18px;padding:26px 18px 32px }
  .characterHeroIntro>div { flex-direction:column;gap:12px }
  .characterOpeningCopy,.characterRelationshipTest .characterStepCopy { gap:28px }
  .characterNaming { grid-template-columns:1fr }
  .characterNaming>span,.characterNaming>strong { grid-column:auto }
  .characterNaming>div,.characterNaming>div+div { padding:0;border-left:0 }
  .characterNaming>div+div { margin-top:38px;padding-top:38px;border-top:1px solid var(--character-line) }
  .characterDesignStep { grid-template-columns:1fr;gap:28px }
  .characterTurnaround { grid-column:1 }
  .characterDesignStep figure,.characterPoseGrid figure { border-radius:16px }
  .characterPoseGrid { grid-template-columns:1fr;gap:12px }
  .characterPoseGrid img { aspect-ratio:1 / 1;object-fit:cover }
  .characterUseRules { grid-template-columns:1fr }
  .characterUseRules span { padding-top:14px }
  .officialAccountDialog { width:calc(100% - 20px);border-radius:18px }
  .officialAccountTop { padding:22px 20px 18px }
  .officialAccountTop h2 { font-size:26px }
  .officialAccountBody { grid-template-columns:1fr;gap:24px;padding:24px 20px 28px;text-align:center }
  .officialAccountQr { width:min(100%,250px);margin:0 auto }
}

/* Brand core definition and toolkit */
.brandManualPage {
  --brand-paper:#f3f0e8;
  --brand-shell:#d9d6cc;
  --brand-ink:#11110f;
  --brand-muted:#686861;
  --brand-line:rgba(17,17,15,.15);
  --brand-signal:#c5e803;
  color:var(--brand-ink);
  background:var(--brand-shell);
}
.brandManualPage main { overflow:hidden;font-weight:400 }
.brandManualPage .siteHeader { background:rgba(243,240,232,.94) }
.brandPanelStack { display:grid;gap:18px;padding:18px }
.brandPanelStack>section { position:relative;min-height:calc(100svh - 108px);overflow:hidden;border-radius:32px;scroll-margin-top:88px;transition:opacity .55s ease,transform .7s cubic-bezier(.22,1,.36,1) }
.brandMotionReady .brandPanelStack>section:not(.is-active) { opacity:.78;transform:translateY(18px) scale(.988) }
.brandMotionReady .brandPanelStack>section.is-past { transform:translateY(-14px) scale(.988) }
.brandManualHero,.brandManualSection,.brandPositioning,.brandLogoSection,.brandApplicationSection {
  padding:clamp(88px,10vw,144px) 0;
  background:var(--brand-paper);
  border:0;
}
.brandManualHero { display:flex;align-items:center;padding-top:clamp(72px,9vw,116px) }
.brandManualHeroGrid { display:grid;grid-template-columns:minmax(310px,.72fr) minmax(0,1.28fr);gap:clamp(54px,7vw,112px);align-items:center }
.brandManualHeroCopy { max-width:980px }
.brandPageBack { display:inline-flex;margin:0 0 34px;padding-bottom:5px;border-bottom:1px solid var(--brand-ink);color:var(--brand-muted);font-size:12px;font-weight:600 }
.brandPageBack:hover { color:var(--brand-ink);border-bottom-color:var(--brand-signal) }
.brandManualHeroCopy .eyebrow,.brandApplicationIntro .eyebrow {
  margin:0 0 24px;
  color:var(--brand-muted);
  font:600 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.16em;
}
.brandManualHeroCopy h1 {
  margin:0;
  font-size:clamp(72px,10vw,138px);
  font-weight:600;
  line-height:.86;
  letter-spacing:-.065em;
}
.brandManualSlogan {
  margin:44px 0 0;
  font-size:clamp(25px,3vw,38px);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.025em;
}
.brandManualChinese { margin:9px 0 0;color:var(--brand-muted);font-size:clamp(17px,1.8vw,23px);line-height:1.6 }
.brandManualHierarchy { display:flex;align-items:center;gap:18px;margin-top:46px;padding-top:18px;border-top:1px solid var(--brand-line);font-size:13px }
.brandManualHierarchy span { display:flex;gap:8px;align-items:baseline;color:var(--brand-muted) }
.brandManualHierarchy b { color:var(--brand-ink);font-size:16px;font-weight:600 }
.brandManualHierarchy i { width:6px;height:6px;border-radius:50%;background:var(--brand-signal) }
.brandScrollCue { display:flex;align-items:center;gap:10px;margin:34px 0 0;padding:0;border:0;color:var(--brand-muted);background:transparent;font-size:12px;line-height:1.4;cursor:pointer }
.brandScrollCue i { width:26px;height:1px;background:var(--brand-signal) }
.brandScrollCue b { display:grid;place-items:center;width:28px;height:28px;margin-left:3px;border-radius:50%;color:var(--brand-ink);background:var(--brand-signal);font-size:16px;transition:transform .2s ease }
.brandScrollCue:hover b { transform:translateY(3px) }
.brandScrollCue:focus-visible { outline:3px solid var(--brand-signal);outline-offset:6px }
.brandManualHeroVisual { width:100%;margin:0;overflow:hidden;border-radius:24px;background:#ebe8df }
.brandApplicationVisual { width:100%;margin:clamp(56px,7vw,88px) 0 0;overflow:hidden;border-radius:24px }
.brandManualHeroVisual img,.brandApplicationVisual img,.brandLogoVisual img { display:block;width:100%;height:auto }
.brandManualSplit,.brandPositioningInner,.brandWhoGrid,.brandBeliefGrid {
  display:grid;
  grid-template-columns:minmax(210px,.55fr) minmax(0,1.45fr);
  gap:clamp(48px,8vw,120px);
  align-items:start;
}
.brandManualSectionTitle>span {
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  margin-bottom:20px;
  border-radius:50%;
  color:var(--brand-ink);
  background:var(--brand-signal);
  font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.brandManualSectionTitle>p {
  margin:0 0 10px;
  color:var(--brand-muted);
  font:600 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.15em;
}
.brandManualSectionTitle h2 {
  margin:0;
  font-size:clamp(36px,4.4vw,58px);
  font-weight:500;
  line-height:1;
  letter-spacing:-.045em;
  white-space:nowrap;
}
.brandCoreTable { margin:0 }
.brandCoreTable div { display:grid;grid-template-columns:150px 1fr;gap:32px;padding:23px 0;border-bottom:1px solid var(--brand-line) }
.brandCoreTable div:first-child { border-top:1px solid var(--brand-ink) }
.brandCoreTable dt { color:var(--brand-muted);font-size:13px;line-height:1.7 }
.brandCoreTable dd { margin:0;font-size:clamp(17px,1.7vw,22px);font-weight:500;line-height:1.55 }
.brandWhoCopy { min-width:0 }
.brandWhoLead { max-width:39em;margin:0;color:#3e3e39;font-size:clamp(19px,2vw,25px);line-height:1.72 }
.brandWhoCopy>strong { display:block;margin-top:36px;padding-left:20px;border-left:6px solid var(--brand-signal);font-size:clamp(24px,3vw,38px);font-weight:500;line-height:1.18;letter-spacing:-.035em }
.brandWhoFacts { margin-top:clamp(42px,6vw,70px) }
.brandPositioningCopy>p { max-width:39em;margin:0;color:#3e3e39;font-size:clamp(19px,2vw,25px);font-weight:400;line-height:1.72 }
.brandPositioningCopy>strong {
  display:block;
  max-width:14em;
  margin-top:clamp(54px,7vw,88px);
  padding-left:24px;
  border-left:7px solid var(--brand-signal);
  color:var(--brand-ink);
  font-size:clamp(38px,5vw,64px);
  font-weight:500;
  line-height:1.04;
  letter-spacing:-.045em;
}
.brandPositioning { display:flex;align-items:center;color:var(--brand-ink);background:var(--brand-paper) }
.brandPositioning .brandManualSectionTitle>p,.brandPositioning .brandPositioningCopy>p { color:var(--brand-muted) }
.brandPositioning .brandManualSectionTitle h2,.brandPositioning .brandPositioningCopy>strong { color:var(--brand-ink) }
.brandBeliefGrid { align-items:center }
.brandBeliefCopy>p { max-width:42em;margin:0;color:var(--brand-muted);font-size:clamp(17px,1.7vw,21px);line-height:1.8 }
.brandBeliefCopy>p strong { color:var(--brand-ink);font-weight:600 }
.brandBeliefCopy blockquote { max-width:17em;margin:clamp(42px,6vw,68px) 0;font-size:clamp(34px,4.6vw,60px);font-weight:500;line-height:1.08;letter-spacing:-.045em }
.brandEditorialGrid { display:grid;grid-template-columns:1fr 1fr;gap:clamp(50px,7vw,100px) }
.brandEditorialBlock { display:flex;flex-direction:column;padding-top:30px;border-top:1px solid var(--brand-ink) }
.brandEditorialBlock>p { margin:clamp(54px,7vw,90px) 0 0;color:#454540;font-size:17px;line-height:1.85 }
.brandEditorialBlock>p strong { color:var(--brand-ink);font-size:20px;font-weight:600 }
.brandEditorialBlock blockquote { max-width:16em;margin:clamp(54px,7vw,90px) 0 28px;font-size:clamp(28px,3.2vw,43px);font-weight:500;line-height:1.2;letter-spacing:-.03em }
.brandEditorialBlock.belief>p { margin:0 }
.brandLogoGrid { display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:clamp(48px,8vw,110px);align-items:start }
.brandLogoSection { display:flex;align-items:center }
.brandLogoVisual { position:sticky;top:100px;margin:0;overflow:hidden;border-radius:24px }
.brandLogoIntro { margin:36px 0;color:#41413c;font-size:18px;line-height:1.8 }
.brandSymbolList { border-top:1px solid var(--brand-ink) }
.brandSymbolList article { display:grid;grid-template-columns:60px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--brand-line) }
.brandSymbolList article>b { color:var(--brand-ink);font-size:28px;font-weight:600;line-height:1 }
.brandSymbolList article:not(.heartbeat)>b::after { content:"";display:block;width:18px;height:3px;margin-top:9px;background:var(--brand-signal) }
.brandSymbolList strong { font-size:13px;font-weight:600;line-height:1.55 }
.brandSymbolList p { margin:5px 0 0;color:var(--brand-muted);font-size:14px;line-height:1.7 }
.brandApplicationIntro {
  display:grid;
  grid-template-columns:minmax(210px,.55fr) minmax(0,1.45fr);
  column-gap:clamp(48px,8vw,120px);
  row-gap:28px;
  align-items:start;
}
.brandApplicationSection>.wrap { display:grid;grid-template-columns:minmax(280px,.65fr) minmax(0,1.35fr);gap:clamp(54px,7vw,112px);align-items:center }
.brandApplicationSection .brandApplicationIntro { display:block }
.brandApplicationIndex { display:grid;width:28px;height:28px;place-items:center;margin-bottom:28px;border-radius:50%;color:#0b0b0b;background:var(--brand-signal);font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace }
.brandApplicationIntro .eyebrow { grid-column:1;margin-top:8px }
.brandApplicationIntro h2 { grid-column:2;max-width:14em;margin:0;font-size:clamp(36px,4.4vw,58px);font-weight:500;line-height:1.04;letter-spacing:-.045em }
.brandApplicationIntro>p:last-child { grid-column:2;max-width:42em;margin:0;color:var(--brand-muted);font-size:17px;line-height:1.8 }
.brandApplicationSection .brandApplicationIntro .eyebrow { margin:0 0 28px }
.brandApplicationSection .brandApplicationIntro>p:last-child { margin-top:28px }
.brandApplicationSection .brandApplicationVisual { margin:0 }
.brandApplicationSection { background:#e9e6dd }
.keywordTitle { display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center;margin-bottom:52px }
.keywordTitle>span { grid-row:1 / span 2;margin:0 }
.keywordTitle>p { margin:0 }
.keywordTitle h2 { margin-top:5px }
.brandKeywordGrid { border-top:1px solid var(--brand-ink) }
.brandKeywordGrid article {
  display:grid;
  grid-template-columns:minmax(90px,.45fr) minmax(110px,.55fr) minmax(0,1.4fr);
  gap:clamp(22px,4vw,56px);
  align-items:baseline;
  padding:26px 0;
  border-bottom:1px solid var(--brand-line);
}
.brandKeywordGrid span { color:var(--brand-muted);font:600 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em }
.brandKeywordGrid h3 { margin:0;font-size:clamp(28px,3vw,40px);font-weight:500;line-height:1;letter-spacing:-.035em }
.brandKeywordGrid p { margin:0;color:#4b4b46;font-size:15px;line-height:1.7 }
.brandKeywordGrid article.active h3::after { content:"";display:inline-block;width:9px;height:9px;margin-left:11px;border-radius:50%;background:var(--brand-signal);vertical-align:middle }
.brandClosingSection { display:flex;align-items:center }
.brandClosingKeywords { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px }
.brandClosingKeywords article { min-width:0;padding:22px 4px 0;border-top:1px solid var(--brand-line) }
.brandClosingKeywords span { color:var(--brand-muted);font:600 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em }
.brandClosingKeywords h3 { margin:24px 0 12px;font-size:clamp(25px,2.8vw,38px);font-weight:500;line-height:1;letter-spacing:-.035em }
.brandClosingKeywords p { margin:0;color:var(--brand-muted);font-size:13px;line-height:1.6 }
.brandClosingKeywords article.active h3::after { content:"";display:inline-block;width:8px;height:8px;margin-left:9px;border-radius:50%;background:var(--brand-signal);vertical-align:middle }
.brandClosingDefinition { max-width:34em;margin:clamp(46px,6vw,72px) 0 0;padding:28px 0 0;border-top:1px solid var(--brand-ink);font-size:clamp(24px,3.2vw,42px);font-weight:500;line-height:1.32;letter-spacing:-.035em }
.brandClosingBack { display:inline-flex;margin-top:32px;padding-bottom:6px;border-bottom:1px solid var(--brand-signal);color:var(--brand-muted);font-size:13px;font-weight:600 }
.brandClosingBack:hover { color:var(--brand-ink) }
.brandDefinition { display:flex;align-items:center;padding:clamp(100px,12vw,166px) 0;color:#fff;background:#0d0d0c }
.brandManualSectionTitle.light>p { color:#9b9b94 }
.brandManualSectionTitle.light h2 { color:#fff }
.brandDefinitionInner blockquote { max-width:20em;margin:clamp(70px,8vw,108px) 0 0;font-size:clamp(36px,5vw,66px);font-weight:500;line-height:1.14;letter-spacing:-.045em }
.brandDefinitionInner>a { display:inline-flex;margin-top:58px;padding-bottom:7px;border-bottom:1px solid var(--brand-signal);color:var(--brand-signal);font-weight:600 }
.brandPageControls { position:fixed;right:24px;bottom:24px;z-index:28;display:flex;align-items:center;gap:6px;padding:7px;border:1px solid rgba(17,17,15,.12);border-radius:999px;background:rgba(243,240,232,.88);box-shadow:0 10px 36px rgba(17,17,15,.15);backdrop-filter:blur(16px) }
.brandPageProgress { min-width:66px;padding:0 9px;color:var(--brand-muted);font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-align:center }
.brandPageProgress b { color:var(--brand-ink);font-size:12px }
.brandPageControls button { display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;color:var(--brand-ink);background:#fff;box-shadow:0 2px 9px rgba(17,17,15,.08);font-size:18px;cursor:pointer;transition:transform .2s ease,background .2s ease }
.brandPageControls button[data-brand-next] { background:var(--brand-signal) }
.brandPageControls button:hover:not(:disabled) { transform:translateY(-2px) }
.brandPageControls button:focus-visible { outline:3px solid var(--brand-signal);outline-offset:2px }
.brandPageControls button:disabled { opacity:.32;cursor:default;box-shadow:none }

@media (max-width:900px) {
  .brandManualHeroGrid { grid-template-columns:1fr }
  .brandManualHeroVisual { margin-top:10px }
  .brandApplicationSection>.wrap { grid-template-columns:1fr }
  .brandApplicationSection .brandApplicationVisual { margin-top:10px }
  .brandManualSplit,.brandPositioningInner,.brandWhoGrid,.brandBeliefGrid,.brandLogoGrid,.brandApplicationIntro { grid-template-columns:1fr }
  .brandEditorialGrid { grid-template-columns:1fr;gap:76px }
  .brandLogoVisual { position:static }
  .brandApplicationIntro .eyebrow,.brandApplicationIntro h2,.brandApplicationIntro>p:last-child { grid-column:1 }
  .brandApplicationIntro .eyebrow { margin:0 }
}
@media (max-width:650px) {
  .brandPanelStack { gap:8px;padding:8px }
  .brandPanelStack>section { min-height:auto;border-radius:20px }
  .brandManualHero,.brandManualSection,.brandPositioning,.brandLogoSection,.brandApplicationSection { padding:70px 0 }
  .brandManualHeroCopy h1 { font-size:clamp(62px,22vw,90px) }
  .brandManualSectionTitle h2 { white-space:normal }
  .brandManualSlogan { margin-top:34px }
  .brandManualHierarchy { align-items:flex-start;flex-direction:column;gap:9px }
  .brandManualHierarchy i { display:none }
  .brandScrollCue { margin-top:28px }
  .brandPageBack { margin-bottom:28px }
  .brandPageControls { right:12px;bottom:12px }
  .brandPageProgress { min-width:58px }
  .brandManualHeroVisual,.brandApplicationVisual,.brandLogoVisual { border-radius:14px }
  .brandCoreTable div { grid-template-columns:1fr;gap:6px }
  .brandClosingKeywords { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .brandPositioningCopy>strong { padding-left:18px;border-left-width:5px }
  .brandSymbolList article { grid-template-columns:44px 1fr }
  .brandKeywordGrid article { grid-template-columns:72px 1fr;gap:14px 20px;align-items:center }
  .brandKeywordGrid p { grid-column:2 }
  .brandClosingDefinition { font-size:clamp(24px,7.5vw,34px) }
  .brandDefinition { padding:82px 0 96px }
}
@media (prefers-reduced-motion:reduce) {
  .brandPanelStack>section,.brandScrollCue b,.brandPageControls button { transition:none!important }
  .brandMotionReady .brandPanelStack>section:not(.is-active),.brandMotionReady .brandPanelStack>section.is-past { transform:none }
}

/* Methods editorial hub and article template */
.srOnly { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
.methodsPage,.methodArticlePage { background:#f3f0e8 }
.methodsHero { display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:clamp(44px,7vw,96px);align-items:end;padding:clamp(68px,8vw,104px) 0 58px }
.methodsHero h1 { max-width:13em;margin:0;font-size:clamp(42px,4.6vw,64px);font-weight:400;line-height:1.02;letter-spacing:-.045em }
.methodsHeroIntro>p { margin:0 0 32px;color:#4c4b46;font-size:18px;line-height:1.8 }
.methodSearch { display:grid;grid-template-columns:1fr auto;align-items:center;border-bottom:1px solid var(--ink) }
.methodSearch input { min-width:0;padding:13px 0;border:0;outline:0;color:var(--ink);background:transparent;font-size:15px }
.methodSearch input::placeholder { color:#77756e }
.methodSearch span:last-child { font-size:24px }
.featuredMethod { display:grid;grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);min-height:520px;margin-bottom:clamp(82px,10vw,138px);overflow:hidden;border-radius:24px;color:#fff;background:#0d0d0c;box-shadow:0 18px 48px rgba(50,47,40,.16) }
.featuredMethodImage { min-height:520px;overflow:hidden }
.featuredMethodImage img { width:100%;height:100%;object-fit:cover;transition:transform .55s ease }
.featuredMethod:hover .featuredMethodImage img { transform:scale(1.02) }
.featuredMethodCopy { display:flex;flex-direction:column;justify-content:center;padding:clamp(36px,5vw,72px) }
.featuredMethodCopy .eyebrow { margin-top:36px;color:#b9b9b1 }
.featuredMethodCopy h2 { margin:0;font-size:clamp(36px,4.5vw,62px);font-weight:400;line-height:1.02;letter-spacing:-.045em }
.featuredMethodCopy>p:not(.eyebrow) { margin:28px 0 0;color:#c6c6bf;font-size:17px;line-height:1.75 }
.methodMeta { display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;color:#6a6963;font-size:12px;font-weight:600;letter-spacing:.03em }
.featuredMethod .methodMeta { color:#aaa9a2 }
.sourceBadge { display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;color:var(--ink);background:var(--acid);font-size:11px;font-weight:800;letter-spacing:.04em }
.textLink { display:inline-flex;align-items:center;gap:12px;width:max-content;margin-top:30px;padding-bottom:5px;border-bottom:1px solid currentColor;font-weight:700;transition:transform .2s ease,color .2s ease,border-color .2s ease }
.textLink:hover,.textLink:focus-visible { color:#718600;transform:translateY(-2px) }
.featuredMethod .textLink { color:var(--acid) }
.featuredMethod .textLink:hover,.featuredMethod .textLink:focus-visible { transform:translateY(-2px) }
.featuredMethod .textLink:focus-visible { outline:2px solid var(--acid);outline-offset:6px;border-bottom-color:transparent }
.methodArchive { background:#f3f0e8 }
.methodItem[hidden] { display:none!important }
.methodArchiveHead { display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:40px }
.methodArchiveHead h2 { margin:0;font-size:clamp(42px,5.6vw,74px);font-weight:400;line-height:1;letter-spacing:-.05em }
.methodArchiveHead>p { max-width:430px;margin:0;color:var(--muted) }
.methodFilters { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px }
.methodFilters button { display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 15px;border:0;border-radius:999px;color:#55554f;background:#f3f0e8;box-shadow:-4px -4px 9px rgba(255,255,255,.92),4px 4px 9px rgba(157,151,139,.22);cursor:pointer;font-size:13px;font-weight:550;transition:color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease }
.methodFilters button:hover { color:var(--ink);background:#f7f4ec;transform:translateY(-1px) }
.methodFilters button:focus-visible { outline:3px solid rgba(197,232,3,.6);outline-offset:2px }
.methodFilters button.active { color:var(--ink);background:#f3f0e8;box-shadow:inset -3px -3px 7px rgba(255,255,255,.88),inset 3px 3px 7px rgba(157,151,139,.25);transform:none }
.methodFilters button.active::before { content:"";width:6px;height:6px;border-radius:50%;background:var(--acid) }
.methodFilters button small { color:#85847d;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums }
.methodFilters button.active small { color:#595851 }
.methodList { border-top:1px solid var(--ink) }
.methodRow { display:grid;grid-template-columns:220px minmax(0,1fr) 48px;gap:clamp(24px,4vw,54px);align-items:center;min-height:210px;padding:24px 0;border-bottom:1px solid var(--line) }
.methodThumb { height:160px;padding:10px;overflow:hidden;border-radius:22px;background:#f3f0e8;box-shadow:-7px -7px 16px rgba(255,255,255,.94),7px 7px 16px rgba(157,151,139,.25) }
.methodThumb img { width:100%;height:100%;object-fit:cover;border-radius:14px;transition:transform .45s ease }
.methodThumb.trainingThumb img { object-fit:contain;padding:12px }
.methodRow:hover .methodThumb img { transform:scale(1.025) }
.methodRowCopy h3 { max-width:21em;margin:13px 0 10px;font-size:clamp(27px,3.1vw,43px);font-weight:400;line-height:1.08;letter-spacing:-.035em }
.methodRowCopy>p { max-width:52em;margin:0;color:var(--muted) }
.methodDate { color:#77766f;font-variant-numeric:tabular-nums }
.methodArrow { display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:#f3f0e8;box-shadow:-5px -5px 11px rgba(255,255,255,.92),5px 5px 11px rgba(157,151,139,.24);font-size:21px;transition:color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease }
.methodRow:hover .methodArrow { background:var(--acid);box-shadow:-4px -4px 10px rgba(255,255,255,.86),4px 4px 10px rgba(157,151,139,.22);transform:translateX(2px) }
.methodArrow:focus-visible { outline:3px solid rgba(197,232,3,.6);outline-offset:3px }
.methodPagination { display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:42px }
.methodPagination:empty { display:none }
.methodPagination button { min-width:44px;height:44px;padding:0 15px;border:0;border-radius:999px;color:#55554f;background:#f3f0e8;box-shadow:-4px -4px 9px rgba(255,255,255,.92),4px 4px 9px rgba(157,151,139,.22);cursor:pointer;font-size:13px;font-weight:700;transition:transform .18s ease,background .18s ease,box-shadow .18s ease }
.methodPagination button:hover:not(:disabled) { transform:translateY(-2px) }
.methodPagination button.active { color:var(--ink);background:var(--acid);box-shadow:inset -2px -2px 5px rgba(255,255,255,.48),inset 2px 2px 5px rgba(108,126,0,.18) }
.methodPagination button:disabled { opacity:.36;cursor:default;box-shadow:none }
.methodPagination button:focus-visible { outline:3px solid rgba(197,232,3,.6);outline-offset:3px }
.methodEmpty { padding:50px 0;margin:0;color:var(--muted);text-align:center }

.articleHero { padding:clamp(72px,9vw,118px) 0 54px }
.articleBack { display:inline-flex;margin-bottom:62px;color:var(--muted);font-size:13px;font-weight:700 }
.articleHero .methodMeta { margin-bottom:28px }
.articleHero h1 { max-width:13em;margin:0;font-size:clamp(52px,7.7vw,106px);font-weight:400;line-height:.94;letter-spacing:-.062em }
.articleDek { max-width:760px;margin:34px 0 0;color:#4c4b46;font-size:clamp(19px,2.1vw,25px);line-height:1.7 }
.articleByline { display:flex;flex-wrap:wrap;gap:9px 28px;margin-top:34px;color:#686761;font-size:13px }
.articleOutcome { display:grid;grid-template-columns:190px 1fr;gap:30px;max-width:850px;margin-top:54px;padding:24px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line) }
.articleOutcome strong { font-size:13px;font-weight:800;letter-spacing:.08em }
.articleOutcome ul { display:grid;gap:5px;margin:0;padding-left:20px;color:#44433e }
.articleCover { overflow:hidden;margin:0 0 clamp(34px,5vw,72px) }
.articleCover img { width:100%;max-height:760px;object-fit:cover }
.mobileContents { display:none }
.methodArticlePage .articleSection { padding-top:clamp(62px,8vw,100px);background:#fafaf8 }
.methodArticlePage .articleLayout { grid-template-columns:220px minmax(0,760px);justify-content:center;gap:clamp(44px,7vw,100px) }
.methodArticlePage .articleSide { top:96px }
.methodArticlePage .articleSide p { margin:0 0 10px;color:#88867f;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase }
.methodArticlePage .articleSide a { padding:9px 0;color:#595852;font-size:13px;font-weight:500;transition:color .18s ease }
.methodArticlePage .articleSide a:hover,
.methodArticlePage .articleSide a:focus-visible { color:var(--acid) }
.methodArticlePage .articleSide a:focus-visible { outline:2px solid rgba(197,232,3,.65);outline-offset:3px }
.methodArticlePage .articleBody { font-size:18px;line-height:1.9 }
.methodArticlePage .articleBody h2 { scroll-margin-top:100px;margin:100px 0 24px;font-size:clamp(36px,4.5vw,56px);font-weight:450;line-height:1.08;letter-spacing:-.04em }
.methodArticlePage .articleBody p,.methodArticlePage .articleBody li { color:#34332f }
.articleOpening { margin-top:0;font-size:23px;font-weight:500;line-height:1.65 }
.roleList { display:grid;gap:0;margin:34px 0;border-top:1px solid var(--ink) }
.roleList>div { display:grid;grid-template-columns:80px 180px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--line) }
.roleList span { color:#77756e;font-size:12px;font-weight:700 }
.roleList strong { font-size:17px }
.roleList p { margin:0;font-size:15px;line-height:1.65 }
.articleMedia { margin:50px 0 }
.articleMedia img { width:100%;background:#e4e0d7 }
.articleMedia figcaption { margin-top:11px;color:#76746d;font-size:12px;line-height:1.55 }
.methodArticlePage .articleBody blockquote { margin:42px 0;padding:27px 30px;border-left:5px solid var(--acid);background:#eeece5;font-size:23px;font-weight:650;line-height:1.55 }
.importedMethodPage .articleHero h1 { max-width:15em;font-size:clamp(48px,6.2vw,88px) }
.importedArticleSection { padding-top:40px }
.articleLayout.articleLayoutNoToc { grid-template-columns:minmax(0,760px);justify-content:center }
.importedArticle { min-width:0 }
.importedArticle img { width:100%;height:auto }
.importedArticle h2 { scroll-margin-top:100px;margin:82px 0 22px!important;font-size:clamp(32px,4vw,48px)!important;font-weight:500!important;line-height:1.12!important;letter-spacing:-.035em }
.importedArticle h3 { margin:46px 0 14px!important;font-size:25px!important;line-height:1.25!important }
.importedArticle p,.importedArticle li { font-size:18px;line-height:1.9 }
.importedArticle pre { max-width:100%;overflow:auto;white-space:pre-wrap }
.importedArticle section { max-width:100% }
.flowLine { display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:34px 0;padding:22px;background:#0d0d0c;color:#fff }
.flowLine span { padding:7px 10px;border:1px solid #4a4a46;font-size:13px;font-weight:650 }
.flowLine i { color:var(--acid);font-style:normal }
.articleNote,.articleWarning { margin:38px 0;padding:24px 26px;border-top:4px solid var(--acid);background:#eeece5 }
.articleWarning { color:#fff;background:#0d0d0c }
.articleNote strong,.articleWarning strong { display:block;margin-bottom:8px;font-size:17px }
.articleNote p,.articleWarning p { margin:0 }
.articleWarning p { color:#d0cfc8 }
.checkList { display:grid;gap:7px;padding-left:24px }
.promptBlock { position:relative;margin:36px 0;background:#0d0d0c;color:#f6f5ee }
.promptBlock button { position:absolute;top:14px;right:14px;padding:7px 10px;border:1px solid #74736e;color:var(--acid);background:#0d0d0c;cursor:pointer;font-size:12px;font-weight:700 }
.promptBlock pre { overflow:auto;margin:0;padding:62px 26px 28px;white-space:pre-wrap;font:14px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }
.articleSource { margin-top:84px;padding-top:24px;border-top:1px solid var(--ink) }
.articleSource p { margin:16px 0 0;color:var(--muted);font-size:14px;line-height:1.7 }
.relatedMethods { border-top:1px solid var(--line);background:#f3f0e8 }
.relatedMethods .textLink { margin:0 }
.relatedGrid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px }
.relatedGrid a { position:relative;display:flex;flex-direction:column;min-height:250px;padding:28px 78px 28px 28px;border-radius:24px;background:#f3f0e8;box-shadow:-8px -8px 18px rgba(255,255,255,.88),8px 8px 18px rgba(157,151,139,.23);transition:transform .2s ease,box-shadow .2s ease,background .2s ease }
.relatedGrid a::after { content:"→";position:absolute;right:26px;bottom:26px;display:grid;width:42px;height:42px;place-items:center;border-radius:50%;background:#f3f0e8;box-shadow:-4px -4px 9px rgba(255,255,255,.9),4px 4px 9px rgba(157,151,139,.25);font-size:18px;transition:transform .2s ease,background .2s ease }
.relatedGrid span { color:#77756e;font-size:12px;font-weight:700 }
.relatedGrid strong { margin:auto 0 20px;font-size:clamp(24px,2.2vw,31px);font-weight:500;line-height:1.2 }
.relatedGrid small { color:var(--muted);font-size:12px;font-weight:700 }
.relatedGrid a:hover { transform:translateY(-3px);background:#f7f4ec;box-shadow:-10px -10px 22px rgba(255,255,255,.92),11px 12px 22px rgba(157,151,139,.26) }
.relatedGrid a:hover::after { transform:translateX(3px);background:var(--acid) }
.relatedGrid a:focus-visible { outline:3px solid var(--acid);outline-offset:5px }

@media (max-width:980px) {
  .methodsHero,.featuredMethod { grid-template-columns:1fr }
  .methodsHero { align-items:start }
  .methodsHeroIntro { max-width:680px }
  .featuredMethodImage { min-height:420px }
  .methodArticlePage .articleLayout { grid-template-columns:minmax(0,760px) }
  .mobileContents { display:block;margin-bottom:30px;padding:0 20px;border:1px solid var(--line);background:#fafaf8 }
  .mobileContents summary { padding:14px 0;cursor:pointer;font-weight:700 }
  .mobileContents nav { display:grid;padding:0 0 16px }
  .mobileContents a { padding:6px 0;color:var(--muted);font-size:13px }
}

@media (max-width:720px) {
  .methodsHero { gap:28px;padding:52px 0 46px }
  .methodsHero h1 { font-size:clamp(40px,12vw,58px) }
  .featuredMethod { width:100%;min-height:0;margin-bottom:76px;border-radius:18px;box-shadow:0 12px 32px rgba(50,47,40,.15) }
  .featuredMethodImage { min-height:0;aspect-ratio:4/3 }
  .featuredMethodCopy { padding:32px 20px 38px }
  .featuredMethodCopy .eyebrow { margin-top:28px }
  .methodArchiveHead { display:block }
  .methodArchiveHead>p,.methodArchiveHead>.textLink { margin-top:16px }
  .methodFilters { flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px }
  .methodFilters button { flex:0 0 auto }
  .methodRow { grid-template-columns:110px minmax(0,1fr);gap:18px;min-height:0;padding:20px 0 }
  .methodThumb { height:92px;padding:7px;border-radius:15px;box-shadow:-4px -4px 10px rgba(255,255,255,.92),4px 4px 10px rgba(157,151,139,.23) }
  .methodThumb img { border-radius:9px }
  .methodRowCopy h3 { margin:8px 0 0;font-size:23px }
  .methodRowCopy>p { display:none }
  .methodArrow { display:none }
  .methodMeta { gap:5px 9px;font-size:10px }
  .methodRow .methodRead { display:none }
  .sourceBadge { padding:4px 6px;font-size:9px }
  .methodPagination { gap:7px;margin-top:30px }
  .methodPagination button { min-width:44px;height:44px;padding:0 12px;font-size:12px }
  .relatedGrid { grid-template-columns:1fr }
  .relatedGrid a { min-height:180px }
  .articleHero { padding-top:58px }
  .articleBack { margin-bottom:44px }
  .articleHero h1 { font-size:clamp(44px,12vw,60px) }
  .articleHero h1 br { display:none }
  .articleDek { margin-top:24px }
  .articleOutcome { grid-template-columns:1fr;gap:12px;margin-top:40px }
  .articleCover { width:100%;margin-bottom:30px }
  .articleCover img { aspect-ratio:4/3;object-fit:cover }
  .mobileContents { width:calc(100% - 32px) }
  .methodArticlePage .articleBody { font-size:17px;line-height:1.85 }
  .importedMethodPage .articleHero h1 { font-size:clamp(42px,11vw,58px) }
  .importedArticleSection { padding-top:18px }
  .importedArticle h2 { margin-top:68px!important;font-size:clamp(30px,9vw,40px)!important }
  .importedArticle h3 { font-size:23px!important }
  .importedArticle p,.importedArticle li { font-size:17px }
  .methodArticlePage .articleBody h2 { margin-top:74px }
  .articleOpening { font-size:20px }
  .roleList>div { grid-template-columns:60px 1fr;gap:8px 14px }
  .roleList p { grid-column:2 }
  .methodArticlePage .articleBody blockquote { padding:22px 20px;font-size:20px }
  .flowLine i { display:none }
  .flowLine span { flex:1 1 45%;text-align:center }
  .articleMedia { width:calc(100% + 32px);margin-left:-16px }
  .articleMedia figcaption { padding:0 16px }
  .relatedGrid strong { font-size:24px }
}

@media (hover:none) {
  .featuredMethod .textLink:active { transform:scale(1.06) }
}

@media (prefers-reduced-motion:reduce) {
  .featuredMethodImage img,.featuredMethod .textLink { transition:none }
}

/* Selected projects / client-facing portfolio */
.projectsPage { background:#f3f0e8 }
.projectsPage .siteHeader { background:rgba(243,240,232,.94) }
.projectsPage main { background:#f3f0e8 }
.projectsPage main>section { overflow:hidden }
.portfolioHero { padding:clamp(58px,7vw,88px) 0 clamp(46px,5vw,64px);background:#f3f0e8;border-bottom:1px solid var(--line) }
.portfolioHeroGrid { display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:clamp(44px,7vw,96px);align-items:end }
.portfolioHero h1 { max-width:12em;margin:0;font-size:clamp(42px,4.6vw,64px);font-weight:400;line-height:1.02;letter-spacing:-.045em }
.portfolioHeroNote { max-width:540px }
.portfolioHeroNote>p { margin:0;color:#454540;font-size:18px;line-height:1.8 }
.portfolioScope { display:flex;flex-wrap:wrap;gap:8px;margin-top:24px }
.portfolioScope span,.portfolioTags span { padding:7px 11px;border:0;border-radius:999px;background:rgba(17,17,15,.07);font-size:11px;font-weight:700;letter-spacing:.04em }

.portfolioCase { padding:clamp(58px,6vw,86px) 0;border-top:1px solid var(--line);background:#f3f0e8 }
.portfolioCaseGrid { display:grid;grid-template-columns:minmax(0,1.04fr) minmax(360px,.96fr);gap:clamp(42px,6vw,82px);align-items:center }
.portfolioMedia { margin:0;min-width:0 }
.portfolioMedia img,.portfolioMedia video { display:block;width:100%;overflow:hidden;border-radius:22px;background:#dedbd2;box-shadow:0 10px 30px rgba(17,17,15,.1) }
.systemMedia img { aspect-ratio:4/3;object-fit:cover;object-position:left top }
.systemMedia video { aspect-ratio:16/9;object-fit:cover;background:#111 }
.portfolioMedia figcaption { display:flex;justify-content:space-between;gap:16px;margin-top:12px;padding:0 4px;color:#68665f;font-size:11px;letter-spacing:.05em }
.portfolioMedia figcaption span { color:var(--muted);font:600 10px/1 ui-monospace,monospace;letter-spacing:.12em }
.portfolioMedia figcaption strong { font-weight:600 }
.portfolioCaseMeta { display:flex;justify-content:space-between;gap:20px;padding-bottom:13px;border-bottom:1px solid var(--line);color:#68665f;font:600 10px/1 ui-monospace,monospace;letter-spacing:.13em }
.portfolioCaseCopy h2 { max-width:16ch;margin:clamp(28px,3vw,42px) 0 22px;font-size:clamp(36px,3.55vw,50px);font-weight:300;line-height:1.04;letter-spacing:-.04em }
.portfolioCaseLead { max-width:680px;margin:0;color:#565650;font-size:clamp(17px,1.35vw,21px);line-height:1.76 }
.portfolioFacts { display:grid;gap:0;margin:clamp(30px,4vw,48px) 0 0;border-top:1px solid var(--line) }
.portfolioFacts div { display:grid;grid-template-columns:118px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line) }
.portfolioFacts dt { color:#74716b;font-size:11px;font-weight:700 }
.portfolioFacts dd { margin:0;font-size:14px;line-height:1.65 }
.portfolioTags { display:flex;flex-wrap:wrap;gap:7px;margin-top:27px }
.portfolioLink,.portfolioContact { display:inline-flex;align-items:center;justify-content:space-between;gap:36px;margin-top:34px;padding:13px 0;border-bottom:2px solid var(--ink);font-size:14px;font-weight:700;transition:color .2s ease,border-color .2s ease,transform .2s ease }
.portfolioLink b,.portfolioContact b { color:#7b9200;font-size:20px;transition:color .2s ease,transform .22s cubic-bezier(.22,1,.36,1) }
.portfolioLink:hover,.portfolioLink:focus-visible,.portfolioContact:hover,.portfolioContact:focus-visible { color:#718600;border-bottom-color:var(--acid);transform:translateY(-2px) }
.portfolioLink:hover b,.portfolioLink:focus-visible b,.portfolioContact:hover b,.portfolioContact:focus-visible b { color:#718600;transform:translateX(6px) }
.portfolioLink:focus-visible,.portfolioContact:focus-visible { outline:2px solid var(--acid);outline-offset:6px }

.portfolioCaseFilm { color:#11110f;background:#e7e3da;border-top:0 }
.filmGrid { grid-template-columns:minmax(360px,.76fr) minmax(0,1.24fr) }
.portfolioCaseFilm .portfolioCaseMeta { color:#68665f;border-color:var(--line) }
.portfolioCaseFilm .portfolioCaseLead { color:#565650 }
.filmMedia { padding:10px 10px 13px;border-radius:28px;color:#f3f0e8;background:#111;box-shadow:0 16px 42px rgba(26,23,18,.2) }
.filmMedia video { display:block;aspect-ratio:16/9;object-fit:cover;border-radius:18px;background:#171717;box-shadow:none }
.filmMedia figcaption { margin:12px 5px 0 }
.portfolioCaseFilm .portfolioMedia figcaption { color:#f3f0e8;border-color:rgba(255,255,255,.3) }
.portfolioCaseFilm .portfolioMedia figcaption span { color:#aaa }
.lightFacts { border-color:var(--line) }
.lightFacts div { border-color:var(--line) }
.lightFacts dt { color:#74716b }

.portfolioCaseVisual { background:#e9e5dc }
.portfolioVisualIntro { display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:clamp(42px,7vw,96px);align-items:end;margin-bottom:clamp(42px,5vw,68px) }
.portfolioVisualFacts { min-width:0 }
.portfolioVisualFacts .portfolioFacts { margin-top:0 }
.posterGallery { columns:3 280px;column-gap:18px }
.posterGallery figure { break-inside:avoid;margin:0 0 14px;overflow:hidden;border-radius:18px;background:#f3f0e8;box-shadow:0 8px 24px rgba(36,31,22,.1);cursor:zoom-in;transition:transform .22s ease,box-shadow .22s ease }
.posterGallery figure:hover { transform:translateY(-3px);box-shadow:0 14px 34px rgba(36,31,22,.17) }
.posterGallery figure:focus-visible { outline:3px solid var(--acid);outline-offset:4px }
.posterGallery img { display:block;width:100%;height:auto }
.posterGallery figcaption { display:flex;justify-content:space-between;gap:12px;padding:11px 13px 12px;color:#656159;font-size:11px }
.posterGallery figcaption span { font:650 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em }
.posterGallery figcaption strong { font-weight:650 }

.posterLightbox { width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;color:#f5f3ed;background:rgba(5,5,5,.94) }
.posterLightbox::backdrop { background:rgba(5,5,5,.82);backdrop-filter:blur(12px) }
.posterLightboxStage { display:grid;grid-template-columns:64px minmax(0,1fr) 64px;gap:clamp(12px,2vw,28px);align-items:center;width:100%;height:100%;padding:clamp(62px,7vh,84px) clamp(18px,3vw,46px) 28px }
.posterLightboxStage figure { display:grid;grid-template-rows:minmax(0,1fr) auto;gap:14px;min-width:0;height:100%;margin:0 }
.posterLightboxStage img { display:block;max-width:100%;max-height:calc(100dvh - 142px);margin:auto;object-fit:contain;box-shadow:0 18px 60px rgba(0,0,0,.5) }
.posterLightboxStage figcaption { display:flex;justify-content:space-between;gap:20px;width:min(100%,900px);margin:auto;color:#d5d3cc;font-size:12px;letter-spacing:.04em }
.posterLightboxStage figcaption span { color:#99978f;font:600 10px/1 ui-monospace,monospace;letter-spacing:.14em }
.posterLightboxStage figcaption strong { font-weight:600 }
.posterLightboxClose,.posterLightboxNav { border:1px solid rgba(255,255,255,.2);color:#f5f3ed;background:rgba(255,255,255,.07);cursor:pointer }
.posterLightboxClose:hover,.posterLightboxNav:hover { color:#111;background:var(--acid);border-color:var(--acid) }
.posterLightboxClose:focus-visible,.posterLightboxNav:focus-visible { outline:3px solid var(--acid);outline-offset:3px }
.posterLightboxClose { position:fixed;top:20px;right:24px;z-index:2;width:44px;height:44px;border-radius:50%;font-size:27px;line-height:1 }
.posterLightboxNav { width:54px;height:54px;border-radius:50%;font-size:22px }

.portfolioClosing { padding:clamp(68px,7vw,96px) 0;color:#11110f;background:#f3f0e8;border-top:1px solid var(--line) }
.portfolioClosingGrid { display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(54px,8vw,120px);align-items:end }
.portfolioClosing h2 { max-width:15ch;margin:0;font-size:clamp(44px,4.8vw,64px);font-weight:300;line-height:1;letter-spacing:-.045em }
.portfolioClosing .eyebrow { color:#74716b }
.portfolioClosingCopy p { margin:0;color:#5b5b55;font-size:17px;line-height:1.8 }
.portfolioContact {
  width:min(100%,360px);
  min-height:58px;
  margin-top:30px;
  padding:0 9px 0 20px;
  border:1px solid #11110f;
  border-radius:999px;
  color:#f3f0e8;
  background:#11110f;
  box-shadow:0 12px 30px rgba(26,23,18,.16);
  font-size:14px;
  letter-spacing:.01em;
}
.portfolioContact b {
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:50%;
  color:#11110f;
  background:var(--acid);
  font-size:19px;
}
.portfolioContact:hover,.portfolioContact:focus-visible {
  color:#fff;
  border-color:#282824;
  background:#282824;
  box-shadow:0 16px 38px rgba(26,23,18,.22);
  transform:translateY(-3px);
}
.portfolioContact:hover b,.portfolioContact:focus-visible b { color:#11110f;transform:translateX(3px) }
.portfolioContact:focus-visible { outline:3px solid var(--acid);outline-offset:4px }
.projectsPage .siteFooter { color:#11110f;background:#f3f0e8;border-color:var(--line) }
.projectsPage .footerBottom { color:var(--muted);border-color:var(--line) }

@media (max-width:980px) {
  .portfolioHero { min-height:auto }
  .portfolioHeroGrid,.portfolioCaseGrid,.filmGrid,.portfolioClosingGrid { grid-template-columns:1fr }
  .portfolioHeroGrid { align-items:start }
  .portfolioHeroNote { max-width:620px }
  .portfolioCaseCopy { max-width:780px }
  .filmGrid .portfolioCaseCopy { order:2 }
  .filmGrid .filmMedia { order:1 }
  .portfolioVisualIntro { grid-template-columns:1fr;align-items:start }
  .posterGallery { columns:2 260px }
}

@media (max-width:720px) {
  .portfolioHero { padding:48px 0 40px }
  .portfolioHeroGrid { gap:26px }
  .portfolioHero h1 { font-size:clamp(40px,12vw,58px) }
  .portfolioHeroNote>p { font-size:16px;line-height:1.72 }
  .portfolioScope { margin-top:18px }
  .portfolioCaseCopy h2 { font-size:clamp(37px,9.6vw,48px) }
  .portfolioCase { padding:48px 0 }
  .portfolioCaseGrid { gap:38px }
  .portfolioMedia figcaption { display:grid }
  .portfolioFacts div { grid-template-columns:1fr;gap:6px }
  .portfolioVisualIntro { gap:26px;margin-bottom:34px }
  .posterGallery { columns:1;column-gap:0 }
  .posterGallery figure { margin-bottom:14px;border-radius:14px }
  .posterGallery figcaption { display:flex;gap:10px;padding:10px 12px 12px;font-size:11px }
  .posterLightboxStage { grid-template-columns:1fr;padding:64px 14px 74px }
  .posterLightboxStage img { max-height:calc(100dvh - 172px) }
  .posterLightboxNav { position:fixed;bottom:14px;z-index:2;width:46px;height:46px }
  .posterLightboxPrev { left:calc(50% - 56px) }
  .posterLightboxNext { right:calc(50% - 56px) }
  .posterLightboxClose { top:12px;right:14px }
  .portfolioClosing h2 { font-size:clamp(42px,11vw,52px) }
  .portfolioClosingCopy p { font-size:16px }
  .portfolioContact { width:100%;min-height:56px;padding-left:17px }
}

/* Complete light / full-black theme coverage for late page-specific styles */
html[data-theme="dark"] .libraryPage,
html[data-theme="dark"] .libraryHero,
html[data-theme="dark"] .libraryArchive,
html[data-theme="dark"] .methodsPage,
html[data-theme="dark"] .methodArticlePage,
html[data-theme="dark"] .methodArchive { color:#f3f3ee;background:#050505 }
html[data-theme="dark"] .libraryPage .siteHeader,
html[data-theme="dark"] .projectsPage .siteHeader,
html[data-theme="dark"] .brandManualPage .siteHeader { color:#f3f3ee;background:rgba(5,5,5,.92);border-bottom-color:rgba(255,255,255,.12) }
html[data-theme="dark"] .libraryPage .nav a { color:#c9c9c3 }
html[data-theme="dark"] .libraryPage .nav a:hover,
html[data-theme="dark"] .libraryPage .nav a[aria-current="page"] { color:#fff }
html[data-theme="dark"] .librarySections { border-color:rgba(255,255,255,.1);background:#10100e;box-shadow:inset 0 1px 2px rgba(0,0,0,.5) }
html[data-theme="dark"] .librarySection { color:#aaa9a2;background:transparent }
html[data-theme="dark"] .librarySection:hover { color:#f3f3ee;background:rgba(255,255,255,.07) }
html[data-theme="dark"] .librarySection.active { color:#0b0b0b;background:var(--acid) }
html[data-theme="dark"] .librarySection.active>small { color:#3d3d36 }
html[data-theme="dark"] .librarySearch input { border-bottom-color:rgba(255,255,255,.34) }
html[data-theme="dark"] .libraryCardCaption,
html[data-theme="dark"] .libraryArchiveHead h2 { color:#f3f3ee }
html[data-theme="dark"] .libraryCardCaption small,
html[data-theme="dark"] .libraryResultCount { color:#8d8d86 }
html[data-theme="dark"] .imageCard:hover .libraryCardCaption small,
html[data-theme="dark"] .imageCard:focus-visible .libraryCardCaption small,
html[data-theme="dark"] .videoCard:hover .libraryCardCaption small,
html[data-theme="dark"] .videoCard:focus-visible .libraryCardCaption small { color:var(--acid);border-bottom-color:var(--acid) }
html[data-theme="dark"] .methodsHeroIntro>p,
html[data-theme="dark"] .articleDek,
html[data-theme="dark"] .articleOutcome ul { color:#b8b8b1 }
html[data-theme="dark"] .methodFilters button,
html[data-theme="dark"] .methodFilters button.active,
html[data-theme="dark"] .methodThumb,
html[data-theme="dark"] .methodArrow,
html[data-theme="dark"] .methodPagination button { color:#d2d2cc;background:#11110f;box-shadow:-4px -4px 10px rgba(255,255,255,.025),5px 6px 13px rgba(0,0,0,.55) }
html[data-theme="dark"] .methodFilters button:hover,
html[data-theme="dark"] .methodRow:hover .methodArrow,
html[data-theme="dark"] .methodPagination button.active { color:#0b0b0b;background:var(--acid) }
html[data-theme="dark"] .sourceBadge { color:#0b0b0b }
html[data-theme="dark"] .trainingPage {
  --training-page:#050505;
  --training-card:#151513;
  --training-text:#f3f3ee;
  --training-muted:#aaa9a2;
  --training-border:rgba(255,255,255,.06);
  --training-shadow:-8px -8px 18px rgba(255,255,255,.035),10px 12px 26px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.045);
  color:#f3f3ee;
  background:#050505;
}
html[data-theme="dark"] .trainingShelf { color:var(--training-text);background:var(--training-page) }
html[data-theme="dark"] .trainingHero { color:var(--training-text);background:var(--training-page) }
html[data-theme="dark"] .trainingDeckSide { color:var(--training-text);border-color:rgba(255,255,255,.08);background:rgba(20,20,18,.88);box-shadow:-4px -4px 10px rgba(255,255,255,.025),5px 6px 13px rgba(0,0,0,.55) }
html[data-theme="dark"] .trainingDeckSide:not(:disabled):hover,
html[data-theme="dark"] .trainingDeckSide:focus-visible { color:#0b0b0b;background:var(--acid) }
html[data-theme="dark"] .trainingDeckFeatured,
html[data-theme="dark"] .trainingDeckCard:hover,
html[data-theme="dark"] .trainingDeckCard:focus-visible { box-shadow:-7px -7px 16px rgba(255,255,255,.05),13px 17px 30px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.38) }
html[data-theme="dark"] .trainingDeckLocked:hover { box-shadow:0 0 0 1px rgba(197,232,3,.24),0 18px 42px rgba(0,0,0,.66),0 0 32px rgba(197,232,3,.22),inset 0 1px 0 rgba(255,255,255,.42) }
html[data-theme="dark"] .trainingJourneyCard:hover,
html[data-theme="dark"] .trainingJourneyCard:focus-visible {
  color:#0b0b0b;
  box-shadow:-7px -7px 16px rgba(255,255,255,.08),13px 17px 30px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.55);
}
html[data-theme="dark"] .methodArticlePage .articleSection,
html[data-theme="dark"] .mobileContents { background:#090908 }
html[data-theme="dark"] .methodArticlePage .articleBody p,
html[data-theme="dark"] .methodArticlePage .articleBody li,
html[data-theme="dark"] .methodArticlePage .articleSide a { color:#c4c4bd }
html[data-theme="dark"] .methodArticlePage .articleSide a:hover,
html[data-theme="dark"] .methodArticlePage .articleSide a:focus-visible { color:var(--acid) }
html[data-theme="dark"] .methodArticlePage .articleBody blockquote,
html[data-theme="dark"] .articleNote { color:#f3f3ee;background:#161613 }
html[data-theme="dark"] .importedArticle { color:#c4c4bd }
html[data-theme="dark"] .importedArticle p,
html[data-theme="dark"] .importedArticle li,
html[data-theme="dark"] .importedArticle td,
html[data-theme="dark"] .importedArticle th { color:#c4c4bd!important }
html[data-theme="dark"] .importedArticle h2,
html[data-theme="dark"] .importedArticle h3,
html[data-theme="dark"] .importedArticle h4,
html[data-theme="dark"] .importedArticle strong { color:#f3f3ee!important }
html[data-theme="dark"] .importedArticle [style*="background:#f"],
html[data-theme="dark"] .importedArticle [style*="background:#fff"] { color:#c4c4bd!important;background:#131311!important;border-color:rgba(255,255,255,.16)!important }
html[data-theme="dark"] .importedArticle table,
html[data-theme="dark"] .importedArticle tr,
html[data-theme="dark"] .importedArticle td,
html[data-theme="dark"] .importedArticle th { border-color:rgba(255,255,255,.16)!important }
html[data-theme="dark"] .relatedMethods { background:#0d0d0b }
html[data-theme="dark"] .relatedGrid a,
html[data-theme="dark"] .relatedGrid a::after { background:#11110f;box-shadow:-6px -6px 14px rgba(255,255,255,.025),7px 8px 16px rgba(0,0,0,.62) }
html[data-theme="dark"] .relatedGrid a:hover { background:#151512 }
html[data-theme="dark"] .relatedGrid a:hover::after { color:#090908;background:var(--acid) }

html[data-theme="dark"] .aboutPage {
  --about-surface:#090908;
  --about-shadow-light:rgba(255,255,255,.025);
  --about-shadow-dark:rgba(0,0,0,.7);
  color:#f3f3ee;
  background:#050505;
}
html[data-theme="dark"] .aboutMinimalLead,
html[data-theme="dark"] .aboutMinimalBelief span { color:#c5c5be }
html[data-theme="dark"] .aboutMinimalAreas,
html[data-theme="dark"] .aboutExploreKicker,
html[data-theme="dark"] .aboutContactSleeveMeta { color:#8d8d86 }
html[data-theme="dark"] .aboutReturnLink { color:#c5c5be }
html[data-theme="dark"] .aboutExploreCard:hover,
html[data-theme="dark"] .aboutExploreCard:focus-visible { z-index:1;box-shadow:-16px -18px 34px var(--about-shadow-light),16px 20px 36px rgba(157,151,139,.4) }
html[data-theme="dark"] .officialAccountDialog {
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 1px rgba(255,255,255,.035),0 0 38px rgba(255,255,255,.12),0 34px 96px rgba(0,0,0,.82);
}
html[data-theme="dark"] .officialAccountDialog::backdrop { background:rgba(0,0,0,.72);backdrop-filter:blur(9px) }
html[data-theme="dark"] .officialAccountTop { border-bottom-color:rgba(255,255,255,.11) }
html[data-theme="dark"] .officialAccountClose { border-color:rgba(255,255,255,.15) }
html[data-theme="dark"] .officialAccountClose:hover { background:rgba(255,255,255,.08) }

html[data-theme="dark"] .brandManualPage {
  --brand-paper:#090908;
  --brand-shell:#050505;
  --brand-ink:#f3f3ee;
  --brand-muted:#aaa9a2;
  --brand-line:rgba(255,255,255,.14);
}
html[data-theme="dark"] .brandPanelStack>section { box-shadow:0 10px 34px rgba(0,0,0,.55) }
html[data-theme="dark"] .brandApplicationSection { background:var(--brand-paper) }
html[data-theme="dark"] .brandEditorialBlock>p,
html[data-theme="dark"] .brandLogoIntro,
html[data-theme="dark"] .brandKeywordGrid p,
html[data-theme="dark"] .brandWhoLead { color:#c2c2bc }
html[data-theme="dark"] .brandManualSectionTitle>span,
html[data-theme="dark"] .brandScrollCue b { color:#0b0b0b }
html[data-theme="dark"] .brandPageControls {
  border-color:rgba(255,255,255,.15);
  background:rgba(20,20,18,.9);
  box-shadow:0 10px 36px rgba(0,0,0,.62),0 0 20px rgba(255,255,255,.045);
}
html[data-theme="dark"] .brandPageProgress { color:#aaa9a2 }
html[data-theme="dark"] .brandPageProgress b { color:#f3f3ee }
html[data-theme="dark"] .brandPageControls button { color:#f3f3ee;background:#292925;box-shadow:0 2px 10px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.08) }
html[data-theme="dark"] .brandPageControls button[data-brand-next] { color:#0b0b0b;background:var(--brand-signal) }

html[data-theme="dark"] .visualReferencePage,
html[data-theme="dark"] .referenceHero { color:#f3f3ee;background:#050505 }
html[data-theme="dark"] .referenceArchive { color:#f3f3ee;background:#090908 }
html[data-theme="dark"] .referenceHero>.wrap>p:not(.eyebrow),
html[data-theme="dark"] .referenceStats span,
html[data-theme="dark"] .referenceHead>div>p:last-child,
html[data-theme="dark"] .referenceResultLine p,
html[data-theme="dark"] .referenceSearch>span,
html[data-theme="dark"] .referencePageSize { color:#aaa9a2 }
html[data-theme="dark"] .referenceSearch input { color:#f3f3ee;border-bottom-color:rgba(255,255,255,.34) }
html[data-theme="dark"] .referenceHeroSearch svg { left:14px;stroke:var(--acid) }
html[data-theme="dark"] .referenceHeroSearch input { height:40px;padding:0 16px 0 40px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#f3f3ee;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 7px 20px rgba(0,0,0,.22);appearance:none }
html[data-theme="dark"] .referenceHeroSearch input::placeholder { color:#85857f }
html[data-theme="dark"] .referenceHeroSearch input:hover { border-color:rgba(255,255,255,.24);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045)) }
html[data-theme="dark"] .referenceHeroSearch input:focus { border-color:rgba(197,232,3,.72);outline:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 3px rgba(197,232,3,.1),0 9px 24px rgba(0,0,0,.3) }
html[data-theme="dark"] .referencePageSize select,
html[data-theme="dark"] .referenceTableWrap { color:#f3f3ee;background:#11110f;border-color:rgba(255,255,255,.14) }
html[data-theme="dark"] .referenceGroups,
html[data-theme="dark"] .referenceSheetNav,
html[data-theme="dark"] .referenceResultLine { border-color:rgba(255,255,255,.14) }
html[data-theme="dark"] .referenceGroups button,
html[data-theme="dark"] .referenceSheetNav button { color:#aaa9a2;border-color:rgba(255,255,255,.14) }
html[data-theme="dark"] .referenceGroups button.active,
html[data-theme="dark"] .referenceGroups button:hover { color:#0b0b0b;border-color:var(--acid);background:var(--acid) }
html[data-theme="dark"] .referenceSheetNav button.active { color:#f3f3ee;background:linear-gradient(90deg,rgba(197,232,3,.16),transparent) }
html[data-theme="dark"] .referenceTable th { color:#d5d5cf;background:#191916;border-color:rgba(255,255,255,.14) }
html[data-theme="dark"] .referenceTable td { color:#c4c4bd;background:#11110f;border-color:rgba(255,255,255,.1) }
html[data-theme="dark"] .referenceTable tr:hover td { background:#171713 }
html[data-theme="dark"] .referenceHead>a { color:#f3f3ee;border-color:#f3f3ee }

html[data-theme="dark"] .projectsPage,
html[data-theme="dark"] .projectsPage main { color:#f3f3ee;background:#050505 }
html[data-theme="dark"] .portfolioHero,
html[data-theme="dark"] .portfolioCase,
html[data-theme="dark"] .portfolioClosing,
html[data-theme="dark"] .projectsPage .siteFooter { color:#f3f3ee;background:#090908 }
html[data-theme="dark"] .portfolioHeroNote>p,
html[data-theme="dark"] .portfolioCaseLead,
html[data-theme="dark"] .portfolioClosingCopy p { color:#bcbcb5 }
html[data-theme="dark"] .portfolioCaseVisual { background:#11110f }
html[data-theme="dark"] .portfolioCaseFilm { color:#f3f3ee;background:#090908 }
html[data-theme="dark"] .portfolioCaseFilm .portfolioCaseMeta { color:#9d9d98;border-color:rgba(255,255,255,.22) }
html[data-theme="dark"] .portfolioCaseFilm .portfolioCaseLead { color:#c4c4be }
html[data-theme="dark"] .portfolioCaseFilm .lightFacts,
html[data-theme="dark"] .portfolioCaseFilm .lightFacts div { border-color:rgba(255,255,255,.18) }
html[data-theme="dark"] .portfolioCaseFilm .lightFacts dt { color:#aaa }
html[data-theme="dark"] .filmMedia { background:#141412;box-shadow:0 16px 42px rgba(0,0,0,.45) }
html[data-theme="dark"] .posterGallery figure { background:#191916 }
html[data-theme="dark"] .posterGallery figcaption { color:#bcbcb5 }
html[data-theme="dark"] .portfolioContact {
  color:#11110f;
  border-color:var(--acid);
  background:var(--acid);
  box-shadow:0 0 0 1px rgba(197,232,3,.16),0 14px 38px rgba(197,232,3,.12);
}
html[data-theme="dark"] .portfolioContact b { color:var(--acid);background:#11110f }
html[data-theme="dark"] .portfolioContact:hover,
html[data-theme="dark"] .portfolioContact:focus-visible {
  color:#11110f;
  border-color:#d4f424;
  background:#d4f424;
  box-shadow:0 0 0 1px rgba(212,244,36,.28),0 18px 46px rgba(197,232,3,.2);
}
html[data-theme="dark"] .portfolioContact:hover b,
html[data-theme="dark"] .portfolioContact:focus-visible b { color:#d4f424;background:#11110f }

@media (max-width:720px) {
  .siteHeader,
  .homePage .siteHeader,
  .libraryPage .siteHeader { gap:12px }
  .siteHeader .brand { flex:0 0 auto }
  .siteHeader .nav,
  .homePage .nav,
  .libraryPage .nav { flex:1 1 auto;justify-content:flex-start;gap:0;min-width:0;overflow-x:auto;scrollbar-width:none }
  .siteHeader .nav::-webkit-scrollbar { display:none }
  .siteHeader .nav a,
  .homePage .nav a,
  .libraryPage .nav a { flex:0 0 auto;padding:15px 5px;font-size:12px }
}

/* One search language across the live AiFan Lab pages. */
.siteSearch {
  position:relative;
  display:block;
  width:100%;
  max-width:420px;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  color:#f3f3ee;
  background:transparent;
  font:inherit;
  letter-spacing:0;
  text-transform:none;
}
.siteSearch svg {
  position:absolute;
  left:15px;
  top:50%;
  z-index:1;
  width:16px;
  height:16px;
  fill:none;
  stroke:var(--acid);
  stroke-width:1.8;
  stroke-linecap:round;
  transform:translateY(-50%);
  pointer-events:none;
}
.siteSearch input[type="search"] {
  display:block;
  width:100%;
  height:42px;
  min-height:42px;
  margin:0;
  padding:0 16px 0 42px;
  border:1px solid #3a3a36;
  border-radius:999px;
  outline:0;
  color:#f3f3ee;
  background:linear-gradient(180deg,#171715,#10100f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 7px 20px rgba(0,0,0,.14);
  font:400 14px/1 inherit;
  letter-spacing:0;
  appearance:none;
  transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease;
}
.siteSearch input[type="search"]::placeholder { color:#777771;opacity:1 }
.siteSearch input[type="search"]:hover { border-color:#55554f;background:linear-gradient(180deg,#1c1c19,#121210) }
.siteSearch input[type="search"]:focus {
  border-color:rgba(197,232,3,.76);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 3px rgba(197,232,3,.12),0 9px 24px rgba(0,0,0,.2);
}
.siteSearch input[type="search"]::-webkit-search-cancel-button { filter:invert(1);opacity:.55 }

/* Keep the Inspiration section controls fixed between its two pages. */
.referenceHero { padding:28px 0 30px }
.referenceArchiveHead { padding-bottom:22px }
.referenceArchiveHead h1 {
  margin:0;
  color:var(--ink);
  font-size:clamp(28px,3vw,38px);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.035em;
  white-space:nowrap;
}
.referenceArchiveHead .siteSearch { width:100%;max-width:none }
.referenceHeroIntro {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:48px;
  align-items:end;
  padding-top:24px;
}
.referenceHeroIntro>div:first-child { max-width:760px }
.referenceHeroIntro .eyebrow { margin:0 0 10px }
.referenceHeroIntro>div:first-child>p:last-child { margin:0;color:#52514b;font-size:16px;line-height:1.65 }
.referenceHeroIntro .referenceStats { gap:14px 28px;margin:0;padding:0;border:0 }
.referenceHeroIntro .referenceStats span { font-size:12px }
.referenceHeroIntro .referenceStats strong { margin-right:6px;font-size:22px }

html[data-theme="dark"] .referenceArchiveHead h1 { color:#f3f3ee }
html[data-theme="dark"] .referenceHeroIntro>div:first-child>p:last-child { color:#aaa9a2 }

@media (max-width:650px) {
  .referenceHero { padding:24px 0 26px }
  .referenceArchiveHead { padding-bottom:20px }
  .referenceArchiveHead h1 { font-size:30px }
  .referenceHeroIntro { grid-template-columns:1fr;gap:18px;padding-top:20px }
  .referenceHeroIntro>div:first-child>p:last-child { font-size:15px;line-height:1.6 }
  .referenceHeroIntro .referenceStats { display:grid;grid-template-columns:repeat(3,1fr);gap:10px }
  .referenceHeroIntro .referenceStats strong { font-size:20px }
}