@font-face {
  font-family: "Geist Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/geist-sans-400.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/geist-sans-500.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/geist-sans-600.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/geist-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/geist-mono-500.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --ink: #18181b;
  --ink-2: #52525b;
  --ink-3: #a1a1aa;
  --hairline: #00000012;
  --green: #22c55e;
  --green-glow: #22c55e2e;
  --control-bg: #fff;
  --surface: #ffffffb8;
  --bg: radial-gradient(120% 90% at 50% 0%, #fff 0%, #fafafa 60%, #f4f4f5 100%);
  --font-sans: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 10px;
  --shadow-control: 0 0 0 1px #0000001a, inset 0 1px 0 #ffffffe6, 0 2px 5px #00000014;
  --shadow-control-hover: 0 0 0 1px #0000001f, inset 0 1px #ffffffe6, 0 3px 8px #0000001a;
  --shadow-card: 0 0 0 1px #0000000f, inset 0 1px 0 #ffffffe6, 0 1px 2px #0000000a, 0 6px 16px #0000000f;
  --shadow-card-hover: 0 0 0 1px #00000014, inset 0 1px #ffffffe6, 0 2px 4px #0000000d, 0 8px 20px #00000014;
  --shadow-copied: 0 0 0 1px #22c55e47, inset 0 1px #ffffffe6, 0 1px 2px #0000000a, 0 6px 16px #22c55e1a;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --fade: 0.22s var(--ease-out);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ink: #fafafa;
    --ink-2: #a1a1aa;
    --ink-3: #71717a;
    --hairline: #ffffff14;
    --green: #4ade80;
    --green-glow: #4ade802e;
    --control-bg: #27272a;
    --surface: #27272ab8;
    --bg: radial-gradient(120% 90% at 50% 0%, #27272a 0%, #212124 60%, #1b1b1e 100%);
    --shadow-control: 0 0 0 1px #ffffff14, inset 0 1px 0 #ffffff0d, 0 2px 5px #00000040;
    --shadow-control-hover: 0 0 0 1px #ffffff1f, inset 0 1px #ffffff0d, 0 3px 8px #0000004d;
    --shadow-card: 0 0 0 1px #ffffff12, inset 0 1px 0 #ffffff0a, 0 1px 2px #00000040, 0 6px 16px #00000059;
    --shadow-card-hover: 0 0 0 1px #ffffff1a, inset 0 1px #ffffff0a, 0 2px 4px #00000040, 0 8px 20px #00000066;
    --shadow-copied: 0 0 0 1px #4ade8059, inset 0 1px #ffffff0d, 0 1px 2px #00000040, 0 6px 16px #4ade801f;
  }
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/1.5 var(--font-sans);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  place-items: center;
  display: grid;
  overflow-x: clip;
}

button,
a {
  color: inherit;
}

button {
  font: inherit;
  appearance: none;
  cursor: crosshair;
  background: 0 0;
  border: 0;
  padding: 0;
}

a {
  cursor: crosshair;
  text-decoration: none;
}

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

main {
  width: 100%;
  max-width: 440px;
  padding: 48px 24px 36px;
}

.top {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 6px;
  display: flex;
}

h1 {
  letter-spacing: -0.02em;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}

.top-right {
  align-items: center;
  gap: 10px;
  display: inline-flex;
}

.meta-link {
  font: 400 12px/1 var(--font-mono);
  color: var(--ink-3);
  transition: color var(--fade);
}

.meta-link:hover {
  color: var(--ink);
}

.tagline {
  color: var(--ink-2);
  text-wrap: pretty;
  margin: 0 0 32px;
}

.rows {
  margin-bottom: 36px;
}

.row {
  border-top: 1px solid var(--hairline);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  display: flex;
}

.row:last-child {
  border-bottom: 1px solid var(--hairline);
}

.row-name {
  font: 400 12px/1 var(--font-mono);
  color: var(--ink-3);
  flex: none;
}

.row-value {
  min-width: 0;
  font: 500 12px/1.2 var(--font-mono);
  color: var(--ink-2);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}

.status {
  color: var(--ink-2);
  font: 500 12px/1 var(--font-sans);
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.status i {
  background: var(--green);
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--green-glow);
}

.start {
  margin-bottom: 32px;
}

h2 {
  color: var(--ink-2);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
}

.start-row {
  align-items: center;
  gap: 10px;
  display: flex;
}

.btn {
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  background: var(--control-bg);
  color: var(--ink);
  box-shadow: var(--shadow-control);
  font: 500 11.5px/1 var(--font-sans);
  transition: transform 0.12s var(--ease-out), box-shadow var(--fade), color var(--fade);
  align-items: center;
  gap: 6px;
  display: inline-flex;
  white-space: nowrap;
}

.btn:hover {
  box-shadow: var(--shadow-control-hover);
}

.btn:active {
  transform: scale(0.96);
}

.btn-arrow {
  font-size: 12px;
  color: var(--ink-3);
  transition: color var(--fade);
}

.btn:hover .btn-arrow {
  color: var(--ink);
}

.command {
  margin-top: 10px;
  border-radius: var(--radius-md);
  background: var(--control-bg);
  width: 100%;
  box-shadow: var(--shadow-card);
  text-align: left;
  transition: transform 0.12s var(--ease-out), box-shadow var(--fade);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  display: flex;
}

.command:hover {
  box-shadow: var(--shadow-card-hover);
}

.command:active {
  transform: scale(0.98);
}

.command.is-copied {
  box-shadow: var(--shadow-copied);
}

.command-dollar {
  font: 500 12.5px/1 var(--font-mono);
  color: var(--ink-3);
  flex: none;
}

.command-text {
  min-width: 0;
  font: 500 12.5px/1 var(--font-mono);
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
}

.command-icon {
  width: 15px;
  height: 15px;
  color: var(--ink-3);
  flex: none;
  place-items: center;
  display: grid;
  position: relative;
}

.command-icon svg {
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), filter 0.3s var(--ease-out);
  grid-area: 1 / 1;
}

.icon-check,
.command.is-copied .icon-copy {
  opacity: 0;
  filter: blur(4px);
  transform: scale(0.25);
}

.command.is-copied .icon-check {
  opacity: 1;
  filter: blur(0);
  color: var(--green);
  transform: scale(1);
}

.command.is-copied .command-dollar {
  color: var(--green);
}

footer {
  font: 400 12px/1 var(--font-mono);
  color: var(--ink-3);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 12px;
  display: flex;
}

footer nav {
  gap: 12px;
  display: inline-flex;
}

footer a {
  transition: color var(--fade);
}

footer a:hover {
  color: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  main > * {
    opacity: 0;
    animation: enter 0.6s var(--ease-out) forwards;
  }

  main > :first-child {
    animation-delay: 0s;
  }

  main > :nth-child(2) {
    animation-delay: 90ms;
  }

  main > :nth-child(3) {
    animation-delay: 0.18s;
  }

  main > :nth-child(4) {
    animation-delay: 0.27s;
  }

  main > :nth-child(5) {
    animation-delay: 0.36s;
  }

  main > :nth-child(6) {
    animation-delay: 0.45s;
  }
}

@keyframes enter {
  0% {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@media (width <= 480px) {
  body {
    font-size: 13.5px;
  }

  main {
    padding: 32px 18px 28px;
    max-width: 100%;
  }

  h1 {
    font-size: 16px;
  }

  .tagline {
    margin-bottom: 26px;
  }

  .rows {
    margin-bottom: 30px;
  }

  .row {
    min-height: 48px;
  }

  .row-value {
    white-space: normal;
    text-align: right;
    line-height: 1.4;
    text-overflow: clip;
  }

  .start {
    margin-bottom: 28px;
  }

  .start-row {
    flex-wrap: wrap;
  }

  footer {
    font-size: 11.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}