.workshop-cover{display:flex;align-items:center;justify-content:center}.workshop-cover img{width:min(88%,340px);height:250px;object-fit:contain;display:block;box-shadow:0 6px 18px rgba(44,38,31,.16)}
.workshop-detail .artwork-detail-intro::before{background-image:url('./assets/taobao-ai-workshop/page-03.png');background-position:90% center;background-size:auto 86%;filter:saturate(.65) blur(5px)}.workshop-detail .artwork-detail-intro::after{background:linear-gradient(90deg,rgba(247,244,237,.93),rgba(247,244,237,.8) 42%,rgba(247,244,237,.25) 78%)}.workshop-content{padding:6vw;max-width:1500px;margin:auto}.workshop-section+.workshop-section{margin-top:clamp(70px,9vw,130px)}.workshop-section h2{margin:0 0 36px;padding-top:20px;border-top:1px solid #aaa49b;color:#62605d;font:13px/1.5 monospace}.workshop-subgroup+.workshop-subgroup{margin-top:90px}.workshop-subgroup h3{font-size:clamp(23px,2.3vw,32px);font-weight:450;margin:0 0 12px}.workshop-item{margin:0 0 52px}.workshop-frame{display:flex;align-items:center;justify-content:center;width:100%;height:clamp(320px,50vw,680px);background:#eeebe5}.workshop-frame img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.workshop-item figcaption{padding:14px 0 0}.workshop-item figcaption h4{margin:0;color:#333;font:13px/1.5 monospace}.workshop-item figcaption p{margin:5px 0 0;color:#62605d;font:12px/1.5 monospace}.workshop-frame:focus-visible{outline:2px solid #62605d;outline-offset:4px}@media(max-width:600px){.workshop-detail .artwork-detail-intro::after{background:rgba(247,244,237,.9)}.workshop-content{padding:22px}.workshop-frame{height:260px}.workshop-item{margin-bottom:40px}}

.workshop-foundations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,40px)}
.workshop-foundations .workshop-item{min-width:0;margin-bottom:0}
.workshop-foundations .workshop-frame{height:clamp(240px,33vw,440px)}
.workshop-group-intro{max-width:76ch;margin:0 0 30px;color:#62605d;font:12px/1.5 monospace}
@media(max-width:600px){.workshop-foundations .workshop-frame{height:220px}.workshop-detail .artwork-detail-intro::before{background-size:auto 70%;background-position:70% center}.workshop-detail .artwork-detail-intro::after{background:rgba(247,244,237,.77)}}

/* Workshop entry: a compact stack of the original interface pages. */
.workshop-stack-stage{position:relative;display:block;width:min(70%,230px);aspect-ratio:2400/1707}
.workshop-cover .workshop-stack-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#f7f4ed;box-shadow:0 6px 18px rgba(44,38,31,.16);transition:transform .45s ease}
.workshop-stack-stage img:nth-child(1){transform:translate(-5%,-3%) rotate(-8deg)}
.workshop-stack-stage img:nth-child(2){transform:translate(-3%,-2%) rotate(-5deg)}
.workshop-stack-stage img:nth-child(3){transform:translate(-1%,-1%) rotate(-2deg)}
.workshop-stack-stage img:nth-child(4){transform:rotate(1deg)}
.workshop-cover:hover .workshop-stack-stage img:nth-child(1),.workshop-cover:focus-visible .workshop-stack-stage img:nth-child(1){transform:translate(-13%,-4%) rotate(-12deg)}
.workshop-cover:hover .workshop-stack-stage img:nth-child(4),.workshop-cover:focus-visible .workshop-stack-stage img:nth-child(4){transform:translate(5%,1%) rotate(4deg)}
/* Preserve the two paired foundations; arrange interface pages by existing group. */
.workshop-subgroup{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:22px;row-gap:32px;align-items:start}
.workshop-subgroup h3,.workshop-subgroup .workshop-group-intro{grid-column:1/-1}
.workshop-subgroup h3{margin-bottom:-20px}
.workshop-subgroup .workshop-group-intro{margin-bottom:0}
.workshop-subgroup .workshop-item{min-width:0;margin:0}
.workshop-subgroup .workshop-frame{height:auto;aspect-ratio:2400/1707}
@media(max-width:700px){.workshop-subgroup{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}}
@media(prefers-reduced-motion:reduce){.workshop-cover .workshop-stack-stage img{transition:none}}