:root{--bg:#fff;--surface:#fff;--ink:#252b38;--muted:#737c8b;--line:#e8eaf0;--soft:#f8f9fb;--blue:#2775d8;--yellow:#ffda54}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{text-decoration:none;color:inherit}button,input{font:inherit}button{cursor:pointer}.container{width:min(1190px,calc(100% - 56px));margin:auto}.topbar{height:69px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.96);position:sticky;top:0;z-index:20}.navinside{height:100%;display:flex;align-items:center;gap:19px}.brand{display:flex;align-items:center;gap:8px;font-size:17px;letter-spacing:-.65px;font-weight:700;white-space:nowrap}.face{display:inline-grid;place-items:center;font-size:29px;line-height:1}.searchWrap{position:relative;flex:1;max-width:315px;margin-left:8px}.searchWrap input{width:100%;border:1px solid #f0f0f3;background:#f5f6f8;border-radius:9px;padding:10px 12px 10px 36px;outline:none;color:#333}.searchWrap input:focus{border-color:#bacdec;background:#fff}.searchIcon{position:absolute;left:12px;top:9px;color:#9198a5;font-size:17px}.navlinks{display:flex;align-items:center;gap:20px;margin-left:auto}.navlinks a{color:#505869;white-space:nowrap}.navlinks a:hover,.navlinks a.active{color:#151921}.navlinks a.active{font-weight:650}.navlinks .new{color:#f49f1f;font-size:10px;background:#fff3da;padding:2px 5px;border-radius:4px}.account{display:flex;align-items:center;gap:15px;white-space:nowrap;margin-left:9px}.account button{background:#fff;border:0;color:#616875;padding:7px 0}.account .signup{color:#212633;font-weight:650}.mobileMenu{display:none;border:0;background:transparent;font-size:23px}.hero{text-align:center;padding:80px 0 47px;overflow:hidden}.hero-image{font-size:56px;filter:drop-shadow(0 8px 13px rgba(245,186,43,.1));margin-bottom:10px}.hero h1{font-size:43px;line-height:1.2;letter-spacing:-1.9px;font-weight:750;margin:0}.hero p{font-size:18px;color:#707784;max-width:740px;margin:19px auto 25px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 17px;border-radius:9px;border:1px solid var(--line);background:white;color:#465064;font-weight:600}.btn.primary{background:#222936;color:white;border-color:#222936;box-shadow:0 3px 7px #00000010}.btn:hover{transform:translateY(-1px);box-shadow:0 4px 13px #00000012}.hero-actions{display:flex;gap:12px;align-items:center;justify-content:center}.hero-art{height:95px;display:flex;justify-content:center;align-items:end;gap:14px;opacity:.75;margin-top:20px}.modelchip{background:#fff;border:1px solid #e9ecf0;box-shadow:0 10px 22px #192b470b;border-radius:12px;padding:12px;font-size:20px;transform:rotate(var(--rot));width:76px;height:57px}.trendingTitle{text-align:center;color:#717b8b;font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:7px;margin:8px 0 22px}.trendingTitle span{font-size:22px}.section{margin:14px 0 36px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.section-header h2{font-size:21px;font-weight:710;letter-spacing:-.55px;margin:0;display:flex;align-items:center;gap:10px}.section-header h2 .symbol{font-size:23px}.section-header a{font-weight:600;color:#66738a;font-size:13px}.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}.tile{min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:15px 14px;min-height:126px;transition:box-shadow .15s,transform .15s;cursor:pointer}.tile:hover{box-shadow:0 8px 24px #1e293b12;transform:translateY(-2px)}.tile-head{display:flex;gap:9px;align-items:center}.avatar{height:30px;width:30px;flex-shrink:0;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:15px;font-weight:700;background:linear-gradient(130deg,#afc6ff,#6475d6)}.tile-name{font-weight:650;color:#252a36;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.tile-desc{font-size:12px;color:#758092;margin:10px 0 0;height:35px;overflow:hidden}.meta{font-size:11px;color:#8993a3;margin-top:12px;display:flex;gap:11px;align-items:center}.spaceCard{padding:0;overflow:hidden}.spacePic{height:105px;display:flex;align-items:center;justify-content:center;background:linear-gradient(120deg,#e0eafc,#e8dff9);font-size:35px}.spaceCard .tile-body{padding:11px 13px}.spaceCard .tile-desc{margin-top:4px;height:32px}.heading-block{text-align:center;padding-top:70px;padding-bottom:25px;border-top:1px solid var(--line);margin-top:70px}.heading-block h2{font-size:33px;letter-spacing:-1px;margin:0}.heading-block p{font-size:17px;color:#808999;margin:7px 0}.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:18px}.feature{border:1px solid var(--line);border-radius:15px;padding:25px;background:linear-gradient(150deg,#fff,#f9fafc);min-height:230px}.feature h3{font-size:19px;letter-spacing:-.5px;margin:0 0 7px}.feature p{color:#7c8593;max-width:370px}.feature-visual{height:95px;margin-top:15px;border-radius:10px;background:linear-gradient(100deg,#f6f8fb,#edf2fd);display:flex;align-items:center;justify-content:center;gap:13px;color:#8598bd}.feature-visual span{padding:9px 14px;border:1px solid #dfe4ed;border-radius:8px;background:#fff}.sectionTitle{font-size:31px;letter-spacing:-1px;text-align:center;margin:80px 0 6px}.sectionSub{text-align:center;color:#8290a0;font-size:16px;margin:0 0 30px}.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.solution{border:1px solid var(--line);border-radius:13px;padding:22px;min-height:210px}.solution h3{font-size:18px}.solution p{color:#777f8d}.solution strong{color:#354155}.orggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:25px}.org{padding:17px;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;gap:10px;font-weight:650}.org small{display:block;font-weight:400;color:#8b94a0}.opensource{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:25px 0 60px}.oss{display:flex;gap:13px;padding:14px;border:1px solid var(--line);border-radius:11px}.oss p{color:#8b95a1;margin:1px 0 0;font-size:12px}.footer{border-top:1px solid var(--line);padding:38px 0 45px;margin-top:65px;color:#6d7584}.footgrid{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:20px}.footgrid h4{margin:0 0 13px;color:#303746}.footgrid a{display:block;margin:9px 0;font-size:13px}.footbrand{font-size:18px;font-weight:700;color:#333}.footbrand span{font-size:23px}.eyebrow{color:#8a95a5;font-size:12px;text-transform:uppercase;letter-spacing:1px;font-weight:700}.catalog{padding:33px 0 70px}.catalog-head h1{font-size:30px;letter-spacing:-1px;margin:2px 0 5px}.catalog-head p{color:#788291;margin:0}.catalog-layout{display:grid;grid-template-columns:245px 1fr;gap:30px;margin-top:30px}.sidebar{border-right:1px solid var(--line);padding-right:20px}.sidebar h3{font-size:13px;margin:0 0 14px}.filter{display:block;width:100%;text-align:left;border:0;background:transparent;border-radius:8px;padding:9px 10px;color:#677281;margin-bottom:3px}.filter.selected,.filter:hover{background:#f3f6fa;color:#222b39;font-weight:650}.results-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line)}.results-head select{border:1px solid var(--line);border-radius:8px;background:white;padding:9px;color:#6b7280}.result{padding:21px 0;border-bottom:1px solid var(--line);display:flex;gap:16px;cursor:pointer}.result h3{font-size:16px;margin:0;color:#2a3445}.result p{color:#7d8895;margin:6px 0}.tag{display:inline-flex;font-size:11px;padding:3px 7px;border:1px solid #e5e9ed;border-radius:5px;margin:4px 5px 0 0;color:#748093}.detail{padding:40px 0}.back{color:var(--blue);font-size:13px}.detail h1{font-size:29px;margin:25px 0 6px;overflow-wrap:anywhere}.detailpanel{border:1px solid var(--line);border-radius:12px;margin-top:25px;padding:30px;min-height:260px}.detailpanel h2{margin-top:0}.detailpanel p{color:#717b8b}.note{background:#fff9e9;border:1px solid #f5e8c9;border-radius:9px;padding:13px 16px;color:#8c7042;margin:16px 0}.empty{text-align:center;padding:70px;color:#8892a0}.menu-pop{position:absolute;right:30px;top:61px;background:white;border:1px solid var(--line);box-shadow:0 12px 40px #0001;padding:10px;border-radius:12px;min-width:180px}.menu-pop a{display:block;padding:10px}.mobileOnly{display:none}@media(max-width:1100px){.navlinks{gap:10px}.navlinks a{font-size:12px}.searchWrap{max-width:200px}.cards{grid-template-columns:repeat(3,1fr)}}@media(max-width:750px){.container{width:min(100% - 30px,1190px)}.topbar{height:60px}.brand{font-size:15px}.searchWrap{max-width:none}.account,.navlinks{display:none}.mobileMenu{display:block;margin-left:auto}.hero{padding:55px 0 25px}.hero h1{font-size:33px}.hero p{font-size:15px}.hero-art{gap:5px}.modelchip{width:52px;padding:8px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.feature-grid,.solution-grid{grid-template-columns:1fr}.orggrid,.opensource{grid-template-columns:repeat(2,1fr)}.catalog-layout{grid-template-columns:1fr}.sidebar{display:flex;flex-wrap:wrap;border-right:0;gap:5px;padding-right:0}.sidebar h3{width:100%}.filter{width:auto}.footgrid{grid-template-columns:repeat(2,1fr)}.footgrid>div:first-child{grid-column:span 2}.heading-block h2,.sectionTitle{font-size:27px}}@media(max-width:420px){.searchWrap{display:none}.cards{grid-template-columns:1fr 1fr}.tile{padding:10px}.orggrid,.opensource{grid-template-columns:1fr}.hero-actions{flex-wrap:wrap}}
/* Screenshot reference recreation */
:root{--ink:#111827;--line:#e9ebef}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;color:#10141c}.container{width:min(1036px,calc(100% - 32px))}.topbar{height:46px;border:0;position:relative}.navinside{gap:14px}.brand{font-size:13px;letter-spacing:-.4px}.face{font-size:19px}.searchWrap{max-width:265px;margin-left:4px}.searchWrap input{height:26px;background:white;border:1px solid #e4e7ec;border-radius:5px;padding:5px 8px 5px 22px;font-size:10px;box-shadow:0 1px 4px #00000007}.searchIcon{font-size:14px;left:7px;top:3px}.navlinks{gap:16px}.navlinks a{font-size:10px;color:#111827}.navlinks .new{color:#275bfc;background:#dbeafe;font-size:8px;font-weight:700}.account{gap:11px;margin-left:3px}.account button{font-size:10px;color:#111827}.account .signup{padding:5px 10px;background:#111827;color:white;border-radius:22px;font-weight:700}.account-menu{color:#8a94a6!important}.reference-home .hero{height:525px;margin-top:26px;margin-bottom:53px;border-radius:18px;background:radial-gradient(ellipse at 65% 57%,#252b37 0%,#0c101a 48%,#0b0f18 85%);position:relative;overflow:visible;padding:0;text-align:left;color:white}.reference-home .hero-copy{position:absolute;top:100px;left:54px;width:390px;z-index:1}.reference-home .hero-image{font-size:46px;margin:0 0 21px}.reference-home .hero h1{font-size:39px;line-height:1.09;letter-spacing:-1.35px;font-weight:750;margin:0}.reference-home .hero p{font-size:12px;line-height:1.7;color:#c8cdd7;margin:29px 0 30px;max-width:310px}.reference-home .hero-actions{justify-content:flex-start;gap:10px;color:#b9becb;font-size:12px}.reference-home .hero-primary{border:1px solid #4b5566;border-radius:22px;padding:7px 17px;color:white;font-size:12px}.reference-home .hero-secondary{border-bottom:1px solid #98a1b2;color:#fff;font-size:12px;padding-bottom:2px}.hero-explorer{position:absolute;z-index:2;right:0;top:-26px;width:528px;height:525px;background:#0b0f19;border:1px solid #222938;border-radius:22px 18px 18px 0;display:flex;flex-direction:column;padding:12px 10px 10px 13px;overflow:hidden;box-shadow:-15px 20px 40px #0000001f;transform:skewX(-.8deg)}.dark-top{height:29px;display:flex;align-items:center;gap:7px;min-width:0}.panel-tabs{display:flex;gap:2px;align-items:center}.panel-tab{font-size:8px;color:#8f97a7;padding:5px 6px;background:none;border:0;border-radius:11px}.panel-tab.selected{background:#1c2534;color:white}.dark-model-counter{white-space:nowrap;color:#657084;font-size:8px;min-width:75px}.dark-model-counter em{font-style:italic;color:#cdd3df;margin-right:3px}.hero-search{border:1px solid #161d2a;background:#0b101a;border-radius:6px;width:110px;min-width:0;color:#f8fafc;outline:none;font-size:8px;padding:6px}.hero-search::placeholder{color:#737d90}.panel-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1;min-height:0}.panel-filters{padding-top:12px;overflow:hidden}.panel-label{font-size:8px!important;color:#858e9f!important;margin:8px 0 7px!important;max-width:none!important}.chips{display:flex;flex-wrap:wrap;gap:5px 4px;margin-bottom:20px}.darkchip{display:flex;gap:4px;align-items:center;background:#151d2b;border:1px solid #1b2636;border-radius:6px;color:#b6bece;font-size:8px;padding:5px 6px;line-height:1;white-space:nowrap;max-width:100%;cursor:pointer}.darkchip:hover,.darkchip.chosen{border-color:#657ba8;color:white;background:#253249}.chipicon{font-size:8px}.range-labels{display:flex;justify-content:space-between;font-size:7px;color:#758095;margin-bottom:5px}#paramRange{width:100%;height:4px;accent-color:#a1aaba;display:block;margin-bottom:19px}.dark-results{min-height:0;overflow:auto;scrollbar-width:none;padding-top:0}.dark-results::-webkit-scrollbar{display:none}.dark-result{display:block;background:#101725;border:1px solid #111a2b;border-radius:6px;padding:7px;margin-bottom:4px;min-height:42px;transition:background .15s}.dark-result:hover{background:#1b2840}.dark-result>div{display:flex;gap:5px;align-items:center;white-space:nowrap;overflow:hidden}.dark-result b{font-size:9px;font-weight:500;color:#cbd3df;text-overflow:ellipsis;overflow:hidden;font-family:monospace}.result-symbol{font-size:9px;color:#afbee6}.dark-result small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#747f92;font-size:7px;margin-top:3px}.dark-empty{color:#a8b3ca;font-size:11px;padding:20px 5px}.dark-all{font-size:9px;color:#9aaace;display:block;text-align:center;padding:7px}.trendingTitle{display:flex;align-items:center;gap:11px;color:#111;font-size:13px;margin:0 0 34px}.trendingTitle strong{white-space:nowrap;font-weight:720}.trendingTitle .rule{height:1px;flex:1;background:linear-gradient(90deg,#fff,#e7e7e9)}.trendingTitle .rule:last-child{background:linear-gradient(90deg,#e7e7e9,#fff)}.trending-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.trend-heading{font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 25px}.trend-heading span{color:#9fa8b4}.trend-items{display:flex;flex-direction:column;gap:7px}.trend-item{height:44px;border:1px solid #eeeef1;border-radius:6px;background:white;padding:7px 8px;display:block;overflow:hidden}.trend-item:hover{background:#f8fafc;border-color:#cfd7e6}.trend-item-title{font:11px/1.2 monospace;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.trend-item small{font-size:9px;color:#a0a7b3;white-space:nowrap}.trend-space{color:white;border-radius:5px;height:44px;display:block;padding:7px 8px;background:linear-gradient(115deg,#8626ef,#452aff);overflow:hidden}.trend-space.ts1{background:linear-gradient(115deg,#b66527,#3464d7)}.trend-space.ts2{background:linear-gradient(115deg,#a72e00,#ff4d8b)}.trend-space.ts3{background:linear-gradient(115deg,#6b34eb,#ed008e)}.trend-space.ts4{background:linear-gradient(115deg,#a31585,#bc14ff)}.trend-space:hover{filter:brightness(1.09)}.trend-space-title{font-size:9px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trend-space-title span{float:right;background:#ffffff22;padding:0 3px;border-radius:3px;font-size:8px}.trend-space small{font-size:8px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f3eafb}.browse-trend{font-size:10px;color:#64748b;display:block;margin-top:12px;text-align:center}.underfold{margin-top:85px}.underfold .heading-block{margin:0}.underfold .feature{color:inherit;text-decoration:none}.footer{margin-top:100px}@media(max-width:1150px){.navlinks{gap:7px}.navlinks a{font-size:9px}.searchWrap{max-width:205px}.hero-explorer{width:51%}.reference-home .hero-copy{left:35px;width:40%}.reference-home .hero h1{font-size:34px}}@media(max-width:790px){.topbar{height:56px}.navlinks,.account{display:none}.mobileMenu{display:block}.searchWrap{max-width:none}.reference-home .hero{height:auto;min-height:830px;padding:0;margin-top:15px;overflow:hidden}.reference-home .hero-copy{position:relative;top:auto;left:auto;width:auto;padding:38px 27px 15px}.reference-home .hero h1{font-size:36px}.reference-home .hero-explorer{position:relative;transform:none;top:auto;right:auto;width:100%;height:470px;border-radius:16px;margin-top:24px}.trending-grid{grid-template-columns:1fr;gap:28px}.trend-heading{margin-bottom:12px}.trendingTitle{margin-top:14px}.dark-model-counter{display:none}.hero-search{flex:1}.panel-columns{grid-template-columns:1fr 1fr}.underfold{margin-top:50px}}@media(max-width:450px){.reference-home .hero h1{font-size:30px}.hero-explorer{padding:8px}.darkchip{font-size:7px}.panel-tab{font-size:7px;padding:5px 3px}.reference-home .hero{min-height:800px}}

/* Official Hugging Face mark in site header, hero and footer */
.brand-logo{width:21px;height:21px;object-fit:contain;display:block;flex-shrink:0}
.reference-home .hero-image img{width:53px;height:53px;display:block;object-fit:contain}
.footbrand{display:flex;align-items:center;gap:8px}
.footer-logo{width:27px;height:27px;object-fit:contain}
/* The full lower half of the reference homepage */
.hf-section{width:min(1080px,calc(100% - 48px));margin:0 auto}.section-intro{text-align:center;padding:100px 0 64px}.section-intro h2{font-size:30px;letter-spacing:-.65px;margin:8px 0 2px;color:#0b0c10}.section-intro p{font-size:15px;color:#718096;margin:0}.intro-icon{font-size:28px;color:#65707f}.machine-section{margin-top:100px;border-top:1px solid #f9fafb}.machine-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px}.machine-card,.enterprise-card{display:block;overflow:hidden;border:1px solid #e5e7eb;border-radius:13px;color:#0e1117;background:white}.machine-card:hover,.enterprise-card:hover,.open-card:hover{box-shadow:0 6px 26px #e6e9ee}.machine-card.collaboration{grid-column:span 2}.machine-card.portfolio{grid-column:span 2}.card-head{padding:25px;border-bottom:1px solid #ecedf1;min-height:96px}.card-head h3{font-size:17px;margin:0 0 4px;font-weight:650}.card-head p{color:#68778d;font-size:13px;margin:0;line-height:1.6}.mini-dashboard{height:305px;display:grid;grid-template-columns:35% 65%;font-size:12px}.dash-side{background:#fafbfc;padding:18px 22px}.dash-side button{border:1px solid #ddd;background:#f5f7f9;padding:6px 12px;border-radius:5px}.dash-side div{padding:6px}.dash-side p{margin-top:18px}.dash-main{padding:23px;overflow:hidden}.dash-main>p{color:#738092}.dash-main>p b{background:#111;color:white;padding:6px;border-radius:15px}.dash-main small,.dash-row small{color:#9ba5b4;display:block}.dash-row{padding:15px;background:#fbfcfd;border:1px solid #edf0f2;margin:10px 0;border-radius:6px;font-family:monospace}.code-preview{height:305px;overflow:hidden;font:12px/1.65 monospace;color:#667080}.code-preview div{padding:17px;border-bottom:1px solid #eceef0;white-space:nowrap}.code-preview i{color:#9ba5ac}.code-preview em{color:#c14eaf;font-style:normal}.code-preview span{color:#56a75d}.modality-tiles{height:305px;overflow:hidden;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:8px;background:#fafbfc}.modality-tiles>div{border:1px solid #f0f1f4;background:white;border-radius:6px;min-height:92px;padding:14px 6px;display:flex;align-items:center;flex-direction:column;justify-content:center;text-align:center}.modality-tiles strong{font-size:9px;margin:5px 0}.modality-tiles small{font-size:8px;color:#a5aebb}.small-signup{float:right;background:#111d30;color:white;font-size:10px;border-radius:12px;padding:3px 9px}.portfolio-demo{display:flex;height:305px;overflow:hidden}.person{width:30%;padding:22px;background:#fafafa;font-size:11px}.person-avatar{width:68px;height:68px;border-radius:50%;background:#d5d8dc;font-size:40px;text-align:center;margin-bottom:10px}.person strong,.person small{display:block}.person small{color:#a0a8b5}.person span{display:inline-block;background:#111;color:white;padding:4px 15px;border-radius:12px;margin-top:10px}.person p{color:#78869a;line-height:1.8}.person-work{flex:1;padding:18px 12px}.person-work small{color:#8f9cad}.papers,.space-demos{display:flex;gap:8px;margin:10px 0 18px}.papers>div{height:72px;background:repeating-linear-gradient(white,white 8px,#e4e8ed 9px);border:1px solid #e9e9e9;font:9px Georgia;text-align:center;flex:1;padding:14px}.space-demos>div{height:100px;border-radius:6px;flex:1;text-align:center;padding-top:40px;background:#9ca3af;color:white;font-size:11px}.space-demos>div+div{background:#d28bbd}.enterprise-section{margin-top:60px}.enterprise-hero{height:360px;background:linear-gradient(#111827,#080d18);display:block;position:relative;border-radius:9px;overflow:hidden;color:#fff}.enterprise-copy{position:absolute;top:90px;left:32px;z-index:2}.enterprise-copy h3{font-size:17px;margin:0 0 20px}.enterprise-copy p{font-size:13px;color:#bfd1e3;line-height:1.8}.get-started{display:inline-block;color:#0f172a;background:#f1f5f9;border-radius:5px;padding:8px 15px;margin-top:17px;font-size:12px}.enterprise-copy small{color:#94b6da;margin-left:12px}.floating-block{position:absolute;background:linear-gradient(145deg,#f8fafc 10%,#848b96 40%,#454b57 42%);width:96px;height:96px;transform:rotate(24deg);right:27%;top:100px;border-radius:10px}.b2{width:70px;height:70px;right:9%;top:44px}.b3{width:118px;height:118px;right:16%;top:230px}.floatlabel{position:absolute;padding:8px 12px;border:1px solid #4c5360;background:#2b3444;color:#fff;font-size:11px;border-radius:6px}.l1{top:70px;left:49%}.l2{top:35px;left:65%}.l3{top:104px;right:7%}.l4{top:200px;left:45%}.l5{top:241px;left:59%}.l6{top:213px;right:7%}.enterprise-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.enterprise-card .card-head{height:200px;border:0}.enterprise-card .card-head p{margin:16px 0}.solid-btn{display:inline-block;color:#fff;background:#080808;padding:7px 14px;border-radius:5px;font-size:12px}.enterprise-card .card-head small{margin-left:10px;color:#a3afbf}.providers-visual,.compute-visual{height:255px;background:#fafbfc;position:relative;overflow:hidden;border-radius:20px 20px 0 0}.providers-visual{display:flex;flex-wrap:wrap;gap:40px;justify-content:center;align-items:center;padding:45px;background:radial-gradient(ellipse,#fff,#f5f6fa)}.providers-visual span{display:grid;place-items:center;border-radius:50%;background:#4f46e5;color:white;width:46px;height:46px;font-size:25px;box-shadow:0 6px 12px #a0a4b4}.providers-visual span:nth-child(2n){background:#f59e0b}.compute-visual{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:25px;transform:perspective(700px) rotate(-8deg) scale(1.08)}.compute-visual div{background:white;padding:16px 12px;border:1px solid #e5e7eb;border-radius:8px}.compute-visual strong,.compute-visual small{display:block}.compute-visual strong{font-size:11px}.compute-visual small{font-size:9px;color:#a7b0c0;padding-top:12px}.organizations{text-align:center;margin:70px 0 80px}.organizations>p{font-size:12px;color:#8d98a9;margin:0 0 28px}.org-list{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.org-list a{display:flex;align-items:center;text-align:left;gap:10px;border:1px solid #e6e9ed;border-radius:7px;padding:12px 10px;min-width:0}.org-list a:hover{background:#fafafa}.org-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:6px;background:#edf3fd;color:#2278d8;font-weight:700}.org-list strong,.org-list small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.org-list strong{font-size:12px}.org-list small{font-size:10px;color:#a4adbd}.open-source-section{position:relative;margin-top:80px;padding-bottom:160px;overflow:hidden}.open-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.open-card{border:1px solid #e6e9ed;border-radius:22px;background:white;min-height:205px;padding:28px 23px 22px;display:flex;flex-direction:column}.open-card:nth-child(even){transform:translateY(35px)}.open-card h3{font-size:16px;color:#141414;margin:0 0 2px}.open-card h3 span{font-size:12px}.open-card small{font-size:12px}.open-card p{font-size:13px;color:#8b97a9;line-height:1.7;margin-top:auto}.emoji-pile{position:absolute;height:140px;bottom:0;left:0;right:0;background:linear-gradient(transparent,white);pointer-events:none}.emoji-pile img{position:absolute;width:65px;height:65px}.hf-footer{border-top:1px solid #e7e9ed;padding:40px 0 52px;background:white}.footer-layout{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:25px}.theme-button{align-self:start;justify-self:start;border:1px solid #e9ecef;color:#8390a1;background:white;border-radius:18px;font-size:11px;padding:5px 10px}.footer-group{display:flex;flex-direction:column;gap:8px}.footer-group h4{font-size:13px;margin:0 0 6px}.footer-group a{font-size:12px;color:#50647b}.footer-group a:hover{text-decoration:underline}.trending{padding-bottom:35px}.browse-trend{text-decoration:underline;text-underline-offset:6px}
@media(max-width:800px){.machine-grid{grid-template-columns:1fr 1fr}.machine-card.collaboration,.machine-card.portfolio{grid-column:span 2}.enterprise-cards{grid-template-columns:1fr}.org-list,.open-grid{grid-template-columns:repeat(2,1fr)}.footer-layout{grid-template-columns:repeat(2,1fr)}.section-intro{padding:55px 0 40px}}@media(max-width:520px){.machine-grid{grid-template-columns:1fr}.machine-card.collaboration,.machine-card.portfolio{grid-column:span 1}.enterprise-hero{height:410px}.floating-block,.floatlabel{opacity:.3}.enterprise-copy{left:20px}.org-list,.open-grid{grid-template-columns:1fr 1fr}.open-card{padding:15px;min-height:170px}.open-card h3{font-size:12px}.open-card p{font-size:11px}.section-intro h2{font-size:24px}}

/* Official public homepage artwork */
.official-art{display:block;width:100%;height:305px;object-fit:cover;object-position:top center;background:#fff}
.enterprise-card .official-art{height:255px;object-fit:cover;border-radius:16px 16px 0 0}
.emoji-pile{height:210px;bottom:0;overflow:hidden;background:transparent}
.emoji-pile .official-hugs{position:absolute;left:0;bottom:0;width:100%;height:auto;min-height:120px;max-height:none;object-fit:contain;object-position:bottom}
@media(max-width:520px){.official-art{height:250px}.enterprise-card .official-art{height:210px}}

/* Official organization avatars matched to the eight homepage organization names */
.org-logo-image{width:27px;height:27px;min-width:27px;object-fit:contain;border-radius:5px;display:block;background:white} 
.org-list a{display:flex;align-items:center;gap:9px} 
.orggrid .org{display:flex;align-items:center;gap:10px}

/* Pixel-referenced heading and enterprise artwork alignment */
.reference-home .trendingTitle{margin:48px 0 51px;display:flex;align-items:center;gap:16px;font-size:16px;color:#101318}
.reference-home .trendingTitle strong{white-space:nowrap;font-weight:700}
.reference-home .trendingTitle .rule{display:block;flex:1;height:1px;background:#e9ebef}
.reference-home .trend-heading{font-weight:700;font-size:16px;color:#101318;display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:30px}
.reference-home .trend-heading span{font-size:15px}
.machine-section .section-intro .intro-icon{display:block;font-size:27px;color:#525b69;margin-bottom:8px}
.enterprise-section .section-intro{padding:92px 0 82px}
.enterprise-section .section-intro h2{font-weight:750;font-size:31px}
.enterprise-section .section-intro p{font-size:16px;margin-top:8px}
.enterprise-screenshot{height:auto!important;background:#0c111c;overflow:visible;border-radius:10px;display:block}
.enterprise-screenshot img{display:block;width:100%;height:auto;border-radius:10px}
@media(max-width:790px){.reference-home .trendingTitle{margin:30px 0}.enterprise-section .section-intro{padding:55px 0 40px}}

/* --- User-requested sizing and icon fixes --- */
.container,
.hf-section{
  width:min(1180px, calc(100% - 24px));
}

.topbar{padding-top:6px}
.reference-home .hero{
  height:565px;
  margin-top:18px;
  margin-bottom:68px;
}
.reference-home .hero-copy{
  top:102px;
  left:66px;
  width:432px;
}
.reference-home .hero-image img{
  width:64px;
  height:64px;
}
.reference-home .hero h1{
  font-size:58px;
  line-height:1.02;
  letter-spacing:-2.1px;
}
.reference-home .hero p{
  font-size:15px;
  line-height:1.6;
  margin:24px 0 28px;
  max-width:360px;
}
.reference-home .hero-actions,
.reference-home .hero-primary,
.reference-home .hero-secondary{
  font-size:14px;
}
.reference-home .hero-primary{
  padding:9px 18px;
}
.hero-explorer{
  width:575px;
  height:540px;
  top:-10px;
}
.dark-result{min-height:48px}
.dark-result b{font-size:10px}
.dark-result small{font-size:8px}

.reference-home .trendingTitle{
  margin:40px 0 42px;
  font-size:17px;
}
.reference-home .trend-heading{
  font-size:17px;
  margin-bottom:24px;
}
.trending-grid{gap:24px}
.trend-item,
.trend-space{
  height:54px;
  padding:9px 10px;
}
.trend-item-title{font-size:13px}
.trend-item small{font-size:10px}
.trend-space-title{font-size:10px}
.trend-space small{font-size:9px}
.browse-trend{font-size:11px;margin-top:14px}

.machine-section,
.enterprise-section,
.open-source-section{
  margin-top:72px;
}
.section-intro{
  padding:84px 0 54px;
}
.section-intro h2{
  font-size:52px;
  letter-spacing:-1.6px;
  font-weight:750;
}
.section-intro p{
  font-size:16px;
  margin-top:8px;
}
.machine-section .section-intro .intro-icon,
.open-source-section .section-intro .intro-icon{
  display:block;
  width:36px;
  height:36px;
  margin:0 auto 10px;
  font-size:0;
  color:transparent;
  background:url('assets/section-cube.png') center center / contain no-repeat;
}

.machine-grid{gap:24px}
.card-head{padding:28px;min-height:108px}
.card-head h3{font-size:18px}
.card-head p{font-size:14px}
.official-art{height:325px}
.enterprise-card .official-art{height:275px}

.enterprise-section .section-intro h2{font-size:54px}
.enterprise-section .section-intro p{font-size:16px}
.enterprise-screenshot img{width:100%;height:auto}
.enterprise-cards{gap:26px;margin-top:28px}
.organizations{margin:78px 0 86px}
.org-list a{padding:14px 12px}
.org-list strong{font-size:13px}
.org-list small{font-size:11px}

.open-grid{gap:18px}
.open-card{min-height:225px;padding:32px 24px 24px}
.open-card h3{font-size:17px}
.open-card small{font-size:12px}
.open-card p{font-size:14px}

@media(max-width:1200px){
  .container,
  .hf-section{width:min(1120px, calc(100% - 24px));}
  .reference-home .hero h1{font-size:52px}
  .hero-explorer{width:53%}
}
@media(max-width:790px){
  .container,
  .hf-section{width:min(100% - 20px, 1180px)}
  .section-intro h2,
  .enterprise-section .section-intro h2{font-size:36px}
  .reference-home .hero{min-height:860px}
  .reference-home .hero-copy{padding:40px 28px 18px}
}

/* 2560px desktop layout: wider, proportionally sized homepage */
@media (min-width: 1201px) {
  .container, .hf-section {
    width: min(1660px, calc(100% - 80px));
    max-width: none;
  }
  .topbar .navinside { gap: 20px; }
  .topbar { height: 54px; }
  .brand { font-size: 15px; }
  .brand-logo { width: 25px; height: 25px; }
  .searchWrap { max-width: 370px; }
  .searchWrap input { height: 32px; font-size: 12px; }
  .navlinks { gap: 21px; }
  .navlinks a, .account button { font-size: 12px; }
  .reference-home .hero {
    height: clamp(570px, 32vw, 700px);
    margin-top: 42px;
    margin-bottom: 68px;
  }
  .reference-home .hero-copy {
    top: 21%;
    left: 5.3%;
    width: 42%;
  }
  .reference-home .hero h1 {
    font-size: clamp(52px, 3.5vw, 72px);
    line-height: 1.06;
  }
  .reference-home .hero p { font-size: 17px; max-width: 440px; }
  .hero-explorer {
    width: 49%;
    height: 100%;
    top: -26px;
  }
  .panel-tab, .dark-model-counter, .hero-search, .darkchip, .panel-label { font-size: 10px!important; }
  .dark-result { min-height: 56px; padding: 10px; }
  .dark-result b { font-size: 12px; }
  .dark-result small { font-size: 10px; }
  .reference-home .trendingTitle { margin: 52px 0 46px; }
  .trending-grid { gap: 36px; }
  .trend-item, .trend-space { height: 64px; padding: 11px 13px; }
  .trend-item-title { font-size: 15px; }
  .trend-item small { font-size: 12px; }
  .trend-space-title { font-size: 12px; }
  .trend-space small { font-size: 11px; }
  .browse-trend { font-size: 13px; margin-top: 19px; }
  .machine-grid { gap: 26px; }
  .official-art { height: 350px; }
  .enterprise-card .official-art { height: 300px; }
}
@media (min-width: 791px) and (max-width: 1200px) {
  .container, .hf-section { width: calc(100% - 44px); }
}


/* Match the official Hugging Face homepage hero metrics. */
.reference-home .hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:auto;
  min-height:0;
  padding:56px 24px 0;
  border-radius:25px;
  background:#030712;
  overflow:hidden;
  isolation:isolate;
}
.reference-home .hero-copy{
  position:relative;
  top:auto;
  left:auto;
  width:48%;
  z-index:2;
}
.hero-models-art{
  position:absolute;
  z-index:1;
  right:0;
  top:0;
  height:100%;
  width:53%;
  pointer-events:none;
  overflow:hidden;
  border-radius:0 25px 25px 0;
}
.hero-models-art img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left center;
}
@media (min-width:1024px){
  .reference-home .hero{
    height:620px;
    padding:64px;
    margin-top:34px;
  }
  .reference-home .hero-copy{width:45%;}
}
@media (min-width:1280px){
  .reference-home .hero{padding:80px;}
}
@media (min-width:1536px){
  .reference-home .hero{height:720px;}
}
@media (max-width:1023px){
  .reference-home .hero{
    padding:56px 16px 0;
    text-align:center;
    align-items:center;
    min-height:0;
    height:auto;
  }
  .reference-home .hero-copy{
    width:100%;
    max-width:580px;
    padding:0 12px;
    align-items:center;
    display:flex;
    flex-direction:column;
  }
  .reference-home .hero p{margin-left:auto;margin-right:auto;}
  .reference-home .hero-actions{justify-content:center;}
  .hero-models-art{
    position:relative;
    right:auto;
    top:auto;
    width:100%;
    height:auto;
    margin-top:32px;
    border-radius:0;
  }
  .hero-models-art img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
}
@media (max-width:639px){
  .reference-home .hero{padding-top:80px;}
  .hero-models-art{margin-top:20px;}
  .reference-home .hero h1{font-size:34px;}
}

/* Hero refinements based on the supplied desktop screenshot */
@media (min-width: 1280px) {
  .container, .hf-section { width: min(1900px, 76vw); max-width: none; }
  .reference-home .hero {
    height: 720px;
    min-height: 720px;
    margin-top: 34px;
    margin-bottom: 74px;
    padding: 80px;
    border-radius: 25px;
    overflow: visible;
    background: radial-gradient(ellipse at 54% 65%, #161b25 0%, #0c101a 40%, #090d17 90%);
  }
  .reference-home .hero-copy {
    width: 47%;
    max-width: 680px;
    flex: none;
    z-index: 3;
    transform: translateY(18px);
  }
  .reference-home .hero-image img { width: 64px; height: 64px; }
  .reference-home .hero-image { margin-bottom: 28px; }
  .reference-home .hero h1 {
    font-size: clamp(48px, 3.1vw, 66px);
    line-height: 1.07;
    letter-spacing: -1.75px;
  }
  .reference-home .hero p {
    font-size: clamp(15px, .95vw, 17px);
    line-height: 1.65;
    max-width: 490px;
    margin-top: 32px;
    margin-bottom: 38px;
  }
  .reference-home .hero-primary, .reference-home .hero-secondary { font-size: 15px; }
  .hero-models-art {
    right: 0;
    top: -36px;
    width: 54%;
    height: calc(100% + 36px);
    border-radius: 25px 25px 25px 0;
    overflow: hidden;
  }
  .hero-models-art img { object-fit: cover; object-position: left center; }
}
@media (min-width: 1280px) and (max-width: 1600px) {
  .reference-home .hero { height: 620px; min-height: 620px; padding: 64px; }
  .reference-home .hero-copy { width: 46%; }
  .reference-home .hero h1 { font-size: 47px; }
  .hero-models-art { top: -28px; height: calc(100% + 28px); }
}

/* Official Hugging Face mark in the Trending heading */
.trendingTitle .trending-logo{width:24px;height:24px;object-fit:contain;display:inline-block;vertical-align:middle;flex:0 0 auto;}
.reference-home .trendingTitle strong{display:inline-flex;align-items:center;justify-content:center;gap:3px;}

/* Agent Hug hero: simple introduction and character, original model panel preserved */
.reference-home .hero .agent-intro{z-index:5;left:clamp(34px,3.8vw,72px);top:clamp(135px,11vw,195px);width:min(330px,30%)}
.reference-home .agent-intro h1{font-size:clamp(44px,3.5vw,70px);line-height:1.03;letter-spacing:-2.5px;white-space:nowrap;margin:0}
.reference-home .agent-intro p{max-width:310px;font-size:clamp(14px,0.91vw,17px);line-height:1.65;margin:23px 0 32px;color:#cfd8e8}
.reference-home .agent-intro .hero-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.reference-home .agent-intro .agent-main-cta{border-color:#cdd4df;background:#fff;color:#111827;font-weight:650;padding:12px 20px;white-space:nowrap}
.agent-hero-mascot{position:absolute;z-index:4;bottom:13px;left:31%;width:clamp(250px,23vw,420px);height:79%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 18px 38px rgba(241,165,25,.2));pointer-events:none}
@media(max-width:1279px){.reference-home .hero .agent-intro{top:140px}.agent-hero-mascot{left:29%;width:31%;height:70%}.reference-home .agent-intro h1{font-size:48px}}
@media(max-width:900px){.reference-home .hero .agent-intro{position:relative;left:auto;top:auto;width:auto;padding:60px 28px 0}.reference-home .agent-intro h1{font-size:48px}.agent-hero-mascot{left:auto;right:5%;width:38%;height:42%;bottom:43%}.hero-models-art{top:auto!important;bottom:0;right:0;width:100%!important;height:45%!important;overflow:hidden}.reference-home .hero{min-height:900px!important}}
@media(max-width:530px){.reference-home .hero .agent-intro{padding:34px 22px 0}.reference-home .agent-intro h1{font-size:41px}.reference-home .agent-intro p{max-width:260px}.agent-hero-mascot{width:42%;height:34%;bottom:45%;right:0}.reference-home .hero{min-height:820px!important}.reference-home .agent-intro .hero-actions{gap:12px}}

/* Agent Hug hero layout correction: contained mascot, centered copy, aligned CTAs */
@media (min-width: 901px) {
  .reference-home .hero {
    position: relative;
    height: 680px;
    min-height: 680px;
    padding: 0;
    overflow: visible;
  }
  .reference-home .hero .hero-copy.agent-intro {
    position: absolute !important;
    left: 5% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 27% !important;
    max-width: none !important;
    padding: 0 !important;
    z-index: 4;
  }
  .reference-home .agent-intro h1 {
    font-size: clamp(42px, 3.4vw, 66px);
    white-space: nowrap;
    letter-spacing: -1.9px;
    line-height: 1.08;
  }
  .reference-home .agent-intro p {
    font-size: clamp(14px, .9vw, 17px);
    max-width: 340px;
    margin: 21px 0 28px;
  }
  .reference-home .agent-intro .hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 16px;
  }
  .reference-home .agent-intro .agent-main-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 999px;
  }
  .reference-home .agent-intro .hero-secondary {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
  }
  .agent-hero-mascot {
    position: absolute;
    left: 28%;
    bottom: 12%;
    width: 21%;
    max-width: 345px;
    height: 61%;
    object-fit: contain;
    object-position: center bottom;
    z-index: 3;
  }
  .hero-models-art {
    position: absolute;
    right: 0;
    top: -28px;
    width: 51%;
    height: calc(100% + 28px);
    z-index: 2;
  }
}
@media (min-width: 901px) and (max-width: 1279px) {
  .reference-home .hero { height: 600px; min-height: 600px; }
  .reference-home .hero .hero-copy.agent-intro { width: 29% !important; }
  .reference-home .agent-intro h1 { font-size: 43px; }
  .agent-hero-mascot { left: 29%; width: 20%; height: 55%; bottom: 17%; }
}
@media (max-width: 900px) {
  .reference-home .hero { overflow: hidden; }
  .reference-home .hero .hero-copy.agent-intro {
    transform: none !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
  }
  .reference-home .agent-intro .hero-actions {
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
  }
}


/* Agent Hug mascot: use complete transparent figure and keep it out of the model artwork */
@media (min-width: 901px) {
  .reference-home .agent-hero-mascot {
    left: 29% !important;
    right: auto !important;
    bottom: 14% !important;
    width: clamp(205px, 20%, 340px) !important;
    height: auto !important;
    max-height: 69% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    z-index: 4 !important;
    transform: none !important;
    filter: drop-shadow(0 16px 28px rgba(240,172,33,.16));
  }
  .reference-home .hero-models-art {z-index: 2 !important;}
}
@media (min-width: 901px) and (max-width: 1290px) {
 .reference-home .agent-hero-mascot {left: 31% !important; width: 18% !important; bottom: 17% !important;}
}
@media (max-width: 900px) {
 .reference-home .agent-hero-mascot {
   width: min(40%, 280px) !important;
   height: auto !important;
   max-height: 35% !important;
   right: 5% !important;
   left: auto !important;
   bottom: 46% !important;
   object-fit: contain !important;
 }
}
@media (max-width: 520px) {
 .reference-home .agent-hero-mascot {width: 43% !important;right: 2% !important;bottom: 44% !important;}
}