html[data-theme-id],
.theme-stage {
  --background: var(--t-dark-background);
  --surface: var(--t-dark-surface);
  --surface-2: var(--t-dark-surface);
  --surface-hover: color-mix(in srgb, var(--t-dark-surface) 88%, var(--t-dark-text));
  --text-primary: var(--t-dark-text);
  --text-secondary: var(--t-dark-muted);
  --text-muted: var(--t-dark-muted);
  --accent: var(--t-dark-accent);
  --accent-hover: var(--t-dark-secondary);
  --border: var(--t-dark-border);
  --border-hover: var(--t-dark-secondary);
  --header-bg: var(--t-header-bg, var(--t-dark-header));
  --paper: var(--t-dark-card);
  --field: var(--t-search-bg, var(--t-dark-search));
  --ink: var(--t-dark-text);
  --muted: var(--t-dark-muted);
  --line: var(--t-dark-border);
  --crimson: var(--t-dark-accent);
  --footer-bg: var(--t-dark-background);
  --footer-ink: var(--t-dark-text);
  --footer-link: var(--t-dark-muted);
  --footer-muted: var(--t-dark-muted);
  --footer-line: var(--t-dark-border);
  --chip: color-mix(in srgb, var(--t-dark-category) 70%, transparent);
  --shadow-sm: var(--t-dark-shadowbox);
  --shadow-md: var(--t-dark-shadowbox);
  --shadow-lg: var(--t-dark-shadowbox);
  --radius-sm: calc(var(--t-dark-radius) * 0.55px);
  --radius-md: calc(var(--t-dark-radius) * 1px);
  --radius-lg: calc(var(--t-dark-radius) * 1.15px);
  --radius-xl: calc(var(--t-dark-radius) * 1.35px);
  --header: var(--t-header-height);
  color-scheme: dark;
  background: var(--background);
  color: var(--text-primary);
  font-size: calc(16px * var(--t-font-scale, 100) / 100);
}
html[data-theme-id][data-theme="light"],
.theme-stage[data-theme="light"] {
  --background: var(--t-light-background);
  --surface: var(--t-light-surface);
  --surface-2: var(--t-light-surface);
  --surface-hover: color-mix(in srgb, var(--t-light-surface) 88%, var(--t-light-text));
  --text-primary: var(--t-light-text);
  --text-secondary: var(--t-light-muted);
  --text-muted: var(--t-light-muted);
  --accent: var(--t-light-accent);
  --accent-hover: var(--t-light-secondary);
  --border: var(--t-light-border);
  --border-hover: var(--t-light-secondary);
  --header-bg: var(--t-header-bg, var(--t-light-header));
  --paper: var(--t-light-card);
  --field: var(--t-search-bg, var(--t-light-search));
  --ink: var(--t-light-text);
  --muted: var(--t-light-muted);
  --line: var(--t-light-border);
  --crimson: var(--t-light-accent);
  --footer-bg: var(--t-light-background);
  --footer-ink: var(--t-light-text);
  --footer-link: var(--t-light-muted);
  --footer-muted: var(--t-light-muted);
  --footer-line: var(--t-light-border);
  --chip: var(--t-light-category);
  --shadow-sm: var(--t-light-shadowbox);
  --shadow-md: var(--t-light-shadowbox);
  --shadow-lg: var(--t-light-shadowbox);
  --radius-sm: calc(var(--t-light-radius) * 0.55px);
  --radius-md: calc(var(--t-light-radius) * 1px);
  --radius-lg: calc(var(--t-light-radius) * 1.15px);
  --radius-xl: calc(var(--t-light-radius) * 1.35px);
  color-scheme: light;
}
html[data-font="outfit"] { --font: "Outfit", "Segoe UI", sans-serif; }
html[data-font="cairo"] { --font: "Cairo", "Segoe UI", sans-serif; }
html[data-font="system"] { --font: system-ui, sans-serif; }
html[data-font="source"] { --font: "Source Sans 3", "Segoe UI", sans-serif; }
html[data-display="source"] { --display: "Source Sans 3", sans-serif; }
html[data-display="cairo"] { --display: "Cairo", sans-serif; }
html[data-display="outfit"] { --display: "Outfit", "Source Sans 3", sans-serif; }
html[data-motion="none"] .sound-button,
html[data-motion="none"] .sound-item { transition: none; animation: none; }

:is(html[data-theme-id], .theme-stage) .site-header {
  background: var(--header-bg);
  border-bottom-color: var(--border);
  border-bottom-width: calc(var(--t-header-border, 12) * 0.03px);
  box-shadow: 0 calc(var(--t-header-shadow, 10) * 0.08px) calc(var(--t-header-shadow, 10) * 0.2px) rgba(0, 0, 0, 0.18);
}
:is(html[data-theme-id], .theme-stage) .logo-mark { width: var(--t-logo); height: var(--t-logo); }
:is(html[data-theme-id], .theme-stage) .desktop-nav { gap: var(--t-nav-gap); }
:is(html[data-theme-id], .theme-stage) .header-search input {
  height: var(--t-search-height);
  border-radius: var(--t-search-radius);
  background: var(--field);
  border-color: var(--border);
  box-shadow: 0 calc(var(--t-search-shadow, 8) * 0.08px) calc(var(--t-search-shadow, 8) * 0.16px) rgba(0, 0, 0, 0.12);
}
:is(html[data-theme-id], .theme-stage) .header-search .search-icon { font-size: var(--t-search-icon); }
:is(html[data-theme-id], .theme-stage) .header-search input::placeholder { color: var(--t-placeholder-bg, var(--text-muted)); }
:is(html[data-theme-id], .theme-stage)[data-search-pos="left"] .search-band .header-search { margin-inline: 0 auto; }
:is(html[data-theme-id], .theme-stage)[data-search-pos="right"] .search-band .header-search { margin-inline: auto 0; }
:is(html[data-theme-id], .theme-stage)[data-search-style="rounded"] .header-search input { border-radius: 999px; }
:is(html[data-theme-id], .theme-stage)[data-search-style="minimal"] .header-search input { border-color: transparent; box-shadow: none; }
:is(html[data-theme-id], .theme-stage)[data-search-style="glass"] .header-search input { background: color-mix(in srgb, var(--field) 55%, transparent); backdrop-filter: blur(12px); }
:is(html[data-theme-id], .theme-stage)[data-search-style="dark"] .header-search input { background: #0b0d10; color: #f5f7fa; }
:is(html[data-theme-id], .theme-stage)[data-search-style="floating"] .header-search input { box-shadow: var(--shadow-md); }
:is(html[data-theme-id], .theme-stage)[data-header-style="minimal"] .site-header { box-shadow: none; border-bottom-color: transparent; backdrop-filter: none; }
:is(html[data-theme-id], .theme-stage)[data-header-style="floating"] .site-header { margin: 10px 12px 0; border-radius: 18px; border: 1px solid var(--border); }
:is(html[data-theme-id], .theme-stage)[data-header-style="glass"] .site-header { background: color-mix(in srgb, var(--header-bg) 62%, transparent); backdrop-filter: blur(22px); }
:is(html[data-theme-id], .theme-stage)[data-header-style="dark"] .site-header { background: #0b0d10; color: #f5f7fa; }
:is(html[data-theme-id], .theme-stage)[data-header-style="compact"] { --header: 58px; }
:is(html[data-theme-id], .theme-stage)[data-header-style="centered"] .header-inner { justify-content: center; }
:is(html[data-theme-id], .theme-stage) .cat-pills { gap: var(--t-cat-gap); }
:is(html[data-theme-id], .theme-stage) .cat-pill { border-radius: var(--t-cat-radius); background: var(--t-cat-bg, var(--chip)); }
:is(html[data-theme-id], .theme-stage) .cat-pill:hover { background: var(--t-cat-hover, var(--surface-hover)); }
:is(html[data-theme-id], .theme-stage) .cat-pill.is-on { background: var(--t-cat-active, var(--accent)); color: #fff; }
:is(html[data-theme-id], .theme-stage)[data-cat-icon="0"] .cat-pill i { display: none; }
:is(html[data-theme-id], .theme-stage)[data-category-style="cards"] .cat-pill { background: var(--surface); border: 1px solid var(--border); padding: 10px 14px; }
:is(html[data-theme-id], .theme-stage)[data-category-style="buttons"] .cat-pill { background: var(--accent); color: #fff; border-color: transparent; }
:is(html[data-theme-id], .theme-stage)[data-category-style="minimal"] .cat-pill { background: transparent; border-color: transparent; }
:is(html[data-theme-id], .theme-stage)[data-category-style="glass"] .cat-pill { background: color-mix(in srgb, var(--surface) 55%, transparent); backdrop-filter: blur(10px); }
:is(html[data-theme-id], .theme-stage)[data-category-style="icons"] .cat-pill { width: 42px; height: 42px; padding: 0; justify-content: center; font-size: 0; }
:is(html[data-theme-id], .theme-stage)[data-category-style="icons"] .cat-pill i { font-size: 16px; }
:is(html[data-theme-id], .theme-stage)[data-category-style="compact"] .cat-pill { padding: 4px 8px; }

:is(html[data-theme-id], .theme-stage) .sound-item:not(.is-hero) {
  background: var(--t-card-bg, var(--surface));
  border-color: var(--border);
  border-width: calc(1px + var(--t-card-border, 10) * 0.02px);
  border-radius: var(--t-card-radius, var(--radius-xl));
  padding: var(--t-card-padding, 16px);
  box-shadow: 0 calc(var(--t-card-shadow, 20) * 0.1px) calc(var(--t-card-shadow, 20) * 0.28px) rgba(0, 0, 0, 0.16);
}
:is(html[data-theme-id], .theme-stage) .sound-item:not(.is-hero):hover { background: var(--surface-hover); }
:is(html[data-theme-id], .theme-stage)[data-card-style="clean"] .sound-item { box-shadow: none; }
:is(html[data-theme-id], .theme-stage)[data-card-style="rounded"] .sound-item { border-radius: 28px; }
:is(html[data-theme-id], .theme-stage)[data-card-style="glass"] .sound-item { background: color-mix(in srgb, var(--surface) 68%, transparent); backdrop-filter: blur(14px); }
:is(html[data-theme-id], .theme-stage)[data-card-style="border"] .sound-item { box-shadow: none; }
:is(html[data-theme-id], .theme-stage)[data-card-style="compact"] .sound-item { padding: 8px; }
:is(html[data-theme-id], .theme-stage)[data-card-style="minimal"] .sound-item { background: transparent; border-color: transparent; box-shadow: none; }
:is(html[data-theme-id], .theme-stage)[data-card-style="cinematic"] .sound-item { background: #10141a; color: #f5f7fa; border-color: #242a36; }
:is(html[data-theme-id], .theme-stage)[data-card-style="soft"] .sound-item { box-shadow: 0 10px 24px rgba(80, 40, 90, 0.08); }
:is(html[data-theme-id], .theme-stage)[data-card-style="floating"] .sound-item { box-shadow: var(--shadow-lg); }
:is(html[data-theme-id], .theme-stage)[data-card-hover="none"] .sound-item:hover { transform: none; }
:is(html[data-theme-id], .theme-stage)[data-card-hover="lift"] .sound-item:hover { transform: translateY(-4px); }
:is(html[data-theme-id], .theme-stage)[data-card-hover="scale"] .sound-item:hover { transform: scale(1.03); }
:is(html[data-theme-id], .theme-stage)[data-card-hover="glow"] .sound-item:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }

:is(html[data-theme-id], .theme-stage)[data-button-size="small"] .sound-face,
.sound-item.is-size-small .sound-face { width: min(112px, 100%); }
:is(html[data-theme-id], .theme-stage)[data-button-size="large"] .sound-face,
.sound-item.is-size-large .sound-face { width: min(200px, 100%); }
:is(html[data-theme-id], .theme-stage)[data-button-shape="rounded"] .sound-face,
:is(html[data-theme-id], .theme-stage)[data-button-shape="rounded"] .sound-button { border-radius: 22%; overflow: hidden; }
:is(html[data-theme-id], .theme-stage)[data-button-shape="square"] .sound-face,
:is(html[data-theme-id], .theme-stage)[data-button-shape="square"] .sound-button { border-radius: 12px; overflow: hidden; }
:is(html[data-theme-id], .theme-stage) .sound-glyph { z-index: 2; color: #fff; }
.sound-item[data-color="white"] .sound-glyph,
.sound-item[data-color="yellow"] .sound-glyph,
.sound-item[data-color="lime"] .sound-glyph,
.sound-item[data-color="silver"] .sound-glyph { color: #151922; }
:is(html[data-theme-id], .theme-stage) .sound-glyph svg { width: calc(var(--t-icon-size, 22) * 1%); height: calc(var(--t-icon-size, 22) * 1%); }
:is(html[data-theme-id], .theme-stage) .sound-button .icon-play { display: none; }
:is(html[data-theme-id], .theme-stage)[data-icon="triangle"] .icon-play[data-icon="triangle"],
:is(html[data-theme-id], .theme-stage)[data-icon="circle"] .icon-play[data-icon="circle"],
:is(html[data-theme-id], .theme-stage)[data-icon="minimal"] .icon-play[data-icon="minimal"],
:is(html[data-theme-id], .theme-stage)[data-icon="waveform"] .icon-play[data-icon="waveform"],
:is(html[data-theme-id], .theme-stage)[data-icon="sound"] .icon-play[data-icon="sound"],
:is(html[data-theme-id], .theme-stage)[data-icon="custom"] .icon-play[data-icon="custom"] { display: grid; }
:is(html[data-theme-id], .theme-stage) .sound-button.is-playing .icon-play { display: none; }
:is(html[data-theme-id], .theme-stage) .sound-button.is-playing .icon-pause { display: grid; }
:is(html[data-theme-id], .theme-stage) .sound-button::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 10%;
  height: 24%;
  border-radius: 50%;
  background: #fff;
  opacity: calc(var(--button-gloss, 0) / 260);
  pointer-events: none;
  z-index: 1;
}
:is(html[data-theme-id], .theme-stage) .sound-button {
  filter: drop-shadow(0 calc(var(--button-depth, 0) * 0.08px) calc(var(--button-shadow, 0) * 0.18px) rgba(0, 0, 0, 0.35)) drop-shadow(0 0 calc(var(--button-glow, 0) * 0.2px) var(--sound, var(--accent)));
}
:is(html[data-theme-id], .theme-stage):is([data-button-style="neon"], [data-button-style="glass"], [data-button-style="soft"], [data-button-style="flat"], [data-button-style="pill"], [data-button-style="retro"], [data-button-style="minimal"]) .sound-button img,
.sound-button:is(.is-style-neon, .is-style-glass, .is-style-soft, .is-style-flat, .is-style-pill, .is-style-retro, .is-style-minimal) img { display: none; }
:is(html[data-theme-id], .theme-stage)[data-button-style="neon"] .sound-button,
.sound-button.is-style-neon {
  background: radial-gradient(circle at 50% 42%, var(--sound-light, #fff), var(--sound, var(--accent)) 58%, var(--sound-dark, #111));
  box-shadow: 0 0 calc(var(--button-glow, 40) * 0.28px) var(--sound, var(--accent)), inset 0 calc(var(--button-depth, 40) * -0.12px) 0 rgba(0, 0, 0, 0.35);
}
:is(html[data-theme-id], .theme-stage)[data-button-style="glass"] .sound-button,
.sound-button.is-style-glass {
  background: linear-gradient(160deg, color-mix(in srgb, var(--sound, var(--accent)) 55%, white), color-mix(in srgb, var(--sound, var(--accent)) 35%, transparent));
  border: 1px solid color-mix(in srgb, white 50%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
:is(html[data-theme-id], .theme-stage)[data-button-style="soft"] .sound-button,
.sound-button.is-style-soft {
  background: radial-gradient(circle at 40% 35%, var(--sound-light, #fff), var(--sound, var(--accent)) 70%);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}
:is(html[data-theme-id], .theme-stage)[data-button-style="flat"] .sound-button,
.sound-button.is-style-flat { background: var(--sound, var(--accent)); box-shadow: none; }
:is(html[data-theme-id], .theme-stage)[data-button-style="flat"] .sound-button::before,
.sound-button.is-style-flat::before { opacity: 0; }
:is(html[data-theme-id], .theme-stage)[data-button-style="pill"] .sound-face,
.sound-item:has(.is-style-pill) .sound-face { aspect-ratio: 1.8; }
:is(html[data-theme-id], .theme-stage)[data-button-style="pill"] .sound-button,
.sound-button.is-style-pill { border-radius: 999px; background: linear-gradient(180deg, var(--sound-light, #fff), var(--sound, var(--accent))); }
:is(html[data-theme-id], .theme-stage)[data-button-style="retro"] .sound-button,
.sound-button.is-style-retro {
  background: var(--sound, var(--accent));
  border: 3px solid #2a2118;
  box-shadow: 0 4px 0 #2a2118;
  border-radius: 8px;
}
:is(html[data-theme-id], .theme-stage)[data-button-style="minimal"] .sound-button,
.sound-button.is-style-minimal { background: transparent; border: 2px solid var(--sound, var(--accent)); box-shadow: none; }
:is(html[data-theme-id], .theme-stage)[data-button-style="minimal"] .sound-button::before,
.sound-button.is-style-minimal::before { opacity: 0; }
:is(html[data-theme-id], .theme-stage)[data-button-style="metallic"] .sound-button img,
:is(html[data-theme-id], .theme-stage)[data-button-style="chrome"] .sound-button img { filter: contrast(1.15) brightness(1.08); }
:is(html[data-theme-id], .theme-stage)[data-button-anim="none"] .sound-button:hover,
:is(html[data-theme-id], .theme-stage)[data-button-anim="none"] .sound-button:active { transform: none; }
:is(html[data-theme-id], .theme-stage)[data-button-anim="bounce"] .sound-button:hover { transform: translateY(-3px) scale(1.04); }
:is(html[data-theme-id], .theme-stage)[data-button-anim="press"] .sound-button:active { transform: scale(0.92); }
:is(html[data-theme-id], .theme-stage)[data-button-anim="pulse"] .sound-button { animation: theme-pulse 1.8s ease-in-out infinite; }
:is(html[data-theme-id], .theme-stage)[data-button-anim="glow"] .sound-button { animation: theme-glow 1.6s ease-in-out infinite; }
@keyframes theme-pulse { 50% { transform: scale(1.04); } }
@keyframes theme-glow { 50% { filter: drop-shadow(0 0 16px var(--sound, var(--accent))); } }
@media (prefers-reduced-motion: reduce) {
  :is(html[data-theme-id], .theme-stage) .sound-button { animation: none; }
}

.home-layout[data-home="compact"] .sound-grid,
.theme-stage[data-home="compact"] .sound-grid { gap: 8px; }
.home-layout[data-home="premium"] .sound-grid,
.theme-stage[data-home="premium"] .sound-grid { gap: 22px; }
.home-layout[data-home="large"] .sound-grid,
.theme-stage[data-home="large"] .sound-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-layout[data-home="minimal"] .sound-item,
.theme-stage[data-home="minimal"] .sound-item { box-shadow: none; }
.home-layout[data-home="featured"] .sound-grid .sound-item:first-child,
.theme-stage[data-home="featured"] .sound-grid .sound-item:first-child { grid-column: span 2; }
.home-layout[data-home="masonry"] .sound-grid,
.theme-stage[data-home="masonry"] .sound-grid { display: block; column-count: 4; column-gap: 16px; }
.home-layout[data-home="masonry"] .sound-item,
.theme-stage[data-home="masonry"] .sound-item { break-inside: avoid; display: inline-flex; width: 100%; margin-bottom: 16px; }
@media (max-width: 800px) {
  .home-layout[data-home="large"] .sound-grid,
  .theme-stage[data-home="large"] .sound-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-layout[data-home="masonry"] .sound-grid,
  .theme-stage[data-home="masonry"] .sound-grid { column-count: 2; }
}

.theme-work { display: grid; grid-template-columns: minmax(280px, 440px) minmax(0, 1fr); gap: 18px; align-items: start; }
.theme-preview-col { position: sticky; top: 12px; }
.theme-devices { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.theme-devices button { border: 1px solid var(--line); background: var(--paper); color: inherit; border-radius: 999px; padding: 6px 12px; }
.theme-devices button.is-on { background: var(--accent); color: #fff; border-color: transparent; }
.theme-frame { margin-inline: auto; max-height: 78vh; overflow: auto; border-radius: 16px; border: 1px solid var(--line); }
.theme-frame.is-desktop { width: 100%; }
.theme-frame.is-tablet { width: min(768px, 100%); }
.theme-frame.is-mobile { width: min(390px, 100%); }
.theme-stage { min-height: 520px; }
.theme-stage .pv-body { padding: 16px 0 8px; }
.theme-stage .sound-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.theme-frame.is-tablet .sound-grid,
.theme-frame.is-mobile .sound-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.theme-colors, .theme-palette { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-color { width: 92px; }
.theme-palette button { border: 0; border-radius: 999px; padding: 6px 10px; background: var(--chip); color: inherit; }
@media (max-width: 1100px) {
  .theme-work { grid-template-columns: 1fr; }
  .theme-preview-col { position: static; }
}
body:not(:has(.theme-stage)) .sound-item:not(.is-hero) {
  width: 100%;
  padding: 0 2px 4px;
}
body:not(:has(.theme-stage)) .sound-item:not(.is-hero) .sound-kicker,
body:not(:has(.theme-stage)) .sound-item:not(.is-hero) .sound-plays,
body:not(:has(.theme-stage)) .sound-item:not(.is-hero) .sound-creator,
body:not(:has(.theme-stage)) .sound-item:not(.is-hero) .save-button {
  display: none;
}
body:not(:has(.theme-stage)) .sound-item:not(.is-hero) .sound-face {
  width: 100%;
  max-width: 124px;
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto;
}
body:not(:has(.theme-stage)) .sound-item:not(.is-hero) .sound-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body:not(:has(.theme-stage)) .sound-item:not(.is-hero) .sound-title {
  margin-top: 6px;
  min-height: 2.4em;
  color: #8b919a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
body:not(:has(.theme-stage)) .sound-item:not(.is-hero) .sound-actions {
  margin-top: 2px;
  padding-top: 0;
  gap: 8px;
}
body:not(:has(.theme-stage)) .sound-item:not(.is-hero) .favorite-button,
body:not(:has(.theme-stage)) .sound-item:not(.is-hero) .copy-button,
body:not(:has(.theme-stage)) .sound-item:not(.is-hero) .share-button {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
}
body:not(:has(.theme-stage)) .sound-item:not(.is-hero) .favorite-button { order: 1; color: #ff4d73; }
body:not(:has(.theme-stage)) .sound-item:not(.is-hero) .favorite-button.is-active { color: #e11d48; background: transparent; }
body:not(:has(.theme-stage)) .sound-item:not(.is-hero) .copy-button { order: 2; color: #fff; background: #2bb8c9; }
body:not(:has(.theme-stage)) .sound-item:not(.is-hero) .share-button { order: 3; color: #3b82f6; }