.book-page {
  --book-ink: #20363b;
  --book-muted: #60747a;
  --book-line: #ced9d7;
  --book-soft: #f2f6f5;
  --book-green: #0f766e;
  --book-green-dark: #0a5c56;
  --book-blue: #3f6f9a;
  --book-coral: #d96f56;
  --book-yellow: #d8a62a;
  background: #f4f7f6;
  color: var(--book-ink);
  font-size: 15px;
}

.book-page .app-shell {
  width: min(100%, 1560px);
  margin-right: auto;
  margin-left: auto;
  background: #f4f7f6;
  box-shadow: 0 0 0 1px rgba(32, 54, 59, .06);
}

.book-page .site-version,
.book-page .app-version-label,
.book-page .topbar-title-v2 {
  font-size: 12px;
}

.book-page .book-version-link {
  border-bottom: 1px dotted #9bacb0;
  transition: color .15s ease, border-color .15s ease;
}

.book-page .book-version-link:hover,
.book-page .book-version-link:focus-visible {
  border-color: var(--book-green);
  color: var(--book-green-dark);
  outline: none;
}

.book-page .book-topbar-heading {
  position: relative;
  display: block;
  min-width: 0;
  max-width: min(52vw, 430px);
  margin: 0;
  padding: 0 1px 5px;
  color: #102a32;
  font-size: 24px;
  font-weight: 950;
  line-height: 1.02;
  letter-spacing: 0;
  text-rendering: geometricPrecision;
}

.book-page .book-topbar-heading a {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.book-page .book-share-box {
  min-width: 0;
}

.book-page .topbar.has-open-share {
  z-index: 1200;
}

.book-page .book-share-box .share-panel {
  z-index: 1210;
}

.book-page .book-share-box .share-button {
  justify-content: center;
  white-space: nowrap;
}

.book-page .book-share-box .share-button:focus-visible,
.book-page .book-share-box .share-copy-button:focus-visible,
.book-page .book-share-box .share-link:focus-visible {
  border-color: var(--book-green);
  outline: 3px solid rgba(15, 118, 110, .18);
  outline-offset: 1px;
}

.book-page a,
.book-page button,
.book-page summary {
  -webkit-tap-highlight-color: transparent;
}

.book-skip {
  position: fixed;
  z-index: 2000;
  top: 8px;
  left: 8px;
  padding: 9px 13px;
  border-radius: 6px;
  background: #fff;
  color: var(--book-green-dark);
  font-weight: 900;
  transform: translateY(-150%);
}

.book-skip:focus {
  transform: none;
}

.book-progress {
  position: fixed;
  z-index: 1400;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
}

.book-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--book-coral);
}

.book-primary-link,
.book-button.is-primary {
  border-color: var(--book-green);
  background: var(--book-green);
  color: #fff;
}

.book-primary-link:hover,
.book-primary-link:focus-visible,
.book-button.is-primary:hover,
.book-button.is-primary:focus-visible {
  border-color: var(--book-green-dark);
  background: var(--book-green-dark);
  color: #fff;
}

.book-chapter-nav {
  position: sticky;
  z-index: 950;
  top: 0;
  border-top: 1px solid #d7e0df;
  border-bottom: 1px solid #c7d4d2;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 2px 8px rgba(30, 54, 59, .05);
  backdrop-filter: blur(8px);
}

.book-chapter-nav-inner {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  width: min(100% - 32px, 1180px);
  margin: 0 auto;
}

.book-chapter-nav-inner > a,
.book-chapter-dropdown-trigger {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-right: 1px solid #e0e7e6;
  color: #496067;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.book-chapter-nav-inner > a.book-chapter-extra {
  background: #f7faf9;
  color: #365c5d;
}

.book-chapter-dropdown-trigger {
  padding: 0 8px;
  border: 0;
  border-right: 1px solid #e0e7e6;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.book-chapter-dropdown-trigger i {
  width: 7px;
  height: 7px;
  margin: -4px 0 0 1px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .16s ease;
}

.book-chapter-dropdown-trigger[aria-expanded="true"] i {
  margin-top: 3px;
  transform: rotate(225deg);
}

.book-chapter-nav-inner > a:first-child {
  border-left: 1px solid #e0e7e6;
}

.book-chapter-nav-inner > a span,
.book-chapter-dropdown-trigger > span {
  color: #92a4a8;
  font-size: 11px;
}

.book-chapter-nav-inner > a:hover,
.book-chapter-nav-inner > a:focus-visible,
.book-chapter-nav-inner > a.is-current,
.book-chapter-dropdown-trigger:hover,
.book-chapter-dropdown-trigger:focus-visible,
.book-chapter-dropdown-trigger.is-current,
.book-chapter-dropdown-trigger[aria-expanded="true"] {
  background: #edf5f3;
  color: var(--book-green-dark);
  outline: none;
}

.book-chapter-nav-inner > a.is-current,
.book-chapter-dropdown-trigger.is-current {
  box-shadow: inset 0 -3px 0 var(--book-green);
}

.book-parts-dropdown {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  width: min(calc(100% - 24px), 760px);
  max-height: min(620px, calc(100dvh - 64px));
  overflow: auto;
  padding: 13px;
  border: 1px solid #b8cbc7;
  border-top: 3px solid var(--book-green);
  border-radius: 0 0 7px 7px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(26, 53, 58, .2);
  transform: translateX(-50%);
}

.book-parts-dropdown[hidden] {
  display: none;
}

.book-parts-dropdown-head {
  display: grid;
  grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
  gap: 13px;
  align-items: stretch;
  padding: 2px 2px 12px;
  border-bottom: 1px solid #d9e3e1;
}

.book-parts-dropdown-top {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 18px;
  grid-template-rows: auto auto;
  gap: 1px 9px;
  align-items: center;
  min-height: 58px;
  padding: 8px 11px;
  border: 1px solid #8bb2ac;
  border-left: 4px solid var(--book-green);
  border-radius: 5px;
  color: #245d5b;
  background: #edf6f4;
  text-decoration: none;
}

.book-parts-dropdown-top::after {
  grid-column: 3;
  grid-row: 1 / 3;
  color: #53817b;
  font-size: 22px;
  line-height: 1;
  content: '›';
}

.book-parts-dropdown-top > span {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 3px 6px;
  border-right: 1px solid #bfd4d0;
  color: #56817c;
  font-size: 9px;
  line-height: 1.25;
  text-align: center;
  writing-mode: vertical-rl;
}

.book-parts-dropdown-top > strong {
  grid-column: 2;
  color: #1f5552;
  font-size: 15px;
  line-height: 1.35;
}

.book-parts-dropdown-top > small {
  grid-column: 2;
  color: #5c7478;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
}

.book-parts-dropdown-top:hover,
.book-parts-dropdown-top:focus-visible,
.book-parts-dropdown-top.is-current {
  border-color: var(--book-green);
  background: #e1f0ed;
  outline: none;
}

.book-parts-dropdown-label {
  display: grid;
  align-content: center;
  justify-items: start;
  min-width: 0;
  padding: 4px 2px;
}

.book-parts-dropdown-label > span {
  color: #779094;
  font-size: 10px;
  font-weight: 900;
}

.book-parts-dropdown-label > strong {
  margin-top: 2px;
  color: #24454b;
  font-size: 14px;
  line-height: 1.4;
}

.book-parts-dropdown-label > small {
  margin-top: 2px;
  color: #71868a;
  font-size: 10px;
  line-height: 1.4;
}

.book-parts-dropdown-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding-top: 11px;
}

.book-parts-dropdown-links > a {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid #d8e2e0;
  border-radius: 5px;
  color: #405d63;
  background: #fff;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.book-parts-dropdown-links > a:hover,
.book-parts-dropdown-links > a:focus-visible,
.book-parts-dropdown-links > a.is-current {
  border-color: #81aaa4;
  color: var(--book-green-dark);
  background: #edf5f3;
  outline: none;
}

.book-parts-dropdown-links .book-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .book-parts-dropdown {
    top: 100%;
    width: calc(100% - 16px);
    max-height: calc(100dvh - 54px);
    padding: 10px;
  }

  .book-parts-dropdown-head {
    position: sticky;
    z-index: 1;
    top: -10px;
    grid-template-columns: minmax(190px, .9fr) minmax(130px, .65fr);
    padding: 10px 2px;
    background: #fff;
  }

  .book-parts-dropdown-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 390px) {
  .book-parts-dropdown-head {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .book-parts-dropdown-top {
    min-height: 52px;
  }

  .book-parts-dropdown-label {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 8px;
    padding: 2px 4px;
  }

  .book-parts-dropdown-label > span {
    grid-row: 1 / 3;
    align-self: center;
  }

  .book-parts-dropdown-label > strong,
  .book-parts-dropdown-label > small {
    margin-top: 0;
  }
}

#book-main {
  background: #f4f7f6;
}

.book-hero,
.book-toc,
.book-article {
  width: min(100% - 32px, 1180px);
  margin: 0 auto;
}

.book-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .7fr);
  gap: 42px;
  align-items: center;
  min-height: 440px;
  padding: 50px 0 42px;
}

.book-kicker,
.book-subhead > p,
.book-final-check > div:first-child > p {
  margin: 0 0 5px;
  color: var(--book-green);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
}

.book-hero h1 {
  max-width: 760px;
  margin: 0;
  color: #172b30;
  font-size: 42px;
  line-height: 1.24;
  letter-spacing: 0;
}

.book-hero-lead {
  max-width: 760px;
  margin: 18px 0 0;
  color: #4d6369;
  font-size: 17px;
  line-height: 1.85;
}

.book-hero-actions,
.book-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.book-button {
  display: inline-flex;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid #aebfbc;
  border-radius: 7px;
  background: #fff;
  color: #2f4b51;
  font-weight: 900;
  line-height: 1.35;
  text-decoration: none;
}

.book-button:hover,
.book-button:focus-visible {
  border-color: #6e9690;
  background: #f4faf8;
  outline: 3px solid rgba(15, 118, 110, .11);
}

.book-button.is-try {
  border-color: #d48671;
  background: #fff8f5;
  color: #8f4635;
}

.book-button.is-try:hover,
.book-button.is-try:focus-visible {
  border-color: #bd684f;
  background: #fff1eb;
  outline-color: rgba(217, 111, 86, .14);
}

.book-updated {
  margin: 14px 0 0;
  color: #829398;
  font-size: 12px;
}

.book-hero-route {
  padding: 20px 22px 18px;
  border-top: 4px solid var(--book-coral);
  border-bottom: 1px solid #c9d5d3;
  background: #fff;
  box-shadow: 0 5px 18px rgba(30, 52, 58, .07);
}

.book-hero-route > strong {
  color: #243b40;
  font-size: 15px;
}

.book-hero-route ol {
  display: grid;
  gap: 0;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.book-hero-route li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  border-top: 1px solid #e1e8e7;
  color: #40565c;
  font-weight: 800;
}

.book-hero-route li span {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #eaf3f1;
  color: var(--book-green-dark);
  font-size: 12px;
}

.book-toc {
  padding: 28px 0 34px;
  border-top: 1px solid var(--book-line);
  border-bottom: 1px solid var(--book-line);
}

.book-section-title {
  display: block;
  padding-left: 12px;
  border-left: 3px solid var(--book-green);
}

.book-section-title > p {
  margin: 5px 0 0;
  color: #596f75;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: 0;
}

.book-section-title h2 {
  margin: 0;
  color: #1c3338;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.38;
  letter-spacing: 0;
}

.book-section-title h2[id] {
  scroll-margin-top: 68px;
}

.book-anchor-target {
  scroll-margin-top: 92px;
}

#foundation-title {
  scroll-margin-top: 100px;
}

.book-part-index-heading {
  margin-top: 30px;
  margin-bottom: 18px;
}

.book-section-title > .book-section-order {
  width: fit-content;
  margin: 0 0 6px;
  padding: 5px 10px;
  border: 1px solid #b7d3ce;
  border-left: 4px solid var(--book-green);
  border-radius: 3px;
  color: var(--book-green-dark);
  background: #e1efec;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
}

.book-toc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 15px;
}

.book-toc-grid a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 62px;
  border: 1px solid #d2dcda;
  border-radius: 6px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.book-toc-grid a:hover,
.book-toc-grid a:focus-visible {
  border-color: #78a49e;
  outline: 3px solid rgba(15, 118, 110, .09);
}

.book-toc-grid a > span {
  display: grid;
  height: 100%;
  place-items: center;
  border-right: 1px solid #e1e8e7;
  color: var(--book-coral);
  font-size: 12px;
  font-weight: 900;
}

.book-toc-grid strong {
  padding: 8px 11px;
  color: #2c444a;
  font-size: 14px;
}

.book-toc-grid em {
  padding-right: 13px;
  color: #819497;
  font-size: 18px;
  font-style: normal;
}

.book-article {
  padding-bottom: 42px;
}

.book-chapter {
  scroll-margin-top: 58px;
  padding: 58px 0 10px;
}

.book-chapter + .book-chapter {
  margin-top: 40px;
  border-top: 1px solid #c4d1cf;
}

.book-chapter-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.book-chapter-head > span {
  display: grid;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  background: var(--book-green);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

.book-chapter:nth-of-type(2) .book-chapter-head > span,
.book-chapter:nth-of-type(6) .book-chapter-head > span {
  background: var(--book-blue);
}

.book-chapter:nth-of-type(3) .book-chapter-head > span {
  background: var(--book-coral);
}

.book-chapter:nth-of-type(4) .book-chapter-head > span {
  background: #a57613;
}

.book-chapter-head p {
  margin: 0 0 2px;
  color: #6c8085;
  font-size: 14px;
  font-weight: 800;
}

.book-chapter-head h2 {
  margin: 0;
  color: #172e33;
  font-size: 29px;
  line-height: 1.3;
  letter-spacing: 0;
}

.book-chapter-intro {
  max-width: 900px;
  margin: -4px 0 23px 74px;
  color: #53686e;
  font-size: 16px;
  line-height: 1.85;
}

.book-lead-row {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, .65fr);
  gap: 30px;
  align-items: start;
  margin-left: 74px;
}

.book-lead-row h3 {
  margin: 0;
  color: #263f44;
  font-size: 21px;
  line-height: 1.45;
  letter-spacing: 0;
}

.book-lead-row p {
  margin: 9px 0 0;
  color: #556a70;
  font-size: 15px;
  line-height: 1.85;
}

.book-lead-row aside {
  padding: 13px 15px;
  border-left: 4px solid var(--book-yellow);
  background: #fffaf0;
}

.book-lead-row aside strong {
  color: #604c1c;
}

.book-lead-row aside p {
  margin-top: 5px;
  color: #6b624c;
  font-size: 13px;
  line-height: 1.7;
}

.book-pc-map {
  max-width: 1040px;
  margin: 30px auto 0;
  padding: 20px;
  border-top: 1px solid #cad7d5;
  border-bottom: 1px solid #cad7d5;
  background: #fff;
}

.book-pc-map svg {
  display: block;
  width: 100%;
  height: auto;
}

.book-pc-map svg a {
  cursor: pointer;
  text-decoration: underline;
}

.book-pc-map svg a:hover text,
.book-pc-map svg a:focus text {
  fill: var(--book-green);
}

.book-pc-map figcaption,
.book-workbench figcaption {
  margin-top: 8px;
  color: #718388;
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}

.book-role-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  max-width: 1040px;
  margin: 10px auto 0;
  border: 1px solid #d5dfdd;
  background: #fff;
}

.book-role-strip a {
  display: flex;
  min-width: 0;
  min-height: 68px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px;
  border-right: 1px solid #e1e8e7;
  color: #53666b;
  font-size: 11px;
  line-height: 1.35;
  text-decoration: none;
}

.book-role-strip a:last-child {
  border-right: 0;
}

.book-role-strip a:hover,
.book-role-strip a:focus-visible {
  background: #edf6f3;
  outline: none;
}

.book-role-strip a span {
  min-width: 0;
}

.book-role-strip strong {
  display: block;
  color: #263f45;
  font-size: 13px;
}

.book-icon {
  display: block;
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  fill: currentColor;
  color: #316159;
}

.book-prep-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.book-workbench {
  margin: 0;
  padding: 18px;
  border-top: 1px solid #cbd8d6;
  border-bottom: 1px solid #cbd8d6;
  background: #fff;
}

.book-workbench svg {
  display: block;
  width: 100%;
  height: auto;
}

.book-prep-list {
  display: grid;
  gap: 3px;
}

.book-prep-list section {
  padding: 10px 0 13px;
  border-bottom: 1px solid #d5dfdd;
}

.book-prep-list h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #2b4248;
  font-size: 15px;
}

.book-prep-list h3 span {
  display: inline-grid;
  min-width: 58px;
  min-height: 24px;
  place-items: center;
  padding: 3px 7px;
  border-radius: 5px;
  color: #fff;
  font-size: 11px;
}

.book-prep-list .is-needed { background: var(--book-green); }
.book-prep-list .is-helpful { background: var(--book-blue); }
.book-prep-list .is-skip { background: #7f8e91; }

.book-prep-list ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 18px;
  margin: 9px 0 0;
  padding-left: 20px;
  color: #586c72;
  font-size: 13px;
  line-height: 1.55;
}

.book-prep-list li strong {
  color: #304c52;
}

.book-prep-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.book-prep-list-wide ul {
  padding-left: 0;
  list-style: none;
}

.book-prep-list-wide li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  align-items: start;
  padding: 8px 10px;
  border: 1px solid #dce4e2;
  border-radius: 6px;
  background: #fff;
}

.book-prep-item-icon {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 5px;
  border: 1px solid currentColor;
  border-radius: 7px;
  background: #f1f7f5;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.book-prep-list-wide section:nth-child(1) .book-prep-item-icon {
  color: #167166;
  background: #edf7f4;
}

.book-prep-list-wide section:nth-child(2) .book-prep-item-icon {
  color: #356f98;
  background: #eef5fa;
}

.book-prep-list-wide section:nth-child(3) .book-prep-item-icon {
  color: #6f7e81;
  background: #f1f4f4;
}

.book-prep-item-copy {
  min-width: 0;
}

.book-prep-item-copy strong {
  display: inline;
}

.book-check-before {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  margin-top: 24px;
  padding: 18px 20px;
  border-left: 5px solid var(--book-blue);
  background: #fff;
}

.book-check-before h3 {
  margin: 0;
  color: #263f45;
  font-size: 18px;
  line-height: 1.45;
}

.book-check-before ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.book-check-before li {
  display: grid;
  gap: 2px;
}

.book-check-before li strong {
  color: #314c52;
  font-size: 13px;
}

.book-check-before li span {
  color: #677a7f;
  font-size: 12px;
  line-height: 1.55;
}

.book-inline-cta {
  color: var(--book-green-dark);
  font-size: 13px;
  font-weight: 900;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.book-assembly-flow {
  margin-top: 34px;
}

.book-subhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 13px;
  margin-bottom: 15px;
}

.book-subhead h3 {
  margin: 0;
  color: #20383e;
  font-size: 21px;
}

.book-subhead > span {
  color: #75878c;
  font-size: 12px;
}

.book-assembly-flow ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 1px solid #cfdad8;
  background: #cfdad8;
  list-style: none;
}

.book-assembly-flow li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  min-height: 106px;
  padding: 13px;
  background: #fff;
}

.book-assembly-flow li > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #e8f2f0;
  color: var(--book-green-dark);
  font-size: 12px;
  font-weight: 900;
}

.book-assembly-flow strong {
  color: #2d454b;
  font-size: 13px;
}

.book-assembly-flow p {
  margin: 4px 0 0;
  color: #66797e;
  font-size: 12px;
  line-height: 1.55;
}

.book-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.book-choice-grid section {
  padding: 20px 22px;
  border-top: 4px solid var(--book-green);
  background: #fff;
}

.book-choice-grid section.is-bto {
  border-top-color: var(--book-blue);
}

.book-choice-grid h3 {
  margin: 0 0 10px;
  color: #243d43;
  font-size: 19px;
}

.book-choice-grid ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.book-choice-grid li {
  display: grid;
  gap: 3px;
  padding: 12px 0;
  border-top: 1px solid #e0e7e6;
}

.book-choice-grid li strong {
  color: #324c52;
  font-size: 16px;
}

.book-choice-grid li span {
  color: #62767b;
  font-size: 13px;
  line-height: 1.7;
}

.book-beginner-note {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid #d0dcda;
  background: #edf5f3;
}

.book-note-icon {
  width: 48px;
  height: 48px;
  fill: currentColor;
  color: var(--book-green);
}

.book-beginner-note h3 {
  margin: 0;
  color: #274249;
  font-size: 17px;
}

.book-beginner-note p {
  margin: 6px 0 0;
  color: #52686e;
  font-size: 16px;
  line-height: 1.8;
}

.book-trouble-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid #cbd8d6;
  list-style: none;
}

.book-trouble-list li {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 70px;
  gap: 16px;
  align-items: center;
  min-height: 104px;
  padding: 15px 8px;
  border-bottom: 1px solid #cbd8d6;
}

.book-trouble-list li > span {
  color: var(--book-coral);
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}

.book-trouble-list h3 {
  margin: 0;
  color: #263f45;
  font-size: 16px;
  line-height: 1.45;
}

.book-trouble-list p {
  margin: 5px 0 0;
  color: #5c7076;
  font-size: 13px;
  line-height: 1.7;
}

.book-trouble-list b {
  display: grid;
  min-height: 30px;
  place-items: center;
  border-radius: 5px;
  background: #fff2dc;
  color: #795719;
  font-size: 11px;
}

.book-check-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 18px;
  padding: 18px 20px;
  background: #243f45;
  color: #fff;
}

.book-check-cta strong {
  font-size: 16px;
}

.book-check-cta p {
  max-width: 770px;
  margin: 5px 0 0;
  color: #d5e1e0;
  font-size: 13px;
  line-height: 1.65;
}

.book-check-cta .book-button {
  flex: 0 0 auto;
}

.book-parts-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 20px 74px;
}

.book-parts-jump > a,
.book-parts-jump > .is-current {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-height: 48px;
  align-items: center;
  column-gap: 7px;
  padding: 7px 10px;
  border: 1px solid #ccd8d6;
  border-radius: 6px;
  background: #fff;
  color: #38545a;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.book-parts-jump > a:hover,
.book-parts-jump > a:focus-visible,
.book-parts-jump > .is-current {
  border-color: #75a39c;
  background: #edf6f3;
  outline: none;
}

.book-parts-jump .book-icon {
  grid-row: 1 / 3;
  width: 21px;
  height: 21px;
}

.book-parts-jump > a > span,
.book-parts-jump > .is-current > b {
  align-self: end;
  line-height: 1.35;
}

.book-parts-jump small {
  align-self: start;
  color: #7a8d91;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.3;
}

.book-parts-guide {
  border-top: 1px solid #c7d4d2;
}

.book-part-guide {
  scroll-margin-top: 62px;
  display: grid;
  grid-template-columns: minmax(240px, .62fr) minmax(0, 1.5fr);
  gap: 24px 36px;
  padding: 27px 0;
  border-bottom: 1px solid #c7d4d2;
  content-visibility: auto;
  contain-intrinsic-size: auto 430px;
}

.book-part-guide > header {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: flex-start;
  gap: 13px;
}

.book-part-guide > header > span {
  display: grid;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid #cddbd8;
  border-radius: 7px;
  background: #edf5f3;
}

.book-part-guide > header .book-icon {
  width: 34px;
  height: 34px;
}

.book-part-guide > header small {
  color: var(--book-green);
  font-size: 14px;
  font-weight: 900;
}

.book-part-guide > header h3 {
  margin: 1px 0 0;
  color: #1f383d;
  font-size: 20px;
  line-height: 1.35;
}

.book-part-guide > header p {
  margin: 4px 0 0;
  color: #6b7e83;
  font-size: 12px;
  line-height: 1.5;
}

.book-part-guide-visual {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 5px;
}

.book-part-guide-photo {
  grid-column: 1 / -1;
  margin: 7px 0 0;
  overflow: hidden;
  border: 1px solid #ccd8d6;
  background: #eef2f1;
}

.book-part-guide-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.book-part-guide-photo.is-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.book-part-guide-photo.is-pair img {
  aspect-ratio: 1 / 1;
}

.book-part-guide-photo figcaption {
  grid-column: 1 / -1;
  padding: 9px 11px;
  border-top: 1px solid #d4dfdd;
  background: #f7f9f8;
  color: #5f7378;
  font-size: 11px;
  line-height: 1.65;
}

.book-part-guide-photo figcaption strong {
  color: #2e5757;
}

.book-part-guide-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
}

.book-part-guide-body > div h4 {
  margin: 0;
  color: #314e54;
  font-size: 13px;
}

.book-part-guide-body > div h4::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--book-coral);
}

.book-part-guide-body > div:nth-child(2) h4::before {
  background: var(--book-blue);
}

.book-part-guide-body p {
  margin: 5px 0 0;
  color: #586d72;
  font-size: 13px;
  line-height: 1.72;
}

.book-part-deep-dive {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  border-top: 1px solid #cbd7d5;
  border-bottom: 1px solid #cbd7d5;
}

.book-part-deep-dive > section {
  min-width: 0;
  padding: 18px 21px;
}

.book-part-deep-dive > section + section {
  border-left: 1px solid #d3dddb;
}

.book-part-deep-dive header span {
  color: var(--book-coral);
  font-size: 13px;
  font-weight: 900;
}

.book-part-deep-dive header h4 {
  margin: 3px 0 0;
  color: #29464c;
  font-size: 16px;
  line-height: 1.45;
}

.book-part-deep-dive ol,
.book-part-deep-dive ul {
  display: grid;
  gap: 0;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}

.book-part-deep-dive li {
  display: grid;
  grid-template-columns: minmax(112px, .32fr) minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #d8e1df;
}

.book-part-deep-dive li strong {
  color: #315157;
  font-size: 12px;
  line-height: 1.55;
}

.book-part-deep-dive li p {
  margin: 0;
  color: #5b7075;
  font-size: 12px;
  line-height: 1.72;
}

.book-part-knowledge {
  grid-column: 1 / -1;
  margin-top: -9px;
  padding: 0;
  border-top: 3px solid #5a7f9f !important;
  border-bottom: 1px solid #c9d6dd;
  background: #f3f7fa;
}

.book-part-knowledge summary {
  display: grid;
  gap: 3px;
  width: auto;
  padding: 12px 42px 12px 15px;
  color: #294853;
  font-size: 13px;
  line-height: 1.5;
}

.book-part-knowledge summary span {
  color: #52738d;
  font-size: 10px;
}

.book-part-knowledge > div {
  padding: 0 15px 14px;
  border-top: 1px solid #d3dee4;
}

.book-part-knowledge > div p {
  margin: 11px 0 0;
  padding: 0;
  background: transparent;
  color: #465f69;
  font-size: 12px;
  line-height: 1.78;
}

.book-part-guide details {
  grid-column: 1 / -1;
  border-top: 1px dashed #c8d5d3;
  padding-top: 10px;
}

.book-part-guide summary {
  width: fit-content;
  color: var(--book-green-dark);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.book-part-guide details p {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: #eef4f3;
}

.book-part-guide > footer {
  grid-column: 2;
  display: flex;
  gap: 14px;
  margin-top: -12px;
}

.book-part-guide > footer a {
  color: var(--book-green-dark);
  font-size: 12px;
  font-weight: 900;
  text-underline-offset: 3px;
}

.book-purpose-list {
  display: grid;
  gap: 12px;
  margin-top: 25px;
}

.book-narrator {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin: 7px 0 10px;
  color: #536a70;
  font-size: 12px;
  line-height: 1;
}

.book-narrator span {
  padding-right: 7px;
  border-right: 1px solid #bccbc8;
  color: #7b8d91;
  font-size: 10px;
  font-weight: 800;
}

.book-narrator strong {
  color: #36535a;
  font-size: 13px;
}

.book-purpose-price-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 10px;
  margin: 20px 0 -10px;
  padding: 10px 12px;
  border-left: 3px solid #8eb9af;
  background: #f1f6f4;
  color: #52676c;
  font-size: 12px;
  line-height: 1.65;
}

.book-purpose-price-note strong {
  color: #274d50;
  font-size: 13px;
}

.book-purpose-price-note time {
  margin-left: auto;
  color: #7a8b8f;
  white-space: nowrap;
}

.book-purpose-list > article {
  padding: 20px 22px;
  border: 1px solid #cedad8;
  border-left: 5px solid var(--book-green);
  border-radius: 7px;
  background: #fff;
}

.book-purpose-list > article:nth-child(2n) {
  border-left-color: var(--book-blue);
}

.book-purpose-list > article:nth-child(4) {
  border-left-color: var(--book-coral);
}

.book-purpose-list > article > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.book-purpose-list header p {
  margin: 0;
  color: var(--book-green);
  font-size: 14px;
  font-weight: 900;
}

.book-purpose-list header h3 {
  margin: 2px 0 0;
  color: #203a40;
  font-size: 21px;
}

.book-purpose-meta > span {
  padding: 4px 8px;
  border-radius: 5px;
  background: #edf3f2;
  color: #60757a;
  font-size: 11px;
  font-weight: 800;
}

.book-purpose-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.book-purpose-meta > strong {
  min-height: 20px;
  color: #17665d;
  font-size: 15px;
  line-height: 1.3;
  white-space: nowrap;
}

.book-purpose-body {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(430px, 1.2fr);
  gap: 28px;
  align-items: center;
  margin-top: 13px;
}

.book-purpose-copy p {
  margin: 0;
  color: #5d7176;
  font-size: 13px;
  line-height: 1.7;
}

.book-purpose-copy strong {
  display: block;
  margin-top: 10px;
  color: #344e54;
  font-size: 12px;
}

.book-purpose-copy strong + p {
  margin-top: 3px;
  font-size: 12px;
}

.book-purpose-spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin: 0;
}

.book-purpose-spec > div {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.book-purpose-spec dt {
  color: #60747a;
  font-size: 11px;
  font-weight: 900;
}

.book-purpose-spec dd {
  position: relative;
  height: 28px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #d9e2e0;
  border-radius: 5px;
  background: #f3f6f5;
}

.book-purpose-spec dd span {
  position: absolute;
  inset: 0 auto 0 0;
  width: max(4px, var(--book-meter));
  background: #d5e9e4;
}

.book-purpose-spec > div:nth-child(2) dd span {
  background: #dbe7f2;
}

.book-purpose-spec > div:nth-child(3) dd span {
  background: #f2dfda;
}

.book-purpose-spec > div:nth-child(4) dd span {
  background: #f4e8c8;
}

.book-purpose-spec dd b {
  position: relative;
  z-index: 1;
  display: flex;
  height: 100%;
  align-items: center;
  padding: 0 7px;
  color: #385157;
  font-size: 11px;
}

.book-purpose-list > article > footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 15px;
}

.book-purpose-list .book-button {
  min-height: 38px;
  padding: 7px 12px;
  font-size: 12px;
}

.book-text-link {
  color: var(--book-green-dark);
  font-size: 12px;
  font-weight: 900;
  text-underline-offset: 3px;
}

.book-final-check {
  margin-top: 60px;
  padding: 26px 28px;
  border-top: 5px solid var(--book-coral);
  background: #fff;
  box-shadow: 0 4px 16px rgba(30, 52, 58, .06);
}

.book-final-check > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 13px;
}

.book-final-check h2 {
  margin: 0;
  color: #20383e;
  font-size: 23px;
}

.book-final-check > div:first-child > span {
  color: #6b7f84;
  font-size: 13px;
}

.book-final-check ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 18px 0 0;
  padding: 1px;
  background: #d8e1df;
  list-style: none;
}

.book-final-check li {
  position: relative;
  min-height: 48px;
  padding: 14px 10px 12px 34px;
  background: #f8faf9;
  color: #40585e;
  font-size: 12px;
  font-weight: 800;
}

.book-final-check li::before {
  content: '✓';
  position: absolute;
  left: 12px;
  color: var(--book-green);
  font-weight: 900;
}

.book-editorial-note {
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 3px solid #93a7a3;
  color: #687b80;
  font-size: 12px;
  line-height: 1.7;
}

.book-editorial-note strong {
  color: #475e64;
}

.book-editorial-note p {
  margin: 4px 0 0;
}

.book-site-footer {
  margin-top: 0;
}

.book-version-shell {
  padding-top: 18px;
}

.book-version-page .version-head {
  border-radius: 7px;
}

.book-version-intro {
  max-width: 760px;
  margin: 10px 0 0;
  color: #566c72;
  font-size: 13px;
  line-height: 1.8;
}

.book-context-actions {
  width: min(100% - 32px, 1180px);
  margin: 46px auto 0;
  padding: 22px 24px 24px;
  border: 1px solid #cfdcda;
  border-top: 4px solid var(--book-green);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(30, 52, 58, .05);
}

.book-context-actions-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  margin-bottom: 15px;
}

.book-context-actions-head p {
  margin: 0;
  color: var(--book-green-dark);
  font-size: 11px;
  font-weight: 900;
}

.book-context-actions-head h2 {
  margin: 0;
  color: #263f45;
  font-size: 19px;
  line-height: 1.45;
}

.book-context-actions-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.book-context-actions-list > a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-width: 0;
  min-height: 112px;
  padding: 14px 14px 14px 13px;
  border: 1px solid #d5e1df;
  border-radius: 6px;
  background: #f7faf9;
  color: inherit;
  text-decoration: none;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.book-context-actions-list > a:hover,
.book-context-actions-list > a:focus-visible {
  border-color: #79aaa4;
  background: #eef7f5;
  outline: none;
  transform: translateY(-1px);
}

.book-context-actions-list > a:focus-visible {
  box-shadow: 0 0 0 3px rgba(61, 139, 130, .2);
}

.book-context-actions-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #e2f1ee;
  color: var(--book-green-dark);
}

.book-context-actions-icon .book-icon {
  width: 25px;
  height: 25px;
}

.book-context-actions-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.book-context-actions-copy small {
  color: var(--book-green-dark);
  font-size: 10px;
  font-weight: 900;
}

.book-context-actions-copy strong {
  color: #263f45;
  font-size: 14px;
  line-height: 1.45;
}

.book-context-actions-copy > span {
  color: #60757a;
  font-size: 11px;
  line-height: 1.65;
}

.book-context-actions-list > a > b {
  color: var(--book-green-dark);
  font-size: 18px;
}

.book-context-actions + .book-feedback-invite {
  margin-top: 18px;
}

.book-feedback-invite {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 18px 24px;
  align-items: center;
  width: min(100% - 32px, 1180px);
  margin: 46px auto 34px;
  padding: 22px 24px;
  border: 1px solid #cbd9d6;
  border-left: 4px solid var(--book-green);
  border-radius: 6px;
  background: #f7faf9;
}

.book-feedback-invite-illustration {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 1px solid #c4d9d5;
  border-radius: 50%;
  background: #e8f3f0;
}

.book-feedback-invite-illustration svg {
  display: block;
  width: 68px;
  height: 68px;
  overflow: visible;
}

.book-feedback-bubble,
.book-feedback-face,
.book-feedback-body {
  fill: #fff;
  stroke: #39736d;
  stroke-width: 2.3;
  stroke-linejoin: round;
}

.book-feedback-hair {
  fill: #4b6b6b;
  stroke: #365e5b;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.book-feedback-heart {
  fill: #e98064;
}

.book-feedback-eye,
.book-feedback-smile,
.book-feedback-hands {
  fill: none;
  stroke: #365e5b;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.book-feedback-invite-copy {
  min-width: 0;
}

.book-feedback-invite-label {
  margin: 0 0 3px;
  color: var(--book-green-dark);
  font-size: 11px;
  font-weight: 900;
}

.book-feedback-invite h2 {
  margin: 0;
  color: #263f45;
  font-size: 18px;
  line-height: 1.45;
}

.book-feedback-invite p:last-child {
  max-width: 850px;
  margin: 7px 0 0;
  color: #5b7075;
  font-size: 13px;
  line-height: 1.8;
}

.book-feedback-invite p:last-child a {
  color: var(--book-green-dark);
  font-weight: 900;
}

.book-feedback-invite-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 10px 17px;
  border: 1px solid var(--book-green);
  border-radius: 5px;
  background: var(--book-green-dark);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.book-feedback-invite-button:hover,
.book-feedback-invite-button:focus-visible {
  background: #0d5b55;
  outline: 2px solid #9cc9c3;
  outline-offset: 2px;
}

.book-changelog-preview {
  width: min(100% - 32px, 1180px);
  margin: -16px auto 34px;
  padding: 18px 22px;
  border: 1px solid #cfdcdf;
  border-radius: 6px;
  background: #fff;
}

.book-changelog-preview-head {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 11px;
  border-bottom: 1px solid #e2eaec;
}

.book-changelog-preview-label {
  margin: 0 0 2px;
  color: #60777c;
  font-size: 11px;
  font-weight: 800;
}

.book-changelog-preview h2 {
  margin: 0;
  color: #263f45;
  font-size: 17px;
  line-height: 1.4;
}

.book-changelog-preview-link {
  flex: 0 0 auto;
  color: var(--book-green-dark);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.book-changelog-preview-link::after {
  content: '›';
  margin-left: 5px;
  font-size: 16px;
}

.book-changelog-preview-link:hover,
.book-changelog-preview-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.book-changelog-preview-content {
  min-height: 78px;
  padding-top: 12px;
  color: #5b7075;
  font-size: 13px;
  line-height: 1.75;
}

.book-changelog-preview-content.is-loading {
  display: flex;
  gap: 9px;
  align-items: center;
}

.book-changelog-preview-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #d4e3e1;
  border-top-color: var(--book-green);
  border-radius: 50%;
  animation: book-changelog-spin 0.8s linear infinite;
}

@keyframes book-changelog-spin {
  to { transform: rotate(360deg); }
}

.book-changelog-preview-entry p,
.book-changelog-preview-entry h3 {
  margin: 0;
}

.book-changelog-preview-meta {
  color: #73868b;
  font-size: 11px;
  font-weight: 800;
}

.book-changelog-preview-entry h3 {
  margin-top: 2px;
  color: #2c484e;
  font-size: 14px;
  line-height: 1.5;
}

.book-changelog-preview-entry h3 + p {
  margin-top: 3px;
}

@media (max-width: 980px) {
  .book-page .book-topbar-heading {
    max-width: min(44vw, 350px);
  }

  .book-hero {
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    gap: 28px;
  }

  .book-hero h2 {
    font-size: 34px;
  }

  .book-assembly-flow ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-check-before {
    grid-template-columns: 170px minmax(0, 1fr);
  }

  .book-check-before .book-inline-cta {
    grid-column: 2;
  }

  .book-purpose-body {
    grid-template-columns: minmax(0, .8fr) minmax(380px, 1.2fr);
    gap: 20px;
  }

  .book-final-check ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .book-page .topbar {
    position: relative;
  }

  .book-page .book-topbar-heading {
    max-width: 100%;
  }

  .book-chapter-nav-inner {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .book-chapter-nav-inner::-webkit-scrollbar {
    display: none;
  }

  .book-chapter-nav-inner > a,
  .book-chapter-dropdown-trigger {
    flex: 0 0 auto;
    min-width: 104px;
    padding: 0 10px;
  }

  .book-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 34px 0 28px;
  }

  .book-hero-route {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
  }

  .book-hero-route ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
  }

  .book-hero-route li {
    min-height: 43px;
    border: 0;
  }

  .book-toc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-lead-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .book-role-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .book-role-strip a:nth-child(3) {
    border-right: 0;
  }

  .book-role-strip a:nth-child(-n + 3) {
    border-bottom: 1px solid #e1e8e7;
  }

  .book-prep-layout {
    grid-template-columns: minmax(300px, .9fr) minmax(0, 1fr);
    gap: 18px;
  }

  .book-prep-list ul {
    grid-template-columns: 1fr;
  }

  .book-choice-grid {
    gap: 14px;
  }

  .book-part-guide {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 20px;
  }

  .book-part-guide-body {
    grid-template-columns: 1fr;
  }

  .book-part-deep-dive {
    grid-template-columns: 1fr;
  }

  .book-part-deep-dive > section + section {
    border-top: 1px solid #d3dddb;
    border-left: 0;
  }

  .book-purpose-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .book-page {
    font-size: 14px;
  }

  .book-page .topbar {
    gap: 7px;
  }

  .book-page .topbar-title-sub-in {
    display: inline;
  }

  .book-page .topbar-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
  }

  .book-page .topbar-actions .feedback-button {
    min-width: 0;
    padding: 5px 4px;
    font-size: 11px;
    text-align: center;
  }

  .book-page .book-share-box {
    align-self: stretch;
  }

  .book-page .book-share-box .share-button {
    width: 100%;
    min-height: 36px;
    gap: 4px;
    padding: 5px 2px;
    font-size: 10.5px;
  }

  .book-page .book-share-box .share-button::before {
    width: 13px;
    height: 13px;
    background:
      radial-gradient(circle at 10px 2px, currentColor 0 1.8px, transparent 2.2px),
      radial-gradient(circle at 2px 7px, currentColor 0 1.8px, transparent 2.2px),
      radial-gradient(circle at 10px 11px, currentColor 0 1.8px, transparent 2.2px),
      linear-gradient(26deg, transparent 0 42%, currentColor 43% 56%, transparent 57%),
      linear-gradient(-25deg, transparent 0 42%, currentColor 43% 56%, transparent 57%);
  }

  .book-page .book-share-box .share-panel {
    width: min(390px, calc(100vw - 42px));
  }

  .book-hero,
  .book-toc,
  .book-article {
    width: min(100% - 20px, 1180px);
  }

  .book-hero {
    gap: 20px;
    padding-top: 26px;
  }

  .book-hero h2 {
    font-size: 29px;
    line-height: 1.3;
  }

  .book-hero-lead {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.75;
  }

  .book-hero-route {
    display: block;
    padding: 15px;
  }

  .book-hero-route ol {
    margin-top: 9px;
  }

  .book-hero-route li {
    font-size: 12px;
  }

  .book-toc {
    padding: 24px 0;
  }

  .book-section-title {
    display: block;
  }

  .book-section-title h2 {
    font-size: 23px;
    line-height: 1.42;
  }

  .book-section-title > p {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.65;
  }

  .book-toc-grid {
    grid-template-columns: 1fr;
  }

  .book-toc-grid a {
    min-height: 52px;
  }

  .book-chapter {
    padding-top: 40px;
  }

  .book-chapter + .book-chapter {
    margin-top: 27px;
  }

  .book-chapter-head {
    gap: 10px;
    margin-bottom: 16px;
  }

  .book-chapter-head > span {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    font-size: 14px;
  }

  .book-chapter-head h2 {
    font-size: 23px;
  }

  .book-chapter-intro,
  .book-lead-row,
  .book-parts-jump {
    margin-left: 0;
  }

  .book-chapter-intro {
    font-size: 14px;
    line-height: 1.75;
  }

  .book-lead-row h3 {
    font-size: 18px;
  }

  .book-pc-map {
    margin-top: 20px;
    padding: 6px;
    overflow-x: auto;
  }

  .book-pc-map svg {
    min-width: 620px;
  }

  .book-pc-map figcaption {
    padding: 0 6px;
  }

  .book-role-strip a {
    min-height: 57px;
    padding: 6px;
  }

  .book-role-strip .book-icon {
    width: 22px;
    height: 22px;
  }

  .book-prep-layout {
    grid-template-columns: 1fr;
  }

  .book-workbench {
    padding: 8px;
  }

  .book-prep-list ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 14px;
  }

  .book-check-before {
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 15px;
  }

  .book-check-before ol {
    grid-template-columns: 1fr;
  }

  .book-check-before .book-inline-cta {
    grid-column: auto;
  }

  .book-assembly-flow ol,
  .book-choice-grid {
    grid-template-columns: 1fr;
  }

  .book-assembly-flow li {
    min-height: 0;
  }

  .book-choice-grid section {
    padding: 16px;
  }

  .book-beginner-note {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
  }

  .book-note-icon {
    width: 38px;
    height: 38px;
  }

  .book-trouble-list li {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    padding: 14px 2px;
  }

  .book-trouble-list b {
    grid-column: 2;
    width: fit-content;
    min-width: 55px;
    min-height: 25px;
    padding: 2px 7px;
  }

  .book-check-cta {
    display: grid;
    padding: 16px;
  }

  .book-check-cta .book-button {
    width: 100%;
  }

  .book-parts-jump {
    gap: 5px;
  }

  .book-parts-jump > a,
  .book-parts-jump > .is-current {
    flex: 1 1 calc(33.333% - 5px);
    min-width: 95px;
    padding: 5px 7px;
  }

  .book-part-guide {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 22px 0;
  }

  .book-part-guide-body {
    gap: 13px;
  }

  .book-part-guide > footer {
    grid-column: auto;
    flex-wrap: wrap;
    margin-top: -4px;
  }

  .book-part-deep-dive li {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .book-part-guide-photo.is-pair {
    grid-template-columns: 1fr;
  }

  .book-part-guide-photo.is-pair img {
    aspect-ratio: 3 / 2;
  }

  .book-purpose-list > article {
    padding: 16px;
  }

  .book-purpose-list header h3 {
    font-size: 18px;
  }

  .book-purpose-spec {
    grid-template-columns: 1fr;
  }

  .book-purpose-spec > div {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .book-purpose-list .book-button {
    width: 100%;
  }

  .book-final-check {
    margin-top: 38px;
    padding: 20px 15px;
  }

  .book-final-check h2 {
    font-size: 20px;
  }

  .book-final-check ul {
    grid-template-columns: 1fr;
  }

  .book-final-actions .book-button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .book-page .topbar-title-sub-in {
    font-size: 11px;
  }

  .book-chapter-nav-inner > a,
  .book-chapter-dropdown-trigger {
    min-width: 92px;
  }

  .book-hero h2 {
    font-size: 27px;
  }

  .book-hero-route ol {
    grid-template-columns: 1fr;
  }

  .book-prep-list ul {
    grid-template-columns: 1fr;
  }

  .book-prep-list-wide li {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .book-prep-item-icon {
    width: 28px;
    height: 28px;
    padding: 4px;
  }

  .book-role-strip a {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .book-parts-jump > a,
  .book-parts-jump > .is-current {
    flex-basis: calc(50% - 5px);
  }
}

@media (max-width: 680px) {
  .book-context-actions {
    margin-top: 34px;
    padding: 18px 15px;
  }

  .book-context-actions-head {
    display: block;
  }

  .book-context-actions-head h2 {
    margin-top: 3px;
    font-size: 17px;
  }

  .book-context-actions-list {
    grid-template-columns: 1fr;
  }

  .book-context-actions-list > a {
    min-height: 0;
    padding: 13px 11px;
  }

  .book-feedback-invite {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    margin-top: 34px;
    padding: 18px;
  }

  .book-feedback-invite-illustration {
    width: 58px;
    height: 58px;
  }

  .book-feedback-invite-illustration svg {
    width: 52px;
    height: 52px;
  }

  .book-feedback-invite-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .book-changelog-preview {
    margin-top: -16px;
    padding: 16px;
  }

  .book-changelog-preview-head {
    gap: 12px;
  }

  .book-changelog-preview-content {
    min-height: 92px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .book-changelog-preview-spinner {
    animation: none;
  }
}

/* Assembly guide */
.book-build-overview {
  align-items: center;
}

.book-assembly-flow.book-build-sequence {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.book-assembly-flow.book-build-sequence > li {
  min-height: 142px;
}

.book-assembly-flow.book-build-sequence > li:nth-child(4)::after {
  top: 50%;
  right: -11px;
  bottom: auto;
  left: auto;
  transform: translateY(-50%) rotate(45deg);
}

.book-assembly-flow.book-build-sequence > li:nth-child(5) {
  grid-column: 5;
  grid-row: 1;
}

.book-assembly-flow.book-build-sequence > li:nth-child(5)::after {
  top: auto;
  right: 50%;
  bottom: -11px;
  left: auto;
  transform: translateX(50%) rotate(135deg);
}

.book-assembly-flow.book-build-sequence > li:nth-child(6) { grid-column: 5; grid-row: 2; }
.book-assembly-flow.book-build-sequence > li:nth-child(7) { grid-column: 4; grid-row: 2; }
.book-assembly-flow.book-build-sequence > li:nth-child(8) { grid-column: 3; grid-row: 2; }
.book-assembly-flow.book-build-sequence > li:nth-child(9) { grid-column: 2; grid-row: 2; }
.book-assembly-flow.book-build-sequence > li:nth-child(10) { grid-column: 1; grid-row: 2; }

.book-assembly-flow.book-build-sequence > li:nth-child(n+6):not(:last-child)::after {
  top: 50%;
  right: auto;
  bottom: auto;
  left: -11px;
  transform: translateY(-50%) rotate(225deg);
}

.book-assembly-stage-list {
  display: grid;
  gap: 1px;
  margin-top: 24px;
  padding: 1px;
  background: #cbd8d6;
}

.book-assembly-stage {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 25px;
  background: #fff;
  content-visibility: auto;
  contain-intrinsic-size: auto 390px;
}

.book-assembly-stage > figure {
  position: sticky;
  top: 72px;
  margin: 0;
}

.book-assembly-stage header {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid #d3dfdd;
}

.book-assembly-stage header > span {
  flex: 0 0 auto;
  color: var(--book-green);
  font-size: 13px;
  font-weight: 900;
}

.book-assembly-stage h3 {
  margin: 0;
  color: #243f45;
  font-size: 20px;
  line-height: 1.45;
}

.book-assembly-stage ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}

.book-assembly-stage li {
  padding: 0 15px;
  border-left: 1px solid #d7e1df;
}

.book-assembly-stage li:first-child {
  padding-left: 0;
  border-left: 0;
}

.book-assembly-stage li:last-child {
  padding-right: 0;
}

.book-assembly-stage li strong {
  color: #315157;
  font-size: 13px;
}

.book-assembly-stage li p {
  margin: 6px 0 0;
  color: #5b7075;
  font-size: 12px;
  line-height: 1.72;
}

.book-assembly-confirm {
  margin: 17px 0 0;
  padding: 10px 12px;
  border-left: 3px solid #5f9d91;
  background: #edf5f3;
  color: #4e686d;
  font-size: 12px;
  line-height: 1.7;
}

.book-assembly-confirm b {
  margin-right: 8px;
  color: #1f625b;
}

.book-case-install-layout {
  grid-template-columns: minmax(440px, 1.05fr) minmax(360px, .95fr);
  align-items: center;
}

.book-install-checklist {
  display: grid;
  gap: 0;
  border-top: 1px solid #cfdbd9;
}

.book-install-checklist section {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 11px;
  padding: 12px 0;
  border-bottom: 1px solid #cfdbd9;
}

.book-install-checklist section > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #e3f0ed;
  color: var(--book-green-dark);
  font-size: 10px;
  font-weight: 900;
}

.book-install-checklist h3 {
  margin: 0;
  color: #304d53;
  font-size: 14px;
}

.book-install-checklist p {
  margin: 4px 0 0;
  color: #5b7075;
  font-size: 12px;
  line-height: 1.68;
}

.book-cable-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 22px;
  padding: 1px;
  background: #cad7d5;
}

.book-cable-grid article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-content: start;
  padding: 17px;
  background: #fff;
}

.book-cable-shape {
  display: grid;
  width: 46px;
  height: 34px;
  place-items: center;
  border: 2px solid #6f8589;
  border-radius: 4px;
  background: #eef3f2;
  box-shadow: inset 0 0 0 3px #fff;
  color: #36545a;
  font-size: 10px;
  font-weight: 900;
}

.book-cable-shape.is-atx { height: 52px; }
.book-cable-shape.is-panel { width: 38px; border-style: dashed; }
.book-cable-shape.is-usb { border-radius: 1px 7px 7px 1px; }
.book-cable-shape.is-audio { clip-path: polygon(0 0, 82% 0, 100% 22%, 100% 100%, 0 100%); }
.book-cable-shape.is-sata { height: 26px; border-radius: 2px 2px 8px 2px; }
.book-cable-shape.is-rgb { border-color: #4e8f84; background: #e6f2ef; }

.book-cable-grid h3 {
  margin: 0;
  color: #2e4a50;
  font-size: 14px;
}

.book-cable-grid p {
  margin: 5px 0 0;
  color: #5d7176;
  font-size: 12px;
  line-height: 1.68;
}

.book-assembly-finish-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 22px;
  padding: 1px;
  background: #cad7d5;
}

.book-assembly-finish-grid > article {
  padding: 18px;
  background: #fff;
}

.book-assembly-finish-grid figure {
  margin: 0 0 15px;
}

.book-assembly-finish-grid article > div > span {
  color: var(--book-green);
  font-size: 10px;
  font-weight: 900;
}

.book-assembly-finish-grid h3 {
  margin: 3px 0 0;
  color: #2d494f;
  font-size: 16px;
  line-height: 1.5;
}

.book-assembly-finish-grid ol {
  display: grid;
  gap: 7px;
  margin: 13px 0 0;
  padding-left: 20px;
  color: #5a6f74;
  font-size: 12px;
  line-height: 1.68;
}

.book-finished-pc-layout {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #d1dcda;
}

.book-prepower-check {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 22px;
  padding: 1px;
  background: #cad7d5;
}

.book-prepower-check section {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  background: #fff;
}

.book-prepower-check span {
  display: grid;
  height: 30px;
  place-items: center;
  border: 1px solid #a8c1bc;
  border-radius: 5px;
  color: var(--book-green-dark);
  font-size: 10px;
  font-weight: 900;
}

.book-prepower-check p {
  margin: 0;
  color: #5a6f74;
  font-size: 12px;
  line-height: 1.68;
}

.book-prepower-check strong {
  display: block;
  margin-bottom: 3px;
  color: #2c494f;
  font-size: 13px;
}

@media (max-width: 1180px) {
  .book-assembly-flow.book-build-sequence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-assembly-flow.book-build-sequence > li:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }

  .book-assembly-flow.book-build-sequence > li:nth-child(n):not(:last-child)::after {
    display: none;
  }

  .book-cable-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .book-assembly-stage {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 20px;
    padding: 20px;
  }

  .book-assembly-stage ol {
    grid-template-columns: 1fr;
  }

  .book-assembly-stage li,
  .book-assembly-stage li:first-child,
  .book-assembly-stage li:last-child {
    padding: 10px 0;
    border-top: 1px solid #d7e1df;
    border-left: 0;
  }

  .book-case-install-layout {
    grid-template-columns: 1fr;
  }

  .book-assembly-finish-grid {
    grid-template-columns: 1fr;
  }

  .book-assembly-finish-grid > article {
    display: grid;
    grid-template-columns: minmax(180px, .42fr) minmax(0, 1fr);
    gap: 20px;
  }
}

@media (max-width: 620px) {
  .book-assembly-flow.book-build-sequence,
  .book-cable-grid,
  .book-prepower-check {
    grid-template-columns: 1fr;
  }

  .book-assembly-stage {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .book-assembly-stage > figure {
    position: static;
    width: min(100%, 320px);
  }

  .book-assembly-stage header {
    display: grid;
    gap: 3px;
  }

  .book-assembly-stage h3 {
    font-size: 18px;
  }

  .book-assembly-finish-grid > article {
    grid-template-columns: 1fr;
  }

  .book-assembly-finish-grid figure {
    width: min(100%, 320px);
  }
}

/* GPU guide: target, chip maker, board partner and model-name structure. */
.book-gpu-target-guide,
.book-gpu-maker-guide,
.book-gpu-board-guide,
.book-gpu-family-guide,
.book-gpu-game-guide,
.book-gpu-ai-guide,
.book-gpu-cad-guide {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding-top: 18px;
  border-top: 1px solid #cbd8d6;
}

.book-gpu-target-guide > .book-part-flow-heading.is-inside,
.book-gpu-maker-guide > .book-part-flow-heading.is-inside,
.book-gpu-board-guide > .book-part-flow-heading.is-inside,
.book-gpu-family-guide > .book-part-flow-heading.is-inside,
.book-gpu-game-guide > .book-part-flow-heading.is-inside,
.book-gpu-ai-guide > .book-part-flow-heading.is-inside,
.book-gpu-cad-guide > .book-part-flow-heading.is-inside {
  margin: 0;
  padding: 0;
  border-top: 0;
}

.book-gpu-target-layout {
  display: grid;
  grid-template-columns: minmax(280px, .86fr) minmax(0, 1.5fr);
  gap: 0;
  min-width: 0;
  border: 1px solid #c9d6d4;
  background: #fff;
}

.book-gpu-target-layout > figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  margin: 0;
  border-right: 1px solid #c9d6d4;
  background: #eef3f2;
}

.book-gpu-target-layout > figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  object-position: 54% 50%;
}

.book-gpu-target-layout > figure figcaption {
  padding: 10px 12px;
  border-top: 1px solid #d5dfdd;
  color: #52696d;
  background: #f8faf9;
  font-size: 11px;
  line-height: 1.65;
}

.book-gpu-target-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.book-gpu-target-steps > li {
  min-width: 0;
  padding: 15px 16px;
  border-right: 1px solid #e0e7e5;
  border-bottom: 1px solid #e0e7e5;
}

.book-gpu-target-steps > li:nth-child(2n) { border-right: 0; }
.book-gpu-target-steps > li:nth-last-child(-n + 2) { border-bottom: 0; }

.book-gpu-target-steps span {
  display: block;
  margin-bottom: 4px;
  color: #197369;
  font-size: 10px;
  font-weight: 900;
}

.book-gpu-target-steps strong {
  display: block;
  color: #29494d;
  font-size: 14px;
  line-height: 1.45;
}

.book-gpu-target-steps p {
  margin: 7px 0 0;
  color: #5d7075;
  font-size: 11px;
  line-height: 1.75;
}

.book-gpu-first-answer {
  padding: 13px 15px;
  border-left: 4px solid #378d84;
  background: #f0f8f6;
}

.book-gpu-first-answer strong {
  color: #285d58;
  font-size: 13px;
}

.book-gpu-first-answer p {
  margin: 5px 0 0;
  color: #526d6a;
  font-size: 11px;
  line-height: 1.75;
}

.book-gpu-maker-cards,
.book-gpu-name-examples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  min-width: 0;
  border: 1px solid #c9d6d4;
  background: #c9d6d4;
}

.book-gpu-maker-cards > article,
.book-gpu-name-examples > article {
  min-width: 0;
  padding: 16px;
  border-top: 5px solid #76b900;
  background: #fff;
}

.book-gpu-maker-cards > article.is-amd,
.book-gpu-name-examples > article.is-amd {
  border-top-color: #d24c3b;
}

.book-gpu-maker-cards > article.is-intel,
.book-gpu-name-examples > article.is-intel {
  border-top-color: #1676a7;
}

.book-gpu-maker-cards article > header {
  display: grid;
  grid-template-columns: minmax(92px, .7fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding-bottom: 11px;
  border-bottom: 1px solid #d9e2e0;
}

.book-gpu-brand-name {
  color: #385343;
  font-size: clamp(19px, 2vw, 28px);
  font-weight: 950;
  line-height: 1;
}

.book-gpu-maker-cards .is-amd .book-gpu-brand-name { color: #b63e31; }
.book-gpu-maker-cards .is-intel .book-gpu-brand-name { color: #116b98; }

.book-gpu-maker-cards article > header > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  align-items: baseline;
}

.book-gpu-maker-cards article > header small {
  color: #77898d;
  font-size: 9px;
  font-weight: 800;
}

.book-gpu-maker-cards article > header strong {
  color: #29464b;
  font-size: 12px;
  line-height: 1.4;
}

.book-gpu-maker-cards article > p {
  margin: 12px 0;
  color: #526a70;
  font-size: 12px;
  line-height: 1.8;
}

.book-gpu-maker-cards dl {
  display: grid;
  gap: 9px;
  margin: 0;
}

.book-gpu-maker-cards dl > div {
  padding-left: 10px;
  border-left: 3px solid #9dbda5;
}

.book-gpu-maker-cards .is-amd dl > div { border-left-color: #dda097; }
.book-gpu-maker-cards .is-intel dl > div { border-left-color: #8dbbd0; }
.book-gpu-maker-cards dt {
  display: inline-flex;
  padding: 2px 7px;
  background: #edf4ef;
  color: #315a50;
  font-size: 11px;
  font-weight: 900;
}

.book-gpu-maker-cards .is-amd dt { background: #fff0ed; color: #984639; }
.book-gpu-maker-cards .is-intel dt { background: #edf6fa; color: #17658c; }

.book-gpu-maker-cards dd {
  margin: 5px 0 0;
  color: #52696e;
  font-size: 11.5px;
  line-height: 1.72;
}

.book-gpu-maker-cards dd ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.book-gpu-maker-cards dd li {
  position: relative;
  padding-left: 13px;
}

.book-gpu-maker-cards dd li::before {
  position: absolute;
  top: .72em;
  left: 1px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #78a882;
  content: '';
}

.book-gpu-maker-cards .is-amd dd li::before { background: #cf766a; }
.book-gpu-maker-cards .is-intel dd li::before { background: #5795b2; }

.book-gpu-popularity-note {
  padding: 13px 15px;
  border-left: 4px solid #e3aa45;
  background: #fff9ec;
}

.book-gpu-popularity-note strong { color: #76581e; font-size: 13px; }
.book-gpu-popularity-note p { margin: 4px 0 0; color: #6c6452; font-size: 12px; line-height: 1.75; }

.book-gpu-product-chain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

.book-gpu-product-chain > section {
  padding: 14px 15px;
  border: 1px solid #c8d7d4;
  background: #f7faf9;
}

.book-gpu-product-chain > span {
  display: grid;
  place-items: center;
  color: #388d85;
  font-size: 22px;
  font-weight: 900;
}

.book-gpu-product-chain small {
  display: block;
  color: #65827f;
  font-size: 9px;
  font-weight: 900;
}

.book-gpu-product-chain strong {
  display: block;
  margin-top: 4px;
  color: #24464b;
  font-size: 13px;
  line-height: 1.5;
}

.book-gpu-product-chain p,
.book-gpu-board-details p,
.book-gpu-board-details li {
  color: #60757a;
  font-size: 11px;
  line-height: 1.72;
}

.book-gpu-product-chain p { margin: 5px 0 0; }

.book-gpu-board-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.book-gpu-board-details > section {
  padding: 14px 15px;
  border-top: 3px solid #5f9290;
  background: #f7faf9;
}

.book-gpu-board-details h4 {
  margin: 0;
  color: #294b50;
  font-size: 13px;
  line-height: 1.5;
}

.book-gpu-board-details p { margin: 7px 0 0; }
.book-gpu-board-details ul { margin: 7px 0 0; padding-left: 18px; }
.book-gpu-board-details li + li { margin-top: 3px; }

.book-gpu-board-caution,
.book-gpu-generation-warning {
  margin: 0;
  padding: 12px 14px;
  border-left: 4px solid #df705c;
  background: #fff7f3;
  color: #695f5b;
  font-size: 12px;
  line-height: 1.75;
}

.book-gpu-board-caution strong,
.book-gpu-generation-warning strong { color: #8b493d; }
.book-gpu-generation-warning p { margin: 4px 0 0; }

.book-gpu-name-examples > article > header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 10px;
  align-items: baseline;
}

.book-gpu-name-examples > article > header strong { color: #263f45; font-size: 16px; }
.book-gpu-name-examples > article > header small { color: #788b8f; font-size: 10px; font-weight: 900; }

.book-gpu-name-examples article > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-top: 12px;
}

.book-gpu-name-examples article > div span {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 58px;
  padding: 7px 4px;
  border: 1px solid #cedbd8;
  background: #f5f9f8;
  text-align: center;
}

.book-gpu-name-examples article > div b {
  overflow-wrap: anywhere;
  color: #2f5458;
  font-size: 11px;
  line-height: 1.35;
}

.book-gpu-name-examples article > div small {
  margin-top: 3px;
  color: #77898d;
  font-size: 8px;
  font-weight: 800;
}

.book-gpu-name-examples article > p {
  margin: 11px 0 0;
  color: #5e7378;
  font-size: 11px;
  line-height: 1.75;
}

.book-gpu-family-table {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.book-gpu-family-table table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 11px;
  line-height: 1.55;
}

.book-gpu-family-table th,
.book-gpu-family-table td {
  padding: 9px 10px;
  border: 1px solid #cbd9d6;
  text-align: left;
  vertical-align: top;
}

.book-gpu-family-table thead th { color: #fff; background: #476b70; }
.book-gpu-family-table tbody th { color: #294a4e; background: #eef4f3; }
.book-gpu-family-table tbody td { color: #5d7075; background: #fff; }

.book-gpu-game-tool {
  min-width: 0;
  border: 1px solid #c7d7d4;
  background: #fff;
}

.book-gpu-game-search-panel {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr);
  gap: 10px 16px;
  min-width: 0;
  padding: 15px 16px 11px;
  background: #f3f8f7;
}

.book-gpu-game-search-panel > label {
  display: grid;
  gap: 5px;
}

.book-gpu-game-search-panel > label > span {
  color: #3b6264;
  font-size: 11px;
  font-weight: 900;
}

.book-gpu-game-search-panel input,
.book-gpu-game-search-panel select {
  width: 100%;
  min-width: 0;
  height: 39px;
  padding: 0 11px;
  border: 1px solid #9db9b4;
  border-radius: 4px;
  outline: 0;
  background: #fff;
  color: #29484c;
  font: inherit;
  font-size: 13px;
}

.book-gpu-game-search-panel select {
  padding-right: 34px;
  cursor: pointer;
}

.book-gpu-game-search-panel select:disabled {
  cursor: default;
  color: #7c8b8d;
  background: #edf2f1;
}

.book-gpu-game-search-panel input:focus,
.book-gpu-game-search-panel select:focus {
  border-color: #207f77;
  box-shadow: 0 0 0 3px rgba(32, 127, 119, .14);
}

.book-gpu-game-suggestions {
  grid-column: 2;
  display: grid;
  gap: 2px;
  max-height: 176px;
  overflow-y: auto;
  border: 1px solid #c9d8d5;
  background: #fff;
}

.book-gpu-game-suggestions[hidden] { display: none; }

.book-gpu-game-suggestion {
  min-width: 0;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid #e3eae8;
  background: #fff;
  color: #39595e;
  font: inherit;
  font-size: 11px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.book-gpu-game-suggestion:last-child { border-bottom: 0; }
.book-gpu-game-suggestion:hover,
.book-gpu-game-suggestion:focus-visible { background: #e7f3f0; color: #176e67; }

.book-gpu-game-selected {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: start;
  min-width: 0;
  padding-top: 0;
}

.book-gpu-game-chip {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) 25px;
  align-items: stretch;
  max-width: 100%;
  border: 1px solid #8eb5af;
  background: #fff;
}

.book-gpu-game-chip b {
  min-width: 0;
  padding: 6px 8px;
  overflow: hidden;
  color: #31585a;
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-gpu-game-chip button {
  display: grid;
  width: 25px;
  min-width: 25px;
  padding: 0;
  place-items: center;
  border: 0;
  border-left: 1px solid #c5d8d4;
  background: #eff6f4;
  color: #4d6f70;
  font: inherit;
  cursor: pointer;
}

.book-gpu-game-empty {
  margin: 2px 0 0;
  color: #6e8083;
  font-size: 11px;
}

.book-gpu-game-status {
  grid-column: 1 / -1;
  margin: 0;
  color: #708184;
  font-size: 10px;
}

.book-gpu-game-status.is-notice { color: #95651b; }
.book-gpu-game-status.is-error { color: #9b493d; }

.book-gpu-game-controls {
  display: grid;
  grid-template-columns: auto minmax(320px, 1fr) auto;
  gap: 8px 18px;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid #d6e1df;
  border-bottom: 1px solid #d6e1df;
}

.book-gpu-game-controls fieldset {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.book-gpu-game-controls legend {
  float: left;
  align-self: center;
  margin-right: 7px;
  color: #5a7477;
  font-size: 10px;
  font-weight: 900;
}

.book-gpu-game-controls button {
  min-width: 42px;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid #b9ccc8;
  border-right: 0;
  background: #fff;
  color: #5c7174;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.book-gpu-game-controls button:first-of-type { border-radius: 4px 0 0 4px; }
.book-gpu-game-controls button:last-child { border-right: 1px solid #b9ccc8; border-radius: 0 4px 4px 0; }
.book-gpu-game-controls button.is-active { border-color: #247c74; background: #247c74; color: #fff; }

.book-gpu-game-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 14px;
  align-items: baseline;
  padding: 12px 16px;
  background: #fffaf0;
}

.book-gpu-game-summary strong { color: #6c531c; font-size: 13px; }
.book-gpu-game-summary span { color: #746c5a; font-size: 10px; line-height: 1.55; }

.book-gpu-fps-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  padding: 7px 16px;
  border-top: 1px solid #efe6d4;
  border-bottom: 1px solid #d6e1df;
  background: #fff;
  color: #627679;
  font-size: 9px;
  font-weight: 800;
}

.book-gpu-fps-legend span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.book-gpu-fps-legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--comfort-color);
}

.book-gpu-fps-legend .is-poor,
.book-gpu-fps-cell.is-poor { --comfort-color: #c65b50; --comfort-soft: #fff1ef; }
.book-gpu-fps-legend .is-fair,
.book-gpu-fps-cell.is-fair { --comfort-color: #c88b24; --comfort-soft: #fff8e8; }
.book-gpu-fps-legend .is-good,
.book-gpu-fps-cell.is-good { --comfort-color: #348a66; --comfort-soft: #edf8f2; }
.book-gpu-fps-legend .is-great,
.book-gpu-fps-cell.is-great { --comfort-color: #247c9b; --comfort-soft: #edf7fb; }

.book-gpu-game-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.book-gpu-game-result-table {
  width: 100%;
  min-width: 690px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 10px;
}

.book-gpu-game-result-table th,
.book-gpu-game-result-table td {
  padding: 8px 9px;
  border: 1px solid #d4dfdd;
  text-align: center;
  vertical-align: middle;
}

.book-gpu-game-result-table thead th {
  background: #476d70;
  color: #fff;
  font-size: 9px;
  line-height: 1.35;
}

.book-gpu-game-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: 4px;
  align-items: center;
}

.book-gpu-game-heading > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.book-gpu-game-heading button {
  display: grid;
  width: 20px;
  height: 20px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 3px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.book-gpu-game-heading button:hover,
.book-gpu-game-heading button:focus-visible {
  border-color: #fff;
  background: #fff;
  color: #315f63;
}

.book-gpu-game-result-table tbody th {
  background: #f0f5f4;
  color: #35575b;
  font-size: 11px;
}

.book-gpu-passmark-value {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
}

.book-gpu-passmark-search {
  display: grid;
  gap: 1px;
  padding: 5px 6px;
  border: 1px solid #7ca8a1;
  border-radius: 4px;
  background: #fff;
  color: #27756e;
  line-height: 1.15;
  text-decoration: none;
}

.book-gpu-passmark-search span { font-size: 8px; font-weight: 700; }
.book-gpu-passmark-search b { font-size: 9px; }
.book-gpu-passmark-search:hover,
.book-gpu-passmark-search:focus-visible { border-color: #1f756e; background: #e8f4f1; color: #125f59; }

.book-gpu-game-result-table tbody th[data-meets-target='1'] {
  box-shadow: inset 4px 0 #e0a236;
  background: #fff8e9;
}

.book-gpu-game-result-table td { color: #516a6e; }
.book-gpu-game-result-table td.is-unknown { color: #a0acad; }

.book-gpu-fps-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: -3px;
  padding: 5px;
  background: var(--comfort-soft);
}

.book-gpu-fps-cell b { color: var(--comfort-color); font-size: 11px; }
.book-gpu-fps-cell b small { font-size: 8px; font-weight: 700; }
.book-gpu-fps-cell i { position: relative; height: 3px; overflow: hidden; background: #e2e9e7; }
.book-gpu-fps-cell i::after { position: absolute; inset: 0 auto 0 0; width: var(--fps-width); background: var(--comfort-color); content: ''; }

.book-gpu-game-tool > footer {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  align-items: center;
  padding: 11px 16px;
  border-top: 1px solid #d6e1df;
  background: #f7faf9;
}

.book-gpu-game-tool > footer p {
  flex: 1 1 460px;
  margin: 0;
  color: #65787b;
  font-size: 10px;
  line-height: 1.65;
}

.book-gpu-game-tool > footer p strong { color: #465f63; }
.book-gpu-game-tool > footer > span { color: #7b898b; font-size: 9px; }
.book-gpu-game-tool > footer > a { color: #18766f; font-size: 10px; font-weight: 900; }

@media (max-width: 980px) {
  .book-gpu-target-layout {
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
  }

  .book-gpu-maker-cards,
  .book-gpu-name-examples,
  .book-gpu-board-details {
    grid-template-columns: minmax(0, 1fr);
  }

  .book-gpu-product-chain {
    grid-template-columns: minmax(0, 1fr);
  }

  .book-gpu-product-chain > span {
    min-height: 24px;
    transform: rotate(90deg);
  }
}

@media (max-width: 620px) {
  .book-gpu-target-guide,
  .book-gpu-maker-guide,
  .book-gpu-board-guide,
  .book-gpu-family-guide,
  .book-gpu-game-guide,
  .book-gpu-ai-guide,
  .book-gpu-cad-guide {
    gap: 11px;
  }

  .book-gpu-target-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .book-gpu-target-layout > figure {
    grid-template-columns: 42% minmax(0, 1fr);
    grid-template-rows: auto;
    border-right: 0;
    border-bottom: 1px solid #c9d6d4;
  }

  .book-gpu-target-layout > figure img {
    min-height: 150px;
  }

  .book-gpu-target-layout > figure figcaption {
    display: flex;
    align-items: center;
    border-top: 0;
    border-left: 1px solid #d5dfdd;
  }

  .book-gpu-target-steps > li {
    padding: 12px;
  }

  .book-gpu-target-steps strong {
    font-size: 12px;
  }

  .book-gpu-target-steps p {
    font-size: 10px;
  }

  .book-gpu-maker-cards > article,
  .book-gpu-name-examples > article,
  .book-gpu-board-details > section {
    padding: 13px;
  }

  .book-gpu-maker-cards article > header {
    grid-template-columns: minmax(88px, .55fr) minmax(0, 1fr);
  }

  .book-gpu-name-examples article > div {
    grid-template-columns: repeat(4, minmax(58px, 1fr));
  }

  .book-gpu-game-search-panel {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }

  .book-gpu-game-suggestions,
  .book-gpu-game-selected,
  .book-gpu-game-status {
    grid-column: 1;
  }

  .book-gpu-game-selected {
    grid-row: auto;
    padding-top: 0;
  }

  .book-gpu-game-controls {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px;
  }

  .book-gpu-game-controls fieldset {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  }

  .book-gpu-game-controls legend {
    float: none;
    grid-column: 1 / -1;
    margin: 0 0 4px;
  }

  .book-gpu-game-controls button {
    padding-inline: 5px;
  }

  .book-gpu-game-summary,
  .book-gpu-fps-legend,
  .book-gpu-game-tool > footer {
    padding-inline: 12px;
  }
}

@media (max-width: 430px) {
  .book-gpu-target-layout > figure {
    grid-template-columns: minmax(0, 1fr);
  }

  .book-gpu-target-layout > figure img {
    min-height: 180px;
    max-height: 230px;
  }

  .book-gpu-target-layout > figure figcaption {
    border-top: 1px solid #d5dfdd;
    border-left: 0;
  }

  .book-gpu-target-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .book-gpu-target-steps > li,
  .book-gpu-target-steps > li:nth-child(2n),
  .book-gpu-target-steps > li:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid #e0e7e5;
  }

  .book-gpu-target-steps > li:last-child { border-bottom: 0; }
}

/* CPU choice: purpose, required performance, and whole-build cost. */
.book-cpu-choice {
  overflow: visible;
  margin: 0 0 24px;
  border: 1px solid #b9d1cd;
  border-top: 5px solid #177970;
  background: #fff;
  box-shadow: 0 12px 28px rgb(28 61 66 / 8%);
}

.book-cpu-choice-lead {
  display: grid;
  gap: 8px;
  padding: 20px 22px 18px;
  background: linear-gradient(125deg, #e9f5f2 0%, #f7fbfa 64%, #fff 100%);
}

.book-cpu-choice-lead > span,
.book-cpu-purpose-map > header > div > span,
.book-cpu-game-balance > header > div > span {
  width: fit-content;
  color: #20766e;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.book-cpu-choice-lead > span {
  padding: 3px 8px;
  border-radius: 999px;
  background: #197b72;
  color: #fff;
}

.book-cpu-choice-lead p {
  max-width: 980px;
  margin: 0;
  color: #4e686d;
  font-size: 13px;
  line-height: 1.8;
}

.book-cpu-choice-lead strong {
  color: #234a4f;
}

.book-cpu-choice-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  border-block: 1px solid #c9dad7;
  background: #c9dad7;
  list-style: none;
}

.book-cpu-choice-steps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 16px;
  background: #fff;
}

.book-cpu-choice-steps li > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #dfeeea;
  color: #1d746c;
  font-size: 13px;
  font-weight: 950;
}

.book-cpu-choice-steps strong {
  display: block;
  color: #274b50;
  font-size: 13px;
  line-height: 1.5;
}

.book-cpu-choice-steps p {
  margin: 5px 0 0;
  color: #566e72;
  font-size: 10px;
  line-height: 1.75;
}

.book-cpu-purpose-map,
.book-cpu-game-balance {
  margin: 18px;
  border: 1px solid #c7d8d5;
  background: #fff;
}

.book-cpu-purpose-map > header,
.book-cpu-game-balance > header {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 17px 14px;
  background: #f0f7f5;
}

.book-cpu-purpose-map > header h3,
.book-cpu-game-balance > header h3 {
  margin: 3px 0 0;
  color: #244b50;
  font-size: 17px;
  line-height: 1.5;
}

.book-cpu-game-balance > header p {
  max-width: 840px;
  margin: 5px 0 0;
  color: #566f73;
  font-size: 11px;
  line-height: 1.75;
}

.book-cpu-purpose-table {
  display: grid;
  gap: 1px;
  background: #d7e1df;
}

.book-cpu-purpose-head,
.book-cpu-purpose-table article {
  display: grid;
  grid-template-columns: minmax(125px, .52fr) minmax(0, 1.3fr) minmax(0, 1.15fr);
}

.book-cpu-purpose-head span {
  padding: 8px 12px;
  background: #dfece9;
  color: #315c60;
  font-size: 9px;
  font-weight: 900;
}

.book-cpu-purpose-table article > * {
  margin: 0;
  padding: 12px;
  background: #fff;
}

.book-cpu-purpose-table article h4 {
  color: #31565b;
  font-size: 12px;
  line-height: 1.55;
}

.book-cpu-purpose-table article p {
  color: #586f73;
  font-size: 10px;
  line-height: 1.72;
}

.book-cpu-purpose-table article.is-game > * {
  background: #f7fbfa;
}

.book-cpu-purpose-table article.is-game h4 {
  color: #16746b;
}

.book-cpu-video-note {
  margin: 14px;
  border: 1px solid #cad9e5;
  border-left: 4px solid #4d79a1;
  background: #f7fafd;
}

.book-cpu-video-note > header {
  display: flex;
  gap: 9px;
  align-items: baseline;
  padding: 11px 13px 8px;
}

.book-cpu-video-note > header span {
  flex: 0 0 auto;
  color: #4d7598;
  font-size: 9px;
  font-weight: 900;
}

.book-cpu-video-note > header strong {
  color: #31566f;
  font-size: 13px;
}

.book-cpu-video-note > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 12px;
  border: 1px solid #d5e0e9;
  background: #d5e0e9;
}

.book-cpu-video-note section {
  padding: 11px 12px;
  background: #fff;
}

.book-cpu-video-note section b {
  display: block;
  color: #3e6888;
  font-size: 11px;
}

.book-cpu-video-note section p {
  margin: 5px 0 0;
  color: #5a7078;
  font-size: 10px;
  line-height: 1.72;
}

.book-cpu-video-note > small {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  padding: 9px 13px 11px;
  color: #667b83;
  font-size: 8px;
  line-height: 1.6;
}

.book-cpu-video-note > small a {
  color: #376f98;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.book-cpu-game-balance {
  overflow: visible;
}

.book-cpu-frame-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr) 38px minmax(0, 1fr);
  gap: 9px;
  align-items: stretch;
  padding: 16px 17px;
  border-block: 1px solid #d5e0de;
  background: #fbfcfc;
}

.book-cpu-frame-flow section {
  padding: 12px 13px;
  border: 1px solid #cbdcda;
  border-radius: 4px;
  background: #fff;
  text-align: center;
}

.book-cpu-frame-flow section:nth-of-type(2) {
  border-color: #c8d6e6;
  background: #f6f9fd;
}

.book-cpu-frame-flow section:nth-of-type(3) {
  border-color: #d6d4e3;
  background: #faf9fc;
}

.book-cpu-frame-flow section > span {
  display: block;
  color: #6b7e81;
  font-size: 8px;
  font-weight: 850;
}

.book-cpu-frame-flow section > strong {
  display: block;
  margin-top: 2px;
  color: #26545a;
  font-size: 18px;
}

.book-cpu-frame-flow section:nth-of-type(2) > strong { color: #386b9b; }
.book-cpu-frame-flow section:nth-of-type(3) > strong { color: #665b86; }

.book-cpu-frame-flow section > p {
  margin: 5px 0 0;
  color: #5c7175;
  font-size: 9px;
  line-height: 1.65;
}

.book-cpu-frame-flow > i {
  position: relative;
  align-self: center;
  height: 2px;
  background: #7aa49f;
}

.book-cpu-frame-flow > i::after {
  position: absolute;
  top: 50%;
  right: -1px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #7aa49f;
  border-right: 2px solid #7aa49f;
  content: '';
  transform: translateY(-50%) rotate(45deg);
}

.book-cpu-game-cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  padding: 0 17px 17px;
}

.book-cpu-game-cases article {
  padding: 14px 15px;
  border: 1px solid #ccdcd9;
  border-top: 4px solid #338279;
  background: #fff;
}

.book-cpu-game-cases article.is-gpu {
  border-color: #ccd8e5;
  border-top-color: #4e7aa4;
}

.book-cpu-game-cases article.is-pair {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(180px, .65fr) minmax(0, 1.35fr);
  gap: 4px 18px;
  border-color: #d7d4e2;
  border-top-color: #786d96;
  background: #faf9fc;
}

.book-cpu-game-cases article > span {
  color: #24756e;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
}

.book-cpu-game-cases article.is-gpu > span { color: #466f98; }
.book-cpu-game-cases article.is-pair > span { color: #6d628a; }

.book-cpu-game-cases h4 {
  margin: 3px 0 8px;
  color: #294e53;
  font-size: 13px;
  line-height: 1.5;
}

.book-cpu-game-cases article.is-pair > span,
.book-cpu-game-cases article.is-pair > h4 {
  grid-column: 1;
}

.book-cpu-game-cases article.is-pair > p {
  grid-column: 2;
}

.book-cpu-game-cases ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 1.2em;
  color: #566e72;
  font-size: 10px;
  line-height: 1.65;
}

.book-cpu-game-cases p {
  margin: 9px 0 0;
  color: #566e72;
  font-size: 10px;
  line-height: 1.72;
}

.book-cpu-game-cases article.is-pair > p {
  margin: 0;
}

.book-cpu-choice-total {
  display: grid;
  grid-template-columns: minmax(190px, .7fr) minmax(0, 1.5fr) auto;
  gap: 14px;
  align-items: center;
  padding: 15px 18px 17px;
  border-top: 1px solid #c8d9d6;
  background: #f1f7f5;
}

.book-cpu-choice-total div > span {
  display: block;
  color: #27756e;
  font-size: 9px;
  font-weight: 900;
}

.book-cpu-choice-total div > strong {
  display: block;
  margin-top: 2px;
  color: #2b5055;
  font-size: 12px;
  line-height: 1.5;
}

.book-cpu-choice-total > p {
  margin: 0;
  color: #566f73;
  font-size: 10px;
  line-height: 1.75;
}

.book-cpu-choice-total > a {
  padding: 8px 11px;
  border: 1px solid #8bb6b0;
  border-radius: 3px;
  color: #1d6f68;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 820px) {
  .book-cpu-choice-steps {
    grid-template-columns: 1fr;
  }

  .book-cpu-game-cases article.is-pair {
    display: block;
  }

  .book-cpu-game-cases article.is-pair > p + p {
    margin-top: 8px;
  }

  .book-cpu-choice-total {
    grid-template-columns: 1fr auto;
  }

  .book-cpu-choice-total > p {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 680px) {
  .book-cpu-choice {
    margin-bottom: 18px;
  }

  .book-cpu-choice-lead {
    padding: 17px 14px 15px;
  }

  .book-cpu-choice-lead p {
    font-size: 12px;
  }

  .book-cpu-choice-steps li {
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 13px 14px;
  }

  .book-cpu-choice-steps li > span {
    width: 28px;
    height: 28px;
  }

  .book-cpu-choice-steps p {
    font-size: 11px;
  }

  .book-cpu-purpose-map,
  .book-cpu-game-balance {
    margin: 12px 10px;
  }

  .book-cpu-purpose-map > header,
  .book-cpu-game-balance > header {
    padding: 14px 13px 12px;
  }

  .book-cpu-purpose-map > header h3,
  .book-cpu-game-balance > header h3 {
    font-size: 15px;
  }

  .book-cpu-purpose-head {
    display: none;
  }

  .book-cpu-purpose-table article {
    display: block;
  }

  .book-cpu-purpose-table article > * {
    padding: 11px 12px;
  }

  .book-cpu-purpose-table article h4 {
    padding-bottom: 4px;
    font-size: 13px;
  }

  .book-cpu-purpose-table article p {
    padding-top: 4px;
    font-size: 11px;
  }

  .book-cpu-purpose-table article p::before {
    display: block;
    margin-bottom: 2px;
    color: #33736d;
    font-size: 9px;
    font-weight: 900;
  }

  .book-cpu-purpose-table article p:nth-of-type(1)::before { content: '見る性能'; }
  .book-cpu-purpose-table article p:nth-of-type(2)::before { content: 'コスト'; }

  .book-cpu-video-note {
    margin: 10px;
  }

  .book-cpu-video-note > header {
    display: grid;
    gap: 2px;
  }

  .book-cpu-video-note > div {
    grid-template-columns: 1fr;
    margin: 0 9px;
  }

  .book-cpu-video-note section p {
    font-size: 11px;
  }

  .book-cpu-video-note > small {
    display: grid;
    gap: 4px;
    font-size: 9px;
  }

  .book-cpu-frame-flow {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 13px;
  }

  .book-cpu-frame-flow > i {
    justify-self: center;
    width: 2px;
    height: 18px;
  }

  .book-cpu-frame-flow > i::after {
    top: auto;
    right: auto;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }

  .book-cpu-game-cases {
    grid-template-columns: 1fr;
    padding: 0 13px 13px;
  }

  .book-cpu-game-cases article.is-pair {
    grid-column: auto;
  }

  .book-cpu-game-cases ul,
  .book-cpu-game-cases p {
    font-size: 11px;
  }

  .book-cpu-choice-total {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .book-cpu-choice-total > p {
    grid-column: auto;
    grid-row: auto;
    font-size: 11px;
  }

  .book-cpu-choice-total > a {
    width: 100%;
  }
}

/* CPU guide: role, product families, generations, naming, and performance. */
.book-cpu-guide.book-part-guide {
  display: block;
  padding: 0;
  border-bottom: 1px solid #c7d4d2;
  content-visibility: visible;
}

.book-cpu-start-route {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.5fr);
  gap: 24px;
  align-items: center;
  margin: 8px 0 18px;
  padding: 18px 20px;
  border-top: 4px solid #247a72;
  border-bottom: 1px solid #c8d7d4;
  background: #f1f7f5;
}

.book-cpu-start-route header span {
  color: #28736d;
  font-size: 12px;
  font-weight: 900;
}

.book-cpu-start-route h3 {
  margin: 3px 0 0;
  color: #23464b;
  font-size: 20px;
  line-height: 1.4;
}

.book-cpu-start-route header p {
  margin: 6px 0 0;
  color: #586e72;
  font-size: 11px;
  line-height: 1.7;
}

.book-cpu-start-route ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.book-cpu-start-route li {
  position: relative;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 7px;
  min-width: 0;
  padding: 7px 12px;
  border-left: 1px solid #cfddda;
}

.book-cpu-start-route li:first-child {
  border-left: 0;
}

.book-cpu-start-route li > span {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 50%;
  background: #2d7d75;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.book-cpu-start-route li b,
.book-cpu-start-route li small {
  display: block;
}

.book-cpu-start-route li b {
  color: #315359;
  font-size: 11px;
}

.book-cpu-start-route li small {
  margin-top: 2px;
  color: #6a7b7f;
  font-size: 9px;
  line-height: 1.45;
}

.book-cpu-section {
  scroll-margin-top: 116px;
  padding: 34px 0 38px;
  border-bottom: 1px solid #c7d4d2;
}

.book-cpu-section:first-of-type {
  padding-top: 8px;
}

.book-cpu-section-heading {
  display: grid;
  gap: 5px;
  margin-bottom: 20px;
}

.book-cpu-section-heading > p {
  width: fit-content;
  margin: 0 0 2px;
  padding: 6px 11px;
  border: 1px solid #b7d3ce;
  border-left: 4px solid var(--book-green);
  border-radius: 3px;
  background: #e1efec;
  color: var(--book-green-dark);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.35;
  box-shadow: inset 0 -1px 0 rgba(15, 118, 110, .06);
}

.book-cpu-section-heading > h3 {
  margin: 0;
  color: #203b41;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.35;
}

.book-cpu-section-heading > span {
  max-width: 900px;
  color: #526a70;
  font-size: 14px;
  line-height: 1.8;
}

.book-cpu-role-grid {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
  align-items: stretch;
  gap: 22px;
}

.book-cpu-main-photo {
  margin: 0;
  overflow: hidden;
  border: 1px solid #c9d5d3;
  background: #eef2f1;
}

.book-cpu-main-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 318px;
  object-fit: cover;
}

.book-cpu-main-photo.is-real-photo img {
  height: auto;
  object-fit: contain;
}

.book-cpu-main-photo figcaption {
  padding: 9px 12px;
  border-top: 1px solid #d3dcda;
  background: #f7f9f8;
  color: #5e7277;
  font-size: 11px;
  line-height: 1.65;
}

.book-cpu-role-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 8px 4px;
}

.book-cpu-lead {
  margin: 0;
  color: #415a60;
  font-size: 14px;
  line-height: 1.9;
}

.book-cpu-lead strong {
  color: #214c50;
}

.book-cpu-point-list {
  display: grid;
  gap: 0;
  margin: 17px 0 0;
  padding: 0;
  border-top: 1px solid #d4dfdd;
  list-style: none;
}

.book-cpu-point-list li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #d4dfdd;
}

.book-cpu-point-list b {
  color: #27535a;
  font-size: 12px;
}

.book-cpu-point-list span {
  color: #5d7176;
  font-size: 12px;
  line-height: 1.65;
}

.book-cpu-process {
  margin-top: 25px;
  padding: 20px;
  border-top: 3px solid #2c857c;
  border-bottom: 1px solid #cbd8d6;
  background: #f1f7f5;
}

.book-cpu-process > header {
  display: grid;
  gap: 3px;
  margin-bottom: 18px;
}

.book-cpu-process > header strong {
  color: #23464c;
  font-size: 17px;
}

.book-cpu-process > header span {
  color: #65797e;
  font-size: 12px;
  line-height: 1.65;
}

.book-cpu-process-flow {
  display: grid;
  grid-template-columns: minmax(145px, .7fr) 64px minmax(190px, .78fr) 74px minmax(330px, 1.5fr);
  align-items: center;
  gap: 8px;
}

.book-cpu-process-source,
.book-cpu-process-core {
  display: grid;
  gap: 5px;
  min-height: 126px;
  align-content: center;
  padding: 16px;
  border: 1px solid #c9d7d5;
  background: #fff;
}

.book-cpu-process-source span,
.book-cpu-process-core span {
  width: max-content;
  padding: 2px 7px;
  border-radius: 3px;
  background: #e9f0ef;
  color: #53706f;
  font-size: 9px;
  font-weight: 900;
}

.book-cpu-process-source strong {
  color: #23464c;
  font-size: 16px;
  line-height: 1.35;
}

.book-cpu-process-source small,
.book-cpu-process-core small {
  color: #65797e;
  font-size: 10px;
  line-height: 1.55;
}

.book-cpu-process-core {
  justify-items: center;
  border: 2px solid #218078;
  background: #dff0ed;
  text-align: center;
}

.book-cpu-process-core span {
  background: #fff;
  color: #246b65;
}

.book-cpu-process-core strong {
  color: #174f4a;
  font-size: 29px;
  line-height: 1;
}

.book-cpu-process-core b {
  color: #285b57;
  font-size: 12px;
}

.book-cpu-process-arrow {
  position: relative;
  display: grid;
  gap: 7px;
  justify-items: stretch;
}

.book-cpu-process-arrow span {
  color: #567572;
  font-size: 9px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.book-cpu-process-arrow i {
  position: relative;
  display: block;
  height: 2px;
  background: #6c9994;
}

.book-cpu-process-arrow i::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -1px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #6c9994;
  border-right: 2px solid #6c9994;
  transform: translateY(-50%) rotate(45deg);
}

.book-cpu-process-results {
  display: grid;
  gap: 7px;
}

.book-cpu-process-results > section {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 2px 10px;
  min-height: 64px;
  align-content: center;
  padding: 10px 12px;
  border: 1px solid #ccd8d6;
  border-left: 4px solid #739694;
  background: #fff;
}

.book-cpu-process-results > section:nth-child(2) {
  border-left-color: #ae8553;
}

.book-cpu-process-results > section:nth-child(3) {
  border-left-color: #687fac;
}

.book-cpu-process-results span {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  color: #557672;
  font-size: 9px;
  font-weight: 900;
  text-align: center;
}

.book-cpu-process-results b {
  color: #34545a;
  font-size: 14px;
}

.book-cpu-process-results small {
  color: #65787b;
  font-size: 10px;
  line-height: 1.45;
}

.book-cpu-process-arrow.is-branch i::before {
  content: '';
  position: absolute;
  top: -72px;
  right: 0;
  bottom: -72px;
  border-right: 2px solid #aac1be;
}

.book-cpu-process-arrow.is-branch i::after {
  right: -1px;
}

.book-cpu-igpu {
  display: grid;
  gap: 14px;
  margin-top: 17px;
  padding: 19px 21px;
  border-left: 4px solid #d49537;
  background: #fff8e9;
}

.book-cpu-igpu > div:first-child strong {
  color: #704a16;
  font-size: 16px;
}

.book-cpu-igpu p {
  margin: 5px 0 0;
  color: #6b5a3e;
  font-size: 12px;
  line-height: 1.75;
}

.book-cpu-igpu > p {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid #ead7b8;
}

.book-cpu-igpu-makers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.book-cpu-igpu-makers section {
  display: grid;
  gap: 3px;
  padding: 13px 15px;
  border-top: 3px solid #4e84aa;
  border-bottom: 1px solid #dec8a3;
  background: #fff;
}

.book-cpu-igpu-makers section.is-amd {
  border-top-color: #bd5c49;
}

.book-cpu-igpu-makers b {
  color: #315d76;
  font-size: 13px;
}

.book-cpu-igpu-makers .is-amd b {
  color: #8b493d;
}

.book-cpu-igpu-makers p {
  margin: 0;
  color: #65563e;
  font-size: 11px;
  line-height: 1.7;
}

.book-cpu-igpu-makers p strong {
  color: #61451e;
}

.book-cpu-maker-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.book-cpu-maker-cards > section {
  min-width: 0;
  padding: 19px 21px;
  border-top: 4px solid #477eaa;
  border-bottom: 1px solid #cad7df;
  background: #f2f6f9;
}

.book-cpu-maker-cards > section.is-amd {
  border-top-color: #c65c48;
  border-bottom-color: #dfcdc8;
  background: #fbf4f1;
}

.book-cpu-maker-brand {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 13px;
  align-items: stretch;
  margin: -2px 0 13px;
}

.book-cpu-maker-logo {
  display: grid;
  min-height: 82px;
  place-items: center;
  padding: 14px;
  background: #164f74;
}

.book-cpu-maker-cards .is-amd .book-cpu-maker-logo {
  background: #762f2c;
}

.book-cpu-maker-logo img {
  display: block;
  width: 100%;
  max-width: 104px;
  height: auto;
  max-height: 46px;
  object-fit: contain;
}

.book-cpu-maker-cards .is-amd .book-cpu-maker-logo img {
  max-width: 110px;
}

.book-cpu-maker-brand > div {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 3px 8px;
  align-content: center;
}

.book-cpu-maker-brand small {
  align-self: center;
  color: #6c7c81;
  font-size: 9px;
  font-weight: 900;
}

.book-cpu-maker-brand b {
  min-width: 0;
  color: #29464d;
  font-size: 12px;
  line-height: 1.35;
}

.book-cpu-maker-brand i {
  grid-column: 1 / -1;
  height: 1px;
  background: #cad6d8;
}

.book-cpu-maker-cards h4 {
  margin: 0;
  color: #29464d;
  font-size: 18px;
}

.book-cpu-maker-cards p {
  margin: 8px 0 0;
  color: #586d72;
  font-size: 12px;
  line-height: 1.8;
}

.book-cpu-maker-lines {
  display: grid;
  gap: 0;
  margin: 13px 0 0;
  border-top: 1px solid #cbd8dd;
}

.book-cpu-maker-cards .is-amd .book-cpu-maker-lines {
  border-top-color: #dfcfca;
}

.book-cpu-maker-lines > div {
  display: grid;
  grid-template-columns: minmax(145px, .72fr) minmax(0, 1.55fr);
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #d6e0e4;
}

.book-cpu-maker-cards .is-amd .book-cpu-maker-lines > div {
  border-bottom-color: #e5d8d4;
}

.book-cpu-maker-lines dt {
  color: #274f65;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.55;
}

.book-cpu-maker-cards .is-amd .book-cpu-maker-lines dt {
  color: #7c3d35;
}

.book-cpu-maker-lines dd {
  margin: 0;
  color: #586d72;
  font-size: 11px;
  line-height: 1.7;
}

.book-cpu-maker-cards .book-cpu-maker-summary {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .74);
  font-size: 11px;
  line-height: 1.7;
}

.book-cpu-maker-summary strong {
  display: block;
  margin-bottom: 2px;
  color: #285565;
  font-size: 10px;
}

.book-cpu-maker-cards .is-amd .book-cpu-maker-summary strong {
  color: #7d3f36;
}

.book-cpu-socket-policy {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid #c9d8d5;
  border-top: 4px solid #667f7c;
  background: #f6f9f8;
}

.book-cpu-socket-policy > header {
  display: grid;
  gap: 3px;
}

.book-cpu-socket-policy > header span {
  color: #667b7e;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.book-cpu-socket-policy h4 {
  margin: 0;
  color: #29494d;
  font-size: 18px;
}

.book-cpu-socket-policy p {
  margin: 5px 0 0;
  color: #5c7073;
  font-size: 11px;
  line-height: 1.75;
}

.book-cpu-socket-policy > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.book-cpu-socket-policy section {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 3px 10px;
  padding: 13px 15px;
  border-left: 4px solid #4f82a6;
  background: #fff;
}

.book-cpu-socket-policy section.is-amd {
  border-left-color: #bd5c49;
}

.book-cpu-socket-policy section b {
  grid-row: 1 / 3;
  align-self: start;
  padding: 4px 8px;
  border-radius: 3px;
  background: #e9f1f6;
  color: #315d76;
  font-size: 11px;
}

.book-cpu-socket-policy section.is-amd b {
  background: #f8ece8;
  color: #8b493d;
}

.book-cpu-socket-policy section strong {
  color: #344f53;
  font-size: 12px;
}

.book-cpu-socket-policy section p {
  margin: 0;
  font-size: 10px;
}

.book-cpu-socket-policy > p {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #d5e0de;
}

.book-cpu-socket-policy > p strong {
  color: #2e5d59;
}

.book-cpu-table-wrap {
  margin-top: 18px;
  overflow: auto;
  border: 1px solid #c7d4d2;
  background: #fff;
}

.book-cpu-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.book-cpu-table th,
.book-cpu-table td {
  padding: 12px 13px;
  border-right: 1px solid #d8e1df;
  border-bottom: 1px solid #d8e1df;
  color: #51676c;
  font-size: 12px;
  line-height: 1.7;
  text-align: left;
  vertical-align: top;
}

.book-cpu-table tr > :last-child {
  border-right: 0;
}

.book-cpu-table tbody tr:last-child > * {
  border-bottom: 0;
}

.book-cpu-table thead th {
  background: #e8f0ee;
  color: #29494f;
  font-size: 11px;
  font-weight: 900;
}

.book-cpu-table thead th:first-child,
.book-cpu-table tbody th {
  width: 14%;
}

.book-cpu-table tbody th {
  background: #f5f8f7;
  color: #305159;
  font-weight: 900;
}

.book-cpu-table.is-family thead th:first-child,
.book-cpu-table.is-family tbody th {
  width: 17%;
}

.book-cpu-maker-table thead th:first-child,
.book-cpu-maker-table tbody th {
  width: 13%;
}

.book-cpu-maker-table td strong {
  color: #294f58;
}

.book-cpu-decision {
  margin: 16px 0 0;
  padding: 13px 16px;
  border-left: 4px solid #258078;
  background: #edf6f4;
  color: #49656a;
  font-size: 12px;
  line-height: 1.8;
}

.book-cpu-decision strong {
  color: #24565a;
}

.book-cpu-family-map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 4px;
  border-top: 1px solid #c8d5d3;
  border-bottom: 1px solid #c8d5d3;
}

.book-cpu-family-map > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 17px 14px;
  border-left: 5px solid #72a8a0;
  background: #f5f8f7;
}

.book-cpu-family-map > div:nth-child(2) { border-left-color: #4e8eb9; background: #f2f6f9; }
.book-cpu-family-map > div:nth-child(3) { border-left-color: #d28b43; background: #fbf6ef; }
.book-cpu-family-map > div:nth-child(4) { border-left-color: #a26688; background: #f8f3f6; }

.book-cpu-family-map span {
  color: #6a7d81;
  font-size: 12px;
  font-weight: 900;
}

.book-cpu-family-map strong {
  overflow-wrap: anywhere;
  color: #2e4c52;
  font-size: 15px;
}

.book-cpu-family-map small {
  color: #6d7f83;
  font-size: 10px;
  line-height: 1.5;
}

.book-cpu-nseries {
  margin-top: 17px;
  border-top: 4px solid #4d8d83;
  border-bottom: 1px solid #cbd8d5;
  background: #f5f9f8;
}

.book-cpu-nseries > header {
  padding: 14px 17px 12px;
  border-bottom: 1px solid #d5e0de;
}

.book-cpu-nseries > header span {
  color: #39726b;
  font-size: 13px;
  font-weight: 900;
}

.book-cpu-nseries > header h4 {
  margin: 3px 0 0;
  color: #29484e;
  font-size: 19px;
  line-height: 1.45;
}

.book-cpu-nseries > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #d8e2e0;
}

.book-cpu-nseries section {
  min-width: 0;
  padding: 13px 16px;
  background: #fff;
}

.book-cpu-nseries section b {
  color: #31575b;
  font-size: 13px;
}

.book-cpu-nseries section p {
  margin: 5px 0 0;
  color: #5b7075;
  font-size: 11px;
  line-height: 1.72;
}

.book-cpu-nseries > p {
  margin: 0;
  padding: 10px 16px;
  color: #5d7377;
  font-size: 11px;
}

.book-cpu-nseries > p a {
  color: #216c65;
  font-weight: 800;
  text-underline-offset: 3px;
}

.book-cpu-warning {
  margin-top: 17px;
  padding: 15px 17px;
  border-left: 4px solid #d09a45;
  background: #fff8ea;
}

.book-cpu-warning strong {
  color: #76521d;
  font-size: 13px;
}

.book-cpu-warning p {
  margin: 5px 0 0;
  color: #6e6048;
  font-size: 12px;
  line-height: 1.75;
}

.book-cpu-generation-note {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 15px 0;
  border-top: 1px solid #cbd7d5;
  border-bottom: 1px solid #cbd7d5;
}

.book-cpu-generation-note strong {
  color: #2d5358;
  font-size: 14px;
}

.book-cpu-generation-note p {
  margin: 0;
  color: #586d72;
  font-size: 12px;
  line-height: 1.8;
}

.book-cpu-generation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 19px;
}

.book-cpu-generation-grid > section {
  min-width: 0;
  padding: 18px 20px;
  border-top: 4px solid #4d85ad;
  background: #f3f7f9;
}

.book-cpu-generation-grid > section + section {
  border-top-color: #c76651;
  background: #fbf4f2;
}

.book-cpu-generation-grid header span {
  color: #55778e;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.book-cpu-generation-grid > section + section header span {
  color: #a45243;
}

.book-cpu-generation-grid h4 {
  margin: 2px 0 0;
  color: #2c4b52;
  font-size: 17px;
}

.book-cpu-generation-grid ol {
  display: grid;
  gap: 0;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: cpu-generation;
}

.book-cpu-generation-grid li {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 11px 0 11px 22px;
  border-top: 1px solid #d5dfe3;
  counter-increment: cpu-generation;
}

.book-cpu-generation-grid li::before {
  content: '';
  position: absolute;
  top: 17px;
  left: 2px;
  width: 8px;
  height: 8px;
  border: 2px solid #5989aa;
  border-radius: 50%;
  background: #fff;
}

.book-cpu-generation-grid > section + section li::before {
  border-color: #c46753;
}

.book-cpu-generation-grid li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 27px;
  bottom: -7px;
  left: 6px;
  width: 1px;
  background: #aabfc9;
}

.book-cpu-generation-grid li b {
  color: #334f56;
  font-size: 12px;
}

.book-cpu-generation-grid li span {
  color: #5e7176;
  font-size: 11px;
  line-height: 1.68;
}

.book-cpu-generation-chart {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid #cbd9d7;
  border-radius: 8px;
  background: #fbfdfd;
  box-shadow: 0 8px 22px rgba(31, 61, 65, .06);
}

.book-cpu-generation-chart-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.book-cpu-generation-chart-heading > div:first-child { max-width: 760px; }

.book-cpu-generation-chart-heading > div:first-child > span {
  display: inline-block;
  margin-bottom: 5px;
  color: #27736f;
  font-size: 12px;
  font-weight: 800;
}

.book-cpu-generation-chart-heading h4 {
  margin: 0;
  color: #173b40;
  font-size: clamp(22px, 2vw, 29px);
  line-height: 1.3;
}

.book-cpu-generation-chart-heading p {
  margin: 8px 0 0;
  color: #52686b;
  font-size: 14px;
  line-height: 1.75;
}

.book-cpu-generation-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  align-items: center;
  margin-top: 9px;
  color: #687a7d;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.book-cpu-generation-meta span,
.book-cpu-generation-meta time {
  white-space: nowrap;
}

.book-cpu-generation-meta b {
  margin-right: 6px;
  color: #315d5d;
  font-weight: 900;
}

.book-cpu-generation-chart-side {
  display: grid;
  flex: 0 0 auto;
  gap: 8px;
  width: 210px;
}

.book-cpu-series-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(78px, 1fr));
  gap: 6px;
  flex: 0 0 auto;
}

.book-cpu-series-legend span,
.book-cpu-series-label {
  border: 1px solid currentColor;
  border-radius: 5px;
  font-weight: 800;
  text-align: center;
}

.book-cpu-series-legend span {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  min-height: 31px;
  padding: 5px 8px;
}

.book-cpu-series-legend b {
  font-size: 9px;
  font-weight: 800;
  opacity: .74;
}

.book-cpu-series-legend em {
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.book-cpu-series-legend .is-tier-9,
.book-cpu-series-label.is-tier-9 { color: #a8463e; background: #faeeec; }
.book-cpu-series-legend .is-tier-7,
.book-cpu-series-label.is-tier-7 { color: #73558f; background: #f4eff8; }
.book-cpu-series-legend .is-tier-5,
.book-cpu-series-label.is-tier-5 { color: #27756f; background: #eaf5f3; }
.book-cpu-series-legend .is-tier-3,
.book-cpu-series-label.is-tier-3 { color: #3c6f99; background: #edf4f9; }

.book-cpu-search-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #2e7773;
  border-radius: 5px;
  color: #fff;
  background: #2e7773;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

.book-cpu-search-link::after {
  content: "›";
  margin-left: 7px;
  font-size: 16px;
  line-height: 1;
}

.book-cpu-search-link:hover,
.book-cpu-search-link:focus-visible {
  border-color: #1f5f5b;
  background: #1f5f5b;
}

.book-cpu-chart-reading {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 15px;
}

.book-cpu-chart-reading > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border-left: 3px solid #8fb8b3;
  background: #f0f6f5;
}

.book-cpu-chart-reading b {
  flex: 0 0 auto;
  color: #244f53;
  font-size: 12px;
}

.book-cpu-chart-reading span {
  color: #647477;
  font-size: 11px;
  line-height: 1.45;
}

.book-cpu-generation-chart-content {
  min-height: 220px;
  margin-top: 18px;
}

.book-cpu-generation-chart-content.is-loading,
.book-cpu-generation-chart-content.is-error {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: #647477;
}

.book-cpu-generation-chart-content.is-loading p,
.book-cpu-generation-chart-content.is-error p {
  margin: 0;
  font-size: 13px;
}

.book-cpu-generation-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid #d7e4e2;
  border-top-color: #2d7b75;
  border-radius: 50%;
  animation: book-cpu-generation-spin .8s linear infinite;
}

@keyframes book-cpu-generation-spin { to { transform: rotate(360deg); } }

.book-cpu-generation-chart-content.is-error button {
  padding: 6px 12px;
  border: 1px solid #86aaa6;
  border-radius: 5px;
  color: #235f5a;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}

.book-cpu-generation-makers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.book-cpu-generation-maker {
  min-width: 0;
  padding: 12px;
  border: 1px solid #d2dddc;
  border-top: 4px solid #438790;
  border-radius: 7px;
  background: #fff;
}

.book-cpu-generation-maker.is-amd { border-top-color: #ba6252; }

.book-cpu-generation-maker > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.book-cpu-generation-maker > header strong {
  color: #234b51;
  font-size: 20px;
}

.book-cpu-generation-maker.is-amd > header strong { color: #8d443b; }

.book-cpu-generation-maker > header span {
  color: #718083;
  font-size: 11px;
}

.book-cpu-generation-axis {
  position: relative;
  height: 25px;
  margin: 8px 178px 0 90px;
  border-bottom: 1px solid #cbd7d6;
}

.book-cpu-generation-axis span {
  position: absolute;
  bottom: 4px;
  transform: translateX(-50%);
  color: #7a888a;
  font-size: 9px;
  white-space: nowrap;
}

.book-cpu-generation-axis span:first-child { transform: none; }
.book-cpu-generation-axis span:last-child { transform: translateX(-100%); }

.book-cpu-generation-cards {
  display: grid;
  gap: 10px;
}

.book-cpu-generation-card {
  overflow: hidden;
  border: 1px solid #dbe4e3;
  border-radius: 6px;
  background: #fcfdfd;
}

.book-cpu-generation-card > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #dce6e4;
  background: #eef5f4;
}

.book-cpu-generation-card h5 {
  margin: 0;
  color: #294d51;
  font-size: 14px;
  line-height: 1.4;
}

.book-cpu-generation-card > header span {
  color: #728083;
  font-size: 9px;
  white-space: nowrap;
}

.book-cpu-generation-series { padding: 6px 8px 8px; }

.book-cpu-generation-series-row {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 35px;
  padding: 2px;
  border-radius: 4px;
  transition: background-color .15s ease, box-shadow .15s ease;
}

.book-cpu-generation-series-row + .book-cpu-generation-series-row { border-top: 1px dashed #e2e9e8; }

.book-cpu-generation-series-row:hover {
  background: #f0f7f6;
  box-shadow: inset 0 0 0 1px #c6dedb;
}

.book-cpu-generation-series-row:focus-within {
  outline: 2px solid #267d76;
  outline-offset: 1px;
}

.book-cpu-generation-combined-link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(90px, 1fr) 60px 104px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding-right: 18px;
  color: inherit;
  text-decoration: none;
}

.book-cpu-generation-combined-link:focus-visible,
.book-cpu-series-label.is-search-link:focus-visible {
  outline: 0;
}

.book-cpu-generation-search-mark {
  position: absolute;
  top: 50%;
  right: 3px;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  color: #28776f;
  transform: translateY(-50%);
}

.book-cpu-generation-search-mark svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.65;
}

.book-cpu-series-label {
  overflow: hidden;
  padding: 3px 4px;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-cpu-series-label.is-search-link {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 2px;
}

.book-cpu-series-label.is-search-link:hover { filter: brightness(.88); }

.book-cpu-generation-plot {
  position: relative;
  height: 17px;
  border-right: 1px solid #d7e0df;
  border-left: 1px solid #d7e0df;
  background-image: linear-gradient(to right, transparent calc(25% - 1px), #e1e8e7 calc(25% - 1px), #e1e8e7 25%, transparent 25%);
  background-size: 25% 100%;
}

.book-cpu-generation-range {
  position: absolute;
  top: 5px;
  left: var(--range-start);
  width: var(--range-width);
  height: 7px;
  border-radius: 4px;
  opacity: .72;
}

.book-cpu-generation-range.is-tier-9 { background: #c85c50; }
.book-cpu-generation-range.is-tier-7 { background: #8b6cad; }
.book-cpu-generation-range.is-tier-5 { background: #319087; }
.book-cpu-generation-range.is-tier-3 { background: #4e85b1; }

.book-cpu-generation-median {
  position: absolute;
  top: 2px;
  left: var(--median-position);
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px currentColor;
}

.book-cpu-generation-median.is-tier-9 { color: #a8463e; background: #c85c50; }
.book-cpu-generation-median.is-tier-7 { color: #73558f; background: #8b6cad; }
.book-cpu-generation-median.is-tier-5 { color: #27756f; background: #319087; }
.book-cpu-generation-median.is-tier-3 { color: #3c6f99; background: #4e85b1; }

.book-cpu-generation-score {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  line-height: 1.05;
}

.book-cpu-generation-score strong {
  color: #344f52;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.book-cpu-generation-score small {
  margin-top: 2px;
  color: #8a9597;
  font-size: 8px;
}

.book-cpu-generation-price {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  min-width: 0;
  line-height: 1.1;
}

.book-cpu-generation-price small {
  color: #788689;
  font-size: 8px;
}

.book-cpu-generation-price strong {
  overflow: hidden;
  width: 100%;
  margin-top: 3px;
  color: #3f5b5e;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-cpu-generation-table-details {
  margin-top: 14px;
  border-top: 1px solid #d6e1df;
}

.book-cpu-generation-table-details summary {
  padding: 12px 4px 3px;
  color: #2c6762;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.book-cpu-generation-table-details .book-cpu-table-wrap { margin-top: 9px; }

.book-cpu-generation-data-table {
  min-width: 1080px;
  font-size: 11px;
}

.book-cpu-generation-table-search-link {
  color: #236f68;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: #8fc5bf;
  text-underline-offset: 3px;
}

.book-cpu-generation-table-search-link:hover { color: #174f4a; }

.book-cpu-generation-table-search-links {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.book-cpu-generation-table-search-link.is-generation {
  padding-left: 8px;
  border-left: 1px solid #c7d8d6;
  color: #607476;
  font-size: 9px;
  text-decoration: none;
}

.book-cpu-generation-chart-note {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: start;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #d6e1df;
}

.book-cpu-generation-chart-note p {
  margin: 0;
  color: #5c6d70;
  font-size: 11px;
  line-height: 1.65;
}

.book-cpu-generation-chart-note strong { color: #315b5e; }

.book-cpu-search-link.is-footer {
  align-self: center;
  min-height: 31px;
  color: #2e6b68;
  background: #fff;
  white-space: nowrap;
}

.book-cpu-search-link.is-footer:hover,
.book-cpu-search-link.is-footer:focus-visible {
  color: #fff;
  background: #2e7773;
}

.book-cpu-name-examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.book-cpu-name-examples > section {
  min-width: 0;
  padding: 17px 18px;
  border: 1px solid #cbd7d5;
  background: #fff;
}

.book-cpu-name-examples header {
  display: grid;
  gap: 3px;
}

.book-cpu-name-examples header span {
  color: #6b7f84;
  font-size: 12px;
  font-weight: 900;
}

.book-cpu-name-examples header strong {
  color: #263f46;
  font-size: 18px;
}

.book-cpu-name-grammar {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 0;
  margin-top: 13px;
  padding: 22px 0 2px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.book-cpu-name-unit {
  display: grid;
  flex: 0 0 auto;
  grid-template-rows: 46px minmax(28px, auto);
  gap: 4px;
  text-align: center;
}

.book-cpu-name-value {
  display: flex;
  height: 46px;
  align-items: stretch;
  white-space: nowrap;
}

.book-cpu-name-value > b {
  display: grid;
  min-width: 34px;
  align-content: center;
  justify-items: center;
  padding: 5px 9px;
  border-bottom: 4px solid #7b9a96;
  background: #eff4f3;
  color: #29464c;
}

.book-cpu-name-value > b {
  font-size: 15px;
  line-height: 1.15;
}

.book-cpu-name-unit > small {
  display: grid;
  min-height: 28px;
  align-content: start;
  justify-content: center;
  color: #48666b;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.25;
}

.book-cpu-name-unit.is-family .book-cpu-name-value > b { border-color: #7b9a96; background: #eff4f3; }
.book-cpu-name-unit.is-tier .book-cpu-name-value > b { border-color: #4b88b1; background: #edf4f8; }
.book-cpu-name-unit.is-generation .book-cpu-name-value > b { border-color: #d38f45; background: #fbf4ea; }
.book-cpu-name-unit.is-model .book-cpu-name-value > b { border-color: #8a75aa; background: #f5f1f8; }
.book-cpu-name-unit.is-suffix .book-cpu-name-value > b { border-color: #c45f4b; background: #faefed; }
.book-cpu-name-unit.is-symbol .book-cpu-name-value > b { min-width: 19px; padding-inline: 3px; border-color: #95a3a6; background: #f3f5f5; }

.book-cpu-name-unit.is-family .book-cpu-name-value > i {
  position: relative;
  flex: 0 0 13px;
}

.book-cpu-name-unit.is-family .book-cpu-name-value > i::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  border-top: 2px dotted #91a2a5;
  transform: translate(-50%, -50%);
}

.book-cpu-name-gap {
  display: grid;
  flex: 0 0 20px;
  height: 46px;
  place-items: center;
}

.book-cpu-name-gap i {
  width: 13px;
  border-top: 2px dotted #91a2a5;
}

.book-cpu-name-sequence {
  position: relative;
  display: flex;
  flex: 0 0 auto;
}

.book-cpu-name-sequence > em {
  position: absolute;
  top: -20px;
  right: 0;
  left: 0;
  color: #5f7479;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.book-cpu-name-sequence .book-cpu-name-unit + .book-cpu-name-unit .book-cpu-name-value > b {
  border-left: 1px solid rgba(77, 91, 96, .18);
}

.book-cpu-name-sequence .book-cpu-name-unit > small {
  padding-inline: 4px;
  border-left: 1px solid #d7e0e1;
}

.book-cpu-name-sequence .book-cpu-name-unit:first-of-type > small {
  border-left: 0;
}

.book-cpu-name-caution {
  margin: 12px 0 0;
  color: #6b7c81;
  font-size: 11px;
  line-height: 1.7;
}

.book-cpu-suffix-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.book-cpu-suffix-grid > section {
  min-width: 0;
  border-top: 3px solid #5486a9;
}

.book-cpu-suffix-grid > section + section {
  border-top-color: #c46651;
}

.book-cpu-suffix-grid header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid #d1dcda;
}

.book-cpu-suffix-grid header span {
  color: #587b91;
  font-size: 13px;
  font-weight: 900;
}

.book-cpu-suffix-grid > section + section header span {
  color: #a65748;
}

.book-cpu-suffix-grid h4 {
  margin: 0;
  color: #304e54;
  font-size: 15px;
}

.book-cpu-suffix-grid dl {
  display: grid;
  margin: 0;
}

.book-cpu-suffix-grid dl div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #dbe3e1;
}

.book-cpu-suffix-grid dt {
  color: #2e555b;
  font-size: 12px;
  font-weight: 900;
}

.book-cpu-suffix-grid dd {
  margin: 0;
  color: #5d7176;
  font-size: 11px;
  line-height: 1.65;
}

.book-cpu-official-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 13px;
}

.book-cpu-official-links a {
  color: #26706a;
  font-size: 11px;
  font-weight: 800;
  text-underline-offset: 3px;
}

.book-cpu-core-basics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}

.book-cpu-core-basics > section {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid #cbd8d6;
  background: #f8faf9;
}

.book-cpu-core-basics b {
  display: block;
  margin-bottom: 3px;
  color: #294f53;
  font-size: 15px;
}

.book-cpu-core-basics p {
  margin: 0;
  color: #5a6e73;
  font-size: 11px;
  line-height: 1.65;
}

.book-cpu-core-visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 8px;
  border: 2px solid #8dafaa;
  background: #eaf3f1;
}

.book-cpu-core-visual i {
  display: block;
  aspect-ratio: 1;
  border: 1px solid #237e75;
  background: #55a49b;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}

.book-cpu-thread-lines {
  display: grid;
  gap: 7px;
  padding: 9px 6px;
  border-left: 5px solid #4f88ad;
  background: #eef4f8;
}

.book-cpu-thread-lines i {
  position: relative;
  display: block;
  height: 5px;
  background: #73a4c3;
}

.book-cpu-thread-lines i::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34789f;
  transform: translateY(-50%);
}

.book-cpu-clock-visual {
  display: grid;
  gap: 7px;
  align-content: center;
  min-height: 56px;
  padding: 8px;
  border: 2px solid #d0a15d;
  background: #fbf3e7;
  text-align: center;
}

.book-cpu-clock-visual span {
  color: #8a5d22;
  font-size: 14px;
  font-weight: 900;
}

.book-cpu-clock-visual i {
  position: relative;
  display: block;
  height: 12px;
  background: repeating-linear-gradient(90deg, #d0923f 0 6px, transparent 6px 10px);
}

.book-cpu-cache-visual {
  display: grid;
  gap: 5px;
  padding: 7px;
  border: 2px solid #9177a0;
  background: #f5f0f8;
}

.book-cpu-cache-visual span {
  display: grid;
  min-height: 20px;
  place-items: center;
  background: #a889b8;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.book-cpu-cache-visual span:last-child {
  min-height: 28px;
  background: #856598;
}

.book-cpu-mixed-core-note {
  margin: -4px 0 17px;
  padding: 10px 13px;
  border-left: 4px solid #6d8796;
  background: #f1f5f7;
  color: #566b72;
  font-size: 11px;
  line-height: 1.7;
}

.book-cpu-mixed-core-note strong {
  color: #35545f;
}

.book-cpu-performance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.book-cpu-performance-grid > section {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 11px 17px;
  min-width: 0;
  padding: 18px;
  border-top: 4px solid #d48e43;
  background: #fbf6ef;
}

.book-cpu-performance-grid > section + section {
  border-top-color: #4d89b2;
  background: #f2f6f9;
}

.book-cpu-performance-grid header span {
  color: #9a682f;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.book-cpu-performance-grid > section + section header span {
  color: #547993;
}

.book-cpu-performance-grid h4 {
  margin: 2px 0 0;
  color: #2c4b52;
  font-size: 18px;
}

.book-cpu-performance-grid p {
  grid-column: 1 / -1;
  margin: 0;
  color: #566c71;
  font-size: 12px;
  line-height: 1.8;
}

.book-cpu-performance-grid ul {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.book-cpu-performance-grid li {
  position: relative;
  padding-left: 14px;
  color: #5a6e73;
  font-size: 11px;
  line-height: 1.55;
}

.book-cpu-performance-grid li::before {
  content: '';
  position: absolute;
  top: .55em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d18c43;
}

.book-cpu-performance-grid > section + section li::before {
  background: #4f88ad;
}

.book-cpu-thread-visual {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  align-self: center;
  height: 54px;
}

.book-cpu-thread-visual span {
  align-self: end;
  height: 22%;
  background: #dcc7a8;
}

.book-cpu-thread-visual.is-single span:first-child {
  height: 100%;
  background: #d18d43;
}

.book-cpu-thread-visual.is-multi span {
  height: 82%;
  background: #5289ad;
}

.book-cpu-thread-visual.is-multi span:nth-child(2) { height: 100%; }
.book-cpu-thread-visual.is-multi span:nth-child(3) { height: 91%; }

.book-cpu-fps-note {
  margin: 13px 0 0;
  padding: 11px 14px;
  border-left: 4px solid #3c8b83;
  background: #edf6f4;
  color: #4c666a;
  font-size: 11px;
  line-height: 1.75;
}

.book-cpu-fps-note strong {
  color: #235d5a;
}

.book-cpu-fps-note b {
  color: #294f53;
}

.book-cpu-benchmark-intro {
  margin-top: 19px;
  padding: 15px 17px;
  border-left: 4px solid #6f66a0;
  background: #f5f3f9;
}

.book-cpu-benchmark-intro h4 {
  margin: 0;
  color: #454064;
  font-size: 15px;
  line-height: 1.5;
}

.book-cpu-benchmark-intro p {
  margin: 6px 0 0;
  color: #646079;
  font-size: 11px;
  line-height: 1.75;
}

.book-cpu-benchmark-flow {
  margin-top: 19px;
  padding: 18px 20px;
  border-top: 1px solid #cbd7d5;
  border-bottom: 1px solid #cbd7d5;
}

.book-cpu-benchmark-flow h4 {
  margin: 0;
  color: #2b4d53;
  font-size: 16px;
}

.book-cpu-benchmark-flow ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}

.book-cpu-benchmark-flow li {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  padding: 0 15px;
  border-left: 1px solid #d3dddb;
}

.book-cpu-benchmark-flow li:first-child {
  padding-left: 0;
  border-left: 0;
}

.book-cpu-benchmark-flow li > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: #287d75;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.book-cpu-benchmark-flow b {
  color: #34555b;
  font-size: 11px;
}

.book-cpu-benchmark-flow p {
  margin: 4px 0 0;
  color: #66797d;
  font-size: 10px;
  line-height: 1.55;
}

.book-cpu-trends {
  margin-top: 20px;
  padding: 19px 20px;
  background: #f3f5f7;
}

.book-cpu-trends header span {
  color: #647b87;
  font-size: 13px;
  font-weight: 900;
}

.book-cpu-trends h4 {
  margin: 3px 0 0;
  color: #304b54;
  font-size: 16px;
}

.book-cpu-trends > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.book-cpu-trends section {
  min-width: 0;
  padding-top: 10px;
  border-top: 3px solid #8098a3;
}

.book-cpu-trends section:nth-child(2) { border-top-color: #9a78aa; }
.book-cpu-trends section:nth-child(3) { border-top-color: #d18d48; }
.book-cpu-trends section:nth-child(4) { border-top-color: #4d8d85; }

.book-cpu-trends b {
  color: #34525a;
  font-size: 12px;
}

.book-cpu-trends p {
  margin: 5px 0 0;
  color: #64767b;
  font-size: 10px;
  line-height: 1.65;
}

.book-cpu-spec-check {
  margin-top: 20px;
  padding: 19px 20px;
  border-top: 4px solid #667e9c;
  background: #f3f6fa;
}

.book-cpu-spec-check header span {
  color: #5e7693;
  font-size: 13px;
  font-weight: 900;
}

.book-cpu-spec-check h4 {
  margin: 3px 0 0;
  color: #2d4853;
  font-size: 16px;
}

.book-cpu-spec-check dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 22px;
  margin: 14px 0 0;
}

.book-cpu-spec-check dl div {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 11px;
  padding: 11px 0;
  border-top: 1px solid #d4dee5;
}

.book-cpu-spec-check dt {
  color: #36535f;
  font-size: 11px;
  font-weight: 900;
}

.book-cpu-spec-check dd {
  margin: 0;
  color: #61747c;
  font-size: 10px;
  line-height: 1.7;
}

.book-cpu-footer.book-cpu-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin: 20px 0 0;
  padding: 0 0 26px;
}

.book-cpu-footer a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 8px 13px;
  border: 1px solid #bad0cc;
  background: #eef6f4;
  color: #1d625d;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

.book-cpu-footer a:first-child {
  border-color: #237e75;
  background: #237e75;
  color: #fff;
}

@media (max-width: 980px) {
  .book-cpu-start-route {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
  }

  .book-cpu-role-grid,
  .book-cpu-generation-grid,
  .book-cpu-performance-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .book-cpu-main-photo img {
    height: auto;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .book-cpu-process-flow {
    grid-template-columns: minmax(130px, .7fr) 24px minmax(160px, .8fr) 24px minmax(250px, 1.4fr);
  }

  .book-cpu-process {
    padding: 15px;
  }

  .book-cpu-family-map,
  .book-cpu-trends > div,
  .book-cpu-benchmark-flow ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-cpu-benchmark-flow li:nth-child(3) {
    padding-top: 13px;
    padding-left: 0;
    border-top: 1px solid #d3dddb;
    border-left: 0;
  }

  .book-cpu-benchmark-flow li:nth-child(4) {
    padding-top: 13px;
    border-top: 1px solid #d3dddb;
  }
}

@media (max-width: 720px) {
  .book-cpu-start-route {
    margin-top: 5px;
    padding: 15px 13px;
  }

  .book-cpu-start-route ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-cpu-start-route li:nth-child(3) {
    border-top: 1px solid #cfddda;
    border-left: 0;
  }

  .book-cpu-start-route li:nth-child(4) {
    border-top: 1px solid #cfddda;
  }

  .book-cpu-section {
    scroll-margin-top: 96px;
    padding: 27px 0 30px;
  }

  .book-cpu-section-heading {
    margin-bottom: 16px;
  }

  .book-cpu-section-heading > h3 {
    font-size: 24px;
  }

  .book-cpu-section-heading > p {
    font-size: 15px;
  }

  .book-cpu-section-heading > span {
    font-size: 13px;
    line-height: 1.75;
  }

  .book-cpu-maker-cards,
  .book-cpu-name-examples,
  .book-cpu-suffix-grid,
  .book-cpu-igpu-makers,
  .book-cpu-socket-policy > div,
  .book-cpu-core-basics {
    grid-template-columns: minmax(0, 1fr);
  }

  .book-cpu-maker-lines > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .book-cpu-process {
    padding: 16px;
  }

  .book-cpu-process-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .book-cpu-process-arrow {
    width: min(220px, 75%);
    justify-self: center;
  }

  .book-cpu-process-arrow i {
    width: 2px;
    height: 24px;
    justify-self: center;
  }

  .book-cpu-process-arrow i::after {
    top: auto;
    right: 50%;
    bottom: -1px;
    transform: translateX(50%) rotate(135deg);
  }

  .book-cpu-process-arrow.is-branch i::before {
    content: none;
  }

  .book-cpu-family-map {
    grid-template-columns: minmax(0, 1fr);
  }

  .book-cpu-nseries > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .book-cpu-generation-note {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .book-cpu-generation-chart {
    padding: 15px 12px;
  }

  .book-cpu-generation-chart-heading {
    display: grid;
    align-items: start;
  }

  .book-cpu-generation-chart-side {
    width: 100%;
  }

  .book-cpu-generation-chart-heading h4 {
    font-size: 22px;
  }

  .book-cpu-series-legend {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }

  .book-cpu-series-legend span {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: 42px;
    padding: 4px 2px;
    line-height: 1.25;
  }

  .book-cpu-series-legend b {
    font-size: 8px;
  }

  .book-cpu-series-legend em {
    font-size: 9px;
  }

  .book-cpu-chart-reading {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .book-cpu-chart-reading > div {
    padding-block: 6px;
  }

  .book-cpu-generation-makers {
    grid-template-columns: minmax(0, 1fr);
  }

  .book-cpu-generation-axis {
    margin-right: 62px;
    margin-left: 85px;
  }

  .book-cpu-generation-series-row {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 6px;
  }

  .book-cpu-generation-combined-link {
    grid-template-columns: minmax(80px, 1fr) 56px;
    gap: 6px;
  }

  .book-cpu-generation-price {
    grid-column: 1 / 3;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 7px;
    padding: 0 0 5px;
  }

  .book-cpu-generation-price strong {
    margin-top: 0;
    font-size: 10px;
    text-align: left;
  }

  .book-cpu-generation-chart-note {
    grid-template-columns: minmax(0, 1fr);
  }

  .book-cpu-generation-data-table {
    min-width: 0;
  }

  .book-cpu-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .book-cpu-table,
  .book-cpu-table tbody,
  .book-cpu-table tr,
  .book-cpu-table th,
  .book-cpu-table td {
    display: block;
    width: 100% !important;
  }

  .book-cpu-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .book-cpu-table tbody {
    display: grid;
    gap: 11px;
  }

  .book-cpu-table tbody tr {
    border: 1px solid #cbd7d5;
    background: #fff;
  }

  .book-cpu-table tbody th {
    box-sizing: border-box;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid #d5dfdd;
    background: #eaf2f0;
    font-size: 13px;
  }

  .book-cpu-table tbody td {
    box-sizing: border-box;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid #e0e7e5;
    font-size: 11px;
  }

  .book-cpu-table tbody td:last-child {
    border-bottom: 0;
  }

  .book-cpu-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: #3b615f;
    font-size: 9px;
    font-weight: 900;
  }

  .book-cpu-name-examples > section {
    padding: 15px 13px;
  }

  .book-cpu-name-grammar {
    padding-top: 20px;
  }

  .book-cpu-name-value > b {
    min-width: 29px;
    padding: 5px 7px;
  }

  .book-cpu-name-value > b {
    font-size: 13px;
  }

  .book-cpu-name-gap {
    flex-basis: 17px;
  }

  .book-cpu-performance-grid > section {
    grid-template-columns: 90px minmax(0, 1fr);
  }

  .book-cpu-trends > div,
  .book-cpu-benchmark-flow ol {
    grid-template-columns: minmax(0, 1fr);
  }

  .book-cpu-benchmark-flow li,
  .book-cpu-benchmark-flow li:first-child,
  .book-cpu-benchmark-flow li:nth-child(3),
  .book-cpu-benchmark-flow li:nth-child(4) {
    padding: 11px 0;
    border-top: 1px solid #d3dddb;
    border-left: 0;
  }

  .book-cpu-benchmark-flow li:first-child {
    border-top: 0;
  }

  .book-cpu-footer.book-cpu-footer {
    display: grid;
  }

  .book-cpu-footer a {
    justify-content: center;
    text-align: center;
  }

  .book-cpu-spec-check dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .book-cpu-spec-check dl div {
    grid-template-columns: 112px minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .book-cpu-start-route ol {
    grid-template-columns: minmax(0, 1fr);
  }

  .book-cpu-start-route li,
  .book-cpu-start-route li:nth-child(4) {
    padding-block: 8px;
    border-top: 1px solid #cfddda;
    border-left: 0;
  }

  .book-cpu-start-route li:first-child {
    border-top: 0;
  }

  .book-cpu-process-results > section {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .book-cpu-socket-policy {
    padding: 15px 13px;
  }

  .book-cpu-socket-policy section {
    grid-template-columns: minmax(0, 1fr);
  }

  .book-cpu-socket-policy section b {
    grid-row: auto;
    width: max-content;
  }

  .book-cpu-point-list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .book-cpu-performance-grid > section {
    grid-template-columns: 76px minmax(0, 1fr);
    padding: 15px;
  }
}

/* Parts guide: dependency order, pattern-based selection, and inline standards. */
.book-selection-overview {
  display: grid;
  grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
  align-items: stretch;
  gap: 26px;
  margin-top: 22px;
}

.book-selection-overview .book-real-figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  margin: 0;
}

.book-selection-overview .book-real-figure img {
  height: 100%;
  min-height: 410px;
  object-fit: contain;
  background: #fff;
}

.book-selection-map {
  padding: 20px;
  border: 1px solid #b9cdca;
  border-top: 4px solid var(--book-green);
  background: #fff;
}

.book-selection-map > header span,
.book-part-role > span,
.book-part-patterns > header span,
.book-part-standards > header span {
  color: var(--book-green);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.45;
}

.book-selection-map > header h3 {
  margin: 2px 0 0;
  color: #1e3c42;
  font-size: 21px;
  line-height: 1.45;
}

.book-selection-map > header p {
  margin: 5px 0 0;
  color: #60757a;
  font-size: 13px;
}

.book-selection-map > ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 11px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.book-selection-map > ol > li {
  position: relative;
  min-width: 0;
  padding: 13px 10px 11px;
  border: 1px solid #ccdad8;
  border-top: 3px solid var(--book-blue);
  background: #f8fbfa;
}

.book-selection-map > ol > li::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -8px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #7a9998;
  border-right: 2px solid #7a9998;
  transform: translateY(-50%) rotate(45deg);
  z-index: 2;
}

.book-selection-map > ol > li:nth-child(4)::after,
.book-selection-map > ol > li:last-child::after {
  display: none;
}

.book-selection-map > ol > li.is-final {
  border-color: #debfae;
  border-top-color: var(--book-coral);
  background: #fff9f5;
}

.book-selection-map li > span {
  position: absolute;
  top: -10px;
  left: 9px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  background: #476c70;
  font-size: 10px;
  font-weight: 900;
}

.book-selection-map li > strong,
.book-selection-map li > small {
  display: block;
  min-width: 0;
}

.book-selection-map li > strong {
  color: #273f45;
  font-size: 13px;
  line-height: 1.4;
}

.book-selection-map li > small {
  margin-top: 4px;
  color: #6e8084;
  font-size: 10px;
  line-height: 1.45;
}

.book-selection-map-note {
  margin: 15px 0 0;
  padding-top: 12px;
  border-top: 1px dashed #bdcecb;
  color: #5c7175;
  font-size: 12px;
  line-height: 1.7;
}

.book-alternative-routes {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}

.book-alternative-routes .book-selection-route {
  padding: 18px 20px;
}

.book-alternative-routes .book-selection-route:nth-child(2) {
  border-top-color: var(--book-coral);
}

.book-alternative-routes .book-selection-route:nth-child(3) {
  border-top-color: var(--book-blue);
}

.book-route-jisako {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  margin-top: 16px;
  padding: 15px 18px;
  border: 1px solid #bdd1cd;
  border-left: 4px solid var(--book-green);
  background: #eef6f4;
}

.book-route-jisako strong {
  display: block;
  color: #23474c;
  font-size: 14px;
  line-height: 1.5;
}

.book-route-jisako p {
  margin: 5px 0 0;
  color: #566d72;
  font-size: 12px;
  line-height: 1.75;
}

.book-route-jisako .book-button {
  min-width: 152px;
  white-space: nowrap;
}

.book-choice-tiebreaker {
  margin-top: 28px;
  padding: 22px 24px 0;
  border-top: 4px solid #467b85;
  border-bottom: 1px solid #d3dfdd;
  background: #f7f9f9;
}

.book-choice-tiebreaker > header > p,
.book-benchmark-basics > div > p,
.book-benchmark-kosupaso > div > p {
  margin: 0 0 5px;
  color: #0b756d;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.45;
}

.book-choice-tiebreaker > header h3,
.book-benchmark-basics > div h3 {
  margin: 0;
  color: #203f45;
  font-size: 21px;
  line-height: 1.5;
}

.book-choice-tiebreaker > header span,
.book-benchmark-basics > div > span {
  display: block;
  margin-top: 7px;
  color: #536b70;
  font-size: 13px;
  line-height: 1.75;
}

.book-choice-tiebreaker > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 18px;
  border-top: 1px solid #d3dfdd;
}

.book-choice-tiebreaker > div > section {
  padding: 16px 18px 16px 0;
}

.book-choice-tiebreaker > div > section + section {
  padding-left: 18px;
  border-left: 1px solid #d3dfdd;
}

.book-choice-tiebreaker section strong {
  color: #2a4d53;
  font-size: 14px;
}

.book-choice-tiebreaker section p {
  margin: 6px 0 0;
  color: #526a70;
  font-size: 12px;
  line-height: 1.8;
}

.book-choice-tiebreaker-note {
  margin: 0 -24px;
  padding: 13px 24px 15px;
  border-top: 1px solid #d3dfdd;
  background: #eaf2f1;
  color: #3e5c62;
  font-size: 12px;
  line-height: 1.75;
}

.book-selection-branches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.book-selection-branches.is-four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.book-selection-branches > section {
  padding: 15px 17px;
  border-top: 3px solid #7d9f9c;
  background: #f3f7f6;
}

.book-choice-photo {
  position: relative;
  height: 150px;
  margin: -15px -17px 14px;
  overflow: hidden;
  background: #dfe7e5;
}

.book-choice-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
}

.book-choice-photo.is-performance img { object-position: 50% 50%; }
.book-choice-photo.is-budget img { object-position: 50% 50%; }
.book-choice-photo.is-capacity img { object-position: 50% 50%; }
.book-choice-photo.is-placement img { object-position: 50% 66%; }

.book-choice-photo figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 7px 11px;
  color: #fff;
  background: rgb(24 48 53 / 84%);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.45;
}

.book-selection-branches > section:nth-child(2) { border-top-color: var(--book-coral); }
.book-selection-branches > section:nth-child(3) { border-top-color: var(--book-blue); }
.book-selection-branches > section:nth-child(4) { border-top-color: #ad8a47; }
.book-selection-branches > section > span {
  color: #49666a;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.4;
}
.book-selection-branches h3 { margin: 4px 0 0; color: #29464b; font-size: 18px; line-height: 1.45; }
.book-selection-branches p { margin: 7px 0 0; color: #617478; font-size: 13px; line-height: 1.75; }

.book-choice-points {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
  color: #526a70;
  font-size: 13px;
  line-height: 1.65;
  list-style: none;
}

.book-choice-points li {
  position: relative;
  padding-left: 13px;
}

.book-choice-points li::before {
  position: absolute;
  top: 0.66em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--book-green);
  content: '';
}

.book-choice-points strong {
  margin-right: 0.45em;
  color: #2e5055;
}

.book-selection-branches .book-choice-result {
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px solid #d5e2df;
  color: #536b70;
}

.book-choice-result strong {
  display: inline-block;
  margin-right: 0.6em;
  color: var(--book-green-dark);
  font-size: 11px;
}

.book-selection-branches .book-choice-tool-tip {
  margin-top: 9px;
  padding: 8px 10px;
  border-left: 3px solid #79a8a1;
  background: #eaf3f1;
  color: #496267;
  font-size: 12px;
  line-height: 1.65;
}

.book-choice-tool-tip a {
  color: var(--book-green-dark);
  font-weight: 900;
  text-underline-offset: 2px;
}

.book-choice-tool-links {
  display: block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #c8ddda;
}

.book-part-selection {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 2px;
  padding: 20px;
  border: 1px solid #c6d5d2;
  border-top: 4px solid var(--book-green);
  background: #fff;
}

.book-part-strategy {
  grid-column: 1 / -1;
  overflow: visible;
  border: 1px solid #b9d1cd;
  border-top: 5px solid #177970;
  background: #fff;
  box-shadow: 0 12px 28px rgb(28 61 66 / 8%);
}

.book-part-strategy > header {
  display: grid;
  gap: 5px;
  padding: 20px 22px 17px;
  background: linear-gradient(125deg, #eaf6f3 0%, #f7fbfa 62%, #fff 100%);
}

.book-part-strategy > header > span {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: #197b72;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
}

.book-part-strategy > header h3 {
  margin: 0;
  color: #1f4146;
  font-size: clamp(20px, 2.4vw, 29px);
  line-height: 1.4;
}

.book-part-strategy > header p {
  max-width: 920px;
  margin: 0;
  color: #506a6f;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.75;
}

.book-part-strategy-goals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border-block: 1px solid #cbdad7;
  background: #cbdad7;
}

.book-part-strategy-goals article {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  min-width: 0;
  padding: 15px 16px;
  background: #fff;
}

.book-part-strategy-goals article > header {
  display: flex;
  gap: 8px;
  align-items: center;
}

.book-part-strategy-goals article > header > span {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #e4f2ef;
  color: #177970;
  font-size: 13px;
  font-weight: 950;
}

.book-part-strategy-goals article.is-performance > header > span::before { content: '↑'; }
.book-part-strategy-goals article.is-cost > header > span::before { content: '¥'; }
.book-part-strategy-goals article.is-appearance > header > span::before { content: '◇'; }
.book-part-strategy-goals article.is-safe > header > span::before { content: '✓'; }

.book-part-strategy-goals article.is-cost > header > span {
  background: #edf3fa;
  color: #49749a;
}

.book-part-strategy-goals article.is-appearance > header > span {
  background: #f3eff8;
  color: #795f91;
}

.book-part-strategy-goals article.is-safe > header > span {
  background: #fff0ec;
  color: #b35a4c;
}

.book-part-strategy-goals h4 {
  margin: 0;
  color: #2b4a4f;
  font-size: 14px;
  line-height: 1.45;
}

.book-part-strategy-goals p {
  margin: 0;
  color: #526a6f;
  font-size: 11px;
  line-height: 1.72;
}

.book-part-strategy-goals small {
  display: block;
  padding-top: 8px;
  border-top: 1px solid #e0e8e6;
  color: #687d81;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.6;
}

.book-part-strategy-lenses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 15px 17px 0;
  overflow: visible;
  border: 1px solid #c7d9d6;
  background: #c7d9d6;
}

.book-part-strategy-lenses > section {
  min-width: 0;
  padding: 13px 15px;
  background: #f3f8f7;
}

.book-part-strategy-lenses > section > header {
  display: flex;
  gap: 7px;
  align-items: center;
}

.book-part-strategy-lenses h4 {
  margin: 0;
  color: #265157;
  font-size: 13px;
}

.book-part-strategy-lenses > section > p {
  margin: 6px 0 0;
  color: #536d71;
  font-size: 11px;
  line-height: 1.7;
}

.book-inline-info {
  position: relative;
  z-index: 4;
}

.book-inline-info summary {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border: 1px solid #7ca8a2;
  border-radius: 50%;
  background: #fff;
  color: #21776f;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  list-style: none;
  cursor: pointer;
}

.book-inline-info summary::-webkit-details-marker {
  display: none;
}

.book-inline-info summary:focus-visible {
  outline: 3px solid rgb(46 133 124 / 28%);
  outline-offset: 2px;
}

.book-inline-info > p {
  position: absolute;
  top: 27px;
  left: -8px;
  z-index: 20;
  width: min(330px, calc(100vw - 48px));
  margin: 0;
  padding: 11px 12px;
  border: 1px solid #93b9b4;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 12px 28px rgb(23 57 62 / 18%);
  color: #526b70;
  font-size: 10px;
  line-height: 1.7;
}

.book-part-strategy-lenses > section:last-child .book-inline-info > p {
  right: -8px;
  left: auto;
}

.book-inline-info > p strong {
  display: block;
  margin-bottom: 3px;
  color: #28545a;
}

.book-part-strategy > footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  padding: 14px 17px 16px;
}

.book-part-strategy > footer > strong {
  color: #31575c;
  font-size: 11px;
}

.book-part-strategy > footer ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.book-part-strategy > footer li {
  display: flex;
  gap: 6px;
  align-items: center;
  color: #566f73;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.45;
}

.book-part-strategy > footer li span {
  display: grid;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: #dfeeea;
  color: #1f746c;
  font-size: 9px;
  font-weight: 900;
}

.book-part-strategy > footer > a {
  padding: 7px 10px;
  border: 1px solid #8bb6b0;
  border-radius: 3px;
  color: #1d6f68;
  font-size: 10px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .book-part-strategy-goals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-part-strategy > footer {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .book-part-strategy > footer > a {
    grid-column: 1 / -1;
    width: fit-content;
  }
}

@media (max-width: 680px) {
  .book-part-strategy > header {
    padding: 17px 14px 14px;
  }

  .book-part-strategy > header h3 {
    font-size: 20px;
  }

  .book-part-strategy > header p {
    font-size: 12px;
  }

  .book-part-strategy-goals,
  .book-part-strategy-lenses {
    grid-template-columns: 1fr;
  }

  .book-part-strategy-goals article {
    padding: 13px 14px;
  }

  .book-part-strategy-lenses {
    margin: 12px 11px 0;
  }

  .book-part-strategy-lenses > section {
    position: relative;
  }

  .book-inline-info {
    position: static;
  }

  .book-inline-info > p,
  .book-part-strategy-lenses > section:last-child .book-inline-info > p {
    top: 42px;
    right: 10px;
    left: 10px;
    width: auto;
  }

  .book-part-strategy > footer {
    grid-template-columns: 1fr;
    padding: 13px 11px 15px;
  }

  .book-part-strategy > footer ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-part-strategy > footer > a {
    grid-column: auto;
    width: 100%;
    text-align: center;
  }
}

/* Part choices: concrete conditions, required specs, and whole-build cost. */
.book-part-choice {
  grid-column: 1 / -1;
}

.book-part-choice .book-cpu-choice-lead h3 {
  margin: 0;
  color: #1f4146;
  font-size: clamp(20px, 2.4vw, 29px);
  line-height: 1.4;
}

.book-part-choice .book-cpu-choice-lead p {
  font-weight: 650;
}

.book-part-choice .book-cpu-purpose-map {
  margin: 18px 18px 0;
}

.book-part-choice .book-cpu-purpose-map > header h4 {
  margin: 3px 0 0;
  color: #244b50;
  font-size: 17px;
  line-height: 1.5;
}

.book-part-choice .book-cpu-purpose-table article h5 {
  color: #31565b;
  font-size: 12px;
  line-height: 1.55;
}

.book-part-choice .book-cpu-purpose-table article.is-key > * {
  background: #f7fbfa;
}

.book-part-choice .book-cpu-purpose-table article.is-key h5 {
  color: #16746b;
}

.book-part-choice .book-part-strategy-lenses {
  margin: 12px 18px 18px;
}

.book-part-choice .book-cpu-choice-total {
  margin-top: 0;
}

.book-ssd-choice-jump {
  display: block;
  width: fit-content;
  margin: 13px 18px 15px auto;
  padding: 9px 13px;
  border: 1px solid #438c84;
  border-radius: 4px;
  background: #edf7f5;
  color: #176e66;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

.book-ssd-choice-jump:hover,
.book-ssd-choice-jump:focus-visible {
  background: #1f756d;
  color: #fff;
  outline: none;
}

.book-ssd-choice-details {
  grid-column: 1 / -1;
  overflow: hidden;
  margin-top: 18px;
  border: 1px solid #bfd5d1;
  border-top: 4px solid #277c73;
  border-radius: 7px;
  background: #fff;
}

.book-ssd-choice-lead {
  padding: 19px 21px 17px;
  border-bottom: 1px solid #d5e2df;
  background: linear-gradient(135deg, #eaf6f4, #fbfcfc 74%);
}

.book-ssd-choice-lead > span,
.book-ssd-storage-plan > header > span,
.book-ssd-choice-checklist > header > span,
.book-ssd-choice-summary > span {
  color: #17766d;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
}

.book-ssd-choice-lead h3 {
  margin: 4px 0 0;
  color: #20454a;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.42;
}

.book-ssd-choice-lead p {
  max-width: 900px;
  margin: 8px 0 0;
  color: #526b70;
  font-size: 12px;
  line-height: 1.8;
}

.book-ssd-choice-lead p strong {
  color: #176e66;
}

.book-ssd-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border-bottom: 1px solid #cadbd8;
  background: #cadbd8;
}

.book-ssd-type-grid article {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 15px 14px 14px;
  background: #fff;
}

.book-ssd-type-grid article.is-recommended {
  background: #f0f8f6;
  box-shadow: inset 0 4px #238077;
}

.book-ssd-type-grid header span {
  display: inline-block;
  width: fit-content;
  padding: 3px 7px;
  border-radius: 999px;
  background: #edf3f2;
  color: #587477;
  font-size: 9px;
  font-weight: 900;
}

.book-ssd-type-grid .is-recommended header span {
  background: #217b72;
  color: #fff;
}

.book-ssd-type-grid h4 {
  margin: 8px 0 0;
  color: #24494e;
  font-size: 16px;
  line-height: 1.35;
}

.book-ssd-type-grid p {
  margin: 8px 0 0;
  color: #5b7175;
  font-size: 11px;
  line-height: 1.72;
}

.book-ssd-type-grid article > strong {
  align-self: end;
  margin-top: 11px;
  padding-top: 8px;
  border-top: 1px solid #dce6e4;
  color: #27736d;
  font-size: 10px;
}

.book-ssd-type-note {
  margin: 0;
  padding: 9px 16px;
  border-bottom: 1px solid #d8e4e2;
  background: #f8faf9;
  color: #6c7e82;
  font-size: 9px;
  line-height: 1.65;
}

.book-ssd-storage-plan,
.book-ssd-choice-checklist {
  padding: 17px 18px 18px;
  border-bottom: 1px solid #d5e2df;
}

.book-ssd-storage-plan > header h4,
.book-ssd-choice-checklist > header h4 {
  margin: 3px 0 0;
  color: #274b50;
  font-size: 17px;
  line-height: 1.45;
}

.book-ssd-storage-plan > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 11px;
  border: 1px solid #cadbd8;
  background: #cadbd8;
}

.book-ssd-storage-plan article {
  padding: 13px 14px;
  background: #fff;
}

.book-ssd-storage-plan article.is-key {
  background: #f0f8f6;
}

.book-ssd-storage-plan article > span {
  display: block;
  color: #718589;
  font-size: 9px;
  font-weight: 900;
}

.book-ssd-storage-plan article > strong {
  display: block;
  margin-top: 3px;
  color: #246d66;
  font-size: 14px;
  line-height: 1.45;
}

.book-ssd-storage-plan article p {
  margin: 6px 0 0;
  color: #5c7276;
  font-size: 11px;
  line-height: 1.7;
}

.book-ssd-hdd-warning {
  display: grid;
  grid-template-columns: minmax(180px, .62fr) minmax(0, 1.38fr);
  gap: 16px;
  align-items: center;
  margin: 16px 18px;
  padding: 13px 15px;
  border: 1px solid #e0c4b5;
  border-left: 5px solid #c76f48;
  background: #fff8f3;
}

.book-ssd-hdd-warning div span {
  display: block;
  color: #a35b3e;
  font-size: 9px;
  font-weight: 900;
}

.book-ssd-hdd-warning div strong {
  display: block;
  margin-top: 3px;
  color: #75452f;
  font-size: 14px;
  line-height: 1.5;
}

.book-ssd-hdd-warning p {
  margin: 0;
  color: #6b5d55;
  font-size: 11px;
  line-height: 1.75;
}

.book-ssd-choice-checklist {
  border-top: 1px solid #d5e2df;
}

.book-ssd-choice-checklist > header p {
  margin: 6px 0 0;
  color: #61767a;
  font-size: 11px;
  line-height: 1.7;
}

.book-ssd-choice-checklist ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 12px 0 0;
  padding: 0;
  border: 1px solid #cbdad7;
  background: #cbdad7;
  list-style: none;
  counter-reset: ssd-choice-order;
}

.book-ssd-choice-checklist li {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 3px 9px;
  align-content: start;
  padding: 11px 12px;
  background: #fff;
  counter-increment: ssd-choice-order;
}

.book-ssd-choice-checklist li::before {
  grid-row: 1 / span 2;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: #2b7d75;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  content: counter(ssd-choice-order);
}

.book-ssd-choice-checklist li b {
  color: #285359;
  font-size: 12px;
  line-height: 1.45;
}

.book-ssd-choice-checklist li span {
  color: #607579;
  font-size: 10px;
  line-height: 1.6;
}

.book-ssd-choice-summary {
  display: grid;
  grid-template-columns: minmax(180px, .65fr) minmax(0, 1.35fr);
  gap: 5px 18px;
  align-items: start;
  padding: 15px 18px;
  background: #eaf6f4;
}

.book-ssd-choice-summary > span {
  grid-column: 1;
}

.book-ssd-choice-summary > strong {
  grid-column: 1;
  color: #205f5a;
  font-size: 13px;
  line-height: 1.55;
}

.book-ssd-choice-summary > p {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  color: #526c70;
  font-size: 11px;
  line-height: 1.75;
}

.book-hdd-capacity-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 18px;
  align-items: center;
  margin: 16px 18px;
  padding: 14px 15px;
  border: 1px solid #98c4bd;
  border-left: 5px solid #217d74;
  background: #f0f8f6;
  color: inherit;
  text-decoration: none;
}

.book-hdd-capacity-link > span,
.book-hdd-capacity-link > strong,
.book-hdd-capacity-link > p {
  grid-column: 1;
}

.book-hdd-capacity-link > span {
  color: #28776f;
  font-size: 9px;
  font-weight: 900;
}

.book-hdd-capacity-link > strong {
  color: #24565a;
  font-size: 14px;
  line-height: 1.5;
}

.book-hdd-capacity-link > p {
  margin: 0;
  color: #5a7275;
  font-size: 10px;
  line-height: 1.65;
}

.book-hdd-capacity-link > b {
  grid-column: 2;
  grid-row: 1 / span 3;
  padding: 8px 11px;
  border: 1px solid #438c84;
  border-radius: 4px;
  background: #fff;
  color: #176e66;
  font-size: 10px;
  white-space: nowrap;
}

.book-hdd-capacity-link:hover,
.book-hdd-capacity-link:focus-visible {
  border-color: #438c84;
  background: #e6f4f1;
  outline: none;
}

.book-hdd-capacity-link:hover > b,
.book-hdd-capacity-link:focus-visible > b {
  background: #1f756d;
  color: #fff;
}

.book-ssd-choice-details > .book-part-references {
  padding: 9px 16px 11px;
  border-top: 1px solid #d4e1df;
}

@media (max-width: 620px) {
  .book-ssd-choice-jump {
    width: auto;
    margin: 12px;
    text-align: center;
  }

  .book-ssd-choice-lead {
    padding: 16px 14px 14px;
  }

  .book-ssd-choice-lead h3 {
    font-size: 20px;
  }

  .book-ssd-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-ssd-storage-plan,
  .book-ssd-choice-checklist {
    padding: 15px 12px;
  }

  .book-ssd-storage-plan > div,
  .book-ssd-choice-checklist ol {
    grid-template-columns: 1fr;
  }

  .book-ssd-hdd-warning,
  .book-ssd-choice-summary {
    grid-template-columns: 1fr;
    margin-right: 12px;
    margin-left: 12px;
  }

  .book-ssd-choice-summary {
    margin: 0;
    padding: 14px;
  }

  .book-ssd-choice-summary > span,
  .book-ssd-choice-summary > strong,
  .book-ssd-choice-summary > p {
    grid-column: 1;
    grid-row: auto;
  }

  .book-hdd-capacity-link {
    grid-template-columns: 1fr;
    gap: 4px;
    margin: 12px;
    padding: 13px;
  }

  .book-hdd-capacity-link > b {
    grid-column: 1;
    grid-row: auto;
    width: fit-content;
    margin-top: 6px;
  }
}

@media (max-width: 390px) {
  .book-ssd-type-grid {
    grid-template-columns: 1fr;
  }
}

/* Memory: decide capacity from measured use before comparing kits and speed. */
.book-memory-capacity-guide {
  margin: 18px 18px 0;
  border: 1px solid #c8d9d6;
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
}

.book-memory-capacity-stage .book-memory-capacity-guide {
  margin: 0;
}

.book-memory-capacity-guide > header {
  padding: 17px 18px 15px;
  border-bottom: 1px solid #d8e4e2;
  background: linear-gradient(135deg, #edf7f5, #f9fbfb 72%);
}

.book-memory-capacity-guide > header > span,
.book-memory-capacity-now > header > span {
  color: #18766d;
  font-size: 10px;
  font-weight: 900;
}

.book-memory-capacity-guide > header h4 {
  margin: 3px 0 0;
  color: #214a4e;
  font-size: 19px;
  line-height: 1.45;
}

.book-memory-capacity-guide > header p,
.book-memory-capacity-now > header p {
  max-width: 940px;
  margin: 5px 0 0;
  color: #5b7174;
  font-size: 12px;
  line-height: 1.75;
}

.book-memory-measure-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  padding: 15px 16px;
}

.book-memory-measure-steps,
.book-memory-manual-calc {
  padding: 14px 15px;
  border: 1px solid #d7e2e0;
  border-radius: 5px;
  background: #fbfdfd;
}

.book-memory-method-label {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: -14px -15px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid #cadbd8;
  border-radius: 5px 5px 0 0;
  background: #eaf5f3;
  color: #365f60;
  font-size: 13px;
  line-height: 1.4;
}

.book-memory-method-label span {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 3px;
  background: #327e77;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.book-memory-method-label strong {
  font-weight: 900;
}

.book-memory-measure-steps > header h5,
.book-memory-manual-calc > header h5,
.book-memory-capacity-now > header h5 {
  margin: 2px 0 0;
  color: #294e52;
  font-size: 15px;
  line-height: 1.5;
}

.book-memory-measure-steps ol {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.book-memory-measure-steps li {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.book-memory-measure-steps li > span {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 50%;
  background: #2b8078;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.book-memory-measure-steps li strong {
  display: block;
  color: #2e5053;
  font-size: 12px;
  line-height: 1.5;
}

.book-memory-measure-steps li p {
  margin: 3px 0 0;
  color: #607477;
  font-size: 11px;
  line-height: 1.68;
}

.book-memory-measure-steps kbd {
  display: inline-block;
  min-width: 22px;
  padding: 1px 4px;
  border: 1px solid #aebfbd;
  border-bottom-width: 2px;
  border-radius: 3px;
  background: #fff;
  color: #365855;
  font-family: inherit;
  font-size: .92em;
  font-weight: 850;
  text-align: center;
}

.book-memory-manual-calc {
  border-color: #d8d8c7;
  background: #fffef9;
}

.book-memory-manual-calc > header .book-memory-method-label {
  border-color: #cadbd8;
  background: #eaf5f3;
  color: #365f60;
  font-size: 13px;
  line-height: 1.4;
}

.book-memory-manual-calc > header .book-memory-method-label span {
  background: #327e77;
}

.book-memory-manual-calc > header h5 {
  color: #294e52;
}

.book-memory-manual-calc > header p {
  margin: 5px 0 0;
  color: #607477;
  font-size: 10.5px;
  line-height: 1.68;
}

.book-memory-manual-calc > header p strong {
  color: #2f746c;
}

.book-memory-calculator {
  margin-top: 13px;
  border: 1px solid #cfdddb;
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
}

.book-memory-calculator > header {
  padding: 11px 12px 10px;
  border-bottom: 1px solid #d6e3e1;
  background: linear-gradient(135deg, #eaf7f4, #f8fbfa);
}

.book-memory-calculator > header > span {
  color: #2f7d74;
  font-size: 8px;
  font-weight: 900;
}

.book-memory-calculator > header h6 {
  margin: 1px 0 0;
  color: #285a57;
  font-size: 16px;
  line-height: 1.4;
}

.book-memory-calculator > header p {
  margin: 3px 0 0;
  color: #5b7472;
  font-size: 9.5px;
  line-height: 1.6;
}

.book-memory-calculator-basis {
  display: grid;
  grid-template-columns: minmax(125px, .7fr) 25px minmax(0, 1.3fr);
  gap: 8px;
  padding: 11px 12px;
  border-bottom: 1px solid #e0e8e7;
  background: #fbfdfd;
}

.book-memory-calculator-basis > div,
.book-memory-calculator-basis > label {
  display: grid;
  gap: 3px;
  align-content: start;
}

.book-memory-calculator-basis span,
.book-memory-calculator-search label > span {
  color: #5d7472;
  font-size: 8.5px;
  font-weight: 900;
}

.book-memory-calculator-basis strong {
  color: #285d59;
  font-size: 12px;
}

.book-memory-calculator-basis small {
  color: #758681;
  font-size: 8px;
}

.book-memory-calculator-setting-plus {
  display: grid;
  min-width: 22px;
  place-items: center;
  color: #2f8279;
  font-size: 20px;
  font-style: normal;
  font-weight: 900;
}

.book-memory-calculator select,
.book-memory-calculator input[type="search"] {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid #b9cbc8;
  border-radius: 4px;
  background: #fff;
  color: #365b58;
  font: inherit;
  font-size: 10px;
}

.book-memory-calculator select:focus,
.book-memory-calculator input[type="search"]:focus {
  border-color: #2f8279;
  outline: 2px solid rgba(47, 130, 121, .16);
  outline-offset: 1px;
}

.book-memory-calculator-picker {
  padding: 11px 12px 12px;
  border-bottom: 1px solid #e0e8e7;
}

.book-memory-calculator-search {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(120px, .8fr);
  gap: 7px;
}

.book-memory-calculator-search label {
  display: grid;
  gap: 4px;
}

.book-calculator-search-help {
  margin: 7px 0 0;
  color: #637a77;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1.6;
}

.book-memory-calculator-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 8px 0 6px;
  color: #687b78;
  font-size: 8px;
}

.book-memory-calculator-legend span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.book-memory-calculator-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2f8279;
}

.book-memory-calculator-legend i.is-extra {
  background: #b47a25;
}

.book-memory-calculator-results {
  display: grid;
  gap: 5px;
  max-height: 320px;
  padding-right: 3px;
  overflow: auto;
  scrollbar-color: #afc5c1 #edf4f2;
}

.book-memory-calculator-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
  align-items: stretch;
}

.book-memory-calculator-result > button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid #ccdcda;
  border-left: 3px solid #2f8279;
  border-radius: 3px;
  background: #fbfefd;
  color: #345d59;
  text-align: left;
  cursor: pointer;
}

.book-memory-calculator-result.is-extra > button {
  border-color: #e1d7bd;
  border-left-color: #b47a25;
  background: #fffdf8;
  color: #6b562f;
}

.book-memory-calculator-result > button:hover,
.book-memory-calculator-result > button:focus-visible {
  border-color: #2f8279;
  background: #edf8f6;
  outline: none;
}

.book-memory-calculator-result.is-extra > button:hover,
.book-memory-calculator-result.is-extra > button:focus-visible {
  border-color: #b47a25;
  background: #fff7e6;
}

.book-memory-calculator-result > button:disabled {
  border-color: #d9e0df;
  background: #f2f4f4;
  color: #82908e;
  cursor: default;
}

.book-memory-calculator-result > button strong {
  font-size: 9.5px;
  line-height: 1.4;
}

.book-memory-calculator-result > button span {
  color: #2f776f;
  font-size: 8px;
  font-weight: 900;
  white-space: nowrap;
}

.book-memory-calculator-result.is-extra > button span {
  color: #9b681d;
}

.book-memory-calculator-result > button small {
  grid-column: 1 / -1;
  color: #748481;
  font-size: 8px;
  line-height: 1.45;
}

.book-memory-calculator-result > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 7px;
  border: 1px solid #cfdcda;
  border-radius: 3px;
  color: #48736f;
  font-size: 8px;
  font-weight: 900;
  text-decoration: none;
}

.book-memory-calculator-result > a:hover,
.book-memory-calculator-result > a:focus-visible {
  background: #eaf5f3;
  outline: none;
}

.book-memory-calculator-selected {
  padding: 11px 12px;
  border-bottom: 1px solid #e0e8e7;
}

.book-memory-calculator-selected > header {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.book-memory-calculator-selected > header strong {
  color: #456763;
  font-size: 9px;
}

.book-memory-calculator-selected > header button,
.book-memory-calculator-selected article > button {
  padding: 4px 7px;
  border: 1px solid #c7d4d2;
  border-radius: 3px;
  background: #fff;
  color: #5d7471;
  font-size: 8px;
  font-weight: 900;
  cursor: pointer;
}

.book-memory-calculator-selected > header button:disabled {
  opacity: .45;
  cursor: default;
}

.book-memory-calculator-selected [data-memory-selected] {
  display: grid;
  gap: 4px;
}

.book-memory-calculator-selected article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
  align-items: center;
  padding: 7px 8px;
  border-left: 3px solid #2f8279;
  background: #f2f8f7;
}

.book-memory-calculator-selected article.is-extra {
  border-left-color: #b47a25;
  background: #fff9ec;
}

.book-memory-calculator-selected article strong,
.book-memory-calculator-selected article small {
  display: block;
}

.book-memory-calculator-selected article strong {
  color: #365f5b;
  font-size: 9px;
}

.book-memory-calculator-selected article small {
  margin-top: 2px;
  color: #758783;
  font-size: 7.5px;
  line-height: 1.4;
}

.book-memory-calculator-selected article > span {
  color: #2f776f;
  font-size: 8px;
  font-weight: 900;
  white-space: nowrap;
}

.book-memory-calculator-selected article.is-extra > span {
  color: #9b681d;
}

.book-memory-calculator-empty {
  margin: 0;
  padding: 9px;
  border: 1px dashed #cbd8d6;
  color: #738582;
  font-size: 8.5px;
  line-height: 1.55;
}

.book-memory-calculator-output {
  display: grid;
  grid-template-columns: minmax(128px, .7fr) minmax(0, 1.3fr);
  gap: 10px;
  padding: 12px;
  background: #eaf7f4;
}

.book-memory-calculator-answer {
  display: grid;
  align-content: center;
  padding-right: 10px;
  border-right: 1px solid #bdd7d2;
}

.book-memory-calculator-answer > span {
  color: #36736d;
  font-size: 9px;
  font-weight: 900;
}

.book-memory-calculator-answer > strong {
  color: #087267;
  font-size: 15px;
  line-height: 1.05;
}

.book-memory-calculator-answer > strong b {
  font-size: 29px;
}

.book-memory-calculator-answer > small {
  margin-top: 4px;
  color: #557b76;
  font-size: 8px;
  font-weight: 800;
}

.book-memory-calculator-output dl {
  display: grid;
  gap: 2px;
  margin: 0;
}

.book-memory-calculator-output dl > div {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px dotted #b7cfca;
}

.book-memory-calculator-output dt,
.book-memory-calculator-output dd {
  margin: 0;
  color: #4f706c;
  font-size: 8px;
}

.book-memory-calculator-output dd {
  color: #286a63;
  font-weight: 900;
}

.book-memory-calculator-output > p {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 7px;
  border-top: 1px solid #c6dcd8;
  color: #4f716d;
  font-size: 8.5px;
  line-height: 1.55;
}

.book-memory-calculator-notes {
  border-top: 1px solid #d8e3e1;
  background: #f8fbfa;
}

.book-memory-calculator-notes summary {
  padding: 9px 12px;
  color: #476c68;
  font-size: 8.5px;
  font-weight: 900;
  cursor: pointer;
}

.book-memory-calculator-notes p {
  margin: 0;
  padding: 0 12px 9px;
  color: #657b78;
  font-size: 8.5px;
  line-height: 1.6;
}

.book-memory-calculator.is-standalone {
  margin: 0 16px 15px;
  overflow: hidden;
  border-color: #b9d4d0;
  box-shadow: 0 8px 24px rgba(44, 91, 84, .08);
}

.book-memory-capacity-guide > .book-memory-calculator.is-standalone {
  margin: 15px 16px 0;
}

.book-memory-calculator-heading {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px 14px !important;
}

.book-memory-calculator-heading > div > span {
  color: #2f7d74;
  font-size: 9px;
  font-weight: 900;
}

.book-memory-calculator-heading h5 {
  margin: 2px 0 0;
  color: #285a57;
  font-size: 19px;
  line-height: 1.4;
}

.book-memory-calculator-heading p {
  margin: 3px 0 0;
  color: #5b7472;
  font-size: 10.5px;
  line-height: 1.6;
}

.book-memory-calculator-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(340px, 1fr);
  border-bottom: 1px solid #d6e3e1;
  background: #fbfdfd;
}

.book-memory-calculator-settings .book-memory-calculator-basis {
  border: 0;
}

.book-memory-calculator-settings > .book-memory-calculator-setting-plus {
  border-right: 1px solid #dfe8e6;
  border-left: 1px solid #dfe8e6;
  background: #f2f8f7;
}

.book-memory-calculator-add-tab {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 11px 12px 0;
  background: linear-gradient(135deg, #f7fbfa, #edf7f5);
}

.book-memory-calculator-add-tab > span {
  display: block;
  margin-bottom: 7px;
  color: #365f5a;
  font-size: 10px;
  font-weight: 900;
}

.book-memory-calculator-add-tab > button {
  position: relative;
  z-index: 2;
  display: inline-flex;
  width: min(290px, 100%);
  min-height: 50px;
  gap: 9px;
  align-items: center;
  justify-content: center;
  margin-bottom: -1px;
  padding: 10px 18px 11px;
  border: 1px solid #12685f;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(135deg, #23877d, #176a62);
  box-shadow: 0 5px 14px rgba(25, 105, 96, .24), inset 0 1px 0 rgba(255, 255, 255, .18);
  color: #fff;
  cursor: pointer;
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.book-memory-calculator-add-tab > button::after {
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 4px;
  background: inherit;
  content: '';
  pointer-events: none;
}

.book-memory-calculator-add-tab > button::before {
  position: absolute;
  right: -1px;
  bottom: -3px;
  left: -1px;
  height: 3px;
  border-right: 1px solid #12685f;
  border-left: 1px solid #12685f;
  content: '';
  pointer-events: none;
}

.book-memory-calculator-add-tab > button > span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
}

.book-memory-calculator-add-tab > button > strong {
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .02em;
}

.book-memory-calculator-add-tab > button:hover,
.book-memory-calculator-add-tab > button:focus-visible {
  background: linear-gradient(135deg, #176f67, #0f5d56);
  box-shadow: 0 7px 18px rgba(20, 91, 83, .3), inset 0 1px 0 rgba(255, 255, 255, .2);
  outline: 3px solid rgba(30, 126, 116, .2);
  outline-offset: -3px;
  transform: translateY(-1px);
}

.book-memory-calculator-add-tab > button:active {
  box-shadow: 0 3px 9px rgba(20, 91, 83, .24);
  transform: translateY(0);
}

.book-memory-calculator-warning {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  margin: 11px 12px 0;
  padding: 9px 10px;
  border: 1px solid #dfc681;
  border-left: 4px solid #b87817;
  border-radius: 3px;
  background: #fff8e6;
  color: #6f572e;
  font-size: 9px;
  line-height: 1.55;
}

.book-memory-calculator-warning[hidden],
.book-memory-modal-warning[hidden] {
  display: none;
}

.book-memory-calculator-warning strong {
  color: #8b5b0e;
  white-space: nowrap;
}

.book-memory-calculator.is-standalone .book-memory-calculator-selected {
  position: relative;
  z-index: 1;
  margin: 0 12px 12px;
  padding: 12px;
  border: 1px solid #c6d9d5;
  border-top: 3px solid #2b8078;
  border-radius: 0 4px 4px 4px;
  background: #fff;
}

.book-memory-calculator.is-standalone .book-memory-calculator-warning {
  margin: 0 12px 12px;
}

.book-memory-calculator-selected > header > div {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.book-memory-calculator-selected > header > div > span {
  color: #6d817e;
  font-size: 8.5px;
  font-weight: 900;
}

.book-memory-calculator-selected-heading > span {
  padding: 3px 7px;
  border: 1px solid #bed5d1;
  border-radius: 999px;
  background: #eef8f6;
  color: #3e746f !important;
  white-space: nowrap;
}

.book-memory-calculator-selected-heading > span > b {
  color: #126e65;
  font-size: 10px;
}

.book-memory-calculator.is-standalone .book-memory-calculator-selected [data-memory-selected] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.book-memory-calculator.is-standalone .book-memory-calculator-empty {
  grid-column: 1 / -1;
}

.book-memory-calculator-result-frame {
  position: relative;
  margin: 12px;
  border: 2px solid #83b3ad;
  border-top-width: 3px;
  border-radius: 6px;
  background: #eff8f6;
  box-shadow: 0 4px 14px rgba(43, 102, 94, .08);
}

.book-memory-calculator-result-frame > h6 {
  position: absolute;
  z-index: 2;
  top: -14px;
  left: 13px;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid #2b8078;
  border-radius: 999px;
  background: #fff;
  color: #246e67;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.3;
}

.book-memory-calculator-equation {
  display: flex;
  gap: 6px;
  align-items: stretch;
  padding: 20px 12px 14px;
  border-bottom: 1px solid #cfe0dd;
  background: #eff8f6;
  overflow-x: auto;
  scrollbar-width: thin;
}

.book-memory-calculator-equation > div {
  display: grid;
  min-width: 108px;
  flex: 1 0 108px;
  gap: 2px;
  align-content: center;
  padding: 10px;
  border: 1px solid #c8dbd8;
  border-radius: 4px;
  background: #fff;
  text-align: center;
}

.book-memory-calculator-equation > div > span {
  color: #607a76;
  font-size: 8px;
  font-weight: 900;
}

.book-memory-calculator-equation > div > strong {
  color: #2d6e67;
  font-size: 11px;
  line-height: 1.1;
}

.book-memory-calculator-equation > div > strong b {
  font-size: 22px;
}

.book-memory-calculator-equation > div > small {
  min-height: 24px;
  color: #748783;
  font-size: 7.5px;
  line-height: 1.45;
}

.book-memory-calculator-equation > i {
  display: grid;
  min-width: 18px;
  place-items: center;
  color: #51827c;
  font-size: 19px;
  font-style: normal;
  font-weight: 900;
}

.book-memory-calculator-equation > div.is-margin {
  border-color: #dfd2ae;
  background: #fffaf0;
}

.book-memory-calculator-equation > div.is-apps {
  min-width: 200px;
  flex-grow: 1.45;
  align-content: start;
}

.book-memory-calculator-equation > div.is-apps > [data-memory-added-detail] {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin: 5px 0 0;
  padding: 6px 0 0;
  border-top: 1px dotted #b8d0cc;
  color: #647d79;
  font-size: 7px;
  line-height: 1.35;
}

.book-memory-calculator-equation > div.is-apps > [data-memory-added-detail] > i {
  color: #6b8581;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
}

.book-memory-calculator-equation > div.is-apps > [data-memory-added-detail] > b {
  color: #2c716a;
  font-size: 8px;
  white-space: nowrap;
}

.book-memory-calculator-equation > div.is-margin strong {
  color: #8a641e;
}

.book-memory-calculator-equation > div.is-total {
  border-style: dashed;
}

.book-memory-calculator-equation > div.is-result {
  min-width: 126px;
  border-color: #19766d;
  background: #19766d;
}

.book-memory-calculator-equation > div.is-result span,
.book-memory-calculator-equation > div.is-result strong,
.book-memory-calculator-equation > div.is-result small {
  color: #fff;
}

.book-memory-calculator-equation > div.is-result strong b {
  font-size: 29px;
}

.book-memory-calculator-equation > i.is-arrow {
  color: #19766d;
  font-size: 23px;
}

.book-memory-calculator-reason {
  margin: 0;
  padding: 10px 12px;
  color: #4f716d;
  font-size: 9px;
  line-height: 1.6;
}

.book-memory-calculator-dialog {
  width: min(760px, calc(100vw - 32px));
  max-width: none;
  max-height: min(760px, calc(100dvh - 32px));
  margin: auto;
  padding: 0;
  border: 1px solid #a9c6c1;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(26, 55, 51, .3);
  overflow: hidden;
}

.book-memory-calculator-dialog::backdrop {
  background: rgba(20, 40, 37, .58);
  backdrop-filter: blur(2px);
}

.book-memory-calculator-dialog-panel {
  display: flex;
  max-height: min(760px, calc(100dvh - 32px));
  flex-direction: column;
}

.book-memory-calculator-dialog-panel > header {
  display: flex;
  gap: 14px;
  align-items: start;
  justify-content: space-between;
  padding: 14px 15px 12px;
  border-bottom: 1px solid #d7e4e1;
  background: #edf8f6;
}

.book-memory-calculator-dialog-panel > header span {
  color: #2f7d74;
  font-size: 8px;
  font-weight: 900;
}

.book-memory-calculator-dialog-panel > header h6 {
  margin: 2px 0 0;
  color: #285a57;
  font-size: 17px;
}

.book-memory-calculator-dialog-panel > header p {
  margin: 3px 0 0;
  color: #5b7472;
  font-size: 9.5px;
  line-height: 1.55;
}

.book-memory-calculator-dialog-panel > header button {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid #b9cbc8;
  border-radius: 50%;
  background: #fff;
  color: #4f706c;
  font-size: 19px;
  cursor: pointer;
}

.book-memory-calculator-dialog-panel > header button:hover,
.book-memory-calculator-dialog-panel > header button:focus-visible {
  border-color: #267a71;
  color: #176960;
  outline: 2px solid rgba(38, 122, 113, .15);
}

.book-memory-calculator-dialog .book-memory-calculator-picker {
  min-height: 0;
  flex: 1 1 auto;
  padding: 12px 14px;
  overflow: hidden;
}

.book-memory-calculator-dialog .book-memory-calculator-results {
  max-height: min(480px, 54dvh);
  padding: 1px 4px 1px 1px;
}

.book-memory-calculator-dialog .book-memory-calculator-result > button {
  padding: 10px 11px;
}

.book-memory-calculator-dialog .book-memory-calculator-result > button strong {
  font-size: 10.5px;
}

.book-memory-calculator-dialog .book-memory-calculator-result > button small,
.book-memory-calculator-dialog .book-memory-calculator-result > button span,
.book-memory-calculator-dialog .book-memory-calculator-result > a {
  font-size: 8.5px;
}

.book-memory-modal-warning {
  margin: 0 0 7px;
  padding: 8px 9px;
  border: 1px solid #dfc681;
  border-left: 4px solid #b87817;
  border-radius: 3px;
  background: #fff8e6;
  color: #6f572e;
  font-size: 9px;
  line-height: 1.55;
}

.book-memory-calculator-dialog-panel > footer {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid #d7e4e1;
  background: #f7faf9;
}

.book-memory-calculator-dialog-panel > footer > span {
  color: #607773;
  font-size: 9px;
}

.book-memory-calculator-dialog-panel > footer > button {
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid #19766d;
  border-radius: 4px;
  background: #19766d;
  color: #fff;
  font-size: 9.5px;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 820px) {
  .book-memory-calculator-settings {
    grid-template-columns: 1fr;
  }

  .book-memory-calculator-settings .book-memory-calculator-basis {
    border-bottom: 1px solid #dfe8e6;
  }

  .book-memory-calculator-settings > .book-memory-calculator-setting-plus {
    min-height: 28px;
    border: 0;
    border-bottom: 1px solid #dfe8e6;
  }
}

.book-memory-manual-formula {
  display: grid;
  gap: 3px;
  margin-top: 11px;
  padding: 10px 11px;
  border: 1px solid #dfd1ac;
  border-radius: 4px;
  background: #fff8e7;
}

.book-memory-manual-formula span {
  color: #9b6812;
  font-size: 8px;
  font-weight: 900;
}

.book-memory-manual-formula strong {
  color: #6e4d15;
  font-size: 11px;
  line-height: 1.5;
}

.book-memory-manual-formula small {
  color: #786a50;
  font-size: 9px;
  line-height: 1.55;
}

.book-memory-manual-calc > ol {
  display: grid;
  gap: 7px;
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
}

.book-memory-manual-calc > ol li {
  padding-left: 10px;
  border-left: 3px solid #d4b76f;
}

.book-memory-manual-calc > ol b {
  display: block;
  color: #675636;
  font-size: 10.5px;
  line-height: 1.45;
}

.book-memory-manual-calc > ol p {
  margin: 2px 0 0;
  color: #716a59;
  font-size: 10px;
  line-height: 1.6;
}

.book-memory-manual-apps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 11px;
  border: 1px solid #ddd8c8;
  background: #ddd8c8;
}

.book-memory-manual-apps > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 7px;
  padding: 8px 9px;
  background: #fff;
}

.book-memory-manual-apps > div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.book-memory-manual-apps strong {
  color: #5f5948;
  font-size: 9px;
}

.book-memory-manual-apps span {
  color: #986815;
  font-size: 10px;
  font-weight: 900;
}

.book-memory-manual-apps small {
  grid-column: 1 / -1;
  color: #7a7568;
  font-size: 8px;
  line-height: 1.45;
}

.book-memory-manual-examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
}

.book-memory-manual-examples p {
  margin: 0;
  padding: 8px 9px;
  border-radius: 3px;
  background: #f2efe6;
  color: #665e4b;
  font-size: 9px;
  line-height: 1.55;
}

.book-memory-manual-examples span {
  display: block;
  margin-bottom: 2px;
  color: #83601f;
  font-size: 8px;
  font-weight: 900;
}

.book-memory-manual-examples strong {
  color: #2b716a;
}

.book-memory-reading-note {
  padding: 14px 15px;
  border-left: 4px solid #dc7359;
  border-radius: 4px;
  background: #fff8f4;
}

.book-memory-reading-note.is-wide {
  margin: 0 16px 15px;
}

.book-memory-reading-note.is-wide dl,
.book-memory-reading-note.is-inside dl {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.book-memory-reading-note.is-inside {
  margin-top: 12px;
  padding: 12px;
}

@media (max-width: 820px) {
  .book-memory-measure-layout {
    grid-template-columns: 1fr;
  }
}

.book-memory-reading-note > strong {
  color: #7d4c3e;
  font-size: 12px;
}

.book-memory-reading-note dl {
  display: grid;
  gap: 1px;
  margin: 10px 0 0;
  background: #eadbd6;
}

.book-memory-reading-note dl > div {
  padding: 9px 10px;
  background: rgba(255, 255, 255, .78);
}

.book-memory-reading-note dt {
  color: #7c4f42;
  font-size: 10px;
  font-weight: 900;
}

.book-memory-reading-note dd,
.book-memory-reading-note > p,
.book-memory-reading-note details p {
  margin: 3px 0 0;
  color: #6d5b56;
  font-size: 10.5px;
  line-height: 1.65;
}

.book-memory-reading-note > p {
  margin-top: 10px;
}

.book-memory-reading-note details {
  margin-top: 10px;
  border-top: 1px solid #ead8d1;
  padding-top: 8px;
}

.book-memory-reading-note summary {
  cursor: pointer;
  color: #825344;
  font-size: 10px;
  font-weight: 900;
}

.book-memory-capacity-now {
  margin: 0 16px 15px;
  border-top: 3px solid #2b8078;
  background: #f7fbfa;
}

.book-memory-capacity-now > header {
  padding: 14px 15px 11px;
}

.book-memory-capacity-table {
  margin: 0 15px 15px;
  border: 1px solid #c8d8d5;
  background: #c8d8d5;
}

.book-memory-capacity-head,
.book-memory-capacity-table article {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1px;
}

.book-memory-capacity-head span {
  padding: 8px 10px;
  background: #476f6d;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}

.book-memory-capacity-table article > * {
  margin: 0;
  padding: 10px 11px;
  background: #fff;
}

.book-memory-capacity-table article + article {
  margin-top: 1px;
}

.book-memory-capacity-table article h6 {
  color: #285854;
  font-size: 15px;
  line-height: 1.35;
}

.book-memory-capacity-table article h6 small {
  display: block;
  margin-top: 2px;
  color: #71827f;
  font-size: 8px;
}

.book-memory-capacity-table article p {
  color: #5c7271;
  font-size: 10.5px;
  line-height: 1.65;
}

.book-memory-capacity-table article.is-recommended > * {
  background: #edf8f5;
}

.book-memory-capacity-table article.is-recommended h6 {
  color: #087267;
}

.book-memory-budget-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 16px;
  align-items: center;
  margin: 0 16px 14px;
  padding: 14px 15px;
  border: 1px solid #dfcf9d;
  border-left: 5px solid #c58d20;
  border-radius: 4px;
  background: #fffaf0;
}

.book-memory-budget-route > div > span {
  display: block;
  color: #9a6712;
  font-size: 9px;
  font-weight: 900;
}

.book-memory-budget-route > div > strong {
  display: block;
  margin-top: 2px;
  color: #694d1b;
  font-size: 13px;
  line-height: 1.55;
}

.book-memory-budget-route > div > p,
.book-memory-budget-route > p {
  margin: 5px 0 0;
  color: #715f3d;
  font-size: 10.5px;
  line-height: 1.68;
}

.book-memory-budget-route > a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 7px 11px;
  border: 1px solid #a87518;
  border-radius: 4px;
  background: #fff;
  color: #80580f;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}

.book-memory-budget-route > a::after {
  margin-left: 6px;
  content: '→';
}

.book-memory-budget-route > a:hover,
.book-memory-budget-route > a:focus-visible {
  background: #8a6117;
  color: #fff;
  outline: none;
}

.book-memory-budget-route > p {
  grid-column: 1 / -1;
  margin-top: 0;
  padding-top: 9px;
  border-top: 1px solid #e7d9b4;
}

.book-memory-capacity-cautions {
  margin: 0 16px 14px;
  padding: 12px 14px;
  border-left: 4px solid #527f91;
  background: #f3f8fa;
}

.book-memory-capacity-cautions > strong {
  color: #345e6f;
  font-size: 12px;
}

.book-memory-capacity-cautions ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 20px;
  margin: 8px 0 0;
  padding-left: 18px;
  color: #587179;
  font-size: 10.5px;
  line-height: 1.65;
}

.book-memory-capacity-cautions > p {
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: 1px solid #d3e1e6;
  color: #48656f;
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.65;
}

.book-memory-capacity-sources {
  margin: 0 16px 15px;
  padding-top: 10px;
  border-top: 1px solid #d9e4e2;
}

@media (max-width: 680px) {
  .book-part-choice .book-cpu-choice-lead h3 {
    font-size: 20px;
  }

  .book-part-choice .book-cpu-purpose-map {
    margin: 12px 10px 0;
  }

  .book-part-choice .book-cpu-purpose-map > header h4 {
    font-size: 15px;
  }

  .book-part-choice .book-cpu-purpose-table article h5 {
    padding-bottom: 4px;
    font-size: 13px;
  }

  .book-part-choice .book-cpu-purpose-table article p::before {
    display: block;
    margin-bottom: 2px;
    color: #33736d;
    font-size: 9px;
    font-weight: 900;
  }

  .book-part-choice .book-cpu-purpose-table article p:nth-of-type(1)::before { content: '見る性能・仕様'; }
  .book-part-choice .book-cpu-purpose-table article p:nth-of-type(2)::before { content: 'コストの判断'; }

  .book-part-choice .book-part-strategy-lenses {
    margin: 10px 10px 12px;
  }

  .book-memory-capacity-guide {
    margin: 12px 10px 0;
  }

  .book-memory-capacity-guide > header {
    padding: 14px 13px 12px;
  }

  .book-memory-capacity-guide > header h4 {
    font-size: 17px;
  }

  .book-memory-measure-layout {
    grid-template-columns: 1fr;
    padding: 11px;
  }

  .book-memory-measure-steps,
  .book-memory-manual-calc,
  .book-memory-reading-note {
    padding: 12px;
  }

  .book-memory-method-label {
    margin: -12px -12px 11px;
    padding: 9px 10px;
  }

  .book-memory-calculator-basis,
  .book-memory-calculator-search,
  .book-memory-calculator-output {
    grid-template-columns: 1fr;
  }

  .book-memory-calculator-answer {
    padding: 0 0 9px;
    border-right: 0;
    border-bottom: 1px solid #bdd7d2;
  }

  .book-memory-calculator-selected article {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .book-memory-calculator-selected article > span {
    grid-column: 1 / 2;
  }

  .book-memory-calculator-selected article > button {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .book-memory-calculator.is-standalone {
    margin: 0 11px 12px;
  }

  .book-memory-capacity-guide > .book-memory-calculator.is-standalone {
    margin: 12px 11px 0;
  }

  .book-memory-calculator-heading {
    display: grid;
    gap: 10px;
    padding: 13px 12px 12px !important;
  }

  .book-memory-calculator-heading h5 {
    font-size: 17px;
  }

  .book-memory-calculator-add-tab {
    padding: 10px 12px 0;
  }

  .book-memory-calculator-add-tab > button {
    width: 100%;
  }

  .book-memory-calculator-warning {
    grid-template-columns: 1fr;
  }

  .book-memory-calculator-warning strong {
    white-space: normal;
  }

  .book-memory-calculator.is-standalone .book-memory-calculator-selected [data-memory-selected] {
    grid-template-columns: 1fr;
  }

  .book-memory-calculator-equation {
    flex-direction: column;
    overflow: visible;
  }

  .book-memory-calculator-equation > div {
    width: 100%;
    min-width: 0;
    flex-basis: auto;
  }

  .book-memory-calculator-equation > i {
    min-height: 18px;
  }

  .book-memory-calculator-dialog {
    width: calc(100vw - 14px);
    max-height: calc(100dvh - 14px);
  }

  .book-memory-calculator-dialog-panel {
    max-height: calc(100dvh - 14px);
  }

  .book-memory-calculator-dialog-panel > header {
    padding: 11px;
  }

  .book-memory-calculator-dialog .book-memory-calculator-picker {
    padding: 10px;
  }

  .book-memory-calculator-dialog .book-memory-calculator-results {
    max-height: 48dvh;
  }

  .book-memory-reading-note.is-wide {
    margin: 0 11px 12px;
  }

  .book-memory-reading-note.is-wide dl,
  .book-memory-reading-note.is-inside dl,
  .book-memory-manual-apps,
  .book-memory-manual-examples {
    grid-template-columns: 1fr;
  }

  .book-memory-manual-apps > div:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .book-memory-capacity-now {
    margin: 0 11px 12px;
  }

  .book-memory-capacity-now > header {
    padding: 12px 11px 10px;
  }

  .book-memory-capacity-table {
    margin: 0 10px 11px;
  }

  .book-memory-capacity-head {
    display: none;
  }

  .book-memory-capacity-table article {
    display: block;
  }

  .book-memory-capacity-table article > * {
    padding: 8px 10px;
  }

  .book-memory-capacity-table article h6 {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding-bottom: 5px;
  }

  .book-memory-capacity-table article h6 small {
    display: inline;
  }

  .book-memory-capacity-table article p::before {
    display: block;
    margin-bottom: 2px;
    color: #34756e;
    font-size: 8px;
    font-weight: 900;
  }

  .book-memory-capacity-table article p:nth-of-type(1)::before { content: '向いている使い方'; }
  .book-memory-capacity-table article p:nth-of-type(2)::before { content: '選ぶ時の判断'; }

  .book-memory-capacity-cautions {
    margin: 0 11px 12px;
    padding: 11px 12px;
  }

  .book-memory-budget-route {
    grid-template-columns: 1fr;
    margin: 0 11px 12px;
    padding: 12px;
  }

  .book-memory-budget-route > a {
    width: 100%;
    box-sizing: border-box;
  }

  .book-memory-budget-route > p {
    grid-column: auto;
  }

  .book-memory-capacity-cautions ul {
    grid-template-columns: 1fr;
  }

  .book-memory-capacity-sources {
    margin: 0 11px 13px;
  }
}

.book-part-flow-heading {
  grid-column: 1 / -1;
  margin: 24px 0 0;
}

.book-part-guide > header + .book-part-flow-heading {
  margin-top: 4px;
}

.book-part-flow-heading.is-inside {
  margin: 4px -20px 0;
  padding: 24px 20px 0;
  border-top: 1px solid #cbd8d6;
}

.book-part-flow-heading > h3 {
  max-width: 980px;
}

.book-part-deep-dive.is-sequential {
  grid-template-columns: minmax(0, 1fr);
  background: #fbfcfc;
}

.book-part-deep-dive.is-sequential > section + section {
  border-left: 0;
}

.book-cooler-grade-guide {
  grid-column: 1 / -1;
  margin-top: 18px;
  border: 1px solid #cbd9d7;
  border-top: 4px solid #2f756f;
  border-radius: 5px;
  background: #f7faf9;
}

.book-cooler-grade-guide > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 14px;
  align-items: start;
  padding: 18px 20px 16px;
}

.book-cooler-grade-guide > header > div > span,
.book-cooler-enough-check > header > span {
  display: block;
  color: #39756f;
  font-size: 11px;
  font-weight: 850;
}

.book-cooler-grade-guide > header h3 {
  margin: 3px 0 0;
  color: #183f47;
  font-size: clamp(21px, 2.3vw, 29px);
  line-height: 1.4;
}

.book-cooler-grade-guide > header > p {
  grid-column: 1 / -1;
  max-width: 920px;
  margin: 0;
  color: #526b70;
  font-size: 13px;
  line-height: 1.8;
}

.book-cooler-same-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid #d9e3e1;
  border-bottom: 1px solid #d9e3e1;
  background: #d9e3e1;
}

.book-cooler-same-grade article {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 12px;
  padding: 14px 18px;
  background: #fff;
}

.book-cooler-same-grade article > span,
.book-cooler-same-grade article > p {
  grid-column: 1 / -1;
}

.book-cooler-same-grade article > span {
  color: #6b7d81;
  font-size: 10px;
  font-weight: 850;
}

.book-cooler-same-grade article > strong,
.book-cooler-same-grade article > b {
  padding: 6px 8px;
  border-radius: 3px;
  background: #eaf3f1;
  color: #245b57;
  font-size: 12px;
  text-align: center;
}

.book-cooler-same-grade article > b {
  background: #fff1e9;
  color: #925232;
}

.book-cooler-same-grade article > p {
  margin: 0;
  color: #5b7176;
  font-size: 11px;
  line-height: 1.7;
}

.book-cooler-grade-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 18px;
}

.book-cooler-grade-list > article {
  overflow: hidden;
  border: 1px solid #d5e0de;
  border-top: 3px solid #8ca7a4;
  border-radius: 4px;
  background: #fff;
}

.book-cooler-grade-list > article.is-recommended {
  border-top-color: #14756d;
  background: #f5fbf9;
}

.book-cooler-grade-list > article > header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid #e0e8e6;
}

.book-cooler-grade-list > article > header span {
  color: #39756f;
  font-size: 10px;
  font-weight: 850;
}

.book-cooler-grade-list > article > header h4 {
  margin: 3px 0 0;
  color: #26474d;
  font-size: 15px;
  line-height: 1.5;
}

.book-cooler-grade-list dl {
  margin: 0;
}

.book-cooler-grade-list dl > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 14px;
}

.book-cooler-grade-list dl > div + div {
  border-top: 1px solid #e6ecea;
}

.book-cooler-grade-list dt {
  color: #416b67;
  font-size: 10px;
  font-weight: 850;
}

.book-cooler-grade-list dd {
  margin: 0;
  color: #586f74;
  font-size: 11px;
  line-height: 1.72;
}

.book-cooler-grade-caution {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr);
  gap: 12px 24px;
  align-items: center;
  margin: 0 18px 16px;
  padding: 13px 15px;
  border-left: 4px solid #d9875e;
  background: #fff8f3;
}

.book-cooler-grade-caution strong {
  color: #8c4f31;
  font-size: 12px;
  line-height: 1.55;
}

.book-cooler-grade-caution p {
  margin: 0;
  color: #6b665f;
  font-size: 11px;
  line-height: 1.72;
}

.book-cooler-enough-check {
  margin: 0 18px 12px;
  padding: 14px 15px 15px;
  border: 1px solid #d5e0de;
  background: #fff;
}

.book-cooler-enough-check > header h4 {
  margin: 3px 0 0;
  color: #29494f;
  font-size: 15px;
  line-height: 1.5;
}

.book-cooler-enough-check ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
}

.book-cooler-enough-check li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 10px;
  background: #f3f7f6;
}

.book-cooler-enough-check li > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #2f756f;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.book-cooler-enough-check li p {
  margin: 0;
  color: #5b7074;
  font-size: 10px;
  line-height: 1.65;
}

.book-cooler-enough-check li strong {
  display: block;
  margin-bottom: 2px;
  color: #315a57;
  font-size: 11px;
}

.book-cooler-grade-date {
  margin: 0;
  padding: 0 18px 14px;
  color: #738489;
  font-size: 9px;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .book-cooler-grade-guide > header {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 15px 14px 13px;
  }

  .book-cooler-same-grade,
  .book-cooler-grade-list,
  .book-cooler-enough-check ol {
    grid-template-columns: 1fr;
  }

  .book-cooler-grade-list {
    padding: 12px;
  }

  .book-cooler-grade-list dl > div {
    grid-template-columns: 78px minmax(0, 1fr);
    padding: 10px 12px;
  }

  .book-cooler-grade-caution {
    grid-template-columns: 1fr;
    gap: 4px;
    margin: 0 12px 12px;
  }

  .book-cooler-enough-check {
    margin: 0 12px 10px;
  }

  .book-cooler-grade-date {
    padding: 0 12px 12px;
  }
}

.book-motherboard-price-guide {
  grid-column: 1 / -1;
  margin-top: 18px;
  border-top: 4px solid #2f756f;
  border-bottom: 1px solid #cbd9d7;
  background: #f7faf9;
}

.book-motherboard-price-guide > header {
  display: grid;
  gap: 5px;
  padding: 18px 20px 15px;
}

.book-motherboard-price-guide > header > span {
  color: #39756f;
  font-size: 11px;
  font-weight: 850;
}

.book-motherboard-price-guide > header h3 {
  margin: 0;
  color: #183f47;
  font-size: clamp(21px, 2.3vw, 29px);
  line-height: 1.4;
}

.book-motherboard-price-guide > header p {
  max-width: 900px;
  margin: 0;
  color: #526b70;
  font-size: 13px;
  line-height: 1.8;
}

.book-motherboard-price-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid #d5e0de;
  border-bottom: 1px solid #d5e0de;
  background: #d5e0de;
}

.book-motherboard-price-points article {
  min-width: 0;
  padding: 15px 16px 16px;
  background: #fff;
}

.book-motherboard-price-points span,
.book-motherboard-price-answer span {
  display: block;
  color: #d35f49;
  font-size: 10px;
  font-weight: 850;
}

.book-motherboard-price-points h4 {
  margin: 3px 0 7px;
  color: #294d53;
  font-size: 15px;
  line-height: 1.45;
}

.book-motherboard-price-points p,
.book-motherboard-price-answer p {
  margin: 0;
  color: #5a7075;
  font-size: 12px;
  line-height: 1.75;
}

.book-motherboard-price-answer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 15px 18px;
  background: #edf5f3;
}

.book-motherboard-price-answer article {
  padding: 13px 14px;
  border: 1px solid #cbdcda;
  background: #fff;
}

.book-motherboard-price-answer article.is-budget {
  border-color: #c8d8da;
  background: #f9fcfc;
}

.book-motherboard-price-answer article.is-premium {
  border-color: #dfc4b9;
  background: #fffaf7;
}

.book-motherboard-price-answer strong {
  display: block;
  margin: 3px 0 6px;
  color: #274c52;
  font-size: 14px;
  line-height: 1.5;
}

.book-motherboard-price-risk {
  display: block;
  margin-top: 10px;
  padding: 8px 9px;
  border-left: 3px solid #d76650;
  background: #fff6f2;
  color: #665a57;
  font-size: 10.5px;
  line-height: 1.7;
}

.book-motherboard-price-risk b {
  display: block;
  margin-bottom: 2px;
  color: #9d4435;
  font-size: 10px;
}

.book-motherboard-price-sources {
  margin: 0;
  padding: 11px 18px 13px;
  color: #687b80;
  font-size: 10px;
  line-height: 1.7;
}

.book-motherboard-price-sources a {
  color: #236a72;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 820px) {
  .book-motherboard-price-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-motherboard-price-answer {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .book-motherboard-price-guide > header {
    padding: 15px 14px 13px;
  }

  .book-motherboard-price-guide > header p {
    font-size: 12.5px;
  }

  .book-motherboard-price-points,
  .book-motherboard-price-answer {
    grid-template-columns: 1fr;
  }

  .book-motherboard-price-answer {
    gap: 8px;
    padding: 12px;
  }

  .book-motherboard-price-sources {
    padding: 10px 13px 12px;
  }
}

.book-memory-spec-guide {
  border-top: 1px solid #ccd9d7;
  background: #f7fbfa;
}

.book-memory-spec-guide > header > span {
  color: #277b72;
  font-size: 11px;
  font-weight: 900;
}

.book-memory-spec-guide > header h4 {
  margin: 3px 0 0;
  color: #24484d;
  font-size: 18px;
  line-height: 1.5;
}

.book-memory-spec-guide > header p {
  max-width: 920px;
  margin: 6px 0 0;
  color: #5c7276;
  font-size: 12px;
  line-height: 1.75;
}

.book-memory-spec-example {
  margin: 15px 0 0;
  overflow: hidden;
  border: 1px solid #bfd3cf;
  border-radius: 5px;
  background: #fff;
}

.book-memory-spec-example figcaption {
  display: flex;
  gap: 6px 13px;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 11px 13px;
  border-bottom: 1px solid #d5e1df;
  background: #eaf5f3;
}

.book-memory-spec-example figcaption span {
  color: #28766f;
  font-size: 9px;
  font-weight: 900;
}

.book-memory-spec-example figcaption strong {
  color: #23474b;
  font-size: 14px;
  line-height: 1.5;
}

.book-memory-spec-example figcaption small {
  margin-left: auto;
  color: #60777a;
  font-size: 9.5px;
  line-height: 1.5;
}

.book-memory-spec-line {
  display: grid;
  grid-template-columns: 1.3fr 1fr .85fr 1.05fr .8fr .85fr;
  gap: 1px;
  background: #d6e1df;
}

.book-memory-spec-line > span {
  display: grid;
  align-content: center;
  min-height: 78px;
  padding: 10px 11px;
  background: #fff;
}

.book-memory-spec-line small {
  color: #6a7d80;
  font-size: 8.5px;
  font-weight: 850;
}

.book-memory-spec-line b {
  margin-top: 4px;
  color: #2c5054;
  font-size: 13px;
  line-height: 1.45;
}

.book-memory-spec-line .is-essential {
  box-shadow: inset 0 3px #2e8279;
}

.book-memory-spec-line .is-compare {
  box-shadow: inset 0 3px #d88a36;
}

.book-memory-spec-line .is-later {
  box-shadow: inset 0 3px #97a6a7;
}

.book-memory-spec-priorities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.book-memory-spec-priorities article {
  padding: 12px 13px;
  border: 1px solid #d6e0de;
  border-top-width: 3px;
  border-radius: 4px;
  background: #fff;
}

.book-memory-spec-priorities article.is-essential {
  border-top-color: #2e8279;
}

.book-memory-spec-priorities article.is-compare {
  border-top-color: #d88a36;
}

.book-memory-spec-priorities article.is-later {
  border-top-color: #97a6a7;
}

.book-memory-spec-priorities header span {
  display: block;
  color: #6a7d80;
  font-size: 8.5px;
  font-weight: 900;
}

.book-memory-spec-priorities header strong {
  display: block;
  margin-top: 2px;
  color: #294d51;
  font-size: 13px;
}

.book-memory-spec-priorities ul {
  display: grid;
  gap: 7px;
  margin: 9px 0 0;
  padding: 0 0 0 16px;
  color: #5a7074;
  font-size: 10.5px;
  line-height: 1.68;
}

.book-memory-spec-priorities li::marker {
  color: #33847b;
}

.book-memory-spec-priorities li b {
  color: #31595b;
}

.book-memory-latency-example {
  margin-top: 12px;
  padding: 14px;
  border-left: 4px solid #d47d35;
  border-radius: 4px;
  background: #fff9f0;
}

.book-memory-latency-example > header > span {
  color: #a76125;
  font-size: 9px;
  font-weight: 900;
}

.book-memory-latency-example > header h5 {
  margin: 2px 0 0;
  color: #604927;
  font-size: 14px;
  line-height: 1.5;
}

.book-memory-latency-example > header p,
.book-memory-latency-example > p {
  margin: 5px 0 0;
  color: #6d624f;
  font-size: 10.5px;
  line-height: 1.72;
}

.book-memory-latency-example > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  margin-top: 11px;
}

.book-memory-latency-example > div > article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  padding: 9px 10px;
  border: 1px solid #ead8bc;
  border-radius: 3px;
  background: #fff;
}

.book-memory-latency-example article small {
  grid-column: 1 / -1;
  color: #8d7654;
  font-size: 8px;
}

.book-memory-latency-example article strong {
  color: #695231;
  font-size: 12px;
}

.book-memory-latency-example article b {
  color: #b26325;
  font-size: 13px;
}

.book-memory-latency-example > div > span {
  color: #9b7049;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}

.book-memory-spec-order {
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid #cadbd8;
  border-radius: 4px;
  background: #edf7f5;
}

.book-memory-spec-order > strong {
  color: #275852;
  font-size: 12px;
}

.book-memory-spec-order ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 9px 0 0;
  padding: 0;
  background: #c8dbd7;
  list-style: none;
}

.book-memory-spec-order li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  padding: 9px;
  background: #fff;
}

.book-memory-spec-order li span {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 50%;
  background: #2f7e76;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
}

.book-memory-spec-order li p {
  margin: 0;
  color: #587074;
  font-size: 9.5px;
  line-height: 1.55;
}

.book-memory-spec-order li b {
  color: #315457;
}

.book-memory-spec-order > p {
  margin: 9px 0 0;
  color: #587174;
  font-size: 10px;
  line-height: 1.68;
}

.book-memory-spec-sources {
  display: flex;
  gap: 5px 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 11px 0 0;
  color: #728486;
  font-size: 8.5px;
  line-height: 1.6;
}

.book-memory-spec-sources span {
  font-weight: 900;
}

.book-memory-spec-sources a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(114 132 134 / 45%);
  text-underline-offset: 2px;
}

@media (max-width: 720px) {
  .book-memory-spec-guide {
    padding: 15px 11px !important;
  }

  .book-memory-spec-guide > header h4 {
    font-size: 16px;
  }

  .book-memory-spec-example figcaption {
    display: grid;
    gap: 3px;
  }

  .book-memory-spec-example figcaption small {
    margin-left: 0;
  }

  .book-memory-spec-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-memory-spec-line > span {
    min-height: 68px;
  }

  .book-memory-spec-priorities {
    grid-template-columns: 1fr;
  }

  .book-memory-latency-example > div {
    grid-template-columns: 1fr;
  }

  .book-memory-latency-example > div > span {
    line-height: 1;
  }

  .book-memory-spec-order ol {
    grid-template-columns: 1fr;
  }
}

.book-part-guide > header {
  grid-column: 1 / -1;
  grid-template-columns: 52px minmax(220px, .48fr) minmax(360px, 1fr);
  align-items: start;
}

.book-part-guide > header > .book-part-guide-photo {
  grid-column: 3;
  grid-row: 1;
  margin-top: 0;
}

.book-part-role h4,
.book-part-patterns > header h4,
.book-part-standards > header h4 {
  margin: 2px 0 0;
  color: #203f45;
  font-size: 18px;
  line-height: 1.5;
}

.book-part-role p {
  margin: 8px 0 0;
  color: #566c71;
  font-size: 14px;
  line-height: 1.85;
}

.book-part-order {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid #c8d7d4;
  background: #c8d7d4;
}

.book-part-order > section {
  padding: 14px 16px;
  background: #f5f9f8;
}

.book-part-order span {
  display: block;
  color: #5d7d7b;
  font-size: 10px;
  font-weight: 900;
}

.book-part-order strong {
  display: block;
  margin-top: 4px;
  color: #263f45;
  font-size: 13px;
  line-height: 1.65;
}

.book-part-order p {
  margin: 6px 0 0;
  color: #687b7f;
  font-size: 12px;
  line-height: 1.7;
}

.book-part-patterns > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin-top: 11px;
}

.book-part-patterns article {
  padding: 14px 15px;
  border-left: 4px solid var(--book-blue);
  background: #f5f8fa;
}

.book-part-patterns article:nth-child(even) { border-left-color: var(--book-coral); background: #fff8f4; }
.book-part-patterns article header small { color: #718387; font-size: 10px; font-weight: 900; }
.book-part-patterns article header h5 { margin: 2px 0 0; color: #29464b; font-size: 14px; line-height: 1.45; }
.book-part-patterns ol { margin: 9px 0 0; padding-left: 19px; color: #586d72; font-size: 12px; line-height: 1.75; }
.book-part-patterns li + li { margin-top: 4px; }

.book-part-standards dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 11px 0 0;
  border: 1px solid #cad8d5;
  background: #cad8d5;
}

.book-part-standards dl > div { padding: 13px 15px; background: #fbfcfc; }
.book-part-standards dt { color: #315a5c; font-size: 12px; font-weight: 900; line-height: 1.5; }
.book-part-standards dd { margin: 5px 0 0; color: #607479; font-size: 12px; line-height: 1.75; }

.book-part-comparison h4 {
  margin: 0 0 8px;
  color: #29464b;
  font-size: 14px;
}

.book-part-comparison > div { overflow-x: auto; overscroll-behavior-inline: contain; }
.book-part-comparison table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 11px; line-height: 1.55; }
.book-part-comparison th,
.book-part-comparison td { padding: 9px 10px; border: 1px solid #cbd9d6; text-align: left; vertical-align: top; }
.book-part-comparison thead th { color: #fff; background: #476b70; }
.book-part-comparison tbody th { width: 105px; color: #284a4e; background: #eef4f3; }
.book-part-comparison tbody td { color: #5d7075; background: #fff; }

.book-part-selection-note {
  padding: 12px 14px;
  border-left: 4px solid var(--book-coral);
  background: #fff8f3;
}

.book-part-selection-note strong { color: #8a4f35; font-size: 12px; }
.book-part-selection-note p { margin: 4px 0 0; color: #6f625c; font-size: 12px; line-height: 1.7; }
.book-part-references { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; padding-top: 3px; color: #718488; font-size: 10px; }
.book-part-references span { font-weight: 900; }
.book-part-references a { color: var(--book-green-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }

/* Rebuilt guides: recommendation first, then choices and compatibility checks. */
.book-rebuilt-part {
  grid-column: 1 / -1;
  display: grid;
  gap: 16px;
  min-width: 0;
  margin-top: 2px;
  padding: 22px;
  border: 1px solid #c7d8d4;
  border-top: 5px solid var(--book-green);
  border-radius: 7px;
  background: linear-gradient(180deg, #f6faf9 0, #fff 150px);
}

.book-rebuilt-part-lead > span,
.book-rebuilt-part-options > header > span,
.book-rebuilt-part-checks > header > span {
  display: block;
  color: var(--book-green-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.book-rebuilt-part-lead h3 {
  max-width: 900px;
  margin: 4px 0 0;
  color: #203f45;
  font-size: clamp(21px, 2.7vw, 30px);
  line-height: 1.42;
}

.book-rebuilt-part-lead p {
  max-width: 960px;
  margin: 9px 0 0;
  color: #556c71;
  font-size: 13px;
  line-height: 1.85;
}

.book-rebuilt-part-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid #bfd2ce;
  border-radius: 5px;
  background: #bfd2ce;
  list-style: none;
}

.book-rebuilt-part-steps li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 14px;
  background: #fff;
}

.book-rebuilt-part-steps li > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--book-green-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.book-rebuilt-part-steps strong {
  display: block;
  color: #29484d;
  font-size: 13px;
  line-height: 1.55;
}

.book-rebuilt-part-steps p {
  margin: 4px 0 0;
  color: #607479;
  font-size: 11px;
  line-height: 1.7;
}

.book-rebuilt-part-options {
  padding-top: 4px;
}

.book-rebuilt-part-options > header h4,
.book-rebuilt-part-checks > header h4 {
  margin: 3px 0 0;
  color: #29464b;
  font-size: 18px;
  line-height: 1.5;
}

.book-rebuilt-part-options > header p {
  margin: 5px 0 0;
  color: #64787c;
  font-size: 12px;
  line-height: 1.7;
}

.book-rebuilt-part-options > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 11px;
}

@media (min-width: 921px) {
  .book-rebuilt-part.is-cooler .book-rebuilt-part-steps {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .book-rebuilt-part.is-cooler .book-rebuilt-part-steps > li {
    grid-column: span 2;
  }

  .book-rebuilt-part.is-cooler .book-rebuilt-part-steps > li:nth-last-child(-n + 2) {
    grid-column: span 3;
  }

  .book-rebuilt-part.is-cooler .book-rebuilt-part-options > div {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .book-rebuilt-part.is-cooler .book-rebuilt-part-options article {
    grid-column: span 2;
  }

}

.book-rebuilt-part-options article {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 15px 14px 13px;
  border: 1px solid #d4dfdd;
  border-top: 4px solid #87a4a2;
  border-radius: 5px;
  background: #fff;
}

.book-rebuilt-part-options article.is-recommended {
  border-color: #9fc6bd;
  border-top-color: var(--book-green);
  background: #f2f9f7;
}

.book-rebuilt-part-options article > span {
  width: fit-content;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e8f0ef;
  color: #496966;
  font-size: 9px;
  font-weight: 900;
}

.book-rebuilt-part-options article.is-recommended > span {
  background: var(--book-green-dark);
  color: #fff;
}

.book-rebuilt-part-options h5 {
  margin: 8px 0 0;
  color: #273f45;
  font-size: 14px;
  line-height: 1.5;
}

.book-rebuilt-part-option-photo {
  margin: 10px 0 0;
  overflow: hidden;
  border: 1px solid #dbe5e3;
  border-radius: 4px;
  background: #f4f7f6;
}

.book-rebuilt-part-option-photo img {
  display: block;
  width: 100%;
  height: 166px;
  object-fit: contain;
  background: #eef3f2;
}

.book-rebuilt-part-option-photo figcaption {
  padding: 7px 8px 8px;
  border-top: 1px solid #dbe5e3;
  background: #fff;
  color: #536a6f;
  font-size: 9px;
  line-height: 1.45;
}

.book-rebuilt-part-option-photo figcaption > b {
  display: block;
  color: #334e53;
  font-size: 10px;
}

.book-rebuilt-part-option-photo .book-photo-credit {
  display: block;
  margin-top: 3px;
  color: #738489;
  font-size: 8px;
  line-height: 1.45;
}

.book-rebuilt-part-option-photo .book-photo-credit a {
  color: inherit;
}

.book-rebuilt-part-options article p {
  margin: 6px 0 10px;
  color: #607479;
  font-size: 11px;
  line-height: 1.72;
}

.book-rebuilt-part-options article > strong {
  display: block;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #e1e8e6;
  color: #3a6864;
  font-size: 10px;
  line-height: 1.55;
}

.book-rebuilt-part-options-note {
  display: flex;
  gap: 8px 12px;
  align-items: baseline;
  margin: 10px 0 0;
  padding: 9px 11px;
  border: 1px solid #dce5e3;
  border-left: 3px solid #86a5a1;
  border-radius: 4px;
  background: #f7faf9;
  color: #607479;
  font-size: 10px;
  line-height: 1.65;
}

.book-rebuilt-part-options-note strong {
  flex: 0 0 auto;
  color: #365f5c;
  font-size: 10px;
}

.book-power-jisako {
  margin-top: 0;
  border-radius: 5px;
}

.book-power-cost-link {
  margin-top: 0;
  border-color: #c8d5e4;
  border-left-color: #4778a6;
  background: #f2f7fc;
}

.book-power-cost-link .book-button {
  border-color: #4778a6;
  color: #315f87;
}

.book-power-cost-calculator {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border: 1px solid #bdd7d2;
  border-top: 4px solid #18766d;
  border-radius: 5px;
  background: linear-gradient(180deg, #f4fbf9 0, #fff 190px);
  box-shadow: 0 10px 24px rgb(38 82 76 / 7%);
}

.book-power-cost-calculator > header > span {
  display: block;
  color: #167168;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
}

.book-power-cost-calculator > header h2 {
  margin: 3px 0 0;
  color: #254b47;
  font-size: 20px;
  line-height: 1.5;
}

.book-power-cost-calculator > header p {
  max-width: 960px;
  margin: 6px 0 0;
  color: #56736f;
  font-size: 12px;
  line-height: 1.75;
}

.book-power-cost-calculator script {
  display: none;
}

.book-power-cost-results {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #b9d3ce;
  border-radius: 5px;
  background: #fff;
}

.book-power-cost-results > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  min-width: 0;
  padding: 12px 13px;
  border-right: 1px solid #d5e4e1;
}

.book-power-cost-results > div:last-child {
  border-right: 0;
}

.book-power-cost-results span {
  grid-column: 1 / -1;
  margin-bottom: 3px;
  color: #607a76;
  font-size: 10px;
  font-weight: 800;
}

.book-power-cost-results strong {
  overflow: hidden;
  color: #254d48;
  font-size: clamp(20px, 2.3vw, 29px);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-power-cost-results small {
  margin: 0 0 2px 4px;
  color: #66807c;
  font-size: 10px;
  font-weight: 900;
}

.book-power-cost-results > div.is-primary {
  background: #19766d;
}

.book-power-cost-results > div.is-primary span,
.book-power-cost-results > div.is-primary strong,
.book-power-cost-results > div.is-primary small {
  color: #fff;
}

.book-power-cost-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.book-power-cost-field {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #d4e2df;
  border-radius: 4px;
  background: #fff;
}

.book-power-cost-field > span {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  align-items: baseline;
  justify-content: space-between;
  color: #315d57;
  font-size: 12px;
  font-weight: 900;
}

.book-power-cost-field > span b {
  color: #18766d;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.book-power-cost-field select,
.book-power-cost-field input[type='number'] {
  width: 100%;
  min-height: 40px;
  padding: 7px 9px;
  border: 1px solid #9dbdb7;
  border-radius: 4px;
  background: #fff;
  color: #294f4a;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.book-power-cost-field select:focus,
.book-power-cost-field input:focus {
  border-color: #18766d;
  outline: 3px solid rgb(24 118 109 / 15%);
}

.book-power-cost-field > small {
  color: #758783;
  font-size: 9px;
  line-height: 1.5;
}

.book-power-cost-field.is-hours {
  grid-column: span 2;
}

.book-power-cost-field input[type='range'] {
  width: 100%;
  margin: 4px 0 1px;
  accent-color: #18766d;
}

.book-power-cost-field.is-hours > small {
  display: flex;
  justify-content: space-between;
}

.book-power-cost-field.is-hours > small i {
  font-style: normal;
}

.book-power-cost-auto,
.book-power-cost-warning {
  margin: -3px 0 0;
  padding: 9px 11px;
  border-left: 4px solid #418e85;
  background: #eef8f5;
  color: #356a63;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.6;
}

.book-power-cost-warning {
  border-left-color: #d3815d;
  background: #fff5ef;
  color: #86513b;
}

.book-power-rate-settings {
  overflow: hidden;
  border: 1px solid #c7d9d5;
  border-radius: 4px;
  background: #fbfdfc;
}

.book-power-rate-settings > summary {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 11px 13px;
  background: #e9f4f1;
  color: #315e58;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.book-power-rate-settings > summary b {
  color: #176d64;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.book-power-rate-settings > div {
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(0, 1.28fr);
  gap: 12px;
  padding: 13px;
  border-top: 1px solid #c7d9d5;
}

.book-power-rate-formula {
  display: flex;
  min-width: 0;
  align-items: stretch;
  justify-content: center;
}

.book-power-rate-formula > span {
  display: grid;
  flex: 1 1 0;
  gap: 3px;
  align-content: center;
  min-width: 0;
  padding: 8px 7px;
  border: 1px solid #d2e0dd;
  border-radius: 4px;
  background: #fff;
  text-align: center;
}

.book-power-rate-formula > span.is-total {
  border-color: #7db0a7;
  background: #edf8f5;
}

.book-power-rate-formula small {
  overflow: hidden;
  color: #738783;
  font-size: 8px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-power-rate-formula b {
  color: #315b56;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.book-power-rate-formula > i {
  align-self: center;
  padding: 0 5px;
  color: #78918d;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.book-power-custom-rate {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  padding: 9px 11px;
  border: 1px dashed #b8cec9;
  border-radius: 4px;
  background: #fff;
  color: #4a6964;
  font-size: 10px;
  font-weight: 850;
}

.book-power-custom-rate > span:last-child {
  display: grid;
  grid-template-columns: 82px auto;
  gap: 5px;
  align-items: center;
  margin-left: auto;
}

.book-power-custom-rate input[type='number'] {
  width: 82px;
  min-height: 34px;
  padding: 5px 7px;
  border: 1px solid #9dbdb7;
  border-radius: 4px;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.book-power-custom-rate input:disabled {
  opacity: .55;
}

.book-power-rate-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin: 0;
  color: #758783;
  font-size: 9px;
  line-height: 1.55;
}

.book-power-rate-meta span {
  font-weight: 800;
}

.book-power-rate-meta a {
  color: #21746b;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.book-power-cost-calculator.uses-custom-rate .book-power-rate-formula {
  opacity: .55;
}

.book-power-cost-detail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #dde7e5;
  border-radius: 4px;
  background: #f8faf9;
}

.book-power-cost-detail p {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 9px 11px;
  border-right: 1px solid #dde7e5;
}

.book-power-cost-detail p:last-child {
  border-right: 0;
}

.book-power-cost-detail span {
  color: #72837f;
  font-size: 9px;
  font-weight: 800;
}

.book-power-cost-detail strong {
  color: #3c5f5a;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.book-power-cost-detail strong b {
  font-weight: 900;
}

.book-power-cost-note {
  margin: -3px 0 0;
  color: #778984;
  font-size: 9px;
  line-height: 1.65;
}

@media (max-width: 820px) {
  .book-power-cost-results,
  .book-power-cost-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-power-cost-results > div:nth-child(2),
  .book-power-cost-detail p:nth-child(2) {
    border-right: 0;
  }

  .book-power-cost-results > div:nth-child(-n + 2),
  .book-power-cost-detail p:nth-child(-n + 2) {
    border-bottom: 1px solid #d5e4e1;
  }

  .book-power-cost-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-power-rate-settings > div {
    grid-template-columns: 1fr;
  }

  .book-power-rate-settings .book-power-cost-field,
  .book-power-rate-formula,
  .book-power-custom-rate,
  .book-power-rate-meta {
    grid-column: 1;
  }
}

@media (max-width: 560px) {
  .book-power-cost-calculator {
    gap: 12px;
    padding: 14px 12px;
  }

  .book-power-cost-calculator > header h2 {
    font-size: 18px;
  }

  .book-power-cost-results strong {
    font-size: 21px;
  }

  .book-power-cost-controls {
    grid-template-columns: 1fr;
  }

  .book-power-cost-field.is-hours {
    grid-column: 1;
  }

  .book-power-rate-settings > summary {
    align-items: flex-start;
  }

  .book-power-rate-formula {
    display: grid;
    grid-template-columns: 1fr 20px 1fr;
    gap: 5px 0;
  }

  .book-power-rate-formula > i {
    padding: 0;
    text-align: center;
  }

  .book-power-rate-formula > i:nth-of-type(3),
  .book-power-rate-formula > span.is-total {
    grid-column: auto;
  }

  .book-power-custom-rate > span:last-child {
    width: 100%;
    margin-left: 24px;
  }
}

.book-power-atx-guide {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 17px 18px;
  border: 1px solid #c8d8dc;
  border-top: 4px solid #477b87;
  border-radius: 5px;
  background: #f8fbfc;
}

.book-power-atx-guide > header > span {
  display: block;
  color: #376d79;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.book-power-atx-guide > header h4 {
  margin: 3px 0 0;
  color: #28464e;
  font-size: 19px;
  line-height: 1.5;
}

.book-power-atx-guide > header p {
  max-width: 960px;
  margin: 6px 0 0;
  color: #5c7075;
  font-size: 12px;
  line-height: 1.75;
}

.book-power-atx-excursion {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  padding: 12px;
  border: 1px solid #cfdddf;
  border-radius: 4px;
  background: #fff;
}

.book-power-atx-excursion > div {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
}

.book-power-atx-excursion span {
  color: #385b63;
  font-size: 10px;
  font-weight: 900;
}

.book-power-atx-excursion i {
  display: block;
  width: 56%;
  height: 10px;
  border-radius: 999px;
  background: #5c8993;
}

.book-power-atx-excursion > div:nth-child(2) i {
  width: 100%;
  background: linear-gradient(90deg, #5c8993 0 56%, #dc875f 56% 100%);
}

.book-power-atx-excursion b {
  grid-column: 2;
  color: #78888b;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.45;
}

.book-power-atx-excursion p {
  grid-column: 1 / -1;
  margin: 3px 0 0;
  padding-top: 9px;
  border-top: 1px solid #dfe8e9;
  color: #607277;
  font-size: 10px;
  line-height: 1.65;
}

.book-power-atx-excursion p strong {
  margin-right: 7px;
  color: #315e68;
}

.book-power-atx-table {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: 1px solid #cadadd;
  border-radius: 4px;
  background: #fff;
}

.book-power-atx-table table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  color: #586c71;
  font-size: 10px;
  line-height: 1.55;
}

.book-power-atx-table th,
.book-power-atx-table td {
  padding: 9px 10px;
  border-right: 1px solid #d7e1e3;
  border-bottom: 1px solid #d7e1e3;
  text-align: left;
  vertical-align: top;
}

.book-power-atx-table tr:last-child > * {
  border-bottom: 0;
}

.book-power-atx-table tr > *:last-child {
  border-right: 0;
}

.book-power-atx-table thead th {
  background: #466c75;
  color: #fff;
  font-size: 9px;
  text-align: center;
}

.book-power-atx-table tbody th {
  width: 130px;
  background: #edf4f5;
  color: #31545d;
  white-space: nowrap;
}

.book-power-atx-table tbody th small {
  display: block;
  width: fit-content;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #19766d;
  color: #fff;
  font-size: 8px;
}

.book-power-atx-table tbody tr.is-recommended > * {
  background: #eef8f5;
  color: #285f59;
}

.book-power-atx-decisions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.book-power-atx-decisions article {
  padding: 11px 12px;
  border: 1px solid #d5e1e3;
  border-radius: 4px;
  background: #fff;
}

.book-power-atx-decisions strong {
  display: block;
  color: #31555e;
  font-size: 12px;
  line-height: 1.5;
}

.book-power-atx-decisions p {
  margin: 4px 0 0;
  color: #637579;
  font-size: 10px;
  line-height: 1.65;
}

.book-power-atx-decisions p b {
  color: #176d65;
}

.book-power-standard-separation {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 10px;
  align-items: center;
  margin: 0;
  padding: 10px 12px;
  border-left: 4px solid #477b87;
  background: #edf5f7;
  color: #587078;
  font-size: 10px;
  line-height: 1.55;
}

.book-power-standard-separation > strong {
  color: #315b65;
  font-size: 11px;
}

.book-power-standard-separation > span {
  padding: 3px 7px;
  border-radius: 3px;
  background: #fff;
}

.book-power-standard-separation b {
  color: #284f59;
}

.book-power-table-scroll-hint {
  display: none;
}

.book-power-efficiency-guide {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 17px 18px;
  border: 1px solid #c7d9d5;
  border-top: 4px solid #b99b3e;
  border-radius: 5px;
  background: #fffdf7;
}

.book-power-efficiency-guide > header > span {
  display: block;
  color: #856f2f;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.book-power-efficiency-guide > header h4 {
  margin: 3px 0 0;
  color: #443d28;
  font-size: 19px;
  line-height: 1.5;
}

.book-power-efficiency-guide > header p {
  max-width: 960px;
  margin: 6px 0 0;
  color: #68634f;
  font-size: 12px;
  line-height: 1.75;
}

.book-power-efficiency-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.book-power-efficiency-summary article {
  padding: 11px 12px;
  border: 1px solid #e0dac6;
  border-radius: 4px;
  background: #fff;
}

.book-power-efficiency-summary strong {
  display: block;
  color: #5a5132;
  font-size: 12px;
  line-height: 1.5;
}

.book-power-efficiency-summary p {
  margin: 4px 0 0;
  color: #6a675a;
  font-size: 10px;
  line-height: 1.65;
}

.book-power-efficiency-table {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: 1px solid #d8d2bd;
  border-radius: 4px;
  background: #fff;
}

.book-power-efficiency-table table {
  width: 100%;
  min-width: 690px;
  border-collapse: collapse;
  color: #5f5c50;
  font-size: 10px;
  line-height: 1.5;
}

.book-power-efficiency-table th,
.book-power-efficiency-table td {
  padding: 8px 10px;
  border-right: 1px solid #e4dfd0;
  border-bottom: 1px solid #e4dfd0;
  text-align: center;
  white-space: nowrap;
}

.book-power-efficiency-table tr:last-child > * {
  border-bottom: 0;
}

.book-power-efficiency-table tr > *:last-child {
  border-right: 0;
}

.book-power-efficiency-table thead th {
  background: #655e45;
  color: #fff;
  font-size: 9px;
}

.book-power-efficiency-table tbody th {
  color: #51492e;
  background: #faf7ed;
  text-align: left;
}

.book-power-efficiency-table tbody th small {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 5px;
  border-radius: 999px;
  background: #18756c;
  color: #fff;
  font-size: 8px;
}

.book-power-efficiency-table tbody tr.is-starting-point > * {
  background: #eef8f5;
  color: #285f59;
  font-weight: 900;
}

.book-power-efficiency-example {
  margin: 0;
  padding: 10px 12px;
  border-left: 4px solid #b99b3e;
  background: #fff9e8;
  color: #68604a;
  font-size: 11px;
  line-height: 1.7;
}

.book-power-efficiency-example strong {
  margin-right: 8px;
  color: #66531d;
}

.book-power-efficiency-example b {
  color: #51430f;
}

.book-power-efficiency-note {
  margin: -2px 0 0;
  color: #777365;
  font-size: 9px;
  line-height: 1.65;
}

.book-rebuilt-part-note {
  display: grid;
  grid-template-columns: minmax(210px, .7fr) minmax(0, 1.3fr);
  gap: 10px 22px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #ecd4c4;
  border-left: 4px solid var(--book-coral);
  border-radius: 4px;
  background: #fff8f3;
}

.book-rebuilt-part-note div > span {
  display: block;
  color: #a26043;
  font-size: 9px;
  font-weight: 900;
}

.book-rebuilt-part-note div > strong {
  display: block;
  margin-top: 3px;
  color: #774a38;
  font-size: 13px;
  line-height: 1.55;
}

.book-rebuilt-part-note p {
  margin: 0;
  color: #705f57;
  font-size: 11px;
  line-height: 1.75;
}

.book-rebuilt-part-checks {
  padding: 15px 16px 16px;
  border: 1px solid #cddbd8;
  border-radius: 5px;
  background: #f8fbfa;
}

.book-rebuilt-part-checks ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 11px 0 0;
  padding: 1px;
  background: #cfddda;
  list-style: none;
}

.book-rebuilt-part-checks li {
  display: grid;
  gap: 4px;
  padding: 12px 13px;
  background: #fff;
}

.book-rebuilt-part-checks b {
  color: #315d5a;
  font-size: 11px;
  line-height: 1.5;
}

.book-rebuilt-part-checks li > span {
  color: #607479;
  font-size: 10px;
  line-height: 1.65;
}

@media (max-width: 920px) {
  .book-rebuilt-part-options > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book-rebuilt-part-checks ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .book-rebuilt-part { margin-right: -8px; margin-left: -8px; padding: 16px 12px; }
  .book-rebuilt-part-steps,
  .book-rebuilt-part-options > div,
  .book-rebuilt-part-checks ol,
  .book-rebuilt-part-note { grid-template-columns: 1fr; }
  .book-rebuilt-part-options > header h4,
  .book-rebuilt-part-checks > header h4 { font-size: 16px; }
  .book-rebuilt-part-option-photo img { height: 190px; }
  .book-power-atx-guide { padding: 14px 12px; }
  .book-power-atx-guide > header h4 { font-size: 17px; }
  .book-power-atx-excursion { grid-template-columns: 1fr; }
  .book-power-atx-excursion p { grid-column: 1; }
  .book-power-atx-decisions { grid-template-columns: 1fr; }
  .book-power-standard-separation { align-items: stretch; }
  .book-power-standard-separation > strong { width: 100%; }
  .book-power-table-scroll-hint {
    display: block;
    margin: -2px 0 -7px;
    color: #52727a;
    font-size: 9px;
    font-weight: 900;
    text-align: right;
  }
  .book-power-efficiency-guide { padding: 14px 12px; }
  .book-power-efficiency-guide > header h4 { font-size: 17px; }
  .book-power-efficiency-summary { grid-template-columns: 1fr; }
}

.book-part-guide-photo .book-hdd-photo,
.book-part-visual-photos img[alt*="3.5インチSATA HDD"] {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 23% 76%;
}

.book-term-help {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin: 0 1px;
  padding: 0;
  border: 0;
  border-bottom: 1px dotted #507d7b;
  color: inherit;
  background: transparent;
  font: inherit;
  line-height: inherit;
  letter-spacing: 0;
  text-align: left;
  cursor: help;
}

.book-term-help:hover,
.book-term-help:focus-visible,
.book-term-help[aria-expanded="true"] {
  color: inherit;
  border-bottom-style: solid;
  outline: 0;
}

.book-page button.book-term-help > .book-term-help-icon {
  display: inline-block;
  align-self: center;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: #397f8d;
  line-height: 0;
  transform: translateY(-.5px);
}

.book-page button.book-term-help > .book-term-help-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.book-page button.book-term-help > .book-term-help-icon circle:first-child,
.book-page button.book-term-help > .book-term-help-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.book-page button.book-term-help > .book-term-help-icon .book-term-help-icon-dot {
  fill: currentColor;
  stroke: none;
}

.book-page button.book-term-help:hover > .book-term-help-icon,
.book-page button.book-term-help:focus-visible > .book-term-help-icon,
.book-page button.book-term-help[aria-expanded="true"] > .book-term-help-icon {
  color: #0c6875;
}

.book-term-popover {
  position: fixed;
  z-index: 2100;
  max-height: calc(100dvh - 20px);
  overflow: auto;
  padding: 17px 38px 16px 17px;
  border: 1px solid #8cafaa;
  border-top: 4px solid var(--book-green);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 36px rgba(32, 56, 61, .2);
}

.book-term-popover[hidden] { display: none; }
.book-term-popover > strong { display: block; color: #214448; font-size: 14px; line-height: 1.45; }
.book-term-popover > p { margin: 7px 0 0; color: #596e73; font-size: 12px; line-height: 1.75; }
.book-term-popover > small { display: block; margin-top: 10px; padding-top: 9px; border-top: 1px solid #d9e3e1; color: #3e6968; font-size: 10px; font-weight: 800; line-height: 1.65; }
.book-term-popover-close { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid #cad8d5; border-radius: 4px; color: #476266; background: #f6f9f8; font-size: 18px; line-height: 1; cursor: pointer; }

@media (max-width: 1040px) {
  .book-selection-overview { grid-template-columns: 1fr; }
  .book-selection-overview .book-real-figure img { min-height: 0; height: auto; }
  .book-selection-map > ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book-selection-map > ol > li:nth-child(4)::after { display: block; }
  .book-selection-map > ol > li:nth-child(even)::after { display: none; }
}

@media (max-width: 720px) {
  .book-selection-branches,
  .book-selection-branches.is-four,
  .book-part-patterns > div,
  .book-part-standards dl,
  .book-part-order { grid-template-columns: 1fr; }
  .book-part-selection { padding: 16px; }
  .book-part-guide > header { grid-template-columns: 46px minmax(0, 1fr); }
  .book-part-guide > header > .book-part-guide-photo { grid-column: 1 / -1; grid-row: auto; margin-top: 7px; }
  .book-part-role h4,
  .book-part-patterns > header h4,
  .book-part-standards > header h4 { font-size: 16px; }
  .book-part-role p { font-size: 13px; }
  .book-route-jisako { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .book-route-jisako .book-button { width: 100%; }
  .book-choice-tiebreaker { padding-right: 16px; padding-left: 16px; }
  .book-choice-tiebreaker > div { grid-template-columns: 1fr; }
  .book-choice-tiebreaker > div > section,
  .book-choice-tiebreaker > div > section + section { padding: 14px 0; border-left: 0; }
  .book-choice-tiebreaker > div > section + section { border-top: 1px solid #d7e1df; }
  .book-choice-tiebreaker-note { margin-right: -16px; margin-left: -16px; padding-right: 16px; padding-left: 16px; }
}

@media (max-width: 480px) {
  .book-selection-map { padding: 16px 13px; }
  .book-selection-map > header h3 { font-size: 18px; }
  .book-selection-map > ol { grid-template-columns: 1fr; gap: 14px; }
  .book-selection-map > ol > li::after,
  .book-selection-map > ol > li:nth-child(4)::after {
    display: block;
    top: auto;
    right: 50%;
    bottom: -9px;
    transform: translateX(50%) rotate(135deg);
  }
  .book-selection-map > ol > li:last-child::after { display: none; }
  .book-part-selection { margin-right: -8px; margin-left: -8px; padding: 14px 12px; }
  .book-part-patterns article { padding: 13px 12px; }
  .book-term-popover { padding: 16px 36px 15px 15px; }
}

/* Part guide: connect the product photo, selection order, and specification terms. */
.book-part-visual-basics {
  grid-column: 1 / -1;
  min-width: 0;
  margin-top: 2px;
  padding: 19px 0 4px;
  border-top: 4px solid #2f6e6a;
}

.book-part-visual-basics > header {
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(0, 1fr);
  gap: 3px 24px;
  align-items: end;
  margin-bottom: 14px;
}

.book-part-visual-basics > header > span {
  grid-column: 1 / -1;
  width: fit-content;
  padding: 6px 11px;
  border: 1px solid #b7d3ce;
  border-left: 4px solid var(--book-green);
  border-radius: 3px;
  background: #e1efec;
  color: var(--book-green-dark);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.35;
}

.book-part-visual-basics > header h3 {
  margin: 0;
  color: #223f45;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.35;
}

.book-part-visual-basics > header p {
  margin: 0;
  color: #5b7075;
  font-size: 12px;
  line-height: 1.7;
}

.book-part-visual-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 18px 24px;
  align-items: stretch;
}

.book-part-detail-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #c9d6d4;
  background: #c9d6d4;
}

.book-part-detail-photos figure {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  margin: 0;
  background: #fff;
}

.book-part-detail-photo {
  position: relative;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: #e8eeec;
}

.book-part-detail-photo::after {
  position: absolute;
  inset: 8px;
  border: 1px solid rgb(255 255 255 / 44%);
  content: '';
  pointer-events: none;
}

.book-part-detail-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.book-part-detail-photo.is-photo-2 img {
  object-position: 55% center;
}

.book-part-visual-basics.is-optical .book-part-detail-photo.is-photo-1 img {
  transform: scale(1.42);
  transform-origin: 18% 48%;
}

.book-part-visual-basics.is-optical .book-part-detail-photo.is-photo-2 img {
  transform: scale(1.42);
  transform-origin: 82% 52%;
}

.book-part-detail-photo.is-real-photo {
  background: #f6f7f5;
}

.book-part-detail-photo.is-real-photo img {
  object-fit: contain;
  object-position: center;
  transform: none;
}

.book-part-detail-photo.is-size-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
  padding: 10px 8px 6px;
}

.book-motherboard-size-sample {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 4px;
  min-width: 0;
  height: 100%;
  color: #425e63;
  font-size: 9px;
  line-height: 1.3;
  text-align: center;
}

.book-motherboard-size-sample > span {
  display: flex;
  min-width: 0;
  min-height: 0;
  align-items: flex-end;
  justify-content: center;
}

.book-part-detail-photo.is-size-comparison .book-motherboard-size-sample img {
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.book-motherboard-size-sample.is-atx img {
  height: 100%;
}

.book-motherboard-size-sample.is-matx img {
  height: 75.4%;
}

.book-motherboard-size-sample b {
  font-weight: 700;
}

.book-part-visual-basics.is-ssd .book-part-visual-layout {
  grid-template-columns: minmax(0, 1fr);
}

.book-part-visual-basics.is-ssd .book-part-detail-photos > figure:nth-of-type(3) {
  grid-column: 1 / -1;
  grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr);
  grid-template-rows: auto;
}

.book-m2-interface-note {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  background: #eef7f5;
}

.book-m2-interface-note > strong {
  color: #28565a;
  font-size: 13px;
  line-height: 1.5;
}

.book-m2-interface-note > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #c8deda;
  background: #c8deda;
}

.book-m2-interface-note > div span {
  padding: 9px 11px;
  background: #fff;
  color: #526d72;
  font-size: 11px;
  line-height: 1.65;
}

.book-m2-interface-note b {
  display: block;
  margin-bottom: 2px;
  color: #117970;
  font-size: 11px;
}

.book-m2-interface-note p {
  margin: 0;
  color: #667b7f;
  font-size: 10px;
  line-height: 1.6;
}

.book-ssd-metric-guides {
  display: grid;
  gap: 18px;
  padding: 0 21px 21px;
}

.book-ssd-metric-guide {
  overflow: hidden;
  border: 1px solid #c9d9d6;
  border-top: 4px solid #2b7770;
  background: #fff;
}

.book-ssd-metric-guide > header {
  padding: 17px 19px 15px;
  background: linear-gradient(135deg, #edf7f5, #f8fbfa);
}

.book-ssd-metric-guide > header span {
  color: #1b766d;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.book-ssd-metric-guide > header h4 {
  margin: 3px 0 0;
  color: #23454a;
  font-size: 20px;
  line-height: 1.45;
}

.book-ssd-metric-guide > header p {
  margin: 7px 0 0;
  color: #5c7377;
  font-size: 12px;
  line-height: 1.75;
}

.book-ssd-metric-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid #cfddda;
  border-bottom: 1px solid #cfddda;
  background: #cfddda;
}

.book-ssd-metric-list.is-endurance {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.book-ssd-metric-list article {
  padding: 14px 16px;
  background: #fff;
}

.book-ssd-metric-list article > b {
  display: block;
  color: #254e53;
  font-size: 13px;
  line-height: 1.5;
}

.book-ssd-metric-list article > b em {
  margin-left: 4px;
  color: #71868a;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.book-ssd-metric-list article p {
  margin: 6px 0 0;
  color: #526a6f;
  font-size: 11px;
  line-height: 1.72;
}

.book-ssd-metric-list article small {
  display: block;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid #e0e8e6;
  color: #718387;
  font-size: 9px;
  line-height: 1.65;
}

.book-ssd-reading-order,
.book-ssd-endurance-example {
  margin: 14px 16px 0;
  padding: 12px 14px;
  border-left: 4px solid #348b83;
  background: #eef7f5;
}

.book-ssd-reading-order > strong,
.book-ssd-endurance-example > strong {
  color: #285157;
  font-size: 12px;
}

.book-ssd-reading-order ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 8px 0 0;
  padding: 0;
  background: #c8ddda;
  list-style: none;
  counter-reset: ssd-read-order;
}

.book-ssd-reading-order li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 7px;
  padding: 9px;
  border: 0;
  background: #fff;
  color: #4f696e;
  font-size: 10px;
  line-height: 1.55;
  counter-increment: ssd-read-order;
}

.book-ssd-reading-order li::before {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: #2c7c74;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  content: counter(ssd-read-order);
}

.book-ssd-reading-order p,
.book-ssd-endurance-example p {
  margin: 9px 0 0;
  color: #5b7377;
  font-size: 10px;
  line-height: 1.7;
}

.book-ssd-endurance-example > span {
  display: block;
  margin-top: 5px;
  color: #17776e;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.5;
}

.book-ssd-metric-source {
  margin: 11px 16px 14px;
  color: #73868a;
  font-size: 9px;
  line-height: 1.65;
}

.book-ssd-metric-source a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.book-part-detail-photos figcaption {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 10px 12px 12px;
  border-top: 1px solid #d6dfdd;
}

.book-part-detail-photos figcaption strong {
  color: #2d5155;
  font-size: 12px;
}

.book-part-detail-photos figcaption span {
  color: #61757a;
  font-size: 11px;
  line-height: 1.65;
}

.book-photo-credit {
  display: block;
  margin-top: 3px;
  color: #78878a;
  font-size: 9px;
  line-height: 1.45;
}

.book-photo-credit a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(120 135 138 / 45%);
  text-underline-offset: 2px;
}

.book-part-selection-flow {
  min-width: 0;
  padding: 14px 16px 12px;
  border-block: 1px solid #c8d5d3;
  background: #f4f8f7;
}

.book-part-visual-label {
  margin: 0;
  color: #456167;
  font-size: 11px;
  font-weight: 900;
}

.book-part-selection-flow ol {
  display: grid;
  gap: 0;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.book-part-selection-flow li {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 1px 9px;
  min-height: 75px;
  padding: 11px 0;
  border-top: 1px solid #d6e0de;
}

.book-part-selection-flow li > span {
  grid-row: 1 / span 2;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #276e68;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.book-part-selection-flow li:not(:last-child)::before {
  position: absolute;
  top: 43px;
  bottom: -6px;
  left: 13px;
  width: 2px;
  background: #a9c5c0;
  content: '';
}

.book-part-selection-flow li:not(:last-child)::after {
  position: absolute;
  bottom: -1px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #6f9f98;
  border-bottom: 2px solid #6f9f98;
  content: '';
  transform: rotate(45deg);
  animation: book-part-flow-cue 1.9s ease-in-out infinite;
}

.book-part-selection-flow li strong {
  color: #29494f;
  font-size: 12px;
  line-height: 1.5;
}

.book-part-selection-flow li p {
  margin: 2px 0 0;
  color: #61757a;
  font-size: 11px;
  line-height: 1.65;
}

@keyframes book-part-flow-cue {
  0%, 100% { opacity: .35; transform: translateY(-2px) rotate(45deg); }
  50% { opacity: 1; transform: translateY(3px) rotate(45deg); }
}

.book-part-term-guide {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 0 18px;
  align-items: start;
  margin-top: 14px;
  padding-block: 12px;
  border-block: 1px solid #cedad8;
}

.book-part-term-guide > .book-part-visual-label {
  padding-top: 10px;
  color: #31565a;
}

.book-part-term-guide dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid #d7e0de;
}

.book-part-term-guide dl > div {
  display: grid;
  grid-template-columns: minmax(92px, .34fr) minmax(0, 1fr);
  gap: 9px;
  padding: 9px 10px;
  border-bottom: 1px solid #d7e0de;
}

.book-part-term-guide dl > div:nth-child(odd) {
  border-right: 1px solid #d7e0de;
}

.book-part-term-guide dt {
  color: #2c5156;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.55;
}

.book-part-term-guide dd {
  margin: 0;
  color: #61757a;
  font-size: 11px;
  line-height: 1.65;
}

@media (max-width: 1000px) {
  .book-part-visual-basics > header,
  .book-part-visual-layout {
    grid-template-columns: 1fr;
  }

  .book-part-selection-flow ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .book-part-selection-flow li {
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 0;
    padding: 11px 14px 11px 0;
    border-top: 0;
  }

  .book-part-selection-flow li:not(:last-child)::before {
    top: 24px;
    right: 1px;
    bottom: auto;
    left: auto;
    width: 22px;
    height: 2px;
  }

  .book-part-selection-flow li:not(:last-child)::after {
    top: 20px;
    right: 1px;
    bottom: auto;
    left: auto;
    transform: rotate(-45deg);
    animation: none;
  }
}

@media (max-width: 700px) {
  .book-part-visual-basics {
    padding-top: 16px;
  }

  .book-part-visual-basics > header {
    gap: 5px;
  }

  .book-part-visual-basics > header h3 {
    font-size: 24px;
  }

  .book-part-visual-basics > header > span {
    font-size: 15px;
  }

  .book-part-flow-heading.is-inside {
    margin-right: -12px;
    margin-left: -12px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .book-part-detail-photos,
  .book-part-selection-flow ol,
  .book-part-term-guide,
  .book-part-term-guide dl {
    grid-template-columns: 1fr;
  }

  .book-part-detail-photos figure {
    grid-template-columns: 42% minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .book-part-detail-photo {
    height: 100%;
    min-height: 132px;
    aspect-ratio: auto;
  }

  .book-part-detail-photos figcaption {
    border-top: 0;
    border-left: 1px solid #d6dfdd;
  }

  .book-part-selection-flow li {
    min-height: 72px;
    padding-right: 0;
    border-top: 1px solid #d6e0de;
  }

  .book-part-selection-flow li:not(:last-child)::before {
    top: 43px;
    right: auto;
    bottom: -6px;
    left: 13px;
    width: 2px;
    height: auto;
  }

  .book-part-selection-flow li:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -1px;
    left: 9px;
    transform: rotate(45deg);
  }

  .book-part-term-guide > .book-part-visual-label {
    padding: 0 0 8px;
  }

  .book-part-term-guide dl > div {
    grid-template-columns: minmax(92px, .3fr) minmax(0, 1fr);
  }

  .book-part-term-guide dl > div:nth-child(odd) {
    border-right: 0;
  }
}

/* Actual PC cases share one 500 mm scale so their relative size remains visible. */
.book-case-size-comparison {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 13px 0 0;
  overflow: hidden;
  border: 1px solid #bfd2ce;
  border-radius: 6px;
  background: #f7faf9;
}

.book-case-size-comparison > header {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 10px;
  padding: 11px 13px 10px;
  border-bottom: 1px solid #d3e0dd;
  background: #edf7f5;
}

.book-case-size-comparison > header strong {
  color: #235c57;
  font-size: 14px;
  line-height: 1.4;
}

.book-case-size-comparison > header span {
  padding: 2px 7px;
  border-radius: 999px;
  background: #19766d;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}

.book-case-size-comparison > header p {
  margin: 0;
  color: #5f7577;
  font-size: 10px;
  line-height: 1.55;
}

.book-case-size-comparison-scroll {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: #8eaaa6 #e8f0ee;
}

.book-case-size-comparison-scroll:focus-visible {
  outline: 3px solid rgb(25 118 109 / 18%);
  outline-offset: -3px;
}

.book-case-size-comparison-stage {
  display: grid;
  grid-template-columns: 42px repeat(4, minmax(170px, 1fr));
  gap: 0 8px;
  min-width: 800px;
  padding: 15px 13px 12px 8px;
}

.book-case-size-scale,
.book-case-size-photo-zone {
  height: 220px;
}

.book-case-size-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 5px 0 0;
  border-right: 1px solid #a9bfbb;
  color: #728582;
  text-align: right;
}

.book-case-size-scale b {
  font-size: 8px;
  font-weight: 850;
  line-height: 1;
  transform: translateY(-50%);
}

.book-case-size-scale b:last-child {
  transform: translateY(50%);
}

.book-case-size-comparison-stage > article {
  display: grid;
  min-width: 0;
  grid-template-rows: 220px auto auto auto auto;
  align-content: start;
  text-align: center;
}

.book-case-size-photo-zone {
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid #78958f;
  background: repeating-linear-gradient(to top, transparent 0 43px, rgb(111 143 137 / 16%) 43px 44px);
}

.book-case-size-photo {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--case-height-ratio);
  overflow: hidden;
}

.book-case-size-photo img {
  position: absolute;
  bottom: var(--case-photo-bottom);
  left: 50%;
  display: block;
  width: auto;
  max-width: none;
  height: var(--case-photo-height);
  transform: translateX(-50%);
}

.book-case-size-comparison-stage > article > strong {
  margin-top: 8px;
  color: #294e4b;
  font-size: 11px;
  line-height: 1.45;
}

.book-case-size-comparison-stage > article > b {
  margin-top: 3px;
  color: #176d65;
  font-size: 9px;
  line-height: 1.45;
}

.book-case-size-comparison-stage > article > small {
  margin-top: 3px;
  color: #637977;
  font-size: 8.5px;
  line-height: 1.45;
}

.book-case-size-comparison-stage .book-photo-credit {
  display: block;
  margin-top: 3px;
  color: #7a8c89;
  font-size: 7.5px;
  line-height: 1.4;
}

.book-case-size-comparison-stage .book-photo-credit a {
  color: inherit;
}

.book-case-size-comparison > figcaption {
  padding: 8px 12px;
  border-top: 1px solid #d5e1df;
  background: #fff;
  color: #677a7d;
  font-size: 9px;
  line-height: 1.55;
}

.book-rebuilt-part.is-case .book-rebuilt-part-options > div {
  margin-top: 9px;
}

.book-rebuilt-part.is-case .book-rebuilt-part-options {
  min-width: 0;
}

@media (max-width: 620px) {
  .book-case-size-comparison > header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .book-case-size-comparison > header p {
    grid-column: 1 / -1;
  }

  .book-case-size-comparison-stage {
    grid-template-columns: 38px repeat(4, 155px);
    min-width: 700px;
  }

  .book-case-size-scale,
  .book-case-size-photo-zone {
    height: 180px;
  }

  .book-case-size-comparison-stage > article {
    grid-template-rows: 180px auto auto auto auto;
  }

  .book-case-size-photo-zone {
    background-size: 100% 36px;
  }

  .book-case-size-comparison-scroll::after {
    position: sticky;
    right: 8px;
    bottom: 8px;
    display: block;
    width: fit-content;
    margin: -1px 8px 7px auto;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgb(35 83 78 / 88%);
    color: #fff;
    font-size: 8px;
    font-weight: 850;
    content: '横へスクロール →';
    pointer-events: none;
  }
}

@media (max-width: 430px) {
  .book-part-detail-photos figure {
    grid-template-columns: 1fr;
  }

  .book-part-detail-photo {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .book-part-detail-photos figcaption {
    border-top: 1px solid #d6dfdd;
    border-left: 0;
  }

  .book-part-term-guide dl > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

@media (max-width: 700px) {
  .book-part-visual-basics.is-ssd .book-part-detail-photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-part-visual-basics.is-ssd .book-part-detail-photos > figure {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .book-part-visual-basics.is-ssd .book-part-detail-photos > figure:nth-of-type(3) {
    grid-template-columns: 42% minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .book-part-visual-basics.is-ssd .book-part-detail-photos > figure:nth-of-type(3) figcaption {
    border-top: 0;
    border-left: 1px solid #d6dfdd;
  }

  .book-m2-interface-note > div,
  .book-ssd-metric-list,
  .book-ssd-metric-list.is-endurance {
    grid-template-columns: 1fr;
  }

  .book-ssd-metric-guides {
    padding: 0 12px 16px;
  }

  .book-ssd-metric-guide > header {
    padding: 15px;
  }

  .book-ssd-metric-guide > header h4 {
    font-size: 18px;
  }

  .book-ssd-reading-order ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .book-part-visual-basics.is-ssd .book-part-detail-photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-part-visual-basics.is-ssd .book-part-detail-photos > figure {
    grid-template-columns: 1fr;
  }

  .book-part-visual-basics.is-ssd .book-part-detail-photos > figure:nth-of-type(3) {
    grid-template-columns: 42% minmax(0, 1fr);
  }

  .book-part-visual-basics.is-ssd .book-part-detail-photos > figure:nth-of-type(-n + 2) figcaption {
    padding: 8px 9px 10px;
  }

  .book-part-visual-basics.is-ssd .book-part-detail-photos > figure:nth-of-type(-n + 2) figcaption strong {
    font-size: 11px;
  }

  .book-part-visual-basics.is-ssd .book-part-detail-photos > figure:nth-of-type(-n + 2) figcaption span {
    font-size: 10px;
    line-height: 1.55;
  }

  .book-m2-interface-note {
    padding: 11px;
  }

  .book-ssd-reading-order,
  .book-ssd-endurance-example {
    margin-right: 11px;
    margin-left: 11px;
  }

  .book-ssd-reading-order ol {
    grid-template-columns: 1fr;
  }

  .book-ssd-endurance-example > span {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .book-part-selection-flow li:not(:last-child)::after {
    animation: none;
  }
}

/* Assembly actions use in-progress photos so beginners can match hand and part positions. */
.book-assembly-page .book-assembly-stage {
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
}

.book-assembly-action-figure,
.book-assembly-action-wide {
  overflow: hidden;
  border: 1px solid #c8d6d3;
  border-radius: 5px;
  background: #eef3f2;
  box-shadow: 0 8px 22px rgba(33, 60, 64, .08);
}

.book-assembly-action-figure img,
.book-assembly-action-wide img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.book-assembly-action-figure figcaption,
.book-assembly-action-wide figcaption {
  padding: 10px 12px;
  border-top: 1px solid #d3dfdd;
  background: #f8fbfa;
  color: #50696e;
  font-size: 11px;
  line-height: 1.65;
}

.book-socket-cover-note {
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid #e2c98d;
  border-left: 4px solid #c8952b;
  border-radius: 4px;
  background: #fffaf0;
  color: #5f5847;
}

.book-socket-cover-note strong {
  display: block;
  color: #684f1e;
  font-size: 14px;
}

.book-socket-cover-note p {
  margin: 6px 0 0;
  color: #675f4d;
  font-size: 12px;
  line-height: 1.75;
}

.book-wiring-action-layout {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid #d0ddda;
  background: #f7faf9;
}

.book-wiring-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.book-wiring-guide-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #cbd8d6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 5px 16px rgb(38 68 72 / 6%);
}

.book-wiring-guide-card > header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 17px;
  border-bottom: 1px solid #d7e1df;
  background: #f5f9f8;
}

.book-wiring-guide-card > header > span {
  display: grid;
  flex: 0 0 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #315c61;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.book-wiring-guide-card > header small {
  display: block;
  margin-bottom: 1px;
  color: #6c7f83;
  font-size: 10px;
  font-weight: 800;
}

.book-wiring-guide-card > header h3 {
  margin: 0;
  color: #294a50;
  font-size: 18px;
  line-height: 1.35;
}

.book-wiring-guide-media {
  margin: 0;
  border-bottom: 1px solid #d7e1df;
  background: #edf2f1;
}

.book-wiring-guide-media img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: contain;
  background: #e8eeed;
}

.book-wiring-guide-media.is-wide img {
  object-fit: cover;
}

.book-wiring-guide-media figcaption {
  min-height: 64px;
  padding: 9px 12px 10px;
  background: #f8faf9;
  color: #607479;
  font-size: 11px;
  line-height: 1.55;
}

.book-wiring-guide-media figcaption strong {
  color: #2f555b;
}

.book-wiring-guide-copy {
  padding: 15px 17px 17px;
}

.book-wiring-guide-copy > p:first-child {
  margin: 0;
  color: #53696e;
  font-size: 13px;
  line-height: 1.78;
}

.book-wiring-guide-copy > p:first-child strong {
  color: #2f555b;
}

.book-wiring-guide-copy dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 13px 0 0;
}

.book-wiring-guide-copy dl > div {
  min-width: 0;
  padding: 9px 10px;
  border-left: 3px solid #77a19a;
  background: #f2f7f6;
}

.book-wiring-guide-copy dt {
  color: #335a60;
  font-size: 10px;
  font-weight: 900;
}

.book-wiring-guide-copy dd {
  margin: 3px 0 0;
  color: #5b7075;
  font-size: 11px;
  line-height: 1.55;
}

.book-wiring-card-note {
  margin: 11px 0 0;
  padding: 8px 10px 8px 29px;
  border: 1px solid #cfe0dc;
  background: #f3f8f7;
  color: #4f686d;
  font-size: 11px;
  line-height: 1.6;
}

.book-wiring-card-note::before {
  float: left;
  margin-left: -20px;
  content: "i";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #638d86;
  color: #fff;
  font: 800 10px/15px Georgia, serif;
  text-align: center;
}

.book-wiring-card-note.is-warning {
  border-color: #e3d0a5;
  background: #fffaf0;
  color: #6d5b36;
}

.book-wiring-card-note.is-warning::before {
  content: "!";
  background: #a27a2f;
  font-family: inherit;
}

.book-wiring-card-note.is-danger {
  border-color: #e0b5b0;
  background: #fff5f4;
  color: #744943;
}

.book-wiring-card-note.is-danger::before {
  content: "!";
  background: #a64d45;
  font-family: inherit;
}

.book-wiring-photo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #cfdad8;
}

.book-wiring-photo-pair .book-wiring-guide-media {
  min-width: 0;
  border: 0;
}

.book-wiring-photo-pair .book-wiring-guide-media img {
  height: 176px;
}

.book-wiring-photo-pair .book-wiring-guide-media figcaption {
  min-height: 94px;
}

.book-wiring-photo-pair.is-led-pair .book-wiring-guide-media img {
  height: 210px;
  background: #fff;
}

.book-audio-header-figure {
  background: #e9f0ee;
}

.book-audio-header-diagram {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 230px;
  padding: 22px;
}

.book-audio-header-diagram > div {
  display: grid;
  gap: 9px;
  justify-items: center;
  min-width: 0;
  color: #34585e;
  text-align: center;
}

.book-audio-header-diagram > div > strong {
  font-size: 12px;
  line-height: 1.45;
}

.book-audio-header-diagram > div > small {
  color: #667a7e;
  font-size: 10px;
}

.book-pin-matrix {
  display: grid;
  grid-template-columns: repeat(5, 17px);
  gap: 7px;
  padding: 12px;
  border: 2px solid #4a666b;
  border-radius: 5px;
  background: #253b40;
  box-shadow: inset 0 0 0 3px #1b3034;
}

.book-pin-matrix i {
  display: block;
  width: 17px;
  height: 17px;
  border: 2px solid #8fa1a4;
  border-radius: 50%;
  background: #dbe3e2;
}

.book-pin-matrix.is-header i {
  width: 8px;
  height: 19px;
  margin-inline: 4px;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #b28a34, #f2d37f 52%, #a87820);
}

.book-pin-matrix i.is-key {
  display: grid;
  place-items: center;
  border-color: #c57e72;
  background: #6a3934;
  color: #fff;
  font: 900 11px/1 sans-serif;
}

.book-pin-matrix.is-header i.is-key {
  border: 1px dashed #b76359;
  background: transparent;
}

.book-audio-match-arrow {
  color: #54787a;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.book-audio-match-arrow::after {
  display: block;
  margin-top: 4px;
  content: "→";
  font-size: 24px;
  line-height: 1;
}

.book-fan-pin-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 11px 13px;
  border-top: 1px solid #d7e1df;
  border-bottom: 1px solid #d7e1df;
  background: #f4f8f7;
}

.book-fan-pin-guide > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: #3f6267;
  font-size: 10px;
}

.book-fan-pin-guide i {
  display: flex;
  gap: 4px;
  padding: 6px;
  border: 2px solid #60777b;
  border-radius: 4px;
  background: #293f43;
}

.book-fan-pin-guide em {
  width: 6px;
  height: 14px;
  border-radius: 1px;
  background: #d8b768;
}

.book-assembly-finish-grid .book-assembly-action-figure {
  position: static;
  width: 100%;
  margin-bottom: 15px;
  box-shadow: none;
}

@media (max-width: 1180px) {
  .book-assembly-page .book-assembly-stage {
    grid-template-columns: minmax(260px, 310px) minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .book-assembly-page .book-assembly-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  .book-assembly-page .book-assembly-stage > .book-assembly-action-figure {
    position: static;
    width: min(100%, 620px);
  }

  .book-wiring-action-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .book-wiring-guide-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .book-assembly-page .book-assembly-stage > .book-assembly-action-figure,
  .book-assembly-page .book-assembly-finish-grid .book-assembly-action-figure {
    width: 100%;
  }

  .book-assembly-action-figure figcaption,
  .book-assembly-action-wide figcaption {
    font-size: 12px;
  }

  .book-wiring-action-layout {
    padding: 12px;
  }

  .book-wiring-guide-grid {
    gap: 14px;
    margin-top: 18px;
  }

  .book-wiring-guide-card > header {
    padding: 12px 13px;
  }

  .book-wiring-guide-card > header h3 {
    font-size: 16px;
  }

  .book-wiring-guide-media img {
    height: 190px;
  }

  .book-wiring-photo-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .book-wiring-photo-pair .book-wiring-guide-media img,
  .book-wiring-photo-pair.is-led-pair .book-wiring-guide-media img {
    height: min(68vw, 265px);
  }

  .book-wiring-photo-pair .book-wiring-guide-media figcaption,
  .book-wiring-guide-media figcaption {
    min-height: 0;
  }

  .book-wiring-guide-copy {
    padding: 13px;
  }

  .book-wiring-guide-copy dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .book-audio-header-diagram {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    padding: 18px 12px;
  }

  .book-audio-match-arrow::after {
    content: "↓";
  }

  .book-fan-pin-guide {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* UEFI update guide: method choice, steps, and risks. */
.book-update-methods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0 20px;
}

.book-update-methods > article {
  min-width: 0;
  padding: 18px;
  border: 1px solid #cbd8d6;
  border-top: 4px solid #198178;
  border-radius: 6px;
  background: #fff;
}

.book-update-methods > article:nth-child(2) {
  border-top-color: #d38a32;
}

.book-update-methods > article:nth-child(3) {
  border-top-color: #7b8e93;
}

.book-update-methods header span {
  display: block;
  margin-bottom: 4px;
  color: #0d6a63;
  font-size: 10px;
  font-weight: 900;
}

.book-update-methods > article:nth-child(2) header span {
  color: #9c5b13;
}

.book-update-methods > article:nth-child(3) header span {
  color: #5e7378;
}

.book-update-methods h3 {
  margin: 0;
  color: #263f45;
  font-size: 17px;
  line-height: 1.45;
}

.book-update-methods article > p {
  min-height: 6.8em;
  margin: 10px 0 14px;
  color: #526a70;
  font-size: 13px;
  line-height: 1.7;
}

.book-update-methods dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.book-update-methods dl > div {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid #e0e7e5;
}

.book-update-methods dt {
  color: #687d82;
  font-size: 10px;
  font-weight: 900;
}

.book-update-methods dd {
  margin: 0;
  color: #354f55;
  font-size: 11px;
  line-height: 1.6;
}

div.book-subsection-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 38px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #b9ceca;
}

div.book-subsection-heading > span {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid #b7d3ce;
  border-left: 4px solid var(--book-green);
  border-radius: 3px;
  background: #e1efec;
  color: var(--book-green-dark);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}

div.book-subsection-heading > h3 {
  margin: 0;
  color: #263f45;
  font-size: 20px;
  line-height: 1.45;
}

.book-update-flow.book-process-flow.is-six-step {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.book-update-flow.book-process-flow.is-six-step > li:nth-child(3)::after {
  top: auto;
  right: 50%;
  bottom: -11px;
  display: block;
  transform: translateX(50%) rotate(135deg);
}

.book-update-flow.book-process-flow.is-six-step > li:nth-child(4) { grid-column: 3; grid-row: 2; }
.book-update-flow.book-process-flow.is-six-step > li:nth-child(5) { grid-column: 2; grid-row: 2; }
.book-update-flow.book-process-flow.is-six-step > li:nth-child(6) { grid-column: 1; grid-row: 2; }

.book-update-flow.book-process-flow.is-six-step > li:nth-child(n+4):not(:last-child)::after {
  top: 50%;
  right: auto;
  bottom: auto;
  left: -11px;
  transform: translateY(-50%) rotate(225deg);
}

.book-update-risks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 30px 0 18px;
  padding: 1px;
  background: #cedad8;
}

.book-update-risks > section {
  padding: 19px;
  background: #fff;
}

.book-update-risks > section:first-child {
  box-shadow: inset 0 3px 0 #c36b5b;
}

.book-update-risks > section:last-child {
  box-shadow: inset 0 3px 0 #d6a14a;
}

.book-update-risks h3 {
  margin: 0 0 11px;
  color: #30494f;
  font-size: 16px;
}

.book-update-risks ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.book-update-risks li {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  padding-top: 9px;
  border-top: 1px solid #e0e7e5;
}

.book-update-risks strong {
  color: #40595f;
  font-size: 12px;
}

.book-update-risks span {
  color: #60757a;
  font-size: 12px;
  line-height: 1.65;
}

.book-refresh-grid small a,
.book-literal-example a,
.book-build-decisions a,
.book-expert-checklist a {
  color: #0b6f68;
  font-weight: 900;
  text-underline-offset: 3px;
}

@media (max-width: 860px) {
  .book-update-methods {
    grid-template-columns: 1fr;
  }

  .book-update-methods article > p {
    min-height: 0;
  }

  .book-update-risks {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 761px) and (max-width: 1000px) {
  .book-update-flow.book-process-flow.is-six-step {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-update-flow.book-process-flow.is-six-step > li:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }

  .book-update-flow.book-process-flow.is-six-step > li:nth-child(n)::after {
    display: none;
  }
}

@media (max-width: 760px) {
  .book-update-flow.book-process-flow.is-six-step {
    grid-template-columns: 1fr;
  }

  .book-update-flow.book-process-flow.is-six-step > li:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }

  .book-update-flow.book-process-flow.is-six-step > li:nth-child(n):not(:last-child)::after {
    top: auto;
    right: 50%;
    bottom: -11px;
    left: auto;
    display: block;
    transform: translateX(50%) rotate(135deg);
  }
}

@media (max-width: 520px) {
  div.book-subsection-heading {
    display: grid;
    gap: 2px;
  }

  div.book-subsection-heading > h3 {
    font-size: 18px;
  }

  .book-update-risks li {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .book-page {
    scroll-behavior: auto;
  }
}

/* Beginner guide hub and chapter pages */
.book-hub-page #book-main {
  display: block;
  width: 100%;
  min-width: 0;
  color: var(--book-ink);
}

.book-chapter-page #book-main {
  display: block;
  width: min(calc(100% - 32px), 1180px);
  min-width: 0;
  margin-right: auto;
  margin-left: auto;
  color: var(--book-ink);
}

.book-hub-hero {
  position: relative;
  isolation: isolate;
  clear: both;
  width: 100%;
  min-height: 520px;
  overflow: hidden;
  background-color: #e5ecea;
  background-image: url('./book/pc-interior-rtx5090.webp');
  background-position: center right;
  background-size: cover;
}

.book-hub-hero::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 61%;
  background: rgba(248, 251, 250, .95);
}

.book-hub-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 660px) minmax(0, 1fr);
  width: min(calc(100% - 32px), 1180px);
  margin: 0 auto;
  padding: 76px 0 72px;
}

.book-hub-hero-inner > * {
  grid-column: 1;
  min-width: 0;
}

.book-hub-hero h1 {
  max-width: 680px;
  margin: 0;
  color: #142b31;
  font-size: 43px;
  line-height: 1.28;
  letter-spacing: 0;
}

.book-hub-hero-inner > p:not(.book-kicker) {
  max-width: 660px;
  margin: 20px 0 0;
  color: #405960;
  font-size: 17px;
  line-height: 1.95;
}

.book-hub-answer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100% - 32px, 1180px);
  margin: -26px auto 0;
  border: 1px solid #cbd7d5;
  background: #fff;
  box-shadow: 0 8px 24px rgba(28, 52, 57, .08);
}

.book-hub-answer > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px 10px;
  min-height: 118px;
  align-content: center;
  padding: 18px;
  border-right: 1px solid #dbe3e2;
}

.book-hub-answer > div:last-child {
  border-right: 0;
}

.book-hub-answer span {
  grid-row: 1 / 3;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #e3f0ed;
  color: var(--book-green-dark);
  font-size: 12px;
  font-weight: 900;
}

.book-hub-answer strong {
  color: #253f45;
  font-size: 14px;
}

.book-hub-answer p {
  margin: 3px 0 0;
  color: #63767b;
  font-size: 12px;
  line-height: 1.6;
}

.book-hub-choice,
.book-real-pc-intro,
.book-reading-route,
.book-hub-cta,
.book-chapter-shell {
  width: min(100% - 32px, 1180px);
  margin-right: auto;
  margin-left: auto;
}

.book-hub-choice {
  padding: 74px 0 58px;
}

.book-section-lead {
  max-width: 900px;
  margin: 12px 0 22px;
  color: #536a70;
  font-size: 15px;
  line-height: 1.85;
}

.book-question-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.book-question-group {
  margin-top: 30px;
}

.book-question-group > header {
  display: grid;
  grid-template-columns: minmax(220px, .38fr) minmax(0, 1fr);
  gap: 18px;
  align-items: baseline;
  padding: 0 2px 10px;
  border-bottom: 1px solid #cbd8d6;
}

.book-question-group > header h3 {
  margin: 0;
  color: #1f3e44;
  font-size: 19px;
  line-height: 1.45;
}

.book-question-group > header p {
  margin: 0;
  color: #64787d;
  font-size: 13px;
  line-height: 1.7;
}

.book-question-grid > a {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 24px;
  gap: 15px;
  min-height: 156px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid #ccd8d6;
  border-radius: 7px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.book-question-grid > a:hover,
.book-question-grid > a:focus-visible {
  border-color: #6e9992;
  outline: 3px solid rgba(15, 118, 110, .09);
}

.book-question-visual {
  display: flex;
  width: 108px;
  align-self: stretch;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.book-question-visual img {
  display: block;
  width: 108px;
  height: 81px;
  object-fit: contain;
}

.book-question-visual > span {
  display: grid;
  width: 76px;
  min-height: 36px;
  padding: 5px 8px;
  place-items: center;
  border-radius: 18px;
  background: #e4f0ed;
  color: var(--book-green-dark);
  font-size: 13px;
  font-weight: 900;
}

.book-question-grid strong {
  color: #223d43;
  font-size: 16px;
  line-height: 1.45;
}

.book-question-grid p {
  margin: 5px 0 0;
  color: #5e7277;
  font-size: 13px;
  line-height: 1.7;
}

.book-question-grid small {
  display: block;
  margin-top: 7px;
  color: var(--book-green-dark);
  font-size: 11px;
  font-weight: 900;
}

.book-question-grid b {
  color: #8aa09c;
  font-size: 20px;
}

.book-real-pc-intro {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(460px, 1.15fr);
  gap: 42px;
  align-items: center;
  padding: 52px 0;
  border-top: 1px solid #c8d5d3;
  border-bottom: 1px solid #c8d5d3;
}

.book-hub-cta strong {
  margin: 0;
  color: #1d373d;
  font-size: 25px;
  line-height: 1.45;
}

.book-real-pc-copy > p:not(.book-kicker) {
  margin: 13px 0 0;
  color: #526970;
  font-size: 15px;
  line-height: 1.88;
}

.book-real-pc-copy .book-inline-cta {
  display: inline-block;
  margin-top: 17px;
}

.book-real-pc-intro figure,
.book-real-figure {
  margin: 0;
}

.book-real-pc-intro img,
.book-real-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #c7d4d2;
}

.book-real-pc-intro figcaption,
.book-real-figure figcaption {
  margin-top: 7px;
  color: #718489;
  font-size: 12px;
  line-height: 1.55;
}

.book-reading-route {
  display: grid;
  grid-template-columns: minmax(250px, .42fr) minmax(0, 1fr);
  gap: 42px;
  padding: 58px 0;
}

.book-reading-route ol {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 1px;
  background: #d0dcda;
  list-style: none;
}

.book-reading-route a {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 2px 10px;
  min-height: 68px;
  align-content: center;
  padding: 10px 14px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.book-reading-route a:hover,
.book-reading-route a:focus-visible {
  background: #edf6f3;
  outline: none;
}

.book-reading-route a > span {
  grid-row: 1 / 3;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--book-green);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.book-reading-route strong {
  color: #29444a;
  font-size: 14px;
}

.book-reading-route small {
  color: #6e8085;
  font-size: 12px;
}

.book-reading-route > div > p:not(.book-kicker) {
  margin: 11px 0 0;
  color: #60757a;
  font-size: 13px;
  line-height: 1.75;
}

.book-hub-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 56px;
  padding: 24px 26px;
  border-left: 5px solid var(--book-coral);
  background: #fff;
}

.book-hub-cta strong {
  font-size: 19px;
}

.book-hub-cta p {
  max-width: 780px;
  margin: 6px 0 0;
  color: #60747a;
  font-size: 13px;
  line-height: 1.7;
}

.book-hub-cta .book-button {
  flex: 0 0 auto;
}

.book-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 17px 0 0;
  color: #74868a;
  font-size: 12px;
}

.book-breadcrumb a {
  color: var(--book-green-dark);
  text-underline-offset: 3px;
}

.book-breadcrumb a b {
  color: var(--book-coral);
  font-size: 10px;
}

.book-chapter-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 48px;
  align-items: center;
  min-height: 355px;
  padding: 44px 0 38px;
  border-bottom: 1px solid #c8d5d3;
}

.book-chapter-hero h1 {
  max-width: 800px;
  margin: 0;
  color: #162f35;
  font-size: 36px;
  line-height: 1.27;
  letter-spacing: 0;
}

.book-chapter-number {
  width: fit-content;
  margin: 0 0 10px;
  padding: 6px 11px;
  border: 1px solid #b7d3ce;
  border-left: 4px solid var(--book-green);
  border-radius: 3px;
  background: #e1efec;
  color: var(--book-green-dark);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0;
  box-shadow: inset 0 -1px 0 rgba(15, 118, 110, .06);
}

.book-hub-hero .book-kicker {
  font-size: 15px;
}

.book-chapter-promise {
  max-width: 790px;
  margin: 15px 0 0;
  color: #2f5056;
  font-size: 19px;
  font-weight: 850;
  line-height: 1.6;
}

.book-chapter-intro {
  max-width: 790px;
  margin: 10px 0 0;
  color: #4e656b;
  font-size: 15px;
  line-height: 1.86;
}

.book-page-purpose {
  max-width: 790px;
  margin: 15px 0 0;
  padding: 12px 15px;
  border-left: 4px solid var(--book-green);
  background: #eaf3f1;
  color: #294c52;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.75;
}

.book-page-purpose > span {
  display: block;
  margin-bottom: 5px;
  color: var(--book-green-dark);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.45;
}

.book-hub-hero .book-page-purpose {
  max-width: 720px;
  margin-top: 18px;
  font-size: 15px;
}

.book-outcome {
  padding: 17px 19px;
  border-top: 4px solid var(--book-coral);
  border-bottom: 1px solid #cbd7d5;
  background: #fff;
}

.book-outcome > strong,
.book-outcome-visual > div > strong {
  color: #2a444a;
  font-size: 14px;
}

.book-outcome :is(ul, ol) {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.book-outcome li {
  position: relative;
  padding-left: 23px;
  color: #52676d;
  font-size: 13px;
  line-height: 1.65;
}

.book-outcome li::before {
  content: '✓';
  position: absolute;
  left: 2px;
  color: var(--book-green);
  font-weight: 900;
}

.book-outcome-visual {
  padding: 0;
  overflow: hidden;
}

.book-outcome-visual > figure {
  position: relative;
  height: 166px;
  margin: 0;
  overflow: hidden;
  background: #dfe7e5;
}

.book-outcome-visual > figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 47%;
}

.book-outcome-visual > figure figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 7px 10px;
  color: #fff;
  background: rgb(20 43 48 / 82%);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
}

.book-outcome-visual > div {
  padding: 15px 18px 17px;
}

.book-page-toc {
  display: grid;
  grid-template-columns: minmax(190px, .7fr) minmax(0, 2.3fr);
  gap: 22px;
  align-items: center;
  margin: 20px 0 0;
  padding: 15px 0;
  border-bottom: 1px solid #c8d5d3;
}

.book-page-toc > div:first-child {
  display: grid;
  gap: 2px;
}

.book-page-toc > div:first-child strong {
  color: #263f45;
  font-size: 15px;
}

.book-page-toc > div:first-child span {
  color: #718489;
  font-size: 11px;
}

.book-page-toc > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.book-page-toc a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 7px 11px;
  border: 1px solid #c5d4d1;
  border-radius: 6px;
  background: #fff;
  color: #36545a;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.book-page-toc a:hover,
.book-page-toc a:focus-visible {
  border-color: #6f9b94;
  background: #edf6f3;
  outline: 2px solid rgba(15, 118, 110, .1);
}

.book-tech-note {
  margin-top: 22px;
  border-top: 3px solid #5a7f9f;
  border-bottom: 1px solid #c9d6dd;
  background: #f3f7fa;
}

.book-tech-note summary {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 14px 44px 14px 17px;
  color: #294853;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}

.book-tech-note summary::-webkit-details-marker {
  display: none;
}

.book-tech-note summary::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 17px;
  color: #426c8d;
  font-size: 23px;
  font-weight: 500;
  transform: translateY(-50%);
}

.book-tech-note[open] summary::after {
  content: '−';
}

.book-tech-note summary span {
  color: #52738d;
  font-size: 12px;
  font-weight: 900;
}

.book-tech-note > div {
  padding: 0 17px 16px;
  border-top: 1px solid #d3dee4;
}

.book-tech-note p {
  margin: 13px 0 0;
  color: #465f69;
  font-size: 13px;
  line-height: 1.82;
}

.book-tech-note a {
  color: #215f84;
  text-underline-offset: 3px;
}

.book-cable-photo-note > div {
  padding-top: 16px;
}

.book-cable-photo-note .book-cable-photo-intro {
  margin-top: 0;
}

.book-gpu-power-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.book-gpu-power-types section {
  display: grid;
  gap: 5px;
  padding: 12px 13px;
  border: 1px solid #c9d6dd;
  background: #fff;
}

.book-gpu-power-types span {
  color: #52738d;
  font-size: 11px;
  font-weight: 900;
}

.book-gpu-power-types strong {
  color: #294853;
  font-size: 13px;
  line-height: 1.55;
}

.book-gpu-power-types small {
  color: #718489;
  font-size: 10px;
  line-height: 1.55;
}

.book-gpu-power-types .is-confusing {
  border-color: #d59c3c;
  background: #fff8e9;
}

.book-gpu-power-types .is-confusing span {
  color: #8a5a0b;
}

.book-tech-note .book-cable-focus {
  padding: 10px 12px;
  border-left: 4px solid #5a7f9f;
  background: #fff;
}

.book-cable-focus strong {
  display: block;
  margin-bottom: 2px;
  color: #294853;
}

.book-cable-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.book-cable-photo-grid figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid #c9d6dd;
  border-radius: 7px;
  background: #fff;
}

.book-cable-photo-grid img {
  display: block;
  width: 100%;
  height: clamp(215px, 25vw, 350px);
  object-fit: contain;
  background: #f6f6f3;
}

.book-cable-photo-label {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
  padding: 5px 9px;
  border-radius: 4px;
  color: #fff;
  background: rgba(31, 63, 79, .92);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.book-cable-photo-grid figcaption {
  display: grid;
  gap: 6px;
  padding: 12px 13px 13px;
  color: #465f69;
  font-size: 12px;
  line-height: 1.65;
}

.book-cable-photo-grid figcaption > strong {
  color: #244b5b;
  font-size: 15px;
}

.book-cable-photo-grid figcaption > p {
  margin: 0;
  color: #465f69;
  font-size: 12px;
  line-height: 1.7;
}

.book-cable-brief {
  display: grid;
  margin: 2px 0 3px;
  padding: 0;
  border-top: 1px solid #e1e8e8;
  list-style: none;
}

.book-cable-brief li {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid #e1e8e8;
  font-size: 11px;
  line-height: 1.62;
}

.book-cable-brief b {
  color: #52738d;
  font-weight: 900;
}

.book-cable-brief span {
  color: #465f69;
}

.book-cable-photo-grid figcaption small {
  color: #73868d;
  font-size: 10px;
  line-height: 1.55;
}

.book-cable-compare {
  display: grid;
  grid-template-columns: 116px repeat(2, minmax(0, 1fr));
  margin-top: 14px;
  border-top: 1px solid #c9d6dd;
  border-left: 1px solid #c9d6dd;
  background: #fff;
}

.book-cable-compare > div {
  min-width: 0;
  padding: 9px 10px;
  border-right: 1px solid #c9d6dd;
  border-bottom: 1px solid #c9d6dd;
  color: #465f69;
  font-size: 11px;
  line-height: 1.55;
}

.book-cable-compare > div:nth-child(3n + 1) {
  color: #52738d;
  font-weight: 900;
}

.book-cable-compare > .is-head {
  color: #fff;
  background: #476b7b;
  font-weight: 900;
}

.book-cable-compare strong {
  color: #244b5b;
}

.book-cable-photo-check {
  margin-top: 14px;
  padding: 13px 14px;
  border-left: 4px solid #5a7f9f;
  background: #fff;
}

.book-cable-photo-check > strong {
  color: #294853;
  font-size: 13px;
}

.book-cable-photo-check ol {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding-left: 20px;
}

.book-cable-photo-check li {
  padding-left: 2px;
  color: #465f69;
  font-size: 12px;
  line-height: 1.65;
}

.book-cable-photo-check li b,
.book-cable-photo-check li span {
  display: block;
}

.book-cable-photo-check li b {
  color: #294853;
}

.book-tech-note .book-cable-photo-warning {
  padding: 10px 12px;
  border: 1px solid #e2c490;
  background: #fff8e9;
  color: #674915;
}

.book-cable-photo-warning strong {
  display: block;
  margin-bottom: 2px;
}

.book-tech-sources {
  color: #6d818a !important;
  font-size: 11px !important;
}

.book-parallel-note {
  margin: 18px 0 0;
  padding: 11px 14px;
  border-left: 4px solid #d39b28;
  background: #fff8e8;
  color: #5c563f;
  font-size: 13px;
  line-height: 1.75;
}

.book-appearance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 20px;
  padding: 1px;
  background: #ccd8d6;
}

.book-appearance-grid section {
  position: relative;
  min-height: 180px;
  padding: 19px 17px 17px;
  background: #fff;
}

.book-appearance-grid section > span {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 50%;
  background: #e6f1ef;
  color: var(--book-green-dark);
  font-size: 11px;
  font-weight: 900;
}

.book-appearance-grid h3 {
  margin: 12px 0 0;
  color: #29464c;
  font-size: 17px;
  line-height: 1.45;
}

.book-appearance-grid p {
  margin: 8px 0 0;
  color: #5c7176;
  font-size: 12px;
  line-height: 1.75;
}

.book-chapter-section {
  scroll-margin-top: 62px;
  padding: 54px 0 10px;
}

.book-chapter-section + .book-chapter-section {
  margin-top: 38px;
  border-top: 1px solid #c8d5d3;
}

.book-photo-copy-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr);
  gap: 32px;
  align-items: start;
  margin-top: 23px;
}

.book-photo-copy-layout.is-interface-shot {
  grid-template-columns: minmax(500px, 1.08fr) minmax(330px, .92fr);
  align-items: center;
}

.book-interface-figure {
  min-width: 0;
}

.book-interface-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid #c7d4d2;
  background: #e9efee;
}

.book-interface-panels img {
  width: 100%;
  height: 550px;
  object-fit: cover;
  border: 0;
  background: #fff;
}

.book-interface-panels img.is-top {
  object-position: top center;
}

.book-interface-panels img.is-bottom {
  object-position: bottom center;
}

.book-interface-figure.is-check {
  display: grid;
  justify-items: center;
  padding: 14px 14px 0;
  border: 1px solid #c7d4d2;
  background: #e9efee;
}

.book-interface-figure.is-check img {
  width: min(100%, 340px);
  height: auto;
  border: 0;
}

.book-interface-figure.is-check figcaption {
  width: min(100%, 340px);
  margin-bottom: 10px;
}

.book-photo-explanation {
  padding: 5px 0;
}

.book-photo-explanation h3 {
  margin: 0;
  color: #294349;
  font-size: 18px;
}

.book-photo-explanation ol {
  display: grid;
  gap: 0;
  margin: 12px 0 0;
  padding: 0;
  border-top: 1px solid #cfdbd9;
  list-style: none;
}

.book-photo-explanation li {
  display: grid;
  gap: 4px;
  padding: 12px 1px;
  border-bottom: 1px solid #cfdbd9;
}

.book-photo-explanation strong {
  color: #304c52;
  font-size: 14px;
}

.book-photo-explanation span {
  color: #5c7176;
  font-size: 13px;
  line-height: 1.7;
}

.book-photo-stage {
  position: relative;
}

.book-pc-photo-map {
  margin-top: 24px;
}

.book-hotspot {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #173238;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

.book-hotspot span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #0b6f68;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
  color: #fff;
}

.book-hotspot b {
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 4px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  white-space: nowrap;
}

.book-hotspot:hover span,
.book-hotspot:focus-visible span {
  background: var(--book-coral);
}

.book-hotspot.is-motherboard { top: 39%; left: 44%; }
.book-hotspot.is-cpu { top: 21%; left: 30%; }
.book-hotspot.is-memory { top: 17%; left: 54%; }
.book-hotspot.is-gpu { top: 51%; left: 31%; }
.book-hotspot.is-storage { top: 67%; left: 43%; }
.book-hotspot.is-power { top: 79%; left: 26%; }
.book-hotspot.is-fan { top: 37%; left: 72%; }

.book-photo-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 16px 0 0;
  padding: 1px;
  background: #d1dcda;
  list-style: none;
}

.book-photo-legend a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 2px 8px;
  min-height: 64px;
  align-content: center;
  padding: 9px 10px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.book-photo-legend a > span {
  grid-row: 1 / 3;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #e4f0ed;
  color: var(--book-green-dark);
  font-size: 11px;
  font-weight: 900;
}

.book-photo-legend strong {
  color: #2e494f;
  font-size: 12px;
}

.book-photo-legend small {
  color: #6b7d82;
  font-size: 10px;
  line-height: 1.4;
}

.book-process-flow,
.book-trouble-steps,
.book-decision-path ol {
  display: grid;
  gap: 1px;
  margin: 22px 0 0;
  padding: 1px;
  background: #cdd9d7;
  list-style: none;
}

.book-process-flow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.book-process-flow li,
.book-trouble-steps li,
.book-decision-path li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 16px;
  background: #fff;
}

.book-process-flow li > span,
.book-trouble-steps li > span,
.book-decision-path li > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #e1efec;
  color: var(--book-green-dark);
  font-size: 11px;
  font-weight: 900;
}

.book-process-flow strong,
.book-trouble-steps strong,
.book-decision-path strong {
  color: #2b464c;
  font-size: 14px;
  line-height: 1.5;
}

.book-process-flow p,
.book-trouble-steps p,
.book-decision-path p {
  margin: 5px 0 0;
  color: #5d7176;
  font-size: 13px;
  line-height: 1.72;
}

.book-component-list {
  display: grid;
  gap: 1px;
  margin-top: 23px;
  padding: 1px;
  background: #cad7d5;
}

.book-component-kind-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 17px;
  align-items: center;
  margin: 13px 0 0;
  padding: 0;
  color: #526a6f;
  font-size: 11px;
  font-weight: 800;
  list-style: none;
}

.book-component-kind-legend li {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.book-component-kind-legend li::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--book-kind-dot, #16857b);
  box-shadow: 0 0 0 3px var(--book-kind-ring, #dcefeb);
  content: '';
}

.book-component-kind-legend [data-kind='mechanism'],
.book-component-functions > [data-kind='mechanism'] {
  --book-kind-dot: #3978ad;
  --book-kind-ring: #dceaf5;
}

.book-component-kind-legend [data-kind='caution'],
.book-component-functions > [data-kind='caution'] {
  --book-kind-dot: #ca8a24;
  --book-kind-ring: #f7ead2;
}

.book-component-kind-legend [data-kind='limit'],
.book-component-functions > [data-kind='limit'] {
  --book-kind-dot: #b75c70;
  --book-kind-ring: #f4dfe4;
}

.book-component-list > article {
  scroll-margin-top: 64px;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  min-width: 0;
  gap: 10px 30px;
  padding: 22px;
  background: #fff;
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}

.book-component-intro {
  min-width: 0;
}

.book-component-list header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-content: start;
}

.book-component-list header > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--book-green);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.book-component-list header p {
  margin: 0;
  color: var(--book-green);
  font-size: 10px;
  font-weight: 900;
}

.book-component-list h3 {
  margin: 1px 0 0;
  color: #213b41;
  font-size: 19px;
}

.book-component-crop {
  width: 100%;
  aspect-ratio: 16 / 10;
  margin: 14px 0 0;
  overflow: hidden;
  border: 1px solid #d6e0de;
  border-radius: 6px;
  background-color: #eef2f1;
  background-image: url('./book/pc-parts-flatlay.webp');
  background-repeat: no-repeat;
}

.book-component-crop.is-case {
  background-image: url('./book/pc-interior-rtx5090.webp');
  background-position: center;
  background-size: contain;
}

.book-component-crop.is-motherboard { background-position: 32% 18%; background-size: 355% auto; }
.book-component-crop.is-cpu { background-position: 4% 21%; background-size: 600% auto; }
.book-component-crop.is-cpu-cooler { background-position: 68% 14%; background-size: 420% auto; }
.book-component-crop.is-memory {
  position: relative;
  background-image: none;
}
.book-component-crop.is-memory::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62.5%;
  height: 160%;
  background: #eef2f1 url('./book/pc-parts-flatlay.webp') no-repeat 88% 5% / 672% auto;
  transform: translate(-50%, -50%) rotate(90deg);
}
.book-component-crop.is-gpu { background-position: 88% 55%; background-size: 300% auto; }
.book-component-crop.is-storage { background-position: 9% 89%; background-size: 350% auto; }
.book-component-crop.is-power { background-position: 50% 88%; background-size: 360% auto; }
.book-component-crop.is-cooling { background-position: 82% 90%; background-size: 420% auto; }

.book-component-crop.is-system {
  background-image: url('./book/first-boot-uefi.webp');
  background-position: 72% center;
  background-size: cover;
}

.book-component-role {
  grid-column: 2;
  min-width: 0;
}

.book-component-role h4 {
  margin: 0 0 9px;
  color: #294b50;
  font-size: 14px;
  line-height: 1.5;
}

.book-component-functions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  max-width: 100%;
  gap: 1px;
  margin: 0;
  padding: 1px;
  background: #d4dfdd;
  list-style: none;
}

.book-component-functions > li {
  position: relative;
  --book-kind-dot: #16857b;
  --book-kind-ring: #dcefeb;
  min-width: 0;
  padding: 11px 12px 11px 25px;
  background: #f8faf9;
}

.book-component-functions > li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.book-component-functions > li::before {
  content: '';
  position: absolute;
  top: 17px;
  left: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--book-kind-dot);
  box-shadow: 0 0 0 3px var(--book-kind-ring);
}

.book-component-functions strong,
.book-component-functions span {
  display: block;
}

.book-component-functions strong {
  color: #23464a;
  font-size: 12px;
  line-height: 1.5;
}

.book-component-functions span {
  margin-top: 3px;
  color: #5a6f74;
  font-size: 12px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.book-component-guide {
  grid-column: 2;
  display: flex;
  min-width: 0;
  max-width: 100%;
  gap: 14px 22px;
  align-items: center;
  justify-content: space-between;
  padding: 11px 13px;
  border-left: 4px solid #77a79e;
  background: #edf5f3;
}

.book-component-guide > div:first-child {
  min-width: 0;
}

.book-component-guide strong {
  display: block;
  color: #24544f;
  font-size: 12px;
  line-height: 1.5;
}

.book-component-guide p {
  margin: 3px 0 0;
  color: #5a7074;
  font-size: 11px;
  line-height: 1.65;
}

.book-component-guide .book-component-more {
  grid-column: auto;
  flex: 0 0 auto;
}

.book-component-guide-links {
  display: flex;
  flex: 0 0 auto;
  gap: 8px 13px;
  align-items: center;
}

.book-component-list dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 0;
}

.book-component-list dl > div {
  display: grid;
  align-content: start;
}

.book-component-list dt {
  color: #2f5055;
  font-size: 12px;
  font-weight: 900;
}

.book-component-list dd {
  margin: 4px 0 0;
  color: #5a6f74;
  font-size: 13px;
  line-height: 1.72;
}

.book-literal-example {
  grid-column: 2;
  margin: 0;
  padding: 10px 12px;
  background: #edf5f3;
  color: #4c6469;
  font-size: 13px;
  line-height: 1.7;
}

.book-literal-example strong {
  color: #24544f;
}

.book-component-more {
  grid-column: 2;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  color: var(--book-green-dark);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.55;
  text-decoration: none;
}

.book-component-more::after {
  content: '›';
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid #a9c3be;
  border-radius: 50%;
  background: #edf5f3;
  color: var(--book-green-dark);
  font-size: 18px;
  line-height: 1;
}

.book-component-more:hover,
.book-component-more:focus-visible {
  color: #084f4b;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.book-beginner-answer {
  display: grid;
  grid-template-columns: minmax(260px, .58fr) minmax(0, 1fr) auto;
  gap: 20px 30px;
  align-items: center;
  margin: 58px 0 20px;
  padding: 24px 26px;
  border-top: 5px solid var(--book-coral);
  background: #fff;
}

.book-beginner-answer h2 {
  margin: 0;
  color: #203a40;
  font-size: 22px;
  line-height: 1.45;
}

.book-beginner-answer > p {
  margin: 0;
  color: #566d72;
  font-size: 14px;
  line-height: 1.8;
}

.book-beginner-answer > ul {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  background: #d6e0de;
  list-style: none;
}

.book-beginner-answer > ul li {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  background: #f7f9f8;
}

.book-beginner-answer > ul strong {
  color: #2c4a50;
  font-size: 13px;
}

.book-beginner-answer > ul span {
  color: #65787d;
  font-size: 11px;
}

.book-inventory-grid,
.book-do-dont,
.book-adjust-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 22px;
}

.book-inventory-grid > section,
.book-do-dont > section,
.book-adjust-grid > section {
  padding: 19px 21px;
  border-top: 4px solid var(--book-green);
  background: #fff;
}

.book-inventory-grid > section:nth-child(2),
.book-do-dont > section:nth-child(2),
.book-adjust-grid > section:nth-child(2) {
  border-top-color: var(--book-blue);
}

.book-inventory-grid h3,
.book-do-dont h3 {
  margin: 0;
  color: #29444a;
  font-size: 17px;
}

.book-inventory-grid ul,
.book-do-dont ul {
  display: grid;
  gap: 8px;
  margin: 13px 0 0;
  padding-left: 20px;
  color: #566b70;
  font-size: 13px;
  line-height: 1.65;
}

.book-do-dont li strong,
.book-do-dont li span {
  display: block;
}

.book-do-dont li strong {
  color: #2d4b50;
  font-size: 13px;
}

.book-do-dont li span {
  margin-top: 3px;
  color: #64777b;
  font-size: 12px;
  line-height: 1.7;
}

.book-warning-note,
.book-calm-note {
  margin-top: 18px;
  padding: 14px 17px;
  border-left: 5px solid #d2a127;
  background: #fff9e9;
}

.book-calm-note {
  border-left-color: var(--book-blue);
  background: #edf4fa;
}

.book-warning-note strong,
.book-calm-note strong {
  color: #5b491b;
  font-size: 14px;
}

.book-calm-note strong {
  color: #294f70;
}

.book-warning-note p,
.book-calm-note p {
  margin: 5px 0 0;
  color: #685f45;
  font-size: 13px;
  line-height: 1.72;
}

.book-calm-note p {
  color: #526b80;
}

.book-build-decisions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.book-build-decisions > li {
  position: relative;
  min-width: 0;
  padding: 25px 15px 15px;
  border: 1px solid #cbd8d6;
  background: #fff;
}

.book-build-decision-visual {
  position: relative;
  display: grid;
  width: min(100%, 132px);
  aspect-ratio: 1;
  margin: -8px auto 13px;
  padding: 7px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #d9d4c8;
  border-radius: 9px;
  background: #f6f1e5;
}

.book-build-decision-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.book-build-decision-visual figcaption {
  position: absolute;
  right: 7px;
  bottom: 7px;
  max-width: calc(100% - 14px);
  padding: 3px 7px;
  border: 1px solid rgba(137, 171, 165, .72);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #315b56;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

.book-build-decisions > li:not(:last-child)::after {
  content: '';
  position: absolute;
  z-index: 3;
  top: 50%;
  right: -11px;
  width: 20px;
  height: 20px;
  border-top: 1px solid #cbd8d6;
  border-right: 1px solid #cbd8d6;
  background: #fff;
  transform: translateY(-50%) rotate(45deg);
}

.book-build-decisions > li > span {
  position: absolute;
  z-index: 4;
  top: -14px;
  left: 13px;
  display: grid;
  width: 29px;
  height: 27px;
  place-items: center;
  border: 1px solid #9bbab5;
  border-radius: 5px;
  background: #f4f7f6;
  box-shadow: 0 0 0 4px #f4f7f6;
  color: #0b675f;
  font-size: 11px;
  font-weight: 900;
}

.book-build-decisions strong {
  display: block;
  color: #254349;
  font-size: 13px;
  line-height: 1.5;
}

.book-build-decision-category {
  display: block;
  margin: 0 0 5px;
  color: #0b756d;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.3;
}

.book-build-decisions p {
  margin: 7px 0 0;
  color: #5b7075;
  font-size: 12px;
  line-height: 1.72;
}

.book-knowledge-axes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin-top: 22px;
  padding: 1px;
  background: #cedad8;
}

.book-knowledge-axes > div {
  min-width: 0;
  padding: 13px 14px;
  background: #edf4f2;
}

.book-knowledge-axes strong {
  color: #25504c;
  font-size: 13px;
}

.book-knowledge-axes p {
  margin: 5px 0 0;
  color: #5c7075;
  font-size: 11px;
  line-height: 1.65;
}

.book-market-update {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 18px 20px;
  border-top: 4px solid var(--book-yellow);
  border-bottom: 1px solid #d8d0b9;
  background: #fffaf0;
}

.book-market-update header {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  align-items: baseline;
}

.book-market-update time {
  color: #8a6712;
  font-size: 11px;
  font-weight: 900;
}

.book-market-update h4 {
  margin: 0;
  color: #453b22;
  font-size: 17px;
  line-height: 1.45;
}

.book-market-update > p {
  margin-top: 10px;
  color: #5d5747;
  font-size: 13px;
  line-height: 1.8;
}

.book-market-update > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid #e3d8bb;
}

.book-market-update > div > strong {
  color: #5c4b1d;
  font-size: 13px;
}

.book-market-update ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 19px;
  color: #625c4d;
  font-size: 12px;
  line-height: 1.65;
}

.book-market-update .book-market-sources {
  margin-bottom: 0;
  color: #766f5d;
  font-size: 11px;
}

.book-market-sources a {
  color: #6c5516;
  text-underline-offset: 3px;
}

.book-assembly-flow.book-assembly-flow-detailed {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 22px 0 0;
  padding: 1px;
  border: 0;
  background: #cfdad8;
  list-style: none;
}

.book-assembly-flow-detailed li {
  min-height: 150px;
}

.book-trouble-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.book-time-table {
  display: grid;
  gap: 1px;
  margin-top: 22px;
  padding: 1px;
  background: #cdd9d7;
}

.book-time-table > div {
  display: grid;
  grid-template-columns: 220px 120px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 64px;
  padding: 12px 16px;
  background: #fff;
}

.book-time-table strong {
  color: #2d494f;
  font-size: 14px;
}

.book-time-table span {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 5px;
  background: #e4f0ed;
  color: var(--book-green-dark);
  font-size: 12px;
  font-weight: 900;
}

.book-time-table p {
  margin: 0;
  color: #5b7075;
  font-size: 13px;
  line-height: 1.65;
}

.book-decision-path ol {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.book-compare-rule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid #cbd7d5;
  background: #fff;
}

.book-compare-rule > div {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: #edf4f2;
}

.book-compare-rule > div:nth-of-type(2) {
  background: #eef3f8;
}

.book-compare-rule strong {
  color: #2a484d;
  font-size: 12px;
}

.book-compare-rule span {
  color: #1f3c42;
  font-size: 16px;
  font-weight: 900;
}

.book-compare-rule > b {
  color: var(--book-coral);
  font-size: 23px;
  text-align: center;
}

.book-compare-rule > p {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: #566c71;
  font-size: 13px;
  line-height: 1.72;
}

.book-compat-list {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.book-compat-list > article {
  display: grid;
  grid-template-columns: 255px minmax(0, 1fr);
  gap: 28px;
  padding: 20px 22px;
  border: 1px solid #ccd8d6;
  border-radius: 7px;
  background: #fff;
}

.book-compat-list header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-content: start;
}

.book-compat-list header > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--book-green);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.book-compat-list h3 {
  margin: 0;
  color: #263f45;
  font-size: 18px;
}

.book-compat-list header p {
  margin: 4px 0 0;
  color: #6b7e83;
  font-size: 12px;
  line-height: 1.55;
}

.book-compat-body > p {
  margin: 0;
  color: #566b70;
  font-size: 13px;
  line-height: 1.75;
}

.book-product-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 11px 0;
}

.book-product-fields span {
  padding: 8px 10px;
  background: #f0f4f3;
  color: #5a6e73;
  font-size: 11px;
  line-height: 1.55;
}

.book-product-fields b {
  color: #2d4b51;
}

.book-compat-body .book-literal-example {
  margin-top: 9px;
}

.book-adjust-grid > section > span {
  display: block;
  color: var(--book-green-dark);
  font-size: 17px;
  font-weight: 900;
}

.book-adjust-grid ol {
  display: grid;
  gap: 0;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: adjustment;
}

.book-adjust-grid li {
  position: relative;
  padding: 12px 0 12px 34px;
  border-top: 1px solid #d8e1df;
  counter-increment: adjustment;
}

.book-adjust-grid li::before {
  content: counter(adjustment);
  position: absolute;
  top: 12px;
  left: 0;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #e3efed;
  color: var(--book-green-dark);
  font-size: 10px;
  font-weight: 900;
}

.book-adjust-grid strong {
  color: #304a50;
  font-size: 13px;
}

.book-adjust-grid p {
  margin: 4px 0 0;
  color: #607479;
  font-size: 12px;
  line-height: 1.65;
}

.book-next-chapters {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin: 52px 0 42px;
  padding-top: 24px;
  border-top: 1px solid #c4d1cf;
}

.book-next-chapters > strong {
  color: #2b454b;
  font-size: 16px;
}

.book-next-chapters > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.book-next-chapters a,
.book-next-chapters > div > .is-current {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid #cfdbd9;
  border-radius: 6px;
  background: #fff;
  color: #365158;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.book-next-chapters a.is-extra {
  grid-template-columns: minmax(0, 1fr);
  background: #f7faf9;
}

.book-next-chapters > div > .is-current.is-extra {
  grid-template-columns: minmax(0, 1fr) auto;
}

.book-next-chapters > div > .is-current {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  border-color: #72a39c;
  background: #e8f3f1;
  color: #26494d;
}

.book-next-chapters > div > .is-current b {
  min-width: 0;
  font: inherit;
}

.book-next-chapters > div > .is-current small {
  padding: 3px 6px;
  border-radius: 4px;
  background: #fff;
  color: var(--book-green-dark);
  font-size: 10px;
  white-space: nowrap;
}

.book-next-chapters a:hover,
.book-next-chapters a:focus-visible {
  border-color: #78a49e;
  background: #edf6f3;
  outline: none;
}

.book-next-chapters a span,
.book-next-chapters > div > .is-current > span {
  color: var(--book-coral);
  font-size: 10px;
  font-weight: 900;
}

@media (max-width: 1000px) {
  .book-hub-hero::before { width: 72%; }
  .book-hub-hero-inner { grid-template-columns: minmax(0, 62%) minmax(0, 1fr); }
  .book-hub-answer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book-hub-answer > div:nth-child(2) { border-right: 0; }
  .book-hub-answer > div:nth-child(-n+2) { border-bottom: 1px solid #dbe3e2; }
  .book-real-pc-intro { grid-template-columns: minmax(0, .75fr) minmax(400px, 1.25fr); gap: 28px; }
  .book-chapter-hero { grid-template-columns: minmax(0, 1fr) 290px; gap: 30px; }
  .book-photo-copy-layout,
  .book-photo-copy-layout.is-interface-shot { grid-template-columns: minmax(0, 1fr) minmax(290px, .72fr); gap: 24px; }
  .book-interface-panels img { height: 500px; }
  .book-photo-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book-process-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book-build-decisions { grid-template-columns: 1fr; gap: 28px; }
  .book-build-decisions > li:not(:last-child)::after {
    top: auto;
    right: 50%;
    bottom: -11px;
    transform: translateX(50%) rotate(135deg);
  }
  .book-knowledge-axes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .book-component-list > article { grid-template-columns: 180px minmax(0, 1fr); gap: 10px 22px; }
  .book-component-list dl { grid-template-columns: 1fr; gap: 8px; }
  .book-compat-list > article { grid-template-columns: 220px minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 760px) {
  .book-chapter-page #book-main {
    width: min(calc(100% - 20px), 1180px);
  }

  .book-build-decisions > li {
    display: grid;
    grid-template-columns: clamp(104px, 34vw, 150px) minmax(0, 1fr);
    gap: 0 13px;
    align-items: start;
  }

  .book-build-decision-visual {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    margin: 0;
  }

  .book-build-decisions > li > div {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .book-hub-hero {
    min-height: 515px;
    background-position: 58% center;
  }

  .book-hub-hero::before {
    width: 100%;
    background: rgba(248, 251, 250, .89);
  }

  .book-hub-hero-inner {
    grid-template-columns: 1fr;
    padding: 56px 0 62px;
  }

  .book-hub-hero h1 {
    font-size: 32px;
  }

  .book-hub-hero-inner > p:not(.book-kicker) {
    font-size: 15px;
    line-height: 1.85;
  }

  .book-hub-answer {
    grid-template-columns: 1fr;
    margin-top: -18px;
  }

  .book-hub-answer > div,
  .book-hub-answer > div:nth-child(2) {
    min-height: 91px;
    border-right: 0;
    border-bottom: 1px solid #dbe3e2;
  }

  .book-hub-answer > div:last-child { border-bottom: 0; }
  .book-hub-choice { padding: 52px 0 40px; }
  .book-question-grid { grid-template-columns: 1fr; }
  .book-question-grid > a { min-height: 112px; padding: 15px; }
  .book-real-pc-intro,
  .book-reading-route { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .book-real-pc-intro figure { order: -1; }
  .book-hub-cta { display: grid; padding: 19px; }
  .book-hub-cta .book-button { width: 100%; }

  .book-chapter-nav-inner {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .book-chapter-nav-inner::-webkit-scrollbar {
    display: none;
  }

  .book-chapter-nav-inner > a,
  .book-chapter-dropdown-trigger {
    flex: 0 0 100px;
  }

  .book-breadcrumb { padding-top: 13px; }
  .book-chapter-hero { grid-template-columns: 1fr; gap: 22px; min-height: 0; padding: 34px 0; }
  .book-chapter-hero h1 { font-size: 29px; }
  .book-chapter-promise { margin-top: 12px; font-size: 17px; line-height: 1.55; }
  .book-chapter-intro { margin-top: 8px; font-size: 14px; line-height: 1.8; }
  .book-chapter-section { padding-top: 40px; }
  .book-chapter-section + .book-chapter-section { margin-top: 26px; }
  .book-photo-copy-layout,
  .book-photo-copy-layout.is-interface-shot { grid-template-columns: 1fr; }
  .book-interface-panels img { height: 560px; }
  .book-interface-figure.is-check { justify-self: center; width: min(100%, 390px); }
  .book-photo-explanation { padding: 0; }

  .book-hotspot b { display: none; }
  .book-hotspot.is-motherboard { top: 40%; left: 47%; }
  .book-hotspot.is-cpu { top: 21%; left: 36%; }
  .book-hotspot.is-memory { top: 16%; left: 57%; }
  .book-hotspot.is-gpu { top: 51%; left: 37%; }
  .book-hotspot.is-storage { top: 68%; left: 47%; }
  .book-hotspot.is-power { top: 79%; left: 27%; }
  .book-hotspot.is-fan { top: 37%; left: 76%; }

  .book-photo-legend { grid-template-columns: 1fr; }
  .book-process-flow,
  .book-trouble-steps,
  .book-decision-path ol { grid-template-columns: 1fr; }
  .book-build-decisions,
  .book-knowledge-axes { grid-template-columns: 1fr; }
  .book-market-update > div { grid-template-columns: 1fr; gap: 7px; }
  .book-component-list > article { grid-template-columns: 1fr; padding: 17px; }
  .book-component-list dl { grid-template-columns: 1fr; }
  .book-component-role,
  .book-component-guide { grid-column: auto; }
  .book-component-functions { grid-template-columns: 1fr; }
  .book-component-functions > li:last-child:nth-child(odd) { grid-column: auto; }
  .book-component-guide { display: grid; align-items: start; }
  .book-component-guide-links { flex-wrap: wrap; }
  .book-literal-example { grid-column: auto; }
  .book-component-more { grid-column: auto; }
  .book-beginner-answer { grid-template-columns: 1fr; padding: 19px; }
  .book-beginner-answer > ul { grid-column: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book-beginner-answer .book-button { width: 100%; }
  .book-inventory-grid,
  .book-do-dont,
  .book-adjust-grid { grid-template-columns: 1fr; }
  .book-prep-list-wide ul { grid-template-columns: 1fr; }
  .book-assembly-flow.book-assembly-flow-detailed { grid-template-columns: 1fr; }
  .book-assembly-flow-detailed li { min-height: 0; }
  .book-time-table > div { grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; }
  .book-time-table p { grid-column: 1 / -1; }
  .book-compare-rule { grid-template-columns: 1fr; }
  .book-compare-rule > b { transform: rotate(90deg); }
  .book-compat-list > article { grid-template-columns: 1fr; padding: 17px; }
  .book-product-fields { grid-template-columns: 1fr; }
  .book-parts-jump { margin-left: 0; }
  .book-part-guide > footer { grid-column: auto; }
  .book-purpose-body { grid-template-columns: 1fr; min-width: 0; }
  .book-next-chapters { grid-template-columns: 1fr; gap: 12px; }
  .book-next-chapters > div { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .book-hub-hero h1 { font-size: 28px; }
  .book-hub-hero-inner { padding-top: 44px; }
  .book-question-grid > a { grid-template-columns: 88px minmax(0, 1fr) 18px; gap: 10px; padding: 13px 11px; }
  .book-question-visual { width: 86px; gap: 4px; }
  .book-question-visual img { width: 86px; height: 65px; }
  .book-question-visual > span { width: 64px; min-height: 32px; padding: 4px 6px; font-size: 11px; }
  .book-chapter-hero h1 { font-size: 26px; }
  .book-section-title h2 { font-size: 22px; line-height: 1.42; }
  .book-photo-legend a { min-height: 58px; }
  .book-beginner-answer > ul { grid-template-columns: 1fr; }
  .book-purpose-list > article > header { display: grid; }
  .book-purpose-meta { align-items: flex-start; }
  .book-purpose-meta > span { width: fit-content; }
  .book-purpose-price-note time { width: 100%; margin-left: 0; }
  .book-interface-panels { grid-template-columns: 1fr; }
  .book-interface-panels img { height: 540px; }
}

/* PC anatomy: accurate component locations with editorial callout lines. */
.book-pc-anatomy {
  margin-top: 24px;
}

.book-anatomy-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid #c7d4d2;
  background: #e9eeee;
}

.book-anatomy-visual {
  position: relative;
  overflow: hidden;
}

.book-anatomy-visual > img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  transition: filter .2s ease, opacity .2s ease;
}

.book-anatomy-callouts {
  display: contents;
}

[data-anatomy-scope].is-anatomy-focused .book-anatomy-photo {
  filter: grayscale(1) contrast(.88) brightness(.66);
  opacity: .72;
}

.book-anatomy-photo-focus {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-image: var(--book-anatomy-photo);
  background-position: 0 0;
  background-size: 100% 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.book-anatomy-photo-focus.is-motherboard {
  clip-path: polygon(28% 10%, 61% 10%, 61% 72%, 28% 72%);
}

.book-anatomy-photo-focus.is-cpu-cooler {
  clip-path: polygon(35% 17%, 49% 17%, 49% 44%, 35% 44%);
}

.book-anatomy-photo-focus.is-memory {
  clip-path: polygon(48% 14%, 55% 14%, 55% 45%, 48% 45%);
}

.book-anatomy-photo-focus.is-gpu {
  clip-path: polygon(22% 52%, 64% 52%, 64% 66%, 22% 66%);
}

.book-anatomy-photo-focus.is-storage {
  clip-path: polygon(32% 42%, 45% 42%, 45% 51%, 32% 51%);
}

.book-anatomy-photo-focus.is-power {
  clip-path: polygon(20% 72%, 40% 72%, 40% 92%, 20% 92%);
}

.book-anatomy-photo-focus.is-fans-rear {
  clip-path: polygon(20% 14%, 31% 14%, 31% 43%, 20% 43%);
}

.book-anatomy-photo-focus.is-fans-front {
  clip-path: polygon(65% 12%, 74% 12%, 74% 73%, 65% 73%);
}

.book-anatomy-photo-focus.is-case-top {
  clip-path: polygon(18% 2%, 79% 2%, 79% 12%, 18% 12%);
}

.book-anatomy-photo-focus.is-case-right {
  clip-path: polygon(72% 3%, 83% 4%, 83% 96%, 70% 93%);
}

.book-anatomy-photo-focus.is-case-bottom {
  clip-path: polygon(17% 88%, 77% 88%, 77% 99%, 18% 99%);
}

.book-anatomy-photo-focus.is-case-left {
  clip-path: polygon(17% 3%, 24% 5%, 24% 94%, 17% 96%);
}

.book-anatomy-photo-focus.is-active {
  opacity: 1;
}

.book-anatomy-part-outline {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  border: 3px solid #f05f42;
  border-radius: 6px;
  background: rgba(255, 246, 241, .08);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .72), 0 5px 18px rgba(83, 28, 18, .34);
  opacity: 0;
  pointer-events: none;
  transform: scale(.97);
  transform-origin: center;
  transition: opacity .18s ease, transform .18s ease;
}

.book-anatomy-part-outline.is-motherboard { top: 9%; left: 27%; width: 35%; height: 64%; }
.book-anatomy-part-outline.is-cpu-cooler { top: 16.5%; left: 34.5%; width: 15%; height: 28%; }
.book-anatomy-part-outline.is-memory { top: 13.5%; left: 48%; width: 7%; height: 32%; }
.book-anatomy-part-outline.is-gpu { top: 51.5%; left: 21.5%; width: 43%; height: 15%; }
.book-anatomy-part-outline.is-storage { top: 41%; left: 31%; width: 15%; height: 10%; }
.book-anatomy-part-outline.is-power { top: 71.5%; left: 19%; width: 22%; height: 21%; }
.book-anatomy-part-outline.is-fans-rear { top: 13.5%; left: 19.5%; width: 12%; height: 30%; }
.book-anatomy-part-outline.is-fans-front { top: 11.5%; left: 64.5%; width: 10%; height: 62%; }
.book-anatomy-part-outline.is-case { top: 1.5%; left: 16.5%; width: 67%; height: 97%; }

.book-anatomy-part-outline.is-active {
  opacity: 1;
  transform: scale(1);
}

.book-anatomy-cpu-reveal {
  position: absolute;
  z-index: 2;
  top: 25.3%;
  left: 38.2%;
  display: grid;
  width: 9.2%;
  aspect-ratio: 1.16;
  place-content: center;
  border: 2px dashed rgba(240, 95, 66, .9);
  background: rgba(255, 247, 231, .84);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, .42), 0 5px 22px rgba(75, 30, 15, .28);
  color: #7d2c1f;
  opacity: 0;
  pointer-events: none;
  transform: scale(.9);
  transition: opacity .2s ease, transform .2s ease;
}

.book-anatomy-cpu-reveal i {
  position: absolute;
  inset: 13%;
  border: 1px solid #c79461;
  background: linear-gradient(135deg, #d8aa6d, #f3d7a5 53%, #bd8950);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .48);
}

.book-anatomy-cpu-reveal b,
.book-anatomy-cpu-reveal small {
  position: relative;
  z-index: 1;
  text-align: center;
}

.book-anatomy-cpu-reveal b {
  font-size: 13px;
}

.book-anatomy-cpu-reveal small {
  margin-top: 1px;
  font-size: 8px;
}

.book-anatomy-cpu-reveal.is-active {
  opacity: 1;
  transform: scale(1);
}

.book-anatomy-lines {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.book-anatomy-lines.is-mobile {
  display: none;
}

.book-anatomy-lines path:not(.book-anatomy-hit) {
  fill: none;
  stroke: #0b756d;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.book-anatomy-lines .book-anatomy-hit {
  fill: none;
  stroke: rgba(11, 117, 109, .001);
  stroke-width: 26;
  pointer-events: stroke;
  vector-effect: non-scaling-stroke;
}

.book-anatomy-lines .book-anatomy-line {
  cursor: pointer;
  pointer-events: visiblePainted;
  outline: none;
}

.book-anatomy-lines .book-anatomy-line:focus-visible path:not(.book-anatomy-hit) {
  stroke: #f05f42;
  stroke-width: 6;
}

.book-anatomy-lines circle {
  fill: #fff;
  stroke: #e4775e;
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

.book-anatomy-lines circle.is-hidden-part {
  fill: rgba(255, 255, 255, .72);
  stroke-dasharray: 5 4;
}

.book-anatomy-lines g,
.book-anatomy-lines g path,
.book-anatomy-lines g circle,
.book-anatomy-callout {
  transition: opacity .18s ease, stroke .18s ease, stroke-width .18s ease, fill .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.book-anatomy-photo-focus,
.book-anatomy-cpu-reveal {
  transition: opacity .18s ease, transform .18s ease;
}

[data-anatomy-scope].is-anatomy-focused .book-anatomy-lines g,
[data-anatomy-scope].is-anatomy-focused .book-anatomy-callout {
  opacity: .24;
}

[data-anatomy-scope].is-anatomy-focused .book-anatomy-lines g.is-active,
[data-anatomy-scope].is-anatomy-focused .book-anatomy-callout.is-active {
  opacity: 1;
}

.book-anatomy-lines g.is-active path:not(.book-anatomy-hit) {
  stroke: #f05f42;
  stroke-width: 6;
}

.book-anatomy-lines g.is-active circle {
  fill: #fff6f2;
  stroke: #f05f42;
  stroke-width: 7;
}

.book-anatomy-callout.is-active {
  border-color: #ed8069;
  background: #fff8f5;
  box-shadow: 0 4px 16px rgba(142, 54, 34, .18);
}

@media (prefers-reduced-motion: reduce) {
  .book-anatomy-lines g,
  .book-anatomy-lines g path,
  .book-anatomy-lines g circle,
  .book-anatomy-callout,
  .book-anatomy-part-outline,
  .book-anatomy-focus-summary {
    transition: none;
  }
}

.book-anatomy-callout {
  position: absolute;
  z-index: 4;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 0 7px;
  width: 16%;
  min-height: 51px;
  align-content: center;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, .88);
  border-left: 4px solid #0b756d;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 8px rgba(16, 36, 41, .16);
  color: #173238;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
}

.book-anatomy-callout > span {
  grid-row: 1 / 3;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: #0b756d;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.book-anatomy-callout b {
  font-size: 12px;
  line-height: 1.35;
}

.book-anatomy-callout small {
  color: #61757a;
  font-size: 9px;
  line-height: 1.35;
}

.book-anatomy-callout:hover,
.book-anatomy-callout:focus-visible {
  border-left-color: #df7158;
  background: #fff;
  outline: 2px solid rgba(223, 113, 88, .3);
}

.book-anatomy-callout.is-motherboard { top: 6%; left: 1.8%; }
.book-anatomy-callout.is-cpu { top: 21%; left: 1.8%; }
.book-anatomy-callout.is-cpu-cooler { top: 29%; left: 1.8%; }
.book-anatomy-callout.is-gpu { top: 52%; left: 1.8%; }
.book-anatomy-callout.is-power { top: 75%; left: 1.8%; }
.book-anatomy-callout.is-case { top: 6%; right: 1.8%; }
.book-anatomy-callout.is-memory { top: 23%; right: 1.8%; }
.book-anatomy-callout.is-fans { top: 44%; right: 1.8%; }
.book-anatomy-callout.is-storage { top: 55%; right: 1.8%; }

.book-anatomy-focus-summary {
  position: absolute;
  z-index: 5;
  top: var(--book-anatomy-summary-top, 68%);
  left: var(--book-anatomy-summary-left, 50%);
  display: grid;
  gap: 2px;
  width: min(340px, 22%);
  padding: 9px 12px;
  border: 1px solid rgba(217, 91, 66, .78);
  border-left: 5px solid #f05f42;
  background: rgba(255, 251, 248, .96);
  box-shadow: 0 5px 20px rgba(32, 22, 19, .25);
  color: #29464c;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 7px);
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.book-anatomy-focus-summary[hidden] {
  display: none;
}

.book-anatomy-focus-summary.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  visibility: visible;
}

.book-anatomy-focus-summary strong {
  color: #7d2c1f;
  font-size: 12px;
  line-height: 1.35;
}

.book-anatomy-focus-summary span {
  font-size: 10px;
  line-height: 1.5;
}

.book-anatomy-focus-link {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  margin-top: 5px;
  padding: 5px 8px;
  border-radius: 3px;
  background: #0b756d;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
  text-decoration: none;
}

.book-anatomy-focus-link:hover,
.book-anatomy-focus-link:focus-visible {
  background: #075c56;
  outline: 2px solid #fff;
  box-shadow: 0 0 0 4px rgba(7, 92, 86, .38);
}

.book-anatomy-focus-summary[data-anatomy-summary-part="motherboard"] { --book-anatomy-summary-top: 68%; --book-anatomy-summary-left: 45%; }
.book-anatomy-focus-summary[data-anatomy-summary-part="cpu"] { --book-anatomy-summary-top: 34%; --book-anatomy-summary-left: 58%; }
.book-anatomy-focus-summary[data-anatomy-summary-part="cpu-cooler"] { --book-anatomy-summary-top: 28%; --book-anatomy-summary-left: 61%; }
.book-anatomy-focus-summary[data-anatomy-summary-part="memory"] { --book-anatomy-summary-top: 25%; --book-anatomy-summary-left: 66%; }
.book-anatomy-focus-summary[data-anatomy-summary-part="gpu"] { --book-anatomy-summary-top: 68%; --book-anatomy-summary-left: 48%; }
.book-anatomy-focus-summary[data-anatomy-summary-part="storage"] { --book-anatomy-summary-top: 44%; --book-anatomy-summary-left: 57%; }
.book-anatomy-focus-summary[data-anatomy-summary-part="power"] { --book-anatomy-summary-top: 79%; --book-anatomy-summary-left: 52%; }
.book-anatomy-focus-summary[data-anatomy-summary-part="fans"] { --book-anatomy-summary-top: 43%; --book-anatomy-summary-left: 55%; }
.book-anatomy-focus-summary[data-anatomy-summary-part="case"] { --book-anatomy-summary-top: 84%; --book-anatomy-summary-left: 50%; }

.book-process-flow.is-six-step {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
  padding: 0;
  overflow: visible;
  background: transparent;
}

.book-benchmark-guide {
  margin-top: 28px;
  padding: 24px 0 0;
  border-top: 4px solid #0b756d;
  border-bottom: 1px solid #cfdcda;
  background: #f6f9f8;
}

.book-benchmark-basics {
  margin: -24px 0 23px;
  padding: 22px 24px 20px;
  border-bottom: 1px solid #cfdcda;
  background: #eef5f3;
}

.book-benchmark-basics dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 17px 0 0;
}

.book-benchmark-basics dl > div {
  padding: 12px 14px;
  border-left: 3px solid #6d9a93;
  background: #fff;
}

.book-benchmark-basics dt {
  color: #1d4a4e;
  font-size: 12px;
  font-weight: 900;
}

.book-benchmark-basics dd {
  margin: 4px 0 0;
  color: #566e73;
  font-size: 11px;
  line-height: 1.65;
}

.book-benchmark-guide .book-benchmark-basics-note {
  margin: 14px 0 0;
  color: #466268;
  font-size: 12px;
  line-height: 1.75;
}

.book-benchmark-guide > header,
.book-benchmark-guide > div,
.book-benchmark-rule {
  padding-right: 24px;
  padding-left: 24px;
}

.book-benchmark-guide > header > p {
  margin: 0 0 5px;
  color: #0b756d;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.45;
}

.book-benchmark-guide > header h3 {
  margin: 0;
  color: #18343a;
  font-size: 22px;
  line-height: 1.45;
}

.book-benchmark-guide > header span {
  display: block;
  margin-top: 7px;
  color: #536b70;
  font-size: 13px;
  line-height: 1.75;
}

.book-benchmark-guide > .book-benchmark-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 19px;
  border-top: 1px solid #cfdcda;
}

.book-benchmark-guide > .book-benchmark-types > section {
  padding: 18px 20px 17px 0;
}

.book-benchmark-guide > .book-benchmark-types > section + section {
  padding-left: 20px;
  border-left: 1px solid #cfdcda;
}

.book-benchmark-guide section strong {
  color: #24464c;
  font-size: 14px;
}

.book-benchmark-guide section p {
  margin: 7px 0 10px;
  color: #405c62;
  font-size: 12px;
  line-height: 1.8;
}

.book-benchmark-guide section small {
  color: #62777b;
  font-size: 10px;
}

.book-benchmark-guide section a {
  color: #0b6f68;
  text-underline-offset: 3px;
}

.book-benchmark-kosupaso {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  margin: 0;
  padding: 17px 24px;
  border-top: 1px solid #cfdcda;
  background: #fff;
}

.book-benchmark-kosupaso h4 {
  margin: 0;
  color: #24464c;
  font-size: 16px;
  line-height: 1.5;
}

.book-benchmark-kosupaso ol {
  display: grid;
  gap: 4px;
  margin: 9px 0 0;
  padding-left: 20px;
  color: #526a70;
  font-size: 12px;
  line-height: 1.7;
}

.book-benchmark-kosupaso nav {
  display: grid;
  gap: 8px;
  min-width: 145px;
}

.book-benchmark-kosupaso nav a {
  padding: 10px 14px;
  border: 1px solid #9ab9b4;
  background: #edf5f3;
  color: #245c58;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

.book-benchmark-rule {
  margin: 0;
  padding-top: 13px;
  padding-bottom: 15px;
  border-top: 1px solid #cfdcda;
  background: #e8f1ef;
  color: #34545a;
  font-size: 12px;
  line-height: 1.75;
}

.book-process-flow.is-six-step > li,
.book-assembly-flow.book-assembly-flow-detailed > li {
  position: relative;
  display: block;
  padding: 25px 14px 15px;
  border: 1px solid #d0dcda;
}

.book-process-flow.is-six-step .book-process-visual {
  position: relative;
  display: grid;
  width: min(100%, 132px);
  aspect-ratio: 1;
  margin: -8px auto 13px;
  padding: 7px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e0e9e7;
  border-radius: 9px;
  background: linear-gradient(145deg, #fbfdfc 0%, #edf4f2 100%);
}

.book-process-flow.is-six-step .book-process-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.book-process-flow.is-six-step .book-process-visual figcaption {
  position: absolute;
  right: 7px;
  bottom: 7px;
  max-width: calc(100% - 14px);
  padding: 3px 7px;
  border: 1px solid rgba(137, 171, 165, .72);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #315b56;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

.book-process-flow.is-six-step > li > span,
.book-assembly-flow.book-assembly-flow-detailed > li > span {
  position: absolute;
  z-index: 4;
  top: -14px;
  left: 13px;
  width: 29px;
  height: 27px;
  border: 1px solid #9bbab5;
  border-radius: 5px;
  background: #f4f7f6;
  box-shadow: 0 0 0 4px #f4f7f6;
  color: #0b675f;
}

.book-process-flow.is-six-step > li:not(:last-child)::after,
.book-assembly-flow.book-assembly-flow-detailed > li:not(:last-child)::after {
  content: '';
  position: absolute;
  z-index: 3;
  top: 50%;
  right: -11px;
  width: 20px;
  height: 20px;
  border-top: 1px solid #d0dcda;
  border-right: 1px solid #d0dcda;
  background: #fff;
  transform: translateY(-50%) rotate(45deg);
}

.book-assembly-flow.book-assembly-flow-detailed {
  gap: 24px;
  padding: 0;
  overflow: visible;
  background: transparent;
}

.book-assembly-flow.book-assembly-flow-detailed > li:nth-child(4n)::after {
  top: auto;
  right: 50%;
  bottom: -11px;
  display: block;
  transform: translateX(50%) rotate(135deg);
}

.book-assembly-flow.book-assembly-flow-detailed > li:nth-child(5) { grid-column: 4; grid-row: 2; }
.book-assembly-flow.book-assembly-flow-detailed > li:nth-child(6) { grid-column: 3; grid-row: 2; }
.book-assembly-flow.book-assembly-flow-detailed > li:nth-child(7) { grid-column: 2; grid-row: 2; }
.book-assembly-flow.book-assembly-flow-detailed > li:nth-child(8) { grid-column: 1; grid-row: 2; }

.book-assembly-flow.book-assembly-flow-detailed > li:nth-child(n+5):not(:last-child)::after {
  right: auto;
  left: -11px;
  transform: translateY(-50%) rotate(225deg);
}

@media (max-width: 1100px) {
  .book-anatomy-callout {
    width: 18%;
    min-height: 46px;
    padding: 5px 6px;
  }

  .book-anatomy-callout small {
    display: none;
  }

  .book-process-flow.is-six-step {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .book-process-flow.is-six-step > li:nth-child(3n)::after {
    top: auto;
    right: 50%;
    bottom: -11px;
    display: block;
    transform: translateX(50%) rotate(135deg);
  }

  .book-process-flow.is-six-step > li:nth-child(4) { grid-column: 3; grid-row: 2; }
  .book-process-flow.is-six-step > li:nth-child(5) { grid-column: 2; grid-row: 2; }
  .book-process-flow.is-six-step > li:nth-child(6) { grid-column: 1; grid-row: 2; }

  .book-process-flow.is-six-step > li:nth-child(n+4):not(:last-child)::after {
    top: 50%;
    right: auto;
    bottom: auto;
    left: -11px;
    transform: translateY(-50%) rotate(225deg);
  }
}

@media (max-width: 760px) {
  .book-anatomy-stage {
    overflow: hidden;
  }

  .book-anatomy-callouts {
    display: contents;
  }

  .book-anatomy-callout {
    position: absolute;
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    gap: 0 4px;
    width: 28%;
    min-width: 0;
    height: 30px;
    min-height: 30px;
    padding: 4px 5px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-left: 3px solid #0b756d;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 2px 7px rgba(16, 36, 41, .2);
  }

  .book-anatomy-callout > span {
    grid-row: 1;
    width: 18px;
    height: 18px;
    font-size: 8px;
  }

  .book-anatomy-callout b {
    align-self: center;
    overflow-wrap: normal;
    font-size: 9px;
    line-height: 1.25;
  }

  .book-anatomy-callout small {
    display: none;
  }

  .book-anatomy-callout.is-active {
    transform: translateY(-50%);
  }

  .book-anatomy-callout.is-motherboard,
  .book-anatomy-callout.is-cpu,
  .book-anatomy-callout.is-cpu-cooler,
  .book-anatomy-callout.is-gpu,
  .book-anatomy-callout.is-power {
    border-right: 3px solid #0b756d;
    border-left-width: 1px;
  }

  .book-anatomy-callout.is-motherboard { top: 8.5%; left: .8%; transform: translateY(-50%); }
  .book-anatomy-callout.is-cpu { top: 24.5%; left: .8%; transform: translateY(-50%); }
  .book-anatomy-callout.is-cpu-cooler { top: 40.5%; left: .8%; transform: translateY(-50%); }
  .book-anatomy-callout.is-gpu { top: 63.5%; left: .8%; transform: translateY(-50%); }
  .book-anatomy-callout.is-power { top: 84.5%; left: .8%; transform: translateY(-50%); }
  .book-anatomy-callout.is-case { top: 8.5%; right: .8%; transform: translateY(-50%); }
  .book-anatomy-callout.is-memory { top: 27.5%; right: .8%; transform: translateY(-50%); }
  .book-anatomy-callout.is-fans { top: 52.5%; right: .8%; transform: translateY(-50%); }
  .book-anatomy-callout.is-storage { top: 69.5%; right: .8%; transform: translateY(-50%); }

  .book-anatomy-lines.is-desktop {
    display: none;
  }

  .book-anatomy-lines.is-mobile {
    display: block;
  }

  .book-anatomy-lines path:not(.book-anatomy-hit) {
    stroke-width: 2;
  }

  .book-anatomy-lines .book-anatomy-hit {
    stroke-width: 34;
  }

  .book-anatomy-lines circle {
    stroke-width: 3;
  }

  .book-anatomy-part-outline {
    border-width: 2px;
    border-radius: 3px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .72), 0 3px 10px rgba(83, 28, 18, .32);
  }

  .book-anatomy-focus-summary {
    top: var(--book-anatomy-summary-mobile-top, 68%);
    left: 50%;
    width: 42%;
    gap: 0;
    padding: 5px 6px;
    border-left-width: 3px;
  }

  .book-anatomy-focus-summary strong {
    font-size: 10px;
  }

  .book-anatomy-focus-summary span {
    font-size: 9px;
    line-height: 1.35;
  }

  .book-anatomy-focus-link {
    margin-top: 3px;
    padding: 4px 5px;
    font-size: 9px;
  }

  .book-anatomy-focus-summary[data-anatomy-summary-part="motherboard"] { --book-anatomy-summary-mobile-top: 66%; }
  .book-anatomy-focus-summary[data-anatomy-summary-part="cpu"] { --book-anatomy-summary-mobile-top: 34%; }
  .book-anatomy-focus-summary[data-anatomy-summary-part="cpu-cooler"] { --book-anatomy-summary-mobile-top: 43%; }
  .book-anatomy-focus-summary[data-anatomy-summary-part="memory"] { --book-anatomy-summary-mobile-top: 43%; }
  .book-anatomy-focus-summary[data-anatomy-summary-part="gpu"] { --book-anatomy-summary-mobile-top: 66%; }
  .book-anatomy-focus-summary[data-anatomy-summary-part="storage"] { --book-anatomy-summary-mobile-top: 50%; }
  .book-anatomy-focus-summary[data-anatomy-summary-part="power"] { --book-anatomy-summary-mobile-top: 56%; }
  .book-anatomy-focus-summary[data-anatomy-summary-part="fans"] { --book-anatomy-summary-mobile-top: 66%; }
  .book-anatomy-focus-summary[data-anatomy-summary-part="case"] { --book-anatomy-summary-mobile-top: 67%; }

  .book-anatomy-cpu-reveal b {
    font-size: 9px;
  }

  .book-anatomy-cpu-reveal small {
    display: none;
  }

  .book-benchmark-guide {
    margin-top: 22px;
    padding-top: 18px;
  }

  .book-benchmark-basics {
    margin-top: -18px;
    padding: 18px 16px;
  }

  .book-benchmark-basics dl {
    grid-template-columns: 1fr;
  }

  .book-benchmark-kosupaso {
    grid-template-columns: 1fr;
    gap: 13px;
    padding-right: 16px;
    padding-left: 16px;
  }

  .book-benchmark-kosupaso nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .book-benchmark-guide > header,
  .book-benchmark-guide > div,
  .book-benchmark-rule {
    padding-right: 16px;
    padding-left: 16px;
  }

  .book-benchmark-guide > header h3 {
    font-size: 19px;
  }

  .book-benchmark-guide > .book-benchmark-types {
    grid-template-columns: 1fr;
  }

  .book-benchmark-guide > .book-benchmark-types > section,
  .book-benchmark-guide > .book-benchmark-types > section + section {
    padding: 15px 0;
    border-left: 0;
  }

  .book-benchmark-guide > .book-benchmark-types > section + section {
    border-top: 1px solid #d7e1df;
  }

  .book-process-flow.is-six-step,
  .book-assembly-flow.book-assembly-flow-detailed {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .book-process-flow.is-six-step > li:nth-child(n),
  .book-assembly-flow.book-assembly-flow-detailed > li:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }

  .book-process-flow.is-six-step > li:nth-child(n) {
    display: grid;
    grid-template-columns: clamp(104px, 34vw, 150px) minmax(0, 1fr);
    gap: 0 13px;
    align-items: start;
  }

  .book-process-flow.is-six-step .book-process-visual {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    margin: 0;
  }

  .book-process-flow.is-six-step > li > div {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .book-process-flow.is-six-step > li:nth-child(3n)::after,
  .book-assembly-flow.book-assembly-flow-detailed > li:nth-child(4n)::after {
    display: block;
  }

  .book-process-flow.is-six-step > li:nth-child(n):not(:last-child)::after,
  .book-assembly-flow.book-assembly-flow-detailed > li:nth-child(n):not(:last-child)::after {
    top: auto;
    right: 50%;
    bottom: -11px;
    left: auto;
    transform: translateX(50%) rotate(135deg);
  }
}

@media (max-width: 1000px) {
  .book-page-toc {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .book-page-toc > div:last-child {
    justify-content: flex-start;
  }

  .book-appearance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .book-page-purpose {
    padding: 11px 12px;
    font-size: 14px;
    line-height: 1.72;
  }

  .book-page-toc {
    margin-top: 12px;
    padding: 13px 0 16px;
  }

  .book-page-toc > div:last-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .book-page-toc a {
    min-height: 40px;
    justify-content: center;
    padding: 7px 8px;
    text-align: center;
  }

  .book-tech-note summary {
    padding: 13px 40px 13px 13px;
    font-size: 14px;
  }

  .book-tech-note > div {
    padding: 0 13px 14px;
  }

  .book-cable-photo-note > div {
    padding-top: 13px;
  }

  .book-cable-photo-grid {
    grid-template-columns: 1fr;
  }

  .book-gpu-power-types {
    grid-template-columns: 1fr;
  }

  .book-cable-brief li {
    grid-template-columns: 106px minmax(0, 1fr);
  }

  .book-cable-compare {
    grid-template-columns: 72px repeat(2, minmax(0, 1fr));
  }

  .book-cable-compare > div {
    padding: 8px 6px;
    font-size: 10px;
    overflow-wrap: anywhere;
  }

  .book-appearance-grid {
    grid-template-columns: 1fr;
  }

  .book-appearance-grid section {
    min-height: 0;
    padding: 15px;
  }
}

@media (max-width: 420px) {
  .book-page-toc > div:last-child {
    grid-template-columns: 1fr;
  }
}

/* Persona routes and completion chapter. */
.book-route-section {
  width: min(100% - 32px, 1180px);
  margin: 0 auto;
  padding: 58px 0;
  border-top: 1px solid #c8d5d3;
}

.book-route-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.book-route-split > section {
  padding: 20px;
  border: 1px solid #ccd9d7;
  border-radius: 7px;
  background: #fff;
}

.book-route-split header span {
  display: inline-block;
  margin-bottom: 7px;
  color: #0b6d65;
  font-size: 12px;
  font-weight: 900;
}

.book-route-split h3 {
  margin: 0 0 16px;
  color: #223f45;
  font-size: 20px;
  line-height: 1.45;
}

.book-route-split ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.book-route-split li {
  flex: 1 1 145px;
}

.book-route-split a {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid #d4dfdd;
  border-radius: 5px;
  background: #f8faf9;
  color: #29454a;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.book-route-split a span {
  display: grid;
  gap: 2px;
}

.book-route-split a small {
  color: #708388;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}

.book-route-main {
  grid-column: 1 / -1;
}

.book-route-main ol {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.book-route-main li {
  min-width: 0;
}

.book-route-main a {
  min-height: 76px;
}

.book-route-shortcuts {
  grid-column: 1 / -1;
}

.book-route-shortcuts > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.book-route-shortcuts > div a {
  display: grid;
  min-height: 68px;
  align-content: center;
}

.book-route-split a:hover,
.book-route-split a:focus-visible {
  border-color: #78a29b;
  background: #edf6f3;
  outline: 2px solid rgba(15, 118, 110, .1);
}

.book-route-split a b {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #0f766e;
  color: #fff;
  font-size: 10px;
}

.book-route-split > section > p {
  margin: 14px 0 0;
  color: #62767b;
  font-size: 12px;
  line-height: 1.7;
}

.book-refresh-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.book-refresh-grid article {
  position: relative;
  min-height: 230px;
  padding: 18px;
  border: 1px solid #cedbd9;
  border-radius: 6px;
  background: #fff;
}

.book-refresh-grid article > span {
  display: block;
  margin-bottom: 14px;
  color: #0f766e;
  font-size: 11px;
  font-weight: 900;
}

.book-refresh-grid h3,
.book-look-planner h3,
.book-budget-rules h3,
.book-setting-grid h3,
.book-driver-order h3,
.book-finish-records h3 {
  margin: 0 0 8px;
  color: #243f45;
  font-size: 17px;
  line-height: 1.5;
}

.book-refresh-grid p,
.book-refresh-grid small {
  color: #566e74;
  font-size: 13px;
  line-height: 1.75;
}

.book-refresh-grid small {
  display: block;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #e0e7e5;
  color: #73868a;
  font-size: 11px;
}

.book-buy-methods {
  overflow: hidden;
  border: 1px solid #cbd8d6;
  border-radius: 7px;
  background: #fff;
}

.book-buy-methods > div {
  display: grid;
  grid-template-columns: 150px repeat(3, minmax(0, 1fr));
}

.book-buy-methods > div + div {
  border-top: 1px solid #dbe4e2;
}

.book-buy-methods > div > * {
  margin: 0;
  padding: 13px 14px;
  border-left: 1px solid #e1e8e6;
  color: #486168;
  font-size: 13px;
  line-height: 1.65;
}

.book-buy-methods > div > :first-child {
  border-left: 0;
}

.book-buy-methods .is-head {
  background: #e8f1ef;
}

.book-buy-methods .is-head strong {
  color: #27464b;
  font-size: 13px;
  text-align: center;
}

.book-buy-methods b {
  background: #f5f8f7;
  color: #244248;
}

.book-choice-summary,
.book-finish-records {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.book-choice-summary section,
.book-finish-records section {
  padding: 17px;
  border-left: 4px solid #6e9b94;
  background: #f6f9f8;
}

.book-choice-summary h3 {
  margin: 0 0 7px;
  color: #27464b;
  font-size: 17px;
}

.book-choice-summary p,
.book-finish-records li {
  margin: 0;
  color: #536d73;
  font-size: 13px;
  line-height: 1.75;
}

.book-total-cost,
.book-cost-formula {
  display: grid;
  grid-template-columns: minmax(260px, .7fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 20px;
  border: 1px solid #cad8d5;
  border-radius: 7px;
  background: #f7faf9;
}

.book-total-cost > div,
.book-cost-formula strong {
  padding: 16px;
  border-left: 5px solid #e76e50;
  background: #fff;
}

.book-total-cost strong,
.book-cost-formula strong {
  color: #253f45;
  font-size: 16px;
}

.book-total-cost p,
.book-cost-formula p,
.book-cost-formula span {
  margin: 6px 0 0;
  color: #526a70;
  font-size: 13px;
  line-height: 1.75;
}

.book-budget-rules,
.book-look-planner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0;
}

.book-budget-rules section,
.book-look-planner section {
  padding: 17px;
  border: 1px solid #cedbd9;
  border-radius: 6px;
  background: #fff;
}

.book-budget-rules section > span,
.book-look-planner section > span {
  display: inline-block;
  margin-bottom: 8px;
  color: #0b6d65;
  font-size: 11px;
  font-weight: 900;
}

.book-budget-rules ul,
.book-finish-records ul {
  margin: 0;
  padding-left: 18px;
}

.book-budget-rules li,
.book-look-planner p {
  color: #526b70;
  font-size: 13px;
  line-height: 1.75;
}

.book-cost-formula {
  grid-template-columns: 150px minmax(0, 1fr);
  margin-top: 12px;
}

.book-cost-formula strong {
  display: grid;
  min-height: 68px;
  place-items: center;
  padding: 12px;
  text-align: center;
}

.book-cost-formula span {
  grid-column: 2;
  margin-top: -10px;
  color: #75868a;
  font-size: 11px;
}

.book-expert-checklist,
.book-setup-steps,
.book-test-levels {
  display: grid;
  gap: 8px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.book-expert-checklist li,
.book-setup-steps li,
.book-test-levels li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 15px 17px;
  border: 1px solid #d0dcda;
  border-radius: 6px;
  background: #fff;
}

.book-expert-checklist li > span,
.book-setup-steps li > span,
.book-test-levels li > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #e3f0ed;
  color: #0b6d65;
  font-size: 11px;
  font-weight: 900;
}

.book-expert-checklist strong,
.book-setup-steps strong,
.book-test-levels strong {
  color: #27434a;
  font-size: 15px;
}

.book-expert-checklist p,
.book-setup-steps p,
.book-test-levels p {
  margin: 4px 0 0;
  color: #576e74;
  font-size: 13px;
  line-height: 1.75;
}

.book-next-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  padding: 17px 19px;
  border: 1px solid #bdd2ce;
  border-left: 5px solid #0f766e;
  background: #f3f8f6;
}

.book-next-action strong {
  color: #234249;
  font-size: 15px;
}

.book-next-action p {
  margin: 4px 0 0;
  color: #5b7277;
  font-size: 12px;
}

.book-first-boot-layout {
  align-items: center;
}

.book-driver-order,
.book-setting-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 20px 0;
}

.book-driver-order section,
.book-setting-grid article {
  min-height: 175px;
  padding: 17px;
  border: 1px solid #cfdbd9;
  border-radius: 6px;
  background: #fff;
}

.book-driver-order span {
  display: block;
  margin-bottom: 12px;
  color: #0b6d65;
  font-size: 11px;
  font-weight: 900;
}

.book-driver-order p,
.book-setting-grid p {
  margin: 0;
  color: #566f74;
  font-size: 13px;
  line-height: 1.75;
}

.book-finish-records {
  margin-top: 20px;
}

@media (max-width: 1000px) {
  .book-route-main ol {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .book-refresh-grid,
  .book-budget-rules,
  .book-look-planner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-driver-order,
  .book-setting-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .book-route-section {
    width: min(100% - 24px, 1180px);
    padding: 40px 0;
  }

  .book-route-split,
  .book-refresh-grid,
  .book-budget-rules,
  .book-look-planner,
  .book-driver-order,
  .book-setting-grid,
  .book-choice-summary,
  .book-finish-records {
    grid-template-columns: 1fr;
  }

  .book-question-group {
    margin-top: 24px;
  }

  .book-question-group > header {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .book-route-main ol,
  .book-route-shortcuts > div {
    grid-template-columns: 1fr;
  }

  .book-route-split > section,
  .book-refresh-grid article,
  .book-driver-order section,
  .book-setting-grid article {
    min-height: 0;
  }

  .book-buy-methods {
    border: 0;
    background: transparent;
  }

  .book-buy-methods .is-head {
    display: none;
  }

  .book-buy-methods > div {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 9px;
    border: 1px solid #cbd8d6;
    border-radius: 6px;
    background: #fff;
  }

  .book-buy-methods > div + div {
    border-top: 1px solid #cbd8d6;
  }

  .book-buy-methods > div > * {
    border: 0;
    border-top: 1px solid #e2e9e7;
  }

  .book-buy-methods > div > b {
    border-top: 0;
    font-size: 14px;
  }

  .book-buy-methods span::before {
    display: block;
    margin-bottom: 3px;
    color: #0b6d65;
    font-size: 10px;
    font-weight: 900;
  }

  .book-buy-methods span:nth-of-type(1)::before { content: 'メーカー製PC'; }
  .book-buy-methods span:nth-of-type(2)::before { content: 'BTO'; }
  .book-buy-methods span:nth-of-type(3)::before { content: '自作PC'; }

  .book-total-cost,
  .book-cost-formula {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .book-cost-formula span {
    grid-column: 1;
    margin-top: 0;
  }

  .book-next-action {
    display: grid;
  }

  .book-next-action .book-button {
    width: 100%;
  }
}

/* Detailed post-build guides: practical controls, vendor references and recovery flow. */
.book-build-decisions.is-four-step {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.book-build-decisions.is-three-step {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.book-settings-demo {
  display: grid;
  grid-template-columns: minmax(320px, .85fr) minmax(0, 1.15fr);
  gap: 28px;
  align-items: center;
  margin: 22px 0;
}

.book-settings-window {
  overflow: hidden;
  border: 1px solid #bfcac8;
  border-radius: 7px;
  background: #f5f6f7;
  box-shadow: 0 16px 34px rgba(45, 68, 73, .12);
}

.book-settings-titlebar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid #d4dddb;
  background: #fff;
  color: #263f45;
}

.book-settings-titlebar span {
  font-size: 24px;
  line-height: 1;
}

.book-settings-path {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 17px 18px 5px;
  color: #315159;
  font-size: 13px;
}

.book-settings-path + p {
  margin: 4px 18px 12px;
  color: #718185;
  font-size: 11px;
}

.book-startup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
  margin: 0 12px 8px;
  padding: 12px 13px;
  border: 1px solid #d7dfdd;
  border-radius: 5px;
  background: #fff;
}

.book-startup-row.is-point {
  border-left: 4px solid #e77b5e;
}

.book-startup-row strong,
.book-startup-row small {
  display: block;
}

.book-startup-row strong {
  color: #304950;
  font-size: 13px;
}

.book-startup-row small {
  margin-top: 3px;
  color: #738589;
  font-size: 10px;
}

.book-toggle {
  position: relative;
  width: 36px;
  height: 20px;
  border: 1px solid #99aaa8;
  border-radius: 10px;
  background: #c9d1d0;
}

.book-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
}

.book-toggle.is-on {
  border-color: #147d74;
  background: #147d74;
}

.book-toggle.is-on::after {
  left: 18px;
}

.book-browser-savers,
.book-affinity-compare,
.book-affinity-history {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.book-browser-savers > article,
.book-affinity-compare > article,
.book-affinity-history > section {
  padding: 18px 19px;
  border: 1px solid #cbd8d6;
  border-radius: 7px;
  background: #fff;
}

.book-browser-savers header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.book-browser-savers header > span {
  position: relative;
  display: block;
  width: 35px;
  height: 35px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.book-browser-savers .is-chrome {
  border: 8px solid #e3584b;
  background: #f4c543;
  box-shadow: inset 0 0 0 5px #3d87d7;
}

.book-browser-savers .is-edge {
  background: linear-gradient(145deg, #0c9cc4 5%, #136bd1 48%, #16a66e 100%);
}

.book-browser-savers h3,
.book-browser-savers header p,
.book-affinity-compare h3,
.book-affinity-history h3,
.book-memory-tuning-list h3,
.book-bios-setting-list h3,
.book-recovery-plan h3 {
  margin: 0;
}

.book-browser-savers h3,
.book-affinity-compare h3,
.book-affinity-history h3,
.book-memory-tuning-list h3,
.book-bios-setting-list h3,
.book-recovery-plan h3 {
  color: #27444b;
  font-size: 16px;
  line-height: 1.5;
}

.book-browser-savers header p {
  color: #6d8084;
  font-size: 11px;
}

.book-browser-savers ol,
.book-affinity-compare ul {
  margin: 0;
  padding-left: 20px;
}

.book-browser-savers li,
.book-affinity-compare li,
.book-affinity-compare p,
.book-affinity-history p {
  color: #536c72;
  font-size: 13px;
  line-height: 1.76;
}

.book-browser-savers li + li {
  margin-top: 6px;
}

.book-memory-tuning-list,
.book-bios-setting-list,
.book-recovery-plan {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 20px 0;
}

.book-memory-tuning-list > article,
.book-bios-setting-list > article,
.book-recovery-plan > article {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  padding: 16px;
  border: 1px solid #d0dcda;
  border-radius: 6px;
  background: #fff;
}

.book-memory-tuning-list > article > span,
.book-bios-setting-list > article > span,
.book-recovery-plan > article > span {
  padding: 5px 6px;
  border-left: 3px solid #0f766e;
  background: #edf5f3;
  color: #0c675f;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}

.book-memory-tuning-list p,
.book-bios-setting-list p,
.book-recovery-plan p {
  margin: 5px 0 0;
  color: #566f74;
  font-size: 13px;
  line-height: 1.75;
}

/* Memory-saving guide: OS-specific actions and screenshot-style UI diagrams. */
.book-screen-caption {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: -8px 0 20px;
  color: #6a7d81;
  font-size: 11px;
  line-height: 1.65;
}

.book-screen-caption > span {
  flex: 0 0 auto;
  padding: 1px 6px;
  border: 1px solid #bac9c6;
  border-radius: 3px;
  background: #f4f7f6;
  color: #3b5b61;
  font-size: 9px;
  font-weight: 900;
}

.book-beginner-route {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 22px;
  margin: 22px 0;
  padding: 18px 20px;
  border-left: 5px solid #18866f;
  background: #f2f8f6;
}

.book-beginner-route > strong {
  grid-row: 1 / 3;
  align-self: start;
  color: #176a5d;
  font-size: 16px;
}

.book-beginner-route ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding-left: 20px;
  color: #405d62;
  font-size: 13px;
  line-height: 1.7;
}

.book-beginner-route p {
  margin: 0;
  color: #536b70;
  font-size: 12px;
  line-height: 1.75;
}

.book-beginner-route p b {
  color: #294e55;
}

.book-beginner-procedures {
  display: grid;
  gap: 18px;
  margin: 24px 0;
}

.book-beginner-procedures.is-compact {
  gap: 14px;
}

.book-beginner-procedure {
  overflow: hidden;
  border: 1px solid #c8d6d3;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(41, 64, 69, .06);
}

.book-beginner-procedure > header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 17px 19px;
  border-bottom: 1px solid #dce5e3;
  background: #f6faf9;
}

.book-beginner-procedure > header > span {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 4px;
  background: #147d74;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
}

.book-beginner-procedure > header h3,
.book-beginner-procedure > header p {
  margin: 0;
}

.book-beginner-procedure > header h3 {
  color: #294a51;
  font-size: 18px;
  line-height: 1.5;
}

.book-beginner-procedure > header p {
  margin-top: 3px;
  color: #698085;
  font-size: 11px;
  line-height: 1.6;
}

.book-procedure-layout {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
  gap: 22px;
  align-items: center;
  padding: 20px;
}

.book-taskmanager-window {
  overflow: hidden;
  border: 1px solid #bdc9c7;
  border-radius: 7px;
  background: #f7f8f8;
  box-shadow: 0 12px 27px rgba(45, 68, 73, .13);
}

.book-taskmanager-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-bottom: 1px solid #d5dddc;
  background: #fff;
  color: #324c52;
  font-size: 11px;
}

.book-taskmanager-bar span {
  color: #78878a;
  font-size: 10px;
  letter-spacing: .1em;
}

.book-taskmanager-content {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  min-height: 208px;
}

.book-taskmanager-content nav {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 10px 7px;
  border-right: 1px solid #dce3e2;
  background: #eef2f1;
}

.book-taskmanager-content nav b,
.book-taskmanager-content nav span {
  padding: 7px;
  border-radius: 4px;
  color: #607579;
  font-size: 8px;
  line-height: 1.35;
}

.book-taskmanager-content nav span.is-active {
  background: #d9ebe7;
  color: #1f655c;
  font-weight: 900;
}

.book-taskmanager-content > div {
  min-width: 0;
  padding: 12px;
}

.book-taskmanager-summary {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 8px;
  color: #556c71;
  font-size: 9px;
}

.book-taskmanager-summary strong {
  color: #b15e34;
  font-size: 17px;
}

.book-taskmanager-table {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #d4dddb;
  border-radius: 4px;
}

.book-taskmanager-table b,
.book-taskmanager-table span,
.book-taskmanager-table em {
  padding: 8px 9px;
  border-bottom: 1px solid #e1e7e6;
  color: #536b70;
  font-size: 9px;
  font-style: normal;
}

.book-taskmanager-table b {
  background: #edf3f1;
  color: #315159;
}

.book-taskmanager-table em {
  background: #fff7e8;
  color: #8a5d25;
  font-weight: 900;
  text-align: right;
}

.book-click-steps {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  counter-reset: beginner-step;
  list-style: none;
}

.book-click-steps.is-wide {
  padding: 20px;
}

.book-click-steps li {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 2px 10px;
  counter-increment: beginner-step;
}

.book-click-steps li::before {
  content: counter(beginner-step);
  display: grid;
  width: 25px;
  height: 25px;
  grid-row: 1 / 3;
  border: 1px solid #b8cdc8;
  border-radius: 50%;
  background: #edf6f4;
  place-items: center;
  color: #14756c;
  font-size: 10px;
  font-weight: 900;
}

.book-click-steps b,
.book-click-steps span {
  grid-column: 2;
}

.book-click-steps b {
  color: #315159;
  font-size: 13px;
  line-height: 1.55;
}

.book-click-steps span {
  color: #657a7e;
  font-size: 11px;
  line-height: 1.7;
}

.book-procedure-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 20px 20px;
  padding: 1px;
  background: #d5dfdd;
}

.book-procedure-choices section {
  padding: 14px 16px;
  background: #f8faf9;
}

.book-procedure-choices section:nth-child(2) {
  background: #fff9f5;
}

.book-procedure-choices strong {
  display: block;
  color: #315159;
  font-size: 12px;
}

.book-procedure-choices p {
  margin: 5px 0 0;
  color: #667b7f;
  font-size: 11px;
  line-height: 1.7;
}

.book-beginner-procedure > footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 13px 19px;
  border-top: 1px solid #dce5e3;
  background: #f1f7f5;
}

.book-beginner-procedure > footer strong {
  color: #176a5d;
  font-size: 11px;
  white-space: nowrap;
}

.book-beginner-procedure > footer p {
  margin: 0;
  color: #546d72;
  font-size: 11px;
  line-height: 1.7;
}

.book-stop-warning {
  margin: 0 20px 20px;
  padding: 13px 15px;
  border-left: 4px solid #d69b37;
  background: #fff9eb;
}

.book-stop-warning strong {
  color: #6b521e;
  font-size: 12px;
}

.book-stop-warning p {
  margin: 4px 0 0;
  color: #746746;
  font-size: 11px;
  line-height: 1.7;
}

.book-browser-setting-visual {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  overflow: hidden;
  max-width: 760px;
  margin: 22px auto 18px;
  border: 1px solid #c7d2d0;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 14px 31px rgba(42, 63, 68, .12);
}

.book-browser-setting-sidebar {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 18px 13px;
  border-right: 1px solid #dce3e2;
  background: #f1f4f4;
}

.book-browser-setting-sidebar strong {
  margin-bottom: 8px;
  color: #344f55;
  font-size: 14px;
}

.book-browser-setting-sidebar span {
  padding: 8px 10px;
  border-radius: 5px;
  color: #63767a;
  font-size: 10px;
}

.book-browser-setting-sidebar span.is-active {
  background: #dcebea;
  color: #176a61;
  font-weight: 900;
}

.book-browser-setting-main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  min-height: 190px;
  padding: 25px 28px;
}

.book-browser-setting-main > small,
.book-browser-setting-main > strong,
.book-browser-setting-main > p,
.book-browser-setting-main > div {
  grid-column: 1;
}

.book-browser-setting-main > small {
  color: #78898c;
  font-size: 10px;
}

.book-browser-setting-main > strong {
  margin-top: 13px;
  color: #2e4b51;
  font-size: 17px;
}

.book-browser-setting-main > p {
  margin: 4px 0 15px;
  color: #667a7e;
  font-size: 11px;
}

.book-browser-setting-main > .book-toggle {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: center;
  margin-left: 20px;
}

.book-browser-setting-main > div {
  display: grid;
  gap: 3px;
  padding: 11px 13px;
  border: 1px solid #d7dfdd;
  border-radius: 5px;
  background: #f8faf9;
}

.book-browser-setting-main > div b {
  color: #36555b;
  font-size: 11px;
}

.book-browser-setting-main > div small {
  color: #76868a;
  font-size: 9px;
}

.book-browser-savers article > footer {
  margin-top: 15px;
  padding: 10px 12px;
  border-left: 3px solid #178176;
  background: #f1f7f5;
}

.book-browser-savers article > footer strong {
  color: #176a61;
  font-size: 11px;
}

.book-browser-savers article > footer p {
  margin: 3px 0 0;
  color: #5f7579;
  font-size: 10px;
  line-height: 1.65;
}

.book-os-actions {
  margin: 24px 0;
}

.book-os-actions > section:first-child {
  border-top-color: #18866f;
  background: #f8fcfa;
}

.book-os-actions > section.is-dont,
.book-do-dont > section.is-dont {
  border-top-color: #d46b58;
  background: #fffafa;
}

.book-os-actions > section:first-child h3::before,
.book-os-actions > section.is-dont h3::before,
.book-do-dont > section.is-dont h3::before {
  display: inline-grid;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 50%;
  place-items: center;
  color: #fff;
  font-size: 11px;
  vertical-align: 1px;
}

.book-os-actions > section:first-child h3::before {
  content: '○';
  background: #18866f;
}

.book-os-actions > section.is-dont h3::before,
.book-do-dont > section.is-dont h3::before {
  content: '×';
  background: #c95f4d;
}

.book-os-actions.is-compact {
  margin-top: 18px;
}

.book-os-memory-visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .4fr);
  gap: 18px;
  align-items: center;
  margin: 24px 0 18px;
  padding: 18px;
  border: 1px solid #cad6d4;
  border-radius: 9px;
  background: linear-gradient(135deg, #edf3f2, #f9fbfa 68%);
}

.book-os-memory-visual.is-macos {
  background: linear-gradient(135deg, #eef1f5, #fafafa 70%);
}

.book-os-memory-visual.is-linux {
  background: linear-gradient(135deg, #f1ecef, #fbf8f9 70%);
}

.book-os-screen {
  overflow: hidden;
  min-width: 0;
  border: 1px solid #b8c4c2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(40, 58, 62, .14);
}

.book-os-screen-bar {
  position: relative;
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-bottom: 1px solid #d2dcda;
  background: #f4f6f6;
  color: #344b50;
  font-size: 12px;
}

.book-window-dots,
.book-linux-appmark {
  position: absolute;
  left: 12px;
}

.book-window-dots {
  display: flex;
  gap: 5px;
}

.book-window-dots i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef6b5f;
}

.book-window-dots i:nth-child(2) { background: #e6b64b; }
.book-window-dots i:nth-child(3) { background: #50b66f; }

.book-linux-appmark {
  color: #d75a35;
  font-size: 12px;
}

.book-os-screen-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 10px 0;
  border-bottom: 1px solid #dce3e2;
  background: #fafbfb;
}

.book-os-screen-tabs span {
  padding: 6px 9px 7px;
  border-bottom: 2px solid transparent;
  color: #76868a;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.book-os-screen-tabs span.is-active {
  border-bottom-color: #147d74;
  color: #245158;
}

.book-os-screen-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(150px, .85fr);
  gap: 13px;
  min-height: 155px;
  padding: 13px;
}

.book-os-processes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  overflow: hidden;
  border: 1px solid #d6dfdd;
  border-radius: 4px;
}

.book-os-processes b,
.book-os-processes span,
.book-os-processes em {
  min-width: 0;
  padding: 7px 9px;
  border-bottom: 1px solid #e3e8e7;
  color: #596d71;
  font-size: 9px;
  font-style: normal;
}

.book-os-processes b {
  background: #f0f4f3;
  color: #36545a;
}

.book-os-processes em {
  color: #2e575e;
  font-weight: 800;
  text-align: right;
}

.book-memory-pressure,
.book-linux-chart {
  display: grid;
  gap: 9px;
  align-content: center;
  padding: 12px;
  border: 1px solid #d6dfdd;
  border-radius: 4px;
  background: #fbfcfc;
}

.book-memory-pressure strong,
.book-linux-chart strong {
  color: #38565c;
  font-size: 10px;
}

.book-memory-pressure > span {
  display: block;
  height: 42px;
  border: 1px solid #9fc6ae;
  background:
    linear-gradient(160deg, transparent 0 9%, rgba(255,255,255,.75) 10% 12%, transparent 13% 22%, rgba(255,255,255,.75) 23% 25%, transparent 26%),
    linear-gradient(90deg, #2faa6e 0 58%, #e5bc42 75%, #d86b54 100%);
  clip-path: polygon(0 76%, 10% 65%, 20% 70%, 30% 41%, 40% 55%, 50% 31%, 60% 45%, 70% 19%, 80% 42%, 90% 29%, 100% 36%, 100% 100%, 0 100%);
}

.book-memory-pressure small,
.book-linux-chart small {
  color: #708186;
  font-size: 8px;
  line-height: 1.5;
}

.book-os-settings-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid #c5cfcd;
  border-radius: 7px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 22px rgba(44, 62, 67, .09);
}

.book-os-settings-card > small {
  color: #7a898c;
  font-size: 9px;
  font-weight: 800;
}

.book-os-settings-card > strong {
  padding-bottom: 10px;
  border-bottom: 1px solid #dce3e2;
  color: #344f55;
  font-size: 11px;
  line-height: 1.5;
}

.book-os-settings-card > div {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  color: #596d71;
  font-size: 10px;
}

.book-linux-chart > span {
  position: relative;
  display: block;
  overflow: hidden;
  height: 58px;
  border: 1px solid #d7dfe0;
  background:
    linear-gradient(rgba(91, 112, 116, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 112, 116, .08) 1px, transparent 1px),
    #fff;
  background-size: 16px 16px;
}

.book-linux-chart > span::before,
.book-linux-chart > span::after {
  content: '';
  position: absolute;
  inset: 18px -4px 6px;
  border-top: 3px solid #9b4c83;
  transform: skewY(-4deg);
}

.book-linux-chart > span::after {
  inset: 39px -4px 4px;
  border-top-color: #dc783f;
  transform: skewY(3deg);
}

.book-os-memory-visual.is-linux .book-os-screen-body {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}

.book-bios-vendors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0;
}

.book-bios-vendors article {
  overflow: hidden;
  border: 1px solid #cbd8d6;
  border-radius: 7px;
  background: #fff;
}

.book-bios-vendors header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 15px;
  background: #e8f1ef;
}

.book-bios-vendors header strong {
  color: #1f4047;
  font-size: 17px;
}

.book-bios-vendors header span {
  color: #0b6d65;
  font-size: 11px;
  font-weight: 900;
}

.book-bios-vendors dl {
  margin: 0;
}

.book-bios-vendors dl > div {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  border-top: 1px solid #e0e8e6;
}

.book-bios-vendors dt,
.book-bios-vendors dd {
  margin: 0;
  padding: 10px 12px;
  color: #536d72;
  font-size: 12px;
  line-height: 1.6;
}

.book-bios-vendors dt {
  background: #f6f8f8;
  color: #35545a;
  font-weight: 900;
}

.book-bios-vendors dd strong {
  color: #214e54;
}

.book-bios-save-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 12px 0 20px;
  padding: 1px;
  background: #cfdcda;
}

.book-bios-save-flow > span {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 1px 9px;
  align-items: center;
  padding: 12px 14px;
  background: #f7faf9;
}

.book-bios-save-flow b {
  display: grid;
  grid-row: 1 / 3;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: #477a76;
  color: #fff;
  font-size: 10px;
}

.book-bios-save-flow strong {
  color: #2d5157;
  font-size: 12px;
}

.book-bios-save-flow small {
  color: #738488;
  font-size: 10px;
}

.book-bios-risk-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0 24px;
}

.book-bios-risk-map > section {
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid #c8d8d5;
  border-top: 4px solid #3d897d;
  background: #f6faf9;
}

.book-bios-risk-map > section.is-function {
  border-top-color: #4b7d9e;
  background: #f6f9fb;
}

.book-bios-risk-map > section.is-boot {
  border-color: #dfbeb8;
  border-top-color: #ad554a;
  background: #fff7f5;
}

.book-bios-risk-map span {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  background: #dcece8;
  color: #2f665e;
  font-size: 9px;
  font-weight: 900;
}

.book-bios-risk-map .is-function span {
  background: #e0ebf2;
  color: #3b657e;
}

.book-bios-risk-map .is-boot span {
  background: #f4deda;
  color: #8b4038;
}

.book-bios-risk-map h3 {
  margin: 8px 0 0;
  color: #294c52;
  font-size: 14px;
}

.book-bios-risk-map p {
  margin: 6px 0 0;
  color: #607479;
  font-size: 11px;
  line-height: 1.7;
}

.book-bios-purpose-list {
  display: grid;
  gap: 14px;
  margin: 22px 0;
}

.book-bios-purpose-item {
  overflow: hidden;
  border: 1px solid #c9d7d5;
  border-radius: 7px;
  background: #fff;
}

.book-bios-purpose-item > header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-bottom: 1px solid #dbe5e3;
  background: #edf4f2;
}

.book-bios-purpose-item > header > span {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #91b5b0;
  border-radius: 50%;
  background: #fff;
  color: #0b675f;
  font-size: 10px;
  font-weight: 900;
}

.book-bios-purpose-item h3 {
  margin: 0;
  color: #203f46;
  font-size: 17px;
  line-height: 1.5;
}

.book-bios-setting-kind {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #dbece8;
  color: #2e675e;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.5;
}

.book-bios-setting-kind.is-function {
  background: #e1ebf2;
  color: #3e6880;
}

.book-bios-setting-kind.is-boot {
  background: #f2dcd8;
  color: #8d4038;
}

.book-bios-purpose-item > header p {
  margin: 4px 0 0;
  color: #5b7075;
  font-size: 12px;
  line-height: 1.7;
}

.book-bios-purpose-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #dfe8e6;
}

.book-bios-purpose-meta p {
  margin: 0;
  padding: 13px 17px;
  background: #fbfcfc;
  color: #526b70;
  font-size: 12px;
  line-height: 1.7;
}

.book-bios-purpose-meta strong {
  display: block;
  margin-bottom: 2px;
  color: #a3542e;
  font-size: 10px;
}

.book-bios-purpose-meta p:nth-child(4n + 1) strong,
.book-bios-purpose-meta p:nth-child(4n + 2) strong {
  color: #2f6b63;
}

.book-vendor-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid #dbe5e3;
}

.book-vendor-paths > div {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  min-width: 0;
  border-bottom: 1px solid #e1e9e7;
}

.book-vendor-paths > div:nth-child(odd) {
  border-right: 1px solid #e1e9e7;
}

.book-vendor-paths dt,
.book-vendor-paths dd {
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  color: #536b71;
  font-size: 11px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.book-vendor-paths dt {
  background: #f6f8f8;
  color: #2e5258;
  font-weight: 900;
}

.book-vendor-paths dd b {
  color: #254f56;
}

.book-install-media-layout {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: 28px;
  align-items: center;
  margin: 20px 0;
}

.book-usb-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 190px;
  padding: 24px;
  border: 1px solid #cbd8d6;
  background: #f1f6f5;
}

.book-usb-visual span {
  display: grid;
  min-width: 70px;
  min-height: 62px;
  place-items: center;
  padding: 9px;
  border: 1px solid #9eb9b5;
  border-radius: 5px;
  background: #fff;
  color: #26474d;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.book-usb-visual .is-usb {
  min-width: 45px;
  min-height: 78px;
  background: #263f45;
  color: #fff;
}

.book-usb-visual b {
  color: #e06c50;
  font-size: 24px;
}

/* OS installation routes and installer screen diagrams */
.book-os-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0;
}

.book-os-route-grid > article {
  --os-accent: #1769aa;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  min-width: 0;
  padding: 17px;
  border: 1px solid #d4dfdd;
  border-top: 4px solid var(--os-accent);
  background: #fff;
}

.book-os-route-grid > article.is-ubuntu { --os-accent: #c74b24; }
.book-os-route-grid > article.is-mint { --os-accent: #4a8d43; }
.book-os-route-grid > article.is-fedora { --os-accent: #3858a7; }

.book-os-route-mark {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 14px;
  background: var(--os-accent, #1769aa);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.03em;
}

.book-os-route-grid h3,
.book-install-prep-grid h3,
.book-postinstall-grid h3,
.book-install-trouble-list h3,
.book-distro-start h3 {
  margin: 0;
  color: #263f45;
  font-size: 16px;
  line-height: 1.45;
}

.book-os-route-grid strong {
  display: block;
  margin-top: 4px;
  color: #324f55;
  font-size: 12px;
}

.book-os-route-grid p,
.book-install-prep-grid p,
.book-postinstall-grid p,
.book-install-trouble-list p,
.book-distro-start p {
  margin: 7px 0 0;
  color: #5b7075;
  font-size: 12px;
  line-height: 1.75;
}

.book-os-route-grid > article > a {
  grid-column: 2;
  width: fit-content;
  color: var(--os-accent);
  font-size: 11px;
  font-weight: 900;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.book-install-prep-grid,
.book-postinstall-grid,
.book-install-trouble-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.book-install-prep-grid > article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  padding: 16px;
  border: 1px solid #d7e0df;
  background: #fbfcfc;
}

.book-install-prep-grid > article > span,
.book-postinstall-grid > article > span {
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  border-radius: 50%;
  background: #e2efec;
  color: #12695f;
  font-size: 10px;
  font-weight: 900;
}

.book-install-flow-visual {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  margin: 24px 0;
  padding: 19px;
  border: 1px solid #cddbd9;
  background: linear-gradient(135deg, #f4f8f7, #eef5f3);
}

.book-install-flow-visual > span {
  display: grid;
  flex: 1 1 0;
  min-width: 0;
  place-items: center;
  padding: 14px 8px;
  border: 1px solid #b9cdca;
  border-radius: 7px;
  background: #fff;
  color: #294a50;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.book-install-flow-visual > span b {
  display: grid;
  width: 25px;
  height: 25px;
  margin-bottom: 6px;
  place-items: center;
  border-radius: 50%;
  background: #0f766e;
  color: #fff;
  font-size: 11px;
}

.book-install-flow-visual > span small {
  display: block;
  margin-top: 3px;
  color: #718388;
  font-size: 10px;
  font-weight: 700;
}

.book-install-flow-visual > i {
  align-self: center;
  color: #df7458;
  font-size: 22px;
  font-style: normal;
  font-weight: 900;
}

.book-os-install-section {
  --os-accent: #1769aa;
  border-top-color: var(--os-accent);
}

.book-os-install-section.is-ubuntu { --os-accent: #c74b24; }
.book-os-install-section.is-mint { --os-accent: #4a8d43; }
.book-os-install-section.is-fedora { --os-accent: #3858a7; }

.book-install-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 17px 0 20px;
}

.book-install-method-grid > article {
  min-width: 0;
  padding: 18px;
  border: 1px solid #cfddda;
  border-top: 4px solid #1769aa;
  background: #fff;
}

.book-install-method-grid > article.is-purchase {
  border-top-color: #df7658;
  background: #fffbf8;
}

.book-method-label {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e6f0f7;
  color: #245d82;
  font-size: 10px;
  font-weight: 900;
}

.book-install-method-grid .is-purchase .book-method-label {
  background: #fbe9e2;
  color: #a84a31;
}

.book-install-method-grid h4 {
  margin: 0;
  color: #263f45;
  font-size: 17px;
  line-height: 1.5;
}

.book-install-method-grid p,
.book-install-method-grid li {
  color: #566f74;
  font-size: 12px;
  line-height: 1.75;
}

.book-install-method-grid ol {
  margin: 12px 0 0;
  padding-left: 21px;
}

.book-install-method-grid li + li { margin-top: 5px; }

.book-install-method-grid .book-card-note {
  margin: 13px 0 0;
  padding: 9px 11px;
  border-left: 3px solid #87aaa5;
  background: #f2f7f6;
}

.book-official-link-row,
.book-official-guides {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.book-official-link-row { margin-top: 12px; }

.book-official-link-row a,
.book-official-guides a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #abc2be;
  border-radius: 5px;
  background: #fff;
  color: #0c6c63;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
  text-decoration: none;
}

.book-installer-storyboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin: 18px 0 8px;
}

.book-installer-storyboard > article {
  position: relative;
  min-width: 0;
  padding: 11px;
  border: 1px solid #d3dddc;
  background: #fafcfc;
}

.book-screen-number {
  position: absolute;
  z-index: 2;
  top: 4px;
  left: 4px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: #1769aa;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.book-installer-screen {
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 134px;
  padding: 24px 13px 13px;
  border: 4px solid #243a40;
  border-radius: 5px;
  background: linear-gradient(150deg, #eef6fb, #fff);
  box-shadow: inset 0 0 0 1px #fff;
}

.book-installer-screen small {
  color: #61787d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
}

.book-installer-screen > span:not(.book-progress-bar),
.book-installer-screen > strong {
  display: block;
  padding: 6px 7px;
  border: 1px solid #cad8dd;
  background: #fff;
  color: #415b61;
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.book-installer-screen > strong {
  border-color: #1769aa;
  background: #e8f3fa;
  color: #17567e;
}

.book-progress-bar {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #dce7eb;
}

.book-progress-bar i {
  display: block;
  width: 68%;
  height: 100%;
  background: #1769aa;
}

.book-installer-storyboard > article > p {
  margin: 10px 2px 2px;
  color: #586f74;
  font-size: 11px;
  line-height: 1.65;
}

.book-visual-caption {
  margin: 0 0 18px;
  color: #74868a;
  font-size: 10px;
  line-height: 1.6;
}

.book-distro-start {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 19px 0;
  padding: 16px 18px;
  border: 1px solid #d2dedc;
  border-left: 5px solid var(--os-accent);
  background: #fbfcfc;
}

.book-distro-start .book-os-route-mark {
  background: var(--os-accent);
}

.book-official-guides {
  align-items: center;
  margin-top: 18px;
  padding: 13px 15px;
  border: 1px solid #d4e0de;
  background: #f5f9f8;
}

.book-official-guides > strong {
  margin-right: 4px;
  color: #31535a;
  font-size: 12px;
}

.book-postinstall-grid > article,
.book-install-trouble-list > article {
  min-width: 0;
  padding: 16px;
  border: 1px solid #d6e0de;
  background: #fff;
}

.book-postinstall-grid > article {
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr);
  gap: 7px 12px;
  align-items: center;
}

.book-postinstall-grid > article > span {
  grid-row: 1 / 3;
}

.book-postinstall-grid p { margin-top: 0; }

.book-install-trouble-list > article {
  border-left: 4px solid #d78362;
  background: #fffcfa;
}

.book-compact-steps {
  margin: 13px 0 0;
  padding-left: 21px;
}

.book-compact-steps li {
  color: #526b70;
  font-size: 13px;
  line-height: 1.75;
}

.book-compact-steps li + li {
  margin-top: 5px;
}

.book-activation-check,
.book-ai-affinity-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 18px 0;
  padding: 17px 19px;
  border: 1px solid #bdd2ce;
  border-left: 5px solid #0f766e;
  background: #f3f8f6;
}

.book-activation-check > span {
  flex: 0 0 auto;
  padding: 6px 9px;
  background: #0f766e;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.book-activation-check strong,
.book-ai-affinity-callout strong {
  color: #234249;
  font-size: 15px;
}

.book-activation-check p,
.book-ai-affinity-callout p,
.book-ai-affinity-callout small {
  margin: 4px 0 0;
  color: #576f74;
  font-size: 12px;
  line-height: 1.7;
}

.book-affinity-compare > article:first-child {
  border-top: 4px solid #0f766e;
}

.book-affinity-compare > article:last-child {
  border-top: 4px solid #d58a31;
}

.book-affinity-compare > article > span {
  display: block;
  margin-bottom: 5px;
  color: #0b6d65;
  font-size: 10px;
  font-weight: 900;
}

.book-affinity-compare > article:last-child > span {
  color: #9b5b17;
}

.book-affinity-compare > article > strong {
  display: block;
  margin-top: 13px;
  color: #304c52;
  font-size: 12px;
}

.book-affinity-history > section:first-child {
  background: #f7f8f8;
}

.book-affinity-history > section:last-child {
  background: #f8f5ee;
}

.book-subsection-heading {
  margin: 31px 0 5px;
  color: #243f45;
  font-size: 20px;
  line-height: 1.5;
}

.book-ai-affinity-callout {
  margin-top: 22px;
}

.book-ai-affinity-callout > div > span {
  display: block;
  margin-bottom: 4px;
  color: #0b6d65;
  font-size: 10px;
  font-weight: 900;
}

.book-ai-affinity-callout small {
  display: block;
  color: #718388;
}

.book-ai-affinity-callout .book-button {
  flex: 0 0 auto;
}

@media (max-width: 1000px) {
  .book-installer-storyboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-build-decisions.is-four-step,
  .book-build-decisions.is-three-step {
    grid-template-columns: 1fr;
  }

  .book-settings-demo,
  .book-install-media-layout,
  .book-os-memory-visual,
  .book-procedure-layout {
    grid-template-columns: 1fr;
  }

  .book-os-settings-card {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
  }

  .book-os-settings-card > strong {
    padding: 0 10px 0 0;
    border-right: 1px solid #dce3e2;
    border-bottom: 0;
  }
}

@media (max-width: 760px) {
  .book-os-route-grid,
  .book-install-prep-grid,
  .book-install-method-grid,
  .book-installer-storyboard,
  .book-postinstall-grid,
  .book-install-trouble-list {
    grid-template-columns: 1fr;
  }

  .book-install-flow-visual {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 13px;
  }

  .book-install-flow-visual > i {
    justify-self: center;
    line-height: 1;
    transform: rotate(90deg);
  }

  .book-browser-savers,
  .book-memory-tuning-list,
  .book-bios-setting-list,
  .book-bios-vendors,
  .book-bios-save-flow,
  .book-bios-risk-map,
  .book-recovery-plan,
  .book-affinity-compare,
  .book-affinity-history {
    grid-template-columns: 1fr;
  }

  .book-bios-purpose-meta,
  .book-vendor-paths {
    grid-template-columns: 1fr;
  }

  .book-vendor-paths > div:nth-child(odd) {
    border-right: 0;
  }

  .book-bios-vendors dl > div {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .book-memory-tuning-list > article,
  .book-bios-setting-list > article,
  .book-recovery-plan > article {
    grid-template-columns: 68px minmax(0, 1fr);
    padding: 14px;
  }

  .book-settings-demo {
    gap: 20px;
  }

  .book-os-memory-visual {
    gap: 12px;
    margin-top: 18px;
    padding: 10px;
  }

  .book-os-screen-body,
  .book-os-memory-visual.is-linux .book-os-screen-body {
    grid-template-columns: 1fr;
  }

  .book-os-settings-card {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .book-os-settings-card > strong {
    padding: 0 0 9px;
    border-right: 0;
    border-bottom: 1px solid #dce3e2;
  }

  .book-screen-caption {
    margin-top: -4px;
  }

  .book-beginner-route {
    grid-template-columns: 1fr;
    padding: 15px 16px;
  }

  .book-beginner-route > strong {
    grid-row: auto;
  }

  .book-beginner-route ol {
    display: grid;
    gap: 5px;
  }

  .book-beginner-procedure > header {
    padding: 15px;
  }

  .book-beginner-procedure > header h3 {
    font-size: 16px;
  }

  .book-procedure-layout {
    gap: 18px;
    padding: 14px;
  }

  .book-click-steps.is-wide {
    padding: 15px;
  }

  .book-procedure-choices {
    grid-template-columns: 1fr;
    margin: 0 14px 14px;
  }

  .book-stop-warning {
    margin: 0 14px 14px;
  }

  .book-browser-setting-visual {
    grid-template-columns: 1fr;
  }

  .book-browser-setting-sidebar {
    grid-template-columns: auto repeat(3, minmax(0, 1fr));
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid #dce3e2;
  }

  .book-browser-setting-sidebar strong {
    margin: 0;
  }

  .book-usb-visual {
    min-height: 150px;
    padding: 16px 10px;
  }

  .book-activation-check,
  .book-ai-affinity-callout {
    display: grid;
  }

  .book-ai-affinity-callout .book-button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .book-os-route-grid > article {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
    padding: 14px;
  }

  .book-os-route-mark {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    font-size: 13px;
  }

  .book-install-prep-grid > article,
  .book-postinstall-grid > article {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding: 13px;
  }

  .book-install-prep-grid > article > span,
  .book-postinstall-grid > article > span {
    width: 38px;
    height: 38px;
    font-size: 9px;
  }

  .book-distro-start {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
    padding: 14px;
  }

  .book-official-guides {
    align-items: stretch;
  }

  .book-official-guides > strong {
    width: 100%;
  }

  .book-official-guides a {
    flex: 1 1 100%;
  }
}

@media (max-width: 420px) {
  .book-startup-row {
    margin-inline: 8px;
  }

  .book-memory-tuning-list > article,
  .book-bios-setting-list > article,
  .book-recovery-plan > article {
    grid-template-columns: 1fr;
  }

  .book-memory-tuning-list > article > span,
  .book-bios-setting-list > article > span,
  .book-recovery-plan > article > span {
    width: fit-content;
  }

  .book-os-screen-tabs {
    overflow-x: auto;
  }

  .book-os-screen-body {
    padding: 9px;
  }

  .book-taskmanager-content {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .book-taskmanager-content nav span,
  .book-taskmanager-content nav b {
    padding: 6px 3px;
    font-size: 7px;
  }

  .book-taskmanager-content > div {
    padding: 8px;
  }

  .book-beginner-procedure > footer {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 12px 15px;
  }

  .book-browser-setting-sidebar {
    grid-template-columns: 1fr 1fr;
  }

  .book-browser-setting-main {
    min-height: 180px;
    padding: 20px 16px;
  }
}

/* Keep assembly media and padded steps inside narrow viewports. */
.book-assembly-page img,
.book-assembly-page figure,
.book-assembly-page .book-chapter-section,
.book-assembly-page .book-photo-copy-layout,
.book-assembly-page .book-assembly-stage,
.book-assembly-page .book-assembly-stage > div,
.book-assembly-page .book-cable-grid,
.book-assembly-page .book-assembly-finish-grid,
.book-assembly-page .book-prepower-check {
  min-width: 0;
  max-width: 100%;
}

.book-assembly-page img {
  height: auto;
}

.book-assembly-page .book-assembly-stage {
  box-sizing: border-box;
  width: 100%;
}

.book-assembly-page .book-assembly-flow.book-build-sequence {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.book-assembly-page .book-build-sequence > li:nth-child(4)::after {
  top: 50%;
  right: -11px;
  bottom: auto;
  left: auto;
  transform: translateY(-50%) rotate(45deg);
}

.book-assembly-page .book-build-sequence > li:nth-child(5) {
  grid-column: 5;
  grid-row: 1;
}

.book-assembly-page .book-build-sequence > li:nth-child(5)::after {
  top: auto;
  right: 50%;
  bottom: -11px;
  left: auto;
  transform: translateX(50%) rotate(135deg);
}

.book-assembly-page .book-build-sequence > li:nth-child(6) { grid-column: 5; grid-row: 2; }
.book-assembly-page .book-build-sequence > li:nth-child(7) { grid-column: 4; grid-row: 2; }
.book-assembly-page .book-build-sequence > li:nth-child(8) { grid-column: 3; grid-row: 2; }
.book-assembly-page .book-build-sequence > li:nth-child(9) { grid-column: 2; grid-row: 2; }
.book-assembly-page .book-build-sequence > li:nth-child(10) { grid-column: 1; grid-row: 2; }

.book-assembly-page .book-build-sequence > li:nth-child(n+6):not(:last-child)::after {
  top: 50%;
  right: auto;
  bottom: auto;
  left: -11px;
  transform: translateY(-50%) rotate(225deg);
}

@media (max-width: 1180px) {
  .book-assembly-page .book-assembly-flow.book-build-sequence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-assembly-page .book-build-sequence > li:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }

  .book-assembly-page .book-build-sequence > li:nth-child(n):not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 620px) {
  .book-assembly-page .book-assembly-flow.book-build-sequence,
  .book-assembly-page .book-cable-grid,
  .book-assembly-page .book-prepower-check,
  .book-assembly-page .book-assembly-stage,
  .book-assembly-page .book-assembly-finish-grid > article {
    grid-template-columns: minmax(0, 1fr);
  }

  .book-assembly-page .book-assembly-stage {
    padding: 16px;
  }

  .book-assembly-page .book-assembly-stage > figure {
    position: static;
    width: min(100%, 320px);
  }

  .book-assembly-page .book-assembly-stage header {
    display: grid;
    gap: 3px;
  }

  .book-assembly-page .book-assembly-stage ol {
    grid-template-columns: minmax(0, 1fr);
  }

  .book-assembly-page .book-assembly-stage li,
  .book-assembly-page .book-assembly-stage li:first-child,
  .book-assembly-page .book-assembly-stage li:last-child {
    padding: 10px 0;
    border-top: 1px solid #d7e1df;
    border-left: 0;
  }
}
/* Game benchmark source pages */
.book-gpu-measured-data-link{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 16px;padding:14px 16px;border:1px solid #b9d5d1;background:#f3fbfa;border-radius:7px}.book-gpu-measured-data-link strong{display:block;color:#123f3b;font-size:1rem}.book-gpu-measured-data-link p{margin:3px 0 0;color:#46615f;font-size:.88rem;line-height:1.55}.book-gpu-measured-data-link a{flex:0 0 auto;padding:9px 13px;border-radius:5px;background:#0c7168;color:#fff;font-weight:700;text-decoration:none}.book-gpu-measured-data-link a:hover{background:#095b55}
.book-gpu-benchmark-hero .book-outcome li{line-height:1.5}.book-gpu-benchmark-game-search{display:flex;max-width:520px;flex-direction:column;gap:5px;margin:0 0 11px}.book-gpu-benchmark-game-search span{color:#365b58;font-size:.79rem;font-weight:800}.book-gpu-benchmark-game-search input{box-sizing:border-box;width:100%;height:39px;padding:0 12px;border:1px solid #b9cfcc;border-radius:5px;background:#fff;color:#243c3a;font:inherit;font-size:.88rem}.book-gpu-benchmark-game-search input:focus{border-color:#0c7168;outline:2px solid rgba(12,113,104,.16)}.book-gpu-benchmark-game-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}.book-gpu-benchmark-game-list a{display:flex;min-height:70px;flex-direction:column;justify-content:center;gap:5px;padding:11px 13px;border:1px solid #d4dddc;border-radius:6px;background:#fff;color:#163c3a;text-decoration:none}.book-gpu-benchmark-game-list a:hover{border-color:#70aaa5;background:#f5fbfa}.book-gpu-benchmark-game-list a.is-current{border-color:#0c7168;background:#eaf7f5;box-shadow:inset 4px 0 0 #0c7168}.book-gpu-benchmark-game-list strong{font-size:.94rem;line-height:1.35}.book-gpu-benchmark-game-list span{color:#657573;font-size:.76rem}.book-gpu-benchmark-game-empty{margin:12px 0 0;padding:14px;border:1px dashed #c7d7d5;background:#f7faf9;color:#60716f;text-align:center;font-size:.83rem}
.book-gpu-benchmark-selected-game{margin-bottom:12px}.book-gpu-benchmark-selected-game.has-thumbnail{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);align-items:center;gap:18px}.book-gpu-benchmark-selected-game figure{overflow:hidden;margin:0;border:1px solid #ccd9d7;border-radius:6px;background:#edf3f2;aspect-ratio:460/215}.book-gpu-benchmark-selected-game figure[hidden]{display:none}.book-gpu-benchmark-selected-game img{display:block;width:100%;height:100%;object-fit:cover}.book-gpu-benchmark-selected-game .book-section-title{margin:0}.book-gpu-benchmark-loading{display:flex;min-height:180px;align-items:center;justify-content:center;gap:11px;color:#37605d}.book-gpu-benchmark-loading span{width:24px;height:24px;border:3px solid #c8ddda;border-top-color:#0c7168;border-radius:50%;animation:book-spin .8s linear infinite}.book-gpu-benchmark-summary{display:flex;flex-wrap:wrap;gap:3px 14px;margin:12px 0 0;padding:9px 0 0;border-top:1px solid #dce5e4;color:#647573}.book-gpu-benchmark-summary>span{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap}.book-gpu-benchmark-summary small{color:#71807e;font-size:.68rem}.book-gpu-benchmark-summary strong{color:#405653;font-size:.72rem}.book-gpu-benchmark-summary>p{width:100%;margin:1px 0 0;color:#71807e;font-size:.68rem;line-height:1.5}.book-gpu-benchmark-summary a{color:#46736f}.book-gpu-benchmark-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:12px;border:1px solid #cbdcda;background:#f5f9f9;border-radius:7px}.book-gpu-benchmark-button-filter legend{color:#405d5a;font-size:.78rem;font-weight:800}.book-gpu-benchmark-button-filter{min-width:0;margin:0;padding:0;border:0}.book-gpu-benchmark-button-filter legend{margin:0 0 5px;padding:0}.book-gpu-benchmark-button-filter>div{display:flex;flex-wrap:wrap;gap:5px}.book-gpu-benchmark-button-filter button{position:relative;min-height:34px;padding:5px 10px;border:1px solid #bacdca;border-radius:4px;background:#fff;color:#3a5552;font:inherit;font-size:.78rem;font-weight:700;line-height:1.2;cursor:pointer}.book-gpu-benchmark-button-filter button:hover{border-color:#6a9e99;background:#f7fcfb}.book-gpu-benchmark-button-filter button.is-active{padding-left:24px;border-color:#08756b;background:#0b756c;color:#fff;box-shadow:0 0 0 2px rgba(11,117,108,.13)}.book-gpu-benchmark-button-filter button.is-active::before{position:absolute;left:8px;top:50%;width:7px;height:4px;transform:translateY(-68%) rotate(-45deg);border-bottom:2px solid currentColor;border-left:2px solid currentColor;content:""}.book-gpu-benchmark-button-filter button:focus-visible{border-color:#0c7168;outline:2px solid rgba(12,113,104,.2);outline-offset:1px}.book-gpu-benchmark-filter-note{margin:8px 0 15px;padding-left:2px;color:#3f625f;font-size:.8rem;font-weight:700;line-height:1.55}
.book-gpu-benchmark-chart-panel,.book-gpu-benchmark-table-panel,.book-gpu-benchmark-sources{margin-top:16px;border-top:3px solid #2d6661;padding-top:12px}.book-gpu-benchmark-chart-panel>header,.book-gpu-benchmark-table-panel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}.book-gpu-benchmark-chart-panel h3,.book-gpu-benchmark-table-panel h3,.book-gpu-benchmark-sources>h3{margin:0;color:#183f3c;font-size:1.1rem}.book-gpu-benchmark-chart-panel header p,.book-gpu-benchmark-table-panel header p{margin:3px 0 0;color:#647573;font-size:.78rem}.book-gpu-benchmark-chart-panel header>span,.book-gpu-benchmark-table-panel header>span{flex:0 0 auto;color:#0c7168;font-size:.8rem;font-weight:700}.book-gpu-benchmark-chart{position:relative;overflow:hidden;border:1px solid #d9e2e1;border-radius:6px;background:#fff}.book-gpu-benchmark-chart>svg{display:block;width:100%;height:auto;min-height:300px}.book-gpu-benchmark-chart .grid-line{stroke:#e6eceb;stroke-width:1}.book-gpu-benchmark-chart .axis-label{fill:#627371;font-size:12px}.book-gpu-benchmark-chart .axis-title{fill:#284b48;font-size:13px;font-weight:700}.book-gpu-benchmark-chart .benchmark-series-line{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.72;pointer-events:none}.book-gpu-benchmark-chart .benchmark-series-line.is-highlighted{stroke-width:4;opacity:1}.book-gpu-benchmark-chart .data-point{fill:#0f7d73;stroke:#fff;stroke-width:1.5;opacity:.82;cursor:help}.book-gpu-benchmark-chart .source-1{fill:#2f72a8}.book-gpu-benchmark-chart .source-2{fill:#b25d31}.book-gpu-benchmark-chart .source-3{fill:#7a5a9f}.book-gpu-benchmark-chart .source-4{fill:#2f8a55}.book-gpu-benchmark-chart .source-5{fill:#b18421}.book-gpu-benchmark-chart .data-point:hover,.book-gpu-benchmark-chart .data-point:focus{r:7;opacity:1;outline:none}.book-gpu-benchmark-tooltip{position:absolute;z-index:2;display:flex;min-width:190px;max-width:min(280px,70%);transform:translate(-50%,-110%);flex-direction:column;gap:2px;padding:8px 10px;border:1px solid #315e5a;border-radius:5px;background:rgba(255,255,255,.97);box-shadow:0 7px 20px rgba(17,49,46,.16);color:#243e3c;pointer-events:none}.book-gpu-benchmark-tooltip strong{font-size:.84rem}.book-gpu-benchmark-tooltip span{font-size:.76rem}.book-gpu-benchmark-tooltip small{margin-top:2px;color:#657573;font-size:.69rem;line-height:1.35}.book-gpu-benchmark-chart-legend{display:flex;flex-wrap:wrap;gap:7px 18px;padding:9px 12px;border-bottom:1px solid #e0e8e7;background:#f8fbfa}.book-gpu-benchmark-chart-legend-group{display:flex;align-items:center;flex-wrap:wrap;gap:5px 10px}.book-gpu-benchmark-chart-legend-group>b{color:#315451;font-size:.72rem}.book-gpu-benchmark-chart-legend-item{display:inline-flex;align-items:center;gap:4px;color:#556a67;font-size:.68rem;white-space:nowrap}.book-gpu-benchmark-chart-legend-item svg{width:30px;height:10px;min-height:0;flex:0 0 30px}
.book-gpu-benchmark-table-scroll{overflow:auto;max-height:680px;border:1px solid #d9e2e1;border-radius:6px}.book-gpu-benchmark-table table{width:100%;border-collapse:collapse;background:#fff;font-size:.78rem}.book-gpu-benchmark-table th,.book-gpu-benchmark-table td{padding:8px 9px;border-bottom:1px solid #e3e9e8;text-align:left;vertical-align:top}.book-gpu-benchmark-table thead th{position:sticky;z-index:1;top:0;background:#eaf2f1;color:#244946;white-space:nowrap}.book-gpu-benchmark-table tbody tr:nth-child(even){background:#f8faf9}.book-gpu-benchmark-table td strong,.book-gpu-benchmark-table td small{display:block}.book-gpu-benchmark-table td small{margin-top:2px;color:#6c7a78;font-size:.68rem;line-height:1.35}.book-gpu-benchmark-table td>a{color:#096c64;font-weight:700}.book-gpu-benchmark-table .is-unmatched{color:#8a6b28;font-size:.72rem}.book-gpu-benchmark-empty{margin:0;padding:40px 18px;text-align:center;color:#687875}.book-gpu-benchmark-pages{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:10px}.book-gpu-benchmark-pages button{min-width:72px;padding:7px 11px;border:1px solid #9db9b6;border-radius:4px;background:#fff;color:#1e5651;font-weight:700}.book-gpu-benchmark-pages button:disabled{opacity:.42}.book-gpu-benchmark-pages span{font-size:.8rem;font-weight:700}
.book-gpu-benchmark-table tr.is-chart-outlier{background:#fffaf0}.book-gpu-benchmark-table tr.is-chart-outlier:nth-child(even){background:#fbf6ec}.book-gpu-benchmark-table .book-gpu-benchmark-outlier-note{display:inline-block;margin-top:4px;padding:2px 5px;border:1px solid #dbc78f;border-radius:3px;background:#fff9e7;color:#735c20;font-weight:700;white-space:nowrap}
.book-gpu-benchmark-sources>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px;margin-top:9px}.book-gpu-benchmark-sources article{padding:11px 12px;border:1px solid #d9e2e1;border-radius:6px;background:#fff}.book-gpu-benchmark-sources h4{margin:0 0 4px;color:#315552;font-size:.82rem}.book-gpu-benchmark-sources a{display:block;color:#0a6b63;font-size:.8rem;font-weight:700;line-height:1.4}.book-gpu-benchmark-sources p{margin:5px 0 0;color:#61716f;font-size:.7rem}.book-gpu-benchmark-sources small{display:block;margin-top:5px;color:#6f7d7b;font-size:.68rem;line-height:1.4}.book-gpu-benchmark-unmatched{margin-top:13px;padding:10px 12px;border:1px solid #e5d8b6;border-radius:6px;background:#fffdf7}.book-gpu-benchmark-unmatched summary{color:#6f5820;font-size:.82rem;font-weight:700;cursor:pointer}.book-gpu-benchmark-unmatched p{font-size:.74rem}.book-gpu-benchmark-unmatched ul{columns:3;margin:8px 0 0;padding-left:20px;font-size:.7rem}.book-gpu-benchmark-error{padding:35px;text-align:center;color:#8a3d3d}.book-gpu-benchmark-intro>p{line-height:1.8}
@media(max-width:760px){.book-gpu-measured-data-link{align-items:stretch;flex-direction:column}.book-gpu-measured-data-link a{text-align:center}.book-gpu-benchmark-game-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.book-gpu-benchmark-game-list a{min-height:62px;padding:9px}.book-gpu-benchmark-game-list strong{font-size:.83rem}.book-gpu-benchmark-selected-game.has-thumbnail{grid-template-columns:minmax(130px,38%) minmax(0,1fr);gap:11px}.book-gpu-benchmark-filters{grid-template-columns:1fr 1fr;padding:9px}.book-gpu-benchmark-button-filter{grid-column:1/-1}.book-gpu-benchmark-chart>svg{min-height:240px}.book-gpu-benchmark-chart-legend{gap:6px 12px;padding:8px}.book-gpu-benchmark-chart-legend-group{gap:4px 8px}.book-gpu-benchmark-table-scroll{max-height:70vh}.book-gpu-benchmark-table th,.book-gpu-benchmark-table td{padding:7px;font-size:.72rem}.book-gpu-benchmark-unmatched ul{columns:1}}
@media(max-width:430px){.book-gpu-benchmark-game-list{grid-template-columns:1fr}.book-gpu-benchmark-selected-game.has-thumbnail{grid-template-columns:1fr}.book-gpu-benchmark-selected-game figure{max-width:100%}.book-gpu-benchmark-filters{grid-template-columns:1fr 1fr}.book-gpu-benchmark-button-filter button{min-height:32px;padding:5px 8px;font-size:.73rem}.book-gpu-benchmark-button-filter button.is-active{padding-left:22px}.book-gpu-benchmark-chart-panel>header,.book-gpu-benchmark-table-panel>header{align-items:flex-end}.book-gpu-benchmark-chart-panel header p,.book-gpu-benchmark-table-panel header p{font-size:.71rem}.book-gpu-benchmark-tooltip{max-width:78%;transform:translate(-50%,-104%)}}
@keyframes book-spin{to{transform:rotate(360deg)}}

/* GPU use guides: frame rate, generative AI and CAD. */
.book-gpu-fps-guide{display:grid;gap:11px}.book-gpu-fps-guide>header{padding:13px 15px;border-left:4px solid #287b73;background:#f3f9f8}.book-gpu-fps-guide>header strong{display:block;color:#214b47;font-size:1rem}.book-gpu-fps-guide>header p{margin:4px 0 0;color:#536b68;font-size:.82rem;line-height:1.7}.book-gpu-fps-levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border:1px solid #ccd9d7;background:#ccd9d7}.book-gpu-fps-levels article{min-width:0;padding:12px 13px;border-top:4px solid #a8a99e;background:#fff}.book-gpu-fps-levels article.is-standard{border-top-color:#3d8d80}.book-gpu-fps-levels article.is-smooth{border-top-color:#3479a7}.book-gpu-fps-levels article.is-fast{border-top-color:#ba5a4a}.book-gpu-fps-levels b{display:block;color:#254744;font-size:1.05rem}.book-gpu-fps-levels span{display:block;margin-top:2px;color:#52706c;font-size:.72rem;font-weight:800}.book-gpu-fps-levels p{margin:7px 0 0;color:#61716f;font-size:.75rem;line-height:1.65}.book-gpu-fps-notes{display:grid;grid-template-columns:1fr 1fr;gap:8px}.book-gpu-fps-notes p{margin:0;padding:10px 12px;border:1px solid #d8e1e0;background:#fbfcfc;color:#556b68;font-size:.77rem;line-height:1.67}.book-gpu-fps-notes strong{color:#24524d}
.book-gpu-ai-quick-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.book-gpu-ai-quick-guide article{padding:13px 14px;border:1px solid #cbdad8;border-top:4px solid #3b847d;background:#fff}.book-gpu-ai-quick-guide span{display:block;color:#66817e;font-size:.7rem;font-weight:900}.book-gpu-ai-quick-guide strong{display:block;margin-top:3px;color:#234d49;font-size:.96rem}.book-gpu-ai-quick-guide p{margin:6px 0 0;color:#5b706d;font-size:.77rem;line-height:1.67}
.book-gpu-vram-upgrade-note{margin:10px 0;padding:12px 14px;border:1px solid #d6c9a9;border-left:4px solid #bd8733;background:#fffaf0}.book-gpu-vram-upgrade-note>strong{display:block;color:#6d4d1d;font-size:.9rem}.book-gpu-vram-upgrade-note p{margin:6px 0 0;color:#625b4d;font-size:.75rem;line-height:1.7}.book-gpu-vram-upgrade-note p span{color:#77531e;font-weight:900}
.book-gpu-cad-routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.book-gpu-cad-routes article{padding:14px 15px;border:1px solid #ccd9d7;background:#fff}.book-gpu-cad-routes header{padding-bottom:8px;border-bottom:1px solid #e0e7e6}.book-gpu-cad-routes header span{display:block;color:#4d7672;font-size:.7rem;font-weight:900}.book-gpu-cad-routes header strong{display:block;margin-top:2px;color:#254a47;font-size:.94rem;line-height:1.45}.book-gpu-cad-routes p{margin:9px 0 0;color:#586c69;font-size:.78rem;line-height:1.72}.book-gpu-cad-routes small{display:block;margin-top:8px;padding:7px 9px;background:#f3f7f6;color:#516c69;font-size:.7rem;line-height:1.55}.book-gpu-cad-answer{display:grid;grid-template-columns:170px minmax(0,1fr);align-items:center;gap:14px;padding:12px 14px;border-left:4px solid #cb8a35;background:#fff8ed}.book-gpu-cad-answer>strong{color:#6e4d1f;font-size:.94rem}.book-gpu-cad-answer ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:0;padding:0;list-style:none;counter-reset:cad-step}.book-gpu-cad-answer li{position:relative;padding:7px 7px 7px 27px;border-left:1px solid #e1c99f;color:#655b49;font-size:.7rem;line-height:1.5;counter-increment:cad-step}.book-gpu-cad-answer li::before{position:absolute;left:7px;color:#9a6624;font-weight:900;content:counter(cad-step)}

/* Generative AI GPU benchmark page. */
.book-gpu-ai-reading ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;padding:0;border:1px solid #ccd9d7;background:#ccd9d7;list-style:none}.book-gpu-ai-reading li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;padding:14px;background:#fff}.book-gpu-ai-reading li>span{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:#237a72;color:#fff;font-size:.78rem;font-weight:900}.book-gpu-ai-reading strong{color:#264c48;font-size:.9rem}.book-gpu-ai-reading p{margin:5px 0 0;color:#5b706d;font-size:.76rem;line-height:1.65}
.book-gpu-ai-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}.book-gpu-ai-tabs button{display:flex;min-height:54px;align-items:center;justify-content:center;gap:10px;padding:8px 12px;border:1px solid #b9cecb;border-radius:6px;background:#fff;color:#43615e;font:inherit;cursor:pointer}.book-gpu-ai-tabs button:hover{border-color:#6b9c97;background:#f8fbfa}.book-gpu-ai-tabs button.is-active{border-color:#0c7168;background:#eaf7f5;box-shadow:inset 0 -3px 0 #0c7168;color:#174f4a}.book-gpu-ai-tabs strong{font-size:.94rem}.book-gpu-ai-tabs span{font-size:.72rem}.book-gpu-ai-context{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 14px;border:1px solid #d3dfdd;background:#f7faf9}.book-gpu-ai-context>div>span{display:block;color:#507873;font-size:.68rem;font-weight:900}.book-gpu-ai-context strong{display:block;margin-top:2px;color:#234c48;font-size:1rem}.book-gpu-ai-context p{max-width:900px;margin:4px 0 0;color:#5c706d;font-size:.78rem;line-height:1.65}.book-gpu-ai-context aside{display:grid;gap:2px;min-width:170px;padding:9px 11px;border-left:3px solid #ca8934;background:#fff8eb}.book-gpu-ai-context aside b{color:#785622;font-size:.66rem}.book-gpu-ai-context aside span{color:#5d523e;font-size:.77rem;font-weight:800}
.book-gpu-ai-batch{margin:9px 0 0;padding:10px 12px;border:1px solid #d3dfdd;background:#fafcfc}.book-gpu-ai-batch[hidden]{display:none}.book-gpu-ai-batch legend{padding:0 5px;color:#355c58;font-size:.75rem;font-weight:900}.book-gpu-ai-batch>div{display:flex;flex-wrap:wrap;gap:5px}.book-gpu-ai-batch button{min-width:54px;padding:7px 9px;border:1px solid #b8cecb;border-radius:4px;background:#fff;color:#3d5d59;font:inherit;font-size:.76rem;font-weight:800;cursor:pointer}.book-gpu-ai-batch button.is-active{border-color:#0c7168;background:#0c7168;color:#fff}.book-gpu-ai-batch p{margin:7px 0 0;color:#687975;font-size:.69rem;line-height:1.55}
.book-gpu-ai-legend{display:flex;align-items:center;flex-wrap:wrap;gap:7px 15px;margin-top:10px;padding:8px 10px;border:1px solid #d8e2e0;background:#f8fbfa}.book-gpu-ai-legend span{display:inline-flex;align-items:center;gap:5px;color:#496460;font-size:.7rem;font-weight:800}.book-gpu-ai-legend i{width:18px;height:5px;background:#1a987d}.book-gpu-ai-legend i.is-amd{background:#c75949}.book-gpu-ai-legend i.is-intel{background:#347eae}.book-gpu-ai-legend small{margin-left:auto;color:#617672;font-size:.7rem}
.book-gpu-ai-chart{overflow:hidden;border:1px solid #d5e0de;border-top:0;background:#fff}.book-gpu-ai-bars{display:grid}.book-gpu-ai-bars article{display:grid;grid-template-columns:28px minmax(180px,.9fr) minmax(260px,1.7fr) 118px;align-items:center;gap:10px;min-width:0;padding:8px 10px;border-bottom:1px solid #e3e9e8}.book-gpu-ai-bars article:last-child{border-bottom:0}.book-gpu-ai-bars article:nth-child(even){background:#f8faf9}.book-gpu-ai-rank{color:#84918f;font-size:.7rem;font-weight:900;text-align:center}.book-gpu-ai-gpu{min-width:0}.book-gpu-ai-gpu strong{display:block;overflow:hidden;color:#274a47;font-size:.82rem;text-overflow:ellipsis;white-space:nowrap}.book-gpu-ai-gpu small{color:#71807d;font-size:.64rem}.book-gpu-ai-meter{display:grid;grid-template-columns:minmax(0,1fr) 116px;align-items:center;gap:8px}.book-gpu-ai-meter>div{overflow:hidden;height:13px;background:#e9efee}.book-gpu-ai-meter>div span{display:block;height:100%;background:#18977d}.book-gpu-ai-bars article.is-amd .book-gpu-ai-meter>div span{background:#c75949}.book-gpu-ai-bars article.is-intel .book-gpu-ai-meter>div span{background:#347eae}.book-gpu-ai-meter p{display:flex;align-items:baseline;justify-content:flex-end;gap:4px;margin:0;white-space:nowrap}.book-gpu-ai-meter strong{color:#244c48;font-size:.78rem}.book-gpu-ai-meter small{color:#687a77;font-size:.62rem}.book-gpu-ai-bars article>a{padding:6px 8px;border:1px solid #9ebbb8;border-radius:4px;color:#17675f;font-size:.68rem;font-weight:800;text-align:center;text-decoration:none}.book-gpu-ai-bars article>a:hover{border-color:#0c7168;background:#eef8f6}
.book-gpu-ai-table{margin-top:13px}.book-gpu-ai-table>div{overflow:auto;max-height:560px;border:1px solid #d6e0df}.book-gpu-ai-table table{width:100%;border-collapse:collapse;background:#fff;font-size:.74rem}.book-gpu-ai-table th,.book-gpu-ai-table td{padding:8px 9px;border-bottom:1px solid #e3e9e8;text-align:left;white-space:nowrap}.book-gpu-ai-table thead th{position:sticky;z-index:1;top:0;background:#eaf2f1;color:#254a47}.book-gpu-ai-table tbody tr:nth-child(even){background:#f8faf9}.book-gpu-ai-table a{color:#0b6b62;font-weight:800}
.book-gpu-ai-vram-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.book-gpu-ai-vram-grid article{position:relative;padding:14px;border:1px solid #cedbd9;background:#fff}.book-gpu-ai-vram-grid article.is-recommended{border-color:#4e938c;box-shadow:inset 0 4px 0 #2b8077}.book-gpu-ai-vram-grid article>strong{display:block;color:#1f615a;font-size:1.35rem}.book-gpu-ai-vram-grid h3{margin:3px 0 0;color:#2d4d4a;font-size:.84rem}.book-gpu-ai-vram-grid p{margin:7px 0 10px;color:#5c706d;font-size:.72rem;line-height:1.65}.book-gpu-ai-vram-grid a{color:#0b6b62;font-size:.69rem;font-weight:900}.book-gpu-ai-vram-note,.book-gpu-ai-source-note{margin:9px 0 0;padding:9px 11px;border-left:3px solid #c99242;background:#fff9ef;color:#665e4c;font-size:.72rem;line-height:1.65}
.book-gpu-ai-sources>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.book-gpu-ai-sources article{padding:13px 14px;border:1px solid #d4dfdd;background:#fff}.book-gpu-ai-sources h3{margin:0;color:#2b504c;font-size:.88rem}.book-gpu-ai-sources p{margin:6px 0 8px;color:#5b706d;font-size:.74rem;line-height:1.65}.book-gpu-ai-sources a{color:#0b6b62;font-size:.72rem;font-weight:900}
@media(max-width:900px){.book-gpu-fps-levels{grid-template-columns:repeat(2,minmax(0,1fr))}.book-gpu-ai-reading ol{grid-template-columns:1fr}.book-gpu-ai-vram-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.book-gpu-ai-bars article{grid-template-columns:24px minmax(150px,.9fr) minmax(220px,1.5fr) 108px}.book-gpu-cad-answer{grid-template-columns:1fr}.book-gpu-cad-answer ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.book-gpu-fps-notes,.book-gpu-cad-routes,.book-gpu-ai-sources>div{grid-template-columns:1fr}.book-gpu-ai-quick-guide{grid-template-columns:1fr}.book-gpu-ai-context{grid-template-columns:1fr}.book-gpu-ai-context aside{min-width:0}.book-gpu-ai-bars article{grid-template-columns:24px minmax(0,1fr) 98px;gap:7px}.book-gpu-ai-meter{grid-column:2/-1;grid-template-columns:minmax(0,1fr) 112px}.book-gpu-ai-bars article>a{grid-column:3}.book-gpu-ai-gpu{grid-column:2/3}.book-gpu-ai-legend small{width:100%;margin-left:0}.book-gpu-ai-vram-grid{grid-template-columns:1fr 1fr}}
@media(max-width:470px){.book-gpu-fps-levels,.book-gpu-ai-vram-grid{grid-template-columns:1fr}.book-gpu-fps-levels article{padding:10px 12px}.book-gpu-ai-tabs button{flex-direction:column;gap:1px}.book-gpu-ai-bars article{grid-template-columns:22px minmax(0,1fr) 91px;padding:8px 7px}.book-gpu-ai-meter{grid-template-columns:minmax(0,1fr) 104px}.book-gpu-ai-meter strong{font-size:.72rem}.book-gpu-ai-bars article>a{padding:5px 4px;font-size:.62rem}.book-gpu-cad-answer ol{grid-template-columns:1fr}}
.book-gpu-benchmark-content [hidden]{display:none!important}
.book-gpu-benchmark-loading[hidden],.book-gpu-benchmark-error[hidden],.book-gpu-benchmark-content[hidden]{display:none!important}

.book-gpu-benchmark-chart .fps-reference-line{stroke-width:2;stroke-dasharray:8 5;opacity:.92;pointer-events:none}.book-gpu-benchmark-chart .fps-reference-line.is-60{stroke:#2d8c69}.book-gpu-benchmark-chart .fps-reference-line.is-90{stroke:#4b7fa5;opacity:.75}.book-gpu-benchmark-chart .fps-reference-line.is-120{stroke:#b46a38}.book-gpu-benchmark-chart .fps-reference-label{paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round;font-size:11px;font-weight:800;pointer-events:none}.book-gpu-benchmark-chart .fps-reference-label.is-60{fill:#247657}.book-gpu-benchmark-chart .fps-reference-label.is-90{fill:#416f91}.book-gpu-benchmark-chart .fps-reference-label.is-120{fill:#985329}

/* Compact game picker: cards contain the game name only. */
.book-gpu-benchmark-game-list{grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:6px}
.book-gpu-benchmark-game-list a{min-height:42px;align-items:center;justify-content:center;padding:7px 9px;text-align:center}
.book-gpu-benchmark-game-list a.has-thumbnail{display:grid;grid-template-columns:40px minmax(0,1fr);gap:7px;padding:5px 8px 5px 5px;text-align:left}.book-gpu-benchmark-game-list a.has-thumbnail img{display:block;width:40px;height:27px;border-radius:3px;object-fit:cover;filter:saturate(.72) brightness(.96);opacity:.78;transition:filter .15s ease,opacity .15s ease}.book-gpu-benchmark-game-list a.has-thumbnail:hover img,.book-gpu-benchmark-game-list a.has-thumbnail.is-current img{filter:saturate(.92) brightness(1);opacity:.94}.book-gpu-benchmark-game-list a.has-thumbnail img[hidden]{display:none}.book-gpu-benchmark-game-list a.has-thumbnail strong{min-width:0;text-align:center}
.book-gpu-benchmark-game-list strong{font-size:.84rem;line-height:1.3}
@media(max-width:760px){.book-gpu-benchmark-game-list a{min-height:40px;padding:6px 8px}.book-gpu-benchmark-game-list strong{font-size:.8rem}}
@media(max-width:430px){.book-gpu-benchmark-game-list{grid-template-columns:repeat(2,minmax(0,1fr))}.book-gpu-benchmark-game-list a{min-height:38px}.book-gpu-benchmark-game-list strong{overflow-wrap:anywhere;font-size:.75rem}}

/* Keep dense benchmark charts readable: points are exact values, lines show the trend. */
.book-gpu-benchmark-chart .benchmark-series-line{stroke-width:3.1;opacity:.9}.book-gpu-benchmark-chart .benchmark-series-line.is-highlighted{stroke-width:4.6}.book-gpu-benchmark-chart .data-point{stroke-width:1.35;opacity:.72}.book-gpu-benchmark-chart svg.is-dense .data-point{opacity:.52}

/* GPU game overview: all-game mean and median */
.book-gpu-benchmark-entry{gap:16px}.book-gpu-benchmark-entry-actions{display:flex;flex:0 0 auto;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:7px}.book-gpu-measured-data-link .book-gpu-benchmark-entry-actions a{min-width:0}.book-gpu-measured-data-link .book-gpu-benchmark-entry-actions a.is-secondary{border-color:#9cb8b5;background:#fff;color:#315c58}
.book-gpu-benchmark-overview-lead{max-width:980px;margin:0 0 13px;color:#536d6a;font-size:.85rem;line-height:1.78}.book-gpu-benchmark-overview-content[hidden]{display:none!important}.book-gpu-benchmark-overview-stats{display:flex;align-items:stretch;flex-wrap:wrap;gap:7px;margin:0 0 10px}.book-gpu-benchmark-overview-stats>span{display:flex;min-width:116px;align-items:baseline;justify-content:space-between;gap:9px;padding:7px 9px;border:1px solid #d5e1df;border-radius:5px;background:#f8fbfa}.book-gpu-benchmark-overview-stats small{color:#6f7f7d;font-size:.68rem}.book-gpu-benchmark-overview-stats strong{color:#214e4a;font-size:.82rem}.book-gpu-benchmark-overview-note{margin:10px 0 0;padding:9px 11px;border-left:3px solid #83aaa6;background:#f4f8f7;color:#5c706e;font-size:.74rem;line-height:1.65}
.book-gpu-benchmark-overview-legend{display:flex;align-items:center;flex-wrap:wrap;gap:7px 16px;padding:9px 12px;border-bottom:1px solid #e0e8e7;background:#f8fbfa}.book-gpu-benchmark-overview-legend span{display:inline-flex;align-items:center;gap:6px;color:#425e5b;font-size:.75rem;font-weight:800}.book-gpu-benchmark-overview-legend i{display:block;width:22px;height:3px;border-radius:3px;background:#137b73}.book-gpu-benchmark-overview-legend .is-median i{height:0;border-top:3px dashed #cf7828;background:transparent}.book-gpu-benchmark-overview-legend small{color:#71817f;font-size:.69rem}
.book-gpu-benchmark-chart .overview-series-line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:.88;pointer-events:none}.book-gpu-benchmark-chart .overview-series-line.is-average{stroke:#137b73}.book-gpu-benchmark-chart .overview-series-line.is-median{stroke:#cf7828;stroke-dasharray:9 5}.book-gpu-benchmark-chart .overview-value-connector{stroke:#b8c8c6;stroke-width:1;opacity:.2;pointer-events:none}.book-gpu-benchmark-chart .overview-data-point{stroke:#fff;stroke-width:1.1;opacity:.42;cursor:help}.book-gpu-benchmark-chart .overview-data-point.is-average{fill:#137b73}.book-gpu-benchmark-chart .overview-data-point.is-median{fill:#cf7828}.book-gpu-benchmark-chart .overview-data-point:hover,.book-gpu-benchmark-chart .overview-data-point:focus{r:6;opacity:1;outline:none;filter:drop-shadow(0 1px 3px rgba(13,67,62,.3))}
@media(max-width:760px){.book-gpu-benchmark-entry{align-items:stretch;flex-direction:column}.book-gpu-benchmark-entry-actions{display:grid;grid-template-columns:1fr 1fr}.book-gpu-benchmark-entry-actions a{text-align:center}.book-gpu-benchmark-overview-lead{font-size:.79rem}.book-gpu-benchmark-overview-stats{display:grid;grid-template-columns:1fr 1fr}.book-gpu-benchmark-overview-stats>span{min-width:0}.book-gpu-benchmark-overview-legend{gap:6px 12px}.book-gpu-benchmark-overview-legend small{width:100%}}
@media(max-width:430px){.book-gpu-benchmark-entry-actions{grid-template-columns:1fr}.book-gpu-benchmark-overview .book-gpu-benchmark-filters{grid-template-columns:1fr}.book-gpu-benchmark-overview-stats{gap:5px}.book-gpu-benchmark-overview-stats>span{padding:6px 7px}.book-gpu-benchmark-overview-stats strong{font-size:.76rem}}

/* Reading routes and a compact desktop table of contents. */

.book-page-toc-current{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px 7px;align-items:center;min-width:0}
.book-page-toc-current>span{color:#7b8d91;font-size:9px;font-weight:850}
.book-page-toc-current>strong{overflow:hidden;color:#30555a;font-size:10px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.book-page-toc-current>i{grid-column:1/-1;display:block;height:3px;overflow:hidden;border-radius:2px;background:#dce7e4}
.book-page-toc-current>i>b{display:block;width:0;height:100%;background:var(--book-coral);transition:width .18s ease}
.book-page-toc-mobile-toggle{display:none}
[data-book-section]{scroll-margin-top:116px}

@media(min-width:821px){
  .book-page-toc{position:sticky;z-index:900;top:43px;grid-template-columns:max-content minmax(0,1fr) 156px;gap:10px;min-height:58px;margin-top:16px;padding:8px 10px;border:1px solid #c4d3d0;border-radius:0 0 6px 6px;background:rgb(255 255 255 / 97%);box-shadow:0 5px 16px rgb(30 54 59 / 9%);backdrop-filter:blur(9px)}
  .book-page-toc-heading strong{font-size:13px}
  .book-page-toc-heading span{font-size:9px}
  .book-page-toc-links{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:5px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none}
  .book-page-toc-links::-webkit-scrollbar{display:none}
  .book-page-toc a{min-height:34px;flex:0 0 auto;padding:6px 9px;font-size:11px;white-space:nowrap}
  .book-page-toc a.is-current{border-color:var(--book-green);color:#fff;background:var(--book-green)}
}

@media(max-width:820px){
  .book-page-toc{
    position:sticky;
    z-index:940;
    top:43px;
    display:block;
    min-height:0;
    margin-top:12px;
    padding:0;
    border:1px solid #bfcfcd;
    border-radius:0 0 6px 6px;
    background:rgb(255 255 255 / 97%);
    box-shadow:0 4px 13px rgb(30 54 59 / 10%);
    backdrop-filter:blur(9px);
  }
  .book-page-toc .book-page-toc-heading,
  .book-page-toc .book-page-toc-current{display:none!important}
  .book-page-toc-mobile-toggle{
    position:relative;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) 16px;
    gap:8px;
    width:100%;
    min-height:40px;
    align-items:center;
    padding:7px 10px 9px;
    border:0;
    background:transparent;
    color:#294b50;
    font:inherit;
    text-align:left;
    cursor:pointer;
  }
  .book-page-toc-mobile-toggle>span{color:#0b756d;font-size:10px;font-weight:900;white-space:nowrap}
  .book-page-toc-mobile-toggle>strong{overflow:hidden;font-size:12px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
  .book-page-toc-mobile-toggle>i{width:8px;height:8px;justify-self:center;border-right:2px solid #52706f;border-bottom:2px solid #52706f;transform:translateY(-2px) rotate(45deg);transition:transform .18s ease}
  .book-page-toc-mobile-toggle>b{position:absolute;right:0;bottom:0;left:0;height:3px;overflow:hidden;background:#dce7e4}
  .book-page-toc-mobile-toggle>b>em{display:block;width:0;height:100%;background:var(--book-coral);transition:width .18s ease}
  .book-page-toc.is-mobile-open .book-page-toc-mobile-toggle>i{transform:translateY(2px) rotate(225deg)}
  .book-page-toc .book-page-toc-links{
    position:absolute;
    top:calc(100% + 1px);
    right:-1px;
    left:-1px;
    display:none;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    max-height:min(56dvh,420px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:9px;
    border:1px solid #bfcfcd;
    border-top:0;
    border-radius:0 0 7px 7px;
    background:#fff;
    box-shadow:0 10px 24px rgb(26 51 56 / 18%);
  }
  .book-page-toc.is-mobile-open .book-page-toc-links{display:grid}
  .book-page-toc .book-page-toc-links a{min-height:38px;justify-content:flex-start;padding:7px 9px;font-size:11px;line-height:1.35;text-align:left}
  .book-page-toc .book-page-toc-links a.is-current{border-color:var(--book-green);background:#e8f5f2;color:#145e57;box-shadow:inset 3px 0 0 var(--book-green)}
  [data-book-section]{scroll-margin-top:96px}
}
@media(max-width:620px){
}

/* Progressive technical reference: detailed enough for lookup, quiet enough for first-time readers. */
.book-deep-reference{grid-column:1/-1;width:100%;min-width:0;margin-top:18px;border-top:3px solid #356d78;background:#f7fafb}
.book-deep-reference>header{display:grid;gap:4px;padding:16px 18px 13px;border-bottom:1px solid #d3dfe1}
.book-deep-reference>header>span{color:#4c737b;font-size:11px;font-weight:850}
.book-deep-reference>header h4{margin:0;color:#173f48;font-size:20px;line-height:1.45}
.book-deep-reference>header p{max-width:820px;margin:0;color:#587078;font-size:13px;line-height:1.75}
.book-deep-reference>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#d9e3e5}
.book-deep-reference details{grid-column:auto;min-width:0;padding-top:0;border-top:0;background:#fff}
.book-deep-reference details:last-child:nth-child(odd){grid-column:1/-1}
.book-deep-reference summary{position:relative;display:grid;width:100%;box-sizing:border-box;gap:3px;min-height:78px;padding:14px 42px 13px 16px;cursor:pointer;list-style:none}
.book-deep-reference summary::-webkit-details-marker{display:none}
.book-deep-reference summary::after{position:absolute;right:16px;top:50%;width:9px;height:9px;transform:translateY(-65%) rotate(45deg);border-right:2px solid #34766f;border-bottom:2px solid #34766f;content:"";transition:transform .18s ease}
.book-deep-reference details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.book-deep-reference summary:hover,.book-deep-reference summary:focus-visible{background:#eef7f5;outline:0}
.book-deep-reference summary span{color:#214b52;font-size:14px;font-weight:850;line-height:1.45}
.book-deep-reference summary small{color:#667d83;font-size:11px;line-height:1.55}
.book-deep-reference details ul{display:grid;gap:9px;margin:0;padding:3px 18px 17px 35px;border-top:1px solid #e2e9ea;color:#344f56;font-size:13px;line-height:1.75}
.book-deep-reference details li::marker{color:#dd684f}
@media(max-width:760px){
  .book-deep-reference>header{padding:14px}
  .book-deep-reference>header h4{font-size:18px}
  .book-deep-reference>div{grid-template-columns:1fr}
  .book-deep-reference details:last-child:nth-child(odd){grid-column:auto}
  .book-deep-reference summary{min-height:70px;padding:12px 39px 11px 14px}
  .book-deep-reference details ul{padding:4px 15px 15px 31px;font-size:12.5px}
}

.book-current-reference{margin-top:18px;padding:17px 18px;border-top:3px solid #527d91;border-bottom:1px solid #cbd9df;background:#f4f8fa}
.book-current-reference>header{display:grid;gap:3px;max-width:920px}
.book-current-reference>header>span{color:#52748a;font-size:10px;font-weight:900}
.book-current-reference>header h4{margin:0;color:#294a56;font-size:17px;line-height:1.45}
.book-current-reference>header p{margin:3px 0 0;color:#5c7179;font-size:12px;line-height:1.75}
.book-current-reference>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.book-current-reference article{padding:12px 13px;border:1px solid #d3e0e4;border-radius:5px;background:#fff}
.book-current-reference article strong{display:block;color:#345f70;font-size:12px}
.book-current-reference article p{margin:5px 0 0;color:#5c7077;font-size:12px;line-height:1.72}
.book-current-reference>.book-part-references{margin-top:10px;padding-top:9px;border-top:1px solid #d2dfe3}
@media(max-width:820px){.book-current-reference>div{grid-template-columns:1fr}.book-current-reference article{padding:11px 12px}}
@media(max-width:480px){.book-current-reference{margin-right:-4px;margin-left:-4px;padding:15px 12px}.book-current-reference>header h4{font-size:16px}}

/* SSD capacity planner: add software and files before choosing a drive size. */
.book-ssd-capacity-planner{grid-column:1/-1;min-width:0;margin-top:24px;border-top:4px solid #2d756e;border-bottom:1px solid #c7d8d5;background:#f5faf9}
.book-ssd-capacity-planner>header{display:grid;gap:4px;padding:19px 20px 16px;border-bottom:1px solid #d2dfdc;background:linear-gradient(110deg,#edf8f5,#f8fbfa)}
.book-ssd-capacity-planner>header>span{color:#28776f;font-size:10px;font-weight:900}
.book-ssd-capacity-planner>header h3{margin:0;color:#21484b;font-size:21px;line-height:1.45}
.book-ssd-capacity-planner>header p{max-width:940px;margin:2px 0 0;color:#5a7174;font-size:12px;line-height:1.75}
.book-ssd-capacity-sticky{position:sticky;z-index:880;top:107px;display:grid;grid-template-columns:auto minmax(170px,.75fr) auto minmax(190px,1fr);align-items:stretch;min-height:58px;border-bottom:1px solid #184f4a;background:rgb(30 91 85 / 97%);box-shadow:0 5px 15px rgb(24 65 62 / 18%);color:#fff;backdrop-filter:blur(9px)}
.book-ssd-capacity-sticky>span{align-self:center;padding:0 17px;color:#cde4df;font-size:9px;font-weight:900;letter-spacing:.06em}.book-ssd-capacity-sticky>div{display:flex;align-items:baseline;justify-content:space-between;gap:13px;padding:10px 16px;border-left:1px solid rgb(255 255 255 / 16%)}.book-ssd-capacity-sticky small{color:#d6e8e5;font-size:10px;font-weight:850}.book-ssd-capacity-sticky strong{color:#fff;font-size:20px;line-height:1.2;white-space:nowrap}.book-ssd-capacity-sticky>i{align-self:center;padding:0 3px;color:#a9d3cc;font-style:normal;font-weight:950}.book-ssd-capacity-sticky .is-answer{background:rgb(18 112 102 / 66%)}.book-ssd-capacity-sticky .is-answer strong{font-size:23px}
.book-ssd-capacity-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;border-bottom:1px solid #cedbd8;background:#cedbd8}
.book-ssd-capacity-quick article{position:relative;padding:14px 15px 13px;background:#fff}
.book-ssd-capacity-quick article.is-standard{background:#edf8f5;box-shadow:inset 0 3px 0 #31827a}
.book-ssd-capacity-quick strong{display:inline-block;color:#28565a;font-size:17px;line-height:1.3}
.book-ssd-capacity-quick span{display:inline-block;margin-left:7px;padding:2px 6px;border-radius:999px;background:#e8efee;color:#55736f;font-size:9px;font-weight:900;vertical-align:2px}
.book-ssd-capacity-quick .is-standard span{background:#d4ece7;color:#226e66}
.book-ssd-capacity-quick p{margin:6px 0 0;color:#607477;font-size:11px;line-height:1.65}
.book-ssd-windows-capacity{display:grid;grid-template-columns:minmax(205px,.62fr) minmax(0,1.38fr);align-items:center;gap:17px;margin:16px 18px;padding:14px 16px;border-left:4px solid #527d91;background:#fff}
.book-ssd-windows-capacity>div span,.book-ssd-windows-capacity>div strong{display:block}
.book-ssd-windows-capacity>div span{color:#668087;font-size:9px;font-weight:900}
.book-ssd-windows-capacity>div strong{margin-top:3px;color:#315966;font-size:16px}
.book-ssd-windows-capacity p{margin:0;color:#596f74;font-size:12px;line-height:1.75}
.book-ssd-windows-capacity p strong{color:#246e67}
.book-ssd-app-selection{margin:16px 18px 10px;border:1px solid #bfd4cf;background:#fff}.book-ssd-app-selection>header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 13px;background:#e8f4f1}.book-ssd-app-selection>header>div{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:2px 9px}.book-ssd-app-selection>header>div>span{grid-column:1/-1;color:#5b7b76;font-size:8px;font-weight:900}.book-ssd-app-selection>header strong{color:#285752;font-size:14px}.book-ssd-app-selection>header small{color:#637c78;font-size:9px;font-weight:800}.book-ssd-app-selection>header small b{color:#116d64;font-size:12px}.book-ssd-app-selection>header button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:35px;padding:6px 12px;border:1px solid #27776f;border-radius:4px;background:#fff;color:#176a62;font:inherit;font-size:11px;font-weight:900}.book-ssd-app-selection>header button>span{font-size:17px;line-height:1}.book-ssd-app-selection>header button:hover,.book-ssd-app-selection>header button:focus-visible{background:#176e66;color:#fff;outline:none}.book-ssd-app-selection>p{margin:0;padding:9px 13px;color:#617975;font-size:10px;line-height:1.65}
.book-ssd-capacity-table-wrap{margin:0 18px;overflow-x:auto;overscroll-behavior-inline:contain;border:1px solid #c5d7d3;background:#fff}
.book-ssd-capacity-table{width:100%;min-width:1020px;border-collapse:collapse;color:#526b6f;font-size:11px;line-height:1.55}
.book-ssd-capacity-table caption{padding:10px 12px;border-bottom:1px solid #cbdad7;background:#eaf5f2;color:#285a56;font-size:13px;font-weight:900;text-align:left}
.book-ssd-capacity-table th,.book-ssd-capacity-table td{padding:10px 11px;border-right:1px solid #d6e1df;border-bottom:1px solid #d6e1df;text-align:left;vertical-align:middle}
.book-ssd-capacity-table thead th{background:#486e70;color:#fff;font-size:10px}
.book-ssd-capacity-table thead th:nth-child(1){width:23%}.book-ssd-capacity-table thead th:nth-child(2){width:32%}.book-ssd-capacity-table thead th:nth-child(3){width:31%}.book-ssd-capacity-table thead th:nth-child(4){width:14%}
.book-ssd-capacity-table tr>*:last-child{border-right:0}.book-ssd-capacity-table tbody:last-child tr:last-child>*{border-bottom:0}
.book-ssd-capacity-table .book-ssd-capacity-group th{padding:8px 11px;background:#dfeeea;color:#285c58;font-size:10px;font-weight:900}
.book-ssd-capacity-table th[scope="row"]{background:#f8fbfa;color:#294d50;font-weight:700}
.book-ssd-capacity-table th[scope="row"]>strong,.book-ssd-capacity-table th[scope="row"]>small,.book-ssd-capacity-table td>b,.book-ssd-capacity-table td>small{display:block}
.book-ssd-capacity-table th[scope="row"]>strong{font-size:12px}.book-ssd-capacity-table th[scope="row"]>small{margin-top:3px;color:#748589;font-size:9px;font-weight:500;line-height:1.55}
.book-ssd-capacity-table td>b{color:#315f62;font-size:12px}.book-ssd-capacity-table td>small{margin-top:3px;color:#718286;font-size:9px;line-height:1.55}
.book-ssd-capacity-table td>small a{color:#17736b;font-weight:850;text-decoration:underline;text-underline-offset:2px}
.book-ssd-capacity-table select{width:100%;min-height:34px;padding:5px 28px 5px 8px;border:1px solid #acc6c1;border-radius:4px;background:#fff;color:#294f4c;font:inherit;font-weight:800}
.book-ssd-capacity-table select:focus{border-color:#277b72;outline:2px solid rgb(39 123 114 / 16%)}
.book-ssd-capacity-table td:last-child strong{display:block;color:#146b63;font-size:13px;text-align:right;white-space:nowrap}
.book-ssd-capacity-empty td{padding:16px!important;background:#fbfdfc;color:#758783;font-size:10px;text-align:center!important}
.book-ssd-selected-app-row td:last-child{position:relative;padding-top:41px}.book-ssd-app-remove{position:absolute;top:0;right:-1px;display:grid;width:30px;height:30px;padding:0;place-items:center;border:1px solid #c7d4d2;border-right:0;border-radius:0 0 0 7px;background:#f7faf9;color:#687d7a;font:inherit;font-size:17px;font-weight:500;line-height:1;cursor:pointer;transition:background .16s,border-color .16s,color .16s}.book-ssd-app-remove:hover{border-color:#c66f65;background:#fff0ee;color:#a74339}.book-ssd-app-remove:focus-visible{border-color:#b8564c;outline:3px solid rgb(184 86 76 / 18%);outline-offset:-3px;color:#a74339}
.book-ssd-capacity-fixed{display:block;color:#657c7d;font-size:10px;font-weight:850;text-align:center}
.book-ssd-capacity-table tr.is-video th label,.book-ssd-capacity-table tr.is-video td label{display:grid;gap:3px;margin-top:7px}
.book-ssd-capacity-table tr.is-video label>span{color:#6c8582;font-size:8px;font-weight:900}
.book-ssd-capacity-table tr.is-video td>small{margin-top:5px;color:#34736d;font-weight:800}
.book-ssd-range{display:grid!important;gap:5px!important;margin:0!important}.book-ssd-range>span:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px}.book-ssd-range>span:first-child b{color:#5f7975;font-size:8px}.book-ssd-range output{min-width:42px;padding:2px 6px;border-radius:999px;background:#e5f2ef;color:#176c63;font-size:10px;font-weight:900;text-align:center;white-space:nowrap}.book-ssd-range input[type="range"]{width:100%;height:6px;margin:7px 0 2px;-webkit-appearance:none;appearance:none;border-radius:999px;background:linear-gradient(90deg,#267b72 0 var(--ssd-range-progress,0%),#d2dedc var(--ssd-range-progress,0%) 100%);cursor:pointer}.book-ssd-range input[type="range"]::-webkit-slider-thumb{width:18px;height:18px;-webkit-appearance:none;appearance:none;border:3px solid #fff;border-radius:50%;background:#19756c;box-shadow:0 0 0 1px #19756c,0 2px 5px rgb(34 74 69 / 24%)}.book-ssd-range input[type="range"]::-moz-range-thumb{width:13px;height:13px;border:3px solid #fff;border-radius:50%;background:#19756c;box-shadow:0 0 0 1px #19756c,0 2px 5px rgb(34 74 69 / 24%)}.book-ssd-range input[type="range"]:focus-visible{outline:3px solid rgb(31 122 113 / 20%);outline-offset:5px}.book-ssd-range-steps{display:flex!important;justify-content:space-between;color:#738682!important;font-size:7px!important;font-weight:800!important;line-height:1!important}.book-ssd-range-steps>i{font-style:normal;white-space:nowrap}.book-ssd-app-dialog .book-memory-calculator-result>button span{color:#176f66}.book-ssd-app-dialog .book-memory-calculator-legend{justify-content:flex-end}.book-ssd-app-legend{flex-wrap:wrap;gap:7px 13px!important}.book-ssd-app-legend>span{display:inline-flex;align-items:center;gap:5px}.book-ssd-basis-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#d9e2e0}.book-ssd-basis-dot.is-official{background:#16766c}.book-ssd-basis-dot.is-estimate{border:1px solid #9f7d43;background:#f5e6bd}.book-ssd-app-dialog .is-official-capacity{box-shadow:inset 3px 0 0 #277f76}.book-ssd-app-dialog .is-estimate-capacity{box-shadow:inset 3px 0 0 #d1b06d}
.book-ssd-capacity-planner .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.book-ssd-video-example{margin:15px 18px 0;padding:14px 15px;border:1px solid #d0ddda;background:#fff}
.book-ssd-video-example>header span{color:#42766f;font-size:9px;font-weight:900}.book-ssd-video-example>header h4{margin:2px 0 0;color:#2b5154;font-size:14px;line-height:1.45}
.book-ssd-video-example>div{margin-top:10px;overflow-x:auto}.book-ssd-video-example table{width:100%;min-width:670px;border-collapse:collapse;font-size:10px}
.book-ssd-video-example th,.book-ssd-video-example td{padding:8px 9px;border:1px solid #d3dfdd;text-align:right;white-space:nowrap}.book-ssd-video-example thead th{background:#edf5f3;color:#3e6463}.book-ssd-video-example th:first-child{text-align:left}.book-ssd-video-example tbody th{color:#315b5c;background:#f8fbfa}.book-ssd-video-example tbody td{color:#557072}
.book-ssd-video-example>p{margin:9px 0 0;color:#687d80;font-size:10px;line-height:1.7}
.book-ssd-capacity-result{margin:15px 18px 16px;border:2px solid #4f8e87;background:#fff;box-shadow:0 7px 18px rgb(38 82 78 / 8%)}
.book-ssd-capacity-result>header{padding:11px 14px;border-bottom:1px solid #c9dbd7;background:#e8f5f2}.book-ssd-capacity-result>header span{color:#39766f;font-size:9px;font-weight:900}.book-ssd-capacity-result>header h4{margin:2px 0 0;color:#214b4b;font-size:15px}
.book-ssd-capacity-equation{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;border-bottom:1px solid #d3dfdc}
.book-ssd-capacity-equation>div{display:grid;gap:3px;padding:13px 14px}.book-ssd-capacity-equation span,.book-ssd-capacity-recommendation span{color:#68807f;font-size:9px;font-weight:900}.book-ssd-capacity-equation strong{color:#2c5b59;font-size:17px}.book-ssd-capacity-equation>i,.book-ssd-capacity-recommendation>i{align-self:center;color:#6b8984;font-style:normal;font-weight:950}
.book-ssd-capacity-recommendation{display:grid;grid-template-columns:minmax(150px,.72fr) minmax(150px,.82fr) auto minmax(210px,1.1fr);align-items:stretch;gap:1px;background:#d2dfdc}
.book-ssd-capacity-recommendation>*{background:#f8fbfa}.book-ssd-capacity-recommendation>label,.book-ssd-capacity-recommendation>div{display:grid;align-content:center;gap:4px;padding:12px 14px}.book-ssd-capacity-recommendation label select{min-height:34px;padding:5px 27px 5px 8px;border:1px solid #abc5c0;border-radius:4px;background:#fff;color:#28524f;font:inherit;font-size:12px;font-weight:850}.book-ssd-capacity-recommendation div>strong{color:#315d5c;font-size:17px}.book-ssd-capacity-recommendation>i{display:grid;place-items:center;padding:0 8px}.book-ssd-capacity-recommendation .is-answer{background:#1f756d}.book-ssd-capacity-recommendation .is-answer span,.book-ssd-capacity-recommendation .is-answer strong,.book-ssd-capacity-recommendation .is-answer small{color:#fff}.book-ssd-capacity-recommendation .is-answer strong{font-size:23px}.book-ssd-capacity-recommendation .is-answer small{font-size:9px;line-height:1.45;opacity:.88}
.book-ssd-capacity-result>p{margin:0;padding:10px 14px;border-top:1px solid #d4e0de;color:#637a7a;font-size:10px;line-height:1.65}
.book-ssd-capacity-planner>.book-part-references{margin:0 18px 17px;padding-top:11px;border-top:1px solid #d1dedb}
@media(max-width:900px){.book-ssd-capacity-sticky{top:106px;grid-template-columns:minmax(0,.8fr) auto minmax(0,1fr)}.book-ssd-capacity-sticky>span{display:none}.book-ssd-capacity-sticky>div:first-of-type{border-left:0}.book-ssd-capacity-quick{grid-template-columns:repeat(2,minmax(0,1fr))}.book-ssd-capacity-recommendation{grid-template-columns:repeat(2,minmax(0,1fr))}.book-ssd-capacity-recommendation>i{display:none}.book-ssd-capacity-recommendation .is-answer{grid-column:1/-1}}
@media(max-width:820px){.book-ssd-capacity-sticky{top:93px}}
@media(max-width:620px){
  .book-ssd-capacity-planner{margin-right:-4px;margin-left:-4px}.book-ssd-capacity-planner>header{padding:15px 13px 13px}.book-ssd-capacity-planner>header h3{font-size:18px}.book-ssd-capacity-sticky{top:91px;min-height:53px}.book-ssd-capacity-sticky>div{display:grid;gap:2px;padding:8px 10px}.book-ssd-capacity-sticky small{font-size:8px}.book-ssd-capacity-sticky strong{font-size:15px}.book-ssd-capacity-sticky .is-answer strong{font-size:18px}.book-ssd-capacity-quick article{padding:11px 10px}.book-ssd-capacity-quick strong{font-size:15px}.book-ssd-capacity-quick p{font-size:10px}
  .book-ssd-windows-capacity{grid-template-columns:1fr;gap:7px;margin:12px 10px;padding:12px}.book-ssd-app-selection{margin:12px 10px 9px}.book-ssd-app-selection>header{align-items:stretch;flex-direction:column}.book-ssd-app-selection>header button{width:100%}.book-ssd-capacity-table-wrap{margin:0 10px;overflow:visible;border:0;background:transparent}.book-ssd-capacity-table{display:block;min-width:0}.book-ssd-capacity-table caption{display:block;border:1px solid #c5d7d3}.book-ssd-capacity-table thead{display:none}.book-ssd-capacity-table tbody{display:block}.book-ssd-capacity-table tr{display:grid;grid-template-columns:1fr;margin-top:8px;border:1px solid #cbdad7;background:#fff}.book-ssd-capacity-table tr.book-ssd-capacity-group{display:block;margin-top:12px;border:0}.book-ssd-capacity-table .book-ssd-capacity-group th{display:block;border:0}.book-ssd-capacity-table th,.book-ssd-capacity-table td{display:block;grid-column:1;border-right:0}.book-ssd-capacity-table th[scope="row"]{grid-column:1;border-bottom:1px solid #d5e1df}.book-ssd-capacity-table td:nth-child(2),.book-ssd-capacity-table td:nth-child(3){border-right:0}.book-ssd-capacity-table td:last-child{grid-column:1;display:flex;align-items:center;justify-content:space-between;border-bottom:0;background:#f1f8f6}.book-ssd-capacity-table td:last-child::before{color:#627d78;font-size:9px;font-weight:900;content:'積算容量'}.book-ssd-capacity-table td:last-child strong{font-size:15px}.book-ssd-capacity-fixed{text-align:left}.book-ssd-toggle{margin-left:0}.book-ssd-range-steps{font-size:8px!important}
  .book-ssd-video-example{margin:13px 10px 0;padding:12px 11px}.book-ssd-capacity-result{margin:13px 10px}.book-ssd-capacity-equation{grid-template-columns:1fr}.book-ssd-capacity-equation>i{display:none}.book-ssd-capacity-equation>div+div{border-top:1px solid #d5e1df}.book-ssd-capacity-recommendation{grid-template-columns:1fr}.book-ssd-capacity-recommendation .is-answer{grid-column:auto}.book-ssd-capacity-planner>.book-part-references{margin:0 10px 14px}
}

@media(max-width:620px){.book-ssd-capacity-table tr.book-ssd-selected-app-row{position:relative}.book-ssd-selected-app-row th[scope="row"]{padding-right:46px}.book-ssd-selected-app-row td:last-child{position:static;padding-top:10px}.book-ssd-selected-app-row .book-ssd-app-remove{top:0;right:-1px}}

/* Benchmark graph axes and direct GPU search action. */
.book-gpu-benchmark-point-action{display:flex;min-height:45px;align-items:center;justify-content:space-between;gap:12px;padding:7px 11px;border-bottom:1px solid #dce6e4;background:#f2f8f7;color:#526b68}
.book-gpu-benchmark-point-action>span{display:flex;min-width:0;align-items:baseline;flex-wrap:wrap;gap:3px 8px;font-size:.76rem}
.book-gpu-benchmark-point-action small{color:#71817f;font-size:.65rem;font-weight:800}
.book-gpu-benchmark-point-action strong{overflow:hidden;max-width:370px;color:#274c49;text-overflow:ellipsis;white-space:nowrap}
.book-gpu-benchmark-point-action b{color:#0b6f67;font-size:.79rem}
.book-gpu-benchmark-point-action>a,.book-gpu-benchmark-passmark-search{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-height:29px;padding:5px 9px;border:1px solid #2f8179;border-radius:4px;background:#fff;color:#0a6b63;font-size:.72rem;font-weight:800;line-height:1.2;text-decoration:none}
.book-gpu-benchmark-point-action>a::after,.book-gpu-benchmark-passmark-search::after{margin-left:5px;content:"→"}
.book-gpu-benchmark-point-action>a:hover,.book-gpu-benchmark-point-action>a:focus-visible,.book-gpu-benchmark-passmark-search:hover,.book-gpu-benchmark-passmark-search:focus-visible{background:#0b756c;color:#fff;outline:none}
.book-gpu-benchmark-table td:has(>.book-gpu-benchmark-passmark-value){white-space:nowrap}
.book-gpu-benchmark-passmark-value{display:inline!important;margin-right:7px;color:#274d49;font-size:.8rem}
.book-gpu-benchmark-passmark-search{display:inline-flex;min-height:26px;padding:4px 7px;font-size:.67rem}
.book-gpu-benchmark-chart .overview-data-point,.book-gpu-benchmark-chart .data-point{cursor:pointer}
@media(max-width:760px){
  .book-gpu-benchmark-point-action{align-items:stretch;flex-direction:column;gap:6px}
  .book-gpu-benchmark-point-action>span{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 7px}
  .book-gpu-benchmark-point-action>span>b{grid-column:1/-1}
  .book-gpu-benchmark-point-action strong{max-width:none}
  .book-gpu-benchmark-point-action>a{width:100%;box-sizing:border-box}
  .book-gpu-benchmark-table td:has(>.book-gpu-benchmark-passmark-value){white-space:normal}
  .book-gpu-benchmark-passmark-value{display:block!important;margin:0 0 5px}
}

/* Select the trend used by the intersection guides without taking space from the plot. */
.book-gpu-fps-target-search{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(300px,1.4fr);align-items:center;gap:9px 16px;padding:8px 11px;border-bottom:1px solid #d8e3e1;background:#fbfdfc}
.book-gpu-fps-target-search>header{display:flex;min-width:0;flex-direction:column;gap:2px}
.book-gpu-fps-target-search>header strong{color:#214b47;font-size:.82rem;line-height:1.35}
.book-gpu-fps-target-search>header small{color:#6b7e7b;font-size:.64rem;line-height:1.4}
.book-gpu-fps-target-search>header>p{margin:2px 0 0;color:#47706c;font-size:.67rem;font-weight:800}
.book-gpu-fps-target-controls{display:grid;min-width:0;gap:3px}
.book-gpu-fps-target-controls label{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7px;min-width:0}
.book-gpu-fps-target-controls label>span{color:#526d69;font-size:.67rem;font-weight:800;white-space:nowrap}
.book-gpu-fps-target-controls select{min-width:0;width:100%;height:31px;padding:4px 26px 4px 8px;border:1px solid #aec6c2;border-radius:4px;background:#fff;color:#294e4a;font:inherit;font-size:.71rem;font-weight:700;text-overflow:ellipsis}
.book-gpu-fps-target-controls>p{overflow:hidden;margin:0;color:#6b7d7a;font-size:.61rem;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.book-gpu-benchmark-chart .benchmark-series-line.is-target-series{stroke-width:4.3;opacity:1;filter:drop-shadow(0 1px 1px rgba(25,77,72,.18))}
.book-gpu-benchmark-chart .overview-series-line.is-target-series{stroke-width:4;opacity:1;filter:drop-shadow(0 1px 1px rgba(25,77,72,.18))}
.book-gpu-benchmark-chart .fps-axis-reference-line{stroke:#617c79;stroke-width:1.05;stroke-dasharray:3 4;opacity:.52;pointer-events:none}.book-gpu-benchmark-chart .fps-axis-target-tick{stroke:#496c68;stroke-width:1.2;pointer-events:none}.book-gpu-benchmark-chart .fps-axis-target-label{fill:#234f4b;stroke:#fff;stroke-width:4px;paint-order:stroke fill;font-size:10.5px;font-weight:900;letter-spacing:0;pointer-events:none}.book-gpu-benchmark-chart .fps-target-rail-title{fill:#244b47;font-size:11px;font-weight:850;letter-spacing:0}.book-gpu-benchmark-chart .fps-target-rail-button{cursor:pointer}.book-gpu-benchmark-chart .fps-target-rail-button-bg{fill:#fff;stroke-width:1.2;vector-effect:non-scaling-stroke}.book-gpu-benchmark-chart .fps-target-rail-resolution-swatch{pointer-events:none}.book-gpu-benchmark-chart .fps-target-rail-button-label{fill:#294b48;font-size:8.2px;font-weight:800;letter-spacing:0;pointer-events:none}.book-gpu-benchmark-chart .fps-target-rail-button-score{fill:#60736f;stroke:#fff;stroke-width:2px;paint-order:stroke fill;font-size:7.5px;font-weight:800;letter-spacing:0;pointer-events:none}.book-gpu-benchmark-chart .fps-target-rail-metric-label{fill:#23665f;font-size:7.1px;font-weight:900;letter-spacing:0;pointer-events:none}.book-gpu-benchmark-chart a.fps-target-rail-button:hover .fps-target-rail-button-bg,.book-gpu-benchmark-chart a.fps-target-rail-button:focus .fps-target-rail-button-bg{fill:#eef8f6;stroke-width:2}.book-gpu-benchmark-chart a.fps-target-rail-button:hover .fps-target-rail-button-score,.book-gpu-benchmark-chart a.fps-target-rail-button:focus .fps-target-rail-button-score{fill:#254e49}.book-gpu-benchmark-chart a.fps-target-rail-button:focus{outline:none}.book-gpu-benchmark-chart .fps-target-rail-connector{fill:none;stroke-width:.8;stroke-dasharray:1 6;stroke-linecap:round;opacity:.14;pointer-events:none}.book-gpu-benchmark-chart .fps-target-rail-point{fill:#fff;stroke-width:1.6;opacity:.45;pointer-events:none}.book-gpu-benchmark-chart .fps-target-rail-connector.is-active{stroke-width:1.9;stroke-dasharray:3 4;opacity:.92}.book-gpu-benchmark-chart .fps-target-rail-point.is-active{r:5.5;stroke-width:2.7;opacity:1;filter:drop-shadow(0 1px 2px rgba(21,70,65,.28))}
@media(max-width:620px){
  .book-gpu-fps-target-search{grid-template-columns:1fr;gap:7px;padding:8px}
  .book-gpu-fps-target-search>header{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:2px 7px}
  .book-gpu-fps-target-search>header small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .book-gpu-fps-target-search>header>p{grid-column:1/-1}
  .book-gpu-benchmark-chart{overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain}
  .book-gpu-benchmark-chart>svg{width:920px;min-width:920px;max-width:none}
}

/* The all-game view is the first, wider choice in the individual game picker. */
.book-gpu-benchmark-game-list a.book-gpu-benchmark-all-games{grid-column:span 2;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;min-height:42px;padding:7px 12px;border-color:#9fc6c2;background:#f0f9f8;text-align:left}.book-gpu-benchmark-all-games::before{grid-row:1/3;align-self:center;width:25px;height:20px;border-bottom:2px solid #0c7168;border-left:2px solid #0c7168;background:linear-gradient(135deg,transparent 42%,#70aaa5 43%,#70aaa5 49%,transparent 50%) center/100% 100% no-repeat;content:""}.book-gpu-benchmark-game-list .book-gpu-benchmark-all-games strong{text-align:left}.book-gpu-benchmark-game-list .book-gpu-benchmark-all-games span{font-size:.68rem;line-height:1.25}.book-gpu-benchmark-game-list a.book-gpu-benchmark-all-games:hover,.book-gpu-benchmark-game-list a.book-gpu-benchmark-all-games.is-current{border-color:#0c7168;background:#e5f5f3}

/* Keep structural eyebrow headings readable above the following title and body copy. */
:is(
  .book-cpu-choice-lead,
  .book-ssd-choice-lead,
  .book-rebuilt-part-lead
) > span,
:is(
  .book-cpu-purpose-map,
  .book-cpu-game-balance,
  .book-memory-capacity-guide,
  .book-memory-capacity-now,
  .book-memory-spec-guide,
  .book-ssd-storage-plan,
  .book-ssd-choice-checklist,
  .book-ssd-metric-guide,
  .book-ssd-capacity-planner,
  .book-cooler-grade-guide,
  .book-cooler-enough-check,
  .book-motherboard-price-guide,
  .book-deep-reference,
  .book-current-reference,
  .book-rebuilt-part-options,
  .book-rebuilt-part-checks
) > header > span,
.book-cpu-purpose-map > header > div > span,
.book-cpu-game-balance > header > div > span,
.book-cooler-grade-guide > header > div > span,
.book-memory-calculator-heading > div > span {
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: .015em;
}

/* Nested examples use a smaller step, but remain larger than their explanatory copy. */
.book-memory-latency-example > header > span,
.book-ssd-video-example > header span,
.book-ssd-capacity-result > header span {
  font-size: clamp(12px, .9vw, 13px);
  line-height: 1.45;
  letter-spacing: .01em;
}

@media (max-width: 620px) {
  :is(
    .book-cpu-choice-lead,
    .book-ssd-choice-lead,
    .book-rebuilt-part-lead
  ) > span,
  :is(
    .book-cpu-purpose-map,
    .book-cpu-game-balance,
    .book-memory-capacity-guide,
    .book-memory-capacity-now,
    .book-memory-spec-guide,
    .book-ssd-storage-plan,
    .book-ssd-choice-checklist,
    .book-ssd-metric-guide,
    .book-ssd-capacity-planner,
    .book-cooler-grade-guide,
    .book-cooler-enough-check,
    .book-motherboard-price-guide,
    .book-deep-reference,
    .book-current-reference,
    .book-rebuilt-part-options,
    .book-rebuilt-part-checks
  ) > header > span,
  .book-cpu-purpose-map > header > div > span,
  .book-cpu-game-balance > header > div > span,
  .book-cooler-grade-guide > header > div > span,
  .book-memory-calculator-heading > div > span {
    font-size: 14px;
  }
}

/* Calculator entries for software and uses that are not present in the catalog. */
.book-memory-calculator-dialog .book-memory-calculator-picker {
  display: flex;
  flex-direction: column;
}

.book-memory-calculator-dialog .book-memory-calculator-results {
  min-height: 110px;
  flex: 1 1 auto;
  max-height: none;
}

.book-calculator-custom-entry {
  flex: 0 0 auto;
  padding: 11px 12px 12px;
  border: 1px solid #bcd3cf;
  border-left: 4px solid #2b7b72;
  border-radius: 5px;
  background: #f3faf8;
}

.book-calculator-custom-entry > header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 9px;
  margin-bottom: 8px;
}

.book-calculator-custom-entry > header strong {
  color: #245b56;
  font-size: 13px;
  line-height: 1.4;
}

.book-calculator-custom-entry > header small {
  color: #667d79;
  font-size: 10px;
  line-height: 1.5;
}

.book-calculator-custom-fields {
  display: grid;
  align-items: end;
  gap: 7px;
}

.book-calculator-custom-fields.is-memory {
  grid-template-columns: minmax(150px, 1fr) 100px minmax(190px, .9fr) auto;
}

.book-calculator-custom-fields.is-ssd {
  grid-template-columns: minmax(180px, 1fr) 115px 75px auto;
}

.book-calculator-custom-fields > label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.book-calculator-custom-fields > label > span:first-child {
  color: #496c68;
  font-size: 10px;
  font-weight: 900;
}

.book-calculator-custom-fields input,
.book-calculator-custom-fields select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid #9fbbb6;
  border-radius: 4px;
  background: #fff;
  color: #294d49;
  font: inherit;
  font-size: 11px;
}

.book-calculator-custom-fields input:focus,
.book-calculator-custom-fields select:focus {
  border-color: #267b72;
  outline: 3px solid rgb(38 123 114 / 14%);
}

.book-calculator-capacity-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid #9fbbb6;
  border-radius: 4px;
  background: #fff;
}

.book-calculator-capacity-input:focus-within {
  border-color: #267b72;
  outline: 3px solid rgb(38 123 114 / 14%);
}

.book-calculator-capacity-input > input {
  border: 0;
  outline: 0;
}

.book-calculator-capacity-input > b {
  padding-right: 8px;
  color: #56726e;
  font-size: 10px;
}

.book-calculator-custom-fields > button {
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid #19766d;
  border-radius: 4px;
  background: #19766d;
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.book-calculator-custom-fields > button:hover,
.book-calculator-custom-fields > button:focus-visible {
  background: #0d625a;
  outline: 3px solid rgb(25 118 109 / 18%);
}

.book-calculator-custom-entry > p {
  margin: 7px 0 0;
  color: #2e716a;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.5;
}

.book-calculator-custom-entry > p.is-error {
  color: #a0483d;
}

.book-calculator-choice-divider {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  margin: 9px 0 8px;
  color: #6c807d;
  font-size: 9px;
  font-weight: 850;
}

.book-calculator-choice-divider::before,
.book-calculator-choice-divider::after {
  height: 1px;
  flex: 1 1 auto;
  background: #d4e1df;
  content: '';
}

@media (max-width: 700px) {
  .book-calculator-custom-fields.is-memory,
  .book-calculator-custom-fields.is-ssd {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  .book-calculator-custom-fields.is-memory > label:first-child,
  .book-calculator-custom-fields.is-memory > label:nth-child(3),
  .book-calculator-custom-fields.is-memory > button,
  .book-calculator-custom-fields.is-ssd > label:first-child,
  .book-calculator-custom-fields.is-ssd > button {
    grid-column: 1 / -1;
  }

  .book-calculator-custom-fields.is-memory > label:nth-child(2) {
    grid-column: 1 / -1;
  }

  .book-calculator-custom-fields.is-ssd > label:nth-child(2) {
    grid-column: 1;
  }

  .book-calculator-custom-fields.is-ssd > label:nth-child(3) {
    grid-column: 2;
  }

  .book-calculator-custom-entry > header {
    display: grid;
    gap: 2px;
  }
}

/* Linux choice and gaming guide */
.book-os-route-grid > article.is-linux { --os-accent: #28705e; }

.book-linux-pick-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 10px;
  margin: 18px 0 14px;
  padding: 13px 16px;
  border: 1px solid #cbdcd6;
  border-left: 5px solid #28705e;
  border-radius: 12px;
  background: #f3f8f6;
  color: #4c6562;
  font-size: 12px;
}

.book-linux-pick-summary strong {
  color: #31514b;
}

.book-linux-pick-summary span {
  padding: 4px 9px;
  border-radius: 999px;
  background: #28705e;
  color: #fff;
  font-weight: 900;
}

.book-linux-pick-summary i {
  color: #8da39e;
  font-style: normal;
}

.book-linux-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0 18px;
}

.book-linux-choice-grid > article {
  --linux-accent: #28705e;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 16px;
  border: 1px solid #cedbd8;
  border-top: 4px solid var(--linux-accent);
  border-radius: 13px;
  background: #fff;
}

.book-linux-choice-grid > article.is-ubuntu { --linux-accent: #c74b24; }
.book-linux-choice-grid > article.is-mint { --linux-accent: #4a8d43; }
.book-linux-choice-grid > article.is-fedora { --linux-accent: #3858a7; }
.book-linux-choice-grid > article.is-pop { --linux-accent: #3b6f78; }
.book-linux-choice-grid > article.is-zorin { --linux-accent: #2774b8; }
.book-linux-choice-grid > article.is-bazzite { --linux-accent: #6f4bb2; }

.book-linux-choice-grid header {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}

.book-linux-choice-grid header > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 11px;
  background: var(--linux-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: -.03em;
}

.book-linux-choice-grid h3 {
  margin: 0;
  color: #263f45;
  font-size: 16px;
  line-height: 1.4;
}

.book-linux-choice-grid header strong {
  display: block;
  margin-top: 3px;
  color: var(--linux-accent);
  font-size: 11px;
  line-height: 1.55;
}

.book-linux-choice-grid dl {
  display: grid;
  gap: 0;
  margin: 13px 0;
}

.book-linux-choice-grid dl > div {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 9px;
  padding: 8px 0;
  border-top: 1px solid #e2e9e7;
}

.book-linux-choice-grid dt {
  color: var(--linux-accent);
  font-size: 11px;
  font-weight: 950;
}

.book-linux-choice-grid dd {
  margin: 0;
  color: #536b70;
  font-size: 12px;
  line-height: 1.7;
}

.book-linux-choice-grid > article > a {
  width: fit-content;
  margin-top: auto;
  color: var(--linux-accent);
  font-size: 11px;
  font-weight: 900;
}

.book-linux-game-status,
.book-game-launcher-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 17px 0 20px;
}

.book-linux-game-status > article,
.book-game-launcher-grid > article {
  min-width: 0;
  padding: 15px;
  border: 1px solid #cedbd8;
  border-radius: 12px;
  background: #fff;
}

.book-linux-game-status > article {
  --game-accent: #357a65;
  border-top: 4px solid var(--game-accent);
}

.book-linux-game-status > article.is-proton { --game-accent: #316fa1; }
.book-linux-game-status > article.is-windows { --game-accent: #b05c45; }

.book-linux-game-status > article > span,
.book-game-launcher-grid > article > span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 7px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--game-accent, #edf3f6);
  color: #fff;
  font-size: 10px;
  font-weight: 950;
}

.book-linux-game-status h3,
.book-game-launcher-grid strong {
  display: block;
  margin: 0;
  color: #29464c;
  font-size: 15px;
  line-height: 1.45;
}

.book-linux-game-status p,
.book-game-launcher-grid p {
  margin: 7px 0 0;
  color: #576f74;
  font-size: 12px;
  line-height: 1.7;
}

.book-game-launcher-grid > article {
  display: flex;
  flex-direction: column;
  border-top: 4px solid #426f80;
}

.book-game-launcher-grid > article > span {
  order: -1;
  background: #426f80;
}

.book-game-launcher-grid a {
  width: fit-content;
  margin-top: auto;
  padding-top: 10px;
  color: #276b7e;
  font-size: 11px;
  font-weight: 900;
}

@media (max-width: 760px) {
  .book-linux-choice-grid,
  .book-linux-game-status,
  .book-game-launcher-grid {
    grid-template-columns: 1fr;
  }

  .book-linux-pick-summary {
    align-items: flex-start;
  }

  .book-linux-pick-summary i {
    display: none;
  }
}

@media (max-width: 520px) {
  .book-linux-choice-grid > article {
    padding: 14px;
  }

  .book-linux-choice-grid dl > div {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 7px;
  }
}

/* Keep every in-page destination below the two sticky navigation bars.
   Apply this to the actual ID target so it also works before JavaScript loads. */
.book-chapter-page #book-main [id] {
  scroll-margin-top: 118px;
}

@media (max-width: 820px) {
  .book-chapter-page #book-main [id] {
    scroll-margin-top: 101px;
  }
}