:root {
  --enjoy-bg: #ffffff;
  --enjoy-surface: #ffffff;
  --enjoy-surface-soft: #f4f8fc;
  --enjoy-text: #25313b;
  --enjoy-muted: #51677a;
  --enjoy-border: #d7e2eb;
  --enjoy-accent: #2f76d2;
  --enjoy-accent-soft: #ecf5ff;
  --enjoy-code-bg: #1f2b36;
  --enjoy-code-text: #e6f0f8;
}

html[data-theme="dark"] {
  --enjoy-bg: #0d141d;
  --enjoy-surface: #101c28;
  --enjoy-surface-soft: #172434;
  --enjoy-text: #ebf3fb;
  --enjoy-muted: #9eb3c6;
  --enjoy-border: #2b3e52;
  --enjoy-accent: #89bbff;
  --enjoy-accent-soft: #182a3f;
  --enjoy-code-bg: #0b131b;
  --enjoy-code-text: #d9e8f6;
}

body.b-body {
  background: var(--enjoy-bg);
  color: var(--enjoy-text);
}

body.b-body,
body.b-body *:not(code):not(pre):not(kbd):not(samp) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif !important;
}

code,
pre,
kbd,
samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

.b-navbar-bar {
  align-items: center;
}

.enjoy-navbar-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
}

.enjoy-lang-select {
  min-width: 82px;
  height: 34px;
  border: 1px solid var(--enjoy-border);
  background: var(--enjoy-surface);
  color: var(--enjoy-text);
  border-radius: 999px;
  padding: 0 12px;
  font-size: 14px;
}

.enjoy-theme-toggle {
  width: 34px;
  height: 34px;
  border: 1px solid var(--enjoy-border);
  background: var(--enjoy-surface);
  color: var(--enjoy-text);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.enjoy-theme-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.enjoy-button {
  border-radius: 999px;
  padding: 8px 16px;
}

.enjoy-button-primary {
  background: var(--enjoy-text);
  color: var(--enjoy-bg);
}

.enjoy-button-secondary {
  background: var(--enjoy-surface-soft);
  color: var(--enjoy-text);
  border: 1px solid var(--enjoy-border);
}

.enjoy-mobile-panel {
  position: fixed;
  right: 16px;
  left: 16px;
  top: 84px;
  z-index: 90;
  display: flex;
  border: 1px solid var(--enjoy-border);
  background: var(--enjoy-surface);
  border-radius: 20px;
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.4);
  padding: 14px;
  gap: 10px;
}

.enjoy-mobile-panel[hidden] {
  display: none !important;
}

.b-button {
  text-decoration: none;
}

.enjoy-beta-link {
  font-size: 13px;
  color: var(--enjoy-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-block;
  line-height: 1.2;
  opacity: 0.92;
}

.enjoy-beta-link:hover {
  opacity: 1;
}

.enjoy-ios-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1.2;
}

.enjoy-security-bar {
  max-width: 1024px;
  margin: 28px auto;
}

.enjoy-security-bar .b-award {
  padding: 16px 24px;
  background: transparent !important;
}

.enjoy-codebox {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.enjoy-codebox pre {
  max-width: 100%;
  min-width: 0;
}

.enjoy-step-card,
.enjoy-cli-card {
  min-width: 0;
}

.b-bg-yellow,
.b-bg-midnight-70,
.b-bg-midnight-80 {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

.enjoy-mobile-extra {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.enjoy-mobile-extra .enjoy-theme-toggle {
  width: 100%;
  border-radius: 12px;
  height: 36px;
  font-size: 12px;
}

.enjoy-hero-prompt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--enjoy-accent-soft);
  color: var(--enjoy-accent);
  font-size: 13px;
  font-weight: 500;
}

.enjoy-hero-prompt .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.enjoy-section-text,
.enjoy-feature-item-text,
.enjoy-case-desc,
.enjoy-faq-answer,
.enjoy-footer-note,
.enjoy-step-text {
  color: var(--enjoy-muted) !important;
}

.enjoy-hero-image {
  width: 100%;
  border-radius: 20px;
  border: none;
}

.enjoy-download-cluster {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--enjoy-border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--enjoy-surface);
}

.enjoy-download-cluster .b-button {
  margin: 0;
  border: none;
  border-radius: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
}

.enjoy-download-main {
  background: var(--enjoy-text);
  color: var(--enjoy-bg);
  padding: 0 20px;
}

.enjoy-download-buy {
  background: var(--enjoy-surface-soft);
  color: var(--enjoy-text);
  border-left: 1px solid var(--enjoy-border) !important;
  padding: 0 14px;
}

.enjoy-hero-buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.enjoy-hero-buttons-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
}

.enjoy-ios-btn {
  border: 1px solid var(--enjoy-border);
  border-radius: 999px;
  min-height: 42px;
  padding: 0 16px;
  background: var(--enjoy-surface);
  color: var(--enjoy-text);
}

.enjoy-usecases-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.enjoy-usecase-card {
  border: 1px solid var(--enjoy-border);
  border-radius: 16px;
  background: var(--enjoy-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.enjoy-usecase-image {
  height: 220px;
  width: 100%;
  object-fit: cover;
  border-bottom: 1px solid var(--enjoy-border);
}

.enjoy-usecase-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.enjoy-usecase-body h3 {
  margin: 0;
}

.enjoy-case-desc {
  margin: 0;
  line-height: 1.65;
}

.enjoy-case-desc ol,
.enjoy-case-desc .usecase-steps {
  margin: 10px 0 0;
  padding-left: 20px;
  display: block;
}

.enjoy-case-desc li {
  margin: 5px 0;
}

.enjoy-features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.enjoy-feature-card {
  border: 1px solid var(--enjoy-border);
  border-radius: 20px;
  background: var(--enjoy-surface);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  min-height: 220px;
  overflow: hidden;
}

.enjoy-feature-card-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.enjoy-feature-media {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.enjoy-feature-card[data-img] .enjoy-feature-media {
  background-image: var(--feature-img);
  background-size: 20%;
  background-position: right 0% bottom 0%;
  background-repeat: no-repeat;
  opacity: 0.4;
}

.enjoy-feature-card:hover .enjoy-feature-media {
  animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.enjoy-feature-card-inner {
  position: relative;
  z-index: 2;
  padding: 24px 20px;
}

.enjoy-feature-card-inner > h3 {
  margin: 0;
  color: var(--enjoy-text);
}

.enjoy-feature-card-inner > .enjoy-feature-item-text {
  margin: 0;
  color: var(--enjoy-muted);
}

.enjoy-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.enjoy-step-card {
  border: 1px solid var(--enjoy-border);
  border-radius: 16px;
  background: var(--enjoy-surface);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.enjoy-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 28px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.6px;
  font-weight: 600;
  color: var(--enjoy-accent);
  background: var(--enjoy-accent-soft);
  border: 1px solid color-mix(in srgb, var(--enjoy-accent) 35%, var(--enjoy-border));
}

.enjoy-codebox {
  margin-top: 6px;
  background: var(--enjoy-code-bg);
  color: var(--enjoy-code-text);
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--enjoy-code-text) 15%, transparent);
  position: relative;
  overflow: auto;
}

.enjoy-codebox pre {
  margin: 0;
  padding: 16px;
  white-space: pre;
  font-size: 13px;
  line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--enjoy-code-text) 25%, transparent);
  background: color-mix(in srgb, var(--enjoy-code-bg) 80%, white 10%);
  color: var(--enjoy-code-text);
  border-radius: 10px;
  font-size: 12px;
  padding: 0 10px;
}

.enjoy-showcase-wrap {
  margin-top: 24px;
  position: relative;
  max-width: 100%;
}

.enjoy-showcase-image {
  width: 100%;
  border-radius: 20px;
  display: block;
  border: 1px solid var(--enjoy-border);
}

.enjoy-floating-card {
  position: absolute;
  background: var(--enjoy-surface);
  border: 1px solid var(--enjoy-border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 16px 36px -24px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}

.enjoy-floating-1 { top: 18%; left: -34px; }
.enjoy-floating-2 { bottom: 16%; right: -34px; }

.enjoy-float-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.enjoy-float-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.enjoy-float-icon-warning {
  background: var(--enjoy-accent-soft);
  color: var(--enjoy-accent);
}

.enjoy-float-icon-success {
  background: var(--enjoy-surface-soft);
  color: var(--enjoy-muted);
}

.enjoy-faq-list {
  display: grid;
  gap: 10px;
  width: 100%;
}

.enjoy-faq-item {
  border: 1px solid var(--enjoy-border);
  background: var(--enjoy-surface);
  color: var(--enjoy-text);
  border-radius: 12px;
  padding: 12px 14px;
}

.enjoy-faq-item summary {
  cursor: pointer;
  color: var(--enjoy-text);
  font-weight: 600;
}

.enjoy-faq-answer {
  margin: 10px 0 0;
}

.enjoy-cli-card {
  border: 1px solid var(--enjoy-border);
  border-radius: 16px;
  background: var(--enjoy-surface);
  padding: 20px;
}

.enjoy-doc {
  line-height: 1.75;
}

.enjoy-doc h2 {
  margin: 28px 0 12px;
}

.enjoy-doc h3 {
  margin: 20px 0 10px;
}

.enjoy-doc p {
  margin: 12px 0;
}

.enjoy-doc ul,
.enjoy-doc ol {
  padding-left: 22px;
  margin: 12px 0;
}

.enjoy-doc li {
  margin: 6px 0;
}

.enjoy-doc a {
  color: var(--enjoy-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.enjoy-doc pre {
  max-width: 100%;
  overflow: auto;
  background: var(--enjoy-surface-soft);
  padding: 14px;
  border-radius: 14px;
}

.enjoy-doc code {
  font-size: 0.95em;
  background: color-mix(in srgb, var(--enjoy-accent) 14%, transparent);
  padding: 2px 6px;
  border-radius: 8px;
}

html[data-theme="light"] #faq.b-bg-midnight-70 {
  background: transparent !important;
}

html[data-theme="light"] #how.b-bg-yellow {
  background: transparent !important;
}

html[data-theme="dark"] .b-bg-midnight-1,
html[data-theme="dark"] .b-bg-midnight-70,
html[data-theme="dark"] .b-bg-midnight-80 {
  background: #0b141d !important;
}

html[data-theme="dark"] .b-bg-blue {
  background: #1a3552 !important;
}

html[data-theme="dark"] .b-bg-yellow {
  background: #3f3a28 !important;
}

html[data-theme="dark"] .b-navbar-bar,
html[data-theme="dark"] .enjoy-usecase-card,
html[data-theme="dark"] .enjoy-feature-card,
html[data-theme="dark"] .enjoy-step-card,
html[data-theme="dark"] .enjoy-faq-item,
html[data-theme="dark"] .enjoy-cli-card,
html[data-theme="dark"] .enjoy-floating-card {
  background: var(--enjoy-surface) !important;
  border-color: var(--enjoy-border) !important;
}

html[data-theme="dark"] .b-body,
html[data-theme="dark"] .b-body-l,
html[data-theme="dark"] .b-body-m,
html[data-theme="dark"] .b-body-s,
html[data-theme="dark"] .b-display-l,
html[data-theme="dark"] .b-display-s,
html[data-theme="dark"] .b-title-m,
html[data-theme="dark"] .b-headline-m,
html[data-theme="dark"] .b-headline-s,
html[data-theme="dark"] .b-navbar-link,
html[data-theme="dark"] .b-footer-link,
html[data-theme="dark"] .b-label-l {
  color: var(--enjoy-text) !important;
}

html[data-theme="dark"] .b-color-white {
  color: var(--enjoy-text) !important;
}

html[data-theme="dark"] .enjoy-feature-item-text,
html[data-theme="dark"] .enjoy-section-text,
html[data-theme="dark"] .enjoy-case-desc,
html[data-theme="dark"] .enjoy-faq-answer,
html[data-theme="dark"] .enjoy-footer-note,
html[data-theme="dark"] .enjoy-step-text,
html[data-theme="dark"] .b-color-midnight-40,
html[data-theme="dark"] .b-color-midnight-60 {
  color: var(--enjoy-muted) !important;
}

@media screen and (max-width: 991px) {
  .enjoy-navbar-controls,
  .enjoy-desktop-only {
    display: none;
  }

  .enjoy-mobile-panel {
    top: 72px;
  }

  .enjoy-usecases-grid,
  .enjoy-features-grid,
  .enjoy-steps-grid {
    grid-template-columns: 1fr;
  }

  .enjoy-floating-card {
    display: none;
  }
}

@media screen and (min-width: 992px) {
  .enjoy-mobile-panel {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .enjoy-hero-buttons {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .enjoy-hero-buttons .b-button,
  .enjoy-download-cluster {
    width: 100%;
  }

  .enjoy-hero-buttons-row {
    width: 100%;
  }

  .enjoy-download-cluster {
    border-radius: 14px;
  }

  .b-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* User requested UI tweaks */
.b-section-header {
  margin-bottom: 60px !important;
  padding-top: 24px !important;
}

.b-hero {
  gap: 40px !important;
}

.enjoy-logo-text {
  font-family: "Lufga", sans-serif;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1.1;
  background: linear-gradient(135deg, var(--enjoy-text) 0%, var(--enjoy-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  display: inline-block;
}

html[data-theme="dark"] .enjoy-logo-text {
  background: linear-gradient(135deg, #ffffff 0%, var(--enjoy-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.enjoy-usecase-card,
.enjoy-feature-card,
.enjoy-step-card,
.enjoy-cli-card {
  border: none !important;
  background: var(--enjoy-surface-soft) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important;
}

html[data-theme="dark"] .enjoy-usecase-card,
html[data-theme="dark"] .enjoy-feature-card,
html[data-theme="dark"] .enjoy-step-card,
html[data-theme="dark"] .enjoy-cli-card {
  background: var(--enjoy-surface-soft) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
  border: none !important;
}

.enjoy-usecase-card {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
}

.enjoy-usecase-image {
  height: auto !important;
  width: 100% !important;
  object-fit: contain !important;
  border-bottom: none !important;
  display: block !important;
}

.enjoy-usecase-body {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  padding: 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 !important;
  transform: translateY(calc(100% - var(--usecase-peek, 92px))) !important;
  transition: transform 180ms cubic-bezier(0.22, 1.35, 0.36, 1) !important;
  will-change: transform;
}

.enjoy-usecase-card:hover .enjoy-usecase-body,
.enjoy-usecase-card:focus-within .enjoy-usecase-body {
  transform: translateY(0) !important;
}

.enjoy-usecase-body h3 {
  color: #fff !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.enjoy-usecase-body .enjoy-case-desc {
  color: rgba(255,255,255,0.85) !important;
  margin: 0 !important;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 120ms ease, transform 180ms cubic-bezier(0.22, 1.35, 0.36, 1);
}

.enjoy-usecase-card:hover .enjoy-usecase-body .enjoy-case-desc,
.enjoy-usecase-card:focus-within .enjoy-usecase-body .enjoy-case-desc {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 40ms;
}

@media (hover: none) {
  .enjoy-usecase-body {
    transform: translateY(0) !important;
  }

  .enjoy-usecase-body .enjoy-case-desc {
    opacity: 1;
    transform: translateY(0);
  }
}