@import "https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Patrick+Hand&family=Fira+Code:wght@400;500&display=swap";
:root{--crayon-pink:#e91e8c;--crayon-pink-hover:#d81b7f;--crayon-pink-light:#f48fb1;--crayon-pink-bg:#fce4ec;--crayon-pink-subtle:#fff0f5;--crayon-purple:#7b1fa2;--crayon-purple-hover:#6a1b9a;--crayon-purple-light:#ba68c8;--crayon-purple-bg:#f3e5f5;--crayon-purple-subtle:#faf0ff;--crayon-bg:#fff8f6;--crayon-surface:#fff;--crayon-text:#3e2723;--crayon-text-secondary:#6d4c5e;--crayon-text-muted:#a08090;--crayon-border:#e8c8d8;--crayon-border-light:#f3dde8;--crayon-accent:#ff6fb7;--crayon-success:#8bc34a;--crayon-warning:#ffb74d;--crayon-error:#ef5350;--crayon-shadow-sm:2px 2px 0px #7b1fa214;--crayon-shadow-md:3px 3px 0px #7b1fa21a, 1px 1px 0px #e91e8c0d;--crayon-shadow-lg:5px 5px 0px #7b1fa21f, 2px 2px 0px #e91e8c0f;--crayon-shadow-glow:0 0 20px #e91e8c26, 0 0 40px #7b1fa214;--font-heading:"Kalam", cursive;--font-body:"Patrick Hand", cursive;--font-code:"Fira Code", monospace;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:2rem;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--radius-wobbly:255px 15px 225px 15px / 15px 225px 15px 255px;--radius-wobbly-sm:15px 4px 12px 4px / 4px 12px 4px 15px;--radius-wobbly-lg:30px 8px 25px 8px / 8px 25px 8px 30px;--radius-round:50%;--radius-pill:9999px;--radius-md:12px;--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s ease;--transition-bounce:.4s cubic-bezier(.34, 1.56, .64, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-body);font-size:var(--font-size-lg);color:var(--crayon-text);background-color:var(--crayon-bg);min-height:100vh;line-height:1.6;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:9999;background-image:radial-gradient(circle at 20%,#e91e8c05 0%,#0000 50%),radial-gradient(circle at 80% 20%,#7b1fa205 0%,#0000 50%),radial-gradient(circle at 50% 80%,#f48fb105 0%,#0000 50%);width:100%;height:100%;position:fixed;top:0;left:0}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--crayon-purple);line-height:1.3}a{color:var(--crayon-pink);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--crayon-purple)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--crayon-pink-subtle);border-radius:var(--radius-pill)}::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--crayon-pink-light), var(--crayon-purple-light));border-radius:var(--radius-pill)}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg, var(--crayon-pink), var(--crayon-purple))}.app-container{flex-direction:column;height:100vh;max-height:100vh;display:flex;overflow:hidden}.app-header{padding:var(--space-sm) var(--space-lg);background:var(--crayon-surface);border-bottom:3px solid var(--crayon-border);box-shadow:var(--crayon-shadow-sm);z-index:100;justify-content:space-between;align-items:center;min-height:60px;display:flex;position:relative}.app-header:after{content:"";background:linear-gradient(90deg, var(--crayon-pink) 0%, var(--crayon-purple-light) 25%, var(--crayon-pink-light) 50%, var(--crayon-purple) 75%, var(--crayon-pink) 100%);background-size:200% 100%;height:3px;animation:8s linear infinite crayonStripe;position:absolute;bottom:-3px;left:0;right:0}@keyframes crayonStripe{0%{background-position:0 0}to{background-position:200% 0}}.app-logo{align-items:center;gap:var(--space-sm);font-family:var(--font-heading);font-size:var(--font-size-xl);color:var(--crayon-purple);-webkit-user-select:none;user-select:none;font-weight:700;display:flex}.app-logo-icon{filter:drop-shadow(1px 1px #e91e8c4d);font-size:1.6rem}.app-toolbar{align-items:center;gap:var(--space-sm);display:flex}.app-main,.split-pane{flex:1;display:flex;overflow:hidden}.pane{flex:1;position:relative;overflow:auto}.pane-editor{border-right:3px solid var(--crayon-border);background:var(--crayon-surface)}.pane-preview{background:var(--crayon-bg)}.pane-divider{background:linear-gradient(180deg, var(--crayon-pink-bg), var(--crayon-purple-bg));cursor:col-resize;width:6px;transition:background var(--transition-fast);flex-shrink:0;position:relative}.pane-divider:hover{background:linear-gradient(180deg, var(--crayon-pink-light), var(--crayon-purple-light))}.pane-divider:after{content:"⋮";color:var(--crayon-purple-light);font-size:14px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.mobile-tabs{border-bottom:2px solid var(--crayon-border);background:var(--crayon-surface);display:none}.mobile-tab{padding:var(--space-sm) var(--space-md);font-family:var(--font-heading);font-size:var(--font-size-base);color:var(--crayon-text-muted);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;flex:1;position:relative}.mobile-tab.active{color:var(--crayon-pink);font-weight:700}.mobile-tab.active:after{content:"";background:linear-gradient(90deg, var(--crayon-pink), var(--crayon-purple));border-radius:var(--radius-pill);height:3px;position:absolute;bottom:0;left:20%;right:20%}@media (max-width:768px){.split-pane{flex-direction:column}.pane-editor{border-right:none}.pane-divider,.pane.hidden-mobile{display:none}.mobile-tabs{display:flex}}.btn{justify-content:center;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-wobbly-sm);font-family:var(--font-heading);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;-webkit-user-select:none;user-select:none;border:2px solid #0000;font-weight:400;display:inline-flex;position:relative}.btn:active{transform:scale(.96)}.btn-primary{background:linear-gradient(135deg, var(--crayon-pink) 0%, var(--crayon-purple) 100%);color:#fff;border-color:var(--crayon-pink-hover);box-shadow:var(--crayon-shadow-md)}.btn-primary:hover{box-shadow:var(--crayon-shadow-lg);filter:brightness(1.05);transform:translateY(-1px)rotate(-.5deg)}.btn-secondary{background:var(--crayon-surface);color:var(--crayon-purple);border-color:var(--crayon-purple-light);box-shadow:var(--crayon-shadow-sm)}.btn-secondary:hover{background:var(--crayon-purple-bg);border-color:var(--crayon-purple);transform:translateY(-1px)rotate(.5deg)}.btn-ghost{color:var(--crayon-text-secondary);background:0 0;border-color:#0000}.btn-ghost:hover{background:var(--crayon-pink-bg);color:var(--crayon-pink)}.btn-icon{padding:var(--space-sm);border-radius:var(--radius-md);min-width:36px;min-height:36px}.btn-icon:hover{transform:rotate(-5deg)scale(1.05)}.btn-sm{padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-xs)}.btn-lg{padding:var(--space-md) var(--space-lg);font-size:var(--font-size-lg)}.card{background:var(--crayon-surface);border:2px solid var(--crayon-border);border-radius:var(--radius-wobbly-sm);box-shadow:var(--crayon-shadow-md);padding:var(--space-md);transition:all var(--transition-base)}.card:hover{box-shadow:var(--crayon-shadow-lg);transform:translateY(-2px)}.card-pink{border-color:var(--crayon-pink-light);background:linear-gradient(135deg, var(--crayon-surface) 0%, var(--crayon-pink-subtle) 100%)}.card-purple{border-color:var(--crayon-purple-light);background:linear-gradient(135deg, var(--crayon-surface) 0%, var(--crayon-purple-subtle) 100%)}.dropdown{display:inline-block;position:relative}.dropdown-menu{background:var(--crayon-surface);border:2px solid var(--crayon-border);border-radius:var(--radius-wobbly-sm);min-width:200px;box-shadow:var(--crayon-shadow-lg);padding:var(--space-xs);z-index:200;opacity:0;visibility:hidden;transition:all var(--transition-base);position:absolute;top:calc(100% + 4px);right:0;transform:translateY(-8px)scale(.96)}.dropdown-menu.open{opacity:1;visibility:visible;transform:translateY(0)scale(1)}.dropdown-item{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);width:100%;font-family:var(--font-body);font-size:var(--font-size-base);color:var(--crayon-text);cursor:pointer;border-radius:var(--radius-md);transition:all var(--transition-fast);text-align:left;background:0 0;border:none;display:flex}.dropdown-item:hover{background:var(--crayon-pink-bg);color:var(--crayon-pink);transform:translate(4px)}.dropdown-divider{background:var(--crayon-border-light);height:1px;margin:var(--space-xs) 0}.drawer-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:300;opacity:0;visibility:hidden;transition:all var(--transition-base);background:#7b1fa226;position:fixed;inset:0}.drawer-overlay.open{opacity:1;visibility:visible}.drawer{background:var(--crayon-surface);border-left:3px solid var(--crayon-border);z-index:301;width:360px;max-width:90vw;transition:transform var(--transition-slow);flex-direction:column;display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(100%);box-shadow:-5px 0 30px #7b1fa21a}.drawer.open{transform:translate(0)}.drawer-header{padding:var(--space-md) var(--space-lg);border-bottom:2px solid var(--crayon-border);justify-content:space-between;align-items:center;display:flex}.drawer-header h2{font-family:var(--font-heading);font-size:var(--font-size-xl);color:var(--crayon-purple)}.drawer-body{padding:var(--space-md);flex:1;overflow-y:auto}.history-item{padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-sm);background:var(--crayon-bg);border:2px solid var(--crayon-border-light);border-radius:var(--radius-wobbly-sm);cursor:pointer;transition:all var(--transition-fast);justify-content:space-between;align-items:center;display:flex}.history-item:hover{border-color:var(--crayon-pink-light);background:var(--crayon-pink-subtle);transform:translate(-4px)}.history-item-info{flex:1;min-width:0}.history-item-title{font-family:var(--font-heading);font-size:var(--font-size-base);color:var(--crayon-text);white-space:nowrap;text-overflow:ellipsis;font-weight:700;overflow:hidden}.history-item-date{font-size:var(--font-size-xs);color:var(--crayon-text-muted)}.history-item-actions{gap:var(--space-xs);display:flex}.history-empty{text-align:center;padding:var(--space-2xl);color:var(--crayon-text-muted)}.history-empty-icon{margin-bottom:var(--space-md);font-size:3rem}[data-preview-theme=github]{--preview-bg:#fff;--preview-text:#24292f;--preview-heading:#1f2328;--preview-code-bg:#f6f8fa;--preview-code-text:#24292f;--preview-link:#0969da;--preview-border:#d0d7de;--preview-blockquote:#656d76;--preview-font:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif}[data-preview-theme=sepia]{--preview-bg:#f4ecd8;--preview-text:#5b4636;--preview-heading:#3e2723;--preview-code-bg:#ece0c8;--preview-code-text:#5b4636;--preview-link:#8b5e3c;--preview-border:#d4c5a9;--preview-blockquote:#7a6652;--preview-font:Georgia, "Times New Roman", serif}[data-preview-theme=crayon]{--preview-bg:var(--crayon-pink-subtle);--preview-text:var(--crayon-text);--preview-heading:var(--crayon-purple);--preview-code-bg:var(--crayon-purple-bg);--preview-code-text:var(--crayon-purple);--preview-link:var(--crayon-pink);--preview-border:var(--crayon-border);--preview-blockquote:var(--crayon-text-secondary);--preview-font:var(--font-body)}.preview-content{padding:var(--space-lg) var(--space-xl);background:var(--preview-bg);max-width:800px;color:var(--preview-text);font-family:var(--preview-font);font-size:var(--font-size-base);min-height:100%;margin:0 auto;line-height:1.7}.preview-content h1{color:var(--preview-heading);border-bottom:2px solid var(--preview-border);padding-bottom:var(--space-sm);margin:var(--space-lg) 0 var(--space-md);font-size:2em;font-weight:700;font-family:var(--preview-font)}.preview-content h2{color:var(--preview-heading);border-bottom:1px solid var(--preview-border);padding-bottom:var(--space-xs);margin:var(--space-lg) 0 var(--space-md);font-size:1.5em;font-weight:600;font-family:var(--preview-font)}.preview-content h3{color:var(--preview-heading);margin:var(--space-md) 0 var(--space-sm);font-size:1.25em;font-weight:600;font-family:var(--preview-font)}.preview-content h4,.preview-content h5,.preview-content h6{color:var(--preview-heading);margin:var(--space-md) 0 var(--space-sm);font-weight:600;font-family:var(--preview-font)}.preview-content p{margin:0 0 var(--space-md)}.preview-content a{color:var(--preview-link);text-decoration:underline}.preview-content code{background:var(--preview-code-bg);color:var(--preview-code-text);font-family:var(--font-code);border-radius:4px;padding:2px 6px;font-size:.9em}.preview-content pre{background:var(--preview-code-bg);padding:var(--space-md);border-radius:var(--radius-md);margin:0 0 var(--space-md);border:1px solid var(--preview-border);overflow-x:auto}.preview-content pre code{background:0 0;border-radius:0;padding:0}.preview-content blockquote{border-left:4px solid var(--preview-border);padding:var(--space-sm) var(--space-md);margin:0 0 var(--space-md);color:var(--preview-blockquote);border-radius:0 var(--radius-md) var(--radius-md) 0;background:#00000005}.preview-content ul,.preview-content ol{padding-left:var(--space-lg);margin:0 0 var(--space-md)}.preview-content li{margin-bottom:var(--space-xs)}.preview-content table{border-collapse:collapse;width:100%;margin:0 0 var(--space-md)}.preview-content th,.preview-content td{border:1px solid var(--preview-border);padding:var(--space-sm) var(--space-md);text-align:left}.preview-content th{background:var(--preview-code-bg);font-weight:600}.preview-content hr{border:none;border-top:2px solid var(--preview-border);margin:var(--space-lg) 0}.preview-content img{border-radius:var(--radius-md);max-width:100%}.theme-switcher{background:var(--crayon-pink-bg);border-radius:var(--radius-pill);border:2px solid var(--crayon-border);gap:2px;padding:2px;display:flex}.theme-pill{padding:var(--space-xs) var(--space-md);font-family:var(--font-heading);font-size:var(--font-size-xs);color:var(--crayon-text-muted);cursor:pointer;border-radius:var(--radius-pill);transition:all var(--transition-fast);white-space:nowrap;background:0 0;border:none}.theme-pill:hover{color:var(--crayon-pink)}.theme-pill.active{background:linear-gradient(135deg, var(--crayon-pink), var(--crayon-purple));color:#fff;box-shadow:var(--crayon-shadow-sm)}.toast-container{bottom:var(--space-lg);right:var(--space-lg);z-index:500;gap:var(--space-sm);flex-direction:column;display:flex;position:fixed}.toast{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--crayon-surface);border:2px solid var(--crayon-border);border-radius:var(--radius-wobbly-sm);box-shadow:var(--crayon-shadow-lg);font-family:var(--font-body);font-size:var(--font-size-sm);animation:toastIn .4s var(--transition-bounce) forwards;max-width:350px;display:flex}.toast-success{border-color:var(--crayon-success)}.toast-error{border-color:var(--crayon-error)}.toast-info{border-color:var(--crayon-pink-light)}@keyframes toastIn{0%{opacity:0;transform:translate(100%)rotate(2deg)}to{opacity:1;transform:translate(0)rotate(0)}}@keyframes toastOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}.btn-ai{background:linear-gradient(135deg, var(--crayon-purple) 0%, var(--crayon-pink) 50%, var(--crayon-purple-light) 100%);color:#fff;border:2px solid var(--crayon-purple);background-size:200% 200%;animation:3s infinite aiGlow}.btn-ai:hover{box-shadow:var(--crayon-shadow-glow);transform:translateY(-2px)rotate(-1deg)}@keyframes aiGlow{0%,to{background-position:0%}50%{background-position:100%}}.spinner{border-radius:var(--radius-round);border:2px solid #ffffff4d;border-top-color:#fff;width:16px;height:16px;animation:.6s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.cm-editor{height:100%;font-family:var(--font-code)!important;font-size:15px!important}.cm-editor .cm-scroller{font-family:var(--font-code)!important}.cm-editor .cm-content{padding:var(--space-md) var(--space-lg)!important}.cm-editor .cm-gutters{background:var(--crayon-pink-subtle)!important;border-right:2px solid var(--crayon-border)!important;color:var(--crayon-pink-light)!important;font-family:var(--font-code)!important}.cm-editor .cm-activeLineGutter{background:var(--crayon-pink-bg)!important;color:var(--crayon-pink)!important}.cm-editor .cm-activeLine{background:#e91e8c0a!important}.cm-editor .cm-cursor{border-left-color:var(--crayon-pink)!important;border-left-width:2px!important}.cm-editor .cm-selectionBackground{background:#ba68c840!important}.cm-editor .cm-focused .cm-selectionBackground{background:#ba68c84d!important}.empty-preview{height:100%;color:var(--crayon-text-muted);padding:var(--space-2xl);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.empty-preview-icon{margin-bottom:var(--space-md);opacity:.5;font-size:4rem;animation:3s ease-in-out infinite float}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.empty-preview h3{font-family:var(--font-heading);color:var(--crayon-text-muted);margin-bottom:var(--space-sm)}.status-bar{padding:var(--space-xs) var(--space-lg);background:var(--crayon-surface);border-top:2px solid var(--crayon-border-light);font-size:var(--font-size-xs);color:var(--crayon-text-muted);justify-content:space-between;align-items:center;min-height:28px;display:flex}.status-bar-left,.status-bar-right{align-items:center;gap:var(--space-md);display:flex}.status-dot{border-radius:var(--radius-round);width:8px;height:8px;margin-right:var(--space-xs);display:inline-block}.status-dot-saved{background:var(--crayon-success)}.status-dot-unsaved{background:var(--crayon-warning);animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.text-pink{color:var(--crayon-pink)}.text-purple{color:var(--crayon-purple)}.text-muted{color:var(--crayon-text-muted)}.bg-pink{background:var(--crayon-pink-bg)}.bg-purple{background:var(--crayon-purple-bg)}.font-heading{font-family:var(--font-heading)}.font-body{font-family:var(--font-body)}.font-code{font-family:var(--font-code)}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-1deg)}75%{transform:rotate(1deg)}}.wiggle:hover{animation:.3s wiggle}.modal-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:400;padding:var(--space-lg);background:#7b1fa233;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--crayon-surface);border:3px solid var(--crayon-border);border-radius:var(--radius-wobbly-lg);box-shadow:var(--crayon-shadow-lg);padding:var(--space-xl);width:100%;max-width:500px;animation:modalIn .3s var(--transition-bounce)}@keyframes modalIn{0%{opacity:0;transform:scale(.9)rotate(-1deg)}to{opacity:1;transform:scale(1)rotate(0)}}.modal h2{font-family:var(--font-heading);color:var(--crayon-purple);margin-bottom:var(--space-md)}.modal-actions{gap:var(--space-sm);margin-top:var(--space-lg);justify-content:flex-end;display:flex}.input{width:100%;padding:var(--space-sm) var(--space-md);border:2px solid var(--crayon-border);border-radius:var(--radius-wobbly-sm);font-family:var(--font-body);font-size:var(--font-size-base);color:var(--crayon-text);background:var(--crayon-surface);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none}.input:focus{border-color:var(--crayon-pink);box-shadow:0 0 0 3px #e91e8c1a}.input::placeholder{color:var(--crayon-text-muted)}