.header-container{text-align:center;max-width:760px;margin:0 auto;padding:1.4rem 1.5rem 1.2rem}.header-container .section-intro p{color:color-mix(in oklab, var(--text) 68%, var(--muted) 32%);margin:.4rem 0}.header-container .section-intro a{color:#87ceeb;text-shadow:0 0 2px #1e90ff,0 0 1px #1e90ff}.header-container .section-intro a:hover{color:#b3e9ff;text-shadow:0 0 4px #6fc6e8,0 0 6px #1e90ff;text-decoration:underline}.header-container h1{margin:0}.card-section{max-width:1200px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)}.card-list{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));justify-content:center;align-items:stretch;gap:clamp(1.1rem,1rem + 1vw,1.8rem);margin:clamp(1.5rem,1.2rem + 2vw,3rem) auto;padding:0;list-style:none;display:grid}@media (width>=768px){.card-list{grid-template-columns:repeat(2,minmax(0,1fr));max-width:960px}}@media (width>=1120px){.card-list{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}}@keyframes cardFadeIn{to{opacity:1;transform:none}}.card-container{background:var(--surface);border-radius:var(--radius);border:1px solid color-mix(in oklab, var(--border) 85%, transparent 15%);width:100%;max-width:none;box-shadow:0 10px 24px color-mix(in oklab, var(--text) 10%, transparent 90%);opacity:0;animation:.35s cubic-bezier(.3,.5,.6,1.2) forwards cardFadeIn;animation-delay:calc(min(var(--card-index,0), 5) * .18s);transition:transform .18s,box-shadow .18s,border-color .18s,background .18s;display:flex;transform:translateY(12px)scale(.98)}.card-container:hover,.card-container:focus-within{background:color-mix(in oklab, var(--surface-raised) 75%, var(--surface) 25%);border-color:color-mix(in oklab, var(--accent) 45%, var(--border) 55%);box-shadow:0 18px 36px color-mix(in oklab, var(--text) 14%, transparent 86%);transform:translateY(-4px)}.card-container>a{color:inherit;flex-direction:column;flex:1;gap:.75rem;padding:clamp(1rem,.9rem + .8vw,1.4rem);text-decoration:none;display:flex}.card-container .content-thumbnail{aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--radius) - 6px);border:1px solid color-mix(in oklab, var(--border) 70%, transparent 30%);width:100%;box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--surface) 50%, transparent 50%);background:color-mix(in oklab, var(--surface-raised) 60%, transparent 40%)}.card-container>a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:calc(var(--radius) - 2px)}.card-title{font-size:1.25rem;line-height:1.3;font-family:var(--font-serif);color:var(--text);margin:0}.card-subtitle{color:color-mix(in oklab, var(--muted) 80%, transparent 20%);margin:0;font-size:1rem}.card-meta{flex-wrap:wrap;gap:.5rem;margin:.2rem 0 0;display:flex}.card-genre{letter-spacing:.02em;background:color-mix(in oklab, var(--surface-raised) 82%, transparent 18%);border:1px solid color-mix(in oklab, var(--border) 70%, transparent 30%);color:color-mix(in oklab, var(--text) 80%, var(--muted) 20%);border-radius:999px;align-items:center;padding:.2em .8em;font-size:.85rem;font-weight:600;display:inline-flex}.card-description{color:color-mix(in oklab, var(--text) 88%, var(--muted) 12%);flex:1;margin:0;font-size:.98rem;line-height:1.6}@media (width<=700px){.header-container{padding:1.8rem 1.25rem 1rem}.card-list{grid-template-columns:1fr}}.emoji-nav-row{gap:.3em;margin:.7em 0;display:flex}.emoji-nav{color:#ff5f1f;background:#232622;border:2px solid #ff5f1f77;border-radius:50%;justify-content:center;align-items:center;width:2.2em;height:2.2em;margin-right:.13em;font-size:1.18em;text-decoration:none;transition:box-shadow .18s;display:inline-flex;box-shadow:0 0 6px #b64d2488}.emoji-nav:hover{color:#fff;background:#b64d24ee;border-color:#ff5f1f;box-shadow:0 0 14px #ff5f1f,0 0 6px #ff5f1f77}.emoji-nav-row{flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:.6em;margin:.7em 0 .1em;display:flex}.emoji-nav-row img{object-fit:cover;border-radius:.5rem;flex-shrink:0;max-width:4.5rem;max-height:4.5rem;margin-left:auto;box-shadow:0 0 .4rem #00000059}.emoji-nav-col{flex-direction:column;align-items:center;display:flex}.emoji-nav-label{color:#ffebb9;text-shadow:0 0 2px #ff5f1f44;letter-spacing:.01em;opacity:.92;pointer-events:none;user-select:none;margin-top:.23em;font-size:.93em;font-weight:500;line-height:1.08;transition:color .18s}.emoji-nav:hover+.emoji-nav-label,.emoji-nav:focus-visible+.emoji-nav-label{color:#fff;text-shadow:0 0 8px #ff5f1faa}
