/* Yunle website visual theme. The tutorial body content remains unchanged. */
:root {
  --yl-blue-950: #18345f;
  --yl-blue-900: #214675;
  --yl-blue-700: #3d6fc4;
  --yl-blue-600: #5689df;
  --yl-blue-400: #8fb8f1;
  --yl-blue-100: #eaf4ff;
  --yl-red-600: #e9626b;
  --yl-red-400: #f28c91;
  --yl-red-100: #fff0f0;
  --yl-gold-600: #c99546;
  --yl-gold-400: #e3bd76;
  --yl-gold-100: #fff7e6;
  --yl-teal-600: #3f9c9c;
  --yl-teal-100: #e8f8f7;
  --yl-ink: #263a5b;
  --yl-muted: #6f7d95;
  --yl-line: rgba(55, 84, 128, 0.12);
  --yl-paper: #fffdf9;
  --yl-paper-blue: #f6fbff;
  --yl-white: #fff;
  --yl-shadow-sm: 0 12px 30px rgba(44, 71, 111, 0.08);
  --yl-shadow-md: 0 24px 70px rgba(43, 72, 116, 0.14);
}

html {
  background: var(--yl-paper);
}

body.bg-gray-50 {
  margin: 0;
  color: var(--yl-ink) !important;
  background: var(--yl-paper) !important;
  font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body *,
body *::before,
body *::after {
  box-sizing: border-box;
  letter-spacing: 0;
}

body > header {
  position: relative;
  overflow: hidden;
  color: var(--yl-ink) !important;
  background: var(--yl-paper-blue) !important;
  border-bottom: 1px solid var(--yl-line);
}

body > header > .max-w-5xl {
  width: min(calc(100% - 48px), 1180px);
  max-width: none !important;
  padding: 92px 0 84px !important;
}

body > header > div > .flex {
  align-items: center;
  gap: 64px;
}

body > header .flex-1 {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

body > header .inline-flex {
  max-width: 100%;
  gap: 9px !important;
  margin-bottom: 22px !important;
  padding: 0 !important;
  color: var(--yl-red-600) !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 800;
}

body > header .inline-flex i {
  color: var(--yl-red-600) !important;
}

body > header h1 {
  margin: 0 0 22px !important;
  color: var(--yl-blue-950);
  font-size: 52px !important;
  font-weight: 900;
  line-height: 1.22 !important;
}

body > header h1 span {
  display: inline;
  color: var(--yl-blue-700) !important;
  border-bottom: 6px solid rgba(233, 98, 107, 0.2);
}

body > header p {
  max-width: 620px;
  margin-bottom: 26px !important;
  color: var(--yl-muted) !important;
  font-size: 17px !important;
  line-height: 1.85;
}

body > header .flex.flex-wrap {
  gap: 13px 24px !important;
  color: var(--yl-muted) !important;
  font-size: 12px !important;
  font-weight: 700;
}

body > header .flex.flex-wrap span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

body > header .flex.flex-wrap i {
  color: var(--yl-teal-600) !important;
}

body > header .flex-shrink-0.text-8xl {
  position: relative;
  z-index: 1;
  width: 330px;
  height: 360px;
  flex: 0 0 330px;
  overflow: hidden;
  opacity: 1 !important;
  background: var(--yl-white) url("../assets/images/sylphie.jpg") center top / cover no-repeat;
  border: 8px solid rgba(255, 255, 255, 0.88);
  border-radius: 32px;
  box-shadow: var(--yl-shadow-md);
  font-size: 0 !important;
}

body > header .flex-shrink-0.text-8xl i {
  display: none;
}

main.max-w-5xl {
  width: min(calc(100% - 48px), 1080px);
  max-width: none !important;
  padding: 18px 0 96px !important;
}

main > section {
  --section-accent: var(--yl-blue-700);
  --section-soft: var(--yl-blue-100);
  margin-top: 0 !important;
  padding: 64px 0;
}

main > section + section {
  border-top: 1px solid var(--yl-line);
}

main > section:nth-of-type(4n + 2) {
  --section-accent: var(--yl-red-600);
  --section-soft: var(--yl-red-100);
}

main > section:nth-of-type(4n + 3) {
  --section-accent: var(--yl-gold-600);
  --section-soft: var(--yl-gold-100);
}

main > section:nth-of-type(4n) {
  --section-accent: var(--yl-teal-600);
  --section-soft: var(--yl-teal-100);
}

main > section > .flex.items-center.gap-3.mb-6 {
  align-items: center;
  gap: 16px !important;
  margin-bottom: 28px !important;
}

main > section > .flex.items-center.gap-3.mb-6 > span:first-child {
  display: grid !important;
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px;
  place-items: center;
  color: var(--section-accent) !important;
  background: var(--section-soft) !important;
  border: 1px solid var(--yl-line);
  border-color: color-mix(in srgb, var(--section-accent) 18%, transparent);
  border-radius: 16px !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px !important;
  font-weight: 800;
}

main > section > .flex.items-center.gap-3.mb-6 h2,
main > section > h2 {
  margin: 0;
  color: var(--yl-blue-950) !important;
  font-size: 29px !important;
  font-weight: 900;
  line-height: 1.38;
}

main h3 {
  color: var(--yl-blue-950);
  line-height: 1.55;
}

.text-gray-800 { color: var(--yl-blue-950) !important; }
.text-gray-700 { color: var(--yl-ink) !important; }
.text-gray-600,
.text-gray-500 { color: var(--yl-muted) !important; }
.text-gray-400 { color: #8ba0bd !important; }
.text-blue-900,
.text-blue-800 { color: var(--yl-blue-950) !important; }
.text-blue-700,
.text-blue-600 { color: var(--yl-blue-700) !important; }
.text-purple-700 { color: var(--yl-red-600) !important; }
.text-green-800,
.text-green-700,
.text-green-600,
.text-green-500,
.text-green-400 { color: var(--yl-teal-600) !important; }
.text-amber-700,
.text-amber-500,
.text-yellow-500,
.text-yellow-300 { color: var(--yl-gold-600) !important; }
.text-red-700 { color: var(--yl-red-600) !important; }

body > header h1 span.text-yellow-300 {
  color: var(--yl-blue-700) !important;
}

.bg-blue-600 { background: var(--yl-blue-700) !important; }
.bg-blue-100,
.bg-blue-50 { background: var(--yl-blue-100) !important; }
.bg-purple-600 { background: var(--yl-red-600) !important; }
.bg-purple-100,
.bg-purple-50 { background: var(--yl-red-100) !important; }
.bg-green-600 { background: var(--yl-teal-600) !important; }
.bg-green-50 { background: var(--yl-teal-100) !important; }
.bg-amber-600 { background: var(--yl-gold-600) !important; }
.bg-red-600 { background: var(--yl-red-600) !important; }
.bg-red-50 { background: var(--yl-red-100) !important; }
.bg-gray-100 { background: #f0f5fb !important; }

.border-blue-500,
.border-blue-200 { border-color: rgba(61, 111, 196, 0.28) !important; }
.border-purple-500,
.border-purple-200 { border-color: rgba(233, 98, 107, 0.3) !important; }
.border-green-500,
.border-green-200 { border-color: rgba(63, 156, 156, 0.3) !important; }
.border-amber-500 { border-color: rgba(201, 149, 70, 0.34) !important; }
.border-red-200 { border-color: rgba(233, 98, 107, 0.3) !important; }

main .rounded-xl { border-radius: 16px !important; }
main .rounded-2xl { border-radius: 22px !important; }
main .rounded-lg { border-radius: 8px !important; }

main .bg-white.rounded-xl,
main .field-card {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid var(--yl-line);
  box-shadow: var(--yl-shadow-sm) !important;
}

main .field-card {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

main .field-card:hover {
  border-color: rgba(86, 137, 223, 0.28);
  box-shadow: 0 17px 38px rgba(44, 71, 111, 0.11) !important;
  transform: translateY(-3px);
}

.step-marker li {
  min-height: 62px;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid var(--yl-line);
  border-radius: 16px !important;
  box-shadow: var(--yl-shadow-sm) !important;
}

.step-marker li::before {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  color: var(--yl-blue-700);
  background: var(--yl-blue-100);
  border-radius: 9px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: 800;
}

.highlight-box,
.warning-box,
.tip-box {
  border-top: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-radius: 16px !important;
}

.highlight-box {
  background: var(--yl-blue-100) !important;
  border-color: rgba(61, 111, 196, 0.18);
  border-left: 4px solid var(--yl-blue-700);
}

.warning-box {
  background: var(--yl-gold-100) !important;
  border-color: rgba(201, 149, 70, 0.2);
  border-left: 4px solid var(--yl-gold-600);
}

.tip-box {
  background: var(--yl-teal-100) !important;
  border-color: rgba(63, 156, 156, 0.2);
  border-left: 4px solid var(--yl-teal-600);
}

img.screenshot {
  width: 100%;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--yl-line);
  border-radius: 14px;
  box-shadow: none;
}

code {
  color: var(--yl-blue-700);
  background: #f5f9ff;
  border: 1px solid rgba(61, 111, 196, 0.12);
  border-radius: 6px;
  font-family: Consolas, "Microsoft YaHei UI", monospace;
  overflow-wrap: anywhere;
  word-break: break-word;
}

code.block {
  width: fit-content;
  max-width: 100%;
  padding: 7px 11px;
}

.code-block {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 17px 18px;
  color: #dce8f7;
  background: #1c3863;
  border: 1px solid rgba(159, 198, 250, 0.16);
  border-radius: 14px;
  box-shadow: none;
  font-family: Consolas, "Microsoft YaHei UI", monospace;
  font-size: 13px;
  line-height: 1.68;
  overflow-x: auto;
  scrollbar-color: rgba(159, 198, 250, 0.45) transparent;
  scrollbar-width: thin;
}

.code-block .key { color: #9fc6fa; }
.code-block .string { color: #9de0c3; }
.code-block .number { color: #f2ce89; }
.code-block .comment { color: #9eb5d3; }

.overflow-x-auto {
  max-width: 100%;
  scrollbar-color: rgba(86, 137, 223, 0.42) transparent;
  scrollbar-width: thin;
}

.overflow-x-auto.bg-white {
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--yl-white) !important;
  border: 1px solid var(--yl-line);
  border-radius: 16px !important;
  box-shadow: var(--yl-shadow-sm) !important;
}

table {
  width: 100%;
  min-width: 680px;
  border-collapse: separate;
  border-spacing: 0;
}

.table-header {
  color: var(--yl-white);
  background: #315fa8 !important;
}

thead.bg-gray-100 {
  color: var(--yl-blue-950);
  background: var(--yl-blue-100) !important;
}

th,
td {
  border-bottom: 1px solid #edf3fb;
  vertical-align: top;
}

tbody tr:nth-child(even) {
  background: var(--yl-paper-blue);
}

tbody tr:last-child td {
  border-bottom: 0;
}

details.bg-white.rounded-xl {
  overflow: hidden;
  border: 1px solid var(--yl-line);
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(44, 71, 111, 0.06) !important;
}

details.bg-white.rounded-xl[open] {
  border-color: rgba(86, 137, 223, 0.3);
}

details > summary {
  min-width: 0;
  color: var(--yl-blue-950) !important;
  background: rgba(255, 255, 255, 0.96);
  list-style: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

details > summary::-webkit-details-marker {
  display: none;
}

details > summary i.fa-chevron-right {
  display: inline-grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  color: var(--yl-blue-700) !important;
  background: var(--yl-blue-100);
  border-radius: 50%;
  transition: transform 0.2s ease;
}

details[open] > summary i.fa-chevron-right {
  transform: rotate(90deg);
}

details > div {
  color: var(--yl-muted) !important;
  border-top: 1px solid var(--yl-line);
}

main > section.bg-gradient-to-br {
  padding: 64px 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

main > section:last-of-type > .grid > .text-center {
  min-height: 176px;
  padding: 22px 16px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--yl-line);
  border-radius: 16px;
  box-shadow: var(--yl-shadow-sm);
}

main > section:last-of-type > .grid .w-14.h-14 {
  width: 56px !important;
  height: 56px !important;
  border-radius: 15px !important;
  font-family: Georgia, "Times New Roman", serif;
}

body > footer {
  margin-top: 0 !important;
  padding: 44px 0 30px !important;
  color: #9eb5d3 !important;
  background: #1c3863 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body > footer p:first-child {
  color: #d5e1f0;
  font-weight: 800;
}

body > footer p:last-child {
  color: #8da7c9;
}

@media (max-width: 1000px) {
  body > header > div > .flex {
    gap: 42px;
  }

  body > header .flex-shrink-0.text-8xl {
    width: 270px;
    height: 300px;
    flex-basis: 270px;
  }

  main > section:last-of-type > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body > header > .max-w-5xl {
    width: min(calc(100% - 32px), 680px);
    padding: 68px 0 62px !important;
  }

  body > header > div > .flex {
    position: relative;
    display: block !important;
  }

  body > header .flex-1 {
    max-width: none;
  }

  body > header h1 {
    max-width: 520px;
    font-size: 36px !important;
  }

  body > header p {
    max-width: 520px;
    font-size: 15px !important;
  }

  body > header .flex-shrink-0.text-8xl {
    position: absolute;
    z-index: 0;
    right: -18px;
    bottom: -30px;
    width: 170px;
    height: 170px;
    opacity: 0.14 !important;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    pointer-events: none;
  }

  main.max-w-5xl {
    width: min(calc(100% - 32px), 680px);
    padding: 8px 0 72px !important;
  }

  main > section {
    padding: 54px 0;
  }

  main > section > .flex.items-center.gap-3.mb-6 > span:first-child {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px;
    border-radius: 14px !important;
  }

  main > section > .flex.items-center.gap-3.mb-6 h2,
  main > section > h2 {
    font-size: 24px !important;
  }

  main .p-6 { padding: 18px !important; }
  main .p-5 { padding: 16px !important; }
  main .p-4 { padding: 14px !important; }

  .code-block {
    padding: 14px;
    font-size: 12px;
  }
}

@media (max-width: 560px) {
  body > header h1 {
    font-size: 32px !important;
  }

  body > header .inline-flex {
    align-items: flex-start !important;
    white-space: normal;
  }

  body > header .flex.flex-wrap {
    gap: 9px 16px !important;
  }

  main > section {
    padding: 48px 0;
  }

  main > section > .flex.items-center.gap-3.mb-6 {
    align-items: flex-start;
    gap: 13px !important;
  }

  main > section > .flex.items-center.gap-3.mb-6 h2,
  main > section > h2 {
    font-size: 22px !important;
  }

  main > section:last-of-type > .grid {
    grid-template-columns: 1fr !important;
  }

  main > section:last-of-type > .grid > .text-center {
    min-height: 0;
  }

  details > summary {
    padding: 15px 16px !important;
  }

  details > div {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }
}

@media (max-width: 360px) {
  body > header h1 {
    font-size: 28px !important;
  }
}

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