:root {
  --chromatic-purple-900: #351f58;
  --chromatic-purple-800: #4a235d;
  --chromatic-purple-700: #68245f;
  --chromatic-cream: #fff0dc;
  --chromatic-cream-soft: #f1d9ca;
  --chromatic-yellow: #efad37;
  --chromatic-magenta: #d84670;
  --chromatic-teal: #57b0aa;
  --chromatic-blue: #302e70;
  --chromatic-focus-dark: #351f58;
  --chromatic-focus-light: #fff0dc;
  --chromatic-line: rgb(255 240 220 / 24%);
  --chromatic-ease: cubic-bezier(.16, 1, .3, 1);
  --chromatic-edge: clamp(16px, 3.35vw, 64px);
  --chromatic-page: min(112rem, calc(100vw - var(--chromatic-edge) - var(--chromatic-edge)));
}

.chromatic-shell-mount { display: contents; }
.chromatic-shell-mount *, .chromatic-shell-mount *::before, .chromatic-shell-mount *::after { box-sizing: border-box; }
.chromatic-shell-mount a, .chromatic-shell-mount button { -webkit-tap-highlight-color: transparent; }
.chromatic-shell-mount a:focus-visible, .chromatic-shell-mount button:focus-visible, .chromatic-skip-link:focus-visible { outline: 3px solid var(--chromatic-focus-dark); outline-offset: 5px; }
.chromatic-skip-link { position: fixed; top: 10px; left: 10px; z-index: 120; padding: 10px 16px; color: var(--chromatic-purple-900); background: var(--chromatic-yellow); transform: translateY(-170%); transition: transform .2s ease; }
.chromatic-skip-link:focus { transform: translateY(0); }

.chromatic-shell-header {
  position: relative;
  z-index: 80;
  width: var(--chromatic-page);
  min-height: 94px;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  margin: 0 auto;
  border-bottom: 1px solid var(--chromatic-line);
  color: var(--chromatic-cream);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.chromatic-shell-brand { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; justify-self: start; color: var(--chromatic-purple-900); font-size: clamp(22px, 2.5vw, 38px); font-weight: 950; letter-spacing: -.055em; text-decoration: none; transition: transform .36s var(--chromatic-ease), text-shadow .36s ease; }
.chromatic-shell-brand small { color: var(--chromatic-purple-700); font-size: 12px; font-weight: 750; letter-spacing: .02em; }
.chromatic-shell-brand:hover, .chromatic-shell-brand:focus-visible { transform: translateY(-6px) scale(1.045); text-shadow: 0 12px 30px rgb(10 3 18 / 42%); }
.chromatic-shell-brand:active { transform: translateY(1px) scale(.94); transition-duration: .09s; }

.chromatic-shell-nav { display: flex; align-items: center; justify-self: center; gap: 5px; padding: 8px 10px; border-radius: 999px; color: var(--chromatic-purple-900); background: var(--chromatic-cream); box-shadow: 0 0 0 rgb(15 4 24 / 0%); transition: transform .44s var(--chromatic-ease), box-shadow .44s ease; }
.chromatic-shell-nav:hover, .chromatic-shell-nav:focus-within { transform: scale(1.018); box-shadow: 0 20px 46px rgb(18 5 30 / 36%); }
.chromatic-shell-nav__link { position: relative; isolation: isolate; min-width: 50px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 999px; color: var(--chromatic-purple-900); font-size: 13px; font-weight: 720; text-decoration: none; transition: transform .38s var(--chromatic-ease), box-shadow .38s ease, color .25s ease, letter-spacing .35s ease; }
.chromatic-shell-nav__link::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--chromatic-purple-800); opacity: 0; transform: scale(.62); transition: opacity .28s ease, transform .38s var(--chromatic-ease); }
.chromatic-shell-nav__link:hover, .chromatic-shell-nav__link:focus-visible { z-index: 2; color: var(--chromatic-cream); letter-spacing: .03em; transform: translateY(-4px) scale(1.1); box-shadow: 0 12px 28px rgb(53 18 53 / 30%); }
.chromatic-shell-nav__link:hover::before, .chromatic-shell-nav__link:focus-visible::before { opacity: 1; transform: scale(1); }
.chromatic-shell-nav__link[aria-current="page"] { color: var(--chromatic-purple-900); background: var(--chromatic-yellow); font-weight: 850; }
.chromatic-shell-nav__link[aria-current="page"]::before { display: none; }
.chromatic-shell-nav__link:active { transform: translateY(1px) scale(.92); transition-duration: .09s; }

.chromatic-shell-menu, .chromatic-shell-mobile { display: none; }
.chromatic-shell-menu { min-width: 52px; min-height: 48px; grid-template-columns: auto 22px; align-content: center; justify-items: end; justify-self: end; gap: 5px 12px; padding: 5px 10px; border: 1px solid rgb(53 31 88 / 24%); border-radius: 999px; color: var(--chromatic-purple-900); background: rgb(255 240 220 / 80%); cursor: pointer; font: 750 12px/1 Inter, ui-sans-serif, system-ui, sans-serif; transition: transform .36s var(--chromatic-ease), box-shadow .36s ease, background-color .25s ease; }
.chromatic-shell-menu span { grid-column: 1; grid-row: 1 / 3; align-self: center; }
.chromatic-shell-menu i { grid-column: 2; width: 22px; height: 2px; display: block; background: var(--chromatic-yellow); transition: transform .34s var(--chromatic-ease), width .34s var(--chromatic-ease); }
.chromatic-shell-menu:hover, .chromatic-shell-menu:focus-visible, .chromatic-shell-menu[aria-expanded="true"] { color: var(--chromatic-purple-900); background: var(--chromatic-cream); transform: translateY(-5px) scale(1.07); box-shadow: 0 14px 32px rgb(18 5 30 / 34%); }
.chromatic-shell-menu:active { transform: translateY(1px) scale(.92); transition-duration: .09s; }
.chromatic-shell-menu[aria-expanded="true"] i:first-of-type { transform: translateY(3.5px) rotate(45deg); }
.chromatic-shell-menu[aria-expanded="true"] i:last-of-type { transform: translateY(-3.5px) rotate(-45deg); }

.chromatic-shell-footer {
  width: var(--chromatic-page);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  margin: 0 auto;
  padding: 74px clamp(24px, 3vw, 54px) 62px;
  border-top: 1px solid var(--chromatic-line);
  color: var(--chromatic-cream);
  background: var(--chromatic-purple-900);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.chromatic-shell-footer__brand strong { display: block; font-size: clamp(48px, 7vw, 108px); line-height: .86; letter-spacing: -.075em; }
.chromatic-shell-footer__brand > span { display: block; margin-top: 12px; color: var(--chromatic-cream-soft); font-weight: 750; }
.chromatic-shell-footer__brand p { margin: 28px 0; color: var(--chromatic-cream-soft); }
.chromatic-shell-spectrum { width: min(500px, 100%); height: 12px; display: grid; grid-template-columns: 1.1fr 1.5fr 1fr .8fr; pointer-events: none; }
.chromatic-shell-spectrum i:nth-child(1) { background: var(--chromatic-yellow); }
.chromatic-shell-spectrum i:nth-child(2) { background: var(--chromatic-magenta); }
.chromatic-shell-spectrum i:nth-child(3) { background: var(--chromatic-teal); }
.chromatic-shell-spectrum i:nth-child(4) { background: var(--chromatic-blue); }
.chromatic-shell-footer__links { align-self: end; border-top: 1px solid var(--chromatic-line); }
.chromatic-shell-footer__links a { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 15px; border-bottom: 1px solid var(--chromatic-line); color: var(--chromatic-cream-soft); text-decoration: none; transition: transform .36s var(--chromatic-ease), box-shadow .36s ease, background-color .25s ease; }
.chromatic-shell-footer__links i { font-style: normal; transition: transform .36s var(--chromatic-ease); }
.chromatic-shell-footer__links a:hover, .chromatic-shell-footer__links a:focus-visible { z-index: 1; color: var(--chromatic-purple-900); background: var(--chromatic-cream); transform: translateX(12px) scale(1.018); box-shadow: 0 14px 34px rgb(18 5 30 / 32%); }
.chromatic-shell-footer__links a:hover i, .chromatic-shell-footer__links a:focus-visible i { transform: translate(6px, -6px) rotate(10deg); }
.chromatic-shell-footer__links a:active { transform: translateX(2px) scale(.95); transition-duration: .09s; }
.chromatic-shell-footer a:focus-visible { outline-color: var(--chromatic-focus-light); }
.chromatic-shell-footer__boundary { grid-column: 1 / -1; max-width: 70em; margin: 0; color: rgb(255 240 220 / 62%); font-size: 11px; }

.chromatic-shell-demo { width: var(--chromatic-page); min-height: 680px; display: flex; flex-direction: column; justify-content: center; margin: 0 auto; padding: 90px 0; color: var(--chromatic-cream); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
.chromatic-shell-demo > p:first-child { margin: 0; color: var(--chromatic-yellow); font-size: 11px; font-weight: 850; letter-spacing: .16em; }
.chromatic-shell-demo h1 { max-width: 13ch; margin: 24px 0; font-size: clamp(62px, 8vw, 124px); line-height: .9; letter-spacing: -.075em; }
.chromatic-shell-demo > p:not(:first-child) { max-width: 42em; color: var(--chromatic-cream-soft); font-size: 18px; }
.chromatic-shell-demo__spectrum { width: min(600px, 100%); height: 18px; display: grid; grid-template-columns: 1.1fr 1.5fr 1fr .8fr; margin: 40px 0; pointer-events: none; }
.chromatic-shell-demo__spectrum i:nth-child(1) { background: var(--chromatic-yellow); }
.chromatic-shell-demo__spectrum i:nth-child(2) { background: var(--chromatic-magenta); }
.chromatic-shell-demo__spectrum i:nth-child(3) { background: var(--chromatic-teal); }
.chromatic-shell-demo__spectrum i:nth-child(4) { background: var(--chromatic-blue); }
.chromatic-shell-demo > strong { color: var(--chromatic-cream-soft); font-size: 11px; letter-spacing: .1em; }

@media (max-width: 899px) {
  :root { --chromatic-page: calc(100vw - 36px); }
  .chromatic-shell-header { min-height: 78px; grid-template-columns: 1fr auto; }
  .chromatic-shell-nav { display: none; }
  .chromatic-shell-menu { display: grid; }
  .chromatic-shell-mobile { position: absolute; top: calc(100% + 10px); right: 0; left: 0; display: grid; padding: 10px; border-radius: 18px; color: var(--chromatic-purple-900); background: var(--chromatic-cream); box-shadow: 0 24px 60px rgb(18 5 30 / 42%); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-14px) scale(.97); transition: opacity .3s ease, visibility .3s ease, transform .4s var(--chromatic-ease); }
  .chromatic-shell-mobile[data-open="true"] { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
  .chromatic-shell-mobile__link { min-height: 54px; display: flex; align-items: center; padding: 10px 15px; border-bottom: 1px solid rgb(53 31 88 / 15%); border-radius: 10px; color: var(--chromatic-purple-900); font-weight: 720; text-decoration: none; transition: transform .32s var(--chromatic-ease), box-shadow .32s ease, background-color .22s ease; }
  .chromatic-shell-mobile__link:last-child { border-bottom: 0; }
  .chromatic-shell-mobile__link:hover, .chromatic-shell-mobile__link:focus-visible { z-index: 1; color: var(--chromatic-cream); background: var(--chromatic-purple-800); transform: translateX(10px) scale(1.035); box-shadow: 0 10px 24px rgb(53 18 53 / 26%); }
  .chromatic-shell-mobile__link[aria-current="page"] { color: var(--chromatic-purple-900); background: var(--chromatic-yellow); }
  .chromatic-shell-mobile__link:active { transform: translateX(2px) scale(.94); transition-duration: .09s; }
  html.chromatic-nav-lock, html.chromatic-nav-lock body { overflow: hidden; }
  .chromatic-shell-footer { grid-template-columns: 1fr; gap: 56px; padding-top: 60px; }
  .chromatic-shell-footer__boundary { grid-column: 1; }
  .chromatic-shell-demo { min-height: 560px; padding: 74px 0; }
}

@media (max-width: 390px) {
  :root { --chromatic-page: calc(100vw - 28px); }
  .chromatic-shell-brand { font-size: 20px; }
  .chromatic-shell-brand small { display: none; }
  .chromatic-shell-menu { padding-inline: 8px; }
  .chromatic-shell-footer__brand strong { font-size: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .chromatic-shell-mount *, .chromatic-shell-mount *::before, .chromatic-shell-mount *::after, .chromatic-skip-link { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .chromatic-shell-brand:hover, .chromatic-shell-brand:focus-visible, .chromatic-shell-nav:hover, .chromatic-shell-nav:focus-within, .chromatic-shell-nav__link:hover, .chromatic-shell-nav__link:focus-visible, .chromatic-shell-menu:hover, .chromatic-shell-menu:focus-visible, .chromatic-shell-menu[aria-expanded="true"], .chromatic-shell-mobile__link:hover, .chromatic-shell-mobile__link:focus-visible, .chromatic-shell-footer__links a:hover, .chromatic-shell-footer__links a:focus-visible { transform: none; }
}


/* Static candidate: shared header always sits on a light page surface. */
.chromatic-shell-header { color: var(--chromatic-purple-900); border-bottom-color: rgb(53 31 88 / 14%); }
.chromatic-shell-brand { color: var(--chromatic-purple-900); }
.chromatic-shell-brand small { color: var(--chromatic-purple-700); }
.chromatic-shell-menu { color: var(--chromatic-purple-900); border-color: rgb(53 31 88 / 18%); background: rgb(255 240 220 / 78%); }

/* Dark page groups keep the original cream brand treatment. */
body[data-chromatic-current=""] .chromatic-shell-header,
body[data-chromatic-current="services"] .chromatic-shell-header,
body[data-chromatic-current="about"] .chromatic-shell-header { color: var(--chromatic-cream); border-bottom-color: var(--chromatic-line); }
body[data-chromatic-current=""] .chromatic-shell-brand,
body[data-chromatic-current="services"] .chromatic-shell-brand,
body[data-chromatic-current="about"] .chromatic-shell-brand { color: var(--chromatic-cream); }
body[data-chromatic-current=""] .chromatic-shell-brand small,
body[data-chromatic-current="services"] .chromatic-shell-brand small,
body[data-chromatic-current="about"] .chromatic-shell-brand small { color: var(--chromatic-cream-soft); }
body[data-chromatic-current=""] .chromatic-shell-menu,
body[data-chromatic-current="services"] .chromatic-shell-menu,
body[data-chromatic-current="about"] .chromatic-shell-menu { color: var(--chromatic-cream); border-color: var(--chromatic-line); background: rgb(255 240 220 / 8%); }
body[data-chromatic-current=""] .chromatic-shell-header a:focus-visible,
body[data-chromatic-current=""] .chromatic-shell-header button:focus-visible,
body[data-chromatic-current="services"] .chromatic-shell-header a:focus-visible,
body[data-chromatic-current="services"] .chromatic-shell-header button:focus-visible,
body[data-chromatic-current="about"] .chromatic-shell-header a:focus-visible,
body[data-chromatic-current="about"] .chromatic-shell-header button:focus-visible { outline-color: var(--chromatic-focus-light); }

/* V46 content life system: lower-page color fields share one slow, restrained
   light movement. Page structure, copy, routes and component behavior stay put. */
@keyframes chromatic-content-drift {
  0%, 100% { opacity: .14; transform: translate3d(-6%, -3%, 0) scale(.96); }
  50% { opacity: .27; transform: translate3d(7%, 4%, 0) scale(1.06); }
}

:where(
  .works-page .work-filter, .works-page .collection, .works-page .hold-note,
  .case-page .document-preview, .case-page .case-evidence, .case-page .case-relations,
  body[data-page="lab"] .featured, body[data-page="lab"] .access, body[data-page="lab"] .catalog,
  body[data-page="product"] .product-sections, body[data-page="product"] .product-dialogue, body[data-page="product"] .product-pricing,
  body[data-page="checkout"] .checkout-flow, body[data-page="checkout"] .checkout-grid,
  body[data-chromatic-current="studio"] main > .section,
  body[data-chromatic-current="about"] main > .section,
  .services-page .service-map, .services-page .service-runway, .services-page .skill-pricing,
  .contact-page .contact-dialogue
) {
  --chromatic-life-a: rgb(239 173 55 / 12%);
  --chromatic-life-b: rgb(87 176 170 / 10%);
  position: relative;
  isolation: isolate;
  background-image:
    radial-gradient(circle at 88% 10%, var(--chromatic-life-a), transparent 30%),
    radial-gradient(circle at 8% 88%, var(--chromatic-life-b), transparent 34%);
}

:where(
  .works-page #presentations, .case-page .case-relations,
  body[data-page="product"] .product-dialogue,
  body[data-chromatic-current="about"] main > .section:nth-of-type(even),
  .services-page .skill-pricing
) { --chromatic-life-a: rgb(216 70 112 / 12%); --chromatic-life-b: rgb(48 46 112 / 9%); }

:where(
  .works-page #videos, .case-page .case-evidence,
  body[data-page="lab"] .catalog, body[data-page="checkout"] .checkout-grid,
  body[data-page="product"] .product-dialogue,
  body[data-chromatic-current="studio"] .chapters,
  body[data-chromatic-current="about"] #collaboration-roles,
  .services-page .service-runway,
  .contact-page .contact-dialogue
)::after {
  position: absolute;
  inset: 4% 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 28%, rgb(216 70 112 / 34%), transparent 27%),
    radial-gradient(circle at 30% 74%, rgb(87 176 170 / 30%), transparent 30%),
    radial-gradient(circle at 48% 46%, rgb(239 173 55 / 24%), transparent 22%);
  content: "";
  animation: chromatic-content-drift 34s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  :where(
    .works-page #videos, .case-page .case-evidence,
    body[data-page="lab"] .catalog, body[data-page="checkout"] .checkout-grid,
    body[data-page="product"] .product-dialogue,
    body[data-chromatic-current="studio"] .chapters,
    body[data-chromatic-current="about"] #collaboration-roles,
    .services-page .service-runway,
    .contact-page .contact-dialogue
  )::after { animation: none; opacity: .18; transform: none; }
}