:root { color-scheme: light dark; --focus: #ffcc66; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; }
img { max-width: 100%; }
a, button, input, select { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 9999; padding: .7rem 1rem; background: #fff; color: #111; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.design-tools { --picker-bg: var(--surface, #121619); --picker-panel: var(--surface, #171c20); --picker-text: var(--text, #f4f7f5); --picker-muted: var(--muted, #aab2ad); --picker-border: var(--line, #ffffff24); --picker-accent: var(--accent, #84cab9); position: fixed; z-index: 1200; right: 1rem; bottom: 1rem; color: var(--picker-text); }
.design-picker__trigger { min-width: 13.5rem; display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; padding: .65rem .75rem; border: 1px solid var(--picker-border); border-radius: .9rem; background: color-mix(in srgb, var(--picker-bg) 94%, transparent); color: var(--picker-text); box-shadow: 0 14px 42px #0005; backdrop-filter: blur(16px); cursor: pointer; text-align: left; }
.design-picker__icon { width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid var(--picker-border); border-radius: .55rem; color: var(--picker-accent); }
.design-picker__trigger-copy { min-width: 0; display: grid; line-height: 1.15; }
.design-picker__trigger-copy small { color: var(--picker-muted); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.design-picker__trigger-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.design-picker__chevron { color: var(--picker-muted); transition: transform .2s ease; }
.design-picker.is-open .design-picker__chevron { transform: rotate(180deg); }
.design-picker__popover { position: absolute; right: 0; bottom: calc(100% + .65rem); width: min(22rem, calc(100vw - 2rem)); max-height: min(32rem, calc(100vh - 7rem)); overflow-y: auto; padding: .45rem; border: 1px solid var(--picker-border); border-radius: 1rem; background: color-mix(in srgb, var(--picker-panel) 97%, transparent); box-shadow: 0 22px 65px #0008; backdrop-filter: blur(20px); transform-origin: right bottom; animation: picker-enter .18s ease-out; }
.design-picker__popover[hidden] { display: none; }
.design-picker__option { width: 100%; display: grid; grid-template-columns: 2rem minmax(0, 1fr) 1.2rem; gap: .65rem; align-items: center; padding: .72rem; border: 0; border-radius: .7rem; background: transparent; color: var(--picker-text); cursor: pointer; text-align: left; }
.design-picker__option:hover, .design-picker__option:focus-visible { background: color-mix(in srgb, var(--picker-accent) 12%, transparent); }
.design-picker__option[aria-selected="true"] { background: color-mix(in srgb, var(--picker-accent) 17%, transparent); }
.design-picker__option-mark { color: var(--picker-accent); font-size: .7rem; }
.design-picker__option > span:nth-child(2) { min-width: 0; display: grid; }
.design-picker__option strong, .design-picker__option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.design-picker__option strong { font-size: .86rem; }.design-picker__option small { color: var(--picker-muted); font-size: .68rem; }
.design-picker__check { color: var(--picker-accent); font-weight: 800; }
.design-picker__gallery { display: flex; justify-content: space-between; gap: 1rem; margin-top: .35rem; padding: .75rem; border-top: 1px solid var(--picker-border); color: var(--picker-muted); text-decoration: none; font-size: .78rem; }
.design-picker__gallery:hover { color: var(--picker-text); }
@keyframes picker-enter { from { opacity: 0; transform: translateY(.45rem) scale(.98); } }
.context-tagline { min-height: 2.8rem; margin: 2rem auto; max-width: 70ch; padding: .7rem 1rem; text-align: center; opacity: .78; font-style: italic; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 620px) { .design-tools { left: .6rem; right: .6rem; } .design-picker__trigger { width: 100%; min-width: 0; } .design-picker__popover { left: 0; right: 0; width: 100%; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }