:root{--brand:#e62429;--brand-dim:#e6242926;--amber:#e62429;--amber-dim:#e6242926;--teal:#00c9a7;--teal-dim:#00c9a726;--bg:#f5f4f0;--text-dark:#1a1a1a;--text-mid:#666;--text-muted:#999;--font-body:"Plus Jakarta Sans", sans-serif;--font-sans:"Plus Jakarta Sans", sans-serif;--font-mono:"JetBrains Mono", "Fira Code", "Fragment Mono", "Courier New", monospace;--header-h:60px;--footer-h:65px;--face-w:1040px;--face-h:580px;--ease-out:cubic-bezier(.23, 1, .32, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100%;font-size:16px}body{font-family:var(--font-body);background:var(--bg);color:var(--text-dark);flex-direction:column;min-height:100dvh;display:flex;overflow-x:hidden}a{color:inherit;text-decoration:none}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.lp-logo{align-items:center;text-decoration:none;transition:opacity .2s;display:inline-flex}.lp-logo:hover{opacity:.75}.lp-logo-img{object-fit:contain;width:auto;height:20px;display:block}.lp-nav{align-items:center;gap:clamp(1.2rem,2.5vw,2.2rem);display:flex}.lp-nav-link{font-family:var(--font-sans);color:#4a4a4a;letter-spacing:-.01em;font-size:.925rem;font-weight:600;text-decoration:none;transition:color .2s}.lp-nav-link.active,.lp-nav-link:hover{color:#111;font-weight:600}#lp-main{background:var(--bg);padding-top:var(--header-h);height:calc(100dvh - var(--footer-h));box-sizing:border-box;flex:1;justify-content:center;align-items:center;display:flex}.lp-face{width:100%;max-width:1140px;height:calc(100dvh - var(--header-h) - var(--footer-h));margin:0 auto;position:relative}.lp-label{z-index:10;pointer-events:none;opacity:0;max-width:310px;transition:opacity .4s;position:absolute;top:44%;transform:translateY(-50%)}.lp-label--left{text-align:left;left:clamp(1.25rem,4vw,2.5rem)}.lp-label--right{text-align:left;right:clamp(1.25rem,4vw,2.5rem)}.lp-role{font-family:var(--font-mono);letter-spacing:-.035em;color:var(--text-dark);margin-bottom:.75rem;font-size:clamp(1.65rem,3.2vw,2.6rem);font-weight:500;line-height:1.05}.chevron{font-weight:400;transition:color .2s}.chevron--coder{color:var(--teal)}.chevron--editor{color:var(--amber)}.lp-role--coder{font-family:var(--font-sans);letter-spacing:-.045em;color:var(--text-dark);text-transform:lowercase;margin-bottom:.6rem;font-size:clamp(2.2rem,3.9vw,3.5rem);font-weight:800;line-height:1}.lp-role--editor{font-family:var(--font-sans);letter-spacing:-.045em;color:var(--brand);text-transform:lowercase;margin-bottom:.6rem;font-size:clamp(2.2rem,3.9vw,3.5rem);font-weight:800;line-height:1}.lp-role-desc{font-family:var(--font-sans);color:var(--text-muted);margin-bottom:1.1rem;font-size:clamp(.85rem,1.2vw,.95rem);font-weight:400;line-height:1.65}.lp-role-desc--coder,.lp-role-desc--editor{font-family:var(--font-sans);color:#666;letter-spacing:-.01em;margin-bottom:1.1rem;font-size:clamp(.85rem,1.15vw,.95rem);font-weight:400;line-height:1.45}.lp-hint{font-family:var(--font-sans);letter-spacing:.02em;opacity:0;font-size:.85rem;font-weight:700;transition:opacity .3s,transform .3s;display:inline-block}.lp-hint--editor{color:var(--amber)}.lp-hint--coder{color:var(--teal)}.lp-face:hover .lp-hint{opacity:.85}.lp-coder-pattern{z-index:3;pointer-events:none;opacity:1;will-change:transform, opacity;width:44%;height:40%;transition:opacity .4s;position:absolute;top:62%;left:8%;overflow:visible}.lp-coder-pattern svg{width:100%;height:100%;overflow:visible}.lp-coder-pattern .sk{font-feature-settings:"liga" 1, "zero" 1;fill:#4b5563;font-family:JetBrains Mono,Fira Code,Fragment Mono,monospace}.lp-coder-pattern .sk-hero{font-family:var(--font-sans);letter-spacing:-1.5px;fill:#374151;font-weight:300}.lp-editor-pattern{z-index:3;pointer-events:none;opacity:1;will-change:transform, opacity;width:36%;height:36%;transition:opacity .4s;position:absolute;top:58%;right:10%;overflow:visible}.lp-edit-img{mix-blend-mode:multiply;opacity:.68;pointer-events:none;-webkit-user-select:none;user-select:none;filter:contrast(1.08);transition:opacity .3s,transform .3s;position:absolute}.lp-edit-toolbar{width:65%;top:8%;right:15%;transform:rotate(0)}.lp-edit-timeline{width:70%;top:35%;right:0%;transform:rotate(.5deg)}.lp-img{z-index:5;will-change:clip-path, transform;background-repeat:no-repeat;background-size:auto 185%;position:absolute;inset:0}.lp-img--coder{clip-path:inset(0 50% 0 0);background-image:url(/images/hero-coder-face.png);background-position:50% 7.5%}.lp-img--editor{clip-path:inset(0 0 0 50%);background-image:url(/images/hero-editor-spiderman.png);background-position:50% 8.1%}.lp-zone{z-index:20;cursor:pointer;width:50%;height:100%;display:block;position:absolute;top:0}.lp-zone--left{cursor:pointer;left:0}.lp-zone--right{cursor:pointer;right:0}.lp-footer{height:var(--footer-h);background:var(--bg,#f5f4f0);z-index:100;border-top:1px solid #00000014;flex-shrink:0;align-items:center;width:100%;margin-top:auto;display:flex}.lp-footer-inner{justify-content:space-between;align-items:center;gap:1rem;width:100%;max-width:1140px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem);display:flex}.lp-footer-social{align-items:center;gap:.75rem;display:flex}.lp-social-btn{border:1.5px solid var(--text-dark,#1a1a1a);width:36px;height:36px;color:var(--text-dark,#1a1a1a);background:0 0;border-radius:50%;justify-content:center;align-items:center;text-decoration:none;transition:all .22s cubic-bezier(.4,0,.2,1);display:inline-flex}.lp-social-btn:hover{border-color:var(--brand,#e62429);background:var(--brand,#e62429);color:#fff;transform:translateY(-2px);box-shadow:0 4px 14px #e6242959}.lp-social-btn svg{display:block}.lp-footer-copy{font-family:var(--font-sans);color:var(--text-dark,#1a1a1a);letter-spacing:.01em;white-space:nowrap;font-size:.85rem;font-weight:700}.lp-img--editor,.lp-img--coder{opacity:0;transition:opacity .6s}.lp-label{opacity:0;transition:opacity .6s ease, transform .6s var(--ease-out);transform:translateY(calc(12px - 50%))}body.loaded .lp-img--editor,body.loaded .lp-img--coder{opacity:1}body.loaded .lp-label--left{opacity:1;transition-delay:.15s;transform:translateY(-50%)}body.loaded .lp-label--right{opacity:1;transition-delay:.25s;transform:translateY(-50%)}.lp-label.js-controlled{will-change:opacity;transition:none!important;transform:translateY(-50%)!important}@media (max-width:700px){#lp-main{padding-top:calc(var(--header-h) + 1rem);align-items:flex-start;min-height:auto;padding-bottom:1rem}.lp-face{height:auto;min-height:calc(100dvh - var(--header-h) - var(--footer-h) - 2rem)}.lp-img--editor,.lp-img--coder{background-position:top;background-size:cover;width:100%;height:55vw;min-height:220px;position:relative;inset:auto;clip-path:none!important}.lp-img--editor{background-position:30% 0}.lp-img--coder{background-position:70% 0}.lp-face{flex-direction:column;gap:0;display:flex}.lp-label{pointer-events:auto;background:var(--bg);max-width:100%;padding:1.25rem clamp(1rem,5vw,2rem);position:static;opacity:1!important;transform:none!important}.lp-label--left{order:2}.lp-label--right{text-align:left;order:4}.lp-img--editor{order:1}.lp-img--coder{order:3}.lp-seam,.lp-zone{display:none}.lp-hint{opacity:.85!important}.lp-footer__tag{display:none}.lp-role{font-size:1.75rem}}@media (max-width:580px){.lp-footer{height:auto;padding:.85rem 0}.lp-footer-inner{text-align:center;flex-direction:column;justify-content:center;gap:.85rem}.lp-footer-copy{white-space:normal}}@keyframes extremeSlideInLeft{0%{opacity:0;transform:translate(-100vw)}to{opacity:1;transform:translate(0)}}@keyframes extremeSlideInRight{0%{opacity:0;transform:translate(100vw)}to{opacity:1;transform:translate(0)}}@keyframes bounceInLeft{0%{opacity:0;transform:translate(-100vw)}to{opacity:1;transform:translate(0)}}@keyframes bounceInRight{0%{opacity:0;transform:translate(100vw)}to{opacity:1;transform:translate(0)}}@keyframes heroTextFadeIn{0%{opacity:0;transform:translateY(-50%)scale(.96)}to{opacity:1;transform:translateY(-50%)scale(1)}}body.loaded .lp-img--coder{animation:1.1s cubic-bezier(.25,1,.5,1) both extremeSlideInLeft}body.loaded .lp-img--editor{animation:1.1s cubic-bezier(.25,1,.5,1) both extremeSlideInRight}body.loaded .lp-coder-pattern{animation:1.2s cubic-bezier(.34,1.4,.64,1) .35s both bounceInLeft}body.loaded .lp-editor-pattern{animation:1.2s cubic-bezier(.34,1.4,.64,1) .35s both bounceInRight}body.loaded .lp-label--left,body.loaded .lp-label--right{animation:.8s cubic-bezier(.25,1,.5,1) 1.55s both heroTextFadeIn}body:not(.loaded-interactive) .lp-zone{pointer-events:none}
