:root{
  --bg:#f7f6f3;
  --surface:#ffffff;
  --surface-2:#f1f0ec;
  --ink:#111217;
  --muted:#666975;
  --line:#deded9;
  --purple:#6757eb;
  --purple-2:#8b7cff;
  --purple-soft:#eeebff;
  --green:#34c77b;
  --red:#ff5d6c;
  --orange:#ff9d5c;
  --shadow:0 28px 80px rgba(29,25,55,.10);
  --radius:28px;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 76% 9%, rgba(103,87,235,.12), transparent 27rem),
    radial-gradient(circle at 15% 38%, rgba(255,157,92,.08), transparent 24rem),
    var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.container{width:min(var(--max),calc(100% - 48px));margin:0 auto}
.nav{
  height:82px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(17,18,23,.10);
}
.brand{display:flex;align-items:center;gap:13px;font-weight:800;letter-spacing:-.02em}
.brand-mark{
  width:38px;height:38px;border-radius:12px;background:#111217;position:relative;
  box-shadow:0 8px 18px rgba(17,18,23,.14);overflow:hidden
}
.brand-mark:before,.brand-mark:after{content:"";position:absolute;border-radius:7px;transform:rotate(28deg)}
.brand-mark:before{width:19px;height:15px;background:linear-gradient(135deg,#ff766a,#ffae59);top:7px;left:8px}
.brand-mark:after{width:19px;height:15px;background:linear-gradient(135deg,#7e6cff,#6757eb);bottom:7px;right:7px}
.brand small{font-size:13px;font-weight:700;color:#8a8c96;letter-spacing:.05em}
.nav-links{display:flex;align-items:center;gap:32px;color:#5e6069;font-size:14px}
.nav-links a:hover{color:#111217}
.nav-github{border:1px solid #d7d7d2;background:rgba(255,255,255,.65);padding:10px 15px;border-radius:999px;color:#30323a!important}

.hero{padding:92px 0 74px;display:grid;grid-template-columns:.88fr 1.12fr;gap:54px;align-items:center}
.eyebrow{display:flex;align-items:center;gap:10px;color:#737682;font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:#a8ff43;box-shadow:0 0 0 6px rgba(168,255,67,.13)}
.hero h1{font-size:clamp(50px,5.3vw,78px);line-height:.99;letter-spacing:-.065em;margin:24px 0 26px;font-weight:900}
.hero h1 span{display:block;color:var(--purple)}
.hero-copy{max-width:590px;color:#5e606a;font-size:18px;line-height:1.8;margin:0 0 31px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:14px;padding:14px 20px;font-size:14px;font-weight:750;border:1px solid #d4d4cf;background:#fff;transition:.2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(24,22,39,.08)}
.btn.dark{color:#fff;background:#111217;border-color:#111217}
.btn.purple{color:#fff;background:var(--purple);border-color:var(--purple)}
.micro-proof{display:flex;gap:20px;flex-wrap:wrap;margin-top:27px;color:#696c76;font-size:12px}
.micro-proof span{display:flex;align-items:center;gap:7px}.micro-proof b{color:var(--purple)}

.character-stage{position:relative}
.character-stage:before{content:"";position:absolute;inset:9% -5% -7% 15%;background:linear-gradient(135deg,rgba(103,87,235,.18),rgba(255,151,93,.11));filter:blur(45px);border-radius:50%}
.shot-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:10px;border-radius:30px;background:rgba(255,255,255,.65);border:1px solid rgba(17,18,23,.09);box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.shot{height:455px;border-radius:21px;overflow:hidden;position:relative;background:#ddd;isolation:isolate}
.shot:nth-child(1){transform:translateY(18px)}
.shot:nth-child(2){transform:translateY(-8px)}
.shot:nth-child(3){transform:translateY(8px)}
.shot:nth-child(4){transform:translateY(-16px)}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:.55s ease}
.shot:hover img{transform:scale(1.025)}
.shot:after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(transparent,rgba(8,9,14,.78))}
.shot-caption{position:absolute;z-index:2;left:15px;right:14px;bottom:15px;color:#fff}
.shot-caption .n{font-size:10px;opacity:.7;letter-spacing:.18em}.shot-caption strong{display:block;margin-top:5px;font-size:13px}.shot-caption em{display:block;margin-top:3px;font-style:normal;font-size:10px;opacity:.7}

.section{padding:92px 0}
.section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:35px}
.section-head h2{font-size:42px;line-height:1.08;letter-spacing:-.045em;margin:0;font-weight:850}
.section-head h2 span{color:var(--purple)}
.section-head p{max-width:500px;margin:0;color:var(--muted);line-height:1.8}

.compare{
  border:1px solid var(--line);border-radius:30px;background:rgba(255,255,255,.78);
  overflow:hidden;box-shadow:0 20px 60px rgba(25,24,35,.055)
}
.compare-title{text-align:center;padding:27px 20px 23px;font-size:25px;font-weight:830;letter-spacing:-.03em}
.compare-title b{color:var(--purple)}
.compare-cols{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.compare-col{padding:27px}.compare-col + .compare-col{border-left:1px solid var(--line)}
.compare-label{display:flex;align-items:center;gap:10px;font-weight:780;margin-bottom:10px}
.dot-icon{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:13px}.bad{background:var(--red)}.good{background:var(--green)}
.compare-desc{font-size:13px;color:#777984;margin-bottom:20px}
.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.thumb{border-radius:14px;overflow:hidden;background:#eee;aspect-ratio:1.13;position:relative}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.compare-col.drift .thumb:nth-child(2) img{filter:saturate(.78) hue-rotate(-8deg)}
.compare-col.drift .thumb:nth-child(3) img{transform:scale(1.12) translateX(5%)}
.compare-col.drift .thumb:nth-child(4) img{filter:contrast(1.1) brightness(.89)}
.thumb-name{text-align:center;font-size:11px;color:#6c6e78;margin-top:8px}

.dna-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:26px;align-items:stretch}
.dna-copy{padding:44px 0 0}
.dna-copy h2{font-size:49px;line-height:1.03;letter-spacing:-.055em;margin:0 0 22px}
.dna-copy h2 span{color:var(--purple)}
.dna-copy p{color:var(--muted);line-height:1.9;font-size:16px;max-width:480px}
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:31px}
.feature{border:1px solid var(--line);background:rgba(255,255,255,.68);border-radius:18px;padding:16px}
.feature b{display:block;font-size:14px;margin-bottom:5px}.feature small{color:#81838c;line-height:1.5}
.dna-card{background:#111217;color:#fff;border-radius:30px;padding:27px;box-shadow:0 30px 80px rgba(19,19,35,.20);position:relative;overflow:hidden}
.dna-card:before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;right:-110px;top:-120px;background:radial-gradient(circle,rgba(120,101,255,.33),transparent 67%)}
.dna-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;position:relative}
.dna-card-head strong{font-size:16px}.status{font-size:11px;color:#b6ff68;border:1px solid rgba(182,255,104,.25);background:rgba(182,255,104,.07);padding:8px 10px;border-radius:999px}
.dna-visual{display:grid;grid-template-columns:180px 1fr;gap:18px;position:relative}
.dna-avatar{height:250px;border-radius:21px;overflow:hidden;background:#222}.dna-avatar img{width:100%;height:100%;object-fit:cover}
.dna-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dna-field{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);border-radius:16px;padding:14px;min-height:76px}
.dna-field small{display:block;color:#8f92a1;text-transform:uppercase;letter-spacing:.14em;font-size:9px;margin-bottom:8px}.dna-field b{font-size:13px;line-height:1.45}
.dna-locks{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.lock{font-size:10px;color:#bfc1cc;background:#1b1c23;border:1px solid #2e3039;border-radius:999px;padding:8px 10px}.lock:before{content:"✓";color:#b2ff65;margin-right:6px}

.workflow{background:#111217;color:#fff;border-radius:34px;padding:48px}
.workflow-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:42px}.workflow-top h2{margin:0;font-size:39px;letter-spacing:-.04em}.workflow-top p{color:#9c9eaa;max-width:440px;line-height:1.7;margin:0}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.step{border:1px solid #2e3038;border-radius:20px;padding:21px;min-height:180px;background:linear-gradient(180deg,#17181f,#13141a);position:relative;overflow:hidden}
.step:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--purple),transparent);opacity:.9}
.step .num{color:#7f70ff;font-weight:800;font-size:12px;letter-spacing:.12em}.step h3{font-size:17px;margin:26px 0 9px}.step p{color:#878a97;font-size:12px;line-height:1.65;margin:0}

.composer-wrap{display:grid;grid-template-columns:.82fr 1.18fr;gap:24px}
.composer-intro{padding:20px 6px}.composer-intro h2{font-size:44px;line-height:1.06;letter-spacing:-.045em;margin:0 0 20px}.composer-intro h2 span{color:var(--purple)}.composer-intro p{color:var(--muted);line-height:1.8}
.composer{border:1px solid var(--line);background:#fff;border-radius:30px;padding:25px;box-shadow:0 20px 60px rgba(25,24,35,.06)}
.composer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.composer-head b{font-size:15px}.composer-head span{font-size:10px;letter-spacing:.15em;color:#9698a2}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.field{background:#f7f7f5;border:1px solid #e5e5df;border-radius:15px;padding:11px 12px}.field label{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.13em;color:#8b8e98;margin-bottom:7px}.field input,.field select,.field textarea{width:100%;border:0;background:transparent;outline:0;color:#22242b;font-size:13px;resize:none}.field.full{grid-column:1/-1}.field textarea{height:64px;line-height:1.55}
.output{margin-top:12px;border-radius:17px;background:#15161d;color:#d6d7dd;padding:17px;min-height:130px;font-size:12px;line-height:1.7;white-space:pre-wrap;position:relative}
.output small{display:block;color:#797c89;letter-spacing:.15em;text-transform:uppercase;margin-bottom:8px;font-size:9px}
.copy-btn{position:absolute;right:12px;top:12px;border:1px solid #333641;background:#1e2028;color:#ddd;border-radius:9px;padding:7px 9px;font-size:10px}
.composer-actions{display:flex;gap:10px;margin-top:12px}.composer-actions .btn{padding:11px 16px}

.oss{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:center;border:1px solid var(--line);background:rgba(255,255,255,.72);border-radius:30px;padding:40px}
.oss h2{font-size:38px;line-height:1.1;letter-spacing:-.04em;margin:0 0 15px}.oss h2 span{color:var(--purple)}.oss p{color:var(--muted);line-height:1.8;margin:0}
.install{background:#111217;color:#fff;border-radius:22px;padding:20px}.install-label{font-size:9px;letter-spacing:.16em;color:#8f929e;text-transform:uppercase;margin-bottom:12px}.install code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:#f5f5f7;word-break:break-all}.install-row{display:flex;justify-content:space-between;gap:15px;align-items:center}.install button{background:#242630;color:#fff;border:1px solid #343641;border-radius:10px;padding:8px 10px;font-size:11px}

.footer{padding:40px 0 55px;border-top:1px solid rgba(17,18,23,.10);display:flex;justify-content:space-between;gap:20px;color:#858791;font-size:12px}.footer-links{display:flex;gap:22px}

@media(max-width:1020px){
  .hero{grid-template-columns:1fr;padding-top:65px}.character-stage{max-width:850px}
  .shot{height:430px}
  .dna-layout,.composer-wrap,.oss{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr 1fr}.compare-cols{grid-template-columns:1fr}.compare-col + .compare-col{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:720px){
  .container{width:min(100% - 28px,var(--max))}
  .nav{height:70px}.brand small,.nav-links a:not(.nav-github){display:none}
  .hero{padding:54px 0 50px;gap:35px}.hero h1{font-size:49px}.hero-copy{font-size:16px}
  .shot-grid{grid-template-columns:1fr 1fr;gap:7px}.shot{height:310px}.shot:nth-child(n){transform:none}
  .section{padding:66px 0}.section-head{display:block}.section-head h2{font-size:35px}.section-head p{margin-top:15px}
  .thumbs{grid-template-columns:repeat(5,minmax(58px,1fr));overflow:auto}.compare-col{padding:20px}
  .dna-copy h2{font-size:40px}.feature-list{grid-template-columns:1fr}.dna-visual{grid-template-columns:1fr}.dna-avatar{height:330px}.dna-fields{grid-template-columns:1fr 1fr}
  .workflow{padding:26px}.workflow-top{display:block}.workflow-top p{margin-top:14px}.steps{grid-template-columns:1fr}
  .composer-intro h2{font-size:38px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}
  .oss{padding:28px}.footer{display:block}.footer-links{margin-top:15px}
}