.story{--story-highlight:rgb(145 205 219 / 30%);position:relative;isolation:isolate;height:460px;border-radius:9px;overflow:hidden;scroll-margin-top:28px;background:#224b4c}
.story-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 57%;z-index:-3}
.story:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,29,31,.43),rgba(6,29,31,.14) 48%,transparent 76%);z-index:-2;pointer-events:none}
.story-content{display:grid;grid-template-columns:minmax(0,390px) minmax(0,366px);justify-content:center;align-items:center;gap:88px;height:100%;padding:40px 48px 68px;outline:none}
.story-content:focus-visible{outline:2px solid white;outline-offset:-7px}
.story-title{justify-self:end;width:max-content;max-width:100%;font-family:var(--body);font-size:clamp(30px,3.3vw,43px);font-weight:450;line-height:1.13;letter-spacing:-.048em;color:#fffefa;text-shadow:0 1px 16px #0a252640;animation:story-title-in .5s both}
.story-title em{font-family:var(--serif);font-weight:400;font-size:1.18em;letter-spacing:-.035em}
.story-visual{display:flex;align-items:center;justify-content:flex-start;min-width:0}
.story-card{width:366px;max-width:100%;background:#fdfcf8;border:1px solid #fff9;border-radius:9px;box-shadow:0 9px 35px #072c2c36;position:relative;animation:story-card-in .6s cubic-bezier(.18,.8,.25,1) both;color:#202422;overflow:hidden}
.story-card svg{width:18px;height:18px;flex:none}
.story-address{display:flex;align-items:center;gap:10px;padding:17px 22px;color:#68716d;font-size:12px;border-bottom:1px solid #e9ebe6}
.story-address>svg{color:#84928d}
.story-browser{height:43px;display:flex;align-items:center;position:relative;background:#f4f4ef;border-bottom:1px solid #e6e8e0;padding:0 16px}
.story-window-dots{display:flex;gap:4px;position:absolute;left:16px}
.story-window-dots i{width:5px;height:5px;border-radius:50%;background:#c3c7be}
.story-url{display:flex;align-items:center;justify-content:center;gap:6px;color:#738079;font-size:11px;width:100%;padding:0 22px}
.story-url svg{width:12px;height:12px;color:#89998f}
.story-business:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1.5px #83c7d0;pointer-events:none;animation:story-reading-outline 6.2s ease-in-out both}
.story-webpage{padding:23px 26px 26px}
.story-web-brand{font-family:var(--display);font-size:14px;letter-spacing:-.07em;font-weight:600;margin-bottom:19px;color:#3e544a}
.story-web-brand>span{color:#679b7a}
.story-webpage h3{font-family:var(--body);font-size:22px;line-height:1.28;font-weight:550;letter-spacing:-.045em;margin:0 0 14px}
.story-webpage p{font-size:13px;line-height:1.7;color:#667368;margin:0}
.story-webpage mark{background-image:linear-gradient(90deg,var(--story-highlight),var(--story-highlight));background-size:0 100%;box-decoration-break:clone;-webkit-box-decoration-break:clone;animation:story-highlight .8s cubic-bezier(.2,.7,.3,1) forwards}
.story-webpage .story-product{animation-delay:1.1s}
.story-webpage .story-role{animation-delay:2.5s}
.story-webpage .story-locations{animation-delay:3.7s}
.story-reader{display:flex;align-items:center;gap:9px;min-height:46px;padding:12px 19px;border-top:1px solid #e6e8e0;background:#f2f6ef;color:#426254;font-size:11px;line-height:1.4}
.story-reader>img{width:18px;height:18px;flex:none;animation:story-turn 3s linear 2}
.story-reader-label{display:grid;flex:1}
.story-reader-label>span{grid-area:1/1}
.story-reading{animation:story-reading-out .18s 5.7s both}
.story-understood{animation:story-reading-in .22s 5.95s both}
.story-reader-check{display:flex;animation:story-reading-in .22s 5.95s both}
.story-reader-check svg{width:15px;height:15px}
.story-person-head{display:flex;align-items:center;gap:12px;padding:22px 24px}
.story-avatar{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:#dcefee;color:#29696a;font-family:var(--body);font-size:12px;font-weight:550;flex:none}
.story-person-head h3{font-family:var(--body);font-size:15px;letter-spacing:-.015em;line-height:1.3;margin:0 0 3px;font-weight:600}
.story-person-head p{font-size:11px;color:#758078;line-height:1.5;margin:0}
.story-news{padding:21px 24px 23px;border-top:1px solid #e9ebe6}
.story-news p{font-family:var(--serif);font-size:26px;line-height:1.18;margin:0 0 17px;letter-spacing:-.018em}
.story-news>span{font-size:10px;color:#818880}
.story mark{color:inherit;background:linear-gradient(90deg,var(--story-highlight),var(--story-highlight));background-repeat:no-repeat;background-size:0 100%;animation:story-highlight 1s .75s forwards}
.story .story-webpage mark{background-image:linear-gradient(90deg,var(--story-highlight),var(--story-highlight));animation-duration:.8s;animation-timing-function:cubic-bezier(.2,.7,.3,1)}
.story-message{padding:20px 24px 18px;font-size:13px;line-height:1.65}
.story-message h3{font-family:var(--body);font-size:12px;letter-spacing:0;font-weight:600;margin:0 0 17px;line-height:1.4}
.story-message p{margin:0 0 12px}
.story-signature{color:#788077;font-size:11px}
.story-draft{position:relative}
.story-draft-measure{visibility:hidden}
.story-typed{position:absolute;inset:0}
.story-draft p:last-child{margin-bottom:0}
.story .story-draft .story-personal{animation:none;background:var(--story-highlight);transition:background-color .45s ease}
.story.story-clear-personal .story-draft .story-personal{background-color:transparent}
.story-caret{display:inline-block;height:1em;width:1px;background:#527675;vertical-align:-.1em;margin-left:1px;animation:story-caret .8s steps(1,end) infinite}
.story-email .story-address{padding:11px 18px;gap:8px}.story-recipient{min-width:0;white-space:nowrap}.story-address .story-send-control{margin-left:auto;flex:none}
.story-send-control{display:grid;align-items:center;width:106px;height:31px;border:1px solid #dfe6e1;border-radius:5px;background:#f0f3ef;color:#89958e;font-size:11px;transition:background-color .25s,color .25s,border-color .25s,transform .12s}
.story-send-control>span{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;transition:opacity .15s}
.story-send-control svg{width:14px;height:14px}
.story-delivered-label{opacity:0}
.story-send-control[data-send-state=ready],.story-send-control[data-send-state=pressing]{background:#176b68;border-color:#176b68;color:#fff}
.story-send-control[data-send-state=pressing]{transform:translateY(1px) scale(.96);background:#104f4d}
.story-send-control[data-send-state=sent]{background:#edf4ef;color:#416e56;border-color:transparent}
.story-send-control[data-send-state=sent] .story-send-label{opacity:0}
.story-send-control[data-send-state=sent] .story-delivered-label{opacity:1}
.story-reply-pages{display:grid}
.story-reply-page{grid-area:1/1;min-width:0;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .4s ease;pointer-events:none}
.story-reply-page.is-current{opacity:1;transform:none}
.story-reply-page.is-past{transform:translateY(-6px)}
.story-reply blockquote{margin:0;padding:6px 24px 23px;min-height:103px;font-family:var(--serif);font-size:28px;line-height:1.2;letter-spacing:-.025em}
.story-learning{padding:15px 24px;display:flex;align-items:center;gap:10px;border-top:1px solid #e9ebe6;font-size:12px;color:#45635c;animation:story-pop .5s 1.1s both}
.story-learning img{width:21px;height:21px;animation:story-turn 14s linear infinite}
.story-controls{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;padding:0 5px;align-items:center;background:#fcfaf2ed;border:1px solid #ffffffaa;border-radius:30px;box-shadow:0 3px 15px #163d3e20}
.story-controls button{border:0;border-radius:20px;background:none;width:37px;height:38px;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;position:relative}
.story-controls button:focus-visible{outline:2px solid #176d6d;outline-offset:-3px}
.story-controls button>span{display:block;width:5px;height:5px;border-radius:8px;background:#939f96;overflow:hidden;position:relative;transition:width .22s,background .22s}
.story-controls button[aria-selected=true]>span{width:22px;background:#c1d4ca;height:5px}
.story-controls button[aria-selected=true]>span:after{content:"";position:absolute;inset:0;background:#176b68;transform:scaleX(var(--story-progress,0));transform-origin:left;border-radius:inherit}
.story-controls button:hover>span{background:#477a71}
.story-learning{animation:none}
.story-paused .story-card *{animation-play-state:paused}
.story-paused .story-business:after{animation-play-state:paused}
.story-still .story-card *, .story-still .story-title,.story-still .story-card{animation:none!important}
.story-still mark{background-size:100% 100%}
.story-still .story-reading{opacity:0}
.story-still .story-business:after{display:none}
@keyframes story-title-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes story-card-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes story-pop{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes story-highlight{to{background-size:100% 100%}}
@keyframes story-turn{to{transform:rotate(360deg)}}
@keyframes story-reading-outline{0%{opacity:0}18%{opacity:.85}36%{opacity:.22}56%{opacity:.85}74%{opacity:.22}86%{opacity:.7}100%{opacity:0}}
@keyframes story-caret{0%,55%{opacity:1}56%,100%{opacity:0}}
@keyframes story-reading-out{from{opacity:1}to{opacity:0}}
@keyframes story-reading-in{from{opacity:0}to{opacity:1}}
@media(max-width:1050px){.story-content{padding:35px 38px 70px;gap:48px}.story-title{font-size:34px}.story-card{width:345px}.story-person-head{padding-inline:20px}.story-news,.story-message{padding-inline:20px}.story-title em{font-size:1.17em}}
@media(max-width:760px){.story{height:545px;border-radius:8px}.story-photo{object-position:55% 56%}.story:before{background:linear-gradient(180deg,#06282a64,transparent 55%)}.story-content{grid-template-columns:1fr;grid-template-rows:84px auto;align-content:start;gap:26px;align-items:center;padding:36px 22px 80px}.story-title{justify-self:center;font-size:32px;line-height:1.08;text-align:center;letter-spacing:-.05em}.story-title em{font-size:1.18em}.story-visual{justify-content:center;align-self:center}.story-card{width:340px}.story-webpage{padding:20px 22px 23px}.story-webpage h3{font-size:21px}.story-web-brand{margin-bottom:16px}.story-webpage p{font-size:12px}.story-reader{padding:11px 16px;font-size:10px;min-height:42px}.story-address{padding:14px 18px}.story-person-head{padding:18px 20px}.story-news{padding:19px 20px 20px}.story-news p{font-size:25px}.story-message{padding:16px 19px;font-size:12px;line-height:1.6}.story-message h3{font-size:11px;margin-bottom:14px}.story-message p{margin-bottom:10px}.story-email .story-address{font-size:10px;padding:10px 16px;gap:7px}.story-send-control{height:30px;font-size:10px;width:88px}.story-controls{bottom:19px}.story-controls button{width:37px;height:42px}.story-reply blockquote{font-size:27px}.story-learning{padding:15px 20px}}
@media(prefers-reduced-motion:reduce){.story *{animation:none!important;transition:none!important}.story mark{background-size:100% 100%}.story-reading{opacity:0}.story-business:after{display:none}.story-controls button[aria-selected=true]>span:after{transform:none}}
.story-still .story-controls button[aria-selected=true]>span:after{transform:none}
@media(prefers-reduced-motion:reduce){
 .story[data-scene="3"]{height:auto;min-height:460px}
 .story[data-scene="3"] .story-content{height:auto;min-height:inherit}
 .story-reply-pages{display:block}
 .story-reply-page{opacity:1;transform:none!important}
 .story-reply-page+.story-reply-page{border-top:1px solid #e9ebe6}
 .story-reply .story-person-head{padding:10px 18px 5px;gap:9px}
 .story-reply .story-avatar{width:28px;height:28px;font-size:10px}
 .story-reply .story-person-head h3{font-size:12px;margin-bottom:0}
 .story-reply .story-person-head p{font-size:10px}
 .story-reply blockquote{font-size:19px;min-height:0;padding:0 18px 12px}
}