#galleryLauncher { position: fixed; left: .9rem; bottom: 10rem; z-index: 4; display: flex; align-items: center; gap: .45rem; border-radius: 2rem; padding: .6rem .85rem; font-size: .74rem; font-weight: 700; color: #fff; }
#galleryLauncher svg { width: 1.2rem; height: 1.2rem; color: #ffda88; }
#hk .hk-acts #galleryLauncher { position: static; transform: none; justify-content: center; font-size: .8rem; padding: .55rem .5rem; }
#galleryDialog { box-sizing: border-box; width: min(1050px, calc(100% - 2rem)); height: min(860px, calc(100dvh - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid #9bafbb; border-radius: 1.2rem; background: #f7f6f2; color: #19364a; box-shadow: 0 1rem 5rem #07182a80; font: 15px/1.6 var(--font); overflow: hidden; user-select: text; }
#galleryDialog[open] { display: flex; flex-direction: column; }
#galleryDialog::backdrop { background: #07182ab8; backdrop-filter: blur(5px); }
#galleryDialog * { box-sizing: border-box; }
#galleryDialog button, #galleryDialog select { font: inherit; cursor: pointer; }
#galleryDialog button:focus-visible, #galleryDialog a:focus-visible { outline: 3px solid #1b8ba5; outline-offset: 3px; }
.gl-head { background: #102c40; color: white; padding: 1rem 1.6rem; display: flex; align-items: center; justify-content: space-between; flex: none; }
.gl-head small { letter-spacing: .15em; color: #f1cf8b; font-size: .65em; }
.gl-head h1 { font-size: 1.45em; margin: 0; }
.gl-head button { width: 2.7rem; height: 2.7rem; border-radius: 50%; background: #ffffff15; }
.gl-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: .8rem 1.6rem; background: #fff; border-bottom: 1px solid #dce3e4; flex: none; }
.gl-toolbar label { font-size: .7em; color: #5d6d77; display: grid; gap: .2rem; }
#galleryScene { font-size: 16px !important; padding: .45rem 2.6rem .45rem .8rem; border: 1px solid #c6d0d4; border-radius: .5rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2319364a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .9rem center / .75rem; color: #19364a; width: 100%; min-width: 16rem; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; }
#galleryScene:hover { border-color: #43858c; }
#galleryScene:focus-visible { outline: 3px solid #1b8ba5; outline-offset: 2px; }
.gl-tabs { display: flex; gap: .25rem; padding: .25rem; border-radius: 2rem; background: #edf1f1; flex: none; }
.gl-tabs button { padding: .4rem .9rem; border-radius: 2rem; font-size: .85em !important; }
.gl-tabs [aria-pressed="true"] { background: #193e50; color: white; }
#galleryContent { padding: 1.6rem; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.gl-intro { display: flex; gap: 1rem; justify-content: space-between; align-items: center; }
.gl-intro small { color: #5d7d80; font-size: .7em; letter-spacing: .1em; font-weight: 700; }
#galleryDialog h2 { font-size: 1.7em; line-height: 1.3; margin: .4rem 0; letter-spacing: -.03em; }
.gl-intro p { margin: .5rem 0; color: #5a6c75; font-size: .9em; }
.gl-seal { display: grid; place-content: center; text-align: center; width: 5.2rem; height: 5.2rem; border: 1px solid #bdd0ce; border-radius: 50%; flex: none; color: #307274; font-size: 1.15em; line-height: 1.3; }
.gl-note { color: #65757b; font-size: .78em; line-height: 1.65; margin: 1rem 0; }
.gl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.gl-card { padding: 0; border: 1px solid #d7dfde; background: white; text-align: left; border-radius: .85rem; overflow: hidden; color: #19364a; }
.gl-card:hover { border-color: #43858c; box-shadow: 0 .3rem 1.2rem #16353f12; }
.gl-thumb { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #e0e7e6; }
.gl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gl-thumb > span:not(.gl-image-error) { position: absolute; bottom: .65rem; left: .65rem; padding: .15rem .5rem; border-radius: .3rem; color: #fff; background: #102c40cc; font-size: .7em; }
.gl-card-copy { padding: .8rem; display: flex; flex-direction: column; gap: .35rem; }
.gl-card-copy b { font-size: .9em; }
.gl-card-copy small { color: #75828a; font-size: .7em; }
.gl-card-copy > span { font-size: .75em; color: #227279; font-weight: 700; }
.gl-sources { margin-top: 1.5rem; color: #62767d; font-size: .73em; }
.gl-sources summary { cursor: pointer; }
#galleryDialog a { color: #246f85; text-underline-offset: .2em; overflow-wrap: anywhere; }
.gl-viewbar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; font-size: .85em; }
.gl-viewbar button { border: 1px solid #c3d2d3; border-radius: .5rem; padding: .4rem .8rem; background: #fff; color: #264f60; min-height: 44px; }
.gl-viewbar button:disabled { opacity: .4; cursor: default; }
.gl-viewbar > div { display: flex; gap: .4rem; }
.gl-photo { margin: 0; }
.gl-full { background: #122c39; border-radius: .6rem; min-height: 8rem; display: grid; place-items: center; overflow: hidden; }
.gl-full img { display: block; width: 100%; height: min(47dvh, 460px); object-fit: contain; }
.gl-photo figcaption { margin-top: 1rem; }
.gl-photo figcaption > small { font-size: .7em; color: #617a80; }
.gl-photo figcaption p { font-size: .85em; }
.gl-photo .gl-credit { color: #64777c; font-size: .73em; }
.gl-empty { background: #eaf0ee; padding: 1.1rem; border-radius: .7rem; font-size: .85em; line-height: 1.7; }
.gl-tour-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.gl-tour { display: flex; align-items: start; gap: 1rem; border: 1px solid #ccd9d9; border-radius: .8rem; padding: 1.2rem; background: #fff; }
.gl-orbit { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border: 1px solid #69a3a7; border-radius: 50%; color: #397b82; flex: none; font-size: .85em; }
.gl-tour h3 { margin: 0; font-size: 1em; }
.gl-tour p { font-size: .8em; color: #64777c; }
.gl-tour a { display: block; font-size: .73em; margin-top: .7rem; }
.gl-tour-source { display: block; margin-top: .7rem; font-size: .7em; color: #61767d; }
.gl-tour a.gl-primary { text-decoration: none; display: inline-block; }
.gl-to-tours { margin-top: 1.1rem; }
#galleryDialog .gl-primary { background: #193e50; color: #fff; border-radius: .5rem; padding: .6rem .8rem; font-size: .8em; }
#galleryTour:empty { display: none; }
#galleryTour { margin-top: 1.5rem; scroll-margin-top: .5rem; }
#galleryTour iframe { display: block; width: 100%; height: min(60dvh, 530px); border: 1px solid #c4d0d2; border-radius: .7rem; background: #102c40; }
.gl-image-error { display: block; padding: 1rem; color: #8f432a; background: #f6e8df; font-size: .85em; }
@media (max-width: 650px) {
  #galleryLauncher { left: .7rem; bottom: 10rem; font-size: .68rem; padding: .55rem .75rem; }
  #galleryDialog { width: calc(100% - .75rem); height: calc(100dvh - .75rem); max-height: calc(100dvh - .75rem); border-radius: .85rem; }
  .gl-head { padding: .8rem 1rem; }
  .gl-head h1 { font-size: 1.2em; }
  .gl-toolbar { padding: .7rem 1rem; flex-wrap: wrap; gap: .7rem; }
  .gl-toolbar label { width: 100%; }
  .gl-tabs { width: 100%; }
  .gl-tabs button { flex: 1; }
  #galleryContent { padding: 1rem; }
  #galleryDialog h2 { font-size: 1.3em; }
  .gl-seal { width: 3.7rem; height: 3.7rem; font-size: .95em; }
  .gl-grid { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .gl-card-copy { padding: .65rem; }
  .gl-card-copy b { font-size: .8em; }
  .gl-tour-list { grid-template-columns: 1fr; }
  .gl-tour { padding: 1rem; }
  .gl-viewbar { font-size: .75em; }
}
@media (max-height: 500px) and (min-width: 651px) {
  #galleryLauncher { bottom: 6.5rem; }
  .gl-head { padding: .5rem 1rem; }
  .gl-toolbar { padding: .4rem 1rem; }
}