@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/JetBrainsMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/JetBrainsMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0A0D14;
  --surface: #121622;
  --surface-2: #191E2E;
  --surface-3: #22293E;
  --border: #262D42;
  --border-light: rgba(255, 255, 255, 0.08);
  --text: #F4F6FB;
  --text-muted: #8E98B0;
  --accent-red: #FF2D55;
  --accent-orange: #FF6A00;
  --accent-cyan: #00E5FF;
  --accent-purple: #AF52DE;
  --accent-green: #34C759;
  --player-glow-color: #00E5FF;
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 14px 40px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.2);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F6FC;
  --surface: #FFFFFF;
  --surface-2: #E9EDF6;
  --surface-3: #DDE3F0;
  --border: #D1D8E6;
  --border-light: rgba(0, 0, 0, 0.06);
  --text: #0E121C;
  --text-muted: #606A82;
  --shadow-lg: 0 24px 70px rgba(26, 38, 70, 0.12);
  --shadow-md: 0 12px 35px rgba(26, 38, 70, 0.08);
  --shadow-sm: 0 4px 16px rgba(26, 38, 70, 0.05);
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  min-width: 320px;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  transition: background 0.2s ease, color 0.2s ease;
}

.shell {
  width: min(1260px, calc(100% - 40px));
  margin-inline: auto;
}

/* Bilingual text visibility */
html[lang="ru"] .en,
html[lang="en"] .ru { display: none !important; }
.hidden { display: none !important; }

/* Ambient background glowing orbs */
.bg-glow {
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.18;
}
html[data-theme="light"] .bg-glow { opacity: 0.12; filter: blur(100px); }
.glow-1 { width: 580px; height: 580px; top: -140px; right: -120px; background: radial-gradient(circle, #FF2D55, transparent 70%); }
.glow-2 { width: 640px; height: 640px; top: 480px; left: -220px; background: radial-gradient(circle, #AF52DE, transparent 70%); }
.glow-3 { width: 520px; height: 520px; bottom: 100px; right: -180px; background: radial-gradient(circle, #00E5FF, transparent 70%); }

/* ---------- Sticky Navigation Bar ---------- */
.navbar {
  position: sticky;
  top: 14px;
  z-index: 1000;
  margin-top: 14px;
  min-height: 68px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-sm);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
}
.nav-brand img {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.nav-brand-text b {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.nav-brand-text span {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.14em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.nav-links a {
  padding: 8px 13px;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.nav-links a:hover {
  color: var(--text);
  background: var(--surface-2);
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-pill {
  display: flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
.lang-pill button {
  padding: 5px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.lang-pill button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.theme-toggle-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}
.theme-toggle-btn:hover {
  border-color: var(--text-muted);
  transform: translateY(-1px);
}
.theme-toggle-btn { position: relative; overflow: visible; }
.theme-toggle-btn .tt-svg {
  width: 19px;
  height: 19px;
  overflow: visible;
}
.theme-toggle-btn .tt-core {
  fill: currentColor;
  transform-origin: 12px 12px;
  transition: transform 0.5s cubic-bezier(0.34, 1.32, 0.42, 1);
}
.theme-toggle-btn .tt-bite {
  transform-origin: 12px 12px;
  transition: transform 0.5s cubic-bezier(0.34, 1.32, 0.42, 1);
}
.theme-toggle-btn .tt-rays {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  transform-origin: 12px 12px;
  transition: transform 0.5s cubic-bezier(0.34, 1.32, 0.42, 1), opacity 0.3s ease;
}
.theme-toggle-btn .tt-stars {
  fill: currentColor;
  transform-origin: 12px 12px;
  transition: transform 0.5s cubic-bezier(0.34, 1.32, 0.42, 1), opacity 0.3s ease 0.07s;
}
.theme-toggle-btn .tt-halo {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255, 45, 85, 0.45), transparent 68%);
  opacity: 0;
  transform: scale(0.55);
  pointer-events: none;
}
.theme-toggle-btn .tt-core { transform: scale(1.16); }
.theme-toggle-btn .tt-bite { transform: translate(5.6px, -4.6px); }
.theme-toggle-btn .tt-rays { opacity: 0; transform: scale(0.32) rotate(-72deg); }
.theme-toggle-btn .tt-stars { opacity: 0.85; transform: scale(1); }
html[data-theme="light"] .theme-toggle-btn .tt-core { transform: scale(0.86); }
html[data-theme="light"] .theme-toggle-btn .tt-bite { transform: translate(15px, -11px); }
html[data-theme="light"] .theme-toggle-btn .tt-rays { opacity: 1; transform: scale(1) rotate(0deg); }
html[data-theme="light"] .theme-toggle-btn .tt-stars { opacity: 0; transform: scale(0.4); }
.theme-toggle-btn.is-switching .tt-svg { animation: ttSpin 0.55s cubic-bezier(0.34, 1.28, 0.44, 1); }
.theme-toggle-btn.is-switching .tt-halo { animation: ttHalo 0.6s ease-out; }
@keyframes ttSpin {
  from { transform: rotate(-46deg) scale(0.78); }
  to { transform: rotate(0deg) scale(1); }
}
@keyframes ttHalo {
  0% { opacity: 0.85; transform: scale(0.55); }
  100% { opacity: 0; transform: scale(1.5); }
}

.nav-download-btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--accent-red), var(--accent-orange));
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(255, 45, 85, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}
.nav-download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 45, 85, 0.45);
}
.nav-download-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

/* ---------- Hero Section ---------- */
.hero-section {
  padding: 70px 0 90px;
  display: grid;
  grid-template-columns: minmax(420px, 0.9fr) minmax(520px, 1.1fr);
  align-items: center;
  gap: 60px;
}

.hero-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.hero-tag-badge .sparkle {
  color: #FFD600;
}

.hero-title {
  font-size: clamp(44px, 5.2vw, 70px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.045em;
  margin-bottom: 22px;
}
.gradient-text {
  background: linear-gradient(95deg, #FF2D55 0%, #FF6A00 35%, #AF52DE 70%, #00E5FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-description {
  max-width: 580px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 34px;
}

.hero-btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 38px;
}

.btn-primary {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, #FF2D55, #FF6A00 60%, #AF52DE);
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(255, 45, 85, 0.38);
  transition: transform 0.18s, box-shadow 0.18s;
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(255, 45, 85, 0.5);
}
.btn-primary svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-primary-text strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
}
.btn-primary-text small {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  opacity: 0.85;
}

.btn-secondary {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s, border-color 0.18s;
}
.btn-secondary:hover {
  transform: translateY(-3px);
  border-color: var(--text-muted);
}
.btn-secondary svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

.trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
}
.trust-item .check-icon {
  color: var(--accent-green);
  font-weight: 900;
}

/* ---------- Hero Interactive Live Mock Player ---------- */
.hero-player-wrap {
  position: relative;
}

.player-floating-header {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.live-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
}
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-red);
  box-shadow: 0 0 0 4px rgba(255, 45, 85, 0.25);
  animation: pulseAnim 2s infinite;
}
@keyframes pulseAnim {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

.mock-browser-window {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.mock-browser-topbar {
  height: 44px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.mock-dots {
  display: flex;
  gap: 6px;
}
.mock-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.mock-dots i:nth-child(1) { background: #FF5F56; }
.mock-dots i:nth-child(2) { background: #FFBD2E; }
.mock-dots i:nth-child(3) { background: #27C93F; }

.mock-url-bar {
  height: 28px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mock-url-bar svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.mock-actions {
  text-align: right;
  color: var(--text-muted);
  font-size: 14px;
}

.mock-video-viewport {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #080A10;
  overflow: hidden;
  user-select: none;
}

/* Scenery graphics inside player */
.video-scenery {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #181132 0%, #3B1B54 45%, #B43B66 85%, #FF7A45 100%);
  overflow: hidden;
}
.scenery-glow {
  position: absolute;
  top: 15%;
  left: 50%;
  width: 220px;
  height: 220px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 122, 69, 0.7), transparent 70%);
}
.scenery-sun {
  position: absolute;
  top: 18%;
  left: 50%;
  width: 100px;
  height: 100px;
  translate: -50% 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFD000 0%, #FF3D00 100%);
  box-shadow: 0 0 40px rgba(255, 120, 0, 0.7);
}
.scenery-city {
  position: absolute;
  bottom: 35px;
  left: 0;
  right: 0;
  height: 40px;
  background:
    linear-gradient(90deg, #090B14 0 20px, transparent 20px 24px, #090B14 24px 50px, transparent 50px 55px, #090B14 55px 90px, transparent 90px 96px) repeat-x bottom;
  background-size: 100px 35px;
  opacity: 0.85;
}
.scenery-grid-floor {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45px;
  background:
    linear-gradient(rgba(255, 45, 85, 0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 45, 85, 0.4) 1px, transparent 1px);
  background-size: 20px 20px;
  transform: perspective(100px) rotateX(45deg);
  transform-origin: bottom;
}

.video-meta-overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #FFFFFF;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.channel-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  opacity: 0.85;
}
.video-meta-overlay h3 {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 800;
}

.center-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  background: rgba(14, 18, 28, 0.6);
  color: #FFFFFF;
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.center-play-button:hover {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(14, 18, 28, 0.85);
}
.center-play-button svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

/* YouTube Bottom Bar */
.yt-bottom-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 18px 10px;
  background: linear-gradient(transparent, rgba(6, 8, 14, 0.95));
}

.yt-progress-container {
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.yt-progress-bg {
  position: absolute;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.25);
}
.yt-progress-buffer {
  position: absolute;
  left: 0;
  width: 70%;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.45);
}
.yt-progress-fill {
  position: absolute;
  left: 0;
  width: 42%;
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(90deg, #00F0FF, #B14BFF);
  box-shadow: 0 0 16px var(--player-glow-color);
  transition: width 0.05s ease-out;
}
.yt-scrubber-dot {
  position: absolute;
  left: 42%;
  top: 50%;
  translate: -50% -50%;
  width: 17px;
  height: 17px;
  border: 3px solid #FFFFFF;
  border-radius: 50%;
  background: #00F0FF;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 12px var(--player-glow-color);
  transition: left 0.05s ease-out;
}
.yt-scrubber-dot.shape-square {
  border-radius: 4px;
}
.yt-scrubber-dot.shape-diamond {
  border-radius: 3px;
  rotate: 45deg;
}
.yt-scrubber-dot.shape-emoji {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent !important;
  box-shadow: none;
  font-size: 22px;
  display: grid;
  place-items: center;
}

.yt-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  color: #FFFFFF;
}
.yt-ctrl-left, .yt-ctrl-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.yt-btn {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.yt-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.yt-ctrl-left .yt-btn:first-child svg {
  fill: currentColor;
}
.yt-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.9;
}
.yt-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 5px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 4px;
}

/* Quick theme switcher buttons under player */
.player-theme-bar {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.switcher-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}
.switcher-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sw-btn {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.sw-btn:hover {
  transform: translateY(-2px);
  border-color: var(--text-muted);
}
.sw-btn.active {
  border-color: var(--accent-red);
  background: var(--surface-2);
  box-shadow: 0 0 0 2px rgba(255, 45, 85, 0.2);
}
.sw-preview {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* ---------- Theme Collection Section ---------- */
.catalog-section {
  padding: 100px 0;
}

.section-title-wrap {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 40px;
}
.tag-pill {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--accent-red);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
}
.section-heading {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-bottom: 14px;
}
.section-subtext {
  font-size: 15px;
  color: var(--text-muted);
}

.category-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 34px;
}
.cat-btn {
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.cat-btn:hover {
  color: var(--text);
  border-color: var(--text-muted);
}
.cat-btn.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  box-shadow: var(--shadow-sm);
}

.theme-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.theme-card-box {
  position: relative;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.theme-card-box:hover {
  transform: translateY(-5px);
  border-color: var(--text-muted);
  box-shadow: var(--shadow-md);
}
.theme-card-box.active {
  border-color: var(--accent-red);
  box-shadow: 0 0 0 2px rgba(255, 45, 85, 0.3), var(--shadow-md);
}

.theme-card-preview {
  position: relative;
  height: 100px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
}
.tc-grid-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
              linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 14px 14px;
}
.tc-track-bg {
  position: absolute;
  left: 14px;
  right: 14px;
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.2);
}
.tc-track-fill {
  position: absolute;
  left: 14px;
  height: 6px;
  border-radius: 99px;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
.tc-scrubber {
  position: absolute;
  top: 50%;
  translate: -50% -50%;
  width: 18px;
  height: 18px;
  border: 3px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  display: grid;
  place-items: center;
}
.tc-scrubber.scrub-square { border-radius: 4px; }
.tc-scrubber.scrub-diamond { border-radius: 3px; rotate: 45deg; }
.tc-scrubber.scrub-emoji {
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent !important;
  font-size: 20px;
}

.theme-card-info {
  padding: 0 4px 6px;
}
.tc-tag-badge {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 800;
}
.tc-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 4px;
}
.tc-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.tc-apply-btn {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
}
.tc-apply-btn:hover {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.tc-apply-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* ---------- Features Grid Section ---------- */
.features-section {
  padding: 100px 0;
}

.feature-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
}

.feat-card {
  position: relative;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
}
.feat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.feat-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #FFFFFF;
  margin-bottom: 22px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.feat-icon-box svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feat-card h3 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.feat-card p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-muted);
}

.feat-visual-bar {
  margin-top: 20px;
  height: 8px;
  border-radius: 99px;
  background: var(--surface-2);
  overflow: hidden;
}
.demo-flow-bar {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #FF2D55, #FF9A00, #FFD60A, #34C759, #00E5FF, #AF52DE, #FF2D55);
  background-size: 200% 100%;
  animation: flowAnim 4s linear infinite;
}
@keyframes flowAnim {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

.feat-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.feat-badges-row span {
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
}

/* ---------- Editor UI Tour Section ---------- */
.editor-tour-section {
  padding: 100px 0;
}

.editor-tour-layout {
  display: grid;
  grid-template-columns: minmax(380px, 0.85fr) minmax(500px, 1.15fr);
  align-items: center;
  gap: 60px;
}

.editor-tour-info h2 {
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.editor-tour-info > p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 30px;
}

.tour-features-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tour-f-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.tour-num {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--accent-red);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
}
.tour-f-item b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 3px;
}
.tour-f-item p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.editor-mockup-window {
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.mockup-header-bar {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.mockup-ver {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 800;
  color: var(--text-muted);
}
.mockup-screen-container {
  aspect-ratio: 1006 / 870;
  overflow: hidden;
  background: #080A10;
}
.mockup-screen-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: opacity 0.15s ease;
}
.mockup-screen-container img.fading {
  opacity: 0.2;
}

/* ---------- Install Guide Section ---------- */
.install-section {
  padding: 100px 0;
}

.install-cards-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.install-step-card {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.step-badge {
  display: inline-block;
  margin-bottom: 16px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--accent-orange);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 900;
}
.install-step-card h3 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 8px;
}
.install-step-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.install-step-card code {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text);
}
.step-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.step-btn:hover {
  background: var(--text);
  color: var(--bg);
}

.cta-banner-box {
  padding: 32px 36px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-red) 12%, var(--surface)), color-mix(in srgb, var(--accent-purple) 12%, var(--surface)));
  box-shadow: var(--shadow-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cta-banner-left {
  display: flex;
  align-items: center;
  gap: 18px;
}
.cta-banner-left img {
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.cta-banner-left h3 {
  font-size: 20px;
  font-weight: 900;
}
.cta-banner-left p {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* ---------- FAQ Section ---------- */
.faq-section {
  padding: 80px 0 120px;
}

.faq-accordion-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.15s;
}
.faq-item[open] {
  border-color: var(--text-muted);
}
.faq-item summary {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-arrow {
  color: var(--text-muted);
  font-size: 18px;
  transition: transform 0.2s;
}
.faq-item[open] .faq-arrow {
  transform: rotate(180deg);
}
.faq-body {
  padding: 0 22px 20px;
  border-top: 1px solid var(--border-light);
  padding-top: 14px;
}
.faq-body p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 60px 0 40px;
  border-top: 1px solid var(--border);
}
.footer-top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-brand b {
  display: block;
  font-size: 15px;
  font-weight: 800;
}
.footer-brand p {
  font-size: 12px;
  color: var(--text-muted);
}
.footer-links {
  display: flex;
  gap: 20px;
}
.footer-links a {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.footer-links a:hover {
  color: var(--text);
}
.footer-bottom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
  color: var(--text-muted);
  font-size: 12px;
}

/* ---------- Privacy Legal Page ---------- */
.legal-page .navbar nav { display: none; }
.legal-content-wrap {
  max-width: 800px;
  margin: 70px auto 100px;
}
.legal-content-wrap h1 {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 900;
  letter-spacing: -0.04em;
  margin-bottom: 16px;
}
.legal-subhead {
  font-size: 17px;
  color: var(--text-muted);
  margin-bottom: 40px;
  line-height: 1.6;
}
.legal-section-block {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.legal-section-block h2 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 12px;
}
.legal-section-block p, .legal-section-block ul {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-muted);
}
.legal-section-block ul {
  padding-left: 20px;
  margin-top: 10px;
}

/* ---------- Responsive Breakpoints ---------- */
@media (max-width: 1080px) {
  .hero-section {
    grid-template-columns: 1fr;
    gap: 50px;
    padding-top: 50px;
  }
  .hero-content {
    max-width: 720px;
  }
  .hero-player-wrap {
    max-width: 760px;
  }
  .editor-tour-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .install-cards-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .navbar nav {
    display: none;
  }
  .nav-download-btn span {
    display: none;
  }
  .nav-download-btn {
    padding: 0 12px;
  }
  .hero-section {
    padding-top: 40px;
  }
  .hero-title {
    font-size: 38px;
  }
  .theme-grid-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .feature-cards-grid {
    grid-template-columns: 1fr;
  }
  .cta-banner-box {
    flex-direction: column;
    align-items: stretch;
  }}

@media (max-width: 480px) {
  .shell {
    width: calc(100% - 24px);
  }
  .nav-brand-text span {
    display: none;
  }
  .hero-title {
    font-size: 32px;
  }
  .theme-grid-container {
    grid-template-columns: 1fr;
  }
  .footer-top-row {
    flex-direction: column;
    align-items: flex-start;
  }}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }}

/* ================================================================== v1.2.0 */
/* Кнопка play больше не улетает: раньше складывались translate и transform сразу. */
.center-play-button {
  translate: none;
  transform: translate(-50%, -50%);
  transition: transform 0.18s cubic-bezier(.2,.8,.2,1), background 0.18s, border-color 0.18s;
}
.center-play-button:hover,
.center-play-button:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
  border-color: rgba(255,255,255,0.55);
}
.center-play-button:active {
  transform: translate(-50%, -50%) scale(0.96);
}
.center-play-button.is-playing svg.icon-play,
.center-play-button:not(.is-playing) svg.icon-pause {
  display: none;
}

/* Громкость: полоса выезжает при наведении, как в YouTube. */
.yt-volume {
  display: flex;
  align-items: center;
}
.yt-volume-slider {
  position: relative;
  width: 0;
  height: 16px;
  margin-left: 0;
  opacity: 0;
  cursor: pointer;
  transition: width 0.22s cubic-bezier(.2,.8,.2,1), opacity 0.16s ease, margin 0.22s;
}
.yt-volume:hover .yt-volume-slider,
.yt-volume:focus-within .yt-volume-slider,
.yt-volume.is-open .yt-volume-slider {
  width: 68px;
  margin-left: 9px;
  opacity: 1;
}
.yt-vol-track,
.yt-vol-fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 3px;
  border-radius: 99px;
  translate: 0 -50%;
}
.yt-vol-track {
  width: 100%;
  background: rgba(255,255,255,0.32);
}
.yt-vol-fill {
  width: 70%;
  background: #FFFFFF;
}
.yt-vol-dot {
  position: absolute;
  top: 50%;
  left: 70%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #FFFFFF;
  translate: -50% -50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.vol-cross.hidden,
.vol-wave.hidden {
  display: none;
}

/* Окно скриншота: один слот + аккуратная заглушка, пока файла нет. */
.mockup-header-bar .mockup-dots {
  display: inline-flex;
  gap: 6px;
}
.mockup-header-bar .mockup-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border);
}
.mockup-title {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}
.mockup-screen-container {
  position: relative;
}
.mockup-screen-container.is-empty img {
  visibility: hidden;
}
.shot-placeholder {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 12px, transparent 12px 24px),
    var(--surface-2);
}
.mockup-screen-container.is-empty .shot-placeholder {
  display: flex;
}
.shot-placeholder svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.shot-placeholder b {
  font-size: 17px;
  font-weight: 800;
}
.shot-placeholder span {
  max-width: 430px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}
.shot-placeholder code {
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--surface);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
}

/* Ссылка на Firefox Add-ons: пока пуста — ведёт на ручную установку. */
.ff-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 7px 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 99px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.ff-note.hidden {
  display: none;
}
.ff-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

/* ====================================================== Firefox release polish */
.hero-brand-lockup{display:block;width:190px;max-width:42vw;height:118px;margin:0 0 14px;object-fit:contain;object-position:left center;filter:drop-shadow(0 18px 34px color-mix(in srgb,var(--accent) 18%,transparent))}
.ff-icon{width:24px!important;height:24px!important;flex:0 0 auto;display:block;object-fit:contain}
.step-btn{gap:9px}.step-btn .ff-icon{width:20px!important;height:20px!important}
.firefox-confirm-pill{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid color-mix(in srgb,#ff7139 34%,var(--border));border-radius:12px;background:color-mix(in srgb,#ff7139 8%,var(--surface-2));color:var(--text);font-size:12px;font-weight:750}
.firefox-confirm-pill img{width:21px;height:21px}

/* Screenshot is shown as-is: no fake window frame, border, crop, or header. */
.editor-shot-stage{min-width:0;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
.editor-shot-stage .mockup-screen-container{aspect-ratio:auto;min-height:390px;overflow:visible;background:transparent;border:0;border-radius:0;box-shadow:none}
.editor-shot-stage .mockup-screen-container img{width:100%;height:auto;max-height:none;object-fit:contain;object-position:center;display:block;border:0;border-radius:0;box-shadow:none;background:transparent}
.editor-shot-stage .shot-placeholder{position:relative;min-height:390px;border:0;border-radius:0;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 62%)}

/* Both playback buttons show the right glyph while the timeline advances. */
#playBtn svg.icon-pause,#playBtn.is-playing svg.icon-play{display:none}
#playBtn.is-playing svg.icon-pause{display:block}
.mock-video-viewport.is-playing .scenery-sun{animation:releaseSun 6s ease-in-out infinite alternate}
.mock-video-viewport.is-playing .scenery-grid-floor{animation:releaseGrid 2.4s linear infinite}
@keyframes releaseSun{to{transform:translateY(-5px) scale(1.035);filter:brightness(1.16)}}
@keyframes releaseGrid{to{background-position:0 30px}}

@media(max-width:720px){.hero-brand-lockup{width:150px;height:92px;margin-inline:auto;object-position:center}.editor-shot-stage .mockup-screen-container,.editor-shot-stage .shot-placeholder{min-height:260px}}


/* ===================================================== cross-browser/site release polish */
.editor-tour-info > .tag-pill{width:max-content;margin-bottom:18px}
.ff-icon{border-radius:0!important;filter:drop-shadow(0 3px 7px rgba(72,45,175,.28))}

/* Liquid-metal day/night control: quiet, readable, and no cramped moon glyph. */
.theme-toggle-btn{width:66px!important;height:36px!important;padding:3px!important;border:1px solid color-mix(in srgb,var(--text) 16%,var(--border))!important;border-radius:999px!important;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 82%,#fff 18%),color-mix(in srgb,var(--surface-2) 86%,#000 14%))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -4px 10px rgba(0,0,0,.11),0 8px 22px rgba(0,0,0,.12)!important;overflow:hidden!important}
.theme-toggle-btn:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--text) 34%,var(--border))!important}
.theme-toggle-metal{position:relative;width:100%;height:100%;display:block;border-radius:inherit}
.theme-toggle-glyph{position:absolute;z-index:2;top:50%;translate:0 -52%;font-size:14px;line-height:1;color:var(--text-muted);transition:color .25s,transform .35s}.theme-toggle-glyph.sun{left:7px}.theme-toggle-glyph.moon{right:8px;font-size:16px}
.theme-toggle-thumb{position:absolute;z-index:1;top:1px;left:1px;width:28px;height:28px;border:1px solid rgba(255,255,255,.24);border-radius:50%;background:linear-gradient(145deg,#fff,#cfd3dc 52%,#8d94a3);box-shadow:0 4px 12px rgba(0,0,0,.26),inset 0 1px 0 #fff;transition:transform .45s cubic-bezier(.2,.9,.22,1.18),background .3s}
html[data-theme="dark"] .theme-toggle-thumb{transform:translateX(28px);background:linear-gradient(145deg,#737b8c,#252a34 54%,#0b0d12)}
html[data-theme="light"] .theme-toggle-glyph.sun,html[data-theme="dark"] .theme-toggle-glyph.moon{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.theme-toggle-btn.is-switching .theme-toggle-thumb{animation:metalPulse .5s ease}@keyframes metalPulse{50%{scale:.82}}

/* Real website editor. */
.theme-builder-section{padding:105px 0 95px;scroll-margin-top:96px}.builder-title-wrap{max-width:790px;margin-inline:auto}.theme-builder-shell{display:grid;grid-template-columns:minmax(340px,.88fr) minmax(420px,1.12fr);gap:20px;align-items:start}.liquid-panel{position:relative;border:1px solid color-mix(in srgb,var(--text) 13%,var(--border));border-radius:28px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 88%,transparent),color-mix(in srgb,var(--surface-2) 75%,transparent));box-shadow:0 28px 80px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.14);backdrop-filter:blur(24px);overflow:hidden}.liquid-panel::before{content:"";position:absolute;z-index:0;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.82),transparent);opacity:.7}.liquid-panel>*{position:relative;z-index:1}.builder-controls,.builder-result{padding:22px}.builder-panel-head{display:flex;align-items:center;gap:11px;margin-bottom:18px}.builder-panel-head>span{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--border);border-radius:11px;background:linear-gradient(145deg,var(--surface-2),var(--surface));color:var(--accent-red);font:900 10px 'JetBrains Mono',monospace;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}.builder-panel-head b,.builder-panel-head small{display:block}.builder-panel-head b{font-size:14px;font-weight:850}.builder-panel-head small{margin-top:2px;color:var(--text-muted);font-size:11px}.builder-two,.builder-colors{display:grid;grid-template-columns:1fr 1fr;gap:10px}.builder-field,.builder-color,.builder-range{display:block;margin-bottom:11px}.builder-field>span,.builder-color>span:first-child,.builder-range>span{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;color:var(--text-muted);font-size:11px;font-weight:750}.builder-field input,.builder-field select{width:100%;height:42px;padding:0 12px;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--surface-2) 88%,transparent);color:var(--text);font:700 12px inherit;outline:none}.builder-field input:focus,.builder-field select:focus{border-color:color-mix(in srgb,var(--accent) 65%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}.builder-color>span:last-child{height:42px;display:flex;align-items:center;gap:8px;padding:5px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}.builder-color input{width:35px;height:30px;padding:0;border:0;border-radius:8px;background:transparent;cursor:pointer}.builder-color code{font:800 10px 'JetBrains Mono',monospace}.builder-color.is-muted{opacity:.38}.builder-range>span b{color:var(--text);font:800 10px 'JetBrains Mono',monospace}.builder-range input{width:100%;accent-color:var(--accent-red)}.builder-toggles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:5px}.builder-toggles label{display:flex;align-items:flex-start;gap:7px;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);cursor:pointer}.builder-toggles input{margin-top:2px;accent-color:var(--accent-red)}.builder-toggles b,.builder-toggles small{display:block}.builder-toggles b{font-size:10px}.builder-toggles small{margin-top:2px;color:var(--text-muted);font-size:8px;line-height:1.3}.builder-upload{margin:0 0 11px;padding:12px;border:1px dashed color-mix(in srgb,var(--accent) 42%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--accent) 5%,transparent)}.builder-upload label b,.builder-upload label small{display:block}.builder-upload label b{font-size:11px}.builder-upload label small{margin:3px 0 9px;color:var(--text-muted);font-size:9px}.builder-upload input{width:100%;font-size:10px}.builder-upload button{margin-top:8px;padding:6px 9px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font:700 9px inherit;cursor:pointer}.builder-upload>span{display:block;margin-top:7px;color:var(--text-muted);font-size:9px;word-break:break-all}
.builder-preview{position:relative;height:360px;overflow:hidden;border:1px solid color-mix(in srgb,var(--text) 12%,var(--border));border-radius:21px;background:radial-gradient(circle at 26% 25%,color-mix(in srgb,var(--builder-color,#00f0ff) 28%,transparent),transparent 35%),linear-gradient(145deg,#121726,#06070b 65%);box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 22px 46px rgba(0,0,0,.23)}.builder-scene{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(transparent 65%,rgba(0,0,0,.28));overflow:hidden}.builder-scene::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-45%;height:70%;transform:perspective(280px) rotateX(62deg);background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:32px 32px}.builder-scene>b{z-index:1;color:rgba(255,255,255,.86);font-size:clamp(27px,4vw,46px);line-height:.92;letter-spacing:-.05em;text-align:center;text-shadow:0 0 28px var(--builder-color)}.builder-orb{position:absolute;border-radius:50%;filter:blur(1px)}.builder-orb.one{width:150px;height:150px;left:-35px;top:-45px;background:radial-gradient(circle,#fff,var(--builder-color) 22%,transparent 70%);opacity:.45}.builder-orb.two{width:120px;height:120px;right:-25px;bottom:35px;background:radial-gradient(circle,var(--builder-color),transparent 70%);opacity:.38}.builder-track{position:absolute;z-index:4;left:28px;right:28px;bottom:46px;height:10px;border-radius:99px;background:rgba(255,255,255,.18);box-shadow:0 0 var(--builder-glow,10px) color-mix(in srgb,var(--builder-color) 75%,transparent)}.builder-fill{position:absolute;left:0;top:50%;width:62%;height:5px;translate:0 -50%;border-radius:99px;background-size:200% 100%!important}.builder-fill.is-flowing{animation:builderFlow 4s linear infinite}@keyframes builderFlow{to{background-position:200% 50%}}.builder-scrubber{position:absolute;z-index:2;left:62%;top:50%;translate:-50% -50%;border-radius:50%;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important;box-shadow:0 0 var(--builder-glow,10px) var(--builder-color);display:grid;place-items:center;color:#fff;font-size:20px;line-height:1}.builder-scrubber.shape-square{border-radius:4px}.builder-scrubber.shape-diamond{border-radius:4px;rotate:45deg}.builder-scrubber.shape-emoji{box-shadow:none;filter:drop-shadow(0 0 8px var(--builder-color))}.builder-scrubber.shape-image{box-shadow:none;filter:drop-shadow(0 0 8px var(--builder-color))}.builder-mini{position:absolute;z-index:4;left:0;right:0;bottom:0;height:3px;opacity:0}.builder-mini.is-visible{opacity:1}.builder-player-meta{position:absolute;z-index:3;left:28px;right:28px;bottom:17px;display:flex;justify-content:space-between;color:rgba(255,255,255,.7);font:700 10px 'JetBrains Mono',monospace}.builder-code-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px;color:var(--text-muted);font-size:11px}.builder-code-summary code{padding:5px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text);font:800 9px 'JetBrains Mono',monospace}.builder-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px}.builder-actions button{min-height:44px;border-radius:13px;font:800 11px inherit;cursor:pointer;transition:transform .15s,box-shadow .15s}.builder-copy{border:1px solid var(--border);background:var(--surface-2);color:var(--text)}.builder-download{border:1px solid rgba(255,255,255,.22);background:linear-gradient(135deg,#ff315f,#9b4dff);color:#fff;box-shadow:0 10px 24px rgba(173,63,176,.24)}.builder-actions button:hover{transform:translateY(-1px)}.builder-status{min-height:20px;margin-top:8px;color:#34c759;font-size:10px}.builder-status.is-error{color:#ff5d6c}.builder-guide{margin-top:9px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--surface-2) 84%,transparent);overflow:hidden}.builder-guide summary{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;font-size:11px;font-weight:800;cursor:pointer;list-style:none}.builder-guide summary::-webkit-details-marker{display:none}.builder-guide summary i{font-style:normal;transition:rotate .2s}.builder-guide[open] summary i{rotate:45deg}.builder-guide ol{padding:0 16px 14px 35px;color:var(--text-muted);font-size:10.5px;line-height:1.65}
.tc-action-row{display:grid;grid-template-columns:1fr 38px;gap:7px}.tc-edit-btn{display:grid;place-items:center;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);color:var(--text);font-size:15px;cursor:pointer}.tc-edit-btn:hover{border-color:var(--accent-red);color:var(--accent-red)}

/* FAQ as restrained liquid glass / polished metal. */
.faq-accordion-list{max-width:920px;counter-reset:faq;gap:14px}.faq-item{position:relative;counter-increment:faq;border-color:color-mix(in srgb,var(--text) 13%,var(--border));border-radius:22px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 90%,transparent),color-mix(in srgb,var(--surface-2) 74%,transparent));box-shadow:0 17px 46px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.23);backdrop-filter:blur(18px)}.faq-item::before{content:"";position:absolute;left:7%;right:7%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.74),transparent)}.faq-item[open]{border-color:color-mix(in srgb,var(--accent-red) 42%,var(--border));box-shadow:0 22px 58px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.28)}.faq-item summary{min-height:70px;padding:17px 20px 17px 72px;position:relative}.faq-item summary::before{content:counter(faq,decimal-leading-zero);position:absolute;left:18px;width:36px;height:36px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--text) 16%,var(--border));border-radius:12px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface-2) 72%,#fff 28%),color-mix(in srgb,var(--surface-2) 88%,#000 12%));color:var(--accent-red);font:900 10px 'JetBrains Mono',monospace;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 7px 14px rgba(0,0,0,.10)}.faq-arrow{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}.faq-body{margin:0 20px 0 72px;padding:14px 0 21px;border-top-color:color-mix(in srgb,var(--text) 9%,var(--border))}

@media(max-width:960px){.theme-builder-shell{grid-template-columns:1fr}.builder-preview{height:330px}}
@media(max-width:620px){.theme-builder-section{padding:75px 0}.builder-controls,.builder-result{padding:15px}.builder-two,.builder-colors,.builder-actions{grid-template-columns:1fr}.builder-toggles{grid-template-columns:1fr}.builder-preview{height:270px}.faq-item summary{padding-left:60px;font-size:14px}.faq-item summary::before{left:12px}.faq-body{margin-left:60px}.theme-toggle-btn{width:60px!important}.theme-toggle-thumb{width:25px;height:25px}html[data-theme="dark"] .theme-toggle-thumb{transform:translateX(27px)}}