.tutorial-steps.svelte-kj9qvf{border-radius:.75rem;border-width:1px;border-color:var(--color-border);padding:1.5rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .04), 0 1px 3px 0 rgb(0 0 0 / .06);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color), 0 1px 3px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:var(--color-surface)}.step-item.svelte-kj9qvf{overflow:hidden;border-radius:.5rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;border:1px solid var(--color-border)}.step-item.active.svelte-kj9qvf{border-color:var(--color-accent)}.step-header.svelte-kj9qvf{width:100%;padding:1rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.step-header.svelte-kj9qvf:hover{background-color:var(--color-elevated)}.step-header.completed.svelte-kj9qvf{background-color:color-mix(in srgb,#10b981 10%,transparent)}.step-indicator.svelte-kj9qvf{display:flex;height:2rem;width:2rem;flex-shrink:0;align-items:center;justify-content:center;border-radius:9999px;background-color:var(--color-elevated);color:var(--color-muted);border:1px solid var(--color-border)}.step-header.completed.svelte-kj9qvf .step-indicator:where(.svelte-kj9qvf){--tw-border-opacity: 1;border-color:rgb(16 185 129 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1));color:#fff}.step-content.svelte-kj9qvf{padding:1rem;padding-top:0}.task-box.svelte-kj9qvf{margin-bottom:1rem;border-radius:.5rem;padding:1rem;background-color:color-mix(in srgb,var(--color-accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--color-accent) 22%,transparent)}.hint-box.svelte-kj9qvf{margin-bottom:1rem;border-radius:.5rem;padding:1rem;background-color:color-mix(in srgb,#f59e0b 12%,transparent);border:1px solid color-mix(in srgb,#f59e0b 22%,transparent)}.btn-sm.svelte-kj9qvf{padding:.375rem .75rem;font-size:.875rem;line-height:1.25rem}.prose :not(pre)>code{border-radius:.25rem;background-color:var(--color-code-bg);padding:.125rem .25rem;color:var(--color-text)}.prose pre{background-color:var(--color-code-bg);color:var(--color-text)}.prose pre code{background-color:transparent;padding:0;color:inherit}.tutorial-example-layout.svelte-1r6fwqn{display:flex;height:100%;flex-direction:column}.tutorial-header.svelte-1r6fwqn{display:flex;align-items:flex-start;justify-content:space-between;border-bottom-width:1px;border-color:var(--color-border);padding:1rem 1.5rem;flex-shrink:0}.tutorial-main.svelte-1r6fwqn{display:flex;min-height:0px;flex:1 1 0%}.tutorial-left.svelte-1r6fwqn{display:flex;flex:1 1 0%;flex-direction:column;border-right-width:1px;border-color:var(--color-border)}.view-mode-tabs.svelte-1r6fwqn{display:flex;border-bottom-width:1px;border-color:var(--color-border);padding-left:1rem;padding-right:1rem;flex-shrink:0;background-color:var(--color-surface)}.view-mode-tab.svelte-1r6fwqn{border-bottom-width:2px;border-color:transparent;padding:.75rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;color:var(--color-muted)}.view-mode-tab.svelte-1r6fwqn:hover{color:var(--color-text)}.view-mode-tab.active.svelte-1r6fwqn{color:var(--color-accent);border-color:var(--color-accent)}.content-area.svelte-1r6fwqn{display:flex;flex:1 1 0%;flex-direction:column;overflow:hidden}.code-editor-container.svelte-1r6fwqn{display:flex;height:100%;flex-direction:column}.editor-tabs.svelte-1r6fwqn{display:flex;border-bottom-width:1px;border-color:var(--color-border);padding-left:1rem;padding-right:1rem;flex-shrink:0}.editor-tab.svelte-1r6fwqn{border-bottom-width:2px;border-color:transparent;padding:.5rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;color:var(--color-muted)}.editor-tab.svelte-1r6fwqn:hover{color:var(--color-text)}.editor-tab.active.svelte-1r6fwqn{color:var(--color-accent);border-color:var(--color-accent)}.editor-container.svelte-1r6fwqn{flex:1 1 0%;overflow:hidden;position:relative}.editor-container.typing-mode.svelte-1r6fwqn{display:flex;flex-direction:column}.typing-solution.svelte-1r6fwqn{border-bottom-width:1px;border-color:var(--color-border);max-height:40%;overflow-y:auto;flex-shrink:0;background-color:var(--color-surface)}.typing-solution-header.svelte-1r6fwqn{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;border-color:var(--color-border);padding:.5rem 1rem;position:sticky;top:0;z-index:10;background-color:var(--color-elevated)}.typing-solution-code.svelte-1r6fwqn{padding:.75rem 1rem;font-size:.875rem;line-height:1.25rem}.typing-solution-code.svelte-1r6fwqn pre:where(.svelte-1r6fwqn){margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.75rem;line-height:1rem;line-height:1.625;white-space:pre-wrap;word-wrap:break-word}.typing-solution-code.svelte-1r6fwqn pre:where(.svelte-1r6fwqn) code:where(.svelte-1r6fwqn){color:#1f2937!important;opacity:.9}.dark .typing-solution-code.svelte-1r6fwqn pre:where(.svelte-1r6fwqn) code:where(.svelte-1r6fwqn){color:#f3f4f6!important}.solution-banner.svelte-1r6fwqn{position:absolute;top:.5rem;right:.5rem;z-index:10;display:flex;align-items:center;gap:.5rem;border-radius:.5rem;--tw-bg-opacity: 1;background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1));padding:.25rem .75rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1));--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.editor-controls.svelte-1r6fwqn{display:flex;gap:.75rem;border-top-width:1px;border-color:var(--color-border);padding:.75rem 1rem;flex-shrink:0}.btn-solution-active.svelte-1r6fwqn{--tw-bg-opacity: 1;background-color:rgb(16 185 129 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.btn-solution-active.svelte-1r6fwqn:hover{--tw-bg-opacity: 1;background-color:rgb(5 150 105 / var(--tw-bg-opacity, 1))}.btn-solution-active.svelte-1r6fwqn{--tw-border-opacity: 1;border-color:rgb(16 185 129 / var(--tw-border-opacity, 1))}.challenges-section.svelte-1r6fwqn{border-top-width:1px;border-color:var(--color-border);padding:1rem;max-height:200px;overflow-y:auto;background-color:var(--color-surface)}.challenge-card.svelte-1r6fwqn{border-radius:.5rem;border-width:1px;border-color:var(--color-border);padding:.75rem;background-color:var(--color-elevated)}.tutorial-right.svelte-1r6fwqn{display:flex;width:640px;flex-direction:column}.preview-canvas.svelte-1r6fwqn{padding:1rem;height:calc(100% - 256px);overflow:auto;display:flex;align-items:center;justify-content:center;background-color:var(--color-surface);background-image:radial-gradient(color-mix(in srgb,var(--color-muted) 16%,transparent) 1px,transparent 1px);background-size:20px 20px}.preview-console.svelte-1r6fwqn{border-top-width:1px;border-color:var(--color-border);height:256px;flex-shrink:0}@media (max-width: 1024px){.tutorial-main.svelte-1r6fwqn{flex-direction:column}.tutorial-left.svelte-1r6fwqn{height:24rem;border-right-width:0px;border-bottom-width:1px}.tutorial-right.svelte-1r6fwqn{width:100%}}