[data-role="handbook"] { max-width: 1280px; margin-inline: auto; padding: 1.6rem 2.4rem 3.5rem; }
[data-role="chapter-opener"] {
  position: relative; padding: 2.5rem 2.7rem 2.8rem; margin-bottom: 2.3rem;
  background: var(--blue); color: #fff; border-radius: 28px; box-shadow: 0 8px 0 #b9cfe5;
}
[data-role="chapter-opener"]::after {
  content: ""; position: absolute; right: 2.7rem; top: -.4rem; width: 3.5rem; height: .8rem;
  background: var(--yellow); border-radius: 999px; transform: rotate(-5deg);
}
[data-role="chapter-opener"] h1 { color: #fff; }
[data-role="chapter-label"] {
  display: table; padding: .35rem .9rem; margin-bottom: 1.2rem; border-radius: 999px;
  color: var(--ink); background: var(--yellow); font-size: 18px; font-weight: 600;
}
[data-role="chapter-intro"] { max-width: 64ch; font-size: 1.2rem; line-height: 1.55; color: #fff; margin-top: 1.2rem; }
[data-role="record-date"] { font-size: 17px; max-width: 68ch; color: #fff; margin-top: 1rem; }
[data-role="reading-layout"] { display: grid; grid-template-columns: minmax(0, 1fr) 265px; gap: 2rem; align-items: start; }
[data-role="chapter-body"] { max-width: 75ch; }
[data-role="chapter-section"] {
  position: relative; padding: 1.8rem; margin-bottom: 1.8rem;
  background: var(--panel); border-radius: 24px; box-shadow: var(--card-shadow);
}
[data-role="chapter-section"]::after {
  content: ""; position: absolute; width: 2.6rem; height: .4rem; background: var(--yellow);
  top: -.15rem; left: 1.8rem; border-radius: 999px;
}
[data-role="chapter-section"] h2 { margin-bottom: 1.1rem; max-width: 31ch; }
[data-role="chapter-section"] p + p { margin-top: .9rem; }
[data-role="question-list"] { padding-left: 1.2rem; margin-block: 1rem; }
[data-role="question-list"] li { padding-left: .35rem; margin-block: .65rem; }
[data-role="question-list"] li::marker { color: var(--blue); }
[data-role="callout"] {
  background: var(--pale-yellow); padding: 1.3rem 1.4rem; margin-block: 1.4rem;
  border-radius: 20px; box-shadow: 5px 5px 0 #e8cc74;
}
[data-role="callout"] h3 { margin-bottom: .6rem; }
[data-role="recap"] { padding: 1.8rem; background: var(--blue); color: #fff; border-radius: 24px; box-shadow: var(--card-shadow); }
[data-role="recap"] h2 { color: #fff; font-size: 1.5rem; margin-bottom: .9rem; }
[data-role="recap"] strong { color: #fff; }
[data-role="page-map"] { padding: 1.3rem; background: var(--panel); border-radius: 24px; box-shadow: var(--card-shadow); }
[data-role="page-map"] p {
  display: table; color: var(--ink); background: var(--yellow); font-size: 17px;
  padding: .3rem .7rem; border-radius: 999px; margin: -.6rem 0 .65rem -.35rem;
}
[data-role="page-map"] ul { list-style: none; padding: 0; }
[data-role="page-map"] a {
  display: flex; align-items: center; min-height: 44px; font-size: 17px; line-height: 1.45;
  padding: .65rem .4rem; border-radius: 16px;
}
[data-role="page-map"] a:hover { background: var(--pale-blue); }
[data-role="related"] { margin-top: 1.6rem; padding: 1.3rem; border-radius: 24px; background: var(--blue); color: #fff; }
[data-role="related-label"] { color: #fff; font-family: var(--heading); font-size: 1.1rem; font-weight: 700; line-height: 1.3; margin-bottom: .6rem; }
[data-role="related"] a { display: flex; align-items: center; min-height: 44px; padding-block: .45rem; font-size: 17px; color: #fff; }
[data-role="chapter-turn"] { display: flex; gap: 1rem; margin-top: 1.8rem; }
[data-role="chapter-turn"] a {
  display: flex; flex-direction: column; justify-content: center; flex: 1; min-height: 72px;
  padding: 1rem 1.2rem; background: var(--panel); border-radius: 24px; box-shadow: var(--card-shadow);
}
[data-role="chapter-turn"] a:hover { background: var(--pale-yellow); }
[data-role="chapter-turn"] span { color: var(--muted); font-size: 17px; }
[data-role="chapter-turn"] strong { font-family: var(--heading); font-size: 18px; font-weight: 700; }
[data-role="action-row"] { margin-block: 1rem; }
[data-role="action-link"] {
  display: inline-flex; min-height: 48px; align-items: center; padding: .7rem 1.2rem;
  border-radius: 999px; background: var(--yellow); color: var(--ink); line-height: 1.45; font-size: 18px;
}
[data-role="action-link"]:hover { background: var(--pale-yellow); }
[data-page="home"] h1 { max-width: 23ch; }
@media (max-width: 1000px) {
  [data-role="reading-layout"] { gap: 1.5rem; grid-template-columns: minmax(0, 1fr) 235px; }
  [data-role="chapter-section"] { padding: 1.5rem; }
}
@media (max-width: 760px) {
  [data-role="handbook"] { padding: 1.2rem 1.2rem 2.5rem; }
  [data-role="reading-layout"] { display: flex; flex-direction: column; gap: 2rem; }
  [data-role="chapter-body"], [data-role="reading-rail"] { width: 100%; }
  [data-role="chapter-opener"] { padding: 1.8rem; margin-bottom: 2rem; border-radius: 24px; }
  [data-role="chapter-intro"] { font-size: 1.12rem; }
  [data-role="chapter-turn"] { flex-wrap: wrap; }
  [data-role="chapter-turn"] a { min-width: 130px; }
  [data-role="recap"] { padding: 1.5rem; }
}
@media (max-width: 440px) {
  [data-role="handbook"] { padding: 1.1rem .8rem 2.5rem; }
  [data-role="chapter-opener"] { padding: 1.5rem 1.2rem 1.7rem; }
  [data-role="chapter-opener"]::after { right: 1.2rem; }
  [data-role="chapter-label"] { font-size: 17px; }
  [data-role="chapter-section"] { padding: 1.4rem 1.15rem; }
  [data-role="chapter-section"]::after { left: 1.2rem; }
  [data-role="callout"] { padding: 1.1rem; }
  [data-role="chapter-turn"] { flex-direction: column; }
}