/* Liquid glass. Text on glass is always ink; the glass is at least 72 % white. */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-edge),inset 0 0 0 1px rgba(255,255,255,.35),var(--glass-shadow);
  border-radius:var(--r-panel);
}
/* solid fallbacks: no blur support, reduced transparency, more contrast */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:#fff;border-color:var(--line)}
}
@media (prefers-reduced-transparency:reduce){
  .glass{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:var(--line)}
}
@media (prefers-contrast:more){
  .glass{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--fg);box-shadow:none}
}

/* header */
.top{position:fixed;z-index:40;top:12px;left:12px;right:12px;height:var(--header);display:flex;align-items:center;gap:var(--s3);padding:0 12px 0 20px;border-radius:var(--r-pill);max-width:1376px;margin:0 auto}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:750;letter-spacing:-.02em;color:var(--fg);text-decoration:none;min-height:44px}
.top .main{display:flex;gap:4px;margin-left:auto}
.top .main a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-pill);color:var(--fg);text-decoration:none;font-size:var(--f1);font-weight:550}
.top .main a:hover{background:rgba(14,17,22,.06)}
.top .main a[aria-current="true"]{background:rgba(14,17,22,.08)}
.lang{display:inline-flex;padding:3px;border-radius:var(--r-pill);background:rgba(14,17,22,.06)}
.lang button{min-height:44px;min-width:52px;padding:0 12px;border:0;border-radius:var(--r-pill);background:none;font-size:var(--f1);font-weight:600}
.lang button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 3px rgba(14,17,22,.15)}
.menu-btn{display:none;min-height:44px;padding:0 18px;border:0;border-radius:var(--r-pill);background:var(--fg);color:#fff;font-weight:600;margin-left:auto}
@media (max-width:1060px){
  .top .main,.top .lang{display:none}
  .menu-btn{display:inline-flex;align-items:center}
}

/* full-screen glass menu (phone and tablet) */
.sheet{position:fixed;inset:0;z-index:60;background:rgba(244,246,249,.86);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);overflow:auto}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){.sheet{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}}
.sheet-in{padding:20px 16px 48px;max-width:640px;margin:0 auto;display:grid;gap:32px}
.sheet-close{justify-self:end;min-height:48px;padding:0 20px;border:0;border-radius:var(--r-pill);background:var(--fg);color:#fff;font-weight:600}
.sheet nav{display:grid;gap:28px}
.sheet h2{font-size:var(--f1);color:var(--mute);font-weight:600;letter-spacing:0;margin-bottom:4px}
.sheet nav a{display:flex;align-items:center;min-height:56px;font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line)}

/* level pill: follows the reader */
.pill{position:fixed;z-index:30;left:20px;bottom:20px;display:flex;align-items:center;gap:10px;height:44px;padding:0 18px 0 14px;border-radius:var(--r-pill);font-size:var(--f1);font-weight:600;transition:opacity .3s,transform .3s var(--ease)}
.pill i{width:14px;height:14px;border-radius:50%;background:var(--lv);box-shadow:0 0 0 4px color-mix(in srgb,var(--lv) 25%,transparent);transition:background-color .4s}
.pill b{color:var(--mute);font-weight:600}
.pill.off{opacity:0;transform:translateY(12px)}
@media (max-width:600px){.pill{left:12px;bottom:12px}}