.extract-hero{position:relative;margin:0 0 48px;padding:18px 0 30px;--forest:#203f35;--clay:#bd664b;--paper:#f7f3e8}
.extract-stage{display:grid;grid-template-columns:1.2fr .8fr;gap:8%;align-items:center;max-width:1000px;margin:auto;color:var(--forest)}
.demo-site{background:var(--paper);border:1px solid #203f3540;border-radius:7px;overflow:hidden;box-shadow:0 12px 24px #203f3509}
.demo-browser{font-size:10px;padding:8px 16px;border-bottom:1px solid #203f3520;background:#ebe8df;text-align:center;color:#77796e}
.demo-site-nav{display:flex;align-items:center;justify-content:space-between;padding:18px 22px}.demo-wordmark{font-family:Georgia,serif;font-size:28px;font-weight:bold;letter-spacing:-1px}.demo-site-nav small{font-size:9px;color:var(--forest)}
.demo-site-body{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:8px 22px 24px;align-items:center}.demo-site-copy strong{display:block;font:38px/.98 Georgia,serif;letter-spacing:-1.5px}.demo-site-copy p{font:11px/1.5 Jost,Arial,sans-serif;margin:14px 0;color:#5e6a60}.demo-site-copy span{display:inline-block;background:var(--forest);color:var(--paper);font:10px Jost,Arial,sans-serif;padding:9px 13px}.demo-site-photo{width:100%;height:208px;object-fit:cover;border-radius:80px 80px 0 0}
.extracted-assets{display:grid;gap:16px;position:relative}.extracted-asset{background:var(--paper);border:1px solid #203f3540;border-radius:5px;min-height:90px;padding:14px 20px;position:relative;display:flex;align-items:center;justify-content:space-between;box-shadow:0 5px 15px #203f3505;animation:asset-logo 9s infinite ease-in-out}.extracted-asset::before{content:'';position:absolute;width:24%;border-top:1px dashed #bd664b88;right:100%;top:50%}.asset-palette{animation-name:asset-palette}.asset-type{animation-name:asset-type}.extracted-asset small{display:block;font:9px Jost,Arial,sans-serif;letter-spacing:1px;color:#77796e;margin-bottom:6px}.extract-copy{display:flex;align-items:center;gap:5px;font:11px Jost,Arial,sans-serif;border:1px solid #203f3540;border-radius:3px;padding:7px 9px;color:#203f35;background:white}.extract-copy img{width:13px;height:13px}.extract-colors{display:flex;gap:14px}.extract-colors span{font:8px monospace;text-align:center}.extract-colors i{display:block;width:32px;height:32px;background:var(--swatch);border:1px solid #203f3520;border-radius:50%;margin-bottom:5px}.extract-typeface{font:24px Georgia,serif}.extract-typeface b{font-size:35px;font-weight:normal;margin-right:12px}.demo-cursor{position:absolute;width:29px;height:34px;right:0;top:70px;z-index:3;animation:extract-cursor 9s infinite ease-in-out;pointer-events:none}.extract-copied{position:absolute;right:16px;top:-20px;background:var(--forest);color:white;padding:5px 9px;border-radius:3px;font:11px Jost,Arial,sans-serif;animation:extract-copied 9s infinite}.extract-caption{display:flex;justify-content:space-between;align-items:center;max-width:1000px;margin:16px auto 0;font-size:11px;color:#6a6c64}.extract-pause{background:none;border:0;color:#6a6c64;font:11px Jost,Arial,sans-serif;padding:4px 0;min-height:32px;text-decoration:underline;box-shadow:none}.extract-pause:hover{background:none;color:#171717}.extract-hero[data-paused=true] *{animation-play-state:paused!important}
@keyframes asset-logo{0%,8%{opacity:0;transform:translateX(-45px)}20%,89%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(0)}}
@keyframes asset-palette{0%,20%{opacity:0;transform:translateX(-45px)}32%,89%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(0)}}
@keyframes asset-type{0%,32%{opacity:0;transform:translateX(-45px)}44%,89%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(0)}}
@keyframes extract-cursor{0%,44%{opacity:0;transform:translate(22px,160px)}49%{opacity:1;transform:translate(22px,160px)}61%{opacity:1;transform:translate(-15px,-18px) scale(1)}64%{opacity:1;transform:translate(-15px,-18px) scale(.86)}68%,83%{opacity:1;transform:translate(-15px,-18px) scale(1)}91%,100%{opacity:0;transform:translate(-15px,-18px)}}
@keyframes extract-copied{0%,64%{opacity:0;transform:translateY(4px)}69%,84%{opacity:1;transform:translateY(0)}91%,100%{opacity:0;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.extract-hero *{animation:none!important}.demo-cursor,.extract-copied,.extract-pause{display:none}}
@media(max-width:700px){.extract-stage{grid-template-columns:1fr;gap:25px;max-width:430px}.demo-site-copy strong{font-size:32px}.demo-site-photo{height:175px}.extracted-asset::before{display:none}.extracted-assets{gap:10px}.extracted-asset{min-height:80px}.extract-caption{max-width:430px}.extract-hero{margin-bottom:25px}.demo-site-nav{padding:16px}.demo-site-body{padding:5px 16px 20px}}
.extract-hero[data-paused=true] .extracted-asset{animation:none;opacity:1;transform:none}.extract-hero[data-paused=true] .demo-cursor,.extract-hero[data-paused=true] .extract-copied{display:none}
.extract-copy img{filter:brightness(0);opacity:.75}