@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--hue-primary: 250;--hue-success: 150;--hue-warning: 40;--hue-danger: 350;--color-primary: hsl(var(--hue-primary), 70%, 60%);--color-primary-hover: hsl(var(--hue-primary), 70%, 50%);--color-primary-light: hsl(var(--hue-primary), 70%, 96%);--color-bg: hsl(220, 20%, 98%);--color-surface: hsl(0, 0%, 100%);--color-surface-hover: hsl(220, 10%, 96%);--color-text: hsl(220, 30%, 20%);--color-text-dim: hsl(220, 20%, 50%);--color-border: hsl(220, 15%, 90%);--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);font-family:Inter,system-ui,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:var(--color-text);background-color:var(--color-bg)}:root.dark{--color-bg: hsl(220, 25%, 12%);--color-surface: hsl(220, 25%, 18%);--color-surface-hover: hsl(220, 25%, 22%);--color-text: hsl(220, 10%, 90%);--color-text-dim: hsl(220, 10%, 65%);--color-border: hsl(220, 20%, 25%);--color-primary-light: hsl(var(--hue-primary), 50%, 20%);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .5), 0 2px 4px -1px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -2px rgba(0, 0, 0, .2);color-scheme:dark}body{margin:0;min-width:320px;min-height:100vh}*,*:before,*:after{box-sizing:border-box}button{font-family:inherit;cursor:pointer}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}.editor-layout{display:flex;flex-direction:column;height:100vh;background-color:var(--color-bg)}.editor-toolbar{height:48px;background-color:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;align-items:center;padding:0 1rem}.editor-main{display:flex;flex:1;overflow:hidden}.editor-sidebar{width:250px;background-color:#f8f9fa;border-right:1px solid var(--color-border);overflow-y:auto}.editor-code{flex:1;display:flex;flex-direction:column;border-right:1px solid var(--color-border);min-width:300px}.editor-preview{width:40%;background-color:#fff;display:flex;flex-direction:column;min-width:300px}.app-container{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden}
