*{margin:0;padding:0;box-sizing:border-box}: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{width:100%;height:100vh;display:flex;flex-direction:column}.editor-container{display:flex;flex:1;overflow:hidden}.editor-pane{flex:1;display:flex;flex-direction:column;border-right:1px solid var(--color-border);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);display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-sm);height:48px;min-height:48px}button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin:0;line-height:1;cursor:pointer;border:1px solid var(--color-border);background:var(--button-bg);font-family:var(--font-family);font-size:inherit;text-decoration:none;color:var(--color-text);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--border-radius-medium);transition:background-color .2s ease}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{display:flex;gap:var(--spacing-sm);align-items:center}.editor-wrapper{flex:1;overflow:auto;padding:0;width:100%}.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{flex:1;width:100%;padding:var(--spacing-lg);font-family:var(--font-family-mono);font-size:var(--font-size-base);line-height:var(--line-height-base);border:none;outline:none;resize:none;background:var(--color-background-secondary);color:var(--color-text)}.editor-clickable{height:100%;width:100%;cursor:text}.pane-container{display:flex;flex-direction:column;height:calc(100% - 48px)}.pane-third{flex:1;display:flex;justify-content:center;align-items:center;gap:var(--spacing-sm);overflow:hidden}.pane-third:not(:last-child){border-bottom:1px solid var(--color-border)}.drop-zone{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#bb4077;color:#fff;cursor:pointer;transition:background .15s ease}.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);border-color:#b3cc00;color:#333}.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);border-color:#006b42;color:#fff}.brand .button-about:hover{background:#00995c;border-color:#007a4d}}.modal-body-flex{padding:0;overflow:hidden;display:flex}.popup-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000080;z-index:999;display:flex;align-items:center;justify-content:center}.popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:72ch;max-width:calc(100vw - 32px);height:90vh;max-height:calc(100vh - 32px);background:var(--color-background);z-index:1000;border-radius:0;border:1px solid var(--color-border);display:flex;flex-direction:column;box-shadow:0 4px 24px #00000026;font-size:clamp(14px,2.5vw,var(--popup-font-size-max))}.popup .modal-content{height:100%;display:flex;flex-direction:column;max-height:calc(100vh - 32px)}.popup .modal-body{flex:1;overflow:auto}.popup .modal-body.html-preview{padding:var(--spacing-lg);overflow:auto}@media(max-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: rgb(170, 170, 170);--scrollbar-thumb-hover: var(--button-hover);--form-placeholder: #949494;--form-text: #1d1d1d;--variable: #39a33c;--highlight: #ff0;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;color:var(--text-main);background:var(--background-body)}@media(prefers-color-scheme:dark){.html-preview{--background-body: #1a1a1a;--background: #2a2a2a;--background-alt: #252525;--selection: #4a4a4a;--text-main: #e0e0e0;--text-bright: #ffffff;--text-muted: #a0a0a0;--links: #4da6ff;--focus: #4da6ffab;--border: #404040;--code: #e0e0e0;--button-base: #3a3a3a;--button-hover: #4a4a4a;--scrollbar-thumb: rgb(80, 80, 80);--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{margin-top:1.5em;margin-bottom:.5em;color:var(--text-bright);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);padding:2px 6px;border-radius:3px;font-family:Monaco,Menlo,Ubuntu Mono,Consolas,source-code-pro,monospace;font-size:.9em}.html-preview pre{overflow-x:auto;margin:16px 0}.html-preview pre code{background:none;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);margin:16px 0;padding-left:16px;color:var(--text-muted);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);padding:8px 12px;text-align:left}.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{font-weight:600;color:var(--text-bright)}.html-preview em{font-style:italic}