:root {
  --navy: #0b1030;
  --panel: #141a47;
  --ink: #eaf0ff;
  --muted: #9aa6d6;
  --cyan: #3ee6ff;
  --pink: #ff4fa3;
  --green: #5dff9a;
  --yellow: #ffd23f;
  --danger: #ff7a7a;
}

* { box-sizing: border-box; }

html { background: var(--navy); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 400 1rem/1.6 "Inter", system-ui, sans-serif;
  background-color: var(--navy);
  background-image:
    linear-gradient(rgba(62, 230, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62, 230, 255, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 56px 20px 80px;
}

h1, h2, .btn {
  font-family: "Press Start 2P", ui-monospace, monospace;
}

h1 {
  margin: 0 0 20px;
  font-size: 1.35rem;
  line-height: 1.6;
  font-weight: 400;
}

h2 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 400;
}

.lede { margin: 0 0 28px; color: var(--muted); max-width: 60ch; }

.panel {
  background: var(--panel);
  border: 3px solid var(--ink);
  padding: 22px;
  margin-bottom: 32px;
}
.panel-cyan { box-shadow: 8px 8px 0 var(--cyan); }
.panel-pink { box-shadow: 8px 8px 0 var(--pink); }
.panel-green { box-shadow: 8px 8px 0 var(--green); }

label { display: block; margin-bottom: 10px; font-weight: 600; }

.row { display: flex; gap: 12px; }

input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 14px 14px;
  font: inherit;
  color: var(--ink);
  background: var(--navy);
  border: 3px solid var(--muted);
  border-radius: 0;
}
input[type="text"]::placeholder { color: #6874a8; }
input[type="text"]:focus { border-color: var(--yellow); }

.btn {
  display: inline-block;
  padding: 14px 18px;
  font-size: 0.7rem;
  line-height: 1.4;
  color: #0b1030;
  text-decoration: none;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  cursor: pointer;
  transition: transform 80ms, box-shadow 80ms;
}
.btn-cyan { background: var(--cyan); }
.btn-pink { background: var(--pink); }
.btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #000; }
.btn:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: 0 0 0 #000; }
.btn:disabled { opacity: 0.6; cursor: progress; }

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

.error { margin: 12px 0 0; color: var(--danger); font-weight: 600; }
.notice {
  margin: 0 0 24px;
  padding: 12px 14px;
  border-left: 6px solid var(--yellow);
  background: rgba(255, 210, 63, 0.08);
}
.fine { margin: 14px 0 0; font-size: 0.85rem; color: var(--muted); }

/* order summary */
.cart { padding: 0; overflow: hidden; }
.cart img { display: block; width: 100%; height: auto; border-bottom: 3px solid var(--ink); background: var(--navy); }
.cart-body { padding: 22px; }
.cart-body p { margin: 0 0 18px; color: var(--muted); max-width: 60ch; }
.cart-body .fine { margin: 14px 0 0; }

/* progress steps */
.steps { list-style: none; margin: 0 0 24px; padding: 8px 22px; }
.steps li { display: flex; align-items: center; gap: 14px; padding: 14px 0; color: var(--muted); }
.steps li + li { border-top: 2px dashed rgba(234, 240, 255, 0.15); }
.dot { width: 16px; height: 16px; border: 3px solid currentColor; flex: none; }
.steps li.done { color: var(--green); }
.steps li.done .dot { background: var(--green); }
.steps li.active { color: var(--ink); }
.steps li.active .dot { background: var(--yellow); border-color: var(--yellow); animation: blink 1s steps(2, start) infinite; }
.steps li.error-step { color: var(--danger); }
.steps li.error-step .dot { background: var(--danger); }

@keyframes blink { to { visibility: hidden; } }

@media (max-width: 520px) {
  .wrap { padding-top: 36px; }
  h1 { font-size: 1.05rem; }
  .row { flex-direction: column; }
  .btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .steps li.active .dot { animation: none; }
  .btn { transition: none; }
}