.artifact{color:#20382e;background:#faf9f4;border-radius:12px;overflow:hidden;text-align:left;font-family:'Hanken Grotesk','Noto Sans TC',sans-serif;box-shadow:0 22px 50px #23114622;container-type:inline-size}.visual-browser{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:#fff;border-bottom:1px solid #20382e18;font-size:9px;letter-spacing:.08em}.visual-browser>span:first-child{color:#b6b0c3;font-size:8px;letter-spacing:3px}.artifact-cover{display:grid;grid-template-columns:1fr 1fr;min-height:230px}.artifact-cover>div{padding:8%;display:flex;flex-direction:column;justify-content:center}.artifact-cover>img{width:100%;height:100%;object-fit:cover;min-height:0}.artifact-cover span{font-size:10px;letter-spacing:.1em}.artifact-cover strong{font-size:clamp(22px,4.8cqw,42px);line-height:1.35;font-weight:800;margin:16px 0 8px;letter-spacing:-.025em}.artifact-cover p{font-size:11px;margin:0}.artifact-line{margin-top:25px;padding-top:12px;border-top:1px solid #20382e33;font-size:10px;display:flex;justify-content:space-between}.artifact-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:20px}.artifact-strip img{width:100%;height:100px;object-fit:cover;border-radius:3px}.artifact-search-body{padding:6% 8%}.artifact-search-pill{display:flex;justify-content:space-between;border:1px solid #dedce4;border-radius:30px;padding:13px 20px;font-size:14px;background:white;margin-bottom:24px}.artifact-search-body>p{font-size:12px;color:#5f635f;margin:10px 0}.artifact-search-body>strong{font-size:clamp(15px,3cqw,24px);color:#3c36ac}.artifact-search-body>div{padding:12px 0;border-bottom:1px solid #ddd;font-size:13px;display:flex;justify-content:space-between}.artifact-search-body hr{border:0;border-top:1px solid #ddd;margin:24px 0}.artifact-search-body>b{font-size:15px}.artifact-form-body{display:grid;grid-template-columns:1fr 1fr;gap:6%;padding:6%}.artifact-form-body strong{font-size:clamp(20px,4cqw,33px);line-height:1.4}.artifact-form-body img{width:100%;height:140px;object-fit:cover;margin-top:18px}.artifact-form-body p{font-size:9px;letter-spacing:.1em}.artifact-form-body>div>span{display:block;font-size:11px;color:#69766e;margin-top:20px}.artifact-form-body i{display:block;border-bottom:1px solid #cfd5ce;font-size:12px;font-style:normal;padding:6px 0 10px;color:#20382e}.artifact-form-body em{background:#20382e;color:white;padding:12px;font-size:11px;display:block;font-style:normal;margin-top:24px}.artifact-dash-grid{display:grid;grid-template-columns:100px 1fr;min-height:340px}.artifact-dash-grid>aside{background:#263b33;color:#e5efde;display:flex;flex-direction:column;padding:20px 12px;gap:22px;font-size:10px}.artifact-dash-grid>aside>b{font-size:28px}.artifact-dash-grid>div{padding:24px 18px}.artifact-dash-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.artifact-dash-heading>b{font-size:clamp(13px,2.6cqw,24px)}.artifact-dash-heading>span{font-size:9px;color:#536257}.artifact-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0;background:#e9eee4;border-radius:8px}.artifact-metrics>div{padding:12px;font-size:10px}.artifact-metrics b{display:block;font-size:28px}.artifact-table-head,.artifact-table-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:13px 0;border-bottom:1px solid #20382e18;font-size:10px}.artifact-table-head{color:#617066}.artifact-table-row small{display:block;font-size:8px;font-weight:400;color:#66746c;margin-bottom:5px}.artifact-table-row em{font-size:9px;background:#e6edcb;padding:5px 8px;border-radius:20px;font-style:normal;white-space:nowrap}.artifact-dev{background:#202733;color:#dce2ed}.artifact-dev .visual-browser{background:#2a3242;border-color:#ffffff18;color:#dce2ed}.artifact-dev-body{display:grid;grid-template-columns:100px 1fr;min-height:340px}.artifact-dev-body>aside{background:#181e29;padding:20px 12px;color:#b2bbcf;font-size:10px;line-height:2}.artifact-dev-body>div{padding:24px}.artifact-dev-body strong{font-size:clamp(17px,3cqw,26px)}.artifact-dev-body pre{font-size:14px;line-height:1.9;margin:22px 0;font-family:ui-monospace,monospace;white-space:pre-wrap}.artifact-dev-body pre span{color:#c3acff}.artifact-dev-body pre b{color:#caff8a;font-weight:400}.artifact-terminal{border-top:1px solid #ffffff30;padding-top:20px;font-size:11px;color:#caff8a}@media(max-width:540px){.artifact-cover{min-height:180px}.artifact-strip{gap:6px;padding:12px}.artifact-strip img{height:70px}.artifact-dash-grid{grid-template-columns:58px 1fr;min-height:270px}.artifact-dash-grid>aside{font-size:8px;padding:12px 7px;gap:18px}.artifact-dash-grid>aside>b{font-size:22px}.artifact-dash-grid>div{padding:16px 10px}.artifact-metrics{margin:15px 0}.artifact-metrics>div{padding:8px;font-size:8px}.artifact-metrics b{font-size:24px}.artifact-form-body img{height:95px}.artifact-form-body>div>b{font-size:12px}.artifact-dev-body{grid-template-columns:75px 1fr;min-height:280px}.artifact-dev-body>div{padding:20px 12px}.artifact-dev-body pre{font-size:11px}}

/* v18：縮圖共用正式demo.html的實際桌面／手機畫面。 */
.demo-thumbnail{display:flex;flex-direction:column;min-width:0;background:#f5f4ed}
.demo-thumbnail .visual-browser{flex:0 0 auto;gap:12px;min-height:36px;padding:10px 14px}
.demo-thumbnail .thumbnail-label{flex:1;min-width:0;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;letter-spacing:0}
.demo-thumbnail .visual-browser>span:last-child{font-size:8px;white-space:nowrap;color:#5b6a60}
.demo-thumbnail picture{display:block;aspect-ratio:1138/760;min-height:0;width:100%;overflow:hidden;background:#f5f4ed}
.demo-thumbnail img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top;user-select:none;-webkit-user-drag:none}
.example-visual .demo-thumbnail{height:100%}
.example-visual .demo-thumbnail picture{flex:1;aspect-ratio:auto}
.featured-project .demo-thumbnail{height:100%}
.featured-project .demo-thumbnail picture{flex:1;aspect-ratio:auto}
.comparison-after .demo-thumbnail{height:100%}
.comparison-after .demo-thumbnail picture{flex:1;aspect-ratio:auto}
.project-stage-visual .demo-thumbnail{min-height:0}
#flow-screen .demo-thumbnail{border-radius:0;box-shadow:none}
#flow-screen .demo-thumbnail .visual-browser{display:none}
@media(max-width:540px){
 .demo-thumbnail .visual-browser{min-height:32px;padding:8px 10px;gap:8px;font-size:8px}
 .demo-thumbnail .visual-browser>span:first-child{font-size:6px;letter-spacing:2px}
 .demo-thumbnail .visual-browser>span:last-child{font-size:7px}
 .project-stage-visual .demo-thumbnail picture{aspect-ratio:3/4}
 .example-visual{height:390px;padding:18px}
 .example-visual .demo-thumbnail img{object-fit:contain;object-position:center top}
 .featured-project>[data-visual]{height:350px;padding:20px 20px 0}
 .featured-project .demo-thumbnail img{object-fit:contain;object-position:center top}
 #flow-screen .demo-thumbnail picture{aspect-ratio:3/4}
 .comparison-after .demo-thumbnail img{object-position:center top}
}