:root {
  --navy: #071b4a;
  --blue: #1548db;
  --cyan: #6edaff;
  --coral: #ff6e73;
  --paper: #f5f9ff;
  --line: rgba(203, 226, 255, .18);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: var(--paper); background: #061538; font-family: "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; }
button, textarea { font: inherit; }
button { color: inherit; }

.reader { width: 100%; height: var(--viewport-height, 100svh); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: radial-gradient(circle at 80% 18%, rgba(37,116,255,.2), transparent 34%), radial-gradient(circle at 18% 86%, rgba(36,205,255,.11), transparent 32%), #061538; }
.reader-header { min-height: 72px; padding: calc(12px + var(--safe-top)) calc(22px + var(--safe-right)) 11px calc(22px + var(--safe-left)); display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #2d62ef, #18acd7); color: white; font-size: 13px; font-weight: 800; }
.brand-copy { display: grid; gap: 2px; }
.brand-copy b { font-size: 17px; letter-spacing: .06em; }
.brand-copy small { color: rgba(245,249,255,.56); font-size: 11px; letter-spacing: .16em; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.counter { min-width: 64px; margin-right: 4px; color: rgba(245,249,255,.66); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.quiet-button { min-height: 36px; padding: 0 13px; border: 1px solid rgba(220,236,255,.2); border-radius: 999px; background: rgba(255,255,255,.05); cursor: pointer; }
.quiet-button:hover, .quiet-button:focus-visible { outline: none; background: rgba(255,255,255,.13); }

.stage { min-height: 0; position: relative; display: grid; grid-template-columns: 68px minmax(0, 1fr) 68px; align-items: center; gap: 14px; padding: 16px max(10px, var(--safe-right)) 8px max(10px, var(--safe-left)); }
.slide-frame { position: relative; width: min(100%, calc((var(--viewport-height, 100svh) - 176px) * 16 / 9)); aspect-ratio: 16 / 9; margin: 0 auto; overflow: hidden; background: #eaf2ff; box-shadow: 0 30px 76px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.09); touch-action: pan-y; }
.slide-frame img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; object-fit: contain; transition: opacity 160ms ease, transform 260ms cubic-bezier(.22,.74,.18,1); -webkit-user-drag: none; }
.slide-frame.is-loading img { opacity: .24; transform: scale(.994); }
.loading { position: absolute; z-index: 1; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; border: 3px solid rgba(21,72,219,.16); border-top-color: var(--blue); border-radius: 50%; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.nav-button { width: 50px; height: 82px; justify-self: center; border: 1px solid rgba(225,239,255,.18); border-radius: 999px; background: rgba(255,255,255,.05); cursor: pointer; }
.nav-button span { display: block; margin-top: -7px; font: 300 54px/1 Georgia, serif; }
.nav-button:hover, .nav-button:focus-visible { outline: none; background: rgba(255,255,255,.14); }
.nav-button:disabled { opacity: .2; cursor: default; }

.reader-footer { min-height: 76px; padding: 7px calc(24px + var(--safe-right)) calc(11px + var(--safe-bottom)) calc(24px + var(--safe-left)); display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr); align-items: center; gap: 20px; }
.progress-track { grid-column: 1 / -1; width: min(780px, 74vw); height: 2px; margin: 0 auto; overflow: hidden; background: rgba(255,255,255,.13); }
.progress-track span { display: block; width: calc(100% / 14); height: 100%; background: linear-gradient(90deg, #4d7bff, var(--cyan), var(--coral)); transition: width 220ms ease; }
.reader-footer p { margin: 0; }
#slide-title { justify-self: center; font-size: 13px; font-weight: 700; color: rgba(245,249,255,.8); }
.reader-help { justify-self: end; font-size: 11px; color: rgba(245,249,255,.42); }

.overlay-panel { position: fixed; z-index: 50; inset: 0; overflow: auto; padding: calc(34px + var(--safe-top)) calc(46px + var(--safe-right)) calc(46px + var(--safe-bottom)) calc(46px + var(--safe-left)); color: var(--navy); background: rgba(244,249,255,.97); backdrop-filter: blur(18px); }
.overlay-panel[hidden] { display: none; }
.panel-bar { max-width: 1420px; margin: 0 auto 28px; display: flex; justify-content: space-between; align-items: start; }
.panel-bar p, .panel-bar h1 { margin: 0; }
.panel-bar p { margin-bottom: 7px; color: #61749c; font-size: 13px; letter-spacing: .14em; }
.panel-bar h1 { font-size: 38px; letter-spacing: -.04em; }
.close-button { width: 44px; height: 44px; border: 1px solid rgba(7,27,74,.15); border-radius: 50%; color: var(--navy); background: white; font-size: 28px; line-height: 1; cursor: pointer; }
.thumbnail-grid { max-width: 1420px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.thumbnail { padding: 0; border: 0; color: var(--navy); background: transparent; text-align: left; cursor: pointer; }
.thumbnail img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: 0 14px 34px rgba(18,59,132,.12); transition: transform 160ms ease, box-shadow 160ms ease; }
.thumbnail:hover img, .thumbnail:focus-visible img { transform: translateY(-3px); box-shadow: 0 20px 42px rgba(18,59,132,.2); }
.thumbnail:focus-visible { outline: 2px solid var(--blue); outline-offset: 7px; }
.thumbnail span { display: block; margin-top: 10px; font-size: 14px; font-weight: 700; }
.thumbnail[aria-current="true"] img { box-shadow: 0 0 0 4px var(--blue), 0 20px 42px rgba(18,59,132,.2); }

.notes { left: auto; width: min(720px, 100%); box-shadow: -24px 0 72px rgba(0,0,0,.28); }
.notes .panel-bar, .notes-body { max-width: 610px; }
.notes-body { margin: 0 auto; display: grid; gap: 22px; }
.notes label { display: grid; gap: 8px; }
.notes label > span { font-size: 20px; font-weight: 800; }
.notes label > small { color: #60749d; line-height: 1.5; }
.notes textarea { width: 100%; resize: vertical; padding: 14px 16px; border: 1px solid rgba(21,72,219,.18); border-radius: 14px; color: var(--navy); background: rgba(255,255,255,.82); line-height: 1.7; }
.notes textarea:focus { outline: 2px solid rgba(21,72,219,.28); border-color: var(--blue); }
.notes-actions { display: flex; align-items: center; gap: 18px; padding-top: 6px; }
.primary-button { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; color: white; background: linear-gradient(135deg, #1b54eb, #148fd3); cursor: pointer; }
.save-state { color: #6a7da0; font-size: 12px; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: calc(26px + var(--safe-bottom)); transform: translate(-50%, 20px); padding: 10px 16px; border-radius: 999px; color: var(--navy); background: white; box-shadow: 0 14px 34px rgba(0,0,0,.22); opacity: 0; pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
noscript { position: fixed; z-index: 90; inset: auto 16px 16px; padding: 12px; color: #111; background: white; }

body.immersive .reader { grid-template-rows: minmax(0, 1fr); }
body.immersive .reader-header, body.immersive .reader-footer { display: none; }
body.immersive .stage { padding: max(7px, var(--safe-top)) max(7px, var(--safe-right)) max(7px, var(--safe-bottom)) max(7px, var(--safe-left)); }
body.immersive .slide-frame { width: min(100%, calc((var(--viewport-height, 100svh) - 14px) * 16 / 9)); }

@media (max-width: 860px) {
  .reader-header { min-height: 54px; padding: calc(7px + var(--safe-top)) calc(8px + var(--safe-right)) 7px calc(8px + var(--safe-left)); }
  .brand-mark { width: 36px; height: 36px; }
  .brand-copy, #share-button { display: none; }
  .header-actions { gap: 5px; }
  .counter { min-width: 50px; font-size: 11px; }
  .quiet-button { min-height: 32px; padding: 0 10px; font-size: 12px; }
  .stage { grid-template-columns: minmax(0, 1fr); padding: 7px max(7px, var(--safe-right)) 7px max(7px, var(--safe-left)); }
  .slide-frame { width: min(100%, calc((var(--viewport-height, 100svh) - 126px) * 16 / 9)); }
  .nav-button { position: absolute; z-index: 8; top: 50%; width: 39px; height: 62px; transform: translateY(-50%); background: rgba(6,21,56,.36); backdrop-filter: blur(10px); }
  .nav-prev { left: max(5px, var(--safe-left)); }
  .nav-next { right: max(5px, var(--safe-right)); }
  .reader-footer { min-height: 58px; grid-template-columns: 1fr; padding-top: 5px; gap: 5px; }
  .progress-track { width: 78vw; }
  #slide-title { font-size: 11px; }
  .reader-help { display: none; }
  .overlay-panel { padding: calc(22px + var(--safe-top)) calc(16px + var(--safe-right)) calc(28px + var(--safe-bottom)) calc(16px + var(--safe-left)); }
  .thumbnail-grid { grid-template-columns: 1fr; gap: 22px; }
  .notes { width: 100%; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }