:root {
  --orange: #f05924;
  --ink: #15191a;
  --panel: rgba(28, 32, 32, 0.92);
  --muted: #9da5a4;
  --page-ratio: 0.461538;
  --turn-duration: 440ms;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #343a39 0, #1d2121 42%, #101313 100%);
  color: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, a { font: inherit; }
.app { min-height: 100%; display: grid; grid-template-rows: 64px minmax(0, 1fr) auto; isolation: isolate; }
.brandbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 3vw, 42px); border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(13,16,16,.72); backdrop-filter: blur(18px); z-index: 10;
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--orange); font-weight: 750; letter-spacing: .08em; text-decoration: none; }
.brand-mark { width: 25px; height: 25px; border: 7px solid var(--orange); border-right-color: transparent; transform: rotate(45deg); }
.brandbar-note { color: var(--muted); font-size: 11px; letter-spacing: .18em; }
.viewer { min-height: 0; display: grid; place-items: center; padding: 18px 24px; overflow: hidden; }
.book-viewport { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; touch-action: pan-y; }
.book-stage {
  position: relative; width: min(92vw, calc((100vh - 190px) * var(--page-ratio)));
  aspect-ratio: var(--page-ratio) / 1; transform-origin: center;
  perspective: 1800px; transition: transform 180ms ease; user-select: none;
}
.book-view {
  position: absolute; inset: 0; display: flex; align-items: stretch; justify-content: center;
}
.book-view.is-next { visibility: hidden; }
.page { position: relative; width: 100%; min-width: 0; overflow: hidden; background: #b9cdcc; border-radius: 5px; box-shadow: 0 24px 38px rgba(0,0,0,.42); backface-visibility: hidden; }
.page img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.page-link { position: absolute; z-index: 2; border-radius: 4px; }
.page-link:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; background: rgba(240,89,36,.14); }
.page-link.phone { left: 6%; top: 54%; width: 57%; height: 3.3%; }
.page-link.email { left: 6%; top: 57.2%; width: 46%; height: 2.8%; }
.page-link.website { left: 6%; top: 60%; width: 33%; height: 2.8%; }
.edge { position: absolute; z-index: 7; top: 0; bottom: 0; width: 13%; border: 0; background: transparent; cursor: pointer; }
.edge-prev { left: 0; cursor: w-resize; }
.edge-next { right: 0; cursor: e-resize; }
.edge:focus-visible { outline: 2px solid var(--orange); outline-offset: -4px; }
.book-stage.turn-forward .is-next,
.book-stage.turn-backward .is-next { visibility: visible; }
.book-stage.turn-forward .is-current,
.book-stage.turn-backward .is-current { z-index: 1; }
.book-stage.turn-forward .is-current .page {
  transform-origin: left center;
  animation: turnForward var(--turn-duration) cubic-bezier(.45,.02,.2,1) both;
}
.book-stage.turn-backward .is-current .page {
  transform-origin: right center;
  animation: turnBackward var(--turn-duration) cubic-bezier(.45,.02,.2,1) both;
}
@keyframes turnForward {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-100deg); }
}
@keyframes turnBackward {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(100deg); }
}
.toolbar {
  justify-self: center; margin: 0 12px max(14px, env(safe-area-inset-bottom)); min-height: 58px;
  max-width: calc(100vw - 24px); display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: var(--panel);
  box-shadow: 0 12px 35px rgba(0,0,0,.34); backdrop-filter: blur(18px); z-index: 20;
}
.toolbar-group { display: flex; gap: 6px; align-items: center; }
.tool {
  min-width: 40px; height: 40px; display: inline-grid; place-items: center; padding: 0 10px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.055);
  color: #fff; text-decoration: none; cursor: pointer; transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.tool:hover { background: rgba(240,89,36,.18); border-color: rgba(240,89,36,.55); }
.tool:active { transform: translateY(1px); }
.tool:disabled { opacity: .3; cursor: default; }
.tool:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.zoom-value { min-width: 64px; font-size: 12px; color: #d9dddc; }
.tool-download { color: var(--orange); font-size: 12px; font-weight: 750; letter-spacing: .08em; }
.page-status { min-width: 260px; text-align: center; color: #e6e9e8; font-size: 13px; white-space: nowrap; }
.toolbar-divider { width: 1px; height: 28px; background: rgba(255,255,255,.1); }
.book-viewport.is-zoomed { cursor: grab; touch-action: none; }
.book-viewport.is-dragging { cursor: grabbing; }
@media (max-width: 720px) {
  .app { grid-template-rows: 52px minmax(0,1fr) auto; }
  .brandbar { padding-inline: 16px; }
  .brand { font-size: 13px; }
  .brand-mark { width: 20px; height: 20px; border-width: 5px; }
  .brandbar-note { display: none; }
  .viewer { padding: 10px; }
  .book-stage { width: min(94vw, calc((100vh - 176px) * var(--page-ratio))); aspect-ratio: var(--page-ratio) / 1; }
  .edge { width: 24%; }
  .toolbar { width: calc(100vw - 20px); overflow-x: auto; justify-content: flex-start; gap: 6px; border-radius: 13px; scrollbar-width: none; }
  .toolbar::-webkit-scrollbar { display: none; }
  .page-status { min-width: 150px; font-size: 11px; }
  .toolbar-divider { display: none; }
  .tool { min-width: 38px; height: 38px; padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --turn-duration: 1ms; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}