*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;font-family:Figtree,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#0e1011;color:#e0e0e0;overflow-x:hidden;cursor:none}.cursor-dot{position:fixed;left:0;top:0;width:14px;height:14px;background:#28282899;border-radius:50%;pointer-events:none;z-index:100}#selector-app{width:100%;min-height:100vh;position:relative}.selector-header{position:fixed;top:0;left:0;right:0;z-index:10;padding:28px 0 48px;background:linear-gradient(to bottom,#0e1011e6,#0e101100);pointer-events:none;text-align:center}.selector-header h1{font-size:.75rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:#ffffffb3}.selector-footer{position:fixed;bottom:0;left:0;right:0;z-index:10;padding:48px 0 28px;background:linear-gradient(to top,#0e1011e6,#0e101100);pointer-events:none;text-align:center}.selector-footer span{font-size:.7rem;font-weight:300;letter-spacing:.15em;text-transform:uppercase;color:#fff6}.error{color:#c66;font-size:1rem;text-align:center;padding:80px 24px}.card-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:minmax(140px,1fr);grid-auto-flow:dense;gap:5px}.card{position:relative;overflow:hidden;cursor:pointer;border:none;border-radius:6px;background:#1a1b1e;font-family:inherit;color:inherit;padding:0;text-align:left;width:100%;aspect-ratio:3 / 4}.card.title-card{cursor:default;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:22px;background:#0e1011}.card.title-card h2{font-size:1.3rem;font-weight:300;color:#fff;text-transform:uppercase;letter-spacing:.04em;margin:0 0 12px;line-height:1.2}.card.title-card p{font-size:.82rem;font-weight:300;color:#ffffff80;line-height:1.6;margin:4px 0 0}.card.title-card p:first-of-type{margin-top:0}.card.title-card p:last-of-type{margin-top:12px}.card.title-card .line-accent{display:inline-block;width:24px;height:1px;background:#ffffff4d;vertical-align:middle}.card.title-card a{color:#ffffffb3;text-decoration:none}.card.title-card a:hover{color:#fff;text-decoration:underline}.card.span-col-2{grid-column:span 2}.card.span-row-2{grid-row:span 2;aspect-ratio:auto}.card.span-col-2.span-row-2{aspect-ratio:auto}.card.span-col-2:not(.span-row-2){aspect-ratio:auto}.card-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease,filter .6s ease}.card:hover .card-image{transform:scale(1.03)}.card-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:300;color:#ffffff40;letter-spacing:.05em;transition:filter .6s ease}.card:hover .card-placeholder{filter:brightness(1.15)}.card-overlay{position:absolute;inset:0;background:#0009;opacity:0;transition:opacity .5s ease;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.card:hover .card-overlay{opacity:1}.card-overlay h2{font-size:.8rem;font-weight:300;color:#fff;text-transform:uppercase;letter-spacing:.04em;text-shadow:0 1px 4px rgba(0,0,0,.5);margin:0;line-height:1.3;text-align:center;opacity:0;transform:translateY(-12px);transition:opacity .5s ease,transform .5s ease}.card:hover .card-overlay h2{opacity:1;transform:translateY(0)}.card-overlay .card-category{display:block;font-size:.6rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase;color:#ffffff80;opacity:0;transform:translateY(-8px);transition:opacity .5s ease,transform .5s ease}.card:hover .card-overlay .card-category{opacity:1;transform:translateY(0)}.card-overlay p{font-size:.65rem;font-weight:300;text-transform:uppercase;letter-spacing:.04em;color:#ffffffbf;line-height:1.4;margin:0;text-align:center;opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}.card:hover .card-overlay p{opacity:1;transform:translateY(0)}@media(max-width:1400px){.card-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:1000px){.card-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:810px){.card-grid{grid-template-columns:repeat(2,1fr);gap:4px}.card.span-col-2{grid-column:span 2}}@media(max-width:540px){.card-grid{grid-template-columns:repeat(2,1fr);gap:3px}.card.span-col-2{grid-column:span 1}.card.span-row-2{grid-row:span 1}.card,.card.span-col-2,.card.span-row-2,.card.span-col-2.span-row-2{aspect-ratio:3 / 4}}
