:root{--color-page:#fbfbfa;--color-soft:#f2f4f8;--color-text:#303030;--color-muted:#9b9b98;--color-line:#e8e8e5;--color-accent:#a83238;--nav-height:56px;--page-x:clamp(20px, 5vw, 128px);--section-y:clamp(72px, 10vw, 160px);--content-max:1580px;--ease-out:cubic-bezier(.22, 1, .36, 1);color-scheme:light}*{box-sizing:border-box}html{background:var(--color-page);color:var(--color-text);scroll-behavior:smooth;font-family:Cambria,华文中宋,STZhongsong,SimSun,serif}body{background:var(--color-page);letter-spacing:0;margin:0;font-size:16px;line-height:1.55}a{color:inherit;text-underline-offset:.18em;text-decoration-color:#30303038}a:focus-visible{outline:1px solid var(--color-text);outline-offset:5px}p,h1,h2,h3{margin-block:0}.skip-link{z-index:30;background:var(--color-text);color:#fff;padding:8px 12px;font-size:13px;position:fixed;top:12px;left:16px;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}.site-header{z-index:20;height:var(--nav-height);backdrop-filter:blur(16px);background:#fbfbfae6;border-bottom:1px solid #0000000f;position:sticky;top:0}.site-nav{width:min(calc(100% - var(--page-x) * 2), var(--content-max));height:var(--nav-height);color:#747470;justify-content:space-between;align-items:center;gap:24px;margin-inline:auto;font-size:14px;display:flex}.nav-home,.nav-links a{white-space:nowrap;text-decoration:none}.nav-links{align-items:center;gap:clamp(16px,3vw,40px);display:flex}.site-nav a[aria-current=page],.site-nav a:hover{color:var(--color-text)}.intro-section,.page-heading,.work-section,.about-summary,.case-study,.playground-pack{width:min(calc(100% - var(--page-x) * 2), var(--content-max));margin-inline:auto}.intro-section{grid-template-columns:minmax(0,.86fr) minmax(240px,.34fr);align-items:end;gap:clamp(32px,7vw,112px);padding-block:clamp(72px,12vw,168px) 64px;display:grid}.intro-section h1{letter-spacing:0;max-width:860px;font-size:clamp(32px,3.4vw,52px);font-weight:450;line-height:1.12}.intro-aside,.page-heading p{color:#777773;max-width:520px}.intro-aside{gap:22px;display:grid}.hero-facts,.proof-list,.case-proof-list{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.hero-facts li,.proof-list li,.case-proof-list li{border:1px solid var(--color-line);color:#666661;background:#ffffff9e;border-radius:999px;padding:6px 10px;font-size:13px;line-height:1.25}.hero-actions{flex-wrap:wrap;gap:10px;display:flex}.hero-actions a{border:1px solid var(--color-text);min-height:42px;color:var(--color-text);border-radius:4px;align-items:center;padding:0 16px;text-decoration:none;display:inline-flex}.hero-actions a+a{border-color:var(--color-line);color:#666661}.section-label{color:var(--color-muted);text-transform:lowercase;margin-bottom:18px;font-size:14px;line-height:1}.work-section{padding-block:var(--section-y)}.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(76px,9vw,128px) clamp(40px,5vw,72px);display:grid}.project-card{min-width:0}.project-media-link{border-radius:8px;text-decoration:none;display:block;overflow:hidden}.project-media-link .media-mockup{transition:transform .64s var(--ease-out), opacity .24s ease}.project-media-link:hover .media-mockup,.project-media-link:focus-visible .media-mockup{opacity:.94;transform:scale(1.01)}.project-copy{padding-top:22px}.project-title-link{text-decoration:none}.project-title-link:hover h2{text-underline-offset:.16em;text-decoration:underline 1px}.project-card h2{font-size:clamp(24px,2.2vw,32px);font-weight:430;line-height:1.12}.project-meta{color:var(--color-muted);margin-top:10px;font-size:14px}.project-summary{color:#6e6e69;max-width:620px;margin-top:12px}.proof-list{margin-top:14px}.media-mockup{aspect-ratio:var(--media-ratio,1.78);border:1px solid var(--color-line);isolation:isolate;background:linear-gradient(135deg,#ffffffc7,#f2f4f8a3),#f4f4f1;border-radius:8px;position:relative;overflow:hidden}.media-real{background:#f6f6f2}.media-real img{object-fit:contain;width:100%;height:100%;display:block}.real-media-link{width:100%;height:100%;color:inherit;text-decoration:none;display:block;position:relative}.real-media-link span,.media-resource-link strong{color:var(--project-accent);background:#ffffffdb;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:520;position:absolute;bottom:14px;right:14px}.media-resource-link{min-height:260px;color:var(--project-accent);place-items:center;text-decoration:none;display:grid}.media-resource-link span{text-align:center;max-width:420px;padding:0 24px;font-size:clamp(22px,3vw,36px);line-height:1.15}.media-mockup:before{content:"";border:1px dotted #50504e29;border-radius:12px;position:absolute;inset:28px}.media-real:before{content:none}.case-hero .media-real{aspect-ratio:var(--media-ratio,1.78)}.mock-browser,.mock-window,.mock-panel,.single-frame,.soft-paper,.soft-star,.poster-stack>div{background:#ffffffdb;border:1px solid #00000012;position:absolute;box-shadow:0 24px 60px #00000014}.mock-browser-large{border-radius:16px;padding:34px 28px 28px;inset:14% 13% 18% 12%}.mock-browser-large>span{background:color-mix(in srgb, var(--project-accent) 50%, white);border-radius:99px;width:8px;height:8px;margin-right:7px;display:inline-block;position:relative}.mock-chart{background:linear-gradient(90deg,#0000 0 12%,#a8323824 12% 16%,#0000 16% 29%,#a8323833 29% 33%,#0000 33%),#f7f6f3;border-radius:12px;height:42%;margin-top:22px}.mock-table,.mock-grid{background:repeating-linear-gradient(#ececea 0 1px,#0000 1px 18px);border-radius:10px;height:24%;margin-top:18px}.mock-panel-a{border-radius:14px;width:21%;height:28%;top:11%;right:7%}.mock-panel-b{border-radius:14px;width:26%;height:22%;bottom:10%;left:7%}.mock-window{border-radius:14px}.mock-window-back{inset:22% 10% 20% 23%;transform:rotate(4deg)}.mock-window-front{grid-template-columns:27% 1fr;gap:20px;padding:28px;display:grid;inset:17% 21% 16% 10%;transform:rotate(-3deg)}.mock-window-front:before,.mock-window-back:before{content:"";background:color-mix(in srgb, var(--project-accent) 52%, white);border-radius:14px 14px 0 0;height:34px;position:absolute;inset:0 0 auto}.mock-sidebar{background:#f0f0ed;border-radius:10px;margin-top:30px}.poster-stack{grid-template-columns:repeat(4,1fr);gap:14px;display:grid;position:absolute;inset:12%}.poster-stack>div{background:radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--project-accent) 22%, white) 0 7px, transparent 8px), repeating-linear-gradient(115deg, transparent 0 18px, color-mix(in srgb, var(--project-accent) 24%, transparent) 19px 20px), #f7f8f5;border-radius:16px;position:relative}.soft-paper-a{border-radius:20px;width:32%;height:28%;top:21%;left:15%;transform:rotate(-9deg)}.soft-paper-b{border-radius:20px;width:28%;height:24%;bottom:18%;right:16%;transform:rotate(7deg)}.soft-star{aspect-ratio:1;background:conic-gradient(from .12turn, transparent 0 12%, color-mix(in srgb, var(--project-accent) 36%, white) 12% 24%, transparent 24% 36%, color-mix(in srgb, var(--project-accent) 42%, white) 36% 48%, transparent 48%), white;border-radius:28px;width:28%;top:34%;left:36%}.soft-ring{aspect-ratio:1;border:1px dotted color-mix(in srgb, var(--project-accent) 42%, transparent);border-radius:50%;width:46%;position:absolute;top:24%;left:26%}.single-frame{border-radius:18px;inset:12%}[data-reveal]{opacity:0;filter:blur(6px);transition:opacity .62s var(--ease-out), filter .62s var(--ease-out), transform .62s var(--ease-out);transform:translateY(24px)}[data-reveal][data-visible=true]{opacity:1;filter:blur();transform:translateY(0)}.page-heading{padding-block:clamp(72px,10vw,152px) 12px}.page-heading h1{font-size:clamp(32px,4vw,48px);font-weight:430;line-height:1.12}.case-study{padding-block:clamp(56px,8vw,128px)}.case-hero{gap:24px;display:grid}.back-link{width:fit-content;color:var(--color-muted);font-size:14px;text-decoration:none}.case-hero .media-mockup{aspect-ratio:1.84}.case-eyebrow{color:var(--color-muted);text-transform:lowercase;font-size:14px}.case-hero h1{max-width:1120px;color:var(--project-accent);font-size:clamp(28px,3vw,42px);font-weight:430;line-height:1.16}.case-proof-list{max-width:900px}.case-shell{grid-template-columns:minmax(190px,230px) minmax(0,1fr);gap:clamp(48px,7vw,96px);margin-top:clamp(80px,10vw,140px);display:grid}.case-sidebar{top:calc(var(--nav-height) + 96px);color:var(--color-muted);align-self:start;font-size:14px;position:sticky}.case-sidebar nav{gap:10px;margin-top:22px;display:grid}.case-sidebar a{text-decoration:none}.case-sidebar a[aria-current=true]{color:var(--color-accent)}.case-sidebar a[aria-current=true]:before{content:"- "}.case-content{max-width:1140px}.case-section{scroll-margin-top:calc(var(--nav-height) + 36px);padding-bottom:clamp(80px,10vw,132px)}.case-section h2{max-width:920px;margin-top:12px;font-size:clamp(24px,2.4vw,32px);font-weight:430;line-height:1.2}.rich-text{color:#656560;max-width:760px;margin-top:28px}.rich-text>*+*{margin-top:18px}.rich-text h3{color:var(--color-text);font-size:20px;font-weight:480}.rich-text blockquote{color:var(--color-text);border-left:1px solid var(--project-accent);margin:30px 0 0;padding-left:22px}.case-cta{border:1px solid color-mix(in srgb, var(--project-accent) 44%, white);min-height:54px;color:var(--project-accent);border-radius:4px;justify-content:center;align-items:center;margin-top:30px;text-decoration:none;transition:background .18s,border-color .18s;display:flex}.case-cta:hover,.case-cta:focus-visible{background:color-mix(in srgb, var(--project-accent) 6%, white);border-color:var(--project-accent)}.case-media-list{gap:28px;margin-top:44px;display:grid}.case-media{background:#fff;border-radius:8px;margin:0;padding:clamp(18px,3vw,32px)}.case-media-dotted-accent{border:1px dotted color-mix(in srgb, var(--project-accent) 42%, transparent)}.case-media-soft-red{background:color-mix(in srgb, var(--project-accent) 7%, white)}.case-media-soft-gray{background:var(--color-soft)}.case-media figcaption{color:var(--color-muted);margin-bottom:18px;font-size:14px}.case-media-items{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px;display:grid}.playground-pack{min-height:900px;padding-block:clamp(110px,14vw,180px) 120px;position:relative;overflow:hidden}.starter-title{z-index:5;text-align:center;place-items:center;min-height:430px;display:grid;position:relative}.starter-title .section-label{position:absolute;top:0;left:0}.starter-title h1{max-width:900px;font-size:clamp(48px,6vw,84px);font-weight:430;line-height:1}.starter-title em{font-family:Cambria,华文中宋,STZhongsong,SimSun,serif;font-weight:400}.speech-bubble{color:#767671;background:#fbfbfac7;border:1px dashed #c8c8c2;border-radius:999px;max-width:230px;padding:12px 16px;font-size:13px;position:absolute;top:64%;left:50%;transform:translate(-50%)}.starter-object{left:var(--x);top:var(--y);z-index:var(--z);width:var(--w);aspect-ratio:1;transform:translate(-50%, -50%) rotate(var(--r));transition:transform .26s var(--ease-out);position:absolute}.starter-object:hover{transform:translate(-50%, calc(-50% - 4px)) rotate(calc(var(--r) + 1deg))}.starter-object span{background:#fff;border:1px solid #00000014;width:100%;height:100%;display:block;box-shadow:0 22px 48px #00000014}.starter-volleyball span{background:linear-gradient(55deg,#0000 45%,#d9d6cf 46% 48%,#0000 49%),linear-gradient(130deg,#0000 45%,#d9d6cf 46% 48%,#0000 49%),#f9f7f1;border-radius:50%}.starter-camera span{aspect-ratio:1.35;background:radial-gradient(circle at 56% 52%,#f4f4f1 0 20%,#3c3c39 21% 34%,#0000 35%),linear-gradient(#3c3c39 0 26%,#fafafa 27%);border-radius:16px;height:auto;margin-top:18%}.starter-handbag span{background:linear-gradient(#d8cfc5 0 28%,#f6f1ea 29%);border-radius:22px 22px 32px 32px}.starter-booklet span,.starter-tablet span{aspect-ratio:.72;background:repeating-linear-gradient(#fff 0 22px,#ecebe6 23px 24px);border-radius:14px;height:auto}.starter-flower span{box-shadow:none;background:radial-gradient(circle,#d8c48d 0 11%,#0000 12%),radial-gradient(circle at 50% 24%,#fff 0 18%,#0000 19%),radial-gradient(circle at 76%,#fff 0 18%,#0000 19%),radial-gradient(circle at 50% 76%,#fff 0 18%,#0000 19%),radial-gradient(circle at 24%,#fff 0 18%,#0000 19%),0 0;border:0;border-radius:50%}.starter-school-pin span,.starter-avatar span{background:radial-gradient(circle at 50% 43%,#fff 0 28%,#0000 29%),#dae7e6;border-radius:50%}.about-summary{padding-block:var(--section-y);border-top:1px solid var(--color-line);grid-template-columns:minmax(240px,.52fr) 1fr;gap:clamp(40px,7vw,104px);display:grid}.about-summary h2{max-width:640px;font-size:clamp(24px,2.5vw,34px);font-weight:430;line-height:1.22}.resume-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:42px clamp(34px,5vw,72px);display:grid}.resume-column h3{color:var(--color-muted);text-transform:lowercase;margin-bottom:20px;font-size:14px;font-weight:420}.resume-column ul{gap:18px;margin:0;padding:0;list-style:none;display:grid}.resume-column li{gap:3px;display:grid}.resume-column small{color:var(--color-muted);font-size:13px}.profile-figure{max-width:240px;margin:28px 0 0}.profile-figure img{aspect-ratio:3/4;object-fit:cover;border:1px solid var(--color-line);border-radius:8px;width:min(180px,46vw);height:auto;display:block}.profile-figure figcaption{color:var(--color-muted);margin-top:10px;font-size:13px}.footer-charm{min-height:460px;margin-top:var(--section-y);padding:34px var(--page-x) 42px;background:var(--color-soft)}.footer-topline{width:min(100%, var(--content-max));color:#747470;justify-content:space-between;gap:24px;margin-inline:auto;font-size:14px;display:flex}.footer-topline nav{flex-wrap:wrap;justify-content:flex-end;gap:18px 28px;display:flex}.footer-topline nav a{align-items:center;min-height:40px;display:inline-flex}.charm{justify-items:center;margin-top:52px;display:grid}.charm span{background:#6f736f;width:1px;height:32px;display:block}.charm img{aspect-ratio:1;object-fit:contain;width:min(220px,54vw);height:auto}.charm-note{color:#858581;text-align:center;margin-top:16px;font-size:13px}@media (width<=1099px){.intro-section,.about-summary,.work-grid,.case-shell{grid-template-columns:1fr}.case-sidebar{top:var(--nav-height);z-index:10;margin-inline:calc(var(--page-x) * -1);padding:12px var(--page-x);border-block:1px solid var(--color-line);backdrop-filter:blur(14px);background:#fbfbfaeb;position:sticky;overflow-x:auto}.case-sidebar>a{display:none}.case-sidebar nav{white-space:nowrap;gap:16px;margin-top:0;display:flex}}@media (width<=767px){.site-nav{font-size:13px}.nav-links{gap:13px}.intro-section{padding-top:76px}.intro-section h1{font-size:32px}.project-copy{padding-top:18px}.case-hero .media-mockup{aspect-ratio:1.22}.case-media-items{grid-template-columns:1fr}.playground-pack{min-height:760px}.starter-title{min-height:330px}.starter-title h1{font-size:42px}.speech-bubble{top:69%}.starter-object{width:var(--wm)}.resume-grid{grid-template-columns:1fr}.footer-topline{flex-direction:column}.footer-topline nav{justify-content:flex-start}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}[data-reveal]{opacity:1;filter:none;transform:none}}