:root {
  --tanco-material: rgb(255 240 220 / 82%);
  --tanco-material-line: rgb(53 31 88 / 18%);
  --tanco-luminous-plum: #82406f;
  --tanco-luminous-plum-deep: #4c2d73;
  --tanco-luminous-magenta: #eb5b78;
  --tanco-luminous-teal: #62cfc2;
  --tanco-luminous-sun: #f3b82f;
  --tanco-luminous-cream: #fff7e8;
  --tanco-motion-x: -6%;
  --tanco-motion-y: -3%;
  --tanco-motion-scale: .96;
  --tanco-motion-opacity: .14;
}

@view-transition { navigation: auto; }

::view-transition-group(root) {
  animation-duration: .42s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  background: #4c2d73;
}
::view-transition-old(root) { animation: tanco-page-out .42s both; }
::view-transition-new(root) { animation: tanco-page-in .42s both; }

@keyframes tanco-page-out {
  to { transform: translate3d(-1.5%, 0, 0) scale(.996); }
}
@keyframes tanco-page-in {
  from { clip-path: inset(0 0 0 12%); transform: translate3d(1.5%, 0, 0) scale(1.004); }
  to { clip-path: inset(0); transform: translate3d(0, 0, 0) scale(1); }
}

html {
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

::selection { color: #351f58; background: #efad37; }

:where(h1, h2, h3) {
  font-optical-sizing: auto;
  text-wrap: balance;
}

:where(a, button, summary) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:where(a, button, summary):active { transform: scale(.97); }

/* Apple-style tonal hierarchy: deep surfaces stay recognisably TANCO purple,
   but never collapse to near-black. The same six tokens cover every route. */
:where(.works-page, .case-page) {
  --plum: #6f285f;
  --plum-deep: var(--tanco-luminous-plum-deep);
}

.works-page .hero {
  background:
    radial-gradient(circle at 16% 14%, rgb(243 184 47 / 18%), transparent 31%),
    linear-gradient(118deg, var(--tanco-luminous-plum-deep), var(--tanco-luminous-plum) 72%);
}

:where(body[data-page="lab"], body[data-page="product"], body[data-page="checkout"]) {
  --plum: #6f285f;
  --deep: var(--tanco-luminous-plum-deep);
}

body[data-page="lab"] .lab-hero {
  background:
    radial-gradient(circle at 78% 22%, rgb(235 91 120 / 42%), transparent 30%),
    linear-gradient(122deg, var(--tanco-luminous-plum-deep), var(--tanco-luminous-plum) 72%);
}
body[data-page="lab"] .lab-hero .kicker { color: #f3b82f; }
body[data-page="lab"] .featured .kicker { color: #9a6500; }
body[data-page="lab"] .access .kicker { color: #a02f52; }
body[data-page="lab"] .catalog .kicker { color: #176a66; }
body[data-page="lab"] .hero-note { border-left-color: #f3b82f; }
body[data-page="lab"] .hero-note > p,
body[data-page="lab"] .hero-note dt { color: rgb(255 247 232 / 76%); }
body[data-page="lab"] .hero-note dd { color: #fff7e8; }

body[data-chromatic-current="studio"] {
  --plum: #6f285f;
  --plum-deep: var(--tanco-luminous-plum-deep);
  --plum-bright: #a94884;
}

body[data-chromatic-current="studio"] .hero {
  background:
    radial-gradient(circle at 74% 12%, rgb(235 91 120 / 48%), transparent 36%),
    linear-gradient(145deg, var(--tanco-luminous-plum), var(--tanco-luminous-plum-deep));
}

:where(body[data-chromatic-current=""], body[data-chromatic-current="about"]) {
  --purple-700: var(--tanco-luminous-plum);
  --purple-500: #b35d93;
  --bg: var(--tanco-luminous-plum);
  --bg-deep: var(--tanco-luminous-plum-deep);
  background:
    radial-gradient(circle at 82% 7%, rgb(235 91 120 / 48%), transparent 34rem),
    radial-gradient(circle at 18% 76%, rgb(98 207 194 / 15%), transparent 30rem),
    linear-gradient(145deg, var(--tanco-luminous-plum), var(--tanco-luminous-plum-deep) 72%);
}

.services-page .service-hero {
  background:
    radial-gradient(circle at 78% 22%, rgb(243 184 47 / 19%), transparent 29%),
    linear-gradient(122deg, var(--tanco-luminous-plum-deep), var(--tanco-luminous-plum) 72%);
}

.services-page .service-hero::before {
  background:
    radial-gradient(circle at 72% 42%, rgb(235 91 120 / 52%), transparent 28%),
    radial-gradient(circle at 48% 72%, rgb(98 207 194 / 29%), transparent 24%);
}

.services-page .service-close {
  background:
    radial-gradient(circle at 82% 18%, rgb(243 184 47 / 20%), transparent 27%),
    radial-gradient(circle at 28% 82%, rgb(98 207 194 / 16%), transparent 31%),
    linear-gradient(135deg, var(--tanco-luminous-plum), var(--tanco-luminous-plum-deep));
}

html.contact-page-root { background: var(--tanco-luminous-plum-deep); }

body.contact-page {
  --bg: #6f285f;
  --bg-deep: var(--tanco-luminous-plum-deep);
  --shadow: rgb(45 18 63 / 31%);
  background:
    radial-gradient(circle at 82% 2%, rgb(112 104 215 / 38%), transparent 31%),
    radial-gradient(circle at 18% 72%, rgb(235 91 120 / 23%), transparent 33%),
    linear-gradient(150deg, var(--bg), var(--bg-deep));
}

.contact-page .contact-wordmark { color: rgb(243 184 47 / 18%); }

/* Colour fields stay behind content; GSAP only moves their transform/opacity. */
:where(
  .works-page .collection, .case-page .case-evidence,
  body[data-page="lab"] .catalog, body[data-page="product"] .product-dialogue,
  body[data-page="checkout"] .checkout-grid,
  body[data-chromatic-current="studio"] .chapters,
  body[data-chromatic-current="about"] #collaboration-roles,
  .services-page .service-runway,
  .contact-page .contact-dialogue
) {
  --chromatic-life-a: rgb(243 184 47 / 18%);
  --chromatic-life-b: rgb(98 207 194 / 15%);
}

html.chromatic-gsap-motion [data-motion-pseudo="after"]::after,
html.chromatic-gsap-motion [data-motion-pseudo="before"]::before {
  filter: saturate(112%);
}

@supports ((-webkit-backdrop-filter: blur(18px)) or (backdrop-filter: blur(18px))) {
  :where(.chromatic-shell-nav, .chromatic-shell-menu, .chromatic-shell-mobile, .h09) {
    border: 1px solid var(--tanco-material-line);
    background-color: var(--tanco-material);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
  }
}

html.chromatic-gsap-motion [data-motion-pseudo="after"]::after,
html.chromatic-gsap-motion [data-motion-pseudo="before"]::before {
  animation: none !important;
  opacity: var(--tanco-motion-opacity) !important;
  transform: translate3d(var(--tanco-motion-x), var(--tanco-motion-y), 0) scale(var(--tanco-motion-scale)) !important;
}

html.chromatic-gsap-motion [data-motion-active="true"]::after,
html.chromatic-gsap-motion [data-motion-active="true"]::before { will-change: transform, opacity; }

/* Shared kinetic editorial system. It changes the information shape first;
   motion.js only reveals the already-useful groups. */
[data-kinetic-stage] { position: relative; isolation: isolate; }
[data-kinetic-item] { --kinetic-index: 0; transform-origin: 50% 100%; }

/* Skill Lab keeps one vivid feature stage, then steps down into quieter,
   border-light editorial lists. Four features fit without a scroll rail. */
body[data-page="lab"] {
  --lab-border: rgb(53 31 88 / 15%);
  --lab-surface: rgb(111 40 95 / 4%);
  --lab-surface-active: rgb(111 40 95 / 7%);
  overflow-x: clip;
}
body[data-page="lab"] .featured-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: clip;
  border: 1px solid var(--lab-border);
  border-radius: 1.4rem;
  background:
    radial-gradient(circle at 15% 12%, rgb(243 184 47 / 24%), transparent 27%),
    radial-gradient(circle at 82% 78%, rgb(235 91 120 / 24%), transparent 31%),
    linear-gradient(135deg, #82406f, #4c2d73);
  box-shadow: 0 1.2rem 3.2rem rgb(53 31 88 / 13%);
}
body[data-page="lab"] .feature-card,
body[data-page="lab"] .feature-card.lianzhu,
body[data-page="lab"] .feature-card.fenxuan,
body[data-page="lab"] .feature-card.zhenshi {
  min-width: 0;
  min-height: 24rem;
  padding: clamp(1.5rem, 2.4vw, 2.35rem);
  overflow: hidden;
  color: #fff7e8;
  border: 0;
  border-right: 1px solid var(--lab-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body[data-page="lab"] .feature-card:last-child { border-right: 0; }
body[data-page="lab"] .feature-card::before { display: none; }
body[data-page="lab"] .feature-card::after {
  display: block;
  inset: auto -12% -28% auto;
  width: 70%;
  height: 58%;
  border-radius: 50%;
  background: rgb(255 247 232 / 9%);
  opacity: var(--tanco-motion-opacity);
  transform: translate3d(var(--tanco-motion-x), var(--tanco-motion-y), 0) scale(var(--tanco-motion-scale));
}
html.chromatic-gsap-motion body[data-page="lab"] .feature-card[data-motion-pseudo="after"]::after {
  opacity: calc(var(--tanco-motion-opacity) * .45) !important;
}
body[data-page="lab"] .feature-card > span { color: #f3b82f; }
body[data-page="lab"] .feature-card h3 {
  margin-block: auto .8rem;
  font-size: clamp(2.15rem, 2.7vw, 3.4rem);
  line-height: .96;
  letter-spacing: -.045em;
}
body[data-page="lab"] .feature-card p,
body[data-page="lab"] .feature-card.zhenshi p { color: rgb(255 247 232 / 76%); }
body[data-page="lab"] .feature-card em,
body[data-page="lab"] .feature-card.zhenshi em { color: #fff7e8; }
body[data-page="lab"] .feature-card:hover,
body[data-page="lab"] .feature-card:focus-visible {
  color: #fff7e8;
  background: rgb(255 255 255 / 6%);
  transform: none;
  box-shadow: inset 0 0 0 1px rgb(255 247 232 / 22%);
}

/* The approved feature stage ends here. The lower page is a separate atlas. */
body[data-page="lab"] .catalog {
  --lab-wide: min(112rem, calc(100% - clamp(2rem, 5vw, 6rem)));
  width: var(--lab-wide);
  border-top-color: var(--lab-border);
}
body[data-page="lab"] :is(.featured, .catalog) {
  --chromatic-life-a: rgb(243 184 47 / 9%);
  --chromatic-life-b: rgb(216 70 112 / 8%);
}
body[data-page="lab"] .catalog::after {
  background:
    radial-gradient(circle at 78% 20%, rgb(216 70 112 / 13%), transparent 28%),
    radial-gradient(circle at 24% 76%, rgb(243 184 47 / 10%), transparent 31%);
}
body[data-page="lab"] .catalog > * { position: relative; z-index: 1; }
body[data-page="lab"] .catalog-group > header > span { color: #6f285f; font: 800 .72rem/1 var(--tanco-mono, ui-monospace, monospace); letter-spacing: .12em; }

body[data-page="lab"] .catalog-controls {
  align-items: center;
  margin-bottom: 2rem;
  padding: .7rem;
  border: 1px solid rgb(53 31 88 / 9%);
  border-radius: 1.2rem;
  background: rgb(255 255 255 / 64%);
  box-shadow: 0 .8rem 2.4rem rgb(53 31 88 / 6%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
}
body[data-page="lab"] .filters button { color: #351f58; border: 0; border-radius: .8rem; background: transparent; box-shadow: none; }
body[data-page="lab"] .filters button[aria-pressed="true"],
body[data-page="lab"] .filters button:hover,
body[data-page="lab"] .filters button:focus-visible { color: #fff7e8; background: #6f285f; transform: none; box-shadow: none; }
body[data-page="lab"] .search { border: 0; border-radius: .8rem; background: rgb(111 40 95 / 6%); }
body[data-page="lab"] :is(.catalog-controls, .result-count, .more-skills)[hidden] { display: none; }

body[data-page="lab"] .product-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); }
body[data-page="lab"] .catalog-group {
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 3rem);
  border: 0;
  border-radius: 2rem;
  background: linear-gradient(135deg, rgb(130 64 111 / 8%), rgb(255 255 255 / 36%));
}
body[data-page="lab"] .catalog-group[data-group="flagship"] { background: linear-gradient(135deg, rgb(235 91 120 / 8%), rgb(255 255 255 / 38%)); }
body[data-page="lab"] .catalog-group[data-group="tool"] { background: linear-gradient(135deg, rgb(243 184 47 / 11%), rgb(255 255 255 / 42%)); }
body[data-page="lab"] .catalog-group > header {
  position: static;
  display: grid;
  grid-template-columns: minmax(9rem, .3fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: end;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--lab-border);
}
body[data-page="lab"] .catalog-group > header h3 { margin: 0 0 .45rem; color: #351f58; font-size: clamp(2.4rem, 4vw, 4.8rem); line-height: .94; letter-spacing: -.05em; }
body[data-page="lab"] .catalog-group > header p { margin: 0; color: #746276; }
body[data-page="lab"] .catalog-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 6rem); align-items: stretch; }
body[data-page="lab"] .catalog-group[data-group="tool"] .catalog-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-page="lab"] .product-card {
  min-width: 0;
  min-height: 18rem;
  height: auto;
  display: flex;
  flex-direction: column;
  padding: clamp(1.8rem, 2.4vw, 2.6rem) 0;
  overflow: visible;
  color: #351f58;
  border: 0;
  border-top: 1px solid var(--lab-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body[data-page="lab"] .product-card::before { display: none; }
body[data-page="lab"] .product-card > span,
body[data-page="lab"] .product-card.tool > span,
body[data-page="lab"] .product-card em { color: #6f285f; }
body[data-page="lab"] .product-card-copy { display: grid; align-content: start; gap: .45rem; }
body[data-page="lab"] .product-card h3 { margin: 1.45rem 0 .15rem; font-size: clamp(1.8rem, 2.4vw, 2.8rem); line-height: .96; letter-spacing: -.04em; }
body[data-page="lab"] .product-card strong { min-height: 0; overflow: visible; white-space: normal; text-overflow: clip; font-size: .95rem; }
body[data-page="lab"] .product-card p { display: block; margin: 1.15rem 0 1.5rem; overflow: visible; color: #66566a; line-height: 1.72; -webkit-line-clamp: unset; }
body[data-page="lab"] .product-card em { margin-top: auto; font-style: normal; font-weight: 820; }
body[data-page="lab"] .product-card:hover,
body[data-page="lab"] .product-card:focus-visible { color: #351f58; background: rgb(255 255 255 / 38%); transform: translateX(.55rem); box-shadow: none; }
body[data-page="lab"] .product-card:hover p,
body[data-page="lab"] .product-card:focus-visible p { color: #66566a; }
body[data-page="lab"] .product-card:hover > span,
body[data-page="lab"] .product-card:focus-visible > span,
body[data-page="lab"] .product-card:hover em,
body[data-page="lab"] .product-card:focus-visible em { color: #6f285f; }
body[data-page="lab"] .product-card.is-featured { box-shadow: none; }

body[data-page="lab"] .more-skills {
  min-height: 8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2rem;
  padding: clamp(1.5rem, 2.8vw, 2.6rem);
  color: #351f58;
  border: 1px solid rgb(53 31 88 / 9%);
  border-radius: 1.6rem;
  background: linear-gradient(120deg, rgb(130 64 111 / 11%), rgb(243 184 47 / 10%), rgb(255 255 255 / 66%));
  box-shadow: 0 1.1rem 3.2rem rgb(53 31 88 / 7%);
}
body[data-page="lab"] .more-skills span { display: grid; gap: .3rem; }
body[data-page="lab"] .more-skills small { color: #6f285f; font: 800 .72rem/1 var(--tanco-mono, ui-monospace, monospace); letter-spacing: .12em; }
body[data-page="lab"] .more-skills strong { font-size: clamp(1.55rem, 2.5vw, 2.8rem); line-height: 1.05; letter-spacing: -.035em; }
body[data-page="lab"] .more-skills i { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; flex: 0 0 auto; color: #fff7e8; border-radius: 50%; background: #6f285f; font-style: normal; }
body[data-page="lab"] .more-skills:hover,
body[data-page="lab"] .more-skills:focus-visible { transform: translateY(-4px); box-shadow: 0 1.5rem 3.6rem rgb(53 31 88 / 12%); }
body[data-page="lab"] .catalog-group > .catalog-more {
  grid-column: 2;
  min-height: 0;
  justify-content: flex-start;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: .9rem 1.1rem;
  border-radius: 1rem;
  background: rgb(255 255 255 / 66%);
  box-shadow: none;
}
body[data-page="lab"] .catalog-group > .catalog-more strong { font-size: 1rem; letter-spacing: 0; }
body[data-page="lab"] .catalog-group > .catalog-more b { margin-left: auto; color: #6f285f; font: 800 .78rem/1 var(--tanco-mono, ui-monospace, monospace); white-space: nowrap; }
body[data-page="lab"] .catalog-group > .catalog-more i { width: 2.25rem; height: 2.25rem; }
body[data-page="lab"] .catalog-group[data-group="flagship"] > .catalog-more { color: #fff7e8; border-color: rgb(255 247 232 / 22%); background: rgb(255 247 232 / 8%); }
body[data-page="lab"] .catalog-group[data-group="flagship"] > .catalog-more b { color: #f3b82f; }

/* V53: below the approved four-Skill stage, one capability atlas replaces
   the former access explainer and catalog composition. */
body[data-page="lab"] .catalog {
  --lab-wide: min(112rem, calc(100% - clamp(2rem, 5vw, 6rem)));
  width: var(--lab-wide);
}
body[data-page="lab"] .catalog > * { position: relative; z-index: 1; }
body[data-page="lab"] .product-grid { gap: clamp(1.4rem, 2.4vw, 2.5rem); }
body[data-page="lab"] .catalog-group {
  display: grid;
  grid-template-columns: minmax(17rem, .34fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 7rem);
  padding: clamp(2.5rem, 5vw, 6rem);
  border-radius: 2.25rem;
  background: linear-gradient(135deg, rgb(130 64 111 / 10%), rgb(255 255 255 / 48%));
}
body[data-page="lab"] .catalog-group[data-group="flagship"] {
  color: #fff7e8;
  background:
    radial-gradient(circle at 88% 18%, rgb(235 91 120 / 34%), transparent 30%),
    linear-gradient(132deg, #82406f, #4c2d73 72%);
}
body[data-page="lab"] .catalog-group[data-group="tool"] {
  background: linear-gradient(135deg, rgb(243 184 47 / 17%), rgb(255 255 255 / 48%));
}
body[data-page="lab"] .catalog-group > header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
body[data-page="lab"] .catalog-group > header > span { color: #6f285f; }
body[data-page="lab"] .catalog-group > header h3 {
  margin: 1.25rem 0 1.5rem;
  font-size: clamp(3rem, 5vw, 6.2rem);
  line-height: .9;
}
body[data-page="lab"] .catalog-group > header p {
  max-width: 26rem;
  margin: 0 0 2rem;
  color: #66566a;
  font-size: clamp(1rem, 1.12vw, 1.14rem);
  line-height: 1.72;
}
body[data-page="lab"] .catalog-group > header strong {
  margin-top: auto;
  color: #6f285f;
  font-size: .95rem;
}
body[data-page="lab"] .catalog-group[data-group="flagship"] > header > span,
body[data-page="lab"] .catalog-group[data-group="flagship"] > header strong { color: #f3b82f; }
body[data-page="lab"] .catalog-group[data-group="flagship"] > header h3 { color: #fff7e8; }
body[data-page="lab"] .catalog-group[data-group="flagship"] > header p { color: rgb(255 247 232 / 74%); }
body[data-page="lab"] .catalog-list,
body[data-page="lab"] .catalog-group[data-group="tool"] .catalog-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 5rem);
}
body[data-page="lab"] .product-card {
  min-height: 17rem;
  padding: clamp(1.6rem, 2vw, 2.2rem) clamp(1.35rem, 1.8vw, 2rem);
  border-top: 1px solid var(--lab-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body[data-page="lab"] .catalog-group[data-group="flagship"] .product-card { color: #fff7e8; border-top-color: rgb(255 247 232 / 22%); }
body[data-page="lab"] .catalog-group[data-group="flagship"] .product-card :is(strong, p) { color: rgb(255 247 232 / 72%); }
body[data-page="lab"] .catalog-group[data-group="flagship"] .product-card > span,
body[data-page="lab"] .catalog-group[data-group="flagship"] .product-card em { color: #f3b82f; }
body[data-page="lab"] .catalog-group[data-group="flagship"] .product-card:hover,
body[data-page="lab"] .catalog-group[data-group="flagship"] .product-card:focus-visible { color: #fff7e8; background: rgb(255 247 232 / 7%); }
body[data-page="lab"] .more-skills b { margin-left: auto; color: #6f285f; font-size: .9rem; }

@media (min-width: 901px) {
  /* Homepage: replace spreadsheet-like borders with four distinct story beats. */
  .workflow-steps {
    gap: clamp(.7rem, 1.2vw, 1.15rem);
    border: 0 !important;
  }
  .workflow-steps li {
    min-height: 19rem;
    border: 0 !important;
    border-radius: 1.25rem;
    box-shadow: 0 1.1rem 2.8rem rgb(77 27 82 / 10%);
  }
  .workflow-steps li:nth-child(1) { background: rgb(255 247 232 / 82%); }
  .workflow-steps li:nth-child(2) { background: rgb(249 220 230 / 78%); }
  .workflow-steps li:nth-child(3) { background: rgb(216 241 236 / 82%); }
  .workflow-steps li:nth-child(4) { color: #fff7e8; background: #6f285f; }
  .workflow-steps li:nth-child(4) p { color: rgb(255 247 232 / 76%); }
  .workflow-steps li:nth-child(4) span { color: #f3b82f; }
  .workflow-head {
    grid-template-columns: minmax(9rem, .25fr) minmax(0, 1.35fr) minmax(20rem, .55fr);
    gap: clamp(1.5rem, 3vw, 3.5rem);
  }
  .workflow h2 { max-width: 13ch; font-size: clamp(3.2rem, 5vw, 5rem); line-height: .94; }

  .home-note-grid {
    gap: clamp(.8rem, 1.4vw, 1.25rem);
    border: 0 !important;
  }
  .home-note-card {
    border: 0 !important;
    border-radius: 1.2rem;
    box-shadow: 0 1rem 2.6rem rgb(77 27 82 / 8%);
  }
  .home-note-card:nth-child(1) { background: #fff3cf; }
  .home-note-card:nth-child(2) { background: #f9dce6; }
  .home-note-card:nth-child(3) { background: #d8f1ec; }

  /* Works keeps its proven image-first layout; evidence becomes visual, not tabular. */
  .works-page .work-proof {
    gap: .55rem;
    padding-top: 0;
    border-top: 0;
  }
  .works-page .work-proof div {
    min-height: 5.6rem;
    padding: .8rem;
    border-radius: .75rem;
    background: rgb(111 40 95 / 5%);
  }
  .works-page .work-proof div:nth-child(2) { background: rgb(243 184 47 / 13%); }
  .works-page .work-proof div:nth-child(3) { background: rgb(98 207 194 / 13%); }
  .works-page .collection-nav a:nth-child(1) { background: #fff3cf; }
  .works-page .collection-nav a:nth-child(2) { background: #f9dce6; }
  .works-page .collection-nav a:nth-child(3) { background: #d8f1ec; }

  /* Services: seven dense rows become one feature and six editorial panels. */
  .services-page .service-map {
    grid-template-columns: minmax(19rem, 4fr) minmax(0, 8fr);
  }
  .services-page .service-map h2 { max-width: 12ch; font-size: clamp(2.8rem, 4.4vw, 4.7rem); }
  .services-page .service-index {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    border: 0;
  }
  .services-page .service-index a {
    min-height: 10.5rem;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    align-content: space-between;
    padding: 1.35rem;
    border: 0;
    border-radius: 1rem;
    background: #fff3cf;
    box-shadow: 0 .9rem 2rem rgb(77 27 82 / 7%);
  }
  .services-page .service-index a:nth-child(2),
  .services-page .service-index a:nth-child(6) { background: #f9dce6; }
  .services-page .service-index a:nth-child(3),
  .services-page .service-index a:nth-child(7) { background: #d8f1ec; }
  .services-page .service-index a:nth-child(4) { background: #ede6ff; }
  .services-page .service-index a:nth-child(5) { background: #ffe3d8; }
  .services-page .service-index small { max-width: 26rem; }

  .services-page .service-runway {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 1.7vw, 1.5rem);
  }
  .services-page .service-band {
    min-height: 39rem;
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3.5rem);
    padding: clamp(2.2rem, 3.7vw, 3.8rem);
    overflow: hidden;
    border: 0;
    border-radius: 1.35rem;
    background: #fff3cf;
    box-shadow: 0 1.2rem 3rem rgb(77 27 82 / 9%);
  }
  .services-page .service-band:first-child {
    min-height: 34rem;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(17rem, 4fr) minmax(0, 8fr);
    color: #fff7e8;
    background:
      radial-gradient(circle at 82% 12%, rgb(235 91 120 / 38%), transparent 31%),
      linear-gradient(135deg, #82406f, #4c2d73);
  }
  .services-page .service-band:nth-child(3),
  .services-page .service-band:nth-child(7) { background: #d8f1ec; }
  .services-page .service-band:nth-child(4) { background: #f9dce6; }
  .services-page .service-band:nth-child(5) { background: #ede6ff; }
  .services-page .service-band:nth-child(6) { background: #ffe3d8; }
  .services-page .service-band::before { top: 0; left: 0; width: 100%; height: .48rem; }
  .services-page .service-band header h2 { max-width: 12ch; }
  .services-page .service-band:first-child header > p:last-child,
  .services-page .service-band:first-child .service-scope,
  .services-page .service-band:first-child dd { color: rgb(255 247 232 / 78%); }
  .services-page .service-band:first-child .service-code,
  .services-page .service-band:first-child dt { color: #f3b82f; }
  .services-page .service-band-body { min-height: 0; }
  .services-page .service-scope {
    gap: .6rem;
    margin-bottom: 1.4rem;
  }
  .services-page .service-scope span {
    min-height: 4.4rem;
    display: flex;
    align-items: center;
    padding: .8rem 1rem;
    border: 1px solid rgb(53 31 88 / 12%);
    border-radius: .75rem;
    background: rgb(255 255 255 / 38%);
  }
  .services-page .service-band:first-child .service-scope span { border-color: rgb(255 247 232 / 18%); background: rgb(255 247 232 / 8%); }
  .services-page .service-band dl {
    gap: .55rem;
    border: 0;
  }
  .services-page .service-band dl div,
  .services-page .service-band dl div + div {
    min-height: 8rem;
    padding: 1rem;
    border: 0;
    border-radius: .75rem;
    background: rgb(255 255 255 / 42%);
  }
  .services-page .service-band:first-child dl div { background: rgb(255 247 232 / 8%); }
  .services-page .service-band:last-child { border: 0; }

  /* Studio and About get colour-bearing sequences without adding new content. */
  body[data-chromatic-current="studio"] .reel-line {
    gap: .65rem;
    border: 0;
  }
  body[data-chromatic-current="studio"] .reel-line li {
    border: 0;
    border-radius: .85rem;
    background: #fff3cf;
  }
  body[data-chromatic-current="studio"] .reel-line li:nth-child(2) { background: #f9dce6; }
  body[data-chromatic-current="studio"] .reel-line li:nth-child(3) { background: #d8f1ec; }
  body[data-chromatic-current="studio"] .reel-line li:nth-child(4) { background: #ede6ff; }
  body[data-chromatic-current="about"] .process-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    border: 0;
  }
  body[data-chromatic-current="about"] .process-list li {
    min-height: 11rem;
    padding: 1.5rem;
    border: 1px solid rgb(255 247 232 / 15%);
    border-radius: 1rem;
    background: rgb(255 247 232 / 7%);
  }
}

html.chromatic-gsap-pending .prism-plane,
html.chromatic-gsap-pending .hero-copy > *,
html.chromatic-gsap-pending .h09 { opacity: 0; }

html.chromatic-gsap-motion .selected-entry-motion .prism-plane,
html.chromatic-gsap-motion .selected-entry-motion .brand,
html.chromatic-gsap-motion .selected-entry-motion .tagline,
html.chromatic-gsap-motion .selected-entry-motion .cta,
html.chromatic-gsap-motion .selected-entry-motion .h09 { animation: none !important; }

/* One fluid interaction grammar for clickable cards and editorial panels. */
html { scroll-behavior: auto; }

.tanco-responsive-surface {
  --tanco-pointer-x: 50%;
  --tanco-pointer-y: 50%;
  position: relative;
  isolation: isolate;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.tanco-responsive-surface > :not(.tanco-surface-light) { position: relative; z-index: 1; }

.tanco-surface-light {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at var(--tanco-pointer-x) var(--tanco-pointer-y), rgb(255 255 255 / 30%) 0, rgb(243 184 47 / 9%) 24%, transparent 61%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0%);
  transition: opacity 220ms ease-out, box-shadow 220ms ease-out;
}

.tanco-responsive-surface[data-surface-active="true"] { will-change: transform; }
.tanco-responsive-surface[data-surface-active="true"] .tanco-surface-light {
  opacity: 1;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%);
}
.tanco-responsive-surface--action { cursor: pointer; }

@media (max-width: 1100px) {
  body[data-page="lab"] .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="lab"] .feature-card:nth-child(2n) { border-right: 0; }
  body[data-page="lab"] .feature-card:nth-child(-n + 2) { border-bottom: 1px solid var(--lab-border); }
}

@media (max-width: 900px) {
  body[data-page="lab"] .feature-card,
  body[data-page="lab"] .feature-card.lianzhu,
  body[data-page="lab"] .feature-card.fenxuan,
  body[data-page="lab"] .feature-card.zhenshi { min-height: 22rem; }
  body[data-page="lab"] .catalog-group { grid-template-columns: 1fr; }
  body[data-page="lab"] .catalog-group > header { grid-template-columns: 1fr; }
  body[data-page="lab"] .catalog-group > .catalog-more { grid-column: 1; }
  body[data-page="lab"] .catalog-list,
  body[data-page="lab"] .catalog-group[data-group="tool"] .catalog-list { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  body[data-page="lab"] .featured-grid { grid-template-columns: 1fr; }
  body[data-page="lab"] .feature-card,
  body[data-page="lab"] .feature-card:nth-child(2n) { border-right: 0; border-bottom: 1px solid var(--lab-border); }
  body[data-page="lab"] .feature-card:last-child { border-bottom: 0; }
}

@media (prefers-reduced-transparency: reduce) {
  :where(.chromatic-shell-nav, .chromatic-shell-menu, .chromatic-shell-mobile, .h09) {
    background: #fff0dc !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body[data-page="lab"] :is(.catalog-controls, .catalog-group) {
    background: #fffaf4 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (prefers-contrast: more) {
  :root { --tanco-material-line: #351f58; }
  :where(.chromatic-shell-nav, .chromatic-shell-menu, .chromatic-shell-mobile, .h09) {
    border-width: 2px;
    box-shadow: none !important;
  }
  :where(a, button, summary):focus-visible { outline-width: 4px !important; outline-offset: 5px !important; }
  :where(.works-page .hero, body[data-page="lab"] .lab-hero, body[data-chromatic-current="studio"] .hero, .services-page .service-hero, .services-page .service-close),
  :where(body[data-chromatic-current=""], body[data-chromatic-current="about"], body.contact-page) {
    background: #4c2d73 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .tanco-responsive-surface { transform: none !important; will-change: auto !important; }
  .tanco-surface-light { display: none !important; }
  html.chromatic-gsap-pending .prism-plane,
  html.chromatic-gsap-pending .hero-copy > *,
  html.chromatic-gsap-pending .h09 { opacity: 1; }
  html.chromatic-gsap-motion [data-motion-pseudo="after"]::after,
  html.chromatic-gsap-motion [data-motion-pseudo="before"]::before {
    opacity: .18 !important;
    transform: none !important;
    will-change: auto !important;
  }
  :where(a, button, summary):active { transform: none; }
  html.chromatic-gsap-motion body[data-page="lab"] .feature-card[data-motion-pseudo="after"]::after {
    opacity: .08 !important;
    transform: none !important;
  }
}

/* v157: 全站卡片收口。放在最后覆盖早期直角实验，不新增组件。 */
:root { --tanco-card-radius: clamp(22px, 2.6vw, 42px); }
:where(
  .focus-tile,
  .work-card,
  .feature-card,
  .product-card,
  .chapter-card,
  .method-card,
  .home-note-card,
  .home-services-layout,
  .home-bbs-layout,
  .home-service-list > a,
  .home-bbs-item,
  .service-index > a,
  .service-band,
  .skill-tier-grid > article,
  .catalog-group,
  .catalog-group > .catalog-more,
  .bbs-hero,
  .bbs-hero-note,
  .bbs-board,
  .bbs-thread-button,
  .bbs-post,
  .bbs-panel,
  .case-evidence > *,
  .featured-film,
  .reel-line > li
) {
  border-radius: var(--tanco-card-radius) !important;
}
:where(.focus-tile, .work-card, .feature-card, .product-card, .chapter-card, .service-band, .bbs-board, .bbs-post, .featured-film) {
  overflow: hidden;
}