:root { --ink:#111; --muted:#777; --canvas:#f7f7f7; --side:clamp(24px,6vw,110px); --content-max:1200px; --content-left:max(var(--side),calc((100vw - var(--content-max)) / 2)); --nav-inset:28px; --top:84px; --anchor-offset:132px; --polaroid-mask-width:284.809px; --polaroid-mask-height:420px; --polaroid-source-width:311px; --polaroid-source-height:446px; }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; scrollbar-gutter:stable; }
    body { margin:0; background:var(--canvas); color:var(--ink); font-family:"PingFang SC","PingFang SC Regular",-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif; line-height:1.55; }
    button,a { color:inherit; font:inherit; }
    .site-nav { position:fixed; z-index:30; top:var(--nav-inset); left:0; width:100%; display:flex; justify-content:center; pointer-events:none; }
    .site-nav nav { position:absolute; left:50%; display:flex; height:50px; align-items:center; gap:0; padding:6px; border-radius:999px; background:#eee; pointer-events:auto; transform:translateX(-50%); transition:left .18s cubic-bezier(.2,.9,.2,1), transform .18s cubic-bezier(.2,.9,.2,1), padding .18s cubic-bezier(.2,.9,.2,1), gap .16s ease; }
    .site-nav a { max-width:220px; padding:8px 24px; border-radius:999px; color:rgba(0,0,0,.7); text-decoration:none; font-size:16px; font-weight:600; line-height:normal; letter-spacing:0; overflow:hidden; transition:max-width .16s ease, padding .16s ease, opacity .12s ease, background .18s ease, color .18s ease; white-space:nowrap; }
    .site-nav a.active { background:#1d1d1f; color:#fff; }
    .detail-nav-label { display:block; max-width:0; overflow:hidden; opacity:0; color:var(--muted); font-size:16px; font-weight:600; letter-spacing:0; line-height:1.4; white-space:nowrap; transition:max-width .16s ease, opacity .12s ease .04s; }
    .case-nav { position:absolute; left:50%; display:flex; width:min(calc(100% - var(--side) - var(--side)),var(--content-max)); align-items:center; justify-content:flex-end; opacity:0; visibility:hidden; transform:translate(-50%,-4px); pointer-events:none; transition:opacity .14s ease, transform .14s ease, visibility 0s linear .14s; }
    .case-close { position:relative; display:grid; width:53px; height:53px; place-items:center; border:0; border-radius:50%; background:#eee; color:var(--muted); font-size:0; line-height:1; cursor:pointer; }
    .case-close::before,.case-close::after { content:""; position:absolute; width:18px; height:2.5px; border-radius:2px; background:currentColor; }
    .case-close::before { transform:rotate(45deg); }
    .case-close::after { transform:rotate(-45deg); }
    body.case-mode .site-nav nav { left:var(--nav-inset); gap:0; padding:0 28px; transform:translateX(0); }
    body.case-mode .site-nav a { max-width:0; padding:0; opacity:0; pointer-events:none; }
    body.case-mode .detail-nav-label { max-width:600px; opacity:1; }
    body.case-mode .case-nav { left:auto; right:var(--nav-inset); width:auto; opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; transition-delay:.06s; }
    .home { overflow:hidden; }
    .home-section { position:relative; scroll-margin-top:var(--anchor-offset); margin-top:160px; padding:0 var(--side); }
    #work { margin-top:120px; }
    #about { min-height:100svh; margin-top:0; padding:calc(var(--top) + clamp(72px,12vw,170px)) var(--side) calc(var(--top) + clamp(72px,12vw,170px)); display:flex; flex-direction:column; justify-content:center; position:relative; }
    .about-layout { display:grid; grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr); gap:clamp(34px,6vw,96px); align-items:center; width:100%; max-width:var(--content-max); margin:auto; }
    .portrait { position:relative; width:var(--polaroid-mask-width); height:var(--polaroid-mask-height); min-width:var(--polaroid-mask-width); min-height:var(--polaroid-mask-height); overflow:visible; }
    .portrait img { position:absolute; top:0; left:0; display:block; width:var(--polaroid-source-width); height:var(--polaroid-source-height); max-height:none; object-fit:contain; transform:none; }
    .about-copy { font-size:clamp(24px,2.7vw,40px); line-height:normal; letter-spacing:-.04em; font-weight:440; max-width:790px; }
    .about-copy strong { white-space:nowrap; }
    .about-name-link { color:inherit; text-decoration:none; cursor:pointer; }
    .about-name-link__text { display:inline-block; text-decoration-line:underline; text-decoration-style:solid; text-decoration-skip-ink:none; text-underline-position:from-font; transition:opacity .14s ease; }
    .about-name-link:hover .about-name-link__text,.about-name-link:focus-visible .about-name-link__text { opacity:.62; }
    .about-name-link__arrow { display:inline-block; margin-left:.08em; font-family:"SF Pro Display",-apple-system,sans-serif; font-size:40px; font-weight:400; line-height:normal; text-decoration:none; vertical-align:baseline; }
    .sf-symbol { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; width:1em; height:1em; line-height:1; }
    .sf-symbol img { display:block; width:100%; height:100%; object-fit:contain; }
    .section-intro { width:100%; max-width:var(--content-max); margin:0 auto 60px; font-size:clamp(24px,2.7vw,40px); line-height:1.34; letter-spacing:-.04em; font-weight:440; }
    .project { display:grid; width:100%; max-width:var(--content-max); margin:0 auto; grid-template-columns:300px minmax(0,1fr); gap:30px; align-items:start; padding:42px; border-radius:24px; background:#fff; text-decoration:none; cursor:pointer; }
    .project + .project { margin-top:28px; }
    .project-copy h2,.practice h3 { margin:0; font-size:32px; font-weight:700; line-height:1.15; letter-spacing:-.04em; }
    .meta,.practice time { display:block; margin-top:10px; color:var(--muted); font-size:20px; font-weight:500; line-height:1.35; letter-spacing:-.01em; }
    .meta .tags { margin-left:0; }
    .project-copy p,.practice p { margin:30px 0 0; width:300px; max-width:100%; font-size:20px; font-weight:440; letter-spacing:-.025em; line-height:1.5; }
    .blue { --placeholder:#c8d4e5; --placeholder-ink:#9eafc3; } .orange { --placeholder:#edd2bd; --placeholder-ink:#c8a995; }
    .case-placeholder { background:var(--placeholder); color:var(--placeholder-ink); }
    .project .flow-cover,.project .cover-media { border-radius:8px; }
    .practice-rail { display:flex; width:100vw; max-width:none; margin-left:calc(-1 * var(--side)); padding:0 var(--content-left); gap:30px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
    .practice-rail::-webkit-scrollbar { display:none; }
    .practice { display:flex; flex:0 0 585px; flex-direction:column; gap:0; min-width:0; padding:0; background:transparent; scroll-snap-align:start; }
    .practice .cover-media { order:-1; }
    .practice .cover-media { margin-bottom:28px; }
    .practice p { width:auto; margin:0; }
    .practice-controls { display:flex; width:100%; max-width:var(--content-max); margin:40px auto 0; gap:12px; }
    .practice-control { display:grid; width:40px; height:40px; place-items:center; border:0; border-radius:50%; background:#ebebeb; color:rgba(0,0,0,.7); font-size:16px; line-height:1; cursor:pointer; transition:opacity .14s ease; }
    .practice-control .sf-symbol { width:11px; height:15px; }
    .practice-control .sf-symbol img { opacity:.7; }
    .practice-control .sf-symbol--flipped { transform:scaleX(-1); }
    .practice-control:hover:not(:disabled) { opacity:.7; }
    .practice-control:active:not(:disabled) { opacity:.5; }
    .practice-control:disabled { opacity:.3; cursor:default; }
    .contact-grid { width:100%; max-width:var(--content-max); margin:auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; align-items:start; }
    .contact-item { width:100%; min-width:0; min-height:0; aspect-ratio:1 / 1; align-self:start; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:10px; padding:36px 24px; border-radius:24px; background:#fff; color:var(--ink); text-align:center; }
    .contact-item strong { font-size:36px; line-height:1.15; letter-spacing:-.04em; }
    .contact-item span { font-size:24px; line-height:1.5; letter-spacing:-.025em; white-space:nowrap; }
    .contact-item strong,.contact-action { white-space:nowrap; }
    .contact-action { border:0; padding:0; background:none; color:#0068d3; font-family:inherit; font-size:20px; font-weight:500; line-height:1.3; cursor:pointer; text-decoration:none; transition:opacity .12s ease; }
    .contact-action:hover { text-decoration:underline; text-underline-offset:3px; }
    .contact-action:active { opacity:.68; }
    .contact-action.is-copied,.contact-action.is-copy-failed { opacity:.68; }
    .copy-toast { position:fixed; z-index:50; bottom:28px; left:50%; padding:10px 16px; border-radius:999px; background:rgba(29,29,31,.92); color:#fff; font-size:14px; font-weight:600; line-height:1; opacity:0; pointer-events:none; transform:translate(-50%,12px); transition:opacity .18s ease,transform .18s ease; }
    .copy-toast.is-visible { opacity:1; transform:translate(-50%,0); }
    .qr-media { width:min(100%,134px); aspect-ratio:1; background:#fff; }
    .qr-media img { display:block; width:100%; height:100%; object-fit:contain; }
    #contact { padding-bottom:240px; }
    /* 两个层级各自保存滚动位置；保留根页面稳定槽位以避免切换时横向跳动。 */
    body.case-mode { overflow:hidden; }
    .case-page { position:fixed; top:0; left:0; z-index:20; width:100vw; height:100vh; height:100dvh; overflow-x:hidden; overflow-y:scroll; overscroll-behavior:contain; background:#fff; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .28s ease, visibility 0s linear .28s; }
    .case-page.current { opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
    .case-layout { display:grid; width:min(calc(100% - var(--side) - var(--side)),var(--content-max)); margin:0 auto; grid-template-columns:220px 40px 680px minmax(0,1fr); gap:0; padding:calc(var(--top) + 42px) 0 96px; }
    .case-content { grid-column:3 / -1; min-width:0; }
    .case-hero { width:680px; max-width:100%; margin:0; padding:0 0 30px; }
    .case-hero .embedded-media { position:relative; left:340px; width:min(960px,calc(100vw - var(--side) - var(--side))); max-width:none; margin:32px 0 0; transform:translateX(-50%); }
    #flow-case .case-hero { display:block; padding-bottom:34px; }
    #flow-case .case-article { padding-top:0; }
    .case-hero h1 { display:block; margin:0; font-size:56px; font-weight:600; line-height:1.18; letter-spacing:0; }
    .case-hero .meta { margin-top:10px; font-size:14px; font-weight:400; line-height:1.5; letter-spacing:0; }
    .case-sidebar { position:sticky; top:106px; align-self:start; margin-top:var(--case-sidebar-offset,0); padding-top:4px; color:#8c8c91; opacity:1; transform:translateX(var(--case-sidebar-shift,0)); transition:opacity .06s linear,transform .12s ease; }
    .case-sidebar.is-obscured { opacity:0; pointer-events:none; }
    .case-sidebar-title { margin:0 0 16px; font-size:12px; font-weight:600; line-height:1.4; letter-spacing:0; white-space:nowrap; color:#1d1d1f; }
    .case-toc { display:flex; flex-direction:column; align-items:flex-start; gap:11px; }
    .case-toc a { display:block; width:max-content; max-width:none; color:#8c8c91; font-size:12px; font-weight:400; line-height:1.4; letter-spacing:0; text-decoration:none; white-space:nowrap; transition:color .16s ease; }
    .case-toc a.active { color:#1d1d1f; }
    .case-article { --placeholder:#eee; --placeholder-ink:#b8b8b8; width:100%; margin:0 auto; padding:0; }
    .case-article h2,.case-article h3,.case-article p,.case-article ul,.case-article ol { width:100%; max-width:680px; margin-left:0; margin-right:auto; }
    .case-article h2 { margin-top:64px; margin-bottom:20px; scroll-margin-top:calc(var(--top) + 48px); font-size:22px; font-weight:600; line-height:1.32; letter-spacing:0; }
    .case-article h2:first-child { margin-top:0; }
    .case-article h3 { margin-top:48px; margin-bottom:16px; font-size:18px; font-weight:600; line-height:1.4; letter-spacing:0; }
    .case-article p { margin-top:0; margin-bottom:22px; font-size:16px; font-weight:400; letter-spacing:0; line-height:1.72; }
    .case-article p strong { font-weight:600; }
    .case-article ul,.case-article ol { margin-top:0; margin-bottom:24px; padding-left:0; font-size:16px; font-weight:400; line-height:1.72; list-style:none; }
    .case-article li { position:relative; margin:0 0 12px; padding-left:24px; }
    .case-article li::before { position:absolute; left:0; color:#8c8c91; font-weight:600; }
    .case-article ul li::before { content:"•"; top:0; }
    .case-article ol { counter-reset:item; }
    .case-article ol li { counter-increment:item; }
    .case-article ol li::before { content:counter(item) "."; top:0; font-size:.92em; }
    .case-article code { font-family:ui-monospace,monospace; font-size:.84em; }
    .case-placeholder,.case-article > .embedded-media { position:relative; left:340px; width:min(960px,calc(100vw - var(--side) - var(--side))); max-width:none; margin:44px 0; transform:translateX(-50%); }
    .case-placeholder { aspect-ratio:16 / 9; min-height:0; padding:24px; border-radius:24px; display:flex; flex-direction:column; justify-content:end; gap:10px; }
    .case-placeholder span { font-size:22px; font-weight:600; letter-spacing:0; }
    .case-placeholder small { max-width:70%; font-size:14px; line-height:1.55; letter-spacing:0; }
    .embedded-media { overflow:hidden; border-radius:24px; background:#fff; }
    .embedded-media img,.embedded-media iframe,.embedded-media video { display:block; width:100%; border:0; }
    .embedded-media iframe { height:600px; }
    .embedded-media--m01 iframe,.embedded-media--m01 video { height:auto; aspect-ratio:5 / 3; object-fit:cover; }
    .flow-cover { aspect-ratio:5 / 3; padding:0; overflow:hidden; border-radius:24px; background:#fff; }
    .flow-cover iframe,.flow-cover video { width:100%; height:100%; border:0; display:block; object-fit:cover; pointer-events:none; }
    .cover-media { aspect-ratio:5 / 3; overflow:hidden; border-radius:24px; background:#fff; }
    .cover-media img { display:block; width:100%; height:100%; object-fit:cover; }
    @media (max-width:1040px) { .contact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
    @media (max-width:1080px) { .project { grid-template-columns:1fr; } .project-copy p,.practice p { max-width:640px; } .case-layout { grid-template-columns:1fr; gap:0; } .case-sidebar { display:none; } .case-content { grid-column:auto; width:100%; } .case-hero { margin-left:auto; margin-right:auto; } .case-article h2,.case-article h3,.case-article p,.case-article ul,.case-article ol { margin-left:auto; margin-right:auto; } .case-hero .embedded-media,.case-placeholder,.case-article > .embedded-media { position:static; width:min(960px,100%); max-width:960px; margin-left:auto; margin-right:auto; transform:none; } }
    @media (max-width:720px) { :root { --top:68px; --anchor-offset:104px; --side:24px; --nav-inset:14px; } .site-nav nav { height:46px; max-width:calc(100vw - 32px); overflow-x:auto; } .site-nav a { padding:10px 14px; font-size:12px; } .detail-nav-label { font-size:12px; } body.case-mode .site-nav nav { padding:0 18px; } body.case-mode .detail-nav-label { max-width:calc(100vw - 120px); } .case-nav { width:calc(100% - 48px); } .case-close { width:46px; height:46px; } #about { min-height:100svh; } .about-layout,.contact-grid { grid-template-columns:1fr; } .portrait { min-height:220px; max-width:360px; } .about-copy,.section-intro { font-size:27px; } .project { gap:26px; padding:28px; } .project + .project { margin-top:24px; } .project-copy h2,.practice h3,.contact-item strong { font-size:30px; } .meta,.practice time,.project-copy p,.practice p,.contact-item span { font-size:20px; } .meta .tags { display:inline; margin:0; } .practice-rail { gap:18px; } .practice { flex-basis:86vw; } .practice .cover-media { margin-bottom:30px; } .practice-controls { margin-top:60px; } #contact { padding-bottom:240px; } .case-layout { width:min(calc(100% - var(--side) - var(--side)),var(--content-max)); padding:calc(var(--top) + 34px) 0 72px; } .case-hero h1 { font-size:32px; } .case-article h2 { margin-top:52px; font-size:21px; } .case-article h3 { font-size:18px; } .case-article p,.case-article ul,.case-article ol { font-size:16px; line-height:1.7; } .case-placeholder small { max-width:100%; } }
    /* 流动界面框架详情页：以 Figma 画板 805:11770 为桌面基准。 */
    body.flow-case-active .site-nav { top:28px; }
    body.flow-case-active .site-nav nav { left:28px; height:50px; padding:0 30px; background:#ebebeb; }
    body.flow-case-active .detail-nav-label { color:rgba(0,0,0,.7); font-weight:600; }
    body.flow-case-active .case-nav { right:28px; }
    body.flow-case-active .case-close { width:50px; height:50px; background:#ebebeb; color:rgba(0,0,0,.7); }
    #flow-case { --flow-text:680px; --flow-media:1200px; --flow-blue:#b7cbfc; }
    #flow-case .case-layout { display:grid; width:100%; max-width:none; margin:0; grid-template-columns:58px 240px minmax(0,1fr); padding:80px 0 120px; }
    #flow-case .case-sidebar { grid-column:2; grid-row:1; top:120px; z-index:4; width:240px; padding:0; color:#000; }
    #flow-case .case-sidebar-title { display:none; }
    #flow-case .case-toc { gap:14px; }
    #flow-case .case-toc a { color:rgba(0,0,0,.5); font-size:12px; font-weight:400; line-height:1.25; }
    #flow-case .case-toc a.active { color:#000; font-weight:600; }
    #flow-case .case-content { grid-column:1 / -1; grid-row:1; width:100%; }
    #flow-case .case-hero { width:100%; max-width:none; margin:0; padding:0; }
    #flow-case .flow-hero-copy { width:min(var(--flow-text),calc(100vw - 48px)); margin:0 auto; text-align:center; }
    #flow-case .case-hero h1 { margin:14px 0 0; font-size:56px; font-weight:600; line-height:1.18; letter-spacing:0; }
    #flow-case .case-hero .meta { margin:0; color:rgba(0,0,0,.5); font-size:16px; font-weight:600; line-height:1.4; }
    #flow-case .flow-hero-deck { width:min(var(--flow-media),calc(100vw - 48px)); margin:14px 0 0 50%; color:#000; font-size:24px; font-weight:500; line-height:1.4; transform:translateX(-50%); }
    #flow-case .case-hero .embedded-media { position:static; width:min(var(--flow-media),calc(100vw - 48px)); margin:64px auto 0; transform:none; }
    #flow-case .embedded-media--m01 { aspect-ratio:5 / 3; border-radius:12px; }
    #flow-case .embedded-media--m01 video { width:100%; height:100%; object-fit:cover; }
    #flow-case .flow-overview { display:flex; width:min(var(--flow-text),calc(100vw - 48px)); margin:64px auto 0; flex-direction:column; gap:28px; }
    #flow-case .flow-overview p { width:100%; margin:0; font-size:20px; font-weight:400; line-height:28px; letter-spacing:0; }
    #flow-case .flow-overview ul { width:100%; margin:0; padding-left:30px; font-size:20px; font-weight:400; line-height:28px; letter-spacing:0; list-style:disc; }
    #flow-case .flow-overview li { margin:0; padding-left:0; }
    #flow-case .case-article { width:100%; margin:0; padding:0; font-family:"PingFang SC","PingFang SC Regular",-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif; font-synthesis:none; }
    #flow-case .case-article h2,#flow-case .case-article p,#flow-case .case-article ul,#flow-case .case-article ol { width:min(var(--flow-text),calc(100vw - 48px)); max-width:none; margin-left:auto; margin-right:auto; }
    #flow-case .case-article h2 { margin-top:64px; margin-bottom:24px; scroll-margin-top:120px; font-size:32px; font-weight:600; line-height:1.4; letter-spacing:0; }
    #flow-case .case-article h3 { width:min(var(--flow-text),calc(100vw - 48px)); margin:0 auto 24px; font-size:24px; font-weight:600; line-height:1.4; letter-spacing:0; }
    #flow-case .case-article p { margin-top:0; margin-bottom:24px; font-size:20px; font-weight:400; line-height:28px; letter-spacing:0; }
    #flow-case .case-article p strong,#flow-case .case-article li strong { font-weight:600; }
    #flow-case .case-article ul,#flow-case .case-article ol { margin-top:0; margin-bottom:24px; padding-left:30px; font-size:20px; font-weight:400; line-height:28px; letter-spacing:0; list-style:disc; }
    #flow-case .case-article ol { list-style:decimal; }
    #flow-case .case-article li { margin:0; padding-left:0; }
    #flow-case .case-article li::before { display:none; }
    #flow-case .case-article > .embedded-media,#flow-case .case-placeholder { position:static; width:min(var(--flow-text),calc(100vw - 48px)); max-width:none; margin:0 auto 24px; transform:none; }
    #flow-case .case-placeholder { aspect-ratio:16 / 9; padding:0; border-radius:24px; background:var(--flow-blue); }
    #flow-case .case-article > .wide-media { width:min(var(--flow-media),calc(100vw - 48px)); }
    #flow-case .case-article > .asset-media { border-radius:12px; background:transparent; }
    #flow-case .case-article > .asset-media img,#flow-case .case-article > .asset-media video { width:100%; height:100%; object-fit:cover; }
    #flow-case .media-1 { aspect-ratio:16 / 9; overflow:hidden; }
    #flow-case .media-1 > video { display:block; width:100%; height:100%; object-fit:cover; }
    #flow-case .media-2,#flow-case .media-3,#flow-case .media-4,#flow-case .media-6,#flow-case .media-8,#flow-case .media-9,#flow-case .media-11 { aspect-ratio:16 / 9; }
    #flow-case .media-10 { aspect-ratio:3840 / 1198; }
    #flow-case .case-article > .media-10 { border-radius:0; }
    #flow-case .media-list-patterns { aspect-ratio:1920 / 564; }
    #flow-case .interactive-demo { aspect-ratio:1184 / 851; overflow:hidden; border-radius:12px; background:transparent; }
    #flow-case .interactive-demo iframe { width:100%; height:100%; border:0; }
    #flow-case .case-article .asset-caption { width:min(var(--flow-text),calc(100vw - 48px)); margin:-12px auto 24px; color:rgba(0,0,0,.7); font-size:12px; font-weight:600; line-height:1.4; }
    #flow-case .flow-media-stack { display:flex; width:min(var(--flow-text),calc(100vw - 48px)); margin:0 auto 24px; flex-direction:column; gap:12px; }
    #flow-case .flow-media-stack .embedded-media { width:100%; margin:0; }
    #flow-case .flow-media-stack .asset-media { aspect-ratio:16 / 9; overflow:hidden; border-radius:12px; }
    #flow-case .flow-media-stack .asset-media img { width:100%; height:100%; object-fit:cover; }
    #flow-case .flow-media-stack .asset-caption { width:100%; margin:0; }

    @media (max-width:720px) {
      body.flow-case-active .site-nav { top:14px; }
      body.flow-case-active .site-nav nav { left:14px; height:46px; padding:0 18px; }
      body.flow-case-active .case-nav { right:14px; }
      #flow-case .case-layout { padding:92px 0 72px; }
      #flow-case .case-hero h1 { font-size:42px; }
      #flow-case .case-hero .meta { font-size:16px; }
      #flow-case .flow-hero-deck { margin-top:18px; font-size:20px; }
      #flow-case .case-hero .embedded-media,#flow-case .flow-overview { margin-top:40px; }
      #flow-case .embedded-media--m01,#flow-case .case-placeholder { border-radius:16px; }
      #flow-case .case-article h2 { margin-top:52px; font-size:24px; }
      #flow-case .flow-overview p,#flow-case .flow-overview ul,#flow-case .case-article p,#flow-case .case-article ul,#flow-case .case-article ol { font-size:18px; line-height:28px; }
    }

    /* 首页：以 Figma 画板 4:34 的 1920px 桌面布局为基准。 */
    .section-heading-group { display:flex; width:100%; max-width:var(--content-max); margin:0 auto 40px; flex-direction:column; gap:12px; }
    .section-kicker { margin:0; color:#111; font-size:24px; font-weight:600; line-height:normal; letter-spacing:0; }
    .section-heading-group .section-intro { max-width:none; margin:0; font-size:40px; font-weight:600; line-height:normal; letter-spacing:0; }
    .section-summary { width:100%; max-width:var(--content-max); margin:0; color:rgba(0,0,0,.7); font-size:24px; font-weight:500; line-height:normal; letter-spacing:0; }
    #work .project { grid-template-columns:minmax(0,750px) 330px; gap:40px; align-items:center; padding:40px; border-radius:24px; }
    #work .project-copy { order:2; align-self:stretch; display:flex; min-height:0; flex-direction:column; justify-content:space-between; gap:28px; padding:24px 0; }
    #work .project-copy .meta { order:-1; margin:0; color:rgba(0,0,0,.7); font-size:20px; font-weight:600; line-height:normal; }
    #work .project-copy h2 { margin:0; font-size:36px; font-weight:600; line-height:normal; letter-spacing:0; }
    #work .project-copy p { width:auto; margin:28px 0 0; color:#111; font-size:20px; font-weight:400; line-height:normal; letter-spacing:0; }
    #work .project-period { margin:0; color:rgba(0,0,0,.7); font-size:20px; font-weight:600; line-height:normal; letter-spacing:0; }
    #work .project .flow-cover,#work .project .cover-media { order:1; width:100%; aspect-ratio:5 / 3; border-radius:8px; }
    #practice .practice-rail { gap:28px; }
    #practice .practice { flex-basis:586px; }
    #practice .cover-media { position:relative; aspect-ratio:586 / 350; margin-bottom:28px; border-radius:24px; }
    #practice .practice:first-child .cover-media::after { content:""; position:absolute; z-index:1; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); pointer-events:none; }
    .practice .practice-summary { width:100%; margin:0; font-size:20px; font-weight:600; line-height:normal; letter-spacing:0; }
    .practice-summary span { color:rgba(0,0,0,.7); }
    .contact-grid { gap:28px; }
    .contact-item { container-type:inline-size; padding:40px 24px; }
    .contact-item strong { display:inline-flex; align-items:center; gap:10px; font-size:32px; font-weight:600; line-height:normal; letter-spacing:0; }
    .wechat-icon { display:block; width:32px; height:32px; border-radius:6px; object-fit:cover; }
    .contact-item span { font-size:24px; font-weight:500; line-height:normal; letter-spacing:0; }
    .contact-action { display:inline-flex; align-items:center; gap:4px; font-size:24px; font-weight:500; line-height:normal; }
    .contact-action .sf-symbol { width:24px; height:24px; }
    /* 响应式基准：内容容器连续收缩；只有组件的最小可读宽度不足时才改变结构。 */
    .site-nav nav { max-width:calc(100vw - 32px); overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
    .site-nav nav::-webkit-scrollbar { display:none; }
    .about-copy { font-size:clamp(28px,4.45vw,40px); }
    .section-kicker { font-size:clamp(20px,2.67vw,24px); }
    .section-heading-group .section-intro { font-size:clamp(28px,4.45vw,40px); }
    .section-summary { font-size:clamp(18px,2.67vw,24px); }
    #work .project { grid-template-columns:minmax(0,2.273fr) minmax(280px,1fr); }
    #work .project-copy h2 { font-size:clamp(28px,4vw,36px); }
    #work .project-copy .meta,#work .project-copy p,#work .project-period { font-size:clamp(18px,2.23vw,20px); }
    .contact-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),279px)); gap:28px; justify-content:start; }
    @media (min-width:1081px) {
      #work { margin-top:0; padding-top:0; }
      #practice { margin-top:120px; }
      #contact { margin-top:120px; }
    }
    @media (min-width:721px) and (max-width:1439px) {
      .about-layout { grid-template-columns:minmax(230px,.72fr) minmax(0,1.28fr); gap:clamp(32px,5vw,60px); }
      .portrait { min-height:clamp(320px,34vw,420px); }
      #practice .practice { flex-basis:clamp(380px,45.8vw,586px); }
    }
    @media (max-width:1080px) {
      #work .project { grid-template-columns:1fr; gap:28px; padding:clamp(24px,4vw,40px); }
      #work .project-copy { align-self:auto; justify-content:flex-start; gap:32px; padding:0; }
      #work .project .flow-cover,#work .project .cover-media { order:1; }
      #work .project-copy { order:2; }
    }
    @media (max-width:720px) {
      .site-nav nav { max-width:calc(100vw - 28px); }
      .home-section { margin-top:112px; }
      #work { margin-top:96px; }
      #about { padding-top:calc(var(--top) + 56px); padding-bottom:calc(var(--top) + 72px); }
      .about-layout { gap:36px; }
      .portrait { width:min(100%,300px); min-height:0; margin:0 auto; aspect-ratio:var(--polaroid-mask-width) / var(--polaroid-mask-height); }
      .section-heading-group { margin-bottom:28px; gap:10px; }
      #work .project { gap:24px; padding:24px; }
      #work .project-copy { gap:28px; }
      #practice .practice { flex-basis:min(82vw,420px); }
      .practice-controls { margin-top:32px; }
      .contact-grid { grid-template-columns:1fr; justify-items:center; }
      .contact-item { width:min(100%,360px); }
      #practice,#contact { margin-top:112px; }
    }
    /* 固定的 1200px 首屏仅用于留白充足的宽屏；中等宽度回到可收缩栅格，避免右侧简介被裁切。 */
    @media (min-width:1440px) {
      #about { min-height:1080px; padding:0 var(--side); }
      .about-layout { grid-template-columns:var(--polaroid-mask-width) minmax(0,1fr); gap:64px; transform:translateY(36px); }
      .portrait { width:var(--polaroid-mask-width); height:var(--polaroid-mask-height); min-height:0; aspect-ratio:auto; }
      .about-copy { width:auto; max-width:none; font-size:40px; font-weight:600; line-height:normal; letter-spacing:0; }
    }

    /* 首页响应式：首屏以实际视窗居中；组件只在可读空间不足时切换结构。 */
    #about { min-height:100svh; padding:calc(var(--top) + 24px) var(--side); }
    .about-layout { transform:none; }
    .about-name-link__arrow { font-size:1em; }
    #work .project-copy { gap:28px; }
    /* 三张信息卡的中间信息落在卡片垂直中轴；微信卡按 Figma 的固定间距排列。 */
    .contact-card-footer { display:contents; }
    .contact-item:last-child { justify-content:flex-start; gap:28px; }
    .contact-item:last-child .qr-media { width:134px; height:134px; }
    .section-heading-group .section-intro { font-size:40px; }
    @media (min-width:901px) {
      .about-layout { grid-template-columns:var(--polaroid-source-width) minmax(0,1fr); gap:64px; }
      .portrait { width:var(--polaroid-source-width); height:var(--polaroid-source-height); min-width:var(--polaroid-source-width); min-height:var(--polaroid-source-height); }
    }
    .site-nav nav { width:max-content; max-width:calc(100vw - 32px); overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    .site-nav a { flex:0 0 auto; }
    .site-nav nav::-webkit-scrollbar { display:none; }
    .contact-grid { grid-template-columns:repeat(4,minmax(0,1fr)); justify-content:stretch; }
    #practice .practice-rail { padding-right:var(--content-left); scroll-padding-inline:var(--content-left); }
    #practice .practice { flex-basis:calc(50vw - var(--content-left) - 14px); }
    @media (max-width:1040px) {
      .contact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .contact-item { min-height:250px; aspect-ratio:1.5 / 1; }
    }
    @media (min-width:721px) and (max-width:840px) {
      .contact-item { min-height:0; aspect-ratio:1 / 1; }
    }
    @media (max-width:1080px) {
      #work .project-copy p { width:100%; max-width:none; }
    }
    @media (min-width:1200px) {
      .about-layout { grid-template-columns:var(--polaroid-source-width) minmax(0,1fr); gap:64px; }
    }
    @media (min-width:721px) and (max-width:900px) {
      .about-layout { grid-template-columns:1fr; gap:40px; }
      .portrait { width:var(--polaroid-source-width); height:auto; min-width:0; min-height:0; margin:0 auto; }
      .portrait img { position:static; width:100%; height:auto; }
      .about-copy { max-width:none; font-size:40px; }
    }
    @media (min-width:600px) and (max-width:720px) { .about-copy { font-size:40px; } }
    @media (max-width:720px) {
      #about { padding:calc(var(--top) + 24px) var(--side) 72px; }
      .site-nav nav { justify-content:flex-start; max-width:calc(100vw - 28px); }
      .about-layout { grid-template-columns:1fr; }
      .portrait { width:min(100%,300px); height:auto; min-width:0; min-height:0; margin:0 auto; }
      .portrait img { position:static; display:block; width:100%; height:auto; }
      .about-copy { font-size:clamp(27px,6.67vw,40px); }
      .section-heading-group .section-intro { font-size:clamp(27px,6.67vw,40px); }
      #practice .practice { flex-basis:calc(100vw - var(--side) - var(--side)); }
      .contact-grid { grid-template-columns:1fr; justify-items:stretch; }
      .contact-item { width:100%; max-width:none; min-height:220px; aspect-ratio:auto; }
      #work .project-copy p { width:100%; max-width:none; }
    }
    /* 联系方式：默认保留原始内容规格，仅在真正不足的窄屏收缩。 */
    .contact-item { padding:40px 24px; }
    .contact-item strong { gap:10px; font-size:32px; }
    .contact-item span,.contact-action { font-size:24px; }
    .contact-action .sf-symbol,.wechat-icon { width:32px; height:32px; }
    .qr-media { width:min(134px,calc(100cqw - 112px)); }
    @media (max-width:420px) {
      .contact-item { min-height:200px; padding:24px 18px; }
      .contact-item strong { gap:8px; font-size:28px; }
      .contact-item span,.contact-action { font-size:20px; }
      .contact-action .sf-symbol,.wechat-icon { width:24px; height:24px; }
      .qr-media { width:min(118px,calc(100cqw - 88px)); }
      .contact-card-footer { min-height:84px; }
      .contact-item:last-child .qr-media { width:84px; height:84px; }
    }
    /* 联系方式以 279 × 279 为基准画布：窄屏时整组内容同比缩放，不卡断原有间距。 */
    .contact-item {
      position:relative;
      display:block;
      min-height:0;
      aspect-ratio:1 / 1;
      padding:0;
      overflow:hidden;
      container-type:normal;
    }
    .contact-card-content {
      position:absolute;
      top:var(--contact-content-offset,0px);
      left:var(--contact-content-offset,0px);
      display:flex;
      width:279px;
      height:279px;
      box-sizing:border-box;
      flex-direction:column;
      align-items:center;
      justify-content:space-between;
      padding:40px 24px;
      text-align:center;
      transform:scale(var(--contact-scale,1));
      transform-origin:top left;
    }
    .contact-card-content strong { display:inline-flex; align-items:center; gap:10px; font-size:32px; font-weight:600; line-height:normal; letter-spacing:0; white-space:nowrap; }
    .contact-card-content span { font-size:24px; font-weight:500; line-height:normal; letter-spacing:0; white-space:nowrap; }
    .contact-card-content .contact-card-footer { display:contents; }
    .contact-card-content .contact-action { display:inline-flex; align-items:center; gap:4px; font-size:24px; font-weight:500; line-height:normal; }
    .contact-card-content .contact-action .sf-symbol,.contact-card-content .wechat-icon { width:32px; height:32px; }
    .contact-item:last-child .contact-card-content { justify-content:flex-start; gap:28px; }
    .contact-item:last-child .contact-card-content .qr-media { width:134px; height:134px; flex:none; }
    @media (max-width:1040px) { .contact-item { min-height:0; aspect-ratio:1 / 1; } }
    @media (max-width:720px) { .contact-item { width:100%; max-width:none; min-height:0; aspect-ratio:1 / 1; } }

    /* 其余案例与流动界面框架共用同一篇长文阅读框架。 */
    body.case-mode .site-nav { top:28px; }
    body.case-mode .site-nav nav { left:28px; height:50px; padding:0 30px; background:#ebebeb; }
    body.case-mode .detail-nav-label { color:rgba(0,0,0,.7); font-weight:600; }
    body.case-mode .case-nav { right:28px; }
    body.case-mode .case-close { width:50px; height:50px; background:#ebebeb; color:rgba(0,0,0,.7); }
    .refined-case { --case-text:680px; --case-media:1200px; }
    .refined-case .case-layout { display:grid; width:100%; max-width:none; margin:0; grid-template-columns:58px 240px minmax(0,1fr); padding:80px 0 120px; }
    .refined-case .case-sidebar { grid-column:2; grid-row:1; top:120px; z-index:4; width:240px; margin-top:var(--case-sidebar-offset,0); padding:0; color:#000; }
    .refined-case .case-sidebar-title { display:none; }
    .refined-case .case-toc { gap:14px; }
    .refined-case .case-toc a { color:rgba(0,0,0,.5); font-size:12px; font-weight:400; line-height:1.25; }
    .refined-case .case-toc a.active { color:#000; font-weight:600; }
    .refined-case .case-content { grid-column:1 / -1; grid-row:1; width:100%; }
    .refined-case .case-hero { width:100%; max-width:none; margin:0; padding:0; }
    .refined-case .case-hero-copy { width:min(var(--case-text),calc(100vw - 48px)); margin:0 auto; text-align:center; }
    .refined-case .case-hero h1 { margin:14px 0 0; font-size:56px; font-weight:600; line-height:1.18; letter-spacing:0; }
    .refined-case .case-hero .meta { margin:0; color:rgba(0,0,0,.5); font-size:16px; font-weight:600; line-height:1.4; }
    .refined-case .case-hero-deck { width:min(var(--case-media),calc(100vw - 48px)); margin:14px 0 0 50%; color:#000; font-size:24px; font-weight:500; line-height:1.4; transform:translateX(-50%); }
    .refined-case .case-hero .embedded-media { position:static; width:min(var(--case-media),calc(100vw - 48px)); max-width:none; margin:64px auto 0; transform:none; }
    .refined-case .case-cover-media { aspect-ratio:5 / 3; border-radius:12px; }
    .refined-case .case-cover-media img { width:100%; height:100%; object-fit:cover; }
    .refined-case .case-article { width:100%; margin:64px 0 0; padding:0; font-family:"PingFang SC","PingFang SC Regular",-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif; font-synthesis:none; }
    .refined-case .case-article h2,.refined-case .case-article h3,.refined-case .case-article p,.refined-case .case-article ul,.refined-case .case-article ol { width:min(var(--case-text),calc(100vw - 48px)); max-width:none; margin-left:auto; margin-right:auto; }
    .refined-case .case-article h2 { margin-top:64px; margin-bottom:28px; scroll-margin-top:120px; font-size:28px; font-weight:600; line-height:1.4; letter-spacing:0; }
    .refined-case .case-article h3 { margin-top:48px; margin-bottom:16px; font-size:18px; font-weight:600; line-height:1.4; letter-spacing:0; }
    .refined-case .case-article p { margin-top:0; margin-bottom:28px; font-size:18px; font-weight:400; line-height:28px; letter-spacing:0; }
    .refined-case .case-article p strong,.refined-case .case-article li strong { font-weight:600; }
    .refined-case .case-article ul,.refined-case .case-article ol { margin-top:0; margin-bottom:28px; padding-left:27px; font-size:18px; font-weight:400; line-height:28px; letter-spacing:0; list-style:disc; }
    .refined-case .case-article ol { list-style:decimal; }
    .refined-case .case-article li { margin:0; padding-left:0; }
    .refined-case .case-article li::before { display:none; }
    .refined-case .case-article > .embedded-media,.refined-case .case-placeholder { position:static; width:min(var(--case-text),calc(100vw - 48px)); max-width:none; margin:0 auto 28px; transform:none; }
    .refined-case .case-article > .wide-media { width:min(var(--case-media),calc(100vw - 48px)); }
    .refined-case .case-article > .embedded-media { border-radius:12px; background:transparent; }
    .refined-case .case-article > .embedded-media img { width:100%; height:100%; object-fit:contain; }
    .project[href="#wallpaper-case"] .cover-media { border-radius:12px; }
    #wallpaper-case .case-cover-media,#wallpaper-case .case-article > .embedded-media { border-radius:12px; }
    #wallpaper-case .case-hero-deck { width:min(var(--case-text),calc(100vw - 48px)); }
    #wallpaper-case .case-article h2 { margin-bottom:24px; font-family:"Noto Sans SC","PingFang SC",sans-serif; font-size:32px; line-height:normal; }
    #wallpaper-case .case-article p,#wallpaper-case .case-article ul { margin-bottom:24px; }
    #wallpaper-case .case-article > .embedded-media { margin-bottom:24px; }
    #wallpaper-case .case-facts { font-size:20px; line-height:1.4; }
#wallpaper-case .case-toc a { font-family:"Noto Sans SC","PingFang SC",sans-serif; font-weight:500; }
#wallpaper-case .case-toc a.active { font-weight:500; }
    #lockscreen-case .case-cover-placeholder { position:static; width:min(var(--case-media),calc(100vw - 48px)); aspect-ratio:5 / 3; margin:64px auto 0; overflow:hidden; border-radius:12px; background:#272622; }
    #lockscreen-case .case-cover-placeholder img { display:block; width:100%; height:100%; object-fit:cover; }
    #lockscreen-case .case-placeholder { aspect-ratio:16 / 9; padding:0; overflow:hidden; border-radius:12px; background:#272622; }
    #lockscreen-case .case-placeholder img { display:block; width:100%; height:100%; object-fit:contain; }
    #lockscreen-case .case-placeholder--wide-result { width:min(var(--case-media),calc(100vw - 48px)); }
    /* 关于页：严格对应 Figma 画板 738:8057。 */
    #about-detail { --about-reading-width:680px; font-family:"PingFang SC","PingFang SC Regular",-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif; font-synthesis:none; }
    #about-detail .case-layout { display:block; width:100%; max-width:none; margin:0; padding:80px 0 120px; }
    #about-detail .case-sidebar { display:none; }
    #about-detail .case-content { width:100%; }
    #about-detail .about-root { display:flex; width:min(1200px,calc(100vw - 48px)); margin:0 auto; padding-top:64px; flex-direction:column; align-items:center; gap:64px; }
    #about-detail .about-page-portrait { position:relative; width:var(--polaroid-mask-width); height:var(--polaroid-mask-height); flex:none; overflow:visible; }
    #about-detail .about-page-portrait img { position:absolute; top:0; left:0; display:block; width:var(--polaroid-source-width); height:var(--polaroid-source-height); max-width:none; }
    #about-detail .about-hero { display:flex; width:100%; flex-direction:column; align-items:center; color:#000; text-align:center; }
    #about-detail .about-hero h1 { margin:0; font-size:56px; font-weight:600; line-height:normal; letter-spacing:0; }
    #about-detail .about-hero h1 span { display:block; }
    #about-detail .about-intro { display:flex; width:100%; flex-direction:column; align-items:center; gap:28px; }
    #about-detail .about-hero-deck { width:100%; margin:0; color:rgba(0,0,0,.7); font-size:24px; font-weight:500; line-height:normal; letter-spacing:0; text-align:center; }
    #about-detail .about-hero-deck > .about-intro-line { display:block; }
    #about-detail .about-page-content { display:flex; width:min(var(--about-reading-width),calc(100vw - 48px)); flex-direction:column; gap:64px; }
    #about-detail .about-page-section { width:100%; }
    #about-detail .about-page-heading { display:flex; width:100%; margin:0 0 24px; flex-direction:column; align-items:center; gap:4px; color:#000; text-align:center; }
    #about-detail .about-page-label { width:100%; margin:0; color:rgba(0,0,0,.7); font-size:16px; font-weight:600; line-height:normal; letter-spacing:0; }
    #about-detail .about-page-heading h2 { width:100%; margin:0; font-size:32px; font-weight:600; line-height:normal; letter-spacing:0; }
    #about-detail .about-page-section > p { width:100%; margin:0 0 24px; color:#000; font-size:18px; font-weight:400; line-height:normal; letter-spacing:0; }
    #about-detail .about-page-section > p:last-child { margin-bottom:0; }
    #about-detail .about-photo { display:flex; width:100%; margin:0 0 24px; flex-direction:column; align-items:center; gap:12px; }
    #about-detail .about-photo img { display:block; width:100%; aspect-ratio:16 / 9; border-radius:12px; object-fit:cover; }
    #about-detail .about-photo figcaption { margin:0; color:rgba(0,0,0,.7); font-size:12px; font-weight:600; line-height:normal; letter-spacing:0; text-align:center; }
    #about-detail .career-timeline { display:flex; width:100%; margin:0; padding:0; flex-direction:column; list-style:none; }
    #about-detail .career-divider { display:block; width:100%; height:1px; margin:0 0 23px; transform:translateY(-.5px); }
    #about-detail .career-timeline li { display:flex; width:100%; margin:0 0 24px; padding:0; flex-direction:column; align-items:flex-start; gap:8px; }
    #about-detail .career-timeline li:last-child { margin-bottom:0; }
    #about-detail .career-timeline li::before { display:none; }
    #about-detail .career-entry-head { display:flex; align-items:center; gap:16px; }
    #about-detail .career-entry-head--school { width:452.5px; height:28px; justify-content:space-between; gap:0; }
    #about-detail .career-entry-logo { display:block; width:81px; height:24px; object-fit:contain; }
    #about-detail .career-entry-logo--school { width:120.836px; height:25.377px; margin:.88px 0 0 .88px; }
    #about-detail .career-role { margin:0; color:#000; font-size:20px; font-weight:600; line-height:normal; letter-spacing:0; white-space:nowrap; }
    #about-detail .career-affiliation { margin-right:.35em; color:rgba(0,0,0,.7); }
    #about-detail .career-title { color:#000; }
    #about-detail .career-timeline time { color:rgba(0,0,0,.5); font-size:18px; font-weight:600; line-height:normal; letter-spacing:0; white-space:nowrap; }
    #about-detail .career-timeline p { width:100%; margin:0; color:rgba(0,0,0,.7); font-size:18px; font-weight:400; line-height:normal; letter-spacing:0; }
    #about-detail .career-timeline .career-role { width:auto; color:#000; font-size:20px; font-weight:600; line-height:normal; letter-spacing:0; white-space:nowrap; }
    #about-detail .about-cta { display:flex; width:100%; min-height:306px; padding:64px; box-sizing:border-box; flex-direction:column; align-items:center; justify-content:center; gap:28px; border-radius:12px; background:#f7f7f7; color:#000; text-align:center; }
    #about-detail .about-cta p { margin:0; font-size:32px; font-weight:600; line-height:normal; letter-spacing:0; }
    #about-detail .about-cta p span { display:block; }
    #about-detail .about-cta a { display:flex; height:60px; padding:0 32px; box-sizing:border-box; align-items:center; justify-content:center; border-radius:34px; background:#ebebeb; color:#000; font-size:20px; font-weight:600; line-height:normal; text-decoration:none; }
    #about-detail .about-cta a:hover { background:#dedede; }
    @media (max-width:720px) { body.case-mode .site-nav { top:14px; } body.case-mode .site-nav nav { left:14px; height:46px; padding:0 18px; } body.case-mode .case-nav { right:14px; } .refined-case .case-layout { padding:92px 0 72px; } .refined-case .case-hero h1 { font-size:42px; } .refined-case .case-hero .meta { font-size:16px; } .refined-case .case-hero-deck { margin-top:18px; font-size:20px; } .refined-case .case-hero .embedded-media { margin-top:40px; } .refined-case .case-cover-media,#lockscreen-case .case-cover-placeholder,#lockscreen-case .case-placeholder { border-radius:16px; } .refined-case .case-article h2 { margin-top:52px; font-size:28px; } .refined-case .case-article h3 { font-size:21px; } .refined-case .case-article p,.refined-case .case-article ul,.refined-case .case-article ol { font-size:17px; line-height:1.55; } #about-detail .case-layout { padding:92px 0 72px; } #about-detail .case-hero { width:min(100% - 48px,1200px); margin-bottom:52px; } #about-detail .about-page-portrait,#about-detail .about-page-portrait img { width:300px; height:360px; } #about-detail .about-page-portrait { margin-bottom:24px; } #about-detail .case-hero h1 { font-size:42px; } #about-detail .about-hero-deck { margin-top:20px; font-size:20px; } #about-detail .about-hero-deck br { display:none; } #about-detail .about-page-content { gap:52px; } #about-detail .about-page-heading { margin-bottom:20px; } #about-detail .about-page-heading h2 { font-size:28px; } #about-detail .about-page-section p { margin-bottom:20px; font-size:17px; line-height:normal; } #about-detail .career-timeline li { grid-template-columns:1fr; gap:6px; padding-bottom:28px; } #about-detail .career-timeline time { font-size:16px; } #about-detail .career-timeline h3 { font-size:17px !important; } }
    @media (max-width:720px) {
      #about-detail .about-page-portrait { width:min(var(--polaroid-mask-width),calc(100vw - 96px)); height:auto; aspect-ratio:var(--polaroid-mask-width) / var(--polaroid-mask-height); }
      #about-detail .about-page-portrait img { width:109.195%; height:106.19%; }
      .refined-case .case-article h2 { margin-top:52px; font-size:24px; }
      .refined-case .case-article h3 { font-size:18px; }
      .refined-case .case-article p,
      .refined-case .case-article ul,
      .refined-case .case-article ol,
    }
    @media (max-width:1100px) {
      #about-detail .case-layout { padding:80px 0 120px; }
      #about-detail .about-page-portrait { display:block; width:min(var(--polaroid-mask-width),calc(100vw - 96px)); height:min(var(--polaroid-mask-height),calc(147.468vw - 141.569px)); min-width:0; min-height:0; margin:0; flex:0 0 auto; overflow:visible; isolation:isolate; }
      #about-detail .about-page-portrait img { width:109.195% !important; height:106.19% !important; max-width:none; visibility:visible !important; opacity:1 !important; pointer-events:none; }
      #about-detail .about-hero h1 { font-size:clamp(14px,calc(5.5vw - 2.64px),56px); }
      #about-detail .about-hero h1 span { white-space:nowrap; }
      #about-detail .about-hero-deck { font-size:clamp(12px,calc(4.5vw - 2.16px),24px); }
      #about-detail .about-hero-deck > .about-intro-line { display:contents; }
      #about-detail .about-intro-phrase { display:inline-block; white-space:nowrap; }
      #about-detail .about-page-content { gap:64px; }
      #about-detail .about-page-heading { margin-bottom:24px; }
      #about-detail .about-page-section > .about-page-heading > .about-page-label { margin:0; color:rgba(0,0,0,.7); font-size:16px; font-weight:600; line-height:normal; }
      #about-detail .about-page-heading h2 { margin:0; font-size:32px; }
      #about-detail .section-title-phrase { display:inline-block; white-space:nowrap; }
      #about-detail .about-page-section > p { margin-bottom:24px; font-size:18px; }
      #about-detail .career-timeline li { gap:8px; margin-bottom:24px; padding:0; }
      #about-detail .career-entry-head,
      #about-detail .career-entry-head--school { width:100%; height:auto; justify-content:flex-start; flex-wrap:wrap; gap:8px 16px; }
      #about-detail .career-role { display:block; flex:0 0 auto; margin:0; white-space:nowrap; }
      #about-detail .career-affiliation,
      #about-detail .career-title { display:inline; margin:0; white-space:nowrap; }
      #about-detail .career-entry-logo { flex:0 0 auto; }
      #about-detail .career-entry-logo--school { margin:.88px 0; }
      #about-detail .career-timeline time { font-size:18px; }
    }
    @media (max-width:520px) {
      #about-detail .career-entry-head,
      #about-detail .career-entry-head--school { flex-direction:column; align-items:flex-start; gap:8px; }
      #about-detail .career-role { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
      #about-detail .career-affiliation,
      #about-detail .career-title { display:block; white-space:nowrap; }
    }
    @media (max-width:464px) {
      #about-detail .about-page-heading h2,
      #about-detail .about-cta p { font-size:clamp(17px,calc(9vw - 9px),32px); }
    }
    /* 首页与关于页共用同一套拍立得呈现，投影随同一张素材、同一缩放规则显示。 */
    :is(#about .portrait,#about-detail .about-page-portrait).polaroid-frame {
      position:relative;
      width:var(--polaroid-source-width);
      height:var(--polaroid-source-height);
      min-width:var(--polaroid-source-width);
      min-height:var(--polaroid-source-height);
      overflow:visible;
    }
    :is(#about .portrait,#about-detail .about-page-portrait).polaroid-frame img {
      position:absolute;
      top:0;
      left:0;
      display:block;
      width:var(--polaroid-source-width) !important;
      height:var(--polaroid-source-height) !important;
      max-width:none;
      object-fit:contain;
      pointer-events:none;
    }
    @media (min-width:721px) and (max-width:900px) {
      :is(#about .portrait,#about-detail .about-page-portrait).polaroid-frame {
        width:var(--polaroid-source-width);
        height:auto;
        min-width:0;
        min-height:0;
        margin:0 auto;
      }
      :is(#about .portrait,#about-detail .about-page-portrait).polaroid-frame img {
        position:static;
        width:100% !important;
        height:auto !important;
      }
    }
    @media (max-width:720px) {
      :is(#about .portrait,#about-detail .about-page-portrait).polaroid-frame {
        width:min(100%,300px);
        height:auto;
        min-width:0;
        min-height:0;
        margin:0 auto;
      }
      :is(#about .portrait,#about-detail .about-page-portrait).polaroid-frame img {
        position:static;
        width:100% !important;
        height:auto !important;
      }
    }