/* client_restyle kit: base behavior styles. Styles override the look through these variables:
   --kit-ease  --kit-dur  --kit-dialog-bg  --kit-dialog-fg  --kit-dialog-muted  --kit-accent  --kit-btn-bg  --kit-btn-fg
   Reveal start states apply only when JS runs (html.js), never in screenshot mode (html.shot) or while paused. */
:root{
  --kit-ease:cubic-bezier(.2,.7,.2,1);
  --kit-dur:.9s;
  --kit-dialog-bg:rgba(6,12,14,.94);
  --kit-dialog-fg:#eef3f1;
  --kit-dialog-muted:#a9bcb7;
  --kit-accent:#5bb8b8;
  --kit-btn-bg:rgba(255,255,255,.1);
  --kit-btn-fg:#eef3f1;
}
[hidden]{display:none!important}
.kit-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.kit-skip{position:absolute;left:12px;top:-60px;z-index:200;padding:10px 16px;border-radius:999px;background:#fff;color:#111;font-weight:600;text-decoration:none;transition:top .2s}
.kit-skip:focus{top:12px}

/* ---- reveal ---- */
html.js:not(.shot):not(.motion-paused) [data-reveal]:not(.is-in){opacity:0}
html.js:not(.shot):not(.motion-paused) [data-reveal]{transition:opacity var(--kit-dur) var(--kit-ease),transform var(--kit-dur) var(--kit-ease),filter var(--kit-dur) var(--kit-ease),clip-path calc(var(--kit-dur) + .2s) var(--kit-ease);transition-delay:calc(var(--reveal-i,0) * 80ms)}
html.js:not(.shot):not(.motion-paused) [data-reveal="up"]:not(.is-in){transform:translateY(28px)}
html.js:not(.shot):not(.motion-paused) [data-reveal="left"]:not(.is-in){transform:translateX(-32px)}
html.js:not(.shot):not(.motion-paused) [data-reveal="right"]:not(.is-in){transform:translateX(32px)}
html.js:not(.shot):not(.motion-paused) [data-reveal="zoom"]:not(.is-in){transform:scale(.94)}
html.js:not(.shot):not(.motion-paused) [data-reveal="blur"]:not(.is-in){filter:blur(10px);transform:translateY(12px)}
html.js:not(.shot):not(.motion-paused) [data-reveal="mask"]:not(.is-in){clip-path:inset(0 0 100% 0);opacity:1}
html.js:not(.shot):not(.motion-paused) [data-reveal="mask"].is-in{clip-path:inset(0 0 0 0)}   /* inset to inset, so it animates (none would jump) */

/* ---- pause everything ---- */
html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after{animation-play-state:paused!important}

/* ---- images ---- */
html.js:not(.shot) img[data-fade]{opacity:0;transition:opacity .7s var(--kit-ease)}   /* JS only: with no JS the image just shows */
html.js img[data-fade].is-loaded{opacity:1}
.kit-lqip{background-size:cover;background-position:center}

/* ---- marquee (duplicate the track content once; the track slides by half) ---- */
.kit-marquee{overflow:hidden;--marquee-dur:60s;--marquee-gap:16px}
.kit-marquee__track{display:flex;gap:var(--marquee-gap);width:max-content;animation:kit-marquee var(--marquee-dur) linear infinite}
.kit-marquee[data-dir="right"] .kit-marquee__track{animation-direction:reverse}
.kit-marquee:hover .kit-marquee__track{animation-play-state:paused}
@keyframes kit-marquee{to{transform:translateX(calc(-50% - var(--marquee-gap) / 2))}}

/* ---- motion toggle (default look; styles may restyle or move it) ---- */
.kit-motion{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));z-index:90;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(10,19,21,.72);color:#eef3f1;font:600 13px/1 var(--b-font-body,system-ui,sans-serif);letter-spacing:.02em;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.kit-motion svg{width:16px;height:16px;fill:currentColor}
.kit-motion .ico-play{display:none}
html.motion-paused .kit-motion .ico-play{display:block}
html.motion-paused .kit-motion .ico-pause{display:none}
.kit-motion:focus-visible{outline:2px solid var(--kit-accent);outline-offset:3px}

/* ---- dialogs ---- */
.kit-dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--kit-dialog-bg);color:var(--kit-dialog-fg);overflow:hidden}
.kit-dialog::backdrop{background:rgba(0,0,0,.6)}
.kit-dialog[open]{display:grid;place-items:center;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);animation:kit-fade .35s var(--kit-ease)}
@keyframes kit-fade{from{opacity:0}to{opacity:1}}
.kit-dialog svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kit-x,.kit-nav{position:absolute;display:grid;place-items:center;width:48px;height:48px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:var(--kit-btn-bg);color:var(--kit-btn-fg);cursor:pointer;z-index:2}
.kit-x{top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right))}
.kit-nav{top:50%;transform:translateY(-50%)}
.kit-prev{left:max(12px,env(safe-area-inset-left))}
.kit-next{right:max(12px,env(safe-area-inset-right))}
.kit-x:focus-visible,.kit-nav:focus-visible{outline:2px solid var(--kit-accent);outline-offset:3px}
.kit-viewer__fig{margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:14px;width:100%;height:100%;padding:72px 72px 20px;box-sizing:border-box}
.kit-viewer__img{width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .4s var(--kit-ease);border-radius:6px}
.kit-viewer__img.is-loaded{opacity:1}
.kit-viewer__cap{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 12px;text-align:center;font-size:15px;color:var(--kit-dialog-muted);padding-bottom:max(8px,env(safe-area-inset-bottom))}
.kit-viewer__title{color:var(--kit-dialog-fg);font-weight:600}
.kit-viewer__count{font-variant-numeric:tabular-nums;opacity:.8}
.kit-player__fig{margin:0;display:grid;justify-items:center;gap:12px;padding:64px 16px 24px;width:100%;height:100%;box-sizing:border-box;grid-template-rows:minmax(0,1fr) auto}
.kit-player__video{height:100%;max-width:100%;aspect-ratio:var(--kit-ar,9/16);border-radius:14px;background:#000;object-fit:contain}
.kit-player__cap{color:var(--kit-dialog-muted);font-size:15px;text-align:center}
.kit-player__video::-webkit-media-controls-mute-button,.kit-player__video::-webkit-media-controls-volume-slider,.kit-player__video::-webkit-media-controls-volume-control-container{display:none}   /* clips are silent */
@media (max-width:640px){
  .kit-viewer__fig{padding:64px 8px 16px}
  .kit-nav{top:auto;bottom:max(16px,env(safe-area-inset-bottom));transform:none}
  .kit-viewer__cap{padding-inline:60px}
}