.playground-loading{--loading-surface:#fbfcff;--loading-ink:#23304a;--loading-muted:#626f86;--loading-line:#dce3ef;--loading-soft:#edf1fa;--loading-accent:#6550b4;--loading-active:#eee9fb;--loading-success:#317653;--loading-scene:url(/assets/playground-loading-BLn25bBI.webp);box-sizing:border-box;border:1px solid var(--loading-line);background:var(--loading-surface);width:min(650px,100vw - 32px);max-width:none;max-height:calc(100dvh - 32px);color:var(--loading-ink);text-align:left;-webkit-font-smoothing:antialiased;border-radius:20px;margin:auto;padding:0;font:13px/1.5 Segoe UI Variable Text,Segoe UI,system-ui,sans-serif;overflow:auto;box-shadow:0 24px 90px #0c173c45,0 2px 8px #0c173c15}.playground-loading::backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#1520388a}.playground-loading *,.playground-loading :before{box-sizing:border-box}.playground-loading:focus,.playground-loading h2:focus{outline:none}.playground-loading [hidden]{display:none!important}.playground-loading .loading-layout{grid-template-columns:210px minmax(0,1fr);display:grid}.playground-loading .loading-scene{background-color:#cee9fa}.playground-loading[open] .loading-scene{background-image:var(--loading-scene);background-position:50%;background-repeat:no-repeat;background-size:auto 100%}.playground-loading .loading-content{min-width:0;padding:26px}.playground-loading .loading-brand{justify-content:space-between;align-items:center;gap:12px;margin-bottom:23px;display:flex}.playground-loading .loading-brand img{object-fit:contain;width:144px;height:54px;display:block}.playground-loading .loading-brand>span{color:var(--loading-muted);letter-spacing:.1em;text-transform:uppercase;font-size:10px;font-weight:650}.playground-loading h2{letter-spacing:-.025em;margin:0 0 18px;font:650 21px/1.3 Segoe UI Variable Text,Segoe UI,system-ui,sans-serif}.playground-loading p{margin:0}.playground-loading .loading-status{justify-content:space-between;align-items:center;gap:14px;min-height:30px;margin-bottom:10px;display:flex}.playground-loading #playground-loading-detail{font-size:13px;line-height:1.5}.playground-loading .loading-percent{color:var(--loading-accent);font-variant-numeric:tabular-nums;letter-spacing:-.035em;flex:none;font-size:20px;font-weight:650;line-height:1}.playground-loading progress{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.playground-loading .loading-track{background:var(--loading-soft);border-radius:99px;height:7px;overflow:hidden}.playground-loading .loading-track>span{width:var(--loading-progress);border-radius:inherit;background:linear-gradient(90deg,#8060d3,#389ec9);height:100%;transition:width .18s ease-out;display:block}.playground-loading .loading-meter[data-measured=false] .loading-track>span{width:35%;animation:1.6s ease-in-out infinite alternate playground-loading-travel}.playground-loading .loading-bytes{min-height:18px;color:var(--loading-muted);font-variant-numeric:tabular-nums;margin-top:7px;font-size:11px}.playground-loading .loading-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:19px 0 20px;padding:0;list-style:none;display:grid}.playground-loading .loading-steps li{color:var(--loading-muted);text-align:center;flex-direction:column;align-items:center;gap:7px;font-size:11px;display:flex;position:relative}.playground-loading .loading-steps li:not(:last-child):before{content:"";background:var(--loading-line);width:calc(100% - 28px);height:1px;position:absolute;top:11px;left:calc(50% + 18px)}.playground-loading .loading-step-icon{border:1px solid var(--loading-line);width:24px;height:24px;color:var(--loading-muted);border-radius:50%;place-items:center;font-size:11px;font-weight:650;display:grid}.playground-loading .loading-steps [data-state=current]{color:var(--loading-accent);font-weight:650}.playground-loading [data-state=current] .loading-step-icon{border-color:var(--loading-accent);background:var(--loading-active);color:var(--loading-accent);box-shadow:0 0 0 3px var(--loading-active)}.playground-loading [data-state=done] .loading-step-icon{background:var(--loading-soft);color:var(--loading-success);border-color:#0000;font-size:14px}.playground-loading [data-state=error] .loading-step-icon{color:#c84840;border-color:currentColor}.playground-loading .loading-hint{border-top:1px solid var(--loading-line);color:var(--loading-muted);padding-top:16px;font-size:12px;line-height:1.6}.playground-loading .loading-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;margin-top:16px;display:flex}.playground-loading .loading-actions button{border:1px solid var(--loading-line);min-height:36px;color:var(--loading-ink);cursor:pointer;background:0 0;border-radius:7px;justify-content:center;align-items:center;margin:0;padding:7px 11px;font:600 12px/1.5 Segoe UI Variable Text,Segoe UI,system-ui,sans-serif;display:inline-flex}.playground-loading .loading-actions button:hover{background:var(--loading-soft);border-color:var(--loading-muted)}.playground-loading .loading-actions [data-action=retry]{color:#fff;background:#6550b4;border-color:#0000}.playground-loading .loading-actions [data-action=retry]:hover{background:#55429f;border-color:#0000}.playground-loading .loading-actions button:focus-visible{outline:2px solid var(--loading-accent);outline-offset:3px}@keyframes playground-loading-travel{0%{transform:translate(0)}to{transform:translate(185%)}}@media (prefers-color-scheme:dark){.playground-loading{--loading-surface:#1a263e;--loading-ink:#f1f4fc;--loading-muted:#acb8cf;--loading-line:#354560;--loading-soft:#2b3b56;--loading-accent:#b8adfb;--loading-active:#353455;--loading-success:#94deb2;box-shadow:0 24px 90px #0007,0 2px 8px #0003}.playground-loading .loading-scene{background-color:#22355c}.playground-loading .loading-track>span{background:linear-gradient(90deg,#ac8bef,#62c4ec)}.playground-loading [data-state=error] .loading-step-icon{color:#ffaba4}}@media (width<=600px){.playground-loading{border-radius:16px;width:min(400px,100vw - 24px);max-height:calc(100dvh - 24px)}.playground-loading .loading-layout{grid-template-columns:minmax(0,1fr)}.playground-loading .loading-scene{height:125px}.playground-loading[open] .loading-scene{background-position:50% 28%;background-size:100%}.playground-loading .loading-content{padding:20px}.playground-loading .loading-brand{margin-bottom:18px}.playground-loading .loading-brand img{width:128px;height:48px}.playground-loading h2{margin-bottom:16px;font-size:20px}.playground-loading .loading-actions button{min-height:40px}}@media (height<=500px) and (width>=601px){.playground-loading .loading-content{padding:18px 24px}.playground-loading .loading-brand{margin-bottom:12px}.playground-loading h2{margin-bottom:10px}.playground-loading .loading-steps{margin-block:12px}}@media (prefers-reduced-motion:reduce){.playground-loading .loading-track>span{transition:none}.playground-loading .loading-meter[data-measured=false] .loading-track>span{animation:none;transform:translate(90%)}}@media (forced-colors:active){.playground-loading{--loading-surface:Canvas;--loading-ink:CanvasText;--loading-muted:CanvasText;--loading-line:CanvasText;--loading-soft:Canvas;--loading-accent:Highlight;--loading-active:Canvas;--loading-success:CanvasText;border-color:canvastext}.playground-loading .loading-scene{display:none}.playground-loading .loading-layout{grid-template-columns:minmax(0,1fr)}.playground-loading .loading-track{border:1px solid canvastext}.playground-loading .loading-track>span{forced-color-adjust:none;background:highlight}.playground-loading .loading-actions [data-action=retry]{color:buttontext;background:buttonface;border-color:buttontext}}
