:root { color-scheme: dark; --orange: #ff5001; --ink: #111214; --panel: #1a1c20; }
* { box-sizing: border-box; }
html { background: var(--ink); }
body { margin: 0; min-width: 280px; background: radial-gradient(circle at 50% 0, #292015 0, var(--ink) 42rem); color: #f8f6f2; font-family: Georgia, "Times New Roman", serif; }
.viewer-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px clamp(16px,4vw,54px); border-bottom: 1px solid #ffffff20; background: #111214f2; backdrop-filter: blur(14px); }
.eyebrow { margin: 0 0 3px; color: var(--orange); font: 800 11px/1.2 Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(20px,3vw,34px); line-height: 1.05; }
.return-link { flex: 0 0 auto; color: #fff; font: 700 14px/1 Arial, sans-serif; text-underline-offset: 4px; }
.flyer-list { display: grid; gap: clamp(28px,6vw,72px); padding: clamp(18px,3vw,42px); }
.flyer { min-width: 0; overflow: hidden; border: 1px solid #ffffff2b; border-radius: 18px; background: var(--panel); box-shadow: 0 30px 90px #0008; }
.flyer:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.flyer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 10px 14px 10px 22px; }
h2 { margin: 0; font-size: clamp(17px,2vw,23px); }
.controls { display: flex; align-items: center; gap: 8px; font-family: Arial, sans-serif; }
button { min-width: 46px; min-height: 46px; padding: 0 14px; border: 1px solid #ffffff4a; border-radius: 10px; background: #25272c; color: #fff; font: 800 20px/1 Arial, sans-serif; cursor: pointer; }
button:hover, button:focus-visible { border-color: var(--orange); background: var(--orange); outline: none; }
.fit { font-size: 13px; }
output { min-width: 58px; color: #d7d4cf; font: 700 14px/1 Arial, sans-serif; text-align: center; }
.stage { height: calc(100dvh - 150px); min-height: 280px; overflow: auto; background: #e7e3dc; overscroll-behavior: auto; touch-action: pan-x pan-y pinch-zoom; scrollbar-color: var(--orange) #35363a; cursor: grab; }
.stage.dragging { cursor: grabbing; user-select: none; }
.canvas { display: grid; place-items: center; width: 100%; height: 100%; min-width: 100%; min-height: 100%; margin-inline: auto; }
.canvas img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; }
.flyer[data-zoomed] .canvas { place-items: start center; height: auto; min-width: 0; min-height: 0; }
.flyer[data-zoomed] .canvas img { width: 100%; max-width: none; max-height: none; }
footer { padding: 8px 20px 42px; color: #cbc7c0; font: 16px/1.5 Arial, sans-serif; text-align: center; }
footer a { color: var(--orange); font-weight: 800; }
@media (max-width: 620px) {
  .viewer-header { align-items: flex-start; }
  .return-link { font-size: 12px; }
  .flyer-toolbar { align-items: flex-start; flex-direction: column; padding: 12px; }
  .controls { width: 100%; justify-content: center; }
  .fit { padding-inline: 10px; }
  .stage { height: calc(100dvh - 205px); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }