:root{color-scheme:dark;--bg:#111412;--fg:#edf0e9;--muted:#a1aba2;--accent:#d8fc75}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--fg);font-family:Arial,"Microsoft YaHei",sans-serif;font-size:16px}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}header{height:88px;padding:0 4.5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff18;background:#111412ee;position:sticky;top:0;z-index:10;backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:13px;font-weight:700}.mark{background:var(--accent);color:var(--bg);width:36px;height:36px;border-radius:9px;display:grid;place-items:center;font-size:23px}.profession{margin-left:14px;color:var(--muted);font-size:12px;font-weight:400;letter-spacing:1.7px}nav{display:flex;align-items:center;gap:30px;font-size:14px}nav a:hover,footer a:hover{color:var(--accent)}nav button{color:var(--fg);border:1px solid #ffffff35;padding:10px 17px;border-radius:30px;background:transparent;font-size:14px}nav button[aria-pressed=true]{background:var(--accent);color:var(--bg)}main{max-width:1180px;margin:auto;padding:0 32px;transition:max-width .25s}body.wide main{max-width:1600px}.intro{padding:72px 0 58px}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--accent);margin-bottom:25px}h1{font-size:clamp(38px,5.1vw,70px);line-height:1.3;font-weight:600;letter-spacing:-2px;margin:0}h1 span{color:var(--accent)}.intro-bottom{display:flex;align-items:flex-end;justify-content:space-between;margin-top:30px}.intro p{line-height:1.9;margin:0;font-size:16px}.intro p span{font-size:14px;color:var(--muted)}.work-link{font-size:14px;border-bottom:1px solid #ffffff50;padding:12px 0;display:flex;gap:65px}.work-link span{color:var(--accent)}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:28px 0 20px;border-top:1px solid #ffffff28}.section-heading>span{font-size:12px;letter-spacing:1.4px;color:var(--muted)}h2{font-size:22px;font-weight:500;margin:0}.project{margin:65px 0}.project:first-child{margin-top:0}.page-art{width:100%;background:#1b201d;position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.band{position:relative;width:100%;overflow:hidden}.band canvas{display:block;width:100%;height:100%;position:absolute;inset:0}.band.loading{background:#252b26}.band.loading:after{content:'画面加载中';position:absolute;top:20px;left:20px;color:#a1aba2;font-size:12px}.retry{position:absolute;inset:0;margin:auto;width:180px;height:44px;border:1px solid #87917f;background:#182019;color:white;border-radius:8px}.page-note{display:flex;justify-content:space-between;gap:16px;margin-top:13px;color:var(--muted);font-size:12px;line-height:1.7}footer{border-top:1px solid #ffffff26;padding:30px 0 45px;display:flex;justify-content:space-between;gap:18px;color:var(--muted);font-size:12px}#notice{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--accent);color:#182014;padding:13px 22px;border-radius:30px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:20}#notice.visible{opacity:1}.skip{position:fixed;left:16px;top:-60px;background:var(--accent);color:black;padding:12px;z-index:50}.skip:focus{top:12px}:focus-visible{outline:2px solid var(--accent);outline-offset:5px}video{width:100%;height:auto;background:black}#motion{margin:65px 0}@media(max-width:650px){header{height:72px;padding:0 20px}.profession{display:none}nav{gap:15px}nav button{padding:8px 10px;font-size:12px}main{padding:0 18px}.intro{padding:42px 0 35px}h1{letter-spacing:-1px}.intro-bottom{gap:20px}.work-link{gap:20px;white-space:nowrap}.intro p{font-size:14px}.intro p span{font-size:12px}.section-heading{align-items:flex-start;flex-direction:column;gap:10px}h2{font-size:20px}.project{margin:42px 0}.page-note{font-size:12px}footer{flex-direction:column}.brand{gap:8px;font-size:14px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}@media print{.page-art,video{display:none}body:after{content:'作品仅供在线评审，未经许可请勿转载。'}}

.motion-project video{display:block;min-height:180px;aspect-ratio:auto 16/9;object-fit:contain}.video-retry{background:var(--accent);color:var(--bg);padding:10px 18px;border:0;border-radius:8px;margin-top:12px}

.brand-image{width:42px;height:42px;object-fit:contain;flex-shrink:0;border-radius:6px}.brand-text{display:flex;flex-direction:column;gap:5px;line-height:1.15}.brand-subtitle{font-size:10px;font-weight:400;letter-spacing:2px;color:var(--muted)}
@media(max-width:650px){.brand-image{width:34px;height:34px}.brand-subtitle{font-size:9px;letter-spacing:1.4px}header{padding:0 14px}nav{gap:12px}}
@media(max-width:430px){header{height:auto;min-height:76px;flex-wrap:wrap;gap:12px;padding:14px}nav{gap:14px;font-size:12px}}

/* The portfolio follows the pale blue and white cover palette. */
body.portfolio-page{color-scheme:light;--bg:#f6f8ff;--fg:#202938;--muted:#65748e;--accent:#4866d5;background:linear-gradient(180deg,#edf2ff 0,#f8faff 560px,#f8faff 100%);color:var(--fg)}
.portfolio-page header{background:#f7f9fff2;border-bottom-color:#d8e1f2}.portfolio-page nav button{border-color:#bbc9e5;color:#364a76}.portfolio-page nav button[aria-pressed=true]{background:#4866d5;color:white}.portfolio-page .section-heading{border-top-color:#d8e1f2}.portfolio-page .project:first-child .section-heading{border-top:0}.portfolio-page .page-art{background:#edf2fb}.portfolio-page .band.loading{background:#eaf0fc}.portfolio-page .band.loading:after{color:#65748e}.portfolio-page .retry{border-color:#b4c5e8;background:#fff;color:#364a76}.portfolio-page footer{border-top-color:#d8e1f2}.portfolio-page #notice{background:#e3ebff;color:#30498b;box-shadow:0 4px 24px #30498b18}.portfolio-page .skip{color:#fff}.portfolio-page .video-retry{color:white}.portfolio-page video{background:#e8eef9}

/* Cover, resume and closing artwork run edge to edge without captions. */
.portfolio-page main,.portfolio-page.wide main{max-width:none;padding:0}
.portfolio-page #gallery>.project{width:calc(100% - 64px);max-width:1116px;margin-left:auto;margin-right:auto}
.portfolio-page.wide #gallery>.project{max-width:1536px}
.portfolio-page #gallery>.project.full-bleed{margin-top:0;margin-bottom:0}
.portfolio-page footer{max-width:1116px;margin:0 auto}
.portfolio-page.wide footer{max-width:1536px}
@media(max-width:1180px){.portfolio-page footer{margin-left:32px;margin-right:32px}}
@media(max-width:650px){.portfolio-page #gallery>.project{width:calc(100% - 36px)}.portfolio-page footer{margin-left:18px;margin-right:18px}}

.back-top{position:fixed;right:24px;bottom:24px;bottom:max(24px,env(safe-area-inset-bottom));z-index:15;display:flex;align-items:center;gap:8px;min-height:48px;padding:12px 18px;border:1px solid #c6d3f1;border-radius:28px;background:#f9fbfff5;color:#3655ac;box-shadow:0 5px 22px #30498b20;font-size:14px;backdrop-filter:blur(12px)}.back-top[hidden]{display:none}.back-top:hover{background:#e8efff;border-color:#9db2e5}.back-top>span:first-child{font-size:22px;line-height:1}@media(max-width:650px){.back-top{right:16px;bottom:max(16px,env(safe-area-inset-bottom));padding:10px 14px;font-size:12px}}

/* Paint landscape safe areas with the same color as the navigation. */
html.portfolio-root{color-scheme:light;background:#f7f9ff;min-height:100%}
body.portfolio-page{background:#f7f9ff;min-height:100vh;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.portfolio-page header{background:#f7f9ff}
.portfolio-page main{background:linear-gradient(180deg,#edf2ff 0,#f8faff 560px,#f8faff 100%)}
.portfolio-page .back-top{right:calc(24px + env(safe-area-inset-right,0px))}
@media(max-width:650px){.portfolio-page .back-top{right:calc(16px + env(safe-area-inset-right,0px))}}