@charset "UTF-8";
:root{--bg:#f6f9fe;--text:#24364e;--muted:#728198;--blue:#2875e7;--line:#dfe7f2;--font:"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;--mono:"Consolas",monospace;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:auto;scroll-padding-top:95px}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.7 var(--font);-webkit-font-smoothing:antialiased}body.modal-open{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;border:0}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:4px}img{display:block;max-width:100%}svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;flex-shrink:0}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.wrap{width:min(1200px,calc(100% - 96px));margin-inline:auto}.skip{position:fixed;top:-80px;left:16px;background:var(--blue);color:white;padding:12px;z-index:30}.skip:focus{top:12px}.header{position:sticky;top:0;z-index:5;height:76px;border-bottom:1px solid var(--line);background:#f9fbff}.header-inner{display:flex;align-items:center;justify-content:space-between;height:100%;gap:30px}.brand{display:flex;align-items:center;gap:11px;white-space:nowrap}.brand strong{font-size:23px;letter-spacing:2px;font-weight:650}.brand-en{font:10px var(--mono);letter-spacing:1.6px;color:#8b9bb0;border-left:1px solid #d7e1ef;padding-left:13px;margin-left:3px}.brand-icon{display:grid;grid-template-columns:repeat(2,7px);gap:3px}.brand-icon i{height:7px;background:var(--blue);border-radius:1px}.brand-icon i:nth-child(2){opacity:.4}.brand-icon i:nth-child(3){opacity:.65}.header nav{display:flex;align-items:center;gap:25px;font-size:12px;color:#64758d}.header nav a{transition:color .2s}.header nav a:hover{color:var(--blue)}.header-note{font-size:11px;color:#8a99ad;white-space:nowrap}.intro{position:relative;padding-block:65px 37px;isolation:isolate}.intro:after{content:"";position:absolute;width:310px;right:0;top:37px;bottom:42px;background-image:linear-gradient(#c5d9f333 1px,transparent 1px),linear-gradient(90deg,#c5d9f333 1px,transparent 1px);background-size:26px 26px;z-index:-1;pointer-events:none}.eyebrow{display:flex;align-items:center;gap:9px;font:10px/1.5 var(--mono);letter-spacing:1.8px;color:#7c92b0;margin:0 0 20px}.status-dot{width:5px;height:5px;background:var(--blue);border-radius:50%;display:inline-block}.intro h1{font-size:clamp(30px,3.5vw,46px);letter-spacing:-1.4px;line-height:1.5;margin:0 0 15px;font-weight:600}.intro h1 span{color:var(--blue)}.intro-description{color:#7c8b9f;font-size:13px;margin:0}.intro-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:32px;font-size:11px;color:#8392a7}.intro-bottom i{font-style:normal;color:#c7d4e5;margin:0 13px}.intro-bottom a{color:var(--blue);display:flex;align-items:center;gap:18px}.project-list{border-top:1px solid var(--line)}.project-section{padding:55px 0 58px;border-bottom:1px solid var(--line);scroll-margin-top:92px}.project-heading{display:flex;gap:18px;align-items:center;margin-bottom:28px}.project-number{display:grid;place-items:center;width:40px;height:40px;background:#e8f0fd;border:1px solid #d7e5fb;border-radius:9px;color:var(--blue);font:15px var(--mono);flex-shrink:0}.project-heading h2{font-size:25px;line-height:1.4;font-weight:600;letter-spacing:-.4px;margin:0 0 4px}.project-heading .eyebrow{font-size:8px;letter-spacing:1.4px;margin:0}.project-category{margin-left:auto;color:#7d90aa;font-size:11px;padding:4px 11px;border:1px solid #dce6f3;border-radius:4px}.project-layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:58px;align-items:center}.project-description{font-size:13px;line-height:2;color:#728198;margin:0 0 22px}.project-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px}.project-tags span,.dialog-tags span{color:#6484af;background:#eaf1fc;border-radius:4px;font-size:10px;padding:4px 9px}.project-features{list-style:none;margin:0 0 28px;padding:0;font-size:12px;color:#64758d}.project-features li{display:flex;align-items:baseline;gap:10px;margin:11px 0}.project-features li:before{content:"";height:4px;width:4px;flex-shrink:0;display:block;position:relative;top:-2px;border-radius:1px;background:#8ab3ee}.view-project{display:inline-flex;align-items:center;gap:22px;color:var(--blue);padding:9px 0;background:none;font-size:12px;border-bottom:1px solid #bcd1ef;transition:gap .2s}.view-project:hover{gap:29px}.view-project svg{width:13px;height:13px}.project-media{min-width:0}.project-image{display:flex;align-items:center;justify-content:center;position:relative;width:100%;aspect-ratio:1.92;background:#eaf0f8;border:1px solid #dbe5f2;padding:13px;border-radius:9px;overflow:hidden;transition:border-color .2s,box-shadow .2s}.project-image:hover{border-color:#a2c0eb;box-shadow:0 6px 24px #2d6cb80b}.project-image.chat-overview{gap:20px;padding:21px 30px 0;align-items:flex-start}.image-hint{position:absolute;right:21px;bottom:20px;display:grid;place-items:center;width:29px;height:29px;border:1px solid #d1e0f7;border-radius:5px;background:#f9fcfff5;color:var(--blue);box-shadow:0 2px 8px #163b7614}.image-hint svg{width:12px;height:12px}.inline-thumbnails{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px;min-height:30px}.inline-thumbnails button{width:44px;height:30px;flex-shrink:0;padding:2px;border-radius:4px;background:#ecf2fa;border:1px solid #dce5f1;opacity:.6}.inline-thumbnails button:hover{opacity:1}.inline-thumbnails button.active{opacity:1;border-color:#77a8ed;background:#e2edfc}.inline-thumbnails img{width:100%;height:100%;object-fit:contain;border-radius:2px}.inline-caption{margin-left:auto;flex:1;text-align:right;min-width:100px;color:#8b9bb0;font-size:9px}.footer{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-block:29px;color:#8797ac;font-size:10px}.footer strong{color:#4c6b91;font-size:16px;font-weight:550;letter-spacing:2px}.footer-en{font:8px var(--mono);letter-spacing:1px;margin-left:11px;color:#96a8bf}.footer a{color:#728fb6}.noscript{padding:40px 0;color:var(--blue)}
dialog{padding:0;background:#f9fbff;border:1px solid #cddcf0;border-radius:10px;color:var(--text);width:min(1220px,94vw);max-height:92vh;max-height:92dvh;overflow:auto;box-shadow:0 25px 100px #244b7c30}dialog::backdrop{background:#2442666b}.dialog-top{display:flex;align-items:center;justify-content:space-between;padding:13px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#f9fbfff5;z-index:3}.dialog-top .eyebrow{margin:0;font-size:9px}.icon-button{display:flex;justify-content:center;align-items:center;width:32px;height:32px;background:transparent;color:#6b83a1;border-radius:4px}.icon-button:hover{color:var(--blue);background:#e6effc}.dialog-body{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;padding:23px}.gallery{min-width:0}.gallery-stage{height:clamp(250px,46vw,520px);background:#edf2fa;display:flex;align-items:center;justify-content:center;position:relative;border:1px solid #d9e4f2;border-radius:5px;overflow:hidden}.gallery-stage>img{height:100%;width:100%;object-fit:contain}.gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;border:1px solid #cadbf0;background:#f9fcfff0;color:#4774ae;width:33px;height:42px;font-size:25px;border-radius:5px;box-shadow:0 2px 6px #1d477017}.gallery-arrow:hover{color:var(--blue);border-color:#8eb4e9}.gallery-arrow[hidden]{display:none}.prev{left:9px}.next{right:9px}.gallery-caption{display:flex;justify-content:space-between;font-size:10px;color:#8396b0;gap:14px;margin:13px 0}.gallery-caption>span{min-width:0;flex:1}.gallery-caption>div{display:flex;gap:17px;flex-shrink:0}.gallery-caption button{padding:0;background:transparent;font-size:10px;color:#6a86aa}.gallery-caption button:hover,.gallery-caption a:hover{color:var(--blue)}.gallery-thumbnails{display:flex;gap:8px;overflow-x:auto;padding:4px 0 6px}.gallery-thumbnails button{flex-shrink:0;width:76px;height:52px;background:#edf3fb;border:1px solid #cfddef;padding:3px;border-radius:4px;opacity:.5}.gallery-thumbnails button.active{border-color:var(--blue);opacity:1}.gallery-thumbnails img{width:100%;height:100%;object-fit:contain}.dialog-info{padding:6px 0}.dialog-info .eyebrow{color:var(--blue);font-size:9px;margin-bottom:14px}.dialog-info h2{font-size:25px;line-height:1.5;margin:0 0 17px;font-weight:550}.dialog-info>p:not(.eyebrow){color:#72869f;font-size:12px;line-height:1.95}.dialog-tags{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0}.detail-divider{height:1px;background:var(--line);margin:25px 0}.dialog-info h3{font-size:13px;font-weight:500}.dialog-info ul{padding-left:17px;color:#7186a0;font-size:11px;line-height:2.2}.dialog-info .dialog-note{font-size:10px!important;color:#91a1b7!important;margin-top:27px}.gallery-stage.zoomed{overflow:auto;display:block}.gallery-stage.zoomed>img{height:auto;width:auto;max-width:none;max-height:none;object-fit:unset}.gallery-stage.zoomed .gallery-arrow{display:none}
@media(min-width:1550px){.wrap{width:min(1280px,calc(100% - 120px))}.intro{padding-top:75px}.project-layout{grid-template-columns:330px minmax(0,1fr);gap:70px}.project-section{padding-block:62px}}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.header-note{display:none}.header nav{gap:22px}.project-layout{grid-template-columns:270px minmax(0,1fr);gap:35px}.project-heading h2{font-size:23px}.project-description{font-size:12px}.project-features{font-size:11px}.project-image{aspect-ratio:1.65;padding:10px}.project-image.chat-overview{padding:20px 20px 0;gap:12px}.dialog-body{grid-template-columns:minmax(0,1fr) 235px;gap:20px}}
@media(max-width:800px){.wrap{width:calc(100% - 48px)}.header{height:68px}.brand-en{display:none}.header nav{gap:17px;font-size:11px}.intro{padding-block:44px 30px}.intro h1{font-size:34px}.intro-description{font-size:12px}.project-section{padding-block:35px 40px}.project-layout{grid-template-columns:1fr;gap:24px}.project-heading{margin-bottom:19px}.project-description{font-size:13px;margin-bottom:15px;max-width:580px}.project-tags{margin-bottom:18px}.project-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 22px;font-size:11px;margin-bottom:16px}.project-features li{margin:0}.project-image{aspect-ratio:1.92;padding:13px}.project-image.chat-overview{padding:20px 35px 0;gap:20px}.view-project{font-size:11px;padding:7px 0}.dialog-body{grid-template-columns:1fr}.dialog-info{border-top:1px solid var(--line);padding-top:18px}.dialog-info ul{columns:2}.gallery-stage{height:49vh}.intro:after{width:180px;opacity:.5}}
@media(max-width:550px){html{scroll-padding-top:80px}.wrap{width:calc(100% - 36px)}.header{height:64px}.header-inner{gap:20px}.brand{gap:8px}.brand strong{font-size:21px}.brand-icon{grid-template-columns:repeat(2,6px);gap:3px}.brand-icon i{height:6px}.header nav{overflow-x:auto;scrollbar-width:none;gap:17px;font-size:10px;white-space:nowrap;min-width:0;padding:9px 0}.header nav::-webkit-scrollbar{display:none}.header nav a{flex-shrink:0}.intro{padding-top:35px;padding-bottom:27px}.eyebrow{font-size:8px;margin-bottom:16px;letter-spacing:1.4px}.intro h1{font-size:29px;line-height:1.55;letter-spacing:-.9px;margin-bottom:13px}.intro h1 span{display:block}.intro-description{font-size:11px;line-height:1.9;max-width:290px}.intro-bottom{margin-top:26px;font-size:9px;gap:10px}.intro-bottom i{margin-inline:7px}.intro-bottom a{gap:8px;white-space:nowrap}.intro:after{width:135px;top:35px;bottom:30px}.project-section{padding-block:30px 32px;scroll-margin-top:80px}.project-heading{gap:12px;margin-bottom:18px}.project-heading h2{font-size:20px;letter-spacing:-.6px;margin-bottom:4px}.project-heading .eyebrow{font-size:7px;letter-spacing:.9px}.project-number{width:32px;height:36px;font-size:13px;border-radius:6px}.project-category{display:none}.project-description{font-size:12px;line-height:1.95;margin-bottom:15px}.project-tags{margin-bottom:17px;gap:6px}.project-tags span{font-size:9px;padding:3px 8px}.project-features{grid-template-columns:1fr;gap:8px;font-size:11px;margin-bottom:17px}.project-features li{gap:9px}.project-layout{gap:22px}.project-image{aspect-ratio:1.72;padding:7px;border-radius:6px}.project-image.chat-overview{gap:11px;padding:17px 14px 0}.image-hint{width:25px;height:25px;right:13px;bottom:13px}.inline-thumbnails{margin-top:10px;gap:6px}.inline-thumbnails button{width:35px;height:26px}.inline-caption{font-size:8px;line-height:1.5;min-width:90px}.footer{gap:15px;flex-wrap:wrap;font-size:9px;padding-block:22px}.footer>span:nth-child(2){order:3;width:100%}.footer-en{font-size:7px;margin-left:7px}.footer strong{font-size:15px}dialog{width:calc(100vw - 20px);max-height:94dvh;border-radius:7px}.dialog-top{padding:9px 13px}.dialog-top .eyebrow{font-size:8px;letter-spacing:.6px}.dialog-body{padding:13px;gap:14px}.gallery-stage{height:43vh;min-height:220px}.gallery-caption{font-size:9px;align-items:start;gap:8px}.gallery-caption>div{gap:12px;white-space:nowrap}.gallery-caption button{font-size:9px}.gallery-thumbnails button{width:65px;height:45px}.dialog-info h2{font-size:23px}.dialog-info>p:not(.eyebrow){font-size:11px}.dialog-info ul{columns:1}.gallery-arrow{width:27px;height:37px;font-size:22px}.prev{left:5px}.next{right:5px}.dialog-tags{margin:16px 0}.detail-divider{margin:19px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Keep image decoding independent of the aspect-ratio button's layout. */
.project-image{min-height:0;display:block;padding:0}
.preview-frame{position:absolute;inset:13px;display:flex;align-items:center;justify-content:center;gap:20px;overflow:hidden}
.preview-frame>img{display:block;min-width:0;min-height:0;width:100%;height:100%;object-fit:contain;border-radius:4px}
.project-image.chat-overview{padding:0}
.chat-overview .preview-frame{inset:18px 25px}
.chat-overview .preview-frame>img{width:calc((100% - 40px)/3);height:100%;object-fit:contain}
@media(max-width:1100px){.preview-frame{inset:10px}.chat-overview .preview-frame{inset:16px 20px;gap:12px}.chat-overview .preview-frame>img{width:calc((100% - 24px)/3)}}
@media(max-width:550px){.preview-frame{inset:7px}.chat-overview .preview-frame{inset:12px 14px;gap:10px}.chat-overview .preview-frame>img{width:calc((100% - 20px)/3)}}


/* Project directory stays beside the content and never covers screenshots. */
.header-inner.wrap,.footer.wrap{width:min(1440px,calc(100% - 96px))}
.header-inner{justify-content:flex-start}
.page-shell{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:48px;align-items:start;width:min(1440px,calc(100% - 96px));margin-inline:auto}
.main-content{min-width:0}
.main-content .wrap{width:100%}
.project-sidebar{position:sticky;top:112px;margin-top:60px;min-width:0}
.sidebar-panel{border-left:1px solid var(--line);padding-left:17px}
.sidebar-title{color:#8a9bb1;font-size:10px;letter-spacing:1px;margin:0 0 15px;padding-left:10px}
.sidebar-panel nav{display:flex;flex-direction:column;gap:5px}
.sidebar-panel nav a{display:flex;align-items:center;gap:11px;padding:10px;border-radius:5px;font-size:12px;color:#72849c;border:1px solid transparent;white-space:nowrap}
.sidebar-panel nav a>span{font:9px var(--mono);color:#9caec5}
.sidebar-panel nav a:hover{color:var(--blue);background:#edf3fc}
.sidebar-panel nav a.active{color:var(--blue);background:#e7f0fd;border-color:#d7e5fa}
.sidebar-panel nav a.active>span{color:#6e9ddf}
.sidebar-toggle{display:none}
@media(min-width:1550px){.page-shell{gap:56px;grid-template-columns:minmax(0,1fr) 170px}}
@media(max-width:1100px){.header-inner.wrap,.footer.wrap,.page-shell{width:calc(100% - 64px)}.page-shell{grid-template-columns:minmax(0,1fr) 144px;gap:28px}.sidebar-panel{padding-left:10px}.sidebar-panel nav a{font-size:11px;gap:8px;padding:9px}.project-layout{grid-template-columns:240px minmax(0,1fr);gap:26px}}
@media(max-width:900px){.page-shell{display:block}.project-sidebar{position:fixed;right:20px;bottom:24px;top:auto;z-index:6;margin:0}.sidebar-panel{padding:0;border:1px solid #d4e2f5;border-radius:8px;background:#f9fbff;box-shadow:0 5px 20px #284e7a12;min-width:128px}.sidebar-title{display:none}.sidebar-toggle{display:flex;align-items:center;justify-content:space-between;gap:28px;width:100%;background:none;padding:12px 15px;color:var(--blue);font-size:12px;border-radius:8px}.sidebar-toggle>span{font-size:14px}.sidebar-panel nav{display:none;padding:0 6px 7px}.project-sidebar.is-open nav{display:flex}.sidebar-panel nav a{font-size:12px;padding:10px}.project-layout{grid-template-columns:1fr;gap:24px}.project-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 22px}.project-features li{margin:0}.project-description{max-width:600px}.footer{padding-bottom:85px}}
@media(max-width:800px){.header-inner.wrap,.footer.wrap,.page-shell{width:calc(100% - 48px)}}
@media(max-width:550px){.header-inner.wrap,.footer.wrap,.page-shell{width:calc(100% - 36px)}.brand strong{font-size:20px;letter-spacing:1px}.project-sidebar{right:12px;bottom:16px}.project-features{grid-template-columns:1fr}.sidebar-panel{min-width:125px}.sidebar-toggle{font-size:11px;padding:10px 13px}.sidebar-panel nav a{font-size:11px}}
.project-section{scroll-margin-top:16px}