:root,
:host {
  --font-sans:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans",
    "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --font-sans--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  --default-font-family: var(--font-sans);
  --default-font-feature-settings: var(--font-sans--font-feature-settings);
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --tracking-tight: -0.025em;

  --spacing: 0.25rem;

  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25/0.875);

  --radius-md: 0.375rem;
  --radius-xl: 0.75rem;

  --select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

  --color-white: #fff;
  --color-gray-50: oklch(98.5% 0.002 247.839);
  --color-gray-100: oklch(96.7% 0.003 264.542);
  --color-gray-200: oklch(92.8% 0.006 264.531);
  --color-gray-300: oklch(87.2% 0.01 258.338);
  --color-gray-400: oklch(70.7% 0.022 261.325);
  --color-gray-500: oklch(55.1% 0.027 264.364);
  --color-gray-600: oklch(44.6% 0.03 256.802);
  --color-gray-700: oklch(37.3% 0.034 259.733);
  --color-gray-800: oklch(27.8% 0.033 256.848);
  --color-gray-900: oklch(21% 0.034 264.665);
  --color-gray-950: oklch(13% 0.028 261.692);

  --color-indigo-300: oklch(78.5% 0.115 274.713);
  --color-indigo-600: oklch(51.1% 0.262 276.966);

  /* Theme variables (light mode) */
  --color-background: var(--color-white);
  --color-primary: var(--color-indigo-600);
  --color-primary-text: var(--color-white);
  --color-text-base: var(--color-gray-900);
  --color-text-dimmed: var(--color-gray-600);
  --color-link: var(--color-indigo-600);
  --color-shade-1: var(--color-gray-50);
  --color-shade-2: var(--color-gray-200);
  --color-shade-3: var(--color-gray-300);
}
@media (prefers-color-scheme: dark) {
  :root,
  :host {
    --select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

    /* Theme variables (dark mode) */
    --color-background: var(--color-gray-900);
    --color-primary: var(--color-indigo-600);
    --color-primary-text: var(--color-white);
    --color-text-base: var(--color-gray-50);
    --color-text-dimmed: var(--color-gray-400);
    --color-link: var(--color-indigo-300);
    --color-shade-1: var(--color-gray-800);
    --color-shade-2: var(--color-gray-700);
    --color-shade-3: var(--color-gray-600);
  }
}

html,
:host {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  line-height: 1.5;
  font-family: var(--default-font-family);
  font-feature-settings: var(--default-font-feature-settings, normal);
  font-variation-settings: var(--default-font-variation-settings, normal);
  -webkit-tap-highlight-color: transparent;
}
*,
:after,
:before,
::backdrop {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-background);
  color: var(--color-text-base);
}

/* Sections */
header {
  padding-inline: calc(var(--spacing) * 2);
  margin-inline: auto;
  display: flex;
  justify-content: center;
  height: 6rem;
}
.content {
  margin-inline: calc(var(--spacing) * 2);
  max-width: 36rem;
  padding-inline: calc(var(--spacing) * 2);
}
@media (min-width: 40rem) {
  .content {
    margin-inline: auto;
    padding-inline: calc(var(--spacing) * 2);
  }
}
footer {
  margin-top: calc(var(--spacing) * 6);
  margin-inline: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 4) 0;
}
footer > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  column-gap: calc(var(--spacing) * 4);
}
@media (min-width: 40rem) {
  footer > div {
    flex-direction: row;
  }
}
footer img {
  max-width: 6rem;
}

/* General elements */
button,
input,
select {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 1;
  border-radius: 0;
  transition: all 0.1s;
}
input[type="text"],
input[type="url"] {
  outline-color: var(--color-shade-3);
  outline-offset: calc(1px * -1);
  outline-style: solid;
  outline-width: 1px;
  color: var(--color-text-base);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  padding-block: calc(var(--spacing) * 1.5);
  padding-inline: calc(var(--spacing) * 3);
  background-color: var(--color-background);
  border-radius: var(--radius-md);
  width: 100%;
  display: block;
}
input[type="text"]:focus,
input[type="url"]:focus {
  outline-color: var(--color-primary);
  outline-offset: calc(2px * -1);
  outline-style: solid;
  outline-width: 2px;
}
input[type="checkbox"] {
  accent-color: var(--color-primary);
}
label {
  color: var(--color-text-base);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-sm);
  line-height: calc(var(--spacing) * 6);
  display: block;
  user-select: none;
}
select {
  appearance: none;
  outline-color: var(--color-shade-3);
  outline-offset: calc(1px * -1);
  outline-style: solid;
  outline-width: 1px;
  color: var(--color-text-base);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  background-color: var(--color-background);
  border-radius: var(--radius-md);
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}
select:focus {
  outline-color: var(--color-primary);
  outline-offset: calc(2px * -1);
  outline-style: solid;
  outline-width: 2px;
}
h1 {
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  letter-spacing: var(--tracking-tight);
}
p {
  color: var(--color-text-dimmed);
  font-size: var(--text-sm);
  line-height: calc(var(--spacing) * 6);
}
a {
  font-weight: var(--font-weight-medium);
  color: var(--color-link);
  text-underline-offset: 3px;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Buttons */
.btn {
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  padding-block: calc(var(--spacing) * 2);
  padding-inline: calc(var(--spacing) * 3);
  border-radius: var(--radius-md);
  text-decoration: none;
  text-align: center;
  outline-width: 1px;
  outline-style: solid;
  transition: all 0.2s;
}
.btn:hover {
  cursor: pointer;
  text-decoration: none;
  opacity: 0.8;
}
.btn:focus-visible {
  outline-offset: 2px;
  outline-width: 2px;
}
.btn.btn-regular {
  outline-color: var(--color-shade-3);
  color: var(--color-text-base);
  background-color: var(--color-shade-2);
}
.btn.btn-regular:focus-visible {
  outline-color: var(--color-gray-600);
}
.btn.btn-primary {
  color: var(--color-primary-text);
  background-color: var(--color-primary);
  outline-color: var(--color-primary);
}

/* Utilities */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.items-center {
  align-items: center;
}
.gap-2 {
  gap: calc(var(--spacing) * 2);
}
.gap-4 {
  gap: calc(var(--spacing) * 4);
}
.p-4 {
  padding: calc(var(--spacing) * 4);
}
.p-8 {
  padding: calc(var(--spacing) * 8);
}
.mt-2 {
  margin-top: calc(var(--spacing) * 2);
}
.mt-4 {
  margin-top: calc(var(--spacing) * 4);
}
.mt-8 {
  margin-top: calc(var(--spacing) * 8);
}
.my-4 {
  margin-block: calc(var(--spacing) * 4);
}
.w-full {
  width: 100%;
}
.text-nowrap {
  text-wrap: nowrap;
}
.text-center {
  text-align: center;
}
.truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.box {
  background-color: var(--color-shade-1);
  outline-color: var(--color-shade-2);
  outline-style: solid;
  outline-width: 1px;
  border-radius: var(--radius-xl);
}

#generated-link {
  max-width: min(calc(100vw - 9rem), 28rem);
}

.qrcode {
  margin-left: auto;
  margin-right: auto;
}
.qrcode > img {
  outline-color: var(--color-shade-2);
  outline-style: solid;
  outline-width: 1px;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

/* Recommended clients */
#client_list {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: calc(var(--spacing) * 6);
}
@media (min-width: 40rem) {
  #client_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 70rem) {
  #client_list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.client-link {
  position: relative;
  column-gap: calc(var(--spacing) * 2);
  display: flex;
  align-items: center;
}
.client-link:hover {
  text-decoration: none;
}
.client-link img {
  object-fit: cover;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  flex: none;
  max-width: 100%;
  width: 3rem;
  height: 3rem;
  padding: 0.3rem;
  display: block;
  box-shadow: 0 0 0 1px var(--color-shade-3);
}
.client-link span {
  color: var(--color-text-base);
  line-height: 1.5rem;
  display: flex;
  align-items: center;
  column-gap: calc(var(--spacing) * 2);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}
.client-link .star {
  position: absolute;
  right: 10px;
  top: 8px;
}