.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;container-type:inline-size}.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-label{display:none}.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,.shot-tap.is-luar .shot-tap-label{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.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 .shot-tap-ring{width:24px;height:24px;margin:-12px 0 0 -12px}.shot-tap.is-rapat .shot-tap-label.right{left:22px}.shot-tap.is-rapat .shot-tap-label.left{right:22px}.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-tap-label{white-space:nowrap;font-family:var(--font-mono);background:var(--ink);color:#fff8ec;border:1.5px solid var(--brand);border-radius:4px;padding:5px 7px;font-size:12px;font-style:normal;font-weight:700;line-height:1;position:absolute;top:50%;transform:translateY(-50%)}.shot-tap-label.right{left:27px}.shot-tap-label.left{right:27px}.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-label{width:max-content;max-width:calc(var(--ruang,100) * 1cqw - 8px);white-space:normal;line-height:1.2;font-family:var(--font-mono);background:var(--brand);color:#1a150f;border-radius:4px;padding:3px 6px;font-size:10.5px;font-style:normal;font-weight:700;line-height:1;position:absolute;left:-2.5px;box-shadow:0 0 0 1.5px #ffffffe6}.shot-box-label.is-right{left:auto;right:-2.5px}.shot-box.tone-green .shot-box-label{background:#21c17a}.shot-box.tone-red .shot-box-label{color:#fff;background:#ff4d4d}.shot-box-label.top{border-radius:4px 4px 4px 0;bottom:calc(100% + 3px)}.shot-box-label.bottom{border-radius:0 4px 4px;top:calc(100% + 3px)}.shot-box-label.inside{border-radius:4px 4px 4px 0;top:-2.5px}.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 img{border:3px solid #fff;border-radius:22px;width:auto;max-width:min(94vw,430px);height:auto;max-height:calc(100dvh - 118px);display:block}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}
