.build{position:relative;background:var(--night);border-block:1px solid var(--line);overflow:hidden}.build-in{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:24px 48px;padding-block:96px 48px}.build-txt .mono{color:var(--fg-2)}.build-txt h2{font-size:clamp(34px,4.4vw,72px);line-height:.98;letter-spacing:-.045em;margin-top:18px;max-width:9em}.wk{display:flex;align-items:baseline;gap:14px;margin-top:36px}.wk b{font-family:var(--f-mono);font-weight:500;font-size:clamp(40px,4.6vw,72px);letter-spacing:-.04em;color:var(--ipe);font-variant-numeric:tabular-nums;line-height:1}.wk span{color:var(--fg-3)}.stages{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}.stages li{border-bottom:1px solid var(--line);padding-block:14px;opacity:.38;transition:opacity .5s var(--ease)}.stages li.on{opacity:1}.stages li h3{font-size:var(--t-h3);letter-spacing:-.03em;display:flex;gap:14px;align-items:baseline}.stages li h3 .mono{color:var(--ipe);font-size:12px}.stages li p{color:var(--fg-2);max-width:30em;display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}.stages li p>span{overflow:hidden}.stages li.on p{grid-template-rows:1fr}.stages li.on p>span{padding-top:8px}.build-viz{position:relative;height:min(700px,82svh);display:flex;align-items:center;justify-content:center}.build-viz:before{content:"";position:absolute;inset:5% 0;background:radial-gradient(45% 45% at 50% 50%,rgba(240,197,65,.12),transparent 70%)}.rigS{margin-right:300px}.rig{position:relative;transform-origin:center}.device{position:relative;width:300px;height:620px;border-radius:46px;padding:10px;background:linear-gradient(145deg,#2c2b26,#121310 60%);box-shadow:0 0 0 1px #faf5ea1a inset,0 40px 80px -20px #000000b3,0 0 0 1px #000}.device .notch{position:absolute;top:20px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:999px;background:#0a0a08;z-index:6}.screen{position:absolute;inset:10px;border-radius:36px;overflow:hidden;font-size:13px;line-height:1.4}.layer{position:absolute;inset:0;padding:56px 16px 16px;display:flex;flex-direction:column;gap:12px}.l-sketch{background:var(--paper);color:var(--pencil)}.l-sketch .bx{border:1.5px dashed var(--pencil);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}.l-sketch .row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.l-sketch .note{position:absolute;right:14px;top:132px;font-family:var(--f-mono);font-size:10px;color:#b4432a;transform:rotate(-6deg)}.l-sketch .note:before{content:"";position:absolute;left:-30px;top:6px;width:26px;height:1.5px;background:#b4432a;transform:rotate(18deg)}.l-app{background:var(--q-bg);color:var(--q-ink);opacity:0}.q-top{display:flex;justify-content:space-between;align-items:center}.q-top b{font-weight:600;font-size:18px;letter-spacing:-.02em}.q-top small{display:block;color:#5a6684;font-size:11.5px}.q-top .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#f2b9a0,#e07e5a)}.q-search{background:#fff;border:1px solid var(--q-line);border-radius:12px;padding:10px 12px;color:#7c86a2;font-size:12.5px}.q-cats{display:flex;gap:6px;overflow:hidden}.q-cats span{border-radius:999px;padding:6px 12px;background:#fff;border:1px solid var(--q-line);font-size:12px;white-space:nowrap}.q-cats span.on{background:var(--q-blue);border-color:var(--q-blue);color:#fff}.q-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.q-card{background:#fff;border:1px solid var(--q-line);border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:6px}.q-card .img{height:74px;border-radius:10px}.q-card b{font-weight:600;font-size:12.5px}.q-card span{font-size:12px;color:#5a6684;display:flex;justify-content:space-between;align-items:center}.q-card span em{font-style:normal;width:22px;height:22px;border-radius:7px;background:var(--q-blue);color:#fff;display:grid;place-items:center;font-weight:600}.q-bag{margin-top:auto;background:var(--q-ink);color:#fff;border-radius:14px;padding:13px 14px;display:flex;justify-content:space-between;font-weight:500}.q-bag b{font-weight:600}.store{position:absolute;left:10px;right:10px;bottom:10px;background:#fff;color:var(--q-ink);border-radius:26px;padding:18px;box-shadow:0 -10px 40px #0f1b3d2e;display:flex;flex-direction:column;gap:12px;transform:translateY(110%)}.store .hd{display:flex;gap:12px;align-items:center}.store .ic{width:56px;height:56px;border-radius:14px;background:var(--q-blue);display:grid;place-items:center;color:#fff;font-weight:600;font-size:24px;flex:none}.store .hd b{display:block;font-weight:600;font-size:16px}.store .hd small{color:#5a6684;font-size:12px}.store .get{background:var(--q-blue);color:#fff;border-radius:999px;padding:10px;text-align:center;font-weight:600}.store .vs{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;color:#5a6684;letter-spacing:.04em}.code{position:absolute;top:250px;left:calc(100% - 36px);width:330px;border-radius:16px;background:#0f100d;border:1px solid var(--line-2);box-shadow:0 30px 60px -20px #000c;font-family:var(--f-mono);font-size:11.5px;line-height:1.7;overflow:hidden;opacity:0;transform:translate(30px)}.code .tb{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-bottom:1px solid var(--line);color:var(--fg-3);font-size:10.5px}.code .tb span{display:flex;gap:6px}.code .tb span i{width:8px;height:8px;border-radius:50%;background:var(--graphite)}.code pre{margin:0;padding:12px 14px;white-space:pre;color:#d9d4cb}.code pre .ln{display:block;opacity:.12}.code .k{color:#e8a2c8}.code .t{color:var(--ipe)}.code .s{color:#9dd3a8}.code .c{color:var(--fg-3)}.code .ci{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid var(--line);color:var(--fg-2);font-size:10.5px}.code .ci b{font-weight:500;color:#9dd3a8}@media(max-width:980px){.build-in{grid-template-columns:minmax(0,1fr);padding-block:76px 24px;gap:8px;align-content:start}.build-txt h2{display:none}.wk{margin-top:10px}.stages{margin-top:14px}.stages li{padding-block:9px}.stages li h3{font-size:19px}.stages li p{font-size:15px}.build-viz{height:380px;align-items:flex-start}.rigS{transform:scale(.58);transform-origin:top center;margin:0 90px -260px 0}.code{left:calc(100% - 100px);top:200px;width:290px}}@media(prefers-reduced-motion:reduce){.stages li{opacity:1}.stages li p{grid-template-rows:1fr}}.work{padding-block:0 var(--sec)}.wgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.wcard{position:relative;border-radius:24px;background:var(--raised);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;transition:border-color .4s}.wcard:hover{border-color:var(--line-2)}.wcard .vis{height:260px;position:relative;overflow:hidden;display:flex;justify-content:center}.wcard .tx{padding:22px 26px 26px;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line)}.wcard .tx .top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}.wcard h3{font-size:24px;letter-spacing:-.03em}.wcard p{color:var(--fg-2)}.wcard .mono{color:var(--fg-3)}.wcard .go{transition:transform .5s var(--ease)}.wcard:hover .go{transform:translate(4px,-4px)}.mini{position:absolute;top:34px;width:220px;height:440px;border-radius:34px;padding:7px;background:linear-gradient(145deg,#2c2b26,#121310 60%);box-shadow:0 30px 60px -20px #000000b3;transition:transform .8s var(--ease)}.wcard:hover .mini{transform:translateY(-14px)}.mini .in{height:100%;border-radius:28px;padding:34px 12px 12px;display:flex;flex-direction:column;gap:8px;font-size:11px}.av .in{background:#f2f7f4;color:#0b2e25}.av .ttl{font-weight:600;font-size:14px}.av .tm{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.av .tm span{border:1px solid rgba(11,46,37,.14);background:#fff;border-radius:8px;text-align:center;padding:6px 0;font-weight:500}.av .tm span.on{background:#0e7a5f;color:#fff;border-color:#0e7a5f}.av .pill{align-self:flex-start;border-radius:999px;padding:5px 10px;background:#ddf0e8;color:#0e7a5f;font-weight:600}.mb .in{background:#10110d;color:var(--fg)}.mb .ttl{font-weight:600;font-size:14px}.mb .set{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;background:#1b1c17;border-radius:9px;padding:8px;font-size:11px}.mb .set i{width:14px;height:14px;border-radius:50%;border:1px solid var(--graphite)}.mb .set.d i{background:var(--ipe);border-color:var(--ipe)}@media(max-width:720px){.wgrid{grid-template-columns:minmax(0,1fr)}}
