/* Keep controls outside the artwork, readable over both bright and dark scenes. */
.scene-rail-controls{display:flex;align-items:center;justify-content:center;gap:16px}
.scene-rail-controls button,
dialog.character-reference-viewer footer button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:auto;min-width:100px;min-height:46px;padding:10px 18px;margin:0;
  border:1px solid #8298b4;border-radius:8px;background:#263b55;color:#fff;
  font-size:14px;font-weight:700;line-height:1.2;cursor:pointer;box-shadow:none
}
.scene-rail-controls button:hover,
dialog.character-reference-viewer footer button:hover{background:#395676;border-color:#d4e8ff}
.scene-rail-controls button:focus-visible,
dialog.character-reference-viewer button:focus-visible{outline:3px solid #bce5ff;outline-offset:3px}
.scene-rail-controls [hidden],dialog.character-reference-viewer [hidden]{display:none!important}
.scene-rail-controls>span,
dialog.character-reference-viewer footer span{min-width:48px;text-align:center;color:#e7f1ff;font-size:14px;font-variant-numeric:tabular-nums}
.character-reference-gallery>.scene-rail-controls{display:none}
dialog.character-reference-viewer{
  width:min(1180px,calc(100% - 24px));max-width:none;
  max-height:94dvh;padding:0;border:1px solid #637b98;border-radius:12px;
  overflow:hidden;background:#070e19;color:#fff
}
dialog.character-reference-viewer::backdrop{background:#02060de8}
dialog.character-reference-viewer figure{display:block;margin:0;min-width:0}
.character-reference-viewer-track{
  display:flex;width:100%;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#698bac #101c2b
}
.character-reference-viewer-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;display:grid;place-items:center}
dialog.character-reference-viewer .character-reference-viewer-slide img{
  display:block;width:100%;height:min(68vw,calc(94dvh - 122px));max-height:760px;
  object-fit:contain;background:#030810;user-select:none;-webkit-user-drag:none
}
dialog.character-reference-viewer figcaption{min-height:28px;padding:8px 54px;margin:0;font-size:12px;line-height:1.5;color:#c3d2e4;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
dialog.character-reference-viewer footer{
  display:flex;align-items:center;justify-content:center;gap:20px;
  min-height:68px;padding:10px 16px;border-top:1px solid #344962;background:#101c2b
}
dialog.character-reference-viewer footer::before,
dialog.character-reference-viewer footer::after{content:none;display:none}
dialog.character-reference-viewer .character-reference-viewer-close{
  position:absolute;z-index:3;top:10px;right:10px;display:grid;place-items:center;
  width:44px;height:44px;min-height:44px;padding:0;border:1px solid #95abc5;
  border-radius:50%;background:#101c2bf2;color:#fff;font-size:28px;line-height:1
}
@media(max-width:700px){
  .character-reference-gallery{min-width:0}
  .character-reference-gallery .character-reference-grid,
  .character-reference-gallery .character-reference-grid[data-count]{
    display:flex;gap:10px;width:100%;max-width:none;margin:0;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scrollbar-width:thin;scrollbar-color:#698bac #101c2b;padding-bottom:8px
  }
  .character-reference-gallery .character-reference-image{
    flex:0 0 87%;min-width:0;aspect-ratio:4/3;scroll-snap-align:start;scroll-snap-stop:always
  }
  .character-reference-gallery .character-reference-grid[data-count="1"]>.character-reference-image{flex-basis:100%}
  .character-reference-gallery .character-reference-image>span{font-size:11px;padding:5px 8px}
  .character-reference-gallery>.scene-rail-controls{display:flex;margin-top:8px}
  .character-reference-gallery:has([data-count="1"])>.scene-rail-controls{display:none}
  dialog.character-reference-viewer{width:calc(100% - 16px);max-height:94dvh}
  dialog.character-reference-viewer footer{gap:12px;padding:10px}
  dialog.character-reference-viewer footer button{min-width:92px;padding:10px 14px}
}