:root{--color-white: #ffffff;--color-gray-50: #fafafa;--color-gray-100: #f5f5f5;--color-gray-200: #e5e5e5;--color-gray-300: #d4d4d4;--color-gray-400: #a3a3a3;--color-gray-500: #737373;--color-gray-600: #525252;--color-gray-700: #404040;--color-gray-800: #262626;--color-gray-900: #171717;--color-black: #000000;--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--font-serif: "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN", serif;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--space-4xl: 6rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease;--max-width: 1200px;--content-width: 800px}*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:var(--font-sans);font-size:16px;line-height:1.6;color:var(--color-gray-900);background-color:var(--color-white)}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}a{color:inherit;text-decoration:none}.container{width:100%;max-width:var(--max-width);margin-left:auto;margin-right:auto;padding-left:var(--space-lg);padding-right:var(--space-lg)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:.75rem 1.5rem;font-size:1rem;font-weight:500;line-height:1;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.btn-primary{background-color:var(--color-black);color:var(--color-white)}.btn-primary:hover{background-color:var(--color-gray-800);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background-color:var(--color-white);color:var(--color-gray-900);border:1px solid var(--color-gray-200)}.btn-secondary:hover{background-color:var(--color-gray-50);border-color:var(--color-gray-300)}.btn-lg{padding:1rem 2rem;font-size:1.125rem}:focus-visible{outline:2px solid var(--color-gray-900);outline-offset:2px}button:focus-visible,a:focus-visible{outline:2px solid var(--color-gray-900);outline-offset:2px}:root{--navbar-height: 52px;--editor-bg: var(--color-gray-900);--preview-bg: var(--color-gray-100);--divider-width: 6px;--paper-shadow: 0 4px 20px rgba(0, 0, 0, .15), 0 0 0 1px rgba(0, 0, 0, .05)}html,body{height:100%;overflow:hidden}.loading-overlay{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-lg);background:var(--color-white);transition:opacity var(--transition-slow),visibility var(--transition-slow)}.loading-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.loading-spinner{width:32px;height:32px;border:3px solid var(--color-gray-200);border-top-color:var(--color-gray-900);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:.875rem;color:var(--color-gray-500);font-family:var(--font-mono)}.loading-progress{width:200px;height:3px;background:var(--color-gray-200);border-radius:2px;overflow:hidden}.loading-progress-bar{height:100%;background:var(--color-gray-900);width:0%;animation:progress 2s ease-in-out infinite}@keyframes progress{0%{width:0%}50%{width:70%}to{width:100%}}.resizer{width:var(--divider-width);background:var(--color-gray-200);cursor:col-resize;flex-shrink:0;position:relative;transition:background var(--transition-fast)}.resizer:hover,.resizer.active{background:var(--color-gray-400)}.resizer:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:40px;background:repeating-linear-gradient(to bottom,var(--color-gray-400) 0px,var(--color-gray-400) 2px,transparent 2px,transparent 6px);border-radius:2px;opacity:.5}.resizer:hover:after,.resizer.active:after{opacity:1}.drop-zone-active{position:relative}.drop-zone-active:after{content:"拖放 .md 文件到这里";position:absolute;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#000c;color:var(--color-white);font-size:1.25rem;font-weight:500;border:3px dashed var(--color-gray-400);pointer-events:none}.btn-sm{padding:.5rem .875rem;font-size:.8125rem;border-radius:var(--radius-sm)}.btn-ghost{background:transparent;color:var(--color-gray-600);border:none}.btn-ghost:hover{background:var(--color-gray-100);color:var(--color-gray-900)}.input-filename{padding:.375rem .625rem;font-size:.875rem;font-family:var(--font-mono);background:var(--color-gray-50);border:1px solid var(--color-gray-200);border-radius:var(--radius-sm);color:var(--color-gray-700);min-width:150px;max-width:250px}.input-filename:focus{outline:none;border-color:var(--color-gray-400);background:var(--color-white)}