@font-face {
  font-family: 'Barlow Condensed';
  src: url('fonts/barlow-condensed-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('fonts/barlow-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #fbfbf8;
  --line: #d9dcd3;
  --text: #12170f;
  --muted: #6a7166;
  --flag: #17800e;
  --panel: #ffffffa6;
  --field-base: #e2edce;
  --field-a: #d0e8d5;
  --field-b: #eef1cd;
  --field-c: #d1e8e0;
  --field-d: #e0ebcc;
  --pattern-size: 240px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  gap: 2.5rem;
  padding: 2rem clamp(1.25rem, 6vw, 3rem);
  background: var(--field-base);
  color: var(--text);
  font-family: 'Barlow', system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.field {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  isolation: isolate;
  background: var(--field-base);
  pointer-events: none;
}

.field::before {
  content: '';
  position: absolute;
  inset: -35%;
  background:
    radial-gradient(ellipse at 22% 25%, var(--field-a), transparent 52%),
    radial-gradient(ellipse at 78% 24%, var(--field-b), transparent 52%),
    radial-gradient(ellipse at 72% 78%, var(--field-c), transparent 52%),
    radial-gradient(ellipse at 20% 80%, var(--field-d), transparent 56%);
  animation: field-shimmer 28s ease-in-out infinite alternate;
  will-change: transform;
}

.field::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('bg/pattern.svg') repeat;
  background-size: var(--pattern-size) var(--pattern-size);
  opacity: 0.07;
  mix-blend-mode: multiply;
}

@keyframes field-shimmer {
  0% { transform: translate(-4%, -3%) rotate(-8deg) scale(1); }
  50% { transform: translate(4%, 1%) rotate(6deg) scale(1.08); }
  100% { transform: translate(-1%, 4%) rotate(16deg) scale(1.03); }
}

main {
  width: 100%;
  max-width: 34rem;
  padding: clamp(1.5rem, 5vw, 2.25rem);
  background: var(--panel);
  border: 1px solid #ffffff80;
  border-radius: 12px;
}

h1 {
  font-family: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(3.5rem, 14vw, 5rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin: 0 0 0.35rem;
}

.subtitle {
  color: var(--muted);
  font-size: 1.05rem;
}

.links {
  margin-top: 2.75rem;
  border-top: 1px solid var(--line);
}

.links a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0.25rem 1.1rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  transition: color 150ms ease, padding-left 150ms ease;
}

.links a:hover,
.links a:focus-visible {
  color: var(--flag);
  padding-left: 0.4rem;
}

.icon {
  flex: none;
  width: 64px;
  height: 64px;
  object-fit: contain;
  color: var(--flag);
}

.body {
  flex: 1;
  min-width: 0;
}

.name {
  display: block;
  font-family: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.2;
}

.desc {
  display: block;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.note {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.arrow {
  color: var(--muted);
}

.links a:hover .arrow,
.links a:focus-visible .arrow {
  color: var(--flag);
}

.account {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.account p {
  flex: 1;
}

.login {
  flex: none;
  padding: 0.55rem 1.4rem;
  border-radius: 4px;
  background: var(--flag);
  color: var(--paper);
  font-family: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 150ms ease;
}

.login:hover,
.login:focus-visible {
  background: var(--text);
}

footer {
  width: 100%;
  max-width: 34rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.75rem clamp(1.5rem, 5vw, 2.25rem);
  background: var(--panel);
  border: 1px solid #ffffff80;
  border-radius: 12px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--muted);
}

footer a {
  color: var(--muted);
  text-decoration: none;
}

footer a:hover,
footer a:focus-visible {
  color: var(--flag);
}

:focus-visible {
  outline: 2px solid var(--flag);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .links a,
  .login {
    transition: none;
  }

  .field::before {
    animation: none;
    will-change: auto;
  }
}