@font-face{font-family:Archivo;src:url("/assets/fonts/archivo-0.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url("/assets/fonts/archivo-3.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Archivo Black";src:url("/assets/fonts/archivo-black.ttf") format("truetype");font-weight:400;font-display:swap}

:root{
  color-scheme:dark;
  --bg:oklch(16.5% .032 296); --surface:oklch(20% .033 296); --ink:oklch(98% .003 296);
  --muted:oklch(75% .018 296); --line:oklch(31% .032 296); --lime:oklch(88% .225 126);
  --danger:oklch(76% .15 25);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{display:grid;place-items:center;min-height:100dvh;margin:0;padding:24px 16px;background:var(--bg);color:var(--ink);font:400 16px/1.5 Archivo,Arial,sans-serif}
.access{width:min(100%,380px)}
.access__logo{display:block;width:min(100%,260px);height:auto;margin:0 0 40px}
h1{margin:0 0 8px;font:400 32px/1.1 "Archivo Black",Arial,sans-serif;text-transform:uppercase}
.access__lead{margin:0 0 32px;color:var(--muted)}
.access__form{display:grid;gap:8px}
label{font-size:14px;font-weight:700}
input[type=password]{width:100%;height:48px;padding:0 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit}
input[type=password]:focus-visible{outline:2px solid var(--lime);outline-offset:1px;border-color:transparent}
.access__error{margin:0;color:var(--danger);font-size:14px}
button{height:48px;margin-top:8px;border:0;border-radius:8px;background:var(--lime);color:oklch(20% .05 126);font:400 16px/1 "Archivo Black",Arial,sans-serif;text-transform:uppercase;cursor:pointer;transition:filter 180ms cubic-bezier(.22,1,.36,1)}
button:hover{filter:brightness(1.06)}
button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}