:root{--app-bg:#eef2f4;--canvas-bg:#e6ebef;--panel:#fff;--line:#d7dee5;--ink:#26323f;--ink-strong:#111827;--muted:#64748b;--accent:#0f766e;--editor-bg:#fbfcfd;--editor-ink:#172033;--page-ink:#1f2937;--sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--serif:Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;--mono:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, ui-monospace, monospace;color:var(--ink);background:var(--app-bg);font-family:var(--sans);font-synthesis:none;letter-spacing:0;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:15px;line-height:1.5}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{margin:0}img,svg{max-width:100%}.app-shell{background:var(--app-bg);min-height:100svh;color:var(--ink)}.app-toolbar{z-index:20;border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--panel) 94%, transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);justify-content:space-between;align-items:center;gap:24px;min-height:68px;padding:12px 20px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:12px;min-width:0;display:flex}.brand-mark{background:#ecfdf9;border:1px solid #b7ded6;border-radius:8px;flex:none;justify-content:center;align-items:center;width:44px;height:44px;display:inline-flex;box-shadow:inset 0 0 0 1px #ffffffa6}.brand-mark img{width:38px;height:38px;display:block}.brand h1,.brand p,.panel-heading h2,.preview-heading h2{margin:0}.brand h1{color:var(--ink-strong);font-size:18px;font-weight:700;line-height:1.1}.brand p{max-width:min(460px,42vw);color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:1.4;overflow:hidden}.toolbar-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}button{min-height:38px;font:inherit;letter-spacing:0;cursor:pointer;border:1px solid #0000;border-radius:7px;justify-content:center;align-items:center;gap:8px;padding:0 13px;font-weight:650;transition:background-color .12s,border-color .12s,color .12s,box-shadow .12s;display:inline-flex}button:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 32%, transparent);outline-offset:2px}.ghost-button{color:var(--ink);background:var(--panel);border-color:var(--line)}.ghost-button:hover{background:#f2fbf9;border-color:#a7c9c3}.primary-button{color:#fff;background:var(--accent);border-color:var(--accent);box-shadow:0 8px 18px #0f766e38}.primary-button:hover{background:#0b615b;border-color:#0b615b}.workspace{grid-template-columns:minmax(320px,430px) minmax(0,1fr);min-height:calc(100svh - 68px);display:grid}.editor-panel{border-right:1px solid var(--line);background:var(--panel);flex-direction:column;min-height:0;display:flex}.panel-heading,.preview-heading{border-bottom:1px solid var(--line);min-height:52px;color:var(--muted);justify-content:space-between;align-items:center;gap:16px;padding:0 18px;font-size:13px;display:flex}.panel-heading h2,.preview-heading h2{color:var(--ink-strong);font-size:14px;font-weight:750}.markdown-editor-shell{background:var(--editor-bg);flex:1;width:100%;min-height:520px;overflow:hidden}.markdown-editor-shell .monaco-editor,.markdown-editor-shell .monaco-editor-background,.markdown-editor-shell .monaco-editor .margin{background:var(--editor-bg)}.markdown-editor-shell:focus-within{box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent)}.editor-loading{height:100%;color:var(--muted);background:var(--editor-bg);font:13px/1.4 var(--sans);align-items:center;padding:18px;display:flex}.style-panel{border-bottom:1px solid var(--line);background:#f8fbfc;gap:10px;padding:12px 14px 14px;display:grid}.style-presets{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;display:grid}.style-presets button{border-color:var(--line);min-height:32px;color:var(--ink);background:#fff;padding:0 8px;font-size:12px}.style-presets button:hover,.style-presets button.is-active{color:#fff;border-color:var(--accent);background:var(--accent)}.style-grid,.heading-size-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.heading-size-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.style-panel label{min-width:0;color:var(--muted);gap:4px;font-size:11px;line-height:1.2;display:grid}.style-panel select,.style-panel input{border:1px solid var(--line);width:100%;min-width:0;height:32px;color:var(--ink-strong);font:12px/1.2 var(--sans);background:#fff;border-radius:6px;padding:0 8px}.style-panel input{padding-right:4px}.style-panel select:focus,.style-panel input:focus{border-color:var(--accent);outline:3px solid color-mix(in srgb, var(--accent) 18%, transparent)}.heading-style-control,.accent-color-control{color:var(--muted);gap:6px;font-size:11px;line-height:1.2;display:grid}.heading-style-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid}.heading-style-options button{border-color:var(--line);min-height:64px;color:var(--ink);background:#fff;grid-template-columns:1fr;gap:6px;padding:8px;font-size:12px;display:grid}.heading-style-options button:hover,.heading-style-options button.is-active{border-color:var(--accent);color:var(--ink-strong);box-shadow:inset 0 0 0 1px var(--accent);background:#f2fbf9}.heading-style-sample{--sample-accent:var(--accent);background:#fbfdff;border:1px solid #dbe3ea;border-radius:5px;align-content:center;gap:5px;width:100%;height:32px;padding:6px 8px;display:grid}.heading-style-sample>span{background:#1f2937;border-radius:999px;height:4px;display:block}.heading-style-sample>span:first-child{width:64%}.heading-style-sample>span:last-child{width:42%}.heading-style-sample.sample-rule{border-bottom:3px solid #1f2937}.heading-style-sample.sample-accent{border-left:5px solid var(--sample-accent)}.heading-style-sample.sample-accent>span{background:var(--sample-accent)}.heading-style-sample.sample-plain{border-color:#e8eef4}.accent-color-row{flex-wrap:wrap;align-items:center;gap:7px;display:flex}.accent-color-row>button{border-color:var(--line);background:#fff;width:30px;height:30px;min-height:30px;padding:3px}.accent-color-row>button:hover,.accent-color-row>button.is-active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent)}.accent-color-row>button>span{border-radius:5px;width:100%;height:100%;display:block}.custom-color{border:1px solid var(--line);background:#fff;border-radius:7px;grid-template-columns:auto 34px;align-items:center;gap:6px;min-height:30px;padding:0 5px 0 8px;display:inline-grid}.custom-color input[type=color]{cursor:pointer;background:0 0;border:0;border-radius:5px;width:26px;height:24px;padding:0}.preview-panel{background:var(--canvas-bg);min-width:0}.preview-canvas{height:calc(100svh - 120px);padding:28px;overflow:auto}.preview-pages{flex-direction:column;align-items:center;gap:28px;min-width:max-content;display:flex}.document-surface{--page-width:210mm;--page-height:297mm;--page-margin:14mm;--printable-width:calc(210mm - 28mm);--printable-height:calc(297mm - 28mm)}.pdf-page{width:var(--page-width);height:var(--page-height);box-sizing:border-box;padding:var(--page-margin);color:var(--page-ink);background:#fff;position:relative;overflow:hidden;box-shadow:0 1px 2px #1414140f,0 18px 45px #1c232d29}.pdf-content{color:var(--page-ink);font-family:var(--body-font-family);font-size:var(--body-font-size);line-height:var(--body-line-height)}.pdf-content>:first-child{margin-top:0}.pdf-content h1,.pdf-content h2,.pdf-content h3,.pdf-content h4,.pdf-content h5{break-after:avoid;page-break-after:avoid;color:var(--heading-color);font-family:var(--heading-font-family);line-height:1.25}.pdf-content h1{border-bottom:var(--h1-rule-width) solid var(--heading-rule-color);font-size:var(--h1-size);margin:0 0 18px;padding-bottom:12px}.pdf-content h2{border-left:var(--h2-accent-width) solid var(--heading-rule-color);padding-left:var(--h2-accent-padding);font-size:var(--h2-size);margin:28px 0 12px}.pdf-content h3{font-size:var(--h3-size);margin:22px 0 10px}.pdf-content h4{font-size:var(--h4-size);margin:18px 0 8px}.pdf-content h5{font-size:var(--h5-size);margin:16px 0 8px}.pdf-content p,.pdf-content ul,.pdf-content ol,.pdf-content blockquote,.pdf-content table,.pdf-content pre{margin-top:0;margin-bottom:13px}.pdf-content a{color:#0f766e}.pdf-content blockquote{color:#334155;background:#eef8f6;border-left:4px solid #0f766e;padding:10px 14px}.pdf-content table{border-collapse:collapse;width:100%;font-size:10.5pt}.pdf-content th,.pdf-content td{vertical-align:top;border:1px solid #d6dde5;padding:7px 9px}.pdf-content th{font-family:var(--sans);text-align:left;background:#f1f5f9}.pdf-content code{font-family:var(--mono);background:#f1f5f9;border-radius:4px;padding:.12em .32em;font-size:.92em}.markdown-code{font:9.5pt/1.55 var(--mono);white-space:pre;background:#f8fafc;border:1px solid #d9e1e9;border-radius:8px;padding:13px 15px;overflow:auto}.markdown-code code{background:0 0;padding:0}.rotatable-block{--rotation-angle:90deg;--rotated-frame-height:calc(var(--printable-height) - 30mm);clear:both;break-inside:avoid;page-break-inside:avoid;margin:18px 0 20px;position:relative}.rotatable-block[data-rotation=counterclockwise]{--rotation-angle:-90deg}.block-controls{z-index:5;min-height:32px;color:var(--muted);font:12px/1.2 var(--sans);pointer-events:none;justify-content:flex-end;align-items:center;display:flex;position:absolute;inset:8px 8px auto auto}.control-buttons{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:auto;background:#ffffffe6;border:1px solid #cbd5e1d9;border-radius:8px;gap:6px;padding:5px;display:flex;box-shadow:0 10px 24px #0f172a29,0 2px 6px #0f172a14}.control-buttons button{width:32px;height:32px;min-height:32px;color:var(--ink);background:#f8fafcdb;border-color:#0000;padding:0}.control-buttons button:hover,.control-buttons button.is-active{color:#fff;border-color:var(--accent);background:var(--accent)}.control-buttons button:disabled{cursor:default;color:#94a3b8;background:#f8fafc;border-color:#dbe3ea}.control-buttons button:disabled:hover{color:#94a3b8;background:#f8fafc;border-color:#dbe3ea}.rotatable-frame{box-sizing:border-box;background:0 0;border:0;border-radius:0;justify-content:center;align-items:center;width:100%;min-height:90px;display:flex;position:relative;overflow:hidden}.rotatable-block[data-kind=mermaid] .rotatable-frame{min-height:0}.rotatable-content{box-sizing:border-box;justify-content:center;align-items:center;width:100%;padding:0;display:flex}.rotatable-content>img,.mermaid-output svg{object-fit:contain;max-width:100%;max-height:261mm;display:block}.mermaid-output,.mermaid-output>div{justify-content:center;align-items:center;width:100%;line-height:0;display:flex}.mermaid-output svg{margin:0!important;padding:0!important}.mermaid-loading,.mermaid-error{box-sizing:border-box;width:100%;font:10pt/1.5 var(--mono);border-radius:6px;margin:0;padding:14px}.mermaid-loading{color:#475569;background:#f8fafc}.mermaid-error{color:#9f1239;white-space:pre-wrap;background:#fff1f2}.rotatable-block.is-rotated{height:var(--rotated-frame-height);min-height:0}.rotatable-block.is-rotated .rotatable-frame{contain:layout paint;height:100%;min-height:0}.rotatable-block.is-rotated .rotatable-content{left:var(--printable-width);width:var(--rotated-frame-height);height:var(--printable-width);max-width:none;transform:rotate(var(--rotation-angle));transform-origin:0 0;position:absolute;top:0}.rotatable-block.is-rotated[data-rotation=counterclockwise] .rotatable-content{left:0;top:var(--rotated-frame-height)}.rotatable-block.is-rotated .rotatable-content>img,.rotatable-block.is-rotated .mermaid-output svg{max-width:var(--rotated-frame-height);max-height:var(--printable-width)}.file-input{display:none}.pagination-measure{width:var(--printable-width);height:var(--printable-height);visibility:hidden;pointer-events:none;position:fixed;top:0;left:-10000px;overflow:visible}.measure-page{width:var(--printable-width);height:var(--printable-height);overflow:visible}@media screen and (width<=900px){.app-toolbar{flex-direction:column;align-items:flex-start;position:static}.brand p{max-width:80vw}.toolbar-actions{justify-content:stretch;width:100%}.toolbar-actions button{flex:150px}.workspace{grid-template-columns:1fr}.editor-panel{border-right:0;border-bottom:1px solid var(--line)}.markdown-editor-shell{min-height:320px}.preview-canvas{height:auto;min-height:60svh;padding:18px}.rotatable-block.is-rotated{--rotated-frame-height:65vh;min-height:0}.rotatable-block.is-rotated .rotatable-frame{height:100%;min-height:0}.pagination-measure .rotatable-block.is-rotated{--rotated-frame-height:calc(var(--printable-height) - 30mm)}}@media print{@page{size:A4 portrait;margin:0}html,body,#root{background:#fff;width:auto;min-width:0;min-height:0;margin:0}body{color:#111827;-webkit-print-color-adjust:exact;print-color-adjust:exact}.no-print,.app-toolbar,.editor-panel,.preview-heading,.block-controls{display:none!important}.app-shell,.workspace,.preview-panel,.preview-canvas,.preview-pages{background:#fff;width:auto;min-width:0;height:auto;min-height:0;margin:0;padding:0;display:block;overflow:visible}.pdf-page{width:var(--page-width);height:var(--page-height);min-height:0;padding:var(--page-margin);break-after:page;page-break-after:always;box-shadow:none;margin:0;overflow:hidden}.pdf-page:last-child{break-after:auto;page-break-after:auto}.markdown-code{white-space:pre-wrap}.rotatable-block{break-inside:avoid;page-break-inside:avoid;margin:12px 0 14px}.rotatable-frame{border:0;border-radius:0;overflow:hidden}.rotatable-content{padding:0}.rotatable-content>img,.mermaid-output svg{max-width:100%;max-height:269mm}.rotatable-block.is-rotated{height:var(--rotated-frame-height);min-height:0;margin:0}.rotatable-block.is-rotated .rotatable-frame{width:var(--printable-width);height:100%;min-height:0}.rotatable-block.is-rotated .rotatable-content{left:var(--printable-width);width:var(--rotated-frame-height);height:var(--printable-width);transform:rotate(var(--rotation-angle));transform-origin:0 0;padding:0;position:absolute;top:0}.rotatable-block.is-rotated[data-rotation=counterclockwise] .rotatable-content{left:0;top:var(--rotated-frame-height)}.rotatable-block.is-rotated .rotatable-content>img,.rotatable-block.is-rotated .mermaid-output svg{max-width:var(--rotated-frame-height);max-height:var(--printable-width)}}