@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Serif+SC:wght@400;500;600;700&display=swap');
@font-face { font-family: 'Noto Sans Local'; src: url('assets/fonts/NotoSansSC-VF.ttf') format('truetype'); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Noto Serif Local'; src: url('assets/fonts/NotoSerifSC-VF.ttf') format('truetype'); font-style: normal; font-weight: 100 900; font-display: swap; }
:root {
  --ink: #111318;
  --muted: #6b7079;
  --line: #dfe2e7;
  --paper: #f5f6f3;
  --blue: #2b66f6;
  --orange: #ff6a3d;
  --lime: #cfe75c;
  --dark: #111318;
  --serif: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', Georgia, serif;
  --sans: 'Manrope', 'Noto Sans SC', 'Source Han Sans SC', 'PingFang SC', 'Microsoft YaHei', ui-sans-serif, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.eyebrow, .section-kicker, .mini-label { margin: 0; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: 1.5px; }
.brand-mark { font-weight: 900; letter-spacing: 0; }
.brand-mark span { color: var(--blue); }
.print-button { border: 1px solid currentColor; background: transparent; padding: 8px 14px; cursor: pointer; font-size: 12px; }
.print-button:hover { color: var(--blue); }
.text-link { display: inline-flex; gap: 8px; align-items: center; color: var(--blue); font-size: 13px; font-weight: 700; }
.text-link:hover { gap: 12px; }
.gallery-page { min-height: 100vh; background: #eef0ed; }
.gallery-shell { max-width: 1240px; margin: 0 auto; padding: 70px 32px 34px; }
.gallery-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 50px; }
.gallery-header h1 { max-width: 620px; margin: 12px 0 16px; font-size: clamp(40px, 6vw, 76px); line-height: .98; letter-spacing: 0; }
.gallery-lede { max-width: 570px; margin: 0; color: var(--muted); font-size: 17px; }
.gallery-note { display: flex; align-items: center; gap: 10px; max-width: 210px; color: #434850; font-size: 12px; }
.note-dot { width: 9px; height: 9px; background: var(--orange); border-radius: 50%; flex: 0 0 auto; }
.template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.template-card { overflow: hidden; background: #fff; border: 1px solid #dfe2dc; transition: transform .25s ease, box-shadow .25s ease; }
.template-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(20, 28, 36, .12); }
.template-preview { position: relative; height: 340px; overflow: hidden; }
.preview-editorial { padding: 22px; color: #fff; background: #17202a url('https://images.unsplash.com/photo-1558655146-d09347e92766?auto=format&fit=crop&w=1200&q=85') center/cover; }
.preview-editorial::after { position: absolute; inset: 0; background: rgba(10, 16, 24, .7); content: ''; }
.preview-editorial > * { position: relative; z-index: 1; }
.preview-topline { font-size: 10px; letter-spacing: 1.2px; color: #b8d0ff; }
.preview-hero-title { position: absolute; bottom: 96px; left: 22px; font-size: 43px; font-weight: 800; line-height: .94; }
.preview-hero-title span { display: block; margin-top: 12px; color: #dfe7f7; font-size: 12px; font-weight: 500; }
.preview-stat-row { position: absolute; right: 22px; bottom: 24px; left: 22px; display: flex; justify-content: space-between; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.3); font-size: 15px; }
.template-copy { padding: 24px 24px 28px; }
.template-meta { display: flex; gap: 14px; margin-bottom: 16px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .9px; }
.template-copy h2 { margin: 0 0 9px; font-size: 25px; }
.template-copy p { min-height: 76px; margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.preview-bento { display: grid; grid-template-columns: 88px 1fr; gap: 18px; padding: 22px; background: #e7e5de; }
.preview-bento-side { display: flex; flex-direction: column; justify-content: space-between; padding: 10px; color: #fff; background: var(--dark); }
.preview-bento-side span { font-size: 35px; font-weight: 800; }
.preview-bento-side small { color: var(--lime); font-size: 9px; letter-spacing: 1px; line-height: 1.4; }
.preview-bento-main { padding: 10px; background: #fff; }
.preview-bento-main strong { display: block; margin-top: 30px; font-size: 30px; line-height: 1.05; }
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 30px; }
.mini-grid i { display: block; height: 42px; background: var(--blue); }
.mini-grid i:nth-child(2) { background: var(--orange); }
.mini-grid i:nth-child(3) { background: var(--lime); }
.preview-minimal { padding: 28px; background: #fff; }
.preview-minimal-mark { width: 42px; height: 42px; display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 800; }
.preview-minimal-name { margin-top: 58px; font-size: 44px; font-weight: 800; }
.preview-rule { width: 72%; height: 2px; margin: 14px 0 20px; background: var(--ink); }
.preview-minimal-copy { color: var(--blue); font-size: 13px; font-weight: 800; line-height: 1.4; }
.preview-minimal-copy em { color: var(--muted); font-family: var(--serif); font-size: 15px; font-weight: 400; }
.preview-minimal-lines { display: grid; gap: 7px; margin-top: 48px; }
.preview-minimal-lines i { display: block; width: 82%; height: 7px; background: #e3e6eb; }
.preview-minimal-lines i:nth-child(2) { width: 68%; }.preview-minimal-lines i:nth-child(3) { width: 88%; }.preview-minimal-lines i:nth-child(4) { width: 50%; }
.gallery-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 30px; padding-top: 18px; border-top: 1px solid #d4d8d2; color: var(--muted); font-size: 12px; }

/* Editorial portfolio template */
.resume-editorial { background: #f2f3f0; }
.site-nav, .bento-topbar, .minimal-header { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 5vw; background: rgba(245,246,243,.96); border-bottom: 1px solid rgba(17,19,24,.1); }
.site-nav nav, .minimal-header nav { display: flex; gap: 28px; font-size: 13px; color: #464b53; }.site-nav nav a:hover, .minimal-header nav a:hover { color: var(--blue); }
.editorial-hero { position: relative; min-height: 680px; display: flex; align-items: flex-end; overflow: hidden; color: #fff; }
.hero-image { position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=2200&q=85') center/cover; filter: saturate(.8); }
.hero-overlay { position: absolute; inset: 0; background: rgba(8, 15, 26, .68); }
.hero-content { position: relative; z-index: 1; width: min(1120px, 90%); margin: 0 auto; padding: 110px 0 78px; }.hero-content .eyebrow { color: #b8d0ff; }
.hero-content h1 { margin: 18px 0 8px; font-size: clamp(72px, 13vw, 180px); line-height: .82; letter-spacing: 0; }.hero-subtitle { max-width: 460px; margin: 26px 0; font-size: 21px; }.hero-contact { display: flex; flex-wrap: wrap; gap: 18px; color: #dce3ee; font-size: 13px; }.hero-contact a:hover { color: #fff; text-decoration: underline; }
.hero-number { position: absolute; right: 5vw; top: 22%; color: rgba(255,255,255,.34); font: 180px/1 var(--serif); }
.section-pad { width: min(1120px, 90%); margin: 0 auto; padding-top: 120px; padding-bottom: 120px; }.editorial-intro { border-bottom: 1px solid #daddd6; }.intro-grid, .capabilities-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; margin-top: 28px; }.intro-grid h2, .capabilities-grid h2 { margin: 0; font-size: clamp(42px, 6vw, 75px); line-height: .98; }.intro-grid h2 em, .capabilities-grid h2 em { color: var(--blue); font-family: var(--serif); font-weight: 400; }.large-copy { max-width: 630px; margin: 0; font-size: 23px; line-height: 1.45; }.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 58px; padding-top: 20px; border-top: 1px solid #cfd3cb; }.stat-strip strong { display: block; font-size: 34px; }.stat-strip span { display: block; color: var(--muted); font-size: 12px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin: 28px 0 50px; }.section-heading h2 { margin: 0; font-size: clamp(42px, 6vw, 74px); line-height: 1; }.section-heading p { max-width: 250px; margin: 0; color: var(--muted); font-size: 14px; }.timeline { border-top: 1px solid #cfd3cb; }.timeline-item { display: grid; grid-template-columns: 190px 1fr; gap: 55px; padding: 32px 0; border-bottom: 1px solid #cfd3cb; opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }.timeline-item.is-visible { opacity: 1; transform: none; }.timeline-date { color: var(--muted); font-size: 13px; }.timeline-item h3 { margin: 0 0 7px; font-size: 24px; }.timeline-item h3 span { margin-left: 10px; color: var(--muted); font-size: 13px; font-weight: 500; }.timeline-item p { max-width: 640px; margin: 0; color: #4d535c; font-size: 15px; }.result-list { display: flex; flex-wrap: wrap; gap: 20px; padding: 0; margin: 18px 0 0; list-style: none; color: var(--muted); font-size: 13px; }.result-list b { color: var(--ink); margin-right: 5px; }
.work-section { background: #e5e8e1; max-width: none; width: 100%; padding-right: 5vw; padding-left: 5vw; }.work-section > * { width: min(1120px, 100%); margin-right: auto; margin-left: auto; }.work-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; }.work-card { background: #fff; opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }.work-card.is-visible { opacity: 1; transform: none; }.work-large { grid-row: span 2; }.work-image { min-height: 220px; background-position: center; background-size: cover; }.work-large .work-image { min-height: 540px; }.image-campaign { background-image: url('https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=1400&q=85'); }.image-film { background-image: url('https://images.unsplash.com/photo-1492619375914-88005aa9e8fb?auto=format&fit=crop&w=1000&q=85'); }.image-system { background-image: url('https://images.unsplash.com/photo-1553877522-43269d4ea984?auto=format&fit=crop&w=1000&q=85'); }.work-info { padding: 22px 24px 27px; }.work-info > span { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: 1px; }.work-info h3 { margin: 10px 0 8px; font-size: 22px; }.work-info p { min-height: 48px; margin: 0 0 17px; color: var(--muted); font-size: 13px; }
.capabilities-section { background: #111318; color: #fff; max-width: none; width: 100%; padding-right: 5vw; padding-left: 5vw; }.capabilities-section > * { width: min(1120px, 100%); margin-right: auto; margin-left: auto; }.capabilities-section .section-kicker { color: #b8d0ff; }.capability-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }.capability-list > div { padding: 20px 0; border-top: 1px solid rgba(255,255,255,.22); }.capability-list span { color: #9ba2b3; font-size: 12px; }.capability-list h3 { margin: 8px 0 3px; font-size: 23px; }.capability-list p { margin: 0; color: #adb3bf; font-size: 13px; }.site-footer { display: flex; justify-content: space-between; padding: 24px 5vw; background: var(--dark); color: #aeb4c0; font-size: 12px; }.site-footer a:hover { color: #fff; }

/* Bento product template */
.resume-bento { background: #e7e5de; color: #111318; }.bento-topbar { background: #e7e5de; border-bottom-color: #c9c8c1; }.bento-topbar p { margin: 0; color: #666a69; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; }.bento-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; padding: 40px 0 80px; }.bento-card { background: #f6f5f0; border: 1px solid #d0cec5; padding: 28px; opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }.bento-card.is-visible { opacity: 1; transform: none; }.bento-intro { grid-column: 1 / -1; display: grid; grid-template-columns: 84px 1fr 190px; gap: 28px; align-items: start; }.avatar-block { display: grid; place-items: center; width: 84px; height: 84px; background: var(--dark); color: var(--lime); font-size: 26px; font-weight: 800; }.bento-name h1 { margin: 3px 0 5px; font-size: 53px; line-height: 1; }.bento-name p:not(.eyebrow) { max-width: 510px; margin: 0; color: #50545a; font-size: 16px; }.bento-links { display: grid; gap: 8px; justify-items: end; color: #52565c; font-size: 12px; }.bento-links a:hover { color: var(--blue); }.bento-highlight { position: relative; min-height: 350px; overflow: hidden; background: var(--blue); color: #fff; }.bento-highlight .mini-label { color: #c4d4ff; }.bento-highlight strong { display: block; margin-top: 82px; font-size: 44px; line-height: .98; }.bento-highlight p { max-width: 250px; margin: 26px 0 0; color: #dce6ff; font-size: 13px; }.accent-number { position: absolute; right: 20px; bottom: -13px; color: rgba(255,255,255,.18); font-size: 170px; font-weight: 900; line-height: 1; }.accent-number span { font-size: .32em; }.bento-toolkit { min-height: 350px; }.tag-cloud { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }.tag-cloud span { padding: 9px 11px; border: 1px solid #c2c3bc; color: #33383d; font-size: 12px; }.tag-cloud span:nth-child(2n) { background: var(--lime); border-color: var(--lime); }.bento-experience { grid-column: 1 / -1; }.bento-job { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid #cac9c2; }.bento-job:first-of-type { margin-top: 20px; }.bento-job > span { color: #70746f; font-size: 12px; }.bento-job h2 { margin: 0 0 2px; font-size: 24px; }.bento-job p { margin: 0; color: #626762; font-size: 13px; }.bento-projects { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.bento-projects .mini-label { grid-column: 1 / -1; }.bento-project { background: #e9e8e1; }.project-thumb { height: 180px; background-position: center; background-size: cover; }.thumb-dashboard { background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1000&q=85'); }.thumb-mobile { background-image: url('https://images.unsplash.com/photo-1551650975-87deedd944c3?auto=format&fit=crop&w=1000&q=85'); }.thumb-brand { background-image: url('https://images.unsplash.com/photo-1558655146-9f40138edfeb?auto=format&fit=crop&w=1000&q=85'); }.bento-project > div:last-child { padding: 18px; }.bento-project span { color: var(--blue); font-size: 10px; font-weight: 800; }.bento-project h2 { margin: 7px 0; font-size: 19px; }.bento-project p { min-height: 42px; margin: 0 0 12px; color: #676c66; font-size: 12px; }.bento-project a { color: var(--blue); font-size: 12px; font-weight: 700; }.bento-principles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.bento-principles .mini-label { grid-column: 1 / -1; }.principle { padding-top: 20px; border-top: 1px solid #cac9c2; }.principle b { color: #777b75; font-size: 12px; }.principle h2 { margin: 12px 0 5px; font-size: 23px; }.principle p { margin: 0; color: #646961; font-size: 13px; }.bento-footer { background: #e7e5de; color: #61655f; border-top: 1px solid #c9c8c1; }

/* Minimal recruiter template */
.resume-minimal { background: #fff; }.minimal-header { background: #fff; }.minimal-shell { width: min(1060px, calc(100% - 56px)); margin: 0 auto; }.minimal-profile { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; padding: 90px 0 80px; border-bottom: 2px solid var(--ink); }.minimal-id { display: flex; align-items: center; gap: 20px; }.minimal-initials { display: grid; place-items: center; width: 74px; height: 74px; background: var(--blue); color: #fff; font-size: 23px; font-weight: 800; }.minimal-id h1 { margin: 0; font-size: 53px; line-height: .98; }.minimal-id p { margin: 8px 0 0; color: var(--blue); font-size: 13px; font-weight: 700; }.minimal-summary { max-width: 540px; margin: 0; font-size: 21px; line-height: 1.4; }.minimal-contact { grid-column: 2; display: flex; flex-wrap: wrap; gap: 15px 25px; margin-top: -50px; color: var(--muted); font-size: 12px; }.minimal-contact a:hover { color: var(--blue); }.minimal-section { display: grid; grid-template-columns: 170px 1fr; gap: 55px; padding: 65px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }.minimal-section.is-visible { opacity: 1; transform: none; }.minimal-section-title { display: flex; gap: 15px; align-items: baseline; }.minimal-section-title span { color: var(--blue); font-size: 12px; font-weight: 800; }.minimal-section-title h2 { margin: 0; font-size: 25px; }.minimal-list article { display: grid; grid-template-columns: 150px 1fr; gap: 28px; padding-bottom: 44px; }.minimal-list article:last-child { padding-bottom: 0; }.minimal-meta { color: var(--muted); font-size: 12px; line-height: 1.7; }.minimal-meta span { color: #a0a4aa; }.minimal-list h3 { margin: 0 0 12px; font-size: 21px; }.minimal-list h3 small { margin-left: 8px; color: var(--muted); font-size: 12px; font-weight: 500; }.minimal-list ul { padding: 0; margin: 0; color: #50555d; font-size: 14px; }.minimal-list li { margin: 0 0 8px; padding-left: 17px; }.minimal-list li::marker { color: var(--blue); }.minimal-list b { color: var(--ink); }.skills-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }.skills-columns h3, .education-grid h3 { margin: 0 0 9px; font-size: 15px; }.skills-columns p, .education-grid p { margin: 0; color: var(--muted); font-size: 13px; }.education-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }.minimal-footer { width: 100%; background: #fff; color: #7c8188; border-top: 1px solid var(--line); }

@media (max-width: 850px) { .gallery-header { display: block; }.gallery-note { margin-top: 22px; }.template-grid { grid-template-columns: 1fr; }.template-preview { height: 300px; }.site-nav nav, .minimal-header nav { display: none; }.editorial-hero { min-height: 620px; }.intro-grid, .capabilities-grid { grid-template-columns: 1fr; gap: 38px; }.section-pad { padding-top: 80px; padding-bottom: 80px; }.section-heading { display: block; }.section-heading p { margin-top: 18px; }.work-grid { grid-template-columns: 1fr; }.work-large { grid-row: auto; }.work-large .work-image { min-height: 320px; }.timeline-item { grid-template-columns: 1fr; gap: 12px; }.bento-shell { width: min(100% - 28px, 700px); grid-template-columns: 1fr; }.bento-intro, .bento-experience, .bento-projects, .bento-principles { grid-column: auto; }.bento-intro { grid-template-columns: 66px 1fr; }.avatar-block { width: 66px; height: 66px; }.bento-links { grid-column: 1 / -1; justify-items: start; }.bento-projects { grid-template-columns: 1fr; }.bento-projects .mini-label, .bento-principles .mini-label { grid-column: auto; }.bento-principles { grid-template-columns: 1fr; }.minimal-profile { grid-template-columns: 1fr; gap: 28px; padding-top: 60px; }.minimal-contact { grid-column: auto; margin-top: 0; }.minimal-section { grid-template-columns: 1fr; gap: 25px; }.minimal-list article { grid-template-columns: 1fr; gap: 8px; }.skills-columns, .education-grid { grid-template-columns: 1fr; gap: 24px; }.gallery-footer { display: block; }.gallery-footer span { display: block; margin-top: 12px; } }
@media print { .site-nav, .bento-topbar, .minimal-header, .print-button, .gallery-footer, .site-footer a { display: none !important; }.resume, .resume-bento, .resume-minimal { background: #fff; }.editorial-hero { min-height: 560px; break-after: avoid; }.section-pad { padding-top: 52px; padding-bottom: 52px; }.work-section, .capabilities-section { padding-right: 32px; padding-left: 32px; }.bento-shell, .minimal-shell { width: 100%; padding-top: 0; }.bento-card, .minimal-section, .timeline-item, .work-card { opacity: 1; transform: none; }.bento-card { break-inside: avoid; }.minimal-profile { padding-top: 40px; }.site-footer { color: #555; background: #fff; } }
.timeline-item, .work-card, .bento-card, .minimal-section { opacity: 1; transform: none; }

/* ResumeFlow-inspired dark workspace */
.resume-flow { --flow-bg: #05060c; --flow-panel: #0b0d16; --flow-panel-2: #0f111d; --flow-line: #202435; --flow-text: #f5f7ff; --flow-muted: #9097aa; --flow-blue: #139cff; --flow-blue-2: #3858ff; min-height: 100vh; color: var(--flow-text); background: #02030a; font-family: var(--sans); }
.card-editorial .preview-editorial { background: #05060c; }
.card-editorial .preview-editorial::after { background: linear-gradient(90deg, rgba(5,6,12,.96) 0 25%, rgba(5,6,12,.15) 25% 100%); }
.card-editorial .preview-hero-title { left: 112px; bottom: 116px; font-size: 31px; }
.card-editorial .preview-hero-title span { font-size: 9px; }
.card-editorial .preview-stat-row { left: 112px; font-size: 11px; }
.resume-flow a { color: inherit; }
.flow-shell { width: min(1440px, calc(100% - 32px)); min-height: 100vh; margin: 0 auto; display: flex; background: var(--flow-bg); border: 1px solid #13235b; box-shadow: 0 0 0 1px #080d2a, 0 0 90px rgba(21, 73, 255, .45); }
.flow-sidebar { width: 244px; flex: 0 0 244px; display: flex; flex-direction: column; padding: 28px 18px 22px; background: #06070d; border-right: 1px solid var(--flow-line); position: sticky; top: 0; height: 100vh; }
.flow-profile-mini { display: flex; align-items: center; gap: 10px; padding: 0 10px 26px; border-bottom: 1px solid #171a29; }
.flow-profile-mini img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1px solid #3c82ff; }
.flow-profile-mini strong, .flow-profile-mini span { display: block; }
.flow-profile-mini strong { font-size: 13px; }.flow-profile-mini span { margin-top: 2px; color: var(--flow-muted); font-size: 10px; }
.flow-nav { display: grid; gap: 5px; margin-top: 28px; }.flow-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 7px; color: #9aa1b5; font-size: 12px; transition: color .2s, background .2s; }.flow-nav a span { width: 15px; color: #778095; font-size: 14px; text-align: center; }.flow-nav a:hover, .flow-nav a.is-active { color: #fff; background: #111529; }.flow-nav a.is-active span { color: var(--flow-blue); }
.flow-sidebar-bottom { margin-top: auto; padding: 18px 10px 0; border-top: 1px solid #171a29; }.flow-sidebar-bottom p { margin: 0 0 12px; color: #9aa1b5; font-size: 11px; }.flow-socials { display: flex; gap: 7px; margin-bottom: 17px; }.flow-socials a { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #2d3245; border-radius: 50%; color: #c4cad8; font-size: 12px; }.flow-socials a:hover { border-color: var(--flow-blue); color: var(--flow-blue); }.flow-hire-button { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-radius: 6px; background: var(--flow-blue); color: #00101d !important; font-size: 12px; font-weight: 800; }.flow-hire-button:hover { background: #47b2ff; }.flow-hire-button span { font-size: 16px; }
.flow-main { min-width: 0; flex: 1; }.flow-topbar { position: sticky; top: 0; z-index: 4; height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 36px; background: rgba(5,6,12,.94); border-bottom: 1px solid var(--flow-line); color: #8e96aa; font-size: 11px; }.flow-time { color: var(--flow-blue); }.flow-time span { color: #5f687b; }.flow-location { margin-left: auto; margin-right: 16px; }.flow-download { border: 1px solid #2a3044; border-radius: 5px; padding: 8px 11px; color: #dce1ec; background: transparent; font: inherit; cursor: pointer; }.flow-download:hover { border-color: var(--flow-blue); color: var(--flow-blue); }.flow-download span { margin-left: 6px; color: var(--flow-blue); }
.flow-main > main { overflow: hidden; }.flow-hero, .flow-section, .flow-contact-section { width: min(1040px, calc(100% - 72px)); margin: 0 auto; }.flow-hero { padding: 94px 0 88px; }.flow-open { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #15324e; border-radius: 16px; color: #a7d8ff; background: #081522; font-size: 11px; }.flow-open i { width: 7px; height: 7px; border-radius: 50%; background: #22d26b; box-shadow: 0 0 10px #22d26b; }.flow-hero-person { margin-top: 24px; }.flow-hero-person img { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; border: 3px solid #0b8fe6; box-shadow: 0 0 0 5px #0a1429; }.flow-hero h1 { max-width: 800px; margin: 28px 0 18px; color: #f7f7fb; font: 400 clamp(49px, 6.5vw, 84px)/1.03 var(--serif); letter-spacing: 0; }.flow-hero h1 em { color: #e2e5ef; font-style: normal; }.flow-hero-copy { max-width: 590px; margin: 0; color: #9da5b6; font-size: 15px; line-height: 1.65; }.flow-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }.flow-primary-button, .flow-secondary-button { display: inline-flex; align-items: center; gap: 18px; padding: 12px 16px; border-radius: 6px; font-size: 12px; font-weight: 750; cursor: pointer; }.flow-primary-button { background: var(--flow-blue); color: #00101d !important; }.flow-primary-button:hover { background: #47b2ff; }.flow-secondary-button { border: 1px solid #2b3043; background: transparent; color: #d8dce6; }.flow-secondary-button:hover { border-color: var(--flow-blue); color: var(--flow-blue); }.flow-primary-button span, .flow-secondary-button span { font-size: 15px; }
.flow-section { padding: 76px 0; border-top: 1px solid #161a29; }.flow-skill-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }.flow-skill-card { min-height: 224px; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; border: 1px solid #1e2748; border-radius: 9px; background: #080a13; }.flow-skill-card:hover { border-color: #2158d4; box-shadow: 0 0 26px rgba(15, 101, 255, .15); }.flow-skill-visual { height: 122px; border-radius: 6px; background-position: center; background-size: cover; opacity: .82; }.flow-visual-edit { background-image: url('https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?auto=format&fit=crop&w=700&q=80'); }.flow-visual-vfx { background-image: url('https://images.unsplash.com/photo-1634017839464-5c339ebe3cb4?auto=format&fit=crop&w=700&q=80'); }.flow-visual-3d { background-image: url('https://images.unsplash.com/photo-1633356122544-f134324a6cee?auto=format&fit=crop&w=700&q=80'); }.flow-visual-project { background-image: url('https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=700&q=80'); }.flow-skill-card h2 { margin: 13px 0 2px; font: 400 20px/1.1 var(--serif); }.flow-skill-card p { margin: 0; color: #8e96aa; font-size: 11px; }
.flow-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 30px; }.flow-section-tag { display: inline-flex; align-items: center; gap: 7px; color: var(--flow-blue); font-size: 11px; font-weight: 750; }.flow-section-heading h2 { margin: 13px 0 0; font: 400 clamp(36px, 4vw, 56px)/1 var(--serif); }.flow-section-heading > p { max-width: 280px; margin: 0; color: #8991a4; font-size: 12px; line-height: 1.65; }.flow-experience-list { border-top: 1px solid #1b2031; }.flow-experience-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 20px; align-items: start; gap: 15px; padding: 21px 0; border-bottom: 1px solid #1b2031; }.flow-company-mark, .flow-edu-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 7px; color: #fff; font-weight: 800; }.mark-self { background: #145f9d; }.mark-crystal { background: #d62b6e; }.mark-media { background: #1eae8b; }.flow-experience-main h3 { margin: 6px 0 7px; font-size: 17px; font-weight: 500; }.flow-experience-main h3 b { margin-left: 8px; color: #a8afbe; font-size: 11px; font-weight: 500; }.flow-date { color: #6f788d; font-size: 10px; }.flow-experience-main p { margin: 0; color: #8991a4; font-size: 12px; line-height: 1.55; }.flow-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }.flow-tags span { padding: 4px 7px; border: 1px solid #292f42; border-radius: 10px; color: #aeb6c6; font-size: 9px; }.flow-status { align-self: start; padding: 5px 8px; border: 1px solid #2a3040; border-radius: 11px; color: #a3aabb; font-size: 9px; white-space: nowrap; }.status-current { border-color: #0f8653; color: #42df8a; background: #071b16; }.flow-row-arrow { align-self: center; color: #7e8799; font-size: 19px; }
.flow-project-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 13px; }.flow-project-card { overflow: hidden; border: 1px solid #1e2748; border-radius: 9px; background: #080a13; }.flow-project-card:hover { border-color: #225fdb; }.flow-project-wide { grid-row: span 2; }.flow-project-image { min-height: 180px; background-position: center; background-size: cover; }.flow-project-wide .flow-project-image { min-height: 315px; }.project-auto { background-image: url('https://images.unsplash.com/photo-1493238792000-8113da705763?auto=format&fit=crop&w=1400&q=85'); }.project-pet { background-image: url('https://images.unsplash.com/photo-1517849845537-4d257902454a?auto=format&fit=crop&w=1000&q=85'); }.project-exhibition { background-image: url('https://images.unsplash.com/photo-1564399579883-451a5d44ec08?auto=format&fit=crop&w=1000&q=85'); }.project-museum { background-image: url('https://images.unsplash.com/photo-1561214115-f2f134cc4912?auto=format&fit=crop&w=1000&q=85'); }.flow-project-copy { padding: 17px 18px 20px; }.flow-project-copy > span { color: var(--flow-blue); font-size: 9px; font-weight: 750; letter-spacing: .8px; }.flow-project-copy h3 { margin: 9px 0 7px; font: 400 24px/1.1 var(--serif); }.flow-project-copy p { min-height: 38px; margin: 0; color: #8e96aa; font-size: 11px; line-height: 1.6; }
.flow-toolkit-list { display: grid; border-top: 1px solid #1b2031; }.flow-toolkit-list > div { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 19px 0; border-bottom: 1px solid #1b2031; }.flow-toolkit-list strong { color: #e7eaf2; font-size: 14px; }.flow-toolkit-list span { color: #929bad; font-size: 13px; }.flow-education-list { display: grid; border-top: 1px solid #1b2031; }.flow-education-list article { display: grid; grid-template-columns: 42px minmax(0,1fr) auto auto; align-items: center; gap: 15px; padding: 17px 0; border-bottom: 1px solid #1b2031; }.flow-education-list h3 { margin: 0 0 4px; font-size: 15px; font-weight: 500; }.flow-education-list p { margin: 0; color: #8e96aa; font-size: 11px; }.flow-education-list article > span { color: #7b8497; font-size: 10px; }.flow-education-list article > b { padding: 5px 8px; border-radius: 10px; color: #62b8ff; background: #08182a; font-size: 9px; font-weight: 500; }.edu-crystal { background: #df4b3e; }.edu-eng { background: #2079b5; }
.flow-contact-section { padding: 110px 0 100px; border-top: 1px solid #161a29; }.flow-contact-section h2 { margin: 18px 0 52px; font: 400 clamp(44px, 6vw, 78px)/1.02 var(--serif); }.flow-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #26304b; }.flow-contact-grid > * { padding: 18px 16px 0 0; color: #e8ebf4; font-size: 14px; }.flow-contact-grid span { display: block; margin-bottom: 6px; color: var(--flow-blue); font-size: 9px; font-weight: 750; letter-spacing: 1px; }.flow-contact-grid a:hover { color: var(--flow-blue); }.flow-footer { display: flex; justify-content: space-between; gap: 20px; padding: 20px 36px; border-top: 1px solid var(--flow-line); color: #737c90; font-size: 10px; }.flow-footer a:hover { color: #fff; }
@media (max-width: 900px) { .flow-shell { width: 100%; margin: 0; border: 0; box-shadow: none; }.flow-sidebar { position: fixed; z-index: 6; left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: 64px; flex-direction: row; align-items: center; padding: 8px 14px; border-top: 1px solid #1e2748; border-right: 0; }.flow-profile-mini { display: none; }.flow-nav { display: flex; flex: 1; justify-content: space-around; gap: 3px; margin: 0; }.flow-nav a { display: grid; justify-items: center; gap: 2px; padding: 5px 7px; font-size: 9px; }.flow-nav a span { font-size: 14px; }.flow-sidebar-bottom { display: none; }.flow-main { padding-bottom: 63px; }.flow-topbar { padding: 0 18px; }.flow-location { margin-left: auto; margin-right: 0; }.flow-download { padding: 7px 9px; font-size: 10px; }.flow-hero, .flow-section, .flow-contact-section { width: calc(100% - 36px); }.flow-hero { padding: 68px 0 58px; }.flow-hero h1 { font-size: clamp(41px, 12vw, 68px); }.flow-hero-copy { font-size: 13px; }.flow-skill-grid { grid-template-columns: 1fr 1fr; gap: 9px; }.flow-skill-card { min-height: 185px; padding: 10px; }.flow-skill-visual { height: 90px; }.flow-skill-card h2 { font-size: 17px; }.flow-section { padding: 58px 0; }.flow-section-heading { display: block; }.flow-section-heading > p { margin-top: 16px; }.flow-experience-row { grid-template-columns: 34px minmax(0, 1fr) 16px; gap: 10px; }.flow-status { grid-column: 2; justify-self: start; }.flow-row-arrow { grid-column: 3; grid-row: 1 / span 2; }.flow-experience-main h3 { font-size: 15px; line-height: 1.4; }.flow-experience-main h3 b { display: block; margin: 4px 0 0; }.flow-project-grid { grid-template-columns: 1fr; }.flow-project-wide { grid-row: auto; }.flow-project-wide .flow-project-image { min-height: 230px; }.flow-toolkit-list > div { grid-template-columns: 1fr; gap: 7px; }.flow-education-list article { grid-template-columns: 34px minmax(0,1fr); gap: 10px; }.flow-education-list article > span, .flow-education-list article > b { grid-column: 2; justify-self: start; }.flow-contact-section { padding-top: 75px; }.flow-contact-grid { grid-template-columns: 1fr; gap: 20px; }.flow-contact-grid > * { padding-top: 14px; }.flow-footer { display: block; padding: 18px; }.flow-footer a { display: block; margin-top: 8px; } }
@media print { .resume-flow { color: #111; background: #fff; }.flow-shell { width: 100%; display: block; border: 0; box-shadow: none; background: #fff; }.flow-sidebar, .flow-topbar, .flow-download, .flow-footer a { display: none; }.flow-main { padding: 0; }.flow-hero, .flow-section, .flow-contact-section { width: 100%; padding-top: 40px; padding-bottom: 40px; }.flow-hero { color: #111; }.flow-hero h1, .flow-hero h1 em, .flow-section-heading h2, .flow-project-copy h3, .flow-contact-section h2 { color: #111; }.flow-hero-copy, .flow-section-heading > p, .flow-experience-main p, .flow-project-copy p, .flow-toolkit-list span, .flow-education-list p { color: #555; }.flow-skill-grid, .flow-project-grid { break-inside: avoid; }.flow-skill-card, .flow-project-card { border-color: #ddd; background: #fff; }.flow-skill-card h2, .flow-toolkit-list strong, .flow-education-list h3, .flow-contact-grid > * { color: #111; }.flow-section, .flow-experience-row, .flow-toolkit-list > div, .flow-education-list article { border-color: #ddd; }.flow-contact-section { break-before: page; background: #fff; }.flow-contact-grid { border-color: #ccc; } }

/* Typography, reveal motion, and interactive states */
.resume-flow { font-family: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", var(--sans); }
.resume-flow .flow-hero h1, .resume-flow .flow-section-heading h2, .resume-flow .flow-project-copy h3, .resume-flow .flow-contact-section h2, .resume-flow .flow-skill-card h2 { font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", Georgia, serif; }
.flow-progress { position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: var(--flow-blue); box-shadow: 0 0 12px rgba(19,156,255,.85); transition: width .12s linear; }
.resume-flow .flow-hero h1 { max-width: 890px; margin-top: 30px; line-height: 1.06; word-break: keep-all; }
.resume-flow .flow-hero h1 > span { display: block; color: #9ba3b5; font: 400 .38em/1.1 "Noto Sans SC", "Microsoft YaHei", sans-serif; letter-spacing: .04em; }
.resume-flow .flow-hero h1 > strong { display: block; color: #f7f7fb; font: 500 1em/1.03 "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif; }
.resume-flow .flow-hero h1 > em { display: block; margin-top: 13px; color: #dce0e9; font-size: .63em; font-style: normal; line-height: 1.16; }
.resume-flow .flow-hero-copy { max-width: 640px; font-size: 14px; line-height: 1.8; }
.flow-skill-card { position: relative; overflow: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s; }
.flow-skill-card::after, .flow-project-card::after { position: absolute; inset: 0; pointer-events: none; content: ''; opacity: 0; background: linear-gradient(120deg, transparent 20%, rgba(59,167,255,.08) 50%, transparent 80%); transform: translateX(-110%); transition: opacity .3s, transform .7s; }
.flow-skill-card:hover::after, .flow-project-card:hover::after, .flow-skill-card:focus-visible::after, .flow-project-card:focus-visible::after { opacity: 1; transform: translateX(110%); }
.flow-skill-card:hover, .flow-skill-card:focus-visible { transform: translateY(-5px); outline: none; }
.flow-card-index { position: absolute; top: 14px; right: 14px; color: #5f6b83; font-size: 10px; }
.flow-skill-card h2 { font-size: 19px; }.flow-skill-card p { font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; }
.flow-section-heading h2 { letter-spacing: .01em; }.flow-section-heading > p { font-size: 13px; line-height: 1.8; }
.flow-experience-row { position: relative; transition: background .3s, border-color .3s; }.flow-experience-row:hover, .flow-experience-row:focus-visible { background: #080b15; border-bottom-color: #25345c; outline: none; }.flow-experience-row.is-open { background: #090c17; }
.flow-experience-main h3 { line-height: 1.45; }.flow-experience-main p { line-height: 1.75; }.flow-expand-details { max-height: 0; overflow: hidden; margin-top: 0; color: #b9c4d7; font-size: 12px; line-height: 1.8; opacity: 0; transition: max-height .45s ease, margin-top .45s ease, opacity .35s ease; }.flow-experience-row.is-open .flow-expand-details { max-height: 90px; margin-top: 14px; opacity: 1; }.flow-row-toggle { align-self: center; width: 28px; height: 28px; padding: 0; border: 1px solid #2a3040; border-radius: 50%; color: #bcc4d3; background: transparent; font-size: 16px; line-height: 1; cursor: pointer; transition: border-color .25s, color .25s, transform .25s; }.flow-row-toggle:hover { border-color: var(--flow-blue); color: var(--flow-blue); transform: rotate(90deg); }.flow-experience-row.is-open .flow-row-toggle { color: var(--flow-blue); border-color: #2066ad; }
.flow-project-card { position: relative; cursor: pointer; transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s; }.flow-project-card:hover, .flow-project-card:focus-visible { transform: translateY(-6px); outline: none; box-shadow: 0 14px 38px rgba(5,26,91,.34); }.flow-project-image { transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .35s; }.flow-project-card:hover .flow-project-image, .flow-project-card:focus-visible .flow-project-image { transform: scale(1.04); filter: saturate(1.12); }.flow-project-copy { position: relative; z-index: 1; }.flow-project-action { display: inline-flex; align-items: center; gap: 12px; margin-top: 15px; padding: 0; border: 0; color: var(--flow-blue); background: transparent; font-size: 11px; cursor: pointer; }.flow-project-action span { font-size: 15px; transition: transform .25s; }.flow-project-card:hover .flow-project-action span { transform: translateX(5px); }
.flow-project-dialog { width: min(620px, calc(100% - 32px)); padding: 0; border: 1px solid #1d4d9c; border-radius: 10px; color: var(--flow-text); background: #080b15; box-shadow: 0 25px 100px rgba(0,0,0,.65), 0 0 50px rgba(15,102,255,.24); }.flow-project-dialog::backdrop { background: rgba(1,3,9,.8); backdrop-filter: blur(6px); }.flow-dialog-inner { position: relative; padding: 34px; }.flow-dialog-close { position: absolute; top: 14px; right: 15px; width: 30px; height: 30px; border: 1px solid #2c3550; border-radius: 50%; color: #aeb7c9; background: transparent; font-size: 20px; cursor: pointer; }.flow-dialog-close:hover { border-color: var(--flow-blue); color: var(--flow-blue); }.flow-dialog-inner h2 { margin: 18px 0 14px; font: 400 34px/1.1 "Noto Serif SC", "Songti SC", serif; }.flow-dialog-inner > p { max-width: 500px; margin: 0; color: #a8b1c3; font-size: 14px; line-height: 1.9; }.flow-dialog-footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 35px; padding-top: 16px; border-top: 1px solid #222b42; color: #737e93; font-size: 10px; }.flow-dialog-footer a { color: var(--flow-blue); }.flow-dialog-footer a:hover { text-decoration: underline; }
.flow-reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1); transition-delay: var(--reveal-delay, 0ms); }.flow-reveal.is-visible { opacity: 1; transform: none; }
@media (max-width: 900px) { .resume-flow .flow-hero h1 { margin-top: 26px; font-size: clamp(39px, 11vw, 58px); line-height: 1.07; }.resume-flow .flow-hero h1 > span { font-size: .42em; }.resume-flow .flow-hero h1 > em { margin-top: 12px; font-size: .66em; line-height: 1.2; }.flow-section-heading h2 { font-size: 41px; }.flow-project-action { margin-top: 13px; }.flow-dialog-inner { padding: 28px 24px; }.flow-dialog-footer { display: block; }.flow-dialog-footer a { display: block; margin-top: 11px; }.flow-progress { bottom: -1px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }.flow-reveal { opacity: 1; transform: none; } }

/* v20260823-3 · plain software name + proportioned screenshots + larger strip video frame */
.leolab-software-name {
  display: inline-flex;
  align-items: center;
  margin-bottom: 26px;
  color: #dce8f8;
  font: 760 clamp(20px, 2.2vw, 30px)/1 var(--sans);
  letter-spacing: .04em;
}
.resume-flow .flow-project-image {
  background-size: cover;
  background-position: center center;
}
.resume-flow .flow-project-strip .flow-project-image,
.resume-flow .flow-project-card.flow-project-huaguoshan .flow-project-image,
.resume-flow .flow-project-card.flow-project-gimc .flow-project-image {
  background-size: contain;
  background-position: center center;
}
.resume-flow .flow-project-standard-grid .flow-project-image {
  background-size: cover;
}
.leolab-screen img,
.leolab-screen-main img,
.leolab-screens-grid .leolab-screen img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2107 / 1299;
  object-fit: cover;
  object-position: center center;
  background: #07101f;
}
.flow-dialog-inner video,
.flow-project-dialog.is-stage-strip .flow-dialog-inner video,
.flow-project-dialog.is-ultrawide .flow-dialog-inner video,
.flow-project-dialog.is-platinum-strip .flow-dialog-inner video {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center center;
  pointer-events: auto;
  touch-action: auto;
}
.flow-project-dialog.is-stage-strip .flow-dialog-inner video,
.flow-project-dialog.is-ultrawide .flow-dialog-inner video {
  height: clamp(260px, 42vw, 520px);
  max-height: none;
}
.flow-project-dialog.is-platinum-strip .flow-dialog-inner video {
  height: clamp(340px, 56vw, 680px);
  max-height: none;
}
.flow-dialog-inner {
  max-height: calc(100vh - 34px);
  overflow-y: auto;
}
@media (max-width: 900px) {
  .leolab-software-name {
    margin-bottom: 20px;
    font-size: 22px;
  }
  .flow-project-dialog.is-stage-strip .flow-dialog-inner video,
  .flow-project-dialog.is-ultrawide .flow-dialog-inner video,
  .flow-project-dialog.is-platinum-strip .flow-dialog-inner video {
    width: 100%;
    height: clamp(220px, 60vw, 380px);
    max-height: 60vh;
  }
}

/* Real portfolio media */
.flow-project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flow-project-wide { grid-column: span 2; grid-row: span 2; }
.flow-project-wide .flow-project-image { min-height: 330px; }
.flow-project-image { min-height: 190px; }
.project-gimc { background-image: url('assets/portfolio/01_gimc.jpg'); }
.project-yili-launch { background-image: url('assets/portfolio/02_yili_launch.jpg'); }
.project-yili-platinum { background-image: url('assets/portfolio/03_yili_platinum.jpg'); }
.project-yili-award { background-image: url('assets/portfolio/04_yili_award.jpg'); }
.project-heineken-awaken { background-image: url('assets/portfolio/05_heineken_awaken.jpg'); }
.project-heineken-singles { background-image: url('assets/portfolio/06_heineken_singles.jpg'); }
.project-heineken-party { background-image: url('assets/portfolio/07_heineken_party.jpg'); }
.project-gba-health { background-image: url('assets/portfolio/08_gba_health.jpg'); }
.project-huaguoshan { background-image: url('assets/portfolio/09_huaguoshan.jpg'); }
.project-huaguoshan { background-image: url('assets/portfolio/09_huaguoshan-v2.jpg'); }
.flow-dialog-inner video { display: block; width: 100%; max-height: 56vh; margin: 22px 0 18px; border: 1px solid #1e315c; border-radius: 7px; background: #010207; }
.flow-dialog-inner video:not([src]) { display: none; }
@media (max-width: 900px) {
  .flow-project-grid { grid-template-columns: 1fr; }
  .flow-project-wide { grid-column: auto; grid-row: auto; }
  .flow-project-wide .flow-project-image { min-height: 230px; }
}

/* Refined Chinese type system */
.resume-flow .flow-hero h1,
.resume-flow .flow-section-heading h2,
.resume-flow .flow-project-copy h3,
.resume-flow .flow-contact-section h2,
.resume-flow .flow-skill-card h2,
.resume-flow .flow-dialog-inner h2 { font-family: 'Manrope', 'Noto Sans SC', 'Source Han Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; font-weight: 700; letter-spacing: 0; }
.resume-flow .flow-hero h1 { max-width: 760px; font-size: clamp(52px, 6vw, 76px); line-height: 1.03; }
.resume-flow .flow-hero h1 > span { font-size: .34em; font-weight: 600; letter-spacing: .03em; }
.resume-flow .flow-hero h1 > strong { font-size: 1.1em; font-weight: 800; letter-spacing: 0; }
.resume-flow .flow-hero h1 > strong { font-family: 'Manrope', 'Noto Sans SC', 'Microsoft YaHei', sans-serif !important; font-style: normal; }
.resume-flow .flow-hero h1 > em { max-width: 690px; margin-top: 15px; color: #d2d8e5; font-size: .58em; font-weight: 600; line-height: 1.24; }
.resume-flow .flow-hero-copy { max-width: 540px; margin-top: 26px; font-weight: 400; letter-spacing: 0; }
.resume-flow .flow-section-heading h2 { font-size: clamp(40px, 4vw, 58px); font-weight: 700; }
.resume-flow .flow-project-copy h3 { font-size: 21px; font-weight: 700; }
.resume-flow .flow-skill-card h2 { font-size: 18px; font-weight: 700; }
.resume-flow .flow-contact-section h2 { font-size: clamp(42px, 5vw, 68px); font-weight: 700; }
.flow-skill-grid { gap: 16px; }
.flow-skill-card { min-height: 216px; padding: 16px; }
.flow-project-copy { padding: 19px 20px 22px; }
.flow-project-copy p, .flow-experience-main p, .flow-section-heading > p, .flow-toolkit-list span, .flow-education-list p { font-weight: 400; letter-spacing: 0; }
.flow-project-action { font-weight: 700; }
@media (max-width: 900px) {
  .resume-flow .flow-hero h1 { font-size: clamp(40px, 11vw, 58px); }
  .resume-flow .flow-hero h1 > span { font-size: .4em; }
  .resume-flow .flow-hero h1 > em { font-size: .62em; }
  .resume-flow .flow-section-heading h2 { font-size: 40px; }
}

/* Liu Yaofang portfolio customizations */
.resume-liu .liu-hero .hero-image { background-image: url('https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?auto=format&fit=crop&w=2200&q=88'); background-position: center; filter: saturate(.72) contrast(1.08); }
.resume-liu .liu-hero .hero-overlay { background: linear-gradient(90deg, rgba(7,11,18,.92) 0%, rgba(7,11,18,.74) 56%, rgba(7,11,18,.54) 100%); }
.resume-liu .liu-hero { min-height: 740px; }
.resume-liu .hero-content { padding-bottom: 54px; }
.liu-hero-title { display: flex; align-items: center; gap: 22px; margin-top: 20px; }
.hero-avatar { width: 86px; height: 86px; border: 2px solid rgba(255,255,255,.82); border-radius: 50%; object-fit: cover; background: #fff; }
.resume-liu .hero-content h1 { margin: 0 0 10px; font-size: clamp(66px, 10vw, 132px); }
.hero-role { margin: 0; color: #dbe4f3; font-size: 16px; }
.resume-liu .hero-subtitle { max-width: 630px; margin: 26px 0 34px; font-size: clamp(21px, 2.2vw, 30px); font-weight: 600; line-height: 1.35; }
.hero-facts { display: grid; grid-template-columns: repeat(3, minmax(130px, 190px)); gap: 22px; margin-bottom: 28px; }
.hero-facts > div { padding-top: 13px; border-top: 1px solid rgba(255,255,255,.28); }
.hero-facts strong, .hero-facts span { display: block; }
.hero-facts strong { font-size: 23px; }
.hero-facts span { margin-top: 3px; color: #b8c0ce; font-size: 11px; }
.resume-liu .hero-number { top: 19%; font-size: 142px; }
.profile-focus { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 36px; }
.profile-focus span { padding: 8px 11px; border: 1px solid #c8cdc5; color: #484e56; font-size: 12px; }
.job-type { margin-bottom: 7px !important; color: var(--blue) !important; font-size: 12px !important; font-weight: 750; }
.resume-liu .work-grid { grid-template-columns: 1.15fr 1fr; }
.resume-liu .work-card { border: 1px solid rgba(17,19,24,.08); }
.resume-liu .work-museum { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; }
.resume-liu .work-museum .work-image { min-height: 320px; }
.resume-liu .work-museum .work-info { display: flex; flex-direction: column; justify-content: center; }
.resume-liu .image-auto-content { background-image: url('https://images.unsplash.com/photo-1493238792000-8113da705763?auto=format&fit=crop&w=1400&q=88'); }
.resume-liu .image-pet-content { background-image: url('https://images.unsplash.com/photo-1517849845537-4d257902454a?auto=format&fit=crop&w=1000&q=88'); }
.resume-liu .image-exhibition { background-image: url('https://images.unsplash.com/photo-1564399579883-451a5d44ec08?auto=format&fit=crop&w=1000&q=88'); }
.resume-liu .image-museum { background-image: url('https://images.unsplash.com/photo-1561214115-f2f134cc4912?auto=format&fit=crop&w=1000&q=88'); }
.case-status { display: block; padding-top: 13px; border-top: 1px solid #e2e5df; color: #666d75 !important; font-size: 10px !important; letter-spacing: .2px !important; }
.toolkit-panel { width: min(1120px, 100%); margin: 70px auto 0; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.2); }
.toolkit-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.toolkit-row span { padding: 9px 13px; border: 1px solid rgba(255,255,255,.25); color: #d7dce5; font-size: 12px; }
.credentials-section { background: #f2f3f0; }
.credentials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 30px; }
.credentials-grid article { padding-top: 20px; border-top: 1px solid #cfd3cb; }
.credentials-grid time { color: var(--blue); font-size: 11px; font-weight: 750; letter-spacing: .8px; }
.credentials-grid h2 { margin: 13px 0 4px; font-size: 21px; }
.credentials-grid p { margin: 0; color: var(--muted); font-size: 13px; }
.contact-band { padding: 110px 5vw; background: var(--blue); color: #fff; }
.contact-band > * { width: min(1120px, 100%); margin-right: auto; margin-left: auto; }
.contact-band .eyebrow { color: #c8d6ff; }
.contact-band h2 { margin-top: 20px; margin-bottom: 60px; font-size: clamp(45px, 7vw, 92px); line-height: .98; }
.contact-links { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.35); }
.contact-links > * { padding: 20px 14px 0 0; font-size: 17px; }
.contact-links span { display: block; margin-bottom: 5px; color: #c8d6ff; font-size: 10px; font-weight: 750; letter-spacing: 1px; }
.contact-links a:hover { text-decoration: underline; }
@media (max-width: 850px) {
  .resume-liu .liu-hero { min-height: 720px; }
  .liu-hero-title { align-items: flex-start; gap: 14px; }
  .hero-avatar { width: 64px; height: 64px; }
  .resume-liu .hero-content h1 { font-size: 58px; }
  .hero-role { font-size: 13px; }
  .hero-facts { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .hero-facts strong { font-size: 17px; }
  .resume-liu .hero-number { top: 23%; font-size: 110px; }
  .resume-liu .work-grid { grid-template-columns: 1fr; }
  .resume-liu .work-museum { grid-column: auto; display: block; }
  .resume-liu .work-museum .work-image { min-height: 220px; }
  .credentials-grid, .contact-links { grid-template-columns: 1fr; gap: 26px; }
  .contact-band { padding-top: 80px; padding-bottom: 80px; }
  .contact-band h2 { margin-bottom: 42px; }
}
@media print {
  .resume-liu .liu-hero { min-height: 610px; }
  .contact-band { break-before: page; }
  .contact-links { grid-template-columns: repeat(3, 1fr); }
}

/* Portfolio polish: real aspect ratios, larger type, and springy card feedback */
.resume-flow {
  --flow-spring: cubic-bezier(.16, 1.34, .3, 1);
  --flow-spring-soft: cubic-bezier(.22, 1.22, .36, 1);
}
.resume-flow .flow-open { padding: 9px 12px; font-size: 13px; }
.resume-flow .flow-hero-copy { max-width: 660px; font-size: 17px; line-height: 1.75; color: #b2bacb; }
.resume-flow .flow-primary-button,
.resume-flow .flow-secondary-button { min-height: 46px; padding: 13px 18px; font-size: 14px; }
.resume-flow .flow-nav a { padding: 12px 12px; font-size: 13px; }
.resume-flow .flow-location,
.resume-flow .flow-download { font-size: 12px; }
.resume-flow .flow-section-tag { font-size: 12px; }
.resume-flow .flow-section-heading > p { max-width: 340px; font-size: 15px; line-height: 1.75; }
.resume-flow .flow-skill-grid { align-items: start; gap: 16px; }
.resume-flow .flow-skill-card { min-height: 0; padding: 17px; }
.resume-flow .flow-skill-visual { height: clamp(112px, 10vw, 150px); }
.resume-flow .flow-skill-card h2 { margin-top: 16px; font-size: 22px; }
.resume-flow .flow-skill-card p { font-size: 13px; line-height: 1.55; }
.resume-flow .flow-card-index { top: 16px; right: 16px; font-size: 11px; }
.resume-flow .flow-experience-row { padding: 25px 0; }
.resume-flow .flow-date { font-size: 12px; }
.resume-flow .flow-experience-main h3 { font-size: 19px; }
.resume-flow .flow-experience-main h3 b { font-size: 13px; }
.resume-flow .flow-experience-main p { font-size: 14px; line-height: 1.75; }
.resume-flow .flow-tags { gap: 8px; margin-top: 14px; }
.resume-flow .flow-tags span { padding: 6px 9px; border-radius: 12px; font-size: 11px; }
.resume-flow .flow-status { padding: 6px 10px; font-size: 11px; }
.resume-flow .flow-project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; grid-auto-flow: row; gap: 16px; }
.resume-flow .flow-project-card {
  align-self: start;
  min-height: 0;
  height: auto;
  --rx: 0deg;
  --ry: 0deg;
  --lift: 0px;
  --card-scale: 1;
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift)) scale(var(--card-scale));
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 560ms var(--flow-spring), border-color 280ms ease, box-shadow 460ms var(--flow-spring-soft);
}
.resume-flow .flow-project-wide { grid-column: span 2; grid-row: auto; }
.resume-flow .flow-project-huaguoshan { grid-column: 1 / -1; }
.resume-flow .flow-project-image {
  min-height: 0;
  aspect-ratio: 16 / 9;
  background-color: #030611;
  background-repeat: no-repeat;
}
.resume-flow .flow-project-gimc .flow-project-image {
  min-height: 0;
  aspect-ratio: 4.04 / 1;
  background-size: contain;
  background-position: center;
}
.resume-flow .flow-project-huaguoshan .flow-project-image {
  min-height: 0;
  aspect-ratio: 6.5 / 1;
  background-size: contain;
  background-position: center;
}
.resume-flow .flow-project-card:has(.project-yili-launch) .flow-project-image,
.resume-flow .flow-project-card:has(.project-yili-award) .flow-project-image {
  aspect-ratio: 4.85 / 1;
  background-size: contain;
  background-position: center;
}
.resume-flow .flow-project-card:has(.project-yili-platinum) .flow-project-image {
  aspect-ratio: 10.67 / 1;
  background-size: contain;
  background-position: center;
}
.resume-flow .flow-project-copy { padding: 21px 22px 24px; }
.resume-flow .flow-project-copy > span { font-size: 11px; letter-spacing: 1px; }
.resume-flow .flow-project-copy h3 { margin: 11px 0 8px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; }
.resume-flow .flow-project-copy p { min-height: 0; font-size: 14px; line-height: 1.7; }
.resume-flow .flow-project-action { min-height: 44px; margin-top: 14px; font-size: 13px; }
.resume-flow .flow-project-action span { font-size: 18px; }
.resume-flow .flow-skill-card:hover,
.resume-flow .flow-project-card:hover,
.resume-flow .flow-skill-card:focus-visible,
.resume-flow .flow-project-card:focus-visible {
  --lift: -8px;
  --card-scale: 1.018;
  border-color: #2b74ee;
  outline: none;
  box-shadow: 0 20px 48px rgba(12, 85, 215, .28), 0 0 0 1px rgba(38, 125, 255, .12);
}
.resume-flow .flow-skill-card.flow-reveal:not(.is-visible),
.resume-flow .flow-project-card.flow-reveal:not(.is-visible) { transform: translateY(24px); }
.resume-flow .flow-skill-card.flow-reveal.is-visible,
.resume-flow .flow-project-card.flow-reveal.is-visible {
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift)) scale(var(--card-scale));
}
.resume-flow .flow-skill-card { transition: transform 560ms var(--flow-spring), border-color 280ms ease, box-shadow 460ms var(--flow-spring-soft); }
.resume-flow .flow-skill-card::before,
.resume-flow .flow-project-card::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: '';
  opacity: 0;
  background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 35%), rgba(92, 185, 255, .16), transparent 42%);
  transition: opacity 320ms ease;
}
.resume-flow .flow-skill-card:hover::before,
.resume-flow .flow-project-card:hover::before,
.resume-flow .flow-skill-card:focus-visible::before,
.resume-flow .flow-project-card:focus-visible::before { opacity: 1; }
.resume-flow .flow-project-gimc .flow-project-image,
.resume-flow .flow-project-huaguoshan .flow-project-image { transition: filter 360ms ease; }
.resume-flow .flow-project-gimc:hover .flow-project-image,
.resume-flow .flow-project-huaguoshan:hover .flow-project-image { transform: none; filter: saturate(1.12) brightness(1.06); }

/* AI product manager editorial layer */
.resume-flow {
  --product-ink: #f5f7ff;
  --product-muted: #98a5bd;
  --product-line: rgba(130, 154, 199, .18);
  --product-blue: #56b7ff;
  --product-violet: #8d7cff;
  font-family: 'Manrope', 'Noto Sans Local', 'Noto Sans SC', 'Source Han Sans SC', 'Microsoft YaHei UI', sans-serif;
  background:
    radial-gradient(circle at 68% 8%, rgba(54, 93, 186, .20), transparent 25rem),
    radial-gradient(circle at 25% 68%, rgba(44, 117, 208, .10), transparent 28rem),
    #02030a;
}
.resume-flow .flow-hero h1, .resume-flow .flow-section-heading h2, .resume-flow .flow-project-copy h3, .resume-flow .flow-contact-section h2, .resume-flow .flow-skill-card h2, .resume-flow .flow-dialog-inner h2, .leolab-case-section h3, .leolab-method h3 { font-family: 'Manrope', 'Noto Sans Local', 'Noto Sans SC', 'Microsoft YaHei UI', sans-serif; }
.resume-flow .flow-main > main { background: transparent; }
.resume-flow .flow-hero { position: relative; padding-top: 110px; padding-bottom: 74px; }
.resume-flow .flow-hero::after { content: 'AI / PRODUCT / SYSTEMS'; position: absolute; right: 0; top: 116px; color: rgba(136, 162, 215, .16); font: 700 11px/1 var(--sans); letter-spacing: .18em; writing-mode: vertical-rl; }
.resume-flow .ai-hero-title { max-width: 900px; margin: 30px 0 20px; }
.resume-flow .ai-hero-title > span { color: #7d91b2; font: 700 clamp(12px, 1.15vw, 16px)/1.2 var(--sans); letter-spacing: .16em; }
.resume-flow .ai-hero-title > strong { margin-top: 20px; color: #fbfcff; font: 780 clamp(58px, 8vw, 112px)/.98 var(--sans); letter-spacing: -.055em; }
.resume-flow .ai-hero-title > em { margin-top: 24px; color: #cbd5e8; font: 520 clamp(18px, 2vw, 28px)/1.35 var(--sans); letter-spacing: -.02em; }
.resume-flow .flow-hero-copy { max-width: 690px; margin-top: 30px; color: #aab5c8; font-size: 17px; line-height: 1.82; }
.hero-proof-row { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); max-width: 760px; gap: 12px; margin-top: 44px; }
.hero-proof-row > div { padding: 14px 16px 13px; border-top: 1px solid rgba(106, 163, 233, .36); background: linear-gradient(180deg, rgba(19, 48, 91, .28), transparent); }
.hero-proof-row strong, .hero-proof-row span { display: block; }
.hero-proof-row strong { color: #f6f9ff; font: 760 clamp(22px, 2.2vw, 32px)/1 var(--sans); letter-spacing: -.04em; }
.hero-proof-row span { margin-top: 8px; color: #8594ad; font-size: 12px; }
.resume-flow .flow-section { border-top-color: var(--product-line); }
.resume-flow .leolab-case-section { padding-top: 100px; padding-bottom: 104px; }
.resume-flow .leolab-heading { margin-bottom: 34px; }
.resume-flow .leolab-heading h2 { font-size: clamp(64px, 8vw, 112px); letter-spacing: -.06em; }
.resume-flow .leolab-heading > p { max-width: 420px; font-size: 16px; }
.leolab-case-hero { display: grid; grid-template-columns: .82fr 1.18fr; gap: 34px; align-items: stretch; padding: 26px; border: 1px solid rgba(101, 145, 209, .34); border-radius: 16px; background: linear-gradient(135deg, rgba(8, 15, 31, .95), rgba(10, 15, 27, .72)); box-shadow: 0 24px 70px rgba(0, 18, 59, .26); }
.leolab-case-intro { display: flex; flex-direction: column; justify-content: center; padding: 12px 6px 12px 8px; }
.leolab-logo-line { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; }
.leolab-logo-line img { width: min(255px, 88%); height: auto; border-radius: 7px; mix-blend-mode: screen; }
.leolab-logo-line span { color: #80baff; font: 700 10px/1.2 var(--sans); letter-spacing: .14em; white-space: nowrap; }
.leolab-role { color: var(--product-blue); font-size: 12px; font-weight: 750; letter-spacing: .08em; }
.leolab-case-intro h3 { max-width: 480px; margin: 16px 0 16px; color: #f5f8ff; font: 720 clamp(28px, 3.2vw, 48px)/1.05 var(--sans); letter-spacing: -.045em; }
.leolab-case-intro p { max-width: 500px; margin: 0; color: #a0aec2; font-size: 15px; line-height: 1.8; }
.leolab-download-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 15px; margin-top: 24px; }
.leolab-download-button { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 15px; border: 1px solid rgba(87,184,255,.65); border-radius: 6px; color: #031321 !important; background: #57b8ff; font-size: 13px; font-weight: 800; text-decoration: none; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.leolab-download-button:hover { border-color: #a8ddff; background: #8dceff; transform: translateY(-1px); }
.leolab-download-button b { font-size: 16px; line-height: 1; }
.leolab-download-note { color: #8295b1; font-size: 11px; line-height: 1.6; }
.leolab-download-note strong { color: #d9e9ff; letter-spacing: .08em; }
.leolab-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.leolab-tags span { padding: 7px 10px; border: 1px solid rgba(112, 161, 225, .3); border-radius: 999px; color: #c5d8f5; background: rgba(25, 53, 94, .35); font-size: 11px; }
.leolab-screen { position: relative; display: block; overflow: hidden; width: 100%; padding: 0; border: 1px solid rgba(110, 159, 222, .35); border-radius: 12px; color: #c5dcff; background: #07101f; cursor: pointer; text-align: left; --rx: 0deg; --ry: 0deg; --lift: 0px; --card-scale: 1; transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift)) scale(var(--card-scale)); transform-style: preserve-3d; will-change: transform; transition: transform 560ms var(--flow-spring), border-color 280ms ease, box-shadow 460ms var(--flow-spring-soft); }
.leolab-screen img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; filter: saturate(.88) contrast(1.03); transition: transform .7s var(--flow-spring), filter .4s ease; }
.leolab-screen span { display: block; padding: 11px 13px; border-top: 1px solid rgba(110, 159, 222, .24); color: #98bde8; font: 700 11px/1 var(--sans); letter-spacing: .08em; }
.leolab-screen:hover, .leolab-screen:focus-visible { --lift: -8px; --card-scale: 1.018; border-color: #55b5ff; outline: none; box-shadow: 0 18px 46px rgba(24, 109, 205, .24), 0 0 0 1px rgba(96, 183, 255, .12); }
.leolab-screen:hover img { transform: scale(1.035); filter: saturate(1.08) contrast(1.06); }
.leolab-outcomes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.leolab-outcomes article { position: relative; overflow: hidden; min-height: 176px; padding: 19px; border: 1px solid rgba(104, 142, 196, .22); border-radius: 11px; background: rgba(8, 14, 27, .78); --rx: 0deg; --ry: 0deg; --lift: 0px; --card-scale: 1; transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift)) scale(var(--card-scale)); transform-style: preserve-3d; will-change: transform; transition: transform 560ms var(--flow-spring), border-color 280ms ease, box-shadow 460ms var(--flow-spring-soft); }
.leolab-outcomes article::after, .leolab-screen::after { position: absolute; inset: 0; pointer-events: none; content: ''; opacity: 0; background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 35%), rgba(99, 190, 255, .18), transparent 44%); transition: opacity 320ms ease; }
.leolab-outcomes article:hover, .leolab-outcomes article:focus-within { --lift: -7px; --card-scale: 1.018; border-color: rgba(85, 181, 255, .72); box-shadow: 0 18px 42px rgba(13, 73, 166, .23), 0 0 0 1px rgba(85, 181, 255, .09); }
.leolab-outcomes article:hover::after, .leolab-outcomes article:focus-within::after, .leolab-screen:hover::after, .leolab-screen:focus-visible::after { opacity: 1; }
.leolab-outcomes span { color: #5eb9ff; font: 700 11px/1 var(--sans); letter-spacing: .12em; }
.leolab-outcomes strong { display: block; margin-top: 25px; color: #f1f5ff; font-size: 18px; }
.leolab-outcomes p { margin: 9px 0 0; color: #8998b0; font-size: 13px; line-height: 1.65; }
.leolab-screens-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }
.leolab-screens-grid .leolab-screen img { aspect-ratio: 16 / 9; }
.leolab-screens-grid .leolab-screen img { height: auto; aspect-ratio: auto; object-fit: contain; }
.leolab-method { display: grid; grid-template-columns: .78fr 1.22fr; gap: 40px; margin-top: 80px; padding-top: 30px; border-top: 1px solid rgba(104, 142, 196, .28); }
.leolab-method h3 { margin: 16px 0 0; color: #f3f6ff; font: 690 clamp(28px, 3.2vw, 45px)/1.08 var(--sans); letter-spacing: -.04em; }
.leolab-method ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 34px; padding: 0; margin: 0; list-style: none; counter-reset: product-step; }
.leolab-method li { position: relative; padding: 0 0 0 38px; counter-increment: product-step; }
.leolab-method li::before { content: '0' counter(product-step); position: absolute; top: 1px; left: 0; color: #5eb9ff; font: 700 12px/1 var(--sans); letter-spacing: .08em; }
.leolab-method b { color: #e7efff; font-size: 16px; }
.leolab-method p { margin: 8px 0 0; color: #8d9bb2; font-size: 13px; line-height: 1.7; }
.leolab-lightbox { width: min(1200px, calc(100% - 34px)); max-width: none; padding: 0; border: 1px solid rgba(87, 160, 255, .52); border-radius: 14px; color: #eef5ff; background: #060a13; box-shadow: 0 28px 110px rgba(0,0,0,.72), 0 0 70px rgba(31, 125, 255, .2); }
.leolab-lightbox::backdrop { background: rgba(0, 3, 12, .84); backdrop-filter: blur(8px); }
.leolab-lightbox > div { position: relative; padding: 22px; }
.leolab-lightbox > div > span { color: #68bcff; font: 700 11px/1 var(--sans); letter-spacing: .12em; }
.leolab-lightbox h2 { margin: 10px 0 18px; font-size: 28px; }
.leolab-lightbox img { display: block; width: 100%; max-height: 76vh; object-fit: contain; border: 1px solid rgba(130, 170, 227, .22); border-radius: 9px; background: #0b1220; }
.leolab-lightbox-close { position: absolute; top: 14px; right: 14px; z-index: 1; width: 36px; height: 36px; border: 1px solid rgba(141, 176, 225, .3); border-radius: 50%; color: #d7e8ff; background: rgba(8, 18, 35, .7); font-size: 23px; cursor: pointer; }
.leolab-lightbox-close:hover { border-color: #62baff; color: #62baff; }
.mark-leolab { color: #07111e; background: linear-gradient(135deg, #66c7ff, #8d7cff); }
.skill-product .flow-skill-visual, .skill-agent .flow-skill-visual, .skill-ux .flow-skill-visual, .skill-delivery .flow-skill-visual { display: flex; align-items: flex-end; justify-content: space-between; padding: 13px; background: linear-gradient(135deg, #102e55, #0a111f 60%, #1c1240); }
.skill-agent .flow-skill-visual { background: linear-gradient(135deg, #153f66, #1d154a 65%, #09101c); }
.skill-ux .flow-skill-visual { background: linear-gradient(135deg, #1b3d55, #101629 62%, #24183b); }
.skill-delivery .flow-skill-visual { background: linear-gradient(135deg, #1a4652, #0e1727 62%, #2a1830); }
.flow-skill-visual b { color: #f3f7ff; font: 760 27px/1 var(--sans); letter-spacing: -.03em; }
.flow-skill-visual span { color: #84c9ff; font: 700 11px/1 var(--sans); letter-spacing: .1em; }
.resume-flow .flow-skill-card h2 { font-size: 21px; }
.resume-flow .flow-skill-card p { font-size: 13px; line-height: 1.65; }
.resume-flow .flow-skills-section { padding-top: 58px; padding-bottom: 58px; }
.resume-flow .flow-skill-grid { gap: 0; border-top: 1px solid rgba(118, 150, 202, .26); border-bottom: 1px solid rgba(118, 150, 202, .26); }
.resume-flow .flow-skill-card { min-height: 210px; padding: 26px 24px 24px; border: 0; border-right: 1px solid rgba(118, 150, 202, .20); border-radius: 0; background: transparent; }
.resume-flow .flow-skill-card:last-child { border-right: 0; }
.resume-flow .flow-skill-card:hover,
.resume-flow .flow-skill-card:focus-visible { border-color: rgba(118, 150, 202, .20); background: rgba(14, 25, 44, .52); box-shadow: inset 0 2px 0 #1da8ff, 0 18px 46px rgba(0, 18, 47, .22); }
.resume-flow .flow-skill-kicker { display: flex; align-items: center; gap: 10px; color: #75859f; font: 700 10px/1 var(--sans); letter-spacing: .12em; }
.resume-flow .flow-skill-kicker span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(91, 173, 245, .42); border-radius: 50%; color: #65bbff; letter-spacing: 0; }
.resume-flow .flow-skill-kicker b { font: inherit; }
.resume-flow .flow-skill-card > div:last-child { margin-top: auto; }
.resume-flow .flow-skill-card h2 { margin: 42px 0 9px; font-size: 23px; }
.resume-flow .flow-skill-card p { max-width: 210px; margin: 0; color: #9daabc; font-size: 13px; line-height: 1.7; }
.resume-flow .flow-toolkit-list > div { padding: 22px 0; }
.resume-flow .flow-toolkit-list strong { color: #f0f5ff; font-size: 16px; }
.resume-flow .flow-toolkit-list span { color: #9aa8bd; font-size: 14px; line-height: 1.7; }

/* Visual work is treated as an editorial gallery: one lead film, compact studies, then a full-width long-screen piece. */
.resume-flow .flow-project-section { padding-top: 92px; padding-bottom: 112px; }
.resume-flow .flow-project-section .flow-section-heading { align-items: end; margin-bottom: 38px; }
.resume-flow .flow-project-section .flow-section-heading h2 { font-size: clamp(54px, 6vw, 86px); letter-spacing: -.045em; }
.resume-flow .flow-project-section .flow-section-heading > p { max-width: 430px; color: #a7b2c6; font-size: 15px; line-height: 1.8; }
.resume-flow .flow-project-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px 18px; align-items: start; }
.resume-flow .flow-project-card { grid-column: span 4; overflow: hidden; border-radius: 12px; background: linear-gradient(180deg, #09101f, #070a13); }
.resume-flow .flow-project-card.flow-project-gimc { grid-column: 1 / -1; }
.resume-flow .flow-project-card.flow-project-huaguoshan { grid-column: 1 / -1; }
.resume-flow .flow-project-strip-grid,
.resume-flow .flow-project-standard-grid { grid-column: 1 / -1; display: grid; gap: 18px; align-items: start; }
.resume-flow .flow-project-strip-grid { grid-template-columns: 1fr; gap: 18px; }
.resume-flow .flow-project-standard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.resume-flow .flow-project-strip-grid .flow-project-card,
.resume-flow .flow-project-standard-grid .flow-project-card { grid-column: auto; }
.resume-flow .flow-project-card.flow-project-gimc .flow-project-image { aspect-ratio: 4.04 / 1; }
.resume-flow .flow-project-card.flow-project-huaguoshan .flow-project-image { aspect-ratio: 6.5 / 1; }
.resume-flow .flow-project-standard-grid .flow-project-image { aspect-ratio: 16 / 9; }
.resume-flow .flow-project-image { min-height: 0; background-color: #030611; background-repeat: no-repeat; }
.resume-flow .flow-project-strip .flow-project-image { width: 100%; aspect-ratio: 4.85 / 1; background-size: cover; background-position: center; border-bottom: 1px solid rgba(116, 158, 222, .16); }
.resume-flow .flow-project-strip:has(.project-yili-platinum) .flow-project-image { aspect-ratio: 10.67 / 1; }
.resume-flow .flow-project-strip .flow-project-copy { display: grid; grid-template-columns: minmax(210px, .8fr) minmax(240px, 1.25fr) auto auto; column-gap: 22px; align-items: center; min-height: 118px; padding: 18px 22px 20px; }
.resume-flow .flow-project-strip .flow-project-copy > span,
.resume-flow .flow-project-strip .flow-project-copy h3 { grid-column: 1; }
.resume-flow .flow-project-strip .flow-project-copy > span { align-self: end; }
.resume-flow .flow-project-strip .flow-project-copy h3 { align-self: start; margin: 8px 0 0; font-size: clamp(22px, 2vw, 30px); }
.resume-flow .flow-project-strip .flow-project-copy p { grid-column: 2; grid-row: 1 / span 2; min-height: 0; margin: 0; }
.resume-flow .flow-project-strip .flow-tags { grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-content: flex-end; margin-top: 0; white-space: nowrap; }
.resume-flow .flow-project-strip .flow-project-action { grid-column: 4; grid-row: 1 / span 2; align-self: center; display: grid; place-items: center; width: 46px; height: 46px; margin: 0; padding: 0; border: 1px solid rgba(92, 177, 255, .38); border-radius: 50%; font-size: 23px; }
.resume-flow .flow-project-copy { padding: 19px 20px 22px; }
.resume-flow .flow-project-copy h3 { margin: 10px 0 7px; font-size: clamp(20px, 2vw, 28px); }
.resume-flow .flow-project-copy p { color: #9ba8bd; font-size: 13px; line-height: 1.7; }
.resume-flow .flow-project-card.flow-project-gimc .flow-project-copy,
.resume-flow .flow-project-card.flow-project-huaguoshan .flow-project-copy { display: grid; grid-template-columns: 1fr auto; column-gap: 22px; align-items: end; }
.resume-flow .flow-project-card.flow-project-gimc .flow-project-copy > span,
.resume-flow .flow-project-card.flow-project-huaguoshan .flow-project-copy > span,
.resume-flow .flow-project-card.flow-project-gimc .flow-project-copy h3,
.resume-flow .flow-project-card.flow-project-huaguoshan .flow-project-copy h3,
.resume-flow .flow-project-card.flow-project-gimc .flow-project-copy p,
.resume-flow .flow-project-card.flow-project-huaguoshan .flow-project-copy p { grid-column: 1; }
.resume-flow .flow-project-card.flow-project-gimc .flow-project-copy .flow-tags,
.resume-flow .flow-project-card.flow-project-huaguoshan .flow-project-copy .flow-tags,
.resume-flow .flow-project-card.flow-project-gimc .flow-project-action,
.resume-flow .flow-project-card.flow-project-huaguoshan .flow-project-action { grid-column: 2; }
.resume-flow .flow-project-card.flow-project-gimc .flow-tags,
.resume-flow .flow-project-card.flow-project-huaguoshan .flow-tags { grid-row: 2 / span 2; align-self: center; justify-content: flex-end; margin-top: 0; }
.resume-flow .flow-project-card.flow-project-gimc .flow-project-action,
.resume-flow .flow-project-card.flow-project-huaguoshan .flow-project-action { grid-row: 4; justify-self: end; margin-top: 12px; }
.resume-flow .flow-project-card.flow-project-huaguoshan { border-color: rgba(91, 172, 255, .42); box-shadow: 0 18px 56px rgba(22, 84, 174, .16); }
.resume-flow .flow-project-card.flow-project-huaguoshan .flow-project-image { background-size: cover; background-position: center; }
.resume-flow .flow-project-card.flow-project-huaguoshan .flow-project-copy h3 { font-size: clamp(24px, 3vw, 38px); }

@media (max-width: 900px) {
  .resume-flow .flow-project-section { padding-top: 72px; padding-bottom: 82px; }
  .resume-flow .flow-project-grid { grid-template-columns: 1fr; gap: 14px; }
  .resume-flow .flow-project-card,
  .resume-flow .flow-project-card.flow-project-gimc,
  .resume-flow .flow-project-card.flow-project-huaguoshan { grid-column: auto; }
  .resume-flow .flow-project-strip-grid,
  .resume-flow .flow-project-standard-grid { grid-column: auto; grid-template-columns: 1fr; gap: 14px; }
  .resume-flow .flow-project-strip .flow-project-image,
  .resume-flow .flow-project-strip:has(.project-yili-platinum) .flow-project-image { aspect-ratio: auto; height: clamp(58px, 18vw, 84px); }
  .resume-flow .flow-project-strip .flow-project-copy { grid-template-columns: 1fr auto; min-height: 0; padding: 16px 17px 18px; }
  .resume-flow .flow-project-strip .flow-project-copy > span,
  .resume-flow .flow-project-strip .flow-project-copy h3,
  .resume-flow .flow-project-strip .flow-project-copy p,
  .resume-flow .flow-project-strip .flow-tags { grid-column: 1; grid-row: auto; }
  .resume-flow .flow-project-strip .flow-project-copy p { margin-top: 8px; }
  .resume-flow .flow-project-strip .flow-tags { justify-content: flex-start; margin-top: 12px; }
  .resume-flow .flow-project-strip .flow-project-action { grid-column: 2; grid-row: 1 / span 4; }
  .resume-flow .flow-skill-grid { grid-template-columns: 1fr 1fr; }
  .resume-flow .flow-skill-card { min-height: 190px; border-right: 1px solid rgba(118, 150, 202, .20); border-bottom: 1px solid rgba(118, 150, 202, .20); }
  .resume-flow .flow-skill-card:nth-child(2n) { border-right: 0; }
  .resume-flow .flow-skill-card:nth-last-child(-n+2) { border-bottom: 0; }
  .resume-flow .flow-skill-card h2 { margin-top: 32px; }
  .resume-flow .flow-project-card.flow-project-gimc .flow-project-copy,
  .resume-flow .flow-project-card.flow-project-huaguoshan .flow-project-copy { display: block; }
  .resume-flow .flow-project-card.flow-project-gimc .flow-tags,
  .resume-flow .flow-project-card.flow-project-huaguoshan .flow-tags { justify-content: flex-start; margin-top: 14px; }
  .resume-flow .flow-project-card.flow-project-gimc .flow-project-action,
  .resume-flow .flow-project-card.flow-project-huaguoshan .flow-project-action { margin-top: 14px; }
}

@media (max-width: 900px) {
  .resume-flow .flow-hero-copy { font-size: 16px; line-height: 1.75; }
  .resume-flow .flow-primary-button,
  .resume-flow .flow-secondary-button { min-height: 48px; font-size: 14px; }
  .resume-flow .flow-nav a { font-size: 11px; }
  .resume-flow .flow-section-heading h2 { font-size: 42px; }
  .resume-flow .flow-section-heading > p { font-size: 14px; }
  .resume-flow .flow-skill-card { padding: 13px; }
  .resume-flow .flow-skill-visual { height: 96px; }
  .resume-flow .flow-skill-card h2 { margin-top: 13px; font-size: 20px; }
  .resume-flow .flow-skill-card p { font-size: 12px; }
  .resume-flow .flow-experience-row { padding: 21px 0; }
  .resume-flow .flow-experience-main h3 { font-size: 17px; }
  .resume-flow .flow-experience-main p { font-size: 14px; }
  .resume-flow .flow-project-grid { grid-template-columns: 1fr; gap: 14px; }
  .resume-flow .flow-project-wide,
  .resume-flow .flow-project-huaguoshan { grid-column: auto; }
  .resume-flow .flow-project-copy { padding: 18px 18px 21px; }
  .resume-flow .flow-project-copy h3 { font-size: 23px; }
  .resume-flow .flow-project-copy p { font-size: 14px; }
  .resume-flow .flow-project-image { aspect-ratio: 16 / 9; }
  .resume-flow .flow-project-gimc .flow-project-image { aspect-ratio: 4.04 / 1; }
  .resume-flow .flow-project-huaguoshan .flow-project-image { aspect-ratio: 6.5 / 1; }
  .resume-flow .flow-hero { padding-top: 72px; }
  .resume-flow .flow-hero::after { display: none; }
  .resume-flow .ai-hero-title > strong { font-size: clamp(48px, 14vw, 74px); }
  .resume-flow .ai-hero-title > em { font-size: 18px; }
  .hero-proof-row { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 30px; }
  .hero-proof-row > div { padding: 12px; }
  .hero-proof-row strong { font-size: 24px; }
  .hero-proof-row span { font-size: 11px; }
  .resume-flow .leolab-case-section { padding-top: 74px; padding-bottom: 76px; }
  .resume-flow .leolab-heading h2 { font-size: 68px; }
  .leolab-case-hero { grid-template-columns: 1fr; gap: 22px; padding: 16px; }
  .leolab-logo-line { margin-bottom: 26px; }
  .leolab-logo-line { align-items: flex-start; flex-wrap: wrap; gap: 10px 14px; }
  .leolab-logo-line img { width: min(230px, 100%); }
  .leolab-logo-line span { white-space: normal; }
  .leolab-case-intro h3 { font-size: 34px; }
  .leolab-outcomes { grid-template-columns: repeat(2, 1fr); }
  .leolab-outcomes article { min-height: 164px; padding: 14px; }
  .leolab-outcomes strong { margin-top: 18px; font-size: 16px; }
  .leolab-screens-grid { grid-template-columns: 1fr; }
  .leolab-method { grid-template-columns: 1fr; gap: 30px; margin-top: 56px; }
  .leolab-method ol { grid-template-columns: 1fr; gap: 18px; }
}
/* v20260823-2 · dialog/video clarity + clean LeoLab logo */
.leolab-logo-line {
  align-items: center;
}
.leolab-logo-line img {
  width: min(226px, 84%);
  height: auto;
  border-radius: 0;
  mix-blend-mode: normal;
  filter: drop-shadow(0 0 18px rgba(76, 174, 255, .22));
  image-rendering: auto;
}
.flow-project-dialog {
  width: min(1120px, calc(100vw - 48px));
  max-width: none;
  padding: 0;
  border-color: rgba(83, 154, 255, .56);
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 0%, rgba(22, 54, 116, .34), transparent 34%), #050811;
  box-shadow: 0 28px 120px rgba(0,0,0,.76), 0 0 80px rgba(25,118,255,.22);
}
.flow-project-dialog::backdrop {
  background: rgba(0, 3, 12, .86);
  backdrop-filter: blur(10px);
}
.flow-dialog-inner {
  padding: 30px 32px 28px;
}
.flow-dialog-inner h2 {
  margin: 14px 0 18px;
  color: #f5f8ff;
  font-size: clamp(30px, 3.2vw, 46px);
  letter-spacing: -.04em;
}
.flow-dialog-inner video {
  display: block;
  width: 100%;
  height: min(62vh, 620px);
  max-height: none;
  margin: 18px 0 18px;
  border: 1px solid rgba(91, 149, 237, .36);
  border-radius: 12px;
  background: radial-gradient(circle at 50% 50%, rgba(22, 47, 92, .34), #010207 58%);
  object-fit: contain;
  image-rendering: auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 18px 52px rgba(0,0,0,.36);
}
.flow-project-dialog.is-ultrawide {
  width: min(1280px, calc(100vw - 36px));
}
.flow-project-dialog.is-ultrawide .flow-dialog-inner video {
  height: clamp(220px, 38vw, 520px);
}
.flow-project-dialog.is-stage-strip {
  width: min(1360px, calc(100vw - 28px));
}
.flow-project-dialog.is-stage-strip .flow-dialog-inner video {
  height: clamp(190px, 34vw, 460px);
}
.flow-project-dialog.is-stage-strip #flow-dialog-body,
.flow-project-dialog.is-ultrawide #flow-dialog-body {
  max-width: 760px;
}
.flow-dialog-inner > p {
  max-width: 760px;
  color: #aeb9cd;
  font-size: 14px;
}
.flow-dialog-footer {
  margin-top: 26px;
}
@media (max-width: 900px) {
  .flow-project-dialog,
  .flow-project-dialog.is-ultrawide,
  .flow-project-dialog.is-stage-strip {
    width: min(100vw - 18px, 720px);
    border-radius: 13px;
  }
  .flow-dialog-inner {
    padding: 22px 16px 20px;
  }
  .flow-dialog-inner video,
  .flow-project-dialog.is-ultrawide .flow-dialog-inner video,
  .flow-project-dialog.is-stage-strip .flow-dialog-inner video {
    height: clamp(180px, 54vw, 360px);
    border-radius: 10px;
  }
  .flow-dialog-inner h2 {
    font-size: 30px;
  }
  .leolab-logo-line img {
    width: min(210px, 92%);
  }
}
/* v20260823-2 · platinum strip focus */
.flow-project-dialog.is-platinum-strip {
  width: min(1400px, calc(100vw - 24px));
}
.flow-project-dialog.is-platinum-strip .flow-dialog-inner video {
  height: clamp(320px, 56vh, 640px);
  object-fit: cover;
  object-position: center center;
}
.flow-project-dialog.is-platinum-strip #flow-dialog-body {
  max-width: 820px;
}
@media (max-width: 900px) {
  .flow-project-dialog.is-platinum-strip,
  .flow-project-dialog.is-stage-strip,
  .flow-project-dialog.is-ultrawide {
    width: min(100vw - 12px, 720px);
  }
  .flow-project-dialog.is-platinum-strip .flow-dialog-inner video {
    height: clamp(220px, 60vw, 380px);
  }
}


/* v20260823-2 · high-definition stage viewer */
.flow-video-scroll {
  position: relative;
  overflow: hidden;
  margin: 18px 0;
  border-radius: 12px;
}
.flow-video-scroll > video { margin: 0; }
.flow-project-dialog.is-stage-strip .flow-video-scroll,
.flow-project-dialog.is-ultrawide .flow-video-scroll,
.flow-project-dialog.is-platinum-strip .flow-video-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  scrollbar-color: rgba(96, 183, 255, .55) rgba(255,255,255,.08);
  scrollbar-width: thin;
}
.flow-project-dialog.is-stage-strip .flow-video-scroll::-webkit-scrollbar,
.flow-project-dialog.is-ultrawide .flow-video-scroll::-webkit-scrollbar,
.flow-project-dialog.is-platinum-strip .flow-video-scroll::-webkit-scrollbar { height: 8px; }
.flow-project-dialog.is-stage-strip .flow-video-scroll::-webkit-scrollbar-track,
.flow-project-dialog.is-ultrawide .flow-video-scroll::-webkit-scrollbar-track,
.flow-project-dialog.is-platinum-strip .flow-video-scroll::-webkit-scrollbar-track {
  background: rgba(255,255,255,.08);
  border-radius: 999px;
}
.flow-project-dialog.is-stage-strip .flow-video-scroll::-webkit-scrollbar-thumb,
.flow-project-dialog.is-ultrawide .flow-video-scroll::-webkit-scrollbar-thumb,
.flow-project-dialog.is-platinum-strip .flow-video-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #4bb4ff, #8d7cff);
  border-radius: 999px;
}
.flow-project-dialog.is-stage-strip .flow-video-scroll::after,
.flow-project-dialog.is-ultrawide .flow-video-scroll::after,
.flow-project-dialog.is-platinum-strip .flow-video-scroll::after {
  content: '横向滑动查看完整长屏';
  position: sticky;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  margin-top: -36px;
  padding: 7px 10px;
  border: 1px solid rgba(109, 181, 255, .32);
  border-radius: 999px;
  color: #cfe5ff;
  background: rgba(4, 10, 20, .72);
  backdrop-filter: blur(8px);
  font: 700 11px/1 var(--sans);
  letter-spacing: .08em;
  pointer-events: none;
}
.flow-project-dialog.is-stage-strip .flow-dialog-inner video,
.flow-project-dialog.is-ultrawide .flow-dialog-inner video {
  width: auto;
  min-width: 100%;
  max-width: none;
  object-fit: contain;
}
.flow-project-dialog.is-platinum-strip .flow-dialog-inner video {
  width: auto;
  min-width: 100%;
  max-width: none;
  height: clamp(360px, 58vh, 680px);
  object-fit: contain;
  object-position: center center;
}
@media (max-width: 900px) {
  .flow-video-scroll { margin: 14px 0; }
  .flow-project-dialog.is-platinum-strip .flow-dialog-inner video,
  .flow-project-dialog.is-stage-strip .flow-dialog-inner video,
  .flow-project-dialog.is-ultrawide .flow-dialog-inner video {
    width: 100%;
    height: auto;
    max-height: 58vh;
  }
  .flow-project-dialog.is-stage-strip .flow-video-scroll::after,
  .flow-project-dialog.is-ultrawide .flow-video-scroll::after,
  .flow-project-dialog.is-platinum-strip .flow-video-scroll::after { display: none; }
}
/* v20260823-2 · logo text + proportional media + complete video controls */
.leolab-logo-line.leolab-wordmark {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 38px;
}
.leolab-wordmark strong {
  display: inline-flex;
  color: #f6f9ff;
  font: 850 clamp(34px, 4.2vw, 58px)/.88 var(--sans);
  letter-spacing: -.065em;
  text-shadow: 0 0 28px rgba(82, 175, 255, .26);
}
.leolab-wordmark span {
  transform: translateY(-3px);
  color: #80baff;
  font: 760 10px/1.2 var(--sans);
  letter-spacing: .16em;
  white-space: nowrap;
}
.leolab-logo-line:not(.leolab-wordmark) img { display: none; }

/* Product screenshots: keep the real screenshot ratio inside the frame, no cropped/out-of-frame feel. */
.leolab-screen {
  background: linear-gradient(180deg, #07101f, #050b16);
}
.leolab-screen img,
.leolab-screen-main img,
.leolab-screens-grid .leolab-screen img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  max-height: none;
  object-fit: contain;
  object-position: center top;
  background: #07101f;
}
.leolab-screen-main img {
  border-bottom: 1px solid rgba(110, 159, 222, .24);
}

/* Portfolio covers: use proportional fitting instead of aggressive cover crop. */
.resume-flow .flow-project-image {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.resume-flow .flow-project-strip .flow-project-image,
.resume-flow .flow-project-card.flow-project-huaguoshan .flow-project-image {
  background-size: contain;
  background-position: center center;
}
.resume-flow .flow-project-card:hover .flow-project-image,
.resume-flow .flow-project-card:focus-visible .flow-project-image {
  transform: scale(1.012);
}

/* Video dialog: show the complete video in native controls, no horizontal scroll layer blocking the timeline. */
.flow-video-scroll,
.flow-project-dialog.is-stage-strip .flow-video-scroll,
.flow-project-dialog.is-ultrawide .flow-video-scroll,
.flow-project-dialog.is-platinum-strip .flow-video-scroll {
  overflow: visible;
  padding-bottom: 0;
  margin: 18px 0;
  border-radius: 12px;
  scrollbar-width: auto;
}
.flow-project-dialog.is-stage-strip .flow-video-scroll::after,
.flow-project-dialog.is-ultrawide .flow-video-scroll::after,
.flow-project-dialog.is-platinum-strip .flow-video-scroll::after {
  display: none;
  content: none;
}
.flow-dialog-inner video,
.flow-project-dialog.is-stage-strip .flow-dialog-inner video,
.flow-project-dialog.is-ultrawide .flow-dialog-inner video,
.flow-project-dialog.is-platinum-strip .flow-dialog-inner video {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  max-height: min(72vh, 720px);
  margin: 0;
  object-fit: contain;
  object-position: center center;
  pointer-events: auto;
  touch-action: auto;
}
.flow-project-dialog.is-platinum-strip .flow-dialog-inner video {
  height: auto;
  max-height: min(76vh, 760px);
}
.flow-dialog-inner {
  max-height: calc(100vh - 34px);
  overflow-y: auto;
}
@media (max-width: 900px) {
  .leolab-logo-line.leolab-wordmark {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 26px;
  }
  .leolab-wordmark strong { font-size: 42px; }
  .leolab-wordmark span { transform: none; white-space: normal; }
  .flow-dialog-inner video,
  .flow-project-dialog.is-stage-strip .flow-dialog-inner video,
  .flow-project-dialog.is-ultrawide .flow-dialog-inner video,
  .flow-project-dialog.is-platinum-strip .flow-dialog-inner video {
    width: 100%;
    height: auto;
    max-height: 60vh;
  }
}

/* v20260823-3 · final overrides for names, screenshots, covers, and video players */
.leolab-software-name {
  display: inline-flex;
  align-items: center;
  margin-bottom: 38px;
  color: #f6f9ff;
  font: 850 clamp(34px, 4.2vw, 58px)/.88 var(--sans);
  letter-spacing: -.065em;
  text-shadow: 0 0 28px rgba(82, 175, 255, .26);
}
.resume-flow .flow-project-image {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.resume-flow .flow-project-strip .flow-project-image,
.resume-flow .flow-project-card.flow-project-huaguoshan .flow-project-image,
.resume-flow .flow-project-card.flow-project-gimc .flow-project-image {
  background-size: contain;
  background-position: center center;
}
.resume-flow .flow-project-standard-grid .flow-project-image {
  background-size: cover;
}
.leolab-screen img,
.leolab-screen-main img,
.leolab-screens-grid .leolab-screen img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2107 / 1299;
  object-fit: cover;
  object-position: center center;
  background: #07101f;
}
.flow-dialog-inner video,
.flow-project-dialog.is-stage-strip .flow-dialog-inner video,
.flow-project-dialog.is-ultrawide .flow-dialog-inner video,
.flow-project-dialog.is-platinum-strip .flow-dialog-inner video {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center center;
  pointer-events: auto;
  touch-action: auto;
}
.flow-project-dialog.is-stage-strip .flow-dialog-inner video,
.flow-project-dialog.is-ultrawide .flow-dialog-inner video {
  height: clamp(260px, 42vw, 520px);
  max-height: none;
}
.flow-project-dialog.is-platinum-strip .flow-dialog-inner video {
  height: clamp(340px, 56vw, 680px);
  max-height: none;
}
.flow-dialog-inner {
  max-height: calc(100vh - 34px);
  overflow-y: auto;
}
@media (max-width: 900px) {
  .leolab-software-name {
    margin-bottom: 26px;
    font-size: 42px;
  }
  .flow-project-dialog.is-stage-strip .flow-dialog-inner video,
  .flow-project-dialog.is-ultrawide .flow-dialog-inner video,
  .flow-project-dialog.is-platinum-strip .flow-dialog-inner video {
    width: 100%;
    height: clamp(220px, 60vw, 380px);
    max-height: 60vh;
  }
}

/* v20260823-4: text-only product name, proportional media, and a draggable video bar */
.leolab-case-intro .leolab-logo-line,
.leolab-logo-line img {
  display: none !important;
}
.leolab-software-name {
  display: block;
  width: fit-content;
  margin: 0 0 38px;
  color: #f6f9ff;
  font: 850 clamp(34px, 4.2vw, 58px)/.88 var(--sans);
  letter-spacing: -.04em;
  text-shadow: 0 0 28px rgba(82, 175, 255, .26);
}
.leolab-screen img,
.leolab-screen-main img,
.leolab-screens-grid .leolab-screen img {
  display: block;
  width: 100%;
  height: auto !important;
  max-width: 100%;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center;
  background: #07101f;
}

/* Every cover stays inside its real frame. The source files use these native ratios. */
.resume-flow .flow-project-image {
  min-height: 0 !important;
  background-color: #030611;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  transform: none !important;
}
.resume-flow .flow-project-card.flow-project-gimc .flow-project-image { aspect-ratio: 3840 / 950 !important; }
.resume-flow .flow-project-card.flow-project-huaguoshan .flow-project-image { aspect-ratio: 3840 / 590 !important; }
.resume-flow .flow-project-card:has(.project-yili-launch) .flow-project-image,
.resume-flow .flow-project-card:has(.project-yili-award) .flow-project-image { aspect-ratio: 3000 / 618 !important; }
.resume-flow .flow-project-card:has(.project-yili-platinum) .flow-project-image { aspect-ratio: 10000 / 826 !important; }
.resume-flow .flow-project-standard-grid .flow-project-image { aspect-ratio: 16 / 9 !important; }
.resume-flow .flow-project-card:hover .flow-project-image,
.resume-flow .flow-project-card:focus-visible .flow-project-image {
  transform: none !important;
  filter: saturate(1.08) brightness(1.04);
}

.flow-video-player {
  position: relative;
  width: 100%;
  margin: 18px 0;
  overflow: hidden;
  border: 1px solid rgba(91, 149, 237, .36);
  border-radius: 12px;
  background: #010207;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 18px 52px rgba(0,0,0,.36);
}
.flow-video-player video {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 180px;
  max-height: none !important;
  aspect-ratio: var(--video-ratio, 16 / 9);
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #010207;
  object-fit: contain !important;
  object-position: center center;
  pointer-events: auto !important;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-drag: none;
}
.flow-video-watermark {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 14px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 4px;
  color: rgba(255,255,255,.7);
  background: rgba(0,0,0,.28);
  font: 600 10px/1.2 var(--sans);
  pointer-events: none;
  user-select: none;
}
.flow-video-controls {
  display: grid;
  grid-template-columns: 36px auto minmax(100px, 1fr) auto 36px;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 12px;
  border-top: 1px solid rgba(111, 164, 231, .2);
  background: rgba(5, 12, 24, .96);
}
.flow-video-toggle,
.flow-video-fullscreen {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(105, 173, 245, .38);
  border-radius: 7px;
  color: #d9edff;
  background: rgba(25, 66, 115, .44);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.flow-video-toggle:hover,
.flow-video-fullscreen:hover,
.flow-video-toggle:focus-visible,
.flow-video-fullscreen:focus-visible {
  border-color: #63bcff;
  color: #fff;
  background: rgba(34, 101, 171, .72);
  outline: none;
}
.flow-video-time {
  min-width: 42px;
  color: #9fb9d7;
  font: 700 11px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.flow-video-seek {
  display: block;
  width: 100%;
  height: 28px;
  margin: 0;
  accent-color: #57b8ff;
  cursor: pointer;
  pointer-events: auto !important;
  touch-action: pan-x;
}
.flow-video-seek::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #57b8ff, #8d7cff);
}
.flow-video-seek::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #57b8ff, #8d7cff);
}
.flow-video-seek::-webkit-slider-thumb { margin-top: -5px; }
.flow-video-seek::-moz-range-thumb { width: 15px; height: 15px; border: 0; border-radius: 50%; background: #f7fbff; }
.flow-video-player:fullscreen { width: 100vw; height: 100vh; border: 0; border-radius: 0; }
.flow-video-player:fullscreen video { height: calc(100vh - 68px) !important; max-height: none !important; }
.flow-video-player:fullscreen .flow-video-controls { height: 68px; }
@media (max-width: 900px) {
  .leolab-software-name { margin-bottom: 26px; font-size: 42px; }
  .resume-flow .flow-project-strip .flow-project-image,
  .resume-flow .flow-project-card.flow-project-gimc .flow-project-image,
  .resume-flow .flow-project-card.flow-project-huaguoshan .flow-project-image,
  .resume-flow .flow-project-standard-grid .flow-project-image {
    height: auto !important;
  }
  .resume-flow .flow-project-card.flow-project-gimc .flow-project-image { aspect-ratio: 3840 / 950 !important; }
  .resume-flow .flow-project-card.flow-project-huaguoshan .flow-project-image { aspect-ratio: 3840 / 590 !important; }
  .resume-flow .flow-project-card:has(.project-yili-launch) .flow-project-image,
  .resume-flow .flow-project-card:has(.project-yili-award) .flow-project-image { aspect-ratio: 3000 / 618 !important; }
  .resume-flow .flow-project-card:has(.project-yili-platinum) .flow-project-image { aspect-ratio: 10000 / 826 !important; }
  .resume-flow .flow-project-standard-grid .flow-project-image { aspect-ratio: 16 / 9 !important; }
  .flow-video-player video { min-height: 140px; }
  .flow-video-controls { grid-template-columns: 36px auto minmax(72px, 1fr) auto 36px; gap: 6px; padding: 7px 8px; }
  .flow-video-time { min-width: 35px; font-size: 10px; }
}