.album.has-album-view[open] { padding: clamp(.65rem,1.65vw,1.4rem); border-radius: 3px; background: #f2f4f3; }
.has-album-view[open] summary { display: flex; align-items: center; gap: clamp(.65rem,1.5vw,1.4rem); }
.has-album-view[open] summary .album-cover { width: clamp(62px,7.5vw,105px); }
.has-album-view[open] .album-label { flex: 1; padding-block: .3rem; }
.has-album-view[open] .album-label::after { top: 50%; margin-top: -.45rem; }
.has-album-view[open] .album-label strong { font-size: clamp(1.13rem,2.1vw,1.8rem); }
.album-view { margin-top: .85rem; color: var(--graphite); }
.album-stage { display: grid; position: relative; height: clamp(235px,51vh,550px); height: clamp(235px,51svh,550px); background: #e3e8e8; overflow: hidden; touch-action: pan-y pinch-zoom; }
.album-enlarge { display: grid; place-items: center; min-height: 0; height: 100%; cursor: zoom-in; }
.album-enlarge img { height: 100%; width: 100%; min-height: 0; object-fit: contain; }
.album-enlarge:focus-visible { outline-offset: -4px; }
.frame-step { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgb(34 55 72 / .23); border-radius: 50%; background: #fff; color: #16354b; box-shadow: 0 2px 8px rgb(13 29 42 / .12); cursor: pointer; }
.frame-step::before { content: ""; width: .67rem; height: .67rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateX(-2px) rotate(45deg); }
.frame-step.previous::before { transform: translateX(2px) rotate(-135deg); }
.frame-step.previous { left: clamp(.45rem,1.5vw,1.5rem); }
.frame-step:not(.previous) { right: clamp(.45rem,1.5vw,1.5rem); }
.frame-step:hover { color: var(--blue); border-color: var(--blue); }
.album-bar { display: flex; align-items: baseline; justify-content: space-between; gap: .65rem 1.1rem; padding-block: .55rem .45rem; }
.album-frame-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: .22rem .8rem; font-size: .94rem; overflow-wrap: anywhere; }
.frame-count { white-space: nowrap; font-size: .84rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.album-zoom-link { display: inline-flex; flex: none; align-items: center; min-height: 32px; font-weight: 650; font-size: .86rem; }
.has-album-view .album-photos { position: relative; display: flex; gap: .48rem; margin: 0; padding: 3px 2px 7px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: #9bacb7 transparent; }
.has-album-view .album-photos a { flex: 0 0 clamp(55px,6.4vw,82px); display: block; border: 2px solid transparent; padding: 2px; }
.has-album-view .album-photos a[aria-current="true"] { border-color: var(--blue); }
.has-album-view .album-photos a:focus-visible { outline-offset: -2px; }
.viewer figure { touch-action: pan-y pinch-zoom; }
@media (max-width: 600px) {
  .album-stage { height: clamp(205px,65vw,315px); }
  .album-bar { padding-block: .32rem; gap: .45rem; }
  .album-frame-info { display: grid; gap: .05rem; font-size: .84rem; }
  .album-zoom-link { min-height: 44px; }
  .has-album-view[open] .album-label strong { font-size: 1rem; }
  .has-album-view[open] .album-note { font-size: .9rem; }
  .has-album-view .album-photos { gap: .25rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .frame-step { transition: border-color 160ms, color 160ms; }
}
@media print {
  .frame-step, .album-zoom-link { display: none; }
  .has-album-view .album-photos { display: grid; overflow: visible; }
}