.codesnap-tool{--app-bg: #f4f4f5;--app-text: #52525b;--panel-bg: #ffffff;--panel-text: #18181b;--panel-border: #e4e4e7;--panel-surface-bg: rgba(255, 255, 255, .85);--panel-surface-border: rgba(228, 228, 231, .85);--accent-primary: #0077cc;--accent-secondary: #0284c7;--widget-outline-width: 1.5px;--widget-outline-offset: 6px;background-color:var(--app-bg);background-image:radial-gradient(rgba(0,0,0,.07) 1px,transparent 1px);background-size:20px 20px;color:var(--app-text)}.dark .codesnap-tool{--app-bg: #09090b;--app-text: #a1a1aa;--panel-bg: #18181b;--panel-text: #e4e4e7;--panel-border: #27272a;--panel-surface-bg: rgba(24, 24, 27, .6);--panel-surface-border: rgba(63, 63, 70, .5);--accent-primary: #38a3f8;--accent-secondary: #0ea5e9;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px)}.codesnap-tool .slide{box-shadow:0 12px 24px -4px #00000040}body.is-resizing-canvas *,body.is-resizing-canvas .slide,body.is-resizing-canvas .codesnap-workspace-container *,.is-resizing,.is-resizing *{transition:none!important}.codesnap-tool .slide-container{background:transparent}.codesnap-tool .slide.selected{outline:1.5px solid var(--accent-primary, #38a3f8);outline-offset:6px;box-shadow:0 12px 24px -4px #00000040}.codesnap-tool .slide:not(.selected){outline:1.5px dashed color-mix(in srgb,var(--accent-primary, #38a3f8) 35%,transparent);outline-offset:6px;box-shadow:0 12px 24px -4px #00000040}.codesnap-tool .slide:not(.selected)>.resize-handle{display:none!important}.codesnap-tool .selection-target{position:relative;outline-width:1.5px;outline-style:dashed;outline-offset:4px;outline-color:color-mix(in srgb,var(--slide-primary-color, currentColor) 22%,transparent);transition:outline-color .15s ease-in-out,outline-style .15s ease-in-out}.codesnap-tool .selection-target:not([class*=rounded-]){border-radius:6px}.codesnap-tool .selection-target:hover:not(.selected){outline-style:solid;outline-width:1.5px;outline-offset:4px;outline-color:color-mix(in srgb,var(--slide-primary-color, currentColor) 55%,transparent)}.codesnap-tool .selection-target.selected,.codesnap-tool .selection-target:focus-within:not(.slide-readonly){outline-style:solid;outline-width:1.5px;outline-offset:4px;outline-color:var(--accent-primary, #38a3f8)!important;box-shadow:none}.codesnap-tool .slide{container-type:size;container-name:slide-canvas;font-family:var(--slide-font-family, "Inter Variable", -apple-system, BlinkMacSystemFont, sans-serif)}.codesnap-title-font-cabinet{font-family:Cabinet Grotesk,-apple-system,BlinkMacSystemFont,sans-serif}.codesnap-title-font-inter{font-family:Inter,Inter Variable,-apple-system,BlinkMacSystemFont,sans-serif}.codesnap-title-font-serif{font-family:Georgia,Cambria,Times New Roman,serif}.codesnap-title-font-mono{font-family:JetBrains Mono Variable,JetBrains Mono,Google Sans Code Variable,ui-monospace,monospace}.codesnap-title-font-geist{font-family:Geist,Geist Sans,-apple-system,BlinkMacSystemFont,sans-serif}.codesnap-title-font-geist-mono{font-family:Geist Mono,ui-monospace,monospace}.codesnap-title-font-geist-pixel{font-family:Geist Pixel,ui-monospace,monospace}.codesnap-title-font-geist-serif{font-family:"Geist Serif",Georgia,serif}.codesnap-tool :is([style*="Geist Serif"],[style*="'Geist Serif'"],.codesnap-title-font-geist-serif){font-synthesis:weight}.codesnap-tool :is([style*="Geist Serif"],[style*="'Geist Serif'"],.codesnap-title-font-geist-serif):is(.font-extrabold,.font-bold),.codesnap-tool :is([style*="Geist Serif"],[style*="'Geist Serif'"],.codesnap-title-font-geist-serif) :is(.font-extrabold,.font-bold,h1,[data-editable-text]){font-synthesis:weight}.codesnap-body-font{font-family:inherit}.codesnap-tool .codesnap-split-layout{display:grid;min-height:100%;height:auto;width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-rows:auto 1fr auto;grid-template-areas:"tip      code" "headline code" "credits  code";align-items:center;gap:clamp(1rem,2.5cqw,2rem)}.codesnap-tool .split-tip-slot{grid-area:tip;min-width:0}.codesnap-tool .split-headline-slot{grid-area:headline;display:flex;flex-direction:column;gap:clamp(.5rem,1.5cqh,1rem);min-height:0;min-width:0;width:100%;max-width:100%}.codesnap-tool .split-code-slot{grid-area:code;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;max-width:100%}.codesnap-tool .split-credits-slot{grid-area:credits;min-width:0}.codesnap-tool .split-headline,.codesnap-tool .split-desc{width:100%;max-width:100%}@container slide-canvas (max-aspect-ratio: 1.2),slide-canvas (max-width: 760px){.codesnap-tool .codesnap-split-layout{grid-template-columns:1fr auto;grid-template-rows:auto auto 1fr;grid-template-areas:"tip      credits" "headline headline" "code     code";align-items:center;gap:clamp(.4rem,1.5cqh,.85rem)}.codesnap-tool .split-credits-slot{justify-self:end}.codesnap-tool .split-headline-slot{gap:.25rem}.codesnap-tool .split-code-slot .code-editor-card{font-size:clamp(10.5px,1.6cqw,12px)}}.codesnap-tool .code-editor-card .resize-handle{opacity:0;pointer-events:none;transition:opacity .15s ease}.codesnap-tool .selection-target:hover .code-editor-card .resize-handle,.codesnap-tool .code-editor-card:hover .resize-handle,.codesnap-tool .selection-target.selected .code-editor-card .resize-handle{opacity:1;pointer-events:auto}.slide-readonly .resize-handle,.slide-readonly .widget-label,.slide-readonly .curiosity-dot,.slide-readonly .curiosity-tooltip,.slide-readonly .codesnap-hint,.slide-readonly [data-discovery-hint],.slide-readonly [data-hint],.slide-readonly [role=tooltip],.slide-readonly .codesnap-tooltip{display:none!important}.slide-readonly .selection-target,.slide-readonly.slide,.slide-readonly .slide{outline:none!important;box-shadow:none!important}.preview-mode .resize-handle,.preview-mode .widget-label,.preview-mode .curiosity-dot,.preview-mode .curiosity-tooltip,.preview-mode .codesnap-hint,.preview-mode [data-discovery-hint],.preview-mode [data-hint],.preview-mode [role=tooltip],.preview-mode .codesnap-tooltip{display:none!important}.preview-mode .selection-target{outline:none!important;box-shadow:none!important}.preview-mode .slide,.preview-mode .slide.selected,.preview-mode .slide:not(.selected){outline:none!important}.codesnap-tool pre.shiki{background:transparent!important;margin:0;padding:0}.codesnap-tool .code-editor-card{box-shadow:0 0 0 1px color-mix(in srgb,var(--code-highlight-color) 28%,color-mix(in srgb,var(--code-fg) 16%,transparent)),0 1px 2px #ffffff24 inset,0 12px 28px -6px #00000059,0 26px 54px -12px #00000073,0 0 38px -8px color-mix(in srgb,var(--code-highlight-color) 22%,transparent)}.codesnap-tooltip{pointer-events:none;position:fixed;z-index:100;border-radius:.75rem;border:1px solid rgba(255,255,255,.1);background-color:#18181b;padding:.375rem .875rem;font-size:.75rem;font-weight:600;color:#f4f4f5;box-shadow:0 8px 24px #0006;transition:opacity .25s ease-out,transform .25s ease-out;opacity:0;transform:scale(.9)}.codesnap-tooltip.visible{opacity:1;transform:scale(1)}.codesnap-tool .custom-scrollbar,.insitu-popover-menu .custom-scrollbar,.custom-scrollbar{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.22) transparent;overscroll-behavior:contain}html.dark .codesnap-tool .custom-scrollbar,html.dark .insitu-popover-menu .custom-scrollbar,html.dark .custom-scrollbar{scrollbar-color:rgba(255,255,255,.25) transparent}.codesnap-tool .custom-scrollbar::-webkit-scrollbar,.insitu-popover-menu .custom-scrollbar::-webkit-scrollbar,.custom-scrollbar::-webkit-scrollbar{width:5px;height:5px}.codesnap-tool .custom-scrollbar::-webkit-scrollbar-track,.insitu-popover-menu .custom-scrollbar::-webkit-scrollbar-track,.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.codesnap-tool .custom-scrollbar::-webkit-scrollbar-thumb,.insitu-popover-menu .custom-scrollbar::-webkit-scrollbar-thumb,.custom-scrollbar::-webkit-scrollbar-thumb{background:#0003;border-radius:9999px;transition:background-color .15s ease}.codesnap-tool .custom-scrollbar::-webkit-scrollbar-thumb:hover,.insitu-popover-menu .custom-scrollbar::-webkit-scrollbar-thumb:hover,.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#00000061}html.dark .codesnap-tool .custom-scrollbar::-webkit-scrollbar-thumb,html.dark .insitu-popover-menu .custom-scrollbar::-webkit-scrollbar-thumb,html.dark .custom-scrollbar::-webkit-scrollbar-thumb{background:#ffffff38}html.dark .codesnap-tool .custom-scrollbar::-webkit-scrollbar-thumb:hover,html.dark .insitu-popover-menu .custom-scrollbar::-webkit-scrollbar-thumb:hover,html.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#fff6}@keyframes codesnapLayoutFade{0%{opacity:0}to{opacity:1}}.codesnap-layout-transition{animation:codesnapLayoutFade .2s ease-out forwards}.codesnap-tool .codesnap-hbf-layout,.codesnap-tool .codesnap-split-layout{transition:padding .3s ease-out,gap .3s ease-out}