/* Shared visual finish. Existing grids, assets and gallery geometry stay in their source styles. */
:root {
  --bg: #101113;
  --text: #f0f0f2;
  --muted: #a4a5ac;
  --line: #ffffff1c;
  --acid: #c6c2d9;
  --cyan: #bbb9cb;
  --pink: #c4b5c1;
  --violet: #b5aec7;
  --studio-accent: #b9b0cc;
  --studio-font: Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
  font-family: var(--studio-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html { overflow-x: clip; }
body { background: #101113; overflow-x: clip; }
body::before { opacity: .012; }
::selection { color: #f7f7fa; background: #625b76; }
a:focus-visible, button:focus-visible { outline: 2px solid #c3b8df; outline-offset: 4px; }
.cursor-glow, .cursor-tag { display: none; }
.site-header { background: #101113e8; border-bottom-color: #ffffff14; backdrop-filter: blur(22px); }
.brand { font-weight: 750; letter-spacing: -.06em; }
.brand span { color: #b9b0cc; text-shadow: none; }
.nav-links a { color: #b9b9c0; font-weight: 600; transition: color .2s; }
.nav-links a:hover { color: #fff; }
.language { color: #55565e; }
.language button { color: #95959e; }
.language button[aria-pressed=true] { color: #f2f1f5; }
.eyebrow { color: #ada8ba; letter-spacing: .12em; font-weight: 600; }
.hero-meta { color: #aaa9b2; font-size: .7rem; letter-spacing: .12em; }
.hero-meta span:first-child { color: #c2bdcf; }
.hero::after { background: linear-gradient(180deg,transparent 54%,#1011131f 64%,#10111380 72%,#101113ed 80%,#101113 100%),radial-gradient(ellipse at 50% 38%,#1011130f,#1011132e 46%,#10111380 100%); }
.about::before { background: linear-gradient(180deg,#101113,transparent); }
.hero h1 > span, html[lang=zh-CN] .hero h1 > span { font-family: var(--studio-font); font-weight: 550; color: #b5b4bd; letter-spacing: -.045em; }
.hero h1 > strong, html[lang=zh-CN] .hero h1 > strong {
  font-family: var(--studio-font); font-weight: 650; letter-spacing: -.045em;
  color: #f2f1f4; background: none; -webkit-text-fill-color: currentColor;
}
.hero-role-line { color: #aaa8b5; font-weight: 500; letter-spacing: .32em; }
.hero-motto { color: #a89abc; opacity: .3; animation: none; }
.hero-title-reference .hero-signature { color: #c0b6d0; text-shadow: none; animation: none; }
.hero-motto::after, .hero-signature::after { opacity: 0; }
.portrait-shell::before { opacity: .06; }
.portrait-shell img { animation: studioFloat 10s ease-in-out infinite; }
@keyframes studioFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.neon-cta {
  background: #ecebf0; color: #222128; border: 1px solid #ffffff40;
  box-shadow: 0 3px 14px #00000018; font-weight: 650;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.neon-cta:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px #00000025; }
.neon-cta b { color: #5a5467; }
.hero-foot { color: #9998a3; font-size: .7rem; font-weight: 500; letter-spacing: .055em; }
.hero-foot a { border-color: #ffffff30; color: #cbc8d5; font-size: 1.1rem; transition: border-color .2s, background .2s; }
.hero-foot a:hover { border-color: #b8b0c8; background: #ffffff08; }
.about h2, .expertise h2, .section-head h2, .contact h2,
html[lang=zh-CN] :is(.about h2,.expertise h2,.section-head h2,.contact h2) {
  font-family: var(--studio-font); font-weight: 650; letter-spacing: -.045em;
}
.about h2 { font-size: clamp(3.2rem,6.6vw,6.4rem); line-height: 1.18; }
.about-copy { color: #b7b7bf; font-weight: 400; line-height: 1.95; }
.about-stats { border-color: #ffffff1c; }
.about-stats > div + div { border-color: #ffffff1c; }
.about-stats strong { color: #d9d6e2; font-weight: 550; font-variant-numeric: tabular-nums; }
.about-stats span { color: #93929e; letter-spacing: .025em; }
.resume-highlights .eyebrow { color: #b5aabd; }
.resume-highlights h2 { font-weight: 650; letter-spacing: -.04em; line-height: 1.2; }
.resume-showcase::before { opacity: .45; }
.resume-preview { border-color: #ffffff25; box-shadow: 0 20px 48px #00000030; }
.resume-preview > span { color: #e6e2ed; font-weight: 600; letter-spacing: .1em; }
.resume-preview:hover, .resume-preview:focus-visible { transform: rotate(0) translateY(-3px); border-color: #b5aabd; box-shadow: 0 24px 55px #00000040; }
.resume-preview::after { opacity: .35; }
.resume-preview > b { font-weight: 600; }
.resume-highlight { background: transparent; }
.resume-highlight::before { background: linear-gradient(90deg,#b9b0cc08,transparent); }
.resume-highlight::after { opacity: .28; }
.resume-highlight:hover { transform: none; }
.resume-highlight:hover::after { opacity: .55; }
.resume-highlight h3 { font-weight: 600; }
.resume-highlight-number { background: #ffffff03; border-color: #ffffff20; border-radius: 8px; }
.resume-pdf-link { color: #c7bfd4; border-color: #b9b0cc55; font-weight: 600; letter-spacing: .04em; }
.resume-dialog, .gallery-dialog { background: #141519; border-color: #ffffff25; box-shadow: 0 30px 100px #0008; }
.resume-dialog header a { color: #d4ccdf; }
.resume-dialog header button:hover { border-color: #c7bfd4; color: #fff; }
.expertise { background: #e9e9ec; border: 1px solid #ffffff28; border-radius: 28px; color: #202126; }
.expertise h2, html[lang=zh-CN] .expertise h2 { font-size: clamp(2.7rem,5vw,5rem); line-height: 1.18; letter-spacing: -.04em; }
.expertise-intro > p { color: #64656e; line-height: 1.85; }
.expertise .eyebrow, .contact .eyebrow { color: #74727e; }
.skill-link { border-color: #23233124; padding-block: 26px; transition: background .22s, border-color .22s; }
.skill-link:last-child { border-color: #23233124; }
.skill-link::before { background: linear-gradient(90deg,#62557108,transparent); }
.skill-link:hover { transform: none; border-color: #77718160; background: #ffffff22; }
.skill-num { font-family: var(--studio-font); font-size: 2.35rem; font-weight: 450; letter-spacing: -.06em; color: #8b8794; font-variant-numeric: tabular-nums; }
.skill-link h3 { font-weight: 600; color: #27262e; }
.skill-link p { color: #66656f; }
.skill-link b { color: #746c82; font-weight: 400; }
.skill-link:hover b { color: #51465f; transform: translate(2px,-2px); }
.section-head h2 { font-size: clamp(3.4rem,6vw,6rem); }
.section-head > p { color: #aaa8b2; }
.project-card-v3 { border-color: #ffffff29; border-radius: 26px; background: #121315; box-shadow: 0 -10px 32px #0005; }
.project-card-v3:hover { border-color: #aaa1b86b; box-shadow: 0 -10px 36px #0006; }
.project-number { font-family: var(--studio-font); font-size: 3rem; font-weight: 450; color: #a6a0b2; font-variant-numeric: tabular-nums; }
.project-card-head h3 { font-weight: 600; }
.project-card-head p { font-family: var(--studio-font); font-weight: 500; color: #9995a4; letter-spacing: .04em; }
.project-open { border-color: #ffffff29; color: #d3cfdc; font-weight: 550; }
.project-card-v3:hover .project-open { color: #fff; border-color: #b8b0c666; background: #ffffff06; }
.project-panel { border-radius: 18px; }
.project-panel:not(.ui-image-panel) { background: #cec8d8; color: #24212b; }
.project-card-v3:nth-child(2) .project-panel:not(.ui-image-panel) { background: #353c51; color: #f1f0f5; }
.project-card-v3:nth-child(3) .project-panel:not(.ui-image-panel) { background: #c8cfbf; color: #252922; }
.project-panel::after { display: none; }
.project-card-v3:hover .project-panel { transform: none; }
.project-panel > strong { font-family: var(--studio-font); font-size: clamp(3.4rem,6.7vw,6.3rem); line-height: .98; font-weight: 650; letter-spacing: -.065em; }
.project-copy h4 { font-weight: 600; }
.project-copy p { font-weight: 400; }
.project-copy small { font-weight: 550; letter-spacing: .055em; }
.contact { background: #e7e8e9; color: #232328; border-radius: 28px 28px 0 0; }
.contact h2 { white-space: pre-line; font-size: clamp(3rem,6vw,6.25rem); line-height: 1.18; }
.contact-info > span { color: #8d839e; text-shadow: none; font-size: 5.5rem; }
.contact-info a, .contact-wechat, .contact-wechat strong { font-weight: 550; }
.contact-info a:hover { color: #695778; border-color: #695778; }
.contact-info a, .contact-wechat { border-color: #25233130; }
.contact-info p { color: #63626a; }
.contact-info small { color: #737079; letter-spacing: .025em; }
.contact-music { opacity: .52; }
.contact-music-note, .contact-music-note.is-inspired { text-shadow: 0 0 5px color-mix(in srgb,currentColor 25%,transparent); }
.contact-music-note::after { filter: blur(3px); }
.footer-name { font-family: var(--studio-font); font-size: 2.6rem; font-weight: 600; color: #a7a4af; -webkit-text-stroke: 0; letter-spacing: -.045em; }
.footer > div, .footer > a:nth-of-type(2) { color: #b4b1bd; }
.footer p { color: #8b8894; letter-spacing: .035em; }

/* The same visual language extends to the existing project pages. */
body.work-page { --page-accent: #b9b0cc !important; background: #101113; }
.work-page .language button[aria-pressed=true] { color: #f2f1f5; }
.work-page .nav-links a[aria-current=page] { color: #edeaf3; }
.detail-hero h1, html[lang=zh-CN] .detail-hero h1 { font-family: var(--studio-font); font-weight: 600; line-height: 1.07; letter-spacing: -.055em; white-space: pre-line; }
.detail-hero .route-code { font-family: var(--studio-font); font-weight: 450; opacity: .24; }
.detail-hero p { color: #aaa7b3; }
.detail-nav { background: #101113eb; border-color: #ffffff1c; }
.detail-nav a { color: #aeabb7; border-color: #ffffff25; transition: color .2s, background .2s, border-color .2s; }
.detail-nav a.active, .detail-nav a:hover { color: #eeebf4; border-color: #a79cb559; background: #b9b0cc0d; }
.collection-head h2, html[lang=zh-CN] .collection-head h2 { font-weight: 600; letter-spacing: -.035em; line-height: 1.2; }
.work-page .collection-section { --rail-accent: #afa6be !important; }
.collection-number { font-family: var(--studio-font); font-weight: 450; font-size: 3rem; letter-spacing: -.06em; color: #9992a6 !important; }
.collection-head p { color: #a5a2ae; }
.project-slot, .visual-carousel-window .project-slot { border-color: #ffffff25; background: #151619; border-radius: 18px; }
.project-slot::before { background: #ffffff04; }
.project-slot:hover { border-color: #a99fbf70; }
.slot-label { color: #aaa1ba; letter-spacing: .075em; }
.slot-icon { border-color: #ffffff29; color: #aaa2b9; }
.project-slot h3 { font-weight: 600; }
.media-slot { border-style: solid; border-color: #ffffff14 !important; color: #92909b; }
.media-slot.video::before { border-color: #b9b0cc50; color: #d0c7dc; }
.visual-carousel-toolbar { border-color: #ffffff1c; }
.visual-carousel-kicker { font-family: var(--studio-font); color: #96939f; font-weight: 500; letter-spacing: .08em; }
.visual-carousel-arrow { border-color: #ffffff29; background: #18191d; color: #dedbe4; }
.visual-carousel-arrow:hover:not(:disabled) { border-color: #b9b0cc70; background: #222129; transform: translateY(-1px); }
.visual-carousel-count { color: #b6afc4; font-weight: 500; letter-spacing: .06em; }
.visual-carousel-progress > span { background: #a49bae; box-shadow: none; }
.visual-carousel-hint { color: #938f9d; letter-spacing: .02em; font-family: var(--studio-font); }
.uploaded-work, .work-page:is([data-page="visual"],[data-page="3d"]) .visual-carousel-window .uploaded-work { background: #18191d; border-color: #ffffff25; border-radius: 18px; }
.uploaded-work:hover, .visual-carousel-window .uploaded-work:hover { border-color: #c4b8d16b; transform: none; }
.visual-carousel-window .uploaded-work > img, .visual-carousel-window .uploaded-work > video { background: #101113; }
.uploaded-caption h3 { font-weight: 600; font-size: 1.15rem; letter-spacing: -.02em; }
.uploaded-caption > span { color: #aba3b8; font-family: var(--studio-font); font-size: .73rem; }
.gallery-play { background: #17171cd9; color: #e2dce9; border-color: #ddd2eb50; backdrop-filter: blur(6px); }
.gallery-content h2, .detail-contact h2 { font-weight: 600; letter-spacing: -.035em; white-space: pre-line; }
body[data-page="visual"] .detail-hero::before { border-color: #ffffff12; box-shadow: none; }
body[data-page="visual"] .detail-hero::after { color: #9992a5; letter-spacing: .12em; }
body[data-page="visual"] .collection::before { opacity: .25; }
body[data-page="visual"] .collection-section::before, body[data-page="visual"] .collection-section::after { opacity: .22; }
.luoshen-showcase { --archive-accent: #c5ab8c; }
.luoshen-sticker-board { background: #171619; border-color: #ffffff25; }
.luoshen-sticker-board::before { opacity: .25; }
.luoshen-sticker { box-shadow: 0 10px 28px #0005; }
.luoshen-report-top { background: #d1bda4; }
.luoshen-source-link { border-color: #c5ab8c40; background: #c5ab8c08; }
.luoshen-source-link:hover { background: #c5ab8c12; }

@media(min-width:701px) {
  html[lang=en] .hero h1 > strong { font-size: clamp(3.2rem,10.5vw,9.75rem); }
}
@media(max-width:700px) {
  .nav-links a { font-size: .72rem; }
  .hero-role-line { letter-spacing: .23em; }
  .hero-foot { font-size: .64rem; }
  .about h2, html[lang=zh-CN] .about h2 { font-size: clamp(2.4rem,10vw,3.2rem); line-height: 1.25; }
  .expertise { border-radius: 22px; }
  .expertise h2, html[lang=zh-CN] .expertise h2 { font-size: 2.7rem; }
  .skill-num { font-size: 1.9rem; }
  .section-head h2, html[lang=zh-CN] .section-head h2 { font-size: 2.9rem; }
  .project-card-v3 { border-radius: 22px; }
  .project-number { font-size: 2.3rem; }
  .project-panel > strong { font-size: clamp(3rem,16vw,4.8rem); }
  .project-panel { border-radius: 14px; }
  .contact { border-radius: 22px 22px 0 0; }
  .contact h2 { font-size: clamp(2.8rem,11vw,3.8rem); }
  .contact-info > span { font-size: 4rem; }
  .contact-wechat { font-size: .9rem; }
  .detail-hero h1, html[lang=zh-CN] .detail-hero h1 { font-size: clamp(2.8rem,12vw,4rem); }
  .collection-head h2, html[lang=zh-CN] .collection-head h2 { font-size: 2rem; }
  .collection-number { font-size: 2.2rem; }
}
@media(prefers-reduced-motion:reduce) {
  .portrait-shell img { animation: none; }
  .neon-cta:hover, .visual-carousel-arrow:hover:not(:disabled) { transform: none; }
}