/* rangooo cards: container-query grid, pastel badges, tilt + press */
#view-library{container:lib/inline-size}
#storyGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@container lib (min-width:560px){#storyGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@container lib (min-width:860px){#storyGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}
@container lib (min-width:1180px){#storyGrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}}
@container lib (min-width:1700px){#storyGrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}}
@container lib (min-width:2400px){#storyGrid{grid-template-columns:repeat(8,minmax(0,1fr));gap:28px}}
#storyGrid .story{container:card/inline-size;animation-fill-mode:backwards;transform-style:preserve-3d;will-change:auto}
#storyGrid .story .art{aspect-ratio:1/1}
#storyGrid .story .title{font-size:clamp(14px,6.2cqi,18px);line-height:1.25}
#storyGrid .tmeta{gap:6px;margin-top:6px}
#storyGrid .tmeta>span{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:1;background:var(--tb,#EEF0F4);color:var(--tf,#334);border:1px solid rgba(0,0,0,.04)}
#storyGrid .tmeta>span:nth-child(2){background:#fff;border:1px solid var(--tb,#E3E6EC)}
#storyGrid .tmeta .pips i{background:rgba(0,0,0,.14)}
#storyGrid .tmeta .pips i.on{background:var(--tf,#334)}
@container card (max-width:170px){#storyGrid .tmeta>span{height:22px;padding:0 8px;font-size:11px}#storyGrid .tmeta .pips{display:none}}
/* touch press */
/* desktop tilt (set by cards.js only on fine pointers, strong tiers) */
html[data-tilt] #storyGrid .story:hover{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));box-shadow:0 18px 40px rgba(31,26,20,.18);transition:transform .12s linear,translate .38s,scale .38s,box-shadow .2s}
html[data-tilt] #storyGrid .story:not(:hover){transition:transform .45s cubic-bezier(.34,1.56,.64,1),translate .38s,scale .38s,box-shadow .3s}
html[data-night="1"] #storyGrid .tmeta>span{background:rgba(255,255,255,.1);color:#EAF0F7;border-color:rgba(255,255,255,.14)}
html[data-night="1"] #storyGrid .tmeta>span:nth-child(2){background:transparent}
html[data-night="1"] #storyGrid .tmeta .pips i.on{background:#EAF0F7}
@media (prefers-reduced-motion:reduce){html[data-tilt] #storyGrid .story:hover{transform:none}}