:root {
  color-scheme: light;
  --studio-ink: #20172d;
  --studio-ink-2: #463a56;
  --studio-muted: #71657f;
  --studio-paper: #fffaf3;
  --studio-paper-2: #fff7fc;
  --studio-surface: #ffffff;
  --studio-line: #e4ddea;
  --studio-line-strong: #cdbedc;
  --studio-pink: #f55f9f;
  --studio-violet: #7357f6;
  --studio-blue: #1ba8db;
  --studio-mint: #60c878;
  --studio-sun: #ffd35a;
  --studio-coral: #ff7b58;
  --studio-plum: #5b3c82;
  --studio-shadow-sm: 0 2px 0 rgba(32, 23, 45, 0.1), 0 8px 22px rgba(32, 23, 45, 0.08);
  --studio-shadow-md: 0 4px 0 rgba(32, 23, 45, 0.13), 0 18px 42px rgba(32, 23, 45, 0.12);
  --studio-shadow-float: 0 18px 60px rgba(32, 23, 45, 0.16);
  --studio-radius: 8px;
  --studio-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.studio-pro {
  font-family: var(--studio-font);
  color: var(--studio-ink);
}

.studio-focus :is(a, button, input, select, textarea, label):focus-visible {
  outline: 3px solid var(--studio-sun);
  outline-offset: 3px;
}

.studio-button-reset {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.studio-chip {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 0 9px;
  border: 1px solid rgba(32, 23, 45, 0.13);
  border-radius: 999px;
  background: #ffffff;
  color: var(--studio-ink-2);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0;
}

.studio-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--studio-pink);
}

.studio-cta,
.studio-secondary {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 15px;
  border: 2px solid rgba(32, 23, 45, 0.9);
  border-radius: var(--studio-radius);
  color: var(--studio-ink);
  font-weight: 900;
  text-decoration: none;
  box-shadow: 3px 3px 0 rgba(32, 23, 45, 0.9);
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.studio-cta {
  background: var(--studio-sun);
}

.studio-secondary {
  background: #ffffff;
}

.studio-cta:active,
.studio-secondary:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 rgba(32, 23, 45, 0.9);
}

.studio-card {
  border: 1px solid rgba(32, 23, 45, 0.12);
  border-radius: var(--studio-radius);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--studio-shadow-sm);
}

.studio-grid-paper {
  background:
    linear-gradient(90deg, rgba(115, 87, 246, 0.065) 1px, transparent 1px),
    linear-gradient(0deg, rgba(27, 168, 219, 0.065) 1px, transparent 1px),
    linear-gradient(135deg, #fff7fc 0%, #f7fcff 52%, #fff9ea 100%);
  background-size: 32px 32px, 32px 32px, auto;
}

.studio-ribbon {
  position: relative;
}

.studio-ribbon::before {
  content: "";
  position: absolute;
  left: 24px;
  top: -12px;
  width: 78px;
  height: 21px;
  border: 1px solid rgba(32, 23, 45, 0.12);
  border-radius: 4px;
  background: rgba(255, 211, 90, 0.74);
  transform: rotate(-4deg);
}

.studio-small-caps {
  color: var(--studio-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}