:root{--c-blue:#5b7cfa;--c-purple:#b07cf2;--c-cyan:#5ac8fa;--c-orange:#ff9500;--c-green:#40ce5d;--c-pink:#ff2d55;--c-yellow:#ffcc00;--c-lime:#a2d729;--c-amber:#f2b441}
.palette-bar{display:flex;height:4px}
.eyebrow{border-color:color-mix(in oklch,var(--c-green) 50%,transparent);color:var(--c-green)}
.hero-cap h2 em{color:var(--c-cyan)}
/* types: section tints to the active type */
#types{--tc:var(--c-blue);background:color-mix(in oklch,var(--tc) 11%,var(--bg));transition:background .6s}
#types h2 em,.typeword span{color:var(--tc);transition:color .6s}
.typeword small{color:var(--fg2)}
.tab.on{background:var(--tc);border-color:var(--tc);color:#0a0b0d}
.clip .t b{background:var(--tc)}
/* features: each card owns a colour */
.fcell{--fc:var(--c-blue);background:color-mix(in oklch,var(--fc) 13%,var(--bg2));border-color:color-mix(in oklch,var(--fc) 26%,transparent)}
.fcell:hover{border-color:color-mix(in oklch,var(--fc) 55%,transparent)}
.fcell h3{color:color-mix(in oklch,var(--fc) 55%,white)}
.f1{--fc:var(--c-purple)}.f2{--fc:var(--c-orange)}.f3{--fc:var(--c-cyan)}.f4{--fc:var(--c-green)}
.fcell kbd{background:color-mix(in oklch,var(--fc) 10%,#15171c)}
.fcell kbd.down{background:var(--fc);border-color:var(--fc);color:#0a0b0d}
.fab{background:color-mix(in oklch,var(--c-orange) 30%,#1a1d23);border-color:var(--c-orange)}
.dock{border-color:color-mix(in oklch,var(--c-orange) 35%,transparent)}
.browsers span{border-color:color-mix(in oklch,var(--fc) 30%,transparent)}
#features h2 em{color:var(--c-purple)}
/* privacy: deep navy band */
#privacy{background:#0a1124;border-top-color:transparent}
#privacy h2 em{color:var(--c-green)}
.cipher{background:#0e1830;border-color:rgba(91,124,250,.25)}
.cipher .txt{color:var(--c-green)}
.cipher .lock{border-color:var(--c-green);color:var(--c-green)}
.p4 h4::before{content:"";display:block;width:24px;height:3px;border-radius:2px;margin-bottom:14px;background:var(--c-blue)}
.p4>div:nth-child(2) h4::before{background:var(--c-cyan)}.p4>div:nth-child(3) h4::before{background:var(--c-pink)}.p4>div:nth-child(4) h4::before{background:var(--c-yellow)}
.note a{color:var(--c-cyan)}
/* devices: colour tile that follows focus */
#gallery{--dc:var(--c-blue);transition:background .6s}
#gallery[data-dev="mac"]{--dc:var(--c-blue)}#gallery[data-dev="iphone"]{--dc:var(--c-pink)}#gallery[data-dev="ipad"]{--dc:var(--c-orange)}
#gallery h2 em{color:var(--dc);transition:color .5s}
.stage{border-radius:28px;background:linear-gradient(160deg,color-mix(in oklch,var(--dc) 38%,var(--bg)),color-mix(in oklch,var(--dc) 10%,var(--bg)) 70%);transition:background .6s;padding:0}
.stage .dev img{border-color:rgba(255,255,255,.14)}
.devtabs button::after{background:var(--dc)}
/* themes: whole section follows the picked theme */
#themes{transition:background .6s,color .6s}
#themes .themesel button{background:rgba(127,127,127,.12);color:inherit;border-color:rgba(127,127,127,.25)}
#themes .themesel button.on{border-color:currentColor}
#themes[data-light="1"] .sub,#themes[data-light="1"] .kicker{color:#6e6e73}
#themes[data-light="1"] h2 em{color:#6e6e73}
#themes[data-light="1"] .accents button.on{outline-color:#1d1d1f}
/* download: solid colour block */
.download{background:var(--accent);color:#0a0b0d;border-top:0;transition:background .5s}
.download .kicker,.download .sub,.download .fine{color:rgba(10,11,13,.72)}
.download .fine a{color:#0a0b0d;border-color:rgba(10,11,13,.4)}
.download .btn-primary{background:#0a0b0d;color:#fff}
.download .btn-primary:hover{background:#000;color:#fff}
footer .brand b{color:var(--c-blue)}