._2AChea_fragment{border:1px solid color-mix(in srgb, currentColor 40%, transparent);background:var(--color-void);width:100%;height:100%;color:var(--color-cyan);overflow:hidden;box-shadow:0 12px 32px #0003}._2AChea_top{border-bottom:1px solid color-mix(in srgb, currentColor 18%, transparent);font:9px var(--font-mono);letter-spacing:.04em;text-transform:uppercase;justify-content:space-between;align-items:center;padding:12px 14px;display:flex}._2AChea_top>i{background:currentColor;width:5px;height:5px}._2AChea_dashboard{grid-template-columns:1.5fr 1fr;gap:18px;height:calc(100% - 36px);padding:24px 18px;display:grid}._2AChea_chart{border-bottom:1px solid;align-items:end;gap:6px;display:flex}._2AChea_chart i{opacity:.6;background:currentColor;flex:1}._2AChea_chart i:nth-child(3n){opacity:.25}._2AChea_lines{flex-direction:column;justify-content:center;gap:13px;display:flex}._2AChea_lines i{opacity:.25;background:currentColor;height:5px}._2AChea_lines i:nth-child(2){width:65%}._2AChea_components{color:var(--color-purple)}._2AChea_componentsGrid{grid-template-columns:1fr 1fr;gap:8px;height:calc(100% - 36px);padding:14px;display:grid}._2AChea_componentsGrid>span{background:color-mix(in srgb, currentColor 8%, transparent);border:1px solid color-mix(in srgb, currentColor 25%, transparent);justify-content:center;align-items:center;gap:5px;font-size:22px;display:flex}._2AChea_componentsGrid i{background:currentColor;border-radius:50%;width:12px;height:12px}._2AChea_componentsGrid i:nth-child(2){background:var(--color-pink)}._2AChea_componentsGrid i:nth-child(3){background:var(--color-yellow)}._2AChea_motion{color:var(--color-pink)}._2AChea_motionPath{padding:17px 20px}._2AChea_motionPath svg{width:100%;height:72px}._2AChea_motionPath>span{font:8px var(--font-mono);opacity:.7;justify-content:space-between;display:flex}._2AChea_motionPath b{font-weight:400}
._1fNe2a_scene{isolation:isolate;--scene-x:0;--scene-y:0;width:100%;height:620px;position:relative}._1fNe2a_sceneHeader{min-height:36px;color:var(--color-comment);font:8px var(--font-mono);letter-spacing:.08em;z-index:9;border-bottom:1px solid #6272a430;justify-content:space-between;align-items:center;gap:12px;display:flex;position:absolute;inset:12px 12px auto}._1fNe2a_sceneControls{align-items:center;gap:4px;display:flex}._1fNe2a_orbit{aspect-ratio:1;pointer-events:none;background:radial-gradient(#bd93f912,#0000 65%);border:1px solid #6272a41a;border-radius:50%;width:94%;position:absolute;top:0;left:8%}._1fNe2a_orbit:after{content:"";border:1px dashed #6272a425;border-radius:50%;position:absolute;inset:12%}._1fNe2a_stage{perspective:1200px;position:absolute;inset:60px 12px 105px}._1fNe2a_world{width:86%;height:330px;transform-style:preserve-3d;transform:rotateX(calc(8deg + var(--scene-y) * -5deg)) rotateY(calc(-15deg + var(--scene-x) * 7deg)) rotateZ(-4deg);transition:transform .65s cubic-bezier(.22,1,.36,1);position:absolute;top:15%;left:7%}._1fNe2a_browser{transform-style:preserve-3d;background:#242632;border:1px solid #858cb68a;transition:transform .8s cubic-bezier(.22,1,.36,1),background .5s;position:absolute;inset:0;transform:translateZ(35px);box-shadow:15px 25px 55px #0005,inset 0 1px #ffffff10}._1fNe2a_chrome{height:35px;font:10px var(--font-mono);color:var(--color-muted-foreground);background:#ffffff03;border-bottom:1px solid #6272a44d;align-items:center;gap:12px;padding:0 12px;display:flex}._1fNe2a_traffic{gap:5px;display:flex}._1fNe2a_traffic i{background:var(--color-pink);border-radius:50%;width:5px;height:5px}._1fNe2a_traffic i:nth-child(2){background:var(--color-yellow)}._1fNe2a_traffic i:nth-child(3){background:var(--color-green)}._1fNe2a_address{opacity:.6;margin:0 auto;font-size:8px}._1fNe2a_browserBody{height:calc(100% - 61px);display:flex}._1fNe2a_sidebar{width:42px;color:var(--color-purple);border-right:1px solid #6272a42e;flex-direction:column;flex-shrink:0;align-items:center;gap:19px;padding:13px 0;display:flex}._1fNe2a_sidebar b{letter-spacing:-3px;font-size:20px}._1fNe2a_sidebar>i{border:1px solid #6272a4;width:10px;height:10px}._1fNe2a_sidebar>i:first-of-type{border-color:var(--color-purple);background:#bd93f92b}._1fNe2a_sidebar>span{margin-top:auto}._1fNe2a_workspace{flex:1;min-width:0;padding:18px 20px}._1fNe2a_workspaceHeader{font:8px var(--font-mono);color:var(--color-muted-foreground);justify-content:space-between;display:flex}._1fNe2a_workspaceHeader i{background:var(--color-green);width:4px;height:4px;margin-right:4px;display:inline-block}._1fNe2a_workspaceTitle{font:700 clamp(20px, 2.4vw, 31px)/1.05 var(--font-heading);letter-spacing:-.05em;margin-top:17px}._1fNe2a_workspaceTitle em{color:var(--color-purple);font-style:normal}._1fNe2a_skeleton{flex-direction:column;gap:5px;margin-top:10px;display:flex}._1fNe2a_skeleton i{background:#6272a44d;width:67%;height:3px}._1fNe2a_skeleton i+i{width:40%}._1fNe2a_miniGrid{gap:8px;height:64px;margin:16px 0;display:flex}._1fNe2a_miniGrid>div{background:#8be9fd06;border:1px solid #6272a44d;flex:1;padding:8px;transition:transform .75s,background .5s}._1fNe2a_miniGrid span{color:var(--color-cyan);font-size:15px}._1fNe2a_miniGrid i{background:#6272a466;width:75%;height:2px;margin-top:5px;display:block}._1fNe2a_miniGrid i+i{width:45%}._1fNe2a_scene[data-step="2"] ._1fNe2a_miniGrid>div:first-child,._1fNe2a_scene[data-step="3"] ._1fNe2a_miniGrid>div:first-child,._1fNe2a_scene[data-step="4"] ._1fNe2a_miniGrid>div:first-child{background:#bd93f918;transform:translate(calc(100% + 8px))}._1fNe2a_scene[data-step="2"] ._1fNe2a_miniGrid>div:nth-child(2),._1fNe2a_scene[data-step="3"] ._1fNe2a_miniGrid>div:nth-child(2),._1fNe2a_scene[data-step="4"] ._1fNe2a_miniGrid>div:nth-child(2){transform:translate(calc(-100% - 8px))}._1fNe2a_browserActions{gap:8px;display:flex}._1fNe2a_scene button{cursor:pointer;font-family:var(--font-mono)}._1fNe2a_scene button:focus-visible{outline:2px solid var(--color-yellow);outline-offset:5px}._1fNe2a_browserActions button{background:var(--color-purple);min-height:32px;color:var(--color-void);border:1px solid var(--color-purple);justify-content:space-between;align-items:center;gap:15px;padding:0 11px;font-size:8px;transition:background .2s;display:flex}._1fNe2a_browserActions button:hover{background:var(--color-pink)}._1fNe2a_browserActions button+button{color:var(--color-muted-foreground);background:0 0;border-color:#6272a466}._1fNe2a_console{font:7px var(--font-mono);color:var(--color-green);gap:12px;margin-top:13px;display:flex}._1fNe2a_consoleLine{color:var(--color-comment)}._1fNe2a_browserFooter{height:26px;font:7px var(--font-mono);color:var(--color-comment);border-top:1px solid #6272a433;justify-content:space-between;align-items:center;padding:0 12px;display:flex}._1fNe2a_browserFooter i{background:currentColor;width:2px;height:2px;margin:0 5px 2px;display:inline-block}._1fNe2a_browserFooter>span+span{color:var(--color-green)}._1fNe2a_backplane{color:var(--color-purple);background:#242332;border:1px solid #bd93f947;padding:20px;transition:transform .8s cubic-bezier(.22,1,.36,1),border-color .5s;position:absolute;inset:0;transform:translate3d(20px,-20px,-15px);box-shadow:12px 20px 35px #0002}._1fNe2a_backplane>span{font:10px var(--font-mono);letter-spacing:.06em}._1fNe2a_backplane code,._1fNe2a_routeTree{font:12px/2 var(--font-mono);margin-top:32px;display:block}._1fNe2a_backplane b{font:9px var(--font-mono);color:var(--color-green);margin-top:30px;display:block}._1fNe2a_cssLayer{color:var(--color-cyan);background:#1d2630;border-color:#8be9fd38;transform:translate3d(38px,-40px,-65px)}._1fNe2a_reactLabel{font:10px var(--font-mono);color:var(--color-pink);opacity:0;transition:opacity .4s;position:absolute;top:-26px;left:0}._1fNe2a_scene[data-expanded=true]{min-height:620px}._1fNe2a_scene[data-expanded=true] ._1fNe2a_world{width:100%;height:100%;top:0;left:0;transform:none}._1fNe2a_scene[data-expanded=true] ._1fNe2a_backplane{width:calc(50% - 8px);height:205px;padding:16px;inset:0 auto auto 0;transform:none}._1fNe2a_scene[data-expanded=true] ._1fNe2a_backplane code,._1fNe2a_scene[data-expanded=true] ._1fNe2a_routeTree{margin-top:18px;font-size:clamp(10px,.9vw,12px);line-height:1.8}._1fNe2a_scene[data-expanded=true] ._1fNe2a_backplane b{margin-top:14px}._1fNe2a_scene[data-expanded=true] ._1fNe2a_browser{transform-origin:top;height:330px;inset:235px 0 auto;transform:scale(.68)}._1fNe2a_scene[data-expanded=true] ._1fNe2a_next{border-color:var(--color-purple)}._1fNe2a_scene[data-expanded=true] ._1fNe2a_cssLayer{border-color:var(--color-cyan);left:auto;right:0}._1fNe2a_scene[data-expanded=true] ._1fNe2a_reactLabel{opacity:1;font-size:14px}._1fNe2a_scene[data-expanded=true] ._1fNe2a_preview{top:250px;right:0;transform:none}@media (max-width:1100px) and (min-width:761px){._1fNe2a_scene[data-expanded=true]{height:620px}}@media (max-width:480px){._1fNe2a_scene[data-expanded=true]{height:800px}._1fNe2a_scene[data-expanded=true] ._1fNe2a_backplane{width:100%;height:185px}._1fNe2a_scene[data-expanded=true] ._1fNe2a_cssLayer{top:200px}._1fNe2a_scene[data-expanded=true] ._1fNe2a_backplane code,._1fNe2a_scene[data-expanded=true] ._1fNe2a_routeTree{font-size:12px}._1fNe2a_scene[data-expanded=true] ._1fNe2a_browser{height:280px;top:425px;transform:scale(.76)}._1fNe2a_scene[data-expanded=true] ._1fNe2a_preview{top:430px}}._1fNe2a_preview{background:var(--color-void);border:1px solid var(--color-green);width:205px;padding:17px;position:absolute;top:23%;right:-5%;transform:translateZ(115px)rotate(4deg);box-shadow:0 16px 60px #0008}._1fNe2a_preview>span{font:8px var(--font-mono);color:var(--color-green)}._1fNe2a_preview>button{width:28px;height:28px;color:var(--color-muted-foreground);background:0 0;border:0;position:absolute;top:7px;right:7px}._1fNe2a_previewIcon{color:var(--color-green);margin:20px 0 12px;font-size:27px}._1fNe2a_preview strong{font:700 21px var(--font-heading)}._1fNe2a_preview p{color:var(--color-muted-foreground);margin-top:8px;font-size:10px;line-height:1.6}._1fNe2a_fragment{z-index:4;pointer-events:none;width:190px;height:150px;transition:opacity .5s;position:absolute}._1fNe2a_interfaceFragment{top:354px;left:-2%;transform:rotate(-9deg)}._1fNe2a_componentsFragment{width:155px;height:145px;top:65px;right:-1%;transform:rotate(9deg)}._1fNe2a_motionFragment{width:175px;height:145px;top:378px;right:0;transform:rotate(7deg)}._1fNe2a_cursor{z-index:8;width:25px;color:var(--color-pink);pointer-events:none;position:absolute;top:0;left:0;transform:translate(330px,300px)}._1fNe2a_cursor svg{filter:drop-shadow(0 2px 3px #0005);width:25px;display:block}._1fNe2a_cursor>i{border:1px solid var(--color-pink);opacity:0;border-radius:50%;width:28px;height:28px;position:absolute;top:-9px;left:-9px}._1fNe2a_scene[data-control=user] ._1fNe2a_cursor{color:var(--color-cyan)}._1fNe2a_inspectButton,._1fNe2a_pauseButton{min-height:34px;color:var(--color-purple);background:0 0;border:0;padding:0 12px;font-size:9px}._1fNe2a_inspectButton:hover,._1fNe2a_pauseButton:hover{background:#bd93f92b}._1fNe2a_inspectButton>span{margin-right:5px}._1fNe2a_pauseButton{min-width:34px;padding:0 8px}._1fNe2a_hint{width:100%;color:var(--color-comment);text-align:center;font:8px/1.5 var(--font-mono);position:absolute;bottom:8px;left:0}@media (min-width:1600px){._1fNe2a_scene{height:700px}._1fNe2a_stage{top:85px}._1fNe2a_world{height:370px}._1fNe2a_miniGrid{height:85px}._1fNe2a_interfaceFragment{top:420px}._1fNe2a_motionFragment{top:442px}}@media (max-width:1100px) and (min-width:761px){._1fNe2a_scene{height:560px}._1fNe2a_world{width:94%;left:0}._1fNe2a_workspace{padding:16px 12px}._1fNe2a_fragment{width:150px;height:135px}._1fNe2a_interfaceFragment{top:335px}._1fNe2a_motionFragment{top:345px}._1fNe2a_componentsFragment{top:50px}._1fNe2a_consoleLine{display:none}}@media (max-width:760px){._1fNe2a_scene{max-width:590px;height:570px;margin:0 auto}._1fNe2a_world{height:310px}._1fNe2a_workspaceTitle{font-size:25px}._1fNe2a_interfaceFragment{width:165px;height:140px;top:330px;left:0}._1fNe2a_motionFragment{width:160px;height:140px;top:350px}._1fNe2a_componentsFragment{width:135px;height:130px;top:45px;right:2%}}@media (max-width:420px){._1fNe2a_scene{height:530px}._1fNe2a_stage{inset:70px 0 110px}._1fNe2a_world{width:92%;height:280px;left:2%}._1fNe2a_workspace{padding:13px 10px}._1fNe2a_sidebar{gap:15px;width:30px}._1fNe2a_workspaceTitle{font-size:22px}._1fNe2a_miniGrid{height:52px;margin:12px 0}._1fNe2a_console{font-size:6px}._1fNe2a_consoleLine{display:none}._1fNe2a_browserActions button{min-height:30px;padding:0 6px;font-size:7px}._1fNe2a_fragment{width:125px;height:125px}._1fNe2a_interfaceFragment{top:315px}._1fNe2a_motionFragment{top:320px}._1fNe2a_componentsFragment{width:120px;height:120px;top:47px}._1fNe2a_inspectButton{padding:0 8px;font-size:8px}._1fNe2a_hint{font-size:7px}._1fNe2a_preview{width:175px;right:0}}@media (pointer:coarse){._1fNe2a_cursor{display:none}._1fNe2a_browserActions button,._1fNe2a_inspectButton,._1fNe2a_pauseButton{min-height:44px}._1fNe2a_console{display:none}}@media (prefers-reduced-motion:reduce){._1fNe2a_cursor{display:none}._1fNe2a_world{transform:rotateX(5deg)rotateY(-10deg)rotate(-3deg)}}._1fNe2a_draggable{width:100%;height:100%}._1fNe2a_skeleton i{transition:width .7s}._1fNe2a_scene[data-step="1"] ._1fNe2a_skeleton i:first-child{width:90%}._1fNe2a_scene[data-step="2"] ._1fNe2a_skeleton i+i{width:65%}@media (max-width:480px){._1fNe2a_sceneHeader{gap:5px;inset-inline:0}._1fNe2a_sceneHeader>span{letter-spacing:0;font-size:6px}}
._3DXRAq_diagram{isolation:isolate;height:210px;font:10px/1.5 var(--font-mono);margin:0 22px 16px;position:relative}._3DXRAq_diagram:before{content:"";z-index:-1;background-image:radial-gradient(#6272a43d 1px,#0000 1px);background-size:14px 14px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,#0000,#000 15% 85%,#0000);mask-image:linear-gradient(90deg,#0000,#000 15% 85%,#0000)}._3DXRAq_branches,._3DXRAq_flow{fill:none;width:100%;height:100%;stroke:var(--accent);stroke-width:1px;position:absolute;inset:0}._3DXRAq_branches{opacity:0;transition:opacity .25s}._3DXRAq_branches path{stroke-dasharray:1;stroke-dashoffset:1px;transition:stroke-dashoffset .8s .35s}._3DXRAq_diagram[data-applied=true] ._3DXRAq_branches{opacity:.6}._3DXRAq_diagram[data-applied=true] ._3DXRAq_branches path{stroke-dashoffset:0}._3DXRAq_flow{opacity:.25;transition:opacity .6s}._3DXRAq_diagram[data-applied=true] ._3DXRAq_flow{opacity:.8}._3DXRAq_flowNode{top:68px;left:calc(1% + var(--slot) * 35%);text-align:center;width:28%;height:76px;transform:translateY(calc((var(--slot) - 1) * 10px));background:#232634;border:1px solid #6272a460;padding:12px 3px;transition:transform .7s,border-color .5s;position:absolute}._3DXRAq_flowNode:nth-of-type(2){border-radius:24px}._3DXRAq_identifier{color:var(--color-muted-foreground);animation:.4s both _3DXRAq_labelEnter;display:block}._3DXRAq_value{color:#9098b2;margin-top:7px;font-size:9px;display:block}._3DXRAq_diagram[data-applied=true] ._3DXRAq_flowNode{border-color:color-mix(in srgb, var(--accent) 50%, transparent);transform:none}._3DXRAq_diagram[data-applied=true] ._3DXRAq_identifier{color:var(--accent)}._3DXRAq_checkout{text-align:center;width:80%;height:182px;color:var(--accent);border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);background:#262333;padding-top:10px;transition:width .8s cubic-bezier(.22,1,.36,1),height .8s cubic-bezier(.22,1,.36,1),left .8s cubic-bezier(.22,1,.36,1);position:absolute;top:14px;left:10%}._3DXRAq_component{top:calc(58px + var(--slot) * 41px);width:70%;height:32px;color:var(--color-muted-foreground);transition:top .8s cubic-bezier(.22,1,.36,1),left .8s cubic-bezier(.22,1,.36,1),width .8s cubic-bezier(.22,1,.36,1),height .8s,color .5s,border-color .5s;transition-delay:calc(var(--slot) * 60ms);background:#302a40;border:1px solid #bd93f92b;place-items:center;display:grid;position:absolute;left:15%}._3DXRAq_component>span{white-space:nowrap;animation:.4s both _3DXRAq_labelEnter}._3DXRAq_diagram[data-applied=true] ._3DXRAq_checkout{width:30%;height:34px;padding-top:8px;left:35%}._3DXRAq_diagram[data-applied=true] ._3DXRAq_component{top:145px;left:calc(2% + var(--slot) * 34%);width:28%;height:40px;color:var(--accent);border-color:color-mix(in srgb, var(--accent) 45%, transparent)}._3DXRAq_contract{background:0 0;border:1px solid #0000;transition:background .6s,border-color .6s;position:absolute;inset:12px 8%}._3DXRAq_contractTitle{color:var(--accent);position:absolute;top:10px;left:16px}._3DXRAq_contractBrace{color:var(--accent);opacity:0;transition:opacity .5s;position:absolute;top:10px;right:16px}._3DXRAq_field{top:calc(53px + var(--slot) * 43px);left:calc(4% + var(--slot) * 22%);width:48%;height:34px;color:var(--color-muted-foreground);transform:rotate(calc((var(--slot) - 1) * -6deg));transition:top .8s,left .8s,width .8s,transform .8s,border-color .5s,background .5s;transition-delay:calc(var(--slot) * 65ms);background:#232634;border:1px dashed #6272a470;justify-content:space-between;align-items:center;gap:8px;padding:0 12px;display:flex;position:absolute}._3DXRAq_field i{color:var(--color-comment);margin-left:3px;font-style:normal}._3DXRAq_field b{color:var(--color-orange);margin-right:auto;font-weight:400;animation:.4s both _3DXRAq_labelEnter}._3DXRAq_fieldCheck{color:var(--color-comment)}._3DXRAq_diagram[data-applied=true] ._3DXRAq_contract{background:#272331;border-color:#ff79c64d}._3DXRAq_diagram[data-applied=true] ._3DXRAq_contractBrace{opacity:1}._3DXRAq_diagram[data-applied=true] ._3DXRAq_field{top:calc(52px + var(--slot) * 44px);background:#322637;border:1px solid #ff79c626;width:76%;left:12%;transform:none}._3DXRAq_diagram[data-applied=true] ._3DXRAq_field b{color:var(--color-cyan)}._3DXRAq_diagram[data-applied=true] ._3DXRAq_fieldCheck{color:var(--color-green)}._3DXRAq_shared{text-align:center;width:30%;height:34px;color:var(--accent);opacity:0;background:#2b2c28;border:1px solid #f1fa8c70;padding:8px 2px;transition:opacity .45s,transform .7s cubic-bezier(.22,1.3,.36,1);position:absolute;top:14px;left:35%;transform:translateY(30px)scale(.75)}._3DXRAq_buttonInstance{top:88px;left:calc(2% + var(--slot) * 34%);width:28%;color:var(--color-muted-foreground);transform:translateY(calc((var(--slot) - 1) * 30px)) rotate(calc((var(--slot) - 1) * 8deg));transition:top .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1),border-color .5s;transition-delay:calc(var(--slot) * 65ms);background:#232634;border:1px solid #6272a45c;padding:7px;position:absolute}._3DXRAq_buttonInstance small{color:#9098b2;margin-bottom:5px;font-size:8px;animation:.4s both _3DXRAq_labelEnter;display:block}._3DXRAq_buttonInstance>span{background:#6272a417;border:1px solid #6272a43b;justify-content:space-between;align-items:center;gap:4px;padding:5px 7px;transition:background .5s,color .5s;display:flex}._3DXRAq_buttonInstance i{font-style:normal}._3DXRAq_diagram[data-applied=true] ._3DXRAq_shared{opacity:1;transform:none}._3DXRAq_diagram[data-applied=true] ._3DXRAq_buttonInstance{border-color:#f1fa8c50;top:138px;transform:none}._3DXRAq_diagram[data-applied=true] ._3DXRAq_buttonInstance>span{color:var(--accent);background:#f1fa8c0b}@keyframes _3DXRAq_labelEnter{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@media (max-width:960px){._3DXRAq_diagram{font-size:9px}._3DXRAq_component>span{font-size:8px}}@media (max-width:700px){._3DXRAq_diagram{margin-inline:12px}._3DXRAq_value{font-size:8px}._3DXRAq_buttonInstance{padding:5px}._3DXRAq_buttonInstance>span{padding:5px 3px}._3DXRAq_field{padding-inline:8px}}@media (prefers-reduced-motion:reduce){._3DXRAq_diagram *,._3DXRAq_diagram :before{transition:none;animation:none}}
.VTJkzW_workbench{--accent:var(--color-cyan);grid-template-columns:minmax(240px,.75fr) minmax(0,1.35fr);gap:clamp(30px,5vw,80px);display:grid}.VTJkzW_workbench[data-accent=purple]{--accent:var(--color-purple)}.VTJkzW_workbench[data-accent=pink]{--accent:var(--color-pink)}.VTJkzW_workbench[data-accent=yellow]{--accent:var(--color-yellow)}.VTJkzW_navigation{padding-top:8px}.VTJkzW_guide{color:var(--color-muted-foreground);font:9px/1.6 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;justify-content:space-between;margin-bottom:22px;display:flex}.VTJkzW_guide>span{color:var(--accent);font-size:16px}.VTJkzW_tabs{border-top:1px solid #6272a440;position:relative}.VTJkzW_tabs:before{content:"";border-left:2px solid var(--accent);background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent);width:100%;transform:translateY(calc(var(--active) * 100%));pointer-events:none;transition:transform .55s cubic-bezier(.22,1,.36,1),border-color .3s,background .3s;position:absolute;top:0;bottom:75%;left:0}.VTJkzW_tab{text-align:left;width:100%;min-height:102px;color:var(--color-muted-foreground);font:700 clamp(19px, 1.85vw, 26px)/1.12 var(--font-heading);letter-spacing:-.035em;cursor:pointer;border-bottom:1px solid #6272a440;grid-template-columns:24px 1fr 20px;align-items:center;gap:16px;padding:18px 16px;transition:color .3s;display:grid;position:relative}.VTJkzW_tab[aria-selected=true],.VTJkzW_tab:hover{color:var(--color-foreground)}.VTJkzW_number{color:var(--color-comment);font:10px var(--font-mono);letter-spacing:0}.VTJkzW_tab[aria-selected=true] .VTJkzW_number{color:var(--accent)}.VTJkzW_tabArrow{font:20px var(--font-mono);color:var(--accent);opacity:0;transition:opacity .3s,transform .3s;transform:translate(-5px,5px)}.VTJkzW_tab[aria-selected=true] .VTJkzW_tabArrow,.VTJkzW_tab:hover .VTJkzW_tabArrow{opacity:1;transform:none}.VTJkzW_hint{max-width:35ch;color:var(--color-muted-foreground);font:10px/1.8 var(--font-mono);margin-top:23px}.VTJkzW_panel{min-width:0}.VTJkzW_editor{border:1px solid color-mix(in srgb, var(--accent) 28%, #303240);background:#1c1e29;transition:border-color .4s;overflow:hidden;box-shadow:0 20px 80px #0002}.VTJkzW_editorHeader{min-height:58px;font:10px var(--font-mono);background:#ffffff03;border-bottom:1px solid #6272a42b;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;display:flex}.VTJkzW_file{color:var(--color-muted-foreground);margin-right:auto}.VTJkzW_file>span{color:var(--accent);margin-right:12px}.VTJkzW_version{color:var(--color-muted-foreground);font-size:9px}.VTJkzW_version[data-applied=true]{color:var(--accent)}.VTJkzW_playback{min-height:42px;color:var(--color-muted-foreground);font:9px/1.6 var(--font-mono);border-bottom:1px solid #6272a41f;align-items:center;gap:10px;padding:10px 20px;display:flex}.VTJkzW_playbackIcon{width:19px;color:var(--accent);justify-content:center;align-items:center;gap:3px;display:flex}.VTJkzW_playbackIcon i{background:var(--accent);opacity:.3;width:3px;height:3px}.VTJkzW_playback[data-running=true] .VTJkzW_playbackIcon i{animation:.9s ease-in-out infinite VTJkzW_waiting}.VTJkzW_playback[data-running=true] .VTJkzW_playbackIcon i:nth-child(2){animation-delay:.15s}.VTJkzW_playback[data-running=true] .VTJkzW_playbackIcon i:nth-child(3){animation-delay:.3s}.VTJkzW_progressTrack{background:#6272a43d;width:64px;height:2px;margin-left:auto;overflow:hidden}.VTJkzW_progressFill{background:var(--accent);transform-origin:0;width:100%;height:100%;display:block;transform:scaleX(0)}.VTJkzW_playback[data-running=true] .VTJkzW_progressFill{animation:3s linear forwards VTJkzW_preparation}.VTJkzW_playback[data-applied=true] .VTJkzW_progressFill{transform:scaleX(1)}.VTJkzW_playback[data-applied=true]{color:var(--accent)}@keyframes VTJkzW_preparation{to{transform:scaleX(1)}}@keyframes VTJkzW_waiting{50%{opacity:1;transform:translateY(-2px)}}.VTJkzW_codeViewport{scrollbar-width:thin;scrollbar-color:var(--color-selection) transparent;min-height:290px;padding:23px 0 20px;overflow-x:auto}.VTJkzW_code{color:#d5d7e2;width:max-content;min-width:100%;font:12px/22px var(--font-mono);tab-size:2;margin:0}.VTJkzW_codeLine{white-space:pre;min-height:22px;animation:.45s both VTJkzW_lineEnter;animation-delay:calc(var(--line) * 22ms);padding-right:22px;display:flex}.VTJkzW_codeLine:hover{background:#ffffff04}.VTJkzW_lineNumber{text-align:center;color:#75809e;-webkit-user-select:none;user-select:none;flex:0 0 54px;font-size:10px}.VTJkzW_code [data-token=keyword]{color:var(--color-pink)}.VTJkzW_code [data-token=type]{color:var(--color-cyan);font-style:italic}.VTJkzW_code [data-token=component]{color:var(--color-purple)}.VTJkzW_code [data-token=string]{color:var(--color-yellow)}.VTJkzW_editorFooter{min-height:53px;color:var(--color-muted-foreground);font:10px/1.7 var(--font-mono);border-top:1px solid #6272a42b;align-items:start;gap:10px;padding:16px 22px;display:flex}.VTJkzW_editorFooter>span:first-child{color:var(--accent)}.VTJkzW_explanation{flex-direction:column;align-items:start;gap:22px;padding-top:25px;display:flex}.VTJkzW_explanation p{max-width:61ch;min-height:5.1em;color:var(--color-muted-foreground);font-size:13px;line-height:1.7;animation:.35s both VTJkzW_nodeEnter}.VTJkzW_tab:focus-visible,.VTJkzW_panel:focus-visible,.VTJkzW_codeViewport:focus-visible{outline:2px solid var(--accent);outline-offset:4px}@keyframes VTJkzW_lineEnter{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes VTJkzW_nodeEnter{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@media (max-width:960px){.VTJkzW_workbench{grid-template-columns:minmax(200px,.75fr) minmax(0,1.25fr);gap:25px}.VTJkzW_tab{gap:10px;padding-inline:12px;font-size:21px}.VTJkzW_editorHeader{padding-inline:16px}.VTJkzW_code{font-size:11px}.VTJkzW_lineNumber{flex-basis:40px}}@media (max-width:700px){.VTJkzW_workbench{grid-template-columns:minmax(0,1fr);gap:25px}.VTJkzW_guide{margin-bottom:16px}.VTJkzW_tabs{border:1px solid #6272a440;grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.VTJkzW_tabs:before{display:none}.VTJkzW_tab{border:1px solid #0000;grid-template-columns:18px 1fr;gap:8px;min-height:84px;padding:14px 10px;font-size:18px}.VTJkzW_tab[aria-selected=true]{border-color:color-mix(in srgb, var(--accent) 55%, transparent);background:color-mix(in srgb, var(--accent) 8%, transparent)}.VTJkzW_tabArrow,.VTJkzW_hint{display:none}.VTJkzW_codeViewport{min-height:280px}.VTJkzW_editorFooter{min-height:64px;padding-inline:16px}.VTJkzW_explanation{gap:18px;padding-top:20px}.VTJkzW_explanation p{min-height:0}}@media (prefers-reduced-motion:reduce){.VTJkzW_playback[data-running=true] .VTJkzW_progressFill{transform:scaleX(.35)}.VTJkzW_playback[data-running=true] .VTJkzW_progressFill,.VTJkzW_playback[data-running=true] .VTJkzW_playbackIcon i,.VTJkzW_codeLine,.VTJkzW_explanation p{animation:none}}
