.sfl{--sfl-bar:40px;width:100%;max-width:calc(var(--sfi-max) + 2 * var(--sf-gutter));padding:clamp(136px, 17vh, 184px) var(--sf-gutter) 40px;margin:0 auto}.sfl[data-hero]{padding-top:0}.sfl-head{text-align:center;flex-direction:column;align-items:center;display:flex}.sfl-title{color:var(--sf-text);font:600 64px/1 var(--sf-sans);letter-spacing:-.045em}.sfl-sub{color:var(--sf-text-muted);font:400 17px/1.5 var(--sf-sans);font-variant-numeric:tabular-nums;margin-top:16px}.sfl-intro{text-wrap:balance;max-width:34em;margin:0 auto 4px;display:block}.sfl-filters{justify-content:space-between;align-items:center;gap:12px 24px;margin-top:48px;display:flex}.sfl-filters.sfi-rise{animation-delay:.12s}.sfl-filters__scroller{--fade-start:0px;--fade-end:0px;overscroll-behavior-x:contain;scrollbar-width:none;min-width:0;-webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);mask-image:linear-gradient(to right, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);background:#0a0a0a;border-radius:999px;flex:0 .01 auto;padding:4px;overflow-x:auto;box-shadow:inset 0 1px #ffffff09,inset 0 -1px #0009}.sfl-filters__scroller::-webkit-scrollbar{display:none}.sfl-filters__scroller[data-fade~=start]{--fade-start:40px}.sfl-filters__scroller[data-fade~=end]{--fade-end:40px}.sfl-tabs .sfi-slide__btn{height:calc(var(--sfl-bar) - 8px);padding:0 13px;font-size:14px}.sfl-tabs .sfi-slide__mark{background:#1a1a1a;box-shadow:inset 0 1px #ffffff14,0 4px 12px -4px #000000b3}.sfl-tools{flex:0 auto;align-items:center;gap:16px;min-width:0;display:flex}.sfl-search{min-width:168px;height:var(--sfl-bar);cursor:text;transition:background .24s var(--sfi-ease);background:#0a0a0a;border-radius:999px;flex:0 240px;align-items:center;display:flex;position:relative;box-shadow:inset 0 1px #ffffff09,inset 0 -1px #0009}.sfl-search:hover{background:#0e0e0e}.sfl-search:focus-within{background:#131313}.sfl-search svg{fill:none;width:15px;height:15px;stroke:var(--sf-text-faint);stroke-width:1.4px;stroke-linecap:round;pointer-events:none;transition:stroke .24s var(--sfi-ease);position:absolute;left:16px}.sfl-search:focus-within svg{stroke:var(--sf-text-muted)}.sfl-search input{border-radius:inherit;width:100%;height:100%;color:var(--sf-text);font:400 14px/1 var(--sf-sans);background:0 0;border:0;outline:none;padding:0 44px 0 40px}@media (pointer:coarse){.sfl-search input{font-size:16px}}.sfl-search input::placeholder{color:var(--sf-text-faint)}.sfl-search input::-webkit-search-cancel-button{display:none}.sfl-kbd{width:20px;height:20px;color:var(--sf-text-faint);font:400 11px/1 var(--sf-mono);transition:opacity .2s var(--sfi-ease);background:#161616;border-radius:6px;place-items:center;display:grid;position:absolute;right:10px}.sfl-search:focus-within .sfl-kbd{opacity:0}.sfl-free{height:var(--sfl-bar);color:var(--sf-text-muted);font:500 14px/1 var(--sf-sans);white-space:nowrap;cursor:pointer;transition:color .24s var(--sfi-ease);background:0 0;border:0;flex:none;align-items:center;gap:8px;padding:0 4px;display:inline-flex}.sfl-free:hover,.sfl-free[aria-pressed=true]{color:var(--sf-text)}.sfl-free__box{width:16px;height:16px;transition:background .24s var(--sfi-ease), box-shadow .24s var(--sfi-ease);background:#161616;border-radius:5px;place-items:center;display:grid;box-shadow:inset 0 1px #ffffff0f}.sfl-free:hover .sfl-free__box{background:#1c1c1c}.sfl-free__box svg{fill:none;width:12px;height:12px;stroke:var(--sfi-on-bone);stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:12;stroke-dashoffset:12px;transition:stroke-dashoffset .36s var(--sfi-ease)}.sfl-free[aria-pressed=true] .sfl-free__box{background:var(--sfi-bone);box-shadow:none}.sfl-free[aria-pressed=true] .sfl-free__box svg{stroke-dashoffset:0}.sfl-free:focus-visible{outline:none}.sfl-free:focus-visible .sfl-free__box{box-shadow:var(--sf-focus)}.sfl .sfl-grid{margin-top:32px}.sfl-empty{text-align:center;flex-direction:column;align-items:center;gap:16px;padding:120px 0 80px;display:flex}.sfl-empty__title{color:var(--sf-text);font:500 20px/1.3 var(--sf-sans);letter-spacing:-.02em}@media (max-width:1100px){.sfl-filters{flex-direction:column;align-items:stretch}.sfl-filters__scroller{order:2;align-self:flex-start;max-width:100%}.sfl-search{flex:auto;order:-1}}@media (pointer:coarse){.sfl{--sfl-bar:44px}}@media (max-width:700px){.sfl{padding-top:120px}.sfl-title{font-size:48px}.sfl-sub{font-size:16px}.sfl-kbd{display:none}.sfl-filters{gap:12px;margin-top:40px}.sfl-filters__scroller{margin-inline:calc(-1 * var(--sf-gutter));padding:0 var(--sf-gutter);box-shadow:none;scroll-padding-inline:var(--sf-gutter);background:0 0;border-radius:0;align-self:stretch}.sfl-filters__scroller[data-fade~=start]{--fade-start:32px}.sfl-filters__scroller[data-fade~=end]{--fade-end:32px}.sfl-tabs{width:max-content}.sfl-tabs .sfi-slide__btn{height:36px}.sfl .sfl-grid{margin-top:24px}}
