div.note-card,div.note-card-small{--thumbnail-transition-duration: .2s}div.note-card-container{display:flex;gap:8px;overflow:auto;margin-block:1em;scroll-snap-type:x mandatory}div.note-card{position:relative;width:100%;max-width:316px;height:256px;background-color:var(--background-accent);border-radius:16px;transition:scale var(--transition-duration) ease;flex:0 0 auto;scroll-snap-align:center}div.note-card:active{scale:98%}div.note-card .link{position:absolute;inset:0;z-index:1}div.note-card .thumbnail{position:absolute;display:flex;inset:8px;align-items:center;border-radius:8px;overflow:hidden}div.note-card .thumbnail:after{content:"";position:absolute;bottom:0;left:0;right:0;height:200px;background:linear-gradient(transparent,var(--background-accent) 75%)}div.note-card .thumbnail img{width:100%;height:100%;object-fit:cover;filter:blur(2px);scale:102%;transition-property:filter,scale;transition-duration:var(--thumbnail-transition-duration);transition-timing-function:ease}div.note-card:hover .thumbnail img{filter:blur(0px);scale:100%}div.note-card .meta-data{position:absolute;display:flex;flex-direction:column;gap:4px;left:24px;right:24px;bottom:16px}div.note-card .details{margin-top:-4px;flex-wrap:wrap}div.note-card-small-container{display:flex;flex-direction:column;gap:8px;overflow:auto;margin-block:1em}div.note-card-small{position:relative;display:flex;width:100%;padding:8px;background-color:var(--background-accent);box-sizing:border-box;border-radius:16px;transition:scale var(--transition-duration) ease}div.note-card-small:active{scale:98%}div.note-card-small .link{position:absolute;inset:0;z-index:2}div.note-card-small .thumbnail{position:absolute;top:8px;right:8px;bottom:8px;border-radius:8px;overflow:hidden;aspect-ratio:5 / 4}div.note-card-small .thumbnail:after{content:"";position:absolute;background:linear-gradient(90deg,var(--background-accent),transparent);top:0;left:0;bottom:0;width:100%}div.note-card-small .thumbnail img{aspect-ratio:5 / 4;height:100%;object-fit:cover;filter:blur(2px);scale:105%;transition-property:filter,scale;transition-duration:var(--thumbnail-transition-duration);transition-timing-function:ease}div.note-card-small:hover .thumbnail img{filter:blur(0px);scale:100%}div.note-card-small .meta-data{display:flex;flex-direction:column;justify-content:space-between;padding:12px 16px;width:100%;gap:4px;box-sizing:border-box}div.note-card-small .meta-data>*{z-index:1}div:is(.note-card,.note-card-small) .title{font-weight:600;font-size:1.33em;letter-spacing:-.5px;filter:drop-shadow(1px 1px 3px var(--background))}div:is(.note-card,.note-card-small):hover .title{text-decoration:underline}div:is(.note-card,.note-card-small) .author{display:flex;align-items:center;gap:4px;margin-top:4px}div:is(.note-card,.note-card-small) .author:empty{display:none}div:is(.note-card,.note-card-small) .details{display:flex;gap:4px;align-items:center;color:var(--text-mute)}div:is(.note-card,.note-card-small) .details :not(:first-child):before{content:"\b7";margin-right:4px}div:is(.note-card,.note-card-small) .rating{display:flex;align-items:center}div:is(.note-card,.note-card-small) .keyword-container{display:flex;gap:4px;overflow-x:auto;margin-top:8px;z-index:3;text-wrap-mode:nowrap}div:is(.note-card,.note-card-small) .keyword a{all:unset}