.domoai-howto-page{--fg-laser:#e83878;background:#050505}
.domoai-howto-page:before{background-image:linear-gradient(rgba(0,0,0,.54),rgba(0,0,0,.66)),url("assets/projects-bg.webp");background-position:center;background-size:cover}
.domoai-howto-page .fg-hero{background:radial-gradient(circle at 78% 34%,rgba(232,56,120,.12),transparent 25%),linear-gradient(135deg,rgba(7,7,7,.34),rgba(24,5,13,.3) 62%,rgba(5,5,5,.42))}.domoai-howto-page .fg-hero:before{content:"02"}
.howto-archive{overflow:hidden}.howto-archive .fg-works-heading>div{min-width:0}.howto-archive .fg-works-heading h2{margin-top:22px}.howto-count{margin:0 0 5px;color:var(--fg-laser);font:500 clamp(9px,1vw,13px)/1 "Space Grotesk";letter-spacing:.2em}
.howto-card{width:100%;border-bottom-color:rgba(255,255,255,.14)}.howto-card-link{display:block;min-width:0}.howto-visual{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;background:linear-gradient(145deg,#1a0710,#090909 62%,#161016)}.howto-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(0,0,0,.05),rgba(18,0,8,.72));pointer-events:none}.howto-visual img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.55) brightness(.66);transform:scale(1.01);transition:filter .45s ease,transform .45s ease}.howto-visual span{position:absolute;z-index:1;right:10px;bottom:-.08em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.5);font:500 clamp(75px,8vw,130px)/.8 "Space Grotesk";letter-spacing:-.08em}
.howto-card .fg-work-info{height:190px;border-top-color:rgba(232,56,120,.32);padding:14px 12px}.howto-card .fg-work-info h3{font-size:clamp(16px,1.35vw,22px)}.howto-card .fg-work-info p{font-size:9px}.howto-view{display:flex;width:100%;min-height:38px;align-items:center;justify-content:space-between;margin-top:auto;padding:0 10px;border:1px solid rgba(232,56,120,.62);font:600 clamp(7px,.58vw,9px)/1 "Space Grotesk";letter-spacing:.12em;transition:border-color .3s ease,background .3s ease}.howto-view b{color:var(--fg-laser);font-size:13px;transition:transform .3s ease}
@media(min-width:761px){.howto-grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:clamp(16px,1.8vw,28px)}.howto-card{width:86%;justify-self:center}.howto-card .fg-work-info{height:165px;padding:11px 10px}.howto-card .fg-work-info h3{font-size:clamp(14px,1.15vw,19px)}.howto-card .fg-work-info p{font-size:8px}.howto-card .howto-view{min-height:34px;padding-inline:8px;font-size:7px}}
@media(hover:hover) and (pointer:fine){.howto-card-link:hover .howto-visual img{filter:saturate(.78) brightness(.76);transform:scale(1.035)}.howto-card-link:hover .fg-work-info:before{width:100%}.howto-card-link:hover .howto-view{border-color:var(--fg-laser);background:rgba(232,56,120,.08)}.howto-card-link:hover .howto-view b{transform:translateX(3px)}}
@media(max-width:760px){.domoai-howto-page:before{background-image:linear-gradient(rgba(0,0,0,.54),rgba(0,0,0,.7)),url("assets/projects-bg-mobile.webp")}.domoai-howto-page .fg-hero h1{font-size:clamp(44px,13.5vw,67px)}.howto-archive .fg-works-heading{display:flex;align-items:flex-end}.howto-archive .fg-works-heading h2{font-size:clamp(40px,12vw,58px)}.howto-count{margin-bottom:4px;font-size:7px}.howto-grid{width:100%}.howto-card{width:min(100%,420px)}.howto-card .fg-work-info{height:165px}.howto-card .fg-work-info h3{font-size:19px}.howto-card .fg-work-info p{font-size:8px}.howto-visual img,.howto-view,.howto-view b{transition:none}}
@media(prefers-reduced-motion:reduce){.howto-visual img,.howto-view,.howto-view b{transition:none}}