/* 米白底色统一供页面、跳转链接和照片遮罩使用。 */
html { color-scheme:light dark; overflow-x:clip; --page:light-dark(#f7f4ec,#161719); }
body { margin:0; background:var(--page); }
button, a, summary { -webkit-tap-highlight-color:transparent; }
button, summary { cursor:pointer; }
button:disabled { cursor:default; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline:2px solid light-dark(#4566a8,#95b5f5); outline-offset:5px; }
.skip-link { position:absolute; left:20px; top:0; transform:translateY(-150%); z-index:10; padding:12px 18px; color:light-dark(#25272c,#eceef1); background:var(--page); font:1rem/1.5 sans-serif; }
.skip-link:focus { transform:translateY(8px); }
#site {
  --ink:light-dark(#25272c,#eceef1);
  --sub:light-dark(#5b626d,#b1b6c0); --line:light-dark(#e5e0d5,#30333a);
  --soft:light-dark(#eee9df,#202329); --brand:light-dark(#4566a8,#95b5f5);
  color:var(--ink); font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;
  font-size:1rem; line-height:1.65; padding:0 44px;
  width:min(1200px,100%); margin:0 auto; display:flex; flex-direction:column;
  box-sizing:border-box;
}
#site * { box-sizing:border-box; }
#site [hidden] { display:none!important; }
#site a { color:var(--brand); text-decoration:none; }
#site a:hover { text-decoration:underline; }
#site .mono { font-family:"Cascadia Code","SFMono-Regular",Consolas,monospace; }
#site .site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:27px 0 0; border-bottom:1px solid var(--line); position:relative; z-index:2; }
#site .site-name { padding-bottom:18px; font-weight:500; letter-spacing:.02em; }
#site .current-path { color:var(--sub); font-size:.75rem; margin-left:10px; font-weight:400; }
#site .site-tabs { display:flex; gap:26px; flex-shrink:0; }
#site .site-tab { font:inherit; color:var(--sub); background:transparent; border:0; border-bottom:2px solid transparent; padding:0 2px 17px; min-height:44px; border-radius:0; }
#site .site-tab[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--ink); font-weight:500; }
#site .page-content { display:block; }
#site[data-tab="photos"] .page-content, #site[data-tab="projects"] .page-content { justify-content:flex-start; }

/* A compact reading column; photographs continue behind its protected center. */
#site .site-header { width:min(680px,100%); margin:0 auto; }
#site .home { position:relative; isolation:isolate; padding:48px 0 26px; }
#site .home-copy { width:min(680px,100%); margin:0 auto; position:relative; z-index:1; }
#site .identity { display:flex; align-items:center; gap:18px; margin-bottom:30px; }
#site .avatar { display:block; width:62px; height:62px; flex:0 0 62px; border-radius:50%; object-fit:cover; }
#site .photo-source { background-repeat:no-repeat; background-color:var(--soft); }
#site .identity-name { font-size:1.8rem; line-height:1.35; font-weight:500; margin:0 0 5px; letter-spacing:-.02em; }
#site .identity-handle { font-size:1.1rem; font-weight:400; color:var(--sub); letter-spacing:0; }
#site .identity-role { font-size:.75rem; color:var(--sub); letter-spacing:.05em; }
#site .bio-heading { font-size:.875rem; font-weight:500; margin:0 0 16px; color:var(--sub); }
#site .bio { color:var(--sub); font-size:1.02rem; line-height:1.95; margin:0 0 19px; }
#site .bio:first-child { color:var(--ink); }
#site .about-links { display:flex; flex-wrap:wrap; gap:26px; margin:2px 0 25px; font-size:.875rem; }
#site .about-links a { display:inline-flex; align-items:center; gap:9px; min-height:36px; }
#site .about-meta { display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; gap:12px 24px; border-top:1px solid var(--line); padding-top:17px; }
#site .stack { display:flex; gap:12px; align-items:center; color:var(--sub); font-size:.8125rem; }
#site .stack-item + .stack-item::before { content:'/'; color:var(--sub); opacity:.5; margin-right:12px; }
#site .links { display:flex; flex-wrap:wrap; align-items:center; gap:4px 22px; flex:1 1 480px; min-width:0; }
#site .social-link { display:inline-flex; align-items:center; gap:8px; min-height:40px; font-size:.875rem; color:var(--brand); text-decoration:none; }
#site .social-link:hover .link-label, #site .social-link:focus-visible .link-label { text-decoration:underline; text-underline-offset:4px; }
#site .social-link:hover { text-decoration:none; }
#site .brand-icon { display:block; width:19px; height:19px; flex-shrink:0; fill:currentColor; }
#site .brand-icon-xiaohongshu { width:27px; }
#site .brand-icon-mail { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#site .photo-side { position:absolute; inset:8px calc((min(1200px, 100vw) - 100vw) / 2 - 44px) 0; overflow:hidden; z-index:0; }
#site .photo-window { height:100%; display:flex; flex-direction:column; justify-content:center; gap:14px; overflow:hidden; opacity:var(--photo-opacity,.46); mask-image:linear-gradient(transparent,black 14%,black 79%,transparent); -webkit-mask-image:linear-gradient(transparent,black 14%,black 79%,transparent); }
#site .photo-side::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--page) 96%,transparent) calc(50% - 350px),color-mix(in srgb,var(--page) 98%,transparent) calc(50% - 250px),color-mix(in srgb,var(--page) 98%,transparent) calc(50% + 250px),color-mix(in srgb,var(--page) 96%,transparent) calc(50% + 350px),transparent); }
#site .photo-track { display:flex; width:max-content; animation:summer-scroll var(--scroll-time,160s) linear infinite; will-change:transform; }
#site .photo-track.reverse { animation-direction:reverse; animation-duration:calc(var(--scroll-time,160s) * 1.18); }
#site .photo-group { display:flex; flex-shrink:0; gap:18px; padding-right:18px; }
#site .photo-window .shot { width:auto; height:190px; object-fit:cover; border-radius:8px; flex-shrink:0; }
#site .photo-side:hover .photo-track, #site[data-motion="paused"] .photo-track { animation-play-state:paused; }
#site .photo-controls { position:relative; width:min(680px,100%); margin:18px auto 0; display:flex; align-items:center; justify-content:space-between; gap:18px; z-index:2; font-size:.75rem; color:var(--sub); }
#site .photo-controls .home-photos-link { color:var(--sub); }
#site .photo-count { color:var(--sub); font-size:.75rem; margin-left:7px; font-weight:400; }
#site .motion-toggle { display:flex; align-items:center; gap:7px; background:transparent; color:var(--sub); padding:8px 0; border:0; font:inherit; min-height:44px; }
#site .motion-symbol { width:14px; text-align:center; }
@keyframes summer-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* Native photo proportions; thumbnails load as they approach the viewport. */
#site .section-page { padding:34px 0 45px; }
#site .section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:28px; }
#site .section-title { display:flex; align-items:baseline; gap:7px; }
#site h2 { margin:0; font-size:22px; font-weight:500; }
#site .section-heading a { font-size:.8125rem; }
#site .gallery { columns:3; column-gap:22px; }
#site figure { margin:0; }
#site .gallery figure { break-inside:avoid; margin:0 0 25px; }
#site .photo-open { display:block; padding:0; border:0; width:100%; background:var(--soft); border-radius:7px; overflow:hidden; cursor:zoom-in; }
#site .gallery .shot { display:block; width:100%; height:auto; transition:transform .3s ease; }
@media(hover:hover) { #site .photo-open:hover .shot { transform:scale(1.025); } }
#site figcaption { margin-top:8px; color:var(--sub); font-size:.8125rem; }
#site #panel-projects { width:min(680px,100%); margin:0 auto; }
#site .project-row { padding:24px 0; border-top:1px solid var(--line); }
#site h3 { font-size:20px; font-weight:500; margin:0 0 7px; overflow-wrap:anywhere; }
#site .project-body { flex:1; min-width:0; }
#site .project-body p { margin:0 0 12px; color:var(--sub); }
#site .tech { font-size:.8125rem; color:var(--sub); display:flex; flex-wrap:wrap; gap:15px; margin:0; }
#site details { margin-top:23px; }
#site summary { color:var(--sub); width:fit-content; padding:5px 0; }
#site .actual-gui { display:block; width:100%; height:auto; max-width:570px; margin-top:15px; border-radius:5px; border:1px solid var(--line); }
#site .empty-state { color:var(--sub); }
#site .site-footer { width:min(680px,100%); margin-left:auto; margin-right:auto; position:relative; z-index:1; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; padding:18px 0 22px; font-size:.75rem; color:var(--sub); margin-top:20px; }
#site .footer-handle { letter-spacing:.08em; }

body.viewing-photo { overflow:hidden; }
#site .photo-dialog { color:#f5f5f5; background:#101113; border:0; padding:64px 64px 25px; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; }
#site .photo-dialog::backdrop { background:#101113; }
#site .photo-dialog[open] { display:flex; align-items:center; justify-content:center; }
#site .viewer-figure { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
#site .viewer-image { display:block; max-width:100%; min-height:0; max-height:calc(100% - 36px); object-fit:contain; pointer-events:auto; }
#site .viewer-caption { color:#d2d5dc; margin-top:12px; text-align:center; }
#site .photo-dialog button { position:absolute; background:#24262c; color:#f5f5f5; border:1px solid #43464e; border-radius:6px; font:inherit; min-width:44px; min-height:44px; }
#site .viewer-close { right:18px; top:14px; padding:0 15px; }
#site .viewer-prev { left:10px; top:calc(50% - 22px); }
#site .viewer-next { right:10px; top:calc(50% - 22px); }

#site .project-links { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; margin:18px 0 0; font-size:.875rem; }
#site .project-output { margin-top:16px; padding:16px; border-radius:8px; background:var(--soft); margin:16px 0 22px; }
#site .project-output img { display:block; width:100%; height:auto; border-radius:3px; }
#site .project-output figcaption { text-align:center; margin-top:12px; font-size:.75rem; }
@media(max-width:900px) {
  #site .photo-side::after { background:color-mix(in srgb,var(--page) 92%,transparent); }
  #site .gallery { columns:2; }
}
@media(max-width:580px) {
  #site { padding:0 22px; }
  #site .current-path { display:none; }
  #site .site-header { gap:12px; padding-top:20px; }
  #site .site-tabs { gap:18px; }
  #site .home { padding:35px 0 14px; }
  #site .identity { gap:13px; margin-bottom:25px; }
  #site .avatar { width:52px; height:52px; flex-basis:52px; }
  #site .identity-name { font-size:1.55rem; }
  #site .identity-handle { font-size:.95rem; }
  #site .bio { font-size:.9375rem; }
  #site .photo-side { inset:0 -22px; }
  #site .photo-window { gap:12px; }
  #site .photo-window .shot { height:230px; }
  #site .photo-group { gap:12px; padding-right:12px; }
  #site .photo-controls { margin-top:16px; }
  #site .gallery { column-gap:14px; }
  #site .gallery figure { margin-bottom:18px; }
  #site .project-output { padding:9px; }
    #site .photo-dialog { padding:66px 12px 76px; }
  #site .viewer-prev, #site .viewer-next { top:auto; bottom:14px; }
  #site .viewer-prev { left:calc(50% - 56px); }
  #site .viewer-next { right:calc(50% - 56px); }
}
@media(max-width:390px) {
  #site { padding:0 18px; }
  #site .site-tabs { gap:12px; }
  #site .site-tab { font-size:.875rem; }
  #site .wordmark { font-size:.875rem; }
  #site .identity-handle { font-size:.875rem; }
  #site .photo-side { left:-18px; right:-18px; }
  #site .gallery { columns:1; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto!important; }
  #site .photo-track { animation:none; transform:none; will-change:auto; }
  #site .gallery .shot { transition:none; }
}