@font-face { font-family: "Inter Display"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/display-300.woff") format("woff"); }
@font-face { font-family: "Inter Display"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/display-400.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/inter-400.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/inter-500.woff") format("woff"); }

:root {
  --bg: #0B0B0C;
  --panel: #111112;
  --panel-2: #161617;
  --line: rgba(237, 232, 223, .09);
  --line-2: rgba(237, 232, 223, .17);
  --fg: #EDE8DF;
  --fg-2: rgba(237, 232, 223, .64);
  --fg-3: rgba(237, 232, 223, .40);
  --fg-4: rgba(237, 232, 223, .22);
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Inter Display", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --max: 1240px;
  --pad: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/1.6 var(--sans);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.mono { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.dim { color: var(--fg-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Mark + wordmark */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand svg { width: 22px; height: 22px; }
.brand span { font: 500 15px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; padding-left: 1px; }

/* Header */
.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(11, 11, 12, .82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 24px; }
.nav { display: flex; gap: 30px; }
.nav a { color: var(--fg-2); font-size: 13.5px; transition: color .2s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 20px;
  border: 1px solid var(--line-2); background: transparent;
  font: 500 13.5px/1 var(--sans); letter-spacing: .01em; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.btn:hover { border-color: var(--fg); }
.btn.solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn.solid:hover { background: #fff; border-color: #fff; }
.btn.sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* Status squares (the dot of the mark) */
.sq { display: inline-block; width: 9px; height: 9px; flex: none; vertical-align: middle; }
.sq.as-is { background: var(--fg); }
.sq.converted { background: linear-gradient(90deg, var(--fg) 50%, transparent 50%); box-shadow: inset 0 0 0 1px var(--fg); }
.sq.none { box-shadow: inset 0 0 0 1px var(--fg-3); }

/* Selects */
.select {
  position: relative; display: inline-flex; align-items: center;
}
.select select {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; padding: 0 22px 0 0; cursor: pointer;
}
.select select option { background: var(--panel); color: var(--fg); }
.select::after {
  content: ""; position: absolute; right: 2px; top: 50%; width: 6px; height: 6px;
  border-right: 1px solid var(--fg-2); border-bottom: 1px solid var(--fg-2);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 40px 0 48px; }
.foot .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot nav { display: flex; gap: 26px; flex-wrap: wrap; }
.foot nav a { color: var(--fg-3); font-size: 13px; transition: color .2s; }
.foot nav a:hover { color: var(--fg); }
.foot small { color: var(--fg-4); font-size: 12.5px; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 80;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: var(--fg); color: var(--bg); padding: 11px 18px;
  font: 500 13px/1.3 var(--sans); transition: opacity .25s, transform .3s var(--ease);
  max-width: calc(100vw - 40px);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 860px) {
  .nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }