.cardview{display:grid;gap:clamp(10px,2.4vw,16px);justify-items:center;width:100%}.cardview-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}.cardview-back{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 10px;border:1px solid #b6c8b8;border-radius:16px 5px 16px 5px;background:#fffdf6a8;color:#40594f;font-size:11px}.cardview-back:hover{background:#fffdf6;color:var(--ink)}.cardview-back span{font-size:13px;line-height:1}.cardview-count{color:#6b7c74;font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:.1em}.cardview-frame{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(2px,1.5vw,14px);width:100%;max-width:520px;margin-inline:auto}.cardview-arrow{display:grid;place-items:center;width:44px;height:44px;border:1px solid #c1d1c0;border-radius:50%;background:#fffdf6a8;color:#3f5a4e;font-size:20px;line-height:1;transition:background .18s ease,transform .18s ease}.cardview-arrow:hover:not(:disabled){background:#fffdf6;transform:scale(1.06)}.cardview-arrow:disabled{opacity:.35}.cardview-stage{position:relative;justify-self:center;width:min(72vw,360px);max-width:100%;aspect-ratio:63/88;perspective:1250px;cursor:grab;touch-action:pan-y;-moz-user-select:none;user-select:none;-webkit-user-select:none}.cardview.is-grabbed .cardview-stage{cursor:grabbing}.cardview-stage:focus-visible{outline:none}.cardview-stage:focus-visible .cardview-face{outline:2px solid #6b8951;outline-offset:3px}.cardview-object{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(-2deg) rotateY(var(--cardview-turn,0deg))}.cardview-face{position:absolute;inset:0;overflow:hidden;border-radius:4%/2.8%;background:#edf0e6;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 2px 6px #2c4a3a26,0 18px 38px #2c4a3a2e}.cardview-rear{transform:rotateY(180deg)}.cardview-face img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.cardview-sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle at var(--sheen-x,50%) var(--sheen-y,40%),#ffffff8f,transparent 54%),linear-gradient(116deg,transparent 34%,#ffffff5c 50%,transparent 66%);animation:cardview-breathe 6.4s ease-in-out infinite}.cardview-controls{display:flex;gap:4px;padding:3px;border:1px solid #c4d3c2;border-radius:40px;background:#fffdf68f}.cardview-controls button{min-width:72px;min-height:40px;padding:0 16px;border:0;border-radius:30px;background:transparent;color:#40594f;font-size:11px;transition:background .18s ease}.cardview-controls button:hover{background:#cfe0c74d}.cardview-keep{display:grid;gap:6px;justify-items:center}.cardview-star{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;border:1px solid #c1d1c0;border-radius:16px 5px 16px 5px;background:#fffdf68f;color:#40594f;font-size:11px;transition:background .16s ease,color .16s ease}.cardview-star img{width:16px;height:16px;opacity:.45;transition:opacity .16s ease}.cardview-star:hover:not(:disabled){background:#fffdf6;color:var(--ink)}.cardview-star[aria-pressed=true]{background:#f7efd8;border-color:#d9c073;color:var(--ink)}.cardview-star[aria-pressed=true] img{opacity:1}.cardview-star:disabled{opacity:.55;cursor:not-allowed}.cardview-keep-note{line-height:1.5}.cardview-caption,.cardview-keep-note{color:#6b7c74;font-size:10px;text-align:center}.cardview-caption{display:grid;gap:2px;line-height:1.45;text-wrap:balance}.cardview-caption strong{color:var(--ink);font-family:var(--font-serif),Georgia,serif;font-size:19px;font-weight:400;line-height:1.15}.cardview-hint{color:#7d8d84;font-size:9px;letter-spacing:.04em;text-align:center}@keyframes cardview-breathe{0%,to{opacity:.55}50%{opacity:1}}@media (min-width:720px){.cardview-caption{font-size:11px}.cardview-caption strong{font-size:22px}.cardview-hint{font-size:10px}}@media (prefers-reduced-motion:reduce){.cardview-sheen{animation:none;opacity:.7}.cardview-arrow,.cardview-controls button,.cardview-star,.cardview-star img{transition:none}.cardview-arrow:hover:not(:disabled){transform:none}}body:has(#top[data-motion=paused]) .cardview-sheen{animation:none;opacity:.7}body:has(#top[data-motion=paused]) .cardview-arrow{transition:none}