@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/inter-medium.woff2') format('woff2');
}

:root {
  color-scheme: light;
  --page: #fafafa;
  --ink: #1d1d1f;
  --muted: #6b6b6b;
  --tertiary: #8f8f8f;
  --surface-secondary: #f5f5f5;
  --border: #e5e5e5;
  --border-strong: #d4d4d4;
  --hover: rgba(29, 29, 31, .06);
  --column: 560px;
  --section-gap: 56px;
  --line: 22px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: var(--line);
  letter-spacing: -.21px;
  color: var(--ink);
  background: var(--page);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body, h1, h2, p { margin: 0; }
body { min-width: 280px; }
h1, h2 { font: inherit; color: var(--muted); }
button, input { font: inherit; color: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .32; }
a { color: inherit; text-underline-offset: 2px; text-decoration-thickness: 1px; text-decoration-color: #a5a5a6; }
a:hover { text-decoration-color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 1px solid var(--muted); outline-offset: 3px; }
button, input { border: 0; }

.select-page {
  width: min(var(--column), calc(100% - 80px));
  margin-inline: auto;
  padding-block: var(--section-gap) 80px;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}
.select-intro { display: flex; flex-direction: column; gap: 16px; }
.page-title { position: relative; display: flex; align-items: center; min-height: 22px; color: var(--muted); }
.title-icon {
  position: absolute;
  left: -30px;
  top: 0;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: url('../assets/select.svg?v=76364e3a') center / contain no-repeat;
  mask: url('../assets/select.svg?v=76364e3a') center / contain no-repeat;
}
.back-link img, .add-icon img { display: block; }
.back-link {
  position: absolute;
  left: 47px;
  top: 47px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--muted);
  text-decoration: none;
  transition: background-color 140ms ease-out;
}
.back-link img { transform: rotate(-90deg); }
.back-link:hover, .back-link:focus-visible { background-color: var(--hover); }
.sample p { margin: 0; }
.sample-fallback { background: var(--preview-gradient); color: #000; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.palette { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.color-stop, .add-color {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 39px;
  padding: 8px;
  background: #fff;
  border: .5px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: none;
}
.color-stop:hover, .add-color:hover:not(:disabled) { box-shadow: 0 1px 2px rgba(29, 29, 31, .1); }
.color-stop { width: 134px; flex: 0 0 134px; }
.color-value { display: flex; align-items: center; gap: 8px; min-width: 0; }
.color-picker {
  appearance: none;
  display: block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
.color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker::-webkit-color-swatch { border: 0; border-radius: 50%; }
.color-picker::-moz-color-swatch { border: 0; border-radius: 50%; }
.hex {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 14px;
  font-weight: 500;
  line-height: var(--line);
  letter-spacing: -.21px;
  flex: 0 0 58px;
  width: 58px;
  min-width: 0;
  padding: 0;
  border-radius: 4px;
  background: none;
}
.hex:focus { outline: 1px solid var(--border-strong); outline-offset: 3px; }
.hex[aria-invalid='true'] { outline: 1px solid #a54242; outline-offset: 2px; }
.remove-color {
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tertiary);
  transition: color 140ms ease-out, background-color 140ms ease-out;
}
.remove-color:hover:not(:disabled), .remove-color:focus-visible {
  color: var(--ink);
  background: var(--hover);
}
.remove-icon {
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url('./assets/remove.svg') center / 16px 16px no-repeat;
  mask: url('./assets/remove.svg') center / 16px 16px no-repeat;
}
.add-color { flex: 0 0 39px; width: 39px; justify-content: center; transition: background-color 140ms ease-out; }
.add-icon { display: grid; place-items: center; width: 22px; height: 22px; }
.add-color:hover:not(:disabled) { background: var(--surface-secondary); }
.install { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (max-width: 810px) {
  .back-link { left: 0; outline-offset: -2px; }
}
@media (max-width: 716px) {
  .back-link { top: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .back-link, .remove-color, .add-color { transition: none; }
}
@media (forced-colors: active) {
  .title-icon { color: CanvasText; forced-color-adjust: none; }
  .color-picker { forced-color-adjust: none; }
  .remove-icon { background-color: ButtonText; }
  .sample-fallback { background: Highlight; color: HighlightText; }
}