:root[data-theme="sky"]{--paper:#b9e8ff;--art:url('assets/cloud-city-sky.png');--veil:#b9e8ff45;--message:#b9e8ffed}
:root[data-theme="lavender"]{--paper:#e2d4ff;--art:url('assets/cloud-city-lavender.png');--veil:#e2d4ff45;--message:#e2d4ffed}
:root[data-theme="cream"]{--art:url('assets/cloud-city.png');--veil:#fff7b245;--message:#fff7b2e8}
body,.hero-art{background-image:var(--art)}body:before{background:var(--veil)}
.color-picker{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;padding:12px 16px;background:var(--paper);border-bottom:2px solid var(--ink);position:relative;z-index:9;color:var(--ink);font-size:12px;font-weight:800}.color-picker span{margin-right:8px}.color-picker a{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--ink);border-radius:30px;padding:8px 14px;text-decoration:none;background:#ffffff60;min-height:36px}.color-picker a[aria-current="page"]{background:var(--ink);color:white}.color-picker a:before{content:'';width:13px;height:13px;border:1px solid currentColor;border-radius:50%;background:var(--swatch)}.color-picker a:hover{outline:2px solid var(--ink);outline-offset:2px}
.hero{height:calc(100svh - 128px)}
@media(max-width:700px){.hero{height:auto}.hero-message{background:var(--message)}.color-picker{gap:7px;padding:9px 10px;font-size:10px}.color-picker span{width:100%;text-align:center;margin:0}.color-picker a{padding:7px 12px}}