.playground-shell{--lab-line:var(--line-soft);--lab-muted:var(--muted);--lab-panel:var(--surface);--lab-panel-2:var(--surface-2);--lab-code:var(--ink);--lab-subtle:var(--ink-soft);--lab-raised:var(--surface-3);--lab-code-bg:#f4f7fb;--lab-code-gutter:#e9eef6;--lab-preview-bg:#d9e2ee;--lab-border:#9aa8bb;--lab-scroll-track:#dfe6f0;--lab-scroll-thumb:#8796aa;--lab-scroll-thumb-hover:#62738b;--lab-shadow:0 18px 48px #1f2d432e;background:var(--lab-panel);min-height:780px;color:var(--lab-code);overflow:hidden}[data-theme=dark] .playground-shell{--lab-code-bg:#080f1c;--lab-code-gutter:#0a1220;--lab-preview-bg:#111a2a;--lab-border:#4a5b77;--lab-scroll-track:#0a1120;--lab-scroll-thumb:#40516e;--lab-scroll-thumb-hover:#61728f;--lab-shadow:0 18px 48px #00000061}.playground-toolbar{z-index:4;border-bottom:1px solid var(--lab-line);background:var(--lab-panel-2);align-items:center;gap:.75rem;min-height:64px;padding:.65rem .75rem;display:flex;position:relative}.source-picker{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.55rem;min-width:min(390px,42vw);display:grid;position:relative}.source-picker>span{color:var(--lab-muted);font:750 .68rem var(--font-mono);text-transform:uppercase;letter-spacing:.08em}.source-combobox{border:1px solid var(--lab-border);background:var(--lab-panel);min-width:0;height:40px;color:var(--lab-code);border-radius:9px;grid-template-columns:32px minmax(0,1fr) 34px;align-items:center;display:grid;position:relative}.source-combobox:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent)}.source-combobox>svg{color:var(--lab-muted);pointer-events:none;justify-self:end}.source-combobox input{width:100%;min-width:0;height:38px;color:var(--lab-code);background:0 0;border:0;outline:0;padding:0 .5rem;font-size:.76rem;font-weight:720}.source-combobox input::placeholder{color:var(--lab-muted);opacity:.85}.source-combobox input::-webkit-search-cancel-button{display:none}.source-combobox__toggle{width:30px;height:30px;color:var(--lab-muted);cursor:pointer;background:0 0;border:0;border-radius:7px;place-items:center;padding:0;display:grid}.source-combobox__toggle:hover{background:var(--lab-raised);color:var(--lab-code)}.source-combobox__toggle[aria-expanded=true] svg{transform:rotate(180deg)}.source-options{z-index:40;border:1px solid var(--lab-border);background:var(--lab-panel);width:min(430px,100vw - 24px);max-height:min(390px,100vh - 150px);box-shadow:var(--lab-shadow);border-radius:13px;padding:.4rem;position:absolute;top:calc(100% + 9px);right:0;overflow-y:auto}.source-options__meta{z-index:1;background:var(--lab-panel);color:var(--lab-muted);font:750 .62rem var(--font-mono);letter-spacing:.06em;text-transform:uppercase;justify-content:space-between;align-items:center;padding:.7rem .65rem .55rem;display:flex;position:sticky;top:-.4rem}.source-options__meta small{background:var(--lab-panel-2);min-width:24px;color:var(--lab-muted);text-align:center;border-radius:999px;padding:.12rem .32rem}.source-options [role=option]{width:100%;min-height:54px;color:var(--lab-code);text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:9px;justify-content:space-between;align-items:center;gap:.7rem;padding:.5rem .65rem;display:flex}.source-options [role=option][data-active=true]{border-color:color-mix(in srgb, var(--blue) 45%, var(--lab-line));background:color-mix(in srgb, var(--blue) 10%, var(--lab-panel))}.source-options [role=option][aria-selected=true]{color:var(--blue-strong)}.source-options [role=option]>span{gap:.18rem;min-width:0;display:grid}.source-options [role=option] strong{text-overflow:ellipsis;white-space:nowrap;font-size:.74rem;overflow:hidden}.source-options [role=option] small{color:var(--lab-muted);font:650 .6rem var(--font-mono);text-transform:capitalize}.source-options__empty{color:var(--lab-muted);text-align:center;margin:0;padding:1.2rem .75rem;font-size:.7rem;line-height:1.5}.local-state{color:var(--lab-muted);font:680 .68rem var(--font-mono);white-space:nowrap;align-items:center;gap:.45rem;display:inline-flex}.local-state__dot{background:#62dbaa;border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 4px #62dbaa17}.playground-actions{align-items:center;gap:.35rem;margin-left:auto;display:flex}.tool-button,.run-button,.export-menu summary{border:1px solid var(--lab-border);background:var(--lab-panel);min-height:38px;color:var(--lab-code);cursor:pointer;white-space:nowrap;border-radius:9px;justify-content:center;align-items:center;gap:.38rem;padding:0 .65rem;font-size:.72rem;font-weight:760;display:inline-flex}.tool-button:hover,.export-menu summary:hover{border-color:var(--blue);background:var(--lab-raised)}.run-button{color:#081020;background:#7d88ff;border-color:#8994ff;min-width:94px}.run-button:hover{background:#96a0ff}.run-button kbd{font:700 .6rem var(--font-mono);border:1px solid #08102047;border-radius:4px;padding:.08rem .28rem}.export-menu{position:relative}.export-menu summary{list-style:none}.export-menu summary::-webkit-details-marker{display:none}.export-menu>div{z-index:30;border:1px solid var(--lab-border);background:var(--lab-panel);width:240px;box-shadow:var(--lab-shadow);border-radius:12px;gap:.3rem;padding:.4rem;display:grid;position:absolute;top:calc(100% + 8px);right:0}.export-menu>div button{min-height:54px;color:var(--lab-code);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:8px;align-items:center;gap:.65rem;padding:.5rem;display:flex}.export-menu>div button:hover{background:var(--lab-raised)}.export-menu>div button span{gap:.12rem;display:grid}.export-menu>div strong{font-size:.75rem}.export-menu>div small{color:var(--lab-muted);font-size:.65rem}.secret-guard{background:color-mix(in srgb, var(--amber) 22%, var(--lab-panel));min-height:60px;color:var(--ink);border-bottom:1px solid #ffd16757;align-items:center;gap:.75rem;padding:.65rem .8rem;display:flex}.secret-guard>div{gap:.18rem;display:grid}.secret-guard strong{font-size:.78rem}.secret-guard span{color:var(--lab-muted);font-size:.69rem}.secret-guard button{width:34px;height:34px;color:inherit;cursor:pointer;background:0 0;border:0;border-radius:8px;place-items:center;margin-left:auto;display:grid}.mobile-pane-switch{display:none}.lab-workspace{grid-template-columns:minmax(0, var(--editor-size)) 8px minmax(0, 1fr);height:clamp(680px,100vh - 180px,880px);min-height:680px;display:grid}.editor-pane,.preview-pane{min-width:0;min-height:0}.editor-pane{background:var(--lab-panel);grid-template-rows:49px 34px minmax(0,1fr) 28px;display:grid}.file-tabs{border-bottom:1px solid var(--lab-line);background:var(--lab-panel-2);align-items:center;min-width:0;display:flex}.file-tabs>div:first-child{scrollbar-width:none;align-self:stretch;min-width:0;display:flex;overflow-x:auto}.file-tabs>div:first-child::-webkit-scrollbar{display:none}.file-tabs [role=tab]{border:0;border-right:1px solid var(--lab-line);min-width:104px;color:var(--lab-muted);font:720 .69rem var(--font-mono);cursor:pointer;background:0 0;justify-content:center;align-items:center;gap:.38rem;padding:0 .65rem;display:flex;position:relative}.file-tabs [role=tab]:after{content:"";background:0 0;height:2px;position:absolute;inset:auto 0 0}.file-tabs [role=tab][aria-selected=true]{background:var(--lab-panel);color:var(--lab-code)}.file-tabs [role=tab][aria-selected=true]:after{background:#8490ff}.file-tabs [role=tab]>span{color:#ff967f;font-weight:900}.file-tabs [role=tab]>span[data-file=css]{color:#7bdcb4}.file-tabs [role=tab]>span[data-file=javascript]{color:#ffd167}.file-tabs [role=tab] small{background:var(--lab-raised);min-width:20px;color:var(--lab-muted);border-radius:999px;padding:.08rem .25rem;font-size:.56rem}.editor-actions{gap:.2rem;margin-left:auto;padding:0 .35rem;display:flex}.editor-actions button,.preview-toolbar button,.console-panel button{min-height:32px;color:var(--lab-muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:7px;justify-content:center;align-items:center;gap:.32rem;padding:0 .48rem;font-size:.65rem;font-weight:720;display:inline-flex}.editor-actions button:hover,.preview-toolbar button:hover,.console-panel button:hover:not(:disabled){border-color:var(--lab-border);background:var(--lab-raised);color:var(--lab-code)}.editor-actions button:disabled,.console-panel button:disabled{cursor:default;opacity:.45}.editor-titlebar{border-bottom:1px solid var(--lab-line);color:var(--lab-muted);font:600 .61rem var(--font-mono);justify-content:space-between;align-items:center;gap:1rem;padding:0 .75rem;display:flex}.editor-titlebar span:first-child{color:var(--lab-subtle);align-items:center;gap:.35rem;display:inline-flex}.code-editor{background:var(--lab-code-bg);grid-template-columns:52px minmax(0,1fr);min-height:0;display:grid;overflow:hidden}.line-numbers{border-right:1px solid var(--lab-line);background:var(--lab-code-gutter);color:var(--lab-muted);font:500 .76rem/1.7 var(--font-mono);text-align:right;user-select:none;padding:16px 0;overflow:hidden}.line-numbers span{height:1.7em;padding-right:12px;display:block}.code-editor textarea{resize:none;width:100%;min-width:0;height:100%;color:var(--lab-code);caret-color:var(--blue);font:500 .76rem/1.7 var(--font-mono);tab-size:2;white-space:pre;scrollbar-color:var(--lab-scroll-thumb) var(--lab-scroll-track);background:0 0;border:0;outline:0;padding:16px 18px}.code-editor textarea:focus{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--blue) 45%, transparent)}.editor-statusbar{border-top:1px solid var(--lab-line);background:var(--lab-panel-2);color:var(--lab-muted);font:600 .58rem var(--font-mono);align-items:center;gap:.8rem;padding:0 .65rem;display:flex}.editor-statusbar__hint{margin-left:auto}.workspace-resizer{z-index:3;background:var(--lab-raised);cursor:col-resize;touch-action:none;place-items:center;display:grid;position:relative}.workspace-resizer:hover,.workspace-resizer:focus-visible{background:#8490ff}.workspace-resizer i{background:var(--lab-muted);border-radius:99px;width:2px;height:38px}.preview-pane{background:var(--lab-preview-bg);grid-template-rows:49px minmax(0,1fr);display:grid}.preview-pane.has-console{grid-template-rows:49px minmax(300px,1fr) 180px}.preview-toolbar{border-bottom:1px solid var(--lab-line);background:var(--lab-panel-2);align-items:center;gap:.4rem;min-width:0;padding:0 .45rem;display:flex}.device-switcher{align-items:center;gap:.12rem;display:flex}.preview-toolbar button[aria-pressed=true]{border-color:var(--blue);background:color-mix(in srgb, var(--blue) 12%, var(--lab-panel));color:var(--lab-code)}.viewport-readout{color:var(--lab-muted);font:600 .6rem var(--font-mono);white-space:nowrap;padding-left:.35rem}.preview-actions{align-items:center;gap:.1rem;min-width:0;margin-left:auto;display:flex}.preview-actions .network-on{color:#70e3b4}.preview-actions button b{color:#111827;min-width:17px;height:17px;font:850 .52rem var(--font-mono);background:#ff8d7a;border-radius:999px;place-items:center;display:grid}.preview-viewport{background:linear-gradient(45deg, color-mix(in srgb, var(--lab-muted) 10%, transparent) 25%, transparent 25%) 0 0 / 20px 20px, linear-gradient(-45deg, color-mix(in srgb, var(--lab-muted) 10%, transparent) 25%, transparent 25%) 0 10px / 20px 20px, var(--lab-preview-bg);scrollbar-color:var(--lab-scroll-thumb) var(--lab-scroll-track);justify-content:center;align-items:stretch;min-width:0;min-height:0;padding:12px;display:flex;overflow:auto}.preview-device{width:var(--preview-width,100%);min-width:var(--preview-width,0);border:1px solid var(--lab-border);background:#fff;border-radius:10px;grid-template-rows:32px minmax(0,1fr);min-height:100%;display:grid;overflow:hidden;box-shadow:0 16px 55px #00000047}.preview-device--responsive{min-width:0}.preview-browser-bar{color:#738096;background:#f1f4f8;border-bottom:1px solid #d5dbe5;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.5rem;padding:0 .55rem;display:grid}.preview-browser-bar>span{gap:4px;display:flex}.preview-browser-bar i{background:#ff806d;border-radius:50%;width:7px;height:7px}.preview-browser-bar i:nth-child(2){background:#ffd167}.preview-browser-bar i:nth-child(3){background:#62dbaa}.preview-browser-bar p{color:#6f7b8d;min-width:0;font:600 .55rem var(--font-mono);text-align:center;text-overflow:ellipsis;white-space:nowrap;margin:0;overflow:hidden}.preview-device iframe{background:#fff;border:0;width:100%;height:100%;min-height:0}.console-panel{border-top:1px solid var(--lab-border);background:var(--lab-code-bg);grid-template-rows:34px minmax(0,1fr);min-height:0;display:grid}.console-panel>header{border-bottom:1px solid var(--lab-line);color:var(--lab-code);font:720 .65rem var(--font-mono);justify-content:space-between;align-items:center;padding:0 .45rem 0 .65rem;display:flex}.console-panel>header>span,.console-panel>header>div{align-items:center;gap:.4rem;display:flex}.console-panel>header small{color:var(--lab-muted);font-size:.56rem;font-weight:600}.console-output{scrollbar-color:var(--lab-scroll-thumb) var(--lab-scroll-track);min-height:0;padding:.25rem 0;overflow:auto}.console-output>p{color:var(--lab-muted);font:500 .67rem var(--font-mono);align-items:center;gap:.45rem;margin:0;padding:.65rem;display:flex}.console-output>div{border-bottom:1px solid var(--lab-line);color:var(--lab-subtle);grid-template-columns:24px minmax(0,1fr);gap:.2rem;padding:.4rem .6rem;display:grid}.console-output>div>span{color:var(--blue);font:850 .8rem var(--font-mono)}.console-output>div[data-level=warn]{background:color-mix(in srgb, var(--amber) 12%, transparent);color:var(--warning)}.console-output>div[data-level=warn]>span{color:var(--warning)}.console-output>div[data-level=error]{background:color-mix(in srgb, var(--coral) 12%, transparent);color:var(--danger)}.console-output>div[data-level=error]>span{color:var(--danger)}.console-output pre{overflow-wrap:anywhere;color:inherit;font:500 .67rem/1.45 var(--font-mono);white-space:pre-wrap;margin:0}.playground-footer{border-top:1px solid var(--lab-line);background:var(--lab-panel-2);min-height:46px;color:var(--lab-muted);font:620 .63rem var(--font-mono);justify-content:space-between;align-items:center;gap:1rem;padding:0 .8rem;display:flex}.playground-footer div,.playground-footer p{align-items:center;gap:.4rem;display:flex}.playground-footer div{min-width:0}.playground-footer p{color:var(--success);white-space:nowrap;margin:0}.preview-is-focused .preview-pane{z-index:200;border:2px solid var(--lab-border);box-shadow:var(--lab-shadow);border-radius:14px;position:fixed;inset:12px;overflow:hidden}:where(.source-options,.code-editor textarea,.preview-viewport,.console-output,.preview-toolbar){scrollbar-width:thin;scrollbar-color:var(--lab-scroll-thumb) var(--lab-scroll-track)}:where(.source-options,.code-editor textarea,.preview-viewport,.console-output,.preview-toolbar)::-webkit-scrollbar{width:11px;height:11px}:where(.source-options,.code-editor textarea,.preview-viewport,.console-output,.preview-toolbar)::-webkit-scrollbar-track{background:var(--lab-scroll-track)}:where(.source-options,.code-editor textarea,.preview-viewport,.console-output,.preview-toolbar)::-webkit-scrollbar-thumb{border:3px solid var(--lab-scroll-track);background:var(--lab-scroll-thumb);border-radius:999px;min-height:36px}:where(.source-options,.code-editor textarea,.preview-viewport,.console-output,.preview-toolbar)::-webkit-scrollbar-thumb:hover{background:var(--lab-scroll-thumb-hover)}:where(.source-options,.code-editor textarea,.preview-viewport,.console-output,.preview-toolbar)::-webkit-scrollbar-corner{background:var(--lab-scroll-track)}@media (width<=1180px){.local-state,.tool-button span,.export-menu summary span{display:none}.tool-button{width:38px;padding:0}.device-switcher button span,.preview-actions button span{display:none}.file-tabs [role=tab]{min-width:84px}.editor-actions button{width:34px;padding:0;font-size:0}}@media (width<=820px){.playground-toolbar{flex-wrap:wrap;align-items:stretch}.source-picker{width:100%}.playground-actions{justify-content:flex-end;width:100%;margin:0}.playground-actions .tool-button{flex:1;width:auto}.playground-actions .tool-button span,.export-menu summary span{display:inline}.mobile-pane-switch{border-bottom:1px solid var(--lab-line);background:var(--lab-panel-2);grid-template-columns:1fr 1fr;height:46px;padding:.3rem;display:grid}.mobile-pane-switch button{color:var(--lab-muted);background:0 0;border:1px solid #0000;border-radius:7px;justify-content:center;align-items:center;gap:.4rem;font-size:.72rem;font-weight:780;display:flex;position:relative}.mobile-pane-switch button[aria-selected=true]{border-color:var(--blue);background:color-mix(in srgb, var(--blue) 12%, var(--lab-panel));color:var(--lab-code)}.mobile-pane-switch i{background:#ff806d;border-radius:50%;width:7px;height:7px}.lab-workspace{height:min(760px,100vh - 150px);min-height:620px;display:block}.lab-workspace .editor-pane,.lab-workspace .preview-pane{height:100%}.lab-workspace[data-mobile-pane=code] .preview-pane,.lab-workspace[data-mobile-pane=preview] .editor-pane,.workspace-resizer{display:none}.preview-toolbar{overflow-x:auto}.playground-footer p{display:none}}@media (width<=540px){.playground-actions .tool-button span,.export-menu summary span{display:none}.playground-actions .tool-button{flex:0 0 38px;width:38px}.run-button{min-width:82px}.run-button kbd,.editor-actions button:first-child{display:none}.file-tabs [role=tab]{min-width:76px}.file-tabs [role=tab] small,.viewport-readout{display:none}.preview-toolbar{gap:0}.device-switcher button,.preview-actions button{padding:0 .4rem}.preview-actions{margin-left:.25rem}.preview-actions button:nth-child(2){display:none}.code-editor{grid-template-columns:44px minmax(0,1fr)}.line-numbers{font-size:.7rem}.code-editor textarea{padding-inline:12px;font-size:.72rem}.editor-statusbar__hint,.secret-guard span{display:none}}@media (prefers-reduced-motion:no-preference){.tool-button,.run-button,.preview-toolbar button,.file-tabs [role=tab]{transition:background var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease}}.lab-intro[data-astro-cid-rxmzdjr4]{border-bottom:2px solid var(--line);background:linear-gradient(115deg, color-mix(in srgb, var(--surface) 92%, transparent), transparent), radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--mint) 58%, transparent), transparent 42%);grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);align-items:end;gap:clamp(2rem,5vw,5rem);padding:clamp(2rem,5vw,4.5rem);display:grid}.lab-intro[data-astro-cid-rxmzdjr4] h1[data-astro-cid-rxmzdjr4]{letter-spacing:-.07em;max-width:12ch;margin:.55rem 0 1rem;font-size:clamp(3rem,6.5vw,6.8rem);line-height:.87}.lab-intro[data-astro-cid-rxmzdjr4] h1[data-astro-cid-rxmzdjr4] em[data-astro-cid-rxmzdjr4]{color:var(--blue-strong);font-style:normal}.lab-intro[data-astro-cid-rxmzdjr4]>div[data-astro-cid-rxmzdjr4]>p[data-astro-cid-rxmzdjr4]:last-child{max-width:67ch;color:var(--muted);margin:0;font-size:clamp(.95rem,1.5vw,1.08rem);line-height:1.65}.lab-intro[data-astro-cid-rxmzdjr4] ul[data-astro-cid-rxmzdjr4]{border:2px solid var(--line);background:var(--surface);box-shadow:5px 5px 0 var(--ink);border-radius:16px;margin:0;padding:0;list-style:none;display:grid;overflow:hidden}.lab-intro[data-astro-cid-rxmzdjr4] li[data-astro-cid-rxmzdjr4]{border-bottom:1px solid var(--line-soft);grid-template-columns:42px 1fr;align-items:center;gap:.65rem;min-height:66px;padding:.6rem .8rem;display:grid}.lab-intro[data-astro-cid-rxmzdjr4] li[data-astro-cid-rxmzdjr4]:last-child{border-bottom:0}.lab-intro[data-astro-cid-rxmzdjr4] li[data-astro-cid-rxmzdjr4]>strong[data-astro-cid-rxmzdjr4]{color:var(--blue-strong);font:850 .7rem var(--font-mono)}.lab-intro[data-astro-cid-rxmzdjr4] li[data-astro-cid-rxmzdjr4] span[data-astro-cid-rxmzdjr4]{color:var(--muted);gap:.12rem;font-size:.72rem;display:grid}.lab-intro[data-astro-cid-rxmzdjr4] li[data-astro-cid-rxmzdjr4] b[data-astro-cid-rxmzdjr4]{color:var(--ink);font-size:.82rem}@media (width<=900px){.lab-intro[data-astro-cid-rxmzdjr4]{grid-template-columns:1fr}.lab-intro[data-astro-cid-rxmzdjr4] ul[data-astro-cid-rxmzdjr4]{grid-template-columns:repeat(3,1fr)}.lab-intro[data-astro-cid-rxmzdjr4] li[data-astro-cid-rxmzdjr4]{border-right:1px solid var(--line-soft);border-bottom:0;grid-template-columns:1fr;align-content:center;min-width:0}.lab-intro[data-astro-cid-rxmzdjr4] li[data-astro-cid-rxmzdjr4]:last-child{border-right:0}}@media (width<=560px){.lab-intro[data-astro-cid-rxmzdjr4]{padding:1.6rem 1.2rem 2rem}.lab-intro[data-astro-cid-rxmzdjr4] h1[data-astro-cid-rxmzdjr4]{font-size:clamp(2.8rem,15vw,4.5rem)}.lab-intro[data-astro-cid-rxmzdjr4] ul[data-astro-cid-rxmzdjr4]{grid-template-columns:1fr}.lab-intro[data-astro-cid-rxmzdjr4] li[data-astro-cid-rxmzdjr4]{border-right:0;border-bottom:1px solid var(--line-soft);grid-template-columns:36px 1fr}}