/* Deliberately plain. System font, grey lines, no decoration. */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#111;background:#f3f3f3;overscroll-behavior:none;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:#fff;border:1px solid #c8c8c8;border-radius:3px;padding:4px 9px;cursor:pointer;white-space:nowrap;touch-action:manipulation}
button:hover{background:#f0f0f0}
button:disabled{opacity:.4;cursor:default}
button.on{background:#111;color:#fff;border-color:#111}
button.primary{background:#111;color:#fff;border-color:#111}
input[type=search],input[type=password],input[type=text],select{border:1px solid #c8c8c8;border-radius:3px;padding:5px 8px;background:#fff;min-width:0}
.grow{flex:1}
.hint{color:#777;font-size:13px;margin:6px 8px}
.empty{color:#777;text-align:center;margin:20vh 20px}
.row2{display:flex;gap:6px;align-items:center;margin-top:8px}

#app{display:flex;height:100%;height:100dvh}
#side{width:270px;flex:none;background:#fafafa;border-right:1px solid #d6d6d6;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
.side-closed #side{display:none}
.side-head{padding:8px;border-bottom:1px solid #e3e3e3}
.side-head input{width:100%}
.side-head .row2 button{flex:1}
#tree,#results{flex:1;overflow:auto;padding:4px 0}
.side-foot{display:flex;gap:6px;align-items:center;padding:8px;border-top:1px solid #e3e3e3;font-size:12px;color:#777}
.row{display:flex;align-items:center;gap:4px;padding:5px 6px;cursor:pointer;user-select:none;-webkit-user-select:none}
.row:hover{background:#eee}
.row.cur{background:#e2e2e2;font-weight:600}
.row.drop{outline:2px solid #06c;outline-offset:-2px}
.row .tw{width:12px;flex:none;color:#666;font-size:11px}
.row .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .t.f{font-weight:600}
.row .rm{border:0;background:none;padding:0 6px;color:#666;visibility:hidden}
.row:hover .rm{visibility:visible}
@media (hover:none){.row .rm{visibility:visible}}
.row.res{flex-direction:column;align-items:stretch;gap:0}
.row.res small{color:#777;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#shade{display:none}

main{flex:1;min-width:0;display:flex;flex-direction:column}
#bar{display:flex;align-items:center;gap:8px;padding:6px 8px;padding-top:calc(6px + env(safe-area-inset-top));background:#fff;border-bottom:1px solid #d6d6d6;overflow-x:auto;scrollbar-width:none;flex:none}
#bar::-webkit-scrollbar{display:none}
.grp{display:flex;gap:3px;align-items:center;padding-right:8px;border-right:1px solid #e3e3e3}
.none #bar .grp,.none #shareBtn,.none #status{visibility:hidden}
.ro .edit,.shared .owner,.single #tSide,.single #homeBtn{display:none!important}
.none #page{width:100%!important;padding:0;min-height:0}
.none #scroll{overflow:hidden}
.ghint{margin:0;padding:6px 12px 0;height:40px;overflow:hidden;display:flex;gap:6px;align-items:center}
.ghint span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw{width:24px;height:24px;padding:0;border-radius:50%;background:var(--c);border:2px solid #fff;outline:1px solid #c8c8c8}
.sw:hover{background:var(--c)}
.sw.on{background:var(--c);outline:2px solid #111;border-color:#fff}
#colors input{width:26px;height:26px;padding:0;border:1px solid #c8c8c8;background:none}
.sz{width:28px;height:28px;padding:0;display:grid;place-items:center}
.sz i{display:block;border-radius:50%;background:currentColor}
#status{font-size:12px;color:#777;white-space:nowrap}
#status.busy{color:#946200}
#status.off{color:#b00020;font-weight:600}
#recBtn.rec{background:#b00020;color:#fff;border-color:#b00020}

#scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
#page{margin:0 auto;padding:12px 0 40vh;min-height:100%}
.title,.block.text,.block.audio,.block.video,.block.file,.addrow,#backlinks{width:var(--col,100%);margin-left:auto;margin-right:auto}
.title{display:block;border:0;background:none;font-size:26px;font-weight:700;padding:8px 16px;outline:none}
.block{position:relative;margin:0 auto}
.block .bm{position:absolute;top:2px;right:2px;border:0;background:rgba(255,255,255,.85);color:#666;padding:0 7px;border-radius:3px;z-index:3;opacity:0}
.block:hover .bm,.block:focus-within .bm{opacity:1}
@media (hover:none){.block .bm{opacity:.7}}
.block.text{padding:2px 16px}
.md{min-height:1.5em;overflow-wrap:anywhere}
.md.ph{color:#aaa}
.md>:first-child{margin-top:.2em}.md>:last-child{margin-bottom:.2em}
.md h1{font-size:1.5em}.md h2{font-size:1.25em}.md h3{font-size:1.1em}
.md pre{background:#eee;padding:8px;overflow:auto;border-radius:3px}
.md code{background:#eee;padding:0 3px;border-radius:2px;font-size:.9em}
.md pre code{padding:0}
.md blockquote{margin:0;padding-left:12px;border-left:3px solid #ccc;color:#555}
.md table{border-collapse:collapse}.md td,.md th{border:1px solid #ccc;padding:3px 8px}
.md img{max-width:100%}
.md a{color:#06c}
.md a.wl{text-decoration:underline dotted;cursor:pointer}
.block.text textarea{display:block;width:100%;border:1px solid #c8c8c8;border-radius:3px;padding:8px;resize:none;overflow:hidden;font:14px/1.5 ui-monospace,Menlo,Consolas,monospace;background:#fff;outline:none}
.paper{background:#fff;border:1px solid #d0d0d0;margin:8px auto;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.paper .bg,.paper canvas.ink,.paper canvas.live{position:absolute;top:0;left:0;width:100%;height:100%;display:block}
.paper canvas.ink,.paper canvas.live{mix-blend-mode:multiply;touch-action:none}
.paper canvas.live{pointer-events:none}
.inking .paper canvas.ink{cursor:crosshair}
.paper.wide .bg{outline:1px solid #e2e2e2}
.paper.wide .sheetbg{outline:0}
.canvasmode{background:#fff}
.canvasmode .paper{border-color:transparent;margin:0 auto}
.p-ruled{background:linear-gradient(to bottom,transparent calc(100% - max(1px,calc(var(--col)*.0013))),#c3cfdd 0) 0 0/100% calc(var(--col)*.036256)}
.p-grid{background:linear-gradient(to bottom,transparent calc(100% - max(1px,calc(var(--col)*.0013))),#d5dde8 0) 0 0/calc(var(--col)*.02525) calc(var(--col)*.02525),linear-gradient(to right,transparent calc(100% - max(1px,calc(var(--col)*.0013))),#d5dde8 0) 0 0/calc(var(--col)*.02525) calc(var(--col)*.02525)}
.p-dots{background:radial-gradient(circle,#aab4c2 calc(var(--col)*.0014),transparent calc(var(--col)*.0017)) 0 0/calc(var(--col)*.02525) calc(var(--col)*.02525)}
.md a.tag{color:#06c;background:#eaf2fb;border-radius:3px;padding:0 4px;text-decoration:none;cursor:pointer}
.sugg{border:1px solid #bbb;background:#fff;display:flex;flex-direction:column;max-width:340px}
.sugg button{border:0;border-radius:0;text-align:left;padding:8px 10px}
#pgIn{width:52px;border:1px solid #c8c8c8;border-radius:3px;padding:3px 4px;text-align:right}
#pgGrp{font-size:13px;color:#555;white-space:nowrap}
.objs{position:absolute;top:0;height:100%;container-type:inline-size;pointer-events:none}
.objs.editing{z-index:3}
.obj{position:absolute;pointer-events:none}
.obj img{width:100%;height:100%;display:block}
.obj img.cf{display:none;position:absolute;top:0;left:0}
.otext .t{font-size:1.9cqw;line-height:1.35;white-space:pre-wrap;overflow-wrap:anywhere;min-height:1.35em;outline:none;color:#111;-webkit-user-select:text;user-select:text}
.obj.sel{outline:1.5px solid #06c;outline-offset:2px}
.obj .hd{display:none;position:absolute;right:-9px;bottom:-9px;width:16px;height:16px;background:#fff;border:1.5px solid #06c;border-radius:50%}
.obj.sel .hd{display:block}
.obj.editing{pointer-events:auto;outline:1.5px dashed #06c;outline-offset:2px;background:rgba(255,255,255,.9)}
.obj.editing .hd{display:none}
.block.audio,.block.video,.block.file{padding:6px 16px}
.block.audio audio{width:100%;height:40px;display:block}
.block.video video{max-width:100%;max-height:70vh;display:block;background:#000}
.cap{font-size:12px;color:#666;margin-bottom:2px}
a.file{color:#06c}
.addrow{display:flex;gap:6px;padding:14px 16px}
#backlinks{padding:8px 16px;font-size:13px;color:#777}
#backlinks a{color:#06c;margin-right:10px}

.menu{position:fixed;z-index:50;background:#fff;border:1px solid #bbb;min-width:170px;padding:3px 0;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.menu button{display:block;width:100%;text-align:left;border:0;border-radius:0;padding:7px 12px}
.menu hr{border:0;border-top:1px solid #e3e3e3;margin:3px 0}
dialog{border:1px solid #999;border-radius:4px;padding:14px;max-width:min(94vw,1040px);max-height:94vh;overflow:auto}
dialog::backdrop{background:rgba(0,0,0,.35)}
dialog h3{margin:0 0 8px}
dialog .list{display:flex;flex-direction:column;gap:4px;min-width:min(80vw,460px);max-height:50vh;overflow:auto}
dialog .list>button{text-align:left;border:0}
.share{display:flex;gap:6px;align-items:center}
.share b{font-size:12px;width:62px;flex:none}
.share input{flex:1;font-size:12px;border:1px solid #c8c8c8;padding:4px}
.scan-stage{position:relative;margin:0 auto;touch-action:none}
.scan-stage canvas{display:block}
.scan-stage svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.scan-stage polygon{fill:rgba(0,102,204,.12);stroke:#06c;stroke-width:2}
.handle{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid #06c;background:rgba(255,255,255,.6);touch-action:none;cursor:grab}
dialog .row{display:flex;gap:8px;align-items:center;margin-top:10px;cursor:default}
dialog .row:hover{background:none}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#111;color:#fff;padding:8px 14px;border-radius:3px;z-index:60;max-width:90vw;font-size:14px}
#login{position:fixed;inset:0;background:#f3f3f3;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;z-index:100}
#login h1{margin:0 0 6px;font-size:22px}
#login input{width:260px;padding:8px}
#login button{width:260px;padding:8px}
.err{color:#b00020;min-height:1.4em;margin:0;font-size:13px}

@media (max-width:799px){
  #side{position:fixed;inset:0 auto 0 0;z-index:40;width:min(86vw,320px);box-shadow:2px 0 12px rgba(0,0,0,.2)}
  body:not(.side-closed) #shade{display:block;position:fixed;inset:0;z-index:39;background:rgba(0,0,0,.3)}
  .title{font-size:22px}
}
@media print{#side,#bar,.bm,.addrow{display:none!important}#scroll{overflow:visible}#app{display:block;height:auto}body{background:#fff}}

/* ===== Shell: icon sidebar, tabs, graph pane, status bar, phone navigation ===== */
:root{--line:#e3e3e3;--side:#f6f6f6;--mut:#6b6b6b;--acc:#6c4fe0;--hov:#e9e9e9}
body{background:#fff;color:#222}
svg.i{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ib,.ib.on{border:0;background:none;padding:5px;border-radius:5px;color:var(--mut);display:inline-grid;place-items:center;flex:none}
.ib:hover,.ib.on{background:var(--hov);color:#222}
#side{width:280px;background:var(--side);border-right:1px solid var(--line)}
.side-top,.side-actions{display:flex;gap:2px;align-items:center;padding:6px 8px}
.side-actions{justify-content:center;padding-top:0}
#searchWrap{padding:0 8px 6px}
#search{width:100%}
#tree,#results{padding:2px 8px;font-size:13.5px}
.row{border-radius:5px;padding:4px 6px;color:#444;gap:2px}
.row:hover{background:var(--hov)}
.row.cur{background:#e2e2e2;color:#111;font-weight:500}
.row .tw{width:16px;display:grid;place-items:center;color:#999}
.row .tw svg{width:12px;height:12px;transition:transform .1s}
.row .tw.open svg{transform:rotate(90deg)}
.row .t.f{font-weight:500}
.kids{margin-left:13px;padding-left:5px;border-left:1px solid #dcdcdc}
.side-foot{border-top:1px solid var(--line);padding:6px 10px}
.vault{font-weight:600;color:#333;font-size:13px}
#tabs{display:flex;align-items:center;gap:2px;min-height:38px;padding:env(safe-area-inset-top) 6px 0;background:var(--side);border-bottom:1px solid var(--line);flex:none}
#tablist{display:flex;gap:2px;min-width:0;overflow:hidden;align-self:flex-end}
.tab{display:flex;align-items:center;gap:6px;max-width:210px;min-width:70px;flex:0 1 auto;height:32px;padding:0 6px 0 12px;border-radius:7px 7px 0 0;font-size:13px;color:var(--mut);cursor:pointer;user-select:none;-webkit-user-select:none}
.tab:hover{background:var(--hov)}
.tab.on{background:#fff;color:#222;box-shadow:0 1px 0 #fff}
.tab .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.tab .x{border:0;background:none;padding:2px;border-radius:4px;color:#999;display:grid;flex:none}
.tab .x svg{width:13px;height:13px}
.tab .x:hover{background:#d8d8d8;color:#222}
#bar{border-bottom:1px solid var(--line);padding-top:5px;padding-bottom:5px}
.none #bar{display:none}
#bar button{border-color:transparent;background:none;color:#444;border-radius:5px}
#bar button:hover{background:var(--hov)}
#bar button.on{background:#222;color:#fff}
#bar .sw,#bar .sw:hover{background:var(--c);border:2px solid #fff;outline:1px solid #c8c8c8;border-radius:50%}
#bar .sw.on{background:var(--c);outline:2px solid #222}
#bar #recBtn.rec{background:#b00020;color:#fff}
.grp{border-right-color:var(--line)}
#work{flex:1;display:flex;min-height:0}
#scroll{min-width:0}
#rpane{width:min(42%,600px);border-left:1px solid var(--line);background:#fff;flex:none;overflow:hidden}
#sb{display:flex;gap:16px;align-items:center;height:24px;padding:0 12px;font-size:12px;color:var(--mut);border-top:1px solid var(--line);background:#fff;flex:none;white-space:pre}
.title{font-size:30px;font-weight:700;padding:20px 16px 6px;color:#111}
.md{font-size:16px;line-height:1.6;color:#222}
.md h1{font-size:1.6em;margin:1em 0 .4em}.md h2{font-size:1.35em;margin:1em 0 .4em}.md h3{font-size:1.15em;margin:1em 0 .3em}
.md a,#backlinks a{color:var(--acc)}
.md a.tag{color:var(--acc);background:#efeaff}
.md input[type=checkbox]{width:15px;height:15px;margin:0 7px 0 0;vertical-align:-2px;accent-color:var(--acc);cursor:pointer}
.md li:has(>input[type=checkbox]){list-style:none;margin-left:-1.4em}
.block.text textarea{font:inherit;font-size:16px;line-height:1.6;border:0;border-radius:0;padding:.2em 0;background:#faf9ff;color:#222}
.obj.sel,.obj.editing{outline-color:var(--acc)}.obj .hd{border-color:var(--acc)}
.single #tSide,.single #newTab,.single #graphPane,.single #bnav{display:none!important}
#bnav{display:none}
@media (min-width:800px){body:not(.side-closed) #tSide{display:none}}
@media (max-width:799px){
  #side{width:min(86vw,320px)}
  #newTab,#graphPane,.tab:not(.on),.tab .x{display:none}
  #tablist{align-self:center;flex:1}
  .tab.on{background:none;box-shadow:none;max-width:none;font-weight:600;padding-left:6px}
  #rpane{display:none!important}
  #sbInfo{display:none}
  #sb{border-top:0;height:20px;justify-content:flex-end}
  #bnav{display:flex;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));gap:4px;padding:5px 10px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:999px;box-shadow:0 4px 18px rgba(0,0,0,.14);z-index:30;transition:transform .22s,opacity .22s}
  .nav-hide #bnav{transform:translate(-50%,90px);opacity:0;pointer-events:none}
  #bnav .ib{padding:9px}
  #bnav svg{width:22px;height:22px}
  .title{font-size:24px;padding-top:12px}
}
.none #status{visibility:visible}
.paper.lift{overflow:visible;z-index:4}

/* ===== closer to the reference look ===== */
:root{--acc:#7852ee;--mut:#5c5c5c;--line:#e0e0e0}
#vh{display:flex;align-items:center;gap:2px;height:36px;padding:0 8px;background:#fff;flex:none}
#crumb{text-align:center;font-size:13px;color:#222;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#crumb .dir{color:#ababab}
.nobar #bar{display:none}
.single #vBack,.single #vFwd{visibility:hidden}
#bar{border-top:1px solid var(--line)}
.title,.block.text,.block.audio,.block.video,.block.file,.addrow,#backlinks{width:min(var(--col,100%),740px)}
.title{font-size:2em;font-weight:700;padding:28px 20px 4px;letter-spacing:-.01em}
.block.text{padding:2px 20px}
.md h1{font-size:1.618em}.md h2{font-size:1.462em}.md h3{font-size:1.318em}.md h4{font-size:1.188em}
.md h1,.md h2,.md h3,.md h4{font-weight:700;line-height:1.3;margin:1.3em 0 .5em;color:#222}
.md p{margin:0 0 1em}
.md ul,.md ol{padding-left:1.6em;margin:0 0 1em}
.md li{margin:.15em 0}
.md li::marker{color:#ababab}
.md a.wl{text-decoration:underline solid;text-underline-offset:2px}
.md input[type=checkbox]{border-radius:4px}
.md code{background:#f2f2f2;color:#c7254e;font-size:.875em}
.md blockquote{border-left:2px solid var(--acc);color:#5c5c5c}
#tree,#results{font-size:13px}
.row{color:#5c5c5c}
.row.cur{background:rgba(0,0,0,.075);color:#222}
.row .rm{color:#999}
.tagrow .n{font-size:11px;color:#888;background:#e6e6e6;border-radius:8px;padding:0 6px}
.side-actions[hidden]{display:none}
.tab{font-size:13px}
#sb{color:#5c5c5c}
.phead{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;font-size:13px;color:#5c5c5c;background:var(--side);border-bottom:1px solid var(--line)}
.phead svg{width:15px;height:15px}
.gwrap{position:relative}
.gctl{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:4px}
.gctl button{border:0;background:rgba(255,255,255,.9);color:#5c5c5c;padding:4px 8px;border-radius:5px;font-size:12px;min-width:30px}
.gctl button:hover{background:var(--hov);color:#222}
dialog.switcher{padding:8px;width:min(92vw,560px);border-radius:10px;border-color:#d0d0d0;box-shadow:0 12px 40px rgba(0,0,0,.2);margin-top:12vh}
dialog.switcher input{width:100%;padding:10px 12px;font-size:16px;border:0;border-bottom:1px solid var(--line);border-radius:0;outline:none}
dialog.switcher .list{min-width:0;gap:0;padding-top:4px}
dialog.switcher .list button{padding:8px 12px;border-radius:6px;background:none}
dialog.switcher .list button.on,dialog.switcher .list button:hover{background:var(--hov)}
@media (max-width:799px){#vh{display:none}.title{padding:14px 16px 2px;font-size:1.6em}.block.text{padding:2px 16px}}
dialog.switcher .list button.on{color:#222}

/* ===== live preview text ===== */
.seg{position:relative}
.seg.li ul,.seg.li ol{margin:0}
.seg.li+.seg:not(.li){margin-top:1em}
.block.text .seg textarea{display:block;width:100%;font:inherit;line-height:1.6;color:#222;border:0;border-radius:0;padding:0;margin:0 0 1em;background:none;resize:none;overflow:hidden;outline:none;caret-color:var(--acc)}
.block.text .seg.li textarea{margin:.15em 0}
.block.text .seg textarea.h1{font-size:1.618em;font-weight:700;line-height:1.3;margin:.5em 0 .5em}
.block.text .seg textarea.h2{font-size:1.462em;font-weight:700;line-height:1.3;margin:.5em 0 .5em}
.block.text .seg textarea.h3{font-size:1.318em;font-weight:700;line-height:1.3;margin:.5em 0 .5em}
.block.text .seg textarea.h4{font-size:1.188em;font-weight:700;line-height:1.3;margin:.5em 0 .5em}
.md .seg:first-child>:first-child{margin-top:.2em}
.block.text .sugg{position:absolute;left:20px;z-index:6;box-shadow:0 6px 20px rgba(0,0,0,.12);border-radius:6px;overflow:hidden}
#bar button:has(>svg.i){padding:6px}
#bar button svg.i{width:19px;height:19px}

/* ===== dark theme (paper, PDF pages and the infinite canvas stay white, like real paper) ===== */
html[data-theme=dark]{--line:#363636;--side:#262626;--mut:#b3b3b3;--acc:#a68af9;--hov:#343434;color-scheme:dark}
html[data-theme=dark] body{background:#1e1e1e;color:#dadada}
html[data-theme=dark] button{background:#2a2a2a;border-color:#444;color:#dadada}
html[data-theme=dark] button:hover{background:#343434}
html[data-theme=dark] button.on,html[data-theme=dark] button.primary{background:#dadada;color:#1e1e1e;border-color:#dadada}
html[data-theme=dark] input[type=search],html[data-theme=dark] input[type=password],html[data-theme=dark] input[type=text],html[data-theme=dark] select,html[data-theme=dark] #pgIn,html[data-theme=dark] .share input{background:#2a2a2a;border-color:#444;color:#dadada}
html[data-theme=dark] .hint,html[data-theme=dark] .empty,html[data-theme=dark] #status,html[data-theme=dark] #backlinks,html[data-theme=dark] .cap,html[data-theme=dark] .side-foot,html[data-theme=dark] #pgGrp,html[data-theme=dark] .row.res small{color:#999}
html[data-theme=dark] #status.busy{color:#e0b84c}
html[data-theme=dark] #status.off{color:#ff7b7b}
html[data-theme=dark] .ib,html[data-theme=dark] .ib.on{background:none;border:0;color:var(--mut)}
html[data-theme=dark] .ib:hover,html[data-theme=dark] .ib.on{background:var(--hov);color:#dadada}
html[data-theme=dark] .row{color:#b3b3b3}
html[data-theme=dark] .row:hover{background:var(--hov)}
html[data-theme=dark] .row.cur{background:rgba(255,255,255,.08);color:#dadada}
html[data-theme=dark] .row .rm{background:none;border:0;color:#888}
html[data-theme=dark] .row .tw{color:#777}
html[data-theme=dark] .kids{border-left-color:#3a3a3a}
html[data-theme=dark] .vault{color:#dadada}
html[data-theme=dark] .tab.on{background:#1e1e1e;color:#dadada;box-shadow:0 1px 0 #1e1e1e}
html[data-theme=dark] .tab .x{background:none;border:0;color:#888}
html[data-theme=dark] .tab .x:hover{background:#444;color:#dadada}
html[data-theme=dark] #vh,html[data-theme=dark] #bar,html[data-theme=dark] #sb,html[data-theme=dark] #rpane{background:#1e1e1e}
html[data-theme=dark] #crumb{color:#dadada}
html[data-theme=dark] #crumb .dir{color:#777}
html[data-theme=dark] #bar button{background:none;border-color:transparent;color:#c8c8c8}
html[data-theme=dark] #bar button:hover{background:var(--hov)}
html[data-theme=dark] #bar button.on{background:#dadada;color:#1e1e1e}
html[data-theme=dark] #bar .sw,html[data-theme=dark] #bar .sw:hover{background:var(--c);border:2px solid #1e1e1e;outline:1px solid #666}
html[data-theme=dark] #bar .sw.on{background:var(--c);outline:2px solid #dadada}
html[data-theme=dark] #bar #recBtn.rec{background:#b00020;color:#fff}
html[data-theme=dark] #colors input{border-color:#444}
html[data-theme=dark] .title,html[data-theme=dark] .md,html[data-theme=dark] .md h1,html[data-theme=dark] .md h2,html[data-theme=dark] .md h3,html[data-theme=dark] .md h4,html[data-theme=dark] .block.text .seg textarea{color:#dadada}
html[data-theme=dark] .md.ph{color:#666}
html[data-theme=dark] .md pre,html[data-theme=dark] .md code{background:#2a2a2a}
html[data-theme=dark] .md code{color:#f08d8d}
html[data-theme=dark] .md blockquote{color:#aaa}
html[data-theme=dark] .md td,html[data-theme=dark] .md th{border-color:#444}
html[data-theme=dark] .md li::marker{color:#777}
html[data-theme=dark] .md a.tag{background:rgba(166,138,249,.16)}
html[data-theme=dark] .block .bm{background:rgba(40,40,40,.85);border:0;color:#aaa}
html[data-theme=dark] .paper{border-color:#3a3a3a}
html[data-theme=dark] .paper .bm{background:rgba(255,255,255,.85);color:#666}
html[data-theme=dark] .sugg,html[data-theme=dark] .menu{background:#2a2a2a;border-color:#444}
html[data-theme=dark] .menu button,html[data-theme=dark] .sugg button,html[data-theme=dark] dialog .list>button{border:0;background:none}
html[data-theme=dark] .menu button:hover,html[data-theme=dark] .sugg button:hover,html[data-theme=dark] dialog .list>button:hover{background:var(--hov)}
html[data-theme=dark] .menu hr{border-top-color:#444}
html[data-theme=dark] dialog{background:#262626;color:#dadada;border-color:#444}
html[data-theme=dark] dialog.switcher .list button.on{background:var(--hov);color:#dadada}
html[data-theme=dark] dialog.switcher input{background:none}
html[data-theme=dark] #toast{background:#dadada;color:#1e1e1e}
html[data-theme=dark] #login{background:#1e1e1e}
html[data-theme=dark] .tagrow .n{background:#3a3a3a;color:#aaa}
html[data-theme=dark] .phead{color:#b3b3b3}
html[data-theme=dark] .gctl button{background:rgba(40,40,40,.9);border:0;color:#b3b3b3}
html[data-theme=dark] .addrow button{background:none}
html[data-theme=dark] .canvasmode .title,html[data-theme=dark] .canvasmode .md,html[data-theme=dark] .canvasmode .md h1,html[data-theme=dark] .canvasmode .md h2,html[data-theme=dark] .canvasmode .md h3,html[data-theme=dark] .canvasmode .md h4,html[data-theme=dark] .canvasmode .seg textarea{color:#222}
html[data-theme=dark] .canvasmode #backlinks{color:#777}
@media (max-width:799px){html[data-theme=dark] #bnav{background:rgba(38,38,38,.94)}html[data-theme=dark] .tab.on{background:none;box-shadow:none}}
html[data-theme=dark] #sb{color:#999}

/* ===== dark paper (only with the dark theme) =====
   The whole page surface is inverted on screen: white paper becomes near-black and ink becomes light.
   Nothing stored changes, so the same note looks normal again with white paper. Pictures are inverted back. */
html[data-theme=dark][data-paper=dark] .paper.sheet{filter:invert(.88) hue-rotate(180deg);border-color:#dbdbdb}
/* PDFs and pictures stay as they are; only the blank writing space beside them (infinite canvas) goes dark */
html[data-theme=dark][data-paper=dark] .paper.wide:not(.sheet)::before,html[data-theme=dark][data-paper=dark] .paper.wide:not(.sheet)::after{content:'';position:absolute;top:0;height:100%;width:var(--mg,0);z-index:2;pointer-events:none;-webkit-backdrop-filter:invert(.88) hue-rotate(180deg);backdrop-filter:invert(.88) hue-rotate(180deg)}
html[data-theme=dark][data-paper=dark] .paper.wide:not(.sheet)::before{left:0}
html[data-theme=dark][data-paper=dark] .paper.wide:not(.sheet)::after{right:0}
html[data-theme=dark][data-paper=dark] .paper.wide:not(.sheet) .obj.inm img.cf{display:block;clip-path:var(--clip);filter:hue-rotate(180deg) invert(1) contrast(1.3158)}
html[data-theme=dark][data-paper=dark] .paper.sheet .obj img{filter:hue-rotate(180deg) invert(1) contrast(1.3158)}
html[data-theme=dark][data-paper=dark] #bar .sw,html[data-theme=dark][data-paper=dark] #colors input{filter:invert(.88) hue-rotate(180deg)}
html[data-theme=dark][data-paper=dark] .canvasmode{background:#1f1f1f}
html[data-theme=dark][data-paper=dark] .canvasmode .title,html[data-theme=dark][data-paper=dark] .canvasmode .md,html[data-theme=dark][data-paper=dark] .canvasmode .md h1,html[data-theme=dark][data-paper=dark] .canvasmode .md h2,html[data-theme=dark][data-paper=dark] .canvasmode .md h3,html[data-theme=dark][data-paper=dark] .canvasmode .md h4,html[data-theme=dark][data-paper=dark] .canvasmode .seg textarea{color:#dadada}
html[data-theme=dark][data-paper=dark] .canvasmode #backlinks{color:#999}