/* Media conditions keep their original values and cascade order:
 * (hover: hover) and (pointer: fine)
 * (max-width: 768px)
 * (min-width: 1281px) and (max-width: 1439px)
 * (min-width: 1151px) and (max-width: 1280px)
 * (min-width: 769px) and (max-width: 1150px)
 * (max-width: 374px)
 * (max-width: 340px)
 * (min-width: 769px)
 * (min-width: 1600px)
 * (min-width: 1200px)
 * (min-width: 769px) and (max-width: 1199px)
 * (min-width: 769px) and (max-width: 1099px)
 * (min-width: 1100px)
 * (min-width: 769px) and (max-width: 1279px)
 */
/* Curriculum categories, lesson totals and cover rail. */
.scale-bar {
  height: var(--lp-full-size);
  width: var(--lp-full-size);
  background: var(--blue);
  transform-origin: left;
}
.learning-layout {
  display: grid;
  grid-template-columns: var(--lp-grid-share-5) var(--lp-grid-share-7);
  gap: var(--group);
  align-items: center;
}
.learning-total {
  margin-top: var(--lp-space-32);
}
.learning-total .num {
  font-size: var(--lp-size-120);
}
.learning-total .unit {
  font-size: var(--h3-size);
  color: var(--ink);
}
.learning-total p {
  margin-top: var(--lp-space-16);
}
.category-row {
  padding-block: var(--lp-space-8);
  display: grid;
  grid-template-columns: var(--lp-grid-unit) var(--lp-size-56);
  gap: var(--lp-space-8) var(--lp-space-16);
  align-items: center;
  font-size: var(--caption);
}
.category-row .num {
  font-size: var(--body-size);
  text-align: right;
}
.category-track {
  grid-column: 1 / -1;
  height: var(--lp-space-8);
  background: var(--border);
  border-radius: var(--lp-radius-pill);
  overflow: hidden;
}
.cover-rail-window {
  overflow: hidden;
  margin-top: var(--lp-space-48);
}
.cover-rail {
  display: flex;
  gap: var(--lp-space-24);
  width: max-content;
  padding: var(--lp-space-8) 0 var(--lp-space-24);
}
.cover-rail img {
  width: var(--lp-size-144);
  aspect-ratio: 1 / var(--lp-cover-aspect-height);
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--paper-shadow);
}
@media (hover: hover) and (pointer: fine) {
  .cover-rail img:hover {
    translate: 0 -6px;
    transition: translate var(--lp-duration-base);
  }
  .category-row:hover {
    background: var(--white);
  }
}
@media (max-width: 768px) {
  .learning-layout {
    grid-template-columns: var(--lp-grid-unit);
    gap: var(--lp-size-40);
  }
  .learning-total .num {
    font-size: var(--lp-size-80);
  }
  .learning-total {
    margin-top: var(--lp-space-24);
  }
  .category-row {
    padding-block: var(--lp-space-16);
  }
  .category-row .num {
    font-size: var(--body-size);
  }
  .cover-rail-window {
    margin-top: var(--lp-size-40);
  }
  .cover-rail {
    gap: var(--lp-space-16);
  }
  .cover-rail img {
    width: var(--lp-size-104);
  }
}
#learning-map {
  --intrinsic: 968px;
}
@media (max-width: 768px) {
  #learning-map {
    --intrinsic: 1328px;
  }
}
.scale-bar {
  transform-origin: left center;
  scale: var(--value, 1) var(--mv-4);
}
body.handwritten-preview #learning-map {
  --hw-learning-number-size: 280px;
  --hw-learning-number-spacing: -0.07em;
  --hw-learning-column-gap: 120px;
  --hw-learning-cover: 220px;
  --hw-learning-cover-gap: 28px;
  --hw-learning-row-padding: 3px;
  --hw-learning-row-gap: 6px;
  --hw-learning-track-height: 14px;
  min-height: 1414px;
  padding-block: var(--hw-space-section-pc);
  background: var(--hw-white);
}
body.handwritten-preview #learning-map::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 180px 0 0;
  background: var(--hw-middle-pale);
  clip-path: polygon(0 0, 100% 3%, 100% 100%, 0 100%);
}
body.handwritten-preview #learning-map .learning-layout {
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  gap: var(--hw-learning-column-gap);
  align-items: start;
}
body.handwritten-preview #learning-map .learning-layout > div:first-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
body.handwritten-preview #learning-map .learning-total {
  order: -1;
  margin: 0 0 var(--lp-space-42);
  position: relative;
}
body.handwritten-preview #learning-map .learning-total > .num {
  display: block;
  width: max-content;
  max-width: none;
  font: 800 var(--hw-learning-number-size)/1.05 var(--hw-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--hw-learning-number-spacing);
  background: linear-gradient(
    105deg,
    var(--hw-blue) 0%,
    var(--hw-blue) 58%,
    var(--hw-cyan)
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0;
  transform: none;
}
body.handwritten-preview #learning-map .learning-total .unit {
  display: block;
  font: 700 48px/1.5 var(--hw-serif);
  color: var(--hw-navy);
  margin-left: var(--lp-space-28);
}
body.handwritten-preview #learning-map .learning-total p {
  font-size: var(--hw-note);
  margin: var(--lp-space-14) 0 0 var(--lp-space-28);
}
body.handwritten-preview #learning-map .learning-layout h2 {
  margin-top: 0;
  max-width: 580px;
  line-height: 1.6;
}
body.handwritten-preview #learning-map .categories {
  min-width: 0;
  padding-top: var(--lp-space-12);
}
body.handwritten-preview #learning-map .category-row {
  position: relative;
  padding-block: var(--hw-learning-row-padding);
  grid-template-columns: minmax(0, 1fr) 68px;
  gap: var(--hw-learning-row-gap) 16px;
  font-size: var(--hw-body-pc);
  line-height: 1.6;
}
body.handwritten-preview #learning-map .category-row .num {
  font: 800 25px/1.4 var(--hw-num);
  font-variant-numeric: tabular-nums;
  color: var(--hw-blue);
  text-align: right;
}
body.handwritten-preview
  #learning-map
  .category-row:first-child
  > span:first-child {
  font-weight: 700;
  color: var(--hw-navy);
}
body.handwritten-preview #learning-map .category-track {
  height: var(--hw-learning-track-height);
  background: var(--hw-middle-track);
  border-radius: 999px;
  overflow: hidden;
}
body.handwritten-preview #learning-map .scale-bar {
  background: var(--hw-middle-gradient);
  border-radius: 999px;
}
body.handwritten-preview #learning-map .hw-category-number {
  position: relative;
  display: block;
  text-align: right;
}
body.handwritten-preview #learning-map .hw-category-circle {
  inset: -5px -10px -2px;
  width: calc(100% + 20px);
  height: calc(100% + 7px);
  color: var(--hw-navy);
  --hw-stroke: 4.2;
}
body.handwritten-preview #learning-map .cover-rail-window {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: var(--lp-space-60);
  padding: var(--lp-space-20) 0 var(--lp-space-24);
  overflow: hidden;
}
body.handwritten-preview #learning-map .hw-learning-ribbon {
  position: absolute;
  z-index: -1;
  inset: 160px 0 0;
  background: var(--hw-middle-gradient);
  clip-path: polygon(0 0, 100% 18%, 100% 100%, 0 82%);
  filter: drop-shadow(
    0 -4px 7px color-mix(in srgb, var(--hw-cyan) 20%, transparent)
  );
}
body.handwritten-preview #learning-map .cover-rail {
  display: flex;
  width: max-content;
  gap: var(--hw-learning-cover-gap);
  margin: 0;
  padding: 16px 0 30px max(40px, calc((100vw - 1280px) / 2));
}
body.handwritten-preview #learning-map .cover-rail img {
  width: var(--hw-learning-cover);
  aspect-ratio: 1/1.42;
  height: auto;
  object-fit: cover;
  flex: 0 0 var(--hw-learning-cover);
  border-radius: var(--hw-radius);
  box-shadow: 8px 8px 0 color-mix(in srgb, var(--hw-cyan) 100%, transparent);
  rotate: -3deg;
}
body.handwritten-preview #learning-map .cover-rail img:nth-child(3n + 2) {
  rotate: 2deg;
}
body.handwritten-preview #learning-map .cover-rail img:nth-child(3n) {
  rotate: -1deg;
}
body.handwritten-preview #learning-map > .container > .actions {
  justify-content: center;
  margin-top: var(--lp-control-min-size);
}
@media (min-width: 1281px) and (max-width: 1439px) {
  body.handwritten-preview #learning-map {
    --hw-learning-number-size: 245px;
  }
}
@media (min-width: 1151px) and (max-width: 1280px) {
  body.handwritten-preview #learning-map {
    --hw-learning-number-size: 225px;
  }
}
@media (min-width: 769px) and (max-width: 1150px) {
  body.handwritten-preview #learning-map {
    --hw-learning-column-gap: 56px;
    --hw-learning-number-size: 245px;
  }
  body.handwritten-preview #learning-map .learning-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  body.handwritten-preview #learning-map .categories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--lp-space-36);
  }
  body.handwritten-preview #learning-map .category-row {
    font-size: 16px;
  }
}
@media (max-width: 768px) {
  body.handwritten-preview #learning-map {
    --hw-learning-number-size: 128px;
    --hw-learning-cover: 200px;
    --hw-learning-cover-gap: 24px;
    min-height: 0;
    padding-block: var(--hw-space-section-sp);
  }
  body.handwritten-preview #learning-map::before {
    top: 122px;
    clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 100%);
  }
  body.handwritten-preview #learning-map .learning-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lp-space-48);
  }
  body.handwritten-preview #learning-map .learning-total {
    margin-bottom: var(--lp-size-40);
  }
  body.handwritten-preview #learning-map .learning-total > .num {
    font-size: var(--hw-learning-number-size);
    letter-spacing: -0.075em;
  }
  body.handwritten-preview #learning-map .learning-total .unit {
    font-size: var(--hw-h2-sp);
    margin-left: var(--lp-space-12);
  }
  body.handwritten-preview #learning-map .learning-total p {
    margin-left: var(--lp-space-12);
    font-size: var(--hw-note);
  }
  body.handwritten-preview #learning-map .learning-layout h2 {
    font-size: var(--hw-h2-sp);
    line-height: 1.6;
  }
  body.handwritten-preview #learning-map .categories {
    padding: 0;
  }
  body.handwritten-preview #learning-map .category-row {
    padding-block: var(--lp-space-12) var(--lp-space-16);
    gap: var(--lp-space-10) var(--lp-space-14);
    grid-template-columns: minmax(0, 1fr) 58px;
    font-size: var(--hw-body-sp);
    line-height: 1.8;
  }
  body.handwritten-preview #learning-map .category-row .num {
    font-size: 22px;
  }
  body.handwritten-preview #learning-map .category-track {
    height: 14px;
  }
  body.handwritten-preview #learning-map .cover-rail-window {
    margin-top: var(--lp-space-48);
    padding-block: var(--lp-space-12) var(--lp-space-20);
  }
  body.handwritten-preview #learning-map .hw-learning-ribbon {
    top: 145px;
    clip-path: polygon(0 0, 100% 14%, 100% 100%, 0 86%);
  }
  body.handwritten-preview #learning-map .cover-rail {
    padding-left: var(--lp-space-24);
    gap: var(--hw-learning-cover-gap);
  }
  body.handwritten-preview #learning-map .cover-rail img {
    width: var(--hw-learning-cover);
    flex-basis: var(--hw-learning-cover);
  }
  body.handwritten-preview #learning-map > .container > .actions {
    margin-top: var(--lp-size-40);
  }
}
@media (max-width: 374px) {
  body.handwritten-preview #learning-map {
    --hw-learning-number-size: 120px;
  }
}
@media (max-width: 340px) {
  body.handwritten-preview #learning-map {
    --hw-learning-number-size: clamp(112px, calc(40vw - 16px), 120px);
  }
}
body.handwritten-preview #learning-map .learning-total > .num {
  padding-bottom: 0.075em;
  margin-bottom: -0.075em;
}
body.handwritten-preview main > section#learning-map {
  min-height: 0;
  padding-block: var(--lp-space-96);
}
body.handwritten-preview main > section#learning-map .hw-cover-rail-safe {
  position: relative;
  overflow: hidden;
  width: 100%;
}
@media (min-width: 769px) {
  body.handwritten-preview main > section#learning-map .hw-cover-rail-safe {
    width: calc(100vw - 64px);
  }
}
@media (max-width: 768px) {
  body.handwritten-preview main > section#learning-map {
    padding-block: var(--lp-size-72);
  }
  body.handwritten-preview main > section#learning-map .learning-layout {
    gap: var(--lp-size-40);
  }
  body.handwritten-preview main > section#learning-map .cover-rail-window {
    margin-top: var(--lp-size-40);
  }
}
body.handwritten-preview #learning-map .cover-rail img[data-source-width] {
  max-width: calc(var(--hw-source-width) / 1.15);
}
@media (min-width: 769px) {
  body.handwritten-preview #learning-map .category-row .num {
    font-size: 24px;
  }
  body.handwritten-preview main > section#learning-map .cover-rail-window {
    margin-top: var(--lp-size-40);
  }
}
@media (max-width: 768px) {
  body.handwritten-preview main > section#learning-map .category-row {
    padding-block: var(--lp-space-6);
    row-gap: var(--lp-space-6);
  }

  body.handwritten-preview main > section#learning-map .category-row {
    padding-block: var(--lp-line-width-2);
    row-gap: var(--lp-focus-offset);
  }
  body.handwritten-preview main > section#learning-map .category-row {
    padding-block: 1px;
  }
  body.handwritten-preview main > section#learning-map .hw-learning-date {
    display: none;
  }
  body.handwritten-preview main > section#learning-map .learning-total {
    margin-bottom: var(--lp-space-20);
  }
  body.handwritten-preview main > section#learning-map .learning-layout {
    row-gap: var(--lp-space-32);
  }
}
body.handwritten-preview #learning-map .learning-total > .num {
  padding-right: 0.1em;
  margin-right: -0.1em;
}
body.handwritten-preview main > section#learning-map .category-row {
  container-type: inline-size;
  container-name: course-example;
}
body.handwritten-preview main > section#learning-map .category-example {
  grid-column: 1 / -1;
  margin: var(--lp-hover-lift) 0 0;
  max-inline-size: none;
  color: var(--lp-color-hex-375674);
  font: 400 16px/1.5 var(--hw-sans);
  white-space: nowrap;
}
@container course-example (max-width:420px) {
  body.handwritten-preview
    main
    > section#learning-map
    .category-example[data-example-pair="wide"]
    .category-example-second {
    display: none;
  }
}
@container course-example (max-width:340px) {
  body.handwritten-preview
    main
    > section#learning-map
    .category-example[data-example-pair="medium"]
    .category-example-second {
    display: none;
  }
}
@media (min-width: 769px) {
  body.handwritten-preview
    main
    > section#learning-map
    .learning-layout
    > div:first-child {
    align-self: center;
  }
}
@media (max-width: 768px) {
  body.handwritten-preview main > section#learning-map .categories {
    grid-template-columns: minmax(0, 1fr);
  }
}
body.handwritten-preview main > section#learning-map.reference-learning {
  --reference-cover-width: clamp(146px, 13vw, 188px);
  --reference-cover-gap: 12px;
  min-height: 0;
  padding: var(--lp-space-48) 0 var(--lp-space-36);
  background: #edf9ff url("../../assets/reference-learning-background.webp")
    center/cover no-repeat;
  overflow: hidden;
}
body.handwritten-preview main > section#learning-map.reference-learning::before,
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  > .container
  > .hw-middle-brush {
  display: none;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  > .container {
  width: calc(100% - 96px);
  max-width: 1360px;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .learning-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--lp-space-48);
  align-items: center;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .reference-learning-copy {
  display: block;
  align-self: center;
  min-width: 0;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .learning-total {
  container-type: inline-size;
  order: initial;
  margin: 0 0 var(--lp-space-12);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .learning-total
  > .num {
  font-size: min(300px, 42cqw);
  line-height: 0.94;
  letter-spacing: -0.072em;
  padding-right: 0.1em;
  margin-right: -0.1em;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
  transform: none;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .learning-total
  .unit {
  align-self: flex-end;
  margin: var(--lp-space-minus-48) 9% 0 0;
  font: 700 clamp(54px, 5.2vw, 72px)/1.15 var(--hw-serif);
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .reference-learning-stroke {
  position: absolute;
  right: 1%;
  bottom: 18px;
  width: 58%;
  height: 74px;
  pointer-events: none;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .hw-learning-date {
  display: block;
  align-self: flex-end;
  margin: 0 2% 0 0;
  font: 400 14px/1.5 var(--hw-sans);
  color: #435e7e;
  position: relative;
}
body.handwritten-preview main > section#learning-map.reference-learning h2 {
  margin: 0;
  max-width: none;
  font-size: clamp(48px, calc(48px + (100vw - 1280px) * 0.095238), 64px);
  line-height: 1.3;
  text-wrap: initial;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .reference-learning-line {
  display: block;
  white-space: nowrap;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .reference-learning-support {
  margin: var(--lp-space-18) 0 0;
  font-size: 17px;
  line-height: 1.8;
  color: #365575;
  text-wrap: pretty;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .reference-learning-support
  .hw-phrase {
  display: inline;
  white-space: normal;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .categories {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  padding: var(--lp-space-24);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .category-row {
  container-type: normal;
  container-name: none;
  display: grid;
  grid-template-columns: minmax(122px, 1fr) minmax(0, 1.8fr) 48px;
  align-items: center;
  column-gap: var(--lp-space-14);
  row-gap: 0;
  min-height: 62px;
  padding: var(--lp-space-6) 0;
  font-size: 17px;
  line-height: 1.45;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .category-label {
  grid-column: 1;
  font-weight: 700;
  color: var(--hw-navy);
  min-width: 0;
  font-size: 16px;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .category-label
  .hw-phrase {
  display: inline;
  white-space: normal;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .category-label-part {
  display: inline-block;
  max-width: 100%;
  white-space: normal;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .category-graph {
  grid-column: 2;
  min-width: 0;
  align-self: center;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .category-track {
  width: 100%;
  height: 13px;
  margin: 0;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .category-example {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  column-gap: var(--lp-focus-offset);
  row-gap: 0;
  grid-column: auto;
  margin: var(--lp-space-5) 0 0;
  height: 24px;
  max-height: 24px;
  overflow: hidden;
  font: 400 14px/24px var(--hw-sans);
  white-space: normal;
  color: var(--lp-color-hex-375674);
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .category-example
  > span {
  display: block;
  flex: 0 0 auto;
  white-space: nowrap;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .category-count {
  grid-column: 3;
  min-width: 0;
  text-align: right;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .category-count
  > .num {
  display: block;
  font: 800 28px/1.15 var(--hw-num);
  color: var(--hw-blue);
  padding: 0;
  margin: 0;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .cover-rail-window {
  width: 100vw;
  margin: 22px 0 0 calc(50% - 50vw);
  padding: 0;
  height: 292px;
  overflow: hidden;
  position: relative;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .reference-learning-book-arc {
  position: absolute;
  width: 100%;
  max-width: none;
  height: 240px;
  object-fit: fill;
  left: 0;
  bottom: -36px;
  pointer-events: none;
  z-index: 0;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .hw-cover-rail-safe {
  overflow: visible;
  height: 100%;
  width: 100%;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .cover-rail {
  display: flex;
  align-items: flex-end;
  height: 100%;
  width: max-content;
  gap: var(--reference-cover-gap);
  padding: 0 0 var(--lp-space-16);
  margin-left: calc(
    50vw -
      (
        3 * var(--reference-cover-width) + 3 * var(--reference-cover-gap) +
          var(--reference-cover-width) * 0.65
      )
  );
  position: relative;
  z-index: 1;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .cover-rail
  img {
  width: var(--reference-cover-width);
  height: auto;
  max-height: 240px;
  flex: 0 0 var(--reference-cover-width);
  object-fit: contain;
  object-position: center bottom;
  border-radius: 8px;
  box-shadow:
    5px 6px 0 var(--hw-cyan),
    0 8px 14px rgba(17, 86, 147, 0.15);
  transform-origin: center bottom;
  rotate: none;
  margin-bottom: var(--lp-space-8);
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .cover-rail
  img:nth-child(1) {
  rotate: 7deg;
  margin-bottom: var(--lp-space-28);
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .cover-rail
  img:nth-child(2) {
  rotate: 4deg;
  margin-bottom: var(--lp-space-14);
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .cover-rail
  img:nth-child(3) {
  rotate: 2deg;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .cover-rail
  img:nth-child(4) {
  width: calc(var(--reference-cover-width) * 1.3);
  flex-basis: calc(var(--reference-cover-width) * 1.3);
  max-height: 280px;
  margin-bottom: 0;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .cover-rail
  img:nth-child(5) {
  rotate: -2deg;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .cover-rail
  img:nth-child(6) {
  rotate: -4deg;
  margin-bottom: var(--lp-space-14);
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .cover-rail
  img:nth-child(7) {
  rotate: -7deg;
  margin-bottom: var(--lp-space-28);
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  > .container
  > .actions {
  display: flex;
  justify-content: center;
  margin-top: var(--lp-space-24);
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  > .container
  > .actions
  .button {
  width: auto;
  min-width: 348px;
  min-height: 62px;
}
@media (min-width: 1600px) {
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .reference-learning-support,
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .category-row {
    font-size: 18px;
  }
}
@media (min-width: 1200px) {
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .reference-learning-copy {
    padding-left: var(--lp-size-40);
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .reference-learning-support {
    font-size: clamp(18px, calc(18px + (100vw - 1280px) * 0.011905), 20px);
    line-height: 1.6;
  }
}
@media (min-width: 769px) and (max-width: 1199px) {
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    > .container {
    width: calc(100% - 64px);
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .learning-layout {
    gap: var(--lp-space-28);
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .categories {
    padding: var(--lp-space-20);
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .category-row {
    grid-template-columns: minmax(108px, 0.8fr) minmax(0, 1.5fr) 44px;
    column-gap: var(--lp-space-10);
  }
}
@media (min-width: 769px) and (max-width: 1099px) {
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .learning-layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--lp-space-36);
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .reference-learning-copy {
    max-width: 740px;
  }
}
@media (max-width: 768px) {
  body.handwritten-preview main > section#learning-map.reference-learning {
    --reference-cover-width: 110px;
    --reference-cover-gap: 12px;
    padding: var(--lp-size-40) 0;
    background-size: auto 100%;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    > .container {
    width: calc(100% - 48px);
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .learning-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lp-space-28);
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .learning-total {
    margin-bottom: var(--lp-space-24);
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .learning-total
    > .num {
    font-size: 38.5cqw;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .learning-total
    .unit {
    font-size: 38px;
    margin-top: -6px;
    margin-right: 5%;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .reference-learning-stroke {
    width: 65%;
    height: 50px;
    bottom: 15px;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .hw-learning-date {
    margin-top: var(--lp-space-10);
  }
  body.handwritten-preview main > section#learning-map.reference-learning h2 {
    font-size: 28px;
    line-height: 1.5;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .reference-learning-support {
    margin-top: var(--lp-space-16);
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .categories {
    padding: var(--lp-space-16);
    border-radius: 18px;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .category-row {
    grid-template-columns: minmax(0, 1fr) 48px;
    min-height: 0;
    row-gap: var(--lp-space-8);
    padding: var(--lp-space-12) 0;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .category-label {
    grid-column: 1;
    grid-row: 1;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .category-count {
    grid-column: 2;
    grid-row: 1;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .category-graph {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .category-count
    > .num {
    font-size: 26px;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .cover-rail-window {
    margin-top: var(--lp-space-24);
    height: 226px;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .cover-rail {
    padding-bottom: var(--lp-space-18);
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .cover-rail
    img {
    max-height: 176px;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .cover-rail
    img:nth-child(4) {
    max-height: 206px;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .reference-learning-book-arc {
    height: 140px;
    bottom: -36px;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    > .container
    > .actions {
    margin-top: var(--lp-space-20);
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    > .container
    > .actions
    .button {
    width: 100%;
    min-width: 0;
    padding-inline: var(--lp-space-16);
    font-size: 16px;
  }
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .additional-learning-content {
  display: grid;
  gap: var(--lp-space-20);
  margin-top: var(--lp-space-24);
  font-size: 17px;
  line-height: 1.75;
  color: var(--hw-body);
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .additional-learning-content
  p {
  margin: 0;
  font-size: 17px;
  line-height: 1.75;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .additional-learning-label {
  margin-bottom: var(--lp-space-6);
  color: var(--hw-navy);
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .additional-learning-examples
  ul {
  list-style: disc;
  padding-left: 1.2em;
  margin: var(--lp-space-6) 0 0;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .additional-learning-examples
  li {
  margin: 0;
  padding: 0;
  font-size: 17px;
  line-height: 1.75;
  text-wrap: pretty;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .additional-tool-names {
  text-wrap: pretty;
  overflow-wrap: normal;
  word-break: normal;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .additional-tool-names
  span {
  white-space: nowrap;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .category-example.additional-ai-example {
  display: block;
  overflow: visible;
  margin-top: var(--lp-space-6);
  text-wrap: pretty;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .additional-ai-example
  > span {
  display: inline;
  white-space: normal;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .additional-ai-example
  .example-phrase {
  display: inline-block;
  white-space: nowrap;
}
@media (min-width: 1100px) {
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .learning-layout {
    align-items: stretch;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .reference-learning-copy {
    align-self: stretch;
    height: 100%;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .categories {
    align-self: stretch;
    grid-template-rows: repeat(10, minmax(62px, 1fr));
  }
}
@media (max-width: 768px) {
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .additional-learning-content {
    margin-top: var(--lp-space-20);
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .additional-learning-examples
    li
    + li {
    margin-top: var(--lp-focus-offset);
  }
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .learning-total {
  margin-bottom: var(--lp-space-24);
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .learning-total
  > .num {
  font-size: min(300px, 37cqw);
  margin-bottom: 0;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .learning-total
  .unit {
  margin: var(--lp-space-8) 0 0;
  font-size: clamp(48px, 4.4vw, 64px);
  line-height: 1.15;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .hw-learning-date {
  margin: var(--lp-space-8) 0 0;
  font-size: 14px;
  line-height: 1.5;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .reference-learning-stroke {
  bottom: 50px;
  right: 1%;
  width: 56%;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .reference-learning-support {
  max-width: 100%;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .reference-learning-support
  .audit-support-phrase {
  display: inline-block;
  white-space: nowrap;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .category-row {
  grid-template-columns: 208px minmax(0, 1fr) 48px;
  grid-template-rows: auto;
  column-gap: var(--lp-space-14);
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .category-row
  :is(.category-label, .category-graph, .category-count) {
  grid-row: 1;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .category-label-part {
  display: block;
  white-space: nowrap;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .category-label.audit-single-line {
  white-space: nowrap;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .category-label.audit-single-line
  :is(.hw-phrase-text, .hw-phrase) {
  white-space: nowrap;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .category-example.additional-ai-example {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: var(--lp-space-6);
  height: auto;
  max-height: none;
  font-size: 16px;
  line-height: 1.65;
  white-space: nowrap;
  text-wrap: nowrap;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .category-example.additional-ai-example
  > span {
  display: inline;
  white-space: nowrap;
}
@media (min-width: 1100px) {
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .learning-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--lp-size-40);
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .reference-learning-copy {
    padding-left: 0;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .reference-learning-support
    .audit-support-line {
    display: block;
    white-space: nowrap;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .categories {
    padding: var(--lp-space-24);
  }
}
@media (min-width: 769px) and (max-width: 1279px) {
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .category-example.additional-ai-example
    > .category-example-second {
    display: none;
  }
}
@media (max-width: 768px) {
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .learning-total
    > .num {
    font-size: 37cqw;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .learning-total
    .unit {
    font-size: 38px;
    margin: var(--lp-space-8) 0 0;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .reference-learning-stroke {
    bottom: 44px;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .category-row {
    grid-template-columns: minmax(0, 1fr) 48px;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .category-row
    .category-graph {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .category-example.additional-ai-example {
    grid-row: 3;
    white-space: normal;
    text-wrap: pretty;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .category-example.additional-ai-example
    > span {
    white-space: normal;
  }
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .category-label-part {
    white-space: normal;
  }
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .learning-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  align-items: start;
  row-gap: 0;
}

body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .learning-total
  > .num {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .reference-learning-stroke {
  position: static;
  grid-column: 1;
  grid-row: 2;
  justify-self: end;
  width: 70%;
  height: 44px;
  margin: 0;
  object-fit: fill;
  transform: none;
}

@media (max-width: 768px) {
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .reference-learning-stroke {
    height: 36px;
  }
}

body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .learning-total
  > .unit {
  grid-column: 1;
  grid-row: 3;
  justify-self: end;
  align-self: start;
  margin: var(--lp-focus-offset) 0 0;
}

body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .hw-learning-date {
  grid-column: 1;
  grid-row: 4;
  justify-self: end;
  align-self: start;
  margin: var(--lp-space-8) 0 0;
}
body.handwritten-preview
  main
  > section#learning-map.reference-learning
  .learning-total
  > .num {
  position: relative;
  top: 16px;
}
@media (max-width: 768px) {
  body.handwritten-preview
    main
    > section#learning-map.reference-learning
    .learning-total
    > .num {
    top: 8px;
  }
}
.category-meter-generative-ai {
  --value: 1;
}
.category-meter-awareness {
  --value: 0.45455;
}
.category-meter-dx {
  --value: 0.40049;
}
.category-meter-analysis {
  --value: 0.20393;
}
.category-meter-conversion {
  --value: 0.13268;
}
.category-meter-framework {
  --value: 0.12285;
}
.category-meter-digital-basics {
  --value: 0.11302;
}
.category-meter-business-tools {
  --value: 0.10811;
}
.category-meter-ec {
  --value: 0.086;
}
.category-meter-research {
  --value: 0.0688;
}