@font-face { font-family: 'Instrument Sans'; src: url('./instrument-sans-variable.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
/* Independent button styles. Colors and preview scale are editable tokens. */
.sl-copy {
  --copy-unit: 1px;
  --copy-ink: #222222;
  --copy-hover: #2e2e2e;
  --copy-feedback: #3f3f3f;
  --copy-text: #fafafa;
  --copy-focus: #5a5a5a;
  --copy-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative;
  display: block;
  width: calc(184 * var(--copy-unit));
  height: calc(52 * var(--copy-unit));
  padding: 0;
  border: 0;
  border-radius: calc(13 * var(--copy-unit));
  appearance: none;
  background: transparent;
  color: var(--copy-text);
  font: 550 calc(19 * var(--copy-unit))/1.1 'Instrument Sans', sans-serif;
  letter-spacing: -.02em;
  font-synthesis: none;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.sl-copy *, .sl-copy *::before, .sl-copy *::after { box-sizing: border-box; }
.sl-copy:focus-visible { outline: 2px solid var(--copy-focus); outline-offset: 6px; }
.sl-copy[aria-disabled="true"] { cursor: wait; }
.sl-copy:disabled { cursor: not-allowed; opacity: .5; }
.sl-copy__surface {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  border-radius: inherit;
  background-color: var(--copy-ink);
  background-image: linear-gradient(155deg, #ffffff06, transparent 68%);
  box-shadow: inset 0 1px #ffffff12, 0 1px 2px #0000000d;
  transition: transform 350ms var(--copy-ease), background-color 350ms ease, box-shadow 350ms ease;
}
@media (hover: hover) {
  .sl-copy:not(:disabled):not([aria-disabled="true"]):hover .sl-copy__surface { transform: translateY(-2px); background-color: var(--copy-hover); box-shadow: inset 0 1px #ffffff17, 0 6px 12px -8px #00000047; }
}
.sl-copy:not(:disabled):not([aria-disabled="true"]):active .sl-copy__surface { transform: translateY(1px) scale(.98); transition-duration: 120ms; }
.sl-copy__wash { position: absolute; inset: 0; z-index: -1; background: var(--copy-feedback); opacity: 0; transition: opacity 650ms cubic-bezier(.4, 0, .2, 1); }
.sl-copy[data-state="copied"] .sl-copy__wash { opacity: 1; }
.sl-copy__label { position: relative; display: block; white-space: nowrap; }
.sl-copy__icon { position: absolute; left: calc(25 * var(--copy-unit)); top: 50%; width: calc(21 * var(--copy-unit)); height: calc(24 * var(--copy-unit)); transform: translateY(-50%); }
.sl-copy__icon svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sl-copy__sheets { opacity: 1; transition: opacity 240ms ease 240ms; }
.sl-copy__back { transition: transform 460ms var(--copy-ease); }
.sl-copy__front { fill: var(--copy-ink); transition: transform 460ms var(--copy-ease), fill 350ms ease; }
@media (hover: hover) {
  .sl-copy:hover .sl-copy__front { fill: var(--copy-hover); }
}
.sl-copy__check { opacity: 0; transition: opacity 200ms ease; }
.sl-copy__check path { stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 400ms var(--copy-ease); }
.sl-copy[data-state="copied"] .sl-copy__back { transform: translate(2.5px, 2px); }
.sl-copy[data-state="copied"] .sl-copy__front { transform: translate(-2.5px, -2px); fill: var(--copy-feedback); }
.sl-copy[data-state="copied"] .sl-copy__sheets { opacity: 0; transition-delay: 200ms; }
.sl-copy[data-state="copied"] .sl-copy__check { opacity: 1; transition-delay: 440ms; }
.sl-copy[data-state="copied"] .sl-copy__check path { stroke-dashoffset: 0; transition-delay: 440ms; }
.sl-copy[data-state="idle"] .sl-copy__check path { transition-delay: 0ms; }
@media (prefers-reduced-motion: reduce) {
  .sl-copy .sl-copy__surface, .sl-copy:hover .sl-copy__surface, .sl-copy:active .sl-copy__surface { transform: none; }
  .sl-copy *, .sl-copy svg, .sl-copy path, .sl-copy rect { transition: none !important; animation: none !important; }
  .sl-copy:active .sl-copy__surface { opacity: .9; }
}
@media (forced-colors: active) {
  .sl-copy__surface { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; }
  .sl-copy__wash { display: none; }
  .sl-copy__front { fill: ButtonFace !important; }
  .sl-copy:focus-visible { outline-color: Highlight; }
}