:root {
  color-scheme: light;
  background: #fff;
  color: #000;
  font-family: "Times New Roman", Times, serif;
}
* { box-sizing: border-box; }
body { margin: 0; }
main {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.5svh, 24px);
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
}
.study {
  --aspect: 0.7551686615886833;
  position: relative;
  width: min(68svh * var(--aspect), 100%, 470px);
  aspect-ratio: var(--aspect);
  margin: 0;
}
canvas, .fallback { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
canvas { opacity: 0; }
.fallback { object-fit: contain; }
.ready canvas { opacity: 1; }
.ready .fallback { visibility: hidden; }
.contact { color: inherit; font-size: 1rem; line-height: 1.5; text-decoration: none; }
.contact:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact:focus-visible { outline: 1px solid #888; outline-offset: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-height: 450px) {
  main { padding-block: 12px; gap: 8px; }
  .study { width: min(65svh * var(--aspect), 100%); }
}