:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --text: #1a1a1e;
  --text-muted: #6b6b74;
  --border: #e4e4e9;
  --accent: #e02434;
  --accent-strong: #b01824;
  --accent-soft: rgba(224, 36, 52, 0.08);
  --code-bg: #f1f1f4;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08);

  color-scheme: light;

  --color-text: var(--text);
  --color-text-darker: var(--text);
  --color-text-secondary: var(--text-muted);
  --color-text-dark: #ffffff;
  --color-bg: var(--bg);
  --color-brighter-bg: var(--surface);
  --color-primary: var(--accent);
  --color-primary-hover: var(--accent-strong);
  --color-primary-text: #ffffff;
  --color-primary-text-hover: #ffffff;
  --color-secondary: var(--code-bg);
  --color-secondary-hover: var(--border);
  --color-secondary-text: var(--text);
  --color-secondary-text-hover: var(--text);
  --color-tertiary: transparent;
  --color-tertiary-hover: var(--accent-soft);
  --color-tertiary-text: var(--text);
  --color-tertiary-text-hover: var(--accent);
  --color-removed: var(--accent-strong);
  --color-sale-banner-bg: var(--accent);
  --color-sale-banner-text: #ffffff;

  --tebex-legal-footer-background-color: var(--surface);
  --tebex-legal-footer-border-color: var(--border);
  --tebex-legal-footer-text-color: var(--text-muted);
}

:root[data-theme='dark'] {
  --bg: #131316;
  --surface: #1c1c21;
  --text: #ececf1;
  --text-muted: #b0b0bc;
  --border: #2c2c33;
  --accent: #ef4050;
  --accent-strong: #cf2838;
  --accent-soft: rgba(239, 64, 80, 0.12);
  --code-bg: #26262d;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);
  --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);

  color-scheme: dark;

  --color-primary: var(--accent-strong);
  --color-primary-hover: #b52432;
  --color-primary-text: #ffffff;
  --color-tertiary-hover: var(--accent-soft);
}

html {
  overscroll-behavior-y: none;
}

body {
  position: relative;
  margin: 0;
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overscroll-behavior-y: none;
  transition: background 0.25s ease, color 0.25s ease;
}

body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 420px;
  z-index: -1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat,
    radial-gradient(
      ellipse 90% 100% at 50% -10%,
      color-mix(in srgb, var(--accent) 16%, transparent),
      transparent 72%
    );
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%);
}

:root[data-theme='dark'] body::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat,
    radial-gradient(
      ellipse 90% 100% at 50% -10%,
      color-mix(in srgb, var(--accent) 22%, transparent),
      transparent 72%
    );
}

/* Reduce GPU compositing while Tebex.js animates its fullscreen checkout.
   The normal storefront effects return when the checkout emits `close`. */
:root.checkout-active body::before {
  display: none !important;
}

:root.checkout-active body,
:root.checkout-active .site,
:root.checkout-active .topbar {
  transition: none !important;
}

:root.checkout-active .topbar {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: var(--bg);
}

h1,
h2,
h3 {
  line-height: 1.25;
}

code {
  background: var(--code-bg);
  padding: 0.15em 0.4em;
  border-radius: 5px;
  font-size: 0.9em;
  font-family: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Menlo, monospace;
}

.btn-primary,
.btn-secondary,
.btn-tertiary,
.quantity-field,
.popup-content,
.basket-item,
.toast {
  border-radius: 10px;
}

.btn-primary {
  font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus {
  box-shadow: var(--shadow-hover);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.25s ease;
}

:root[data-theme='dark'] .topbar {
  background: color-mix(in srgb, var(--bg) 68%, transparent);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar,
  :root[data-theme='dark'] .topbar {
    background: color-mix(in srgb, var(--bg) 97%, transparent);
  }
}

.topbar.scrolled {
  border-bottom-color: var(--border);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  max-width: 960px;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--text);
}

.brand-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.brand-name {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 0;
  white-space: nowrap;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.topnav-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: color 0.15s ease;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

.topnav-link:hover {
  color: var(--accent);
}

.account {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.8rem 0.25rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.25s ease;
}

.account:hover {
  border-color: var(--accent-strong);
}

.account-avatar {
  display: block;
  width: 21px;
  height: 21px;
  border-radius: 6px;
  image-rendering: pixelated;
}

.account-logout {
  display: none;
  color: var(--accent);
}

.account:hover .account-name {
  display: none;
}

.account:hover .account-logout {
  display: inline;
}

.cart-fab {
  position: fixed;
  right: 2.75rem;
  bottom: 1.5rem;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-hover);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease,
    background 0.25s ease, transform 0.15s ease;
}

.cart-fab:hover,
.cart-fab:focus-visible {
  color: var(--accent);
  border-color: var(--accent-strong);
  transform: translateY(-2px);
}

.cart-fab svg,
.cart-fab-count {
  pointer-events: none;
}

.cart-fab-count {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s ease, background 0.25s ease;
}

.theme-toggle:hover {
  border-color: var(--text-muted);
}

:root[data-theme='dark'] .icon-moon,
:root:not([data-theme='dark']) .icon-sun {
  display: none;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0.5rem 1.5rem 4rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.store-hero {
  text-align: center;
  padding: 0.25rem 0 1.5rem;
}

.store-hero h1 {
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 0.75rem;
  color: var(--text);
}

.hero-brand {
  color: inherit;
}

.store-hero-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.4rem;
}

.ip-text {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--code-bg);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.ip-text:hover {
  background: var(--accent-soft);
  border-color: var(--accent-strong);
}

.ip-text code {
  background: none;
  padding: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ip-text .copy-icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}

.ip-text:hover .copy-icon {
  color: var(--accent);
}

.ip-text .copy-icon svg {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ip-text .icon-check {
  color: #22a06b;
  opacity: 0;
  transform: scale(0.4) rotate(-20deg);
}

.ip-text.copied .icon-copy {
  opacity: 0;
  transform: scale(0.4);
}

.ip-text.copied .icon-check {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.ip-text.copied:hover .copy-icon {
  color: #22a06b;
}

.discord-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.discord-link:hover {
  border-color: #5865f2;
  color: #5865f2;
}

.discord-link svg {
  width: 20px;
  height: 20px;
}

.pkg-section {
  margin-top: 1.5rem;
}

.pkg-section-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.35rem;
  font-weight: 800;
  margin: 2rem 0 1rem;
}

.pkg-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.pkg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

@media (max-width: 640px) {
  .pkg-grid {
    grid-template-columns: 1fr;
  }
}

.pkg-card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
}

.pkg-head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.pkg-image-frame {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 18px;
}

.pkg-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.3);
}

.pkg-title {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
}

.pkg-title a {
  color: inherit;
  text-decoration: none;
}

.pkg-title a:hover {
  color: var(--accent);
}

.pkg-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.3rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}

.pkg-price .original {
  color: var(--text-muted);
  text-decoration: line-through;
  font-weight: 600;
  font-size: 0.9rem;
}

.pkg-price .sale-tag {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 800;
}

.pkg-price .pkg-currency {
  color: var(--text-muted);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.pkg-desc {
  margin-top: 1rem;
  flex: 1;
}

.pkg-desc [style] {
  font-size: inherit !important;
}

.pkg-desc p {
  margin: 0.5rem 0;
}

.pkg-desc ul {
  margin: 0.6rem 0 0;
  padding-left: 1.5rem;
  color: var(--text-muted);
}

.pkg-desc li {
  display: list-item;
  margin: 0.35rem 0;
}

.pkg-desc p:has(> strong > u),
.pkg-desc p:has(> strong > span) {
  margin: 0.5rem 0;
  padding: 0.5rem 0.85rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--accent-soft);
  font-size: 0.9rem;
}

.pkg-desc p:has(> strong > u) u,
.pkg-desc p:has(> strong > span) u {
  text-decoration: none;
}

.pkg-desc p:has(> strong > u) em,
.pkg-desc p:has(> strong > span) em {
  font-style: normal;
}

.pkg-card .product-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.pkg-card .product-actions .price,
.pkg-full .product-actions .price {
  display: none;
}

.product-actions .add,
.product-actions .subscribe {
  flex: 1;
  text-align: center;
}

.product-actions.updating {
  opacity: 0.6;
  pointer-events: none;
}

.product-actions .quantity-field[hidden] {
  display: none;
}

.product-actions .quantity-field {

  --btn-size: 44px;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: 1;
  padding: 0 0.3rem;
  border: 1px solid var(--border);
  background: var(--code-bg);
}

.product-actions .quantity-field svg {
  pointer-events: none;
}

.product-actions .quantity-field .open-basket {
  order: 0;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: auto;
  height: 100%;
  margin: 0;
  font-weight: 700;
  color: var(--text);
}

.product-actions .quantity-field .open-basket:hover,
.product-actions .quantity-field .open-basket:focus {
  color: var(--accent);
}

.product-actions .quantity-field .icon-check {
  flex-shrink: 0;
  color: #22a06b;
}

.product-actions .quantity-field .adjust.decrease,
.product-actions .quantity-field .adjust.increase {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border-radius: 7px;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--text-muted);
}

.product-actions .quantity-field .adjust.decrease {
  order: 1;
}

.product-actions .quantity-field input.quantity {
  order: 2;
  height: 28px;
  min-width: 2ch;
  margin: 0;
  padding: 0 0.15rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.product-actions .quantity-field .adjust.increase {
  order: 3;
}

.product-actions .quantity-field .adjust:hover,
.product-actions .quantity-field .adjust:focus {
  color: var(--accent);
  background: var(--accent-soft);
}

.product-actions .quantity-field.single-only input.quantity {
  display: none;
}

.product-actions .gift {
  /* Inline the icon so it does not depend on Tebex's cross-origin asset host. */
  --btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 7h-2.2A3 3 0 0 0 12 4.3 3 3 0 0 0 6.2 7H4a1 1 0 0 0-1 1v3h18V8a1 1 0 0 0-1-1ZM9 5a1 1 0 0 1 1 1v1H9a1 1 0 1 1 0-2Zm6 2h-1V6a1 1 0 1 1 1 1ZM4 13v7a1 1 0 0 0 1 1h6v-8H4Zm9 8h6a1 1 0 0 0 1-1v-7h-7v8Z' fill='%23000'/%3E%3C/svg%3E");
  flex-shrink: 0;
}

.pkg-full {
  margin-top: 1.5rem;
  padding: 2.25rem 2.5rem;
}

.pkg-full .pkg-desc {
  flex: none;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

.back-link:hover {
  color: var(--accent);
}

.popup .pkg-full {
  margin-top: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}

.popup-content {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-hover);
}

/* The stock fade/translate transition can briefly corrupt the composited
   page beneath a fullscreen popup in some GPU/browser combinations. */
.popup,
.popup .popup-content {
  transition: none !important;
}

.popup-close {
  border-radius: 0 10px 0 10px;
  opacity: 1 !important;
  transition: color 0.15s ease, background-color 0.15s ease !important;
}

/* Use a native text glyph for every generated dialog close button. Avoiding
   masks, gradients and transforms prevents GPU compositing artifacts. */
.popup-close::before {
  content: '\00d7';
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  color: var(--text-muted);
  font-family: Arial, sans-serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  text-rendering: auto;
  transform: none;
  border-radius: 0;
  background: transparent;
  background-image: none !important;
  -webkit-mask: none;
  mask: none;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  pointer-events: none;
}

.popup-close:hover::before,
.popup-close:focus-visible::before {
  color: var(--text);
}

.popup-close::after {
  content: none !important;
  display: none !important;
}

.basket-popup-content,
.basket-popup-content .popup-close {
  border-radius: 0;
}

.basket .basket-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.basket-item {
  background: var(--code-bg);
  border-radius: 10px;
}

/* Tebex normally filters every section of the drawer while it refreshes the
   basket. Filters and partial opacity both create large composited layers that
   can corrupt in some browsers, so leave the drawer content untouched. */
.basket-popup-content.updating > * {
  filter: none !important;
  opacity: 1 !important;
}

/* Replace Tebex's masked SVG loader with a tiny CSS-only ring. Only this 38px
   element is animated, so the rest of the drawer stays on its normal layer. */
.basket-popup-content.updating::before {
  box-sizing: border-box;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  border: 2px solid var(--text-muted);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: basket-loading-spin 0.7s linear infinite;
}

@keyframes basket-loading-spin {
  to {
    transform: rotate(1turn);
  }
}

.basket .basket-item .price,
.basket .basket-checkout .total {
  color: var(--accent);
}

.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-hover);
  color: var(--text);
}

.toast-error {
  border-color: var(--accent-strong);
}

.store-form input[type='text'],
.store-form input[type='email'],
.store-form input[type='number'],
.store-form input[type='password'],
.store-form select,
.store-form textarea,
.popup .store-form input[type='text'],
.popup .store-form input[type='email'],
.popup .store-form input[type='number'],
.popup .store-form input[type='password'],
.popup .store-form input[type='search'],
.popup .store-form select,
.popup .store-form textarea {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
}

.footer {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 2rem 1.5rem;
  border-top: 1px solid var(--border);
}

.footer p {
  margin: 0.25rem 0;
}

.footer a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.footer a:hover {
  color: var(--accent);
}

.footer .we-accept {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.9rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.footer .we-accept li {
  display: block;
}

.footer .we-accept img {
  height: 22px;
  width: auto;
  opacity: 0.75;
}

:root[data-theme='dark'] .footer .we-accept img {
  filter: grayscale(0.2) brightness(1.1);
}

@media (max-width: 700px) {
  .topbar-inner {
    padding: 0.6rem 1rem;
  }

  .topnav {
    gap: 0.7rem;
  }

  .topnav-link {
    font-size: 0.9rem;
  }

  .brand-logo {
    width: 34px;
    height: 34px;
  }

  .brand-name {
    font-size: 1.05rem;
  }

  .theme-toggle {
    width: 36px;
    height: 36px;
  }

  .container {
    padding: 0.5rem 1rem 3rem;
  }

  .store-hero {
    padding: 0.25rem 0 1rem;
  }

  .cart-fab {
    right: 1.25rem;
  }

  .store-hero h1 {
    font-size: 1.55rem;
  }

  .pkg-card {
    padding: 1.25rem 1.1rem;
  }

  .pkg-full {
    padding: 1.5rem 1.1rem;
  }

  .pkg-image-frame {
    width: 84px;
    height: 84px;
    border-radius: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ip-text .copy-icon svg {
    transition: opacity 0.15s ease;
  }
}