.hero-assembly{position:absolute;inset:9% 4% 12%;transition:transform 240ms cubic-bezier(.2,.7,.3,1);perspective:1000px}.has-assembly>img{opacity:0}.hero-piece{position:absolute;animation:piece-enter 800ms cubic-bezier(.16,1,.3,1) both}.hero-piece svg{display:block;width:100%;height:100%;overflow:visible}.hero-piece.back{width:73%;height:56%;left:22%;top:1%}.hero-piece.front{width:84%;height:66%;left:7%;top:25%;animation-delay:90ms}.hero-piece.handset{width:24%;height:54%;left:1%;top:43%;animation-delay:180ms}.hero-float{height:100%;animation:piece-float 7s ease-in-out infinite alternate;animation-play-state:paused}.back .hero-float{animation-delay:-2s}.handset .hero-float{animation-delay:-4s}.living-visible .hero-float{animation-play-state:running}@keyframes piece-enter{from{opacity:0;transform:translate3d(0,40px,0) rotate(-3deg)}to{opacity:1;transform:none}}@keyframes piece-float{to{transform:translate3d(0,-8px,0) rotate(.4deg)}}
.mini-browser{position:relative;width:100%;height:100%;border:1px solid #89b9ed77;border-radius:10px;background:#071422;overflow:hidden;box-shadow:0 10px 35px #0005}.mini-bar{height:15%;min-height:14px;display:flex;align-items:center;gap:4px;padding-inline:10px;border-bottom:1px solid #8dc3ff33;direction:ltr}.mini-bar i{height:3px;width:3px;border-radius:50%;background:#98bfe5}.mini-layout{height:85%;display:flex;padding:8%;gap:7%}.mini-sidebar{width:15%;display:flex;flex-direction:column;gap:12px}.mini-sidebar i{height:4px;background:#476482;border-radius:3px}.mini-body{position:relative;flex:1;overflow:hidden}.mini-banner{height:35%;background:linear-gradient(120deg,#225082,#a5cdf4);border-radius:4px;transition:opacity 240ms,transform 240ms}.mini-cards{display:flex;gap:6%;height:28%;margin-top:7%}.mini-cards i{flex:1;background:#244263;border:1px solid #83b9f355;border-radius:3px;transition:transform 240ms,background 240ms}.mini-lines{display:grid;gap:6px;margin-top:7%}.mini-lines i{height:3px;background:#4a6987}.mini-lines i:last-child{width:65%}.mini-pointer{position:absolute;bottom:8%;left:12%;color:#fff;font-size:22px;opacity:0;animation:interface-tour 5s cubic-bezier(.4,0,.2,1) infinite;animation-play-state:paused}.living-visible .mini-pointer{animation-play-state:running}@keyframes interface-tour{0%,100%{opacity:0;transform:translate(0,0)}15%{opacity:1;transform:translate(0,0)}45%,65%{opacity:1;transform:translate(36px,-23px)}80%{opacity:0;transform:translate(36px,-23px)}}
.idea-preview{width:min(360px,90%);height:190px;margin:28px auto 0;transition:transform 240ms cubic-bezier(.2,.7,.3,1)}.connection-diagram[data-active="0"] .idea-preview .mini-banner,.connection-diagram[data-active="0"] .idea-preview .mini-cards i{background:transparent;border:1px solid #91b9dd88}.connection-diagram[data-active="0"] .mini-pointer,.connection-diagram[data-active="1"] .mini-pointer{animation:none;opacity:0}.connection-diagram[data-active="2"] .idea-preview .mini-cards i:nth-child(2){background:#517fae;transform:translateY(-3px)}
.contact-concept{width:min(420px,100%);height:210px;margin:35px auto 65px;position:relative}.contact-concept figcaption{position:absolute;top:calc(100% + 12px);width:100%;font-size:11px;color:#a7bbd0;text-align:center}.contact-concept[data-mode=website] .mini-sidebar,.work-live[data-mode=website] .mini-sidebar{width:0;overflow:hidden}.contact-concept[data-mode=system] .mini-banner,.work-live[data-mode=system] .mini-banner{height:15%}.contact-concept[data-mode=idea] .mini-banner{background:transparent;border:1px dashed #8dc3ff}.contact-concept[data-mode=idea] .mini-cards i{background:#142b42}
.work-live{position:absolute;width:35%;height:25%;right:3%;top:52%;z-index:3;transform:translateY(calc((1 - var(--complete,0))*12px));opacity:var(--complete,0);pointer-events:none}.work-live>span{display:block;text-align:center;color:#adbed0;font-size:9px;margin-top:8px}.work-live .mini-pointer{animation-play-state:paused}#worlds.living-visible .world-panel[data-live=true] .mini-pointer{animation-play-state:running}
@media(max-width:767px){.hero-assembly{inset:3% 9% 11%}.hero-piece.back{left:26%;width:68%}.hero-piece.front{left:10%;width:80%}.hero-piece.handset{left:5%;width:23%}.idea-preview{height:150px;width:90%;margin-top:24px}.contact-concept{height:170px;width:90%;margin-bottom:60px}.work-live{width:39%;height:25%;right:4%;top:49%}.work-live>span{font-size:8px}.mini-layout{padding:6%;gap:5%}.mini-pointer{font-size:16px}}
.living-paused .hero-piece{animation:none}.living-paused .hero-float,.living-paused .mini-pointer{animation-play-state:paused!important}.reduced .hero-assembly{transform:none!important}.reduced .hero-float{animation:none}.reduced .mini-pointer{animation:none;opacity:0}.reduced .idea-preview,.reduced .mini-cards i,.reduced .mini-banner{transition:none}.reduced .has-assembly>img{opacity:1}.reduced .hero-assembly{visibility:hidden}
@media(prefers-reduced-motion:reduce){.hero-piece,.hero-float,.mini-pointer{animation:none!important}.hero-assembly,.idea-preview,.mini-cards i,.mini-banner{transition:none!important}}

/* Interface state is demonstrated with crisp transforms, never pixel dissolution. */
.work-live .mini-lines{animation:content-scroll 6s cubic-bezier(.4,0,.2,1) infinite;animation-play-state:paused}
#worlds.living-visible .world-panel[data-live=true] .mini-lines{animation-play-state:running}
@keyframes content-scroll{0%,20%,100%{transform:translateY(0)}48%,75%{transform:translateY(-9px)}}
.living-paused .mini-lines{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.mini-lines{animation:none!important}}

.detail-window{height:100%;border:1px solid #9cbce366;border-radius:9px;overflow:hidden;background:#091522;box-shadow:0 8px 25px #0008}.detail-crop{height:85%;overflow:hidden}.detail-crop svg{width:100%;height:120%;display:block;animation:detail-pan 7s cubic-bezier(.4,0,.2,1) infinite alternate;animation-play-state:paused}#worlds.living-visible .world-panel[data-live=true] .detail-crop svg{animation-play-state:running}@keyframes detail-pan{from{transform:translateY(0)}to{transform:translateY(-12%)}}.living-paused .detail-crop svg{animation-play-state:paused!important}@media(prefers-reduced-motion:reduce){.detail-crop svg{animation:none!important}}

/* A single generic DORIS art direction, with perspective inside the motion layers. */
.studio-hero .hero-assembly{inset:13% 8% 15% 7%}
.studio-surface{height:100%;position:relative;border:1px solid #7189a966;border-radius:13px;background:#080e18;box-shadow:12px 22px 45px #0008,inset 0 0 0 3px #ffffff04;overflow:hidden;transform:perspective(1100px) rotateY(-16deg) rotateX(7deg) rotateZ(-5deg);font-family:inherit}
.studio-hero .back{width:75%;height:49%;left:23%;top:0}.studio-hero .front{width:85%;height:64%;left:7%;top:25%}.studio-hero .handset{width:24%;height:53%;left:0;top:49%}.studio-hero .handset .studio-surface{border-radius:22px;transform:perspective(800px) rotateY(-16deg) rotateX(5deg) rotateZ(-5deg);border:2px solid #7189a9}
.studio-chrome{height:27px;padding:0 13px;display:flex;align-items:center;justify-content:space-between;direction:ltr;background:#111b29;border-bottom:1px solid #809bb326;color:#8494aa;font:8px Arial;letter-spacing:2px}
.studio-site{height:calc(100% - 27px);padding:6%;display:flex;flex-direction:column;background:linear-gradient(155deg,#101c30,#080e18 65%)}.studio-nav{display:flex;justify-content:space-between;align-items:center;font-size:8px;color:#a7b8cf}.studio-nav b{font:900 16px Arial;letter-spacing:-1px;color:white}.studio-headline{font-weight:900;font-size:clamp(20px,2.6vw,39px);line-height:1.2;letter-spacing:-.045em;margin:8% 0 5%}.studio-headline em{font-style:normal;color:#8eacd5}.studio-art{position:relative;flex:1;min-height:50px;overflow:hidden;background:radial-gradient(ellipse at 50% 100%,#36587e,#101e31 70%);border-radius:4px}.studio-art i{position:absolute;left:25%;top:12%;width:50%;height:170%;border:1px solid #95b9e98c;border-radius:50%;transform:rotate(-32deg);box-shadow:inset 6px 0 18px #92bfff15}.studio-art i:nth-child(2){left:32%;top:4%}.studio-art i:nth-child(3){left:39%;top:-4%}.studio-art i:nth-child(4){left:46%;top:-12%}.studio-bottom{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#a8bbd4;padding-top:5%}.studio-bottom b{font-size:23px;font-weight:400}
.studio-system{padding:7%;height:calc(100% - 27px);background:linear-gradient(130deg,#0b1220,#1a2a41)}.studio-system-title{font-size:21px;font-weight:900}.studio-flow{display:flex;align-items:center;gap:8px;margin-top:8%;font-size:10px}.studio-flow span{padding:9px 12px;border:1px solid #728fad77;border-radius:5px}.studio-flow i{height:1px;flex:1;background:#739fce}.studio-data{display:grid;gap:13px;margin-top:8%}.studio-data b{height:4px;background:linear-gradient(90deg,transparent,#526a8966);width:85%}.studio-data b:nth-child(2){width:65%}.studio-data b:nth-child(3){width:92%}
.studio-notch{position:absolute;top:8px;left:35%;width:30%;height:5px;border-radius:9px;background:#05070c;z-index:1}.studio-phone{height:100%;padding:26px 12px 15px;display:flex;flex-direction:column;background:linear-gradient(155deg,#1a304e,#080e19 70%)}.studio-phone>b{font:900 12px Arial}.studio-phone>span{font-size:17px;line-height:1.25;font-weight:900;margin-top:20%}.studio-orbit{flex:1;min-height:45px;position:relative;display:grid;place-items:center}.studio-orbit i{width:65%;aspect-ratio:1;border-radius:50%;border:1px solid #acc9eb;background:radial-gradient(circle at 30% 25%,#a6c4e1,#284468 42%,#0b1425 73%);box-shadow:0 0 30px #8bbdff22}.studio-phone-line{height:3px;background:#647f9b;width:100%;margin:5px 0}.studio-phone-line.short{width:65%}.studio-phone-button{font-size:8px;padding:8px;border:1px solid #859dbb66;margin-top:12px;border-radius:4px}
.reduced .studio-hero .hero-assembly{visibility:visible}.reduced .studio-hero>img{opacity:0}
@media(max-width:767px){.studio-hero .hero-assembly{inset:8% 11% 12% 8%}.studio-chrome{height:17px;font-size:5px;padding-inline:6px}.studio-site{height:calc(100% - 17px);padding:5%}.studio-system{height:calc(100% - 17px)}.studio-nav{font-size:5px}.studio-nav b{font-size:10px}.studio-headline{font-size:clamp(14px,4.1vw,25px);margin:6% 0}.studio-bottom{font-size:6px}.studio-bottom b{font-size:15px}.studio-system-title{font-size:13px}.studio-flow{font-size:6px;gap:4px}.studio-flow span{padding:4px}.studio-data{gap:7px}.studio-data b{height:2px}.studio-phone{padding:17px 7px 9px}.studio-phone>b{font-size:8px}.studio-phone>span{font-size:11px}.studio-phone-button{font-size:5px;padding:5px;margin-top:6px}.studio-phone-line{height:2px;margin:3px 0}.studio-art{min-height:25px}.studio-orbit{min-height:25px}.studio-hero .handset .studio-surface{border-radius:12px}.studio-notch{height:3px;top:5px}}

@media(max-width:767px){.studio-hero .handset{top:45%;height:49%}}
/* Reference composition: graphite frames, clockwise lean, rear system + front site + left phone. */
.studio-hero .hero-assembly{inset:8% 5% 13% 5%}
.studio-hero .back{width:74%;height:65%;left:26%;top:0;z-index:1}
.studio-hero .front{width:80%;height:70%;left:15%;top:28%;z-index:2}
.studio-hero .handset{width:25%;height:53%;left:1%;top:49%;z-index:3}
.studio-hero .studio-surface{transform:perspective(1200px) rotateY(-11deg) rotateX(3deg) rotateZ(7deg);border:1px solid #8c9199;border-top-color:#d6d9df;border-left-color:#b8bec7;background:#111315;border-radius:15px;box-shadow:-4px 0 0 #444951,-7px 2px 0 #151c25,12px 24px 32px #0009,inset 0 0 0 3px #ffffff07}
.studio-hero .back .studio-surface{transform:perspective(1200px) rotateY(-14deg) rotateX(2deg) rotateZ(7deg);border-color:#747b86;filter:brightness(.82)}
.studio-hero .handset .studio-surface{transform:perspective(1000px) rotateY(-10deg) rotateX(2deg) rotateZ(5deg);border:1px solid #b1b8c2;border-top:2px solid #d8dce1;border-radius:20px}
.studio-hero .studio-chrome{background:linear-gradient(#323436,#232527);border-bottom:1px solid #818a9630;color:#a3a8ad;height:25px;letter-spacing:3px}
.studio-hero .studio-site{background:linear-gradient(150deg,#1b1c1e,#090b0f 65%);height:calc(100% - 25px);padding:7% 6% 5%}
.studio-hero .studio-nav b{letter-spacing:3px;font-size:19px}.studio-hero .studio-nav>span{color:#b1b5be}
.studio-hero .studio-headline{font-weight:500;font-size:clamp(22px,2.8vw,40px);margin:9% 0 6%;line-height:1.2;letter-spacing:-.035em}.studio-hero .studio-headline em{color:#c5ccd7}
.studio-hero .studio-art{flex:1;min-height:36%;background:radial-gradient(ellipse at 50% 110%,#174de1 0%,#173d7c 30%,#081323 70%);border-radius:1px}
.studio-hero .studio-art i{height:230%;width:65%;left:4%;top:-50%;border-color:#a7c4fa77;box-shadow:inset 10px 0 20px #679dff18;transform:rotate(-32deg)}.studio-hero .studio-art i:nth-child(2){left:19%;top:-45%}.studio-hero .studio-art i:nth-child(3){left:34%;top:-40%}.studio-hero .studio-art i:nth-child(4){left:49%;top:-35%}
.studio-hero .studio-system{background:linear-gradient(145deg,#242526,#0b0e13);height:calc(100% - 25px)}.studio-hero .studio-system-title{font-size:24px;font-weight:500}.studio-hero .studio-flow{margin-top:9%}.studio-hero .studio-flow span{border-color:#89939f55}.studio-hero .studio-flow span:last-child{background:#19388d;border-color:#466de2;box-shadow:0 0 20px #2154d933}.studio-hero .studio-data{gap:20px}.studio-hero .studio-data b{height:5px;background:linear-gradient(90deg,#2c54b5 0 4%,transparent 4% 10%,#646b7444 10% 100%)}
.studio-hero .studio-phone{background:radial-gradient(ellipse at 50% 30%,#112441,#070d18 65%)}.studio-hero .studio-phone>span{font-weight:400}.studio-hero .studio-orbit i{width:83%;background:repeating-radial-gradient(ellipse at 35% 35%,transparent 0 8px,#8fabd34a 9px 10px,transparent 11px 17px),radial-gradient(circle at 35% 30%,#356ac333,#071323 72%);border-color:#6b86b477;box-shadow:0 0 25px #275af32b}.studio-hero .studio-phone-button{background:#152341;border-color:#476a9b88}
@media(max-width:767px){.studio-hero .hero-assembly{inset:6% 10% 15% 9%}.studio-hero .studio-surface{border-radius:9px;box-shadow:-2px 0 0 #444951,-4px 1px 0 #151c25,8px 14px 22px #0008}.studio-hero .studio-chrome{height:15px;font-size:5px}.studio-hero .studio-site,.studio-hero .studio-system{height:calc(100% - 15px)}.studio-hero .studio-headline{font-size:clamp(14px,4vw,23px);margin:8% 0 5%}.studio-hero .studio-nav b{font-size:10px;letter-spacing:2px}.studio-hero .studio-system-title{font-size:13px}.studio-hero .studio-data{gap:9px}.studio-hero .studio-data b{height:3px}.studio-hero .handset .studio-surface{border-radius:12px}.studio-hero .studio-orbit i{background:repeating-radial-gradient(ellipse at 35% 35%,transparent 0 4px,#8fabd34a 5px 6px,transparent 7px 10px),#0b1c33}.studio-hero .handset{height:50%;top:48%}}