:root {
  color-scheme: light;
  --ink: #30332e;
  --paper: #fffefa;
  --accent: #496cbb;
  --edge: rgba(50, 43, 37, 0.35);
  --drawer-shadow: -12px 0 36px rgba(27, 23, 20, 0.2);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body { overflow: hidden; color: var(--ink); font-family: "DM Sans", sans-serif; }
button { color: inherit; font: inherit; }
.viewer-shell { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; background: #705d50 url("Notes Background.png") center / cover no-repeat; }
.page-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.note-page { width: 100%; height: 100%; display: grid; place-items: center; margin: 0; pointer-events: none; }
.note-page img { display: block; width: auto; height: auto; max-width: calc(100vw - 136px); max-height: calc(100dvh - 64px); object-fit: contain; background: var(--paper); box-shadow: 0 10px 32px rgba(24, 19, 16, 0.3); animation: page-in 220ms ease both; }
.page-arrow { position: absolute; z-index: 2; top: 50%; width: 64px; height: 88px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; transform: translateY(-50%); transition: transform 180ms ease, opacity 180ms ease; }
.page-arrow-previous { left: 26%; }
.page-arrow-next { right: 26%; }
.page-arrow span { width: 0; height: 0; border-top: 19px solid transparent; border-bottom: 19px solid transparent; filter: drop-shadow(0 2px 3px rgba(30, 24, 20, 0.4)); transition: transform 180ms ease; }
.page-arrow-previous span { border-right: 25px solid #fffefa; }
.page-arrow-next span { border-left: 25px solid #fffefa; }
.page-arrow:hover:not(:disabled) span, .page-arrow:focus-visible:not(:disabled) span { transform: scale(1.4); }
.page-arrow:focus-visible, .unit-drawer-toggle:focus-visible, .drawer-close:focus-visible, .unit-tab:focus-visible { outline: 3px solid #f6ca53; outline-offset: 4px; }
.page-arrow:disabled { opacity: 0.35; cursor: default; }
.page-counter { position: absolute; z-index: 2; bottom: 12px; left: 50%; padding: 5px 10px; border-radius: 3px; background: rgba(255, 254, 250, 0.86); color: #3e403a; font-size: 0.76rem; font-weight: 700; font-variant-numeric: tabular-nums; transform: translateX(-50%); }
.unit-drawer-toggle { position: absolute; z-index: 5; top: 50%; right: 0; display: flex; align-items: center; gap: 9px; padding: 13px 11px; border: 1px solid var(--edge); border-right: 0; border-radius: 6px 0 0 6px; background: rgba(255, 254, 250, 0.94); box-shadow: 0 4px 14px rgba(27, 23, 20, 0.16); color: #353932; cursor: pointer; font-size: 0.73rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; transform: translateY(-50%); writing-mode: vertical-rl; }
.drawer-toggle-icon { font-size: 1rem; line-height: 1; }
.unit-drawer { position: absolute; z-index: 4; inset: 0 0 0 auto; width: min(330px, calc(100vw - 54px)); padding: 25px 22px; background: rgba(255, 254, 250, 0.97); box-shadow: var(--drawer-shadow); transform: translateX(102%); transition: transform 240ms cubic-bezier(0.2, 0.75, 0.25, 1); }
.unit-drawer.is-open { transform: translateX(0); }
.drawer-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 21px; border-bottom: 1px solid rgba(48, 51, 46, 0.14); }
.eyebrow { color: #7a766c; font-size: 0.69rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.drawer-close { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(48, 51, 46, 0.18); border-radius: 50%; background: transparent; cursor: pointer; font-size: 1.5rem; line-height: 1; }
.unit-tabs { display: grid; gap: 10px; padding-top: 18px; }
.unit-tab { min-height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border: 1px solid rgba(48, 51, 46, 0.2); border-radius: 4px; background: transparent; cursor: pointer; text-align: left; font-weight: 700; }
.unit-tab::after { content: ""; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.unit-tab:hover, .unit-tab[aria-pressed="true"] { border-color: var(--accent); background: #edf1fa; color: #35599f; }
@keyframes page-in { from { opacity: 0.55; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
  .note-page img { max-width: calc(100vw - 76px); max-height: calc(100dvh - 60px); }
  .page-arrow { width: 38px; height: 62px; }
  .page-arrow-previous { left: 12%; }
  .page-arrow-next { right: 12%; }
  .page-arrow span { border-top-width: 14px; border-bottom-width: 14px; }
  .page-arrow-previous span { border-right-width: 18px; }
  .page-arrow-next span { border-left-width: 18px; }
  .page-counter { bottom: 7px; font-size: 0.68rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }