:root {
  --ink: #19231e;
  --paper: #f2f0e9;
  --cream: #e6e3d7;
  --lime: #c7f36b;
  --orange: #ef7054;
  --muted: #70766d;
  --line: rgba(25, 35, 30, 0.17);
  --mono: "DM Mono", "SFMono-Regular", Consolas, "Noto Sans CJK", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", monospace;
  --sans: "Manrope", "Noto Sans CJK", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --display: "Smiley Sans Oblique", "Manrope", "Noto Sans CJK", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* === 大标题统一用「得意黑 Smiley Sans」显示体；正文与小标题用「思源黑体」(--sans)。
   body 前缀提升优先级，统一覆盖各断点的极紧字距(-.11~-.12em)，避免得意黑(窄/斜)在过紧负字距下字形重叠 === */
body .hero h1,
body .film-heading h1,
body .film-statement strong,
body .deck-copy h3,
body .contact h2,
body .contact-sheet-intro h2,
body .quote p,
body .case-hero-copy h1,
body .case-intro h2,
body .case-map h2,
body .case-gallery h2,
body .case-credit h2,
body .section-heading h2,
body .story-statement h2,
body .story-cta h2 {
  font-family: var(--display);
  letter-spacing: -.04em;
}

/* === 放大原本特别小的 mono 标签文字，提升可读性（仅改字号，字体仍走 --mono）。body 前缀保证覆盖各断点 === */
body nav { font-size: 13px; }
body .header-contact { font-size: 13px; }
body .service-minimum { font-size: 12px; }
body .eyebrow { font-size: 11.5px; }
body .hero-ticker { font-size: 11px; }
body .hero-live-status { font-size: 10.5px; }
body .case-facts dt { font-size: 10.5px; }
body .project-meta,
body .signal-list span,
body .service-number,
body .approach li > span,
body .case-map li > span,
body .story-principles span,
body .contact-footnote,
body footer,
body .contact-network,
body .case-kicker,
body .film-code,
body .film-runtime,
body .deck-index,
body .deck-kind,
body .project-dialog-head > p:first-child,
body .project-dialog-scope > span,
body .project-dialog-scope li,
body .project-dialog-gallery figcaption,
body .project-dialog-details > span { font-size: 11px; }

/* === 作品集区块：醒目的「我做过的项目」中文标识（得意黑 + 柠檬绿马克笔高亮） === */
.work-eyebrow { display: flex; align-items: baseline; gap: 15px; flex-wrap: wrap; margin: 0 0 22px; }
.work-eyebrow-zh { font-family: var(--display); font-size: clamp(24px, 2.7vw, 38px); line-height: 1; letter-spacing: -.02em; color: var(--ink); padding: 0 .12em .05em; background: linear-gradient(transparent 0 56%, var(--lime) 56% 92%, transparent 92%); }
.work-eyebrow-en { font: 11px var(--mono); letter-spacing: .16em; color: var(--muted); white-space: nowrap; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 15px; line-height: 1.5; overflow-x: hidden; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
.page-noise { pointer-events: none; position: fixed; z-index: 9; inset: 0; opacity: .075; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.site-header, .section-wrap, footer { width: min(1320px, calc(100% - 80px)); margin: 0 auto; }
.site-header { height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; letter-spacing: -.04em; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--paper); background: var(--ink); font: 10px var(--mono); }
nav { display: flex; gap: 34px; font: 11px var(--mono); letter-spacing: .02em; }
nav a { transition: opacity .2s; } nav a:hover { opacity: .5; }
.header-contact { font: 11px var(--mono); padding: 11px 0; border-bottom: 1px solid var(--ink); }
.header-contact span { margin-left: 8px; font-size: 14px; }
.hero { min-height: 650px; display: grid; grid-template-columns: .96fr 1.04fr; gap: 50px; align-items: center; padding: 66px 0 82px; }
.eyebrow { margin: 0 0 21px; color: var(--muted); font: 10px var(--mono); letter-spacing: .08em; }
.hero h1, h2, h3, p { margin-top: 0; }
.hero h1 { max-width: 670px; margin-bottom: 30px; font-size: clamp(48px, 5.2vw, 80px); line-height: .99; letter-spacing: -.085em; font-weight: 700; }
em { color: var(--orange); font-style: normal; }
.hero-summary { color: #4e574e; font-size: 15px; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 48px; padding: 0 20px; border: 1px solid var(--ink); transition: transform .25s, background-color .25s; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 700; }
.button-primary span { font-size: 16px; }
.text-link { padding-bottom: 4px; border-bottom: 1px solid var(--ink); font-size: 12px; font-weight: 700; }
.text-link span { margin-left: 8px; }
.hero-art { min-height: 495px; position: relative; border: 1px solid var(--ink); overflow: hidden; background: #dbe0d0; }
.art-grid { position: absolute; inset: 0; background: linear-gradient(rgba(25,35,30,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(25,35,30,.09) 1px, transparent 1px); background-size: 52px 52px; }
.orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.orb-large { width: 380px; height: 380px; right: -120px; top: -115px; background: var(--lime); opacity: .85; }
.orb-small { width: 172px; height: 172px; bottom: 22px; left: -42px; background: var(--orange); opacity: .88; }
.art-caption { position: absolute; font: 10px var(--mono); letter-spacing: .03em; }
.art-caption-top { top: 25px; left: 27px; }
.art-caption-bottom { right: 24px; bottom: 20px; margin: 0; }
.art-card { position: absolute; z-index: 1; padding: 17px; border: 1px solid var(--ink); background: var(--paper); box-shadow: 7px 8px 0 rgba(25,35,30,.08); }
.art-card strong, .art-card small { display: block; }.art-card strong { margin-top: 25px; font-size: 20px; letter-spacing: -.06em; }.art-card small { margin-top: 5px; font-size: 10px; color: var(--muted); }
.card-index { font: 10px var(--mono); }.card-idea { top: 28%; left: 12%; width: 192px; transform: rotate(-4deg); }.card-output { width: 220px; bottom: 14%; right: 11%; transform: rotate(5deg); }.live-dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 6px rgba(239,112,84,.16); }
.art-line { position: absolute; height: 1px; background: var(--ink); transform-origin: left; }.line-one { width: 194px; top: 49%; left: 36%; transform: rotate(18deg); }.line-two { width: 86px; top: 56%; left: 59%; transform: rotate(-30deg); }
.signal-bar { padding: 22px 0 19px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); display: flex; align-items: center; justify-content: space-between; }.signal-bar p { margin: 0; font-size: 16px; line-height: 1.38; letter-spacing: -.045em; }.signal-list { display: flex; gap: 12px; }.signal-list span { border: 1px solid var(--line); border-radius: 99px; padding: 9px 13px; font: 10px var(--mono); }
.work { padding: 150px 0 55px; }.section-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 67px; }.section-heading h2 { max-width: 690px; margin: 0; font-size: clamp(37px, 4.3vw, 59px); letter-spacing: -.075em; line-height: 1.04; }.section-note { margin: 0 0 4px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 76px 30px; }.project { grid-column: span 1; }.project-featured { grid-column: 1 / -1; }.project-visual { height: 420px; position: relative; overflow: hidden; }.project-featured .project-visual { height: 585px; }.project-copy { max-width: 570px; padding-top: 21px; }.project-meta { display: flex; gap: 8px; margin-bottom: 12px; font: 10px var(--mono); color: var(--muted); }.project h3 { margin-bottom: 12px; font-size: 28px; line-height: 1.2; letter-spacing: -.065em; }.project-copy > p { max-width: 530px; margin-bottom: 22px; color: var(--muted); font-size: 13px; line-height: 1.75; }.project-button { padding: 0; border: 0; border-bottom: 1px solid var(--ink); color: var(--ink); background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; padding-bottom: 4px; }.project-button span { padding-left: 11px; font-size: 14px; }
.visual-pulse { padding: 18px; background: #1d284d; color: #d5dcef; }.window-bar { height: 30px; display: flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid rgba(216,224,255,.25); background: #29375e; font: 9px var(--mono); color: #b6c2de; }.window-bar i { width: 7px; height: 7px; border-radius: 50%; background: #e16f5a; }.window-bar i:nth-child(2) { background: #e0b957; }.window-bar i:nth-child(3) { background: #82ca6b; }.window-bar span { margin-left: 6px; }.pulse-sidebar { position: absolute; left: 18px; top: 48px; bottom: 18px; width: 23%; padding: 26px 20px; display: flex; flex-direction: column; gap: 26px; border: 1px solid rgba(216,224,255,.25); background: #223159; font-size: 11px; color: #aeb9d1; }.pulse-sidebar b { margin-bottom: 10px; color: #c7f36b; }.pulse-sidebar .active { padding: 8px; margin: -8px; background: #40517c; color: white; }.pulse-main { position: absolute; top: 48px; right: 18px; bottom: 18px; width: calc(77% - 18px); padding: 33px 40px; border: 1px solid rgba(216,224,255,.25); background: #eff1ec; color: #15213f; }.pulse-main > p { display: flex; justify-content: space-between; font-size: 14px; }.metric-row { display: flex; gap: 14px; margin: 28px 0 45px; }.metric-row > div { flex: 1; padding: 18px; border: 1px solid #cbd0cf; }.metric-row small, .metric-row strong { display: block; }.metric-row small { margin-bottom: 10px; font-size: 10px; color: #69716e; }.metric-row strong { font: 26px var(--mono); letter-spacing: -.07em; }.chart { height: 130px; padding: 0 10px; border-bottom: 1px solid #b4bcb8; display: flex; align-items: end; justify-content: space-around; }.chart i { display: block; width: 8%; background: #bfef6a; }.chart i:nth-child(1) { height: 35%; }.chart i:nth-child(2) { height: 56%; }.chart i:nth-child(3) { height: 42%; }.chart i:nth-child(4) { height: 81%; background: #ef7054; }.chart i:nth-child(5) { height: 62%; }.chart i:nth-child(6) { height: 74%; }.chart i:nth-child(7) { height: 94%; }.chart-labels { display: flex; justify-content: space-around; margin-top: 8px; font: 8px var(--mono); color: #69716e; }.visual-stamp { position: absolute; z-index: 2; right: 17px; top: 17px; border: 1px solid currentColor; padding: 6px 9px; font: 9px var(--mono); letter-spacing: .08em; }.visual-luma { color: #fbfaed; background: #141b32; }.luma-copy { position: absolute; z-index: 2; top: 42px; left: 42px; }.luma-copy > span { font: 14px var(--mono); }.luma-copy strong { display: block; margin-top: 74px; font-size: 40px; line-height: 1; letter-spacing: -.09em; }.luma-copy p { margin: 18px 0; font-size: 11px; opacity: .65; }.luma-copy button { padding: 9px 12px; color: #141b32; border: 0; background: #fbfaed; font: 10px var(--mono); }.luma-sun { position: absolute; top: 12%; right: 9%; width: 245px; height: 245px; border-radius: 50%; background: #f1b35f; }.luma-hill { position: absolute; bottom: -52px; border-radius: 50% 50% 0 0; }.hill-a { width: 130%; height: 44%; right: -38%; background: #ec7153; transform: rotate(-8deg); }.hill-b { width: 110%; height: 33%; left: -39%; background: #aa5c82; transform: rotate(7deg); }.visual-ai { background: #dfe4d8; }.ai-dot { position: absolute; width: 14px; height: 14px; border: 1px solid var(--ink); border-radius: 50%; }.dot-1 { top: 18%; left: 11%; background: var(--orange); }.dot-2 { top: 38%; left: 26%; }.dot-3 { top: 15%; right: 19%; background: var(--lime); }.dot-4 { bottom: 19%; right: 10%; }.ai-flow { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 14px; padding: 11px 14px; border: 1px solid var(--ink); background: var(--paper); white-space: nowrap; font: 10px var(--mono); }.ai-flow i { color: var(--orange); font-style: normal; }.ai-card { position: absolute; z-index: 1; right: 10%; bottom: 12%; width: 53%; padding: 18px; border: 1px solid var(--ink); background: #f8f7f1; box-shadow: 7px 7px 0 rgba(25,35,30,.11); transform: rotate(-3deg); }.ai-card small { color: var(--muted); font: 8px var(--mono); }.ai-card strong { display: block; margin: 18px 0; font-size: 14px; line-height: 1.35; letter-spacing: -.04em; }.ai-card div { display: flex; gap: 5px; }.ai-card i { display: block; width: 22%; height: 4px; background: var(--ink); }.ai-card i:nth-child(2) { background: var(--orange); }.ai-card i:nth-child(3) { background: var(--lime); }.work-disclaimer { margin: 90px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.services { padding: 148px 0; background: var(--ink); color: var(--paper); }.services .eyebrow { color: #a5aba1; }.services-heading { margin-bottom: 58px; }.services-heading .section-note { color: #a5aba1; }.service-list { border-top: 1px solid rgba(242,240,233,.3); }.service-list article { min-height: 127px; padding: 27px 0; border-bottom: 1px solid rgba(242,240,233,.3); display: grid; grid-template-columns: 14% 1fr auto; align-items: center; gap: 20px; transition: padding .3s, color .3s; }.service-list article:hover { padding-left: 14px; color: var(--lime); }.service-number { font: 10px var(--mono); color: #a5aba1; }.service-list h3 { margin: 0 0 7px; font-size: 25px; letter-spacing: -.06em; }.service-list p { margin: 0; color: #a5aba1; font-size: 12px; }.service-arrow { font-size: 24px; }.approach { padding: 147px 0; display: grid; grid-template-columns: .95fr 1.05fr; gap: 10%; }.approach-label > span { font-size: 26px; line-height: 1.25; letter-spacing: -.065em; }.approach ol { list-style: none; margin: 0; padding: 0; }.approach li { display: grid; grid-template-columns: 60px 1fr; gap: 20px; padding: 0 0 34px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }.approach li > span { font: 10px var(--mono); color: var(--muted); }.approach li h3 { margin-bottom: 9px; font-size: 24px; letter-spacing: -.06em; }.approach li p { max-width: 450px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }.quote { margin-bottom: 0; padding: 80px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); text-align: center; }.quote p { margin-bottom: 9px; font-size: clamp(27px, 3.1vw, 43px); line-height: 1.2; letter-spacing: -.075em; }.quote span { color: var(--muted); font-size: 11px; }.contact { padding: 147px 0 27px; }.contact h2 { margin-bottom: 92px; font-size: clamp(52px, 7.2vw, 106px); font-weight: 700; line-height: .94; letter-spacing: -.095em; }.contact-bottom { display: flex; align-items: end; justify-content: space-between; gap: 30px; }.contact-bottom > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }.contact-link { padding-bottom: 10px; border-bottom: 2px solid var(--ink); font: clamp(19px, 2vw, 29px) var(--mono); letter-spacing: -.07em; }.contact-link span { margin-left: 14px; }.contact-footnote { display: flex; justify-content: space-between; margin-top: 128px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font: 10px var(--mono); }footer { display: flex; justify-content: space-between; padding: 20px 0 27px; color: var(--muted); font: 10px var(--mono); }
dialog { max-width: min(510px, calc(100% - 40px)); padding: 44px; border: 1px solid var(--ink); background: var(--paper); box-shadow: 14px 14px 0 var(--ink); color: var(--ink); }dialog::backdrop { background: rgba(25,35,30,.55); backdrop-filter: blur(4px); }.dialog-close { position: absolute; right: 15px; top: 11px; padding: 0; border: none; background: transparent; color: var(--ink); cursor: pointer; font-size: 28px; }.dialog-close:hover { color: var(--orange); }dialog h2 { margin-bottom: 15px; font-size: 35px; letter-spacing: -.07em; }dialog p:not(.eyebrow) { margin-bottom: 26px; color: var(--muted); font-size: 13px; line-height: 1.8; }.dialog-contact { border: 0; }
.contact-bottom { display: grid; grid-template-columns: 1.1fr .8fr auto; align-items: end; }.contact-methods { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }.contact-network { display: flex; gap: 16px; font: 10px var(--mono); }.contact-network a { padding-bottom: 3px; border-bottom: 1px solid var(--ink); }.qr-frame { width: 178px; padding: 10px; border: 1px solid var(--ink); background: var(--lime); box-shadow: 7px 7px 0 var(--ink); }.qr-frame img { display: block; width: 100%; height: auto; background: white; }
.film-cover { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; }.film-grid { z-index: 1; }.film-orbit { z-index: 1; }.film-statement { z-index: 2; }.film-code, .film-runtime, .film-play { z-index: 3; }
.film-hero { padding: 88px 0 124px; }.film-heading { max-width: 970px; }.film-heading h1 { max-width: 900px; margin: 0 0 27px; font-size: clamp(48px, 6.3vw, 94px); line-height: .98; letter-spacing: -.095em; }.film-heading > p:last-child { color: var(--muted); font-size: 15px; }.film-stage { min-height: 600px; position: relative; margin-top: 70px; overflow: hidden; border: 1px solid var(--ink); background: #202a25; color: var(--paper); }.film-grid { position: absolute; inset: 0; opacity: .25; background: linear-gradient(rgba(242,240,233,.34) 1px, transparent 1px), linear-gradient(90deg, rgba(242,240,233,.34) 1px, transparent 1px); background-size: 68px 68px; }.film-code, .film-runtime { position: absolute; z-index: 2; font: 10px var(--mono); letter-spacing: .08em; }.film-code { left: 27px; top: 24px; }.film-runtime { right: 27px; bottom: 23px; margin: 0; }.film-orbit { position: absolute; border: 1px solid rgba(242,240,233,.5); border-radius: 50%; }.orbit-one { width: 590px; height: 590px; left: 13%; top: -230px; }.orbit-two { width: 460px; height: 460px; right: -100px; bottom: -220px; background: var(--lime); opacity: .9; }.film-statement { position: absolute; z-index: 1; top: 49%; left: 50%; transform: translate(-50%, -50%); width: min(630px, 76%); }.film-statement span, .film-statement strong { display: block; }.film-statement span { margin-bottom: 8px; font: 13px var(--mono); }.film-statement strong { font-size: clamp(57px, 7vw, 110px); line-height: .83; letter-spacing: -.105em; }.film-play { position: absolute; z-index: 2; bottom: 83px; left: 28px; display: flex; align-items: center; gap: 13px; font-size: 11px; }.film-play-icon { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid var(--paper); border-radius: 50%; padding-left: 2px; font-size: 11px; }.film-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; }.film-note code { color: var(--ink); font-family: var(--mono); }.story-statement { padding: 120px 0; display: grid; grid-template-columns: .7fr 1.3fr; gap: 30px; border-top: 1px solid var(--line); }.story-statement h2 { max-width: 820px; margin-bottom: 25px; font-size: clamp(34px, 4.3vw, 61px); line-height: 1.04; letter-spacing: -.08em; }.story-statement div > p { max-width: 510px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }.story-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 27px; padding: 0 0 135px; }.story-principles article { padding-top: 17px; border-top: 1px solid var(--ink); }.story-principles span { color: var(--muted); font: 10px var(--mono); }.story-principles h3 { margin: 50px 0 10px; font-size: 26px; letter-spacing: -.065em; }.story-principles p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }.story-cta { padding: 105px 0 37px; border-top: 1px solid var(--ink); }.story-cta h2 { max-width: 950px; margin: 0 0 58px; font-size: clamp(42px, 5.6vw, 79px); line-height: .99; letter-spacing: -.09em; }.story-cta-links { display: flex; align-items: center; gap: 25px; }
.reveal { opacity: 0; transform: translateY(15px); animation: reveal .7s cubic-bezier(.2,.7,.2,1) forwards; }.hero .reveal:nth-child(1) { animation-delay: .05s; }.hero .reveal:nth-child(2) { animation-delay: .13s; }.hero .reveal:nth-child(3) { animation-delay: .21s; }.hero .reveal:nth-child(4) { animation-delay: .29s; }.hero-art.reveal { animation-delay: .2s; }@keyframes reveal { to { opacity: 1; transform: translateY(0); } }
@media (max-width: 800px) { .site-header, .section-wrap, footer { width: min(100% - 40px, 620px); }.site-header { height: 70px; }nav { display: none; }.header-contact { font-size: 10px; }.hero { grid-template-columns: 1fr; gap: 55px; min-height: auto; padding: 64px 0 55px; }.hero h1 { font-size: clamp(46px, 13vw, 67px); }.hero-art { min-height: 380px; }.card-idea { left: 9%; }.card-output { right: 7%; }.line-one { left: 32%; width: 160px; }.signal-bar { display: block; }.signal-list { flex-wrap: wrap; margin-top: 16px; }.work, .services, .approach { padding-top: 88px; padding-bottom: 88px; }.section-heading { display: block; margin-bottom: 43px; }.section-heading h2 { font-size: 39px; }.section-note { margin-top: 19px; }.project-grid { grid-template-columns: 1fr; gap: 56px; }.project-featured { grid-column: span 1; }.project-visual, .project-featured .project-visual { height: 380px; }.pulse-main { padding: 24px 20px; }.pulse-sidebar { width: 25%; padding: 20px 10px; font-size: 9px; }.pulse-main { width: calc(75% - 18px); }.metric-row { margin: 20px 0 31px; }.metric-row strong { font-size: 18px; }.chart { height: 97px; }.project h3 { font-size: 24px; }.service-list article { grid-template-columns: 40px 1fr auto; }.service-list h3 { font-size: 21px; }.service-list p { line-height: 1.7; }.approach { display: block; }.approach-label { margin-bottom: 57px; }.quote { padding: 62px 10px; }.contact { padding-top: 87px; }.contact h2 { margin-bottom: 55px; font-size: clamp(48px, 14vw, 78px); }.contact-bottom { display: block; }.contact-methods { margin-top: 28px; }.contact-link { display: inline-block; margin-top: 0; font-size: 20px; }.qr-frame { width: 210px; margin-top: 36px; }.contact-footnote { margin-top: 80px; }.luma-copy { left: 25px; top: 26px; }.luma-sun { width: 205px; height: 205px; right: -14%; }.ai-card { width: 70%; }.ai-flow { gap: 7px; font-size: 8px; }.work-disclaimer { margin-top: 64px; }.film-hero { padding: 62px 0 88px; }.film-heading h1 { font-size: clamp(44px, 12.5vw, 66px); }.film-stage { min-height: 440px; margin-top: 44px; }.orbit-one { width: 430px; height: 430px; left: -130px; top: -155px; }.film-statement { width: 82%; }.film-statement strong { font-size: clamp(54px, 13vw, 78px); }.story-statement { display: block; padding: 86px 0; }.story-statement .eyebrow { margin-bottom: 50px; }.story-principles { grid-template-columns: 1fr; gap: 45px; padding-bottom: 90px; }.story-principles h3 { margin-top: 24px; }.story-cta { padding-top: 83px; }.story-cta-links { flex-direction: column; align-items: flex-start; } }
@media (max-width: 420px) { .site-header, .section-wrap, footer { width: calc(100% - 32px); }.hero h1 { font-size: 45px; }.hero-summary { font-size: 13px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }.hero-art { min-height: 320px; }.art-card { padding: 13px; }.art-card strong { margin-top: 15px; font-size: 17px; }.card-idea { width: 155px; top: 23%; }.card-output { width: 180px; bottom: 14%; }.line-one, .line-two { display: none; }.project-visual, .project-featured .project-visual { height: 314px; }.pulse-sidebar { display: none; }.pulse-main { left: 18px; width: calc(100% - 36px); }.metric-row > div { padding: 12px; }.visual-stamp { font-size: 7px; }.service-list article { grid-template-columns: 28px 1fr; }.service-arrow { display: none; }.service-list h3 { font-size: 19px; }.approach li { grid-template-columns: 38px 1fr; }.contact-footnote { gap: 12px; }.contact-footnote span { max-width: 50%; } }

/* Contact: clear choices first; visual motion stays outside the scannable QR. */
.contact-command { width: min(100%, 312px); display: grid; grid-template-columns: 1fr auto; gap: 3px 16px; padding: 16px 18px; border: 1px solid var(--ink); color: var(--paper); background: var(--ink); text-align: left; cursor: pointer; transition: transform .25s, box-shadow .25s, background-color .25s; }.contact-command:hover { transform: translate(-4px, -4px); box-shadow: 7px 7px 0 var(--orange); background: #25352c; }.contact-command-kicker { grid-column: 1 / -1; color: var(--lime); font: 9px var(--mono); letter-spacing: .08em; }.contact-command strong { font-size: 16px; letter-spacing: -.045em; }.contact-command b { align-self: end; font-size: 20px; line-height: 1; }.qr-frame { position: relative; isolation: isolate; overflow: visible; }.qr-frame::before, .qr-frame::after { content: ""; position: absolute; z-index: -1; inset: -9px; border: 1px solid var(--orange); animation: qrPulse 2.6s ease-out infinite; }.qr-frame::after { inset: -17px; border-color: rgba(25,35,30,.23); animation-delay: 1.3s; }.qr-frame .qr-pulse { position: absolute; right: -10px; top: -10px; width: 16px; height: 16px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(239,112,84,.6); animation: statusPulse 2s infinite; }.contact-network { gap: 19px; }.contact-network a { transition: color .2s, transform .2s; }.contact-network a:hover { color: var(--orange); transform: translateY(-2px); }

/* Hero: a living system, not a motionless poster. */
.hero-art { isolation: isolate; box-shadow: 12px 14px 0 rgba(25,35,30,.09); }.hero-art::after { content: ""; position: absolute; z-index: 2; top: -18%; bottom: -18%; left: -25%; width: 26%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(242,240,233,.24), transparent); transform: rotate(21deg); animation: scanSweep 6.5s ease-in-out infinite; }.art-grid { animation: gridDrift 12s linear infinite; }.orb-large { animation: largeOrb 10s ease-in-out infinite; }.orb-small { animation: smallOrb 7s ease-in-out infinite; }.card-idea { animation: ideaFloat 6s ease-in-out infinite; }.card-output { animation: outputFloat 6.8s ease-in-out infinite .6s; }.line-one { animation: lineGrow 4s ease-in-out infinite; }.line-two { animation: lineGrowTwo 4s ease-in-out infinite .45s; }.hero-live-status { position: absolute; z-index: 4; right: 24px; top: 24px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(25,35,30,.55); background: rgba(242,240,233,.78); backdrop-filter: blur(8px); font: 9px var(--mono); letter-spacing: .08em; transform: translate(calc(var(--cursor-x, 0) * 12px), calc(var(--cursor-y, 0) * 12px)); transition: transform .15s ease-out; }.hero-live-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(239,112,84,.58); animation: statusPulse 2s infinite; }.hero-ticker { position: absolute; z-index: 4; right: 0; bottom: 0; left: 0; height: 30px; display: flex; align-items: center; overflow: hidden; border-top: 1px solid rgba(25,35,30,.45); background: rgba(242,240,233,.88); white-space: nowrap; font: 9px var(--mono); letter-spacing: .15em; }.hero-ticker span { display: inline-block; animation: tickerRun 12s linear infinite; }.hero-art:hover .hero-live-status { border-color: var(--orange); }
@keyframes qrPulse { 0% { opacity: .75; transform: scale(.96); } 75%, 100% { opacity: 0; transform: scale(1.13); } } @keyframes statusPulse { 0% { box-shadow: 0 0 0 0 rgba(239,112,84,.62); } 70% { box-shadow: 0 0 0 9px rgba(239,112,84,0); } 100% { box-shadow: 0 0 0 0 rgba(239,112,84,0); } } @keyframes scanSweep { 0%, 14% { translate: -360% 0; opacity: 0; } 24% { opacity: 1; } 65%, 100% { translate: 690% 0; opacity: 0; } } @keyframes gridDrift { to { background-position: 52px 52px; } } @keyframes largeOrb { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-26px, 21px) scale(1.08); } } @keyframes smallOrb { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(28px, -19px) scale(.9); } } @keyframes ideaFloat { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-13px); } } @keyframes outputFloat { 0%, 100% { transform: rotate(5deg) translateY(0); } 50% { transform: rotate(7deg) translateY(13px); } } @keyframes lineGrow { 0%, 100% { transform: rotate(18deg) scaleX(.62); } 50% { transform: rotate(18deg) scaleX(1); } } @keyframes lineGrowTwo { 0%, 100% { transform: rotate(-30deg) scaleX(.6); } 50% { transform: rotate(-30deg) scaleX(1); } } @keyframes tickerRun { to { transform: translateX(-35%); } }

/* The contact sheet provides a deliberate choice before any email client opens. */
.contact-dialog { width: min(1040px, calc(100% - 40px)); max-width: none; padding: 0; border: 1px solid var(--ink); background: var(--paper); box-shadow: 14px 14px 0 var(--ink); }.contact-dialog::backdrop { background: rgba(25,35,30,.58); backdrop-filter: blur(8px); }.contact-sheet { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; grid-template-areas: "intro qr" "actions qr"; gap: 36px 58px; min-height: 610px; padding: 55px; overflow: hidden; }.contact-sheet::before { content: ""; position: absolute; right: -160px; top: -230px; width: 480px; height: 480px; border-radius: 50%; background: var(--lime); opacity: .55; }.contact-sheet::after { content: ""; position: absolute; bottom: -170px; left: -120px; width: 340px; height: 340px; border-radius: 50%; background: var(--orange); opacity: .17; }.contact-sheet > * { position: relative; z-index: 1; }.contact-close { z-index: 3; }.contact-sheet-intro { grid-area: intro; align-self: end; }.contact-sheet-intro h2 { margin-bottom: 17px; font-size: clamp(39px, 4vw, 60px); line-height: .98; letter-spacing: -.09em; }.contact-sheet-intro > p:last-child { max-width: 420px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }.contact-sheet-qr { grid-area: qr; align-self: center; justify-self: end; display: flex; flex-direction: column; align-items: center; gap: 13px; }.contact-qr-label, .contact-wechat-id { font: 10px var(--mono); letter-spacing: .06em; }.contact-qr-image { position: relative; width: 285px; padding: 14px; border: 1px solid var(--ink); background: var(--lime); box-shadow: 10px 10px 0 var(--ink); }.contact-qr-image::before { content: ""; position: absolute; z-index: -1; inset: -15px; border: 1px solid rgba(25,35,30,.35); animation: qrPulse 2.8s ease-out infinite; }.contact-qr-image img { display: block; width: 100%; height: auto; background: white; }.contact-action-list { grid-area: actions; align-self: start; border-top: 1px solid var(--ink); }.contact-action-list a { display: grid; grid-template-columns: 42px 1fr auto; grid-template-rows: auto auto; column-gap: 14px; padding: 15px 4px; border-bottom: 1px solid rgba(25,35,30,.27); transition: padding .25s, background-color .25s; }.contact-action-list a:hover { padding-left: 13px; padding-right: 12px; background: rgba(199,243,107,.45); }.contact-action-list span { grid-row: 1 / 3; padding-top: 3px; color: var(--muted); font: 10px var(--mono); }.contact-action-list strong { font-size: 15px; letter-spacing: -.04em; }.contact-action-list small { color: var(--muted); font: 10px var(--mono); }.contact-action-list b { grid-column: 3; grid-row: 1 / 3; align-self: center; font-size: 17px; }.contact-dialog[open] .contact-sheet-intro, .contact-dialog[open] .contact-sheet-qr, .contact-dialog[open] .contact-action-list { animation: contactReveal .55s cubic-bezier(.2,.7,.2,1) both; }.contact-dialog[open] .contact-sheet-qr { animation-delay: .1s; }.contact-dialog[open] .contact-action-list { animation-delay: .18s; } @keyframes contactReveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 800px) { .contact-bottom { display: block; }.contact-methods { margin-top: 29px; }.contact-command { width: 100%; max-width: 340px; }.qr-frame { width: 218px; margin-top: 40px; }.hero-live-status { right: 15px; top: 15px; }.hero-ticker { height: 27px; }.art-caption-bottom { bottom: 43px; }.contact-dialog { width: min(100% - 26px, 620px); }.contact-sheet { grid-template-columns: 1fr; grid-template-areas: "intro" "qr" "actions"; gap: 36px; min-height: auto; padding: 52px 27px 31px; }.contact-sheet-qr { justify-self: start; }.contact-qr-image { width: min(270px, 100%); }.contact-sheet-intro h2 { font-size: 45px; }.contact-action-list { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .hero-art *, .qr-frame::before, .qr-frame::after, .contact-qr-image::before { animation: none !important; transition: none !important; } }
.contact-sheet > .contact-close { position: absolute; z-index: 3; top: 12px; right: 16px; width: auto; height: auto; }

/* Direct contact cards: no hidden panel, no extra click before choosing a channel. */
.contact-bottom { display: block; }.contact-bottom > p { max-width: 540px; margin-bottom: 34px; }.contact-channel-grid { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 13px; margin-top: 8px; }.contact-channel { position: relative; min-height: 185px; padding: 18px; border: 1px solid var(--ink); background: rgba(255,255,255,.37); overflow: hidden; transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s, background-color .28s; }.contact-channel::before { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; right: -102px; bottom: -106px; background: var(--lime); opacity: 0; transform: scale(.55); transition: opacity .35s, transform .5s cubic-bezier(.2,.7,.2,1); }.contact-channel:hover { z-index: 1; transform: translateY(-7px); box-shadow: 8px 9px 0 var(--ink); background: var(--paper); }.contact-channel:hover::before { opacity: .72; transform: scale(1); }.contact-channel > * { position: relative; z-index: 1; }.social-icon { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid var(--ink); border-radius: 50%; background: var(--ink); transition: transform .35s cubic-bezier(.2,.7,.2,1), border-radius .35s; }.social-icon img { display: block; width: 20px; height: 20px; filter: brightness(0) invert(1); }.contact-channel:hover .social-icon { transform: rotate(-10deg) scale(1.08); border-radius: 12px; }.contact-channel:not(.contact-channel-wechat) { display: grid; grid-template-columns: 43px 1fr auto; gap: 12px; align-items: center; }.contact-channel:not(.contact-channel-wechat) > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }.contact-channel strong { font-size: 15px; letter-spacing: -.045em; }.contact-channel small { overflow: hidden; color: var(--muted); font: 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; }.contact-channel > b { align-self: center; font-size: 21px; transition: transform .25s; }.contact-channel:hover > b { transform: translate(4px, -4px); }.contact-channel-telegram .social-icon { background: #229ed9; border-color: #229ed9; }.contact-channel-whatsapp .social-icon { background: #25d366; border-color: #25d366; }.contact-channel-email .social-icon { background: var(--orange); border-color: var(--orange); }.contact-channel-wechat { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; gap: 9px 14px; padding: 16px; background: var(--ink); color: var(--paper); }.contact-channel-wechat::before { background: var(--orange); }.contact-channel-wechat .contact-channel-title { display: flex; align-items: center; gap: 10px; }.contact-channel-wechat .contact-channel-title .social-icon { width: 34px; height: 34px; color: var(--ink); border-color: var(--lime); background: var(--lime); }.contact-channel-wechat .contact-channel-title .social-icon img { width: 17px; height: 17px; filter: none; }.contact-channel-wechat .contact-channel-title div { display: flex; flex-direction: column; gap: 1px; }.contact-channel-wechat small { color: rgba(242,240,233,.66); }.contact-channel-qr { grid-column: 1 / -1; position: relative; align-self: end; width: 111px; padding: 5px; background: white; }.contact-channel-qr::before { content: ""; position: absolute; inset: -7px; border: 1px solid var(--lime); animation: qrPulse 2.8s ease-out infinite; }.contact-channel-qr img { display: block; width: 100%; height: auto; }.channel-id { color: var(--lime); font: 10px var(--mono); letter-spacing: .05em; }.story-direct-contacts { margin-top: 34px; }.contact-channel-grid-story { margin-top: 0; }.story-contact-label { padding: 9px 13px; border: 1px solid var(--ink); font: 10px var(--mono); letter-spacing: .04em; }
@media (max-width: 800px) { .contact-channel-grid { grid-template-columns: 1fr 1fr; gap: 11px; }.contact-channel { min-height: 150px; padding: 14px; }.contact-channel-wechat, .contact-channel-email { grid-column: 1 / -1; min-height: 180px; }.contact-channel-email { min-height: 150px; }.contact-channel-qr { width: 126px; }.story-cta-links { align-items: flex-start; }.story-contact-label { margin-bottom: 6px; } }
@media (max-width: 420px) { .contact-channel:not(.contact-channel-wechat) { grid-template-columns: 37px 1fr auto; gap: 8px; }.social-icon { width: 37px; height: 37px; }.social-icon img { width: 17px; height: 17px; }.contact-channel strong { font-size: 13px; }.contact-channel small { font-size: 8px; }.contact-channel > b { font-size: 17px; }.contact-channel-wechat .contact-channel-title .social-icon { width: 30px; height: 30px; }.contact-channel-wechat .contact-channel-title .social-icon img { width: 15px; height: 15px; } }
.contact-channel:not(.contact-channel-wechat) small { overflow: visible; line-height: 1.35; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; word-break: normal; }
@media (min-width: 801px) and (max-width: 1050px) { .contact-channel-grid { grid-template-columns: 1fr 1fr; }.contact-channel { min-height: 175px; } }

/* Intentional restraint: navigation stays centered, contact cards expose only the channel. */
.site-header { justify-content: flex-end; }
.site-header nav { position: absolute; left: 50%; transform: translateX(-50%); }
.header-home { position: absolute; left: 0; padding: 11px 0; border-bottom: 1px solid var(--ink); font: 11px var(--mono); }.header-home span { margin-left: 8px; font-size: 14px; }
.contact-channel { min-height: 165px; }
.contact-channel-wechat { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 14px; }
.contact-channel-qr { grid-column: auto; }
@media (max-width: 800px) { .contact-channel-wechat { min-height: 170px; } }

/* Portfolio proof: real interfaces and their supporting case study. */
.visual-real { display: block; border: 1px solid var(--ink); background: var(--ink); }.visual-real img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: .97; transition: transform .55s cubic-bezier(.2,.7,.2,1), opacity .3s; }.visual-real:hover img { transform: scale(1.025); opacity: 1; }.project-visual.visual-real { overflow: hidden; }.project-visual.visual-real::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 65%, rgba(20,27,32,.35)); }.project-visual.visual-real .visual-stamp { color: var(--paper); }.module-log { padding: 38px 0 145px; }.module-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--line); }.module-grid article { min-height: 204px; padding: 23px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background-color .25s, color .25s; }.module-grid article:hover { background: var(--ink); color: var(--paper); }.module-grid span { display: block; margin-bottom: 47px; color: var(--muted); font: 10px var(--mono); }.module-grid h3 { margin: 0 0 8px; font-size: 21px; letter-spacing: -.06em; }.module-grid p { max-width: 270px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }.module-grid article:hover span, .module-grid article:hover p { color: #a9b0a9; }.service-minimum { margin: 31px 0 0; color: #a5aba1; font: 10px var(--mono); letter-spacing: .02em; }

/* The film is now an actual playable self-introduction, not a placeholder. */
.film-stage-video { display: grid; place-items: center; background: #101714; }.film-video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; background: #101714; object-fit: contain; }.film-stage-video .film-code, .film-stage-video .film-runtime { z-index: 2; padding: 7px 10px; background: rgba(16,23,20,.62); color: var(--paper); backdrop-filter: blur(8px); }.film-stage-video .film-code { left: 18px; top: 17px; }.film-stage-video .film-runtime { right: 18px; bottom: 17px; }

/* Case study */
.case-page .site-header, .resume-page .site-header { margin-bottom: 0; }.case-hero { padding: 43px 0 128px; }.case-kicker { display: flex; justify-content: space-between; margin-bottom: 63px; color: var(--muted); font: 10px var(--mono); }.case-kicker a { padding-bottom: 3px; border-bottom: 1px solid var(--ink); color: var(--ink); }.case-hero-copy { display: grid; grid-template-columns: minmax(0, .9fr) minmax(330px, .65fr); gap: 9%; align-items: end; margin-bottom: 66px; }.case-hero-copy h1 { margin: 0; font-size: clamp(58px, 8vw, 128px); line-height: .86; letter-spacing: -.11em; }.case-hero-copy > p:last-child { max-width: 490px; margin: 0 0 7px; color: var(--muted); font-size: 14px; line-height: 1.85; }.case-hero-media { position: relative; margin: 0; border: 1px solid var(--ink); background: #e8ebe5; overflow: hidden; }.case-hero-media img { display: block; width: 100%; max-height: 710px; object-fit: cover; object-position: top center; }.case-hero-media figcaption { position: absolute; right: 14px; bottom: 14px; padding: 7px 10px; background: var(--paper); font: 10px var(--mono); }.case-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }.case-facts div { min-height: 91px; padding: 17px 21px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.case-facts dt { margin-bottom: 15px; color: var(--muted); font: 9px var(--mono); }.case-facts dd { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: -.035em; }.case-intro { display: grid; grid-template-columns: .62fr 1.38fr; gap: 30px; padding: 140px 0; }.case-intro h2, .case-map h2, .case-gallery h2, .case-credit h2 { margin: 0 0 24px; font-size: clamp(39px, 4.7vw, 70px); line-height: 1.02; letter-spacing: -.09em; }.case-intro div > p { max-width: 590px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.9; }.case-map { padding: 0 0 136px; }.case-map .section-heading { margin-bottom: 65px; }.case-map ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }.case-map li { display: grid; grid-template-columns: 13% 1fr; gap: 24px; padding: 33px 0 36px; border-bottom: 1px solid var(--line); }.case-map li > span { color: var(--muted); font: 10px var(--mono); }.case-map h3 { margin: 0 0 10px; font-size: 27px; letter-spacing: -.065em; }.case-map li p { max-width: 660px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }.case-gallery { position: relative; padding: 103px 0 137px; border-top: 1px solid var(--ink); }.case-gallery-heading { display: grid; grid-template-columns: .7fr 1.3fr; margin-bottom: 66px; }.case-gallery-heading h2 { margin: 0; }.case-shot { position: relative; margin: 0; border: 1px solid var(--ink); overflow: hidden; background: #e8e9e8; }.case-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }.case-shot figcaption, .case-shot-mobile figcaption { position: absolute; left: 13px; bottom: 13px; padding: 8px 10px; color: var(--paper); background: rgba(20,27,30,.78); font: 10px var(--mono); backdrop-filter: blur(5px); }.case-shot figcaption span, .case-shot-mobile figcaption span { margin-right: 8px; color: var(--lime); }.case-shot-wide { height: min(59vw, 740px); }.case-shot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 28px 0; }.case-shot-row .case-shot { height: min(32vw, 490px); }.case-shot-console { height: min(58vw, 730px); }.case-shot-mobile { position: relative; width: min(352px, 100%); margin: 32px auto 0; border: 1px solid var(--ink); overflow: hidden; background: #0c0d1c; }.case-shot-mobile img { display: block; width: 100%; height: auto; }.case-credit { padding: 110px 0 138px; border-top: 1px solid var(--ink); }.case-credit h2 { max-width: 900px; }.case-credit-grid { display: flex; flex-wrap: wrap; gap: 9px; max-width: 840px; margin: 37px 0 45px; }.case-credit-grid span { padding: 9px 13px; border: 1px solid var(--ink); font: 10px var(--mono); }

/* Resume */
.resume-hero { padding: 75px 0 104px; border-bottom: 1px solid var(--ink); }.resume-hero-main { display: flex; align-items: end; justify-content: space-between; gap: 40px; }.resume-hero h1 { margin: 0 0 20px; font-size: clamp(68px, 9vw, 146px); line-height: .78; letter-spacing: -.12em; }.resume-hero h1 em { color: var(--orange); font-style: normal; }.resume-hero-main p { margin: 0; color: var(--muted); font-size: 15px; }.resume-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }.resume-print { border: 0; background: transparent; cursor: pointer; }.resume-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 89px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.resume-facts span { min-height: 91px; padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.55; }.resume-facts b { display: block; margin-bottom: 7px; color: var(--ink); font-size: 17px; letter-spacing: -.055em; }.resume-summary { max-width: 970px; padding: 140px 0; }.resume-summary h2 { margin: 0 0 27px; font-size: clamp(40px, 5.2vw, 74px); line-height: 1.03; letter-spacing: -.09em; }.resume-summary > p:last-child { max-width: 670px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.9; }.resume-block { padding: 83px 0; border-top: 1px solid var(--ink); }.resume-block-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 49px; }.resume-block-head h2 { margin: 0; font-size: clamp(36px, 4vw, 59px); line-height: 1; letter-spacing: -.08em; }.resume-projects { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.resume-projects article { min-height: 286px; padding: 21px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.resume-projects span { display: block; margin-bottom: 60px; color: var(--muted); font: 10px var(--mono); }.resume-projects h3 { margin: 0 0 10px; font-size: 23px; letter-spacing: -.065em; }.resume-projects p { min-height: 84px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }.resume-projects a { display: inline-block; margin-top: 21px; padding-bottom: 3px; border-bottom: 1px solid var(--ink); font: 10px var(--mono); }.resume-timeline { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }.resume-timeline li { display: grid; grid-template-columns: 23% 1fr; gap: 28px; padding: 27px 0 31px; border-bottom: 1px solid var(--line); }.resume-timeline li > p { margin: 3px 0 0; color: var(--muted); font: 10px var(--mono); }.resume-timeline h3 { margin: 0 0 7px; font-size: 22px; letter-spacing: -.06em; }.resume-timeline strong { display: block; margin-bottom: 12px; font-size: 13px; }.resume-timeline span { display: block; max-width: 700px; color: var(--muted); font-size: 13px; line-height: 1.75; }.resume-skills > div { display: flex; flex-wrap: wrap; gap: 10px; }.resume-skills > div span { padding: 11px 14px; border: 1px solid var(--ink); font: 10px var(--mono); }.resume-education { padding: 91px 0 140px; border-top: 1px solid var(--ink); }.resume-education h2 { margin: 0 0 9px; font-size: clamp(30px, 3.2vw, 47px); letter-spacing: -.075em; }.resume-education > p:last-child { margin: 0; color: var(--muted); font-size: 12px; }

@media (max-width: 800px) { .module-log { padding: 0 0 92px; }.module-grid { grid-template-columns: 1fr 1fr; }.module-grid article { min-height: 177px; padding: 17px; }.module-grid span { margin-bottom: 32px; }.case-hero { padding: 30px 0 81px; }.case-kicker { margin-bottom: 43px; }.case-hero-copy, .case-intro, .case-gallery-heading { display: block; }.case-hero-copy h1 { margin-bottom: 31px; }.case-hero-copy > p:last-child { font-size: 13px; }.case-hero-media { margin-top: 44px; }.case-facts { grid-template-columns: 1fr; margin-top: 0; }.case-facts div { min-height: auto; }.case-intro { padding: 83px 0; }.case-intro .eyebrow { margin-bottom: 39px; }.case-intro div > p { font-size: 13px; }.case-map { padding-bottom: 83px; }.case-map .section-heading { margin-bottom: 43px; }.case-map li { grid-template-columns: 38px 1fr; gap: 13px; padding: 25px 0; }.case-map h3 { font-size: 21px; }.case-map li p { font-size: 13px; }.case-gallery { padding: 82px 0; }.case-gallery-heading { margin-bottom: 41px; }.case-gallery-heading .eyebrow { margin-bottom: 27px; }.case-shot-wide, .case-shot-row .case-shot, .case-shot-console { height: auto; }.case-shot-row { grid-template-columns: 1fr; gap: 17px; margin: 17px 0; }.case-shot-row .case-shot img { height: auto; }.case-credit { padding: 84px 0; }.case-credit-grid { margin-top: 27px; }.resume-hero { padding: 61px 0 81px; }.resume-hero-main { display: block; }.resume-hero h1 { margin-bottom: 24px; }.resume-actions { margin-top: 32px; }.resume-facts { grid-template-columns: 1fr 1fr; margin-top: 58px; }.resume-summary { padding: 86px 0; }.resume-block { padding: 70px 0; }.resume-block-head { display: block; margin-bottom: 35px; }.resume-block-head .eyebrow { margin-bottom: 22px; }.resume-projects { grid-template-columns: 1fr; }.resume-projects article { min-height: 0; }.resume-projects span { margin-bottom: 33px; }.resume-projects p { min-height: 0; }.resume-timeline li { grid-template-columns: 1fr; gap: 15px; }.resume-education { padding: 76px 0 90px; } }
@media (max-width: 420px) { .module-grid { grid-template-columns: 1fr; }.resume-facts { grid-template-columns: 1fr; }.case-kicker { gap: 20px; }.case-kicker span { text-align: right; }.resume-actions { align-items: flex-start; flex-direction: column; gap: 18px; } }
@media print { .page-noise, .site-header, footer, .resume-actions { display: none !important; }.resume-page { background: #fff; }.resume-page .section-wrap { width: 100%; }.resume-hero { padding-top: 0; }.resume-block, .resume-summary, .resume-education { break-inside: avoid; } }

.film-credit { max-width: 720px; padding-left: 14px; border-left: 2px solid var(--lime); }
.film-stage-video .film-runtime { bottom: 63px; }

/* A broad portfolio: one deep case, then distinct projects and functional deliveries. */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 62px 28px; margin-top: 106px; }.portfolio-card { min-width: 0; }.portfolio-visual { position: relative; height: 270px; margin-bottom: 18px; overflow: hidden; border: 1px solid var(--ink); }.portfolio-card .project-meta { margin-bottom: 10px; }.portfolio-card h3 { margin: 0 0 10px; font-size: 25px; line-height: 1.08; letter-spacing: -.07em; }.portfolio-card > div:last-child > p:last-child { max-width: 340px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }.visual-api { padding: 20px; color: var(--paper); background: #182a26; }.visual-api::before { content: ""; position: absolute; width: 260px; height: 260px; right: -72px; top: -76px; border: 1px solid rgba(242,240,233,.35); border-radius: 50%; box-shadow: 0 0 0 32px rgba(199,243,107,.12), 0 0 0 64px rgba(199,243,107,.08); }.visual-api span, .visual-booking span, .visual-schedule span, .visual-logistics span, .visual-mini-game > span, .visual-realtime > span { position: relative; z-index: 1; font: 10px var(--mono); letter-spacing: .06em; }.visual-api b { position: absolute; z-index: 1; left: 20px; bottom: 18px; font: 54px/0.79 var(--mono); letter-spacing: -.11em; }.visual-api i { position: absolute; z-index: 1; width: 9px; height: 9px; border: 1px solid var(--lime); border-radius: 50%; }.visual-api i:nth-of-type(1) { left: 61%; top: 46%; background: var(--lime); }.visual-api i:nth-of-type(2) { right: 16%; top: 66%; }.visual-api i:nth-of-type(3) { right: 30%; bottom: 13%; background: var(--orange); border-color: var(--orange); }.visual-booking { padding: 20px; color: var(--ink); background: #e6ece2; }.visual-booking::after { content: ""; position: absolute; width: 180px; height: 180px; right: -41px; bottom: -58px; border-radius: 50%; background: var(--lime); }.visual-booking strong { position: absolute; z-index: 1; left: 19px; top: 53px; font-size: 78px; line-height: .7; letter-spacing: -.11em; }.visual-booking strong em { color: var(--orange); font-style: normal; }.visual-booking b { position: absolute; z-index: 1; left: 20px; bottom: 21px; padding: 8px 11px; border: 1px solid var(--ink); background: var(--paper); font: 10px var(--mono); }.visual-schedule { padding: 20px; background: #eff0eb; }.visual-schedule > div { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; position: absolute; top: 60px; right: 20px; left: 20px; height: 108px; }.visual-schedule > div i { display: block; border: 1px solid #bfc6c0; background: repeating-linear-gradient(180deg, transparent 0 20px, #d6dad5 21px 22px); }.visual-schedule > div i:nth-child(2), .visual-schedule > div i:nth-child(4) { background: var(--lime); }.visual-schedule > div i:nth-child(3) { background: var(--orange); }.visual-schedule b { position: absolute; left: 20px; bottom: 18px; font: 10px var(--mono); }.visual-logistics { padding: 20px; color: var(--paper); background: #17233d; }.visual-logistics svg { position: absolute; right: 18px; bottom: 43px; left: 18px; width: calc(100% - 36px); height: 112px; overflow: visible; }.visual-logistics path { fill: none; stroke: var(--lime); stroke-width: 2; stroke-dasharray: 6 6; }.visual-logistics circle { fill: var(--orange); stroke: var(--paper); stroke-width: 2; }.visual-logistics b { position: absolute; left: 20px; bottom: 18px; color: var(--lime); font: 10px var(--mono); }.visual-mini-game { padding: 18px; color: var(--paper); background: #1b1831; }.game-grid { position: absolute; left: 28px; top: 57px; display: grid; grid-template-columns: repeat(3, 36px); gap: 7px; }.game-grid i { display: block; width: 36px; height: 36px; border: 1px solid rgba(242,240,233,.5); background: #34255e; }.game-grid i:nth-child(2), .game-grid i:nth-child(5), .game-grid i:nth-child(7) { background: var(--orange); }.game-grid i:nth-child(4), .game-grid i:nth-child(9) { background: var(--lime); }.visual-mini-game b { position: absolute; right: 19px; bottom: 18px; color: var(--lime); font: 13px var(--mono); }.visual-realtime { padding: 19px; color: var(--paper); background: #171f2f; }.visual-realtime::before { content: ""; position: absolute; z-index: 0; inset: 0; opacity: .24; background-image: linear-gradient(rgba(242,240,233,.4) 1px, transparent 1px), linear-gradient(90deg, rgba(242,240,233,.4) 1px, transparent 1px); background-size: 34px 34px; }.visual-realtime > * { position: relative; z-index: 1; }.visual-realtime > div { display: flex; align-items: center; gap: 15px; position: absolute; top: 49%; left: 50%; transform: translate(-50%, -50%); }.visual-realtime > div i, .visual-realtime > div b { display: block; width: 35px; height: 35px; border: 1px solid var(--lime); border-radius: 50%; }.visual-realtime > div i:first-child { background: var(--lime); }.visual-realtime > div b { width: 8px; height: 8px; background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 9px rgba(239,112,84,.16); }.visual-realtime strong { position: absolute; left: 19px; bottom: 17px; font: 27px/.88 var(--mono); letter-spacing: -.09em; }
@media (max-width: 1050px) { .portfolio-grid { grid-template-columns: 1fr 1fr; }.portfolio-visual { height: 250px; } }
@media (max-width: 800px) { .portfolio-grid { grid-template-columns: 1fr; gap: 47px; margin-top: 75px; }.portfolio-visual { height: 260px; }.work .project-grid { gap: 58px; }.work-disclaimer { margin-top: 46px; } }

/* Slide-deck portfolio: covers stay conceptual; evidence lives inside the detail dialog. */
.work .project-grid, .work .portfolio-grid, .work .work-disclaimer, .module-log { display: none; }.portfolio-deck { margin-top: 73px; }.deck-stage { position: relative; overflow: hidden; border: 1px solid var(--ink); background: var(--ink); box-shadow: 13px 14px 0 rgba(25,35,30,.13); }.deck-stage::before, .deck-stage::after { content: ""; position: absolute; z-index: 0; width: 62%; height: 94%; top: 5%; border: 1px solid rgba(25,35,30,.28); background: #dfe4d8; }.deck-stage::before { left: -4%; transform: rotate(-2.2deg); }.deck-stage::after { right: -4%; transform: rotate(2.2deg); }.deck-track { position: relative; z-index: 1; display: flex; width: 100%; transition: transform .72s cubic-bezier(.2,.73,.17,1); }.deck-slide { flex: 0 0 100%; min-width: 0; min-height: 610px; position: relative; overflow: hidden; padding: 31px; border: 0; color: var(--ink); text-align: left; cursor: pointer; font: inherit; isolation: isolate; }.deck-slide:focus-visible { outline: 3px solid var(--lime); outline-offset: -7px; }.deck-slide::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .18; background-image: linear-gradient(rgba(25,35,30,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(25,35,30,.35) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(90deg, transparent 0 34%, black 58%); }.deck-index, .deck-kind { position: absolute; top: 28px; font: 10px var(--mono); letter-spacing: .06em; }.deck-index { left: 31px; }.deck-kind { right: 31px; color: var(--muted); }.deck-copy { position: relative; z-index: 2; max-width: 62%; padding-top: 123px; }.deck-copy > p { margin: 0 0 17px; color: var(--muted); font: 10px var(--mono); letter-spacing: .05em; }.deck-copy h3 { margin: 0 0 24px; font-size: clamp(52px, 6.6vw, 106px); font-weight: 700; line-height: .85; letter-spacing: -.11em; }.deck-copy h3 em { color: var(--orange); font-style: normal; }.deck-copy > span { display: inline-block; max-width: 370px; padding-top: 10px; border-top: 1px solid currentColor; font: 11px var(--mono); line-height: 1.6; }.deck-open { position: absolute; z-index: 3; left: 31px; bottom: 29px; padding-bottom: 5px; border-bottom: 1px solid currentColor; font: 11px var(--mono); letter-spacing: .02em; transition: transform .25s; }.deck-slide:hover .deck-open { transform: translateX(8px); }.deck-art { position: absolute; z-index: 1; right: 5%; top: 50%; width: 43%; height: 72%; transform: translateY(-42%); }.deck-guangyin { background: #e8eee2; }.deck-guangyin .deck-art { border: 1px solid var(--ink); background: #d8ee9f; box-shadow: 11px 11px 0 rgba(25,35,30,.17); }.deck-guangyin .deck-art::before { content: ""; position: absolute; width: 47%; height: 47%; right: -5%; top: -9%; border-radius: 50%; background: var(--lime); filter: blur(2px); }.deck-guangyin .deck-art b { position: absolute; left: 16%; top: 19%; font: 72px/.72 var(--mono); letter-spacing: -.12em; }.deck-guangyin .deck-art span { position: absolute; right: 11%; bottom: 12%; font: 11px/1.5 var(--mono); }.deck-guangyin .deck-art i { position: absolute; display: block; border: 1px solid var(--ink); border-radius: 50%; }.deck-guangyin .deck-art i:nth-of-type(1) { width: 56px; height: 56px; left: 14%; bottom: 17%; background: var(--orange); }.deck-guangyin .deck-art i:nth-of-type(2) { width: 18px; height: 18px; right: 35%; top: 31%; background: var(--paper); }.deck-guangyin .deck-art i:nth-of-type(3) { width: 9px; height: 9px; right: 27%; top: 19%; background: var(--orange); }.deck-dnf { color: #f5f3ed; background: #10121c; }.deck-dnf::after { background-image: linear-gradient(rgba(85,110,255,.48) 1px, transparent 1px), linear-gradient(90deg, rgba(85,110,255,.48) 1px, transparent 1px); }.deck-dnf .deck-kind, .deck-dnf .deck-copy > p { color: #9fa6c1; }.deck-dnf .deck-copy h3 em { color: #7c56ed; }.deck-dnf .deck-art { right: 3%; width: 49%; border: 1px solid rgba(242,240,233,.38); background: radial-gradient(circle at 76% 20%, #4654bc 0 2%, transparent 2.4%), radial-gradient(circle at 52% 72%, #1e5bcd 0 9%, transparent 25%), linear-gradient(135deg, #111b40, #30194a 57%, #0c0d18); }.deck-dnf .deck-art::before { content: ""; position: absolute; inset: 14% 11%; border: 1px solid rgba(242,240,233,.36); transform: rotate(-7deg); }.deck-dnf .deck-art b { position: absolute; left: 10%; bottom: 11%; color: #f6f4eb; font: 72px/.72 var(--mono); letter-spacing: -.13em; }.deck-dnf .deck-art span { position: absolute; right: 10%; top: 12%; color: #87d9ff; font: 10px/1.5 var(--mono); }.deck-dnf .deck-art i { position: absolute; right: 19%; bottom: 20%; width: 90px; height: 90px; border: 2px solid #7c56ed; border-radius: 50%; box-shadow: 0 0 0 18px rgba(124,86,237,.15); }.deck-lawyer { background: #efb45f; }.deck-lawyer .deck-copy h3 em { color: #1b2138; }.deck-lawyer .deck-art { border-radius: 50%; background: #181e36; box-shadow: -36px 23px 0 #b45a83; }.deck-lawyer .deck-art::after { content: ""; position: absolute; width: 57%; height: 57%; left: 15%; top: 17%; border-radius: 50%; background: #f7f2df; }.deck-lawyer .deck-art b { position: absolute; z-index: 1; right: 12%; top: 17%; color: #f8f3df; font: 16px var(--mono); }.deck-lawyer .deck-art span { position: absolute; z-index: 1; left: 14%; bottom: 17%; color: #f8f3df; font: 11px/1.5 var(--mono); }.deck-api { color: var(--paper); background: #172b26; }.deck-api .deck-kind, .deck-api .deck-copy > p { color: #b6c5b9; }.deck-api .deck-copy h3 em { color: var(--lime); }.deck-api .deck-art { border-radius: 50%; background: radial-gradient(circle at center, #c7f36b 0 10%, #3a714d 10.5% 25%, #1b392f 25.5% 42%, transparent 42.5%); }.deck-api .deck-art::before, .deck-api .deck-art::after { content: ""; position: absolute; border: 1px solid rgba(199,243,107,.6); border-radius: 50%; }.deck-api .deck-art::before { inset: 5%; }.deck-api .deck-art::after { inset: 20%; }.deck-api .deck-art b { position: absolute; left: 10%; top: 12%; color: #f7f6ef; font: 64px/.75 var(--mono); letter-spacing: -.13em; }.deck-api .deck-art i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); }.deck-api .deck-art i:nth-of-type(1) { left: 12%; bottom: 23%; }.deck-api .deck-art i:nth-of-type(2) { right: 12%; top: 18%; background: var(--lime); }.deck-api .deck-art i:nth-of-type(3) { right: 22%; bottom: 9%; background: var(--paper); }.deck-api .deck-art span { position: absolute; right: -6%; bottom: 12%; font: 10px/1.4 var(--mono); }.deck-booking { background: #e1e9e5; }.deck-booking .deck-art { right: 7%; border: 1px solid var(--ink); background: var(--paper); box-shadow: 9px 9px 0 var(--orange); }.deck-booking .deck-art::before { content: ""; position: absolute; inset: 15% 13%; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }.deck-booking .deck-art b { position: absolute; left: 13%; top: 18%; font-size: clamp(74px, 10vw, 150px); line-height: .72; letter-spacing: -.14em; }.deck-booking .deck-art b em { color: var(--orange); font-style: normal; }.deck-booking .deck-art span { position: absolute; right: 10%; bottom: 17%; padding: 8px; border: 1px solid var(--ink); font: 10px var(--mono); }.deck-booking .deck-art i { position: absolute; left: 15%; bottom: 17%; width: 11px; height: 11px; border-radius: 50%; background: var(--lime); }.deck-schedule { background: #eef0eb; }.deck-schedule .deck-art { right: 5%; top: 49%; width: 48%; height: 62%; transform: translateY(-38%); padding: 20px; border: 1px solid var(--ink); background: #f8f8f5; }.deck-schedule .deck-art > span { font: 10px var(--mono); }.deck-schedule .deck-art > div { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; height: 58%; margin-top: 25px; }.deck-schedule .deck-art > div i { display: block; border: 1px solid #c9cfca; background: repeating-linear-gradient(180deg, transparent 0 19px, #d9ded9 20px 21px); }.deck-schedule .deck-art > div i:nth-child(2), .deck-schedule .deck-art > div i:nth-child(4) { background: var(--lime); }.deck-schedule .deck-art > div i:nth-child(3) { background: var(--orange); }.deck-schedule .deck-art b { position: absolute; right: 20px; bottom: 16px; font: 10px var(--mono); }.deck-logistics { color: var(--paper); background: #17233d; }.deck-logistics .deck-kind, .deck-logistics .deck-copy > p { color: #aab6d0; }.deck-logistics .deck-copy h3 em { color: var(--lime); }.deck-logistics .deck-art { right: 3%; width: 49%; }.deck-logistics svg { position: absolute; left: 4%; top: 19%; width: 92%; height: 52%; overflow: visible; }.deck-logistics path { fill: none; stroke: var(--lime); stroke-width: 2; stroke-dasharray: 8 7; }.deck-logistics circle { fill: var(--orange); stroke: var(--paper); stroke-width: 2; }.deck-logistics b { position: absolute; left: 7%; bottom: 18%; color: var(--lime); font: 11px var(--mono); }.deck-game { color: var(--paper); background: #1b1831; }.deck-game .deck-kind, .deck-game .deck-copy > p { color: #c3bbd7; }.deck-game .deck-copy h3 em { color: #a86cf4; }.deck-game .deck-art { right: 8%; top: 52%; width: 39%; height: 54%; transform: translateY(-34%); }.deck-game .deck-art > div { display: grid; grid-template-columns: repeat(3, minmax(32px, 1fr)); gap: 8px; width: 72%; }.deck-game .deck-art > div i { display: block; aspect-ratio: 1; border: 1px solid rgba(242,240,233,.55); background: #33245f; }.deck-game .deck-art > div i:nth-child(2), .deck-game .deck-art > div i:nth-child(5), .deck-game .deck-art > div i:nth-child(7) { background: var(--orange); }.deck-game .deck-art > div i:nth-child(4), .deck-game .deck-art > div i:nth-child(9) { background: var(--lime); }.deck-game .deck-art b { position: absolute; right: 0; bottom: 10%; color: var(--lime); font: 16px var(--mono); }.deck-realtime { color: var(--paper); background: #111f2f; }.deck-realtime .deck-kind, .deck-realtime .deck-copy > p { color: #b6c5d0; }.deck-realtime .deck-copy h3 em { color: var(--lime); }.deck-realtime .deck-art { right: 5%; border: 1px solid rgba(242,240,233,.55); }.deck-realtime .deck-art::before { content: ""; position: absolute; inset: 0; opacity: .36; background-image: linear-gradient(rgba(242,240,233,.45) 1px, transparent 1px), linear-gradient(90deg, rgba(242,240,233,.45) 1px, transparent 1px); background-size: 34px 34px; }.deck-realtime .deck-art > span { position: absolute; left: 10%; top: 11%; font: 10px var(--mono); }.deck-realtime .deck-art > div { display: flex; align-items: center; gap: 25px; position: absolute; left: 50%; top: 49%; transform: translate(-50%, -50%); }.deck-realtime .deck-art > div i, .deck-realtime .deck-art > div b { display: block; width: 43px; height: 43px; border: 1px solid var(--lime); border-radius: 50%; }.deck-realtime .deck-art > div i:first-child { background: var(--lime); }.deck-realtime .deck-art > div b { width: 11px; height: 11px; background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 11px rgba(239,112,84,.18); }.deck-realtime .deck-art > strong { position: absolute; left: 10%; bottom: 10%; font: 37px/.82 var(--mono); letter-spacing: -.1em; }.deck-controls { display: flex; align-items: center; gap: 16px; margin-top: 23px; }.deck-controls button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--ink); color: var(--ink); background: transparent; cursor: pointer; font-size: 19px; transition: background-color .2s, color .2s, transform .2s; }.deck-controls button:hover { color: var(--paper); background: var(--ink); transform: translateY(-2px); }.deck-controls p { margin: 0; font: 12px var(--mono); }.deck-controls p i { padding: 0 4px; color: var(--muted); font-style: normal; }.deck-controls > span { margin-left: auto; color: var(--muted); font: 10px var(--mono); }
.project-dialog { width: min(1120px, calc(100% - 44px)); max-width: none; max-height: min(860px, calc(100% - 64px)); padding: 0; overflow: auto; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 14px 14px 0 var(--ink); }.project-dialog::backdrop { background: rgba(19,29,25,.67); backdrop-filter: blur(9px); }.project-dialog-close { position: sticky; z-index: 4; float: right; top: 14px; right: 16px; width: 38px; height: 38px; margin: 14px 16px 0 0; border: 1px solid var(--ink); border-radius: 50%; color: var(--ink); background: var(--paper); cursor: pointer; font-size: 25px; line-height: 1; }.project-dialog-close:hover { color: var(--paper); background: var(--ink); }.project-dialog-head { padding: 67px 60px 47px; border-bottom: 1px solid var(--ink); }.project-dialog-head > p:first-child { margin: 0 0 29px; color: var(--muted); font: 10px var(--mono); letter-spacing: .05em; }.project-dialog-head h2 { max-width: 830px; margin: 0 0 22px; font-size: clamp(43px, 5vw, 78px); line-height: .9; letter-spacing: -.1em; }.project-dialog-head > p:last-child { max-width: 640px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }.project-dialog-scope { display: grid; grid-template-columns: 22% 1fr; gap: 25px; padding: 35px 60px 43px; border-bottom: 1px solid var(--line); }.project-dialog-scope > span { color: var(--muted); font: 10px var(--mono); }.project-dialog-scope ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }.project-dialog-scope li { padding: 8px 10px; border: 1px solid var(--ink); font: 10px var(--mono); }.project-dialog-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 40px 60px; }.project-dialog-gallery figure { position: relative; margin: 0; border: 1px solid var(--ink); background: #edf0ec; overflow: hidden; }.project-dialog-gallery figure:first-child { grid-column: 1 / -1; }.project-dialog-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }.project-dialog-gallery figure:first-child img { max-height: 500px; }.project-dialog-gallery figcaption { padding: 9px 11px; border-top: 1px solid var(--ink); font: 10px var(--mono); }.project-dialog-empty { margin: 41px 60px; padding: 27px; border: 1px solid var(--ink); background: #e1e9e5; }.project-dialog-empty span { display: block; margin-bottom: 49px; font: 10px var(--mono); }.project-dialog-empty strong { display: block; margin-bottom: 10px; font-size: 21px; letter-spacing: -.055em; }.project-dialog-empty p { max-width: 600px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }.project-dialog .button { margin: 0 60px 57px; }
@media (max-width: 800px) { .portfolio-deck { margin-top: 47px; }.deck-stage { box-shadow: 7px 8px 0 rgba(25,35,30,.13); }.deck-slide { min-height: 535px; padding: 20px; }.deck-index, .deck-kind { top: 20px; font-size: 8px; }.deck-index { left: 20px; }.deck-kind { right: 20px; }.deck-copy { max-width: 100%; padding-top: 80px; }.deck-copy h3 { margin-bottom: 19px; font-size: clamp(46px, 13vw, 72px); }.deck-copy > span { max-width: 250px; font-size: 9px; }.deck-art { right: -7%; top: 64%; width: 65%; height: 48%; transform: translateY(-34%); opacity: .94; }.deck-guangyin .deck-art b, .deck-api .deck-art b, .deck-dnf .deck-art b { font-size: 48px; }.deck-booking .deck-art b { font-size: 77px; }.deck-schedule .deck-art { right: -4%; top: 62%; width: 62%; height: 38%; }.deck-logistics .deck-art { right: -5%; top: 62%; width: 67%; }.deck-game .deck-art { right: 1%; top: 64%; }.deck-realtime .deck-art { right: -2%; top: 64%; width: 65%; }.deck-open { left: 20px; bottom: 19px; font-size: 9px; }.deck-controls { gap: 11px; margin-top: 15px; }.deck-controls button { width: 37px; height: 37px; }.deck-controls > span { display: none; }.project-dialog { width: min(100% - 22px, 680px); max-height: calc(100% - 28px); box-shadow: 8px 8px 0 var(--ink); }.project-dialog-head { padding: 57px 23px 32px; }.project-dialog-head h2 { font-size: 45px; }.project-dialog-head > p:last-child { font-size: 13px; }.project-dialog-scope { display: block; padding: 26px 23px 29px; }.project-dialog-scope > span { display: block; margin-bottom: 16px; }.project-dialog-gallery { grid-template-columns: 1fr; gap: 14px; padding: 25px 23px; }.project-dialog-gallery figure:first-child { grid-column: auto; }.project-dialog-empty { margin: 25px 23px; padding: 21px; }.project-dialog .button { margin: 0 23px 35px; }.project-dialog-close { margin: 11px 11px 0 0; } }
@media (prefers-reduced-motion: reduce) { .deck-track { transition: none; } }

/* Deck navigation lives on the canvas edge: round at rest, square while selected. */
.deck-side-control { position: absolute; z-index: 5; top: 50%; display: grid; place-items: center; width: 58px; height: 58px; padding: 0; border: 1px solid var(--ink); border-radius: 50%; color: var(--ink); background: rgba(242,240,233,.9); cursor: pointer; font-size: 23px; line-height: 1; transform: translateY(-50%); transition: border-radius .36s cubic-bezier(.2,.7,.2,1), background-color .25s, color .25s, transform .3s cubic-bezier(.2,.7,.2,1); backdrop-filter: blur(5px); }.deck-side-prev { left: 18px; }.deck-side-next { right: 18px; }.deck-side-control:hover, .deck-side-control:focus-visible, .deck-side-control.is-square { border-radius: 0; color: var(--paper); background: var(--ink); outline: none; }.deck-side-prev:hover, .deck-side-prev:focus-visible, .deck-side-prev.is-square { transform: translate(-4px, -50%); }.deck-side-next:hover, .deck-side-next:focus-visible, .deck-side-next.is-square { transform: translate(4px, -50%); }.deck-open { width: 17px; height: 17px; padding: 0; border: 0; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 7px rgba(239,112,84,.15); transition: border-radius .38s cubic-bezier(.2,.7,.2,1), transform .3s cubic-bezier(.2,.7,.2,1), background-color .25s; }.deck-open::after { content: ""; position: absolute; width: 7px; height: 7px; right: -16px; top: 5px; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper); }.deck-slide:hover .deck-open, .deck-slide:focus-visible .deck-open { border-radius: 0; background: var(--lime); transform: translateX(9px) rotate(90deg); }.deck-controls { justify-content: space-between; min-height: 32px; margin-top: 18px; }.deck-controls p { padding-left: 3px; }.deck-click-cue { display: flex; align-items: center; gap: 7px; margin-left: auto; }.deck-click-cue i { display: block; width: 8px; height: 8px; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper); animation: deckCue 2.1s ease-in-out infinite; }.deck-click-cue i:nth-child(2) { width: 12px; height: 12px; border-radius: 0; background: var(--orange); animation-delay: .18s; }.deck-click-cue i:nth-child(3) { background: var(--lime); animation-delay: .36s; }.deck-stage:has(.deck-slide:hover) .deck-click-cue i:nth-child(2) { border-radius: 50%; }.deck-slide:hover + * { border-radius: 0; }@keyframes deckCue { 0%, 100% { transform: scale(.8); opacity: .55; } 50% { transform: scale(1); opacity: 1; } }
@media (max-width: 800px) { .deck-side-control { width: 43px; height: 43px; font-size: 18px; }.deck-side-prev { left: 10px; }.deck-side-next { right: 10px; }.deck-open { width: 14px; height: 14px; }.deck-open::after { right: -13px; top: 4px; width: 6px; height: 6px; }.deck-controls { margin-top: 12px; } }

/* Make the page marker and the color invitation deliberately impossible to miss. */
.deck-controls { min-height: 76px; margin-top: 22px; }.deck-controls p { display: inline-flex; align-items: center; min-width: 146px; min-height: 68px; margin: 0; padding: 0 18px; border: 1px solid var(--ink); color: var(--paper); background: var(--ink); box-shadow: 6px 6px 0 var(--orange); font: 25px var(--mono); letter-spacing: -.07em; }.deck-controls p span { color: var(--lime); }.deck-controls p i { padding: 0 8px; color: var(--paper); font-size: 15px; }.deck-click-cue { width: 116px; height: 64px; justify-content: flex-end; gap: 11px; }.deck-click-cue i { width: 20px; height: 20px; border-width: 1px; box-shadow: 0 0 0 8px rgba(199,243,107,.14); }.deck-click-cue i:nth-child(2) { width: 34px; height: 34px; box-shadow: 0 0 0 9px rgba(239,112,84,.12); }.deck-click-cue i:nth-child(3) { width: 17px; height: 17px; box-shadow: 0 0 0 7px rgba(199,243,107,.13); }.deck-open { left: 31px; bottom: 27px; width: 52px; height: 52px; border: 1px solid var(--ink); border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 10px rgba(239,112,84,.15); animation: deckOpenPulse 2.4s ease-in-out infinite; }.deck-open::before { content: ""; position: absolute; width: 19px; height: 19px; right: -10px; top: -10px; border: 1px solid var(--ink); border-radius: 50%; background: var(--lime); }.deck-open::after { width: 14px; height: 14px; right: -23px; top: 18px; border-color: var(--ink); background: var(--paper); }.deck-slide:hover .deck-open, .deck-slide:focus-visible .deck-open { border-radius: 0; background: var(--lime); transform: translateX(14px) rotate(90deg) scale(1.06); animation-play-state: paused; }.deck-slide:hover .deck-open::before, .deck-slide:focus-visible .deck-open::before { border-radius: 0; background: var(--orange); }.deck-slide:hover .deck-open::after, .deck-slide:focus-visible .deck-open::after { border-radius: 0; }.project-transition { position: fixed; z-index: 999; border: 1px solid var(--ink); box-shadow: 12px 14px 0 rgba(25,35,30,.22); pointer-events: none; opacity: .96; transform: scale(1); transition: left .56s cubic-bezier(.2,.75,.18,1), top .56s cubic-bezier(.2,.75,.18,1), width .56s cubic-bezier(.2,.75,.18,1), height .56s cubic-bezier(.2,.75,.18,1), opacity .32s .36s, border-radius .56s cubic-bezier(.2,.75,.18,1), box-shadow .56s; }.project-transition.is-expanding { border-radius: 0; opacity: 0; box-shadow: 18px 22px 0 rgba(25,35,30,.12); }.project-dialog[open] { opacity: 0; transform: translateY(20px) scale(.965); transition: opacity .34s ease, transform .48s cubic-bezier(.2,.75,.18,1); }.project-dialog[open].is-visible { opacity: 1; transform: translateY(0) scale(1); }.project-dialog[open].is-leaving { opacity: 0; transform: translateY(14px) scale(.975); }.project-dialog[open]::backdrop { animation: dialogBackdropIn .42s ease both; }@keyframes deckOpenPulse { 0%, 100% { box-shadow: 0 0 0 8px rgba(239,112,84,.12); } 50% { box-shadow: 0 0 0 14px rgba(239,112,84,.04); } }@keyframes dialogBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 800px) { .deck-controls { min-height: 58px; margin-top: 17px; }.deck-controls p { min-width: 116px; min-height: 54px; padding: 0 13px; font-size: 20px; box-shadow: 4px 4px 0 var(--orange); }.deck-click-cue { width: 93px; height: 54px; gap: 8px; }.deck-click-cue i { width: 16px; height: 16px; }.deck-click-cue i:nth-child(2) { width: 25px; height: 25px; }.deck-click-cue i:nth-child(3) { width: 14px; height: 14px; }.deck-open { left: 20px; bottom: 20px; width: 42px; height: 42px; }.deck-open::before { width: 15px; height: 15px; }.deck-open::after { width: 11px; height: 11px; top: 14px; } }
@media (prefers-reduced-motion: reduce) { .deck-open, .deck-click-cue i, .project-transition, .project-dialog[open] { animation: none !important; transition: none !important; } }

/* The color guide remains anchored to the card; hover changes its geometry, never its position. */
.deck-open { left: 57px; top: calc(100% - 53px); bottom: auto; transform: translate(-50%, -50%); transition: border-radius .3s cubic-bezier(.2,.7,.2,1), transform .22s cubic-bezier(.2,.7,.2,1), background-color .2s; }.deck-open::before, .deck-open::after { transition: border-radius .3s cubic-bezier(.2,.7,.2,1), transform .22s cubic-bezier(.2,.7,.2,1), background-color .2s; }
@media (max-width: 800px) { .deck-open { left: 41px; top: calc(100% - 41px); } }

/* Hover means the fixed color cue opens up in place; it never chases the cursor. */
.deck-slide:hover .deck-open, .deck-slide:focus-visible .deck-open { left: 57px; top: calc(100% - 53px); bottom: auto; border-radius: 0; background: var(--lime); transform: translate(-50%, -50%) rotate(90deg) scale(1.08); animation-play-state: paused; }.deck-slide:hover .deck-open::before, .deck-slide:focus-visible .deck-open::before { border-radius: 0; background: var(--orange); transform: translate(18px, -13px) rotate(-45deg); }.deck-slide:hover .deck-open::after, .deck-slide:focus-visible .deck-open::after { border-radius: 0; transform: translate(13px, 13px) rotate(45deg); }.deck-slide:hover .deck-open, .deck-slide:hover .deck-open::before, .deck-slide:hover .deck-open::after { transition-duration: .32s; }@media (max-width: 800px) { .deck-slide:hover .deck-open, .deck-slide:focus-visible .deck-open { left: 41px; top: calc(100% - 41px); } }

.project-dialog-details { display: grid; grid-template-columns: 22% 1fr; gap: 25px; padding: 43px 60px; border-bottom: 1px solid var(--line); }.project-dialog-details > span { color: var(--muted); font: 10px var(--mono); }.project-dialog-details > div { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); border-left: 1px solid var(--line); }.project-dialog-details article { min-height: 180px; padding: 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.project-dialog-details h3 { margin: 0 0 12px; font-size: 19px; letter-spacing: -.055em; }.project-dialog-details p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }@media (max-width: 800px) { .project-dialog-details { display: block; padding: 27px 23px; }.project-dialog-details > span { display: block; margin-bottom: 16px; }.project-dialog-details > div { grid-template-columns: 1fr; }.project-dialog-details article { min-height: 0; padding: 17px; } }

/* Original visual shorthand for work that cannot show a client screen publicly. */
.project-dialog-concept { margin: 40px 60px; border: 1px solid var(--ink); background: #17233d; overflow: hidden; }.project-dialog-concept img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: center; }@media (max-width: 800px) { .project-dialog-concept { margin: 25px 23px; }.project-dialog-concept img { aspect-ratio: 16 / 10; } }

/* Glass navigation: readable against every cover while retaining the artwork beneath it. */
.deck-side-control { border-color: rgba(240,246,236,.82); color: #d8ff82; background: rgba(17,34,52,.47); box-shadow: 0 10px 28px rgba(13,24,34,.28), inset 0 1px 0 rgba(255,255,255,.22); backdrop-filter: blur(16px) saturate(145%); -webkit-backdrop-filter: blur(16px) saturate(145%); }.deck-side-control:hover, .deck-side-control:focus-visible, .deck-side-control.is-square { border-color: rgba(216,255,130,.9); color: var(--ink); background: rgba(216,255,130,.78); box-shadow: 0 12px 34px rgba(13,24,34,.34), inset 0 1px 0 rgba(255,255,255,.45); }

/* The email card opens a focused contact picker rather than relying on a configured mail app. */
.contact-channel-email { width: 100%; color: var(--ink); text-align: left; font: inherit; cursor: pointer; appearance: none; }.email-dialog { width: min(590px, calc(100% - 28px)); max-width: none; padding: 0; overflow: hidden; border: 1px solid rgba(24,37,32,.86); color: var(--ink); background: rgba(245,246,240,.76); box-shadow: 16px 18px 48px rgba(18,31,28,.34), inset 0 1px 0 rgba(255,255,255,.8); backdrop-filter: blur(20px) saturate(145%); -webkit-backdrop-filter: blur(20px) saturate(145%); opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .18s ease, transform .32s cubic-bezier(.2,.75,.18,1); }.email-dialog::backdrop { background: rgba(10,22,24,.43); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }.email-dialog.is-visible { opacity: 1; transform: translateY(0) scale(1); }.email-dialog-close { position: absolute; z-index: 2; top: 17px; right: 17px; display: grid; place-items: center; width: 39px; height: 39px; padding: 0; border: 1px solid var(--ink); border-radius: 50%; color: var(--ink); background: rgba(255,255,255,.4); cursor: pointer; font-size: 24px; line-height: 1; transition: border-radius .25s, background-color .25s, color .25s; }.email-dialog-close:hover { border-radius: 0; color: var(--paper); background: var(--ink); }.email-dialog-head { position: relative; padding: 56px 48px 35px; overflow: hidden; border-bottom: 1px solid var(--ink); background: linear-gradient(120deg, rgba(199,243,107,.68), rgba(238,240,232,.28) 48%, rgba(239,112,84,.34)); }.email-dialog-head::after { content: ""; position: absolute; width: 205px; height: 205px; right: -75px; top: -92px; border: 1px solid rgba(24,37,32,.52); border-radius: 50%; background: rgba(255,255,255,.2); box-shadow: 0 0 0 26px rgba(255,255,255,.1); }.email-dialog-head p { position: relative; z-index: 1; margin: 0 0 22px; font: 10px var(--mono); letter-spacing: .06em; }.email-dialog-head h2 { position: relative; z-index: 1; margin: 0; font-size: clamp(35px, 6vw, 56px); line-height: .87; letter-spacing: -.09em; }.email-dialog-head h2 em { color: var(--orange); font-style: normal; }.email-list { padding: 24px 48px 12px; }.email-option { display: flex; align-items: center; gap: 18px; padding: 15px 0; border-bottom: 1px solid rgba(24,37,32,.25); }.email-option code { min-width: 0; overflow: hidden; color: var(--ink); font: 14px var(--mono); text-overflow: ellipsis; white-space: nowrap; }.email-option button { flex: 0 0 auto; min-width: 63px; padding: 9px 10px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); background: rgba(255,255,255,.35); cursor: pointer; font: 10px var(--mono); transition: border-radius .22s, background-color .22s, color .22s; }.email-option button:hover, .email-option button.is-copied { border-radius: 0; color: var(--ink); background: var(--lime); }.email-dialog-note { margin: 0; padding: 19px 48px 28px; color: var(--muted); font: 10px/1.6 var(--mono); }@media (max-width: 800px) { .email-dialog-head { padding: 44px 24px 29px; }.email-list { padding: 17px 24px 8px; }.email-option { gap: 10px; padding: 14px 0; }.email-option code { font-size: 11px; }.email-dialog-note { padding: 17px 24px 23px; }.email-dialog-close { top: 12px; right: 12px; } }

/* Alari mark: generated as a standalone transparent asset, used consistently as the site identity. */
.header-brand { position: absolute; left: 0; display: inline-flex; align-items: center; gap: 10px; min-height: 42px; color: var(--ink); font: 11px var(--mono); letter-spacing: .14em; }.header-brand img { display: block; width: 37px; height: 37px; object-fit: contain; transition: transform .32s cubic-bezier(.2,.72,.2,1); }.header-brand:hover img { transform: rotate(-8deg) scale(1.08); }.site-header nav { gap: clamp(17px, 2.3vw, 34px); }@media (max-width: 800px) { .header-brand { gap: 8px; font-size: 10px; }.header-brand img { width: 32px; height: 32px; } }