.shot{width:min(100%, var(--shot-w,290px));margin:22px auto}.shot-media,.shot-anchor{position:relative}.shot-frame{border:3px solid var(--ink);box-sizing:border-box;box-shadow:var(--shadow-hard);background:#0b0b0d;border-radius:26px;line-height:0;position:relative;overflow:hidden}.shot-zoom{cursor:zoom-in;background:0 0;border:0;width:100%;padding:0;display:block;position:relative}.shot-zoom img{width:100%;height:auto;display:block}.shot-zoom-hint{z-index:3;color:#fff;opacity:0;background:#0c0c0eb8;border:1px solid #ffffff40;border-radius:50%;place-items:center;width:28px;height:28px;font-size:14px;line-height:1;transition:opacity .15s;display:grid;position:absolute;bottom:8px;right:8px}.shot-frame:hover .shot-zoom-hint,.shot-zoom:focus-visible .shot-zoom-hint{opacity:1}@media (hover:none){.shot-zoom-hint{opacity:1;background:#0c0c0edb;width:34px;height:34px;font-size:16px;bottom:7px;right:7px}}.shot-tap{left:var(--tap-x);top:var(--tap-y);z-index:4;pointer-events:none;position:absolute;transform:translate(-50%,-50%)}@media (width<=700px){.shot-media.has-left-taps{padding-left:30px}.shot-media.has-right-taps{padding-right:30px}.shot-tap-dot{width:30px;height:30px}.shot-tap-dot:after{min-width:17px;height:17px;font-size:10.5px;top:-8px;right:-10px}.shot-tap-ring{width:30px;height:30px;margin:-15px 0 0 -15px}}.shot-tap-dot{z-index:2;border:3px solid var(--brand);color:#0000;border-radius:50%;width:34px;height:34px;font-size:0;display:block;position:relative;box-shadow:0 0 0 2px #fffffff2,inset 0 0 0 2px #fffffff2}.shot-tap-dot:after{content:attr(data-n);background:var(--brand);color:#1a150f;min-width:19px;height:19px;font-family:var(--font-mono);border:2px solid #1a150f;border-radius:999px;place-items:center;padding:0 4px;font-size:11.5px;font-weight:700;line-height:1;display:grid;position:absolute;top:-9px;right:-11px;box-shadow:0 0 0 1.5px #fffffff2}.shot-tap-dot[data-n=""]:after{display:none}.shot-tap.is-luar .shot-tap-dot{background:var(--brand);color:#1a150f;font-family:var(--font-mono);border:2.5px solid #1a150f;place-items:center;font-size:13px;font-weight:700;line-height:1;display:grid;box-shadow:0 0 0 2px #fffffff2}.shot-tap.is-luar .shot-tap-dot:before{content:attr(data-n)}.shot-tap.is-luar .shot-tap-dot:after{display:none}.shot-tap.is-luar.is-rapat .shot-tap-dot{border-width:2px;width:20px;height:20px;font-size:11px}.shot-tap.is-luar.is-rapat .shot-tap-ring{width:20px;height:20px;margin:-10px 0 0 -10px}.shot-tap.is-atas .shot-tap-dot:after{top:auto;bottom:-9px}.shot-tap:not(.is-luar){left:clamp(13px, var(--tap-x), calc(100% - 13px));top:clamp(13px, var(--tap-y), calc(100% - 13px))}.shot-tap.is-kanan .shot-tap-dot:after{left:-11px;right:auto}.shot-tap.is-rapat .shot-tap-dot{border-width:2.5px;width:24px;height:24px}.shot-tap.is-rapat .shot-tap-dot:after{min-width:16px;height:16px;padding:0 3px;font-size:10px;top:-8px;right:-9px}.shot-tap.is-rapat.is-kanan .shot-tap-dot:after{left:-9px;right:auto}.shot-tap.is-rapat .shot-tap-ring{width:24px;height:24px;margin:-12px 0 0 -12px}.shot-tap-ring{border:2.5px solid var(--brand);border-radius:50%;width:34px;height:34px;margin:-17px 0 0 -17px;animation:2s ease-out infinite shotPulse;position:absolute;top:50%;left:50%}@keyframes shotPulse{0%{opacity:.9;transform:scale(1)}70%{opacity:0;transform:scale(2.5)}to{opacity:0;transform:scale(2.5)}}@media (prefers-reduced-motion:reduce){.shot-tap-ring{opacity:.5;animation:none;transform:scale(1.7)}}.shot-box{z-index:3;border:2.5px solid var(--brand);pointer-events:none;border-radius:6px;position:absolute;box-shadow:0 0 0 1.5px #ffffffe6,inset 0 0 0 1.5px #ffffffe6}.shot-box.tone-green{border-color:#21c17a}.shot-box.tone-red{border-color:#ff4d4d}.shot-box-tag{background:var(--brand);color:#1a150f;width:15px;height:15px;font-family:var(--font-mono);border-radius:4px;place-items:center;font-size:10px;font-style:normal;font-weight:700;line-height:1;display:grid;position:absolute;top:-12px;left:5px;box-shadow:0 0 0 1.5px #fffffff2}.shot-box-tag.is-tr{left:auto;right:5px}.shot-box-tag.is-bl,.shot-box-tag.is-br{top:auto;bottom:-12px}.shot-box-tag.is-br{left:auto;right:5px}.shot-box-tag.is-dalam.is-tl,.shot-box-tag.is-dalam.is-tr{top:3px}.shot-box-tag.is-dalam.is-bl,.shot-box-tag.is-dalam.is-br{bottom:3px}.shot-box.tone-green .shot-box-tag{background:#21c17a}.shot-box.tone-red .shot-box-tag{color:#fff;background:#ff4d4d}.shot figcaption{color:var(--muted);text-align:center;font-size:14px;line-height:1.5;font-family:var(--font);margin-top:10px}.shot figcaption strong{color:var(--ink-2)}dialog.shot-lightbox{overscroll-behavior:contain;background:0 0;border:0;place-items:center;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;display:grid}dialog.shot-lightbox:not([open]){display:none}dialog.shot-lightbox::backdrop{background:#0a0908e6}dialog.shot-lightbox .shot-lb-close{top:calc(env(safe-area-inset-top,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 12px);z-index:5;border:2.5px solid var(--ink);background:var(--brand);width:48px;height:48px;color:var(--ink);cursor:pointer;box-shadow:0 3px 0 var(--ink);border-radius:50%;place-items:center;font-size:20px;font-weight:700;line-height:1;display:grid;position:fixed}dialog.shot-lightbox .shot-lb-close:active{box-shadow:0 1px 0 var(--ink);transform:translateY(2px)}dialog.shot-lightbox .shot-lb-hint{left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);white-space:nowrap;font-family:var(--font-mono);letter-spacing:.04em;color:#fff8ecd1;pointer-events:none;background:#0a0908eb;border:1px solid #fff8ec38;border-radius:999px;padding:7px 13px;font-size:12px;position:fixed;transform:translate(-50%)}dialog.shot-lightbox .shot-lb-inner{line-height:0;position:relative}dialog.shot-lightbox .shot-lb-cap{top:calc(env(safe-area-inset-top,0px) + 18px);color:#fff8ec;font-family:var(--font-display);text-wrap:balance;margin:0;font-size:clamp(.95rem,3.6vw,1.15rem);line-height:1.25;position:fixed;left:16px;right:76px}dialog.shot-lightbox .shot-lb-inner>.shot{width:auto;margin:0}dialog.shot-lightbox .shot-lb-inner .shot-media{width:var(--lb-w,min(90vw, 430px));margin:0 auto}dialog.shot-lightbox .shot-lb-inner .shot-frame{border-color:#fff}dialog.shot-lightbox .shot-lb-inner .shot-zoom{cursor:default;pointer-events:none}dialog.shot-lightbox .shot-lb-inner .shot-zoom-hint{display:none}.shot-zoom.is-static{cursor:default}figure.shot .shot-legend{font-family:var(--font);color:var(--ink);flex-wrap:wrap;justify-content:center;gap:6px 12px;margin:18px auto 0;padding:0;font-size:13.5px;font-weight:600;line-height:1.3;list-style:none;display:flex}figure.shot .shot-legend li{align-items:center;gap:6px;margin:0;padding:0;display:inline-flex}.shot-legend-n{background:var(--brand);color:#1a150f;min-width:21px;height:21px;font-family:var(--font-mono);box-sizing:border-box;border:2px solid #1a150f;border-radius:999px;flex:none;place-items:center;padding:0 5px;font-size:11.5px;font-weight:700;line-height:1;display:grid}.shot-legend-n[data-n=""]{border:3px solid var(--brand);background:0 0;width:19px;min-width:19px;padding:0}.shot-legend-box{border:2.5px solid var(--brand);box-sizing:border-box;min-width:21px;height:17px;font-family:var(--font-mono);color:#1a150f;border-radius:4px;flex:none;place-items:center;padding:0 4px;font-size:11px;font-weight:700;line-height:1;display:grid}.shot-legend-box:not(:empty){background:var(--brand);border-width:1.5px;border-color:#1a150f}.shot-legend-box.tone-green{border-color:#21c17a}.shot-legend-box.tone-red{border-color:#ff4d4d}.shot-legend-box.tone-green:not(:empty){background:#21c17a;border-color:#1a150f}.shot-legend-box.tone-red:not(:empty){color:#fff;background:#ff4d4d;border-color:#1a150f}dialog.shot-lightbox .shot-legend{color:#fff8ec;margin-top:14px;line-height:1.3}.shot-zoom-label{background:var(--paper-2);width:fit-content;color:var(--ink-2);font-family:var(--font-mono);letter-spacing:.03em;text-align:center;border:1px solid #1a150f2e;border-radius:999px;margin:9px auto 0;padding:3px 10px;font-size:11px;font-weight:700;line-height:1.5}.shot-zoom-label+figcaption{margin-top:6px}.shot-tap-draw{pointer-events:none;width:calc(100% + 6px);max-width:none;height:calc(100% + 6px);display:none;position:absolute;inset:-3px;overflow:visible;transform:rotate(-90deg)}.shot-tap-draw circle{fill:none;stroke:var(--brand);stroke-width:9.5px;stroke-dasharray:1;stroke-dashoffset:1px}@media (prefers-reduced-motion:no-preference){html.js .shot-frame:after{content:"";z-index:2;opacity:0;pointer-events:none;background:#0a09086b;position:absolute;inset:0}html.js .shot.inview .shot-frame:after{animation:2.4s forwards shotScrim}html.js .shot-tap:not(.is-luar) .shot-tap-dot{border-color:#0000}html.js .shot-tap:not(.is-luar) .shot-tap-draw{display:block}html.js .shot.inview .shot-tap-draw circle{animation:shotDraw .65s calc(.25s + var(--i,0) * .35s) ease-out forwards}html.js .shot-tap-dot:after,html.js .shot-tap.is-luar .shot-tap-dot{transform:scale(0)}html.js .shot.inview .shot-tap-dot:after{animation:shotPop .4s calc(.7s + var(--i,0) * .35s) cubic-bezier(.34, 1.56, .64, 1) forwards}html.js .shot.inview .shot-tap.is-luar .shot-tap-dot{animation:shotPop .4s calc(.25s + var(--i,0) * .35s) cubic-bezier(.34, 1.56, .64, 1) forwards}html.js .shot-tap-ring{opacity:0;animation-play-state:paused}html.js .shot.inview .shot-tap-ring{animation:shotPulse 2s calc(1s + var(--i,0) * .35s) ease-out infinite}html.js .shot-box{opacity:0}html.js .shot.inview .shot-box{animation:shotFade .55s calc(.3s + var(--i,0) * .3s) ease forwards}}@keyframes shotScrim{0%{opacity:0}18%{opacity:1}60%{opacity:1}to{opacity:0}}@keyframes shotDraw{to{stroke-dashoffset:0}}@keyframes shotPop{to{transform:scale(1)}}@keyframes shotFade{to{opacity:1}}
