/* Gallery of data-free functional screenshots; typography follows the shared site roles. */
.custom-system-page .detail-hero{padding-block:55px 60px}.custom-system-page .detail-hero h1{font-size:60px}.custom-system-page .detail-lead{font-size:21px}.system-showcase{background:#f2f4f8;padding-block:65px}.system-showcase h2,.system-scope>h2{font-size:38px}.system-gallery{min-width:0}.system-gallery-viewport{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:20px;overscroll-behavior-x:contain}.system-gallery-viewport::-webkit-scrollbar{display:none}.system-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;margin:0}.system-image-open{display:block;width:100%;padding:0;cursor:zoom-in;border:1px solid #dce0df;border-radius:20px;overflow:hidden;background:#f4f2eb}.system-image-open img{display:block;width:100%;height:auto;aspect-ratio:1120/752;object-fit:contain}.system-slide figcaption{display:grid;grid-template-columns:200px 1fr;align-items:baseline;gap:25px;padding:25px 4px 0}.system-slide h3{font-size:23px;font-weight:600;color:var(--ink);margin:0}.system-slide figcaption p{font-size:15px;line-height:1.8;color:var(--muted);margin:0}.system-gallery-controls{display:flex;align-items:center;gap:22px;margin-top:24px;padding:0 4px}.system-gallery-count{min-width:52px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}.system-gallery-count>[data-gallery-current]{font-weight:600;color:var(--navy);font-size:20px}.system-gallery-hint{font-size:12px;color:var(--muted);margin-right:auto}.system-gallery-arrows{display:flex;gap:10px;margin-left:auto}.system-gallery-arrows button{width:42px;height:42px;border-radius:50%;background:#e1e5ed;color:var(--navy);font-size:22px;display:grid;place-items:center}.system-gallery-arrows button:disabled{opacity:.35;cursor:default}.system-gallery-arrows button:not(:disabled):hover{background:#d3dbe8}.system-gallery-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:23px}.system-gallery-thumbs button{padding:6px;border-radius:12px;border:1px solid transparent;text-align:left;background:transparent;opacity:.6;transition:opacity .15s}.system-gallery-thumbs button[aria-current=true]{border-color:#173d78;opacity:1;background:#fff}.system-gallery-thumbs button:hover{opacity:1}.system-gallery-thumbs img{display:block;width:100%;height:auto;aspect-ratio:1120/752;border-radius:7px}.system-gallery-thumbs span{display:block;font-size:12px;padding:9px 4px 3px}.system-showcase>.wrap>.caption{font-size:11px;line-height:1.9;margin-top:20px}.custom-system-page .system-scope{padding-block:65px}.custom-system-page .detail-bottom h2{font-size:38px}.system-image-dialog{width:min(1300px,calc(100vw - 56px));max-width:none;max-height:calc(100dvh - 56px);padding:20px 24px;border:0;border-radius:20px;background:#f9fafb}.system-image-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}.system-image-dialog h2{font-size:20px;font-weight:600;margin:0}.system-image-dialog [data-close]{font-size:13px;color:var(--muted);padding:9px 13px;background:#e9edf3;border-radius:25px}.system-image-dialog [data-close]>span{font-size:19px;margin-left:6px}.system-image-zoom{overflow:auto;max-height:calc(100dvh - 200px);border-radius:12px;border:1px solid #dce0df}.system-image-zoom img{display:block;width:100%;height:auto}.system-image-dialog>p{font-size:11px;color:var(--muted);line-height:1.8;margin-top:12px}
@media(max-width:760px){.custom-system-page .detail-hero{padding-block:35px 42px}.custom-system-page .detail-hero h1{font-size:38px}.custom-system-page .detail-lead{font-size:17px}.system-showcase{padding-block:42px}.system-showcase .section-head{display:block;margin-bottom:25px}.system-showcase h2,.system-scope>h2{font-size:28px}.system-showcase .section-note{font-size:13px;margin-top:16px}.system-gallery-viewport,.system-image-open{border-radius:12px}.system-slide figcaption{display:block;padding:20px 0 0}.system-slide h3{font-size:22px}.system-slide figcaption p{font-size:13px;margin-top:11px;line-height:1.9;min-height:50px}.system-gallery-controls{gap:12px;margin-top:18px;padding:0}.system-gallery-hint{font-size:10px;line-height:1.7;max-width:90px}.system-gallery-arrows{gap:8px}.system-gallery-arrows button{width:36px;height:36px;font-size:20px}.system-gallery-count{font-size:11px;min-width:43px}.system-gallery-count>[data-gallery-current]{font-size:18px}.system-gallery-thumbs{gap:6px;margin-top:20px}.system-gallery-thumbs button{padding:3px;border-radius:8px}.system-gallery-thumbs img{border-radius:4px}.system-gallery-thumbs span{font-size:10px;padding:7px 0 3px;white-space:nowrap;text-align:center}.system-showcase>.wrap>.caption{font-size:10px;margin-top:18px}.custom-system-page .system-scope{padding-block:45px}.custom-system-page .detail-bottom h2{font-size:29px}.system-image-dialog{width:calc(100vw - 24px);padding:16px;max-height:calc(100dvh - 24px);border-radius:15px}.system-image-dialog h2{font-size:18px}.system-image-dialog [data-close]{font-size:11px;padding:7px 10px}.system-image-zoom{max-height:calc(100dvh - 160px)}.system-image-zoom img{width:850px;max-width:none}.system-image-dialog>p{font-size:10px}}
@media(max-width:350px){.custom-system-page .detail-hero h1{font-size:32px}.system-gallery-thumbs span{font-size:9px}.system-gallery-controls{gap:8px}.system-gallery-hint{max-width:76px}}
@media(prefers-reduced-motion:reduce){.system-gallery-thumbs button{transition:none}}