:root {
  --background: oklch(0.1763 0.014 258.36);
  --foreground: oklch(0.9425 0.0111 243.66);
  --surface: oklch(0.2202 0.0157 256.82);
  --elevated: oklch(0.2458 0.0153 256.81);
  --border: oklch(0.3112 0.0221 259.38);
  --primary: oklch(0.6959 0.1491 162.48);
  --primary-foreground: oklch(0.1763 0.014 258.36);
  --muted-foreground: oklch(0.714 0.032 256.5);
  --soft-foreground: oklch(0.869 0.016 252.4);
  --warning: oklch(0.7686 0.1647 70.08);
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --radius: 0.5rem;
}

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

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem 1rem 2rem;
  color: var(--foreground);
  background: var(--background);
  font-family: var(--font-sans);
}

.grid-backdrop {
  pointer-events: none;
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--border) 45%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--border) 45%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
}

.shell {
  position: relative;
  width: min(100%, 34rem);
}

.brand {
  text-align: center;
}

.emblem {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--primary) 40%, transparent);
  border-radius: 0.375rem;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
}

.emblem img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0.3rem;
  object-fit: contain;
}

.title {
  margin: 1rem 0 0;
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

h1 {
  margin: 0.35rem 0 0;
  color: var(--primary);
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  font-weight: 600;
  letter-spacing: 0.22em;
}

.description {
  margin: 0.85rem 0 0;
  color: var(--muted-foreground);
  font-size: 0.95rem;
  line-height: 1.5;
}

.panel {
  margin-top: 1.75rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.field-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.search-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

input[type="search"] {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.7rem 0.85rem;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font: 400 1rem/1.4 var(--font-sans);
  appearance: none;
}

input[type="search"]::placeholder {
  color: color-mix(in oklab, var(--muted-foreground) 80%, transparent);
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  appearance: none;
}

input[type="search"]:focus-visible,
button:focus-visible {
  outline: 2px solid oklch(0.7148 0.1257 215.22);
  outline-offset: 2px;
}

button {
  min-height: 2.75rem;
  padding: 0.7rem 1.1rem;
  color: var(--primary-foreground);
  background: var(--primary);
  border: 0;
  border-radius: 0.375rem;
  font: 600 0.875rem/1 var(--font-sans);
  letter-spacing: 0.04em;
  cursor: pointer;
}

button:hover {
  background: color-mix(in oklab, var(--primary) 90%, white);
}

button:active {
  transform: translateY(1px);
}

.notice {
  margin-top: 1.25rem;
  padding: 0.95rem 1rem;
  color: var(--soft-foreground);
  background: color-mix(in oklab, var(--warning) 8%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--warning) 32%, var(--border));
  border-radius: var(--radius);
}

.notice p {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

.notice-kicker {
  margin: 0;
  color: var(--warning);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.note {
  margin: 1rem 0 0;
  color: var(--muted-foreground);
  font-size: 0.8rem;
  line-height: 1.45;
  text-align: center;
}

@media (min-width: 560px) {
  .search-row {
    flex-direction: row;
    align-items: stretch;
  }

  input[type="search"] {
    flex: 1;
  }

  button {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}