:root{--ui-bg:#F8F8F8;--bar-active:#686868;--bar-idle:#D8D8D8;--text:#000;--muted:#686868}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:Glotik,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,sans-serif;color:var(--text);background:var(--ui-bg);font-style:normal}
.carousel *{font-style:normal}
.page{width:100%;height:100%;padding:0;margin:0}
.carousel{position:relative;width:100vw;height:100vh;background:var(--ui-bg);display:grid;grid-template-rows:auto 17px 1fr auto;overflow:hidden}
.header{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:8px;font-size:12px;font-weight:300;font-style:normal;width:100%}
.header .left{text-align:left;white-space:nowrap}
.header .center{text-align:center}
.header .right{text-align:right;white-space:nowrap}
.header a{color:inherit;text-decoration:none}
.header a:hover,.header a:focus{opacity:0.6;outline:none}
.indicator{display:flex;gap:8px;align-items:center;padding:0 8px;height:17px;width:100%}
.indicator[aria-hidden="true"]{user-select:none}
.indicator .proj{display:flex;gap:4px;align-items:center;flex:1;min-width:0}
.indicator .num{color:var(--muted);width:auto;text-align:right;font-size:12px;flex:0 0 auto}
.bars{display:flex;gap:2px;min-width:0;flex:1}
.bar{height:4px;border-radius:120px;background:var(--bar-idle);flex:1;min-width:24px}
.bar.active{background:var(--bar-active)}
.viewport{position:relative;flex:1;display:flex;align-items:center;justify-content:center;background:var(--ui-bg);min-height:0;overflow:hidden}
.media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.viewport img{width:100%;max-height:100%;object-fit:contain;object-position:center;display:block}
.hit{position:absolute;top:0;bottom:0;width:50%;background:transparent;border:0;padding:0;cursor:e-resize}
.hit.prev{left:0;cursor:w-resize}
.hit.next{right:0;cursor:e-resize}
.bottom{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:8px;gap:8px;font-size:12px;background:var(--ui-bg)}
.bottom .left{justify-self:start}
.bottom .center{display:flex;flex-direction:column;justify-content:center;text-align:left;white-space:pre-line}
.bottom p{margin:0}
.title{font-weight:300}
.subtitle{color:var(--muted)}
.fade-enter{opacity:0}
.fade-enter-active{opacity:1;transition:opacity 200ms linear}
@media (max-width:640px){.carousel{width:100vw;height:100vh;grid-template-rows:auto 17px 1fr auto}}