@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/fonts/IBMPlexSans-Regular-Latin1.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/fonts/IBMPlexSans-SemiBold-Latin1.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/fonts/IBMPlexMono-Medium-Latin1.woff2') format('woff2');
}
:root {
  color-scheme: light dark;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
  --action: #1f5f9e; --action-ink: #fff;
  --surface: #fff; --field: #f7f8fa; --cardline: #dcdfe6;
  --ink: #131820; --ink-soft: #4a5464; --muted-ink: #5c6675;
  --nav-bg: #161b26; --nav-ink: #c3c9d4;
  --stage-line-faint: color-mix(in srgb, var(--nav-ink) 3%, var(--nav-bg));
  --stage-line: color-mix(in srgb, var(--nav-ink) 6%, var(--nav-bg));
  --stage-ring: color-mix(in srgb, var(--nav-ink) 11%, var(--nav-bg));
  --stage-track: color-mix(in srgb, var(--nav-ink) 15%, var(--nav-bg));
  --stage-bracket: color-mix(in srgb, var(--nav-ink) 24%, var(--nav-bg));
  --stage-vignette: color-mix(in srgb, var(--nav-bg) 60%, black);
  --shadow-dialog: 0 16px 48px color-mix(in srgb, var(--ink) 24%, transparent);
  --space-4: 1rem; --space-6: 1.5rem;
  font-family: var(--font-sans); font-size: 16px; line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
  :root {
    --action: #4a95dd; --action-ink: #08121e;
    --surface: #141b28; --field: #111826; --cardline: #232c3d;
    --ink: #e7ecf5; --ink-soft: #a7b1c2; --muted-ink: #8b95a8;
    --nav-bg: #080c14; --nav-ink: #a7b1c2;
    --shadow-dialog: 0 16px 40px #0008, 0 0 28px color-mix(in srgb, var(--action) 16%, transparent);
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--nav-bg); color: var(--ink); font-size: .875rem; }
.page {
  position: relative; display: grid; min-height: 100dvh; place-items: center;
  padding: 1.5rem 1rem; overflow: hidden;
}
.card {
  position: relative; display: flex; width: min(26rem, 100%); min-width: 0;
  flex-direction: column; gap: 1rem; padding: 2rem 1.5rem;
  border: 1px solid var(--cardline); border-radius: 1rem;
  background: var(--surface); box-shadow: var(--shadow-dialog);
}
.brand { color: var(--ink); }
.brand-mark { display: block; width: auto; height: 40px; }
.brand-spur { stroke: var(--action); }
.q-mask { mask-type: alpha; }
h1 { margin: 0; font-size: 1.375rem; font-weight: 600; line-height: 1.5; }
p { margin: 0; }
.error-status { color: var(--action); font-family: var(--font-mono); font-size: 3.375rem; font-weight: 500; line-height: 1.35; }
.intro { color: var(--ink-soft); }
.code-block {
  display: grid; min-height: 8rem; place-items: center; container-type: inline-size;
  padding: .75rem 1rem; border: 1px solid var(--cardline);
  border-radius: .5rem; background: var(--field); text-align: center;
}
.label { color: var(--ink-soft); font-size: .8125rem; }
.code {
  width: max-content; min-width: 0; max-width: 100%; color: var(--action); font-family: var(--font-mono);
  font-size: min(3.375rem, 20cqi); font-weight: 500; line-height: 1.35;
  white-space: nowrap; text-align: left;
}
.contact, .app-section { display: flex; flex-direction: column; gap: .5rem; }
h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.phone, .email-link, .app-link {
  display: inline-flex; min-height: 48px; align-items: center; justify-content: center;
  gap: .5rem; padding: .5rem 1.25rem; border: 1px solid var(--cardline); border-radius: .5rem;
  font-size: 1rem; font-weight: 600; line-height: 1.5; text-decoration: none;
  overflow-wrap: anywhere; transition: background-color 160ms;
}
.phone { background: var(--action); border-color: transparent; color: var(--action-ink); }
a.phone:hover { background: color-mix(in srgb, var(--action) 84%, black 16%); }
.app-link { background: var(--surface); color: var(--ink); }
.email-link { background: var(--surface); color: var(--action); }
.email-link:hover, .app-link:hover { background: var(--field); }
.hint { color: var(--muted-ink); font-size: .8125rem; }
.app-section { padding-top: 1rem; border-top: 1px solid var(--cardline); }
a:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }
@media (max-width: 479px) { .card { padding: 1.5rem 1rem; } }
@media (prefers-reduced-motion: no-preference) {
  .card { animation: card-in 560ms cubic-bezier(.2, .7, .2, 1) both; }
  .brand-ring { stroke-dasharray: 137; stroke-dashoffset: 137; animation: brand-ring 900ms cubic-bezier(.65, 0, .35, 1) 150ms forwards; }
  .brand-spur { opacity: 0; transform: translate(-6px, -6px); animation: brand-spur 420ms ease-out 900ms forwards; }
  .brand-word { opacity: 0; animation: brand-word 520ms ease-out 650ms forwards; }
}
@keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes brand-ring { to { stroke-dashoffset: 0; } }
@keyframes brand-spur { to { opacity: 1; transform: none; } }
@keyframes brand-word { to { opacity: 1; } }