/* Exact-size specimen viewers. Site design and typography remain in site.css. */
.ct-demo{min-width:0;width:100%;max-width:100%;color:#fff9ed;font-family:'Space Grotesk',Arial,sans-serif;text-align:left}
.ct-demo *, .ct-demo *::before,.ct-demo *::after{box-sizing:border-box}
.ct-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-bottom:11px}
.ct-toolbar button,.ct-controls button{font-family:inherit;font-size:11px;line-height:1.25;font-weight:800;letter-spacing:.015em;border:1px solid #8e8198;border-radius:999px;padding:9px 13px;color:#fff9ed;background:#211c2b;cursor:pointer}
.ct-toolbar button[aria-pressed=true]{color:#17131f;background:#b9ff00;border-color:#b9ff00}
.ct-toolbar button:hover,.ct-controls button:hover{border-color:#00e5ff}
.ct-demo button:focus-visible,.ct-stage:focus-visible,.ct-downloads a:focus-visible{outline:3px solid #00e5ff;outline-offset:3px}
.ct-controls button:disabled{opacity:.5;cursor:default}
.ct-scale-label{font-family:monospace;font-size:10px;line-height:1.6;margin-left:auto;white-space:nowrap;color:#ddd4e1}
.ct-stage{display:block;width:100%;min-width:0;max-width:100%;overflow:auto;overscroll-behavior-x:contain;background:repeating-linear-gradient(45deg,#2b2434 0,#2b2434 1px,#211c2b 1px,#211c2b 15px);border:1px solid #625466;border-radius:3px;padding:12px;scrollbar-color:#b9ff00 #211c2b;scrollbar-width:auto}
.ct-panel{min-width:0;display:block}
.ct-panel[hidden]{display:none!important}
.ct-native-wrap{width:max-content;min-width:100%;display:flex;align-items:center;justify-content:center}
.ct-native-wrap>a{display:block;width:var(--ct-w);height:var(--ct-h);flex:0 0 auto;line-height:0}
.ct-demo .ct-native-frame,.ct-demo .ct-native-gif{display:block!important;box-sizing:border-box!important;flex:none!important;width:var(--ct-w)!important;min-width:var(--ct-w)!important;max-width:var(--ct-w)!important;height:var(--ct-h)!important;min-height:var(--ct-h)!important;max-height:var(--ct-h)!important;aspect-ratio:auto!important;border:0!important;padding:0!important;margin:0!important;border-radius:0!important;transform:none!important;object-fit:fill!important}
.ct-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.ct-demo .ct-status{font-family:monospace;font-size:10px;color:#ddd4e1;line-height:1.6}
.ct-demo .ct-note{color:#d7d1dc;font-size:11px;line-height:1.7;margin:10px 0 0;max-width:none}
.ct-demo .ct-downloads{display:flex;align-items:center;flex-wrap:wrap;gap:10px 17px;border-top:1px solid #514959;margin-top:12px;padding-top:12px}
.ct-demo .ct-downloads a{font-size:11px;font-weight:800;text-decoration:underline;text-underline-offset:3px;line-height:1.5;color:#00e5ff}
.ct-demo .ct-downloads a:hover{color:#b9ff00}
.ct-js-control{display:none}.ct-js .ct-js-control{display:inline-block}
.reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.reference-card,.size-detail-grid>*{min-width:0}
.reference-card.ct-card-wide{grid-column:1/-1}
.size-hero-preview:has(.ct-demo){display:block;min-width:0;padding:20px}
.size-detail-grid.ct-wide-detail{grid-template-columns:minmax(0,1fr)}
.ct-wide-detail .lead{max-width:850px}
.ct-source-panel{margin-top:26px}.ct-source-panel pre{max-height:420px;overflow:auto;font-size:11px;line-height:1.6;white-space:pre}
.ct-page-links{display:flex;flex-wrap:wrap;gap:10px;margin:23px 0 25px}
.ct-page-links a{border:1px solid #625466;border-radius:999px;padding:8px 14px;font-family:monospace;font-size:12px;color:#fff9ed;line-height:1.5}
.ct-page-links a:hover{background:#b9ff00;color:#17131f}
.ct-library-head{max-width:780px;margin-bottom:26px}.ct-library-head h2{font-size:clamp(28px,3.5vw,46px)}.ct-library-head p{font-size:15px;margin-top:16px;line-height:1.8}
.ct-download-all{margin-bottom:28px}
.lab-previews{min-width:0;grid-template-columns:repeat(2,minmax(0,1fr))}
.lab-preview{min-width:0}.lab-preview .ct-demo{background:#211c2b;padding:12px}.lab-preview .ct-toolbar{gap:6px}.lab-preview .ct-toolbar button{font-size:10px;padding:8px 9px}.lab-preview .ct-scale-label{width:100%;margin:0}.lab-preview .ct-controls button{font-size:10px;padding:8px 9px}.lab-preview .ct-downloads{gap:9px}
.lab-preview .ct-status{display:block;width:100%}.lab-preview .ct-stage{padding:7px}
.lab-preview .ct-note{font-size:10px;margin-top:9px}.lab-preview .ct-downloads a{font-size:10px}
@media(max-width:900px){.lab-previews{grid-template-columns:minmax(0,1fr)}.lab-preview{max-width:460px}.ct-demo .ct-scale-label{margin-left:0}.size-detail-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:650px){.reference-grid{grid-template-columns:minmax(0,1fr)}.reference-card.ct-card-wide{grid-column:auto}.ct-stage{padding:9px}.size-hero-preview:has(.ct-demo){padding:14px}.ct-controls .ct-status{width:100%}.ct-toolbar{gap:6px}.ct-toolbar button{font-size:10px;padding:8px 11px}}
@media(prefers-reduced-motion:reduce){.ct-demo *{scroll-behavior:auto}}
@media print{.ct-toolbar button,.ct-controls,.ct-downloads,.ct-note{display:none!important}.ct-stage{overflow:visible}}

/* Keep dimension specifications readable on the light editorial canvas. */
.spec-panel.ink{background:#17131f}
/* Both homepage specimen canvases fit at native size on a desktop. */
@media(min-width:1200px){.lab-grid:has(.ct-demo){grid-template-columns:minmax(0,1fr) minmax(0,2.8fr);gap:40px}}
@media(min-width:901px) and (max-width:1199px){.lab-grid:has(.ct-demo){grid-template-columns:minmax(0,1fr)}.lab-grid:has(.ct-demo) .lab-previews{max-width:none;width:100%}}