/* Tools · "one canvas" section. Wiz.io product-tabs structure in the Genie site language. */
.ts{padding:24px 0 0}
.ts .wrap{max-width:1280px;margin:0 auto;padding:0 56px}

/* tabs row (Wiz: Code · Cloud · Defend) */
.ts .wrap{display:flex;flex-direction:column}
.ts-tabs{order:1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:24px;margin:40px 0 0}
.ts .ts-agent{order:2}
.ts-tab{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:12px 0 0;color:rgba(60,8,77,.32);transition:color .3s;text-align:left}
.ts-tab::before{content:"";position:absolute;left:0;top:0;height:1px;width:70%;background:#3C084D;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ts-tab .t{font:300 24px/1.1 'Plus Jakarta Sans',sans-serif;letter-spacing:-.01em}
.ts-tab .s{font:400 15px/1.4 'Plus Jakarta Sans',sans-serif}
.ts-tab:hover{color:rgba(60,8,77,.6)}
.ts-tab.on{color:#3C084D}
.ts-tab.on::before{transform:scaleX(1)}
.ts-tab:focus-visible{outline:2px solid #845AA7;outline-offset:4px;border-radius:4px}
.ts-tab .gico,.ts-tab svg{display:none}

/* the icons: 2 grained shapes in a 1×1 box */
.gico{position:relative;display:inline-block;width:48px;height:48px;flex:none}
.gico img{position:absolute;display:block;transform-origin:50% 50%}
.gico svg{position:absolute;display:block;transform-origin:50% 50%;overflow:visible}
.g-gen .p1{left:0;top:0;width:100%;height:100%}
.g-gen .p2{left:50%;top:48%;width:46%}
.g-edit .p1{left:0;top:0;width:100%;height:100%}
.g-edit .p2{left:56%;top:6%;width:40%}
.g-adapt .p1{left:0;top:0;width:100%;height:100%}
.g-adapt .p2{left:36%;top:46%;width:60%;transform-origin:0 50%}
.g-anim .p1{left:6%;top:6%;width:88%}
.g-anim .p2{left:38%;top:30%;width:34%;transform:rotate(90deg)}
/* idle motion in the panel, like the Wiz slash that keeps rocking */
.ts-copy .g-gen .p1{animation:gTwinkle 3.2s ease-in-out infinite}
.ts-copy .g-gen .p2{animation:gBob 3.2s ease-in-out infinite}
.ts-copy .g-edit .p1{animation:gRock 3s ease-in-out infinite}
.ts-copy .g-edit .p2{animation:gPop 3s ease-in-out infinite}
.ts-copy .g-adapt .p2{animation:gWiden 3.4s ease-in-out infinite}
.ts-copy .g-adapt .p1{animation:gRock 3.4s ease-in-out infinite}
.ts-copy .g-anim .p1{animation:gSpin 9s linear infinite}
.ts-copy .g-anim .p2{animation:gPulse 3s ease-in-out infinite}
/* one play when a tab is picked */
.ts-tab.run .g-gen .p1{animation:gTwinkle 1.1s ease-in-out 1}
.ts-tab.run .g-gen .p2{animation:gBob 1.1s ease-in-out 1}
.ts-tab.run .g-edit .p1{animation:gRock 1.1s ease-in-out 1}
.ts-tab.run .g-edit .p2{animation:gPop 1.1s ease-in-out 1}
.ts-tab.run .g-adapt .p2{animation:gWiden 1.1s ease-in-out 1}
.ts-tab.run .g-anim .p2{animation:gPulse 1.1s ease-in-out 1}
.ts-tab.run .g-anim .p1{animation:gSpin 1.1s ease-in-out 1}
@keyframes gTwinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.14) rotate(18deg)}}
@keyframes gBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12%)}}
@keyframes gRock{0%,100%{transform:rotate(0)}50%{transform:rotate(-9deg) translate(-2%,2%)}}
@keyframes gPop{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
@keyframes gWiden{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.72)}}
@keyframes gSpin{to{transform:rotate(360deg)}}
@keyframes gPulse{0%,100%{transform:rotate(90deg) scale(1)}50%{transform:rotate(90deg) scale(1.18)}}

/* the panel */
.ts-box{position:relative;display:grid;border:1px solid rgba(60,8,77,.28);border-radius:22px;background:#FFFDFA;overflow:hidden}
.ts-panel{position:relative;grid-area:1/1;display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:auto auto;column-gap:48px;row-gap:22px;padding:40px 44px 36px 48px;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}
.ts-panel.on{position:relative;opacity:1;visibility:visible;transition:opacity .5s ease}

.ts-copy{grid-row:1/3;display:flex;flex-direction:column;align-self:stretch}
.ts-copy .fam{display:none}
.ts-copy .name{margin-top:0;font-weight:500;font-size:30px;letter-spacing:-.02em;line-height:1}
.ts-copy .line{margin-top:12px;font-size:16px;color:var(--plum);font-weight:600;line-height:1.3}
.ts-copy p{margin:18px 0 0;font-size:15.5px;line-height:1.55;color:var(--muted);text-wrap:pretty;max-width:30ch}
.ts-copy .link{margin-top:24px}
.ts-dots{margin-top:auto;padding-top:40px;display:flex;gap:10px}
.ts-dots button{all:unset;cursor:pointer;width:7px;height:7px;border-radius:50%;background:rgba(60,8,77,.2);transition:background .25s,transform .25s}
.ts-dots button.on{background:var(--plum);transform:scale(1.25)}

/* the system window */
.ts-win{grid-column:2;border:1px solid rgba(60,8,77,.3);border-radius:14px;background:#FEFBF7;overflow:hidden;font-family:'Albert Sans',var(--sans);color:var(--ink)}
.ts-winbar{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;border-bottom:1px solid rgba(60,8,77,.18);font-size:12.5px}
.ts-winbar .logo{display:flex;color:var(--ink)}
.ts-winbar .crumb{color:rgba(60,8,77,.6)}
.ts-winbar .crumb b{font-weight:500;color:var(--ink)}
.ts-winbar .seg{margin-left:auto;display:flex;gap:4px;font-size:11.5px}
.ts-winbar .seg span{padding:5px 9px;border-radius:999px;color:rgba(60,8,77,.6)}
.ts-winbar .seg span.on{background:#F3EBFB;color:var(--ink)}
.ts-winbar .share{font-size:11.5px;border:1px solid rgba(60,8,77,.35);border-radius:999px;padding:5px 12px}
.ts-winbar .av{width:22px;height:22px;border-radius:50%;background:var(--lilac);display:grid;place-items:center;font-size:10px;font-weight:600}

.ts-stage{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr)}
.ts-rail{border-right:1px solid rgba(60,8,77,.12);display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0}
.ts-rail i{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--ink)}
.ts-rail i.on{background:#F3EBFB;box-shadow:inset 0 0 0 1px rgba(60,8,77,.2)}
.ts-rail svg{width:16px;height:16px}

.ts-canvas{position:relative;container-type:inline-size;aspect-ratio:100/50;overflow:hidden;
  background-color:#FEFBF7;background-image:radial-gradient(rgba(60,8,77,.16) .9px,transparent 1px);background-size:22px 22px;background-position:11px 11px}
.ts-canvas .sc{position:absolute;opacity:0;transform:translateY(1cqw);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.ts-canvas .sc.in{opacity:1;transform:none}
.ts-canvas .sc.gone{opacity:0;transition:opacity .3s}
.ts-canvas .sc.pop{transform:scale(.94)}
.ts-canvas .sc.pop.in{transform:none}
.ts-canvas .sc.out{transform:translateY(0) scale(.92)}
.ts-canvas .sc.out.in{transform:none}

/* product pieces, all sized in cqw so they scale with the window */
.ts-canvas .tile{background:#fff;border:1px solid rgba(60,8,77,.14);border-radius:1.3cqw;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 1.2cqw 3cqw rgba(60,8,77,.07)}
.ts-canvas .tile img{width:100%;height:100%;object-fit:contain;display:block}
.ts-canvas .tile.cover img{object-fit:cover}
.ts-canvas .tile.pad img{width:82%;height:82%}
.ts-canvas .tile.cream{background:#FEF9F3}
.ts-canvas .tile.tint{background:#F3EBFB}
.ts-canvas .tile.checker{background:conic-gradient(#EEE6F5 25%,#fff 0 50%,#EEE6F5 0 75%,#fff 0) 0 0/2.2cqw 2.2cqw}
.ts-canvas .cap{position:absolute;left:0;right:0;top:100%;margin-top:.7cqw;font-size:1.25cqw;color:rgba(60,8,77,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}
.ts-canvas .cap b{font-weight:500;color:rgba(60,8,77,.8)}
.ts-canvas .sel{position:absolute;inset:-.6cqw;border:1.5px solid var(--plum);border-radius:.4cqw;pointer-events:none}
.ts-canvas .sel i{position:absolute;width:1.1cqw;height:1.1cqw;background:#fff;border:1.5px solid var(--plum);border-radius:.2cqw}
.ts-canvas .sel i:nth-child(1){left:-.6cqw;top:-.6cqw}.ts-canvas .sel i:nth-child(2){right:-.6cqw;top:-.6cqw}
.ts-canvas .sel i:nth-child(3){left:-.6cqw;bottom:-.6cqw}.ts-canvas .sel i:nth-child(4){right:-.6cqw;bottom:-.6cqw}
.ts-canvas .sel i:nth-child(5){left:50%;top:-.6cqw;margin-left:-.55cqw}.ts-canvas .sel i:nth-child(6){left:50%;bottom:-.6cqw;margin-left:-.55cqw}
.ts-canvas .sel i:nth-child(7){top:50%;left:-.6cqw;margin-top:-.55cqw}.ts-canvas .sel i:nth-child(8){top:50%;right:-.6cqw;margin-top:-.55cqw}

.ts-canvas .bar{display:flex;gap:.6cqw;padding:.8cqw;background:#fff;border:1px solid rgba(60,8,77,.14);border-radius:1.2cqw;box-shadow:0 1.4cqw 3.4cqw rgba(60,8,77,.12)}
.ts-canvas .bar i{width:4.2cqw;height:4.2cqw;border-radius:.9cqw;display:grid;place-items:center;color:var(--ink)}
.ts-canvas .bar i.on{background:#F3EBFB;box-shadow:inset 0 0 0 1px rgba(60,8,77,.22)}
.ts-canvas .bar svg{width:2.2cqw;height:2.2cqw}

.ts-canvas .card{background:#fff;border:1px solid rgba(60,8,77,.16);border-radius:1.6cqw;box-shadow:0 1.6cqw 4cqw rgba(60,8,77,.12);padding:2cqw 2.2cqw;font-size:1.55cqw;line-height:1.4}
.ts-canvas .card .ph{color:rgba(60,8,77,.45);display:block;font-size:1.2cqw;margin-bottom:.5cqw}
.ts-canvas .card .typed{display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:bottom;max-width:0;transition:max-width 1.1s steps(28)}
.ts-canvas .sc.card.in .typed{max-width:100%}
.ts-canvas .card .row{display:flex;align-items:center;justify-content:space-between;margin-top:1.6cqw}
.ts-canvas .card .plus{width:2.6cqw;height:2.6cqw;border:1px solid rgba(60,8,77,.35);border-radius:50%;display:grid;place-items:center}
.ts-canvas .card .go{width:3cqw;height:3cqw;border-radius:50%;background:rgba(60,8,77,.18);display:grid;place-items:center;color:#FEF9F3;transition:background .3s}
.ts-canvas .card .go.on{background:var(--ink)}
.ts-canvas .card .go svg{width:1.5cqw;height:1.5cqw}
.ts-canvas .card h5{margin:0 0 1.2cqw;font-size:1.45cqw;font-weight:500;color:rgba(60,8,77,.75);padding-bottom:.8cqw;border-bottom:1px solid rgba(60,8,77,.14)}
.ts-canvas .card .opt{display:flex;align-items:center;gap:1cqw;font-size:1.45cqw;margin:.75cqw 0}
.ts-canvas .card .opt i{width:1.6cqw;height:1.6cqw;border:1.3px solid rgba(60,8,77,.5);border-radius:.35cqw;flex:none;display:grid;place-items:center}
.ts-canvas .card .opt i.r{border-radius:50%}
.ts-canvas .card .opt i.on{border-color:var(--ink)}
.ts-canvas .card .opt i.on::after{content:"";width:.8cqw;height:.8cqw;background:var(--ink);border-radius:inherit}
.ts-canvas .card .opt small{margin-left:auto;color:rgba(60,8,77,.5);font-size:1.2cqw}
.ts-canvas .card .grid2{display:grid;grid-template-columns:1fr 1fr;column-gap:1.6cqw}
.ts-canvas .card .btn2{margin-top:1.4cqw;border:1px solid rgba(60,8,77,.4);border-radius:.9cqw;text-align:center;padding:.9cqw;font-size:1.45cqw;font-weight:500;transition:background .3s,color .3s}
.ts-canvas .card .btn2.ink{background:var(--ink);color:#FEF9F3;border-color:var(--ink)}
.ts-canvas .card .slider{position:relative;height:2px;background:rgba(60,8,77,.2);margin:1.6cqw .4cqw 1cqw;border-radius:2px}
.ts-canvas .card .slider b{position:absolute;top:50%;width:2.2cqw;height:2.2cqw;margin:-1.1cqw 0 0 -1.1cqw;border-radius:50%;background:#fff;border:1.3px solid var(--ink);display:grid;place-items:center;font-size:1cqw;font-weight:500;transition:left 1.2s cubic-bezier(.2,.7,.2,1)}
.ts-canvas .card .slider em{position:absolute;left:0;top:0;height:100%;background:var(--ink);transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.ts-canvas .card .scale{font-size:1.15cqw;color:rgba(60,8,77,.5);display:flex;justify-content:space-between}
.ts-canvas .chips{display:flex;flex-wrap:wrap;gap:.7cqw;margin-top:.4cqw}
.ts-canvas .chips span{border:1px solid rgba(60,8,77,.3);border-radius:999px;padding:.55cqw 1.2cqw;font-size:1.3cqw}
.ts-canvas .chips span.on{background:var(--ink);color:#FEF9F3;border-color:var(--ink)}

.ts-canvas .gen{border:1.5px dashed rgba(132,90,167,.7);border-radius:1.3cqw;background:linear-gradient(110deg,rgba(243,235,251,.4) 20%,rgba(243,235,251,.95) 50%,rgba(243,235,251,.4) 80%) 0 0/200% 100%;animation:tsShimmer 1.3s linear infinite;display:grid;place-items:center;font-size:1.3cqw;color:var(--plum)}
.ts-canvas .gen svg{width:2cqw;height:2cqw;animation:tsSpin 2.2s linear infinite}
@keyframes tsShimmer{to{background-position:-200% 0}}
@keyframes tsSpin{to{transform:rotate(360deg)}}

.ts-canvas .tray{background:rgba(255,255,255,.7);backdrop-filter:blur(10px);border:1px solid rgba(60,8,77,.16);border-radius:1.6cqw;padding:1.8cqw 1.8cqw 3.6cqw;box-shadow:0 1.6cqw 4cqw rgba(60,8,77,.08)}
.ts-canvas .tray .lbl{font-family:var(--mono);font-size:1.05cqw;letter-spacing:.1em;text-transform:uppercase;color:var(--plum);margin-bottom:1.1cqw}
.ts-canvas .tray .tiles{display:flex;gap:1cqw}
.ts-canvas .tray .tiles div{width:6.4cqw;height:6.4cqw;border-radius:1cqw;background:#F3EBFB;display:grid;place-items:center;position:relative}
.ts-canvas .tray .tiles img{width:74%;height:74%;object-fit:contain}
.ts-canvas .tray .tiles div.add{border:1.3px dashed rgba(60,8,77,.4);background:transparent;color:rgba(60,8,77,.6);font-size:2cqw}
.ts-canvas .tray .tiles small{position:absolute;top:100%;left:0;right:0;margin-top:.5cqw;text-align:center;font-size:1cqw;color:rgba(60,8,77,.6)}

.ts-canvas .plusmark{font-size:3cqw;font-weight:300;color:rgba(60,8,77,.45);line-height:1}
.ts-canvas .arrow{color:rgba(60,8,77,.45)}
.ts-canvas .arrow svg{width:3.6cqw;height:3.6cqw}

.ts-canvas .scene{position:relative;overflow:hidden;background:#FEF9F3}
.ts-canvas .tile.scene img,.ts-canvas .scene img{position:absolute;display:block;height:auto;object-fit:unset}
.ts-canvas .layer{background:#fff;border:1px solid rgba(60,8,77,.16);border-radius:1.2cqw;box-shadow:0 1.2cqw 3cqw rgba(60,8,77,.1);overflow:hidden;position:relative}
.ts-canvas .layer .tag2{position:absolute;left:1cqw;bottom:.9cqw;font-size:1.1cqw;background:rgba(255,255,255,.85);border-radius:999px;padding:.35cqw .9cqw;font-weight:500}

.ts-canvas .player{background:#fff;border:1px solid rgba(60,8,77,.16);border-radius:1.4cqw;overflow:hidden;box-shadow:0 1.6cqw 4cqw rgba(60,8,77,.12)}
.ts-canvas .player .vid{position:relative;aspect-ratio:16/9;overflow:hidden;background:#F3EBFB}
.ts-canvas .flip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:tsFlip 2.4s steps(1) infinite}
.ts-canvas .flip img:nth-child(1){animation-delay:0s}.ts-canvas .flip img:nth-child(2){animation-delay:.3s}.ts-canvas .flip img:nth-child(3){animation-delay:.6s}.ts-canvas .flip img:nth-child(4){animation-delay:.9s}
.ts-canvas .flip img:nth-child(5){animation-delay:1.2s}.ts-canvas .flip img:nth-child(6){animation-delay:1.5s}.ts-canvas .flip img:nth-child(7){animation-delay:1.8s}.ts-canvas .flip img:nth-child(8){animation-delay:2.1s}
@keyframes tsFlip{0%,12.4%{opacity:1}12.5%,100%{opacity:0}}
.ts-canvas .player .ctl{display:flex;align-items:center;gap:1cqw;padding:.9cqw 1.2cqw;font-size:1.15cqw;color:rgba(60,8,77,.7)}
.ts-canvas .player .ctl .pl{width:2.2cqw;height:2.2cqw;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.ts-canvas .player .ctl .pl svg{width:1cqw;height:1cqw}
.ts-canvas .player .ctl .tl{flex:1;height:2px;background:rgba(60,8,77,.18);position:relative;border-radius:2px}
.ts-canvas .player .ctl .tl i{position:absolute;left:0;top:0;height:100%;width:40%;background:var(--ink);animation:tsTl 2.4s linear infinite}
@keyframes tsTl{from{width:0}to{width:100%}}
.ts-canvas .badge{position:absolute;top:1cqw;left:1cqw;background:var(--ink);color:#FEF9F3;font-size:1.05cqw;font-weight:500;letter-spacing:.06em;border-radius:.6cqw;padding:.4cqw .8cqw}
.ts-canvas .strip{display:grid;gap:.5cqw;padding:.8cqw;background:conic-gradient(#EEE6F5 25%,#fff 0 50%,#EEE6F5 0 75%,#fff 0) 0 0/2cqw 2cqw;border-radius:1.2cqw;border:1px solid rgba(60,8,77,.16)}
.ts-canvas .strip img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:.5cqw;display:block}

.ts-canvas .drop{border:1.5px dashed rgba(60,8,77,.4);border-radius:1.6cqw;display:grid;place-items:center;text-align:center;font-size:1.4cqw;color:rgba(60,8,77,.6);background:rgba(255,255,255,.5)}
.ts-canvas .drop svg{width:2.6cqw;height:2.6cqw;margin-bottom:.6cqw}
.ts-canvas .file{display:flex;align-items:center;gap:1cqw;background:#fff;border:1px solid rgba(60,8,77,.18);border-radius:1cqw;padding:.9cqw 1.2cqw;font-size:1.3cqw;box-shadow:0 1cqw 2.6cqw rgba(60,8,77,.1)}
.ts-canvas .file svg{width:1.8cqw;height:1.8cqw;flex:none}
.ts-canvas .file small{color:rgba(60,8,77,.5);margin-left:auto;font-size:1.1cqw}
.ts-canvas .files{display:flex;flex-direction:column;gap:.6cqw}
.ts-canvas .zip{background:#fff;border:1px solid rgba(60,8,77,.18);border-radius:1.4cqw;padding:1.4cqw 1.6cqw;box-shadow:0 1.6cqw 4cqw rgba(60,8,77,.12);font-size:1.3cqw}
.ts-canvas .zip h6{margin:0 0 1cqw;font-size:1.5cqw;font-weight:500;display:flex;align-items:center;gap:.8cqw}
.ts-canvas .zip h6 svg{width:1.8cqw;height:1.8cqw}
.ts-canvas .zip div{display:flex;justify-content:space-between;padding:.5cqw 0;border-top:1px solid rgba(60,8,77,.1);color:rgba(60,8,77,.8)}
.ts-canvas .zip div small{color:rgba(60,8,77,.5)}

.ts-canvas .offer{background:#FFF4AB;border-radius:1.4cqw;position:relative;overflow:hidden;font-family:'Albert Sans',sans-serif}
.ts-canvas .offer .sale{position:absolute;left:1.6cqw;top:1.4cqw;font-weight:600;font-size:2.6cqw;letter-spacing:-.02em;line-height:1}
.ts-canvas .offer .sale small{display:block;font-size:1.1cqw;font-weight:500;letter-spacing:.12em;margin-bottom:.4cqw}
.ts-canvas .offer img{position:absolute;right:1cqw;top:1cqw;width:46%}
.ts-canvas .offer .pn{position:absolute;left:1.6cqw;bottom:1.4cqw;background:#F67331;color:#fff;font-weight:700;font-size:1.3cqw;letter-spacing:.06em;border-radius:999px;padding:.7cqw 1.6cqw}
.ts-canvas .pn2{background:#F67331;color:#fff;font-weight:700;font-size:1.35cqw;letter-spacing:.05em;border-radius:999px;padding:.9cqw 1.6cqw;text-align:center;white-space:nowrap;font-family:'Albert Sans',sans-serif}
.ts-canvas .paint{position:absolute;border:1.5px dashed var(--plum);border-radius:.8cqw;background:rgba(207,179,239,.22)}
.ts-canvas .paint i{position:absolute;right:-1.4cqw;bottom:-1.4cqw;width:2.6cqw;height:2.6cqw;border-radius:50%;background:#fff;border:1.5px solid var(--plum);box-shadow:0 .6cqw 1.6cqw rgba(60,8,77,.2)}
.ts-canvas .paint i::after{content:"";position:absolute;inset:.6cqw;border-radius:50%;background:var(--plum)}
.ts-canvas .sketch{background:#fff}
.ts-canvas .sketch svg{width:100%;height:100%}
.ts-canvas .sketch path,.ts-canvas .sketch circle{fill:none;stroke:#3C084D;stroke-width:1.6;stroke-linecap:round;opacity:.75}
.ts-canvas .stage-row{display:flex;align-items:flex-end;gap:1.4cqw}
.ts-canvas .stage{display:flex;flex-direction:column;align-items:center;gap:.6cqw;font-size:1.05cqw;color:rgba(60,8,77,.6)}
.ts-canvas .stage div{border-radius:1.2cqw;background:#fff;border:1px solid rgba(60,8,77,.14);display:grid;place-items:center;position:relative}
.ts-canvas .stage div::before{content:"";position:absolute;inset:14%;border-radius:50%;background:var(--ring,transparent);opacity:.5;filter:blur(1.2cqw)}
.ts-canvas .stage img{position:relative;height:70%;object-fit:contain}
.ts-canvas .lens{position:absolute;border-radius:50%;border:2px solid #fff;box-shadow:0 1.2cqw 3cqw rgba(60,8,77,.25);overflow:hidden;background:#fff}
.ts-canvas .lens img{position:absolute;width:300%;left:-100%;top:-70%}
.ts-canvas .layers{display:flex;flex-direction:column;gap:.5cqw;font-size:1.3cqw}
.ts-canvas .layers div{display:flex;align-items:center;gap:.9cqw;padding:.6cqw .8cqw;border-radius:.8cqw;background:#F8F4FC}
.ts-canvas .layers div i{width:2cqw;height:2cqw;border-radius:.5cqw;background:#fff;border:1px solid rgba(60,8,77,.15);display:grid;place-items:center;overflow:hidden}
.ts-canvas .layers div i img{width:80%;height:80%;object-fit:contain}
.ts-canvas .layers div svg{margin-left:auto;width:1.4cqw;height:1.4cqw;color:rgba(60,8,77,.5)}

/* foot: the tool strip (Wiz: the agent row) */
.ts-foot{grid-column:2;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ts-chip{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font:400 13.5px/1 var(--sans);padding:9px 14px;border-radius:999px;border:1px solid rgba(60,8,77,.22);color:var(--ink);transition:background .25s,color .25s,border-color .25s;position:relative;overflow:hidden}
.ts-chip small{font:400 11px/1 var(--mono);color:var(--plum);letter-spacing:.04em}
.ts-chip:hover{border-color:var(--ink)}
.ts-chip.on{background:var(--ink);border-color:var(--ink);color:#FEF9F3}
.ts-chip.on small{color:rgba(254,249,243,.7)}
.ts-chip i{position:absolute;left:0;bottom:0;height:2px;background:rgba(254,249,243,.6);width:0}
.ts-chip.on i{animation:tsChip var(--d,5s) linear forwards}
@keyframes tsChip{to{width:100%}}

.ts-agent,.gi .ts-agent{display:flex;align-items:center;justify-content:center;gap:10px;margin:96px 0 0;font-size:15px;color:var(--muted)}
.ts-agent svg{color:var(--plum);flex:none}

@media (max-width:980px){
  .ts .wrap{padding:0 20px}
  .ts-tabs{gap:14px;overflow-x:auto;grid-auto-columns:minmax(140px,1fr)}
  .ts-tab .t{font-size:20px}.ts-tab .s{font-size:13px}
  .ts-panel{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:26px 20px 24px;row-gap:18px}
  .ts-copy{grid-row:auto}
  .ts-copy .name{font-size:28px}
  .ts-dots{display:none}
  .ts-win,.ts-foot{grid-column:1}
  .ts-stage{grid-template-columns:36px 1fr}
  .ts-winbar .seg,.ts-winbar .av{display:none}
}
@media (prefers-reduced-motion:reduce){.gico img{animation:none!important}.ts-canvas .sc{transition:none}.ts-chip.on i{animation:none}.ts-canvas .flip img{animation:none}.ts-canvas .flip img:first-child{opacity:1}}