:root {
  color-scheme: dark;
  --accent: #25758a;
  --background: #183038;
  --surface: #f7f8f8;
  --toolbar-text: #fff;
  --page-ratio: 0.7795;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--background); }
[hidden] { display: none !important; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.loading-state { height: 100%; display: grid; place-content: center; justify-items: center; gap: 16px; color: #fff; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent), white 16%), var(--background) 64%); }
.loader { width: 36px; height: 36px; border: 3px solid #ffffff55; border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.app { height: 100%; display: grid; grid-template-rows: auto 1fr auto; color: var(--toolbar-text); background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--accent), transparent 54%), transparent 58%), var(--background); }
.toolbar { z-index: 20; min-height: 58px; display: flex; align-items: center; gap: 16px; padding: max(8px, env(safe-area-inset-top)) 14px 8px; background: color-mix(in srgb, var(--background), #000 20%); border-bottom: 1px solid #ffffff24; box-shadow: 0 4px 18px #0004; }
.brand-block { min-width: 190px; max-width: 340px; display: flex; align-items: center; gap: 10px; overflow: hidden; }
.brand-block div { min-width: 0; }
.brand-block strong, .brand-block span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-block #issue-date { font-size: .76rem; opacity: .72; margin-top: 2px; }
.brand-mark { color: var(--accent); font-size: 1.35rem; filter: brightness(1.35); }
.tool-group { display: flex; align-items: center; gap: 4px; }
.tool-group button, .panel-header button, .edge-control, .error-state button { min-width: 36px; min-height: 36px; border: 0; border-radius: 7px; background: transparent; color: inherit; cursor: pointer; }
.tool-group button:hover, .tool-group button[aria-expanded="true"], .panel-header button:hover { background: #ffffff20; }
.tool-group button:active { background: #ffffff35; }
.page-tools { margin-left: auto; }
.page-tools button { font-size: 1.65rem; line-height: 1; }
.page-jump { height: 34px; display: flex; align-items: center; gap: 5px; padding: 0 9px; border-radius: 7px; background: #0003; }
.page-jump input { width: 3.2em; border: 1px solid #ffffff48; border-radius: 5px; padding: 4px; text-align: center; color: #fff; background: #0002; }
.view-tools button { font-size: 1.05rem; }
#zoom-reset-button { min-width: 58px; font-size: .75rem; }
.reader-shell { min-height: 0; display: flex; position: relative; }
.side-panel { z-index: 15; width: min(360px, 88vw); height: 100%; flex: 0 0 auto; background: #f8fafb; color: #172329; box-shadow: 5px 0 24px #0006; }
.panel-header { display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 12px 0 18px; border-bottom: 1px solid #dbe1e3; }
.panel-header h2 { margin: 0; font-size: 1.05rem; }
.panel-header button { color: #172329; font-size: 1.6rem; }
.panel-body { height: calc(100% - 54px); padding: 12px; overflow: auto; }
.empty-panel { padding: 36px 16px; text-align: center; color: #52636b; }
.contents-list, .thumbnail-list, .search-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.contents-list button, .search-results button { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 10px 11px; text-align: left; border: 1px solid #dbe1e3; border-radius: 8px; color: #172329; background: #fff; cursor: pointer; }
.contents-list button:hover, .search-results button:hover, .thumbnail-list button:hover { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent), transparent 78%); }
.contents-list small, .search-results small { color: #66777e; }
.search-form { display: flex; gap: 6px; margin-bottom: 12px; }
.search-form input { min-width: 0; flex: 1; border: 1px solid #9cabaf; border-radius: 7px; padding: 9px; color: #172329; background: #fff; }
.search-form button { border: 0; border-radius: 7px; padding: 0 13px; color: #fff; background: var(--accent); cursor: pointer; }
.search-results button { display: block; }
.search-results strong { display: block; margin-bottom: 4px; }
.search-results span { display: block; line-height: 1.35; font-size: .84rem; color: #52636b; }
.search-results mark { color: inherit; background: #ffe274; }
.thumbnail-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.thumbnail-list button { width: 100%; padding: 7px; border: 1px solid #dbe1e3; border-radius: 8px; color: #172329; background: #fff; cursor: pointer; }
.thumbnail-list img { width: 100%; height: auto; display: block; border: 1px solid #cbd3d6; background: #edf0f1; }
.thumbnail-list span { display: block; margin-top: 5px; font-size: .78rem; }
.viewport { min-width: 0; min-height: 0; flex: 1; position: relative; overflow: hidden; touch-action: none; user-select: none; perspective: 2200px; }
.book { position: absolute; inset: 18px 54px; display: flex; align-items: center; justify-content: center; gap: 0; transform-origin: center; will-change: transform; }
.page { position: relative; height: min(calc(100vh - 134px), calc((100vw - 132px) / var(--spread-count) / var(--page-ratio))); aspect-ratio: var(--page-ratio); flex: 0 0 auto; overflow: hidden; container-type: size; background: #fff; box-shadow: 0 10px 35px #0008; user-select: text; }
.page:first-child:not(:only-child) { box-shadow: -10px 10px 32px #0007, inset -12px 0 16px -15px #0008; }
.page:last-child:not(:only-child) { box-shadow: 10px 10px 32px #0007, inset 12px 0 16px -15px #0008; }
.page img.page-image { display: block; width: 100%; height: 100%; object-fit: fill; background: linear-gradient(110deg, #eee 30%, #fafafa 45%, #eee 60%); }
.page-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #41545b; background: #eef1f2; }
.page-number { position: absolute; right: 7px; bottom: 5px; z-index: 4; padding: 2px 5px; border-radius: 4px; color: #fff; background: #0007; font-size: 11px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.page:hover .page-number { opacity: 1; }
.text-layer, .link-layer { position: absolute; inset: 0; }
.text-layer { z-index: 2; color: transparent; line-height: 1; cursor: text; user-select: text; }
.text-layer span { position: absolute; overflow: hidden; white-space: nowrap; color: rgba(0,0,0,.005); transform-origin: left top; }
.text-layer ::selection { color: transparent; background: rgba(55, 145, 255, .38); }
.link-layer { z-index: 3; pointer-events: none; }
.page-link { position: absolute; display: block; border-radius: 2px; background: transparent; pointer-events: auto; cursor: pointer; }
.page-link:hover, .page-link:focus-visible { background: #45a8ff30; box-shadow: inset 0 0 0 2px #45a8ff; }
.edge-control { position: absolute; z-index: 7; top: 50%; width: 42px; height: 74px; transform: translateY(-50%); border-radius: 12px; color: #fff; background: #0004; font-size: 2rem; }
.edge-control:hover { background: #0008; }
.edge-previous { left: 7px; }
.edge-next { right: 7px; }
.edge-control:disabled { opacity: .2; cursor: default; }
.flip-page { position: absolute; z-index: 10; overflow: hidden; backface-visibility: hidden; transform-style: preserve-3d; box-shadow: 0 10px 35px #0009; pointer-events: none; }
.flip-page img { width: 100%; height: 100%; display: block; }
.flip-next { transform-origin: left center; animation: flipNext .42s cubic-bezier(.33,.02,.28,1) forwards; }
.flip-previous { transform-origin: right center; animation: flipPrevious .42s cubic-bezier(.33,.02,.28,1) forwards; }
@keyframes flipNext { 0% { transform: rotateY(0); filter: brightness(1); } 65% { filter: brightness(.72); } 100% { transform: rotateY(-179deg); filter: brightness(.6); } }
@keyframes flipPrevious { 0% { transform: rotateY(0); filter: brightness(1); } 65% { filter: brightness(.72); } 100% { transform: rotateY(179deg); filter: brightness(.6); } }
.reader-status { min-height: 28px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 14px max(4px, env(safe-area-inset-bottom)); color: #ffffffba; background: #0003; font-size: .72rem; }
.error-state { position: absolute; z-index: 30; inset: 50% auto auto 50%; width: min(430px, calc(100% - 40px)); padding: 24px; transform: translate(-50%, -50%); border-radius: 12px; color: #172329; background: #fff; box-shadow: 0 14px 50px #0008; text-align: center; }
.error-state span { display: block; margin: 8px 0 18px; color: #52636b; }
.error-state button { padding: 7px 14px; color: #fff; background: var(--accent); }
@media (max-width: 950px) {
  .brand-block { max-width: 220px; min-width: 120px; }
  .panel-tools button { font-size: 0; }
  .panel-tools button::first-letter { font-size: 1rem; }
  .shortcut-hint { display: none; }
}
@media (max-width: 720px) {
  .toolbar { gap: 6px; padding-inline: 8px; }
  .brand-block { display: none; }
  .panel-tools button { font-size: 0; min-width: 32px; }
  #contents-button::after { content: "☷"; font-size: 1.2rem; }
  #thumbnails-button::after { content: "▦"; font-size: 1.05rem; }
  #search-button::after { content: "⌕"; font-size: 1.3rem; }
  .page-tools { margin-left: auto; }
  .view-tools #zoom-out-button, .view-tools #zoom-reset-button { display: none; }
  .book { inset: 12px 40px; }
  .page { height: min(calc(100vh - 120px), calc((100vw - 82px) / var(--page-ratio))); }
  .edge-control { width: 34px; height: 58px; }
  .edge-previous { left: 3px; }
  .edge-next { right: 3px; }
}
@media (max-height: 520px) {
  .toolbar { min-height: 46px; }
  .book { inset-block: 7px; }
  .page { height: calc(100vh - 87px); }
  .reader-status { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}