:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #15171b; color: #f5f6f8; } * { box-sizing: border-box; } body { margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden; background: #15171b; } button { min-width: 44px; min-height: 44px; border: 1px solid #373c45; border-radius: .42rem; background: #22262d; color: #f5f6f8; font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } button:hover { background: #303641; } button:focus-visible, input:focus-visible { outline: 3px solid #ffd52f; outline-offset: 2px; } button:disabled { color: #666c76; cursor: not-allowed; opacity: .55; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.viewer { min-height: 100svh; display: flex; flex-direction: column; } .topbar { min-height: 48px; padding: 0 .9rem; display: flex; align-items: center; justify-content: flex-start; border-bottom: 1px solid #2b3038; background: #1b1e24; } .topbar h1 { margin: 0; color: #f7f8fa; font-size: .95rem; font-weight: 700; letter-spacing: .02em; } .icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.book-stage { flex: 1; display: grid; place-items: center; min-height: 0; padding: .5rem .6rem; } .book-shell { width: 100%; max-width: 1280px; overflow: auto; padding: .25rem; display: grid; place-items: center; } .book-shell.is-zoomed { place-items: start; overscroll-behavior: contain; touch-action: pan-x pan-y; } .book-shell.is-zoomed .book-viewport { transform-origin: top left; } .book-shell.is-zoomed .flipbook, .book-shell.is-zoomed .fallback-viewer { pointer-events: none; } .book-viewport { width: min(100%, 1240px); transform-origin: center center; transition: transform .2s ease; filter: drop-shadow(0 10px 16px rgb(0 0 0 / .34)); } .flipbook, .fallback-viewer { display: block; width: min(100%, 1240px); min-width: 260px; min-height: 363px; aspect-ratio: 573 / 800; background: #fff; overflow: hidden; } .fallback-viewer[hidden] { display: none; }.fallback-viewer img { display: block; width: 100%; height: 100%; object-fit: contain;}.book-shell.is-loading::before { content: "Loading brochure…"; color: #cbd0d8; font-size: .82rem; }.page { background: #fff; overflow: hidden; user-select: none; }.page-image { width: 100%; height: 100%; display: block; object-fit: contain; background: #fff; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.controls { width: 100%; padding: .45rem .65rem max(.55rem, env(safe-area-inset-bottom)); border-top: 1px solid #2b3038; background: #1b1e24; display: grid; gap: .35rem; } .page-navigation, .tool-navigation { display: flex; align-items: center; justify-content: center; gap: .35rem; }.page-navigation output { min-width: 5.6rem; text-align: center; color: #f5f6f8; font-size: .9rem; font-variant-numeric: tabular-nums; }.progress { display: block; width: min(100%, 680px); margin: 0 auto; }.progress input { width: 100%; accent-color: #ffd52f; cursor: pointer; }.tool-navigation { grid-row: 4; justify-content: space-around; max-width: 360px; margin: 0 auto; }.tool-navigation .icon-button { border-color: transparent; background: transparent; }.tool-navigation .icon-button:hover { background: #2b3038; }
.zoom-panel[hidden] { display: none; }.zoom-panel { grid-row: 3; width: min(100%, 250px); min-height: 48px; justify-self: center; padding: .2rem; display: grid; grid-template-columns: 42px 1fr 42px auto; align-items: center; gap: .25rem; border: 1px solid #3a404a; border-radius: .4rem; background: #252a31; }.zoom-panel button { min-width: 40px; min-height: 40px; border-color: transparent; background: transparent; }.zoom-panel output { display: grid; place-items: center; font-size: .84rem; font-variant-numeric: tabular-nums; }.zoom-panel #zoom-reset { padding: 0 .5rem; min-width: 52px; font-size: .76rem; }
.thumbnail-panel[hidden] { display: none; }.thumbnail-panel { position: fixed; z-index: 10; inset: 0; display: grid; align-items: end; background: rgb(0 0 0 / .58); }.thumbnail-panel__sheet { max-height: min(75svh, 680px); display: grid; grid-template-rows: auto minmax(0, 1fr); border-top: 1px solid #414752; border-radius: .8rem .8rem 0 0; background: #20242b; }.thumbnail-panel__sheet header { min-height: 52px; padding: .35rem .7rem .35rem 1rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #353b45; }.thumbnail-panel h2 { margin: 0; font-size: .95rem; }.thumbnail-grid { overflow: auto; padding: .75rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }.thumbnail { min-width: 0; min-height: 0; padding: 0; display: grid; gap: .25rem; border-color: #454b56; background: #17191e; overflow: hidden; }.thumbnail[aria-current="page"] { border-color: #ffd52f; box-shadow: 0 0 0 1px #ffd52f; }.thumbnail img { width: 100%; height: auto; aspect-ratio: 573 / 800; object-fit: cover; background: #fff; }.thumbnail span { padding: 0 .25rem .3rem; font-size: .72rem; }
@media (min-width: 641px) { .topbar { min-height: 54px; padding-inline: clamp(1rem, 4vw, 3rem); }.topbar h1 { font-size: 1.05rem; }.book-stage { padding: .6rem 1rem; }.book-shell { padding: .5rem; }.controls { padding-inline: clamp(1rem, 4vw, 3rem); }.thumbnail-panel { align-items: center; justify-items: center; }.thumbnail-panel__sheet { width: min(880px, 92vw); max-height: min(78svh, 720px); border: 1px solid #414752; border-radius: .8rem; }.thumbnail-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (max-width: 640px) { .book-stage { flex: 0; place-items: start center; padding-top: .5rem; } }