:root{color-scheme:dark;--bg:#111;--panel:#202020;--muted:#a0a0a0;--line:#303030;--white:#fafafa}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:var(--bg);color:var(--white);font-family:Arial,Helvetica,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #c2e78d;outline-offset:4px}[hidden]{display:none!important}.shell{width:calc(100% - 64px);max-width:1560px;margin:auto}.icon{height:19px;width:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}.masthead{position:absolute;inset:0 0 auto;z-index:3}.nav{height:60px;display:flex;align-items:center;gap:40px}.brand{display:flex;align-items:center;gap:7px;font-size:17px;letter-spacing:.1px;font-weight:800;white-space:nowrap}.brand svg{width:22px;height:24px;fill:currentColor}.nav-links{display:flex;gap:27px;align-items:center;color:#d4d4d4;font-size:13px}.nav-links a:hover{color:white}.nav-links a.active{color:white}.nav-tools{display:flex;align-items:center;gap:9px;margin-left:auto}.quiet{background:#ffffff14;border:1px solid #ffffff08;border-radius:5px;min-height:36px;padding:8px 13px;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:7px}.quiet:hover{background:#ffffff25}.plain-icon{border:0;background:transparent;width:35px;height:36px;display:grid;place-items:center}.solid{background:var(--white);color:#141414;border:0;border-radius:5px;min-height:37px;padding:10px 23px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:13px;font-weight:600}.solid:hover{background:#ddd}.hero{position:relative;height:374px;isolation:isolate;overflow:hidden}.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%;z-index:-3}.hero:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(7,8,8,.88) 0%,rgba(8,9,9,.56) 37%,rgba(7,8,8,.12) 75%),linear-gradient(0deg,#111 0%,transparent 44%,#0006 100%)}.hero-inner{padding-top:99px;position:relative;height:100%}.hero-label{font-size:10px;text-transform:uppercase;letter-spacing:1.8px;color:#d4d4d4;display:flex;align-items:center;gap:7px;margin-bottom:12px}.hero-label span{display:block;width:5px;height:5px;background:#b8d989;border-radius:50%}.hero h1{font-size:39px;line-height:1.1;letter-spacing:-1.1px;margin:0 0 16px;text-shadow:0 2px 15px #0004}.hero-summary{color:#d0d0d0;max-width:445px;font-size:13px;line-height:1.5;margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.hero-meta{font-size:11px;font-weight:600;margin-bottom:20px;display:flex;gap:8px;align-items:center}.hero-meta span{color:#a8a8a8}.hero-actions{display:flex;gap:8px}.hero-actions .solid{width:226px}.hero-save{width:38px;padding:8px}.hero-save[aria-pressed=true]{background:#fff;color:#111}.hero-switch{display:flex;position:absolute;right:0;bottom:42px;gap:7px}.hero-switch button{border:0;border-radius:3px;width:24px;height:3px;background:#ffffff50;padding:0;position:relative}.hero-switch button:before{content:"";position:absolute;inset:-10px 0}.hero-switch button[aria-pressed=true]{background:#fff}.explore{position:relative;margin-top:-5px;z-index:2}.filter-row{display:flex;gap:6px;align-items:center;overflow:auto;scrollbar-width:none;padding:0 1px 13px}.filter-row::-webkit-scrollbar{display:none}.chip{display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;background:#232323;border:1px solid transparent;border-radius:5px;min-height:33px;padding:7px 11px;font-size:12px;font-weight:600}.chip:hover{background:#333}.chip[aria-pressed=true]{background:#fafafa;color:#171717}.chip .icon{height:14px;width:14px}.chevron{color:#999;font-size:13px}.category-panel{display:flex;gap:8px;flex-wrap:wrap;padding:4px 0 17px}.results-bar{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px;margin:0 0 14px;gap:10px}.results-bar p{margin:0}.results-bar select{background:transparent;color:#bdbdbd;border:0;font-size:11px;cursor:pointer;padding:0 3px;max-width:160px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 17px}.card{min-width:0}.card-art{position:relative;aspect-ratio:16/9;background:#222;overflow:hidden;border-radius:8px}.art-button{display:block;padding:0;border:0;width:100%;height:100%;background:transparent}.card-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s,filter .3s}.card:hover .card-art img{transform:scale(1.025);filter:brightness(1.07)}.platform{position:absolute;right:11px;top:10px;display:grid;place-items:center;border-radius:50%;background:#15151599;width:23px;height:23px;pointer-events:none}.platform svg{width:16px;height:16px}.card-save{position:absolute;right:9px;bottom:9px;width:30px;height:30px;border:1px solid #ffffff30;border-radius:5px;display:grid;place-items:center;background:#151515b8;opacity:0;transition:opacity .2s}.card:hover .card-save,.card:focus-within .card-save,.card-save[aria-pressed=true]{opacity:1}.card-save[aria-pressed=true]{color:#141414;background:#fff}.card-save[aria-pressed=true] svg{fill:currentColor}.card-body{padding:10px 4px 0}.card h2{font-size:15px;margin:0 0 6px;line-height:1.2;letter-spacing:-.25px}.card h2 button{border:0;background:transparent;padding:0;font-weight:700;text-align:left;line-height:1.25}.card h2 button:hover{color:#c2e78d}.card-description{font-size:12px;line-height:1.48;color:#aaa;margin:0 0 7px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.card-meta{font-size:10px;line-height:1.5;color:#c7c7c7;margin:0}.card-meta .separator{padding:0 5px;color:#6d6d6d}.card-meta .demo{color:#c5daae}.end-note{color:#767676;font-size:11px;text-align:center;margin:38px 0 28px}.footer{border-top:1px solid #272727;padding:24px 0 28px;margin-top:28px;display:flex;justify-content:space-between;gap:20px;align-items:center;color:#888;font-size:10px}.footer p{margin:0;line-height:1.8}.footer a{color:#bbb}.footer .preview{letter-spacing:1px;font-size:9px;white-space:nowrap}.empty{text-align:center;padding:65px 15px;color:#aaa}.empty h2{color:#eee;font-size:20px}.empty .solid{margin-top:8px}.skip{position:absolute;top:-100px;z-index:10;background:white;color:black;padding:15px}.skip:focus{top:0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}dialog{padding:0;border:1px solid #3c3c3c;background:#191919;color:#eee;border-radius:12px;width:min(760px,calc(100% - 32px));max-height:90svh;box-shadow:0 20px 90px #0008}dialog::backdrop{background:#000b;backdrop-filter:blur(7px)}.dialog-cover{position:relative;height:290px;background:#222}.dialog-cover img{width:100%;height:100%;object-fit:cover;display:block}.close{position:absolute;top:12px;right:12px;border:1px solid #ffffff30;border-radius:6px;width:33px;height:33px;background:#171717dc;color:white;font-size:23px}.dialog-body{padding:25px}.dialog-body h2{font-size:29px;margin:0 0 12px}.dialog-body p{font-size:13px;color:#aaa;line-height:1.7}.dialog-body .caption{font-size:10px;margin-top:20px}.dialog-body .genre{font-size:11px;color:#bacaad}.search-dialog{width:min(590px,calc(100% - 32px));padding:22px}.search-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.search-title h2{font-size:17px;margin:0}.search-title .close{position:static}.search-box{display:flex;align-items:center;gap:10px;border:1px solid #555;background:#222;border-radius:6px;padding:12px}.search-box input{width:100%;border:0;background:transparent;color:white;outline:none}.search-box:focus-within{outline:2px solid #bbb}.search-help{font-size:11px;color:#999;margin:13px 0 18px}.search-dialog .solid{width:100%}.toast{position:fixed;bottom:23px;left:50%;transform:translateX(-50%);padding:12px 18px;background:white;color:#151515;font-size:12px;border-radius:6px;box-shadow:0 4px 25px #0006;z-index:9;white-space:nowrap}
@media(min-width:1600px){.hero{height:430px}.hero-inner{padding-top:125px}.hero h1{font-size:45px}.hero-summary{max-width:480px}.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.shell{width:calc(100% - 40px)}.nav{gap:24px}.nav-links{gap:17px}.nav-links .optional{display:none}.grid{gap:25px 15px;grid-template-columns:repeat(2,minmax(0,1fr))}.hero{height:380px}.hero:before{background:linear-gradient(90deg,#070808d9,#08090966 80%),linear-gradient(0deg,#111,transparent 75%)}.hero-summary{max-width:410px}.card-save{opacity:1}}
@media(max-width:560px){.shell{width:calc(100% - 32px)}.nav{height:60px;gap:12px}.brand{font-size:14px;gap:5px}.brand svg{width:19px}.nav-links{display:none}.nav-tools{gap:4px}.nav-tools .quiet{font-size:11px;padding:8px}.nav-tools .quiet .icon{width:14px}.saved-label{display:none}.hero{height:370px}.hero-inner{padding-top:111px}.hero h1{font-size:33px}.hero-summary{font-size:12px;max-width:330px}.hero-meta{font-size:10px}.hero-actions .solid{width:190px}.hero-art{object-position:62% center}.hero-switch{bottom:36px}.filter-row{margin-right:-16px;padding-right:16px}.grid{grid-template-columns:minmax(0,1fr);gap:25px}.card h2{font-size:16px}.card-description{font-size:13px}.card-meta{font-size:11px}.footer{align-items:flex-start;flex-direction:column}.dialog-cover{height:205px}.dialog-body{padding:20px}.hero-label{font-size:9px}.results-bar{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before{transition:none!important}}
.hero-video{z-index:-3;opacity:0;transition:opacity .5s}.hero-video.ready{opacity:1}.video-controls{position:absolute;right:0;bottom:68px;display:flex;gap:6px}.video-controls button{width:33px;height:33px;padding:7px;background:#17171780;border:1px solid #ffffff30;backdrop-filter:blur(8px)}.video-controls .icon{width:16px;height:16px}@media(max-width:560px){.video-controls{bottom:56px}.video-controls button{width:30px;height:30px}}

.filter-select{background:#232323;color:#eee;border:1px solid #333;border-radius:5px;padding:8px;max-width:190px}.filter-form{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}.filter-form input{background:#222;color:#fff;border:1px solid #444;border-radius:5px;padding:8px 12px;min-width:140px}.filter-form label{display:flex;align-items:center;gap:8px;font-size:11px;color:#aaa}.pagination{display:flex;align-items:center;justify-content:center;gap:20px;margin:32px 0;font-size:12px}.card h2 a:hover{color:#c2e78d}.sr-data{display:none}.results-actions{display:flex;gap:15px;align-items:center}.text-reset{background:none;border:0;color:#aaa;padding:0;font-size:11px;text-decoration:underline}.hero-save{display:flex;align-items:center;justify-content:center}.hero-save[aria-pressed=true] svg{fill:currentColor}.card-save{opacity:1}.empty-hero{padding-top:130px}.empty-hero p{color:#aaa}@media(max-width:560px){.results-bar{align-items:flex-start}.results-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px}.filter-form label{flex:1}.filter-form select{max-width:100%;width:100%}.filter-form input{width:100%}}

.chip[aria-current="page"]{background:#fafafa;color:#171717}
.svg-definitions{position:absolute;width:0;height:0;overflow:hidden}
.card-preview-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .16s;z-index:1}.preview-playing .card-preview-video{opacity:1}.card-save,.platform{z-index:3}.preview-toggle{position:absolute;left:9px;bottom:9px;z-index:3;border:1px solid #ffffff40;border-radius:5px;background:#141414c9;color:#fff;font-size:10px;padding:7px 9px;opacity:0;transition:opacity .15s;min-height:30px}.card:hover .preview-toggle,.card:focus-within .preview-toggle,.preview-playing .preview-toggle{opacity:1}@media(hover:none){.preview-toggle{opacity:1}}
/* Available demos carry a corner ribbon above artwork and video. */
.demo-ribbon{position:absolute;top:0;left:0;width:88px;height:88px;overflow:hidden;z-index:4;pointer-events:none}.demo-ribbon>span{position:absolute;left:-30px;top:18px;width:130px;height:26px;display:flex;align-items:center;justify-content:center;transform:rotate(-45deg);background:#b7d77c;color:#18230c;font-size:11px;line-height:26px;font-weight:850;letter-spacing:1.2px;box-shadow:0 2px 6px #0003}