:root{color-scheme:light dark;--paper:#f5f6f2;--ink:#111715;--muted:#68716e;--line:#d5dad6;--accent:#00b99e;--card-hover:#ffffff;--social-media:112px;--social-logo:.46}
html[data-theme=light]{color-scheme:light;--paper:#f5f6f2;--ink:#111715;--muted:#68716e;--line:#d5dad6;--accent:#00b99e;--card-hover:#ffffff}
html[data-theme=dark]{color-scheme:dark;--paper:#080b0a;--ink:#eef5f2;--muted:#93a39d;--line:#22302c;--accent:#35d6bd;--card-hover:#0f1615}
@media(prefers-color-scheme:dark){html:not([data-theme=light]){color-scheme:dark;--paper:#080b0a;--ink:#eef5f2;--muted:#93a39d;--line:#22302c;--accent:#35d6bd;--card-hover:#0f1615}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
header,main,footer{width:min(920px,calc(100% - 64px));margin:0 auto}
header{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:750;letter-spacing:-.04em;text-decoration:none}.brand img{object-fit:contain;border-radius:12px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.12))}
.theme-toggle{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:999px;color:var(--ink);background:transparent;cursor:pointer;transition:border-color .2s,background .2s}
.theme-toggle:hover{border-color:var(--ink);background:var(--card-hover)}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.theme-toggle .icon-moon{display:none}
html[data-effective-theme=dark] .theme-toggle .icon-sun{display:none}
html[data-effective-theme=dark] .theme-toggle .icon-moon{display:block}
@media(prefers-color-scheme:dark){html:not([data-theme=light]) .theme-toggle .icon-sun{display:none}html:not([data-theme=light]) .theme-toggle .icon-moon{display:block}}
.intro{min-height:calc(100svh - 76px - 190px);display:flex;flex-direction:column;justify-content:center;padding:54px 0}
.eyebrow,.section-title>p,.project>span{margin:0;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.18em}
h1{max-width:720px;margin:22px 0 0;font-size:clamp(42px,5.5vw,72px);font-weight:760;line-height:.98;letter-spacing:-.075em}
h1 em{color:var(--accent);font-style:normal}
.summary{max-width:510px;margin:28px 0 0;color:var(--muted);font-size:16px;line-height:1.7}
.work{padding:54px 0 64px;border-top:1px solid var(--line)}
.section-title{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:56px}
.section-title h2{margin:0;font-size:30px;letter-spacing:-.05em}
.project{min-height:190px;display:grid;grid-template-columns:48px 126px 1fr auto;align-items:center;gap:24px;padding:34px;border:1px solid var(--line);border-radius:3px;text-decoration:none;transition:background .22s ease,border-color .22s ease,transform .22s ease}
.project-logo{border-radius:12px;box-shadow:0 8px 22px rgba(0,185,158,.14)}
.project:hover{border-color:var(--ink);background:var(--card-hover);transform:translateY(-3px)}
.project h3{margin:0;font-size:46px;line-height:1;letter-spacing:-.06em}.project p{margin:12px 0 0;color:var(--muted)}
.project i{color:var(--accent);font-size:28px;font-style:normal}
.notes{padding:54px 0 64px;border-top:1px solid var(--line)}
.social-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.social{display:flex;align-items:center;gap:20px;padding:22px 24px;border:1px solid var(--line);border-radius:3px;text-decoration:none;transition:border-color .2s,background .2s,transform .2s}
a.social:hover{border-color:var(--ink);background:var(--card-hover);transform:translateY(-2px)}
.social-media{flex:0 0 auto;display:grid;place-items:center;width:var(--social-media);height:var(--social-media)}
.social-qr{display:block;width:100%;height:100%;border-radius:4px;background:#fff}
.social-logo{display:block;width:calc(var(--social-media) * var(--social-logo));height:auto;color:var(--ink)}
.social-body{display:grid;gap:6px;min-width:0}
.social-body h3{margin:0;font-size:18px;letter-spacing:-.02em}
.social-body p{margin:0;color:var(--muted);font-size:13px}
.social .arrow{margin-left:auto;color:var(--accent);font-style:normal;font-size:18px}
footer{min-height:70px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);color:var(--muted);font-size:11px}
@media(max-width:680px){:root{--social-media:104px}header,main,footer{width:calc(100% - 40px)}header{height:68px}.brand img{width:38px;height:38px}.theme-toggle{width:38px;height:38px}.intro{min-height:calc(100svh - 68px - 160px);padding:42px 0}h1{margin-top:20px;font-size:clamp(34px,10vw,52px);line-height:1}.summary{margin-top:24px;font-size:14px}.work{padding:38px 0 42px}.notes{padding:38px 0 42px}.section-title{display:block;margin-bottom:24px}.section-title h2{margin-top:8px;font-size:23px}.project{min-height:132px;grid-template-columns:38px 1fr auto;grid-template-rows:auto auto;gap:4px 12px;padding:20px}.project-logo{grid-row:1/3;width:38px;height:38px;align-self:start}.project>span{grid-column:2/3;grid-row:1}.project>div{grid-column:2/3;grid-row:2}.project i{grid-column:3;grid-row:1/3;align-self:center;font-size:22px}.project h3{margin-top:2px;font-size:28px}.project p{margin-top:4px;font-size:13px}.social{padding:18px;gap:16px}.social-body h3{font-size:16px}footer{min-height:82px;flex-wrap:wrap;gap:10px;padding:20px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.project,.social{transition:none}}