*{box-sizing:border-box;margin:0;padding:0}:root{--color-background:#fff;--color-background-secondary:#f4f4f4;--color-border:#c6c6c6;--color-text:#333;--color-text-muted:#666;--color-white:#fff;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:12px;--spacing-lg:16px;--font-family:system-ui, sans-serif;--font-family-mono:"Monaco", "Menlo", "Ubuntu Mono", "Consolas", monospace;--font-size-base:14px;--font-weight-semibold:600;--line-height-base:1.6;--popup-font-size-max:24px;--border-radius-medium:2px;--button-bg:#f0f0f0;--button-bg-hover:#e0e0e0;--color-brand-yellow:#dfff00;--color-brand-green:#008351}@media (prefers-color-scheme:dark){:root{--color-background:#1a1a1a;--color-background-secondary:#2a2a2a;--color-border:#404040;--color-text:#e0e0e0;--color-text-muted:#a0a0a0;--color-white:#1a1a1a;--button-bg:#2a2a2a;--button-bg-hover:#3a3a3a}}html,body{background-color:var(--color-background-secondary);color:var(--color-text);font-family:var(--font-family);font-size:var(--font-size-base);margin:0;padding:0}#root{height:100vh}.app{flex-direction:column;width:100%;height:100vh;display:flex}.editor-container{flex:1;display:flex;overflow:hidden}.editor-pane{border-right:1px solid var(--color-border);flex-direction:column;flex:1;display:flex;overflow:hidden}.editor-pane:first-child{flex:0 0 360px}.editor-pane:last-child{border-right:none}.editor-header{padding:var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-lg);background-color:var(--color-background-secondary);border-bottom:1px solid var(--color-border);font-weight:var(--font-weight-semibold);font-size:var(--font-size-base);color:var(--color-text);justify-content:space-between;align-items:center;gap:var(--spacing-sm);height:48px;min-height:48px;display:flex}button{box-sizing:border-box;cursor:pointer;border:1px solid var(--color-border);background:var(--button-bg);line-height:1;font-family:var(--font-family);font-size:inherit;color:var(--color-text);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--border-radius-medium);justify-content:center;align-items:center;margin:0;text-decoration:none;transition:background-color .2s;display:inline-flex}button:hover{background:var(--button-bg-hover)}.button-large{padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--font-size-base)}.icon-btn{padding:var(--spacing-xs);width:24px}.icon-btn svg{display:block}.button-group{gap:var(--spacing-sm);align-items:center;display:flex}.editor-wrapper{flex:1;width:100%;padding:0;overflow:auto}.editor-wrapper .bn-container{height:100%}.bn-editor{padding-inline:var(--spacing-lg)!important;padding-block:var(--spacing-lg)!important}.bn-container{background-color:var(--color-background)}.ProseMirror{background-color:var(--color-background);color:var(--color-text)}.markdown-editor{width:100%;padding:var(--spacing-lg);font-family:var(--font-family-mono);font-size:var(--font-size-base);line-height:var(--line-height-base);resize:none;background:var(--color-background-secondary);color:var(--color-text);border:none;outline:none;flex:1}.editor-clickable{cursor:text;width:100%;height:100%}.pane-container{flex-direction:column;height:calc(100% - 48px);display:flex}.pane-third{justify-content:center;align-items:center;gap:var(--spacing-sm);flex:1;display:flex;overflow:hidden}.pane-third-stretch{justify-content:stretch;align-items:stretch}.pane-third:not(:last-child){border-bottom:1px solid var(--color-border)}.drop-zone{color:#fff;cursor:pointer;background:#bb4077;justify-content:center;align-items:center;width:100%;height:100%;transition:background .15s;display:flex}.drop-zone:hover,.drop-zone-active{background:#c4618c}.drop-zone-input{display:none}.brand{background:linear-gradient(135deg, var(--color-brand-green) 0%, #006b42 100%)}.brand .button-about{background:var(--color-brand-yellow);color:#333;border-color:#b3cc00}.brand .button-about:hover{background:#e6ff1a;border-color:#9a0}@media (prefers-color-scheme:dark){.brand{background:linear-gradient(135deg, var(--color-brand-yellow) 0%, #e6ff1a 100%)}.brand .button-about{background:var(--color-brand-green);color:#fff;border-color:#006b42}.brand .button-about:hover{background:#00995c;border-color:#007a4d}}.modal-body-flex{padding:0;display:flex;overflow:hidden}.popup-backdrop{z-index:999;background:#00000080;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.popup{background:var(--color-background);z-index:1000;border:1px solid var(--color-border);width:72ch;max-width:calc(100vw - 32px);height:90vh;max-height:calc(100vh - 32px);font-size:clamp(14px, 2.5vw, var(--popup-font-size-max));border-radius:0;flex-direction:column;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 24px #00000026}.popup .modal-content{flex-direction:column;height:100%;max-height:calc(100vh - 32px);display:flex}.popup .modal-body{flex:1;overflow:auto}.popup .modal-body.html-preview{padding:var(--spacing-lg);overflow:auto}@media (width<=768px){.editor-container{flex-direction:column}.editor-pane{border-right:none;border-bottom:1px solid var(--color-border)}.editor-pane:last-child{border-bottom:none}.pane-container{flex-direction:row}.pane-third:not(:last-child){border-bottom:none;border-right:1px solid var(--color-border)}}.html-preview{--background-body:#fff;--background:#efefef;--background-alt:#f7f7f7;--selection:#9e9e9e;--text-main:#363636;--text-bright:#000;--text-muted:#70777f;--links:#0076d1;--focus:#0096bfab;--border:#dbdbdb;--code:#000;--animation-duration:.1s;--button-base:#d0cfcf;--button-hover:#9b9b9b;--scrollbar-thumb:#aaa;--scrollbar-thumb-hover:var(--button-hover);--form-placeholder:#949494;--form-text:#1d1d1d;--variable:#39a33c;--highlight:#ff0;color:var(--text-main);background:var(--background-body);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Segoe UI Emoji,Apple Color Emoji,Noto Color Emoji,sans-serif;line-height:1.6}@media (prefers-color-scheme:dark){.html-preview{--background-body:#1a1a1a;--background:#2a2a2a;--background-alt:#252525;--selection:#4a4a4a;--text-main:#e0e0e0;--text-bright:#fff;--text-muted:#a0a0a0;--links:#4da6ff;--focus:#4da6ffab;--border:#404040;--code:#e0e0e0;--button-base:#3a3a3a;--button-hover:#4a4a4a;--scrollbar-thumb:#505050;--scrollbar-thumb-hover:#4a4a4a;--form-placeholder:#6a6a6a;--form-text:#e0e0e0;--variable:#5fc962;--highlight:#665200}}.html-preview h1,.html-preview h2,.html-preview h3,.html-preview h4,.html-preview h5,.html-preview h6{color:var(--text-bright);margin-top:1.5em;margin-bottom:.5em;font-weight:600}.html-preview h1:first-child{margin-top:0}.html-preview h1{font-size:2em}.html-preview h2{font-size:1.5em}.html-preview h3{font-size:1.25em}.html-preview h4{font-size:1.1em}.html-preview h5{font-size:1em}.html-preview h6{font-size:.9em}.html-preview p{margin:1em 0}.html-preview a{color:var(--links);text-decoration:none}.html-preview a:hover{text-decoration:underline}.html-preview code{background:var(--background);border-radius:3px;padding:2px 6px;font-family:Monaco,Menlo,Ubuntu Mono,Consolas,source-code-pro,monospace;font-size:.9em}.html-preview pre{margin:16px 0;overflow-x:auto}.html-preview pre code{background:0 0;padding:0}.html-preview ul,.html-preview ol{margin:16px 0;padding-left:32px}.html-preview li{margin:4px 0}.html-preview blockquote{border-left:4px solid var(--border);color:var(--text-muted);margin:16px 0;padding-left:16px;font-style:italic}.html-preview table{border-collapse:collapse;width:100%;margin:16px 0}.html-preview th,.html-preview td{border:1px solid var(--border);text-align:left;padding:8px 12px}.html-preview th{background:var(--background);font-weight:600}.html-preview hr{border:none;border-top:1px solid var(--border);margin:24px 0}.html-preview strong{color:var(--text-bright);font-weight:600}.html-preview em{font-style:italic}