:root{--or:#FF6B1A;--orLo:#D64000;--gr:#3DDC84;--bl:#3B82F6;--ink:#12141C;--paper:#FAF8F5;--card:#fff;--mut:#6B7080;--line:#ECE7DF}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:70px}html,body{overflow-x:clip}
body{margin:0;font:400 16px/1.6 "Plus Jakarta Sans",system-ui,sans-serif;background:var(--paper);color:var(--ink)}
.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace}
h1,h2,h3,h4{font-family:Sora,system-ui;letter-spacing:-.02em;line-height:1.15}
a{color:var(--orLo)}

.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;height:60px;padding:0 20px;background:rgba(18,20,28,.94);backdrop-filter:blur(10px)}
.brand img{display:block}
.top nav{margin-left:auto;display:flex;gap:4px;align-items:center}
.top nav a{color:#C9CCD6;text-decoration:none;font:600 14px "Plus Jakarta Sans";padding:8px 12px;border-radius:10px}
.top nav a:hover{color:#fff;background:#232739}
.top nav a.cta{background:var(--or);color:#fff}
@media(max-width:820px){.top nav a:not(.cta){display:none}}

.hero{background:radial-gradient(ellipse at 75% 40%,#2B3046 0%,#12141C 58%,#0B0C12 100%);color:#fff;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(61,220,132,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(61,220,132,.06) 1px,transparent 1px);background-size:36px 36px;-webkit-mask-image:radial-gradient(ellipse at 70% 50%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 50%,#000 20%,transparent 70%)}
.hero-in{position:relative;max-width:1120px;margin:auto;padding:56px 22px 30px;display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center}
.kicker{color:var(--gr);font-size:13px;letter-spacing:.04em}
.hero h1{font-size:clamp(38px,6vw,64px);margin:12px 0 16px;font-weight:800}
.hero h1 em{font-style:normal;color:var(--or)}
.hero p{color:#B9BDCA;font-size:17px;max-width:520px;margin:0 0 28px}
.sig{height:118px;max-width:100%}
.hero-char{aspect-ratio:1000/1100;max-height:520px;width:100%}
#heroBit{width:100%;height:100%}#heroBit svg{width:100%;height:100%;display:block}
@media(max-width:820px){.hero-in{grid-template-columns:1fr;padding-top:30px}.hero-char{order:-1;max-height:340px;margin:auto;width:auto;height:340px}.sig{height:92px}}

main{max-width:1120px;margin:auto;padding:0 18px 40px}
.sec{padding:56px 0 8px;border-bottom:1px solid var(--line)}
.sec:last-of-type{border:0}
.sec h2{font-size:clamp(26px,3.6vw,34px);font-weight:800;margin:0 0 10px;display:flex;align-items:baseline;gap:12px}
.n{font-size:14px;color:var(--or);font-weight:700}
.sec h3{font-size:20px;margin:34px 0 12px}
.lead{font-size:17px;color:#3E4250;max-width:760px;margin:0 0 24px}
.note{font-size:14px;color:var(--mut);margin:12px 0 0}
.card{background:var(--card);border-radius:22px;box-shadow:0 1px 0 var(--line),0 12px 32px rgba(18,20,28,.06);overflow:hidden}
.pad{padding:20px}

.flow{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.flow figure{margin:0;text-align:center}
.fbox{width:200px;height:200px;border-radius:26px;background:#fff;display:grid;place-items:center;box-shadow:0 1px 0 var(--line),0 12px 32px rgba(18,20,28,.06)}
.flowbit{width:170px;height:190px}.flowbit svg{width:100%;height:100%}
.flow figcaption{margin-top:10px;font-size:13px;color:var(--mut)}.flow figcaption b{display:block;color:var(--ink);font-size:15px}
.arrow{width:30px;height:30px;fill:none;stroke:var(--or);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:700px){.arrow{transform:rotate(90deg)}.flow{flex-direction:column}}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}
figure.card{margin:0}
.art{height:190px;display:grid;place-items:center;padding:24px;border-radius:22px 22px 0 0}
.art img{max-width:88%;max-height:100%}
.art.light{background:var(--paper)}.art.dark{background:var(--ink)}.art.grad{background:linear-gradient(135deg,#FFE7D6,#FAF8F5)}
.art.tall{height:240px}.art.tall img{max-height:180px}
figure.card figcaption{padding:14px 18px;font-size:14px;color:var(--mut);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
figure.card figcaption b{color:var(--ink)}
.dl{margin-left:auto;display:flex;gap:6px}
.dl a{font:700 12px "JetBrains Mono";text-decoration:none;color:var(--ink);background:#F3EFE9;padding:5px 9px;border-radius:8px}
.dl a:hover{background:var(--or);color:#fff}

.clear{position:relative;padding:34px;border:2px dashed #FFB98F;border-radius:16px;background:repeating-linear-gradient(45deg,#FFF6EF 0 8px,#fff 8px 16px);display:grid;place-items:center}
.clear img{background:var(--paper);max-width:100%;height:66px}
.sizes{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;min-height:110px}
.sizes div{display:flex;flex-direction:column;align-items:center;gap:8px}.sizes span{font-size:12px;color:var(--mut)}

.swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@media(max-width:900px){.swatches{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sw{display:flex;flex-direction:column;justify-content:flex-start;border:0;padding:0;text-align:left;cursor:pointer;background:var(--card);border-radius:20px;overflow:hidden;box-shadow:0 1px 0 var(--line),0 10px 26px rgba(18,20,28,.06);font:inherit;color:inherit;transition:transform .15s}
.sw:hover{transform:translateY(-2px)}
.sw i{display:block;height:110px}
.sw div{padding:12px 14px}.sw b{font-family:Sora;font-size:15px;display:block}
.sw span{font-size:12.5px;color:var(--mut);display:block}.sw .mono{color:var(--ink);font-size:13px;margin-top:4px}
.ratio{display:flex;height:46px;border-radius:14px;overflow:hidden;margin-top:18px;box-shadow:0 0 0 1px var(--line)}
.ratio span{display:grid;place-items:center;font:700 12px "JetBrains Mono";color:#fff;white-space:nowrap;overflow:hidden}

.types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:900px){.types{grid-template-columns:1fr}}
.tag{font-size:12px;color:var(--or);font-weight:700}
.t-sora{font:800 44px/1.1 Sora;margin:8px 0}.t-jak{font:700 34px/1.2 "Plus Jakarta Sans";margin:8px 0 12px}.t-mono{font-size:30px;font-weight:700;margin:10px 0 14px}
.t-sample{font-size:16px;margin:0}.t-sample.sora{font:700 21px/1.25 Sora}

.poses{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
@media(max-width:900px){.poses{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pose{background:radial-gradient(#fff,#F3ECE2);border-radius:18px;text-align:center;font:600 12.5px "JetBrains Mono";color:var(--mut);padding-bottom:10px;cursor:pointer}
.pose div{aspect-ratio:1000/1150}.pose svg{width:100%;height:100%;display:block}
.card h4{margin:0 0 8px;font-size:17px}
ul.ok,ul.no{margin:0;padding:0;list-style:none}
ul.ok li,ul.no li{position:relative;padding:7px 0 7px 30px;font-size:15px;border-bottom:1px solid #F3EFE9}
ul.ok li:before,ul.no li:before{content:"";position:absolute;left:0;top:10px;width:19px;height:19px;border-radius:50%;background:#E3F8EC url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 12.5l4 4 8-9" fill="none" stroke="%2318A957" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/13px no-repeat}
ul.no li:before{background:#FDE7E7 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 7l10 10M17 7 7 17" fill="none" stroke="%23E0353F" stroke-width="3" stroke-linecap="round"/></svg>') center/12px no-repeat}

.seal{height:120px;border-radius:22px}
.code{position:relative;margin-top:14px}
.code pre{background:var(--ink);color:#D5D9E3;border-radius:18px;padding:18px;overflow:auto;font-size:12.5px;line-height:1.6;margin:0;white-space:pre-wrap;word-break:break-all}
.copy{position:absolute;top:10px;right:10px;border:0;background:var(--or);color:#fff;font:700 13px "Plus Jakarta Sans";padding:8px 14px;border-radius:10px;cursor:pointer}

.avatars{display:grid;grid-template-columns:180px 180px minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:760px){.avatars{grid-template-columns:1fr 1fr}.ig{grid-column:1/-1}}
.avatars figure{margin:0;text-align:center}.avatars figure img{width:100%;border-radius:50%;box-shadow:0 10px 26px rgba(18,20,28,.14)}
.avatars figcaption{font-size:13px;margin-top:8px}.avatars figcaption b{display:block}
.igh{display:flex;gap:14px;align-items:center;margin-bottom:12px}.igh img{width:72px;height:72px;border-radius:50%}
.igh b{display:block;font-size:17px}.igh span{font-size:13px;color:var(--mut)}
.ig p{margin:0;font-size:14.5px}.ig .lk{color:#1A5BC8;font-weight:600}

.wrongs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:760px){.wrongs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wrongs figure{margin:0;position:relative}
.wrongs .art{height:140px;border-radius:18px;overflow:hidden;position:relative}
.wrongs .art img{height:46px}
.wrongs .art:after{content:"";position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;background:#E0353F url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 7l10 10M17 7 7 17" fill="none" stroke="white" stroke-width="3" stroke-linecap="round"/></svg>') center/14px no-repeat}
.wrongs figcaption{font-size:13.5px;color:var(--mut);margin-top:8px}
.wrongs .art.light{background:#fff;box-shadow:0 1px 0 var(--line),0 10px 26px rgba(18,20,28,.06)}
.art.busy{background:repeating-linear-gradient(45deg,#FF934E 0 16px,#3B82F6 16px 32px,#12141C 32px 48px)}

.dlbox{display:flex;align-items:center;gap:18px;background:var(--ink);color:#fff;border-radius:26px;padding:26px}
.dlbox .note{color:#A6ABBA}
.btn{margin-left:auto;display:inline-flex;align-items:center;gap:8px;background:var(--or);color:#fff;text-decoration:none;font:700 15px "Plus Jakarta Sans";padding:14px 20px;border-radius:14px;white-space:nowrap}
.btn svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:700px){.dlbox{flex-direction:column;align-items:flex-start}.btn{margin:0}}

footer{background:var(--ink);color:#8C91A1;font-size:13px;display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;padding:26px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;font-weight:600;font-size:14px;transition:.25s;z-index:50;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}