:root { font-family: system-ui, sans-serif; color: #162438; background: #fff; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
main { min-height: 100svh; height: 100dvh; display: flex; flex-direction: column; }
button { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; font-size: .9375rem; cursor: pointer; min-height: 44px; }
button:focus-visible, section:focus-visible { outline: 2px solid #187bc1; outline-offset: -3px; }
.depths { display: flex; justify-content: center; flex: none; border-bottom: 1px solid #e1e7ed; padding: 0 8px; }
.depths button { padding: 12px 22px; border-bottom: 2px solid transparent; white-space: nowrap; }
.depths button[aria-selected="true"] { color: #005b94; border-bottom-color: #005b94; }
.depths button:hover { background: #f3f7fa; }
.models { display: flex; flex: none; align-self: center; margin: 10px 0 4px; padding: 3px; background: #edf2f6; border-radius: 7px; }
.models button { padding: 7px 22px; min-height: 38px; border-radius: 5px; }
.models button[aria-checked="true"] { background: #183a53; color: #fff; }
.plots { flex: 1; min-height: 0; padding: 0 8px 8px; }
section { height: 100%; position: relative; }
section[hidden] { display: none; }
img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.plots[data-model="spherical"] .cartesian, .plots[data-model="cartesian"] .spherical { visibility: hidden; }
@media (max-width: 540px) {
  .depths { padding: 0; }
  .depths button { padding: 12px 8px; flex: 1; font-size: .875rem; }
  .plots { padding: 0 0 4px; }
}
@media (max-width: 330px) {
  .depths { flex-wrap: wrap; }
  .depths button { flex: 1 0 50%; }
}

.site-views{display:flex;justify-content:center;gap:8px;flex:none;height:44px;align-items:center}.site-views a{font:14px system-ui,sans-serif;color:inherit;text-decoration:none;padding:8px 18px;border-radius:5px;opacity:.6}.site-views a[aria-current="page"]{opacity:1;background:#7891a522}.site-views a:focus-visible{outline:2px solid #7891a5}