.react-playground-page{--react-shell: #141313;--react-surface: #1b1919;--react-surface-raised: #242121;--react-line: rgba(255, 255, 255, .11);--react-muted: rgba(255, 255, 255, .66);--react-faint: rgba(255, 255, 255, .52);--react-success: #76d19a;--react-warning: #f3c969;--react-error: #ff8585}.react-playground-page ::selection{background:#fe961547;color:#fff}.react-playground-hero .tools-hero-subtitle{max-width:720px}.react-playground-workspace{padding:0 0 4.5rem}.react-playground-container{width:min(100% - 2rem,1480px);max-width:none;padding:0}.react-playground-panel{position:relative;overflow:clip;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:0;background:var(--react-shell);box-shadow:0 18px 54px #00000061}.react-playground-command-bar{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem .9rem;border-bottom:1px solid var(--react-line);background:#1d1b1b}.react-playground-command-context,.react-playground-command-actions,.react-playground-status,.react-playground-file-tabs,.react-playground-pane-actions,.react-playground-diagnostics-actions{display:flex;align-items:center}.react-playground-command-context{min-width:0;gap:.8rem}.react-playground-command-actions{flex-wrap:wrap;justify-content:flex-end;gap:.55rem}.react-playground-runtime-mark{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border:1px solid rgba(97,218,251,.22);border-radius:10px;background:#61dafb14;color:#8de5ff;font-size:1.1rem}.react-playground-runtime-copy{min-width:0;display:grid;gap:.15rem}.react-playground-runtime-copy strong{font-family:var(--font-montserrat-semi-bold);font-size:var(--font-size-s);color:#ffffffeb}.react-playground-runtime-copy span{overflow:hidden;color:var(--react-muted);font-size:var(--font-size-xs);text-overflow:ellipsis;white-space:nowrap}.react-playground-status{min-height:34px;gap:.45rem;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:.35rem .65rem;background:#ffffff0b;color:#ffffffc2;font-family:var(--font-montserrat-semi-bold);font-size:.74rem;font-variant-numeric:tabular-nums;white-space:nowrap}.react-playground-status:before{content:"";width:.5rem;height:.5rem;flex:0 0 auto;border-radius:50%;background:#ffffff52}.react-playground-status[data-state=loading]:before,.react-playground-status[data-state=compiling]:before{border:1px solid rgba(254,150,21,.35);border-top-color:#fe9615;background:transparent;animation:react-playground-spin .75s linear infinite}.react-playground-status[data-state=ready]:before,.react-playground-status[data-state=success]:before{background:var(--react-success)}.react-playground-status[data-state=dirty]:before{background:var(--react-warning)}.react-playground-status[data-state=error]:before{background:var(--react-error)}.react-playground-auto-run{min-height:44px;display:inline-flex;align-items:center;gap:.55rem;margin:0;padding:0 .35rem;color:#ffffffc2;font-family:var(--font-montserrat-semi-bold);font-size:.78rem;cursor:pointer}.react-playground-auto-run input{width:1rem;height:1rem;accent-color:#fe9615}.react-playground-run{min-width:108px;min-height:44px;gap:.5rem}.react-playground-run:disabled{opacity:.58;transform:none;cursor:wait}.react-playground-reset{min-height:44px;gap:.45rem}.react-playground-mobile-tabs{display:none}.react-playground-grid{--react-editor-width: 48%;display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);grid-template-areas:"code preview";min-height:640px}.react-playground-pane{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--react-surface)}.react-playground-code-pane{grid-area:code;border-inline-end:1px solid var(--react-line)}.react-playground-preview-pane{grid-area:preview;background:#171616}.react-playground-splitter{display:none}.react-playground-pane-header{min-height:50px;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.45rem .65rem;border-bottom:1px solid var(--react-line);background:#211f1f}.react-playground-file-tabs{align-self:stretch;gap:.2rem}.react-playground-file-tab{position:relative;min-height:44px;display:inline-flex;align-items:center;gap:.45rem;border:0;border-radius:7px 7px 0 0;padding:.4rem .75rem;background:transparent;color:#ffffff94;font-family:var(--font-monospace);font-size:.78rem;cursor:pointer}.react-playground-file-tab:after{content:"";position:absolute;inset-inline:.6rem;bottom:-.45rem;height:2px;border-radius:2px;background:transparent}.react-playground-file-tab:hover{color:#ffffffe0;background:#ffffff0d}.react-playground-file-tab.is-active{color:#fff;background:#fff1}.react-playground-file-tab.is-active:after{background:#fe9615}.react-playground-file-tab:focus-visible,.react-playground-preview-action:focus-visible,.react-playground-diagnostic-toggle:focus-visible,.react-playground-mobile-tab:focus-visible,.react-playground-drawer-tab:focus-visible,.react-playground-preview-error button:focus-visible{outline:2px solid #ffb15a;outline-offset:2px}.react-playground-editor-meta{display:flex;align-items:center;gap:.6rem;color:var(--react-faint);font-size:.7rem;white-space:nowrap}.react-playground-editor-meta span:first-child{font-family:var(--font-montserrat-semi-bold)}.react-playground-editor-meta span:last-child{font-family:var(--font-monospace)}.react-playground-editor-shell{min-height:0;flex:1;position:relative;overflow:hidden;background:#111010;direction:ltr}.react-playground-editor-host,.react-playground-editor-host>.cm-editor{width:100%;height:100%;min-height:588px}.react-playground-editor-host>.cm-editor{text-align:start}.react-playground-editor-fallback{width:100%;min-height:588px;resize:none;border:0;border-radius:0;padding:1rem;background:#111010;color:#f6f3f0;font-family:var(--font-monospace);font-size:.875rem;line-height:1.65;caret-color:#ffb15a;-moz-tab-size:2;tab-size:2;white-space:pre;overflow:auto}.react-playground-editor-fallback:focus-visible{outline:2px solid #ffb15a;outline-offset:-3px}.react-playground-pane-actions{min-width:0;flex-wrap:wrap;justify-content:flex-end;gap:.45rem}.react-playground-viewport{min-height:44px;border:1px solid rgba(255,255,255,.13);border-radius:8px;padding:.35rem 2rem .35rem .7rem;background:#171616;color:#ffffffe0;font-family:var(--font-montserrat-semi-bold);font-size:.74rem;cursor:pointer}.react-playground-viewport:focus-visible{outline:2px solid #ffb15a;outline-offset:2px}.react-playground-preview-action{width:44px;height:44px;flex:0 0 44px;display:inline-grid;place-items:center;border:1px solid rgba(255,255,255,.11);border-radius:8px;padding:0;background:#ffffff0b;color:#ffffffb3;font-family:var(--font-monospace);font-size:.72rem;cursor:pointer}.react-playground-preview-action:hover{border-color:#fff3;background:#ffffff14;color:#fff}.react-playground-preview-action[aria-pressed=true]{border-color:#fe961573;background:#fe961529;color:#ffb15a}.react-playground-preview-action:disabled{opacity:.38;cursor:not-allowed}.react-playground-diagnostic-toggle{min-height:44px;display:inline-flex;align-items:center;gap:.4rem;border:1px solid rgba(255,255,255,.11);border-radius:8px;padding:.35rem .65rem;background:#ffffff0b;color:#ffffffb3;font-family:var(--font-montserrat-semi-bold);font-size:.72rem;cursor:pointer}.react-playground-diagnostic-toggle:hover,.react-playground-diagnostic-toggle[aria-expanded=true]{border-color:#fe961552;background:#fe961517;color:#fff}.react-playground-diagnostic-toggle.has-issues{border-color:#ff85854d;color:#ffd2d2}.react-playground-diagnostic-toggle output{min-width:1.25rem;height:1.25rem;display:inline-grid;place-items:center;border-radius:999px;background:#ffffff1a;font-family:var(--font-monospace);font-size:.66rem}.react-playground-preview-shell{box-sizing:border-box;min-height:0;flex:1;position:relative;overflow:hidden;display:block;padding:1rem;background:linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.025) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.025) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.025) 75%),#0e0d0d;background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;scrollbar-color:rgba(254,150,21,.44) #171616}.react-playground-preview-shell[data-scale-mode=actual]{overflow:auto}.react-playground-preview-shell:focus-visible{outline:2px solid #ffb15a;outline-offset:-3px}.react-playground-preview-canvas{position:relative;min-width:0;min-height:0;margin-inline:auto;overflow:hidden;border-radius:10px;background:#fff;box-shadow:0 12px 38px #00000057}.react-playground-preview-canvas:focus-within{outline:2px solid #ffb15a;outline-offset:-3px}.react-playground-preview-scale-canvas{position:relative;overflow:hidden;background:#fff;transform-origin:top left}.react-playground-preview-frame{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;background:#fff}.react-playground-preview-frame.is-staging{visibility:hidden;pointer-events:none}.react-playground-preview-frame.is-visible{visibility:visible}.react-playground-preview-frame.is-visible.is-promoting{animation:react-playground-preview-resolve .22s cubic-bezier(.16,1,.3,1)}@keyframes react-playground-preview-resolve{0%{opacity:.72;filter:saturate(.78);transform:scale(.996)}to{opacity:1;filter:saturate(1);transform:scale(1)}}.react-playground-preview-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:grid;place-items:center;padding:2rem;background:#f5f2ed;color:#3d3835;text-align:center}.react-playground-preview-placeholder div{max-width:28rem}.react-playground-preview-placeholder i{display:block;margin-bottom:1rem;color:#d76818;font-size:1.75rem}.react-playground-preview-placeholder strong{display:block;margin-bottom:.45rem;color:#1b1817;font-family:var(--font-montserrat-semi-bold);font-size:1rem}.react-playground-preview-placeholder p{margin:0;font-size:.84rem;line-height:1.6}.react-playground-preview-loading{position:absolute;z-index:5;top:.75rem;left:50%;min-height:36px;display:inline-flex;align-items:center;gap:.55rem;border:1px solid rgba(254,150,21,.25);border-radius:8px;padding:.45rem .75rem;background:#181615eb;color:#ffffffdb;box-shadow:0 8px 24px #00000042;font-family:var(--font-montserrat-semi-bold);font-size:.74rem;transform:translate(-50%)}.react-playground-preview-loading i{color:#fe9615}.react-playground-preview-error{position:absolute;z-index:6;inset-inline:1rem;bottom:1rem;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:.75rem;border:1px solid rgba(255,133,133,.34);border-radius:12px;padding:.85rem;background:#2b1414f0;color:#fff1f1;box-shadow:0 16px 38px #00000061}.react-playground-preview-error>i{margin-top:.15rem;color:var(--react-error)}.react-playground-preview-error strong,.react-playground-preview-error p,.react-playground-preview-error code{display:block}.react-playground-preview-error strong{margin-bottom:.2rem;font-family:var(--font-montserrat-semi-bold);font-size:.82rem}.react-playground-preview-error p{margin:0;color:#ffefefcc;font-size:.76rem;line-height:1.5}.react-playground-preview-error code{margin-top:.35rem;color:#ffb6b6;font-family:var(--font-monospace);font-size:.7rem}.react-playground-preview-error button{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:8px;background:#ffffff12;color:#ffffffc2;cursor:pointer}.react-playground-preview-error button:hover{background:#ffffff21;color:#fff}.react-playground-drawer{border-top:1px solid var(--react-line);background:#181616}.react-playground-drawer:not(.is-open){display:none}.react-playground-drawer-header{min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.35rem .65rem;border-bottom:1px solid var(--react-line)}.react-playground-drawer-tabs{display:flex;align-items:center;gap:.25rem}.react-playground-drawer-tab,.react-playground-drawer-close,.react-playground-clear-console{border:0;background:transparent;color:#ffffff9e;cursor:pointer}.react-playground-drawer-tab{min-height:44px;border-radius:7px;padding:.35rem .65rem;font-family:var(--font-montserrat-semi-bold);font-size:.74rem}.react-playground-drawer-tab:hover,.react-playground-drawer-tab.is-active{background:#ffffff0f;color:#fff}.react-playground-drawer-close{width:44px;height:44px;display:grid;place-items:center;border-radius:8px}.react-playground-drawer-close:hover,.react-playground-clear-console:hover{color:#fff;background:#ffffff12}.react-playground-drawer-panel{min-height:150px;max-height:230px;overflow:auto;scrollbar-color:rgba(254,150,21,.44) #171616}.react-playground-problem-list,.react-playground-console-list{margin:0;padding:0;list-style:none}.react-playground-problem-list li+li,.react-playground-console-list li+li{border-top:1px solid rgba(255,255,255,.07)}.react-playground-problem{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.65rem;border:0;padding:.75rem .9rem;background:transparent;color:#fff;text-align:start;cursor:pointer}.react-playground-problem:hover:not(:disabled){background:#ff858512}.react-playground-problem:disabled{cursor:default}.react-playground-problem>i{margin-top:.2rem;color:var(--react-error)}.react-playground-problem-copy{min-width:0;display:grid;gap:.2rem}.react-playground-problem-copy strong{color:#ffffffe0;font-family:var(--font-montserrat);font-size:.77rem;font-weight:400;line-height:1.5}.react-playground-problem-copy span{color:#ffabab;font-family:var(--font-monospace);font-size:.68rem}.react-playground-console-toolbar{display:flex;justify-content:flex-end;padding:.35rem .65rem;border-bottom:1px solid rgba(255,255,255,.06)}.react-playground-clear-console{min-height:44px;border-radius:7px;padding:.3rem .6rem;font-family:var(--font-montserrat-semi-bold);font-size:.7rem}.react-playground-console-list li{display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:.65rem;padding:.6rem .85rem}.react-playground-console-level{color:#9fd9ff;font-family:var(--font-monospace);font-size:.67rem;text-transform:uppercase}.react-playground-console-list li[data-level=warn] .react-playground-console-level{color:var(--react-warning)}.react-playground-console-list li[data-level=error] .react-playground-console-level{color:var(--react-error)}.react-playground-console-list pre{margin:0;overflow-wrap:anywhere;white-space:pre-wrap;color:#ffffffd1;font-family:var(--font-monospace);font-size:.72rem;line-height:1.55}.react-playground-empty-log{margin:0;padding:1.2rem;color:var(--react-faint);font-size:.78rem;text-align:center}.react-playground-undo{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:48px;border-top:1px solid rgba(254,150,21,.2);padding:.55rem .85rem;background:#fe961514;color:#ffffffd1;font-size:.78rem}.react-playground-undo button{min-height:44px;border:0;border-radius:7px;padding:.3rem .65rem;background:transparent;color:#ffc477;font-family:var(--font-montserrat-semi-bold);cursor:pointer}.react-playground-undo button:hover{background:#fe961517}.react-playground-guide{padding-top:1rem}.react-playground-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 3rem}.react-playground-guide article{max-width:66ch}.react-playground-handoff-card{align-self:start;border:1px solid rgba(254,150,21,.2);border-radius:12px;padding:1rem;background:linear-gradient(120deg,#ff8c421f,#ffc14b09)}.react-playground-handoff{display:inline-flex;align-items:center;gap:.45rem;width:fit-content;margin-top:.15rem;text-decoration:none}.react-playground-guide h2,.react-playground-faq h2{margin:0 0 .75rem;font-family:var(--font-montserrat-semi-bold);font-size:1.15rem}.react-playground-guide p,.react-playground-faq p{color:#ffffffb3;line-height:1.75}.react-playground-faq{max-width:860px;margin-top:3.5rem}.react-playground-faq h2{margin-bottom:1.5rem;font-size:1.4rem}.react-playground-faq h3{margin:1.6rem 0 .5rem;color:#ffffffeb;font-family:var(--font-montserrat-semi-bold);font-size:1rem}@media (min-width: 1100px){.react-playground-grid{grid-template-columns:minmax(0,var(--react-editor-width)) 1.25rem minmax(0,1fr);grid-template-areas:"code splitter preview"}.react-playground-code-pane{border-inline-end:0}.react-playground-splitter{grid-area:splitter;position:relative;display:grid;place-items:center;background:#181616;cursor:col-resize;touch-action:none}.react-playground-splitter:before{content:"";position:absolute;inset-block:0;inset-inline:.25rem;border-radius:6px;background:transparent}.react-playground-splitter span{position:relative;width:2px;height:3.25rem;border-radius:2px;background:#ffffff2e;transform:scaleY(1);transition:transform .15s ease,background-color .15s ease}.react-playground-splitter:hover:before,.react-playground-splitter:focus-visible:before,.react-playground-grid.is-resizing .react-playground-splitter:before{background:#fe961512}.react-playground-splitter:hover span,.react-playground-splitter:focus-visible span,.react-playground-grid.is-resizing .react-playground-splitter span{background:#fe9615;transform:scaleY(1.38)}.react-playground-splitter:focus-visible{outline:2px solid #ffb15a;outline-offset:-3px}.react-playground-grid.is-resizing,.react-playground-grid.is-resizing *{cursor:col-resize;-webkit-user-select:none;user-select:none}.react-playground-grid.is-resizing iframe{pointer-events:none}}@media (min-width: 769px){.react-playground-grid.is-preview-focused{grid-template-columns:minmax(0,1fr);grid-template-areas:"preview";min-height:max(640px,calc(100dvh - 5.5rem))}.react-playground-grid.is-preview-focused .react-playground-code-pane,.react-playground-grid.is-preview-focused .react-playground-splitter{display:none}.react-playground-grid.is-preview-focused .react-playground-preview-pane{min-height:max(640px,calc(100dvh - 5.5rem))}.react-playground-grid.is-preview-focused .react-playground-pane-header{position:sticky;top:0;z-index:7}}@media (max-width: 1099px){.react-playground-preview-pane .react-playground-pane-header{align-items:flex-start;flex-wrap:wrap}.react-playground-preview-pane .react-playground-pane-actions{width:100%}.react-playground-viewport{width:min(9rem,100%);min-width:0;max-width:100%}.react-playground-diagnostic-toggle span:not(.tool-sr-only){display:none}}@media (max-width: 900px){.react-playground-command-bar{align-items:flex-start}.react-playground-command-actions{max-width:58%}.react-playground-grid{min-height:600px}.react-playground-editor-host,.react-playground-editor-host>.cm-editor,.react-playground-editor-fallback{min-height:548px}.react-playground-pane-header{align-items:flex-start;flex-wrap:wrap}}@media (max-width: 768px){.react-playground-workspace{padding-bottom:3rem}.react-playground-container{width:min(100% - 1rem,100%)}.react-playground-panel{overflow:visible;border-radius:12px}.react-playground-command-bar{display:grid;grid-template-columns:minmax(0,1fr);padding:.75rem}.react-playground-runtime-copy{flex:1 1 12rem}.react-playground-runtime-copy span{overflow:visible;line-height:1.4;text-overflow:clip;white-space:normal}.react-playground-command-actions{width:100%;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto auto}.react-playground-status{justify-self:start}.react-playground-auto-run{justify-self:end}.react-playground-reset span{display:none}.react-playground-reset{width:44px;padding-inline:0}.react-playground-run{min-width:0}.react-playground-mobile-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--react-line);background:#181616}.react-playground-mobile-tab{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;border-bottom:2px solid transparent;background:transparent;color:#ffffff94;font-family:var(--font-montserrat-semi-bold);font-size:.78rem;cursor:pointer}.react-playground-mobile-tab.is-active{border-bottom-color:#fe9615;color:#fff;background:#fe96150d}.react-playground-grid{display:block;min-height:610px}.react-playground-pane{display:none;min-height:610px}.react-playground-pane.is-mobile-active{display:flex}.react-playground-code-pane{border-inline-end:0}.react-playground-file-tab{padding-inline:.6rem}.react-playground-editor-meta span:first-child{display:none}.react-playground-editor-host,.react-playground-editor-host>.cm-editor,.react-playground-editor-fallback{min-height:558px}.react-playground-editor-host>.cm-editor,.react-playground-editor-fallback{font-size:16px}.react-playground-preview-shell{min-height:558px;padding:.65rem}.react-playground-pane-actions{width:100%;justify-content:space-between}.react-playground-expand-preview{display:none}.react-playground-diagnostic-toggle span:not(.tool-sr-only){display:none}.react-playground-drawer{position:fixed;z-index:1200;inset:auto 0 0;max-height:min(62dvh,520px);overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:14px 14px 0 0;background:#191717;box-shadow:0 -18px 56px #0000008c}.react-playground-drawer-panel{max-height:calc(min(62dvh,520px) - 47px)}.react-playground-preview-error{inset-inline:.65rem;bottom:.65rem;grid-template-columns:auto minmax(0,1fr) auto;padding:.7rem}.react-playground-guide-grid{grid-template-columns:minmax(0,1fr);gap:2rem}}@media (max-width: 480px){.react-playground-status{max-width:100%;white-space:normal}.react-playground-command-actions{grid-template-columns:minmax(0,1fr) 44px}.react-playground-auto-run{grid-column:1 / -1;grid-row:1;justify-self:start}.react-playground-run{grid-column:1;grid-row:2}.react-playground-reset{grid-column:2;grid-row:2}.react-playground-pane-header{padding-inline:.45rem}.react-playground-preview-pane .react-playground-pane-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch}.react-playground-preview-pane .react-playground-viewport{grid-column:1 / -1;width:100%;max-width:none}.react-playground-preview-pane .react-playground-preview-action,.react-playground-preview-pane .react-playground-diagnostic-toggle{width:100%;min-width:0;justify-content:center}.react-playground-file-tab{font-size:.72rem}.react-playground-editor-meta{font-size:.64rem}.react-playground-viewport{width:min(8.5rem,100%);max-width:100%}.react-playground-preview-error{grid-template-columns:auto minmax(0,1fr)}.react-playground-preview-error button{grid-column:2;grid-row:1;justify-self:end;margin-bottom:-2.25rem}.react-playground-undo{align-items:flex-start}}@media (prefers-reduced-motion: reduce){.react-playground-preview-canvas,.react-playground-splitter span{transition:none}.react-playground-preview-frame.is-visible.is-promoting{animation:none}.react-playground-status[data-state=loading]:before,.react-playground-status[data-state=compiling]:before{animation:none;border-color:#fe9615}}@media (forced-colors: active){.react-playground-status:before,.react-playground-file-tab:after{forced-color-adjust:none}.react-playground-panel,.react-playground-pane,.react-playground-editor-shell,.react-playground-preview-error,.react-playground-drawer{border:1px solid CanvasText}}@keyframes react-playground-spin{to{transform:rotate(360deg)}}