.icon-playground:where(.astro-iypdpdsb){--pg-radius:.625rem;--pg-radius-sm:.375rem;--pg-accent:var(--sl-color-accent,#4f46e5);--pg-accent-glow:color-mix(in srgb, var(--pg-accent) 15%, transparent);--pg-text:var(--sl-color-text,#1c1c1e);--pg-transition:.2s cubic-bezier(.4, 0, .2, 1);--pg-border:#d9dce0;--pg-surface:#f5f6f8;--pg-surface-raised:#e2e4e8;--pg-text-muted:#6b7280;--pg-code-bg:#1a1b26;--pg-code-text:#cdd6f4;--pg-input-bg:#fff}:root[data-theme=dark] .icon-playground:where(.astro-iypdpdsb){--pg-border:#2e3440;--pg-surface:#1a1d24;--pg-surface-raised:#22262e;--pg-text-muted:#8b929e;--pg-code-bg:#13151a;--pg-code-text:#cdd6f4;--pg-input-bg:#14161b}.icon-playground:where(.astro-iypdpdsb){grid-template:"controls preview""controls bgbar""controls code""controls meta""variants variants"/340px 1fr;gap:1.25rem;margin-block:1.5rem;font-size:.875rem;display:grid}@media (width<=800px){.icon-playground:where(.astro-iypdpdsb){grid-template-columns:1fr;grid-template-areas:"controls""preview""bgbar""code""meta""variants"}}.pg-controls:where(.astro-iypdpdsb){grid-area:controls}.pg-preview-wrap:where(.astro-iypdpdsb){grid-area:preview}.pg-bg-bar:where(.astro-iypdpdsb){grid-area:bgbar}.pg-code-wrap:where(.astro-iypdpdsb){grid-area:code}.pg-meta-wrap:where(.astro-iypdpdsb){grid-area:meta}.pg-variants-wrap:where(.astro-iypdpdsb){grid-area:variants}.pg-controls:where(.astro-iypdpdsb){background:var(--pg-surface);border:1px solid var(--pg-border);border-radius:var(--pg-radius);top:calc(var(--sl-nav-height,3.5rem) + 1rem);flex-direction:column;align-self:start;gap:1rem;padding:1.25rem;display:flex;position:sticky}@media (width<=800px){.pg-controls:where(.astro-iypdpdsb){position:static}}.pg-controls-header:where(.astro-iypdpdsb){text-transform:uppercase;letter-spacing:.08em;color:var(--pg-text-muted);align-items:center;gap:.5rem;font-size:.6875rem;font-weight:700;display:flex}.pg-controls-icon:where(.astro-iypdpdsb){opacity:.5}.pg-divider:where(.astro-iypdpdsb){background:var(--pg-border);height:1px;margin:.125rem 0}.pg-field:where(.astro-iypdpdsb){flex-direction:column;gap:.375rem;display:flex}.pg-field--row:where(.astro-iypdpdsb){flex-direction:row;align-items:center;gap:.75rem}.pg-label:where(.astro-iypdpdsb){color:var(--pg-text);align-items:center;gap:.5rem;font-size:.8125rem;font-weight:600;display:flex}.pg-badge:where(.astro-iypdpdsb){background:var(--pg-accent-glow);color:var(--pg-accent);font-size:.6875rem;font-weight:600;font-family:var(--sl-font-mono,monospace);letter-spacing:0;border-radius:9999px;align-items:center;padding:.1rem .5rem;display:inline-flex}.pg-hint:where(.astro-iypdpdsb){color:var(--pg-text-muted);margin:0;font-size:.75rem;line-height:1.45}.pg-hint:where(.astro-iypdpdsb) code:where(.astro-iypdpdsb){background:var(--pg-surface-raised);border-radius:3px;padding:.1em .35em;font-size:.8em}.pg-input-wrap:where(.astro-iypdpdsb){align-items:center;display:flex;position:relative}.pg-input-icon:where(.astro-iypdpdsb){color:var(--pg-text-muted);pointer-events:none;opacity:.6;position:absolute;left:.625rem}.pg-input:where(.astro-iypdpdsb){border:1px solid var(--pg-border);border-radius:var(--pg-radius-sm);background:var(--pg-input-bg);width:100%;color:var(--pg-text);font-family:var(--sl-font-mono,monospace);transition:border-color var(--pg-transition), box-shadow var(--pg-transition);box-sizing:border-box;padding:.5rem .65rem;font-size:.8125rem;line-height:1.5}.pg-input--with-icon:where(.astro-iypdpdsb){padding-left:2.125rem}.pg-input:where(.astro-iypdpdsb):focus{border-color:var(--pg-accent);box-shadow:0 0 0 3px var(--pg-accent-glow);outline:none}.pg-input:where(.astro-iypdpdsb)::placeholder{color:var(--pg-text-muted);opacity:.5}.pg-input--hex:where(.astro-iypdpdsb){text-align:center;flex-shrink:0;width:90px}.pg-range:where(.astro-iypdpdsb){-webkit-appearance:none;appearance:none;background:var(--pg-border);cursor:pointer;border-radius:3px;outline:none;width:100%;height:6px}.pg-range:where(.astro-iypdpdsb)::-webkit-slider-thumb{-webkit-appearance:none;background:var(--pg-accent);border:2px solid var(--pg-surface);cursor:pointer;width:18px;height:18px;transition:transform var(--pg-transition), box-shadow var(--pg-transition);border-radius:50%;box-shadow:0 1px 4px #0003}.pg-range:where(.astro-iypdpdsb)::-webkit-slider-thumb:hover{box-shadow:0 0 0 4px var(--pg-accent-glow), 0 1px 4px #0003;transform:scale(1.15)}.pg-range:where(.astro-iypdpdsb)::-moz-range-thumb{background:var(--pg-accent);border:2px solid var(--pg-surface);cursor:pointer;border-radius:50%;width:18px;height:18px;box-shadow:0 1px 4px #0003}.pg-range:where(.astro-iypdpdsb)::-moz-range-track{background:var(--pg-border);border-radius:3px;height:6px}.pg-range-ticks:where(.astro-iypdpdsb){color:var(--pg-text-muted);opacity:.6;justify-content:space-between;margin-top:-.125rem;font-size:.6875rem;display:flex}.pg-color-wrap:where(.astro-iypdpdsb){flex:1;align-items:center;gap:.5rem;display:flex}.pg-color:where(.astro-iypdpdsb){border:2px solid var(--pg-border);border-radius:var(--pg-radius-sm);cursor:pointer;width:2rem;height:2rem;transition:border-color var(--pg-transition), box-shadow var(--pg-transition);background:0 0;flex-shrink:0;padding:0}.pg-color:where(.astro-iypdpdsb):hover{border-color:var(--pg-accent);box-shadow:0 0 0 3px var(--pg-accent-glow)}.pg-bg-bar:where(.astro-iypdpdsb){align-items:center;gap:.75rem;margin-top:-1.25rem;padding:0;display:flex}.pg-bg-buttons:where(.astro-iypdpdsb){align-items:baseline;gap:.375rem;display:flex}.pg-bg-btn:where(.astro-iypdpdsb){box-sizing:border-box;border-radius:var(--pg-radius-sm);border:1px solid var(--pg-border);cursor:pointer;min-width:0;height:2rem;color:var(--pg-text);background:var(--pg-input-bg);transition:all var(--pg-transition);white-space:nowrap;justify-content:center;align-items:center;gap:.375rem;padding:.35rem .65rem;font-size:.75rem;font-weight:500;display:flex}.pg-bg-swatch:where(.astro-iypdpdsb){border:1px solid var(--pg-border);border-radius:3px;flex-shrink:0;width:14px;height:14px}.pg-bg-swatch--white:where(.astro-iypdpdsb){background:#fff}.pg-bg-swatch--dark:where(.astro-iypdpdsb){background:#1e1e2e}.pg-bg-swatch--check:where(.astro-iypdpdsb){background:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 0 0/6px 6px}.pg-bg-btn:where(.astro-iypdpdsb).is-active{background:var(--pg-accent);color:#fff;border-color:var(--pg-accent)}.pg-bg-btn:where(.astro-iypdpdsb).is-active .pg-bg-swatch:where(.astro-iypdpdsb){border-color:#ffffff4d}.pg-bg-btn:where(.astro-iypdpdsb):not(.is-active):hover{border-color:var(--pg-accent);background:var(--pg-accent-glow)}.pg-preview-wrap:where(.astro-iypdpdsb){align-items:stretch;display:flex}.pg-preview:where(.astro-iypdpdsb){border:1px solid var(--pg-border);border-radius:var(--pg-radius);width:100%;min-height:200px;transition:background var(--pg-transition);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.pg-preview:where(.astro-iypdpdsb):before{content:"";opacity:.35;pointer-events:none;background-image:radial-gradient(circle at 1px 1px,#9ca3af .5px,#0000 0);background-size:24px 24px;position:absolute;inset:0}.pg-preview:where(.astro-iypdpdsb).bg-white{background:#fff}.pg-preview:where(.astro-iypdpdsb).bg-dark{background:#1e1e2e}.pg-preview:where(.astro-iypdpdsb).bg-dark:before{opacity:.15;background-image:radial-gradient(circle at 1px 1px,#ffffff4d .5px,#0000 0)}.pg-preview:where(.astro-iypdpdsb).bg-checker{background-image:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%);background-size:20px 20px}.pg-preview:where(.astro-iypdpdsb).bg-checker:before{display:none}#pg-icon-el:where(.astro-iypdpdsb){z-index:1;filter:drop-shadow(0 2px 8px #00000014);line-height:1;transition:transform .3s cubic-bezier(.4,0,.2,1);display:inline-block;position:relative}.pg-error:where(.astro-iypdpdsb){color:var(--sl-color-red,#dc2626);text-align:center;z-index:1;margin:0;padding:1rem;font-size:.8125rem;position:relative}.pg-code-wrap:where(.astro-iypdpdsb){border:1px solid var(--pg-border);border-radius:var(--pg-radius);overflow:hidden}.pg-tabs:where(.astro-iypdpdsb){border-bottom:1px solid var(--pg-border);background:var(--pg-surface-raised);gap:0;padding:0 .25rem;display:flex}.pg-tab:where(.astro-iypdpdsb){cursor:pointer;color:var(--pg-text-muted);transition:color var(--pg-transition), border-color var(--pg-transition);letter-spacing:.01em;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:.6rem .875rem;font-size:.75rem;font-weight:600}.pg-tab:where(.astro-iypdpdsb).is-active{color:var(--pg-accent);border-bottom-color:var(--pg-accent)}.pg-tab:where(.astro-iypdpdsb):hover:not(.is-active){color:var(--pg-text)}.pg-pre-wrap:where(.astro-iypdpdsb){position:relative}.pg-copy-btn:where(.astro-iypdpdsb){z-index:2;border-radius:var(--pg-radius-sm);color:#cdd6f499;cursor:pointer;transition:all var(--pg-transition);backdrop-filter:blur(4px);background:#0000004d;border:1px solid #ffffff1a;align-items:center;gap:.375rem;padding:.25rem .6rem;font-size:.6875rem;font-weight:500;display:inline-flex;position:absolute;top:.5rem;right:.5rem}.pg-copy-icon:where(.astro-iypdpdsb){flex-shrink:0}.pg-copy-btn:where(.astro-iypdpdsb):hover{color:#cdd6f4f2;background:#00000080;border-color:#fff3}.pg-copy-btn:where(.astro-iypdpdsb).is-copied{color:#4ade80;background:#16a34a40;border-color:#16a34a4d}.pg-pre:where(.astro-iypdpdsb){background:var(--pg-code-bg);font-family:var(--sl-font-mono,monospace);margin:0;padding:.875rem 1rem;font-size:.8125rem;line-height:1.7;overflow-x:auto}.pg-pre:where(.astro-iypdpdsb) code:where(.astro-iypdpdsb){color:var(--pg-code-text);white-space:pre-wrap;word-break:break-all;background:0 0;padding:0;display:block}.pg-section-title:where(.astro-iypdpdsb){text-transform:uppercase;letter-spacing:.06em;color:var(--pg-text-muted);align-items:center;gap:.5rem;margin:0 0 .75rem;font-size:.6875rem;font-weight:700;display:flex}.pg-section-icon:where(.astro-iypdpdsb){opacity:.5}.pg-meta-wrap:where(.astro-iypdpdsb){background:var(--pg-surface);border:1px solid var(--pg-border);border-radius:var(--pg-radius);padding:1rem 1.25rem}.pg-meta-list:where(.astro-iypdpdsb){grid-template-columns:auto 1fr;gap:.5rem 1.25rem;margin:0;font-size:.8125rem;display:grid}.pg-meta-list:where(.astro-iypdpdsb) dt:where(.astro-iypdpdsb){color:var(--pg-text-muted);white-space:nowrap;font-size:.75rem;font-weight:600}.pg-meta-list:where(.astro-iypdpdsb) dd:where(.astro-iypdpdsb){color:var(--pg-text);word-break:break-word;margin:0}.pg-variants-wrap:where(.astro-iypdpdsb){background:var(--pg-surface);border:1px solid var(--pg-border);border-radius:var(--pg-radius);padding:1.25rem}.pg-variants-grid:where(.astro-iypdpdsb){flex-wrap:wrap;gap:.5rem;display:flex}.pg-variant:where(.astro-iypdpdsb){border:1px solid var(--pg-border);border-radius:var(--pg-radius-sm);background:var(--pg-input-bg);cursor:pointer;transition:all var(--pg-transition);flex-direction:column;align-items:center;gap:.35rem;width:72px;padding:.6rem .5rem .5rem;display:flex}.pg-variant:where(.astro-iypdpdsb):hover{border-color:var(--pg-accent);box-shadow:0 0 0 3px var(--pg-accent-glow);transform:translateY(-1px)}.pg-variant:where(.astro-iypdpdsb):active{transform:translateY(0)}.pg-variant-name:where(.astro-iypdpdsb){color:var(--pg-text-muted);text-align:center;text-overflow:ellipsis;white-space:nowrap;width:100%;font-size:.625rem;overflow:hidden}