@font-face{font-family:Geist Variable;src:url(../../../fonts/GeistVF.woff)}*{box-sizing:border-box}body{background:#f1f5f9;margin:0;padding:0;font-family:Geist Variable,sans-serif;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}.app-top{background:#fff;padding:2rem 6vw}.app-top .app-nav{display:flex;justify-content:space-between}.app-top .app-nav .logo{display:flex;align-items:center;gap:2px}.app-top .app-nav .logo h2{font-weight:575;letter-spacing:-.05em;font-size:20px;margin:0}.app-top .app-nav .nav-right{display:flex;gap:.25rem}.app-top .app-nav .nav-right button,.app-top .app-nav .nav-right a{padding:.25rem .5rem;aspect-ratio:1/1;border:none;background:transparent;border-radius:4px;position:relative;display:block;color:inherit;display:flex;justify-content:center;align-items:center;transition:.2s ease}.app-top .app-nav .nav-right button svg,.app-top .app-nav .nav-right a svg{transition:.2s ease}.app-top .app-nav .nav-right button:hover,.app-top .app-nav .nav-right a:hover{background:#e5e7eb;cursor:pointer}.app-top .app-nav .nav-right button:hover svg,.app-top .app-nav .nav-right a:hover svg{transform:rotate(10deg) scale(1.05)}.app-top .app-nav .nav-right button:active svg,.app-top .app-nav .nav-right a:active svg{transform:rotate(10deg) scale(.95)}.app-top .app-nav .nav-right button:after,.app-top .app-nav .nav-right a:after{content:attr(data-title);position:absolute;bottom:-1.75rem;left:50%;transform:translate(-50%) scale(.5);opacity:0;width:max-content;background:#f9fafb;padding:4px;border-radius:4px;font-family:Geist Variable,sans-serif;font-weight:450;font-size:.75rem;transform-origin:top center;transition:.2s ease;transition-delay:0s}.app-top .app-nav .nav-right button:hover:after,.app-top .app-nav .nav-right a:hover:after{transition-delay:.25s;transform:translate(-50%) scale(1);opacity:1}.app-top .app-header{padding-top:6rem}.app-top .app-header h1{font-weight:450;font-size:2.5rem;letter-spacing:-.015em;margin:0 0 .5em}@media (max-width: 950px){.app-top .app-header h1{font-size:2rem}}@media (max-width: 500px){.app-top .app-header h1{font-size:1.5rem}}.app-top .app-header .filters{display:flex;gap:.5rem;flex-wrap:wrap}.app-top .app-header .filters .header-button{display:flex;justify-content:center;align-items:center;width:max-content;background:#f1f5f9;border:none;padding:8px 16px;border-radius:32px;color:#4b5563;font:inherit;font-size:16px;transition:.1s ease}.app-top .app-header .filters .header-button:hover{color:#000;cursor:pointer}.app-top .app-header .filters .toggle{gap:6px}.app-top .app-header .filters .toggle svg{margin-bottom:1px}.app-top .app-header .filters .toggle.selected{background:#000;color:#fff}.app-top .app-header .filters .filter{background:#fff;border:1px solid #E5E7EB;gap:6px}.app-top .app-header .filters .filter .badge{display:block;background:#e2e8f0;width:22px;height:22px;border-radius:50%;font-size:14px;display:flex;justify-content:center;align-items:center;transition:.1s ease}.app-top .app-header .filters .filter .badge.filters-active{background:#000;color:#fff}.app-top .app-header .filters .filter.active{background:#f8fafc}.app-top .app-header .filter-wrapper{position:relative}.app-top .app-header .filter-popup{position:absolute;bottom:-.5rem;transform:translateY(100%);left:0;z-index:2;background:#fff;border:1px solid #E5E7EB;width:25rem;height:20rem;border-radius:.5rem;display:flex;flex-direction:column;transition:.2s ease;transform-origin:20px top}.app-top .app-header .filter-popup.hidden{transform:translateY(100%) scale(.9);opacity:0;pointer-events:none}.app-top .app-header .filter-popup .popup-top:has(.selected-filters){border-bottom:1px solid #E5E7EB}.app-top .app-header .filter-popup .popup-top .selected-filters{display:flex;flex-wrap:wrap;padding:1rem;gap:.5rem}.app-top .app-header .filter-popup .popup-top .selected-filters .selected-filter{display:flex;justify-content:center;align-items:center;gap:6px;padding:4px 8px;border-radius:32px;color:#4b5563;font-size:16px;background:#f1f5f9}.app-top .app-header .filter-popup .popup-top .selected-filters .selected-filter button{display:flex;justify-content:center;align-items:center;width:22px;height:22px;padding:none;background:#e2e8f0;border:none;border-radius:50%;transition:.2s ease}.app-top .app-header .filter-popup .popup-top .selected-filters .selected-filter button:hover{background:#cbd5e1;cursor:pointer}.app-top .app-header .filter-popup .popup-bottom{display:flex;flex-grow:1;min-height:0}.app-top .app-header .filter-popup .popup-bottom .filter-categories{display:flex;flex-direction:column;padding:1.5rem 2rem 1.5rem 1.5rem;gap:.5rem;border-right:1px solid #E5E7EB}.app-top .app-header .filter-popup .popup-bottom .filter-categories label{color:#94a3b8;display:flex;justify-content:center;align-items:center;justify-content:flex-start;gap:4px;transition:.2s ease}.app-top .app-header .filter-popup .popup-bottom .filter-categories label:hover{color:#64748b;cursor:pointer}.app-top .app-header .filter-popup .popup-bottom .filter-categories label:has(input:checked){color:#000}.app-top .app-header .filter-popup .popup-bottom .filter-categories label input{display:none}.app-top .app-header .filter-popup .popup-bottom .filter-results{height:100%;flex-grow:1;padding:1.5rem 1rem;overflow-y:auto}.app-top .app-header .filter-popup .popup-bottom .filter-results .results-wrapper{display:flex;flex-direction:column;gap:2px}.app-top .app-header .filter-popup .popup-bottom .filter-results .potential-filter{background:transparent;display:flex;justify-content:center;align-items:center;justify-content:flex-start;gap:6px;border:none;font:inherit;width:100%;border-radius:4px;color:#1e293b;padding:4px 8px;transition:.2s ease}.app-top .app-header .filter-popup .popup-bottom .filter-results .potential-filter.selected{opacity:.5}.app-top .app-header .filter-popup .popup-bottom .filter-results .potential-filter .icon{color:#1e293b;background:#e2e8f0;border-radius:50%;width:24px;height:24px;display:flex;justify-content:center;align-items:center}.app-top .app-header .filter-popup .popup-bottom .filter-results .potential-filter:hover{background:#f8fafc;color:#000;cursor:pointer}.app-top .app-header .filter-popup .popup-bottom .filter-results .potential-filter:hover .icon{color:#000}.app-top .app-header .header-buttons{display:flex;justify-content:center;align-items:center;justify-content:space-between}.app-top .app-header .header-buttons .dropdown-controls{aspect-ratio:1/1;border-radius:100%;display:grid;place-items:center;background:transparent;border:1px solid #E5E7EB}.grid{flex:1;padding:2rem 6vw;display:flex;gap:24px;flex-wrap:wrap;position:relative}.grid .card{height:fit-content;margin:0;padding:calc(9*(.125vw + 1px)) calc(16*(.125vw + 1px));position:relative;flex-basis:450px;flex-grow:1;background:#cbd5e1;color:inherit;border-radius:4px;transition:.5s cubic-bezier(.65,0,.35,1)}.grid .card:hover{padding:0;cursor:none}.grid .card:hover .open{opacity:1;transform:scale(1)}.grid .card:active{transition:.2s cubic-bezier(.65,0,.35,1);padding:.45rem .8rem;color:inherit}.grid .card:active .open .out svg{transform:scale(.8) rotate(-10deg)}.grid .card img{display:block;max-width:100%;aspect-ratio:16/9;border-radius:4px}.grid .card .open{display:flex;gap:4px;width:max-content;z-index:2;pointer-events:none;position:absolute;transition:opacity .1s ease,transform .1s ease;opacity:0;transform:scale(.5)}.grid .card .open .out{background:#f8fafc;border-radius:32px;color:#000;border:1px solid #E5E7EB;display:flex;justify-content:center;align-items:center;padding:7px}.grid .card .open .out svg{transition:.2s ease}.grid .card .open h3{margin:0;background:#f8fafc;border-radius:32px;padding:6px 12px;font-size:14px;font-weight:400;border:1px solid #E5E7EB;display:flex;justify-content:center;align-items:center}.grid .none-found{background:#fbd770;padding:4rem 2rem 2rem;width:16rem;height:16rem;margin:auto;transform:rotate(var(--rotation));display:flex;justify-content:center;align-items:center;flex-direction:column;align-items:flex-start;justify-content:space-between;box-shadow:0 16px 72px 20px #0000000f}.grid .none-found h3{font-size:2rem;font-weight:500;margin:0;letter-spacing:-.03em}.grid .none-found a{color:inherit;transition:.2s ease;color:#475569;text-decoration:underline solid rgba(0,0,0,.25)}.grid .none-found a:hover{opacity:.8}.grid .none-found:after{content:"";width:6rem;height:3rem;position:absolute;top:-1.25rem;left:50%;background:#d8d8d880;transform:translate(-50%) rotate(calc(var(--rotation) * -1));clip-path:polygon(0% 0%,5% 10%,0% 20%,5% 30%,0% 40%,5% 50%,0% 60%,5% 70%,0% 80%,5% 90%,0% 100%,100% 100%,95% 90%,100% 80%,95% 70%,100% 60%,95% 50%,100% 40%,95% 30%,100% 20%,95% 10%,100% 0)}
