* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #faf7f0; }
#presentation {
  position: fixed; inset: 0; overflow: hidden;
  transition: right .4s ease;
  background-color: #faf7f0;
  background-image:
    radial-gradient(ellipse 60% 50% at 15% 10%, rgba(255, 215, 170, .22), transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 95%, rgba(180, 200, 220, .18), transparent 60%),
    radial-gradient(circle, rgba(60, 50, 35, .07) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, var(--dot-size, 30px) var(--dot-size, 30px);
}
body.notes-open #presentation { right: 40%; }
.slide { position: absolute; inset: 0; visibility: hidden; opacity: 0; overflow: hidden; pointer-events: none; }
.slide:first-child { background: #000; }
.slide.is-active { visibility: visible; opacity: 1; pointer-events: auto; }
#navigation {
  position: fixed; right: 18px; bottom: 18px; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  padding: 7px; border-radius: 999px;
  color: #fff; background: rgba(25, 22, 18, .76);
  font: 14px/1.2 system-ui, sans-serif;
  transform: scale(.7); transform-origin: right bottom;
  opacity: 0; pointer-events: none; transition: opacity .2s, right .4s ease;
}
body.show-navigation #navigation, #navigation:focus-within { opacity: 1; pointer-events: auto; }
body.notes-open #navigation { right: calc(40% + 18px); opacity: 1; pointer-events: auto; }
#navigation button {
  border: 0; border-radius: 999px; width: 40px; height: 40px; padding: 0;
  background: rgba(255,255,255,.15); color: inherit; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
}
#navigation button:hover, #navigation button:focus-visible { background: rgba(255,255,255,.3); }
#navigation button:disabled { opacity: .4; cursor: default; }
@media (max-width: 640px) {
  #navigation { right: 8px; bottom: 8px; gap: 2px; padding: 5px; }
}
#error {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  padding: 24px; background: #faf7f0; color: #2a2520;
  font: 18px/1.6 system-ui, sans-serif; text-align: center;
}
#error[hidden] { display: none; }

#drawer-backdrop { position: fixed; inset: 0; z-index: 14; background: rgba(20, 17, 14, .5); opacity: 0; transition: opacity .3s ease; }
#drawer-backdrop.is-open { opacity: 1; }
#drawer-backdrop[hidden] { display: none; }
#page-drawer {
  position: fixed; z-index: 15; top: 0; right: 0; bottom: 0;
  width: min(540px, 100vw); padding: 22px;
  background: #f7f3eb; box-shadow: -8px 0 32px rgba(35, 27, 18, .2);
  font: 14px/1.4 system-ui, sans-serif; color: #2a2520;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s ease;
}
#page-drawer.is-open { transform: translateX(0); }
#page-drawer[hidden] { display: none; }
.drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.drawer-header h2 { margin: 0; font-size: 20px; }
#close-drawer { border: 0; background: transparent; color: inherit; font-size: 28px; cursor: pointer; }
#page-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; gap: 14px; align-content: start; flex: 1; min-height: 0; overflow-y: auto; padding: 2px; }
.page-card { aspect-ratio: 16 / 11; display: flex; flex-direction: column; min-width: 0; padding: 0; border: 2px solid transparent; border-radius: 8px; background: #fff; color: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.page-card:hover, .page-card:focus-visible { border-color: #c57a3e; }
.page-card[aria-current="page"] { border-color: #bd5a21; }
.page-preview { width: 100%; flex: none; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #faf7f0; pointer-events: none; }
.page-preview > div { position: absolute; inset: 0; overflow: hidden; }
.page-caption { display: block; padding: 7px 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 讲解按钮 */
#notes-toggle span[aria-hidden="true"] { font-size: 16px; line-height: 1; }

/* 讲解分栏 */
#notes-panel {
  position: fixed; z-index: 9; top: 0; right: 0; bottom: 0;
  width: 40%; padding: 24px 26px;
  background: #f7f3eb; box-shadow: -8px 0 32px rgba(35, 27, 18, .12);
  font: 15px/1.65 system-ui, sans-serif; color: #2a2520;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .4s ease;
}
body.notes-open #notes-panel { transform: translateX(0); }
#notes-panel[hidden] { display: none; }
body:not(.notes-open) #notes-panel { pointer-events: none; }
#notes-panel .drawer-header { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(60, 50, 35, 0.15); }
#notes-panel h2 { font-size: 19px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
#notes-page-ref { font-size: 13px; font-weight: 400; color: #8a7f6a; letter-spacing: 1px; }
#close-notes { border: 0; background: transparent; color: inherit; font-size: 28px; cursor: pointer; line-height: 1; }
#notes-content { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; }
#notes-content .note-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 700; letter-spacing: 1px; margin-bottom: 12px; }
#notes-content .note-badge.nail { background: #1f4062; color: #fff; }
#notes-content .note-badge.callback { background: #fff; color: #1f4062; border: 1.5px solid #1f4062; }
#notes-content .note-badge.chapter { background: #e8e2d4; color: #8a7f6a; }
#notes-content h3 { font-size: 17px; margin: 0 0 10px; color: #1f1a13; letter-spacing: 0.5px; line-height: 1.35; }
#notes-content h4 { font-size: 15px; margin: 22px 0 8px; color: #1f4062; letter-spacing: 0.4px; line-height: 1.45; }
#notes-content p { margin: 0 0 11px; color: #2a2520; letter-spacing: 0.2px; }
#notes-content p:last-child { margin-bottom: 0; }
#notes-content strong { color: inherit; font-weight: inherit; }
#notes-content em { font-style: normal; color: #c56a30; font-weight: 600; }
#notes-content .quote { padding: 10px 14px; background: #fff; border-left: 3px solid #c56a30; border-radius: 0 6px 6px 0; margin: 6px 0 12px; font-size: 14px; color: #4a4030; }
#notes-content .detail-note strong { font-weight: 700; }
#notes-content .detail-note h5 { margin: 18px 0 8px; font-size: 15px; color: #8b5035; }
#notes-content .detail-note hr { border: 0; border-top: 1px solid #ded2be; margin: 20px 0; }
#notes-content .detail-note table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 8px 0 16px; font-size: 13px; background: #fff; }
#notes-content .detail-note th, #notes-content .detail-note td { padding: 7px 8px; border: 1px solid #e1d8c8; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
#notes-content .detail-note th { background: #f1eadf; color: #4a4030; }
#notes-content .detail-note pre { max-width: 100%; overflow-x: auto; padding: 10px 12px; background: #fff; border: 1px solid #e1d8c8; border-radius: 6px; font-size: 12px; line-height: 1.5; }
#notes-content .detail-note code { overflow-wrap: anywhere; }
#notes-content .detail-note pre code { overflow-wrap: normal; }
#notes-content .detail-note blockquote { margin: 10px 0 16px; padding: 10px 14px; background: #fff; border-left: 3px solid #c56a30; border-radius: 0 6px 6px 0; }
.notes-footer { margin-top: 14px; padding-top: 10px; border-top: 1px dashed rgba(60, 50, 35, 0.12); font-size: 12px; color: #8a7f6a; letter-spacing: 0.5px; }