@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#1c2931;--muted:#718087;--canvas:#f3f5f0;--panel:#fffefa;--line:#e1e5dd;--deep:#16202c;--mint:#bfe5ce;--coral:#e9896b;--sun:#f0c75e;--sky:#b8d9e9;--focus:#277e70;--shadow:0 14px 38px rgba(35,54,49,.09)}
*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font:15px/1.5 Manrope,system-ui,sans-serif}body:before{position:fixed;inset:0;z-index:-1;pointer-events:none;content:"";background:radial-gradient(ellipse at 8% 15%,#d9eddd80,transparent 34%),radial-gradient(ellipse at 91% 22%,#f5dfbd66,transparent 30%),radial-gradient(ellipse at 83% 81%,#cde2e980,transparent 34%)}main{max-width:1500px;margin:auto;padding:0 34px 72px}
.hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);align-items:center;min-height:330px;margin:0 -34px;padding:42px max(34px,calc((100vw - 1432px)/2));background:var(--deep);color:#f9faf5}.hero:before,.hero:after{position:absolute;z-index:-1;content:"";border-radius:50%;filter:blur(2px)}.hero:before{width:360px;height:360px;right:9%;top:-240px;background:#e9896b33}.hero:after{width:270px;height:270px;right:39%;bottom:-235px;background:#8ac7ad25}.hero-copy{max-width:650px}.eyebrow{margin:0 0 12px;color:#8bc8a0;font-size:10px;line-height:1.4;letter-spacing:.17em;font-weight:800}.live-dot{display:inline-block;width:7px;height:7px;margin:0 8px 1px 0;border-radius:50%;background:#8bc8a0;box-shadow:0 0 0 4px #8bc8a022}.hero h1{margin:0 0 18px;font-size:clamp(38px,5vw,60px);line-height:1.04;letter-spacing:-.055em;font-weight:800}.hero h1 em{color:#f0c75e;font-style:normal}.hero-copy>p:not(.eyebrow):not(.updated){max-width:560px;margin:0;color:#ccd5d4;font-size:15px}.hero .updated{margin:21px 0 0;color:#9caaa9;font:11px/1.5 'DM Mono',monospace}.hero-art{position:relative;justify-self:center;width:min(100%,410px);height:248px}.art-frame{position:absolute;width:224px;height:146px;border:1px solid #ffffff50;border-radius:15px;box-shadow:0 20px 40px #080f1d55}.frame-back{top:45px;left:45px;transform:rotate(-13deg);background:linear-gradient(140deg,#bfe5ce,#599781)}.frame-mid{top:40px;left:104px;transform:rotate(9deg);background:linear-gradient(140deg,#f0c75e,#e9896b)}.frame-front{top:61px;left:79px;overflow:hidden;display:grid;place-items:center;transform:rotate(-2deg);background:linear-gradient(145deg,#89c1d4 0%,#417889 44%,#1d3644 100%)}.frame-front:before{position:absolute;content:"";width:200px;height:96px;left:10px;bottom:-43px;border-radius:50% 50% 0 0;background:#31534a;box-shadow:0 -25px 0 -7px #729a6c}.frame-front:after{position:absolute;content:"";width:60px;height:60px;right:32px;top:23px;border-radius:50%;background:#f3d57d;box-shadow:0 0 32px #f3d57d80}.frame-front i{z-index:1;width:0;height:0;margin-left:8px;border-top:17px solid transparent;border-bottom:17px solid transparent;border-left:25px solid #fffefa;filter:drop-shadow(0 2px 5px #20344466)}.art-orbit{position:absolute;width:270px;height:175px;left:42px;top:35px;border:1px solid #f0c75e66;border-radius:50%;transform:rotate(-27deg)}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 26px;padding:0 1px}.metric{position:relative;overflow:hidden;padding:17px 20px 16px;border:1px solid #ffffffaa;border-radius:0 0 15px 15px;background:#fffefaad;box-shadow:0 6px 20px #273a3010}.metric:after{position:absolute;content:"";right:0;top:0;width:5px;height:100%;background:var(--metric-color,var(--mint))}.metric:nth-child(2){--metric-color:var(--coral)}.metric:nth-child(3){--metric-color:var(--sky)}.metric:nth-child(4){--metric-color:var(--sun)}.metric b{display:block;font-size:25px;line-height:1.15;letter-spacing:-.04em}.metric span{display:block;margin-top:4px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.panel{padding:26px 28px;margin:22px 0;border:1px solid #e5e8e0;border-radius:18px;background:var(--panel);box-shadow:var(--shadow)}.section-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 22px}.section-head .eyebrow{margin-bottom:5px;color:#438779}.section-head h2,.note h2{margin:0;font-size:23px;line-height:1.2;letter-spacing:-.04em}.section-head p:not(.eyebrow){margin:5px 0 0;color:var(--muted);font-size:13px}.button{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid var(--line);border-radius:999px;color:#44645e;background:#fffefa;text-decoration:none;font-weight:800;font-size:12px;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px);background:#edf7ef}.controls{display:grid;grid-template-columns:minmax(200px,2fr) repeat(4,minmax(130px,1fr));gap:10px}label{display:grid;gap:6px;color:#65737a;font-size:11px;font-weight:800;letter-spacing:.03em}input,select{width:100%;min-width:0;height:42px;padding:9px 11px;border:1px solid #dfe4dd;border-radius:9px;background:#fff;color:var(--ink);font:inherit;font-size:13px}input::placeholder{color:#9aa5a4}input:focus,select:focus{outline:3px solid #bfe5ce88;border-color:var(--focus)}
.active-filter{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:15px 0 17px;padding-bottom:12px;border-bottom:1px solid #edf0e9}.active-filter p{margin:0;color:var(--muted);font-size:12px}.clear{padding:4px 0;border:0;background:transparent;color:#4c8277;font:inherit;font-weight:800;font-size:12px;cursor:pointer}.clear:hover{text-decoration:underline}.video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 18px}.video-card{min-width:0;animation:arrive .4s both;animation-delay:calc(min(var(--card-index),10)*24ms)}@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.thumbnail{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;border-radius:12px;background:linear-gradient(135deg,#d2e6dc,#e7c88d);box-shadow:0 4px 12px #253b3520}.thumbnail img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s cubic-bezier(.2,.75,.25,1),filter .35s}.video-card:hover .thumbnail img{transform:scale(1.045);filter:saturate(1.08)}.thumbnail-wash{position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#13222c44);opacity:.7;transition:opacity .2s}.play-button{position:absolute;z-index:1;left:50%;top:50%;display:grid;place-items:center;width:47px;height:47px;border:1px solid #ffffffaa;border-radius:50%;background:#172b35ad;opacity:0;transform:translate(-50%,-43%) scale(.82);transition:opacity .2s,transform .2s;backdrop-filter:blur(5px)}.play-button span{width:0;height:0;margin-left:3px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid white}.video-card:hover .play-button,.thumbnail:focus-visible .play-button{opacity:1;transform:translate(-50%,-50%) scale(1)}.video-info{padding:11px 2px 0}.video-heading{display:grid;grid-template-columns:33px minmax(0,1fr);gap:9px;align-items:start}.channel-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--avatar-bg,#d8e9dc);color:#31594e;font-size:12px;font-weight:800}.video-card:nth-child(4n+2) .channel-mark{--avatar-bg:#f6ddd2;color:#8d5543}.video-card:nth-child(4n+3) .channel-mark{--avatar-bg:#dce8f0;color:#45627a}.video-card:nth-child(4n+4) .channel-mark{--avatar-bg:#f2e8c8;color:#80672b}.video-copy{min-width:0}.video-title{display:-webkit-box;overflow:hidden;color:#26363b;font-size:13px;font-weight:800;line-height:1.38;text-decoration:none;-webkit-line-clamp:2;-webkit-box-orient:vertical}.video-title:hover{color:#397f72}.channel-name{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:5px 0 0;color:#768389;font-size:10px;line-height:1.4}.date-dot{color:#c2a85b}.playlist-chips{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0 0 42px}.playlist-chip{display:inline-block;max-width:100%;overflow:hidden;padding:3px 7px;border-radius:5px;background:#e9f3eb;color:#4f7460;font-size:9px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.video-card:nth-child(4n+2) .playlist-chip{background:#faeee7;color:#9c634d}.video-card:nth-child(4n+3) .playlist-chip{background:#eaf1f5;color:#587384}.video-card:nth-child(4n+4) .playlist-chip{background:#f7f0da;color:#867339}.extra-chip{background:#edf0ec!important;color:#748078!important}.more{display:block;margin:26px auto 0;padding:11px 20px;border:1px solid #cfded3;border-radius:999px;background:#edf5ee;color:#41695b;font:800 12px Manrope,sans-serif;cursor:pointer;transition:transform .2s,background .2s}.more:hover{transform:translateY(-2px);background:#dcefe0}.more:active,.button:active{transform:translateY(1px) scale(.98)}
.empty{text-align:center;padding:48px 18px;border:1px dashed #b8c8bd;border-radius:14px;background:#f8faf5}.empty h3{margin:0 0 6px}.empty p{color:var(--muted)}code{font:11px 'DM Mono',monospace;background:#edf0e9;border-radius:5px;padding:4px 6px}.empty code{display:inline-block;padding:10px;max-width:100%;overflow:auto;color:#41695b}.note{display:grid;grid-template-columns:58px 1fr;gap:18px;align-items:start;background:#edf4ec;border-color:#dce9dc;box-shadow:none}.note-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:#d0e8d2;color:#35664f;font-size:15px;font-weight:800;letter-spacing:-.07em}.note .eyebrow{margin:2px 0 7px;color:#56806a}.note p:not(.eyebrow){max-width:72ch;margin:8px 0 14px;color:#64766a;font-size:13px}.chips{display:flex;flex-wrap:wrap;gap:7px}.chips span{padding:6px 9px;border:1px solid #d2e1d1;border-radius:999px;background:#f9fcf6;color:#53715c;font-size:10px;font-weight:800}
@media(max-width:1100px){.video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.controls{grid-template-columns:repeat(3,minmax(0,1fr))}.controls label:first-child{grid-column:span 3}}@media(max-width:760px){main{padding:0 16px 42px}.hero{grid-template-columns:1fr;min-height:0;margin:0 -16px;padding:38px 20px 30px}.hero-art{position:absolute;right:-75px;bottom:-88px;width:260px;height:190px;opacity:.36;transform:scale(.82);transform-origin:bottom right}.hero-copy{position:relative;z-index:1}.hero h1{font-size:clamp(38px,10vw,54px);max-width:11ch}.hero-copy>p:not(.eyebrow):not(.updated){max-width:45ch}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 -2px 20px}.metric{padding:13px 15px;border-radius:0 0 12px 12px}.metric b{font-size:22px}.panel{padding:20px 17px;border-radius:15px}.section-head{align-items:flex-start;flex-direction:column}.controls{grid-template-columns:repeat(2,minmax(0,1fr))}.controls label:first-child{grid-column:span 2}.video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:21px 12px}.video-title{font-size:12px}.channel-name{font-size:9px}.playlist-chips{margin-left:0}.note{grid-template-columns:42px 1fr;gap:12px}.note-mark{width:40px;height:40px;border-radius:12px}}@media(max-width:430px){.video-grid{grid-template-columns:1fr;gap:22px}.video-info{padding-top:9px}.video-heading{grid-template-columns:36px minmax(0,1fr);gap:10px}.channel-mark{width:35px;height:35px}.video-title{font-size:14px}.channel-name{font-size:10px}.playlist-chips{margin-left:46px}.hero-art{right:-112px;opacity:.28}.controls{grid-template-columns:1fr}.controls label:first-child{grid-column:auto}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}