.project-canvas{margin:32px 4% 0;padding:25px 0 0;border-top:1px solid #6a81875c}
.project-canvas-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:17px}
.project-canvas h3{margin:0;color:#edc0d7;font:400 31px/1.4 TitleCN,BodyCN,sans-serif}
.project-canvas-heading p{margin:0;color:#b7cece;font:400 15px/1.5 MetaCN,BodyCN,sans-serif}
.project-canvas-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.project-canvas-grid.is-single{grid-template-columns:1fr}
.project-canvas-grid figure{margin:0;min-width:0}
.project-canvas-grid figcaption{margin-top:12px;color:#d5e2df;font:400 18px/1.5 BodyCN,sans-serif}
.project-canvas-preview{position:relative;display:block;width:100%;padding:12px;background:#0b1820;border:1px solid #6b8184;cursor:zoom-in}
.project-canvas-preview img{display:block;width:100%;height:auto;aspect-ratio:1.6;max-height:520px;object-fit:contain}
.project-canvas-grid.is-single img{aspect-ratio:auto}
.project-canvas-preview:focus-visible{outline:2px solid #edacd7;outline-offset:4px}
.project-canvas-note{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:10px}
.project-canvas-note>p{margin:0;color:#adc4c5;font:400 16px/1.7 BodyCN,sans-serif}
:root .project-canvas-note .art-action{--action-width:170px;--action-height:60px;--action-art:var(--action-compact);font-size:17px;flex:none}
@media(max-width:600px){.project-canvas{margin:24px 5% 0;padding-top:20px}.project-canvas h3{font-size:26px}.project-canvas-heading p{font-size:14px}.project-canvas-grid{grid-template-columns:1fr;gap:18px}.project-canvas-preview{padding:6px}.project-canvas-grid figcaption{margin-top:8px;font-size:16px}.project-canvas-note{display:block}.project-canvas-note>p{font-size:14px}.project-canvas-note .art-action{margin-top:6px}}