:root{--black:#101010;--yellow:#ffd51f;--paper:#f3f1ea;--gray:#6b6962;--line:#c9c6ba}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--black);font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
header{height:76px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--black);background:var(--paper);position:relative;z-index:2}.logo{display:flex;align-items:center;gap:10px;color:var(--black);font-weight:900;text-decoration:none;letter-spacing:.04em}.logo b{display:grid;place-items:center;width:36px;height:36px;background:var(--yellow);border:2px solid var(--black);transform:rotate(-4deg)}nav{display:flex;gap:32px}nav a{color:var(--black);text-decoration:none;font-weight:700;font-size:13px}.mini{padding:11px 17px;background:var(--black);color:white;text-decoration:none;font-weight:800}
.ticker{padding:12px 4vw;background:var(--yellow);border-bottom:2px solid var(--black);font:800 12px monospace;letter-spacing:.12em}.ticker span{margin:0 20px}.hero-grid{min-height:650px;display:grid;grid-template-columns:1.05fr .95fr;gap:5vw;align-items:center;padding:70px 5vw}.kicker,.workflow .sticky>p,.rules>div>p{font-family:monospace;font-weight:800;letter-spacing:.13em}h1{font-size:clamp(55px,6.1vw,102px);line-height:.98;letter-spacing:-.07em;margin:18px 0 28px}h1 mark{background:var(--yellow);padding:0 .08em}.intro{font-size:19px;line-height:1.8;color:#4e4c47;max-width:680px}.hero-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;gap:35px;margin-top:25px;padding:18px 23px;background:var(--black);color:#fff;text-decoration:none;font-weight:900;border:2px solid var(--black);box-shadow:7px 7px 0 var(--yellow)}.plain{color:var(--black);font-weight:800;text-underline-offset:5px;margin-top:25px}.quick-facts{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px;font:700 12px monospace}
.workbench{border:2px solid var(--black);background:#e9e7df;box-shadow:12px 12px 0 var(--black)}.bar{height:44px;border-bottom:2px solid var(--black);display:flex;align-items:center;gap:7px;padding:0 14px;background:white}.bar i{width:10px;height:10px;border-radius:50%;border:1px solid #000}.bar span{margin-left:auto;font:800 11px monospace}.tool-layout{display:grid;grid-template-columns:105px 1fr;min-height:390px}.tool-layout aside{padding:18px 12px;border-right:2px solid var(--black);background:#d8d5ca;display:flex;flex-direction:column;gap:8px}.tool-layout aside>b{font:800 11px monospace;margin:0 7px 10px}.tool-layout aside button{padding:10px 8px;border:0;background:transparent;text-align:left;font-weight:700}.tool-layout aside button.active{background:var(--yellow);outline:2px solid var(--black)}.studio{padding:24px;background-image:linear-gradient(#d5d2c8 1px,transparent 1px),linear-gradient(90deg,#d5d2c8 1px,transparent 1px);background-size:24px 24px}.profile{display:flex;align-items:center;gap:12px;background:white;border:2px solid var(--black);padding:12px}.avatar{width:46px;height:46px;background:var(--yellow);border:2px solid var(--black);display:grid;place-items:center;font-weight:900;font-size:20px}.profile strong,.profile small{display:block}.profile small{color:var(--gray);font-size:11px;margin-top:4px}.profile em{font:800 10px monospace;margin-left:auto;color:#24734b}.message{margin-top:18px;padding:15px;background:white;border:2px solid var(--black);max-width:88%}.message span{font:800 10px monospace}.message p{font-size:13px;line-height:1.55;margin:8px 0 0}.message.dark{background:var(--black);color:white;margin-left:auto}.composer{margin-top:20px;padding:14px;background:white;border:2px solid var(--black);font-size:12px;color:#777}.composer b{float:right;color:var(--black)}
.metric{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--black);border-bottom:2px solid var(--black)}.metric div{display:flex;align-items:center;gap:20px;padding:25px 5vw;border-right:2px solid var(--black)}.metric b{font-size:35px}
.features{padding:120px 5vw}.label{font:800 12px monospace;letter-spacing:.15em}.features h2,.workflow h2,.rules h2,.faq h2{font-size:clamp(44px,5vw,78px);line-height:1;letter-spacing:-.05em}.feature-list{border-top:2px solid var(--black);margin-top:60px}.feature-list article{display:grid;grid-template-columns:80px .7fr 1.3fr;align-items:center;padding:30px 0;border-bottom:1px solid var(--line)}.feature-list b{font-size:35px}.feature-list h3{font-size:23px}.feature-list p{color:var(--gray);line-height:1.7}.button.yellow{background:var(--yellow);color:var(--black);box-shadow:7px 7px 0 var(--black);margin-top:55px}
.compare{padding:110px 5vw;background:#e2dfd4;border-top:2px solid var(--black);border-bottom:2px solid var(--black);display:grid;grid-template-columns:.75fr 1.25fr;gap:7vw}.compare-copy>p:first-child{font:800 11px monospace;letter-spacing:.14em}.compare-copy h2{font-size:clamp(44px,5vw,76px);line-height:1;letter-spacing:-.05em}.compare-copy>p:last-child{line-height:1.8;color:#55534d}.compare-table{border:2px solid var(--black);background:var(--paper);align-self:center}.row{display:grid;grid-template-columns:.45fr .75fr 1.4fr;padding:20px;border-bottom:1px solid var(--black);gap:20px}.row:last-child{border-bottom:0}.row.head{background:var(--black);color:white;font:800 11px monospace}.row strong{font-family:monospace}.row span{line-height:1.5}.row.highlight{background:var(--yellow)}
.workflow{display:grid;grid-template-columns:.75fr 1.25fr;gap:7vw;padding:120px 5vw;background:var(--black);color:white}.sticky{align-self:start;position:sticky;top:40px}.sticky p{color:var(--yellow)}.steps article{padding:40px 0 55px;border-top:1px solid #444}.steps article>span{font:800 12px monospace;color:var(--yellow)}.steps h3{font-size:30px}.steps p{color:#aaa;line-height:1.8;max-width:650px}.code{margin-top:30px;padding:25px;background:#222;border-left:5px solid var(--yellow);font:16px/1.8 monospace;color:#ccc}.code strong{color:var(--yellow)}.diagram.lore{max-width:520px;display:flex;align-items:center;gap:12px;margin-top:30px}.lore b,.platforms b{padding:15px 18px;background:var(--yellow);color:var(--black);border:2px solid white;font-family:monospace}.lore i{height:2px;width:35px;background:white}.platforms{display:flex;gap:10px;margin-top:30px}.platforms b:nth-child(3){box-shadow:5px 5px 0 #fff}
.rules{padding:100px 5vw;display:grid;grid-template-columns:1fr 1fr;gap:7vw;background:var(--yellow);border-top:2px solid var(--black);border-bottom:2px solid var(--black)}.rules ol{list-style:none;padding:0}.rules li{display:flex;gap:25px;padding:25px 0;border-top:2px solid var(--black);font-size:20px;font-weight:800}.rules li b{font-family:monospace}.faq{padding:100px 18vw}.faq details{border-top:2px solid var(--black);padding:25px 0}.faq summary{list-style:none;font-size:20px;font-weight:800;cursor:pointer}.faq summary span{float:right}.faq details p{color:var(--gray);line-height:1.8}footer{padding:35px 4vw;display:flex;align-items:center;justify-content:space-between;background:var(--black);color:white}footer .logo{color:white}
@media(max-width:850px){header nav{display:none}.hero-grid,.workflow,.rules,.compare{grid-template-columns:1fr}.workbench{margin-top:30px}.metric{grid-template-columns:1fr}.metric div{border-right:0;border-bottom:2px solid var(--black)}.sticky{position:static}.feature-list article{grid-template-columns:55px 1fr}.feature-list p{grid-column:2}.faq{padding:80px 6vw}.row{grid-template-columns:.5fr 1fr}.row span:last-child{grid-column:2}.tool-layout{grid-template-columns:80px 1fr}footer{gap:20px;flex-wrap:wrap}}