.tool-workspace{background:#fff;overflow:clip}.tool-workspace .tool-copy{margin-bottom:35px}.tool-workspace-stage{display:grid;grid-template-columns:280px minmax(0,1fr);gap:38px;align-items:center}
.tool-workspace .tool-line{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;background:none;border:0;position:relative}.tool-workspace .tool-line>i{display:none}.tool-workspace .tool-line button{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:15px;align-items:center;text-align:left;min-height:83px;width:100%;padding:14px 20px;border:1px solid transparent;border-radius:14px;background:transparent;box-shadow:none;transform:none;position:relative;transition:background .3s,border-color .3s,transform .3s}.tool-workspace .tool-line button>b{display:none}.tool-workspace .tool-line button .tool-icon{grid-row:1/3;margin:0;width:44px;height:44px;background:#fff;border:1px solid #e1e8f2;border-radius:12px;display:grid;place-items:center}.tool-workspace .tool-line button img{width:27px;height:27px;object-fit:contain}.tool-workspace .tool-line button strong{font-size:18px;line-height:1.4;margin:0;color:#002f6d}.tool-workspace .tool-line button>span:last-child{font-size:11px;line-height:1.5;margin:0;color:#526987}.tool-workspace .tool-line button.active{background:#f1f5fd;border-color:#cbd8f0;transform:translateX(5px)}.tool-workspace .tool-line button.active:after{content:'↗';position:absolute;right:13px;top:17px;color:#f26b27;font-size:15px}
.tool-build-view{border:1px solid #d8e2f3;border-radius:22px;overflow:hidden;background:#f5f7fc;box-shadow:0 25px 55px #002f6d0c;min-width:0}.tool-view-top{height:42px;display:flex;justify-content:space-between;align-items:center;padding:0 22px;border-bottom:1px solid #dce5f2;background:#fff}.tool-view-top>span{display:flex;gap:5px}.tool-view-top i{width:5px;height:5px;border-radius:50%;background:#f26b27}.tool-view-top small{font-size:10px;color:#647a99}.tool-view-canvas{height:340px;position:relative;perspective:1200px;background:radial-gradient(ellipse at 75% 45%,#e4ebff,transparent 65%),linear-gradient(#fff0,#ebf0fa);overflow:hidden}.tool-view-canvas:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#29408e06 1px,transparent 1px),linear-gradient(90deg,#29408e06 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(transparent,#000)}
.tool-browser{position:absolute;top:35px;left:9%;width:70%;background:white;border:1px solid #d5dfef;border-radius:12px;box-shadow:15px 20px 0 #29408e08,0 25px 35px #002f6d12;transform:rotateY(-8deg) rotateX(4deg);transition:transform .7s,box-shadow .7s}.mini-nav{padding:14px 18px;display:flex;justify-content:space-between;border-bottom:1px solid #e5ebf6;align-items:center}.mini-nav b{font-size:14px;color:#002f6d}.mini-nav span{font-size:7px;color:#647a99}.mini-site{padding:23px 22px 18px}.mini-site>small{font-size:7px;letter-spacing:1px;color:#f26b27}.mini-site h3{font-size:25px;line-height:1.12;color:#002f6d;margin:10px 0}.mini-site>i{display:block;background:#e1e8f4;height:4px;width:62%;border-radius:4px;margin:12px 0}.mini-site>button{pointer-events:none;padding:7px 10px;border:0;border-radius:5px;color:white;background:#29408e;font-size:8px}.mini-cards{display:flex;gap:9px;margin-top:20px}.mini-cards i{height:34px;flex:1;background:#f0f4fc;border-radius:5px}.mini-cards i:first-child{background:#f26b2720}
.tool-floating{position:absolute;right:5%;top:105px;width:230px;min-height:145px;background:#fff;border:1px solid #d2dff3;border-radius:12px;padding:18px;box-shadow:0 18px 36px #002f6d1a;opacity:0;visibility:hidden;transform:translateY(18px) rotateY(-8deg);transition:opacity .45s,transform .65s,visibility .45s}.tool-floating>span{display:block;font-size:8px;letter-spacing:1px;color:#f26b27;margin-bottom:17px}.tool-floating code{font-size:12px;line-height:1.9;color:#29408e}.tool-floating em{font-style:normal;color:#002f6d}.tool-design>div{display:flex;gap:6px;margin-bottom:16px}.tool-design i{height:35px;flex:1;border:1px solid #cedcf2;border-radius:5px;background:#edf2fc}.tool-design i:nth-child(2){background:#f26b2720}.tool-design>b,.tool-version>b{font-size:12px;color:#29408e;display:block;margin-top:10px;font-weight:500}.tool-data>div{display:grid;grid-template-columns:1fr 1fr;font-size:10px;gap:8px;color:#526987}.tool-data i{font-style:normal;border-top:1px solid #e1e8f4;padding-top:7px}.tool-live>b{color:#002f6d;font-size:17px}.tool-live p{font-size:11px;color:#526987}.tool-signal{position:absolute;bottom:18px;left:9%;display:flex;align-items:center;gap:8px;font-size:10px;color:#526987}.tool-signal i{height:6px;width:6px;border-radius:50%;background:#f26b27;box-shadow:0 0 0 4px #f26b2714}
.tool-workspace-stage[data-tool="0"] .tool-code,.tool-workspace-stage[data-tool="1"] .tool-design,.tool-workspace-stage[data-tool="2"] .tool-data,.tool-workspace-stage[data-tool="3"] .tool-version,.tool-workspace-stage[data-tool="4"] .tool-live{opacity:1;visibility:visible;transform:translateY(0) rotateY(0)}.tool-workspace-stage[data-tool="1"] .tool-browser{transform:rotateY(0) rotateX(0)}.tool-workspace-stage[data-tool="2"] .tool-browser{transform:rotateY(-5deg) translateX(-8px)}.tool-workspace-stage[data-tool="4"] .tool-browser{transform:rotateY(0) translateY(-5px);box-shadow:0 20px 35px #29408e18}.tool-workspace .tool-note{display:block;margin:0;padding:20px 26px;border:0;border-top:1px solid #d8e2f3;border-radius:0;background:#fff;min-height:100px}.tool-workspace .tool-note>span{font-size:9px;display:block;margin-bottom:8px;color:#f26b27}.tool-workspace .tool-note p{font-size:13px;line-height:1.6;margin:0;color:#526987}.tool-workspace .tool-disclaimer{margin-top:23px}
.workspace-arrived .tool-browser{animation:tool-workspace-enter .8s cubic-bezier(.22,1,.36,1) both}@keyframes tool-workspace-enter{from{opacity:.4;translate:0 22px}to{opacity:1;translate:0 0}}
@media(max-width:900px){.tool-workspace-stage{grid-template-columns:210px minmax(0,1fr);gap:22px}.tool-workspace .tool-line button{padding:12px 10px;column-gap:10px}.tool-floating{width:190px;right:4%}.mini-site h3{font-size:22px}}
@media(max-width:650px){.tool-workspace-stage{display:flex;flex-direction:column;gap:20px;align-items:stretch}.tool-workspace .tool-line{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.tool-workspace .tool-line button{display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;padding:12px 5px;min-height:110px;border-color:#e1e8f2}.tool-workspace .tool-line button strong{font-size:13px}.tool-workspace .tool-line button>span:last-child{font-size:9px}.tool-workspace .tool-line button.active{transform:translateY(-2px)}.tool-workspace .tool-line button.active:after{display:none}.tool-view-top{padding:0 12px}.tool-view-top small{font-size:8px}.tool-view-canvas{height:310px}.tool-browser{left:6%;width:83%;top:25px}.mini-site h3{font-size:22px}.mini-nav span{font-size:6px}.tool-floating{top:145px;right:6%;width:190px;min-height:125px;padding:14px}.tool-floating>span{margin-bottom:10px}.tool-floating code{font-size:10px}.tool-signal{bottom:12px;left:6%;font-size:8px}.tool-workspace .tool-note{padding:18px}.tool-workspace .tool-copy{margin-bottom:26px}}
@media(prefers-reduced-motion:reduce){.tool-workspace-stage *{animation:none!important;transition:none!important}.tool-browser,.tool-floating{transform:none!important}}
.tool-workspace .tool-line{display:flex!important;padding:0!important;grid-template-columns:none}.tool-workspace .tool-line button{height:auto}.tool-workspace .tool-line button:last-of-type{max-width:none;grid-column:auto}.tool-workspace .tool-line button:not(.active):after{display:none}.tool-workspace .tool-line button .tool-icon{padding:7px}
@media(max-width:650px){.tool-workspace .tool-line{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))}.tool-workspace .tool-line button:last-of-type{max-width:none;width:100%}.tool-workspace .tool-line button:after{display:none!important}}