:root { color-scheme: light; --paper: #fff; --ink: #343434; --muted: #8b8b8b; --wash: #f1f1f1; --selection: #b9b9bb; }
* { box-sizing: border-box; }
body { margin: 0; height: 100vh; height: 100dvh; display: grid; grid-template-rows: 62px minmax(0, 1fr) 104px; background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; -webkit-font-smoothing: antialiased; }
button, a { color: inherit; -webkit-tap-highlight-color: transparent; }
button { font: inherit; border: 0; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid #646464; outline-offset: 3px; }
button:disabled { opacity: .25; cursor: default; }
svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.toolbar { display: flex; align-items: center; justify-content: space-between; padding: max(8px, env(safe-area-inset-top)) 25px 4px; }
.back { display: flex; align-items: center; gap: 5px; text-decoration: none; color: #777; font: 12px "Avenir Next", -apple-system, sans-serif; }
.back svg { width: 17px; height: 17px; }
.tools { display: flex; align-items: center; gap: 7px; }
.tools button { width: 36px; height: 36px; display: grid; place-items: center; background: transparent; border-radius: 8px; color: #717171; }
.tools button:hover { background: var(--wash); color: var(--ink); }
.position { font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: .05em; color: var(--muted); margin-right: 11px; }
.interval-picker { position: relative; z-index: 5; }
.interval-picker summary { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 7px; border-radius: 8px; cursor: pointer; list-style: none; font-size: 11px; color: #717171; white-space: nowrap; }
.interval-picker summary::-webkit-details-marker { display: none; }
.interval-picker summary:hover, .interval-picker[open] summary { background: var(--wash); }
.interval-picker summary:focus-visible { outline: 2px solid #646464; outline-offset: 3px; }
.interval-picker summary svg { width: 17px; height: 17px; }
.interval-panel { position: absolute; right: 0; top: 43px; width: 268px; padding: 18px; border: 1px solid #e7e7e7; border-radius: 12px; background: var(--paper); box-shadow: 0 8px 28px #00000012; }
.interval-heading, .interval-limits { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
.interval-heading output { color: #777; font-variant-numeric: tabular-nums; }
.interval-panel input { width: 100%; margin: 18px 0 10px; accent-color: #686868; cursor: pointer; }
.interval-limits { color: var(--muted); font-size: 10px; }
#play .play-icon, #play[aria-pressed="false"] .pause-icon { display: none; }
#play[aria-pressed="false"] .play-icon { display: block; }
.viewer { position: relative; min-height: 0; margin: 0 22px; touch-action: pan-y; }
.slideshow { position: absolute; inset: 0; }
.slideshow img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 650ms ease; border-radius: 6px; }
.slideshow img.is-current { opacity: 1; }
.message { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; font-size: 13px; color: var(--muted); }
.message[hidden] { display: none; }
.message button { background: var(--wash); padding: 10px 16px; border-radius: 8px; color: var(--ink); }
.message button[hidden] { display: none; }
.step { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 56px; display: grid; place-items: center; border-radius: 10px; background: #ffffffdc; color: #5b5b5b; opacity: 0; transition: opacity 180ms; box-shadow: 0 1px 10px #0000000a; }
.previous { left: 14px; }.next { right: 14px; }
.viewer:hover .step, .step:focus-visible { opacity: 1; }
.filmstrip { display: flex; align-items: center; gap: 7px; overflow-x: auto; overscroll-behavior-x: contain; padding: 18px 22px max(18px, env(safe-area-inset-bottom)); scrollbar-width: thin; scrollbar-color: #d9d9d9 transparent; scroll-behavior: smooth; }
.thumbnail { flex: 0 0 auto; padding: 5px; height: 64px; min-width: 36px; max-width: 110px; border-radius: 7px; background: transparent; }
.thumbnail img { height: 100%; width: auto; max-width: 100px; min-width: 24px; object-fit: contain; display: block; border-radius: 2px; }
.thumbnail:hover { background: var(--wash); }
.thumbnail[aria-current="true"] { background: var(--selection); }
.thumbnail:focus-visible { outline-offset: -2px; }
@media (max-width: 680px) {
  body { grid-template-rows: 58px minmax(0, 1fr) 94px; }
  .toolbar { padding-left: 14px; padding-right: 12px; }
  .viewer { margin: 0 10px; }
  .filmstrip { padding-left: 10px; padding-right: 10px; gap: 5px; }
  .thumbnail { height: 60px; }
  .step { width: 32px; height: 44px; top: auto; bottom: 7px; transform: none; opacity: .8; }
  .previous { left: 6px; }.next { right: 6px; }
  .position { margin-right: 2px; }
  .interval-picker summary { gap: 4px; padding: 0 4px; }
  .interval-panel { right: -70px; width: min(268px, calc(100vw - 24px)); }
}
@media (max-width: 380px) { .back span { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }