:root{--ink:#171c28;--muted:#69758a;--paper:#f7f8fa;--line:#e4e8ef;--blue:#315ee8;--blue-light:#eaf0ff;--navy:#121a29;--sans:"DM Sans",Arial,sans-serif;--display:"Space Grotesk",Arial,sans-serif;--mono:"DM Mono",monospace;--max:1160px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit}::selection{background:#dce6ff}:focus-visible{outline:3px solid #7894ff;outline-offset:4px}
.wrap{width:min(var(--max),calc(100% - 64px));margin-inline:auto}
.header{height:72px;position:sticky;top:0;z-index:20;background:#f7f8faed;border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}.header-inner{width:min(var(--max),calc(100% - 64px));height:100%;margin:auto;display:flex;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:10px;font:700 17px var(--display);letter-spacing:-.06em}.brand-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--ink);color:white;font-size:18px}.brand-dot{color:var(--blue)}
.nav{display:flex;align-items:center;gap:30px;color:#5d687c;font-size:12px;font-weight:700}.nav>a:not(.nav-github):hover{color:var(--blue)}.nav-github{padding:9px 13px;border:1px solid #d9deea;border-radius:5px;color:var(--ink)}.nav-github span{color:var(--blue);margin-left:7px}.nav-toggle{display:none}
.hero{min-height:600px;padding-block:90px 70px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:30px;position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.eyebrow{margin:0 0 20px;color:#8792a5;font:9px var(--mono);letter-spacing:.15em}.status-dot{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#61cfa0;box-shadow:0 0 0 5px #61cfa01c}
.hero h1{margin:0;font:700 clamp(54px,6.4vw,82px)/.99 var(--display);letter-spacing:-.085em}.hero h1 span,.section-head h2 span,.premium-copy h2 span{color:var(--blue)}.hero-lede{max-width:475px;margin:23px 0 0;color:var(--muted);font-size:15px;line-height:1.8}.hero-actions{display:flex;align-items:center;gap:20px;margin-top:28px}
.btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:18px;font-size:11px;font-weight:700;transition:transform .2s,background .2s,border-color .2s}.btn span{font-size:15px}.btn-primary{padding:0 16px;border:1px solid var(--blue);border-radius:5px;background:var(--blue);color:white;box-shadow:0 8px 20px #315ee82a}.btn-primary:hover{background:#244bc4;transform:translateY(-2px)}.btn-text{color:#59667d}.btn-text:hover{color:var(--blue);transform:translateX(3px)}.hero-footnote{display:flex;align-items:center;gap:10px;margin-top:48px;color:#929daf;font:9px var(--mono)}.hero-footnote span{width:28px;height:1px;background:var(--blue)}
.hero-visual{height:400px;position:relative;display:grid;place-items:center;isolation:isolate}.hero-visual:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#dce2ed 1px,transparent 1px),linear-gradient(90deg,#dce2ed 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(ellipse,#000 5%,transparent 70%);opacity:.6}.orbit{position:absolute;aspect-ratio:1;border:1px solid #d4ddef;border-radius:50%}.orbit-outer{width:340px;animation:spin 45s linear infinite}.orbit-inner{width:260px;border-style:dashed;animation:spin 55s linear infinite reverse}.orbit-outer:after,.orbit-inner:after{content:"";position:absolute;top:36px;left:47px;width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 6px #315ee81c}.orbit-inner:after{top:auto;left:auto;right:20px;bottom:45px;background:#61cfa0}
.workflow-card{width:min(340px,84%);position:relative;z-index:2;border:1px solid #e1e6ef;border-radius:9px;background:white;box-shadow:0 25px 70px #1b2a471e;transform:rotate(-2deg);animation:float 7s ease-in-out infinite}.workflow-top,.workflow-bottom{height:38px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf0f5;color:#98a2b2;font:8px var(--mono);letter-spacing:.08em}.window-dots{display:flex;gap:4px}.window-dots i{width:6px;height:6px;border-radius:50%;background:#d4dce8}.live{color:#299b70}.workflow-main{padding:25px}.workflow-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;background:var(--blue-light);color:var(--blue);font-size:20px}.mono-label{display:block;margin-top:17px;color:#8c97aa;font:8px var(--mono);letter-spacing:.1em}.workflow-main h2{margin:9px 0;font:700 28px/.98 var(--display);letter-spacing:-.06em}.workflow-main p{margin:0;color:var(--muted);font-size:10px}.workflow-bottom{height:34px;border-top:1px solid #edf0f5;border-bottom:0}.workflow-bottom span:last-child{color:var(--blue)}.visual-chip{position:absolute;z-index:3;padding:7px 10px;border:1px solid #e2e7f0;border-radius:4px;background:#fff;color:#657188;font:8px var(--mono);letter-spacing:.06em;box-shadow:0 6px 20px #1b2a470c;animation:chip-float 5s ease-in-out infinite}.visual-chip b{margin-left:8px;color:var(--blue);font-weight:500}.chip-a{top:45px;left:2%}.chip-b{top:90px;right:0;animation-delay:-1.5s}.chip-c{bottom:44px;left:7%;animation-delay:-3s}.visual-coordinate{position:absolute;right:0;bottom:4px;color:#9aa4b5;font:8px var(--mono);letter-spacing:.1em}.section-number,.premium-number{position:absolute;bottom:19px;left:0;color:#909bad;font:8px var(--mono);letter-spacing:.12em}.section-number i{color:var(--blue);font-style:normal}
.featured{padding-block:100px 90px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:30px}.section-head .eyebrow{margin-bottom:14px}.section-head h2{margin:0;font:700 clamp(40px,4.8vw,58px)/1.02 var(--display);letter-spacing:-.075em}.section-summary{max-width:380px;margin:0 0 5px;color:var(--muted);font-size:12px;line-height:1.8}
.featured-card{display:grid;grid-template-columns:.95fr 1.05fr;overflow:hidden;border:1px solid var(--line);border-radius:9px;background:white}.featured-art{min-height:450px;padding:28px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#edf2fc;border-right:1px solid #e1e7f2}.featured-art:before{content:"";position:absolute;width:400px;height:400px;border:1px solid #d2ddf2;border-radius:50%;box-shadow:0 0 0 35px #dce6f96b,0 0 0 70px #dce6f93b}.art-caption,.art-bottom{position:absolute;left:24px;right:24px;display:flex;justify-content:space-between;color:#8793a9;font:8px var(--mono);letter-spacing:.1em}.art-caption{top:22px}.art-bottom{bottom:20px}
.browser{width:min(100%,390px);position:relative;z-index:1;overflow:hidden;border:1px solid #dce3ef;border-radius:7px;background:white;box-shadow:0 22px 50px #263a6321;transform:rotate(-2deg);animation:float 8s ease-in-out infinite}.browser-bar{height:29px;padding:0 10px;display:flex;align-items:center;gap:5px;border-bottom:1px solid #edf0f5}.browser-bar i{width:6px;height:6px;border-radius:50%;background:#d4dce8}.browser-bar span{margin:auto;color:#9aa5b5;font:7px var(--mono)}.browser-body{height:245px;display:grid;grid-template-columns:47px 1fr}.browser-body aside{padding:17px 10px;border-right:1px solid #edf0f5}.browser-body aside b,.browser-body aside i{display:block;height:5px;margin-bottom:12px;border-radius:5px;background:#dfe5f0}.browser-body aside b{background:#a7b9f2}.browser-page{padding:22px 24px}.browser-page .mono-label{margin:0}.browser-page strong{display:block;margin-top:16px;font:700 30px/.98 var(--display);letter-spacing:-.07em}.browser-page em{color:var(--blue);font-style:normal}.skeleton-lines{display:grid;gap:6px;margin-top:18px}.skeleton-lines i{height:4px;width:90%;border-radius:4px;background:#e8ecf3}.skeleton-lines i:nth-child(2){width:65%}.skeleton-lines i:nth-child(3){width:78%}.skeleton-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:20px}.skeleton-cards i{height:35px;border:1px solid #e7ebf2;background:#f5f7fa}
.featured-copy{padding:42px clamp(25px,4vw,54px);display:flex;flex-direction:column;align-items:flex-start}.pills{display:flex;flex-wrap:wrap;gap:9px}.pill-free,.pill-muted{padding:5px 8px;border-radius:3px;font:8px var(--mono);letter-spacing:.05em}.pill-free{background:var(--blue-light);color:var(--blue)}.pill-muted{color:#8c97a9}.featured-copy h3{margin:24px 0 9px;font:700 clamp(34px,4vw,46px)/.99 var(--display);letter-spacing:-.075em}.product-tagline{margin:0;font-size:14px;font-weight:700}.product-description{max-width:450px;margin:12px 0 0;color:var(--muted);font-size:11px;line-height:1.8}.benefits{display:grid;gap:9px;margin:21px 0 23px;padding:0;list-style:none;color:#59667b;font-size:10px}.benefits li:before{content:"↗";margin-right:9px;color:var(--blue)}.install{width:100%;padding:13px;display:flex;align-items:end;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:5px;background:#f8f9fb}.install .mono-label{margin:0 0 8px}.install code{display:block;overflow-wrap:anywhere;color:#344056;font:9px/1.6 var(--mono)}.copy-btn{flex:none;padding:8px 10px;border:1px solid #d8deea;border-radius:4px;background:white;color:#4e5b70;font-size:9px;font-weight:700;cursor:pointer}.copy-btn:hover{border-color:var(--blue);color:var(--blue)}.product-link{margin-top:17px}
.library{padding-block:55px 100px;border-top:1px solid var(--line)}.library-head{margin-bottom:27px}.library-summary{margin-top:12px}.text-link{color:var(--blue);font-size:10px;font-weight:700}.text-link:hover{text-decoration:underline;text-underline-offset:4px}.library-tools{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:17px}.search{width:min(390px,100%);height:44px;padding:0 12px;display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:5px;background:white;color:#8994a7}.search>span{font-size:20px}.search input{width:100%;min-width:0;border:0;outline:0;background:transparent;font-size:10px}.search input::placeholder{color:#9ca6b7}.search kbd{padding:2px 5px;border:1px solid #e5e8ef;border-radius:3px;font:9px var(--mono)}.filters{display:flex;flex-wrap:wrap;gap:4px}.filter{padding:8px 12px;border:1px solid transparent;border-radius:4px;background:transparent;color:#788499;font-size:9px;cursor:pointer}.filter:hover{background:white;color:var(--blue)}.filter.active{border-color:#d8e2ff;background:var(--blue-light);color:var(--blue);font-weight:700}
.catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.repo-card{min-height:220px;padding:18px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:7px;background:white;animation:enter .45s both;transition:transform .2s,border-color .2s,box-shadow .2s}.repo-card:hover{transform:translateY(-4px);border-color:#c4d1f2;box-shadow:0 14px 30px #1b2a4714}.repo-top,.repo-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}.repo-type,.repo-stars,.repo-language{color:#8b96a8;font:8px var(--mono);letter-spacing:.08em}.repo-icon{width:31px;height:31px;margin:17px 0 11px;display:grid;place-items:center;border-radius:6px;background:var(--blue-light);color:var(--blue)}.repo-card h3{margin:0 0 7px;font:700 15px/1.2 var(--display);letter-spacing:-.035em;overflow-wrap:anywhere}.repo-card p{margin:0 0 16px;color:var(--muted);font-size:10px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.repo-bottom{margin-top:auto;padding-top:12px;border-top:1px solid #edf0f5}.repo-bottom a{color:var(--blue);font-size:9px;font-weight:700}.repo-premium{background:var(--navy);border-color:var(--navy);color:white}.repo-premium p{color:#b4bfd0}.repo-premium .repo-icon{background:#253d70;color:#a9c0ff}.repo-premium .repo-bottom{border-color:#344154}.repo-premium .repo-bottom a{color:#a9c0ff}.coming-soon{padding:4px 6px;border-radius:3px;background:#e8edf7;color:#46536b;font:7px var(--mono)}.skeleton-card{height:220px;border:1px solid var(--line);border-radius:7px;background:linear-gradient(100deg,#f0f2f6 20%,#e6eaf2 40%,#f0f2f6 60%);background-size:200% 100%;animation:loading 1.4s linear infinite}.empty-state{grid-column:1/-1;padding:36px;border:1px dashed #cbd3e1;border-radius:7px;text-align:center;color:var(--muted);font-size:11px}.catalog-meta{display:flex;justify-content:space-between;gap:15px;margin-top:14px;color:#929daf;font:8px var(--mono);letter-spacing:.1em}
.premium{position:relative;overflow:hidden;background:var(--navy);color:white}.premium-inner{min-height:370px;padding-block:65px;display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:70px}.premium-art{width:235px;height:235px;justify-self:center;position:relative;display:grid;place-items:center;border:1px solid #43516a;border-radius:50%;box-shadow:0 0 0 28px #ffffff08,0 0 0 56px #ffffff05;animation:breathe 7s ease-in-out infinite}.premium-ring{position:absolute;inset:22px;border:1px dashed #465571;border-radius:50%;animation:spin 45s linear infinite}.ring-two{inset:48px;border-style:solid;animation-direction:reverse;animation-duration:60s}.premium-art>span{width:82px;height:82px;display:grid;place-items:center;border-radius:18px;background:var(--blue);box-shadow:0 15px 40px #315ee85a;font:700 46px var(--display);transform:rotate(-8deg)}.premium-copy{max-width:500px}.premium-copy .eyebrow{color:#9aa9c0}.premium-copy h2{margin:0;font:700 clamp(44px,5vw,62px)/1.02 var(--display);letter-spacing:-.08em}.premium-copy h2 span{color:#91adff}.premium-copy>p:not(.eyebrow){max-width:440px;margin:16px 0 22px;color:#b6c1d2;font-size:12px;line-height:1.8}.premium-note{display:flex;align-items:center;gap:9px;color:#9eabc0;font:8px var(--mono);letter-spacing:.1em}.premium-note i{width:7px;height:7px;border-radius:50%;background:#e8b65c;box-shadow:0 0 0 5px #e8b65c1f}.premium-number{position:absolute;right:max(32px,calc((100vw - var(--max))/2));bottom:22px;color:#9aa9c0;font:8px var(--mono);letter-spacing:.1em}
.footer{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:20px}.footer .brand{font-size:15px}.footer .brand-icon{width:28px;height:28px;font-size:15px}.footer-line,.footer-credit{color:#929daf;font:8px var(--mono);letter-spacing:.08em}.footer-credit b{color:#59657a;font-weight:500}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes float{0%,100%{translate:0 0}50%{translate:0 -8px}}@keyframes chip-float{0%,100%{translate:0 0}50%{translate:0 -6px}}@keyframes breathe{0%,100%{scale:1;opacity:1}50%{scale:1.04;opacity:.82}}@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes loading{to{background-position:-200% 0}}
@media(max-width:980px){.hero{min-height:540px;gap:15px}.hero h1{font-size:clamp(48px,6vw,66px)}.orbit-outer{width:300px}.orbit-inner{width:230px}.featured-card{grid-template-columns:.85fr 1.15fr}.featured-copy{padding:32px}.catalog{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.wrap,.header-inner{width:calc(100% - 40px)}.header{height:64px}.nav-toggle{width:38px;height:38px;padding:9px;display:flex;flex-direction:column;justify-content:center;gap:5px;border:1px solid var(--line);border-radius:5px;background:white}.nav-toggle span{height:1.5px;width:18px;background:var(--ink);transition:transform .2s}.nav-toggle[aria-expanded=true] span:first-child{transform:translateY(3.25px) rotate(45deg)}.nav-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}.nav{display:none;position:absolute;top:63px;left:0;right:0;padding:20px;background:#f7f8fa;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:17px}.nav.open{display:flex}.nav-github{text-align:center}.hero{min-height:0;padding-block:68px 65px;grid-template-columns:1fr;gap:15px}.hero h1{font-size:clamp(47px,12vw,66px)}.hero-lede{font-size:13px}.hero-actions{align-items:stretch;flex-direction:column;gap:9px}.btn{width:100%;justify-content:space-between}.hero-footnote{margin-top:28px;font-size:8px}.hero-visual{height:315px;margin-top:4px}.orbit-outer{width:275px}.orbit-inner{width:210px}.workflow-card{width:min(310px,85%)}.workflow-main{padding:20px}.workflow-main h2{font-size:25px}.chip-a{top:16px}.chip-b{top:45px}.chip-c{bottom:22px}.section-number{bottom:14px}.featured{padding-block:70px 65px}.section-head{display:block;margin-bottom:23px}.section-head h2{font-size:clamp(39px,10vw,51px)}.section-summary{margin-top:13px;font-size:11px}.featured-card{grid-template-columns:1fr}.featured-art{min-height:330px;border-right:0;border-bottom:1px solid var(--line)}.browser-body{height:210px}.featured-copy{padding:27px 21px}.featured-copy h3{font-size:36px}.install{align-items:stretch;flex-direction:column}.copy-btn{align-self:flex-start}.library{padding-block:45px 70px}.library-head .text-link{display:inline-block;margin-top:15px}.library-tools{align-items:stretch;flex-direction:column}.search{width:100%}.filters{gap:3px}.filter{padding:8px 10px}.catalog{grid-template-columns:1fr}.repo-card{min-height:205px}.catalog-meta{flex-direction:column;gap:7px;font-size:7px}.premium-inner{padding-block:55px 70px;grid-template-columns:1fr;gap:35px}.premium-art{width:190px;height:190px}.premium-art>span{width:70px;height:70px;font-size:40px}.premium-copy h2{font-size:47px}.premium-number{right:20px;bottom:15px}.footer{padding-block:22px;flex-wrap:wrap}.footer-line{order:3;width:100%}}
@media(max-width:370px){.hero h1{font-size:44px}.hero-visual{height:280px}.workflow-card{width:88%}.featured-art{min-height:300px;padding:14px}.browser-page{padding:17px}.browser-page strong{font-size:26px}.featured-copy h3{font-size:32px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}