:root{
  color-scheme:dark;
  --ink:#0f1a1c;
  --ink2:#16262a;
  --enamel:#f3eee3;
  --bone:#e6dfd0;
  --mute:#8a9a98;
  --signal-rgb:101,201,154;
  --signal:rgb(var(--signal-rgb));
  --signal-on-light:#24734f;
  --ambient-rgb:95,183,166;
  --hero-glow:#1f4147;
  --z1:#5fb7a6;
  --z2:#e9c46a;
  --z3:var(--signal);
  --serif:'Fraunces',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.lang{display:flex;border:1px solid #ffffff26;border-radius:99px;padding:3px}
.lang button{background:none;border:0;color:var(--mute);font:500 .72rem var(--mono);letter-spacing:.1em;padding:6px 14px;border-radius:99px;cursor:pointer;transition:.25s}
.lang button[aria-pressed=true]{background:var(--enamel);color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:99px;text-decoration:none;font-weight:500;font-size:.95rem;transition:.3s}
.btn.p{background:var(--signal);color:var(--ink);box-shadow:0 10px 40px -10px rgba(var(--signal-rgb),0.6)}
.btn.p:hover{background:var(--enamel);transform:translateY(-2px)}
.btn.g{border:1px solid #ffffff33}
.btn.g:hover{border-color:var(--enamel);background:#ffffff0d}

.nav-controls{display:flex;align-items:center;gap:12px;flex-shrink:0}
.palette-switch{display:flex;align-items:center;gap:2px;border:1px solid #ffffff26;border-radius:99px;padding:3px}
.palette-switch button{display:grid;place-items:center;width:32px;height:32px;border:1px solid transparent;border-radius:50%;background:transparent;cursor:pointer;color:var(--enamel)}
.palette-switch button span{width:14px;height:14px;border-radius:50%;background:var(--palette-green)}
.palette-switch button[data-palette-choice="blue"] span{background:var(--palette-blue)}
.palette-switch button[aria-pressed="true"]{border-color:var(--enamel);background:#ffffff12}
.palette-switch button:hover{background:#ffffff1a}
.palette-switch button:focus-visible,.lang button:focus-visible,.btn:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
@media(max-width:560px){nav > div.wrap{gap:8px}.nav-controls{gap:6px}.lang button{padding:6px 9px}nav .logo{font-size:1.25rem;gap:.4rem}.palette-switch button{width:30px;height:30px}}

.palette-switch button[data-palette-choice="red"] span{background:var(--palette-red)}
@media(max-width:380px){nav > div.wrap{padding-inline:12px;gap:6px}.nav-controls{gap:4px}.lang button{padding-inline:7px}}

.palette-switch button[data-palette-choice="purple"] span{background:var(--palette-purple)}
.palette-switch button[data-palette-choice="amber"] span{background:var(--palette-amber)}
.palette-switch button[data-palette-choice="cyan"] span{background:var(--palette-cyan)}
@media(max-width:1100px){nav .links{display:none}}
@media(max-width:560px){
  nav > div.wrap{display:grid;grid-template-columns:1fr auto;height:112px;gap:8px;padding-block:12px}
  nav .nav-controls{display:contents}
  nav .lang{grid-column:2;grid-row:1;justify-self:end}
  nav .palette-switch{grid-column:1 / -1;grid-row:2;justify-self:center}
  header.hero{padding-top:152px}
}

@media(max-width:560px){nav > div.wrap{display:flex;height:72px;padding-block:0}nav .nav-controls{display:flex}header.hero{padding-top:120px}}