/* Shared studio shell: public views and branded detail pages. */
.studio-shell-v3 {
  --studio-paper: #f8f9fc;
  --studio-ink: #1d2738;
  --studio-muted: #526174;
  --studio-accent: #3e5a86;
  --studio-line: #dce4ef;
  --studio-tint: #edf2fa;
  --studio-control-line: #b9c8dc;
  --studio-width: 1160px;
  --studio-ease: cubic-bezier(.22, 1, .32, 1);
  --paper: var(--studio-paper);
  --ink: var(--studio-ink);
  --ink-soft: var(--studio-muted);
  --muted: var(--studio-muted);
  --line: var(--studio-line);
  --mint-deep: var(--studio-accent);
  background: var(--studio-paper);
  color: var(--studio-ink);
}
.studio-shell-v3 .site-header {
  background: var(--studio-paper);
  border-bottom: 1px solid var(--studio-line);
  backdrop-filter: none;
  box-shadow: none;
}
.studio-shell-v3 :is(.header-inner, main, .footer-inner) { max-width: var(--studio-width); }
.studio-shell-v3 .header-inner { min-height: 74px; }
.studio-shell-v3 main { padding-top: 0; }
.studio-shell-v3 .brand { font-weight: 650; }
.studio-shell-v3 .nav { padding: 0; border-radius: 0; gap: clamp(5px, 1vw, 18px); background: transparent; }
.studio-shell-v3 .nav :is(a, button) {
  color: var(--studio-muted); border-radius: 0; font-weight: 530; white-space: nowrap; box-shadow: none; background: transparent;
}
.studio-shell-v3 .nav :is(a, button):hover { color: var(--studio-ink); }
.studio-shell-v3 .nav :is(a[aria-current], button[aria-pressed="true"]) {
  color: var(--studio-accent); text-decoration: underline; text-underline-offset: 6px;
  text-decoration-thickness: 1px; text-decoration-color: currentColor;
}
.studio-shell-v3 :focus-visible { outline-color: var(--studio-accent); }
.studio-shell-v3 .globe-toggle { box-shadow: none; border-radius: 0; background: transparent; }
.studio-shell-v3 .globe-toggle:is(:hover, [aria-expanded="true"]),
.studio-shell-v3 .language-options button:is(:hover, [aria-pressed="true"]) { background: var(--studio-tint); color: var(--studio-accent); }
.studio-shell-v3 .site-view:not([hidden]) { animation: none; }

.studio-home-v3 { color: var(--studio-ink); }
.studio-hero-v3 {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 22.5rem);
  gap: clamp(32px, 5vw, 88px); align-items: center;
  padding: clamp(55px, 7.2vw, 104px) 0 clamp(49px, 7vw, 90px);
}
.studio-hero-heading { min-width: 0; }
.studio-hero-heading h1 {
  margin: 0; font-size: clamp(2.85rem, 6.35vw, 5.15rem);
  font-weight: 660; line-height: 1.03; letter-spacing: -.057em;
}
.studio-hero-heading h1 > span { display: block; overflow: clip; padding: .07em .035em .09em 0; margin-block: -.07em -.09em; }
.studio-hero-heading h1 > span > span { display: block; }
.studio-hero-heading h1 > span + span { color: var(--studio-accent); }
.studio-hero-intro { margin-top: 22px; }
.studio-hero-intro p {
  max-width: 51ch; margin: 0; color: var(--studio-muted);
  font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.68;
}
.studio-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 21px; }
.studio-cta, .studio-link { font-size: .96rem; cursor: pointer; }
.studio-cta {
  display: inline-flex; gap: 12px; align-items: center; min-height: 48px; padding: 11px 17px;
  color: #fff; background: var(--studio-accent); border: 0; border-radius: 8px; font-weight: 650;
}
.studio-cta svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.studio-cta:hover { background: #30496f; }
.studio-cta:active { background: #263d5f; }
.studio-link {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--studio-muted);
  text-decoration: underline; text-underline-offset: .32em; text-decoration-thickness: 1px; font-weight: 550;
}
.studio-link:hover { color: var(--studio-accent); }

.studio-wish-guide {
  position: relative; padding: clamp(23px, 3vw, 31px);
  border: 1px solid #d5dfed; border-radius: 15px;
  background: linear-gradient(142deg, #f4f7fc, #e9f0fa);
  box-shadow: inset 0 1px 0 #fff, 0 12px 30px #2034500b;
}
.studio-wish-guide::after {
  content: ""; position: absolute; inset: 24px 25px auto auto; width: 25px; height: 25px;
  background: var(--studio-accent); mask: url("brand-v3.svg") center / contain no-repeat; opacity: .46;
}
.studio-wish-guide h2 {
  margin: 0 30px 13px 0; font-size: 1.15rem; line-height: 1.42;
  letter-spacing: -.02em; font-weight: 650;
}
.studio-wish-guide ol { margin: 0; padding: 0; list-style: none; counter-reset: wish-guide; }
.studio-wish-guide li {
  display: grid; grid-template-columns: 2ch minmax(0, 1fr); gap: 12px; align-items: baseline;
  padding: 10px 0; border-top: 1px solid #d6e0ee; color: var(--studio-muted);
  font-size: .96rem; line-height: 1.45; counter-increment: wish-guide;
}
.studio-wish-guide li:last-child { padding-bottom: 0; }
.studio-wish-guide li::before {
  content: counter(wish-guide, decimal-leading-zero);
  font-size: .7rem; font-weight: 680; font-variant-numeric: tabular-nums; color: var(--studio-accent);
}

.studio-work-v3 {
  margin: 0 0 clamp(68px, 9vw, 130px); padding-top: 27px;
  border-top: 1px solid var(--studio-line); scroll-margin-top: 115px;
}
.studio-section-heading { margin: 0 0 22px; }
.studio-section-heading h2, .studio-services-v3 h2 {
  margin: 0; font-size: clamp(1.8rem, 3.4vw, 2.9rem); font-weight: 650; line-height: 1.12; letter-spacing: -.045em;
}
.studio-shell-v3 .db-catalog-project--aiprice {
  background: #172339; border: 1px solid #293750; border-radius: 14px;
}
.studio-shell-v3 .db-catalog-project--aiprice .db-catalog-type { color: #bdd1f0; }
.studio-shell-v3 .db-catalog-stage--aiprice { outline-color: #bfd5ff40; }
.studio-services-v3 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 35px 7vw; padding: clamp(28px, 5.5vw, 76px);
  border: 1px solid var(--studio-line); border-radius: 14px; background: #edf2fa;
}
.studio-services-v3 p { max-width: 35ch; margin: 20px 0 24px; color: var(--studio-muted); font-size: 1.1rem; line-height: 1.58; }
.studio-services-v3 dl { margin: 0; }
.studio-services-v3 dl > div { padding: 16px 0; border-bottom: 1px solid var(--studio-line); }
.studio-services-v3 dl > div:first-child { padding-top: 0; }
.studio-services-v3 dt { font-size: 1.1rem; font-weight: 650; }
.studio-services-v3 dd { margin: 6px 0 0; color: var(--studio-muted); }

/* Locale controls typography only. */
html:lang(zh) .studio-shell-v3 .brand { letter-spacing: 0; }
html:lang(zh) .studio-hero-heading h1 {
  font-size: clamp(2.65rem, 5.3vw, 4.1rem); font-weight: 600; line-height: 1.18; letter-spacing: .01em;
}
html:lang(zh) .studio-hero-intro p { max-width: 28em; line-height: 1.75; white-space: pre-line; }
html:lang(zh) .studio-wish-guide h2 { font-weight: 600; letter-spacing: 0; }
html:lang(zh) :is(.studio-section-heading, .studio-services-v3) h2 {
  font-size: clamp(1.8rem, 3.15vw, 2.5rem); font-weight: 600; line-height: 1.26; letter-spacing: .01em;
}

.studio-shot-trigger, .studio-shot-close {
  display: grid; place-items: center; inline-size: 44px; block-size: 44px;
  padding: 0; cursor: pointer;
}
.studio-shot-trigger[hidden] { display: none; }
.studio-shot-trigger {
  position: absolute; z-index: 1; inset: auto 12px 12px auto;
  color: #fff; border: 1px solid #9aacc2; border-radius: 10px;
  background: #18263ced; box-shadow: 0 3px 12px #050b1959;
}
.studio-shot-trigger:is(:hover, :focus-visible) { background: #345378; }
.studio-shell-v3 .studio-shot-trigger:focus-visible { outline-color: #c5ddff; outline-offset: -3px; }
.is-studio-shot-source { visibility: hidden; }
.studio-shot-trigger svg, .studio-shot-close svg { width: 20px; height: 20px; }
.studio-shot-dialog {
  width: min(1100px, calc(100% - 32px), calc((100dvh - 100px) * 1.776)); max-width: none;
  padding: 0; color: #e9effa; background: transparent; border: 0; overflow: visible;
}
.studio-shot-dialog::backdrop { background: #101b2ad6; }
.studio-shot-dialog header {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 7px 9px 7px 18px; background: #172339; border-radius: 13px 13px 0 0;
}
.studio-shot-dialog h2 { font-size: 1rem; font-weight: 650; letter-spacing: 0; margin: 0; }
.studio-shot-close { color: inherit; border: 0; border-radius: 8px; background: transparent; }
.studio-shot-close:hover { background: #334563; }
.studio-shell-v3 .studio-shot-close:focus-visible { outline-color: #c5ddff; outline-offset: -2px; }
.studio-shot-image {
  display: block; width: 100%; height: auto; border-radius: 0 0 13px 13px; background: #101b2a;
}

@media (max-width: 840px) {
  .studio-shell-v3 .nav { justify-self: stretch; justify-content: space-between; }
  .studio-shell-v3 .nav a, .studio-shell-v3 .nav button { min-height: 44px; padding-inline: 3px; }
  .studio-shell-v3 .nav { display: flex; width: 100%; gap: 0; }
  .studio-shell-v3 .nav :is(a, button) { flex: 0 0 auto; }
  .studio-hero-v3 { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 39px 0 37px; }
  .studio-wish-guide { max-width: 34rem; }
  .studio-work-v3 { scroll-margin-top: 150px; }
}
@media (max-width: 540px) {
  .studio-shell-v3 .nav { gap: 0; }
  .studio-shell-v3 .nav a, .studio-shell-v3 .nav button { font-size: .75rem; }
  .studio-shell-v3 .header-inner { row-gap: 3px; padding-block: 7px 3px; }
  .studio-hero-v3 { padding-top: 34px; }
  .studio-hero-heading h1 { font-size: clamp(2.3rem, 11.6vw, 3.4rem); }
  html:lang(zh) .studio-hero-heading h1 { font-size: clamp(2.1rem, 10vw, 2.75rem); }
  .studio-hero-intro { margin-top: 16px; }
  .studio-hero-actions { margin-top: 15px; }
  .studio-wish-guide { padding: 17px 19px; }
  .studio-wish-guide::after { inset: 15px 17px auto auto; width: 23px; height: 23px; }
  .studio-wish-guide li { padding: 8px 0; }
  .studio-work-v3 { padding-top: 22px; }
  .studio-services-v3 { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  .studio-hero-v3.is-opening .studio-hero-heading h1 > span > span { animation: studio-title-in 660ms var(--studio-ease) both; }
  .studio-hero-v3.is-opening .studio-hero-heading h1 > span + span > span { animation-delay: 83ms; }
  .studio-hero-v3.is-opening .studio-hero-intro { animation: studio-settle 550ms 145ms var(--studio-ease) both; }
  .studio-hero-v3.is-opening .studio-wish-guide { animation: studio-settle 590ms 190ms var(--studio-ease) both; }
  .studio-hero-v3.is-opening .studio-wish-guide li { animation: studio-settle 430ms 270ms var(--studio-ease) both; }
  .studio-hero-v3.is-opening .studio-wish-guide li:nth-child(2) { animation-delay: 324ms; }
  .studio-hero-v3.is-opening .studio-wish-guide li:nth-child(3) { animation-delay: 378ms; }
  .studio-cta { transition: background-color 160ms ease, scale 160ms var(--studio-ease); }
  .studio-cta:active { scale: .98; }
  .studio-cta svg { transition: transform 220ms var(--studio-ease); }
  .studio-cta:is(:hover, :focus-visible) svg { transform: translateX(4px); }
  .studio-shot-dialog[open]::backdrop { animation: studio-shot-fade 340ms ease both; }
  .studio-shot-dialog[open] header { animation: studio-shot-fade 260ms 100ms ease both; }
  .studio-shot-dialog[data-closing]::backdrop { animation: studio-shot-fade 290ms ease reverse both; }
  .studio-shot-dialog[data-closing] header { animation: studio-shot-fade 140ms ease reverse both; }
  @keyframes studio-shot-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes studio-title-in { from { transform: translateY(106%); } to { transform: translateY(0); } }
  @keyframes studio-settle { from { opacity: .4; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
}

/* A common page header with space for the action or content immediately below. */
.studio-page-intro {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(15rem, .8fr);
  align-items: end; column-gap: clamp(24px, 5.2vw, 76px);
  padding: clamp(42px, 6.25vw, 90px) 0 clamp(24px, 3.4vw, 44px);
  margin-bottom: clamp(22px, 3.2vw, 42px);
}
.studio-page-intro::after {
  content: ""; position: absolute; inset: auto 0 0; height: 1px;
  background: var(--studio-line); transform-origin: left center;
}
.studio-page-intro > h1, .studio-shell-v3 :is(.page-hero-product-detail, .terms-head) h1 {
  margin: 0; font-size: clamp(2.55rem, 5.6vw, 4.65rem); line-height: 1.06;
  font-weight: 660; letter-spacing: -.05em; text-wrap: balance;
}
.studio-page-intro > p, .studio-shell-v3 :is(.page-hero-product-detail, .terms-head) p {
  max-width: 41ch; margin: 0; font-size: clamp(1rem, 1.3vw, 1.16rem);
  line-height: 1.63; color: var(--studio-muted);
}
html:lang(zh) .studio-page-intro > h1,
html:lang(zh) .studio-shell-v3 :is(.page-hero-product-detail, .terms-head) h1 {
  font-size: clamp(2.15rem, 4.5vw, 3.65rem); font-weight: 600; line-height: 1.2; letter-spacing: .01em;
}
html:lang(zh) .studio-page-intro > p { max-width: 26em; line-height: 1.75; }
.studio-shell-v3 .route-note {
  margin-top: 0; min-height: 60px; padding: 9px clamp(16px, 2.35vw, 28px);
  border-color: var(--studio-line); border-radius: 12px; background: var(--studio-tint);
}
.studio-shell-v3 .db-catalog + .route-note { margin-top: 28px; }
.studio-shell-v3 .text-link {
  color: var(--studio-accent); font-weight: 650; transition: color 160ms ease;
}
.studio-shell-v3 .text-link:hover { gap: 12px; color: #233f68; }
.studio-shell-v3 .text-link > [aria-hidden] { display: inline-block; }
.studio-shell-v3 .button-dark {
  min-height: 48px; color: #fff; background: var(--studio-accent); border-radius: 8px; box-shadow: none;
}
.studio-shell-v3 .button-dark:not(:disabled):hover { background: #30496f; }
.studio-shell-v3 .button-dark:disabled { opacity: .52; }
.studio-shell-v3 :is(.section-kicker, .eyebrow) { color: var(--studio-accent); }
.studio-shell-v3 .eyebrow-dot { background: var(--studio-accent); box-shadow: none; }
.studio-shell-v3 :is(.form, .wish-list) {
  padding: clamp(20px, 3.2vw, 37px);
  border-color: var(--studio-line); border-radius: 14px; box-shadow: 0 8px 30px #2034500a;
}
.studio-shell-v3 :is(.form, .wish-list, .build-aside, .journal-entry, .detail-layout) h2 {
  font-size: clamp(1.55rem, 2.55vw, 2.3rem); font-weight: 650; line-height: 1.18; letter-spacing: -.035em;
  text-wrap: balance;
}
html:lang(zh) .studio-shell-v3 :is(.form, .wish-list, .build-aside, .journal-entry, .detail-layout) h2 {
  font-size: clamp(1.42rem, 2.25vw, 2.1rem); font-weight: 600; line-height: 1.32; letter-spacing: .01em;
}
.studio-shell-v3 .form label:not(.trap):not(.clickwrap-label),
.studio-shell-v3 .wish-list label { font-weight: 650; }
.studio-shell-v3 :is(.form input:not([type="checkbox"]), .form textarea, .form select, .stage-filter) {
  background: #fcfdff; border-color: var(--studio-control-line); border-radius: 9px;
}
.studio-shell-v3 :is(.form input:not([type="checkbox"]), .form textarea, .form select):focus {
  border-color: var(--studio-accent); box-shadow: 0 0 0 3px #3e5a8624;
}
.studio-shell-v3 :is(.clickwrap, .private-callout, .wish-list li .stage-note) { background: var(--studio-tint); }
.studio-shell-v3 .wish-list li .stage-note { border-color: var(--studio-control-line); }
.studio-shell-v3 .wish-list button {
  min-height: 44px; color: var(--studio-accent); background: var(--studio-tint); border-color: var(--studio-control-line);
}
.studio-shell-v3 .wish-list button:not(:disabled):hover { background: #e1e9f6; }
.studio-shell-v3 .wish-layout { margin-top: clamp(16px, 2.3vw, 28px); }

.studio-shell-v3 .build-services { margin-top: 0; }
.studio-shell-v3 .service-card {
  display: flex; flex-direction: column; align-items: start;
  padding: 17px clamp(15px, 2vw, 23px) 16px; border: 1px solid var(--studio-line);
  border-radius: 12px; background: var(--surface);
}
.studio-shell-v3 .service-card > h3 { font-weight: 650; }
.studio-shell-v3 .service-card > .text-link { margin-top: auto; padding: 10px 0 0; }
html:lang(zh) .studio-shell-v3 :is(.service-card, .process-step) h3 { letter-spacing: .01em; }
.studio-shell-v3 .build-layout { gap: clamp(22px, 4vw, 48px); margin-top: clamp(24px, 4vw, 54px); }
.studio-shell-v3 .build-aside .step-number { background: var(--studio-tint); }
.studio-shell-v3 .journal-entry {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start;
  column-gap: clamp(24px, 6vw, 80px); margin-top: 0; padding: clamp(15px, 2.4vw, 30px) 0 clamp(28px, 4vw, 48px);
}
.studio-shell-v3 .journal-entry + .journal-entry { border-top-color: var(--studio-line); }
.studio-shell-v3 .journal-entry p { max-width: 66ch; }
.studio-shell-v3 .journal-actions { gap: 4px 22px; }
.studio-shell-v3 .journal-actions button { padding: 0; text-align: left; }

/* Direct studio links share the shell; embedded products keep their own interface. */
.studio-shell-v3 :is(.page-hero-product-detail, .terms-head) {
  display: block; min-height: 0; margin: 0; padding: clamp(38px, 6.1vw, 84px) 0 clamp(24px, 3.4vw, 44px);
  color: var(--studio-ink); background: none; border: 0; border-bottom: 1px solid var(--studio-line); border-radius: 0;
}
.studio-shell-v3 .page-hero-product-detail::after { content: none; }
.studio-shell-v3 :is(.page-hero-product-detail, .terms-head) h1 { margin: 12px 0 14px; }
.studio-shell-v3 .page-hero-product-detail p { margin-bottom: 18px; }
.studio-shell-v3 :is(.page-hero-product-detail .button-ghost, .detail-layout .button-ghost) {
  color: var(--studio-accent); background: var(--studio-tint); border-color: var(--studio-control-line);
}
.studio-shell-v3 .detail-layout.section-block { margin-top: clamp(28px, 5vw, 62px); }
.studio-shell-v3 .terms-list { margin-top: 20px; }

@media (max-width: 760px) {
  .studio-page-intro { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 36px; }
  .studio-shell-v3 .service-grid { gap: 12px; }
  .studio-shell-v3 .journal-entry { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .studio-shell-v3 .journal-entry h2 { margin-bottom: 6px; }
}
@media (prefers-reduced-motion: no-preference) {
  .studio-shell-v3 :is(.studio-page-intro, .page-hero-product-detail, .terms-head) h1 { animation: studio-page-in 420ms var(--studio-ease) both; }
  .studio-shell-v3 :is(.studio-page-intro, .page-hero-product-detail, .terms-head) p { animation: studio-page-in 420ms 65ms var(--studio-ease) both; }
  .studio-shell-v3 .studio-page-intro::after { animation: studio-page-rule 420ms var(--studio-ease) both; }
  .studio-shell-v3 .site-view:not([hidden]) :is(.wish-layout, .build-services, .journal-entry:first-of-type) {
    animation: studio-page-in 420ms 95ms var(--studio-ease) both;
  }
  .studio-shell-v3 .text-link > [aria-hidden] { transition: transform 190ms var(--studio-ease); }
  .studio-shell-v3 .text-link:is(:hover, :focus-visible) > [aria-hidden] { transform: translateX(3px); }
  @keyframes studio-page-in { from { opacity: .72; transform: translateY(9px); } to { opacity: 1; transform: none; } }
  @keyframes studio-page-rule { from { opacity: .48; transform: scaleX(.89); } to { opacity: 1; transform: none; } }
}