:root {
  color-scheme: dark;
  --ink: #e7f3f2;
  --muted: #81a4a5;
  --line: #244144;
  --panel: #0d191b;
  --panel-strong: #132326;
  --void: #050a0c;
  --cyan: #42d9c8;
  --cyan-bright: #70f2e4;
  --amber: #f0b35a;
  --danger: #ff6f68;
  font-family: "Bahnschrift", "DIN Alternate", "Roboto Condensed", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { position: relative; margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: var(--void); }
button, input { font: inherit; }
button { color: inherit; }

.topology-backdrop { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; opacity: .72; pointer-events: none; filter: saturate(.82) contrast(1.05); }
.access-shell { position: relative; z-index: 1; min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 1.15fr) minmax(440px, .85fr); overflow: hidden; }
.signal-field { position: relative; min-height: 100vh; padding: clamp(32px, 5vw, 78px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border-right: 1px solid #294649; background:
  radial-gradient(circle at 68% 28%, rgba(66,217,200,.16), transparent 30%),
  linear-gradient(135deg, rgba(11,23,25,.76) 0 54%, rgba(7,17,19,.72) 54%); }
.signal-field::before { content: ""; position: absolute; width: 38vw; height: 38vw; min-width: 420px; min-height: 420px; right: -9vw; top: 18vh; border: 1px solid rgba(66,217,200,.28); transform: rotate(45deg); box-shadow: 0 0 80px rgba(66,217,200,.06), inset 0 0 80px rgba(66,217,200,.03); }
.signal-field::after { content: ""; position: absolute; left: 12%; right: -20%; top: 52%; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 -48px rgba(66,217,200,.18), 0 48px rgba(66,217,200,.18); transform: rotate(-9deg); }
.signal-grid { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(57,95,98,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(57,95,98,.35) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(135deg, #000, transparent 70%); }
.ambient-build-status { position: absolute; z-index: 2; top: 34px; right: 34px; display: grid; grid-template-columns: 7px auto; gap: 3px 9px; padding: 9px 11px; border: 1px solid rgba(66,217,200,.22); background: rgba(5,14,16,.58); color: #81a4a5; font-size: 7px; letter-spacing: .14em; backdrop-filter: blur(8px); }
.ambient-build-status i { grid-row: 1 / 3; align-self: center; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.ambient-build-status b { color: var(--cyan); font-size: 7px; letter-spacing: .18em; }
.brand-lockup, .access-copy, .signal-status { position: relative; z-index: 1; }
.brand-lockup { display: flex; gap: 15px; align-items: center; letter-spacing: .12em; }
.brand-lockup strong { display: block; font-size: 20px; }
.brand-lockup small { display: block; margin-top: 2px; color: var(--cyan); font-size: 8px; letter-spacing: .3em; }
.brand-mark { position: relative; width: 34px; height: 34px; transform: rotate(45deg); border: 1px solid #2d6e69; background: #102628; box-shadow: 0 0 20px rgba(66,217,200,.2); }
.brand-mark i { position: absolute; inset: 6px; border: 2px solid var(--cyan); }
.brand-mark i:nth-child(2) { inset: 10px; opacity: .75; }
.brand-mark i:nth-child(3) { inset: 14px; background: var(--cyan); }
.eyebrow { margin: 0 0 12px; color: var(--cyan); font-size: 10px; letter-spacing: .22em; }
.access-copy { max-width: 720px; }
.access-copy h1 { margin: 0; max-width: 720px; font-size: clamp(40px, 5.2vw, 78px); line-height: .95; letter-spacing: -.035em; text-transform: uppercase; text-wrap: balance; }
.access-copy h1 span { color: transparent; -webkit-text-stroke: 1px var(--cyan); }
.access-copy > p:last-child { max-width: 590px; margin: 28px 0 0; color: #a7bfc0; font: 16px/1.6 "Aptos Narrow", "Segoe UI", sans-serif; }
.signal-status { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; max-width: 650px; border: 1px solid #213b3e; background: #213b3e; }
.signal-status span { padding: 15px; display: grid; grid-template-columns: 8px 1fr; gap: 2px 10px; background: rgba(8,18,20,.92); }
.signal-status i { grid-row: 1 / 3; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.signal-status b { font-size: 10px; letter-spacing: .1em; }
.signal-status small { color: var(--muted); font-size: 8px; letter-spacing: .18em; }

.access-console { position: relative; min-height: 100vh; display: grid; grid-template-rows: 1fr auto; padding-left: 28px; background: linear-gradient(180deg, rgba(16,28,31,.97), rgba(9,17,19,.985)); box-shadow: -24px 0 70px rgba(0,0,0,.28); }
.console-rail { position: absolute; inset: 0 auto 0 0; width: 28px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; color: #52777a; font-size: 7px; border-right: 1px solid #274246; background: #0b1618; }
.console-rail::after { content: ""; position: absolute; inset: 0 auto 0 13px; width: 2px; background: repeating-linear-gradient(to bottom, transparent 0 24px, #275054 24px 26px); }
.console-rail span { z-index: 1; padding: 3px 2px; background: #0b1618; }
.console-body { width: min(100%, 590px); margin: auto; padding: clamp(34px, 6vw, 70px); }
.console-body > header { margin-bottom: 35px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.console-body h2 { margin: 0 0 10px; font-size: clamp(24px, 3vw, 38px); letter-spacing: .05em; }
.console-body > header > p:last-child, .step-heading p { margin: 0; color: var(--muted); font: 14px/1.5 "Aptos", "Segoe UI", sans-serif; }
.access-step { display: grid; gap: 18px; }
label { display: grid; gap: 7px; }
label > span, .manual-secret > span { color: #86b4b5; font-size: 9px; letter-spacing: .18em; }
input { width: 100%; min-height: 49px; padding: 0 14px; color: var(--ink); border: 1px solid #345357; border-radius: 2px; outline: none; background: #071113; transition: border-color .16s, box-shadow .16s; }
input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(66,217,200,.11); }
.primary, .guest-button, .entra-button { min-height: 56px; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid var(--cyan); border-radius: 2px; cursor: pointer; letter-spacing: .08em; background: var(--cyan); color: #041011; transition: transform .12s, filter .12s; }
.primary:hover, .guest-button:hover, .entra-button:hover { filter: brightness(1.12); transform: translateY(-1px); }
.primary:disabled, .guest-button:disabled { cursor: wait; filter: saturate(.4); }
.primary span, .guest-button span { font-weight: 700; font-size: 13px; }
.primary small, .guest-button small { font-size: 8px; letter-spacing: .16em; }
.guest-button { border-color: #3a5d60; color: #b9d2d2; background: #0c1a1c; }
.entra-button { border-color: #557981; color: #e3eeee; background: linear-gradient(105deg, #14272b, #0b1719); text-decoration: none; }
.entra-button > span { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; font-size: 12px; }
.entra-button > small { color: #8ca7aa; font-size: 8px; letter-spacing: .15em; }
.entra-button i { width: 17px; height: 17px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; transform: skewY(-4deg); }
.entra-button i b:nth-child(1) { background: #f35325; }.entra-button i b:nth-child(2) { background: #81bc06; }.entra-button i b:nth-child(3) { background: #05a6f0; }.entra-button i b:nth-child(4) { background: #ffba08; }
.or-divider { display: flex; align-items: center; gap: 12px; color: #58787b; font-size: 8px; letter-spacing: .2em; }
.or-divider::before, .or-divider::after { content: ""; height: 1px; flex: 1; background: #253d40; }
.step-heading { margin-bottom: 4px; }
.step-heading span { color: var(--amber); font-size: 9px; letter-spacing: .2em; }
.step-heading h3 { margin: 6px 0 8px; font-size: 23px; letter-spacing: .06em; }
.enrollment-grid { display: grid; grid-template-columns: 180px 1fr; gap: 18px; padding: 16px; border: 1px solid #2a474a; background: #081214; }
.enrollment-grid figure { margin: 0; padding: 9px; color: #5b7f80; text-align: center; font-size: 7px; letter-spacing: .12em; background: #eaf7f5; }
.enrollment-grid img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.enrollment-grid figcaption { margin-top: 8px; color: #173538; }
.manual-secret { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.manual-secret code { overflow-wrap: anywhere; color: var(--cyan-bright); font: 700 14px/1.45 "Cascadia Mono", Consolas, monospace; letter-spacing: .09em; }
.manual-secret button, .recovery-actions button { min-height: 35px; border: 1px solid #385c5f; color: #b5d2d1; cursor: pointer; background: #102023; }
.manual-secret small { color: #587b7d; font-size: 7px; letter-spacing: .11em; }
.code-form { display: grid; grid-template-columns: 1fr 1.05fr; gap: 12px; align-items: end; }
.code-form input { font: 700 20px "Cascadia Mono", Consolas, monospace; letter-spacing: .22em; text-align: center; }
.text-action, .restart-login { justify-self: start; padding: 5px 0; border: 0; color: var(--cyan); cursor: pointer; font-size: 9px; letter-spacing: .14em; background: none; }
.recovery-codes-step ol { margin: 0; padding: 16px 16px 16px 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; border: 1px solid #38534e; color: #d9f0eb; background: #091612; }
.recovery-codes-step li { padding-left: 4px; font: 12px "Cascadia Mono", Consolas, monospace; letter-spacing: .08em; }
.recovery-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.access-error { margin-top: 18px; padding: 13px 14px; border-left: 3px solid var(--danger); color: #ffc1bd; font: 13px/1.45 "Aptos", "Segoe UI", sans-serif; background: rgba(255,111,104,.09); }
.restart-login { margin-top: 12px; }
.access-console > footer { min-height: 45px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #587679; border-top: 1px solid #233c3f; font-size: 7px; letter-spacing: .16em; }
.access-console > footer i { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

@media (max-width: 900px) {
  .access-shell { grid-template-columns: 1fr; }
  .signal-field { min-height: 330px; padding: 30px; border-right: 0; border-bottom: 1px solid #294649; }
  .access-copy h1 { font-size: clamp(34px, 9vw, 58px); }
  .access-copy > p:last-child, .signal-status { display: none; }
  .access-console { min-height: calc(100vh - 330px); }
}

@media (max-width: 1200px) {
  .ambient-build-status { display: none; }
}

@media (max-width: 560px) {
  .signal-field { min-height: 265px; }
  .console-body { padding: 34px 22px; }
  .enrollment-grid, .code-form { grid-template-columns: 1fr; }
  .enrollment-grid figure { width: 180px; justify-self: center; }
  .recovery-codes-step ol { grid-template-columns: 1fr; }
  .access-console > footer span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .topology-backdrop { opacity: .5; }
}