.video-page{--video-ink:var(--browse-ink);--video-muted:var(--browse-muted);--video-line:var(--browse-line);--video-surface:var(--browse-layout);--video-paper:var(--browse-paper);--video-accent:var(--browse-primary);color:var(--video-ink);font-size:14px;line-height:1.5}.video-page *{box-sizing:border-box}.video-page :is(h1,h2,p){margin:0}.video-page :is(a,button,input,select):focus-visible{outline:2px solid var(--video-accent);outline-offset:4px}.video-page a{color:inherit;text-decoration:none}.video-page button,.video-page select{cursor:pointer;font:inherit}.video-toolbar{align-items:center;display:flex;gap:20px;justify-content:space-between;margin-bottom:18px}.video-toolbar h2{align-items:center;display:flex;font-size:20px;font-weight:600;gap:10px}.video-toolbar h2>span:not(.iconify){color:var(--video-muted);font-size:13px;font-weight:400}.video-sort{align-items:center;color:var(--video-muted);display:flex;font-size:13px;gap:10px;white-space:nowrap}.video-sort select{background:var(--video-paper);border:1px solid var(--video-line);border-radius:6px;color:var(--video-ink);min-height:36px;padding:7px 10px}.video-categories{background:var(--video-paper);border:1px solid var(--video-line);border-radius:8px;display:flex;gap:6px;margin-bottom:24px;overflow-x:auto;padding:12px;scrollbar-width:thin}.video-categories a{border-radius:6px;color:var(--video-muted);flex-shrink:0;padding:8px 16px;white-space:nowrap}.video-categories a:hover,.video-categories a[aria-current=page]{background:var(--browse-selected);color:var(--video-accent)}.video-categories a[aria-current=page]{font-weight:500}.video-context{align-items:center;color:var(--video-muted);display:flex;font-size:13px;gap:16px;justify-content:space-between;padding:0 0 20px}.video-context a{color:var(--video-accent);flex-shrink:0}.video-grid{-moz-column-gap:20px;column-gap:20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0;row-gap:28px}.video-grid li{min-width:0}.video-card{display:block}.video-cover{aspect-ratio:16/9;background:var(--video-surface);border-radius:8px;overflow:hidden;position:relative}.video-cover img{display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.video-duration{background:#000000d1;border-radius:4px;bottom:8px;color:#fff;font-size:12px;font-variant-numeric:tabular-nums;font-weight:600;line-height:1.4;padding:2px 5px;position:absolute;right:8px}.video-watch{background:#000000c7;border-radius:8px;color:#fff;display:grid;height:32px;opacity:0;place-items:center;position:absolute;right:10px;top:10px;width:32px}.video-watch svg{height:20px;stroke:currentColor;stroke-width:1.8;width:20px}.video-card:is(:hover,:focus-visible) .video-watch{opacity:1}.video-card:hover h2{color:var(--video-accent)}.video-info{padding:12px 2px 0}.video-info h2{display:-webkit-box;font-size:16px;font-weight:600;-webkit-line-clamp:2;line-height:1.5;-webkit-box-orient:vertical;margin-bottom:5px;overflow:hidden;overflow-wrap:anywhere}.video-creator,.video-meta{color:var(--video-muted);font-size:13px;line-height:1.7;overflow-wrap:anywhere}.video-meta{display:flex;flex-wrap:wrap;gap:7px}.video-cover-fallback{align-items:center;color:var(--video-muted);display:flex;font-size:13px;gap:12px;height:100%;justify-content:center}.video-cover-fallback svg{height:32px;stroke:currentColor;stroke-width:2;width:42px}.video-inline-error{color:var(--video-muted);padding:0 0 16px}.video-inline-error button{background:none;border:0;color:var(--video-accent);text-decoration:underline}.video-pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:36px}.video-pagination a{background:var(--video-paper);border:1px solid var(--video-line);border-radius:6px;padding:8px 14px}.video-pagination a[aria-current=page]{border-color:var(--video-accent);color:var(--video-accent)}@media(prefers-reduced-motion:no-preference){.video-watch{transition:opacity .15s ease-out}.video-info h2{transition:color .15s ease-out}}@media(max-width:1250px){.video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:900px){.video-grid{gap:24px 16px;grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.video-toolbar h2{font-size:18px;gap:6px}.video-sort{gap:5px}.video-categories{gap:4px;padding:8px}.video-categories a{font-size:13px;padding:9px 11px}.video-context{font-size:12px}.video-grid{grid-template-columns:minmax(0,1fr);row-gap:24px}.video-info{padding:10px 2px 0}.video-watch{height:28px;opacity:1;right:8px;top:8px;width:28px}}
