@font-face {
  font-family: RedHatText;
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/RedHatText.woff2") format("woff2");
}
@font-face {
  font-family: RedHatText;
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/RedHatText-Italic.woff2") format("woff2");
}
:root {
  color-scheme: light dark;
  font-family: RedHatText, "Helvetica Neue", Arial, sans-serif;
  color: #151515;
  background-color: #07090e;
  --card: #fff;
  --ink: #151515;
  --muted: #6a6e73;
  --blue: #0066cc;
  --line: #0066cc;
  --pad: clamp(16px, 48px, 8vw);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100dvh; isolation: isolate; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("assets/starfield-static.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
}
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; }
button:focus-visible, summary:focus-visible { outline: 3px solid #73bcf7; outline-offset: 4px; }
.preflight {
  width: min(640px, calc(100% - 32px));
  margin: max(32px, 6vh) auto;
  padding: 32px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 3px 16px #0005;
  line-height: 1.55;
}
.preflight-brand { text-align: center; }
.preflight-brand img { display: inline-block; width: 192px; height: auto; }
.eyebrow { font-size: 11px; letter-spacing: .14em; color: var(--muted); margin-top: 24px; }
.preflight h1 { font-size: clamp(24px, 5vw, 32px); font-weight: 500; line-height: 1.2; margin: 12px 0 24px; }
.preflight p { margin: 12px 0; }
.warning { border-inline-start: 4px solid #e5a000; background: #fff4cc; color: #3d2e00; padding: 16px 18px; }
.warning p { margin-bottom: 0; }
.start-button { display: block; width: 100%; margin-top: 24px; padding: 13px 16px; border: 0; border-radius: 3px; color: #fff; background: var(--blue); font-weight: 600; }
.start-button:hover { background: #004b95; }
.start-button:disabled { cursor: wait; opacity: .7; }
.status { color: var(--muted); font-size: 14px; min-height: 1.5em; }
.technical-details { padding-top: 16px; border-top: 1px solid #7775; font-size: 14px; }
.technical-details summary { cursor: pointer; }
.technical-details code { display: block; overflow-wrap: anywhere; font-size: 12px; }
.reproduction { min-height: 100dvh; padding-top: 10.4dvh; padding-bottom: 90px; }
.language-copy { position: absolute; top: 24px; left: 32px; display: flex; gap: 7px; align-items: center; color: #e4e9ef; line-height: 24px; }
.translation-icon { width: 20px; height: 20px; }
.test-controls { position: fixed; z-index: 10; top: 10px; right: 12px; display: flex; gap: 12px; align-items: center; padding: 6px 8px 6px 12px; background: #121820ed; color: #e4e9ef; border: 1px solid #566273; border-radius: 4px; font-size: 12px; }
.test-controls button { border: 1px solid #a6b3c4; background: #fff; color: #151515; border-radius: 3px; padding: 8px 10px; font-size: 12px; }
.login-card { width: min(560px, calc(100% - 32px)); margin: 0 auto; background: var(--card); color: var(--ink); box-shadow: 0 2px 5px #0004; }
.login-brand { padding: 64px 12px 24px; display: flex; justify-content: center; }
.login-brand img { display: block; width: 256px; max-width: 100%; height: auto; }
.login-heading { padding: 24px var(--pad); }
.login-heading h1 { margin: 0; font-size: 28px; line-height: 36px; font-weight: 400; }
.mock-form { padding: 0 var(--pad) 48px; }
.mock-label { font-size: 14px; line-height: 25px; font-weight: 600; }
.mock-label span { color: #c9190b; }
.mock-input { height: 36px; padding: 4px 8px; color: var(--muted); border-bottom: 2px solid var(--line); font-size: 16px; line-height: 24px; font-style: italic; user-select: none; }
.mock-button { height: 36px; margin-top: 56px; background: var(--blue); color: #fff; border-radius: 3px; font-size: 16px; line-height: 36px; text-align: center; user-select: none; }
.login-footer { position: fixed; bottom: 34px; left: 16px; right: 16px; text-align: center; font-size: 16px; line-height: 24px; color: #e4e9ef; }
@media (max-width: 560px) {
  .preflight { padding: 24px; margin-top: 24px; }
  .reproduction { padding-top: 9.7dvh; }
  .language-name { display: none; }
  .test-controls { top: 12px; right: 12px; gap: 8px; padding-left: 8px; font-size: 10px; }
  .test-controls button { padding: 8px; font-size: 11px; }
  .login-heading { padding-block: min(24px, 6vw); }
  .login-heading h1 { font-size: clamp(21px, 7.18vw, 28px); }
}
@media (max-height: 650px) {
  .reproduction { padding-top: 76px; }
  .login-footer { position: static; padding-top: 32px; }
}
@media (prefers-color-scheme: dark) {
  :root { --card: #1b1d21; --ink: #e4e4e4; --muted: #aaaeb4; --line: #2b9af3; }
  .warning { background: #352b11; color: #ffe9a8; }
}