fc-playground{--fcp-bg:#0d0f14;--fcp-panel:#151821;--fcp-line:#ffffff17;--fcp-ink:#e6e8ee;--fcp-dim:#e6e8ee99;--fcp-accent:#a5b4fc;--fcp-accent-bg:#a5b4fc24;--fcp-height:clamp(460px, 72vh, 760px);--fcp-stage-min:360px;--fcp-code-min:360px;border:1px solid var(--fcp-line);background:var(--fcp-bg);color:var(--fcp-ink);font-family:var(--sl-font,system-ui, sans-serif);border-radius:12px;margin:1.5rem 0;font-size:14px;display:block;overflow:hidden}fc-playground.landing{height:calc(100svh - var(--sl-nav-height,3.5rem));border:0;border-radius:0;flex-direction:column;min-height:560px;margin:0;display:flex}fc-playground.landing .fcp-body{flex:1;height:auto;min-height:0}fc-playground.landing .fcp-intro,fc-playground.landing .fcp-toolbar,fc-playground.landing .fcp-summary{padding-inline:var(--sl-nav-pad-x,1.5rem)}.fcp-intro{border-bottom:1px solid var(--fcp-line);flex-wrap:wrap;align-items:center;gap:8px 20px;padding:10px 14px;display:flex}.fcp-tagline{color:var(--fcp-ink);white-space:nowrap;flex:none;margin:0;font-size:15px}.fcp-install{border:1px solid var(--fcp-line);background:var(--fcp-panel);border-radius:8px;flex:16rem;align-items:center;min-width:16rem;max-width:24rem;margin-left:auto;display:flex;overflow:hidden}.fcp-install-select{border:0;border-right:1px solid var(--fcp-line);color:var(--fcp-ink);font:inherit;cursor:pointer;appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23a5b4fc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 8px center/12px no-repeat;border-radius:0;flex:none;align-self:stretch;padding:0 26px 0 10px;font-size:12px}.fcp-install-select option{background:var(--fcp-panel);color:var(--fcp-ink)}.fcp-install-langs{gap:2px;padding:3px;display:none}.fcp-install-langs button{color:var(--fcp-dim);background:0 0;border:0;border-radius:5px;padding:3px 8px;font-size:12px}.fcp-install-langs button:hover{color:var(--fcp-ink)}.fcp-install-langs button[aria-selected=true]{color:var(--fcp-ink);background:var(--fcp-accent-bg)}.fcp-install-line{flex:1;align-items:center;gap:6px;min-width:0;padding:2px 4px 2px 10px;font-size:12.5px;display:flex}.fcp-install-line[hidden]{display:none}.fcp-install-line code{scrollbar-width:none;white-space:nowrap;min-width:0;color:var(--fcp-ink);background:0 0;flex:1;padding:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;overflow-x:auto}.fcp-install-line a,.fcp-links a{color:var(--fcp-accent);flex:none;font-size:13px;text-decoration:none}.fcp-install-line a:hover,.fcp-links a:hover{text-decoration:underline}.fcp-install-copy{width:22px;height:22px;color:var(--fcp-dim);background:0 0;border:0;border-radius:5px;flex:none;place-items:center;padding:0;display:grid}.fcp-install-copy:hover{color:var(--fcp-ink)}.fcp-links{gap:16px;display:flex}@media (width>=50rem){.fcp-links{display:none}}fc-playground .fcp-picker{--fcp-picker-bg:#181b25;--fcp-picker-field:#0d0f14;--fcp-picker-line:#ffffff1a;--fcp-picker-text:#c9ccd6;--fcp-picker-strong:#fff;--fcp-picker-muted:#e6e8ee8c;--fcp-picker-accent:#a5b4fc;--fcp-picker-accent-low:#a5b4fc29;--fcp-picker-accent-high:#c7d2fe}fc-playground button{font:inherit;color:inherit;cursor:pointer}fc-playground button:focus-visible,fc-playground a:focus-visible{outline:2px solid var(--fcp-accent);outline-offset:1px}fc-playground .fcp-tabs button:focus-visible{outline-offset:-2px}.fcp-toolbar{border-bottom:1px solid var(--fcp-line);align-items:center;gap:12px;padding:10px 12px;display:flex}.fcp-demos{flex-wrap:wrap;flex:1;gap:6px;min-width:0;display:flex}.fcp-demos button{border:1px solid var(--fcp-line);color:var(--fcp-dim);background:0 0;border-radius:999px;flex:none;padding:5px 12px}.fcp-demos button:hover{color:var(--fcp-ink)}.fcp-demos button[aria-pressed=true]{color:var(--fcp-ink);background:var(--fcp-accent-bg);border-color:var(--fcp-accent)}.fcp-demo-select{border:1px solid var(--fcp-line);background:var(--fcp-panel);min-width:0;color:var(--fcp-ink);font:inherit;border-radius:8px;flex:1;padding:6px 10px;display:none}.fcp-status{color:var(--fcp-dim);font-variant-numeric:tabular-nums;flex:none;font-size:12px}.fcp-summary{color:var(--fcp-dim);border-bottom:1px solid var(--fcp-line);margin:0;padding:8px 14px;font-size:13px}.fcp-body{grid-template-columns:clamp(var(--fcp-stage-min), var(--fcp-split,calc(100% / 2.05)), 100% - var(--fcp-code-min)) minmax(0, 1fr);height:var(--fcp-height);display:grid;position:relative}.fcp-divider{--fcp-grab:12px;inset-block:0;left:calc(var(--fcp-grab) / -2);z-index:4;width:var(--fcp-grab);cursor:col-resize;touch-action:none;grid-area:1/2;position:absolute}@media (pointer:coarse){.fcp-divider{--fcp-grab:20px}}.fcp-divider:before{content:"";inset-block:0;background:var(--fcp-accent);opacity:0;width:2px;transition:opacity .15s;position:absolute;left:calc(50% - 1px)}.fcp-divider:hover:before,.fcp-divider:focus-visible:before,fc-playground.fcp-resizing .fcp-divider:before{opacity:1}.fcp-divider:focus-visible{background:var(--fcp-accent-bg);outline:none}fc-playground.fcp-resizing{cursor:col-resize;user-select:none}fc-playground.fcp-resizing .fcp-stage,fc-playground.fcp-resizing .fcp-code{pointer-events:none}.fcp-code{border-left:1px solid var(--fcp-line);background:#282a36;flex-direction:column;min-height:0;display:flex;position:relative}.fcp-stage{flex-direction:column;min-height:0;display:flex}.fcp-canvas{background:#000;flex:1;min-height:0;position:relative}.fcp-canvas canvas{touch-action:pan-y;cursor:crosshair;width:100%;height:100%;display:block;position:absolute;inset:0}.fcp-poster,.fcp-fallback{background:#050608;flex-direction:column;justify-content:flex-end;display:flex;position:absolute;inset:0}.fcp-poster[hidden],.fcp-fallback[hidden]{display:none}.fcp-poster img{object-fit:contain;flex:1;width:100%;min-height:0}.fcp-poster p,.fcp-fallback p{width:100%;color:var(--fcp-ink);border-top:1px solid var(--fcp-line);background:#0b0d12;margin:0;padding:12px 14px;font-size:13px;position:relative}.fcp-controls{border-top:1px solid var(--fcp-line);background:var(--fcp-panel);flex:none;gap:8px;max-height:42%;padding:10px 14px 12px;display:grid;overflow-y:auto}.fcp-controls[hidden]{display:none}.fcp-control{grid-template-columns:minmax(84px,9.5em) minmax(0,1fr);align-items:center;gap:10px;display:grid}.fcp-control-key{color:var(--fcp-dim);text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;overflow:hidden}.fcp-control-sliders{gap:4px;display:grid}.fcp-control-slider{color:var(--fcp-dim);grid-template-columns:auto minmax(0,1fr) 4.5em;align-items:center;gap:8px;font-size:12px;display:grid}.fcp-control-slider input{width:100%;accent-color:var(--fcp-accent)}.fcp-control-slider output{text-align:right;font-variant-numeric:tabular-nums;color:var(--fcp-ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.fcp-control input[type=color]{border:1px solid var(--fcp-line);cursor:pointer;background:0 0;border-radius:6px;width:44px;height:24px;padding:0}.fcp-library{background:var(--fcp-panel);border-bottom:1px solid var(--fcp-line);flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px;display:flex}.fcp-library-label{color:var(--fcp-dim);margin-right:2px;font-size:12px}.fcp-library-list{display:contents}.fcp-chip{border:1px solid var(--fcp-line);border-radius:6px;align-items:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;display:inline-flex}.fcp-chip a{color:var(--fcp-ink);padding:2px 4px 2px 8px;text-decoration:none}.fcp-chip a:hover{text-decoration:underline}.fcp-chip button{color:var(--fcp-dim);background:0 0;border:0;padding:2px 7px 2px 4px}.fcp-chip button:hover{color:var(--fcp-ink)}.fcp-add{border:1px dashed var(--fcp-accent);background:0 0;border-radius:6px;padding:2px 9px;color:var(--fcp-accent)!important;font-size:12px!important}.fcp-add:disabled{opacity:.4;cursor:not-allowed}.fcp-tabbar{border-bottom:1px solid var(--fcp-line);background:var(--fcp-panel);align-items:stretch;display:flex}.fcp-tabs{flex-wrap:wrap;flex:1;min-width:0;display:flex}.fcp-tabs button{color:var(--fcp-dim);background:0 0;border:0;border-bottom:2px solid #0000;flex:none;padding:7px 9px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.fcp-tabs button.generated,.fcp-tabs button.readonly{font-style:italic}.fcp-tabs button:not(.generated)+button.generated{border-left:1px solid var(--fcp-line);margin-left:6px}.fcp-tabs button[aria-selected=true]{color:var(--fcp-ink);border-bottom-color:var(--fcp-accent)}.fcp-editor-frame{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}.fcp-actions{z-index:5;gap:4px;display:flex;position:absolute;top:8px;right:16px}.fcp-actions button,.fcp-fullscreen{border:1px solid var(--fcp-line);width:28px;height:28px;color:var(--fcp-dim);background:#151821d9;border-radius:6px;place-items:center;padding:0;display:grid}.fcp-actions button:hover,.fcp-fullscreen:hover{color:var(--fcp-ink);border-color:#fff3}.fcp-fullscreen{z-index:5;position:absolute;bottom:8px;right:8px}.fcp-fullscreen[hidden],.fcp-fullscreen .icon-exit,.fcp-canvas:fullscreen .fcp-fullscreen .icon-enter{display:none}.fcp-canvas:fullscreen .fcp-fullscreen .icon-exit{display:block}.fcp-copy .icon-done,.fcp-copy.done .icon-copy{display:none}.fcp-copy.done .icon-done{color:#86efac;display:block}.fcp-editor{flex:1;min-height:0}.fcp-editor .cm-editor{height:100%}fc-playground[data-tab=readonly] .fcp-editor .cm-scroller{opacity:.92}.fcp-error{color:#fca5a5;white-space:pre-wrap;background:#2a1416;border-top:1px solid #ef444473;border-radius:0;flex:none;max-height:34%;margin:0;padding:10px 12px;font-size:12px;line-height:1.5;overflow:auto}.fcp-error[hidden]{display:none}@media (width<=860px){fc-playground.landing{height:auto;min-height:0}.fcp-tagline{white-space:normal;flex:100%}.fcp-install{flex-direction:column;flex:100%;align-items:stretch;width:100%;margin-left:0}.fcp-install-select{display:none}.fcp-install-langs{border-bottom:1px solid var(--fcp-line);display:flex}.fcp-install-line{padding:6px 6px 6px 10px}.fcp-body{grid-template-columns:minmax(0,1fr);height:auto}.fcp-divider{display:none}.fcp-canvas{aspect-ratio:4/3;flex:none}.fcp-controls{max-height:none}.fcp-code{border-left:0;border-top:1px solid var(--fcp-line)}.fcp-editor-frame,.fcp-editor{flex:none;height:min(440px,70vh)}.fcp-status,.fcp-demos{display:none}.fcp-demo-select{display:block}}