:root {
  --bg:#f0f0f1;--paper:#fafafb;--control:#f1f1f3;--text:#343438;--body-text:#626269;
  --muted:#83838a;--quiet:#a0a0a7;--line:#e3e3e7;--edge:#fff;--hover:#e8e8ed;
  --purple:#637db8;--purple-soft:#e4eaf7;--page-width:750px;
  --card-shadow:0 8px 24px #33333f08,0 2px 4px #33333f04,inset 0 1px 1px #fff;
  --control-shadow:0 2px 5px #33333f08,inset 0 1px 1px #fff;
  --panel-shadow:0 16px 50px #20202a20,0 3px 8px #20202a0c;
  color-scheme:light;
}
body.dark {
  --bg:#303032;--paper:#28282a;--control:#343436;--text:#e1e1e5;--body-text:#b9b9c0;
  --muted:#929298;--quiet:#75757e;--line:#3a3a3e;--edge:#ffffff05;--hover:#3a3a3e;
  --purple:#a8bbf3;--purple-soft:#3b4258;
  --card-shadow:0 10px 26px #00000018,0 2px 5px #0000000c,inset 0 1px 1px #ffffff02;
  --control-shadow:0 2px 6px #00000014,inset 0 1px 1px #ffffff04;
  --panel-shadow:0 18px 55px #00000040,0 3px 10px #00000018;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:13px 'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
button{cursor:pointer;border:0;background:none}
button:disabled{opacity:.5;cursor:wait}
button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
i[data-icon]{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;font-style:normal}
[hidden]{display:none!important}
.app{display:flex;height:100dvh;overflow:hidden;max-width:1800px;margin:auto}
.sidebar{width:200px;flex-shrink:0;padding:33px 15px 16px;display:flex;flex-direction:column}
.files-heading{display:flex;align-items:center;justify-content:space-between;margin:0 8px 17px 13px;font-size:12px;font-weight:500;color:var(--muted)}
.icon-button{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border-radius:10px;color:var(--muted)}
.icon-button:hover{background:var(--control);color:var(--text)}
.icon-button svg{width:16px;height:16px}
.document-list{display:flex;flex-direction:column;gap:4px;overflow:auto;min-height:60px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.doc-item{display:block;padding:11px 13px;text-align:left;border-radius:11px;width:100%;color:var(--muted);border:1px solid transparent}
.doc-item:hover{background:var(--control);color:var(--body-text)}
.doc-item.active{background:var(--paper);color:var(--text);border-color:var(--edge);box-shadow:0 2px 5px #00000008}
.doc-item-title{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
.empty-docs{font-size:11px;color:var(--muted);padding:15px;line-height:1.7}
.sidebar-bottom{margin-top:auto;padding:20px 8px 0 13px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:8px}
#saveStatus{color:var(--quiet);font-size:10px}
.main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.editor-area{flex:1;min-height:0;overflow:auto;padding:34px 42px 24px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--line) transparent;position:relative}
.toolbar{width:max-content;max-width:100%;display:flex;align-items:center;gap:3px;padding:6px 7px;border:1px solid var(--edge);border-radius:16px;background:var(--paper);margin:0 auto 20px;box-shadow:var(--control-shadow);position:sticky;top:0;z-index:3}
.toolbar select{appearance:none;background:transparent url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3 5 3 3 3-3' stroke='%239999a0' stroke-width='1.3' fill='none'/%3E%3C/svg%3E") no-repeat right 8px center;border:0;border-radius:10px;padding:9px 24px 9px 12px;font-size:11px;outline:none;width:123px;cursor:pointer}
.toolbar select:hover{background-color:var(--control)}
.toolbar-divider{height:17px;width:1px;background:var(--line);margin:0 3px}
.format-button{height:34px;width:34px;min-width:28px;border-radius:10px;color:var(--muted);font-size:15px;display:grid;place-items:center;transition:background .15s,color .15s;border:0}
.format-button:hover,.format-button.active{background:var(--control);color:var(--text)}
.format-button svg{height:15px;width:15px}
.italic{font-family:Georgia,serif;font-size:19px;font-style:italic}
.underline{text-decoration:underline;text-underline-offset:3px;font-size:14px}
.format-options{position:relative}
.format-options summary{cursor:pointer;list-style:none}
.format-options summary::-webkit-details-marker{display:none}
.format-popover{position:absolute;top:43px;right:0;width:165px;background:var(--paper);border:1px solid var(--edge);border-radius:14px;padding:6px;box-shadow:var(--panel-shadow)}
.format-popover button{display:block;width:100%;padding:10px 11px;text-align:left;border-radius:9px;font-size:11px;color:var(--body-text)}
.format-popover button:hover{background:var(--control)}
.paper{width:var(--page-width);max-width:100%;min-height:600px;margin:0 auto;padding:40px 42px;background:var(--paper);border:1px solid var(--edge);border-radius:24px;box-shadow:var(--card-shadow);position:relative;overflow-wrap:anywhere}
.title-row{display:flex;align-items:flex-start;gap:13px;margin-bottom:30px}
.title-row>.icon-button{margin:0 -10px 0 auto;opacity:0;transition:opacity .15s}
.paper:hover .title-row>.icon-button,.paper:focus-within .title-row>.icon-button,.title-row>.icon-button:focus-visible{opacity:1}
#docTitle{flex:1;min-width:0;font-size:27px;line-height:1.35;letter-spacing:-.6px;font-weight:500;margin:0;outline:none;min-height:37px}
#docTitle:empty:before{content:'Untitled document';color:var(--quiet)}
.document-content{font-size:16px;line-height:1.85;color:var(--body-text);outline:none;min-height:400px;overflow-wrap:anywhere}
.document-content p{margin:0 0 19px}
.document-content p.lead{color:var(--muted);font-style:normal;margin-bottom:22px}
.document-content h1,.document-content h2,.document-content h3{color:var(--text);font-weight:500;line-height:1.5;font-family:inherit;letter-spacing:-.3px}
.document-content h1{font-size:25px}.document-content h2{font-size:20px;margin:28px 0 12px}.document-content h3{font-size:17px;margin:22px 0 10px}
.document-content ul,.document-content ol{padding-left:22px;margin:13px 0 23px}
.document-content li{padding-left:4px;margin:6px 0}.document-content li::marker{color:var(--quiet)}
.document-content strong{color:var(--text);font-weight:550}
.document-content mark{background:var(--purple-soft);color:var(--purple);border-radius:4px;padding:2px 3px}
.document-content [style*="background-color"]{color:#34333d}
.document-content blockquote{border-left:2px solid var(--quiet);margin:25px 0;padding:3px 0 3px 19px;color:var(--muted)}
.document-content blockquote p{margin:0}.document-content a{color:var(--purple)}
.document-content table,.ai-result-content table{border-collapse:collapse;width:100%;font-size:12px;margin:17px 0}
.document-content th,.document-content td,.ai-result-content th,.ai-result-content td{border:1px solid var(--line);padding:10px;text-align:left}
.document-content th,.ai-result-content th{background:var(--control);font-weight:500;color:var(--text)}
.document-content pre{white-space:pre-wrap;background:var(--control);padding:18px;border-radius:12px;font-size:12px;line-height:1.7}
.document-content hr{border:0;border-top:1px solid var(--line);margin:24px 0}
.document-content:empty:before{content:'Write something…';color:var(--quiet);pointer-events:none}
#markdownEditor{background:none;border:0;outline:none;resize:vertical;width:100%;min-height:400px;font-family:monospace;line-height:1.8;font-size:13px;color:var(--body-text)}
.composer-area{flex-shrink:0;padding:12px 42px 0;position:relative;background:var(--bg);z-index:5}
.composer-area:before{content:'';height:24px;position:absolute;left:0;right:0;top:-24px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.ai-composer{max-width:var(--page-width);margin:0 auto;border:1px solid var(--edge);border-radius:18px;background:var(--paper);padding:10px 12px;box-shadow:var(--card-shadow)}
.ai-composer:focus-within{box-shadow:var(--card-shadow),0 0 0 1px #a8bbf322}
.composer-input-row{display:flex;align-items:center;gap:10px}
.composer-input-row input{border:0;outline:none;background:none;flex:1;min-width:0;font-size:13px;padding:7px 0;color:var(--text)}
.composer-input-row input::placeholder{color:var(--muted)}
.demo-label{font-size:9px;color:var(--quiet);margin-right:4px}
.submit-ai{display:grid;place-items:center;border-radius:10px;background:var(--control);color:var(--body-text);border:1px solid var(--edge);width:32px;height:32px;flex-shrink:0}
.submit-ai:hover{background:var(--hover);color:var(--text)}
.submit-ai svg{width:16px;height:16px}
.selected-context{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--purple-soft);color:var(--purple);padding:7px 10px;margin-bottom:9px;border-radius:10px;font-size:11px}
#selectedExcerpt{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.selected-context button{display:grid;place-items:center;padding:2px}
.selected-context svg{width:12px;height:12px}
.statusbar{flex-shrink:0;min-height:44px;padding:0 42px 4px;display:flex;align-items:center;justify-content:space-between;color:var(--quiet);font-size:9px;width:calc(var(--page-width) + 84px);max-width:100%;margin:auto}
.statusbar>div{display:flex;align-items:center;gap:16px}
.statusbar button{font-size:9px;padding:3px 0;color:var(--quiet)}
.statusbar button:hover{color:var(--body-text)}
.mobile-files{display:none}
.selection-toolbar{position:fixed;z-index:50;display:flex;align-items:center;background:var(--control);color:var(--text);border:1px solid var(--edge);border-radius:13px;box-shadow:var(--panel-shadow);padding:5px;gap:1px}
.selection-toolbar button{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--body-text);padding:8px;border-radius:8px}
.selection-toolbar button:hover{background:var(--hover)}.selection-toolbar button:first-child{color:var(--purple)}
.selection-toolbar>span{width:1px;height:17px;background:var(--line);margin:0 4px}
.ai-panel{position:fixed;width:370px;right:34px;bottom:118px;max-height:calc(100dvh - 160px);z-index:20;background:var(--paper);border:1px solid var(--edge);box-shadow:var(--panel-shadow);border-radius:22px;display:flex;flex-direction:column;overflow:hidden;animation:enter .15s ease-out}
.ai-panel header{display:flex;align-items:center;gap:10px;padding:18px 20px 14px;border-bottom:1px solid var(--line);font-size:12px;font-weight:500}
.ai-panel header small{font-size:9px;font-weight:400;color:var(--quiet);display:inline;margin-left:8px}
.ai-panel header>.icon-button{margin-left:auto}
.ai-panel-body{padding:20px;overflow:auto;font-size:12px;line-height:1.8}
.ai-result-label{font-size:9px;letter-spacing:.7px;color:var(--purple);text-transform:uppercase;margin:0 0 12px}
.ai-result-content{color:var(--body-text)}.ai-result-content p{margin:0 0 13px}.ai-result-content h3{font-size:15px;color:var(--text)}.ai-result-content ul,.ai-result-content ol{padding-left:18px}
.ai-source-note{font-size:10px;color:var(--muted);border-top:1px solid var(--line);margin-top:16px;padding-top:12px;line-height:1.6}
.ai-panel footer{border-top:1px solid var(--line);padding:14px 20px 17px}
.ai-panel footer>span{display:block;font-size:9px;color:var(--quiet);margin-bottom:12px}
.ai-panel footer>div{display:flex;gap:8px;justify-content:flex-end}
.ai-panel footer button{font-size:10px;padding:9px 13px;border-radius:10px;border:1px solid var(--line)}
.primary-button{background:var(--control);color:var(--text);border:1px solid var(--edge)!important;display:flex;align-items:center;justify-content:center;gap:7px;box-shadow:var(--control-shadow)}
.primary-button:hover{background:var(--hover)}.primary-button svg{width:12px;height:12px}
.diagram-flow{display:flex;align-items:center;gap:7px;justify-content:center;margin:20px 0;flex-wrap:wrap}
.diagram-node{border:1px solid var(--edge);background:var(--control);color:var(--body-text);padding:10px 13px;border-radius:12px;font-size:11px;text-align:center}
.diagram-arrow{color:var(--quiet);font-size:16px}
dialog{background:var(--paper);color:var(--text);border:1px solid var(--edge);padding:0;box-shadow:var(--panel-shadow);border-radius:22px;width:460px;max-width:calc(100% - 32px)}
dialog::backdrop{background:#15151b70;backdrop-filter:blur(5px)}
.search-field{display:flex;align-items:center;padding:21px;gap:10px;border-bottom:1px solid var(--line)}
.search-field i{color:var(--muted)}.search-field input{background:none;outline:none;border:0;min-width:0;flex:1;font-size:14px}
.dialog-close{font-size:10px;border:1px solid var(--line);border-radius:6px;padding:4px 6px;color:var(--quiet)}
#searchResults{padding:9px;max-height:360px;overflow:auto}
.search-result{display:flex;align-items:center;text-align:left;gap:12px;width:100%;padding:13px;border-radius:12px}
.search-result:hover{background:var(--control)}.search-result small{display:block;margin-top:5px;color:var(--quiet);font-size:10px}
#genericContent{padding:27px}
.modal-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.modal-heading h2{font-size:21px;font-weight:500;margin:0;letter-spacing:-.5px}
.modal-description{font-size:12px;line-height:1.8;color:var(--muted)}
.modal-input{width:100%;border:1px solid var(--edge);border-radius:11px;padding:12px;background:var(--control);outline-color:var(--purple);margin:5px 0 15px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.modal-actions button{padding:10px 14px;border:1px solid var(--line);border-radius:10px;font-size:11px}
.shortcut-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
kbd{font-family:inherit;background:var(--control);border:1px solid var(--edge);border-radius:5px;padding:3px 6px;font-size:10px}
.dropdown{position:fixed;background:var(--paper);border:1px solid var(--edge);box-shadow:var(--panel-shadow);border-radius:15px;padding:6px;z-index:60;width:190px}
.dropdown button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;font-size:11px;padding:11px;border-radius:9px;color:var(--body-text)}
.dropdown button>span{color:var(--quiet);font-size:9px}
.dropdown button:hover{background:var(--control)}.dropdown .danger,.danger{color:#d18c88}
.toast{position:fixed;left:calc(50% + 100px);transform:translate(-50%,10px);bottom:113px;z-index:100;background:var(--control);color:var(--text);border:1px solid var(--edge);padding:11px 18px;border-radius:12px;font-size:11px;box-shadow:var(--panel-shadow);opacity:0;pointer-events:none;transition:all .2s;max-width:85vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
.sidebar-backdrop{display:none}
::selection{background:#596ea980;color:var(--text)}
@keyframes enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){:root{--page-width:800px}.editor-area{padding-top:44px}.paper{padding:45px 50px}.document-content{font-size:17px}}
@media(max-width:1100px){.sidebar{width:180px;padding-left:10px;padding-right:10px}.editor-area{padding-left:28px;padding-right:28px}.paper{padding-left:32px;padding-right:32px}.composer-area{padding-left:28px;padding-right:28px}.statusbar{width:calc(var(--page-width) + 56px);padding-left:28px;padding-right:28px}.toast{left:calc(50% + 90px)}}
@media(max-width:900px){.sidebar{width:224px;position:fixed;top:10px;bottom:10px;left:10px;z-index:40;transform:translateX(calc(-100% - 11px));transition:transform .2s;background:var(--bg);border:1px solid var(--edge);border-radius:20px;box-shadow:var(--panel-shadow);padding:20px 13px 15px}.sidebar-open .sidebar{transform:translateX(0)}.sidebar-open .sidebar-backdrop{display:block;position:fixed;inset:0;background:#11111866;z-index:39;backdrop-filter:blur(3px)}.statusbar .mobile-files{display:block;color:var(--body-text)}.toast{left:50%}.editor-area{padding-top:25px}}
@media(max-width:600px){.editor-area{padding:16px 14px 18px}.toolbar{padding:5px;gap:1px;border-radius:14px;margin-bottom:15px}.toolbar select{width:104px;padding-left:9px;padding-right:21px;font-size:10px}.toolbar-divider{margin:0 2px}.format-button{width:30px;height:32px;min-width:26px;font-size:14px}.format-button svg{width:14px;height:14px}.italic{font-size:18px}.paper{padding:28px 25px;border-radius:21px;min-height:calc(100dvh - 210px)}.title-row{margin-bottom:24px;gap:7px}#docTitle{font-size:24px;line-height:1.4}.title-row>.icon-button{opacity:1;margin-right:-8px;width:26px;height:30px}.document-content{font-size:14px;line-height:1.85;min-height:330px}.document-content h2{font-size:18px}.document-content table{font-size:10px}.document-content th,.document-content td{padding:6px}.composer-area{padding:9px 14px 0}.ai-composer{padding:9px 10px;border-radius:17px}.composer-input-row{gap:7px}.composer-input-row input{font-size:12px}.demo-label{font-size:8px}.submit-ai{width:30px;height:30px}.statusbar{padding:0 20px 3px;min-height:42px;width:100%;font-size:8px}.statusbar>div{gap:13px}.statusbar button{font-size:9px}.ai-panel{right:14px;bottom:112px;width:calc(100% - 28px);max-height:calc(100dvh - 150px);border-radius:20px}.selection-toolbar{max-width:calc(100vw - 16px);padding:4px;border-radius:11px}.selection-toolbar button{padding:7px 6px;font-size:9px}.selection-toolbar button:last-child{display:none}.toast{bottom:111px}}
@media(max-width:360px){.toolbar select{width:93px}.format-button{width:27px}.paper{padding:25px 20px}.statusbar>div{gap:10px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}