:root {
  color-scheme: dark;
  --ink: #0b0b0c;
  --paper: #ede8df;
  --line: rgba(255, 255, 255, .16);
  --muted: rgba(237, 232, 223, .58);
  --accent: #e3ff61;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow: clip; overscroll-behavior: none; }
body { background: var(--ink); color: var(--paper); font-family: Outfit, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button { font: inherit; }

.reader { position: fixed; inset: 0; min-width: 0; height: 100dvh; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; overflow: clip; background: radial-gradient(circle at 50% 30%, #252521 0%, #111111 37%, #090909 72%); }
.ambient { position: absolute; z-index: -1; width: 46vmax; aspect-ratio: 1; border-radius: 50%; filter: blur(100px); opacity: .13; pointer-events: none; }
.ambient--one { left: -16%; top: -25%; background: #d9ff6c; }
.ambient--two { right: -22%; bottom: -40%; background: #695eff; }

.topbar { min-width: 0; height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 3.5vw, 56px); border-bottom: 1px solid var(--line); background: rgba(10, 10, 10, .5); backdrop-filter: blur(18px); }
.topbar__actions { display: flex; align-items: center; gap: 22px; }
.company-name { margin: 0 0 0 auto; color: var(--paper); font-size: 13px; font-weight: 600; letter-spacing: .08em; white-space: nowrap; }
.chapter-nav { display: flex; align-items: center; gap: 5px; padding-right: 18px; border-right: 1px solid var(--line); }
.chapter-link { height: 24px; padding: 0 7px; white-space: nowrap; cursor: pointer; color: var(--muted); border: 1px dashed var(--muted); border-radius: 12px; background: transparent; font-family: "DM Mono", monospace; font-size: 9px; font-style: italic; font-weight: 500; letter-spacing: .035em; text-transform: uppercase; transition: color .2s, border-color .2s, background .2s; }
.chapter-link.is-active { color: var(--accent); border-style: solid; border-color: var(--accent); }
.chapter-link:hover, .chapter-link:focus-visible { color: var(--ink); border-color: var(--accent); border-style: solid; background: var(--accent); outline: none; }
.page-counter { display: flex; align-items: baseline; gap: 9px; font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .08em; }
.page-counter b { color: var(--accent); font-weight: 500; }
.page-counter i { width: 20px; height: 1px; display: block; background: var(--line); transform: rotate(-55deg); }
.page-counter span { color: var(--muted); }
.icon-button, .nav-button { cursor: pointer; color: var(--paper); border: 0; background: none; }
.icon-button { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid var(--line); border-radius: 50%; transition: background .2s, color .2s; }
.icon-button:hover { background: var(--paper); color: var(--ink); }
.icon-button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.stage { min-width: 0; min-height: 0; position: relative; display: grid; place-items: center; padding: 26px clamp(22px, 8vw, 150px) 18px; touch-action: pan-y; }
.reader.is-fullscreen-reading .stage { touch-action: none; }
@media (max-width: 950px) { .stage { touch-action: none; } }
.spread { position: relative; display: grid; max-width: 100%; max-height: 100%; margin: 0; }
.page-picture { display: grid; max-width: 100%; max-height: 100%; }
.page-image { max-width: 100%; max-height: calc(100dvh - 220px); display: block; object-fit: contain; border-radius: 2px; box-shadow: 0 26px 80px rgba(0, 0, 0, .42), 0 1px 0 rgba(255, 255, 255, .25) inset; opacity: 1; transition: opacity .22s ease, transform .28s cubic-bezier(.2,.7,.2,1); user-select: none; -webkit-user-drag: none; }
.page-image.is-loading { opacity: .12; transform: scale(.987); }
.page-shadow { position: absolute; inset: 4% 4% 0; z-index: -1; background: #000; filter: blur(34px); opacity: .7; }
.page-loader { display: none; place-items: center; grid-auto-flow: column; gap: 5px; position: absolute; inset: 0; }
.page-loader.is-visible { display: grid; }
.page-loader span { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: pulse 1s ease-in-out infinite; }
.page-loader span:nth-child(2) { animation-delay: .14s; }.page-loader span:nth-child(3) { animation-delay: .28s; }
.page-status { position: absolute; inset: auto 0 50%; margin: 0; color: var(--paper); font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .04em; text-align: center; text-shadow: 0 1px 8px #000; }
@keyframes pulse { 0%,100%{transform:scale(.55);opacity:.35} 50%{transform:scale(1);opacity:1} }

.nav-button { position: absolute; z-index: 2; top: 50%; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 1px solid transparent; transform: translateY(-50%); opacity: .7; transition: opacity .2s, border-color .2s, background .2s; }
.nav-button:hover:not(:disabled) { opacity: 1; border-color: var(--line); background: rgba(255,255,255,.07); }.nav-button:disabled { opacity: .12; cursor: default; }
.nav-button--previous { left: clamp(8px, 2.2vw, 36px); }.nav-button--next { right: clamp(8px, 2.2vw, 36px); }
.nav-button svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.hint { position: absolute; bottom: 3px; margin: 0; color: var(--muted); font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .06em; }.hint kbd { color: var(--paper); border: 1px solid var(--line); border-radius: 3px; padding: 1px 4px; margin-right: 3px; font: inherit; }.hint span { margin-left: 5px; }

.filmstrip-wrap { min-width: 0; position: relative; padding: 0 clamp(20px, 3.5vw, 56px) 18px; border-top: 1px solid var(--line); background: rgba(10,10,10,.44); backdrop-filter: blur(18px); }
.filmstrip-toggle { height: 31px; padding: 0; cursor: pointer; background: none; border: 0; color: var(--muted); font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }.filmstrip-toggle:hover { color: var(--paper); }.filmstrip-toggle span { display:inline-block; width: 6px; height: 6px; margin: 0 0 2px 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .2s; }.filmstrip-toggle[aria-expanded="false"] span { transform: rotate(225deg) translate(-2px,-2px); }
.filmstrip { min-width: 0; display: flex; gap: 8px; overflow-x: auto; padding: 1px 0 2px; scrollbar-width: thin; scrollbar-color: #555 transparent; }.filmstrip[hidden] { display: none; }
.thumbnail { position: relative; flex: 0 0 116px; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; cursor: pointer; border: 1px solid transparent; background: #222; border-radius: 2px; opacity: .5; transition: opacity .2s, transform .2s, border-color .2s; }.thumbnail:hover { opacity: .9; transform: translateY(-2px); }.thumbnail.is-active { border-color: var(--accent); opacity: 1; }.thumbnail img { width: 100%; height: 100%; display: block; object-fit: cover; }.thumbnail span { position: absolute; right: 5px; bottom: 4px; color: #fff; font-family: "DM Mono", monospace; font-size: 9px; text-shadow: 0 1px 4px #000; }
.mobile-navigation { display: none; }
.mobile-fullscreen-button { display: grid; flex: 0 0 30px; width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; place-items: center; aspect-ratio: 1; cursor: pointer; color: var(--paper); border: 1px solid var(--line); border-radius: 50%; background: rgba(10,10,10,.45); -webkit-appearance: none; appearance: none; line-height: 1; }.mobile-fullscreen-button svg { display: block; flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }.mobile-fullscreen-copy { display: none; font-style: normal; }
.fullscreen-notice { position: fixed; z-index: 10; right: 18px; bottom: max(24px, env(safe-area-inset-bottom)); left: 18px; margin: 0; padding: 11px 14px; color: var(--paper); border: 1px solid rgba(227,255,97,.55); border-radius: 6px; background: rgba(10,10,10,.94); box-shadow: 0 12px 30px rgba(0,0,0,.34); font-size: 13px; line-height: 1.45; text-align: center; }

@media (max-width: 680px) and (orientation: portrait) { .topbar { height: 46px; padding: 0 18px; justify-content: center; }.topbar__actions { display: none; }.company-name { margin: 0; font-size: 12px; letter-spacing: .05em; }.stage { padding: 14px 8px 10px; touch-action: none; }.page-image { max-height: calc(100dvh - 208px); border-radius: 0; }.nav-button { width: 43px; height: 64px; top: auto; bottom: 8px; transform: none; opacity: .45; }.nav-button--previous { left: 5px; }.nav-button--next { right: 5px; }.nav-button svg { width: 18px; }.hint { display: none; }.filmstrip-wrap { padding: 0 18px 11px; }.mobile-navigation { display: flex; align-items: center; gap: 10px; min-width: 0; height: 41px; }.mobile-chapter-nav { min-width: 0; display: flex; align-items: center; gap: 5px; overflow-x: auto; scrollbar-width: none; }.mobile-chapter-nav::-webkit-scrollbar { display: none; }.chapter-link { flex: 0 0 auto; height: 30px; padding: 0 6px; font-size: 7px; letter-spacing: .01em; animation: chapter-invite 5.6s ease-in-out infinite; }.mobile-chapter-nav .chapter-link:nth-child(2) { animation-delay: .28s; }.mobile-chapter-nav .chapter-link:nth-child(3) { animation-delay: .56s; }.mobile-chapter-nav .chapter-link:nth-child(4) { animation-delay: .84s; }.filmstrip-toggle { height: 27px; }.mobile-fullscreen-copy { display: inline; color: var(--accent); }.thumbnail { flex-basis: 93px; }.filmstrip { gap: 6px; } }
@keyframes chapter-invite { 0%, 72%, 100% { box-shadow: none; transform: translateY(0); } 78% { box-shadow: 0 0 0 3px rgba(227,255,97,.12); transform: translateY(-2px); } 84% { transform: translateY(0); } }
@media (max-width: 950px) and (orientation: landscape) { .reader { display: block; }.topbar { position: fixed; z-index: 4; top: 0; right: 0; left: 0; height: 45px; padding: 0 18px; border: 0; background: linear-gradient(to bottom, rgba(8,8,8,.82), transparent); backdrop-filter: none; transition: opacity .25s ease, transform .25s ease; }.topbar__actions { flex: 1 1 auto; justify-content: center; }.company-name { margin-left: 14px; font-size: 11px; letter-spacing: .04em; }.topbar__actions > .page-counter, .topbar__actions > .icon-button { display: none; }.chapter-nav { position: fixed; z-index: 5; left: max(20px, env(safe-area-inset-left)); top: 50%; flex-direction: column; align-items: flex-start; gap: 7px; padding: 0; border: 0; transform: translateY(-50%); }.chapter-link { height: 23px; padding: 0 6px; font-size: 8px; }.stage { height: 100dvh; padding: 12px 48px; touch-action: none; }.page-image { max-height: calc(100dvh - 24px); border-radius: 0; }.nav-button { width: 42px; height: 58px; }.nav-button--previous { left: 3px; }.nav-button--next { right: 3px; }.hint { display: none; }.filmstrip-wrap { position: fixed; z-index: 4; right: 0; bottom: 0; left: 0; padding: 0 18px 8px; border: 0; background: linear-gradient(to top, rgba(8,8,8,.86), transparent); backdrop-filter: none; transition: opacity .25s ease, transform .25s ease; }.mobile-navigation { display: none; }.filmstrip-toggle { height: 23px; }.thumbnail { flex-basis: 76px; }.filmstrip { gap: 5px; padding-bottom: 0; }.reader.controls-hidden .topbar { opacity: 0; transform: translateY(-12px); pointer-events: none; }.reader.controls-hidden .filmstrip-wrap { opacity: 0; transform: translateY(12px); pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }