:root {
  color-scheme: light;
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #27272b;
  background: #ebebeb;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  --accent: #f7941d;
  --line: #d0d0d0;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: clamp(24px, 8vh, 88px) 24px 32px; font-size: 16px; line-height: 1.6; }
[hidden] { display: none !important; }

main, .wrapper > .container {
  display: block;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
}

/* Use the configured logo variant for each surface. */
header {
  position: relative;
  padding: 36px 48px;
  border-bottom: 1px solid var(--line);
  background: #f8f8f8;
}
header::before, main > section:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #f7941d66 25%, var(--accent) 50%, #f7941d66 75%, transparent);
}
img { max-width: 100%; height: auto; }
header img { display: block; width: auto; max-height: 96px; margin: 0 auto; object-fit: contain; object-position: center; }
section, .content { padding: 40px 48px 48px; }
section + section { border-top: 1px solid var(--line); }
main > section:first-child { position: relative; }

h1, h2, h3, h4, p { margin: 0 0 20px; }
h1, h2 { font-size: clamp(28px, 4.5vw, 40px); line-height: 1.18; font-weight: 300; letter-spacing: -.025em; text-wrap: balance; }
h1, h2 { margin-bottom: 32px; }
h3 { font-size: 22px; font-weight: 400; line-height: 1.35; }
h4 { font-size: 18px; font-weight: 600; }
.home-guide h2 { font-size: 22px; font-weight: 400; line-height: 1.35; margin-bottom: 16px; }
p { text-wrap: pretty; overflow-wrap: anywhere; }
p:last-child, section > :last-child, .content > :last-child { margin-bottom: 0; }
strong, b { font-weight: 600; }
a { color: #935000; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: #603400; }
code { font-family: Consolas, "Liberation Mono", monospace; font-size: .9em; padding: 2px 5px; background: #f1f1f1; overflow-wrap: anywhere; }
kbd {
  display: inline-block;
  min-width: 1.8em;
  padding: 1px 7px;
  border: 1px solid #b4b4b4;
  border-bottom-width: 3px;
  background: #f8f8f8;
  color: #27272b;
  font-family: Consolas, "Liberation Mono", monospace;
  font-size: .85em;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  vertical-align: .1em;
}
ul, ol { padding-left: 24px; }
li { padding-left: 4px; margin-bottom: 8px; }
li::marker { color: #935000; }
hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }

.output-message {
  padding: 20px 24px;
  margin-bottom: 28px;
  border: 1px solid #dfc9a8;
  border-left: 5px solid #af690f;
  background: #fbf4e8;
  color: #68420b;
  font-size: 17px;
  font-style: normal;
}
.output--success { background: #f0f7ee; border-color: #bdd0b6; border-left-color: #39802b; color: #285d20; }
.output--error { background: #fcf0ef; border-color: #e4c4bf; border-left-color: #bb382d; color: #912b23; }
.boxed { border: 1px solid var(--line); padding: 24px; margin: 24px 0; }

button, input, textarea, select { font: inherit; }
button, input[type="button"], input[type="submit"], .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  max-width: 100%;
  padding: 10px 28px;
  border: 2px solid #252529;
  border-radius: 0;
  background: #252529;
  color: #fff;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, transform 100ms ease;
}
button:hover, input[type="button"]:hover, input[type="submit"]:hover, .button:hover {
  background: #414145;
  border-color: #935000;
  color: #fff;
  text-decoration: none;
}
button:active:not(:disabled), .button:active { transform: scale(.96); }
.button--secondary { background: #fff; color: #27272b; border-color: #898989; }
.button--full { width: 100%; }
button:disabled, input:disabled { opacity: .55; cursor: not-allowed; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid #935000;
  outline-offset: 4px;
}
fieldset { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
label { display: block; margin-bottom: 6px; font-weight: 600; }
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), textarea, select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #898989;
  border-radius: 0;
  padding: 10px 12px;
  background: #fff;
  color: #27272b;
}
input[type="checkbox"], input[type="radio"] { accent-color: #935000; }
input[type="checkbox"] + label, input[type="radio"] + label { display: inline-block; }
textarea { resize: vertical; }
.error { color: #912b23; }
.cf-turnstile, #turnstile-widget { margin: 24px 0; }

footer { max-width: 880px; margin: 22px auto 0; padding: 0 2px; color: #626262; font-size: 12px; line-height: 1.6; }
footer p { margin: 0; }
footer .cc, .container-footer { max-width: 100%; }
#remaining { font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
  body { padding: 20px 0; }
  header { padding: 28px 20px; }
  header img { max-height: 80px; }
  section, .content { padding: 28px 20px 32px; }
  h1, h2 { margin-bottom: 24px; }
  .output-message { padding: 16px; }
  footer { padding: 0 10px; }
}
@media (max-width: 360px) {
  section, .content { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  button, input[type="button"], input[type="submit"], .button { transition: none; }
  button:active:not(:disabled), .button:active { transform: none; }
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    color: #ededee;
    background: #171719;
    --line: #48484d;
  }
  main, .wrapper > .container { background: #242427; }
  header { background: #202023; }
  a, li::marker { color: #ffb65f; }
  a:hover { color: #ffd49f; }
  code { background: #36363b; }
  kbd { background: #36363b; border-color: #6a6a70; color: #ededee; }
  .output-message { background: #392e20; border-color: #786040; border-left-color: #f7941d; color: #ffd49f; }
  .output--success { background: #233427; border-color: #4e7153; border-left-color: #8ccf91; color: #b6e5ba; }
  .output--error { background: #3b2628; border-color: #805154; border-left-color: #f18b86; color: #ffc0bb; }
  button, input[type="button"], input[type="submit"], .button {
    background: #f7941d;
    border-color: #f7941d;
    color: #21180c;
  }
  .button--secondary { background: #242427; border-color: #99999f; color: #ededee; }
  button:hover, input[type="button"]:hover, input[type="submit"]:hover, .button:hover {
    background: #ffb65f;
    border-color: #ffb65f;
    color: #21180c;
  }
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline-color: #ffb65f;
  }
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), textarea, select {
    background: #1c1c1f;
    border-color: #99999f;
    color: #ededee;
  }
  input[type="checkbox"], input[type="radio"] { accent-color: #f7941d; }
  .error { color: #ffc0bb; }
  footer { color: #b5b5bd; }
}
@media (forced-colors: active) {
  .output-message { border-color: CanvasText; }
  button, .button { border-color: ButtonText; }
  kbd { border-color: CanvasText; }
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline-color: Highlight; }
}