/* Kitebook — shared site bar (logo + Home / Lessons tabs). Uses the colour tokens each page defines on :root. */
.sitebar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.sitebar-in{max-width:1180px;margin:0 auto;height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.logo svg{width:28px;height:35px;flex:none}
.logo b{font:600 22px/1 var(--f-display);letter-spacing:.005em}
.logo small{display:block;font:500 11px/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.sitetabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.sitetabs a{font:500 15px/1 var(--f-display);color:var(--muted);text-decoration:none;padding:9px 16px;border-radius:999px;transition:background .15s,color .15s}
.sitetabs a:hover{color:var(--ink)}
.sitetabs a[aria-current="page"]{background:var(--ink);color:var(--surface)}
.sitebar a:focus-visible{outline:3px solid var(--gem);outline-offset:2px}
@media (max-width:420px){.logo small{display:none}.sitetabs a{padding:9px 13px}}
body{margin:0}
.sitebar{display:block}