:root{color-scheme:light;--paper:#fbfbfb;--ink:#142020;--blue:#2588f5;--motion:cubic-bezier(.22,.61,.36,1);--design-scale:1}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:60px;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;cursor:pointer}
a{color:inherit}
button:focus-visible,a:focus-visible,[role=button]:focus-visible{outline:3px solid #2186fa;outline-offset:5px}
::selection{background:#c9e9ff;color:#142020}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.screen{position:relative;width:min(100%,1920px);height:calc(var(--screen-height)*var(--design-scale)*1px);margin:0 auto;isolation:isolate;overflow:clip}
.design-canvas{position:absolute;top:0;left:0;width:1920px;transform:scale(var(--design-scale));transform-origin:top left}
.hero{height:100vh;height:100svh}
.hero.is-scroll-ready{touch-action:pan-x pinch-zoom}
.hero>.design-canvas{height:calc(100% / var(--design-scale))!important}
.hero [data-node-id="549:1620"]{top:0;height:100%}
.hero [data-node-id="549:1621"]{scale:var(--hero-content-scale,1)}
.overview{height:100vh;height:100dvh;scroll-margin-top:-60px}
.overview>.design-canvas{left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--overview-scale,var(--design-scale)));transform-origin:center}
.hero-atmosphere{--grid-size:clamp(18px,2vw,38px);--grid-offset:calc(var(--grid-size)/3);position:absolute;inset:0;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,#eef0f0 0%,#f7f7f5 43%,#e4e9f4 72%,#b6e4f1 100%)}
.hero-flow{position:absolute;inset:0 auto 0 0;width:200%;background-image:radial-gradient(ellipse 48% 58% at 24% 104%,rgba(116,222,242,.58),rgba(116,222,242,0) 100%),radial-gradient(ellipse 48% 58% at 124% 104%,rgba(116,222,242,.58),rgba(116,222,242,0) 100%),radial-gradient(ellipse 46% 68% at 74% 108%,rgba(101,156,232,.4),rgba(101,156,232,0) 100%),radial-gradient(ellipse 46% 68% at -26% 108%,rgba(101,156,232,.4),rgba(101,156,232,0) 100%);background-size:50% 100%;background-repeat:repeat-x;animation:hero-flow-right 16s linear infinite paused}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(255,255,255,.58) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.58) 1px,transparent 1px);background-size:var(--grid-size) var(--grid-size);background-position:var(--grid-offset) 0;animation:hero-grid-breathe 8s ease-in-out infinite paused}
.hero-grid--one{-webkit-mask-image:radial-gradient(ellipse 58% 38% at 8% 2%,#000 10%,transparent 100%),radial-gradient(ellipse 60% 42% at 76% 100%,#000 20%,transparent 100%);mask-image:radial-gradient(ellipse 58% 38% at 8% 2%,#000 10%,transparent 100%),radial-gradient(ellipse 60% 42% at 76% 100%,#000 20%,transparent 100%);animation-delay:-2s}
.hero-grid--two{-webkit-mask-image:radial-gradient(ellipse 65% 40% at 94% 4%,#000 10%,transparent 100%),radial-gradient(ellipse 58% 48% at 12% 96%,#000 20%,transparent 100%);mask-image:radial-gradient(ellipse 65% 40% at 94% 4%,#000 10%,transparent 100%),radial-gradient(ellipse 58% 48% at 12% 96%,#000 20%,transparent 100%);animation-duration:10s;animation-delay:-5s}
.hero-grid--three{-webkit-mask-image:radial-gradient(ellipse 42% 36% at 48% 18%,#000 10%,transparent 100%),radial-gradient(ellipse 44% 48% at 50% 92%,#000 10%,transparent 100%);mask-image:radial-gradient(ellipse 42% 36% at 48% 18%,#000 10%,transparent 100%),radial-gradient(ellipse 44% 48% at 50% 92%,#000 10%,transparent 100%);animation-duration:12s;animation-delay:-8s}
.hero-cells,.hero-trail{position:absolute;inset:0}
.hero-cell,.hero-trail-cell{position:absolute;left:calc(var(--grid-offset) + var(--cell-x,0)*var(--grid-size) + 1px);top:calc(var(--cell-y,0)*var(--grid-size) + 1px);width:calc(var(--grid-size) - 1px);height:calc(var(--grid-size) - 1px);background:rgba(255,255,255,.55);opacity:0}
.hero-cell{animation:hero-cell-glimmer var(--cell-duration,3.6s) ease-out var(--cell-delay,0s) infinite paused}
.hero-atmosphere.is-running :is(.hero-flow,.hero-grid,.hero-cell){animation-play-state:running}
@keyframes hero-flow-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes hero-grid-breathe{0%,100%{opacity:.04}45%,55%{opacity:.62}}
@keyframes hero-cell-glimmer{0%,4%{opacity:0;transform:scale(.88)}9%,13%{opacity:var(--cell-opacity,.48);transform:scale(1)}25%,100%{opacity:0;transform:scale(.96)}}
@media(prefers-reduced-motion:reduce){.hero-flow{transform:translateX(-25%)}.hero-grid{opacity:.24}.hero-cell{opacity:.14;transform:none}.hero-trail{display:none}}
.scroll-hint{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:50%;translate:-50% 0;display:grid;place-items:center;width:48px;height:48px;text-decoration:none;color:rgba(255,255,255,.95);border-radius:50%;z-index:2;transition:opacity 160ms ease-out}
.scroll-wheel{animation:scroll-wheel-drift 2.2s cubic-bezier(.4,0,.2,1) infinite}
.hero.is-leaving .scroll-hint{opacity:0;pointer-events:none}
.hero.is-leaving .scroll-wheel{animation-play-state:paused}
@keyframes scroll-wheel-drift{0%{transform:translateY(0);opacity:0}20%{opacity:1}70%,100%{transform:translateY(6px);opacity:0}}
.design-slot{position:absolute}
.case-texture{position:absolute;inset:0;width:100%;height:100%;opacity:.8;object-position:bottom;pointer-events:none}
.case-panel{background:rgba(255,255,255,.1);border-radius:44px}
.project-card{position:absolute;display:block;text-decoration:none;border-radius:40px}
.project-card:focus-visible{outline-offset:18px}
.folder-card{user-select:none}
.folder-front{position:relative;width:274px;height:194px;z-index:2;pointer-events:none}
.folder-front>div{margin:0}
.folder-preview{position:absolute;top:-179px;width:374.834px;height:373px;clip-path:inset(-120px -100px 152px);pointer-events:none}
.folder-preview-mask{position:absolute;inset:-120px -100px;-webkit-mask-image:linear-gradient(to bottom,#000 280px,transparent 341px);mask-image:linear-gradient(to bottom,#000 280px,transparent 341px)}
.folder-preview-layout{position:absolute;left:100px;translate:0 120px}
.folder-raster{display:block;max-width:100%;height:auto}
/* Follow the original rotated card outline; the export includes an opaque canvas. */
.folder-preview [data-slot-node="2401"]{clip-path:path("M59.648 1.780 L186.602 53.847 C188.999 54.830 190.145 57.570 189.162 59.967 L137.414 186.143 C136.431 188.540 133.691 189.686 131.294 188.703 L4.340 136.636 C1.943 135.653 0.797 132.913 1.780 130.516 L53.528 4.340 C54.511 1.943 57.251 0.797 59.648 1.780 Z")}
.folder-sheet{position:absolute;inset:0;opacity:0;transform:translateY(140px) scale(.78);transform-origin:50% 100%;transition:transform 280ms cubic-bezier(.22,1,.36,1),opacity 160ms ease-out;transition-delay:0ms}
.folder-description{position:absolute;top:228px;left:50%;width:320px;opacity:0;transform:translate(-50%,12px);pointer-events:none;transition:opacity 160ms ease-out,transform 220ms ease-out}
.folder-description::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:34px}
.folder-description p,.folder-description>[data-node-id]{position:static;width:320px;height:auto;margin:0;font-size:16px;line-height:1.5;color:#6b6b6b;text-align:justify}
.folder-card:is(:focus-visible,.is-open) .folder-sheet{opacity:1;transform:none;transition-delay:calc(var(--sheet-order)*35ms)}
.folder-card:is(:focus-visible,.is-open) .folder-description{opacity:1;transform:translate(-50%,0);transition-delay:120ms;pointer-events:auto}
.folder-card:is(:focus-visible,.is-open) .folder-preview{pointer-events:auto}
.folder-card:focus-visible .folder-sheet,.folder-card:focus-visible .folder-description{transition:none}
@media(pointer:coarse){.folder-card::after{content:"";position:absolute;inset:0;min-height:calc(44px / var(--design-scale));z-index:3}}
.reading-progress{position:fixed;inset:0 auto auto 0;width:100%;height:2px;background:#2f9aff;transform:scaleX(0);transform-origin:left;z-index:60;pointer-events:none}
.navigation{position:fixed;top:max(18px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right));display:flex;align-items:center;gap:6px;padding:7px;border:1px solid rgba(0,0,0,.06);border-radius:999px;background:rgba(251,251,251,.96);box-shadow:0 4px 24px #152e4810;z-index:50;opacity:0;translate:0 -8px;visibility:hidden;transition:opacity 180ms ease-out,translate 180ms ease-out,visibility 180ms}
.navigation.is-visible{opacity:1;translate:0 0;visibility:visible}
.case-page .navigation,.resume-page .navigation{opacity:1;translate:0 0;visibility:visible}
.case-page main{padding-top:80px}
.case-page{--case-width:min(calc(100% - 48px),1440px)}
.case-page .case{width:var(--case-width)}
.case-page .case>.design-canvas{left:calc(-60px * var(--design-scale))}
.resume-page main{padding-top:60px}
.case-back-navigation{position:fixed;top:max(18px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));z-index:45;display:flex;align-items:center;gap:4px;max-width:calc(100vw - 520px);overflow-x:auto;padding:7px;border:1px solid rgba(0,0,0,.06);border-radius:999px;background:rgba(251,251,251,.97);box-shadow:0 4px 24px #152e4810;scrollbar-width:none}
.case-back-navigation::-webkit-scrollbar{display:none}
.case-back-navigation a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 13px;border-radius:99px;white-space:nowrap;text-decoration:none;color:#667078;font-size:12px;flex:none}
.case [id^="chapter-"]{scroll-margin-top:30px}
.case-next{display:flex;align-items:center;justify-content:space-between;gap:24px;width:var(--case-width);margin:24px auto 72px;padding:32px 0;border-top:1px solid #e4e9ed}
.case-next a{display:flex;flex-direction:column;gap:8px;max-width:70%;padding:12px 0;text-decoration:none;font-size:clamp(18px,2.2vw,30px);line-height:1.3;color:#24363f}
.case-next a:last-child{text-align:right;align-items:flex-end}
.case-next a span,.case-next a small{font-size:12px;font-weight:400;line-height:1.5;color:#7c8992}
.case-next a strong{font-weight:500}
.navigation>a,.menu-toggle{display:grid;place-items:center;min-width:44px;min-height:40px;padding:0 13px;border-radius:99px;text-decoration:none;color:#4d565d;font-size:13px;white-space:nowrap}
.navigation a[aria-current]{background:#eaf5ff;color:#1976d2}
.menu-toggle{border:0;background:#f0f1f2;min-width:40px;padding:0;font-size:14px}
.case-menu{position:absolute;top:calc(100% + 10px);right:0;width:290px;background:#fff;border:1px solid #e9edef;border-radius:18px;padding:8px;box-shadow:0 12px 40px #223e5514}
.case-menu a{display:flex;gap:15px;align-items:center;padding:14px 12px;font-size:13px;text-decoration:none;border-radius:10px}
.case-menu a span{font:11px ui-monospace,monospace;color:#8d979d}
.case-menu[hidden]{display:none}
.back-to-top{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid #e8edef;box-shadow:0 4px 24px #152e4810;text-decoration:none;font-size:20px;z-index:40;visibility:hidden;opacity:0;transition:opacity 160ms ease-out,visibility 160ms}
.back-to-top.is-visible{visibility:visible;opacity:1}
.skip-link{position:fixed;top:10px;left:10px;padding:12px 20px;background:white;border-radius:9px;z-index:100;transform:translateY(-180%)}
.skip-link:focus{transform:translateY(0)}
.reveal-enabled .reveal-piece{opacity:0;translate:0 20px;transition:opacity 500ms ease-out,translate 600ms var(--motion)}
.reveal-enabled .reveal-piece.is-visible{opacity:1;translate:0 0}
.parallax-layer{translate:0 var(--parallax-y,0px)}
[data-node-id="549:1622"]{translate:var(--tilt-x,0px) var(--hero-y,0px);rotate:var(--tilt-angle,0deg);transition:rotate 220ms ease-out}
[data-node-id="549:1674"],[data-node-id="549:1680"]{display:grid;align-items:center;width:max-content;padding-inline:23.14px}
[data-node-id="549:1675"],[data-node-id="549:1681"]{left:4.63px;right:4.63px;width:auto}
[data-node-id="549:1676"],[data-node-id="549:1682"]{position:relative;left:auto;top:auto}
.contact-action{text-decoration:none;cursor:pointer;border-radius:16px}
.contact-action:hover{color:#167fe4}
@media(hover:hover) and (pointer:fine){.folder-card:hover .folder-sheet{opacity:1;transform:none;transition-delay:calc(var(--sheet-order)*35ms)}.folder-card:hover .folder-description{opacity:1;transform:translate(-50%,0);transition-delay:120ms;pointer-events:auto}.folder-card:hover .folder-preview{pointer-events:auto}.navigation>a:hover,.case-menu a:hover{background:#edf5fb;color:#1976d2}.menu-toggle:hover,.back-to-top:hover{background:#eaf5ff}}
@media(hover:hover) and (pointer:fine){.case-back-navigation a:hover{background:#edf5fb;color:#1976d2}.case-next a:hover{color:#1976d2}}
@media(max-width:1100px){.case-page main{padding-top:120px}.case-back-navigation{top:72px;left:max(12px,env(safe-area-inset-left));width:auto;max-width:none;border-radius:18px;padding:5px}.case-back-navigation a{min-height:36px;padding:0 12px}.case [id^="chapter-"]{scroll-margin-top:78px}.case-next{margin-top:16px;margin-bottom:40px;padding:24px 0}}
@media(max-width:700px){.navigation{top:max(10px,env(safe-area-inset-top));right:10px;gap:0;padding:4px}.navigation>a{font-size:12px;padding:0 10px;min-height:36px}.menu-toggle{min-height:36px;min-width:36px}.back-to-top{right:14px;bottom:max(14px,env(safe-area-inset-bottom));width:40px;height:40px}.case-menu{width:280px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal-enabled .reveal-piece{opacity:1;translate:none}.parallax-layer{translate:none!important}[data-node-id="549:1622"]{translate:none!important;rotate:none!important}}