:root {
  --navy: #334466;
  --ink: #3f4658;
  --cream: #fffaf5;
  --paper: #fffefb;
  --coral: #df7182;
  --teal: #5aa9a2;
  --purple: #9483bb;
  --line: #ebe2d9;
  --muted: #747786;
  --peach: #fff0e9;
  --rose: #fff1f4;
  --mint: #edf8f5;
  --lavender: #f3f0fa;
  --sun: #fff7dd;
  --soft-shadow: 0 15px 42px rgba(88, 71, 62, .08);
}

body {
  background:
    radial-gradient(circle at 8% 11%, rgba(255, 218, 207, .45) 0 90px, transparent 91px),
    radial-gradient(circle at 94% 23%, rgba(207, 235, 229, .52) 0 120px, transparent 121px),
    linear-gradient(180deg, #fffdf9 0%, var(--cream) 72%, #fff8f3 100%);
  color: var(--ink);
}

.site-header {
  background: rgba(255, 253, 249, .9);
  border-color: rgba(226, 211, 201, .78);
  box-shadow: 0 5px 20px rgba(91, 75, 65, .04);
}

.brand-mark {
  background: linear-gradient(145deg, #eb8c9b, #d9677b);
  box-shadow: 0 5px 14px rgba(223, 113, 130, .25);
}

.header-back {
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
}

.intro {
  position: relative;
  padding-top: 74px;
}

.intro::before,
.intro::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  content: "";
  filter: blur(1px);
}

.intro::before {
  top: 28px;
  left: -6vw;
  width: 150px;
  height: 150px;
  background: rgba(255, 232, 221, .62);
}

.intro::after {
  top: 235px;
  right: -5vw;
  width: 105px;
  height: 105px;
  background: rgba(221, 239, 236, .7);
}

.eyebrow {
  color: #c85f75;
  letter-spacing: .14em;
}

.intro h1 {
  color: var(--navy);
  font-weight: 800;
  letter-spacing: -.035em;
}

.intro h1 em {
  color: #d9687d;
  background: linear-gradient(transparent 67%, rgba(255, 210, 195, .62) 0);
}

.toc-introduction {
  padding: 24px 26px;
  border: 1px solid rgba(232, 220, 211, .9);
  border-radius: 25px;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 10px 30px rgba(101, 80, 66, .045);
}

.intro-meta span {
  border-color: transparent;
  background: var(--mint);
  color: #477b78;
}

.intro-meta span:nth-child(2) { background: var(--rose); color: #a75567; }
.intro-meta span:nth-child(3) { background: var(--lavender); color: #6e6292; }

.learning-route {
  gap: 7px;
  padding: 15px 18px;
  border-color: rgba(230, 217, 208, .82);
  border-radius: 20px;
  background: rgba(255, 255, 255, .73);
  box-shadow: 0 9px 26px rgba(86, 72, 63, .045);
}

.learning-route span {
  padding: 4px 8px;
  border-radius: 999px;
}

.learning-route i { color: #d98a73; }

.chapter-toc { gap: 20px; }

.chapter-card {
  border-color: rgba(228, 214, 205, .88);
  border-radius: 28px;
  background: rgba(255, 255, 255, .88);
  box-shadow: var(--soft-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.chapter-card:hover,
.chapter-card:focus-visible {
  transform: translateY(-4px);
  border-color: #d8bbb2;
  box-shadow: 0 20px 48px rgba(88, 71, 62, .13);
}

.chapter-card:nth-child(1),
.chapter-card:nth-child(4) { background: linear-gradient(135deg, #fff, #fff8f4); }
.chapter-card:nth-child(2),
.chapter-card:nth-child(5) { background: linear-gradient(135deg, #fff, #f5fbf9); }
.chapter-card:nth-child(3),
.chapter-card:nth-child(6) { background: linear-gradient(135deg, #fff, #f8f5fc); }

.chapter-card-number {
  background: #fbe3e7;
  color: #bd6174;
  box-shadow: inset 0 0 0 1px rgba(212, 116, 135, .12);
}

.chapter-card:nth-child(2) .chapter-card-number,
.chapter-card:nth-child(5) .chapter-card-number {
  background: #dff1ed;
  color: #4d8e88;
}

.chapter-card:nth-child(3) .chapter-card-number,
.chapter-card:nth-child(6) .chapter-card-number {
  background: #ebe5f6;
  color: #786a9d;
}

.chapter-card-copy strong { color: #354361; }

.chapter-card-preview {
  border: 1px solid rgba(220, 224, 217, .72);
  border-radius: 20px;
  background: rgba(255, 255, 255, .72);
}

.chapter-card-preview i,
.chapter-card-preview b {
  border-color: #d8e6e1;
  border-radius: 13px;
  box-shadow: 0 4px 12px rgba(77, 93, 89, .05);
}

.chapter-card-link {
  border-color: rgba(227, 218, 210, .82);
  color: #4b8e88;
}

.privacy-note {
  border: 1px solid #d8ebe6;
  border-radius: 22px;
  background: rgba(238, 249, 246, .92);
}

.button {
  min-height: 51px;
  padding-inline: 25px;
  border-radius: 18px;
}

.button.primary {
  background: linear-gradient(135deg, #4f918d, #367b78);
  box-shadow: 0 11px 24px rgba(63, 135, 130, .2);
}

.button.secondary {
  border-color: #e5d9d0;
  background: rgba(255, 255, 255, .82);
  color: #56627a;
}

.learning-chapters,
.step-card,
.finish-card {
  border-color: rgba(228, 215, 206, .9);
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--soft-shadow);
}

.learning-chapters { border-radius: 25px; }
.learning-chapters button { border-radius: 15px; }
.learning-chapters button[aria-current="step"] {
  background: #fff2f4;
  box-shadow: inset 3px 0 0 #da7889;
}
.learning-chapters button[aria-current="step"] span { background: #d9798a; }

.progress { height: 8px; background: #eee8e1; }
.progress span { background: linear-gradient(90deg, #e68a99, #eeb077, #6bb4ad); }

.step-card {
  border-top-color: #efb5bf;
  border-radius: 31px;
}

.step-icon {
  border-radius: 19px;
  background: #fff1f3;
  color: #cf7183;
}

.options {
  border: 1px solid #f0e4dc;
  background: #fffaf7;
}

.option {
  border-color: #e8ded6;
  border-radius: 17px;
  background: rgba(255, 255, 255, .9);
}

.option:hover { border-color: #a9d0ca; background: #f6fbf9; }
.option[aria-pressed="true"] { border-color: #79b9b2; background: #ebf7f4; }

.feedback,
.diagram-area {
  border-radius: 22px;
  background: #edf8f5;
}

.diagram {
  border-color: #d6e9e4;
  border-radius: 23px;
  background: #fffefb;
}

.finish-card { border-radius: 34px; }
.finish-mark { background: #e7f5f1; color: #4f9a94; }
.thought-summary { border: 1px solid #f0dfc4; border-radius: 23px; background: #fff9e9; }

footer {
  border-color: #eadfd7;
  background: rgba(255, 253, 249, .86);
}

@media (max-width: 760px) {
  body {
    background:
      radial-gradient(circle at 0 8%, rgba(255, 224, 213, .5) 0 70px, transparent 71px),
      linear-gradient(180deg, #fffdf9, var(--cream));
  }
  .intro { padding-top: 42px; }
  .toc-introduction { padding: 19px; border-radius: 21px; }
  .learning-route { border-radius: 17px; }
  .chapter-card { border-radius: 24px; }
  .step-card { border-radius: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-card { transition: none; }
}