@layer vh-base,vh-part;@layer vh-part{.grid{display:grid;gap:clamp(1.25rem,2.2vw,2rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}.grid.grid-featured{grid-template-columns:repeat(12,1fr);gap:clamp(1.5rem,2.4vw,2.25rem) clamp(1.25rem,2vw,1.75rem)}.grid.grid-featured>.card{grid-column:span 12}@media(min-width:680px){.grid.grid-featured>.card{grid-column:span 6}}@media(min-width:1024px){.grid.grid-featured>.card{grid-column:span 4}.grid.grid-featured>.card:first-child{grid-column:span 8}.grid.grid-featured>.card:first-child .thumb{aspect-ratio:16 / 9}.grid.grid-featured>.card:first-child .card-title{font-size:1.65rem}.grid.grid-featured>.card:first-child .card-desc{font-size:1rem;-webkit-line-clamp:3;line-clamp:3}}:is(.home-flow,.browse-flow) .card .thumb:before{content:"";position:absolute;top:0;right:0;width:52px;height:52px;z-index:3;pointer-events:none;clip-path:polygon(0 0,100% 0,100% 100%);background:linear-gradient(45deg,var(--accent),#f5efe2);transform:scale(0) rotate(-15deg);transform-origin:top right;transition:transform .28s cubic-bezier(.2,.8,.25,1)}:is(.home-flow,.browse-flow) .card:is(:hover,:focus-visible) .thumb:before{transform:scale(1) rotate(0)}.card{--card-tilt: 0deg;display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;position:relative;transition:transform .4s var(--ease),border-color .3s var(--ease),background .3s var(--ease),box-shadow .4s var(--ease);transform-style:preserve-3d;isolation:isolate}.card:before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 2px 0 0 transparent;transition:box-shadow .3s var(--ease)}.card:hover{transform:translateY(-4px);border-color:var(--border-strong);background:var(--bg-raised);box-shadow:var(--shadow-md)}.card:hover:before{box-shadow:inset 3px 0 0 var(--accent)}.card:hover .card-title{color:var(--accent);font-variation-settings:"opsz" 32,"wght" 800}.card:hover .thumb img{transform:scale(1.025)}.card:focus-visible{border-color:var(--accent);background:var(--bg-raised)}.card:focus-visible .card-title{color:var(--accent)}.card:hover .card-arrow{transform:translate(4px,-4px);color:var(--accent)}.thumb{aspect-ratio:16 / 10;overflow:hidden;position:relative;background:var(--bg-inset);border-bottom:1px solid var(--border);isolation:isolate}.thumb:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -1px 0 transparent;transition:box-shadow .3s var(--ease);z-index:2}.card:hover .thumb:after{box-shadow:inset 0 -1px 0 var(--accent)}.thumb img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .6s var(--ease),filter .4s var(--ease);filter:brightness(.96) saturate(.96)}.card-body{padding:1.15rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.55rem;flex:1;position:relative}.card-arrow{position:absolute;top:1.2rem;right:1.3rem;font-family:var(--font-mono);color:var(--fg-quiet);font-size:.9rem;transition:transform .3s var(--ease),color .3s var(--ease);line-height:1}.card-title{margin:0;font-family:var(--font-display);font-weight:700;font-size:1.18rem;line-height:1.35;letter-spacing:0;color:var(--fg);font-variation-settings:"opsz" 24,"wght" 700;transition:color .2s var(--ease),font-variation-settings .3s var(--ease);padding-right:1.5rem;text-wrap:balance}.card-desc{margin:0;color:var(--fg-muted);font-size:.92rem;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-meta{margin-top:auto;padding-top:.6rem;display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}.chip{display:inline-flex;align-items:center;padding:.22rem .62rem;font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--fg-muted);background:transparent;border:1px solid var(--border);border-radius:var(--radius-pill);line-height:1.6;white-space:nowrap}.chip.chip-cat{color:var(--accent);background:var(--accent-wash);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}.chip:has(:lang(ja)),.chip :lang(ja){text-transform:none;letter-spacing:0;font-family:var(--font-body);font-size:.72rem}@supports (animation-timeline: view()){.reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% cover 25%}@keyframes reveal{0%{opacity:1;translate:0 16px}to{opacity:1;translate:0 0}}}}
