:root{--penzil-bg: #ffffff;--penzil-surface: #ffffff;--penzil-surface-hover: #f8f9fa;--penzil-text-primary: #1a1a2e;--penzil-text-secondary: #5c6370;--penzil-text-muted: #9da3af;--penzil-text-inverse: #ffffff;--penzil-ink: #2b4c7e;--penzil-ink-hover: #1e3a5f;--penzil-ink-active: #162d4a;--penzil-ink-light: #ebf0f7;--penzil-error: #c53030;--penzil-error-light: #fdf2f2;--penzil-success: #2b6b4f;--penzil-success-light: #f0fdf4;--penzil-warning: #b7791f;--penzil-warning-light: #fefce8;--penzil-border: #e2e8f0;--penzil-border-light: #edf2f7;--penzil-border-focus: #2b4c7e;--penzil-grey-50: #f9fafb;--penzil-grey-100: #f3f4f6;--penzil-grey-200: #e5e7eb;--penzil-grey-300: #d1d5db;--penzil-grey-400: #9ca3af;--penzil-grey-500: #6b7280;--penzil-grey-600: #4b5563;--penzil-grey-700: #374151;--penzil-grey-800: #1f2937;--penzil-grey-900: #111827;--penzil-font-display: "Source Serif 4", 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: 22px;--penzil-text-2xl: 28px;--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-shadow-sm: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);--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);--penzil-accent-strong: #9a330a;--penzil-accent-soft-bg: #fcefde}*,*: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-ink);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-ink-hover)}.penzil-btn-primary:active{background:var(--penzil-ink-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-ink-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-ink-light)}.auth-form input::placeholder{color:var(--penzil-text-muted)}.auth-form button[type=submit]{background:var(--penzil-ink);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-ink-hover)}.auth-form button[type=submit]:active{background:var(--penzil-ink-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-ink);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-ink-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;transition:width var(--penzil-transition-normal) var(--penzil-ease-in-out)}.penzil-sidebar.collapsed{width:0;border-right:none;overflow:hidden}.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-ink-light);border-left-color:var(--penzil-ink)}.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-note-section-divider{padding:var(--penzil-space-2) var(--penzil-space-4);font-family:var(--penzil-font-ui);font-size:var(--penzil-text-xs);font-weight:var(--penzil-font-semibold);color:var(--penzil-text-muted);letter-spacing:.05em;border-bottom:1px solid var(--penzil-border-light)}.penzil-note-source-label{font-family:var(--penzil-font-ui);font-size:var(--penzil-text-xs);color:var(--penzil-accent-strong);margin-top:2px}.penzil-sidebar-footer{padding:var(--penzil-space-4);border-top:1px solid var(--penzil-border);position:relative}.penzil-sidebar-header-actions{display:flex;gap:var(--penzil-space-2);align-items:center}.penzil-sidebar-toggle{background:none;border:none;color:var(--penzil-text-muted);cursor:pointer;padding:var(--penzil-space-1);border-radius:var(--penzil-radius-sm);display:flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;transition:color var(--penzil-transition-fast) var(--penzil-ease-out),background var(--penzil-transition-fast) var(--penzil-ease-out)}.penzil-sidebar-toggle:hover{color:var(--penzil-text-primary);background:var(--penzil-surface-hover)}.penzil-sidebar-expand-btn{position:fixed;top:var(--penzil-space-4);left:var(--penzil-space-4);z-index:5;background:var(--penzil-surface);border:1px solid var(--penzil-border);border-radius:var(--penzil-radius-sm);box-shadow:var(--penzil-shadow-sm);min-width:36px;min-height:36px;padding:var(--penzil-space-2);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--penzil-text-muted);transition:background var(--penzil-transition-fast) var(--penzil-ease-out),border-color var(--penzil-transition-fast) var(--penzil-ease-out)}.penzil-sidebar-expand-btn:hover{background:var(--penzil-surface-hover);border-color:var(--penzil-grey-300)}.penzil-sidebar-brand{font-family:var(--penzil-font-display);font-size:var(--penzil-text-xl);font-weight:var(--penzil-font-semibold);color:var(--penzil-text-primary)}.penzil-sidebar-close{display:none;background:none;border:none;font-size:24px;color:var(--penzil-text-secondary);cursor:pointer;padding:0 var(--penzil-space-2);line-height:1}.penzil-profile-trigger{display:flex;align-items:center;gap:var(--penzil-space-3);width:100%;padding:var(--penzil-space-2) var(--penzil-space-3);background:none;border:1px solid transparent;border-radius:var(--penzil-radius-md);cursor:pointer;text-align:left;transition:background var(--penzil-transition-fast) var(--penzil-ease-out),border-color var(--penzil-transition-fast) var(--penzil-ease-out)}.penzil-profile-trigger:hover{background:var(--penzil-surface-hover);border-color:var(--penzil-border-light)}.penzil-profile-avatar{width:32px;height:32px;border-radius:var(--penzil-radius-sm);background:var(--penzil-ink);color:var(--penzil-text-inverse);display:flex;align-items:center;justify-content:center;font-size:var(--penzil-text-sm);font-weight:var(--penzil-font-semibold);flex-shrink:0}.penzil-profile-info{flex:1;min-width:0}.penzil-profile-name{font-size:var(--penzil-text-sm);font-weight:var(--penzil-font-semibold);color:var(--penzil-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.penzil-profile-email{font-size:var(--penzil-text-xs);color:var(--penzil-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.penzil-profile-chevron{color:var(--penzil-text-muted);flex-shrink:0;display:flex;align-items:center}.penzil-profile-dropdown{position:absolute;bottom:calc(100% + var(--penzil-space-2));left:var(--penzil-space-4);right:var(--penzil-space-4);background:var(--penzil-surface);border:1px solid var(--penzil-border);border-radius:var(--penzil-radius-md);box-shadow:var(--penzil-shadow-md);z-index:20;overflow:hidden}.penzil-profile-dropdown-item{display:block;width:100%;padding:var(--penzil-space-3) var(--penzil-space-4);background:none;border:none;text-align:left;font-family:var(--penzil-font-ui);font-size:var(--penzil-text-sm);color:var(--penzil-text-primary);cursor:pointer;transition:background var(--penzil-transition-fast) var(--penzil-ease-out)}.penzil-profile-dropdown-item:hover{background:var(--penzil-surface-hover)}.penzil-profile-dropdown-item.danger{color:var(--penzil-error);border-top:1px solid var(--penzil-border-light)}.penzil-profile-dropdown-item.danger:hover{background:var(--penzil-error-light)}.penzil-dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:100}.penzil-dialog{background:var(--penzil-surface);border:1px solid var(--penzil-border);border-radius:var(--penzil-radius-md);box-shadow:var(--penzil-shadow-md);padding:var(--penzil-space-6);max-width:400px;width:100%}.penzil-dialog h2{font-family:var(--penzil-font-display);font-size:var(--penzil-text-xl);font-weight:var(--penzil-font-semibold);color:var(--penzil-text-primary);margin-bottom:var(--penzil-space-2)}.penzil-dialog p{font-size:var(--penzil-text-sm);color:var(--penzil-text-secondary);margin-bottom:var(--penzil-space-6);line-height:var(--penzil-leading-normal)}.penzil-dialog-actions{display:flex;gap:var(--penzil-space-3);justify-content:flex-end}.penzil-dialog-actions .penzil-btn-secondary{width:auto}.penzil-sidebar-overlay,.penzil-mobile-header{display:none}.penzil-mobile-menu-btn,.penzil-mobile-new-btn{background:none;border:none;font-size:20px;color:var(--penzil-text-primary);cursor:pointer;padding:var(--penzil-space-2);min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}.penzil-mobile-header-title{font-family:var(--penzil-font-display);font-size:var(--penzil-text-lg);font-weight:var(--penzil-font-semibold);color:var(--penzil-text-primary)}.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-origin-badge{display:inline-flex;align-items:center;gap:var(--penzil-space-1);background:var(--penzil-accent-soft-bg);color:var(--penzil-accent-strong);font-family:var(--penzil-font-ui);font-size:var(--penzil-text-xs);padding:var(--penzil-space-1) var(--penzil-space-2);border-radius:var(--penzil-radius-sm);margin-bottom:var(--penzil-space-3)}.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-app{flex-direction:column}.penzil-mobile-header{display:flex;align-items:center;justify-content:space-between;padding:var(--penzil-space-2) var(--penzil-space-4);border-bottom:1px solid var(--penzil-border);background:var(--penzil-surface);min-height:48px}.penzil-sidebar-overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;z-index:9;opacity:0;pointer-events:none;transition:opacity var(--penzil-transition-normal) var(--penzil-ease-in-out)}.penzil-sidebar-overlay.visible{opacity:1;pointer-events:auto}.penzil-sidebar{display:none}.penzil-sidebar.open{display:flex;position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;width:100%;background:var(--penzil-bg)}.penzil-sidebar-close{display:block}.penzil-editor{padding:var(--penzil-space-4);flex:1;min-height:0}.penzil-empty-state{padding:var(--penzil-space-8)}}