.demo-carousel{min-width:0;margin-top:30px}
.demo-carousel-head{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:30px;padding-top:32px;border-top:1px solid var(--rule)}
.demo-carousel-guide{font-size:15px;line-height:1.8;margin:10px 0 0}
.demo-carousel-title{font-family:Georgia,'Times New Roman',serif;font-size:clamp(25px,3vw,36px);font-weight:400;line-height:1.35;letter-spacing:.07em;color:#9b6667;margin:0 0 16px}
.demo-carousel-controls{display:flex;align-items:center;gap:18px;flex-shrink:0}
.demo-carousel-controls button{display:grid;place-items:center;width:46px;height:46px;border:1px solid #c8b2ac;border-radius:50%;background:transparent;color:var(--ink);font-size:21px;cursor:pointer;touch-action:manipulation}
.demo-carousel-controls button:hover:not(:disabled){background:var(--rose-soft)}
.demo-carousel-controls button:disabled{opacity:.3;cursor:default}
.demo-carousel-controls span{font-size:11px;letter-spacing:.12em;min-width:52px;text-align:center;font-variant-numeric:tabular-nums}
.demo-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:32px;align-items:stretch;padding:8px 0 28px;overscroll-behavior-x:contain}
.demo-track::-webkit-scrollbar{display:none}
.works-page #design .demo-track>.case{flex:0 0 100%;width:100%;min-width:0;box-sizing:border-box;scroll-snap-align:start;scroll-snap-stop:always;margin:0;padding:0;border:0;opacity:1;transform:none;transition:none;align-content:start;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:36px}
.works-page #design .demo-track .case-media{order:0}
.demo-track .mock-link:hover{transform:none}
.demo-track .mock{box-shadow:none}
.demo-track .case-text{align-self:center}
.demo-carousel-bottom{display:flex;align-items:center;gap:14px;padding-top:18px;border-top:1px solid var(--rule);font-size:11px;color:var(--ink-soft)}
.demo-carousel-bottom select{max-width:55%;min-width:0;border:0;border-bottom:1px solid var(--rose-soft);border-radius:0;padding:10px 24px 10px 0;background:transparent;color:var(--ink);font:inherit;font-size:14px}
.demo-carousel-bottom .demo-carousel-controls{margin-left:auto;color:var(--ink)}
.demo-carousel button:focus-visible,.demo-carousel select:focus-visible,.demo-track:focus-visible{outline:2px solid var(--rose);outline-offset:4px}
@media(max-width:879px){.works-page #design .demo-track>.case{grid-template-columns:minmax(0,1fr);gap:24px}.demo-track .case-text{align-self:start}.demo-track .mock img{aspect-ratio:16/10}.demo-carousel-head{align-items:flex-start;gap:18px;flex-direction:column}.demo-carousel-guide{font-size:14px}.demo-carousel-bottom{flex-wrap:wrap;gap:10px}.demo-carousel-bottom select{max-width:calc(100% - 85px);flex:1}.demo-carousel-bottom .demo-carousel-controls{width:100%;justify-content:flex-end;margin-top:12px}.demo-track .case-body{font-size:13px}.demo-track .case-lead{font-size:14px}.demo-track .dw-note{font-size:10px}}

/* Preview adjacent demos without shrinking the main reading area. */
@media(min-width:880px){
 .demo-track{--slide-width:min(844px,78vw);width:100vw;margin-left:calc(50% - 50vw);box-sizing:border-box;padding-inline:calc((100vw - var(--slide-width))/2);scroll-padding-inline:calc((100vw - var(--slide-width))/2);gap:48px;mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent)}
 .works-page #design .demo-track>.case{flex-basis:var(--slide-width);width:var(--slide-width);scroll-snap-align:center}
}
.demo-track [data-loop-clone]{pointer-events:none}
@media(max-width:879px){.demo-carousel-bottom .demo-carousel-controls{order:-1;flex-basis:100%;margin:0 0 12px;justify-content:center}}