/* Page chrome uses viewport coordinates in both library views. */
:root {
  --edge: clamp(20px, 4vw, 74px);
  --header-h: clamp(60px, 9dvh, 90px);
  --footer-h: max(43px, 5.3dvh);
  --switch-bottom: max(68px, 8dvh);
}
body > .mast {
  position: fixed;
  inset: 0 0 auto;
  z-index: 4;
  height: var(--header-h);
  padding-inline: var(--edge);
  pointer-events: none;
  border: 0;
  color: #273c2e;
}
.mast a, .mast nav { pointer-events: auto; }
.mast nav, body > .switch {
  border: 1px solid #d8dad5;
  border-radius: 40px;
  background: #fffffff0;
  backdrop-filter: blur(12px);
}
.mast nav { gap: 17px; padding: 4px 4px 4px 17px; }
body > .switch {
  position: fixed;
  z-index: 4;
  right: var(--edge);
  bottom: var(--switch-bottom);
  padding: 4px;
}
.switch button { border-radius: 24px; padding: 9px 16px; color: #475148; }
.switch button:hover { background: #ecf0ec; }
.switch button[aria-pressed="true"] { background: #2e4134; color: white; box-shadow: none; }
body > footer {
  position: fixed;
  z-index: 3;
  inset: auto var(--edge) 0;
  height: var(--footer-h);
  min-height: 0;
  padding: 0;
}
footer a { color: #273c2e; background: #fffffff0; border: 1px solid #d8dad5; border-radius: 24px; padding: 3px 9px; }

@media (max-width:720px) {
  :root { --switch-bottom: 52px; }
  .mast nav { gap: 8px; padding: 3px 3px 3px 10px; }
  body > .switch { left: var(--edge); right: auto; }
  .switch button { padding: 7px 12px; }
}
@media (max-width:375px) {
  body > .mast { padding-inline: 12px; }
  .mast .brand { font-size: 20px; gap: 5px; }
  .mast .brand img { width: 23px; }
  .mast nav { font-size: 11px; }
}
@media (max-height:590px) {
  :root { --header-h: 52px; --footer-h: 23px; --switch-bottom: 28px; }
  body > .switch { left: auto; right: var(--edge); padding: 3px; }
  .switch button { padding: 5px 10px; }
  footer a { padding-block: 1px; }
}