/* Public deck gallery and slide viewer. Scoped to avoid changing the studio. */
.demo-page .showcase{--gallery-bg:#141c25;--gallery-panel:#202b36;--gallery-line:#344251;--gallery-text:#edf2f7;--gallery-muted:#aab8c8;--gallery-accent:#78aaff;background:var(--gallery-bg);color:var(--gallery-text);min-height:80vh;padding-bottom:80px}
.demo-page .showcase *{box-sizing:border-box}
.demo-page .showcase a{color:inherit;text-decoration:none}
.demo-page .showcase a:focus-visible,.demo-page .showcase button:focus-visible{outline:3px solid var(--gallery-accent);outline-offset:3px}
.demo-page .showcase-wrap{max-width:1390px;margin-inline:auto;padding-inline:clamp(20px,4vw,64px)}
.demo-page .showcase-hero{background:radial-gradient(circle at 85% 0%,#234468 0,transparent 32%),linear-gradient(140deg,#1d2733,#111820);border-bottom:1px solid var(--gallery-line);padding:70px 0 52px}
.demo-page .showcase-eyebrow{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gallery-accent);margin:0 0 12px}
.demo-page .showcase-hero h1{font-size:clamp(38px,5vw,72px);line-height:1.08;letter-spacing:-.04em;margin:0 0 16px;font-weight:750}
.demo-page .showcase-hero>div>p:not(.showcase-eyebrow){color:#c5d0dc;max-width:720px;font-size:18px;line-height:1.7;margin:0}
.demo-page .showcase-stats{display:flex;flex-wrap:wrap;gap:0;margin-top:40px}
.demo-page .showcase-stats>div{min-width:160px;padding:0 34px 0 0;margin-right:34px;border-right:1px solid var(--gallery-line);display:flex;flex-direction:column;gap:6px}
.demo-page .showcase-stats>div:last-child{border:0}
.demo-page .showcase-stats strong{font-size:34px;line-height:1;color:#fff;font-weight:740}
.demo-page .showcase-stats span{font-size:12px;letter-spacing:.08em;color:var(--gallery-muted);text-transform:uppercase}
.demo-page .showcase-actions,.demo-page .showcase-detail-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.demo-page .showcase-actions a,.demo-page .showcase-detail-actions a,.demo-page .showcase-detail-bottom a{border:1px solid #647c97;border-radius:8px;padding:11px 18px;font-weight:650;font-size:14px;transition:background .2s,border-color .2s}
.demo-page .showcase-actions a:first-child,.demo-page .showcase-detail-actions .showcase-primary,.demo-page .showcase-detail-bottom .showcase-primary{background:#4687e2;border-color:#4687e2;color:#fff}
.demo-page .showcase-actions a:hover,.demo-page .showcase-detail-actions a:hover,.demo-page .showcase-detail-bottom a:hover{background:#30517b;border-color:#92b9f2}
.demo-page .showcase-filter-bar{position:sticky;top:0;z-index:5;background:#1b2530;border-bottom:1px solid var(--gallery-line);box-shadow:0 8px 20px #0003}
.demo-page .showcase-filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding-top:12px;padding-bottom:12px}
.demo-page .showcase-filters button{border:1px solid transparent;background:transparent;color:#becbd9;white-space:nowrap;padding:9px 13px;border-radius:7px;cursor:pointer;font:inherit;font-size:13px}
.demo-page .showcase-filters button:hover{background:#2b3948;color:#fff}
.demo-page .showcase-filters button.active{background:#30517b;color:#fff;border-color:#5c8ac1}
.demo-page .showcase-filters span{opacity:.7;margin-left:3px}
.demo-page .showcase-section{padding-top:58px}
.demo-page .showcase-section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:26px}
.demo-page .showcase-section-heading h2{margin:0;font-size:clamp(26px,3vw,38px);letter-spacing:-.025em}
.demo-page .showcase-section-heading>p{color:var(--gallery-muted);font-size:13px;line-height:1.6;max-width:470px;text-align:right;margin:0}
.demo-page .showcase-section-heading a,.demo-page .showcase-credit a{color:#a7c7fb;text-decoration:underline}
.demo-page .showcase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.demo-page .showcase-card{display:block;min-width:0;background:var(--gallery-panel);border:1px solid var(--gallery-line);border-radius:12px;overflow:hidden;transition:transform .22s,border-color .22s,box-shadow .22s}
.demo-page .showcase-card:hover{transform:translateY(-4px);border-color:#6795cb;box-shadow:0 16px 32px #0005}
.demo-page .showcase-card[hidden]{display:none}
.demo-page .showcase-card-preview{position:relative;display:block;aspect-ratio:16/9;background:#0b1119;overflow:hidden}
.demo-page .showcase-card-preview img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.demo-page .showcase-card:hover img{transform:scale(1.035)}
.demo-page .showcase-card-preview time,.demo-page .showcase-sample-badge{position:absolute;top:10px;right:10px;background:#0d1722d9;border:1px solid #ffffff36;border-radius:6px;padding:5px 8px;color:#e8eff9;font-size:11px;font-weight:650}
.demo-page .showcase-card-body{display:flex;flex-direction:column;padding:17px 18px 19px;min-height:196px}
.demo-page .showcase-card-body>strong{color:#f4f7fc;font-size:18px;line-height:1.35;font-weight:680}
.demo-page .showcase-card-body>small{color:#90b8ec;margin-top:7px;font-size:12px}
.demo-page .showcase-card-body i{font-style:normal;padding:0 4px;color:#708399}
.demo-page .showcase-card-desc{color:#b7c3d1;font-size:12.5px;line-height:1.6;margin-top:11px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.demo-page .showcase-card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:13px}
.demo-page .showcase-card-tags em{font-style:normal;font-size:10px;color:#b5c9df;border:1px solid #496079;border-radius:4px;padding:3px 6px}
.demo-page .showcase-secondary{border-top:1px solid var(--gallery-line);background:#1a2430;margin-top:80px;padding-bottom:68px}
.demo-page .showcase-final{margin-top:0;background:#151d26}
.demo-page .showcase-style-grid .showcase-card-body{min-height:125px}
.demo-page .showcase-style-grid .showcase-card-desc{-webkit-line-clamp:2}
.demo-page .showcase-style-link{color:#98bcfa;font-size:12px;margin-top:auto;padding-top:10px}
.demo-page .showcase-credit{font-size:12px;color:var(--gallery-muted);margin:25px 0 0}
.demo-page .showcase-breadcrumb{display:flex;gap:12px;align-items:center;padding:28px 0;color:var(--gallery-muted);font-size:13px}
.demo-page .showcase-breadcrumb a:hover{color:#fff;text-decoration:underline}
.demo-page .showcase-detail-header{padding:24px 0 48px;border-bottom:1px solid var(--gallery-line)}
.demo-page .showcase-detail-header h1{font-size:clamp(32px,4vw,54px);line-height:1.2;margin:0 0 20px}
.demo-page .showcase-detail-header>p:not(.showcase-eyebrow){color:#c0ccda;font-size:15px;line-height:1.8;max-width:1000px}
.demo-page .showcase-detail-header .showcase-detail-note{font-size:12px;color:var(--gallery-muted);margin:20px 0 0}
.demo-page .showcase-slide-list{max-width:1050px;margin:42px auto;display:grid;gap:32px}
.demo-page .showcase-slide{margin:0;background:#1f2a36;border:1px solid var(--gallery-line);border-radius:10px;overflow:hidden}
.demo-page .showcase-slide-open{display:block;width:100%;padding:0;border:0;background:#0e1520;cursor:zoom-in}
.demo-page .showcase-slide-open img{display:block;width:100%;height:auto;max-height:80vh;object-fit:contain;margin:auto}
.demo-page .showcase-slide figcaption{padding:12px 16px;display:flex;gap:16px;align-items:baseline;color:#d5dfeb;font-size:13px}
.demo-page .showcase-slide figcaption span{color:#8cb5eb;white-space:nowrap;font-size:12px}
.demo-page .showcase-slide figcaption strong{font-weight:500}
.demo-page .showcase-detail-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:50px auto;max-width:1050px}
.showcase-viewer{width:min(96vw,1500px);max-width:none;max-height:96vh;padding:0;background:#0e141b;border:1px solid #4b6076;border-radius:10px;color:#fff;box-shadow:0 25px 80px #000b}
.showcase-viewer::backdrop{background:#03080ee8}
.showcase-viewer-toolbar{display:flex;gap:18px;align-items:center;padding:12px 20px;color:#cad8e8}
.showcase-viewer-toolbar strong{font-size:13px;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.showcase-viewer-toolbar button,.showcase-viewer-stage button{border:0;background:#26384b;color:#fff;cursor:pointer;border-radius:6px;padding:9px 12px}
.showcase-viewer-stage{display:flex;align-items:center;gap:8px;padding:0 10px 14px}
.showcase-viewer-stage img{display:block;max-height:calc(96vh - 83px);max-width:calc(100% - 106px);min-width:0;object-fit:contain;margin:auto}
.showcase-viewer-stage button{font-size:28px;line-height:1;width:45px;height:60px;flex:none}
@media(max-width:1000px){.demo-page .showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.demo-page .showcase-hero{padding:55px 0 40px}.demo-page .showcase-grid{grid-template-columns:1fr}.demo-page .showcase-section-heading{display:block}.demo-page .showcase-section-heading>p{text-align:left;margin-top:12px}.demo-page .showcase-stats>div{min-width:100px;margin-right:12px;padding-right:12px}.demo-page .showcase-stats strong{font-size:27px}.demo-page .showcase-slide figcaption{align-items:start}.showcase-viewer-toolbar strong{display:none}.showcase-viewer-stage button{width:32px;padding:5px}.showcase-viewer-stage img{max-width:calc(100% - 80px)}}