:root {
  color-scheme: light;
  --paper: #f4f0e8;
  --sheet: #fffdf8;
  --ink: #171a1d;
  --muted: #66635e;
  --rule: #d4cec2;
  --accent: #174f42;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: var(--paper);
  color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; min-height: 100vh; }
button, input { font: inherit; }
a { color: var(--accent); text-underline-offset: .22em; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #658e7b; outline-offset: 4px; }
.preview { position: fixed; inset: -14px; pointer-events: none; user-select: none; filter: blur(9px); opacity: .55; overflow: hidden; }
.preview-masthead { display: flex; align-items: center; justify-content: space-between; height: 92px; padding: 20px 6%; border-bottom: 1px solid var(--rule); }
.preview-wordmark { font: 700 30px Georgia, "Times New Roman", serif; }
.preview-nav { width: 230px; height: 10px; background: #9d9f94; }
.preview-layout { display: grid; grid-template-columns: 140px minmax(0, 760px) 160px; justify-content: center; gap: 42px; padding: 48px 5%; }
.preview-rail { border-top: 3px solid #74796c; padding-top: 25px; }
.preview-rail i { display: block; height: 9px; width: 90%; background: #a8aa9f; margin-bottom: 24px; }
.preview-rail i:nth-child(even) { width: 62%; }
.preview-heading { width: 72%; height: 39px; background: #73786c; margin-bottom: 26px; }
.preview-line { height: 11px; background: #b3b3a5; margin-bottom: 18px; }
.preview-line.short { width: 65%; }
.preview-covers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 42px 0; }
.preview-cover { height: 255px; background: #759684; }
.forest { background: linear-gradient(140deg, #365c4c 24%, #a8bbaa 25%, #a8bbaa 44%, #73826a 45%, #365c4c 84%); }
.clay { background: radial-gradient(ellipse at 55% 90%, #a87859 0 32%, transparent 33%), linear-gradient(145deg, #d8c7a1, #8f8571); }
.dusk { background: linear-gradient(155deg, #547175 0 43%, #b4b7a5 44% 62%, #82968d 63%); }
.preview-story { padding: 30px 0; border-top: 1px solid var(--rule); }
.gate-shell { position: relative; display: grid; grid-template-columns: minmax(0, 480px); place-content: center; justify-items: center; min-height: 100vh; min-height: 100svh; padding: 44px 20px 26px; background: rgb(244 240 232 / 48%); }
.gate { width: min(100%, 480px); padding: 38px 42px 28px; background: rgb(255 253 248 / 97%); border: 1px solid #d4cec2; box-shadow: 0 20px 80px rgb(43 36 24 / 12%), 0 2px 8px rgb(43 36 24 / 4%); }
.wordmark { font: 700 30px/1 Georgia, "Times New Roman", serif; letter-spacing: -.055em; margin-bottom: 32px; }
.wordmark span { color: var(--accent); }
.eyebrow { display: flex; align-items: center; gap: 7px; margin: 0 0 13px; color: var(--accent); font-size: 10px; line-height: 1.5; font-weight: 600; letter-spacing: .105em; text-transform: uppercase; }
.eyebrow > span { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--accent); }
h1 { font: 400 clamp(36px, 8vw, 46px)/1.1 Georgia, "Times New Roman", serif; letter-spacing: -.045em; margin: 0 0 16px; }
.introduction { margin: 0 0 27px; color: var(--muted); font-size: 14px; line-height: 1.7; }
label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 600; }
input { display: block; width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid #aaa79c; border-radius: 3px; background: #fff; color: var(--ink); font-size: 16px; }
input[aria-invalid="true"] { border-color: #9c3838; }
button { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 48px; margin-top: 12px; border: 1px solid var(--accent); border-radius: 3px; padding: 12px 15px; background: var(--accent); color: #fffdf8; font-size: 14px; font-weight: 600; cursor: pointer; }
button:hover { background: #103e33; }
button:disabled { opacity: .65; cursor: wait; }
.status { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 12px 0 0; overflow-wrap: anywhere; }
.status:empty { display: none; }
.status.error { color: #8c2929; }
.request-code { border-top: 1px solid var(--rule); padding-top: 21px; margin-top: 27px; font-size: 13px; line-height: 1.65; }
.request-code p { color: var(--muted); margin: 0 0 1px; }
.request-code a { display: inline-block; padding: 6px 0; font-weight: 500; }
.administrator { display: inline-block; padding: 12px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.gate-footer { font: italic 14px/1.5 Georgia, "Times New Roman", serif; margin: 20px 0 0; color: #5f6259; text-align: center; }
.gate-footer a { color: #155749; font: 12px/2 system-ui, sans-serif; text-underline-offset: 3px; }
@media (max-width: 560px) {
  .gate-shell { padding: 28px 16px 22px; }
  .gate { padding: 31px 26px 25px; }
  .wordmark { margin-bottom: 30px; }
  .preview-layout { grid-template-columns: minmax(0, 1fr); padding: 50px 24px; }
  .preview-rail { display: none; }
  .preview-covers { gap: 15px; }
  .preview-cover { height: 220px; }
  .preview-nav { width: 90px; }
}
@media (max-width: 350px) {
  .gate-shell { padding-inline: 12px; }
  .gate { padding-inline: 21px; }
  .eyebrow { font-size: 9px; letter-spacing: .07em; }
  .introduction { font-size: 13px; }
}
@media (prefers-reduced-transparency: reduce) {
  .gate { background: var(--sheet); }
  .gate-shell { background: rgb(244 240 232 / 85%); }
}