body{--blue:#16766b;--soft:#edf5f1;--secondary:#fff0e4;--banner:#16766b;--banner-ink:white;--banner-copy:#e5f4ed;--search-shadow:#16766b20;--focus:#16766b30}
body[data-palette=coral]{--blue:#bd4933;--soft:#fff0e9;--secondary:#fff8e9;--banner:#f8ad93;--banner-ink:#46271f;--banner-copy:#623b30;--search-shadow:#d45c4420;--focus:#d45c4430}
body[data-palette=cobalt]{--blue:#2455ed;--soft:#edf2ff;--secondary:#fff8d9;--banner:#2455ed;--banner-ink:white;--banner-copy:#e5ebff;--search-shadow:#2455ed20;--focus:#2455ed25}
.palette-preview{max-width:1216px;margin:0 auto 10px;padding:14px 0;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line);font-size:12px}.palette-preview>span{color:var(--muted);margin-right:10px}.palette-preview button{display:flex;gap:7px;align-items:center;padding:10px 13px;border:1px solid transparent;border-radius:22px;font-size:12px;background:#f5f6f8;white-space:nowrap}.palette-preview button[aria-pressed=true]{background:white;border-color:var(--blue);color:var(--blue);font-weight:750}.palette-preview i{width:12px;height:12px;border-radius:50%;background:#16766b}.palette-preview [data-palette=coral] i{background:#e66349}.palette-preview [data-palette=cobalt] i{background:#2455ed}
.feature-copy{background:var(--banner);color:var(--banner-ink)}.feature-copy p{color:var(--banner-copy)}.gateway a{background:var(--soft)}.gateway a:last-child{background:var(--secondary)}.category,.category:nth-child(3n+2){background:var(--soft)}.category:nth-child(3n){background:var(--secondary)}.prompt .meta{color:var(--blue)}.thumb{background:var(--soft)}.hero-copy .search{border-color:var(--blue);box-shadow:0 12px 32px var(--search-shadow)}.hero-copy .search:focus-within{box-shadow:0 0 0 4px var(--focus),0 12px 32px var(--search-shadow)}button:focus-visible,a:focus-visible,input:focus-visible{outline-color:var(--blue)}.type-tabs a:not(.active){background:var(--soft)}
@media(max-width:1280px){.palette-preview{margin-left:32px;margin-right:32px}}
@media(max-width:650px){.palette-preview{margin:0 20px 9px;padding:9px 0 15px;flex-wrap:wrap;gap:6px}.palette-preview>span{width:100%;font-size:11px;margin-bottom:3px}.palette-preview button{font-size:10px;padding:9px 10px;gap:5px}.palette-preview i{width:10px;height:10px}}
body[data-palette=burgundy]{--blue:#8b304b;--soft:#faeef1;--secondary:#f4e1e5;--banner:#8b304b;--banner-ink:#fff;--banner-copy:#fae5ec;--search-shadow:#8b304b20;--focus:#8b304b25}
body[data-palette=indigo]{--blue:#45488a;--soft:#f0eff9;--secondary:#e4e0f6;--banner:#45488a;--banner-ink:#fff;--banner-copy:#eae8ff;--search-shadow:#45488a20;--focus:#45488a25}
body[data-palette=cocoa]{--blue:#705041;--soft:#f6f1e9;--secondary:#faedba;--banner:#705041;--banner-ink:#fff;--banner-copy:#fff0db;--search-shadow:#70504120;--focus:#70504125}
.palette-preview{flex-wrap:wrap}.palette-preview [data-palette=burgundy] i{background:#8b304b}.palette-preview [data-palette=indigo] i{background:#45488a}.palette-preview [data-palette=cocoa] i{background:#705041}
body[data-palette=clearblue]{--blue:#2373f4;--soft:#eef4ff;--secondary:#ffe2bd;--banner:#2373f4;--banner-ink:#fff;--banner-copy:#fff;--search-shadow:#2373f420;--focus:#2373f425;--ink:#202632}
.palette-preview [data-palette=clearblue] i{background:#2373f4}
body[data-palette=clearblue] .prompt .meta,body[data-palette=clearblue] .home-intro .eyebrow,body[data-palette=clearblue] .header nav a[aria-current=page],body[data-palette=clearblue] .palette-preview button[aria-pressed=true]{color:#195cc8}
body[data-palette=lime]{--blue:#34451e;--soft:#f3f8e8;--secondary:#edf4dc;--banner:#20251b;--banner-ink:#fff;--banner-copy:#e6edda;--search-shadow:#698b2420;--focus:#c6ef5550;--ink:#20251b}
.palette-preview [data-palette=lime] i{background:#c6ef55;box-shadow:inset 0 0 0 1px #20251b15}
body[data-palette=lime] .search button,body[data-palette=lime] .logo-mark,body[data-palette=lime] .type-tabs .active,body[data-palette=lime] .filter-tabs button[aria-pressed=true]{background:#c6ef55;color:#20251b}
body[data-palette=lime] .hero-copy .search{border-color:#a4cd3c}
body[data-palette=lime] .palette-preview button[aria-pressed=true]{background:#c6ef55;color:#20251b;border-color:#a4cd3c}
body[data-palette=lime] .hero-copy h1 span{color:#34451e}
body[data-palette=lime] .feature-copy>a{color:#c6ef55}
body[data-palette=lime] .category[aria-pressed=true]{box-shadow:inset 0 0 0 2px #83a62c;background:#eaf5cc}
/* Pure black and lime, without olive or green-tinted neutrals. */
body[data-palette=lime]{--blue:#000;--ink:#000;--muted:#606060;--soft:#f5f5f5;--secondary:#f0f0f0;--line:#e7e7e7;--banner:#000;--banner-ink:#fff;--banner-copy:#e8e8e8;--search-shadow:#00000012;--focus:#c6ef5570}
body[data-palette=lime] .hero-copy h1 span{color:#000}
body[data-palette=lime] .hero-copy .search{border-color:#000}
body[data-palette=lime] .search button,body[data-palette=lime] .logo-mark,body[data-palette=lime] .type-tabs .active,body[data-palette=lime] .filter-tabs button[aria-pressed=true]{color:#000;background:#c6ef55}
body[data-palette=lime] .palette-preview button[aria-pressed=true]{color:#000;background:#c6ef55;border-color:#000}
body[data-palette=lime] .category[aria-pressed=true]{box-shadow:inset 0 0 0 2px #000;background:#c6ef55}
body[data-palette=lime] .style-switch a[aria-current=page]{background:#000;color:#fff}
/* Cobalt composition with its blue surfaces replaced by lime. */
body[data-palette=lime]{--blue:#c6ef55;--soft:#f3f8e8;--secondary:#fff8d9;--banner:#c6ef55;--banner-ink:#000;--banner-copy:#263016;--search-shadow:#9abf3125;--focus:#c6ef5570;--ink:#000}
body[data-palette=lime] .hero-copy .search{border-color:#c6ef55}
body[data-palette=lime] .hero-copy h1 span{color:#000;background:linear-gradient(transparent 58%,#c6ef55 58%,#c6ef55 94%,transparent 94%)}
body[data-palette=lime] .feature-copy>a{color:#000}
body[data-palette=lime] .header nav a[aria-current=page],body[data-palette=lime] .home-intro .eyebrow,body[data-palette=lime] .prompt .meta,body[data-palette=lime] dialog .meta{color:#000}
body[data-palette=lime] .header nav a[aria-current=page]{text-decoration:underline;text-decoration-color:#c6ef55;text-decoration-thickness:5px;text-underline-offset:7px}
body[data-palette=lime] .category[aria-pressed=true]{box-shadow:inset 0 0 0 2px #c6ef55;background:#f3f8e8}
/* Hand-drawn highlighter behind the hero title. */
body[data-palette=lime] .hero-copy h1 span{position:relative;display:inline-block;isolation:isolate;background:none;color:#000}
body[data-palette=lime] .hero-copy h1 span:before{content:'';position:absolute;z-index:-1;left:-.09em;right:-.08em;top:44%;height:53%;background:#c6ef55;transform:rotate(-1.5deg);clip-path:polygon(1% 14%,8% 11%,8% 5%,31% 9%,57% 3%,81% 7%,98% 0,100% 15%,98% 42%,99% 70%,96% 74%,96% 91%,72% 93%,49% 88%,24% 100%,3% 94%,0 77%,2% 47%,0 35%)}
body[data-palette=lime] .hero-copy h1 span:after{content:'';position:absolute;z-index:-1;left:-.04em;right:-.13em;top:70%;height:24%;background:#c6ef55;opacity:.65;transform:rotate(.7deg);clip-path:polygon(0 12%,17% 4%,45% 12%,77% 0,98% 9%,100% 76%,86% 91%,50% 84%,22% 100%,1% 83%)}
/* Selection-style title highlight with opposite corner handles. */
body[data-palette=lime]{--title-marker:#c6ef55;--title-wash:#c6ef5545}
body[data-palette=cobalt]{--title-marker:#ffbb32;--title-wash:#ffbb3245}
body[data-palette=lime] .hero-copy h1 span,body[data-palette=cobalt] .hero-copy h1 span{position:relative;display:inline-block;isolation:isolate;color:#000;background:none}
body[data-palette=lime] .hero-copy h1 span:before,body[data-palette=cobalt] .hero-copy h1 span:before{content:'';position:absolute;z-index:-1;left:-.07em;right:-.07em;top:14%;height:77%;background:var(--title-wash);border-left:3px solid var(--title-marker);border-right:3px solid var(--title-marker);transform:none;clip-path:none;opacity:1}
body[data-palette=lime] .hero-copy h1 span:after,body[data-palette=cobalt] .hero-copy h1 span:after{content:'';position:absolute;z-index:-1;left:calc(-.07em - 4px);top:calc(14% - 9px);width:11px;height:11px;border-radius:50%;background:var(--title-marker);box-shadow:var(--handle-offset,240px) var(--handle-drop,55px) 0 var(--title-marker);right:auto;transform:none;clip-path:none;opacity:1}
/* Cobalt brand with a clear lemon selection highlight. */
body[data-palette=cobalt]{--title-marker:#e8cf28;--title-wash:#fff5aa}
body[data-palette=cobalt]{--title-marker:#ffbb32;--title-wash:#ffbb3245}
@media(max-width:650px){.hero-copy h1{font-size:clamp(24px,7.1vw,35px);letter-spacing:-1px}}