:root{color-scheme:dark}*{box-sizing:border-box}html,body{height:100%}body{margin:0}img{max-width:100%;height:auto;display:block}

.navlink{display:inline-flex;align-items:center;justify-content:center;border-radius:0.75rem;padding:0.5rem 0.9rem;font-size:0.95rem;color:rgba(234,242,255,.92);transition:transform .15s ease,background-color .15s ease,box-shadow .15s ease;outline:none}
.navlink:hover{background-color:rgba(255,255,255,.06);transform:translateY(-1px)}
.navlink:focus-visible{box-shadow:0 0 0 2px rgba(34,211,238,.7)}

.mobilelink{width:100%;max-width:320px;display:inline-flex;align-items:center;justify-content:center;border-radius:1rem;padding:0.85rem 1.1rem;font-size:1.5rem;letter-spacing:.06em;background-color:rgba(255,255,255,.04);color:rgba(234,242,255,.95);border:1px solid rgba(255,255,255,.10);transition:transform .16s ease,background-color .16s ease,box-shadow .16s ease;outline:none}
.mobilelink:hover{background-color:rgba(255,255,255,.08);transform:translateY(-1px)}
.mobilelink:focus-visible{box-shadow:0 0 0 2px rgba(34,211,238,.7)}

.footlink{color:rgba(184,199,230,.95);text-decoration:none;outline:none;transition:color .15s ease}
.footlink:hover{color:rgba(34,211,238,.95)}
.footlink:focus-visible{box-shadow:0 0 0 2px rgba(34,211,238,.7);border-radius:0.5rem}

.tag{display:inline-flex;align-items:center;gap:.4rem;border-radius:9999px;padding:.4rem .75rem;font-size:.85rem;background-color:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);color:rgba(234,242,255,.92)}

.featurecard{border-radius:1rem;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);padding:1.1rem;box-shadow:0 0 0 1px rgba(148,163,184,.06), 0 18px 50px rgba(0,0,0,.35);transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;overflow:hidden;position:relative}
.featurecard:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(34,211,238,.20), 0 24px 60px rgba(0,0,0,.45);background:rgba(255,255,255,.06)}
.featurecard:focus-within{box-shadow:0 0 0 2px rgba(34,211,238,.7), 0 24px 60px rgba(0,0,0,.45)}
.featureicon{display:inline-flex;height:44px;width:44px;align-items:center;justify-content:center;border-radius:0.9rem;background:rgba(34,211,238,.10);border:1px solid rgba(34,211,238,.20)}
.featuretitle{margin-top:.75rem;font-size:1rem;letter-spacing:.12em;text-transform:uppercase;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial,sans-serif;color:rgba(234,242,255,.95)}
.featuretext{margin-top:.55rem;font-size:.95rem;line-height:1.45;color:rgba(184,199,230,.95)}

.accbtn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;border-radius:1rem;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);padding:1rem 1.1rem;font-size:.95rem;color:rgba(234,242,255,.95);outline:none;transition:background-color .16s ease,transform .16s ease,box-shadow .16s ease}
.accbtn:hover{background:rgba(255,255,255,.07);transform:translateY(-1px)}
.accbtn:focus-visible{box-shadow:0 0 0 2px rgba(34,211,238,.7)}
.accpanel{border-radius:1rem;border:1px solid rgba(255,255,255,.10);background:rgba(7,11,26,.35);padding:1rem 1.1rem}

.checkrow{display:flex;align-items:flex-start;gap:.7rem;border-radius:1rem;padding:.65rem .75rem;background:rgba(7,11,26,.25);border:1px solid rgba(255,255,255,.08);color:rgba(234,242,255,.92);transition:transform .14s ease,background-color .14s ease,border-color .14s ease;cursor:pointer}
.checkrow:hover{transform:translateY(-1px);background:rgba(255,255,255,.06);border-color:rgba(34,211,238,.25)}
.checkrow:focus-within{box-shadow:0 0 0 2px rgba(34,211,238,.6)}
.check{margin-top:.15rem;height:18px;width:18px;border-radius:.35rem;accent-color:#22D3EE}

.code-column{white-space:pre;filter:blur(.1px)}

@media (prefers-reduced-motion:reduce){
  .code-column{animation:none !important}
}