.work-story{--story-purple:var(--purple);--story-ink:var(--ink);--story-accent:var(--teal);--story-lilac:var(--surface);--story-turn:-6deg;--story-yaw:-14deg;min-width:0;color:var(--story-ink);padding:10px 12px 0;position:relative}.story-heading{padding-inline:12px}.story-heading>.small-label{color:var(--story-purple);letter-spacing:1.3px;font-size:11px}.story-heading h2{letter-spacing:-.7px;margin-top:8px;font-size:clamp(22px,2vw,28px)}.story-canvas{perspective:1000px;isolation:isolate;height:330px;position:relative}.story-halo{z-index:-2;background:radial-gradient(#e9e2fcaa,#0000 68%);position:absolute;inset:3% -8%}.story-ground{filter:blur(17px);background:#39206b27;border-radius:50%;width:65%;height:30px;transition:width .9s,opacity .9s;position:absolute;bottom:37px;left:18%;transform:rotate(-7deg)}.story-object{width:76%;height:210px;transform-style:preserve-3d;transform:rotateX(9deg) rotateY(var(--story-yaw)) rotateZ(var(--story-turn));transition:transform 1s cubic-bezier(.2,.7,.3,1);position:absolute;top:55px;left:11%}.story-face{background:linear-gradient(145deg,#fff 5%,#f1eafd 75%,#e5d9f7);border:1px solid #fff;border-radius:23px;position:absolute;inset:0;overflow:hidden;box-shadow:0 6px #c8b7e1,0 10px #b8a3d3,0 22px 30px -15px #37215760,inset 0 0 0 1px #e8dcf5}.story-backplate{background:linear-gradient(140deg,#f3edfae0,#d8c7ed8a);border:1px solid #ece2fa;border-radius:22px;transition:transform 1.1s;position:absolute;inset:-12px 6px 12px -6px}.story-backplate-near{transform:translate3d(-12px,-9px,-13px)}.story-backplate-far{opacity:.65;transform:translate3d(-22px,-18px,-26px)}.story-idea{flex-direction:column;justify-content:center;gap:12px;padding:30px;transition:opacity .6s,transform .9s;display:flex;position:absolute;inset:0}.story-bulb{color:var(--story-purple);display:inline-flex}.story-idea strong{letter-spacing:-.5px;font-size:clamp(18px,1.7vw,24px);line-height:1.25}.story-idea-note{color:#7b688f;align-items:center;gap:6px;font-size:10px;display:inline-flex}.story-analysis{opacity:0;flex-direction:column;gap:13px;width:30%;transition:opacity .7s,transform 1s;display:flex;position:absolute;top:42px;right:22px;transform:translate(30px)}.story-analysis span{background:#ffffffb0;border:1px solid #c7b5e5;border-radius:6px;height:24px;box-shadow:0 3px #d0bfe7}.story-analysis span:nth-child(2){background:#d8f4ef;border-color:#a4dfd5;width:75%}.story-analysis span:nth-child(3){width:88%}.story-proposal{opacity:0;flex-direction:column;gap:12px;transition:opacity .65s,transform 1s;display:flex;position:absolute;inset:24px;transform:translateY(30px)}.story-proposal>span{color:var(--story-purple);background:linear-gradient(120deg,#fff,#eee5fa);border:1px solid #fff;border-radius:9px;align-items:center;gap:12px;padding:10px 14px;display:flex;box-shadow:0 4px #d3c1e9,0 8px 10px -8px #34205750}.story-proposal strong{color:var(--story-ink);font-size:13px;font-weight:600}.story-proposal i{background:#d4c6e6;border-radius:5px;width:25px;height:4px;margin-left:auto}.story-agreement{color:#20776b;opacity:0;background:linear-gradient(135deg,#effffc,#d4eee8);border:1px solid #fff;border-radius:12px;align-items:center;gap:10px;padding:14px;font-size:12px;font-weight:600;transition:opacity .7s,transform 1s;display:flex;position:absolute;bottom:-28px;left:13%;right:2%;transform:translateY(20px)translateZ(30px);box-shadow:0 5px #a7d5cb,0 16px 20px -15px #216f6260}.story-agreement svg{color:#fff;background:#00a593;border-radius:50%;width:25px;height:25px;padding:2px}.story-application{opacity:0;transition:transform 1s,opacity .7s;position:absolute;inset:0;transform:translateY(40px)}.story-app-bar{background:linear-gradient(100deg, #7560b6, var(--story-purple));align-items:center;gap:6px;height:35px;padding:0 15px;display:flex}.story-app-bar>i{background:#ded5f7;border-radius:50%;width:6px;height:6px}.story-app-bar>span{background:#ffffff45;border-radius:4px;width:38%;height:5px;margin-left:auto}.story-app-layout{grid-template-columns:22% 1fr;gap:16px;height:calc(100% - 35px);padding:16px;display:grid}.story-app-sidebar{background:linear-gradient(160deg,#9d8ace,#7760af);border-radius:9px;flex-direction:column;gap:12px;padding:12px;display:flex}.story-app-sidebar>span{background:#ddd3f2aa;border-radius:4px;width:100%;height:14px}.story-app-modules{grid-template-columns:1fr 1fr;gap:12px;display:grid}.story-app-modules>span{background:linear-gradient(140deg,#fff,#d7c7f0);border:1px solid #efe5fc;border-radius:8px;transition:transform .9s,background .9s;transform:translateY(12px);box-shadow:0 4px #c9b5e1}.story-app-modules>span:first-child{grid-column:1/-1}.story-app-modules>span:last-child{display:none}.story-app-modules>span:nth-child(3){background:linear-gradient(135deg,#9be4da,#42c6b7);box-shadow:0 4px #58b7ad}.story-piece{z-index:2;background:linear-gradient(135deg,#b69ae2,#6c4bc7);border:1px solid #ffffff90;border-radius:8px;width:36px;height:29px;transition:transform 1.3s cubic-bezier(.2,.7,.3,1),opacity .9s;position:absolute;box-shadow:0 5px #aa8bd2,0 12px 18px -8px #4c2c7d55}.story-piece-one{top:25px;left:22%;transform:rotate(-17deg)}.story-piece-two{background:linear-gradient(135deg,#abf1e6,#43c8b8);top:35px;right:10%;transform:rotate(12deg);box-shadow:0 5px #57bdad}.story-piece-three{width:28px;height:22px;bottom:33px;left:5%;transform:rotate(15deg)}.story-partner{color:var(--story-ink);opacity:0;z-index:3;background:linear-gradient(145deg,#fff,#e9dcf8);border:1px solid #fff;border-radius:10px;align-items:center;gap:9px;padding:12px 18px;font-size:13px;font-weight:600;transition:opacity .9s,transform 1.1s;display:flex;position:absolute;box-shadow:0 5px #c7b1df,0 14px 17px -12px #43276765}.story-partner>span{background:var(--story-accent);border-radius:50%;width:7px;height:7px}.story-client{top:10px;left:5%;transform:translateY(-20px)rotate(-5deg)}.story-qbyte{bottom:8px;right:0;transform:translateY(20px)rotate(-5deg)}.story-link{opacity:0;z-index:-1;background:linear-gradient(#7cd9cb,#d9f3ed);border-radius:10px;width:3px;height:36px;transition:opacity 1.1s;position:absolute}.story-link-top{top:46px;left:29%;transform:rotate(-22deg)}.story-link-bottom{bottom:35px;right:19%;transform:rotate(-22deg)}.work-story[data-stage="1"]{--story-turn:-2deg;--story-yaw:-8deg}.work-story[data-stage="1"] .story-analysis{opacity:1;transform:none}.work-story[data-stage="1"] .story-idea{transform-origin:0;transform:translate(-9px)scale(.9)}.work-story[data-stage="1"] .story-idea strong{max-width:60%;font-size:18px}.work-story[data-stage="1"] .story-piece-one{opacity:0;transform:translate(60px,95px)rotate(0)}.work-story[data-stage="1"] .story-piece-two{opacity:0;transform:translate(-40px,100px)rotate(0)}.work-story[data-stage="1"] .story-piece-three{opacity:0;transform:translate(90px,-65px)rotate(0)}.work-story[data-stage="2"]{--story-turn:-4deg;--story-yaw:-11deg}.work-story[data-stage="2"] .story-proposal{opacity:1;transform:none}.work-story[data-stage="2"] .story-agreement{opacity:1;transform:translateY(0)translateZ(30px)}.work-story:is([data-stage="2"],[data-stage="3"],[data-stage="4"]) .story-idea{opacity:0;transform:translateY(-30px)}.work-story:is([data-stage="2"],[data-stage="3"],[data-stage="4"]) .story-piece{opacity:0;transform:translate(30px,30px)scale(.4)}.work-story[data-stage="3"]{--story-turn:-1deg;--story-yaw:-5deg}.work-story:is([data-stage="3"],[data-stage="4"]) .story-application{opacity:1;transform:none}.work-story:is([data-stage="3"],[data-stage="4"]) .story-app-modules>span{transform:none}.work-story[data-stage="3"] .story-app-modules>span:nth-child(2){transition-delay:.15s}.work-story[data-stage="3"] .story-app-modules>span:nth-child(3){transition-delay:.3s}.work-story[data-stage="4"]{--story-turn:-5deg;--story-yaw:-12deg}.work-story[data-stage="4"] .story-partner{opacity:1}.work-story[data-stage="4"] .story-client,.work-story[data-stage="4"] .story-qbyte{transform:translateY(0)rotate(-5deg)}.work-story[data-stage="4"] .story-link{opacity:1}.story-description{margin:12px 12px 0;display:grid}.story-description>div{visibility:hidden;opacity:0;grid-area:1/1}.story-description>div.is-active{visibility:visible;opacity:1;animation:.35s both storyCaptionEnter}.story-description h3{letter-spacing:-.4px;font-size:20px}.story-description p{margin-top:10px;font-size:14px;line-height:1.7}.story-controls{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;margin:22px 12px 0;padding-top:15px;display:flex}.story-navigation{align-items:center;gap:10px;display:flex}.story-navigation button,.story-playback{border:1px solid var(--line);min-width:36px;min-height:36px;color:var(--story-purple);background:#fff;border-radius:8px;justify-content:center;align-items:center;padding:9px;display:inline-flex}.story-navigation>span{font-size:11px;font-weight:600}.story-navigation>span>span{color:var(--muted);font-weight:400}.story-playback{gap:7px;padding-inline:12px;font-size:11px}.story-controls button:hover:not(:disabled){background:var(--story-lilac)}.story-contact{color:var(--story-purple);align-items:center;gap:8px;margin:17px 12px 0;font-size:11px;display:inline-flex}.story-contact:hover{text-underline-offset:4px;text-decoration:underline}@keyframes storyCaptionEnter{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@media (width<=1100px) and (width>=961px){.work-story{padding-inline:0}.story-object{width:82%;left:7%}.story-idea{padding:24px}.story-proposal{inset:22px 18px}}@media (width<=960px){.work-story{max-width:560px;margin-inline:auto;padding-top:20px}.story-object{max-width:360px;left:12%}}@media (width<=540px){.work-story{padding-inline:0}.story-heading{padding-inline:8px}.story-heading h2{font-size:23px}.story-canvas{height:300px}.story-object{width:80%;height:185px;top:55px;left:9%}.story-idea{gap:10px;padding:22px}.story-idea strong{font-size:20px}.story-bulb svg{width:32px;height:32px}.story-proposal{gap:10px;inset:19px 16px}.story-proposal>span{gap:10px;padding:8px 10px}.story-proposal strong{font-size:12px}.story-agreement{padding:11px;font-size:10px;left:6%}.story-partner{padding:10px 14px;font-size:11px}.story-qbyte{bottom:13px;right:3%}.story-description{margin-inline:8px}.story-description h3{font-size:20px}.story-controls,.story-contact{margin-inline:8px}.work-story[data-stage="1"] .story-idea strong{font-size:16px}}@media (prefers-reduced-motion:reduce){.work-story *,.work-story :before,.work-story :after{transition:none!important;animation:none!important}}