.proto-scene{position:absolute;inset:0;overflow:hidden;container-type:inline-size;color:#252c29;font-family:var(--sans),Arial,sans-serif;text-align:left}.proto-scene *{box-sizing:border-box}.proto-photo{position:absolute;inset:0;background:url('./assets/prototype-meadow-green.webp') center/cover}.proto-window{position:absolute;left:50%;top:50%;width:clamp(270px,54cqw,475px);height:280px;transform:translate(-50%,-50%);background:#fefdfc;border:1px solid #e1e0db;border-radius:16px;overflow:hidden;box-shadow:0 7px 23px #232d1f16;font-size:clamp(10px,1.2cqw,13px);transition:height .5s cubic-bezier(.22,.7,.2,1)}.proto-bar,.proto-footer{display:none}.proto-content{position:absolute;inset:0;transition:opacity .3s,transform .35s}.proto-content.is-changing{opacity:0;transform:translateY(3px)}.proto-message{padding:21px;height:100%;display:flex;flex-direction:column}.proto-heading{display:flex;align-items:center;gap:8px;color:#768177;font-size:.82em;margin-bottom:20px}.proto-heading img{width:20px;height:20px;object-fit:contain}.proto-heading small{margin-left:auto;font-size:.9em;color:#a3aba2}.proto-bubble{padding:13px 15px;border-radius:10px;background:#f3f4ee;color:#4a5d4d;line-height:1.75;font-size:.94em;white-space:pre-line}.proto-composer{margin-top:auto;display:flex;align-items:center;gap:9px;color:#acb2a8;font-size:.8em;padding-top:16px}.proto-composer span:nth-child(2){flex:1}.proto-send{display:grid;place-items:center;width:22px;height:22px;background:#063b2b;color:white;border-radius:50%;animation:proto-send .4s 4.1s both}.proto-sent{opacity:0;animation:proto-in .3s 4.25s forwards;font-size:.7em;color:#a0aaa0;margin:9px 0 0;text-align:right}.proto-call{position:absolute;inset:0;background:#384539}.proto-call video{display:block;width:100%;height:100%;object-fit:cover}.proto-call-label{position:absolute;bottom:15px;left:17px;color:white;font-size:.78em;z-index:2}.proto-call-controls{position:absolute;bottom:12px;right:15px;display:flex;gap:6px;z-index:2}.proto-call-controls span{width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:#ffffff33;color:white}.proto-call-controls span:last-child{background:#b65d55}.proto-call-shade{position:absolute;inset:0;background:#10231899;opacity:0;animation:proto-in .65s 2.6s forwards}.proto-decisions{position:absolute;inset:0;padding:45px 29px 35px;display:flex;justify-content:center;flex-direction:column;gap:15px;color:#fff}.proto-decision{opacity:0;transform:translateY(4px);animation:proto-in .45s forwards;font-size:.93em}.proto-decision:nth-child(1){animation-delay:3s}.proto-decision:nth-child(2){animation-delay:4.2s}.proto-decision:nth-child(3){animation-delay:5.4s}.proto-decision:nth-child(4){animation-delay:6.6s}.proto-decision b{font-weight:400;margin-right:10px}.proto-build{height:100%;background:#f7f9fb;padding:20px 18px;overflow:hidden}.proto-build-head{display:flex;justify-content:space-between;align-items:center;color:#8996a3;font-size:.75em;margin-bottom:21px}.proto-build-head i{width:8px;height:8px;border:1px solid #d3dce1;border-top-color:#73a0bc;border-radius:50%;animation:proto-spin .9s linear infinite}.proto-code{font:clamp(7px,1cqw,10px)/2.15 monospace;color:#56697a}.proto-code div{white-space:nowrap;clip-path:inset(0 100% 0 0);animation:proto-type .72s steps(55,end) forwards}.proto-code div:nth-child(2){animation-delay:.7s}.proto-code div:nth-child(3){animation-delay:1.4s}.proto-code div:nth-child(4){animation-delay:2.1s}.proto-code div:nth-child(5){animation-delay:2.8s}.proto-code div:nth-child(6){animation-delay:3.5s}.proto-code div:nth-child(7){animation-delay:4.2s}.proto-code div:nth-child(8){animation-delay:4.9s}.proto-code b{color:#367dcc;font-weight:400}.proto-code em{color:#a27955;font-style:normal}.proto-code span{color:#b0bcc7;margin-right:10px}.proto-approve{position:relative;align-self:flex-start;padding:9px 22px;margin-top:15px;background:#063b2b;color:#fff;border-radius:5px;font-size:.84em}.proto-approve.is-approved{background:#eef1e9;color:#4b6549}.proto-cursor{position:absolute;width:17px;height:21px;right:20%;top:-28px;fill:#174f3b;stroke:white;stroke-width:1.5;opacity:0;animation:proto-click 1.6s 1.1s forwards}.proto-complete{color:#91a08f;font-size:.75em;margin-top:13px}@keyframes proto-in{to{opacity:1;transform:none}}@keyframes proto-type{to{clip-path:inset(0)}}@keyframes proto-spin{to{transform:rotate(360deg)}}@keyframes proto-send{50%{transform:scale(.85)}}@keyframes proto-click{0%{opacity:0;transform:translate(15px,0)}65%,85%{opacity:1;transform:translate(0,38px)}94%{opacity:1;transform:translate(0,38px) scale(.8)}100%{opacity:1;transform:translate(0,38px)}}@media(max-width:600px){.proto-window{width:79cqw;min-width:260px;height:280px;font-size:11px}.proto-message{padding:17px}.proto-bubble{font-size:.87em}.proto-heading{margin-bottom:17px}.proto-decisions{padding:35px 20px;gap:16px}.proto-decision{font-size:.87em}.proto-build{padding:17px 12px}.proto-code{font-size:6.6px;line-height:2.7}.proto-code span{margin-right:5px}.proto-build-head{margin-bottom:15px}}@media(prefers-reduced-motion:reduce){.proto-scene *{animation:none!important;transition:none!important}.proto-cursor{display:none}}

/* Each stage sizes to its contents; the opening is only a line over the photo. */
.proto-window{transition:height .5s cubic-bezier(.22,.7,.2,1),width .5s cubic-bezier(.22,.7,.2,1),background .35s,box-shadow .35s,border-color .35s}
.proto-content{position:relative;inset:auto}.proto-message{height:auto}.proto-call{position:relative;inset:auto;height:280px}.proto-build{height:auto;min-height:190px}.proto-opening{padding:10px 0;min-height:42px;display:flex;align-items:center;justify-content:center;color:#263e2e;font-size:.96em;line-height:1.7;text-align:center;white-space:nowrap}
.proto-scene[data-step="0"] .proto-window{width:85%;background:transparent;border-color:transparent;box-shadow:none;border-radius:0}
.proto-delivery{padding:22px;color:#657365;font-size:.94em;line-height:1.65}.proto-delivery p{margin:0 0 12px}.proto-url{display:block;color:#367dcc;font-size:.95em}.proto-delivery .proto-approve{margin-top:17px;line-height:1.4}.proto-code{font-size:clamp(8px,1.05cqw,10.5px)}
@media(max-width:600px){.proto-opening{white-space:normal;font-size:10px;min-height:58px;padding:8px}.proto-delivery{padding:19px;font-size:.91em}.proto-code{font-size:7.8px;line-height:2.5}.proto-build{min-height:180px}.proto-call{height:260px}}

/* Compact composer, workflow checkmarks and a quiet dark editor. */
.proto-scene[data-step="0"] .proto-window{width:max-content;max-width:86%;min-width:0;background:#fefdfc;border:1px solid #e1e0db;border-radius:30px;box-shadow:0 7px 23px #232d1f16}
.proto-opening{position:relative;display:block;padding:12px 21px;min-height:42px;white-space:nowrap;font-size:.88em;text-align:left;width:clamp(270px,53cqw,470px)}
.proto-tick{display:inline-block;position:relative;flex:none;width:10px;height:10px;margin-right:10px;vertical-align:middle}.proto-tick:after{content:'';position:absolute;left:2px;top:0;width:5px;height:8px;border:solid #171a18;border-width:0 1.3px 1.3px 0;transform:rotate(45deg)}
.proto-decision{display:flex;align-items:center;color:#fff}.proto-decision .proto-tick{background:#fffefa;border-radius:2px;width:14px;height:14px}.proto-decision .proto-tick:after{left:4px;top:1px}
.proto-build{background:#1c252b;color:#b1c2d0;min-height:180px}.proto-build-head{color:#91a4b2}.proto-code{color:#c1d0db}.proto-code b{color:#74b3f4}.proto-code em{color:#d4b78c}.proto-code span{color:#637583}.proto-build-head i{border-color:#3c4e59;border-top-color:#8dc1eb}
.proto-reply{position:relative;white-space:pre-line;margin-bottom:12px}.proto-reply-space{visibility:hidden;display:block}.proto-reply-text{position:absolute;inset:0}.proto-url{opacity:0;transition:opacity .25s}.proto-url.is-visible{opacity:1}.proto-approve{display:flex;align-items:center}.proto-delivery .proto-cursor{animation:proto-click 1s 2.8s forwards}.proto-approve.is-approved{transition:none}
@media(max-width:600px){.proto-opening{width:275px;max-width:100%;white-space:normal;font-size:10px;padding:11px 17px;min-height:48px}.proto-build{min-height:165px}}
.proto-decision .proto-tick{background:none;border-radius:0;width:10px;height:10px}.proto-decision .proto-tick:after{left:2px;top:0;border-color:#fffefa}

/* A fitted message bar and a lightweight email finish. */
.proto-opening{width:max-content;max-width:100%;padding:12px 18px}.proto-opening-size{display:block;visibility:hidden}.proto-opening .proto-typed{position:absolute;inset:12px 18px}.proto-email-bar{display:flex;align-items:center;gap:8px;padding:14px 20px 12px;border-bottom:1px solid #eeeee7;font-size:.8em;color:#58675b}.proto-email-bar img{width:17px;height:17px;object-fit:contain}.proto-email-bar small{display:block;font-size:.86em;color:#a0a89f;margin-top:2px}.proto-email-bar time{margin-left:auto;color:#a0a89f;font-size:.85em}.proto-subject{padding:12px 20px 0;font-size:.96em;font-weight:550;color:#394d3c}.proto-email .proto-delivery{padding:15px 20px 20px;font-size:.88em}.proto-approval-row{display:flex;align-items:center;gap:14px;position:relative}.proto-celebrate{position:relative;font-size:.8em;color:#73886a;margin-top:17px}.proto-celebrate>span{display:block;animation:proto-celebrate-text .5s .12s both}.proto-celebrate>i{position:absolute;left:-58px;top:7px;width:3px;height:3px;background:#9bb39b;border-radius:2px;opacity:0;animation:proto-celebrate-spark .85s ease-out both;--sx:-27px;--sy:-23px}.proto-celebrate>i:nth-child(2){--sx:0px;--sy:-30px;background:#c5b58e}.proto-celebrate>i:nth-child(3){--sx:28px;--sy:-20px}.proto-celebrate>i:nth-child(4){--sx:30px;--sy:17px;background:#c5b58e}.proto-celebrate>i:nth-child(5){--sx:0px;--sy:27px}.proto-celebrate>i:nth-child(6){--sx:-29px;--sy:15px;background:#c5b58e}.proto-approve.is-approved{animation:proto-approval-settle .5s cubic-bezier(.22,.7,.2,1) both}@keyframes proto-celebrate-spark{0%{opacity:0;transform:translate(0,0) scale(.4)}20%{opacity:.8}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.3)}}@keyframes proto-celebrate-text{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}@keyframes proto-approval-settle{0%{transform:scale(.96)}55%{transform:scale(1.035)}100%{transform:scale(1)}}
@media(max-width:600px){.proto-opening{width:max-content;max-width:275px;white-space:normal;padding:11px 17px;min-height:0}.proto-opening .proto-typed{inset:11px 17px}.proto-email-bar{padding:12px 15px 10px}.proto-subject{padding:11px 15px 0;font-size:11px}.proto-email .proto-delivery{padding:12px 15px 16px;font-size:10px}.proto-approval-row{gap:9px}.proto-celebrate{font-size:8px}}
@media(prefers-reduced-motion:reduce){.proto-scene *{animation:none!important;transition:none!important}.proto-celebrate>i{display:none}}

/* Earlier decisions and a directional approval burst. */
.proto-call-shade{animation-delay:1.2s}.proto-decision:nth-child(1){animation-delay:1.6s}.proto-decision:nth-child(2){animation-delay:2.8s}.proto-decision:nth-child(3){animation-delay:4s}.proto-decision:nth-child(4){animation-delay:5.2s}
.proto-confetti{position:absolute;left:46px;top:32px;width:0;height:0;pointer-events:none;z-index:3}.proto-confetti i{position:absolute;width:6px;height:4px;border-radius:1px;background:var(--color);opacity:0;animation:proto-confetti-flight 1.4s var(--delay) cubic-bezier(.16,.65,.36,1) both}.proto-confetti i:nth-child(3n){width:4px;height:7px}.proto-confetti i:nth-child(4n){width:5px;height:5px;border-radius:50%}@keyframes proto-confetti-flight{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.5)}8%{opacity:1}65%{opacity:1;transform:translate(calc(var(--dx)*.78),var(--dy)) rotate(var(--rot)) scale(1)}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 28px)) rotate(calc(var(--rot) + 80deg)) scale(.7)}}
@media(max-width:600px){.proto-confetti i{--dx:120px;transform-origin:center}.proto-confetti{left:43px;top:31px}}
@media(prefers-reduced-motion:reduce){.proto-confetti{display:none}}