@charset "UTF-8";

/* User-selected scheme B. Official, unmodified HarmonyOS Sans variable fonts. */
@font-face {font-family:"HarmonyOS Sans";src:url("assets/fonts/harmony/HarmonyOS_Sans.ttf") format("truetype");font-style:normal;font-weight:40 900;font-display:swap;}
@font-face {font-family:"HarmonyOS Sans SC";src:url("assets/fonts/harmony/HarmonyOS_Sans_SC.ttf") format("truetype");font-style:normal;font-weight:40 900;font-display:swap;}


/* G31 warm-grey text hierarchy. Load after page layout styles.
   The source images, brand marks and technical demonstration colours stay intact. */
:root {
  --site-page: #fff;
  --site-card: #f6f6f7;
  --site-soft: #f2f2f3;
  --site-deep: #f6f6f7;
  --site-deep-card: #f6f6f7;
  --site-body: #7b746e;
  --site-ink: var(--site-body);
  --site-heading: #534A43;
  --site-muted: var(--site-body);
  --site-line: #e3e4e6;
  --site-accent: var(--site-heading);
  --site-on-deep: #eeedec;
  --site-muted-on-deep: #c8c5c3;
  --site-focus: #98928e;
  --site-action-text: var(--site-body);
  --site-action-strong: var(--site-heading);
  --site-action-border: #dddbd9;
  --site-action-fill: #fff9;
  --site-action-hover: #eeedec;
  --site-action-disc: #e7e6e5;
  --site-label-size: 15px;
  --site-source-size: 14px;
  --site-card-shadow: 0 14px 36px -24px rgba(42,46,51,.18),inset 0 1px 0 rgba(255,255,255,.96),inset 0 0 0 1px rgba(225,227,230,.6);
  --ink: var(--site-ink);
  --sub: var(--site-muted);
  --paper: var(--site-card);
  --blue: var(--site-accent);
  --line: var(--site-line);
}

body { background: #fff; color: var(--site-ink); font-family: var(--site-font-family, "ML Site Montserrat", "HarmonyOS Sans SC", "HarmonyOS Sans", sans-serif); }
button,input,select,textarea { font-family: inherit; }
.page-technology {
  --tech-ink: var(--site-ink);
  --tech-muted: var(--site-muted);
  --tech-line: var(--site-line);
  --tech-accent: var(--site-accent);
  background: #fff;
  color: var(--site-ink);
}
.page-photography {
  --photo-ink: var(--site-ink);
  --photo-muted: var(--site-muted);
  background: #fff;
  color: var(--site-ink);
}
.intro-section,.brand-section,.work-section,.film-section,.contact-section,.stability-section,
.photo-dark,.page-technology .site-footer { background: #fff; color: var(--site-ink); }
.intro-heading h1,.person-top h2,.section-heading h2,.art-heading h2,
.work-copy h2,.work-copy h3,.space-copy h2,.space-copy h3,
.page-heading h1,.discipline-title,.case-collection-heading h2,.live-case h3,
.curation-name h2,.curation-copy h3,.curation-venues li,.contact-section h2,
.photo-intro h1,.photo-chapter-heading h2,.photo-exhibition-heading h2,
.tech-hero h1,.section-lead h2,.grading-feature-heading h3,.virtual-guide h3,
.maintenance-copy h3,.service-hero h1,.service-chapter-head h2,
.service-discovery-head h2 { color: var(--site-heading); }
.intro-heading h1 span { background: none; color: var(--site-heading); }
.section-heading h2 span,.art-heading h2 span,.light h2 span,
.contact-section h2 span { color: var(--site-body); }

/* English labels and numbers have visible weight without enlarging whole blocks. */
.eyebrow,.page-technology .eyebrow,.photo-intro .eyebrow,.more-case .eyebrow,
.person-en,.film-kicker,.art-type span,.collaboration-label span,
.discipline-title small,.workflow-step-label,.small-number,
.color-preview-head .small-number,.gamut-top,#tech-grading .grading-case-kicker,
.maintenance-step-kicker,.service-summary span,.service-discovery-card span {
  font-size: var(--site-label-size);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: .065em;
}
.eyebrow,.page-technology .eyebrow,.photo-intro .eyebrow,.person-en,
.art-type span,.collaboration-label span,.discipline-title small,
.workflow-step-label,.small-number,.gamut-top,.maintenance-step-kicker,
.service-summary span,.service-discovery-card span { color: var(--site-muted); }
.discipline-number,.photo-number,.photo-chapter-count,.gallery-count,
.maintenance-steps button > span,.photo-contents a span {
  font-size: var(--site-label-size);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .025em;
  line-height: 1.55;
  color: var(--site-muted);
}
.photo-year { font-size: 19px; font-weight: 600; color: var(--site-muted); font-variant-numeric: tabular-nums; }
.brand-caption,.brand-name-label,.creator-platform,.art-tags,.art-row .art-owner,
.site-footer,.film-play small,.desert-concept-media figcaption,
.inline-evidence figcaption,.section-footnote,.evidence-note,
.platform-figure figcaption,.virtual-figure figcaption,.virtual-gesture small,
.expo-media-grid figcaption,.expo-media-grid figcaption b,
#tech-grading .grading-case-source,#tech-grading .grading-case-hint,
#tech-grading .grading-software small,.maintenance-frame > p,
.maintenance-comparison-note,.maintenance-focus h4,.maintenance-focus li,
.service-hero-visual figcaption,.service-photo-link,.service-note {
  font-size: var(--site-source-size);
  line-height: 1.7;
}
.site-footer span:nth-child(2) { letter-spacing: .065em; font-weight: 600; }
#tech-grading .grading-software small,.film-play small { font-weight: 600; }
.brand-caption,.brand-name-label,.creator-platform,.art-tags,.art-row .art-owner,
.site-footer,.collaboration-label,.creator-name,.star-name,.brand-text-list,
.contact-links,.person-role,.person-description,.film-caption .text-button,
.case-focus,.case-name,.case-image figcaption,.selection-item figcaption {
  color: var(--site-muted);
}

/* Profile cards share a light material; their images remain original. */
.person-card,.person-liu {
  background: var(--site-card);
  color: var(--site-ink);
  box-shadow: var(--site-card-shadow);
}
.person-card::before,.person-liu::before {
  background: radial-gradient(circle at var(--px,75%) var(--py,10%),#fff,transparent 72%);
}
.person-card:hover { box-shadow: 0 20px 40px -27px #363b422e,inset 0 0 0 1px #e1e3e5; }
.person-liu .person-en,.person-liu .person-role,.person-liu .person-description { color: var(--site-muted); }
.person-liu .text-button { color: var(--site-accent); }
.scroll-note { color: var(--site-muted); font-size: var(--site-source-size); }
.scroll-line { background: linear-gradient(#a2a6ab,transparent); }
.brand-logo,.disciplines,.people-group,.contact-grid article { border-color: var(--site-line); }
.creator-avatar,.star-portrait { background: var(--site-soft); border-color: var(--site-line); }

/* Light cards provide separation on a white page instead of full dark bands. */
.work-stage,.space-stage,.space-stage.desert-space,.curation-feature,.case-oes,
.photo-edition,.photo-edition:nth-child(2) {
  background: var(--site-card);
  color: var(--site-ink);
  box-shadow: var(--site-card-shadow);
}
.space-stage::after { background: linear-gradient(90deg,#f6f6f7 0,#f6f6f7ee 21%,#f6f6f766 55%,transparent 82%); }
.light .eyebrow,.work-copy .eyebrow,.space-copy .eyebrow,
.page-heading.light .eyebrow,.photo-edition:nth-child(2) .eyebrow { color: var(--site-muted); }
.light > p:last-child:not(.eyebrow),.page-heading.light > p:last-child:not(.eyebrow),
.work-copy > p:not(.eyebrow),.space-copy > p:not(.eyebrow),
.desert-concept-media figcaption,.photo-edition:nth-child(2) .edition-author,
.photo-edition:nth-child(2) .edition-exhibit > p { color: var(--site-muted); }
.concept-play-label,button.concept-play-label { color: var(--site-accent); }
.choice-group { background: #e9eaec; box-shadow: inset 0 1px 2px #474b5008; }
.choice { color: var(--site-body); }
.choice.active { background: #fff; color: var(--site-body); box-shadow: 0 2px 8px #42474d12; }
.round-button { color: var(--site-ink); border-color: var(--site-action-border); background: var(--site-action-fill); }
.round-button:hover { background: var(--site-action-hover); }
.round-button .plus,.plus { background: var(--site-action-disc); color: var(--site-body); }
.floating-frame { background: #dcdfe2; }
.floating-frame.rear,.frame-stage:hover .rear { box-shadow: 0 20px 36px #30353b1a; }
.floating-frame.front,.frame-stage:hover .front { box-shadow: 0 26px 46px #30353b2e; }
.film-stage { background: var(--site-card); color: var(--site-on-deep); box-shadow: var(--site-card-shadow); }
/* Text over photographic covers needs a light neutral foreground. */
.film-kicker,.film-play small { color: var(--site-on-deep); }
.play-icon { background: #f6f6f7; }
.play-icon::after { border-left-color: var(--site-body); }
.pill-link,.tech-button { background: #eceeef; color: var(--site-body); box-shadow: inset 0 1px 0 #fff,0 4px 12px #41464c0a; }
.pill-link:hover,.tech-button:hover { background: #e1e4e6; color: var(--site-body); }
.selection-image,.live-grid .selection-image,.art-photo-preview { background: var(--site-card); }
.discipline-link:hover { background: var(--site-card); }
.discipline-open { background: #eceef0; color: var(--site-body); }
.discipline-link:hover .discipline-open { background: #dfe2e5; color: var(--site-body); }
.edition-exhibit > span { color: var(--site-body); font-weight: 500; }
.curation-focus,.painting-note > p { color: var(--site-muted); }
.curation-copy h3 { text-wrap: balance; }
.case-open:hover { color: var(--site-body); }

/* The full-frame gallery is a light viewing surface; its geometry stays unchanged. */
dialog { background: #fff; color: var(--site-ink); box-shadow: 0 26px 85px #373c4533,inset 0 1px 0 #fff; }
dialog::backdrop { background: #696d754d; }
.dialog-close { background: #edeef0; color: var(--site-body); box-shadow: inset 0 1px 0 #fff; }
.gallery-view { background: var(--site-card); }
.gallery-nav button { background: #eceef0; color: var(--site-body); }
.film-player-state button { background: #eceef0; color: var(--site-ink); }
.documentary-play { background: #f2f3f4d9; box-shadow: 0 3px 18px #3f454d1f; }
.documentary-button:hover .documentary-play { background: #fff; }

/* Light neutral framing for technology; no colour filter is applied to media. */
.hero-image { background: radial-gradient(ellipse at 50% 20%,#fff,#f0f1f2 90%); box-shadow: var(--site-card-shadow); }
.hero-image img,.hero-image .hero-fashion { border-color: #ffffffe6; box-shadow: 0 20px 32px #373d4429; }
.hero-image .hero-fashion img { box-shadow: none; }
.workflow-visual,.proof-image { background: var(--site-card); }
.workflow-plan .workflow-visual { background: #fff; border-color: var(--site-line); }
.workflow-step figcaption p,.workflow-outcomes span { color: var(--site-muted); font-size: var(--site-source-size); }
.workflow-outcomes { border-color: var(--site-line); }
.workflow-step-label i { color: var(--site-body); }
.workflow-live-dot,.source-dot { background: #949ca3; }
.source-dot { box-shadow: 0 0 0 7px #8f979f14; }
.inline-evidence,.platform-figure,.virtual-figure,.virtual-real,.grading-panel,
.gamut-figure,.gamut-color-preview,.maintenance-feature {
  background: var(--site-card);
  color: var(--site-ink);
  border-color: var(--site-line);
  box-shadow: var(--site-card-shadow);
}
.gamut-controls label span { color: var(--site-body); font-size: var(--site-label-size); font-weight: 600; }
.gamut-top .drag-hint { font-size: var(--site-source-size); font-weight: 400; letter-spacing: .02em; }
.gamut-controls input:checked + span { background: #e6e8ea; border-color: #dce0e3; color: var(--site-body); }
.gamut-controls input:focus-visible + span { outline-color: var(--site-focus); }
.gamut-figure figcaption { color: var(--site-muted); border-color: var(--site-line); font-size: var(--site-source-size); }
.gamut-with-preview .gamut-explanation { border-color: var(--site-line); }
.gamut-with-preview .gamut-explanation > p,.gamut-with-preview .capture-flow span { font-size: var(--site-source-size); }
.capture-flow li::before { background: #969ea5; }
.capture-flow li:not(:last-child)::after { background: #d6dade; }
.color-preview-head p { color: var(--site-body); font-size: 14px; }
.color-study-labels span { background: #f6f6f7e8; color: var(--site-body); font-size: 13px; }
.inline-evidence figcaption,.evidence-note,.platform-source,.platform-figure figcaption,
.platform-standards span,.virtual-guide > p:not(.eyebrow),.virtual-guide dd,
.virtual-gesture small,.virtual-figure figcaption,.tech-contact p { color: var(--site-muted); }
.platform-standards > div,.virtual-guide dl > div { border-color: var(--site-line); }
.platform-standards span,.virtual-guide dd { font-size: var(--site-source-size); }
.platform-source { font-size: var(--site-source-size); }
.source-arrow { color: var(--site-body); }
.screen { border-color: #c6cbcf; background: #e9ebed; box-shadow: 0 14px 20px -12px #434b5529; }
.virtual-guide .virtual-gesture { color: var(--site-body); }
.virtual-real .virtual-label { background: #f6f6f7ed; color: var(--site-body); font-size: 13px; }
.virtual-real .virtual-divider b { background: #f6f6f7; color: var(--site-body); box-shadow: 0 0 12px #48515a26; }
.virtual-real .virtual-compare { box-shadow: 0 16px 32px #3b434c1a; }

/* The DaVinci photograph is untouched; its lower edge fades into the shared card. */
#tech-grading .grading-feature,#tech-grading .grading-studio-image { background: var(--site-card); color: var(--site-ink); }
#tech-grading .grading-feature { box-shadow: var(--site-card-shadow); }
#tech-grading .grading-studio-image::after {
  height: 28%;
  background: linear-gradient(180deg,rgba(246,246,247,0),#f6f6f7);
}
#tech-grading .grading-story-intro h3,#tech-grading .grading-case h4 { color: var(--site-heading); }
#tech-grading .grading-story-intro > p,#tech-grading .grading-case figcaption,
#tech-grading .grading-software small,#tech-grading .grading-case-kicker,
#tech-grading .grading-case-source { color: var(--site-muted); }
#tech-grading .grading-case-focus,#tech-grading .grading-case-hint { color: var(--site-body); }
#tech-grading .grading-case-focus { font-size: var(--site-source-size); }
#tech-grading .grading-case-grid,#tech-grading .grading-case + .grading-case,
#tech-grading .grading-case-focus { border-color: #dfe2e5; }
#tech-grading .grading-case .proof-image { background: #eceef0; }

/* Former dark sections return to the white page; content frames carry the contrast. */
.stability-section,.photo-dark { border-block: 1px solid var(--site-line); }
.stability-section .eyebrow { color: var(--site-muted); }
.stability-section .lead-copy p,.redundancy-grid p,.redundancy-number span,
.expo-evidence p:not(.eyebrow),.expo-media-grid figcaption { color: var(--site-muted); }
.redundancy-number { color: var(--site-body); font-weight: 500; font-variant-numeric: tabular-nums; }
.redundancy-number span { color: var(--site-body); font-weight: 500; }
.redundancy-grid h3 span { font-size: var(--site-source-size); }
.redundancy-grid p,.expo-evidence p:not(.eyebrow) { font-size: var(--site-source-size); }
.redundancy-grid,.redundancy-grid article + article,.expo-evidence,.redundancy-animation { border-color: var(--site-line); }
.redundancy-lanes i { background: linear-gradient(90deg,#9aa1a7,#c3c8cc); }
.redundancy-lanes i::after { background: #a9b0b7; }
.redundancy-animation { background: var(--site-card); box-shadow: var(--site-card-shadow); }
.redundancy-animation figcaption { background: var(--site-card); color: var(--site-muted); font-size: var(--site-source-size); }
.expo-media-grid figcaption b { color: var(--site-body); }

/* Daily-review states retain their existing illustration effects and functionality. */
.maintenance-feature-head,.maintenance-human { font-size: var(--site-source-size); color: var(--site-muted); }
.maintenance-steps,.maintenance-focus,.maintenance-principle { border-color: var(--site-line); }
.maintenance-steps button { color: var(--site-body); }
.maintenance-steps button b { font-size: var(--site-label-size); font-weight: 600; }
.maintenance-steps button > span { color: var(--site-body); }
.maintenance-steps button:hover { background: #fff9; color: var(--site-body); }
.maintenance-steps button[aria-pressed=true] { background: #fff; border-color: #dfe3e6; color: var(--site-body); box-shadow: 0 3px 12px #42484f0a; }
.maintenance-steps button[aria-pressed=true] > span { color: var(--site-body); }
.maintenance-frame { background: #fff; border-color: #e0e3e6; }
.maintenance-reference { border-color: #c5ccd2; }
.maintenance-frame figcaption { color: var(--site-body); font-size: var(--site-source-size); }
.maintenance-frame-dot { border-color: #9ca5ac; }
.maintenance-reference .maintenance-frame-dot { background: #9ca5ac; }
.maintenance-frame > p,.maintenance-comparison-note,.maintenance-step-description,
.maintenance-focus h4 { color: var(--site-muted); }
.maintenance-step-description { font-size: 14px; }
.maintenance-compare-mark { color: var(--site-body); }
.maintenance-focus li { color: var(--site-body); background: #fff9; border-color: #e0e4e7; }
.maintenance-result,.maintenance-principle { color: var(--site-body); font-size: var(--site-source-size); }
.maintenance-principle i { color: var(--site-body); }

/* Photography keeps its full-frame presentation on a white viewing surface. */
.photo-intro-copy,.photo-author,.photo-exhibition-heading > p:last-child,
.photo-exhibition-list p,.photo-exhibition-list p span { color: var(--site-muted); }
.photo-chapter-heading,.photo-still-life,.photo-exhibitions,
.photo-exhibition-list article,.page-photography .page-contact,
.photo-dark .photo-chapter-heading { border-color: var(--site-line); }
.photo-dark .eyebrow,.photo-dark figcaption,.photo-dark .photo-chapter-count,
.photo-dark .photo-number { color: var(--site-muted); }
.page-photography #detail-dialog { background: #fff; color: var(--site-ink); }
.page-photography #detail-dialog::backdrop { background: #696d7566; }
.page-photography .dialog-close,.page-photography .gallery-nav button { background: #edeff1; color: var(--site-body); }
.page-photography .dialog-inner > .eyebrow { color: var(--site-muted); font-size: var(--site-label-size); font-weight: 600; letter-spacing: .065em; }
.page-photography .gallery-nav p { color: var(--site-body); }
.page-photography .gallery-count {
  /* Existing photography rules mark these two properties important. */
  font-size: var(--site-label-size) !important;
  color: var(--site-body) !important;
  font-weight: 600;
}

/* Local contents inherit the neutral hierarchy; the main navigation is separate. */
.category-nav { background: #fff; border-color: var(--site-line); }
.category-nav a,.photo-contents a { color: var(--site-muted); border-color: var(--site-line); }
.category-nav a:hover,.category-nav a[aria-current=page],.photo-contents a:hover { color: var(--site-body); }
.category-nav a[aria-current=page]::after { background: #9fa8b0; }
.page-technology .tech-nav-bar .tech-index a { font-size: 14px; color: var(--site-muted); }
.page-technology .tech-nav-bar .tech-index span { font-size: var(--site-label-size); font-weight: 600; color: var(--site-body); }
.page-technology .tech-nav-bar .tech-index a:hover { background: #f4f5f6; color: var(--site-body); }
.page-technology .tech-nav-bar .tech-index a[aria-current=location] { background: #eceff1; color: var(--site-body); }

/* Action guidance stays normal weight, separate from editorial labels. */
.action-guide,button.concept-play-label,#tech-grading .grading-case-hint,
.service-photo-link,.virtual-guide .virtual-gesture { font-weight: 400; }
@media(max-width:1050px) and (min-width:601px) {
  .page-technology .tech-nav-bar .tech-index { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width:760px) {
  :root { --site-label-size: 14px; --site-source-size: 13px; }
  .space-stage::after { background: linear-gradient(180deg,#f6f6f7 5%,#f6f6f7f0 36%,#f6f6f711 70%); }
  .maintenance-feature-head { flex-wrap: wrap; gap: 7px 16px; }
  .maintenance-steps button { flex-wrap: wrap; align-content: center; gap: 4px 7px; }
  .maintenance-steps button b { font-size: var(--site-label-size); line-height: 1.5; }
  .maintenance-frame figcaption { align-items: flex-start; }
  .maintenance-frame-dot { margin-top: 7px; }
  .maintenance-principle { flex-wrap: wrap; justify-content: center; gap: 6px 10px; }
  .gamut-top { gap: 8px 14px; }
}

/* Required font credit, kept with the existing footer. */
.site-footer {flex-wrap:wrap;}
.site-footer .site-font-note {flex-basis:100%;text-align:center;font-size:13px;font-weight:400;line-height:1.6;margin-top:4px;color:var(--site-muted);}
.site-font-note a {text-decoration:underline;text-underline-offset:3px;}
.site-font-note a:hover {color: var(--site-heading);}