:root{--bg:#f6f1e8;--surface:#fffdf9;--surface-2:#f7f1e6;--ink:#241c15;--ink-2:#5b4f44;--ink-3:#6a5c4f;--accent:#e16e22;--accent-hover:#bf570f;--accent-ink:#a94a09;--accent-soft:#fce9d9;--line:#e7dccb;--line-2:#d6c8b3;--foot-bg:#efe6d7;--color-bg:var(--bg);--color-surface:var(--surface);--color-text:var(--ink);--color-muted:var(--ink-2);--color-faint:var(--ink-3);--color-accent:var(--accent);--color-border:var(--line);--text-xs:11px;--text-sm:12.5px;--text-md:13px;--text-base:14px;--text-lg:16px;--text-xl:20px;--display:clamp(44px, 6.4vw, 74px);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:40px;--space-7:64px;--r-xs:3px;--r-sm:4px;--r-md:6px;--r-lg:10px;--r-pill:999px;--shadow-card:0 1px 2px #4a341e0d, 0 4px 12px #4a341e0f;--shadow-card-hover:0 2px 4px #4a341e12, 0 12px 26px #4a341e1f;--shadow-pop:0 10px 30px #4a341e2e;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-base:cubic-bezier(.4, 0, .2, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--dur-micro:.12s;--dur-fast:.18s;--dur-base:.26s;--dur-slow:.42s;--dur-enter:.56s;--font-display:"Archivo", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;--font-body:"Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Archivo", sans-serif;--font-mono:"JetBrains Mono", "SFMono-Regular", Consolas, "Courier New", monospace;--shell:1280px;--gutter:32px}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body,h1,h2,h3,p,ul,li,figure,dl,dd{margin:0;padding:0}ul{list-style:none}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0}body{min-height:100vh;font-family:var(--font-body);font-size:var(--text-base);color:var(--ink);background-color:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;line-height:1.7}#root{z-index:1;flex-direction:column;min-height:100vh;display:flex;position:relative}main{flex:1 0 auto}h1,h2,h3{font-family:var(--font-display);letter-spacing:-.01em;color:var(--ink);font-weight:700;line-height:1.15}.mono{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums;font-weight:400}::selection{background:var(--accent-soft);color:var(--accent-ink)}:focus-visible{outline:2px solid var(--accent-hover);outline-offset:3px;border-radius:var(--r-sm)}.shell{width:100%;max-width:var(--shell);padding:0 var(--gutter);margin:0 auto}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{border:3px solid var(--bg);border-radius:var(--r-pill);background:#d9ccb9}::-webkit-scrollbar-thumb:hover{background:#c2b09a}@keyframes fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes card-in{0%{opacity:0;transform:translateY(14px)scale(.99)}to{opacity:1;transform:none}}@keyframes thumb-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}@keyframes shimmer{0%{background-position:120% 0}to{background-position:-20% 0}}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important}.card__link:hover,.card__link:active,.filter:active,.contact:active,.empty button:active{transform:none!important}}.topbar{z-index:40;-webkit-backdrop-filter:blur(14px)saturate(140%);backdrop-filter:blur(14px)saturate(140%);border-bottom:1px solid var(--line);animation:fade-up var(--dur-slow) var(--ease-out) both;transition:background-color var(--dur-base) var(--ease-base), box-shadow var(--dur-base) var(--ease-base), border-color var(--dur-base) var(--ease-base);background:#f6f1e8db;position:sticky;top:0}.topbar.is-scrolled{border-bottom-color:var(--line-2);background:#f6f1e8f2;box-shadow:0 8px 20px #4a341e12}.topbar__inner{justify-content:space-between;align-items:center;gap:var(--space-4);min-height:60px;display:flex}.brand{align-items:center;gap:10px;min-height:44px;display:inline-flex}.brand__mark{width:26px;height:26px;font-family:var(--font-mono);letter-spacing:0;color:#fff;background:var(--accent);border-radius:6px;place-items:center;font-size:11px;font-weight:700;line-height:1;display:grid}.brand__text{font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.01em;color:var(--ink)}.brand__slash{color:var(--ink-3);margin:0 2px}.topnav{align-items:center;gap:2px;display:flex}.topnav a{min-height:44px;font-size:var(--text-md);color:var(--ink-2);border-radius:var(--r-sm);transition:color var(--dur-fast) var(--ease-base), background-color var(--dur-fast) var(--ease-base);justify-content:center;align-items:center;padding:0 12px;display:inline-flex}.topnav a:hover{color:var(--accent-ink);background:var(--accent-soft)}#top,#projects,#contact{scroll-margin-top:76px}.section{padding-top:clamp(28px,3.6vw,44px)}.toolbar{justify-content:space-between;align-items:center;gap:var(--space-3);padding-bottom:var(--space-4);border-bottom:1px solid var(--line);margin-bottom:var(--space-4);flex-wrap:wrap;display:flex}.toolbar__title{font-size:var(--text-xl);letter-spacing:-.02em;align-items:baseline;gap:8px;font-weight:700;display:flex}.toolbar__title .mono{font-size:var(--text-xs);letter-spacing:.08em}.filters{flex-wrap:wrap;gap:6px;display:flex}.filter{min-height:34px;font-size:var(--text-md);color:var(--ink-2);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);transition:color var(--dur-fast) var(--ease-base), background-color var(--dur-fast) var(--ease-base), border-color var(--dur-fast) var(--ease-base), box-shadow var(--dur-fast) var(--ease-base), transform var(--dur-micro) var(--ease-base);align-items:center;padding:0 13px;display:inline-flex}.filter:active{transform:scale(.97)}.filter:hover{color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent)}.filter[aria-pressed=true]{color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent);font-weight:500}.grid{gap:var(--space-4);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.card{animation:card-in var(--dur-enter) var(--ease-out) both}.card__link{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);height:100%;box-shadow:var(--shadow-card);transition:border-color var(--dur-fast) var(--ease-base), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);flex-direction:column;display:flex;overflow:hidden}.card__link:hover{border-color:var(--accent);box-shadow:var(--shadow-card-hover);transform:translateY(-3px)}.card__link:active{box-shadow:var(--shadow-card);transition-duration:var(--dur-micro);transform:translateY(-1px)scale(.997)}.card__link:hover .card__no{color:var(--accent-ink)}.card__link:focus-visible{outline:2px solid var(--accent-hover);outline-offset:2px}.card__thumb{aspect-ratio:4/3;background:var(--surface-2);border-bottom:1px solid var(--line);transition:background-color var(--dur-base) var(--ease-base);position:relative;overflow:hidden}.card__thumb img{object-fit:contain;mix-blend-mode:multiply;width:calc(100% - 36px);height:calc(100% - 36px);animation:thumb-in .64s var(--ease-out) 80ms both;position:absolute;inset:18px}.card__link:hover .card__thumb{background:#fffaf2}.card__thumb:after{content:"";pointer-events:none;opacity:0;transition:opacity var(--dur-base) var(--ease-base);background:linear-gradient(#e16e2200 40%,#e16e2212 100%);position:absolute;inset:0}.card__link:hover .card__thumb:after{opacity:1}.card__no{z-index:1;letter-spacing:.1em;color:var(--ink-3);transition:color var(--dur-fast) var(--ease-base);font-size:10.5px;position:absolute;top:10px;left:12px}.card__initial{font-family:var(--font-display);color:var(--ink-3);place-items:center;font-size:34px;font-weight:700;display:grid;position:absolute;inset:0}.card__body{padding:var(--space-4) var(--space-4) 14px;flex-direction:column;flex:1;display:flex}.card__head{justify-content:space-between;align-items:baseline;gap:10px;display:flex}.card__name{font-size:var(--text-lg);text-wrap:balance;letter-spacing:0;transition:color var(--dur-fast) var(--ease-base);font-weight:700;line-height:1.4}.card__link:hover .card__name{color:var(--accent-ink)}.card__type{letter-spacing:.06em;color:var(--ink-3);text-transform:none;white-space:nowrap;flex:none;font-size:10.5px}.card__desc{text-wrap:pretty;font-size:var(--text-md);color:var(--ink-2);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:7px;line-height:1.65;display:-webkit-box;overflow:hidden}.card__foot{padding-top:var(--space-4);justify-content:space-between;align-items:flex-end;gap:10px;margin-top:auto;display:flex}.card__tags{flex-wrap:wrap;gap:5px;min-width:0;display:flex}.card__tag{font-family:var(--font-mono);letter-spacing:.02em;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-xs);white-space:nowrap;transition:border-color var(--dur-base) var(--ease-base), color var(--dur-base) var(--ease-base);padding:2px 7px;font-size:10.5px}.card__link:hover .card__tag{color:var(--ink-2);border-color:var(--line-2)}.card__cta{font-size:var(--text-sm);letter-spacing:.02em;color:var(--ink-2);transition:color var(--dur-fast) var(--ease-base);flex:none;align-items:center;gap:4px;padding:6px 0;display:inline-flex;position:relative}.card__cta:after{content:"";transform-origin:0;height:1px;transition:transform var(--dur-base) var(--ease-out);background:currentColor;position:absolute;bottom:4px;left:0;right:14px;transform:scaleX(0)}.card__link:hover .card__cta{color:var(--accent-ink)}.card__link:hover .card__cta:after{transform:scaleX(1)}.card__cta svg{transition:transform var(--dur-base) var(--ease-out)}.card__link:hover .card__cta svg{transform:translate(2px,-2px)}.skel-card{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden}.skel-card__thumb{aspect-ratio:4/3;border-bottom:1px solid var(--line)}.skel-card__body{padding:var(--space-4);flex-direction:column;gap:10px;display:flex}.skel-line{height:12px}.skel-card__thumb,.skel-line{background-image:linear-gradient(90deg, var(--surface-2) 0%, #f1e8d9 45%, var(--surface-2) 90%);background-size:220% 100%;animation:1.5s linear infinite shimmer}.skel-line--w60{width:60%}.skel-line--w90{width:90%}.skel-line--w40{width:40%}.empty{padding:var(--space-7) var(--space-4);text-align:center;border:1px dashed var(--line-2);border-radius:var(--r-md);justify-items:center;gap:8px;display:grid}.empty h3{font-size:var(--text-lg);font-weight:500}.empty p{font-size:var(--text-md);color:var(--ink-2)}.empty button{min-height:40px;font-size:var(--text-md);color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);transition:color var(--dur-fast) var(--ease-base), border-color var(--dur-fast) var(--ease-base), transform var(--dur-micro) var(--ease-base);align-items:center;margin-top:6px;padding:0 18px;display:inline-flex}.empty button:hover{color:var(--accent-ink);border-color:var(--accent)}.empty button:active{transform:scale(.98)}.toast{z-index:60;font-size:var(--text-md);color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);box-shadow:var(--shadow-pop);animation:toast-in var(--dur-base) var(--ease-out) both;align-items:center;gap:8px;padding:10px 18px;display:flex;position:fixed;bottom:26px;left:50%}.toast svg{color:var(--accent)}.foot{margin-top:var(--space-7);color:var(--ink);background:var(--foot-bg);border-top:1px solid var(--line);flex:none;padding-top:clamp(40px,5vw,64px)}.foot__inner{align-items:start;gap:var(--space-6);grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);padding-bottom:clamp(36px,4vw,52px);display:grid}.foot__kicker{color:var(--accent-ink)}.foot__title{letter-spacing:-.02em;color:var(--ink);margin-top:10px;font-size:clamp(24px,3vw,32px);font-weight:700}.foot__lede{max-width:420px;margin-top:var(--space-3);font-size:var(--text-md);color:var(--ink-2);text-wrap:pretty;line-height:1.75}.foot__actions{flex-direction:column;gap:8px;padding-top:4px;display:flex}.contact{min-height:52px;font-size:var(--text-base);color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);transition:border-color var(--dur-fast) var(--ease-base), background-color var(--dur-fast) var(--ease-base), transform var(--dur-micro) var(--ease-base);align-items:center;gap:12px;padding:0 16px;display:flex}.contact:hover{border-color:var(--accent);background:var(--surface)}.contact:hover .contact__hint{color:var(--accent-ink)}.contact:active{transition-duration:var(--dur-micro);transform:scale(.995)}.contact svg{color:var(--accent);flex:none}.contact__value{min-width:0;font-family:var(--font-mono);font-size:var(--text-md);letter-spacing:.01em;text-align:left;text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.contact__hint{font-family:var(--font-mono);letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase;transition:color var(--dur-fast) var(--ease-base);flex:none;font-size:10.5px}.foot__meta{justify-content:space-between;align-items:center;gap:var(--space-3);padding-block:var(--space-4) var(--space-5);border-top:1px solid var(--line-2);flex-wrap:wrap;display:flex}.foot__meta .mono{color:var(--ink-3)}.foot__version{letter-spacing:.04em;text-transform:none;cursor:default;margin-left:auto}.foot__flag{color:var(--accent-ink)!important}@media (hover:none){.card__link:hover{box-shadow:var(--shadow-card);transform:none}.card__link:hover .card__cta:after{transform:scaleX(0)}}@media (width<=1180px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.foot__inner{gap:var(--space-5);grid-template-columns:minmax(0,1fr)}}@media (width<=860px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=720px){:root{--gutter:20px}.section{padding-top:var(--space-5)}.toolbar{flex-direction:column;align-items:stretch}.filters{margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 4px;scrollbar-width:none;flex-wrap:nowrap;gap:6px;overflow-x:auto}.filters::-webkit-scrollbar{display:none}.filter{flex:none;min-height:40px}.grid{grid-template-columns:minmax(0,1fr)}.card__desc{-webkit-line-clamp:3}.foot{padding-top:var(--space-6)}.toast{left:var(--gutter);right:var(--gutter);justify-content:center;animation-name:fade-up}}