@font-face { font-family: "Open Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url("/fonts/open-sans-300-latin.woff2") format("woff2"); }
/* The login page, from Darrel's drawing 3D-Login.svg (11 Oct 2026), at 1:1.
   Under the Viewer's header: a #26303B panel 528 x 737, centred, 135 below the strip. Inside, 48 from each side:
   the pinwheel 64 (72 from the top), the labels 22 white, the fields 432 x 50 #F9F9F9 (260 and 380 from the top),
   the Login button 432 x 50 #FF9A96 with "Login" 22 in black (500 from the top), and
   "I've forgotten my email or password", 22, centred, white with "email" and "password" in #FF9A96 (baseline 594).
   Ground: #16202A flat for the first 271, then down to #25303B at the bottom of the window; phones flat. */
html, body { height: 100%; }
body { margin: 0; min-height: 100%; background: #16202A; color: #FFFFFF; font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 300; -webkit-tap-highlight-color: transparent; }
@media (min-width: 768px) { body { background: linear-gradient(to bottom, #16202A 0, #16202A 271px, #25303B 100%) fixed; } }
/* Safari: no jump when a field takes focus under the sticky header. */
html { scroll-padding-top: 120px; }
main { display: flex; justify-content: center; padding: 135px 16px 64px; }
.panel { box-sizing: border-box; width: 528px; max-width: 100%; min-height: 737px; background: #26303B; padding: 72px 48px 48px; display: flex; flex-direction: column; }
.mark { width: 64px; height: 64px; margin: 0 auto; color: #FFFFFF; }
.mark svg { width: 100%; height: 100%; display: block; }
h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.message { margin: 0; min-height: 81px; display: flex; align-items: center; justify-content: center; text-align: center; color: #FF9A96; font-size: 18px; line-height: 1.4; }
form { display: flex; flex-direction: column; }
/* Each field is a fixed slot, 93 high (label 30, gap 13, box 50), with the box pinned inside it. Password managers
   (Proton Pass, Safari) add their own elements around the box; nothing they add can move anything on the page. */
.field { position: relative; height: 93px; }
.field + .field { margin-top: 27px; }
label { display: block; font-size: 22px; line-height: 30px; color: #FFFFFF; }
.field input { position: absolute; left: 0; right: 0; top: 43px; }
input { -webkit-appearance: none; appearance: none; box-shadow: none; box-sizing: border-box; display: block; width: 100%; vertical-align: top; height: 50px; min-height: 50px; max-height: 50px; margin: 0; border: 0; border-radius: 0; background: #F9F9F9; color: #16202A; font: 300 20px/1 "Open Sans", system-ui, sans-serif; padding: 0 14px; }
input:focus, input:focus-visible { outline: none; } /* no ring: the field stays exactly as drawn; the text cursor shows where you are */
/* Safari puts a key button inside password fields when they take focus, which moves the field's contents.
   Hidden here, so the field stays exactly as drawn. Passwords can still be filled from the keyboard bar or the menu. */
input::-webkit-credentials-auto-fill-button, input::-webkit-contacts-auto-fill-button, input::-webkit-strong-password-auto-fill-button {
  visibility: hidden; display: none !important; pointer-events: none; position: absolute; right: 0; }
input:-webkit-autofill, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 50px #F9F9F9 inset; -webkit-text-fill-color: #16202A; }
button { -webkit-appearance: none; appearance: none; margin-top: 70px; height: 50px; width: 100%; border: 0; border-radius: 0; background: #FF9A96; color: #000000; font: 300 22px/1 "Open Sans", system-ui, sans-serif; cursor: pointer; }
button:hover { background: #FFB0AD; }
button:focus-visible { outline: 2px solid #55BDFF; outline-offset: -2px; }
.forgot { margin: 20px 0 0; text-align: center; font-size: 22px; line-height: 1.4; }
.forgot { cursor: default; user-select: none; }
.forgot span { color: #FF9A96; } /* decoration only for now: no links behind it */
.forgot span:hover { color: #FFFFFF; } /* house style: white on hover */
/* House style for links: pink, white on hover, never underlined. */
a { text-decoration: none; }
/* Phones: the Viewer has no header there; the panel fills the width. */
@media (max-width: 767px) {
  .site-head { display: none; }
  main { padding: 48px 16px; }
  .panel { min-height: 0; padding: 48px 24px 40px; }
  label { font-size: 20px; }
  .field + .field { margin-top: 28px; }
  button { margin-top: 48px; }
  .forgot { font-size: 18px; }
}
/* The Viewer's header (copied from index.html) */
.site-head .navbar { background: #16202A; padding: 10px 0; position: sticky; top: 0; z-index: 10; display: flex; justify-content: center; }
.site-head nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 24px; }
.site-head nav a { display: block; color: #FFFFFF; text-decoration: none; font-size: 20px; line-height: 28px; font-weight: 300; }
.site-head nav a[aria-current="page"], .site-head nav a:hover, .site-head nav a:focus-visible { color: #FF9A96; }
.site-head nav a:focus-visible { outline: 1px dotted currentColor; outline-offset: 2px; }
.site-head .menu-open, .site-head .menu-close { background: transparent; border: 0; padding: 0; margin: 0; color: #FFFFFF; cursor: pointer; display: none; }
.site-head .menu-open svg { width: 28px; height: 28px; display: block; fill: currentColor; }
.site-head .menu-close svg { width: 24px; height: 24px; display: block; fill: currentColor; }
.site-head .strip { background: #55BDFF; color: #000000; text-align: center; font-size: 24px; line-height: 1.4; padding: 10px 0; position: sticky; top: 48px; z-index: 10; }
.site-head .strip p { margin: 0; }
.site-head.menu-on .navbar { z-index: 200; }
@media (max-width: 980px) {
  .site-head .menu-open { display: flex; }
  .site-head .menu:not(.is-open) { display: none; }
  .site-head .menu.is-open { position: fixed; inset: 0; z-index: 100; overflow: auto; background: #16202A; color: #FFFFFF;
    padding: 1rem clamp(1rem, 10%, 20rem); box-sizing: border-box; }
  .site-head .menu.is-open .menu-close { display: block; position: absolute; top: 1rem; right: clamp(1rem, 10%, 20rem); }
  .site-head .menu.is-open ul { flex-direction: column; align-items: center; padding-top: calc(2rem + 24px); }
}
@media (max-width: 980px) and (prefers-reduced-motion: no-preference) {
  .site-head .menu.is-open { animation: menu-fade 0.1s ease-out; }
  @keyframes menu-fade { from { opacity: 0; } to { opacity: 1; } }
}