:root{
  --sh-bg:#FDF3FF;
  --sh-surface:#FFFFFF;
  --sh-surface-2:#F3E2FF;
  --sh-footer:#F9EDFF;
  --sh-text:#38274C;
  --sh-muted:#6B5778;
  --sh-line:#E3C6FF;
  --sh-primary:#3740EC;
  --sh-on-primary:#F3F1FF;
  --sh-link:#3740EC;
  --sh-nav:rgba(253,243,255,.75);
}
:root[data-theme="dark"]{
  --sh-bg:#141218;
  --sh-surface:#1D1B20;
  --sh-surface-2:#2B2930;
  --sh-footer:#1D1B20;
  --sh-text:#E6E0E9;
  --sh-muted:#CAC4D0;
  --sh-line:#49454F;
  --sh-link:#BEC2FF;
  --sh-nav:rgba(20,18,24,.85);
}

#site-header{height:64px}
.sh,.sh *,.sf,.sf *{box-sizing:border-box}
.sh{position:fixed;top:0;left:0;right:0;z-index:50;height:64px;background:var(--sh-nav);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 1px 2px rgba(0,0,0,.08);font-family:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;line-height:1.5}
.sh-in{max-width:80rem;height:100%;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:12px}
@media (min-width:1024px){.sh-in{padding:0 40px}}
.sh-logo{font-weight:800;font-size:20px;letter-spacing:-0.025em;color:var(--sh-text);text-decoration:none;white-space:nowrap}
.sh-links{display:none;align-items:center;gap:32px;font-weight:500}
@media (min-width:768px){.sh-links{display:flex}}
.sh-links a{color:var(--sh-text);text-decoration:none;transition:color .15s}
.sh-links a:hover{color:var(--sh-primary)}
.sh-tools{display:flex;align-items:center;gap:8px}
.sh-lang{display:flex;align-items:center;gap:8px}
.sh-lang button{font:inherit;font-size:14px;font-weight:700;border:0;background:transparent;color:var(--sh-muted);padding:4px 12px;border-radius:9999px;cursor:pointer;transition:background .15s,color .15s}
.sh-lang button:hover{background:var(--sh-surface-2)}
.sh-lang button[aria-pressed="true"]{background:var(--sh-primary);color:var(--sh-on-primary)}
.sh-theme{width:40px;height:40px;border:0;border-radius:9999px;background:transparent;color:var(--sh-muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}
.sh-theme:hover{background:var(--sh-surface-2)}
.sh-theme svg{width:20px;height:20px}
:root[data-theme="dark"] .sh-moon{display:none}
:root:not([data-theme="dark"]) .sh-sun{display:none}
.sh-cta{margin-left:8px;padding:8px 20px;background:var(--sh-primary);color:var(--sh-on-primary);border-radius:9999px;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;transition:box-shadow .15s}
.sh-cta:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.2)}
@media (max-width:480px){.sh-cta{display:none}}
.sh a:focus-visible,.sh button:focus-visible,.sf a:focus-visible{outline:3px solid var(--sh-link);outline-offset:2px}

.sf{background:var(--sh-footer);border-top:1px solid var(--sh-line);border-radius:12px 12px 0 0;font-family:"Inter","Helvetica Neue",Arial,sans-serif;color:var(--sh-muted);line-height:1.5}
.sf-in{max-width:80rem;margin:0 auto;padding:48px 32px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:24px}
@media (min-width:768px){.sf-in{flex-direction:row}}
.sf-name{font-family:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;font-weight:800;color:var(--sh-text);margin-bottom:4px}
.sf-copy{font-size:14px}
.sf-links{display:flex;gap:32px;font-size:14px}
.sf-links a{color:var(--sh-muted);text-decoration:underline;text-underline-offset:4px;transition:color .15s}
.sf-links a:hover{color:var(--sh-primary)}