:root{color:#e7eef5;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;--accent:#62cff9;--muted:#91a2b3;--line:#b4c9d82b;--playground-overlay-background:#070d13f0;--playground-overlay-border:#9ac0d83d;--playground-overlay-blur:18px;--playground-overlay-shadow:0 30px 90px #0000007a;background:#05090d;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}html,body{width:100%;min-width:320px;height:100%;margin:0;overflow:hidden}button,select,a{font:inherit}button,select{color:inherit}button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.playground{isolation:isolate;width:100%;height:100vh;background:radial-gradient(circle at 76% 32%,#0f6d8c40,#0000 34rem),linear-gradient(135deg,#07101a,#05090d 68%);height:100svh;position:relative;overflow:hidden}.effect-stage{z-index:0;opacity:0;touch-action:none;border:0;width:100%;height:100%;transition:opacity .5s;display:block;position:absolute;inset:0}.playground[data-effect-state=ready] .effect-stage{opacity:1}.playground-header{z-index:20;pointer-events:none;grid-template-columns:minmax(180px,auto) minmax(220px,1fr) auto;align-items:center;gap:20px;min-height:48px;display:grid;position:absolute;top:20px;left:24px;right:24px}.playground-header>*{pointer-events:auto}.playground-brand{color:#eaf3fa;align-items:center;gap:9px;width:max-content;text-decoration:none;display:inline-flex}.playground-brand__name{letter-spacing:-.025em;font-size:14px;font-weight:780}.playground-brand__divider{color:#496172}.playground-brand__section{color:#8fa4b6;font-size:12px;font-weight:620}.example-identity{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#050c12ad;border:1px solid #aec9db26;border-radius:9px;justify-self:center;align-items:center;gap:10px;min-width:0;padding:5px 6px 5px 12px;display:flex;box-shadow:inset 0 1px #ffffff09}.example-identity__eyebrow{color:#587185;letter-spacing:.12em;text-transform:uppercase;flex:none;font-size:9px;font-weight:760}.example-picker{width:clamp(230px,28vw,310px);min-width:0;position:relative}.example-picker__trigger{color:#d8e6f0;text-align:left;cursor:pointer;background:#ffffff0b;border:0;border-radius:6px;justify-content:space-between;align-items:center;gap:16px;width:100%;height:34px;padding:0 11px 0 12px;font-size:11px;font-weight:650;transition:color .15s,background .15s,box-shadow .15s;display:flex}.example-picker__trigger:hover{color:#f0f8fc;background:#ffffff13}.example-picker[data-open=true] .example-picker__trigger{color:#effaff;background:#62cff91a;box-shadow:inset 0 0 0 1px #62cff94d}.example-picker__value{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.example-picker__chevron{color:#7893a6;border-bottom:1.5px solid;border-right:1.5px solid;flex:none;width:7px;height:7px;transition:transform .15s,color .15s;transform:translateY(-2px)rotate(45deg)}.example-picker[data-open=true] .example-picker__chevron{color:#93dffb;transform:translateY(2px)rotate(225deg)}.example-picker__listbox{z-index:30;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);scrollbar-color:#739cb557 transparent;scrollbar-width:thin;background:#050c12f7;border:1px solid #93bed838;border-radius:10px;width:max(100%,330px);max-height:min(60vh,430px);padding:7px;position:absolute;top:calc(100% + 10px);right:0;overflow-y:auto;box-shadow:0 22px 64px #0000008c,inset 0 1px #ffffff0a}.example-picker__group+.example-picker__group{border-top:1px solid #9ac0d81c;margin-top:7px;padding-top:7px}.example-picker__group-label{color:#4f6a7e;letter-spacing:.13em;text-transform:uppercase;padding:5px 11px 6px;font-size:8px;font-weight:780}.example-picker__group-options{gap:2px;display:grid}.example-picker__option{color:#8299ab;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;width:100%;min-height:34px;padding:0 11px 0 28px;font-size:10px;font-weight:620;line-height:1.3;transition:color .12s,background .12s;position:relative}.example-picker__option:before{content:"";opacity:0;background:currentColor;border-radius:50%;width:5px;height:5px;transition:opacity .12s,transform .12s;position:absolute;top:50%;left:12px;transform:translateY(-50%)scale(.6)}.example-picker__option:hover,.example-picker__option:focus-visible{color:#dcebf4;background:#ffffff0b;outline:none}.example-picker__option[aria-selected=true]{color:#dff7ff;background:linear-gradient(90deg,#41b7e62b,#41b7e612)}.example-picker__option[aria-selected=true]:before{color:#62cff9;opacity:1;transform:translateY(-50%)scale(1);box-shadow:0 0 9px #62cff9b8}.tool-launcher{align-items:center;gap:8px;display:flex}.tool-launcher__label{color:#526a7d;letter-spacing:.13em;text-transform:uppercase;margin-right:2px;font-size:9px;font-weight:760}.tool-launcher button{color:#7890a3;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);cursor:pointer;background:#050c12b8;border:1px solid #aec9db29;border-radius:9px;justify-content:center;align-items:center;gap:7px;height:38px;padding:0 12px;font-size:10px;font-weight:690;transition:color .15s,border-color .15s,background .15s;display:inline-flex;box-shadow:inset 0 1px #ffffff09}.tool-launcher button:hover{color:#d8e8f2;background:#0c1923d1;border-color:#aec9db4d}.tool-launcher button[aria-pressed=true]{color:#dff6ff;background:#21769940;border-color:#62cff975;box-shadow:inset 0 1px #ffffff0d,0 0 18px #2ca4d31a}.tool-launcher button:disabled{cursor:default;opacity:.38}.tool-launcher svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6px;width:14px;height:14px}.tool-launcher__glyph{letter-spacing:-.12em;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px}.effect-status{z-index:5;color:#71879a;letter-spacing:.025em;align-items:center;gap:8px;max-width:min(480px,100% - 48px);font-size:10px;font-weight:620;display:inline-flex;position:absolute;bottom:42px;left:24px}.effect-status__signal{background:#728699;border-radius:50%;flex:none;width:6px;height:6px;box-shadow:0 0 9px #72869980}.effect-status[data-state=ready]{color:#7faec1}.effect-status[data-state=ready] .effect-status__signal{background:#5ed4ff;box-shadow:0 0 10px #5ed4ffcc}.effect-status[data-state=error]{color:#d4a591}.effect-status[data-state=error] .effect-status__signal{background:#ef8d69;box-shadow:0 0 9px #ef8d6999}.playground-controls{z-index:7;scrollbar-color:#93b1c452 transparent;scrollbar-width:thin;width:min(280px,100% - 48px);max-height:calc(100% - 148px);transition:opacity .15s,visibility .15s;position:absolute;top:88px;right:24px;overflow:auto}.playground[data-panel=code] .playground-controls,.playground[data-panel=inspector] .playground-controls{opacity:0;visibility:hidden;pointer-events:none}.playground-controls .tp-dfwv{width:100%;font-family:Inter,ui-sans-serif,system-ui,sans-serif}.tool-overlay{z-index:12;border:1px solid var(--playground-overlay-border);background:var(--playground-overlay-background);min-width:0;min-height:0;box-shadow:var(--playground-overlay-shadow);-webkit-backdrop-filter:blur(var(--playground-overlay-blur));backdrop-filter:blur(var(--playground-overlay-blur));border-radius:13px;grid-template-rows:auto minmax(0,1fr);animation:.18s ease-out overlay-enter;display:grid;position:absolute;inset:88px clamp(24px,6vw,92px) 52px clamp(24px,8vw,132px);overflow:hidden}.tool-overlay[hidden]{display:none}@keyframes overlay-enter{0%{opacity:0;transform:translateY(8px)scale(.995)}to{opacity:1;transform:translateY(0)scale(1)}}.tool-overlay__header{background:#ffffff05;border-bottom:1px solid #b4c9d821;justify-content:space-between;align-items:center;gap:16px;min-height:62px;padding:11px 13px 11px 18px;display:flex}.tool-overlay__eyebrow{color:#597386;letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px;font-size:8px;font-weight:780;display:block}.tool-overlay h1{color:#dfeaf2;letter-spacing:-.01em;margin:0;font-size:14px;font-weight:690}.tool-overlay__close{color:#7890a3;cursor:pointer;background:#ffffff06;border:1px solid #b4c9d821;border-radius:7px;place-items:center;width:34px;height:34px;display:grid}.tool-overlay__close:hover{color:#e6f2f8;background:#ffffff0e}.tool-overlay__close svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.8px;width:15px;height:15px}.code-workspace{grid-template-columns:218px minmax(0,1fr);min-width:0;min-height:0;display:grid}.code-workspace[hidden],.inspector-workspace[hidden]{display:none}.source-files{background:#02080c47;border-right:1px solid #b4c9d81f;flex-direction:column;gap:3px;min-width:0;padding:12px 9px;display:flex}.source-files button{color:#8197a9;text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;width:100%;min-height:36px;padding:0 10px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px}.source-files button:hover{color:#d2e2ec;background:#ffffff06}.source-files button.active{color:#dff6ff;background:#41b7e617;border-color:#62cff92e}.source-view{grid-template-rows:42px minmax(0,1fr);min-width:0;min-height:0;display:grid}.source-view__toolbar{color:#637a8c;border-bottom:1px solid #b4c9d81a;justify-content:space-between;align-items:center;gap:16px;min-width:0;padding:0 12px 0 16px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:9px;display:flex}.source-view__toolbar>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.source-view__toolbar button{color:#8fa6b7;cursor:pointer;background:#ffffff06;border:1px solid #b4c9d824;border-radius:5px;min-width:58px;height:28px;font:650 9px/1 inherit}.source-view__toolbar button:hover:not(:disabled){color:#e5f3f9;background:#ffffff0e}.source-view__toolbar button:disabled{cursor:default;opacity:.45}.source-view__content{scrollbar-color:#93b1c452 transparent;scrollbar-width:thin;background:#03080c6b;min-width:0;min-height:0;overflow:auto}.source-view__content .shiki{tab-size:4;min-width:max-content;min-height:100%;margin:0;padding:18px 0 24px;font:11px/1.68 ui-monospace,SFMono-Regular,Consolas,Liberation Mono,monospace;background:0 0!important}.source-view__content .shiki code{counter-reset:source-line}.source-view__content .shiki .line{width:100%;min-height:1.68em;padding:0 24px 0 62px;display:inline-block;position:relative}.source-view__content .shiki .line:before{color:#334755;content:counter(source-line);counter-increment:source-line;text-align:right;-webkit-user-select:none;user-select:none;width:44px;position:absolute;left:0}.panel-message,.inspector-loading{color:#708698;text-align:center;place-items:center;height:100%;min-height:160px;margin:0;padding:24px;font-size:11px;display:grid}.inspector-loading[hidden]{display:none}.inspector-workspace{min-width:0;height:100%;min-height:0;position:relative}.inspector-host{width:100%;height:100%;min-height:0}.inspector-workspace .zenfg-inspector{--zenfg-inspector-background:transparent;--zenfg-inspector-surface:#10181fd1}.example-error{z-index:10;border:1px solid var(--line);width:min(520px,100% - 40px);box-shadow:var(--playground-overlay-shadow);text-align:center;background:#050c12e6;border-radius:12px;padding:28px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.example-error[hidden]{display:none}.example-error span{color:#7491a5;letter-spacing:.14em;text-transform:uppercase;font-size:9px;font-weight:760}.example-error h1{margin:10px 0 22px;font-size:20px}.example-error a{color:#a5e5ff;font-size:12px}.playground-footer{z-index:4;color:#405666;letter-spacing:.04em;pointer-events:none;justify-content:space-between;gap:16px;font-size:9px;font-weight:620;display:flex;position:absolute;bottom:16px;left:24px;right:24px}@media (max-width:820px){.playground-header{grid-template-columns:auto minmax(0,1fr);gap:10px}.example-identity{grid-area:2/1/auto/-1;justify-self:stretch}.example-picker{width:100%;max-width:none}.tool-launcher{justify-self:end}.tool-overlay{inset:128px 16px 38px}.playground-controls{width:min(280px,100% - 32px);max-height:calc(100% - 182px);top:128px;right:16px}.effect-status{bottom:38px;left:16px}.playground-footer{left:16px;right:16px}.playground-footer span:last-child{display:none}}@media (max-width:560px){.playground-header{top:12px;left:12px;right:12px}.playground-brand__section,.tool-launcher__label,.tool-launcher button>span:last-child,.playground-brand__divider{display:none}.tool-launcher button{width:38px;padding:0}.example-identity__eyebrow{display:none}.example-picker__listbox{width:100%;max-height:calc(100svh - 132px);left:0;right:auto}.tool-overlay{border-radius:10px;inset:112px 8px 8px}.playground-controls{width:auto;max-height:calc(100% - 132px);top:112px;left:12px;right:12px}.tool-overlay__header{min-height:56px;padding-left:14px}.code-workspace{grid-template-rows:auto minmax(0,1fr);grid-template-columns:1fr}.source-files{border-bottom:1px solid #b4c9d81f;border-right:0;flex-direction:row;padding:7px;overflow-x:auto}.source-files button{flex:none;width:auto}.source-view__toolbar{padding-left:10px}.source-view__content .shiki{font-size:10px}.source-view__content .shiki .line{padding-left:50px;padding-right:16px}.source-view__content .shiki .line:before{width:34px}.effect-status,.playground-footer{display:none}}@media (prefers-reduced-motion:reduce){.effect-stage,.tool-launcher button,.playground-controls,.example-picker__trigger,.example-picker__chevron,.example-picker__option{transition:none}.tool-overlay{animation:none}}