@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/be-vietnam-pro-400.ttf") format("truetype");
}

@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/be-vietnam-pro-500.ttf") format("truetype");
}

@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/be-vietnam-pro-600.ttf") format("truetype");
}

@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/be-vietnam-pro-700.ttf") format("truetype");
}

@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/be-vietnam-pro-800.ttf") format("truetype");
}

@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/dm-serif-display-400.ttf") format("truetype");
}

:root {
  color-scheme: light;
  /* Kim Gia Film Face Paper brand palette: black · khaki brown · orange. */
  --brand-black: #0a0a08;
  --brand-brown: #665635;
  --brand-brown-light: #a18b61;
  --brand-orange: #f66e24;
  --brand-orange-light: #ffad72;
  --brand-cream: #fff8ed;
  --ink: var(--brand-cream);
  --muted: rgba(255, 248, 237, 0.6);
  --paper: #10100e;
  --surface: rgba(25, 22, 17, 0.92);
  --line: rgba(255, 255, 255, 0.1);
  --chrome: var(--brand-black);
  --chrome-soft: #272218;
  --gold: var(--brand-orange);
  --gold-light: var(--brand-orange-light);
  --brand-sage: #d8c9a9;
  --brand-copper: var(--brand-orange);
  --brand-ink: var(--brand-cream);
  --font-sans: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.46), 0 7px 24px rgba(0, 0, 0, 0.28);
  font-family: var(--font-sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}

button,
input {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

audio {
  display: none;
}

.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 42%, rgba(246, 110, 36, 0.17), transparent min(34rem, 72vw)),
    radial-gradient(circle at 16% 88%, rgba(102, 86, 53, 0.22), transparent 28rem),
    linear-gradient(145deg, #17140f 0%, #080907 62%, #120e0a 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity 560ms cubic-bezier(0.22, 0.72, 0.24, 1), visibility 0s linear 560ms;
}

.splash-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.32;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

.splash-screen::after {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 39%, rgba(255, 218, 174, 0.07) 48%, transparent 57%);
  transform: translateX(-45%) rotate(8deg);
  animation: splashSweep 3.8s ease-in-out 0.4s infinite;
}

.splash-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-panel {
  position: relative;
  display: grid;
  justify-items: center;
  width: min(440px, calc(100vw - 42px));
  min-height: 340px;
  padding: 43px 30px 35px;
  overflow: hidden;
  border: 1px solid rgba(246, 110, 36, 0.38);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 248, 237, 0.08), rgba(255, 255, 255, 0.02) 48%, rgba(246, 110, 36, 0.055)),
    rgba(10, 10, 8, 0.72);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(255, 255, 255, 0.045) inset,
    0 0 70px rgba(246, 110, 36, 0.12);
  backdrop-filter: blur(18px);
  animation: splashPanelIn 900ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.splash-panel::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 248, 237, 0.1);
  border-radius: 20px;
  pointer-events: none;
}

.splash-kicker,
.splash-caption,
.splash-title {
  position: relative;
  z-index: 1;
  margin: 0;
}

.splash-kicker {
  color: var(--brand-orange-light);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  animation: splashItemIn 700ms 120ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.splash-logo-shell {
  position: relative;
  display: grid;
  place-items: center;
  width: min(270px, 68vw);
  height: 88px;
  margin: 24px 0 23px;
  padding: 10px 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 13px;
  background: rgba(255, 248, 237, 0.97);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.32), 0 0 30px rgba(246, 110, 36, 0.15);
  animation: splashLogoIn 900ms 230ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.splash-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.splash-logo-glow {
  position: absolute;
  inset: -22px 13%;
  border-radius: 50%;
  background: rgba(246, 110, 36, 0.3);
  filter: blur(25px);
  animation: splashGlow 2.4s ease-in-out 0.5s infinite;
}

.splash-rule {
  position: relative;
  width: min(250px, 64vw);
  height: 1px;
  margin-bottom: 17px;
  overflow: hidden;
  background: rgba(255, 248, 237, 0.16);
  animation: splashItemIn 700ms 380ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.splash-rule span {
  display: block;
  width: 34%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--brand-orange), transparent);
  animation: splashRule 1.8s ease-in-out 0.7s infinite;
}

.splash-title {
  color: var(--brand-cream);
  font-family: var(--font-display);
  font-size: clamp(25px, 6vw, 34px);
  letter-spacing: 0.015em;
  animation: splashItemIn 700ms 470ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.splash-loader {
  width: min(200px, 54vw);
  height: 3px;
  margin-top: 26px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 248, 237, 0.12);
  animation: splashItemIn 700ms 540ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.splash-loader span {
  display: block;
  width: 45%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-brown-light), var(--brand-orange-light));
  box-shadow: 0 0 12px rgba(246, 110, 36, 0.55);
  animation: splashLoad 1.5s cubic-bezier(0.32, 0, 0.2, 1) 0.65s infinite;
}

.splash-caption {
  margin-top: 12px;
  color: rgba(255, 248, 237, 0.56);
  font-size: 11px;
  letter-spacing: 0.08em;
  animation: splashItemIn 700ms 590ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.splash-orbit {
  position: absolute;
  width: min(72vw, 560px);
  aspect-ratio: 1;
  border: 1px solid rgba(246, 110, 36, 0.12);
  border-radius: 50%;
  pointer-events: none;
}

.splash-orbit-one {
  transform: rotate(23deg) scaleY(0.35);
  animation: splashOrbitOne 12s linear infinite;
}

.splash-orbit-two {
  width: min(90vw, 700px);
  border-color: rgba(216, 201, 169, 0.08);
  transform: rotate(-28deg) scaleY(0.26);
  animation: splashOrbitTwo 15s linear infinite reverse;
}

@keyframes splashPanelIn {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes splashItemIn {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes splashLogoIn {
  from { opacity: 0; transform: translateY(14px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes splashGlow {
  0%, 100% { opacity: 0.38; transform: scale(0.9); }
  50% { opacity: 0.7; transform: scale(1.06); }
}

@keyframes splashRule {
  from { transform: translateX(-140%); }
  to { transform: translateX(330%); }
}

@keyframes splashLoad {
  0% { transform: translateX(-120%); }
  65%, 100% { transform: translateX(340%); }
}

@keyframes splashSweep {
  0%, 22% { transform: translateX(-65%) rotate(8deg); }
  70%, 100% { transform: translateX(65%) rotate(8deg); }
}

@keyframes splashOrbitOne {
  from { transform: rotate(23deg) scaleY(0.35); }
  to { transform: rotate(383deg) scaleY(0.35); }
}

@keyframes splashOrbitTwo {
  from { transform: rotate(-28deg) scaleY(0.26); }
  to { transform: rotate(332deg) scaleY(0.26); }
}

.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;
}

.app-shell {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100dvh;
  min-height: 420px;
  background:
    radial-gradient(circle at 13% 17%, rgba(246, 110, 36, 0.12), transparent 24rem),
    radial-gradient(circle at 88% 76%, rgba(102, 86, 53, 0.2), transparent 28rem),
    linear-gradient(145deg, #1b1913 0%, #0a0a08 58%, #17130e 100%);
}

.topbar {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr);
  align-items: center;
  gap: 20px;
  min-height: 72px;
  padding: 12px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 10, 8, 0.9);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(22px);
}

.catalog-controls {
  position: relative;
  z-index: 28;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  grid-template-areas:
    "main actions"
    "categories categories";
  gap: 10px 18px;
  padding: 12px 24px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(17, 15, 11, 0.82);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(24px);
}

.controls-main {
  grid-area: main;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.catalog-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(560px, 100%);
  min-width: 0;
  height: 42px;
  padding: 0 11px 0 14px;
  border: 1px solid rgba(242, 212, 154, 0.18);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.075);
  color: rgba(255, 255, 255, 0.58);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.catalog-search:focus-within {
  border-color: rgba(246, 110, 36, 0.78);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 0 0 4px rgba(246, 110, 36, 0.13);
}

.catalog-search svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.catalog-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--brand-ink);
  font-size: 13px;
}

.catalog-search input::placeholder {
  color: rgba(248, 243, 232, 0.5);
}

.catalog-search kbd {
  flex: none;
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  color: rgba(248, 243, 232, 0.5);
  font-family: inherit;
  font-size: 10px;
}

.search-summary {
  flex: none;
  color: rgba(248, 243, 232, 0.54);
  font-size: 11px;
  white-space: nowrap;
}

.controls-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 7px;
}

.control-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(248, 243, 232, 0.78);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.control-button:hover,
.control-button:focus-visible,
.control-button[aria-pressed="true"] {
  outline: none;
  border-color: rgba(246, 110, 36, 0.52);
  background: rgba(246, 110, 36, 0.16);
  color: var(--brand-orange-light);
}

.control-button:active {
  transform: translateY(1px) scale(0.98);
}

.control-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.control-button-primary {
  border-color: rgba(255, 173, 114, 0.66);
  background: linear-gradient(135deg, var(--brand-orange), #d95111);
  color: #fff8ed;
  box-shadow: 0 8px 18px rgba(246, 110, 36, 0.23);
}

.control-button-primary:hover,
.control-button-primary:focus-visible {
  border-color: #ffd0ad;
  background: linear-gradient(135deg, #ff8543, var(--brand-orange));
  color: #fff8ed;
}

.category-tree {
  grid-area: categories;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.category-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  color: var(--brand-sage);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.category-dot {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(216, 201, 169, 0.78);
  border-radius: 50%;
  background: var(--brand-sage);
  box-shadow: 0 0 0 4px rgba(216, 201, 169, 0.1);
}

.category-list {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.category-list::-webkit-scrollbar {
  display: none;
}

.category-button {
  flex: none;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(248, 243, 232, 0.62);
  font-size: 11px;
  cursor: pointer;
  transition: all 160ms ease;
}

.category-button:hover,
.category-button:focus-visible,
.category-button.is-active {
  outline: none;
  border-color: rgba(246, 110, 36, 0.62);
  background: rgba(246, 110, 36, 0.16);
  color: var(--brand-orange-light);
}

.search-results {
  position: absolute;
  top: calc(100% - 3px);
  left: 24px;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 7px;
  width: min(620px, calc(100vw - 48px));
  max-height: min(360px, 55vh);
  padding: 10px;
  overflow-y: auto;
  border: 1px solid rgba(242, 212, 154, 0.2);
  border-radius: 14px;
  background: rgba(12, 19, 15, 0.97);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(18px);
}

.search-results.is-hidden {
  display: none;
}

.search-result {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--brand-ink);
  text-align: left;
  cursor: pointer;
}

.search-result:hover,
.search-result:focus-visible {
  outline: none;
  border-color: rgba(246, 110, 36, 0.46);
  background: rgba(246, 110, 36, 0.12);
}

.search-result img {
  width: 40px;
  height: 48px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  object-fit: cover;
}

.search-result-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.search-result-copy strong {
  overflow: hidden;
  color: var(--brand-ink);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-copy span {
  overflow: hidden;
  color: var(--brand-sage);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-empty {
  grid-column: 1 / -1;
  padding: 16px;
  color: rgba(248, 243, 232, 0.6);
  font-size: 12px;
  text-align: center;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: max-content;
}

.brand-logo-wrap {
  display: grid;
  place-items: center;
  width: 184px;
  height: 47px;
  padding: 4px 8px;
  border: 1px solid rgba(246, 110, 36, 0.38);
  border-radius: 9px 3px 9px 3px;
  background: var(--brand-cream);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(102, 86, 53, 0.12);
}

.brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px 5px 12px 5px;
  border: 1px solid rgba(246, 110, 36, 0.36);
  background: linear-gradient(145deg, #2b2519, #10100d);
  color: var(--brand-orange-light);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.brand-copy {
  display: none;
  line-height: 1.05;
}

.brand-copy strong {
  color: var(--brand-orange-light);
  font-size: 11px;
  letter-spacing: 0.13em;
}

.brand-copy small {
  margin-top: 5px;
  color: rgba(216, 201, 169, 0.72);
  font-size: 11px;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px;
  border: 1px solid rgba(246, 110, 36, 0.22);
  border-radius: 999px;
  background: rgba(24, 33, 28, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 10px 30px rgba(0, 0, 0, 0.28);
}

.icon-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.74);
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.icon-button:hover:not(:disabled),
.icon-button:focus-visible,
.icon-button[aria-pressed="true"],
.icon-button[aria-expanded="true"] {
  outline: none;
  background: rgba(246, 110, 36, 0.18);
  color: var(--brand-orange-light);
}

.icon-button:active:not(:disabled) {
  transform: scale(0.92);
}

.icon-button:disabled {
  color: rgba(255, 255, 255, 0.22);
  cursor: default;
}

.icon-button svg,
.edge-button svg,
.swipe-hint svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.toolbar-separator {
  width: 1px;
  height: 20px;
  margin: 0 3px;
  background: rgba(255, 255, 255, 0.12);
}

.pause-icon {
  display: none;
}

.sound-on-icon {
  display: none;
}

#autoPlay[aria-pressed="true"] .play-icon {
  display: none;
}

#autoPlay[aria-pressed="true"] .pause-icon {
  display: block;
}

#soundToggle[aria-pressed="true"] .sound-off-icon {
  display: none;
}

#soundToggle[aria-pressed="true"] .sound-on-icon {
  display: block;
}

.page-jump {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 154px;
  padding: 5px 5px 5px 14px;
  border: 1px solid rgba(246, 110, 36, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--muted);
  font-size: 13px;
}

.page-jump input {
  width: 34px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--brand-cream);
  font-weight: 700;
  text-align: right;
  appearance: textfield;
}

.page-jump input::-webkit-inner-spin-button,
.page-jump input::-webkit-outer-spin-button {
  appearance: none;
}

.page-jump button {
  margin-left: auto;
  padding: 8px 13px;
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: #fff8ed;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.viewer {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 72px;
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 36px 36px;
}

.stage {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 24px 12px;
  overflow: auto;
  /* Keep zoom/pan support without showing browser scrollbars on desktop. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
  perspective: 1800px;
  touch-action: pan-y pinch-zoom;
}

.stage::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.stage::before {
  content: "";
  position: absolute;
  inset: 7% 9%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(ellipse, rgba(246, 110, 36, 0.16), rgba(102, 86, 53, 0.08) 36%, transparent 68%);
  filter: blur(30px);
}

.stage.has-page-turn {
  overflow: hidden;
}

.stage.is-flipping {
  overflow: hidden;
}

.spread {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  height: calc(100dvh - 190px);
  max-height: calc(100% - 56px);
  transform: scale(var(--zoom, 1));
  transform-origin: center;
  transition: transform 180ms ease;
}

.spread.stf__parent {
  display: block;
  width: 100% !important;
  max-width: min(1440px, calc(142dvh - 238px)) !important;
  height: auto !important;
  max-height: none;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: visible;
  filter: drop-shadow(0 34px 44px rgba(0, 0, 0, 0.42));
  transform: scale(var(--zoom, 1));
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.spread.stf__parent .stf__wrapper {
  width: 100%;
  overflow: visible !important;
  transform: translateZ(0);
}

.spread.stf__parent .stf__block {
  perspective: 2400px !important;
}

/* Desktop: size the book from the available viewport height so the complete
   viewer stays inside one screen. The edge buttons and toolbar remain the
   navigation surface, so the stage does not need a visible scroll area. */
@media (min-width: 721px) {
  .stage {
    overflow: hidden;
  }

  .spread.stf__parent {
    max-width: min(1440px, calc(125dvh - 200px)) !important;
  }
}

/* In a short landscape viewport the book page is narrower. Keep the cover
   lockup and title on a single, intentional line instead of letting glyphs
   break awkwardly in the middle of the Vietnamese title. */
@media (min-width: 721px) and (max-height: 800px) {
  .cover-logo-wrap {
    width: 136px !important;
    height: 35px !important;
    padding-inline: 5px !important;
  }

  .cover-series,
  .cover-year {
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
    line-height: 1.25 !important;
  }

  .cover-main h1 strong {
    max-width: none !important;
    font-size: clamp(34px, 4.5vw, 60px) !important;
  }
}

.book-page {
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #fff;
  box-shadow: inset 0 0 24px rgba(20, 23, 21, 0.06);
  cursor: grab;
}

.book-page:active {
  cursor: grabbing;
}

.book-page::after {
  content: "";
  position: absolute;
  inset-block: 0;
  z-index: 4;
  width: 18px;
  pointer-events: none;
  opacity: 0.36;
}

.book-page.--left {
  border-radius: 7px 1px 1px 7px;
}

.book-page.--left::after {
  right: 0;
  background: linear-gradient(90deg, transparent, rgba(12, 15, 13, 0.28));
}

.book-page.--right {
  border-radius: 1px 7px 7px 1px;
}

.book-page.--right::after {
  left: 0;
  background: linear-gradient(90deg, rgba(12, 15, 13, 0.26), transparent);
}

.book-page-placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  background:
    linear-gradient(115deg, transparent 35%, rgba(246, 110, 36, 0.08) 49%, transparent 63%),
    #f7f7f4;
  color: rgba(23, 26, 24, 0.36);
  font-family: var(--font-display);
  font-size: clamp(14px, 2vw, 24px);
  letter-spacing: 0.05em;
}

.book-page-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  user-select: none;
  transition: opacity 220ms ease;
  -webkit-user-drag: none;
}

.book-page-image.is-loaded {
  opacity: 1;
}

.book-page.is-error .book-page-placeholder::after {
  content: "Không thể tải ảnh";
  position: absolute;
  top: calc(50% + 28px);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0;
}

.product-name-tag {
  position: absolute;
  bottom: 15px;
  left: 14px;
  z-index: 3;
  display: grid;
  gap: 1px;
  max-width: calc(100% - 28px);
  padding: 8px 12px 9px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(15, 22, 18, 0.88), rgba(26, 36, 30, 0.73));
  color: white;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px) saturate(120%);
  pointer-events: none;
}

.product-name-tag span {
  color: var(--gold-light);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.product-name-tag strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  max-width: min(45vw, 760px);
  overflow: hidden;
  background: white;
  box-shadow: var(--shadow);
  transform-origin: left center;
  animation: pageIn 260ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.page-card.no-entry-animation {
  animation: none;
}

.page-card:only-child {
  max-width: min(70vw, 860px);
}

.page-card + .page-card {
  border-left: 1px solid rgba(20, 22, 21, 0.16);
  box-shadow: 22px 24px 64px rgba(16, 20, 18, 0.18), 4px 4px 12px rgba(16, 20, 18, 0.08);
}

.page-card:first-child:not(:only-child) {
  transform-origin: right center;
}

.page-card img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.page-card.is-error {
  min-width: min(38vw, 540px);
  color: var(--muted);
}

.page-card.is-error::after {
  content: "Không thể tải trang này";
  padding: 32px;
}

.catalogue-cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--brand-black);
  color: var(--brand-cream);
  pointer-events: none;
}

.catalogue-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(112deg, transparent 22%, rgba(255, 255, 255, 0.1) 48%, transparent 54%);
  mix-blend-mode: soft-light;
  opacity: 0.55;
}

.cover-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.68) contrast(1.12) brightness(0.7);
  transform: scale(1.045);
}

.cover-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 80% 18%, rgba(246, 110, 36, 0.28), transparent 34%),
    linear-gradient(180deg, rgba(7, 7, 6, 0.25), rgba(8, 7, 5, 0.74)),
    linear-gradient(100deg, rgba(9, 9, 7, 0.95) 0%, rgba(28, 23, 15, 0.78) 56%, rgba(22, 16, 11, 0.3) 100%);
}

.cover-frame {
  position: absolute;
  inset: 18px;
  z-index: 3;
  border: 1px solid rgba(246, 110, 36, 0.58);
  box-shadow: inset 0 0 0 5px rgba(8, 15, 11, 0.14);
}

.cover-header {
  position: absolute;
  top: 42px;
  right: 42px;
  left: 42px;
  z-index: 4;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  text-transform: uppercase;
}

.cover-logo-wrap {
  display: grid;
  place-items: center;
  width: clamp(132px, 17vw, 214px);
  height: clamp(35px, 4vw, 52px);
  padding: 4px 8px;
  border-radius: 7px 2px 7px 2px;
  background: var(--brand-cream);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

.cover-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cover-monogram {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(246, 110, 36, 0.64);
  color: var(--brand-orange-light);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
}

.cover-series,
.cover-year {
  color: rgba(255, 250, 239, 0.72);
  font-size: clamp(9px, 0.9vw, 12px);
  font-weight: 600;
  letter-spacing: 0.18em;
}

.cover-year {
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}

.cover-main {
  position: absolute;
  right: 42px;
  bottom: 27%;
  left: 42px;
  z-index: 4;
}

.cover-eyebrow {
  display: block;
  margin-bottom: 15px;
  color: var(--gold-light);
  font-size: clamp(9px, 0.9vw, 12px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.cover-main h1 {
  margin: 0;
  line-height: 0.94;
}

.cover-main h1 span,
.cover-main h1 strong {
  display: block;
}

.cover-main h1 span {
  margin-bottom: 8px;
  font-size: clamp(13px, 1.6vw, 21px);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.cover-main h1 strong {
  max-width: 9ch;
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 78px);
  font-weight: 500;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.cover-main p {
  margin: 18px 0 0;
  color: rgba(255, 250, 239, 0.7);
  font-size: clamp(11px, 1.15vw, 15px);
  letter-spacing: 0.04em;
}

.cover-footer {
  position: absolute;
  right: 42px;
  bottom: 42px;
  left: 42px;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(246, 110, 36, 0.4);
}

.cover-swatches {
  display: flex;
  padding-left: 8px;
}

.cover-swatches img {
  width: clamp(34px, 4.2vw, 48px);
  aspect-ratio: 1;
  margin-left: -8px;
  border: 2px solid rgba(244, 238, 222, 0.82);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.25);
}

.cover-count {
  display: grid;
  gap: 3px;
  text-align: right;
}

.cover-count span {
  color: rgba(255, 250, 239, 0.56);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cover-count strong {
  color: var(--gold-light);
  font-size: clamp(11px, 1.15vw, 15px);
  font-weight: 600;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.turn-preview {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  transform: scale(1);
  transition: none;
}

.spread.is-turning {
  z-index: 2;
  transition: none;
}

.page-card.is-turn-source {
  visibility: hidden;
}

.flip-sheet {
  position: absolute;
  z-index: 12;
  transform-style: preserve-3d;
  will-change: transform;
  pointer-events: none;
}

.flip-sheet-next {
  transform-origin: left center;
  animation: flipSheetNext 760ms cubic-bezier(0.33, 0.02, 0.17, 1) both;
}

.flip-sheet-previous {
  transform-origin: right center;
  animation: flipSheetPrevious 760ms cubic-bezier(0.33, 0.02, 0.17, 1) both;
}

.flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.flip-face-back {
  transform: rotateY(180deg);
}

.flip-paper-shade {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.flip-face-front .flip-paper-shade {
  background: linear-gradient(90deg, transparent 38%, rgba(15, 17, 16, 0.08) 72%, rgba(8, 10, 9, 0.52));
  animation: flipFrontShade 760ms ease-in-out both;
}

.flip-face-back .flip-paper-shade {
  background: linear-gradient(90deg, rgba(8, 10, 9, 0.5), rgba(20, 22, 21, 0.1) 30%, transparent 68%);
  animation: flipBackShade 760ms ease-in-out both;
}

.flip-page-edge {
  position: absolute;
  inset-block: 0;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(190,190,184,.74), rgba(255,255,255,.9));
  box-shadow: 0 0 9px rgba(20, 22, 21, 0.32);
  opacity: 0;
  animation: flipEdgeGlow 760ms ease-in-out both;
}

.flip-sheet-next .flip-page-edge { right: -1px; }
.flip-sheet-previous .flip-page-edge { left: -1px; }

.has-page-turn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 8;
  width: min(9vw, 110px);
  height: min(72%, 720px);
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(8, 10, 9, 0.3), transparent 68%);
  filter: blur(15px);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: bookSpinePulse 760ms ease-in-out both;
}

@keyframes flipSheetNext {
  0% {
    transform: translate3d(0, 0, 2px) rotateY(0deg) scale(1, 1);
    filter: brightness(1);
    box-shadow: 16px 18px 38px rgba(12, 15, 13, 0.08);
  }
  46% {
    transform: translate3d(var(--turn-half-x), var(--turn-half-y), 96px) rotateY(-88deg) scale(var(--turn-half-scale-x), var(--turn-half-scale-y));
    filter: brightness(0.82);
    box-shadow: 42px 18px 62px rgba(12, 15, 13, 0.28);
  }
  54% {
    transform: translate3d(var(--turn-half-x), var(--turn-half-y), 96px) rotateY(-96deg) scale(var(--turn-half-scale-x), var(--turn-half-scale-y));
    filter: brightness(0.86);
    box-shadow: -38px 18px 58px rgba(12, 15, 13, 0.24);
  }
  100% {
    transform: translate3d(var(--turn-x), var(--turn-y), 2px) rotateY(-180deg) scale(var(--turn-scale-x), var(--turn-scale-y));
    filter: brightness(1);
    box-shadow: -15px 18px 36px rgba(12, 15, 13, 0.06);
  }
}

@keyframes flipSheetPrevious {
  0% {
    transform: translate3d(0, 0, 2px) rotateY(0deg) scale(1, 1);
    filter: brightness(1);
    box-shadow: -16px 18px 38px rgba(12, 15, 13, 0.08);
  }
  46% {
    transform: translate3d(var(--turn-half-x), var(--turn-half-y), 96px) rotateY(88deg) scale(var(--turn-half-scale-x), var(--turn-half-scale-y));
    filter: brightness(0.82);
    box-shadow: -42px 18px 62px rgba(12, 15, 13, 0.28);
  }
  54% {
    transform: translate3d(var(--turn-half-x), var(--turn-half-y), 96px) rotateY(96deg) scale(var(--turn-half-scale-x), var(--turn-half-scale-y));
    filter: brightness(0.86);
    box-shadow: 38px 18px 58px rgba(12, 15, 13, 0.24);
  }
  100% {
    transform: translate3d(var(--turn-x), var(--turn-y), 2px) rotateY(180deg) scale(var(--turn-scale-x), var(--turn-scale-y));
    filter: brightness(1);
    box-shadow: 15px 18px 36px rgba(12, 15, 13, 0.06);
  }
}

@keyframes flipFrontShade {
  0%, 100% { opacity: 0; }
  42% { opacity: 0.92; }
  51% { opacity: 1; }
  52%, 100% { opacity: 0; }
}

@keyframes flipBackShade {
  0%, 49% { opacity: 0; }
  56% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes flipEdgeGlow {
  0%, 100% { opacity: 0; }
  42%, 58% { opacity: 0.9; }
}

@keyframes bookSpinePulse {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.45); }
  48%, 54% { opacity: 0.62; transform: translate(-50%, -50%) scaleX(1); }
}

.loading-state {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  transition: opacity 180ms ease;
}

.loading-state.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.edge-button {
  align-self: center;
  justify-self: center;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(246, 110, 36, 0.28);
  border-radius: 50%;
  background: rgba(20, 29, 24, 0.78);
  color: var(--gold-light);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease, opacity 160ms ease;
}

.edge-button:hover:not(:disabled) {
  transform: scale(1.08);
  background: rgba(45, 57, 49, 0.96);
}

.edge-button:disabled {
  opacity: 0.2;
  cursor: default;
}

.swipe-hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  z-index: 8;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(21, 25, 23, 0.86);
  color: white;
  font-size: 12px;
  transform: translateX(-50%);
  animation: hintAway 4s 1s both;
}

.swipe-hint svg {
  width: 16px;
  height: 16px;
}

@keyframes hintAway {
  0%, 65% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(8px); }
}

.thumbnail-drawer {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 20;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(360px, 90vw);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 16, 13, 0.97);
  color: white;
  box-shadow: 24px 0 70px rgba(8, 10, 9, 0.28);
  backdrop-filter: blur(20px);
  transform: translateX(-104%);
  visibility: hidden;
  transition: transform 240ms cubic-bezier(0.2, 0.75, 0.25, 1), visibility 240ms;
}

.thumbnail-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 16px 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.drawer-header > div {
  display: grid;
  gap: 3px;
}

.drawer-header strong {
  font-size: 16px;
}

.drawer-header span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}

.thumbnail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 14px;
  padding: 16px;
  overflow-y: auto;
}

.thumbnail-button {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  text-align: left;
  cursor: pointer;
}

.thumbnail-button:hover,
.thumbnail-button:focus-visible,
.thumbnail-button.is-active {
  outline: none;
  border-color: rgba(246, 110, 36, 0.48);
  background: rgba(246, 110, 36, 0.12);
  color: var(--brand-orange-light);
}

.thumbnail-button img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  object-fit: contain;
}

.thumbnail-button span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  font-size: 12px;
}

.thumbnail-button b {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottombar {
  position: relative;
  z-index: 25;
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(120px, 1fr) minmax(72px, auto);
  align-items: center;
  gap: 22px;
  min-height: 62px;
  padding: 10px 24px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 16, 13, 0.88);
  box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(22px);
}

.page-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.page-meta span,
.page-status {
  color: var(--muted);
  font-size: 12px;
}

.page-meta strong {
  overflow: hidden;
  font-size: 14px;
  color: var(--brand-cream);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-status {
  justify-self: end;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.065);
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
}

.progress-wrap {
  display: flex;
  align-items: center;
  width: 100%;
}

.progress-wrap input {
  width: 100%;
  height: 4px;
  margin: 0;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(to right, var(--gold) var(--progress, 0%), rgba(255, 255, 255, 0.13) var(--progress, 0%));
  appearance: none;
  cursor: pointer;
}

.progress-wrap input::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  border: 3px solid #fff8e8;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.38);
  appearance: none;
}

.progress-wrap input::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 3px solid #fff8e8;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.38);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 78px;
  z-index: 100;
  max-width: calc(100vw - 32px);
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--chrome);
  color: white;
  font-size: 13px;
  box-shadow: 0 10px 34px rgba(10, 12, 11, 0.26);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 1000px) {
  .topbar {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding-inline: 16px;
  }

  .brand-copy,
  .desktop-control {
    display: none;
  }

  .toolbar {
    justify-self: center;
  }

  .page-jump {
    min-width: 126px;
  }

  .page-jump button {
    display: none;
  }

  .catalog-controls {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "actions"
      "categories";
    gap: 9px;
    padding: 10px 16px 11px;
  }

  .controls-actions {
    justify-content: start;
  }

  .search-results {
    left: 16px;
    width: min(620px, calc(100vw - 32px));
  }
}

@media (max-width: 720px) {
  .app-shell {
    min-height: 340px;
  }

  .topbar {
    grid-template-columns: 1fr auto;
    min-height: 60px;
    padding: 8px 10px;
  }

  .catalog-controls {
    gap: 8px;
    padding: 8px 10px 9px;
  }

  .controls-main {
    display: block;
  }

  .catalog-search {
    width: 100%;
    height: 40px;
  }

  .search-summary {
    display: block;
    margin: 6px 2px 0;
    font-size: 10px;
  }

  .controls-actions {
    gap: 6px;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .controls-actions::-webkit-scrollbar {
    display: none;
  }

  .control-button {
    min-height: 34px;
    padding-inline: 10px;
    font-size: 11px;
  }

  .category-tree {
    gap: 9px;
  }

  .category-label {
    font-size: 10px;
  }

  .category-button {
    padding: 6px 10px;
    font-size: 10px;
  }

  .search-results {
    top: calc(100% - 2px);
    left: 10px;
    grid-template-columns: 1fr;
    width: calc(100vw - 20px);
  }

  .brand {
    display: none;
  }

  .toolbar {
    justify-self: start;
    gap: 1px;
    padding: 4px;
  }

  .toolbar .icon-button {
    width: 34px;
    height: 34px;
  }

  .toolbar-separator {
    margin-inline: 1px;
  }

  #firstPage,
  #lastPage,
  #shareButton {
    display: none;
  }

  .page-jump {
    justify-self: end;
    min-width: 94px;
    padding-left: 10px;
  }

  .viewer {
    display: block;
  }

  .stage {
    width: 100%;
    height: 100%;
    padding: 14px 10px 54px;
    touch-action: pan-y;
  }

  .spread {
    width: 100%;
    height: calc(100dvh - 190px);
    max-height: calc(100% - 76px);
  }

  .spread.stf__parent {
    width: 100% !important;
    max-width: min(100%, calc(71dvh - 120px)) !important;
    height: auto !important;
    max-height: none;
  }

  .product-name-tag {
    top: auto;
    bottom: 10px;
    left: 10px;
    padding: 7px 10px 8px;
    border-radius: 9px;
  }

  .product-name-tag strong {
    font-size: 13px;
  }

  .cover-frame {
    inset: 12px;
  }

  .cover-logo-wrap {
    width: 132px;
    height: 35px;
    padding-inline: 5px;
  }

  .cover-header {
    top: 28px;
    right: 28px;
    left: 28px;
    gap: 9px;
  }

  .cover-monogram {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }

  .cover-series {
    letter-spacing: 0.12em;
  }

  .cover-main {
    right: 28px;
    bottom: 25%;
    left: 28px;
  }

  .cover-main h1 strong {
    font-size: clamp(34px, 11vw, 60px);
  }

  .cover-footer {
    right: 28px;
    bottom: 28px;
    left: 28px;
  }

  .page-card,
  .page-card:only-child {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    box-shadow: 0 14px 42px rgba(16, 20, 18, 0.18), 0 3px 10px rgba(16, 20, 18, 0.1);
  }

  .page-card img {
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 150px);
  }

  .edge-button {
    position: absolute;
    top: 50%;
    width: 42px;
    height: 42px;
    background: rgba(12, 19, 15, 0.78);
    color: var(--gold-light);
    border-color: rgba(246, 110, 36, 0.24);
  }

  .edge-left {
    left: 8px;
  }

  .edge-right {
    right: 8px;
  }

  .swipe-hint {
    display: flex;
  }

  .bottombar {
    grid-template-columns: minmax(88px, auto) 1fr auto;
    gap: 12px;
    min-height: 54px;
    padding: 8px 12px max(8px, env(safe-area-inset-bottom));
  }

  .page-meta span {
    display: none;
  }

  .page-meta strong {
    max-width: 90px;
    font-size: 12px;
  }

  .toast {
    bottom: 68px;
  }
}

@media (max-width: 390px) {
  #previousPage,
  #nextPage,
  .toolbar-separator {
    display: none;
  }

  .page-jump {
    min-width: 88px;
  }

  .control-button span {
    display: none;
  }

  .control-button {
    width: 36px;
    padding: 0;
  }

  .control-button-primary {
    width: 36px;
  }

  .cover-series {
    display: none;
  }

  .cover-header {
    grid-template-columns: auto 1fr;
  }

  .cover-year {
    justify-self: end;
  }

  .cover-main h1 span {
    letter-spacing: 0.2em;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}