.gallery-option { max-width:1600px; width:calc(100% - clamp(10px,2.2vw,32px)*2); margin:70px auto 0; color:#1f2936; --gallery-ease:cubic-bezier(.22,1,.36,1); }
.gallery-variants { display:flex; width:fit-content; max-width:100%; gap:4px; padding:5px; border-radius:17px; background:#eef3f7; margin-bottom:30px; }
.gallery-variants a { padding:11px 20px; border-radius:13px; text-decoration:none; color:#677381; font-size:13px; font-weight:600; white-space:nowrap; }
.gallery-variants a[aria-current] { color:#1f2936; background:white; box-shadow:0 2px 8px #2637440a; }
.gallery-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 4px 28px; }
.gallery-heading h2 { margin:0; font-size:clamp(28px,2.8vw,42px); line-height:1.2; letter-spacing:-.025em; }
.gallery-heading p { margin:12px 0 0; color:#77828d; font-size:14px; line-height:1.5; }
.gallery-play { background:transparent; margin-right:6px; }
.gallery-play-symbol,.gallery-play.is-paused .gallery-pause-symbol { display:none; }
.gallery-play.is-paused .gallery-play-symbol { display:block; }
.gallery-view { position:relative; overflow:hidden; touch-action:pan-y; }
.gallery-ribbon { height:clamp(360px,34vw,520px); isolation:isolate; }
.gallery-slide { position:absolute; top:0; left:50%; width:var(--slide-w,60%); height:100%; padding:0; border:0; background:none; cursor:pointer; transform:translateX(calc(-50% + var(--slide-x,0px))) scale(.88); opacity:.78; transition:transform 850ms var(--gallery-ease),opacity 650ms; -webkit-tap-highlight-color:transparent; }
.gallery-slide img { display:block; width:100%; height:100%; object-fit:cover; border-radius:30px; user-select:none; }
.gallery-slide[data-active] { z-index:2; transform:translateX(-50%) scale(1); opacity:1; }
.gallery-slide[aria-hidden="true"] { visibility:hidden; pointer-events:none; }
.gallery-slide[data-reset] { transition:none; }
.gallery-expand { position:absolute; bottom:18px; right:18px; display:grid; place-items:center; width:40px; height:40px; border-radius:14px; background:#ffffffe6; color:#1f2936; opacity:0; transition:opacity 200ms; pointer-events:none; }
.gallery-expand svg { width:21px; height:21px; }
.gallery-slide[data-active] .gallery-expand,.gallery-focus .gallery-expand { opacity:.5; }
.gallery-caption { display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:64px; padding:10px 4px; }
.gallery-caption>div { display:flex; align-items:center; gap:22px; }
.gallery-count { font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.gallery-count i { font-style:normal; color:#a0a9b2; margin-left:7px; }
.gallery-caption h3 { font-size:17px; font-weight:600; margin:0; }
.gallery-hint { color:#8a949e; font-size:12px; }
.gallery-progress { display:flex; justify-content:center; gap:2px; }
.gallery-progress button { display:grid; place-items:center; width:32px; height:36px; padding:0; background:none; border:0; border-radius:8px; cursor:pointer; }
.gallery-progress button span { width:22px; height:3px; border-radius:3px; background:#e3e9ef; transition:background 200ms; }
.gallery-progress button[aria-current] span { background:linear-gradient(100deg,#0d7da0,#4a69d1); }
.gallery-focus { height:clamp(380px,38vw,580px); border-radius:32px; }
.gallery-focus-open { display:block; width:100%; height:100%; background:none; border:0; padding:0; cursor:zoom-in; }
.gallery-focus-photo { position:absolute; inset:0; display:flex; justify-content:center; align-items:center; opacity:0; visibility:hidden; transform:translateY(12px) scale(1.025); transition:opacity 650ms ease,transform 850ms var(--gallery-ease),visibility 0s 850ms; }
.gallery-focus-photo[data-active] { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.gallery-focus-photo img { display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; border-radius:28px; user-select:none; }
.gallery-option[data-variant="focus"] .gallery-caption { justify-content:center; }
.gallery-option[data-variant="focus"] .gallery-hint { display:none; }
.gallery-focus .gallery-expand { right:50%; margin-right:-20px; bottom:12px; }
@media(min-width:1000px) {
  .gallery-option[data-variant="focus"] .gallery-heading { position:relative; justify-content:center; text-align:center; }
  .gallery-option[data-variant="focus"] .gallery-heading .work-controls { position:absolute; right:0; }
}
.gallery-thumbnails { position:relative; display:flex; justify-content:center; gap:10px; overflow-x:auto; padding:6px 3px 10px; scrollbar-width:thin; scrollbar-color:#cbd5de transparent; }
.gallery-thumbnails button { flex:0 0 86px; height:68px; padding:3px; border:1px solid transparent; border-radius:15px; background:transparent; cursor:pointer; transition:border-color 150ms,opacity 150ms; opacity:.65; }
.gallery-thumbnails button img { display:block; width:100%; height:100%; object-fit:cover; border-radius:11px; }
.gallery-thumbnails button[aria-current] { border-color:#247fab; opacity:1; }
.gallery-option.is-resizing .gallery-slide { transition:none; }
.gallery-option :focus-visible { outline:2px solid #2184ac; outline-offset:3px; }
@media(hover:hover) and (pointer:fine) { .gallery-slide:hover { opacity:1; } .gallery-thumbnails button:hover { opacity:1; } .gallery-variants a:hover { color:#1f2936; } }
@media(max-width:760px) {
  .gallery-option { margin-top:46px; }
  .gallery-variants { margin-bottom:26px; }
  .gallery-variants a { padding:10px 16px; font-size:12px; }
  .gallery-heading { align-items:flex-end; gap:10px; margin-bottom:22px; }
  .gallery-heading h2 { font-size:26px; }
  .gallery-heading p { display:none; }
  .gallery-heading .work-control { width:34px; height:40px; }
  .gallery-heading .work-controls { gap:2px; }
  .gallery-play { margin-right:0; }
  .gallery-ribbon { height:clamp(280px,80vw,460px); }
  .gallery-slide img { border-radius:23px; }
  .gallery-slide:not([data-active]) { transform:translateX(calc(-50% + var(--slide-x,0px))) scale(.94); }
  .gallery-expand { width:34px; height:34px; right:12px; bottom:12px; }
  .gallery-caption { min-height:70px; padding:12px 4px; }
  .gallery-caption>div { gap:15px; }
  .gallery-caption h3 { font-size:15px; }
  .gallery-hint { display:none; }
  .gallery-focus { height:clamp(320px,100vw,520px); border-radius:24px; }
  .gallery-thumbnails { justify-content:flex-start; gap:6px; }
  .gallery-thumbnails button { flex-basis:64px; height:58px; }
}
@media(prefers-reduced-motion:reduce) { .gallery-option * { transition:none!important; } }