.main-wide{max-width:none;padding:0}.icon-playground{--play-line:var(--site-line);background:var(--site-bg);min-height:calc(100vh - 64px);color:var(--site-text)}.icon-playground [hidden]{display:none!important}.play-head{border-bottom:1px solid var(--play-line);background:var(--site-surface);justify-content:space-between;align-items:center;height:100px;padding:18px 28px;display:flex}.play-head h1{margin:3px 0 0;font-size:22px;line-height:1.2}.play-head p{color:var(--site-muted);margin:5px 0 0;font-size:12px}.play-head a{border:1px solid var(--play-line);border-radius:8px;padding:7px 11px;font-size:12px}.play-shell{grid-template-columns:232px minmax(460px,1fr) 286px;min-height:calc(100vh - 64px);display:grid}.play-preview-controls,.play-inspector{background:var(--site-surface)}.play-preview-controls{border-right:1px solid var(--play-line);padding:18px 16px}.play-inspector{border-left:1px solid var(--play-line)}.play-results{width:100%;min-width:0;max-width:none;margin:0;padding:20px 24px 36px}.play-panel-title{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.play-panel-title button{color:var(--site-brand-strong);cursor:pointer;background:0 0;border:0}.play-field{color:var(--site-muted);gap:7px;margin:14px 0;font-size:11px;display:grid}.play-field>span:first-child{justify-content:space-between;display:flex}.play-field output{font:10px var(--site-mono);color:var(--site-faint)}.play-field input[type=range]{width:100%;accent-color:var(--site-brand-strong)}fieldset.play-field{border:0;padding:0}.play-field legend{margin-bottom:7px}.play-color{grid-template-columns:32px 1fr;gap:8px;display:grid}.play-color input{border:1px solid var(--play-line);border-radius:7px;width:32px;height:30px;padding:2px}.play-color output{border:1px solid var(--play-line);background:var(--site-soft);border-radius:7px;align-items:center;padding:0 9px;display:flex}.play-segment,.play-presets{background:var(--site-soft);border-radius:8px;grid-template-columns:repeat(3,1fr);gap:4px;padding:3px;display:grid}.play-presets{background:0 0;grid-template-columns:repeat(4,1fr);padding:0}.play-segment button,.play-presets button{height:28px;color:var(--site-muted);cursor:pointer;background:0 0;border:0;border-radius:6px}.play-presets button{border:1px solid var(--play-line);background:var(--site-surface)}.play-segment button.active,.play-presets button.active{color:var(--site-brand-strong);background:var(--site-surface);box-shadow:0 1px 4px #00000012}.play-details{border-top:1px solid var(--play-line);margin-top:14px;padding-top:12px;font-size:11px}.play-check{gap:7px;margin-top:12px;display:flex}.play-details small,.play-hint{color:var(--site-faint);font-size:10px;line-height:1.55;display:block}.play-hint{border:1px dashed var(--play-line);background:var(--site-soft);border-radius:8px;margin-top:20px;padding:10px}.play-search-row{grid-template-columns:minmax(0,1fr) auto;gap:8px;display:grid}.play-search{min-width:0;position:relative}.play-search span{color:var(--site-faint);font-size:21px;position:absolute;top:8px;left:14px}.play-search input{border:1px solid var(--play-line);background:var(--site-surface);width:100%;height:42px;color:var(--site-text);border-radius:10px;padding:0 14px 0 42px}.play-search-row>button,.play-load-more{border:1px solid var(--play-line);background:var(--site-surface);cursor:pointer;border-radius:9px;padding:0 15px}.play-sources{gap:6px;max-width:100%;margin:10px 0;padding-bottom:2px;display:flex;overflow-x:auto}.play-sources button{border:1px solid var(--play-line);background:var(--site-surface);cursor:pointer;border-radius:8px;flex:none;align-items:center;gap:6px;height:32px;padding:0 10px;display:flex}.play-sources small{background:var(--site-soft);width:20px;height:20px;font:8px var(--site-mono);border-radius:5px;place-items:center;display:grid}.play-sources button.active{border-color:var(--site-brand-strong);color:var(--site-brand-strong);background:color-mix(in srgb,var(--site-brand) 10%,var(--site-surface))}.play-filters{align-items:center;gap:8px;display:flex}.play-filters label{color:var(--site-faint);align-items:center;gap:5px;font-size:10px;display:flex}.play-filters select{border:1px solid var(--play-line);background:var(--site-surface);height:30px;color:var(--site-muted);border-radius:7px}.play-capability-filter{margin-left:auto}.play-result-meta{color:var(--site-faint);justify-content:space-between;margin:14px 0 10px;font-size:10.5px;display:flex}.play-error{color:#8b5d12;background:#fff8e8;border:1px solid #edc98f;border-radius:8px;justify-content:space-between;align-items:center;margin-bottom:10px;padding:8px 10px;font-size:11px;display:flex}.play-error button{color:inherit;cursor:pointer;background:0 0;border:0;text-decoration:underline}.play-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;display:grid}.play-card{border:1px solid var(--play-line);background:var(--site-surface);min-height:106px;color:var(--site-text);cursor:pointer;border-radius:10px;align-content:center;place-items:center;gap:8px;padding:10px 6px;display:grid;position:relative}.play-card:hover{transform:translateY(-1px);box-shadow:0 14px 30px -24px #0008}.play-card.selected{border-color:var(--site-brand-strong);box-shadow:0 0 0 2px color-mix(in srgb,var(--site-brand) 16%,transparent)}.play-card>small{font:8px var(--site-mono);color:var(--site-faint);position:absolute;top:6px;right:7px}.play-card>b{text-overflow:ellipsis;white-space:nowrap;max-width:92%;font-size:10.5px;overflow:hidden}.play-card-glyph{background:var(--site-soft);border-radius:8px;place-items:center;width:52px;height:48px;display:grid}.play-load-more{height:34px;margin:18px auto 0;display:block}.play-empty{text-align:center;max-width:620px;margin:44px auto}.play-empty-mark{background:color-mix(in srgb,var(--site-brand) 14%,transparent);width:48px;height:48px;color:var(--site-brand-strong);border-radius:14px;place-items:center;margin:auto;font-size:24px;display:grid}.play-empty h2{margin:12px 0 4px}.play-empty p{color:var(--site-muted);margin:0 0 18px}.play-empty>div:last-child{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.play-empty span{border:1px solid var(--play-line);background:var(--site-surface);border-radius:8px;padding:10px}.play-empty b,.play-empty small{display:block}.play-empty small{color:var(--site-faint);font-size:9px}.play-inspector .play-panel-title{border-bottom:1px solid var(--play-line);height:50px;margin:0;padding:0 16px}.play-safe{color:#238764;font-size:9px}.play-selected{border-bottom:1px solid var(--play-line);align-items:center;gap:10px;padding:14px 16px;display:flex}.play-selected-glyph{background:var(--site-soft);border-radius:10px;place-items:center;width:48px;height:48px;display:grid}.play-selected b,.play-selected small{display:block}.play-selected small{text-overflow:ellipsis;max-width:190px;color:var(--site-faint);font:9px var(--site-mono);overflow:hidden}.play-inspector section{border-bottom:1px solid var(--play-line);padding:14px 16px}.play-section-title{margin-bottom:10px;font-size:11px;font-weight:700}.play-stage{border:1px solid var(--play-line);background:#fff;border-radius:9px;place-items:center;min-height:128px;margin-top:10px;display:grid}.play-stage[data-background=dark]{background:#25212c}.play-stage[data-background=transparent]{background-color:#fff;background-image:linear-gradient(45deg,#eee 25%,#0000 25%),linear-gradient(-45deg,#eee 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#eee 75%),linear-gradient(-45deg,#0000 75%,#eee 75%);background-position:0 0,0 7px,7px -7px,-7px 0;background-size:14px 14px}.play-size-check{justify-content:center;align-items:end;gap:20px;display:flex}.play-size-check span{justify-items:center;gap:5px;display:grid}.play-size-check small{font:8px var(--site-mono);color:var(--site-faint)}.play-tags{flex-wrap:wrap;gap:5px;display:flex}.play-tags span{background:var(--site-soft);border-radius:999px;padding:3px 7px;font-size:9px}.play-meta{gap:7px;margin:0;display:grid}.play-meta div{justify-content:space-between;gap:10px;display:flex}.play-meta dt{color:var(--site-faint)}.play-meta dd{text-overflow:ellipsis;white-space:nowrap;max-width:170px;font:9px var(--site-mono);margin:0;overflow:hidden}.play-inspector footer{grid-template-columns:1fr 1fr;gap:7px;padding:14px 16px;display:grid}.play-inspector footer button{border:1px solid var(--play-line);background:var(--site-surface);cursor:pointer;border-radius:8px;height:32px}.play-inspector footer .primary{border-color:var(--site-brand-strong);background:var(--site-brand-strong);color:#fff}.play-inspector footer button:disabled{opacity:.45;cursor:not-allowed}[data-large-preview] svg,.play-card-glyph svg,.play-selected-glyph svg,.play-size-check svg{width:var(--play-size);height:var(--play-size);color:var(--play-color);transform:translate(var(--play-x,0),var(--play-y,0)) scale(var(--play-scale,1));transform-origin:50%}.normalized svg,.normalized svg [stroke]:not([stroke=none]){stroke:var(--play-color)!important;stroke-width:var(--play-stroke)!important;stroke-linecap:var(--play-linecap)!important;stroke-linejoin:var(--play-linejoin)!important}.normalized svg [fill=currentColor]{fill:var(--play-color)!important}.fixed-stroke svg [stroke]:not([stroke=none]){vector-effect:non-scaling-stroke}.play-sources{grid-template-columns:1fr 1fr;width:min(100%,320px);display:grid;overflow:visible}.play-sources button{justify-content:center;min-width:0}.play-sources small{width:auto;min-width:24px;padding-inline:4px}.play-presets{grid-template-columns:repeat(3,1fr)}.play-selected small{font-family:inherit;font-size:10px}@media (width<=1050px){.play-shell{grid-template-columns:210px minmax(420px,1fr)}.play-inspector{border-left:0;border-top:1px solid var(--play-line);grid-column:1/-1;grid-template-columns:1fr;display:grid}.play-inspector>.play-panel-title,.play-inspector>.play-selected,.play-inspector>footer,.play-inspector section{grid-column:1/-1}.play-inspector section{border-right:0}}@media (width<=760px){.play-head{align-items:flex-start;height:auto;padding:16px}.play-head a{display:none}.play-shell{display:block}.play-preview-controls,.play-inspector{border:0;border-bottom:1px solid var(--play-line)}.play-results{padding:16px}.play-inspector{display:block}.play-empty>div:last-child{grid-template-columns:1fr}.play-filters{flex-wrap:wrap}}.play-sources small{font:8px var(--site-mono);background:0 0;width:auto;min-width:0;padding:0;display:inline}@media (width<=1050px){.play-shell{grid-template-columns:minmax(420px,1fr) 286px}.play-inspector{border-left:1px solid var(--play-line);border-top:0;grid-column:2;display:block}.play-inspector>.play-panel-title,.play-inspector>.play-selected,.play-inspector>footer,.play-inspector section{grid-column:auto}}@media (width<=760px){.play-shell{display:block}.play-results{padding:16px}.play-inspector{border-left:0;border-top:1px solid var(--play-line)}.play-color-popover{left:0;right:auto}}.play-shell{grid-template-columns:minmax(460px,1fr) 286px}.play-results{grid-column:1}.play-inspector{grid-column:2;min-width:0}.play-properties{overflow:visible}.play-search{min-width:0;height:var(--size-control-md,32px);align-items:center;gap:var(--space-100,8px);padding-left:var(--space-150,12px);border:1px solid var(--play-line);border-radius:var(--radius-md,8px);background:var(--site-surface);box-shadow:var(--shadow-xs,0 1px 2px #0000000a);display:flex;position:relative}.play-search span.play-search-icon{color:var(--site-faint);flex:none;place-items:center;display:grid;position:static}.play-search-icon svg{width:var(--size-icon-sm,16px);height:var(--size-icon-sm,16px)}.play-search input{width:auto;min-width:0;height:100%;padding:0 var(--space-150,12px) 0 0;color:var(--site-text);background:0 0;border:0;border-radius:0;outline:0;flex:1;font-size:13px}.play-search:focus-within{border-color:var(--color-focus-ring,var(--site-brand));box-shadow:0 0 0 var(--focus-ring-width,2px) color-mix(in srgb,var(--color-focus-ring,var(--site-brand)) 24%,transparent)}.play-button,.play-search-row>button{height:var(--size-control-md,32px);padding:0 var(--space-150,12px);border:1px solid var(--play-line);border-radius:var(--radius-md,8px);background:var(--site-surface);color:var(--site-text);cursor:pointer}.play-sources{width:auto;max-width:100%;height:var(--size-control-md,32px);padding:var(--space-050,4px);border-radius:var(--radius-md,8px);background:var(--site-soft);align-items:center;gap:0;margin:10px 0;display:inline-flex;overflow:visible}.play-sources button{min-width:0;height:100%;padding:0 var(--space-100,8px);border-radius:var(--radius-sm,6px);color:var(--site-muted);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;gap:6px;font-size:12px;font-weight:500;display:inline-flex}.play-sources small{width:auto;min-width:0;font:8px var(--site-mono);background:0 0;padding:0;display:inline}.play-sources button[data-state=active]{background:var(--site-surface);color:var(--site-text);border:0;box-shadow:0 1px 4px #00000012}.play-sources button:focus-visible{box-shadow:0 0 0 var(--focus-ring-width,2px) color-mix(in srgb,var(--color-focus-ring,var(--site-brand)) 26%,transparent);outline:0}.play-field{gap:var(--space-100,8px);margin:var(--space-200,16px) 0}.play-field small{color:var(--site-faint);font:8px var(--site-mono);text-align:center}.play-segment,.play-choice-row{gap:var(--space-050,4px);height:var(--size-control-md,32px);padding:var(--space-050,4px);border-radius:var(--radius-md,8px);background:var(--site-soft);grid-template-columns:repeat(3,1fr);display:grid}.play-segment button,.play-choice-row button{border-radius:var(--radius-sm,6px);height:100%;color:var(--site-muted);cursor:pointer;background:0 0;border:0;font-size:11px}.play-segment button.active,.play-choice-row button.active{background:var(--site-surface);color:var(--site-text);box-shadow:0 1px 4px #00000012}.play-color-value i{width:var(--space-250,20px);height:var(--space-250,20px);border:1px solid var(--play-line);border-radius:var(--radius-sm,6px)}.play-color-value code{font:11px var(--site-mono)}.play-color-chevron{width:var(--size-control-lg,40px);color:var(--site-faint);place-items:center;display:grid}.play-color-popover{z-index:30;border:1px solid var(--play-line);border-radius:var(--radius-md,8px);background:var(--site-surface);width:238px;padding:12px;position:absolute;top:calc(100% + 4px);right:0;box-shadow:0 16px 36px -18px #0008}.play-color-popover [data-color-picker-root]{grid-template-columns:repeat(8,25px);gap:4px;display:grid}.play-color-popover [data-color-picker-swatch]{border-radius:var(--radius-sm,6px);background:var(--swatch);cursor:pointer;border:2px solid #0000;width:25px;height:25px;padding:0}.play-color-popover [data-color-picker-swatch][aria-pressed=true]{border-color:var(--site-text);box-shadow:0 0 0 2px var(--site-surface)}.play-custom-color{border-top:1px solid var(--play-line);gap:6px;margin-top:12px;padding-top:10px;display:grid}.play-custom-color>span:last-child{grid-template-columns:32px 1fr;gap:8px;display:grid}.play-custom-color input[type=color]{border:1px solid var(--play-line);border-radius:var(--radius-md,8px);background:var(--site-surface);width:32px;height:32px;padding:2px}.play-custom-color input[type=text]{min-width:0;height:var(--size-control-md,32px);padding:0 var(--space-150,12px);border:1px solid var(--play-line);border-radius:var(--radius-md,8px);background:var(--site-surface);color:var(--site-text);font:11px var(--site-mono)}.play-details{border-top:0;border-bottom:1px solid var(--play-line);margin:0;padding:14px 16px;font-size:11px}.play-details summary{cursor:pointer;font-weight:700}.play-details[data-disabled=true]{opacity:.45;pointer-events:none}.play-details-body{padding-top:2px}.play-check{color:var(--site-muted);align-items:center;gap:7px;margin:14px 0 0;display:flex}.play-inspector footer{grid-template-columns:1fr 1fr 34px}.play-more{position:relative}.play-inspector footer .play-more>button{width:34px;padding:0}.play-more-menu{z-index:30;border:1px solid var(--play-line);border-radius:var(--radius-md,8px);background:var(--site-surface);width:156px;padding:4px;position:absolute;bottom:calc(100% + 6px);right:0;box-shadow:0 16px 36px -18px #0008}.play-inspector footer .play-more-menu button{text-align:left;border:0;width:100%;padding:0 10px}.play-inspector footer .play-more-menu button:hover{background:var(--site-soft)}@media (width<=1050px){.play-shell{grid-template-columns:minmax(420px,1fr) 286px}.play-inspector{border-left:1px solid var(--play-line);border-top:0;grid-column:2;display:block}.play-inspector>.play-panel-title,.play-inspector>.play-selected,.play-inspector>footer,.play-inspector section{grid-column:auto}}@media (width<=760px){.play-shell{display:block}.play-inspector{border-left:0;border-top:1px solid var(--play-line);display:block}.play-results{padding:16px}}.main-wide{width:100%;max-width:1120px;padding:0 28px}.icon-playground,.play-shell,.play-results{background:var(--site-surface)}.play-search-row{align-items:center;gap:var(--space-150,12px);display:flex}.play-search-row .play-search{flex:0 320px;width:min(100%,320px)}.play-search-row .play-sources{flex:none;width:max-content;min-width:0;margin:0 0 0 auto}.play-color-field{position:relative}.play-color-field [data-slot=color-field-trigger]{width:100%;height:var(--size-control-md,32px);align-items:center;gap:var(--space-100,8px);padding:0 0 0 var(--space-150,12px);border:1px solid var(--play-line);border-radius:var(--radius-md,8px);background:var(--site-surface);color:var(--site-text);box-shadow:var(--shadow-xs,0 1px 2px #0000000a);cursor:pointer;display:flex}.play-color-field [data-slot=color-field-trigger]:focus-visible{border-color:var(--color-focus-ring,var(--site-brand));box-shadow:0 0 0 var(--focus-ring-width,2px) color-mix(in srgb,var(--color-focus-ring,var(--site-brand)) 24%,transparent);outline:0}.play-color-value{align-items:center;gap:var(--space-100,8px);flex:1;min-width:0;display:flex}.play-color-value i{width:var(--space-250,20px);height:var(--space-250,20px);border:1px solid var(--play-line);border-radius:var(--radius-sm,6px);flex:none}.play-color-value code{text-overflow:ellipsis;min-width:0;font:11px var(--site-mono);overflow:hidden}.play-color-chevron{width:var(--size-control-lg,40px);color:var(--site-faint);flex:none;place-items:center;display:grid}.play-color-chevron svg{width:var(--size-icon-sm,16px);height:var(--size-icon-sm,16px)}.play-color-popover{z-index:30;width:281px;padding:var(--space-100,8px);border:1px solid var(--play-line);border-radius:var(--radius-md,8px);background:var(--site-surface);box-shadow:var(--shadow-popover,0 16px 36px -18px #0008);position:absolute;top:calc(100% + 4px);right:0}.play-color-popover [data-color-picker-root]{gap:var(--space-050,4px);grid-template-columns:1fr;display:grid}.play-color-row{gap:var(--space-050,4px);grid-template-columns:repeat(9,25px);display:grid}.play-color-popover [data-color-picker-swatch]{border-radius:var(--radius-sm,6px);background:var(--swatch,var(--site-surface));cursor:pointer;border:2px solid #0000;width:25px;min-width:25px;height:25px;min-height:25px;padding:0;transition:transform .12s;position:relative}.play-color-popover [data-color-picker-swatch]:hover{transform:scale(1.08)}.play-color-popover [data-color-picker-swatch][aria-pressed=true]{z-index:1;border-color:var(--site-text);box-shadow:0 0 0 1px var(--site-surface)}.play-color-reset{border-top:1.5px solid var(--color-destructive,#ef4444);position:absolute;inset:4px;transform:rotate(-45deg)}.play-selected{align-items:center}.play-selected-glyph{flex:0 0 48px;overflow:hidden}.play-selected-glyph svg{max-width:28px;max-height:28px;width:28px!important;height:28px!important}.play-selected>span:last-child{align-content:center;gap:4px;min-width:0;display:grid}.play-selected b{text-overflow:ellipsis;white-space:nowrap;min-width:0;line-height:1.25;overflow:hidden}.play-selected small{line-height:1.25}.play-inspector footer button[data-feedback=success]{color:#16845b;justify-content:center;align-items:center;gap:5px;display:inline-flex}.play-inspector footer button[data-feedback=success] [data-feedback-icon]{flex:none;width:14px;height:14px}@media (width<=860px){.main-wide{padding:0 var(--space-200,16px)}.play-shell{display:block}.play-inspector{border-left:0;border-top:1px solid var(--play-line);grid-column:auto}}@media (width<=620px){.play-search-row{flex-direction:column;align-items:stretch}.play-search-row .play-search{flex-basis:auto;width:100%}.play-search-row .play-sources{width:100%;margin-left:0}.play-color-popover{left:0;right:auto}}.play-results{padding-left:0}.play-inspector{border:0!important;border-left:1px solid var(--play-line)!important}.play-inspector .play-panel-title,.play-selected,.play-inspector section,.play-details{border:0!important}.play-search-row .play-search,.play-search-row .play-sources{height:var(--size-control-lg,40px)}.play-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}.play-card{gap:10px;min-height:132px;padding:14px 10px}.play-card-glyph{width:64px;height:60px}.play-card>b{font-size:11px}.play-card{text-align:center;flex-direction:column;justify-content:flex-start;align-items:center;gap:0;min-height:132px;padding:12px;display:flex}.play-card-glyph{flex:none;width:48px;height:48px;margin-bottom:10px}.play-card-glyph svg{max-width:24px;max-height:24px;width:24px!important;height:24px!important}.play-card>b,.play-card-description{text-align:center;text-overflow:ellipsis;white-space:nowrap;width:100%;max-width:100%;display:block;overflow:hidden}.play-card>b{margin:0 0 4px;font-size:11px;line-height:16px}.play-card-description{color:var(--site-muted);font-size:10px;line-height:16px}.play-inspector .play-panel-title{height:var(--size-control-lg,40px);margin:20px 0 0;padding:0 16px}.play-scroll-sentinel{pointer-events:none;width:100%;height:1px}@media (width<=860px){.play-inspector{border:0!important}}@media (width<=620px){.play-results{padding-left:0}}