:root{--penzil-bg: #FAF9F6;--penzil-surface: #FFFFFF;--penzil-surface-hover: #FDFCFA;--penzil-text-primary: #2C2C2C;--penzil-text-secondary: #6B6B6B;--penzil-text-muted: #9B9B9B;--penzil-text-inverse: #FFFFFF;--penzil-primary: #7A9E7E;--penzil-primary-hover: #6B8E6F;--penzil-primary-active: #5C7E60;--penzil-primary-light: #E8F0E9;--penzil-success: #7A9E7E;--penzil-error: #D64545;--penzil-error-light: #FDECEC;--penzil-warning: #E6A23C;--penzil-warning-light: #FDF6EC;--penzil-border: #E8E6E1;--penzil-border-light: #F0EEEA;--penzil-border-focus: #7A9E7E;--penzil-grey-50: #FAFAFA;--penzil-grey-100: #F5F5F5;--penzil-grey-200: #E8E8E8;--penzil-grey-300: #D4D4D4;--penzil-grey-400: #A3A3A3;--penzil-grey-500: #737373;--penzil-grey-600: #525252;--penzil-grey-700: #404040;--penzil-grey-800: #262626;--penzil-grey-900: #171717;--penzil-font-display: "Lora", serif;--penzil-font-ui: "Inter", sans-serif;--penzil-text-xs: 12px;--penzil-text-sm: 14px;--penzil-text-base: 16px;--penzil-text-lg: 18px;--penzil-text-xl: 20px;--penzil-text-2xl: 24px;--penzil-font-regular: 400;--penzil-font-semibold: 600;--penzil-leading-tight: 1.25;--penzil-leading-normal: 1.5;--penzil-leading-relaxed: 1.625;--penzil-space-1: 4px;--penzil-space-2: 8px;--penzil-space-3: 12px;--penzil-space-4: 16px;--penzil-space-6: 24px;--penzil-space-8: 32px;--penzil-space-12: 48px;--penzil-radius-sm: 4px;--penzil-radius-md: 6px;--penzil-radius-lg: 8px;--penzil-radius-full: 9999px;--penzil-shadow-sm: 0 1px 2px 0 rgba(44, 44, 44, .05);--penzil-shadow-md: 0 4px 6px -1px rgba(44, 44, 44, .1), 0 2px 4px -1px rgba(44, 44, 44, .06);--penzil-shadow-lg: 0 10px 15px -3px rgba(44, 44, 44, .1), 0 4px 6px -2px rgba(44, 44, 44, .05);--penzil-transition-fast: .15s;--penzil-transition-normal: .25s;--penzil-transition-slow: .35s;--penzil-ease-in-out: cubic-bezier(.4, 0, .2, 1);--penzil-ease-out: cubic-bezier(0, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--penzil-font-ui);font-size:var(--penzil-text-base);line-height:var(--penzil-leading-normal);color:var(--penzil-text-primary);background:var(--penzil-bg)}button{cursor:pointer;font:inherit}input,textarea{font:inherit}.penzil-btn-primary{background:var(--penzil-primary);color:var(--penzil-text-inverse);border:none;border-radius:var(--penzil-radius-md);padding:var(--penzil-space-3) var(--penzil-space-4);font-family:var(--penzil-font-ui);font-size:var(--penzil-text-sm);font-weight:var(--penzil-font-semibold);cursor:pointer;transition:background var(--penzil-transition-fast) var(--penzil-ease-in-out)}.penzil-btn-primary:hover{background:var(--penzil-primary-hover)}.penzil-btn-primary:active{background:var(--penzil-primary-active)}.penzil-btn-primary:disabled{opacity:.6;cursor:not-allowed}.penzil-btn-secondary{background:transparent;color:var(--penzil-text-primary);border:1px solid var(--penzil-border);border-radius:var(--penzil-radius-md);padding:var(--penzil-space-3) var(--penzil-space-4);font-family:var(--penzil-font-ui);font-size:var(--penzil-text-sm);font-weight:var(--penzil-font-regular);cursor:pointer;transition:background var(--penzil-transition-fast) var(--penzil-ease-in-out),border-color var(--penzil-transition-fast) var(--penzil-ease-in-out)}.penzil-btn-secondary:hover{background:var(--penzil-surface-hover);border-color:var(--penzil-grey-300)}.penzil-btn-danger{background:transparent;color:var(--penzil-error);border:1px solid var(--penzil-error);border-radius:var(--penzil-radius-md);padding:var(--penzil-space-3) var(--penzil-space-4);font-family:var(--penzil-font-ui);font-size:var(--penzil-text-sm);font-weight:var(--penzil-font-regular);cursor:pointer;transition:background var(--penzil-transition-fast) var(--penzil-ease-in-out)}.penzil-btn-danger:hover{background:var(--penzil-error-light)}.penzil-card{background:var(--penzil-surface);border:1px solid var(--penzil-border);border-radius:var(--penzil-radius-md);padding:var(--penzil-space-4);box-shadow:var(--penzil-shadow-sm)}.penzil-input{background:var(--penzil-surface);border:1px solid var(--penzil-border);border-radius:var(--penzil-radius-sm);padding:var(--penzil-space-2) var(--penzil-space-3);font-family:var(--penzil-font-ui);font-size:var(--penzil-text-base);color:var(--penzil-text-primary);transition:border-color var(--penzil-transition-fast) var(--penzil-ease-in-out);width:100%}.penzil-input:focus{outline:none;border-color:var(--penzil-border-focus);box-shadow:0 0 0 3px var(--penzil-primary-light)}.penzil-input::placeholder{color:var(--penzil-text-muted)}.auth-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:var(--penzil-space-4);background:var(--penzil-bg)}.auth-form{width:100%;max-width:400px;display:flex;flex-direction:column;gap:var(--penzil-space-4);background:var(--penzil-surface);border:1px solid var(--penzil-border);border-radius:var(--penzil-radius-md);padding:var(--penzil-space-8);box-shadow:var(--penzil-shadow-sm)}.auth-form h1{text-align:center;font-family:var(--penzil-font-display);font-size:var(--penzil-text-2xl);font-weight:var(--penzil-font-semibold);color:var(--penzil-text-primary);line-height:var(--penzil-leading-tight)}.auth-form input{background:var(--penzil-surface);border:1px solid var(--penzil-border);border-radius:var(--penzil-radius-sm);padding:var(--penzil-space-3);font-family:var(--penzil-font-ui);font-size:var(--penzil-text-base);color:var(--penzil-text-primary);transition:border-color var(--penzil-transition-fast) var(--penzil-ease-in-out);width:100%}.auth-form input:focus{outline:none;border-color:var(--penzil-border-focus);box-shadow:0 0 0 3px var(--penzil-primary-light)}.auth-form input::placeholder{color:var(--penzil-text-muted)}.auth-form button[type=submit]{background:var(--penzil-primary);color:var(--penzil-text-inverse);border:none;border-radius:var(--penzil-radius-md);padding:var(--penzil-space-3) var(--penzil-space-4);font-family:var(--penzil-font-ui);font-size:var(--penzil-text-sm);font-weight:var(--penzil-font-semibold);cursor:pointer;transition:background var(--penzil-transition-fast) var(--penzil-ease-in-out)}.auth-form button[type=submit]:hover{background:var(--penzil-primary-hover)}.auth-form button[type=submit]:active{background:var(--penzil-primary-active)}.auth-form button[type=submit]:disabled{opacity:.6;cursor:not-allowed}.auth-form .error{color:var(--penzil-error);background:var(--penzil-error-light);font-size:var(--penzil-text-sm);text-align:center;padding:var(--penzil-space-2) var(--penzil-space-3);border-radius:var(--penzil-radius-sm)}.auth-form .link{text-align:center;font-size:var(--penzil-text-sm);color:var(--penzil-primary);cursor:pointer;background:none;border:none;text-decoration:underline;font-family:var(--penzil-font-ui);transition:color var(--penzil-transition-fast) var(--penzil-ease-in-out)}.auth-form .link:hover{color:var(--penzil-primary-hover)}.penzil-app{display:flex;height:100vh}.penzil-sidebar{width:280px;background:var(--penzil-bg);border-right:1px solid var(--penzil-border);display:flex;flex-direction:column;flex-shrink:0}.penzil-sidebar-header{padding:var(--penzil-space-4);border-bottom:1px solid var(--penzil-border);display:flex;justify-content:space-between;align-items:center}.penzil-sidebar-header h2{font-family:var(--penzil-font-display);font-size:var(--penzil-text-xl);font-weight:var(--penzil-font-semibold);color:var(--penzil-text-primary)}.penzil-note-list{flex:1;overflow-y:auto;list-style:none}.penzil-note-item{display:flex;flex-direction:column;padding:var(--penzil-space-3) var(--penzil-space-4);border-left:3px solid transparent;border-bottom:1px solid var(--penzil-border-light);cursor:pointer;transition:background var(--penzil-transition-fast) var(--penzil-ease-in-out),border-color var(--penzil-transition-fast) var(--penzil-ease-in-out)}.penzil-note-item:hover{background:var(--penzil-surface-hover)}.penzil-note-item.active{background:var(--penzil-primary-light);border-left-color:var(--penzil-primary)}.penzil-note-item-title{font-family:var(--penzil-font-ui);font-size:var(--penzil-text-sm);font-weight:var(--penzil-font-semibold);color:var(--penzil-text-primary);margin-bottom:var(--penzil-space-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.penzil-note-item-meta{font-family:var(--penzil-font-ui);font-size:var(--penzil-text-xs);color:var(--penzil-text-muted)}.penzil-sidebar-footer{padding:var(--penzil-space-4);border-top:1px solid var(--penzil-border)}.penzil-editor{flex:1;display:flex;flex-direction:column;padding:var(--penzil-space-8);background:var(--penzil-surface);overflow-y:auto}.penzil-editor-content{max-width:800px;margin:0 auto;width:100%;display:flex;flex-direction:column;flex:1}.penzil-editor-content .penzil-save-status{font-family:var(--penzil-font-ui);font-size:var(--penzil-text-xs);color:var(--penzil-text-muted);text-align:right;margin-bottom:var(--penzil-space-2)}.penzil-editor-content .penzil-save-status.saving{color:var(--penzil-text-secondary)}.penzil-editor-content .penzil-save-status.saved{color:var(--penzil-success)}.penzil-editor-content .penzil-save-status.unsaved{color:var(--penzil-warning)}.penzil-editor-content input[type=text]{font-family:var(--penzil-font-display);font-size:var(--penzil-text-2xl);font-weight:var(--penzil-font-semibold);border:none;outline:none;padding:var(--penzil-space-2) 0;margin-bottom:var(--penzil-space-4);background:transparent;width:100%;color:var(--penzil-text-primary);line-height:var(--penzil-leading-tight)}.penzil-editor-content input[type=text]::placeholder{color:var(--penzil-text-muted)}.penzil-editor-content textarea{flex:1;border:none;outline:none;resize:none;font-family:var(--penzil-font-ui);font-size:var(--penzil-text-base);line-height:var(--penzil-leading-relaxed);background:transparent;width:100%;color:var(--penzil-text-primary);min-height:300px}.penzil-editor-content textarea::placeholder{color:var(--penzil-text-muted)}.penzil-editor-content .penzil-btn-danger{margin-top:var(--penzil-space-4);align-self:flex-start}.penzil-empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--penzil-space-12);text-align:center;color:var(--penzil-text-secondary);font-family:var(--penzil-font-ui);font-size:var(--penzil-text-sm)}.penzil-error{color:var(--penzil-error)}@media (max-width: 640px){.penzil-sidebar{display:none}.penzil-sidebar.open{display:flex;position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;width:100%}.penzil-editor{padding:var(--penzil-space-4)}}