/* Glass belongs to controls, not to the reading surface. */
:root {
  --glass-fill: rgb(255 255 255 / .22);
  --glass-border: rgb(255 255 255 / .65);
  --glass-inner: rgb(255 255 255 / .50);
  --glass-shade: rgb(0 0 0 / .07);
  --glass-shadow: 0 2px 6px -2px rgb(0 0 0 / .09);
}
:root[data-theme="dark"] {
  --glass-fill: rgb(255 255 255 / .075);
  --glass-border: rgb(255 255 255 / .18);
  --glass-inner: rgb(255 255 255 / .10);
  --glass-shade: rgb(0 0 0 / .26);
  --glass-shadow: 0 2px 6px -2px rgb(0 0 0 / .20);
}
.button, .pub-links a, .selection-lens {
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-inner), inset 0 -1px 0 var(--glass-shade), var(--glass-shadow);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
}
.button, .pub-links a { position: relative; transition: background .2s, box-shadow .2s, transform .2s; }
.button:hover, .pub-links a:hover { background: var(--glass-fill); transform: translateY(-1px); text-decoration: none; box-shadow: inset 0 1px 0 var(--glass-border), inset 0 -1px 0 var(--glass-shade), var(--glass-shadow); }
.button:active, .pub-links a:active { transform: scale(.97); }
.button.primary { color: var(--fg); background: var(--glass-fill); font-weight: 650; }
.button.refractive, .pub-links a.refractive {
  backdrop-filter: blur(6px) var(--refraction) saturate(150%);
  -webkit-backdrop-filter: blur(6px) var(--refraction) saturate(150%);
}
.site-header { background: color-mix(in srgb, var(--bg) 76%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
.appearance-controls .theme-control, .appearance-controls .motion-control { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.appearance-controls .motion-control:hover { background: var(--track); transform: none; box-shadow: none; }
.appearance-controls .motion-control:active { transform: scale(.98); }
.appearance-controls .motion-control[aria-pressed="true"] { color: var(--fg); }
.selection-lens { position: absolute; left: 0; top: 0; border-radius: 999px; pointer-events: none; background: var(--thumb); }
.lens-ready .selection-lens { transition: transform .38s cubic-bezier(.2,1.1,.3,1), width .38s cubic-bezier(.2,1.1,.3,1); }
@supports not (backdrop-filter: blur(1px)) {
  .button, .pub-links a, .selection-lens, .site-header { background: var(--bg); }
}
@media (prefers-reduced-motion: reduce) {
  .lens-ready .selection-lens, .button, .pub-links a { transition: none; }
}
@media (prefers-contrast: more) {
  .button, .pub-links a, .selection-lens, .site-header { background: var(--bg); border-color: var(--fg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .button.refractive, .pub-links a.refractive { backdrop-filter: none; -webkit-backdrop-filter: none; }
}