/* The catalogue belongs to every design. Its isolated palette keeps previews comparable. */
.design-gallery-trigger { align-self: flex-start; }
#design-gallery { --gallery-ink:#211d2a; width:min(1080px,calc(100vw - 32px)); max-width:1080px; max-height:calc(100dvh - 32px); padding:28px; color:var(--gallery-ink); background:#f7f7fa; border:1px solid #9991a5; border-radius:20px; box-shadow:0 28px 90px #0006; font:400 14px/1.5 Manrope,Arial,sans-serif; }
#design-gallery::backdrop { background:#131020b3; }
#design-gallery .design-gallery-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; }
#design-gallery .design-gallery-heading h2 { margin:0 0 6px; font:800 clamp(24px,4vw,34px)/1.15 Manrope,Arial,sans-serif; letter-spacing:-1px; color:#211d2a; }
#design-gallery .design-gallery-heading p { color:#625a70; margin:0; }
#design-gallery .design-gallery-close { flex:none; width:44px; height:44px; border:1px solid #81788e; border-radius:50%; color:#211d2a; background:#fff; font:400 22px Arial,sans-serif; }
#design-gallery .design-gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
#design-gallery .design-choice { display:flex; flex-direction:column; align-items:stretch; gap:6px; min-width:0; padding:10px; text-align:left; background:#fff; color:#211d2a; border:2px solid #d7d2df; border-radius:14px; font:400 14px/1.4 Manrope,Arial,sans-serif; }
#design-gallery .design-choice:hover { border-color:#81708f; }
#design-gallery .design-choice[aria-pressed="true"] { border-color:#593b7c; box-shadow:0 0 0 2px #593b7c; }
#design-gallery .design-choice strong { font-size:17px; margin-top:4px; }
#design-gallery .design-choice-note { font-size:12px; color:#625a70; flex:1; }
#design-gallery .design-choice-current { font-size:12px; font-weight:800; color:#593b7c; margin-top:4px; }
#design-gallery :is(button,a):focus-visible { outline:3px solid #593b7c; outline-offset:3px; }
#design-gallery .design-preview { --preview-ink:#fff; position:relative; display:block; height:116px; overflow:hidden; border-radius:7px; background:#20182c; isolation:isolate; }
#design-gallery .design-preview i,#design-gallery .design-preview b,#design-gallery .design-preview em { position:absolute; display:block; }
#design-gallery .design-preview i { inset:15% 48% 15% 8%; background:var(--preview-ink); border-radius:50%; opacity:.85; }
#design-gallery .design-preview b { inset:25% 9% 57% 60%; background:var(--preview-ink); }
#design-gallery .design-preview em { inset:53% 14% 37% 60%; background:var(--preview-ink); opacity:.6; }
#design-gallery .preview-classic { background:#c42676; --preview-ink:#e0f59a; }
#design-gallery .preview-ios9 { background:linear-gradient(130deg,#f7f7f7,#d5e7fa); --preview-ink:#007aff; }
#design-gallery .preview-aero { background:linear-gradient(160deg,#21b0ef,#7bd99d); --preview-ink:#f4fbff; }
#design-gallery .preview-aero i { box-shadow:inset 4px 8px 12px #fff,2px 5px 12px #07556777; }
#design-gallery .preview-win98 { background:#008080; --preview-ink:#c0c0c0; }
#design-gallery .preview-win98 i { border-radius:0; border:4px outset #eee; }
#design-gallery .preview-vista { background:linear-gradient(120deg,#0d2429,#1c694e); --preview-ink:#b6eabd; }
#design-gallery .preview-ps4 { background:linear-gradient(135deg,#07347d,#087be0); --preview-ink:#e4f8ff; }
#design-gallery .preview-ps4 i { border-radius:0; transform:rotate(-12deg); }
#design-gallery .preview-dreamscape { background:#d9c9ee url(../dreamscape/sky-portal.jpg) center/cover; --preview-ink:#f6f2fb; }
#design-gallery .preview-dreamscape i { border-radius:70px 70px 7px 7px; opacity:.65; }
/* The eight graphic designs preview their real artwork beside a quiet UI panel. */
#design-gallery .preview-acidwave { background:#f4efff url(../acidwave/optic-print.svg) left center / 65% auto no-repeat; --preview-ink:#5d249f; }
#design-gallery .preview-y2k { background:#e8f4ff url(../y2k/orbital-chamber.svg) left center / 65% auto no-repeat; --preview-ink:#123f73; }
#design-gallery .preview-k-design { background:#faf9f5 url(../k-design/modules.svg) left center / 65% auto no-repeat; --preview-ink:#1844e8; }
#design-gallery .preview-halftone { background:#f5f1e6 url(../halftone/ink-field.svg) left center / 65% auto no-repeat; --preview-ink:#a52a27; }
#design-gallery .preview-hyperbloom { background:#f0f5df url(../hyperbloom/bloom.svg) left center / 65% auto no-repeat; --preview-ink:#21523b; }
#design-gallery .preview-neo-swiss { background:#ffffff url(../neo-swiss/measure.svg) left center / 65% auto no-repeat; --preview-ink:#bc241c; }
#design-gallery .preview-synthwave { background:#211831 url(../synthwave/night-horizon.svg) left center / 65% auto no-repeat; --preview-ink:#7de9e1; }
#design-gallery .preview-vector-surrealism { background:#fff3dc url(../vector-surrealism/impossible-garden.svg) left center / 65% auto no-repeat; --preview-ink:#334fbd; }
#design-gallery :is(.preview-acidwave,.preview-y2k,.preview-k-design,.preview-halftone,.preview-hyperbloom,.preview-neo-swiss,.preview-synthwave,.preview-vector-surrealism) i { inset:12% auto 12% 65%; width:1px; background:var(--preview-ink); opacity:.35; border-radius:0; }
#design-gallery :is(.preview-acidwave,.preview-y2k,.preview-k-design,.preview-halftone,.preview-hyperbloom,.preview-neo-swiss,.preview-synthwave,.preview-vector-surrealism) b { inset:27% 6% 57% 72%; }
#design-gallery :is(.preview-acidwave,.preview-y2k,.preview-k-design,.preview-halftone,.preview-hyperbloom,.preview-neo-swiss,.preview-synthwave,.preview-vector-surrealism) em { inset:54% 10% 38% 72%; }
@media(max-width:760px) { #design-gallery .design-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } #design-gallery { padding:20px; } }
@media(max-width:380px) { #design-gallery .design-gallery-grid { grid-template-columns:1fr; } #design-gallery { padding:16px; } #design-gallery .design-preview { height:132px; } }
@media(forced-colors:active) { #design-gallery .design-choice[aria-pressed="true"] { border:3px solid Highlight; } #design-gallery :is(button,a):focus-visible { outline-color:Highlight; } }