body.guide-page {
  background: var(--cream);
}
.mod--basics {
  --mod: var(--honey);
}
.mod--checking {
  --mod: var(--ev-verified);
  --mod-ink: var(--on-plum);
}
.mod--safety {
  --mod: var(--rose);
}
.mod--patterns {
  --mod: var(--lilac);
}
.mod--usage,
.mod--models {
  --mod: var(--ground-deep);
}
.mod--questions {
  --mod: var(--ground-deep);
}
.mod-dot {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--mod);
  box-shadow: 0 0 0 1px var(--hairline-strong);
}

.guide-cover {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 8vw, 7rem) var(--pad) clamp(2.5rem, 6vw, 4.5rem);
}
.guide-cover__light .glow--honey {
  width: 32.5rem;
  height: 28.75rem;
  right: -8.75rem;
  top: -10rem;
  opacity: 0.4;
}
.guide-cover__light .glow--lilac {
  width: 23.75rem;
  height: 18.75rem;
  left: -13.75rem;
  bottom: 3.75rem;
}

.guide-cover__inner {
  position: relative;
  max-width: 47.5rem;
  margin-inline: auto;
  text-align: center;
}
.guide-cover h1 {
  font-family: var(--font-display);
  font-size: var(--fs-act);
  font-weight: 700;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.025em;
  line-height: var(--lh-act);
}
.guide-cover__sub {
  margin-top: var(--s4);
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: var(--lh-title);
}
.guide-cover__intro {
  margin-top: var(--s7);
  max-width: 60ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
.guide-cover__intro > * + * {
  margin-top: var(--s5);
}
.guide-cover__intro {
  margin-inline: auto;
}

.guide-index {
  box-shadow: 0 1px 0 var(--hairline);
}
.guide-index__row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.guide-index nav {
  flex: 1;
  min-width: 0;
}
.guide-index ol {
  display: flex;
  gap: var(--s2);
  padding-block: var(--s3);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.guide-index ol::-webkit-scrollbar {
  display: none;
}

.guide-index li:first-child {
  margin-left: auto;
}
.guide-index li:last-child {
  margin-right: auto;
}
.index-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 2.5rem;
  padding: 0 var(--s4);
  border-radius: var(--pill);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--hairline-strong);
  color: var(--ink-soft);
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--t-quick) var(--ease), background-color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease);
}
@media (hover: hover) {
  .index-pill:hover {
    color: var(--plum);
    box-shadow: 0 0 0 1px var(--plum);
  }
}
.index-pill.is-current {
  background: var(--plum);
  color: var(--on-plum);
  box-shadow: var(--shadow-ink);
}
.index-pill:focus-visible {
  outline: 3px solid var(--honey);
  outline-offset: 2px;
}

.guide {
  --prose-fs: clamp(1.125rem, 0.98rem + 0.4vw, 1.25rem);
  --prose-w: calc(32 * var(--prose-fs));
  max-width: calc(42.5rem + 2 * var(--pad));
  margin-inline: auto;
  padding: clamp(3rem, 6vw, 5.5rem) var(--pad) var(--s12);
}
.module {
  scroll-margin-top: 9.375rem;
}
.module + .module {
  margin-top: clamp(4.5rem, 9vw, 8rem);
}

.module__head {
  max-width: var(--prose-w);
  margin-bottom: var(--s7);
}
.module__mark {
  --mark-h: clamp(4.5rem, 3rem + 4.5vw, 7.5rem);
  display: flex;
  align-items: flex-end;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  height: var(--mark-h);
  margin-bottom: var(--s5);
}
.module__numeral {
  font-family: var(--font-display);
  font-size: calc(var(--mark-h) * 1.18);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.05em;
  line-height: 0.74;
  color: var(--mod-ink-text, var(--plum));
}
.module__art {
  flex: none;
  width: var(--mark-h);
  height: var(--mark-h);
  fill: none;
  stroke: var(--plum);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.module__art .art-card {
  fill: var(--card);
}
.module__art .art-fill {
  fill: var(--mod);
}
.module__art .art-tint {
  fill: var(--mod);
  fill-opacity: 0.32;
}
.module__art .art-dot {
  fill: var(--plum);
  stroke: none;
}
.module__art .art-you {
  fill: var(--plum);
}
.module__art .art-on-you {
  stroke: var(--on-plum);
}
.module__art .art-heavy {
  stroke-width: 6;
}
.module__art .art-slip {
  stroke: var(--rose-ink);
}

.module__head .module__no {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.module__head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-act);
  font-weight: 700;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
}
.module__head .module__lead {
  max-width: 52ch;
}
.module__meta {
  margin-top: var(--s4);
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--hairline-strong);
  color: var(--ink-soft);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.mod--basics {
  --mod-ink-text: var(--honey-ink);
}
.mod--checking {
  --mod-ink-text: var(--ev-verified);
}
.mod--safety {
  --mod-ink-text: var(--rose-ink);
}

.module__turn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label time" "title arrow";
  align-items: baseline;
  gap: var(--s1) var(--s4);
  max-width: var(--prose-w);
  margin-top: var(--s10);
  padding: var(--s5) 0 var(--s2);
  border-top: 1px solid var(--hairline-strong);
  color: var(--plum);
  text-decoration: none;
}
.module__turn-label {
  grid-area: label;
  color: var(--ink-soft);
  font-size: var(--fs-micro);
  font-weight: 600;
}
.module__turn-time {
  grid-area: time;
  color: var(--ink-soft);
  font-size: var(--fs-micro);
}
.module__turn-title {
  grid-area: title;
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-title);
}
.module__turn-title .mod-dot {
  width: 0.75rem;
  height: 0.75rem;
}
.module__turn > svg {
  grid-area: arrow;
  align-self: center;
  width: 1.5rem;
  height: 1.5rem;
  transition: transform var(--t-quick) var(--ease);
}
@media (hover: hover) {
  .module__turn:hover .module__turn-title {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    text-decoration-color: var(--honey);
  }
  .module__turn:hover > svg {
    transform: translateX(0.25rem);
  }
}
.module__turn:focus-visible {
  outline: 3px solid var(--honey);
  outline-offset: 4px;
  border-radius: var(--r-code);
}

.prose {
  max-width: var(--prose-w);
  font-size: var(--prose-fs);
  line-height: 1.7;
}
.prose > * + *,
.lesson > * + * {
  margin-top: 1em;
}

.prose > .lesson {
  margin-top: 0;
}
.prose :is(p, li) {
  text-wrap: pretty;
}

.prose h3 {
  margin-top: clamp(4rem, 3rem + 2.5vw, 6rem);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-wrap: balance;
  scroll-margin-top: 9.375rem;
}
.lesson__no {
  display: block;
  margin-bottom: var(--s2);
  color: var(--mod-ink-text, var(--ink-soft));
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.prose h4 {
  margin-top: 1.8em;
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: var(--lh-title);
  scroll-margin-top: 9.375rem;
}
.prose h3 + *,
.prose h4 + * {
  margin-top: 0.7em;
}

.prose .lesson__key {
  padding: 0 0.1em;
  border-radius: 0.2em;
  background: linear-gradient(transparent 58%, var(--honey-soft) 58%, var(--honey-soft) 94%, transparent 94%);
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
mark.lesson__key {
  font: inherit;
  font-size: inherit;
  font-weight: 600;
}

.prose .prompt {
  width: fit-content;
  max-width: min(88%, 48ch);
  margin-left: auto;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-inner) var(--r-inner) var(--r-code) var(--r-inner);
  background: var(--plum);
  color: var(--on-plum);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.5;
}

.prose > .prompt__act,
.lesson > .prompt__act {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--s1);
}
.prompt__copy {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 2.25rem;
  padding: 0 var(--s3);
  border: 0;
  border-radius: var(--pill);
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--fs-micro);
  font-weight: 600;
  cursor: pointer;
  transition: color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease);
}
.prompt__copy svg {
  flex: none;
  width: 1rem;
  height: 1rem;
}
@media (hover: hover) {
  .prompt__copy:hover {
    color: var(--plum);
    box-shadow: 0 0 0 1px var(--hairline-strong);
  }
}
.prompt__copy:focus-visible {
  outline: 3px solid var(--honey);
  outline-offset: 2px;
}

.prose .check {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-top: clamp(3rem, 2.5rem + 2vw, 4.5rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--shadow-rest);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.check__label {
  color: var(--mod-ink-text, var(--ink-soft));
  font-size: var(--fs-micro);
  font-weight: 700;
}
.check__scene {
  color: var(--ink-soft);
  font-size: var(--fs-small);
}
.check > .msg {
  max-width: min(88%, 46ch);
}
.check__q {
  margin-top: var(--s3);
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: var(--lh-title);
}
.check__replies {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.check__replies summary {
  display: flex;
  justify-content: flex-end;
  list-style: none;
  cursor: pointer;
}
.check__replies summary::-webkit-details-marker {
  display: none;
}

.check__replies summary .msg {
  max-width: min(88%, 46ch);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--plum);
  color: var(--plum);
  font-weight: 500;
  transition: background-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
@media (hover: hover) {
  .check__replies summary:hover .msg {
    background: var(--honey-tint);
  }
}
.check__replies details[open] > summary .msg {
  background: var(--plum);
  color: var(--on-plum);
}
.check__replies summary:focus-visible {
  outline: none;
}
.check__replies summary:focus-visible .msg {
  outline: 3px solid var(--honey);
  outline-offset: 2px;
}
.check__replies details > .slip__reply {
  margin-top: var(--s3);
  animation: slip-rise var(--t-turn) var(--ease) both;
}
.check__note {
  margin-top: var(--s2);
  color: var(--ink-soft);
  font-size: var(--fs-micro);
}
@media (prefers-reduced-motion: reduce) {
  .check__replies details > .slip__reply {
    animation: none;
  }
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}
.prose li + li {
  margin-top: 0.4em;
}
.prose li::marker {
  color: var(--honey-ink);
}

.prose :not(pre) > code {
  white-space: normal;
  overflow-wrap: anywhere;
}

.prose .example {
  padding: var(--s5) var(--s6);
  border-radius: var(--r-inner);
  background: var(--card);
  box-shadow: var(--shadow-rest);
}

.prose .try {
  padding: var(--s5) var(--s6);
  border-radius: var(--r-inner);
  background: var(--honey-tint);
  box-shadow: 0 0 0 1px var(--honey-soft);
}

.prose blockquote {
  margin-inline: 0;
  padding: var(--s4) var(--s5);
  border-radius: var(--r-inner) var(--r-inner) var(--r-inner) var(--r-code);
  background: var(--ground-shade);
  font-family: var(--font-mono);
  font-size: var(--fs-card);
  line-height: var(--lh-card);
}
.prose pre {
  padding: var(--s4) var(--s5);
  border-radius: var(--r-inner);
  background: var(--plum);
  color: var(--on-plum);
  overflow-x: auto;
}

.prose .table {
  padding: var(--s2) var(--s5);
  border-radius: var(--r-inner);
  background: var(--card);
  box-shadow: var(--shadow-rest);
  overflow-x: auto;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  line-height: 1.5;
}
.prose th,
.prose td {
  padding: var(--s3) var(--s4) var(--s3) 0;
  text-align: left;
  vertical-align: top;
}
.prose td {
  border-top: 1px solid var(--hairline);
}
.prose th {
  color: var(--ink-soft);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.prose th:last-child,
.prose td:last-child {
  padding-right: 0;
}
.prose td :not(pre) > code {
  overflow-wrap: normal;
  white-space: nowrap;
}

.slips {
  --slips-w: min(70rem, 100vw - 2 * var(--pad) - 1.25rem);
  margin: var(--s10) calc((100% - var(--slips-w)) / 2) var(--s11);
  scroll-margin-top: 9.375rem;
}
@media (max-width: 899px) {
  .slips {
    margin-inline: 0;
  }
}
.slips__note {
  margin-bottom: var(--s6);
  color: var(--ink-soft);
  font-size: var(--fs-micro);
}
.slips__family + .slips__family {
  margin-top: var(--s10);
}
.slips__family-name {
  margin-bottom: var(--s5);
  color: var(--ink-soft);
  font-size: var(--fs-micro);
  font-weight: 600;
}

.slip {
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--shadow-rest);
  scroll-margin-top: 9.375rem;
}
.slip + .slip {
  margin-top: var(--s7);
}
.slip__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s4);
  align-items: baseline;
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--hairline);
}
.slip__no {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: var(--fs-act);
  font-weight: 800;
  line-height: 1;
  color: var(--rose-ink);
}
.slip__name {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-title);
}
.slip__essay {
  margin-top: var(--s1);
  color: var(--ink-soft);
  font-size: var(--fs-micro);
}
.slip__part {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding-top: var(--s6);
}

.slip__label {
  color: var(--ink-soft);
  font-size: var(--fs-micro);
  font-weight: 600;
}
.slip__part--looks .slip__label {
  color: var(--rose-ink);
}
.slip__part--catch .slip__label {
  color: var(--honey-ink);
}
.slip__part--does .slip__label {
  color: var(--plum);
}
.slip__chat {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.slip__chat .msg {
  max-width: min(88%, 52ch);
  font-size: var(--fs-small);
}

.msg--catch {
  background: var(--honey);
  color: var(--plum);
  font-weight: 600;
}
.slip__reply {
  display: flex;
  align-items: flex-end;
  gap: var(--s3);
}
.slip__reply .msg {
  max-width: min(88%, 52ch);
}

.slip__avatar {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffd98a, var(--honey) 60%, #e59a2e);
  box-shadow: 0 0 0 5px rgba(242, 181, 58, 0.15);
}

.slip__wrong {
  align-self: flex-start;
  padding: var(--s2) var(--s4);
  border-radius: var(--r-inner);
  background: var(--rose-tint);
  color: var(--rose-ink);
  font-size: var(--fs-micro);
  font-weight: 500;
}
.slip__note {
  max-width: 64ch;
  color: var(--plum-body);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}
.slip__note :not(pre) > code {
  white-space: normal;
  overflow-wrap: anywhere;
}

.slips__index {
  display: none;
}
.slips.is-staged {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--s9);
  align-items: start;
}
.slips.is-staged .slips__note {
  grid-column: 2;
  grid-row: 2;
  margin: var(--s4) 0 0;
}
.slips.is-staged .slips__index {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  grid-row: 1 / span 2;
  position: sticky;
  top: 9.375rem;
}
.slips.is-staged .slips__family {
  display: contents;
}
.slips.is-staged .slips__family-name {
  display: none;
}
.slips.is-staged .slip {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  box-shadow: var(--shadow-lift);
}
.slips.is-staged .slip:not(.is-current) {
  display: none;
}
.slips__group ol {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin-top: var(--s2);
  list-style: none;
}
.slips__group > p {
  color: var(--ink-soft);
  font-size: var(--fs-micro);
  font-weight: 600;
}
.slips__pick {
  justify-content: flex-start;
  width: 100%;
  text-align: left;
}
.slips__pick-no {
  min-width: 1.6em;
  font-family: var(--font-display);
  font-weight: 700;
}

.slips__pick.is-seen::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  border-radius: 50%;
  background: var(--honey);
}

.slip[data-step="looks"] .slip__part--catch,
.slip[data-step="looks"] .slip__part--does {
  display: none;
}
.slip.is-revealed .slip__part--catch,
.slip.is-revealed .slip__part--does {
  animation: slip-rise var(--t-turn) var(--ease) both;
}
.slip.is-revealed .slip__part--does {
  animation-delay: 250ms;
}
@keyframes slip-rise {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
}
.slip__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--hairline);
}
.slip__hint {
  margin-right: auto;
  color: var(--ink-soft);
  font-size: var(--fs-micro);
}

.slip__foot .btn {
  max-width: 100%;
  padding-block: var(--s3);
  white-space: normal;
  text-align: left;
}
.slip__foot .btn--catch {
  --btn-bg: var(--honey);
  --btn-fg: var(--plum);
  --btn-shadow: 0 10px 24px -10px rgba(242, 181, 58, 0.6);
}

@media (max-width: 899px) {
  .slips.is-staged {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s5);
  }
  .slips.is-staged .slips__index {
    position: static;
    flex-direction: row;
    gap: var(--s5);
    grid-row: 1;
    margin-inline: calc(-1 * var(--pad));
    padding: 0 var(--pad) var(--s2);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .slips.is-staged .slips__index::-webkit-scrollbar {
    display: none;
  }
  .slips.is-staged .slip {
    grid-column: 1;
    grid-row: 2;
  }
  .slips.is-staged .slips__note {
    grid-column: 1;
    grid-row: 3;
  }
  .slips__group {
    flex: none;
  }
  .slips__group ol {
    flex-direction: row;
  }
  .slips__pick {
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .slip.is-revealed .slip__part--catch,
  .slip.is-revealed .slip__part--does {
    animation: none;
  }
}

.guide-index__search {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--s2);
  min-height: 2.5rem;
  padding: 0 var(--s2) 0 var(--s4);
  border: 0;
  border-radius: var(--pill);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--hairline-strong);
  color: var(--plum);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  transition: box-shadow var(--t-quick) var(--ease);
}
.guide-index__search[hidden] {
  display: none;
}

@media (max-width: 599px) {
  .guide-index__search {
    justify-content: center;
    min-width: 2.75rem;
  }
}
@media (hover: hover) {
  .guide-index__search:hover {
    box-shadow: 0 0 0 1px var(--plum);
  }
}
.guide-index__search:focus-visible {
  outline: 3px solid var(--honey);
  outline-offset: 2px;
}
.guide-index__search svg,
.search__bar > svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}
@media (max-width: 600px) {
  .guide-index__search span,
  .guide-index__search .key {
    display: none;
  }
  .guide-index__search {
    width: 2.5rem;
    padding: 0;
    justify-content: center;
  }
}

.search {
  width: min(42.5rem, calc(100vw - 2 * var(--pad)));
  max-height: min(40rem, calc(100dvh - 6rem));
  margin: 4.5rem auto auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--shadow-lift);
  color: var(--plum);
  overflow: hidden;
}
.search[open] {
  display: flex;
  flex-direction: column;
}
.search::backdrop {
  background: rgba(46, 31, 54, 0.32);
}
.search__bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s4) var(--s4) var(--s5);
  border-bottom: 1px solid var(--hairline);
}
.search__input {
  flex: 1;
  min-width: 0;
  min-height: 2.75rem;
  border: 0;
  background: none;
  color: var(--plum);
  font: inherit;
  font-size: var(--fs-lead);
}
.search__input:focus {
  outline: none;
}
.search__input::placeholder {
  color: var(--ink-faint);
}
.search__input::-webkit-search-cancel-button {
  display: none;
}
.search__close .key {
  margin-left: var(--s1);
}
.search__status {
  padding: var(--s3) var(--s5) 0;
  color: var(--ink-soft);
  font-size: var(--fs-micro);
}
.search__status:empty {
  display: none;
}
.search__results {
  flex: 1;
  margin: 0;
  padding: var(--s2) var(--s3) var(--s3);
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.search__results:empty {
  display: none;
}
.search__hit {
  display: block;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-inner);
  cursor: pointer;
}
.search__hit[aria-selected="true"] {
  background: var(--sel-bg);
  color: var(--sel-fg);
}
.search__where {
  display: block;
  color: var(--ink-soft);
  font-size: var(--fs-label);
}
.search__title {
  display: block;
  font-weight: 600;
}
.search__text {
  display: block;
  margin-top: var(--s1);
  color: var(--plum-body);
  font-size: var(--fs-micro);
  line-height: 1.5;
}
.search__hit[aria-selected="true"] .search__where,
.search__hit[aria-selected="true"] .search__text {
  color: var(--on-plum-soft);
}
.search__hit mark {
  border-radius: var(--r-code);
  background: var(--honey-soft);
  color: var(--plum);
}
@media (max-width: 600px) {
  .search {
    margin-top: var(--s4);
    max-height: calc(100dvh - 2rem);
  }
  .search__close .key {
    display: none;
  }
}

.module__lead {
  margin-top: var(--s4);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--plum-body);
}

.keep {
  max-width: var(--prose-w);
}
.keep__card {
  padding: clamp(1.25rem, 3.5vw, 2.25rem);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--glow-honey), var(--shadow-lift);
}
.catches {
  list-style: none;
}
.catch + .catch {
  border-top: 1px solid var(--hairline);
}

.catch a {
  position: relative;
  display: grid;
  gap: var(--s1);
  padding: var(--s3) 0 var(--s3) 1.375rem;
  color: var(--plum);
  text-decoration: none;
}
.catch a::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(var(--s3) + 0.62em);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--honey);
}
@media (hover: hover) {
  .catch a:hover .catch__q {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    text-decoration-color: var(--honey);
  }
}
.catch a:focus-visible {
  outline: 3px solid var(--honey);
  outline-offset: 2px;
  border-radius: var(--r-code);
}
.catch__q {
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.4;
}
.catch__name {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  color: var(--ink-soft);
  font-size: var(--fs-micro);
}
.catch__no {
  font-family: var(--font-mono);
}
.keep__foot {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--hairline-strong);
  color: var(--ink-soft);
  font-size: var(--fs-small);
}
.keep__foot .mark {
  width: 1.375rem;
  height: 1.375rem;
}
.keep__foot .mark::after {
  right: 0.3125rem;
  top: 0.3125rem;
  width: 0.375rem;
  height: 0.375rem;
}
.keep__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}
.keep__acts[hidden] {
  display: none;
}

.reference {
  margin-top: var(--s10);
  padding-top: var(--s6);
  border-top: 1px solid var(--hairline);
}
.reference > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  color: var(--ink-soft);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.reference > summary::-webkit-details-marker {
  display: none;
}
.reference > summary::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--honey-ink);
  border-bottom: 2px solid var(--honey-ink);
  transform: rotate(-45deg);
  transition: transform var(--t-quick) var(--ease);
}
.reference[open] > summary::before {
  transform: rotate(45deg);
}
@media (hover: hover) {
  .reference > summary:hover {
    color: var(--plum);
  }
}
.reference > .module {
  margin-top: var(--s9);
}

.guide__next {
  max-width: var(--prose-w);
  margin-top: clamp(4.5rem, 9vw, 8rem);
}
.guide__next h2 {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.guide__next p {
  margin-top: var(--s3);
  color: var(--ink-soft);
}
.guide__go {
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "title time arrow";
  align-items: center;
  margin-top: var(--s6);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--hairline-strong);
}
.guide__go .module__turn-title {
  gap: var(--s4);
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem);
}
.guide__go .slip__avatar {
  width: 2.25rem;
  height: 2.25rem;
}

@media (max-width: 600px) {
  .prose .table {
    padding: var(--s1) var(--s4);
  }
  .prose thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .prose table,
  .prose tbody,
  .prose tr,
  .prose td {
    display: block;
  }
  .prose tr {
    padding-block: var(--s3);
  }
  .prose tr + tr {
    border-top: 1px solid var(--hairline-strong);
  }
  .prose td {
    padding: var(--s1) 0;
    border: 0;
  }
  .prose td::before {
    content: attr(data-label);
    display: block;
    color: var(--ink-soft);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .prose td :not(pre) > code {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 420px) {
  .guide-index ol {
    padding-block: var(--s2);
  }
  .prose .example,
  .prose .try {
    padding: var(--s4) var(--s5);
  }
}
.slip__part:focus {
  outline: none;
}

.guide :not(pre) > code {
  font-size: 1em;
}

@media (min-width: 1360px) {
  .guide-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, calc(42.5rem + 2 * var(--pad))) minmax(0, 1fr);
    align-items: start;
  }
  .guide-body > .guide {
    grid-column: 2;
    grid-row: 1;
    margin-inline: 0;
  }
  .guide-index {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: calc(var(--bar-h) + var(--s5));
    max-height: calc(100vh - var(--bar-h) - var(--s8));
    margin-top: clamp(3rem, 6vw, 5.5rem);
    overflow-y: auto;
    scrollbar-width: thin;
    box-shadow: none;
  }
  .guide-index__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s4);
    max-width: 18rem;
    margin: 0 var(--s4) 0 auto;
    padding: 0 0 var(--s4) var(--pad);
  }
  .guide-index ol {
    flex-direction: column;
    gap: var(--s1);
    padding-block: 0;
    overflow: visible;
  }
  .guide-index li:first-child,
  .guide-index li:last-child {
    margin: 0;
  }
  .guide-index .index-pill {
    display: flex;
    min-height: 2.25rem;
    padding: var(--s1) var(--s3);
    border-radius: var(--r-inner);
    background: transparent;
    box-shadow: none;
    white-space: normal;
    line-height: 1.3;
  }
  .guide-index .index-pill.is-current {
    background: var(--plum);
    box-shadow: var(--shadow-ink);
  }
  
  .guide-index__search {
    order: -1;
    align-self: flex-start;
  }
  
  .guide-index .slips__index {
    display: none;
    flex-direction: column;
    gap: var(--s3);
    margin: var(--s2) 0 var(--s2) var(--s4);
    padding-left: var(--s2);
    border-left: 1px solid var(--hairline-strong);
  }
  .guide-index li:has(> .index-pill.is-current) .slips__index {
    display: flex;
  }
  .guide-index .slips__group > p {
    padding-left: var(--s3);
  }
  .guide-index .slips__group ol {
    gap: 2px;
    margin-top: var(--s1);
  }
  .guide-index .slips__pick {
    min-height: 1.875rem;
    padding: 3px var(--s3);
    border-radius: var(--r-inner);
    background: transparent;
    box-shadow: none;
    font-size: var(--fs-micro);
    white-space: normal;
    line-height: 1.3;
  }
  .guide-index .slips__pick[aria-current]:not([aria-current="false"]) {
    background: var(--sel-bg);
    color: var(--sel-fg);
  }
  .slips {
    margin-inline: 0;
  }
  .slips.is-staged {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .slips.is-staged .slip,
  .slips.is-staged .slips__note {
    grid-column: 1;
  }
}

@media (min-width: 1360px) {
  .guide-cover {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, calc(42.5rem + 2 * var(--pad))) minmax(0, 1fr);
    padding-inline: 0;
    padding-bottom: 0;
  }
  .guide-cover__inner {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    margin: 0;
    padding-inline: var(--pad);
    text-align: left;
  }
  .guide-cover__intro {
    margin-inline: 0;
  }
  .guide-body > .guide {
    padding-top: var(--s10);
  }
  .guide-index {
    margin-top: var(--s10);
  }
}
@media (min-width: 1760px) {
  .guide {
    --note-w: 22rem;
    --note-gap: var(--s8);
  }
  
  .guide-body,
  .guide-cover {
    padding-right: 3rem;
  }
  .lesson {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--note-w);
    grid-template-rows: repeat(16, auto);
    column-gap: var(--note-gap);
    margin-right: calc(-1 * (var(--note-w) + var(--note-gap)));
  }
  .lesson > * {
    grid-column: 1;
  }
  .lesson > :is(.example, .try) {
    grid-column: 2;
    grid-row: 2 / -1;
    font-size: var(--fs-small);
    line-height: 1.6;
  }
  .lesson > .example {
    align-self: start;
    margin-top: var(--prose-fs);
  }
  .lesson > .try {
    align-self: end;
    margin-top: 0;
  }
}

.reference > .module .module__head h2 {
  font-size: clamp(1.625rem, 1.4rem + 0.6vw, 2rem);
  letter-spacing: -0.025em;
}
.reference .prose {
  font-size: var(--fs-body);
  color: var(--plum-body);
}
.reference .prose h3 {
  margin-top: var(--s9);
  font-size: var(--fs-title);
}
.reference > .module + .module {
  margin-top: var(--s12);
}

.index-pill__read {
  display: none;
}
.guide-index__left {
  display: none;
}
@media (min-width: 1360px) {
  .guide-index .index-pill {
    position: relative;
  }
  .index-pill__read {
    display: block;
    position: absolute;
    left: var(--s3);
    right: var(--s3);
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--hairline-strong);
    overflow: hidden;
  }
  .index-pill.is-current .index-pill__read {
    background: var(--hairline-on-plum);
  }
  .index-pill__read::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--honey);
    transform: scaleX(var(--done, 0));
    transform-origin: left;
  }
  .guide-index__left {
    display: block;
    margin-bottom: calc(-1 * var(--s2));
    padding-left: var(--s3);
    color: var(--ink-soft);
    font-size: var(--fs-micro);
    font-variant-numeric: tabular-nums;
  }
}
@media (max-width: 1359px) {
  .guide-page .topbar[data-fold] .topbar__row {
    background-image: linear-gradient(var(--honey), var(--honey)), linear-gradient(var(--hairline-strong), var(--hairline-strong));
    background-repeat: no-repeat;
    background-size: calc((100% - 3.5rem) * var(--read, 0)) 2px, calc(100% - 3.5rem) 2px;
    background-position: 1.75rem calc(100% - 1px), 1.75rem calc(100% - 1px);
  }
}