/* ------- photo mode ------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:24px}
.grid a{display:block;aspect-ratio:16/9;overflow:hidden;border:2px solid #fff;border-radius:16px;position:relative;box-shadow:var(--shadow-sm);transition:transform .35s var(--spring)}
.grid a:hover{transform:translateY(-6px);z-index:2}
.grid img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--spring)}
.grid a:hover img{transform:scale(1.07)}
.grid .af{position:absolute;inset:0;opacity:0;transition:opacity .2s;pointer-events:none}
.grid a:hover .af{opacity:1}
.grid .af i{position:absolute;width:16px;height:16px;border:2px solid var(--rose)}
.grid .af i:nth-child(1){top:8px;left:8px;border-right:0;border-bottom:0}
.grid .af i:nth-child(2){top:8px;right:8px;border-left:0;border-bottom:0}
.grid .af i:nth-child(3){bottom:8px;left:8px;border-right:0;border-top:0}
.grid .af i:nth-child(4){bottom:8px;right:8px;border-left:0;border-top:0}
.grid .tag{position:absolute;left:0;right:0;bottom:0;font-family:var(--mono);font-size:10px;letter-spacing:1px;color:#fff;background:linear-gradient(0deg,rgba(90,43,62,.9),transparent);padding:18px 10px 8px;transform:translateY(100%);transition:transform .35s var(--spring)}
.grid a:hover .tag{transform:none}
.grid .tag b{color:var(--butter);font-weight:600}
dialog{position:fixed;inset:0;margin:auto;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;border:3px solid #fff;border-radius:18px;background:#fff;padding:0;max-width:96vw;max-height:92vh;box-shadow:var(--shadow);overflow:hidden}
dialog::backdrop{background:rgba(120,80,100,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
dialog img{display:block;width:auto;height:auto;max-width:96vw;max-height:calc(92vh - 8px);object-fit:contain;border-radius:15px}

/* ------- A/B slider ------- */
.ab{position:relative;margin-top:36px;border:3px solid #fff;border-radius:18px;background:#000;overflow:hidden;aspect-ratio:16/9;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;box-shadow:var(--shadow)}
.ab img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ab .ab-top{clip-path:inset(0 calc(100% - var(--cut,50%)) 0 0)}
.ab .ab-line{position:absolute;top:0;bottom:0;left:var(--cut,50%);width:2px;background:var(--rose);box-shadow:0 0 10px rgba(232,106,134,.8);z-index:4;transform:translateX(-1px);pointer-events:none}
.ab .ab-grip{position:absolute;top:50%;left:var(--cut,50%);transform:translate(-50%,-50%);z-index:5;width:44px;height:44px;border-radius:50%;background:conic-gradient(from 210deg,#f2f4f8,#cdd3de,#a9b2c4,#eef1f5,#cdd3de,#f2f4f8);box-shadow:0 4px 12px rgba(120,80,100,.4),inset 0 0 0 2px #fff;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:#6a5a66;letter-spacing:1px;pointer-events:none}
.ab .ab-tag{position:absolute;top:12px;z-index:4;font-family:var(--mono);font-size:10px;letter-spacing:1px;color:#fff;background:rgba(90,43,62,.6);padding:4px 9px;border-radius:999px;pointer-events:none}
.ab .ab-tag.a{left:14px}
.ab .ab-tag.b{right:14px;color:var(--butter)}
.ab .bk{border-color:rgba(255,255,255,.8)}
.ab::after{content:'';position:absolute;top:0;left:8px;right:8px;height:24px;z-index:6;
  background:url('../../../assets/kawaii/f2u/hangingheartlace.png') repeat-x top center / auto 24px;image-rendering:pixelated;pointer-events:none;opacity:.95}
.rv.in .ab-grip{animation:nudge 1.1s .7s 2}
@keyframes nudge{50%{transform:translate(-50%,-50%) scale(1.2)}}