:root{




--ink:#17253d;




--ink-soft:#516078;




--paper:#fffaf6;




--paper-2:#f7f3ef;




--coral:#ff7056;




--coral-dark:#e85542;




--cyan:#25c6c8;




--violet:#7467f0;




--yellow:#ffcf5c;




--line:#e8e2dc;




--white:#fff;




--radius:20px;




--shadow:0 20px 60px rgba(23,37,61,.12);




--ease:cubic-bezier(.23,1,.32,1)}




*{




box-sizing:border-box}




html{




scroll-behavior:smooth}




body{




margin:0;




background:var(--paper);




color:var(--ink);




font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;




line-height:1.65;




font-size:15px}




body:after{




content:"";




position:fixed;




inset:auto 0 0;




height:3px;




background:linear-gradient(90deg,var(--coral),var(--yellow),var(--cyan),var(--violet));




z-index:2000}




a{




color:inherit;




text-decoration:none}




button,input{




font:inherit}




img{




max-width:100%;




display:block}




p{




color:var(--ink-soft);




margin:0 0 18px}




.container{




width:min(1200px,calc(100% - 40px));




margin:0 auto}




.top-bar{




background:var(--ink);




color:#d7e1f2;




font-size:12px}




.top-bar-inner{




display:flex;




justify-content:space-between;




gap:20px;




padding:7px 0}




.top-links{




display:flex;




gap:18px}




.top-links a:hover{




color:var(--yellow)}




.site-header{




position:sticky;




top:0;




z-index:1000;




background:rgba(255,250,246,.94);




border-bottom:1px solid rgba(232,226,220,.8);




backdrop-filter:blur(16px)}




.header-inner{




min-height:74px;




display:flex;




align-items:center;




gap:26px}




.brand{




display:inline-flex;




align-items:center;




gap:10px;




flex-shrink:0}




.brand img{




border-radius:13px;




box-shadow:0 8px 18px rgba(255,112,86,.25)}




.brand-copy{




display:flex;




flex-direction:column;




line-height:1}




.brand-copy strong{




font-size:20px;




letter-spacing:-.04em}




.brand-copy small{




font-size:9px;




color:var(--coral);




letter-spacing:.12em;




margin-top:6px}




.main-nav{




display:flex;




align-items:center;




gap:2px;




flex:1}




.main-nav a{




font-size:13px;




color:var(--ink-soft);




padding:9px 10px;




border-radius:10px;




white-space:nowrap;




transition:.2s var(--ease)}




.main-nav a:hover,.main-nav a.active{




background:#fff0eb;




color:var(--coral-dark)}




.header-actions{




display:flex;




align-items:center;




gap:9px}




.header-login,.header-join{




font-size:13px;




padding:8px 14px;




border-radius:99px;




white-space:nowrap}




.header-login{




border:1px solid var(--line);




color:var(--ink-soft)}




.header-join{




background:var(--ink);




color:#fff}




.header-join:hover{




background:var(--coral)}




.mobile-menu{




display:none;




border:0;




background:transparent;




font-size:22px;




color:var(--ink)}




.search-bar{




background:var(--paper-2);




border-bottom:1px solid var(--line);




padding:11px 0}




.search-form{




height:42px;




max-width:700px;




margin:auto;




border:1px solid #ded6cd;




border-radius:999px;




background:#fff;




display:flex;




align-items:center;




overflow:hidden;




transition:.2s var(--ease)}




.search-form:focus-within{




border-color:var(--coral);




box-shadow:0 0 0 4px #ff70561c}




.search-icon{




font-size:25px;




color:var(--coral);




padding:0 0 2px 17px}




.search-form input{




border:0;




outline:0;




flex:1;




min-width:0;




padding:0 12px;




color:var(--ink);




background:transparent}




.search-form button{




border:0;




background:var(--coral);




color:#fff;




height:100%;




padding:0 22px;




cursor:pointer}




.search-form button:hover{




background:var(--coral-dark)}




.search-hint{




text-align:center;




font-size:11px;




color:#9a8f87;




margin:6px 0 0}




.breadcrumb{




background:var(--paper-2);




border-bottom:1px solid var(--line);




font-size:12px;




color:#8d837a}




.breadcrumb .container{




padding:10px 0}




.breadcrumb a:hover{




color:var(--coral)}




.breadcrumb span{




padding:0 8px;




color:#c4b8af}




.eyebrow{




display:inline-block;




color:var(--coral-dark);




font-size:11px;




letter-spacing:.14em;




font-weight:800;




margin-bottom:10px}




.eyebrow-light{




color:#ffd6c9}




.section{




padding:92px 0}




.section-light{




background:var(--paper)}




.section-tint{




background:#f7f1ee}




.section-dark{




background:var(--ink);




color:#fff}




.section-heading{




margin-bottom:36px}




.section-heading h2,.media-copy h2,.ai-strip h2,.join-grid h2,.contact-cta h2,.review-band h2,.video-feature-row h2,.prompt-grid h2,.about-story h2,.contact-info h2,.community-entry h2{




margin:0;




font-size:clamp(27px,4vw,42px);




line-height:1.18;




letter-spacing:-.045em}




.section-heading h2 span,.media-copy h2 span,.ai-strip h2 span,.join-grid h2 span,.contact-cta h2 span,.review-band h2 span,.video-feature-row h2 span,.prompt-grid h2 span,.about-story h2 span,.contact-info h2 span,.community-entry h2 span{




display:block;




color:var(--coral)}




.section-heading>p{




max-width:680px;




margin-top:14px}




.split-heading{




display:flex;




align-items:end;




justify-content:space-between;




gap:40px}




.split-heading>p{




max-width:410px;




margin-bottom:0}




.btn{




display:inline-flex;




align-items:center;




justify-content:center;




gap:12px;




border:0;




border-radius:999px;




padding:12px 20px;




font-size:13px;




font-weight:700;




cursor:pointer;




transition:.2s var(--ease)}




.btn:hover{




transform:translateY(-2px);




box-shadow:0 10px 24px rgba(23,37,61,.14)}




.btn-primary{




background:var(--coral);




color:#fff}




.btn-primary:hover{




background:var(--coral-dark)}




.btn-ghost{




border:1px solid #ffffff55;




color:#fff;




background:#ffffff14}




.btn-light{




background:#fff;




color:var(--ink)}




.btn-coral{




background:var(--coral);




color:#fff}




.btn-outline{




background:transparent;




border:1px solid var(--line);




color:var(--ink)}




.btn-small{




padding:8px 14px}




.text-link{




color:var(--coral-dark);




font-size:13px;




font-weight:800}




.text-link:hover{




color:var(--violet)}




.hero{




min-height:590px;




display:flex;




align-items:center;




position:relative;




overflow:hidden;




color:#fff}




.hero-media{




position:absolute;




inset:0;




background-size:cover;




background-position:center;




filter:saturate(1.1);




transform:scale(1.02)}




.hero-gradient{




position:absolute;




inset:0;




background:linear-gradient(90deg,rgba(23,37,61,.96) 0%,rgba(23,37,61,.78) 42%,rgba(23,37,61,.12) 100%),linear-gradient(0deg,rgba(23,37,61,.5),transparent 35%)}




.hero-inner{




position:relative;




z-index:1;




padding:90px 0}




.hero-copy{




max-width:620px}




.hero-copy h1,.page-hero h1{




font-size:clamp(40px,6vw,70px);




line-height:1.05;




letter-spacing:-.065em;




margin:0 0 22px}




.hero-copy h1 span,.page-hero h1 span{




display:block;




color:#ffad98}




.hero-copy p{




color:#ecf0fa;




max-width:580px;




font-size:16px}




.hero-actions{




display:flex;




gap:12px;




margin:28px 0 28px}




.hero-note{




font-size:12px;




color:#dbe7f5}




.hero-note strong{




color:var(--yellow);




font-weight:600}




.live-dot{




width:8px;




height:8px;




display:inline-block;




border-radius:50%;




background:#ff5c68;




box-shadow:0 0 0 5px #ff5c6830;




margin-right:7px}




.hero-stats{




display:flex;




gap:42px;




margin-top:75px}




.hero-stats strong{




font-size:28px;




display:block;




line-height:1}




.hero-stats strong span{




font-size:13px;




color:var(--yellow);




margin-left:2px}




.hero-stats small{




font-size:11px;




color:#b9c7da}




.video-grid{




display:grid;




grid-template-columns:repeat(3,1fr);




gap:20px}




.video-grid-4{




grid-template-columns:repeat(4,1fr)}




.video-card{




background:#fff;




border:1px solid var(--line);




border-radius:16px;




overflow:hidden;




transition:.25s var(--ease);




cursor:pointer}




.video-card:hover,.video-card.is-playing{




transform:translateY(-6px);




box-shadow:var(--shadow);




border-color:#ffb4a5}




.video-thumb{




position:relative;




aspect-ratio:16/10;




overflow:hidden;




background:#dce5ef}




.video-thumb img{




width:100%;




height:100%;




object-fit:cover;




transition:.4s var(--ease)}




.video-card:hover .video-thumb img{




transform:scale(1.05)}




.video-shade{




position:absolute;




inset:0;




background:linear-gradient(0deg,rgba(23,37,61,.6),transparent 50%)}




.play-button{




position:absolute;




left:50%;




top:50%;




transform:translate(-50%,-50%) scale(.9);




opacity:0;




width:46px;




height:46px;




border-radius:50%;




border:1px solid #ffffff99;




background:#ff7056e8;




color:#fff;




cursor:pointer;




transition:.2s var(--ease)}




.video-card:hover .play-button,.video-card.is-playing .play-button{




opacity:1;




transform:translate(-50%,-50%) scale(1)}




.video-card.is-playing .play-button{




background:var(--cyan)}




.video-duration,.video-tag{




position:absolute;




bottom:10px;




font-size:10px;




color:#fff;




background:#17253db8;




padding:3px 7px;




border-radius:5px}




.video-duration{




right:10px}




.video-tag{




left:10px;




color:#ffe3d9}




.video-card-body{




padding:15px}




.video-card h3{




font-size:15px;




line-height:1.45;




margin:0 0 7px;




letter-spacing:-.015em}




.video-card p{




font-size:12px;




line-height:1.5;




margin:0 0 13px;




display:-webkit-box;




-webkit-box-orient:vertical;




-webkit-line-clamp:2;




overflow:hidden}




.video-meta{




display:flex;




gap:9px;




flex-wrap:wrap;




font-size:10px;




color:#8e847c}




.video-meta span:first-child{




color:var(--coral-dark)}




.section-cta{




text-align:right;




margin-top:22px}




.media-feature{




display:grid;




grid-template-columns:1.08fr .92fr;




gap:72px;




align-items:center}




.media-frame{




aspect-ratio:4/3;




position:relative;




border-radius:24px;




overflow:hidden;




box-shadow:var(--shadow);




background:#d6dfed}




.media-frame img{




width:100%;




height:100%;




object-fit:cover}




.floating-play{




position:absolute;




left:20px;




bottom:20px;




background:#17253de8;




color:#fff;




border:1px solid #ffffff4c;




border-radius:13px;




padding:10px 13px;




display:flex;




align-items:center;




gap:10px}




.floating-play span{




width:27px;




height:27px;




display:grid;




place-items:center;




background:var(--coral);




border-radius:50%;




font-size:11px}




.floating-play small{




font-size:11px}




.media-copy>p{




margin:18px 0 24px;




max-width:530px}




.metric-row{




display:flex;




gap:28px;




margin:0 0 28px}




.metric-row strong{




display:block;




font-size:25px}




.metric-row span{




font-size:11px;




color:#8e847c}




.playground-grid{




display:grid;




grid-template-columns:1.4fr 1fr 1fr;




gap:18px}




.play-card{




min-height:290px;




position:relative;




border-radius:18px;




overflow:hidden;




color:#fff;




display:flex;




align-items:flex-end;




background:#17253d}




.play-card img{




position:absolute;




inset:0;




width:100%;




height:100%;




object-fit:cover;




transition:.4s var(--ease)}




.play-card:hover img{




transform:scale(1.06)}




.play-card:after{




content:"";




position:absolute;




inset:0;




background:linear-gradient(0deg,#17253ded,transparent 75%)}




.play-card>div{




position:relative;




z-index:1;




padding:20px}




.play-card span{




font-size:10px;




color:#ffd6c9;




letter-spacing:.08em}




.play-card h3{




font-size:21px;




line-height:1.25;




margin:7px 0 4px}




.play-card p{




color:#d7e1f2;




font-size:12px;




margin:0}




.play-card-tall{




min-height:390px}




.ai-strip{




display:grid;




grid-template-columns:1fr .82fr;




gap:70px;




align-items:center}




.ai-strip h2{




color:#fff}




.ai-strip p{




color:#bcc8d9;




max-width:560px;




margin:18px 0}




.ai-strip>img{




width:100%;




aspect-ratio:4/3;




object-fit:cover;




border-radius:20px;




box-shadow:0 22px 60px #0b1325}




.chip-row{




display:flex;




flex-wrap:wrap;




gap:7px;




margin-bottom:26px}




.chip-row span{




font-size:11px;




border:1px solid #ffffff2d;




color:#dce9f6;




border-radius:99px;




padding:5px 10px}




.expert-grid{




display:grid;




grid-template-columns:repeat(3,1fr);




gap:17px}




.expert-card{




background:#fff;




border:1px solid var(--line);




border-radius:16px;




padding:21px;




display:flex;




gap:14px}




.expert-avatar{




width:46px;




height:46px;




flex-shrink:0;




border-radius:15px;




background:linear-gradient(135deg,var(--coral),var(--violet));




color:#fff;




display:grid;




place-items:center;




font-size:21px;




font-weight:800}




.expert-card h3{




font-size:16px;




margin:0 0 4px}




.expert-card b{




display:block;




color:var(--coral-dark);




font-size:11px}




.expert-card p{




font-size:12px;




margin:8px 0}




.expert-card small{




font-size:10px;




color:#8e847c;




display:block;




line-height:1.6}




.expert-actions{




display:flex;




gap:14px;




margin-top:12px}




.expert-actions a{




font-size:11px;




font-weight:700;




color:var(--violet)}




.join-grid{




display:grid;




grid-template-columns:1fr .72fr;




gap:65px;




align-items:start}




.join-grid>div>p{




max-width:620px;




margin:18px 0 25px}




.steps{




display:grid;




grid-template-columns:repeat(2,1fr);




gap:12px;




margin-bottom:25px}




.steps>div{




background:#fff;




border:1px solid var(--line);




border-radius:14px;




padding:14px}




.steps i{




font-style:normal;




color:var(--coral);




font-size:11px;




font-weight:800;




display:block}




.steps strong{




display:block;




font-size:14px}




.steps span{




font-size:11px;




color:#8e847c}




.faq-box{




background:#fff;




border-radius:18px;




border:1px solid var(--line);




padding:23px;




box-shadow:0 10px 30px #5d4c3d09}




.faq-box h3{




margin:0 0 8px;




font-size:19px}




.faq-box details{




border-top:1px solid var(--line);




padding:12px 0}




.faq-box summary{




font-size:13px;




font-weight:700;




cursor:pointer}




.faq-box p{




font-size:12px;




margin:8px 0 0}




.review-band{




display:flex;




align-items:end;




justify-content:space-between;




margin-bottom:24px}




.review-band>p{




margin:0}




.review-highlight{




background:#fff0eb;




border-radius:14px;




padding:14px 22px;




display:flex;




gap:10px;




align-items:baseline}




.review-highlight strong{




font-size:25px;




color:var(--coral-dark)}




.review-highlight span{




font-size:11px;




color:#8e847c}




.comments-section{




padding:80px 0;




background:var(--paper-2)}




.comments-section .container{




max-width:1200px}




.comments-section .section-heading{




width:min(1200px,calc(100% - 40px));




margin:0 auto 30px}




.comments-grid{




width:min(1200px,calc(100% - 40px));




margin:0 auto;




display:grid;




grid-template-columns:repeat(4,1fr);




gap:16px}




.comment-card{




background:#fff;




border:1px solid var(--line);




padding:17px;




border-radius:15px}




.comment-top{




display:flex;




align-items:center;




gap:9px}




.avatar{




width:31px;




height:31px;




border-radius:50%;




background:#d8f5f1;




color:#167e80;




display:grid;




place-items:center;




font-weight:800;




font-size:12px}




.comment-top strong{




font-size:12px;




display:block}




.comment-top small{




font-size:10px;




color:#9b9086}




.comment-stars{




margin-left:auto;




color:#ffb741;




font-size:10px;




letter-spacing:-2px}




.comment-card p{




font-size:12px;




line-height:1.7;




margin:13px 0 0}




.section-contact{




background:linear-gradient(120deg,var(--coral-dark),#f58b6f);




color:#fff}




.contact-cta{




display:flex;




align-items:center;




justify-content:space-between;




gap:30px}




.contact-cta h2 span{




color:#ffe4a8}




.contact-cta p{




color:#ffe7df;




max-width:550px;




margin:17px 0 0}




.page-hero{




padding:78px 0 85px;




position:relative;




overflow:hidden;




color:#fff;




background:var(--ink)}




.page-hero:after{




content:"";




position:absolute;




right:-8%;




top:-55%;




width:620px;




height:620px;




border-radius:50%;




background:radial-gradient(circle,#ff70567a 0 2%,transparent 60%);




pointer-events:none}




.page-hero .container{




position:relative;




z-index:1}




.page-hero h1{




max-width:780px;




margin-bottom:18px}




.page-hero p{




color:#d6e1f0;




max-width:760px;




font-size:15px}




.page-hero-video{




background:linear-gradient(110deg,#17253d,#3b3c79)}




.page-hero-award{




background:linear-gradient(110deg,#17253d,#6d4d68)}




.page-hero-vlog{




background:linear-gradient(110deg,#17253d,#36727b)}




.page-hero-community{




background:linear-gradient(110deg,#17253d,#5d4d89)}




.page-hero-ai{




background:linear-gradient(110deg,#17253d,#3d6681)}




.page-hero-tools{




background:linear-gradient(110deg,#17253d,#8a5b65)}




.page-hero-about{




background:linear-gradient(110deg,#17253d,#7a5364)}




.page-hero-contact{




background:linear-gradient(110deg,#17253d,#42777b)}




.page-hero-news{




background:linear-gradient(110deg,#17253d,#675986)}




.page-hero-qa{




background:linear-gradient(110deg,#17253d,#8a5b65)}




.hero-pills,.award-ribbon{




display:flex;




flex-wrap:wrap;




gap:8px;




margin-top:24px}




.hero-pills span,.award-ribbon{




border:1px solid #ffffff35;




background:#ffffff12;




padding:7px 13px;




border-radius:99px;




color:#f5dcd5;




font-size:11px}




.award-ribbon{




align-items:baseline;




border-color:#ffcf5c66;




background:#ffcf5c12}




.award-ribbon strong{




font-size:28px;




color:var(--yellow);




margin-right:5px}




.filter-row{




display:flex;




align-items:center;




gap:8px;




flex-wrap:wrap;




margin-bottom:24px}




.filter-row strong{




margin-right:auto;




font-size:14px}




.filter{




border:1px solid var(--line);




background:#fff;




color:var(--ink-soft);




border-radius:99px;




padding:7px 12px;




font-size:11px;




cursor:pointer}




.filter.active,.filter:hover{




background:#fff0eb;




color:var(--coral-dark);




border-color:#ffb2a3}




.video-feature-row{




display:grid;




grid-template-columns:1fr .8fr;




gap:70px;




align-items:center}




.video-feature-row p{




max-width:620px;




margin:18px 0 25px}




.quote-card{




background:#fff;




border:1px solid var(--line);




border-radius:20px;




padding:32px;




box-shadow:var(--shadow)}




.quote-card>span{




font-size:58px;




line-height:.5;




color:var(--coral);




font-family:Georgia}




.quote-card p{




font-size:18px;




color:var(--ink);




line-height:1.5}




.quote-card small{




font-size:11px;




color:#958981}




.award-list{




display:flex;




flex-direction:column;




gap:18px}




.award-item{




display:grid;




grid-template-columns:70px 220px 1fr;




gap:22px;




align-items:center;




border-top:1px solid var(--line);




padding:18px 0}




.award-year{




font-size:18px;




font-weight:800;




color:var(--coral)}




.award-image{




aspect-ratio:16/10;




overflow:hidden;




border-radius:13px}




.award-image img{




width:100%;




height:100%;




object-fit:cover}




.award-item h3{




font-size:18px;




margin:8px 0}




.award-item p{




font-size:13px}




.tag-hot{




font-size:10px;




color:var(--coral-dark);




background:#fff0eb;




padding:4px 8px;




border-radius:5px}




.vlog-layout{




display:grid;




grid-template-columns:1.08fr .92fr;




gap:60px;




align-items:center}




.vlog-main{




position:relative;




aspect-ratio:4/3;




border-radius:20px;




overflow:hidden}




.vlog-main img{




width:100%;




height:100%;




object-fit:cover}




.vlog-main:after{




content:"";




position:absolute;




inset:0;




background:linear-gradient(0deg,#17253dcf,transparent 65%)}




.vlog-overlay{




position:absolute;




z-index:1;




bottom:20px;




left:22px;




color:#fff}




.vlog-overlay span{




font-size:10px;




color:#ffd6c9}




.vlog-overlay h2{




font-size:25px;




line-height:1.2;




margin:5px 0}




.vlog-overlay p{




font-size:11px;




color:#d9e5f2;




margin:0}




.vlog-side h2{




font-size:32px;




margin:0}




.vlog-side h2 span{




display:block;




color:var(--coral)}




.vlog-side>p{




margin:18px 0 24px}




.note-list{




border-top:1px solid var(--line)}




.note-list a{




display:grid;




grid-template-columns:32px 1fr auto;




gap:8px;




align-items:center;




border-bottom:1px solid var(--line);




padding:12px 0;




font-size:12px}




.note-list b{




color:var(--coral)}




.note-list em{




font-style:normal;




color:#958981;




font-size:10px}




.vlog-cards{




display:grid;




grid-template-columns:repeat(3,1fr);




gap:18px}




.vlog-cards article{




background:#fff;




border-radius:16px;




border:1px solid var(--line);




overflow:hidden}




.vlog-cards img{




width:100%;




aspect-ratio:16/10;




object-fit:cover}




.vlog-cards article>span,.vlog-cards h3,.vlog-cards p{




display:block;




margin-left:16px;




margin-right:16px}




.vlog-cards article>span{




color:var(--coral);




font-size:10px;




margin-top:13px}




.vlog-cards h3{




font-size:15px;




line-height:1.4;




margin-top:6px}




.vlog-cards p{




font-size:11px;




color:#958981;




margin-bottom:15px}




.community-dashboard{




display:grid;




grid-template-columns:1fr 300px;




gap:22px}




.community-feed{




background:#fff;




border:1px solid var(--line);




border-radius:18px;




padding:22px}




.feed-head{




display:flex;




justify-content:space-between;




align-items:center;




margin-bottom:18px}




.feed-head h2{




font-size:28px;




margin:0}




.feed-head h2 span{




color:var(--coral)}




.feed-post{




display:grid;




grid-template-columns:37px 1fr;




gap:12px;




padding:18px 0;




border-top:1px solid var(--line)}




.feed-avatar{




width:37px;




height:37px;




border-radius:13px;




background:var(--cyan);




color:#fff;




display:grid;




place-items:center;




font-weight:800}




.feed-avatar.coral{




background:var(--coral)}




.feed-post strong{




font-size:13px}




.feed-post small{




color:#958981;




display:block;




font-size:10px}




.feed-post p{




font-size:13px;




margin:10px 0}




.feed-media{




position:relative;




border-radius:12px;




overflow:hidden;




margin-top:12px}




.feed-media img{




width:100%;




aspect-ratio:16/6;




object-fit:cover}




.feed-media span{




position:absolute;




bottom:9px;




left:10px;




color:#fff;




background:#17253db8;




padding:4px 8px;




border-radius:5px;




font-size:10px}




.feed-actions{




display:flex;




gap:20px;




color:#958981;




font-size:11px;




margin-top:10px}




.mini-tags,.tag-row{




display:flex;




gap:7px;




flex-wrap:wrap}




.mini-tags span,.tag-row span{




font-size:10px;




padding:5px 9px;




background:#f4eefb;




color:#6356bc;




border-radius:99px}




.community-aside{




display:flex;




flex-direction:column;




gap:16px}




.online-card,.topic-card{




background:#fff;




border:1px solid var(--line);




border-radius:18px;




padding:20px}




.online-card>b{




display:block;




font-size:36px;




color:var(--coral);




margin-top:12px}




.online-card>small{




display:block;




color:#958981;




font-size:11px;




margin-bottom:18px}




.topic-card h3{




font-size:18px}




.topic-card>a{




display:block;




padding:9px 0;




border-top:1px solid var(--line);




font-size:12px}




.topic-card>a:hover{




color:var(--coral)}




.gallery-grid{




display:grid;




grid-template-columns:2fr 1fr 1fr;




grid-template-rows:170px 170px;




gap:12px}




.gallery-grid img{




width:100%;




height:100%;




object-fit:cover;




border-radius:14px}




.gallery-grid img:first-child{




grid-row:span 2}




.ai-workspace{




display:grid;




grid-template-columns:1fr 1fr;




gap:60px;




align-items:center}




.ai-preview{




background:#e2e7ef;




border-radius:20px;




padding:12px;




box-shadow:var(--shadow)}




.ai-preview>img{




width:100%;




aspect-ratio:4/3;




object-fit:cover;




border-radius:13px}




.timeline{




display:flex;




gap:5px;




align-items:center;




padding:12px 6px 3px}




.timeline span{




height:5px;




background:var(--coral);




border-radius:99px;




flex:1}




.timeline span:nth-child(2){




background:var(--cyan);




flex:1.6}




.timeline span:nth-child(3){




background:var(--violet);




flex:.7}




.timeline span:nth-child(4){




background:#cbd4df;




flex:1.3}




.timeline b{




font-size:9px;




color:#66758b;




white-space:nowrap}




.ai-copy h2{




font-size:32px;




margin:0}




.ai-copy h2 span{




display:block;




color:var(--coral)}




.ai-copy>p{




margin:18px 0 23px}




.tool-list{




border-top:1px solid var(--line)}




.tool-list>div{




display:flex;




align-items:center;




gap:10px;




border-bottom:1px solid var(--line);




padding:12px 0}




.tool-list i{




font-style:normal;




color:var(--coral);




font-size:20px;




width:24px}




.tool-list strong{




display:block;




font-size:13px}




.tool-list small{




display:block;




color:#958981;




font-size:10px}




.tool-list em{




margin-left:auto;




font-style:normal;




color:var(--violet);




font-size:10px}




.prompt-grid{




display:grid;




grid-template-columns:1fr .8fr;




gap:70px;




align-items:center}




.prompt-grid h2{




color:#fff}




.prompt-grid p{




color:#c3cedc;




margin:18px 0 25px}




.prompt-card{




background:#fff;




border-radius:18px;




padding:25px;




color:var(--ink);




box-shadow:0 18px 50px #0b132566}




.prompt-card>span{




font-size:10px;




color:var(--coral);




font-weight:800}




.prompt-card p{




color:var(--ink);




font-size:15px;




line-height:1.7;




margin:13px 0}




.prompt
-result{




border-top:1px solid var(--line);




padding-top:13px;




color:#167e80;




font-size:12px}




.tool-dashboard{




display:grid;




grid-template-columns:220px 1fr;




gap:24px}




.tool-sidebar{




background:var(--ink);




color:#fff;




border-radius:18px;




padding:22px;




align-self:start}




.tool-sidebar h2{




font-size:24px;




margin:0 0 20px}




.tool-sidebar h2 span{




display:block;




color:#ffad98}




.tool-sidebar>a{




display:flex;




justify-content:space-between;




align-items:center;




color:#dbe5f2;




padding:12px 0;




border-top:1px solid #ffffff22;




font-size:12px}




.tool-sidebar>a.selected,.tool-sidebar>a:hover{




color:#fff0eb}




.tool-sidebar>a.selected b{




background:var(--coral);




color:#fff}




.tool-sidebar>a b{




font-size:9px;




background:#ffffff1b;




border-radius:50%;




width:22px;




height:22px;




display:grid;




place-items:center}




.tool-canvas{




background:#f1ece8;




border-radius:18px;




padding:25px}




.canvas-head{




display:flex;




justify-content:space-between;




gap:20px;




align-items:start}




.canvas-head h3{




font-size:22px;




margin:0}




.status-badge{




font-size:10px;




padding:5px 8px;




border-radius:99px;




color:#167e80;




background:#d8f5f1}




.canvas-grid{




display:grid;




grid-template-columns:1fr 1fr;




gap:13px;




margin-top:22px}




.canvas-card{




background:#fff;




border-radius:13px;




padding:17px;




border:1px solid var(--line);




position:relative}




.canvas-card-wide{




grid-column:span 2}




.canvas-card .number{




color:var(--coral);




font-size:11px;




font-weight:800}




.canvas-card h4{




font-size:16px;




margin:5px 0}




.canvas-card p,.canvas-card li{




font-size:12px;




color:var(--ink-soft)}




.canvas-card ul{




padding-left:17px;




margin:8px 0}




.canvas-card button{




font-size:10px;




border:1px solid var(--line);




background:#fff;




border-radius:99px;




padding:6px 10px;




color:var(--coral);




cursor:pointer}




.check-list{




display:grid;




grid-template-columns:1fr 1fr;




gap:10px}




.check-list label{




font-size:11px;




color:var(--ink-soft)}




.check-list input{




accent-color:var(--coral)}




.tool-tip{




display:flex;




gap:12px;




align-items:center;




margin-top:16px;




font-size:11px;




color:#756a63}




.tool-tip strong{




color:var(--coral-dark)}




.howto-grid{




display:grid;




grid-template-columns:repeat(3,1fr);




gap:18px}




.howto-grid article{




background:#fff;




border:1px solid var(--line);




border-radius:16px;




padding:21px}




.howto-grid b{




font-size:26px;




color:var(--coral)}




.howto-grid h3{




font-size:17px;




margin:8px 0}




.howto-grid p{




font-size:12px}




.about-story{




display:grid;




grid-template-columns:1fr .8fr;




gap:70px;




align-items:center}




.about-story h2{




font-size:35px}




.about-story>img{




border-radius:20px;




aspect-ratio:4/3;




object-fit:cover;




box-shadow:var(--shadow)}




.value-row{




display:grid;




grid-template-columns:repeat(4,1fr);




gap:10px;




margin-top:28px}




.value-row>div{




padding-top:10px;




border-top:2px solid var(--coral)}




.value-row strong{




display:block;




color:var(--coral);




font-size:17px}




.value-row span{




font-size:11px}




.contact-layout{




display:grid;




grid-template-columns:1fr .88fr;




gap:70px;




align-items:center}




.contact-info h2{




font-size:34px}




.contact-info>p{




max-width:550px;




margin:18px 0 24px}




.contact-lines{




border-top:1px solid var(--line)}




.contact-lines>div{




display:flex;




gap:11px;




padding:12px 0;




border-bottom:1px solid var(--line)}




.contact-lines i{




font-style:normal;




color:var(--coral);




font-size:19px;




width:22px}




.contact-lines span{




font-size:12px;




color:var(--ink-soft)}




.contact-lines b{




display:block;




color:var(--ink);




font-size:11px}




.contact-buttons{




display:flex;




gap:10px;




margin-top:23px;




flex-wrap:wrap}




.contact-photo{




position:relative}




.contact-photo img{




border-radius:20px;




aspect-ratio:4/3;




object-fit:cover;




box-shadow:var(--shadow)}




.photo-caption{




position:absolute;




left:18px;




bottom:17px;




color:#fff;




background:#17253dc7;




border-radius:8px;




padding:6px 10px;




font-size:11px}




.community-entry{




display:grid;




grid-template-columns:1fr auto;




gap:50px;




align-items:center}




.community-entry>div>p{




max-width:580px;




margin:18px 0}




.entry-links{




display:flex;




flex-wrap:wrap;




gap:10px}




.entry-links a{




background:#fff;




border:1px solid var(--line);




border-radius:12px;




padding:11px 13px;




min-width:155px}




.entry-links strong,.entry-links span{




display:block}




.entry-links strong{




font-size:12px}




.entry-links span{




color:var(--coral);




font-size:10px;




margin-top:4px}




.contact-qrs{




display:flex;




gap:12px}




.contact-qrs figure{




margin:0;




text-align:center}




.contact-qrs img{




width:106px;




height:106px;




border-radius:10px;




background:#fff;




padding:4px;




border:1px solid var(--line)}




.contact-qrs figcaption{




font-size:10px;




color:#8e847c;




margin-top:5px}




.news-layout,.qa-layout{




display:grid;




grid-template-columns:1fr 285px;




gap:25px;




align-items:start}




.news-list,.qa-list{




display:flex;




flex-direction:column;




gap:14px}




.news-row{




display:grid;




grid-template-columns:220px 1fr;




gap:20px;




background:#fff;




border:1px solid var(--line);




border-radius:16px;




padding:13px}




.news-image{




position:relative;




aspect-ratio:16/10;




overflow:hidden;




border-radius:10px}




.news-image img{




width:100%;




height:100%;




object-fit:cover;




transition:.3s var(--ease)}




.news-image:hover img{




transform:scale(1.06)}




.news-image span{




position:absolute;




bottom:8px;




left:8px;




background:#17253dcc;




color:#fff;




border-radius:5px;




padding:3px 6px;




font-size:10px}




.news-meta{




display:flex;




gap:11px;




align-items:center;




flex-wrap:wrap;




color:#988e86;




font-size:10px}




.news-meta span{




color:var(--coral);




font-weight:700}




.news-meta b{




font-weight:400}




.news-row h2,.qa-row h2{




font-size:18px;




line-height:1.4;




margin:9px 0 7px}




.news-row h2 a:hover,.qa-row h2 a:hover{




color:var(--coral)}




.news-row p,.qa-row p{




font-size:12px;




line-height:1.65;




margin-bottom:10px}




.news-aside{




display:flex;




flex-direction:column;




gap:15px}




.aside-card{




background:#fff;




border:1px solid var(--line);




border-radius:16px;




padding:20px}




.aside-card h2{




font-size:18px;




margin:0 0 13px}




.aside-card ol{




list-style:none;




margin:0;




padding:0}




.aside-card li{




border-top:1px solid var(--line);




padding:10px 0;




font-size:12px}




.aside-card li a:hover{




color:var(--coral)}




.aside-card li small{




display:block;




color:#9a8f87;




font-size:10px;




margin-top:3px}




.aside-accent{




background:#fff0eb;




border-color:#ffd2c8}




.aside-accent p{




font-size:12px}




.tag-cloud{




display:flex;




gap:7px;




flex-wrap:wrap}




.tag-cloud span{




font-size:10px;




background:#f4eefb;




color:#6356bc;




padding:5px 8px;




border-radius:99px}




.qa-row{




display:grid;




grid-template-columns:42px 155px 1fr;




gap:15px;




align-items:center;




background:#fff;




border:1px solid var(--line);




border-radius:16px;




padding:13px}




.qa-row>img{




width:155px;




height:100px;




object-fit:cover;




border-radius:10px}




.qa-number{




font-size:11px;




color:var(--coral);




font-weight:800;




align-self:start;




padding-top:6px}




.simple-list{




list-style:none;




padding:0;




margin:0}




.simple-list li{




padding:10px 0;




border-top:1px solid var(--line);




font-size:12px}




.simple-list b{




color:var(--coral);




margin-right:7px}




.detail-page{




background:var(--paper)}




.detail-layout{




display:grid;




grid-template-columns:minmax(0,1fr) 280px;




gap:30px;




padding-top:44px}




.detail-article{




background:#fff;




border:1px solid var(--line);




border-radius:20px;




padding:clamp(20px,4vw,46px)}




.detail-kicker{




font-size:11px;




color:var(--coral);




font-weight:800}




.detail-article h1{




font-size:clamp(28px,4vw,46px);




line-height:1.2;




letter-spacing:-.05em;




margin:12px 0}




.detail-meta{




display:flex;




gap:15px;




flex-wrap:wrap;




color:#988e86;




font-size:11px;




padding-bottom:20px;




border-bottom:1px solid var(--line)}




.detail-cover{




width:100%;




aspect-ratio:16/8.4;




object-fit:cover;




border-radius:14px;




margin:24px 0}




.detail-content p{




font-size:15px;




line-height:2;




color:#48566c}




.detail-content strong{




color:var(--coral-dark)}




.detail-content h2{




font-size:23px}




.detail-content img{




width:100%;




border-radius:12px}




.tag-row{




margin:25px 0}




.share-line{




border-top:1px solid var(--line);




padding-top:18px;




display:flex;




align-items:center;




gap:8px;




flex-wrap:wrap}




.share-line strong{




font-size:12px;




margin-right:auto}




.share-line button{




font-size:10px;




padding:6px 10px;




border:1px solid var(--line);




background:#fff;




border-radius:99px;




cursor:pointer}




.share-line button:hover{




color:var(--coral);




border-color:#ffb4a5}




.detail-aside{




display:flex;




flex-direction:column;




gap:15px;




align-self:start;




position:sticky;




top:100px}




.detail-aside .aside-card{




box-shadow:0 7px 20px #5d4c3d08}




.question-box{




display:flex;




gap:12px;




background:#fff0eb;




padding:15px 17px;




border-radius:12px;




margin:18px 0}




.question-mark{




width:31px;




height:31px;




border-radius:10px;




background:var(--coral);




color:#fff;




display:grid;




place-items:center;




font-weight:800}




.question-box strong{




font-size:11px;




color:var(--coral-dark)}




.question-box p{




color:var(--ink);




font-size:15px;




font-weight:700;




margin:3px 0 0}




.answer-label{




font-size:11px;




font-weight:800;




color:var(--violet);




margin-bottom:10px}




.site-footer{




background:var(--ink);




color:#fff}




.footer-main{




display:grid;




grid-template-columns:1fr 1.4fr;




gap:80px;




padding:68px 0 48px}




.footer-brand p{




color:#aebdd0;




font-size:12px;




max-width:330px;




margin:20px 0}




.site-footer .brand-copy strong{




color:#fff}




.site-footer .brand-copy small{




color:#ffb1a0}




.footer-social{




display:flex;




gap:7px;




flex-wrap:wrap}




.footer-social button{




font-size:10px;




color:#dbe6f4;




border:1px solid #ffffff25;




background:#ffffff0d;




border-radius:99px;




padding:6px 9px;




cursor:pointer}




.footer-social button:hover{




border-color:#ff9b87;




color:#fff}




.footer-links{




display:grid;




grid-template-columns:repeat(3,1fr);




gap:25px}




.footer-links h3{




font-size:12px;




margin:0 0 13px;




color:#fff}




.footer-links a{




display:block;




color:#aebdd0;




font-size:11px;




padding:4px 0}




.footer-links a:hover{




color:#ffb09e}




.footer-qr .qr-row{




display:flex;




gap:11px}




.footer-qr figure{




margin:0;




text-align:center}




.footer-qr img{




width:72px;




height:72px;




border-radius:8px;




background:#fff;




padding:3px}




.footer-qr figcaption{




color:#aebdd0;




font-size:9px;




margin-top:3px}




.partner-row{




border-top:1px solid #ffffff18;




border-bottom:1px solid #ffffff18;




display:flex;




align-items:center;




gap:20px;




flex-wrap:wrap;




padding:15px 0;




color:#879ab2;




font-size:10px}




.partner-row b{




font-size:11px;




color:#c8d4e2;




font-weight:600}




.footer-bottom{




background:#111c30;




color:#879ab2;




font-size:10px}




.footer-bottom .container{




display:flex;




justify-content:space-between;




gap:20px;




padding:15px 0}




.wanwu-toast{




position:fixed;




z-index:3000;




left:50%;




bottom:28px;




transform:translate(-50%,15px);




opacity:0;




background:#17253df2;




color:#fff;




border:1px solid #ffffff2e;




box-shadow:0 18px 40px #0b132555;




border-radius:99px;




padding:10px 17px;




font-size:12px;




transition:.2s var(--ease);




pointer-events:none}




.wanwu-toast.show{




transform:translate(-50%,0);




opacity:1}




.header-noise{




height:0;




overflow:hidden;




position:absolute;




left:-9999px}




.fp-html-8b6c4082 .section-heading h2{




transform:translateX(var(--fp-shift))}




@media(max-width:1050px){




.main-nav{




gap:0}




.main-nav a{




padding-left:7px;




padding-right:7px;




font-size:12px}




.header-inner{




gap:13px}




.video-grid-4{




grid-template-columns:repeat(2,1fr)}




.expert-grid{




grid-template-columns:repeat(2,1fr)}




.footer-main{




gap:40px}




}




@media(max-width:780px){




.container{




width:min(100% - 28px,620px)}




.top-links{




display:none}




.header-inner{




min-height:65px}




.main-nav{




position:absolute;




left:14px;




right:14px;




top:65px;




display:none;




background:#fffaf6;




border:1px solid var(--line);




border-radius:0 0 15px 15px;




padding:8px;




box-shadow:var(--shadow);




flex-direction:column;




align-items:stretch}




.nav-open .main-nav{




display:flex}




.main-nav a{




padding:10px 12px}




.header-login{




display:none}




.mobile-menu{




display:block}




.search-hint{




white-space:nowrap;




overflow:hidden;




text-overflow:ellipsis}




.hero{




min-height:650px}




.hero-inner{




padding:70px 0}




.hero-copy h1{




font-size:47px}




.hero-stats{




gap:18px;




margin-top:60px}




.hero-stats strong{




font-size:22px}




.hero-actions{




flex-wrap:wrap}




.section{




padding:64px 0}




.split-heading,.review-band,.contact-cta{




display:block}




.split-heading>p{




margin-top:15px}




.video-grid,.video-grid-4{




grid-template-columns:repeat(2,1fr);




gap:13px}




.video-card h3{




font-size:13px}




.media-feature,.ai-strip,.join-grid,.video-feature-row,.ai-workspace,.prompt-grid,.about-story,.contact-layout,.community-entry{




grid-template-columns:1fr;




gap:28px}




.playground-grid{




grid-template-columns:1fr 1fr}




.play-card-tall{




grid-row:span 2;




min-height:420px}




.play-card{




min-height:200px}




.expert-grid{




grid-template-columns:1fr}




.comments-grid{




grid-template-columns:repeat(2,1fr)}




.hero-pills{




margin-top:15px}




.page-hero{




padding:58px 0 62px}




.page-hero h1{




font-size:40px}




.award-item{




grid-template-columns:55px 150px 1fr;




gap:13px}




.vlog-layout{




gap:28px}




.vlog-cards{




grid-template-columns:repeat(2,1fr)}




.vlog-cards article:last-child{




display:none}




.community-dashboard,.news-layout,.qa-layout{




grid-template-columns:1fr}




.news-aside{




display:grid;




grid-template-columns:1fr 1fr}




.gallery-grid{




grid-template-rows:130px 130px}




.tool-dashboard{




grid-template-columns:1fr}




.tool-sidebar{




display:grid;




grid-template-columns:repeat(2,1fr);




gap:0 12px}




.tool-sidebar h2,.tool-sidebar .eyebrow{




grid-column:span 2}




.tool-sidebar>a{




padding:9px 0}




.contact-qrs{




justify-content:flex-start}




.footer-main{




grid-template-columns:1fr;




gap:30px}




.footer-bottom .container{




display:block}




.footer-bottom span{




display:block;




margin:4px 0}




}




@media(max-width:520px){




body{




font-size:14px}




.brand-copy strong{




font-size:17px}




.brand-copy small{




font-size:8px}




.header-join{




display:none}




.video-grid,.video-grid-4,.playground-grid,.comments-grid,.vlog-cards,.howto-grid{




grid-template-columns:1fr}




.play-card-tall{




grid-row:auto;




min-height:310px}




.hero{




min-height:640px}




.hero-stats{




display:grid;




grid-template-columns:repeat(3,1fr)}




.hero-stats strong{




font-size:19px}




.hero-copy h1{




font-size:41px}




.hero-copy p{




font-size:14px}




.metric-row{




gap:15px}




.metric-row strong{




font-size:21px}




.steps{




grid-template-columns:1fr}




.news-aside{




display:flex}




.award-item{




grid-template-columns:1fr}




.award-year{




order:-2}




.award-image{




order:-1}




.qa-row{




grid-template-columns:35px 1fr}




.qa-row>img{




grid-column:2;




width:100%;




height:140px}




.qa-row>div:last-child{




grid-column:2}




.check-list{




grid-template-columns:1fr}




.canvas-card-wide{




grid-column:span 1}




.canvas-grid{




grid-template-columns:1fr}




.contact-qrs img{




width:82px;




height:82px}




.footer-links{




grid-template-columns:1fr 1fr}




.footer-qr{




grid-column:span 2}




.detail-layout{




grid-template-columns:1fr;




padding-top:20px}




.detail-aside{




position:static}




.detail-article{




padding:21px}




.detail-content p{




font-size:14px}




.footer-bottom{




padding-bottom:10px}




}