.-NFn6q_example{--example-surface:#fff;--example-warning:#6a4516;--example-warning-surface:#fff8e0;--example-height:320px;--example-preview-height:var(--example-height);--example-heading-height:32px;--example-control-size:24px;--example-control-radius:2px;--example-inset:12px;--example-muted:var(--reading-surface);--example-border:var(--reading-rule);--example-foreground:hsl(var(--foreground));--example-secondary:hsl(var(--muted-foreground));--example-accent:hsl(var(--foreground));--example-keyword:#a40e26;--example-definition:#0550ae;--example-string:#0a3069;width:min(68rem, calc(100vw - 2 * var(--reading-gutter,1rem)));margin-block:var(--reading-block);margin-inline:calc((100% - min(68rem, 100vw - 2 * var(--reading-gutter,1rem))) / 2);font-family:var(--font-inter);color:var(--example-foreground);font-size:12px;line-height:1.5}.-NFn6q_heading{justify-content:space-between;align-items:baseline;gap:16px;padding-block:0 6px;display:flex}.-NFn6q_title{min-width:0;color:var(--example-secondary);font-size:11px;font-weight:400;line-height:16px}.-NFn6q_example svg{flex-shrink:0;width:14px;height:14px}.-NFn6q_example button{font:inherit;cursor:pointer}.-NFn6q_example button:focus-visible{outline-offset:-2px;outline:2px solid}.-NFn6q_launch{border:1px solid var(--reading-rule);border-radius:var(--reading-radius);background:var(--example-surface);grid-template-columns:minmax(0,5fr) minmax(0,3fr);gap:0;display:grid;overflow:hidden}.-NFn6q_source,.-NFn6q_previewPanel,.-NFn6q_sourceExcerpt{min-width:0}.-NFn6q_source,.-NFn6q_sourceExcerpt{border-right:1px solid var(--reading-rule)}.-NFn6q_panelHeading{height:var(--example-heading-height);padding-inline:var(--example-inset);border-bottom:1px solid var(--reading-rule);background:var(--reading-surface);color:var(--example-secondary);align-items:center;gap:8px;font-size:11px;display:flex}.-NFn6q_sourceExcerpt .-NFn6q_panelHeading{font-family:var(--font-code);color:var(--example-foreground)}.-NFn6q_previewLabel{font-size:11px}.-NFn6q_iconButton{min-height:var(--example-control-size);color:var(--example-secondary);border-radius:var(--example-control-radius);width:var(--example-control-size);flex-shrink:0;justify-content:center;align-items:center;gap:6px;display:inline-flex}.-NFn6q_iconButton:hover{color:var(--example-foreground);background:var(--example-border)}.-NFn6q_editorBody{min-width:0;height:var(--example-height);display:flex}.-NFn6q_fileRail{border-right:1px solid var(--reading-rule);scrollbar-width:thin;flex:0 0 152px;min-width:0;padding-block:6px;overflow:auto}.-NFn6q_railHeading{justify-content:space-between;align-items:center;min-height:24px;padding:0 4px 2px 12px;display:flex}.-NFn6q_railLabel{letter-spacing:.06em;text-transform:uppercase;color:var(--example-secondary);padding:0;font-size:10px;display:block}.-NFn6q_files{font-family:var(--font-code);font-size:11px}.-NFn6q_fileList{margin:0;padding:0;list-style:none}.-NFn6q_directory>.-NFn6q_fileList{padding-left:14px}.-NFn6q_directory>summary,.-NFn6q_example .-NFn6q_fileRow{width:100%;min-height:22px;color:var(--example-secondary);cursor:pointer;text-align:left;align-items:center;gap:5px;padding:2px 8px;line-height:18px;display:flex;position:relative}.-NFn6q_directory>summary{list-style:none}.-NFn6q_directory>summary::-webkit-details-marker{display:none}.-NFn6q_directory>summary svg{width:11px;height:11px;transition:transform .12s}.-NFn6q_directory[open]>summary svg{transform:rotate(90deg)}.-NFn6q_directory>summary span,.-NFn6q_fileRow span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.-NFn6q_directory>summary:hover,.-NFn6q_example .-NFn6q_fileRow:hover{background:var(--reading-surface);color:var(--example-foreground)}.-NFn6q_directory>summary:focus-visible{outline-offset:-2px;outline:2px solid}.-NFn6q_example .-NFn6q_fileRow{padding-left:24px}.-NFn6q_example .-NFn6q_fileRow[aria-current=true]{background:var(--reading-surface);color:var(--example-foreground)}.-NFn6q_fileRow[aria-current=true]:before{content:"";background:currentColor;border-radius:1px;width:1px;position:absolute;top:5px;bottom:5px;left:8px}@media (prefers-reduced-motion:reduce){.-NFn6q_directory>summary svg{transition:none}}.-NFn6q_example .-NFn6q_editor{min-width:0;height:var(--example-height);flex:1}.-NFn6q_example .-NFn6q_editor .cm-scroller{padding-block:8px}.-NFn6q_example .-NFn6q_editor .cm-content{padding:0 4px}.-NFn6q_example .-NFn6q_editor .cm-line{padding-inline:8px}.-NFn6q_example .-NFn6q_editor .cm-gutterElement{padding-inline:8px 4px}.-NFn6q_example .-NFn6q_editor .cm-lineNumbers{color:var(--example-secondary);font-size:10px}.-NFn6q_example .-NFn6q_preview{height:var(--example-preview-height)}.-NFn6q_launch{min-height:calc(var(--example-height) + var(--example-heading-height))}.-NFn6q_sourceExcerpt pre{font:13px/20px var(--font-code);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--example-foreground);height:var(--example-height);padding:8px 12px;overflow:auto}.-NFn6q_launchAction{height:var(--example-preview-height);flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;padding:16px;display:flex}.-NFn6q_launchAction p{color:var(--example-secondary);font-size:12px}.-NFn6q_runButton{border:1px solid var(--reading-rule);border-radius:var(--reading-radius);align-items:center;gap:6px;min-height:28px;padding:3px 9px;display:inline-flex}.-NFn6q_runButton:hover{background:var(--reading-surface)}.-NFn6q_runButton svg{width:12px;height:12px}.-NFn6q_loading{min-height:calc(var(--example-height) + var(--example-heading-height));border:1px solid var(--reading-rule);border-radius:var(--reading-radius);color:var(--example-secondary);place-items:center;display:grid}@media (prefers-color-scheme:dark){.-NFn6q_example{--example-surface:#0a0c10;--example-warning:#e7c400;--example-warning-surface:#332b0a;--example-keyword:#ff9492;--example-definition:#91cbff;--example-string:#addcff}}@media (max-width:760px){.-NFn6q_example{--example-height:280px;--example-preview-height:220px}.-NFn6q_launch{grid-template-columns:minmax(0,1fr)}.-NFn6q_source,.-NFn6q_sourceExcerpt{border-right:0;border-bottom:1px solid var(--reading-rule)}.-NFn6q_fileRail{flex-basis:132px}.-NFn6q_sourceExcerpt pre{height:var(--example-height);padding:12px}.-NFn6q_launchAction{padding:16px}}.-NFn6q_workspace{border:1px solid var(--reading-rule);border-radius:var(--reading-radius);background:var(--example-surface);overflow:hidden}.-NFn6q_workspaceToolbar{height:var(--example-heading-height);border-bottom:1px solid var(--reading-rule);background:var(--reading-surface);align-items:center;gap:6px;padding-inline:8px;display:flex}.-NFn6q_fileTabs{scrollbar-width:thin;flex:1;align-self:stretch;min-width:0;display:flex;overflow-x:auto}.-NFn6q_example .-NFn6q_fileTab{color:var(--example-secondary);font-family:var(--font-code);white-space:nowrap;flex-shrink:0;align-items:center;padding:5px 9px;font-size:11px;display:flex;position:relative}.-NFn6q_example .-NFn6q_fileTab[aria-pressed=true]{color:var(--example-foreground)}.-NFn6q_example .-NFn6q_fileTab[aria-pressed=true]:after{content:"";background:currentColor;height:1px;position:absolute;inset:auto 9px 0}.-NFn6q_example .-NFn6q_fileTab:hover{color:var(--example-foreground)}.-NFn6q_actions{flex-shrink:0;align-items:center;gap:2px;display:flex}.-NFn6q_actions .-NFn6q_iconButton{margin:0}.-NFn6q_example button:disabled{opacity:.3;cursor:default}.-NFn6q_example button:disabled:hover{background:0 0}.-NFn6q_workspace .-NFn6q_previewPanel{background:var(--example-surface);padding:0;position:relative}.-NFn6q_previewStatus{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.-NFn6q_workspace .-NFn6q_preview{height:var(--example-preview-height);border:0;border-radius:0}.-NFn6q_workspace[data-expanded=true]{--example-height:520px;--example-preview-height:520px}.-NFn6q_iconButton[aria-expanded=true]{color:var(--example-foreground)}@media (max-width:760px){.-NFn6q_workspaceToolbar{gap:4px;padding-inline:8px}.-NFn6q_example .-NFn6q_fileTab{padding-inline:8px}.-NFn6q_workspace[data-expanded=true]{--example-height:440px;--example-preview-height:340px}.-NFn6q_editorBody{position:relative}.-NFn6q_fileRail{z-index:2;background:var(--example-surface);width:184px;position:absolute;inset:0 auto 0 0}}.-NFn6q_consoleDisclosure{border-top:1px solid var(--reading-rule);position:relative}.-NFn6q_consoleDetails>summary{cursor:pointer;height:28px;color:var(--example-secondary);align-items:center;gap:6px;padding:0 40px 0 14px;font-size:11px;list-style:none;display:flex}.-NFn6q_consoleDetails>summary::-webkit-details-marker{display:none}.-NFn6q_consoleDetails>summary svg{width:12px;height:12px}.-NFn6q_consoleDetails[open]>summary svg{transform:rotate(90deg)}.-NFn6q_consoleDetails>summary:hover{color:var(--example-foreground)}.-NFn6q_consoleDetails>summary:focus-visible{outline-offset:-2px;outline:2px solid}.-NFn6q_consoleBody{border-top:1px solid var(--reading-rule)}.-NFn6q_clearConsole{width:var(--example-control-size);height:var(--example-control-size);color:var(--example-secondary);border-radius:var(--example-control-radius);place-items:center;display:grid;position:absolute;top:2px;right:8px}.-NFn6q_clearConsole:hover{color:var(--example-foreground);background:var(--reading-surface)}.-NFn6q_example .-NFn6q_console{height:112px;font-family:var(--font-code);font-size:12px}.-NFn6q_example .-NFn6q_console .sp-console-item{padding:2px 10px;font-size:12px;line-height:18px}:is(.-NFn6q_example .-NFn6q_console .cm-editor,.-NFn6q_example .-NFn6q_console .cm-scroller){font-size:12px;line-height:18px}.-NFn6q_example .-NFn6q_console .cm-content{padding:0}.-NFn6q_example .-NFn6q_console .cm-line{padding:0;line-height:18px}.-NFn6q_example .-NFn6q_console .sp-pre-placeholder{font-size:12px;line-height:18px}.-NFn6q_example .-NFn6q_resizableFrame{height:var(--example-height);border:0;border-radius:0;display:block}.-NFn6q_resizableLayout .-NFn6q_source{border:0}.-NFn6q_resizableLayout .-NFn6q_editorBody,.-NFn6q_editorGroup,.-NFn6q_resizableLayout .-NFn6q_editor,.-NFn6q_workspace .-NFn6q_resizableLayout .-NFn6q_preview,.-NFn6q_filePanel{height:100%}.-NFn6q_filePanel .-NFn6q_fileRail{border:0;height:100%}.-NFn6q_resizeHandle{z-index:1;background:var(--reading-rule);outline:none;width:1px;position:relative}.-NFn6q_resizeHandle:before{content:"";background:var(--example-secondary);opacity:.35;border-radius:2px;width:3px;height:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.-NFn6q_resizeHandle:hover:before,.-NFn6q_resizeHandle:focus-visible:before,.-NFn6q_resizeHandle[data-separator=active]:before{opacity:1}.-NFn6q_resizeHandle[aria-orientation=horizontal]:before{width:20px;height:3px}.-NFn6q_resizeHandle:after{content:"";z-index:3;position:absolute;inset:0 -3px}.-NFn6q_resizeHandle[aria-orientation=horizontal]{width:100%;height:1px}.-NFn6q_resizeHandle[aria-orientation=horizontal]:after{inset:-3px 0}.-NFn6q_resizeHandle:hover,.-NFn6q_resizeHandle:focus-visible,.-NFn6q_resizeHandle[data-separator=active]{background:var(--example-secondary)}.-NFn6q_resizeHandle:focus-visible:after{outline:1px solid var(--example-secondary);outline-offset:-2px}@media (max-width:760px){.-NFn6q_example .-NFn6q_resizableFrame{height:calc(var(--example-height) + var(--example-preview-height))}}@media (pointer:coarse){.-NFn6q_workspaceToolbar{height:36px}.-NFn6q_iconButton,.-NFn6q_clearConsole{min-width:28px;min-height:28px}.-NFn6q_consoleDetails>summary{height:32px}.-NFn6q_directory>summary,.-NFn6q_example .-NFn6q_fileRow{min-height:28px}}.-NFn6q_example .-NFn6q_editor .cm-editor.cm-focused .cm-activeLine{background:var(--reading-surface);border-radius:0}.-NFn6q_iconButton,.-NFn6q_clearConsole,.-NFn6q_fileTab,.-NFn6q_fileRow,.-NFn6q_consoleDetails>summary{transition:color .12s,background-color .12s}@media (prefers-reduced-motion:reduce){.-NFn6q_iconButton,.-NFn6q_clearConsole,.-NFn6q_fileTab,.-NFn6q_fileRow,.-NFn6q_consoleDetails>summary{transition:none}}