:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #000; color: #f3f3f4; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { min-width: 320px; margin: 0; background: #000; } a { color: inherit; text-decoration: none; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.topbar { position: sticky; z-index: 30; top: 0; display: flex; height: 81px; padding: 0 clamp(22px, 6vw, 121px); align-items: center; gap: 33px; border-bottom: 1px solid #2e2e34; background: #19191d; }.brand { color: #aa55ff; font-size: 41px; font-weight: 1000; letter-spacing: -.08em; }.main-nav { display: flex; align-items: center; gap: 30px; }.main-nav a { color: #b6b5bd; font-size: 16px; font-weight: 650; white-space: nowrap; }.main-nav a:hover { color: #fff; }.main-nav span { padding-left: 4px; color: #bbb9c4; font-size: 18px; }.search { display: flex; width: min(31vw, 530px); height: 46px; margin-left: auto; overflow: hidden; border: 1px solid #6d6d75; border-radius: 999px; background: #08080a; }.search input { width: 100%; min-width: 0; height: 100%; padding: 0 17px; color: #fff; outline: 0; border: 0; background: transparent; font-size: 15px; }.search input::placeholder { color: #77777d; }.search button { display: grid; width: 50px; flex: 0 0 50px; place-items: center; color: #f2f2f5; border: 0; border-left: 1px solid #6d6d75; background: transparent; cursor: pointer; font-size: 28px; }.utility { display: flex; gap: 17px; }.utility a { color: #d1d0d7; font-size: 24px; line-height: 1; }
.page { width: min(100%, 1808px); padding: 22px clamp(22px, 6vw, 121px) 70px; margin: 0 auto; }.video-section h1 { margin: 0 0 20px; color: #f4f4f5; font-size: 25px; letter-spacing: -.05em; }.video-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 10px; }.video-tile { position: relative; min-width: 0; aspect-ratio: 1.75; overflow: visible; border-radius: 4px; background: #25252a; }.video-tile video { display: block; width: 100%; height: 100%; overflow: hidden; object-fit: cover; border-radius: 4px; filter: saturate(.76) contrast(1.05); transition: transform .24s ease, filter .24s ease; }.video-tile:hover video { filter: saturate(1) contrast(1.08); transform: scale(1.025); }.video-tile::after { position: absolute; right: 0; bottom: 22px; left: 0; height: 43%; border-radius: 0 0 4px 4px; content: ""; pointer-events: none; background: linear-gradient(transparent, rgba(0,0,0,.74)); }.views { position: absolute; z-index: 2; bottom: 27px; left: 7px; padding: 3px 5px; color: #e8e8ea; border-radius: 4px; background: rgba(30,30,33,.75); font-size: 11px; font-weight: 750; }.video-tile b { position: absolute; z-index: 2; bottom: 0; left: 7px; color: #e8e8ea; font-size: 14px; font-weight: 800; line-height: 17px; white-space: nowrap; }
@media (max-width: 1280px) { .topbar { padding-right: 38px; padding-left: 38px; gap: 23px; }.main-nav { gap: 19px; }.main-nav a { font-size: 14px; }.page { padding-right: 38px; padding-left: 38px; }.video-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 930px) { .topbar { height: 70px; padding: 0 22px; }.brand { font-size: 34px; }.main-nav { display: none; }.search { width: min(52vw, 430px); }.page { padding: 22px 22px 56px; }.video-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .topbar { height: 63px; padding: 0 15px; gap: 13px; }.brand { font-size: 29px; }.search { height: 37px; flex: 1; width: auto; }.search input { padding: 0 10px; font-size: 12px; }.search button { width: 38px; flex-basis: 38px; font-size: 22px; }.utility { display: none; }.page { padding: 18px 15px 46px; }.video-section h1 { font-size: 21px; }.video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 8px; }.video-tile { aspect-ratio: 1.45; }.video-tile b { font-size: 13px; }.views { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }