.design-to-code-hero-module__p_Ab9a__hero{--fill:1;--code:1;--draw:1;--drift:.5;margin-bottom:36px;position:relative}.design-to-code-hero-module__p_Ab9a__hero[data-motion=true]{height:225svh}.design-to-code-hero-module__p_Ab9a__sticky{padding:clamp(24px,4svh,48px) 0 16px}.design-to-code-hero-module__p_Ab9a__hero[data-motion=true] .design-to-code-hero-module__p_Ab9a__sticky{flex-direction:column;justify-content:space-between;height:100svh;min-height:600px;display:flex;position:sticky;top:0}.design-to-code-hero-module__p_Ab9a__heading{justify-content:space-between;align-items:flex-end;gap:24px;display:flex}.design-to-code-hero-module__p_Ab9a__eyebrow{font-family:var(--font-code);letter-spacing:.14em;color:#577360;align-items:center;gap:8px;font-size:10px;display:flex}.design-to-code-hero-module__p_Ab9a__eyebrow>span{background:#648956;border-radius:50%;width:6px;height:6px}.design-to-code-hero-module__p_Ab9a__heading h2{letter-spacing:-.055em;color:#233f2f;margin-top:17px;font-size:clamp(42px,5.6vw,66px);font-weight:500;line-height:1.2}.design-to-code-hero-module__p_Ab9a__designWord{font-family:KaiTi,STKaiti,Noto Serif SC,serif;font-weight:500}.design-to-code-hero-module__p_Ab9a__codeWord{font-weight:650}.design-to-code-hero-module__p_Ab9a__period{color:#749659}.design-to-code-hero-module__p_Ab9a__mobileBreak{display:none}.design-to-code-hero-module__p_Ab9a__footer a{color:#315d40;align-items:center;gap:7px;min-height:44px;display:inline-flex}.design-to-code-hero-module__p_Ab9a__footer a:hover{text-underline-offset:5px;text-decoration:underline}.design-to-code-hero-module__p_Ab9a__hero a:focus-visible{outline-offset:4px;border-radius:3px;outline:2px solid #426640}.design-to-code-hero-module__p_Ab9a__canvas{flex:1;height:clamp(380px,65svh,780px);min-height:260px;margin-top:24px;position:relative;overflow:hidden}.design-to-code-hero-module__p_Ab9a__canvasNumber,.design-to-code-hero-module__p_Ab9a__canvasBottom{z-index:1;font-family:var(--font-code);letter-spacing:.12em;color:#63785f;font-size:9px;position:absolute}.design-to-code-hero-module__p_Ab9a__canvasNumber{top:23px;right:0}.design-to-code-hero-module__p_Ab9a__canvasBottom{justify-content:space-between;font-size:8px;display:flex;bottom:15px;left:0;right:0}.design-to-code-hero-module__p_Ab9a__sceneTravel{position:absolute;inset:120px 0 32px}.design-to-code-hero-module__p_Ab9a__sceneMotion{top:calc(var(--drift) * 100%);width:100%;height:min(32svh,60%);transform:translateY(calc(var(--drift) * -100%));position:absolute}.design-to-code-hero-module__p_Ab9a__scene{width:100%;height:100%;overflow:visible}.design-to-code-hero-module__p_Ab9a__artboard{transform:translateX(calc(var(--code) * 100px));filter:drop-shadow(0 16px 14px #2b493316)}.design-to-code-hero-module__p_Ab9a__surface,.design-to-code-hero-module__p_Ab9a__productCopy{opacity:var(--fill)}.design-to-code-hero-module__p_Ab9a__wire{opacity:calc(1 - var(--fill))}.design-to-code-hero-module__p_Ab9a__guides{opacity:calc(1 - var(--fill) * .85)}.design-to-code-hero-module__p_Ab9a__orbit{stroke-dasharray:1500;stroke-dashoffset:calc(750 - var(--draw) * 750)}.design-to-code-hero-module__p_Ab9a__selection{opacity:calc(1 - var(--fill))}.design-to-code-hero-module__p_Ab9a__annotation{opacity:calc(1 - var(--fill));transform:translateY(calc(var(--fill) * -12px))}.design-to-code-hero-module__p_Ab9a__sculpture{transform-box:fill-box;transform-origin:50%;transform:rotate(calc(var(--fill) * -8deg)) scale(calc(1 - var(--fill) * .07))}.design-to-code-hero-module__p_Ab9a__codePanel{opacity:var(--code);transform:translate(calc((1 - var(--code)) * 45px), calc((1 - var(--code)) * 24px));filter:drop-shadow(0 12px 12px #213c3029)}.design-to-code-hero-module__p_Ab9a__codeLines{clip-path:inset(0 calc((1 - var(--code)) * 100%) 0 0)}.design-to-code-hero-module__p_Ab9a__shipped{opacity:var(--code);transform:translateY(calc((1 - var(--code)) * 15px))}.design-to-code-hero-module__p_Ab9a__sceneCaptions{z-index:2;pointer-events:none;position:absolute;top:24px;left:0;right:0}.design-to-code-hero-module__p_Ab9a__sceneCaption{opacity:0;visibility:hidden;transition:opacity .24s,visibility .24s;position:absolute;inset:0}.design-to-code-hero-module__p_Ab9a__captionTitle{letter-spacing:-.035em;color:#254b35;align-items:baseline;gap:14px;font-size:26px;font-weight:550;display:flex}.design-to-code-hero-module__p_Ab9a__captionTitle span{font-family:var(--font-code);letter-spacing:.16em;color:#63785f;font-size:10px;font-weight:400}.design-to-code-hero-module__p_Ab9a__captionDescription{color:#536c57;margin-top:6px;font-size:13px;line-height:1.6}.design-to-code-hero-module__p_Ab9a__captionDetail{color:#607760;margin-top:5px;font-size:12px;line-height:1.7}.design-to-code-hero-module__p_Ab9a__hero[data-stage="0"] [data-caption="0"],.design-to-code-hero-module__p_Ab9a__hero[data-stage="1"] [data-caption="1"],.design-to-code-hero-module__p_Ab9a__hero[data-stage="2"] [data-caption="2"]{opacity:1;visibility:visible}.design-to-code-hero-module__p_Ab9a__footer{color:#63785f;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;min-height:72px;padding-top:8px;font-size:13px;display:flex}.design-to-code-hero-module__p_Ab9a__scrollHint{align-items:center;gap:12px;display:none}.design-to-code-hero-module__p_Ab9a__scrollIcon{color:#f2f6ed;background:#315d40;border-radius:50%;flex-shrink:0;place-items:center;width:42px;height:42px;display:grid}.design-to-code-hero-module__p_Ab9a__scrollCopy{color:#536c57;flex-direction:column;gap:3px;font-size:12px;display:flex}.design-to-code-hero-module__p_Ab9a__scrollCopy strong{letter-spacing:.06em;color:#254b35;font-size:16px;font-weight:600}@keyframes design-to-code-hero-module__p_Ab9a__scrollNudge{0%,to{transform:translateY(-2px)}50%{transform:translateY(3px)}}@media (prefers-reduced-motion:no-preference){.design-to-code-hero-module__p_Ab9a__hero[data-motion=true][data-stage="0"] .design-to-code-hero-module__p_Ab9a__scrollIcon svg{animation:1.4s ease-in-out 3 design-to-code-hero-module__p_Ab9a__scrollNudge}}.design-to-code-hero-module__p_Ab9a__hero[data-motion=true] .design-to-code-hero-module__p_Ab9a__scrollHint{display:inline-flex}.design-to-code-hero-module__p_Ab9a__hero[data-motion=true] .design-to-code-hero-module__p_Ab9a__staticHint{display:none}@media (max-width:700px){.design-to-code-hero-module__p_Ab9a__sticky{padding-top:24px}.design-to-code-hero-module__p_Ab9a__heading{flex-direction:column;align-items:flex-start;gap:16px}.design-to-code-hero-module__p_Ab9a__heading h2{margin-top:14px;font-size:clamp(38px,8.5vw,57px)}.design-to-code-hero-module__p_Ab9a__eyebrow{font-size:9px}.design-to-code-hero-module__p_Ab9a__canvas{min-height:260px;margin-top:16px}.design-to-code-hero-module__p_Ab9a__canvasNumber{display:none}.design-to-code-hero-module__p_Ab9a__canvasBottom{font-size:6px;bottom:10px;left:0;right:0}.design-to-code-hero-module__p_Ab9a__sceneCaptions{top:20px}.design-to-code-hero-module__p_Ab9a__captionTitle{gap:10px;font-size:22px}.design-to-code-hero-module__p_Ab9a__captionDescription{font-size:11px}.design-to-code-hero-module__p_Ab9a__captionDetail{max-width:27em;font-size:10px}.design-to-code-hero-module__p_Ab9a__sceneTravel{top:128px;bottom:28px}.design-to-code-hero-module__p_Ab9a__sceneMotion{height:min(45vw,55%)}.design-to-code-hero-module__p_Ab9a__scrollIcon{width:38px;height:38px}.design-to-code-hero-module__p_Ab9a__scrollCopy{font-size:10px}.design-to-code-hero-module__p_Ab9a__scrollCopy strong{font-size:14px}.design-to-code-hero-module__p_Ab9a__footer{min-height:68px;font-size:11px}}@media (prefers-reduced-motion:reduce),(max-height:639px){.design-to-code-hero-module__p_Ab9a__hero[data-motion=true]{height:auto}.design-to-code-hero-module__p_Ab9a__hero[data-motion=true] .design-to-code-hero-module__p_Ab9a__sticky{height:auto;min-height:0;position:relative;top:auto}.design-to-code-hero-module__p_Ab9a__sceneCaption{transition:none}}@media print{.design-to-code-hero-module__p_Ab9a__hero{display:none}}