-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
35 lines (35 loc) · 99.6 KB
/
index.html
File metadata and controls
35 lines (35 loc) · 99.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctypehtml><html lang=en><meta charset=UTF-8><meta content="width=device-width,initial-scale=1,user-scalable=no"name=viewport><title>Zenbook - My notes</title><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Lora:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500&family=Merriweather:ital,wght@0,300;0,700;1,300&display=swap"rel=stylesheet><script src=https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js></script><link href=https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css rel=stylesheet><script src=https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.js></script><script src=https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/contrib/auto-render.min.js></script><style>:root{--bg:#f5f0e8;--bg2:#ede7d9;--bg3:#e2d9c8;--paper:#faf7f2;--ink:#2c1810;--ink2:#5c3d2e;--ink3:#8b6348;--accent:#8b2e2e;--accent2:#c4793a;--border:#c9b99a;--border2:#a89070;--tag-bg:#e8ddd0;--sidebar-w:270px;--max-editor:100%}[data-theme=dark]{--bg:#1a1612;--bg2:#211e1a;--bg3:#2a2520;--paper:#1e1b17;--ink:#e8ddd0;--ink2:#c4b09a;--ink3:#8b7460;--accent:#c4793a;--accent2:#e09050;--border:#3a3028;--border2:#504030;--tag-bg:#2a2318}[data-theme=midnight]{--bg:#0d1117;--bg2:#161b22;--bg3:#1c2128;--paper:#0d1117;--ink:#e6edf3;--ink2:#8b949e;--ink3:#58a6ff;--accent:#58a6ff;--accent2:#79c0ff;--border:#30363d;--border2:#444c56;--tag-bg:#1c2128}[data-theme=forest]{--bg:#f0f4ee;--bg2:#e4ece0;--bg3:#d5e0cf;--paper:#f8faf7;--ink:#1a2e1a;--ink2:#3a5c3a;--ink3:#6a8c6a;--accent:#2d6a2d;--accent2:#4a9a4a;--border:#b8d4b0;--border2:#90b890;--tag-bg:#dcebd6}[data-theme=ocean]{--bg:#eef4fb;--bg2:#deeaf7;--bg3:#ccddf2;--paper:#f5f9fe;--ink:#0d2440;--ink2:#1a4a7a;--ink3:#4a7aaa;--accent:#1a4a7a;--accent2:#3a7aca;--border:#aacaee;--border2:#80aada;--tag-bg:#d4e8f8}[data-theme=sepia]{--bg:#f4ede0;--bg2:#eee4d4;--bg3:#e4d8c4;--paper:#fdf8f0;--ink:#3c2800;--ink2:#6b4c00;--ink3:#9a7830;--accent:#8b5a00;--accent2:#c48a00;--border:#d4b880;--border2:#b49060;--tag-bg:#ecdac4}[data-theme=rose]{--bg:#fdf2f4;--bg2:#fae6ea;--bg3:#f5d4da;--paper:#fffafc;--ink:#3a0a14;--ink2:#7a2a38;--ink3:#b06070;--accent:#c0304a;--accent2:#e06070;--border:#f0b8c4;--border2:#d898a8;--tag-bg:#fae0e6}[data-theme=slate]{--bg:#f0f2f5;--bg2:#e4e8ee;--bg3:#d4dae4;--paper:#f8f9fb;--ink:#1a2030;--ink2:#3a4a60;--ink3:#6a7a90;--accent:#3a5a9a;--accent2:#5a7aba;--border:#b4c0d0;--border2:#94a8c0;--tag-bg:#dce4f0}*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;overflow:hidden}body{font-family:Lora,Georgia,serif;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;transition:background .3s,color .3s}body.bg-lined #editor{background-image:repeating-linear-gradient(transparent,transparent 27px,rgba(150,120,80,.15) 27px,rgba(150,120,80,.15) 28px)!important}body.bg-dots #editor{background-image:radial-gradient(circle,rgba(150,120,80,.2) 1px,transparent 1px)!important;background-size:24px 24px!important}body.bg-grid #editor{background-image:linear-gradient(rgba(150,120,80,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(150,120,80,.1) 1px,transparent 1px)!important;background-size:24px 24px!important}body.zen-mode #note-hdr,body.zen-mode #sidebar,body.zen-mode #statusbar,body.zen-mode #toolbar,body.zen-mode #topbar{display:none!important}body.zen-mode #main{position:fixed;inset:0}body.zen-mode #editor{padding:60px max(10vw,40px);font-size:17px!important;line-height:2!important;max-width:var(--max-editor)}body.zen-mode #editor-panel{background:var(--paper)}#zen-exit{display:none;position:fixed;top:14px;right:14px;z-index:999;background:var(--accent);color:#fff;border:none;border-radius:4px;padding:6px 14px;font-family:"Courier Prime",monospace;font-size:11px;cursor:pointer;opacity:.5}#zen-exit:hover{opacity:1}body.zen-mode #zen-exit{display:block}#onboard-screen{position:fixed;inset:0;z-index:998;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:20px}.ob-card{background:var(--paper);border:1px solid var(--border2);border-radius:14px;padding:36px 40px;max-width:480px;width:100%;box-shadow:0 12px 50px rgba(0,0,0,.12);font-family:Lora,serif}.ob-logo{font-family:"Playfair Display",serif;font-size:26px;color:var(--ink);margin-bottom:6px}.ob-logo em{color:var(--accent2);font-style:italic}.ob-sub{font-family:"Courier Prime",monospace;font-size:11px;color:var(--ink3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:24px}.ob-step{display:none}.ob-step.active{display:block}.ob-step h2{font-family:"Playfair Display",serif;font-size:20px;color:var(--ink);margin-bottom:8px}.ob-step p{font-size:14px;color:var(--ink2);line-height:1.7;margin-bottom:18px}.ob-inp{width:100%;border:1px solid var(--border);background:var(--bg);border-radius:5px;padding:9px 12px;font-family:"Courier Prime",monospace;font-size:14px;color:var(--ink);outline:0;margin-bottom:12px}.ob-inp:focus{border-color:var(--accent2)}.ob-row{display:flex;gap:8px;align-items:center}.ob-goal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}.ob-goal{border:1px solid var(--border);background:0 0;border-radius:6px;padding:10px 6px;text-align:center;cursor:pointer;font-family:"Courier Prime",monospace;font-size:11px;color:var(--ink2);transition:all .12s}.ob-goal:hover{background:var(--bg3)}.ob-goal.active{background:var(--accent);color:#fff;border-color:var(--accent)}.ob-goal .og-num{font-size:18px;font-weight:700;font-family:"Playfair Display",serif;display:block;margin-bottom:2px}.ob-btn{background:var(--accent);color:#fff;border:none;border-radius:5px;padding:10px 24px;font-family:"Courier Prime",monospace;font-size:13px;cursor:pointer;letter-spacing:.06em;text-transform:uppercase;transition:all .15s}.ob-btn:hover{background:var(--accent2)}.ob-btn-ghost{background:0 0;border:1px solid var(--border);color:var(--ink2);border-radius:5px;padding:10px 18px;font-family:"Courier Prime",monospace;font-size:12px;cursor:pointer;transition:all .15s}.ob-btn-ghost:hover{background:var(--bg3)}.ob-progress{display:flex;gap:5px;margin-bottom:20px}.ob-dot{width:8px;height:8px;border-radius:50%;background:var(--border)}.ob-dot.active{background:var(--accent)}.ob-theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:16px}.ob-ts{border:2px solid var(--border);border-radius:6px;cursor:pointer;padding:8px 4px;text-align:center;font-family:"Courier Prime",monospace;font-size:10px;color:var(--ink2);transition:all .12s}.ob-ts:hover{border-color:var(--accent2)}.ob-ts.active{border-color:var(--accent)}.ob-ts-dot{width:16px;height:16px;border-radius:50%;margin:0 auto 4px;border:1px solid rgba(0,0,0,.08)}#lock-screen{position:fixed;inset:0;z-index:999;background:var(--ink);display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px}#lock-screen h1{color:var(--bg);font-family:"Playfair Display",serif;font-size:26px;font-style:italic}#lock-screen p{color:var(--ink3);font-family:"Courier Prime",monospace;font-size:12px}#lock-pin-input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;text-align:center;font-size:22px;letter-spacing:8px;padding:10px 20px;width:180px;outline:0;font-family:"Courier Prime",monospace}.lock-btn{background:var(--accent);color:#fff;border:none;border-radius:5px;padding:10px 28px;font-family:"Courier Prime",monospace;font-size:13px;cursor:pointer;text-transform:uppercase}#lock-err{color:#e07070;font-family:"Courier Prime",monospace;font-size:11px;min-height:14px}#topbar{height:50px;background:var(--ink);display:flex;align-items:center;padding:0 10px;gap:6px;flex-shrink:0;border-bottom:2px solid var(--accent);position:relative;z-index:50}.logo{font-family:"Playfair Display",serif;font-size:16px;color:var(--bg);letter-spacing:.04em;white-space:nowrap}.logo em{color:var(--accent2);font-style:italic}.tb-sp{flex:1}#search-box{display:flex;align-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:5px;padding:0 8px;gap:5px}#search-box:focus-within{border-color:var(--accent2)}#search{background:0 0;border:none;outline:0;color:#fff;font-family:"Courier Prime",monospace;font-size:13px;width:130px;padding:6px 0}#search::placeholder{color:rgba(255,255,255,.28)}.topbtn{background:0 0;border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:4px;padding:5px 9px;font-family:"Courier Prime",monospace;font-size:11px;cursor:pointer;letter-spacing:.04em;transition:all .15s;white-space:nowrap;flex-shrink:0}.topbtn:hover{background:rgba(255,255,255,.1);border-color:var(--accent2)}.topbtn.on{background:var(--accent2);border-color:var(--accent2)}#streak-badge{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;border-radius:14px;padding:4px 10px;font-family:"Courier Prime",monospace;font-size:11px;cursor:pointer;white-space:nowrap;flex-shrink:0}#main{display:flex;flex:1;overflow:hidden;position:relative}#sidebar{width:var(--sidebar-w);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;transition:width .2s,transform .2s;z-index:30}#sidebar.hidden{width:0;border-right-color:transparent}@media (max-width:700px){#sidebar{position:absolute;top:0;bottom:0;left:0;width:var(--sidebar-w)!important;transform:translateX(-100%);box-shadow:4px 0 24px rgba(0,0,0,.22)}#sidebar.mobile-open{transform:translateX(0)}#mob-ov{display:block!important}.hide-mobile{display:none!important}#search{width:80px}.logo{font-size:14px}}@media (max-width:420px){#search-box{display:none}}#mob-ov{display:none;position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:25}.sb-hdr{padding:9px 12px 7px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.sb-hdr h3{font-family:"Courier Prime",monospace;font-size:10px;letter-spacing:.12em;color:var(--ink3);text-transform:uppercase}.sb-hdr-r{display:flex;gap:3px}.icon-btn{width:21px;height:21px;border:1px solid var(--border2);background:0 0;border-radius:3px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink2);font-size:12px;transition:all .14s}.icon-btn:hover{background:var(--bg3);color:var(--accent);border-color:var(--accent)}#nb-list{overflow-y:auto;padding:3px 0;max-height:185px}.nb-item{padding:7px 12px;cursor:pointer;display:flex;align-items:center;gap:7px;border-left:3px solid transparent;transition:all .12s;font-size:13px;color:var(--ink2)}.nb-item:hover{background:var(--bg3)}.nb-item.active{border-left-color:var(--accent);background:var(--paper);color:var(--ink);font-weight:600}.nb-n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nb-c{font-family:"Courier Prime",monospace;font-size:10px;color:var(--ink3);background:var(--bg3);padding:1px 5px;border-radius:8px;flex-shrink:0}.nb-acts{display:none;gap:2px;margin-left:2px}.nb-item:hover .nb-acts{display:flex}.nb-ab{background:0 0;border:none;cursor:pointer;color:var(--ink3);font-size:11px;padding:1px 3px}.nb-ab:hover{color:var(--accent)}#sb-div{border:none;border-top:1px solid var(--border);margin:3px 0}#notes-flt{padding:5px 8px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:4px;flex-shrink:0}#notes-flt select{flex:1;font-family:"Courier Prime",monospace;font-size:11px;border:1px solid var(--border);background:var(--bg);color:var(--ink2);border-radius:3px;padding:3px 4px;cursor:pointer;outline:0}.flt-btn{background:0 0;border:1px solid var(--border);border-radius:3px;color:var(--ink3);font-size:10px;padding:2px 5px;cursor:pointer;font-family:"Courier Prime",monospace;white-space:nowrap;transition:all .12s}.flt-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}#notes-lhdr{padding:5px 12px 2px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}#notes-lhdr h3{font-family:"Courier Prime",monospace;font-size:10px;letter-spacing:.12em;color:var(--ink3);text-transform:uppercase}#notes-list{overflow-y:auto;flex:1;padding-bottom:8px}.note-item{padding:8px 12px;cursor:pointer;border-bottom:1px solid rgba(150,120,80,.1);transition:background .1s;position:relative}.note-item:hover{background:var(--bg3)}.note-item.active{background:var(--paper);border-left:3px solid var(--accent2)}.note-item.pinned::after{content:"📌";position:absolute;top:6px;right:8px;font-size:9px}.note-item.archived{opacity:.5}.n-ti{font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.n-me{font-family:"Courier Prime",monospace;font-size:10px;color:var(--ink3);margin-top:1px}.n-pv{font-size:11px;color:var(--ink3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:italic}.n-tg{margin-top:3px;display:flex;gap:3px;flex-wrap:wrap}.tag-pill{background:var(--tag-bg);border:1px solid var(--border);color:var(--ink2);font-family:"Courier Prime",monospace;font-size:9px;padding:1px 5px;border-radius:7px}.n-cdot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:3px;flex-shrink:0;vertical-align:middle}#editor-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--paper);min-width:0}#toolbar{background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 8px;gap:1px;flex-shrink:0;overflow-x:auto;min-height:42px}.tb-sep{width:1px;height:17px;background:var(--border);margin:0 2px;flex-shrink:0}.tb-btn{border:none;background:0 0;color:var(--ink2);cursor:pointer;border-radius:3px;padding:4px 6px;font-size:12px;font-family:"Courier Prime",monospace;transition:all .12s;min-width:24px;text-align:center;flex-shrink:0;white-space:nowrap}.tb-btn:hover{background:var(--bg3);color:var(--accent)}#view-toggle{margin-left:auto;display:flex;background:var(--bg3);border-radius:4px;padding:2px;gap:1px;flex-shrink:0}.vt-btn{border:none;background:0 0;cursor:pointer;padding:3px 8px;border-radius:3px;font-family:"Courier Prime",monospace;font-size:11px;color:var(--ink3);transition:all .12s}.vt-btn.active{background:var(--paper);color:var(--ink)}#note-hdr{padding:10px 20px 8px;border-bottom:1px dashed var(--border);flex-shrink:0}.n-cbar{height:0;border-radius:2px;margin-bottom:0;transition:all .2s}.n-cbar.vis{height:4px;margin-bottom:9px}#note-title{font-family:"Playfair Display",serif;font-size:22px;color:var(--ink);border:none;background:0 0;outline:0;width:100%;font-weight:600}#note-title::placeholder{color:var(--border2);font-style:italic}#tags-wrap{display:flex;align-items:center;gap:4px;margin-top:6px;flex-wrap:wrap}.tag-pill-e{background:var(--tag-bg);border:1px solid var(--border);color:var(--ink2);font-family:"Courier Prime",monospace;font-size:11px;padding:2px 7px;border-radius:9px;display:flex;align-items:center;gap:3px}.tag-rm{cursor:pointer;color:var(--ink3);font-size:11px;line-height:1}.tag-rm:hover{color:var(--accent)}#tag-input{border:none;background:0 0;outline:0;font-family:"Courier Prime",monospace;font-size:11px;color:var(--ink2);min-width:70px}#tag-input::placeholder{color:var(--border2)}#note-meta-row{display:flex;align-items:center;gap:8px;margin-top:5px;flex-wrap:wrap}#note-date{font-family:"Courier Prime",monospace;font-size:10px;color:var(--ink3)}#reading-time{font-family:"Courier Prime",monospace;font-size:10px;color:var(--ink3)}.nc-picker{display:flex;gap:3px;align-items:center}.nc-sw{width:12px;height:12px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .1s}.nc-sw.active,.nc-sw:hover{border-color:var(--ink);transform:scale(1.3)}.meta-btn{background:0 0;border:none;font-size:11px;cursor:pointer;color:var(--ink3);font-family:"Courier Prime",monospace;padding:1px 4px;border-radius:3px;transition:all .12s}.meta-btn:hover{background:var(--bg3);color:var(--accent)}.meta-btn.on{color:var(--accent)}#wg-bar-wrap{flex-shrink:0}#wg-bar{height:2px;background:var(--border);border-radius:1px;overflow:hidden;margin-top:5px}#wg-fill{height:100%;background:var(--accent2);border-radius:1px;width:0%;transition:width .3s}#editor-wrap{flex:1;overflow:hidden;display:flex;position:relative}#editor{flex:1;border:none;background:var(--paper);outline:0;resize:none;padding:18px 20px;font-family:"Courier Prime",monospace;font-size:15px;line-height:1.9;color:var(--ink);overflow-y:auto;transition:background .3s,color .3s;max-width:var(--max-editor);margin:0 auto;width:100%}#preview{flex:1;overflow-y:auto;padding:18px 20px;display:none;line-height:1.8;color:var(--ink);font-family:Lora,serif}#preview h1,#preview h2,#preview h3{font-family:"Playfair Display",serif;color:var(--ink);margin:1.2em 0 .4em}#preview h1{font-size:22px;border-bottom:1px dashed var(--border);padding-bottom:6px}#preview h2{font-size:18px}#preview h3{font-size:15px}#preview p{margin:.7em 0}#preview blockquote{border-left:3px solid var(--accent2);margin:1em 0;padding:4px 14px;color:var(--ink2);font-style:italic;background:var(--bg2);border-radius:0 4px 4px 0}#preview code{font-family:"Courier Prime",monospace;background:var(--bg2);padding:1px 5px;border-radius:3px;font-size:13px;color:var(--accent)}#preview pre{background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:4px;overflow-x:auto;margin:1em 0}#preview pre code{background:0 0;color:var(--bg);padding:0}#preview ol,#preview ul{padding-left:1.4em;margin:.5em 0}#preview li{margin:.2em 0}#preview a{color:var(--accent)}#preview hr{border:none;border-top:1px dashed var(--border);margin:1.5em 0}#preview table{border-collapse:collapse;width:100%;margin:1em 0;font-size:13px}#preview td,#preview th{border:1px solid var(--border);padding:5px 9px}#preview th{background:var(--bg2);font-family:"Courier Prime",monospace;font-size:11px}#preview img{max-width:100%;border-radius:4px;margin:8px 0;display:block}#preview input[type=checkbox]{margin-right:5px;accent-color:var(--accent)}#preview iframe{max-width:100%;border-radius:6px;margin:8px 0;display:block}.split-on #editor,.split-on #preview{flex:1;display:block}.split-on #editor{border-right:1px solid var(--border)}#md-help{position:absolute;bottom:48px;right:16px;background:var(--ink);color:var(--bg);border-radius:6px;padding:12px 16px;font-family:"Courier Prime",monospace;font-size:12px;line-height:2;display:none;z-index:10;min-width:185px}#md-help.open{display:block}#md-help .mh-t{font-size:10px;letter-spacing:.1em;color:var(--accent2);margin-bottom:4px;text-transform:uppercase}#md-help code{color:var(--accent2)}#draw-panel{position:absolute;inset:0;background:var(--paper);display:none;flex-direction:column;z-index:20}#draw-panel.open{display:flex}#draw-tb{background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 9px;gap:5px;flex-shrink:0;flex-wrap:wrap;min-height:48px;padding-top:5px;padding-bottom:5px;overflow-x:auto}.dtb-sep{width:1px;height:22px;background:var(--border);flex-shrink:0}.dtool{border:1px solid var(--border);background:0 0;border-radius:4px;cursor:pointer;padding:4px 8px;font-family:"Courier Prime",monospace;font-size:11px;color:var(--ink2);transition:all .12s;display:flex;align-items:center;gap:4px;white-space:nowrap;flex-shrink:0}.dtool:hover{background:var(--bg3);color:var(--accent)}.dtool.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}#swatches{display:flex;gap:4px;align-items:center;flex-shrink:0}.sw{width:17px;height:17px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .1s}.sw:hover{transform:scale(1.2)}.sw.active{border-color:var(--ink)}#cpw{width:18px;height:18px;border-radius:50%;border:2px solid var(--border2);overflow:hidden;cursor:pointer;flex-shrink:0;position:relative}#color-picker{position:absolute;inset:-4px;width:26px;height:26px;border:none;outline:0;cursor:pointer;padding:0}#op-wr,#sz-wr{display:flex;align-items:center;gap:4px;flex-shrink:0}#op-wr label,#sz-wr label{font-family:"Courier Prime",monospace;font-size:10px;color:var(--ink3);text-transform:uppercase;white-space:nowrap}#brush-op,#brush-sz{width:55px;accent-color:var(--accent2)}#sz-dot{background:var(--ink);border-radius:50%}#op-val{font-family:"Courier Prime",monospace;font-size:10px;color:var(--ink3);min-width:26px}#cv-wrap{flex:1;overflow:auto;background:var(--bg3)}#cv-wrap.cur-p{cursor:crosshair}#cv-wrap.cur-h{cursor:cell}#cv-wrap.cur-e{cursor:no-drop}#draw-canvas{display:block;touch-action:none;background:#faf7f2;background-image:repeating-linear-gradient(to bottom,transparent,transparent 31px,rgba(150,120,80,.18) 31px,rgba(150,120,80,.18) 32px)}#draw-foot{height:37px;background:var(--bg2);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 9px;gap:5px;flex-shrink:0;overflow-x:auto}#draw-foot button{border:1px solid var(--border);background:0 0;border-radius:3px;padding:3px 8px;font-family:"Courier Prime",monospace;font-size:11px;color:var(--ink2);cursor:pointer;transition:all .12s;white-space:nowrap}#draw-foot button:hover{background:var(--bg3);color:var(--accent)}#draw-foot .d-ins{background:var(--accent);color:#fff;border-color:var(--accent)}#draw-foot select{font-family:"Courier Prime",monospace;font-size:11px;border:1px solid var(--border);background:var(--bg);color:var(--ink2);padding:2px 4px;border-radius:3px;cursor:pointer}#undo-ct{font-family:"Courier Prime",monospace;font-size:10px;color:var(--ink3);white-space:nowrap}#special-view{position:absolute;inset:0;background:var(--paper);z-index:15;display:none;flex-direction:column}#special-view.open{display:flex}#sv-hdr{padding:10px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0;background:var(--bg2)}#sv-hdr h2{font-family:"Playfair Display",serif;font-size:17px;color:var(--ink);flex:1}#sv-hdr button{border:1px solid var(--border);background:0 0;border-radius:4px;padding:4px 11px;font-family:"Courier Prime",monospace;font-size:11px;color:var(--ink2);cursor:pointer;transition:all .12s}#sv-hdr button:hover{background:var(--bg3)}#sv-body{flex:1;overflow:auto;padding:16px}#cal-nav{display:flex;align-items:center;gap:8px;margin-bottom:12px}#cal-nav button{border:1px solid var(--border);background:0 0;border-radius:4px;padding:4px 9px;font-family:"Courier Prime",monospace;font-size:12px;color:var(--ink2);cursor:pointer;transition:all .12s}#cal-nav button:hover{background:var(--bg3)}#cal-month{font-family:"Playfair Display",serif;font-size:15px;color:var(--ink);flex:1;text-align:center}#cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.cal-dow{font-family:"Courier Prime",monospace;font-size:9px;color:var(--ink3);text-align:center;padding:4px;text-transform:uppercase}.cal-day{border:1px solid var(--border);border-radius:4px;padding:5px 4px;min-height:58px;cursor:pointer;transition:background .1s;background:var(--paper)}.cal-day:hover{background:var(--bg3)}.cal-day.other-month{opacity:.3;cursor:default}.cal-day.today{border-color:var(--accent);border-width:2px}.cal-dn{font-family:"Courier Prime",monospace;font-size:10px;color:var(--ink3);margin-bottom:2px}.cal-day.today .cal-dn{color:var(--accent);font-weight:700}.cal-nd{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:1px 0;color:var(--ink2);background:var(--tag-bg);border-radius:2px;padding:1px 3px;font-family:"Courier Prime",monospace;cursor:pointer}.cal-nd:hover{background:var(--accent2);color:#fff}#graph-legend{font-family:"Courier Prime",monospace;font-size:11px;color:var(--ink3);margin-top:8px;text-align:center}#streak-panel{position:fixed;top:54px;right:14px;background:var(--paper);border:1px solid var(--border2);border-radius:10px;padding:18px;width:300px;box-shadow:0 8px 30px rgba(0,0,0,.2);z-index:60;display:none}#streak-panel.open{display:block}#streak-panel h3{font-family:"Playfair Display",serif;font-size:16px;color:var(--ink);margin-bottom:12px}.streak-big{text-align:center;padding:14px;background:var(--bg2);border-radius:8px;margin-bottom:12px}.streak-num{font-family:"Playfair Display",serif;font-size:42px;color:var(--accent);display:block;line-height:1}.streak-lbl{font-family:"Courier Prime",monospace;font-size:10px;color:var(--ink3);text-transform:uppercase;letter-spacing:.1em}.streak-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.streak-stat{background:var(--bg2);border-radius:6px;padding:10px;text-align:center}.ss-num{font-family:"Playfair Display",serif;font-size:22px;color:var(--ink);display:block}.ss-lbl{font-family:"Courier Prime",monospace;font-size:9px;color:var(--ink3);text-transform:uppercase;letter-spacing:.08em}.streak-goal{margin-bottom:10px}.sg-lbl{font-family:"Courier Prime",monospace;font-size:10px;color:var(--ink3);display:flex;justify-content:space-between;margin-bottom:4px;text-transform:uppercase}.sg-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden}.sg-fill{height:100%;background:var(--accent2);border-radius:3px;transition:width .4s}.streak-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:10px}.sc-day{width:100%;aspect-ratio:1;border-radius:3px;background:var(--border)}.sc-day.wrote{background:var(--accent2)}.sc-day.today{outline:2px solid var(--accent)}.streak-close{position:absolute;top:10px;right:12px;background:0 0;border:none;cursor:pointer;color:var(--ink3);font-size:14px}#appear-panel{position:fixed;top:54px;right:14px;background:var(--paper);border:1px solid var(--border2);border-radius:10px;padding:15px;width:280px;box-shadow:0 8px 30px rgba(0,0,0,.2);z-index:60;display:none;max-height:85vh;overflow-y:auto}#appear-panel.open{display:block}#appear-panel h4{font-family:"Courier Prime",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:7px}.ap-row{margin-bottom:13px}.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.ts{border:2px solid var(--border);border-radius:5px;cursor:pointer;padding:7px 4px;text-align:center;transition:all .12s;font-family:"Courier Prime",monospace;font-size:10px;color:var(--ink2)}.ts:hover{border-color:var(--accent2)}.ts.active{border-color:var(--accent)}.ts-dot{width:14px;height:14px;border-radius:50%;margin:0 auto 3px;border:1px solid rgba(0,0,0,.08)}.ap-sel{width:100%;font-family:"Courier Prime",monospace;font-size:12px;border:1px solid var(--border);background:var(--bg);color:var(--ink);border-radius:4px;padding:5px 7px;outline:0;cursor:pointer}.ap-sl{width:100%;accent-color:var(--accent2)}.ap-lbl{font-family:"Courier Prime",monospace;font-size:11px;color:var(--ink2);display:flex;justify-content:space-between;margin-bottom:3px}.bg-opts{display:flex;gap:5px;flex-wrap:wrap}.bg-opt{border:1px solid var(--border);border-radius:4px;padding:4px 9px;font-family:"Courier Prime",monospace;font-size:10px;cursor:pointer;color:var(--ink2);background:0 0;transition:all .12s}.bg-opt:hover{background:var(--bg3)}.bg-opt.active{background:var(--accent);color:#fff;border-color:var(--accent)}.ap-color-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.ac-sw{width:22px;height:22px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:transform .1s;flex-shrink:0}.ac-sw:hover{transform:scale(1.15)}.ac-sw.active{border-color:var(--ink)}#custom-accent{width:22px;height:22px;border-radius:50%;border:2px solid var(--border2);overflow:hidden;position:relative;cursor:pointer;flex-shrink:0}#custom-accent input{position:absolute;inset:-4px;width:30px;height:30px;border:none;cursor:pointer;padding:0;opacity:1}.ap-width-opts{display:flex;gap:5px;flex-wrap:wrap}.aw-btn{border:1px solid var(--border);border-radius:4px;padding:4px 10px;font-family:"Courier Prime",monospace;font-size:10px;cursor:pointer;color:var(--ink2);background:0 0;transition:all .12s}.aw-btn:hover{background:var(--bg3)}.aw-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}#music-player{position:fixed;bottom:30px;right:16px;background:var(--ink);border:1px solid var(--border2);border-radius:10px;padding:13px 15px;width:235px;box-shadow:0 8px 30px rgba(0,0,0,.35);z-index:70;display:none}#music-player.open{display:block}#mp-title{font-family:"Playfair Display",serif;font-size:13px;color:var(--bg);margin-bottom:2px}#mp-track{font-size:11px;color:var(--ink3);margin-bottom:9px;font-family:"Courier Prime",monospace}#mp-vis{display:flex;align-items:flex-end;gap:2px;height:18px;margin-bottom:8px}.mp-bar{width:4px;background:var(--accent2);border-radius:2px;transition:height .1s}#mp-controls{display:flex;align-items:center;gap:6px;margin-bottom:8px}.mp-btn{background:0 0;border:1px solid rgba(255,255,255,.2);color:var(--bg);border-radius:4px;padding:3px 9px;font-size:11px;cursor:pointer;transition:all .12s;font-family:"Courier Prime",monospace}.mp-btn:hover{background:rgba(255,255,255,.1)}#mp-vol{width:100%;accent-color:var(--accent2);margin-bottom:7px}.mp-tracks{display:flex;flex-direction:column;gap:2px;max-height:130px;overflow-y:auto}.mp-tb{background:0 0;border:none;color:rgba(255,255,255,.45);text-align:left;padding:3px 5px;font-family:"Courier Prime",monospace;font-size:11px;cursor:pointer;border-radius:3px;transition:all .12s}.mp-tb:hover{background:rgba(255,255,255,.07);color:var(--bg)}.mp-tb.active{color:var(--accent2)}#mp-close{position:absolute;top:7px;right:9px;background:0 0;border:none;color:rgba(255,255,255,.35);cursor:pointer;font-size:13px}#mp-close:hover{color:var(--bg)}#share-panel{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:100;padding:14px}#share-panel.open{display:flex}.share-card{background:var(--paper);border:1px solid var(--border2);border-radius:10px;padding:22px 24px;width:100%;max-width:420px;box-shadow:0 8px 40px rgba(0,0,0,.3)}.share-card h2{font-family:"Playfair Display",serif;font-size:18px;color:var(--ink);margin-bottom:14px}.share-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.share-btn{border:1px solid var(--border);background:var(--bg2);border-radius:7px;padding:14px 10px;text-align:center;cursor:pointer;transition:all .15s;font-family:"Courier Prime",monospace;color:var(--ink2)}.share-btn:hover{background:var(--bg3);border-color:var(--accent2);color:var(--accent)}.share-btn .sb-icon{font-size:22px;display:block;margin-bottom:5px}.share-btn .sb-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.06em}#share-close{background:0 0;border:1px solid var(--border);border-radius:4px;padding:7px 16px;font-family:"Courier Prime",monospace;font-size:12px;color:var(--ink2);cursor:pointer;float:right}#share-close:hover{background:var(--bg3)}#qr-wrap{text-align:center;margin-bottom:12px;display:none}#qr-wrap canvas{border:1px solid var(--border);border-radius:6px}#empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--ink3);text-align:center;padding:20px}.es-t{font-family:"Playfair Display",serif;font-size:22px;font-style:italic;color:var(--ink2)}.es-s{font-family:"Courier Prime",monospace;font-size:11px;letter-spacing:.07em;text-transform:uppercase;line-height:1.9}.nnbtn{margin-top:6px;background:var(--accent);color:#fff;border:none;font-family:"Courier Prime",monospace;font-size:12px;padding:9px 20px;border-radius:4px;cursor:pointer;text-transform:uppercase;transition:all .15s}.nnbtn:hover{background:var(--accent2)}#statusbar{height:26px;background:var(--ink);border-top:1px solid var(--border2);display:flex;align-items:center;padding:0 10px;gap:12px;flex-shrink:0}.si{font-family:"Courier Prime",monospace;font-size:10px;color:rgba(255,255,255,.3);letter-spacing:.06em;white-space:nowrap}#save-st{color:rgba(196,121,58,.7)}#save-st.ok{color:rgba(100,180,80,.8)}.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:200;padding:12px}.modal-ov.open{display:flex}.modal{background:var(--paper);border:1px solid var(--border2);border-radius:8px;padding:20px 22px;width:100%;max-width:400px;box-shadow:0 8px 40px rgba(0,0,0,.3)}.modal h2{font-family:"Playfair Display",serif;font-size:17px;margin-bottom:12px;color:var(--ink)}.modal label{font-family:"Courier Prime",monospace;font-size:10px;color:var(--ink3);display:block;margin-bottom:3px;text-transform:uppercase;letter-spacing:.05em}.modal input,.modal select{width:100%;border:1px solid var(--border);background:var(--bg);border-radius:4px;padding:7px 10px;font-family:"Courier Prime",monospace;font-size:13px;color:var(--ink);outline:0;margin-bottom:9px}.modal input:focus{border-color:var(--accent2)}.modal-btns{display:flex;gap:7px;justify-content:flex-end;margin-top:4px}.modal-btns button{font-family:"Courier Prime",monospace;font-size:12px;padding:6px 14px;border-radius:4px;cursor:pointer;border:1px solid var(--border);background:0 0;color:var(--ink2)}.modal-btns .bp{background:var(--accent);color:#fff;border-color:var(--accent)}.etype-row{display:flex;gap:5px;margin-bottom:9px;flex-wrap:wrap}.et-btn{border:1px solid var(--border);background:0 0;border-radius:3px;padding:4px 9px;font-family:"Courier Prime",monospace;font-size:11px;color:var(--ink2);cursor:pointer;transition:all .12s}.et-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}#bottom-nav{display:none;height:56px;background:var(--ink);border-top:2px solid var(--accent);flex-shrink:0;align-items:center;justify-content:space-around;padding:0 6px}@media (max-width:700px){#bottom-nav{display:flex}}.bn-btn{background:0 0;border:none;color:rgba(255,255,255,.45);display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:4px 8px;border-radius:5px;transition:all .15s;font-family:"Courier Prime",monospace;font-size:9px}.bn-btn.active,.bn-btn:hover{color:var(--accent2)}.bn-icon{font-size:18px;line-height:1}.note-item{touch-action:pan-y}.note-item.dragging{opacity:.4;background:var(--bg3)!important;cursor:grabbing}.note-item.drag-over{border-top:2px solid var(--accent2)!important}.note-item .drag-handle{position:absolute;left:0;top:0;bottom:0;width:14px;display:flex;align-items:center;justify-content:center;color:var(--border2);font-size:10px;cursor:grab;opacity:0;transition:opacity .15s;user-select:none}.note-item:hover .drag-handle{opacity:1}.note-item .drag-handle:active{cursor:grabbing}#offline-badge{display:none;position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);font-family:"Courier Prime",monospace;font-size:11px;padding:6px 16px;border-radius:20px;border:1px solid var(--accent2);z-index:300;letter-spacing:.05em}#offline-badge.show{display:block}.nc-red{background:#c0392b}.nc-orange{background:#e67e22}.nc-yellow{background:#f1c40f}.nc-green{background:#27ae60}.nc-blue{background:#2980b9}.nc-purple{background:#8e44ad}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}</style><body data-theme=retro><button onclick=toggleZen() id=zen-exit>✕ Exit Zen</button><div id=offline-badge>📴 Offline — all changes saved locally</div><div id=onboard-screen><div class=ob-card><div class=ob-logo>The <em>Zenbook</em></div><div class=ob-sub>Your personal notebook</div><div class=ob-progress id=ob-dots></div><div class="active ob-step"id=ob-s1><h2>Welcome! What's your name?</h2><p>No sign-up needed. Your notebook lives right in your browser.</p><input id=ob-name class=ob-inp placeholder="Your name…"maxlength=30 autocomplete=off><div class=ob-row><button onclick=obNext(1) class=ob-btn>Continue →</button></div></div><div class=ob-step id=ob-s2><h2>Set a daily writing goal</h2><p>How many words do you want to write each day?<div class=ob-goal-grid id=ob-goals><button class=ob-goal data-g=50><span class=og-num>50</span>Quick</button> <button class="active ob-goal"data-g=200><span class=og-num>200</span>Light</button> <button class=ob-goal data-g=500><span class=og-num>500</span>Medium</button> <button class=ob-goal data-g=1000><span class=og-num>1k</span>Heavy</button> <button class=ob-goal data-g=0><span class=og-num>—</span>No goal</button></div><div class=ob-row><button onclick=obBack(2) class=ob-btn-ghost>← Back</button> <button onclick=obNext(2) class=ob-btn>Continue →</button></div></div><div class=ob-step id=ob-s3><h2>Pick your theme</h2><p>You can always change this later.<div class=ob-theme-grid id=ob-theme-grid></div><div class=ob-row><button onclick=obBack(3) class=ob-btn-ghost>← Back</button> <button onclick=obNext(3) class=ob-btn>Continue →</button></div></div><div class=ob-step id=ob-s4><h2 id=ob-ready-title>You're all set!</h2><p id=ob-ready-msg>Your notebook is ready. Start writing — your streak begins today.<div class=ob-row><button onclick=obFinish() class=ob-btn style=width:100%;justify-content:center>Open My Notebook 📖</button></div></div></div></div><div id=lock-screen><h1>🔒 The Zenbook</h1><p>Enter your PIN to unlock</p><input id=lock-pin-input type=password inputmode=numeric maxlength=8 placeholder=PIN> <button onclick=tryUnlock() class=lock-btn>Unlock</button><div id=lock-err></div><button onclick=forgotPin() style="background:0 0;border:none;color:rgba(255,255,255,.3);font-family:'Courier Prime',monospace;font-size:11px;cursor:pointer;margin-top:6px">Forgot PIN?</button></div><div id=topbar><button onclick=toggleSidebar() class=topbtn>☰</button><div class=logo>The <em>Zenbook</em></div><div class=tb-sp></div><div id=search-box><svg fill=none height=12 viewBox="0 0 16 16"width=12><circle cx=6.5 cy=6.5 r=5 stroke=#fff stroke-width=1.5 /><path d="M10.5 10.5L14 14"stroke=#fff stroke-linecap=round stroke-width=1.5 /></svg> <input id=search placeholder=Search… autocomplete=off></div><button onclick=toggleStreak() id=streak-badge title="Writing streak">🔥 0 days</button> <button onclick=toggleDraw() class="topbtn hide-mobile"id=draw-btn>✏</button> <button onclick=openEmbedModal() class="topbtn hide-mobile">⊞</button> <button onclick='openSpecial("calendar")'class="topbtn hide-mobile">📅</button> <button onclick='openSpecial("graph")'class="topbtn hide-mobile">◎</button> <button onclick=toggleMusic() class=topbtn id=music-btn>♫</button> <button onclick=openShare() class=topbtn title="Share / Export">↗</button> <button onclick=toggleAppear() class=topbtn>🎨</button> <button onclick=openLockSettings() class="topbtn hide-mobile">🔒</button> <button onclick=newNote() class=topbtn>+ Note</button></div><div id=streak-panel><button onclick=toggleStreak() class=streak-close>✕</button><h3>Writing Streak</h3><div class=streak-big><span class=streak-num id=sp-streak>0</span> <span class=streak-lbl>Day Streak 🔥</span></div><div class=streak-stats><div class=streak-stat><span class=ss-num id=sp-total>0</span><span class=ss-lbl>Total Days</span></div><div class=streak-stat><span class=ss-num id=sp-best>0</span><span class=ss-lbl>Best Streak</span></div><div class=streak-stat><span class=ss-num id=sp-notes>0</span><span class=ss-lbl>Total Notes</span></div><div class=streak-stat><span class=ss-num id=sp-words>0</span><span class=ss-lbl>Total Words</span></div></div><div class=streak-goal><div class=sg-lbl><span>Today's Goal</span><span id=sp-goal-pct>0%</span></div><div class=sg-bar><div class=sg-fill id=sp-goal-fill></div></div></div><div style="font-family:'Courier Prime',monospace;font-size:10px;color:var(--ink3);margin-bottom:5px;text-transform:uppercase;letter-spacing:.08em">Last 28 Days</div><div class=streak-cal id=sp-cal></div></div><div id=appear-panel><div class=ap-row><h4>Theme</h4><div class=theme-grid id=theme-grid></div></div><div class=ap-row><h4>Accent Color</h4><div class=ap-color-row id=accent-row><div class="active ac-sw"onclick=setAccent(this) style=background:#8b2e2e data-ac=#8b2e2e,#c4793a></div><div class=ac-sw onclick=setAccent(this) style=background:#2d6a2d data-ac=#2d6a2d,#4a9a4a></div><div class=ac-sw onclick=setAccent(this) style=background:#1a4a7a data-ac=#1a4a7a,#3a7aca></div><div class=ac-sw onclick=setAccent(this) style=background:#6b4c8f data-ac=#6b4c8f,#9a70c0></div><div class=ac-sw onclick=setAccent(this) style=background:#c0304a data-ac=#c0304a,#e06070></div><div class=ac-sw onclick=setAccent(this) style=background:#3a6a60 data-ac=#3a6a60,#5a9a8a></div><div id=custom-accent title=Custom><input type=color oninput=setCustomAccent(this.value) value=#8b2e2e></div></div></div><div class=ap-row><h4>Editor Font</h4><select id=font-sel onchange=applyFont(this.value) class=ap-sel><option value="'Courier Prime',monospace">Courier Prime<option value="'Lora',Georgia,serif">Lora<option value="'Merriweather',Georgia,serif">Merriweather<option value="'Inter',sans-serif">Inter</select></div><div class=ap-row><div class=ap-lbl><span>Font Size</span><span id=fs-val>15px</span></div><input id=fs-sl type=range oninput=applyFontSize(this.value) value=15 max=22 min=12 step=1 class=ap-sl></div><div class=ap-row><div class=ap-lbl><span>Line Height</span><span id=lh-val>1.9</span></div><input id=lh-sl type=range oninput=applyLineHeight(this.value) value=19 max=28 min=14 step=1 class=ap-sl></div><div class=ap-row><h4>Editor Width</h4><div class=ap-width-opts><button onclick='setEWidth("100%",this)'class="active aw-btn">Full</button> <button onclick='setEWidth("720px",this)'class=aw-btn>Readable</button> <button onclick='setEWidth("580px",this)'class=aw-btn>Narrow</button></div></div><div class=ap-row><h4>Page Background</h4><div class=bg-opts><button onclick='setBg("plain",this)'class="active bg-opt">Plain</button> <button onclick='setBg("lined",this)'class=bg-opt>Lined</button> <button onclick='setBg("dots",this)'class=bg-opt>Dots</button> <button onclick='setBg("grid",this)'class=bg-opt>Grid</button></div></div><div class=ap-row><button onclick=toggleZen() style="width:100%;background:var(--ink);color:var(--bg);border:none;border-radius:5px;padding:8px;font-family:'Courier Prime',monospace;font-size:11px;cursor:pointer;letter-spacing:.06em;text-transform:uppercase">⊙ Zen Mode</button></div></div><div id=music-player><button onclick=toggleMusic() id=mp-close>✕</button><div id=mp-title>Ambient Music</div><div id=mp-track>Select a track</div><div id=mp-vis><div class=mp-bar id=mpb0 style=height:3px></div><div class=mp-bar id=mpb1 style=height:6px></div><div class=mp-bar id=mpb2 style=height:4px></div><div class=mp-bar id=mpb3 style=height:10px></div><div class=mp-bar id=mpb4 style=height:5px></div><div class=mp-bar id=mpb5 style=height:8px></div><div class=mp-bar id=mpb6 style=height:3px></div><div class=mp-bar id=mpb7 style=height:6px></div></div><div id=mp-controls><button onclick=mpPrev() class=mp-btn>◀◀</button> <button onclick=mpToggle() class=mp-btn id=mp-play-btn>▶ Play</button> <button onclick=mpNext() class=mp-btn>▶▶</button></div><input id=mp-vol type=range oninput=mpVol(this.value) value=60 max=100 min=0><div class=mp-tracks id=mp-tracks></div></div><div id=share-panel><div class=share-card><h2>Share & Export</h2><div class=share-grid><div class=share-btn onclick=exportMD()><span class=sb-icon>📄</span><span class=sb-lbl>Export .md</span></div><div class=share-btn onclick=exportTXT()><span class=sb-icon>📃</span><span class=sb-lbl>Export .txt</span></div><div class=share-btn onclick=exportHTML()><span class=sb-icon>🌐</span><span class=sb-lbl>Export HTML</span></div><div class=share-btn onclick=printNote()><span class=sb-icon>🖨</span><span class=sb-lbl>Print / PDF</span></div><div class=share-btn onclick=copyMarkdown()><span class=sb-icon>📋</span><span class=sb-lbl>Copy Text</span></div><div class=share-btn onclick=exportAllZip()><span class=sb-icon>📦</span><span class=sb-lbl>All Notes ZIP</span></div><div class=share-btn onclick=copyShareLink()><span class=sb-icon>🔗</span><span class=sb-lbl>Copy Link</span></div><div class=share-btn onclick=showQR()><span class=sb-icon>⬛</span><span class=sb-lbl>QR Code</span></div></div><div id=qr-wrap><canvas id=qr-canvas height=160 width=160></canvas><div style="font-family:'Courier Prime',monospace;font-size:10px;color:var(--ink3);margin-top:5px">Scan to open note on another device</div></div><button onclick=closeShare() id=share-close>Close</button></div></div><div id=main><div id=mob-ov onclick=closeMobSb()></div><div id=sidebar><div class=sb-hdr><h3>Notebooks</h3><div class=sb-hdr-r><button onclick=openNBModal() class=icon-btn>+</button></div></div><div id=nb-list></div><hr id=sb-div><div id=notes-lhdr><h3 id=notes-lbl>Notes</h3><div class=sb-hdr-r><button onclick=newNote() class=icon-btn>+</button></div></div><div id=notes-flt><select id=sort-sel onchange=rNotes()><option value=upd>Recent<option value=alpha>A–Z<option value=cre>Created</select> <button onclick='setFlt("all")'class="active flt-btn"id=f-all>All</button> <button onclick='setFlt("pinned")'class=flt-btn id=f-pin>📌</button> <button onclick='setFlt("archived")'class=flt-btn id=f-arch>🗃</button></div><div id=notes-list></div></div><div id=editor-panel><div id=toolbar><button onclick='fmt("bold")'class=tb-btn><b style="font-family:'Playfair Display',serif">B</b></button> <button onclick='fmt("italic")'class=tb-btn><i>I</i></button> <button onclick='fmtMd("~~","~~")'class=tb-btn style=text-decoration:line-through;font-size:11px>S</button><div class=tb-sep></div><button onclick='fmtLine("# ")'class=tb-btn style="font-family:'Playfair Display',serif;font-weight:700;font-size:11px">H1</button> <button onclick='fmtLine("## ")'class=tb-btn style="font-family:'Playfair Display',serif;font-size:11px">H2</button> <button onclick='fmtLine("### ")'class=tb-btn style="font-family:'Playfair Display',serif;font-size:10px">H3</button><div class=tb-sep></div><button onclick='fmtLine("- ")'class=tb-btn>•</button> <button onclick='fmtLine("1. ")'class=tb-btn>1.</button> <button onclick='fmtLine("- [ ] ")'class=tb-btn>☐</button> <button onclick='fmtLine("> ")'class=tb-btn>"</button> <button onclick='fmtMd("`","`")'class=tb-btn style="font-family:'Courier Prime',monospace;font-size:10px">`c`</button><div class=tb-sep></div><button onclick=insertLink() class=tb-btn>🔗</button> <button onclick=openEmbedModal() class=tb-btn>⊞</button> <button onclick=insertMath() class=tb-btn title="Insert math equation">∑</button> <button onclick=insertHr() class=tb-btn>—</button> <button onclick=toggleMdHelp() class=tb-btn style=font-size:10px>?</button><div id=view-toggle><button onclick='setView("edit")'class="active vt-btn"id=vt-edit>Edit</button> <button onclick='setView("split")'class=vt-btn id=vt-split>Split</button> <button onclick='setView("preview")'class=vt-btn id=vt-prev>Preview</button></div></div><div id=empty-state><div class=es-t id=empty-greeting>— Your notebook awaits —</div><div class=es-s>Select a notebook · create a note</div><button onclick=newNote() class=nnbtn>+ New Note</button></div><div id=note-area style=display:none;flex:1;flex-direction:column;overflow:hidden;position:relative><div id=note-hdr><div class=n-cbar id=note-cbar></div><input id=note-title oninput=onTitleInput() placeholder="Untitled entry…"><div id=tags-wrap><span id=tags-disp></span><input id=tag-input placeholder="+ tag, Enter"maxlength=30></div><div id=note-meta-row><span id=note-date></span> <span id=reading-time></span><div class=nc-picker><div class=nc-sw onclick='setNColor("")'style=background:var(--border) data-nc=""></div><div class="nc-sw nc-red"onclick='setNColor("red")'data-nc=red></div><div class="nc-sw nc-orange"onclick='setNColor("orange")'data-nc=orange></div><div class="nc-sw nc-yellow"onclick='setNColor("yellow")'data-nc=yellow></div><div class="nc-sw nc-green"onclick='setNColor("green")'data-nc=green></div><div class="nc-sw nc-blue"onclick='setNColor("blue")'data-nc=blue></div><div class="nc-sw nc-purple"onclick='setNColor("purple")'data-nc=purple></div></div><button onclick=togglePin() class=meta-btn id=pin-btn>📌 Pin</button> <button onclick=toggleArchive() class=meta-btn id=arch-btn>🗃</button> <button onclick=deleteNote() class=meta-btn>🗑</button></div><div id=wg-bar-wrap style=display:none><div id=wg-bar><div id=wg-fill></div></div></div></div><div id=editor-wrap><textarea id=editor oninput=onEditorInput() placeholder="Begin writing…"spellcheck=true></textarea><div id=preview></div><div id=md-help><div class=mh-t>Markdown + Math</div><code># H1 ## H2</code><br><code>**bold** *italic*</code><br><code>~~strike~~ `code`</code><br><code>- [ ] checkbox</code><br><code>- list > quote</code><br><code>[text](url)</code><br><code>--- divider</code><br><code>$inline math$</code><br><code>$$display math$$</code></div></div><div id=draw-panel><div id=draw-tb><button onclick='setDT("pen")'class="active dtool"id=dt-pen>✏ Pen</button> <button onclick='setDT("hl")'class=dtool id=dt-hl>▮ HL</button> <button onclick='setDT("er")'class=dtool id=dt-er>◻ Erase</button><div class=dtb-sep></div><div id=swatches><div class="active sw"onclick=pickSw(this) style=background:#2c1810 data-c=#2c1810></div><div class=sw onclick=pickSw(this) style=background:#8b2e2e data-c=#8b2e2e></div><div class=sw onclick=pickSw(this) style=background:#1a4a7a data-c=#1a4a7a></div><div class=sw onclick=pickSw(this) style=background:#2a6040 data-c=#2a6040></div><div class=sw onclick=pickSw(this) style=background:#c4793a data-c=#c4793a></div><div class=sw onclick=pickSw(this) style=background:#6b4c8f data-c=#6b4c8f></div><div class=sw onclick=pickSw(this) style=background:#888 data-c=#888></div><div id=cpw><input id=color-picker type=color oninput=pickCustom(this.value) value=#2c1810></div></div><div class=dtb-sep></div><div id=sz-wr><label>Sz</label><input id=brush-sz type=range oninput=onSz() value=3 max=40 min=1 step=1><div id=sz-dot style=width:3px;height:3px></div></div><div class=dtb-sep></div><div id=op-wr><label>Op</label><input id=brush-op type=range oninput=onOp() value=100 max=100 min=5 step=1><span id=op-val>100%</span></div></div><div class=cur-p id=cv-wrap><canvas id=draw-canvas></canvas></div><div id=draw-foot><button onclick=undoDraw()>↩</button><span id=undo-ct></span> <button onclick=redoDraw()>↪</button> <button onclick=clearCanvas()>⊘</button> <button onclick=dlDraw()>⬇ PNG</button> <select id=cv-sz onchange=resizeCv()><option value=800,520>Standard<option value=1200,700>Wide<option value=600,900>Portrait</select> <button onclick=insertDrawing() class=d-ins>✓ Insert</button> <button onclick=toggleDraw()>✕</button></div></div><div id=special-view><div id=sv-hdr><h2 id=sv-title>View</h2><button onclick=closeSpecial()>✕ Close</button></div><div id=sv-body></div></div></div></div></div><div id=statusbar><span class=si id=wc>0 words</span> <span class=si id=cc>0 chars</span> <span class=si id=save-st>—</span> <span class=si id=nb-st style=margin-left:auto></span></div><div id=bottom-nav><button onclick=toggleSidebar() class=bn-btn><span class=bn-icon>📚</span>Notes</button> <button onclick=newNote() class=bn-btn><span class=bn-icon>✏️</span>New</button> <button onclick=toggleDraw() class=bn-btn><span class=bn-icon>🖊️</span>Draw</button> <button onclick=openShare() class=bn-btn><span class=bn-icon>↗</span>Share</button> <button onclick=toggleStreak() class=bn-btn><span class=bn-icon>🔥</span>Streak</button></div><div class=modal-ov id=nb-modal><div class=modal><h2>New Notebook</h2><label>Name</label> <input id=nb-inp placeholder="My Notebook…"maxlength=40><div class=modal-btns><button onclick='closeM("nb-modal")'>Cancel</button><button onclick=createNB() class=bp>Create</button></div></div></div><div class=modal-ov id=embed-modal><div class=modal style=max-width:430px><h2>Embed Content</h2><div class=etype-row><button onclick=setET(this) class="active et-btn"data-et=youtube>▶ YouTube</button> <button onclick=setET(this) class=et-btn data-et=map>🗺 Map</button> <button onclick=setET(this) class=et-btn data-et=spotify>♫ Spotify</button> <button onclick=setET(this) class=et-btn data-et=codepen>✎ CodePen</button> <button onclick=setET(this) class=et-btn data-et=web>🌐 Web</button></div><label id=em-url-lbl>YouTube URL or ID</label> <input id=em-url placeholder=https://…> <label>Caption (optional)</label> <input id=em-cap maxlength=100><div class=modal-btns><button onclick='closeM("embed-modal")'>Cancel</button><button onclick=doEmbed() class=bp>Insert</button></div></div></div><div class=modal-ov id=lock-modal><div class=modal><h2>🔒 Lock Settings</h2><label>New PIN (blank to disable)</label> <input id=lock-pin-set type=password inputmode=numeric maxlength=8> <label>Confirm PIN</label> <input id=lock-pin-confirm type=password inputmode=numeric maxlength=8><div id=lock-modal-err style="color:#c0392b;font-family:'Courier Prime',monospace;font-size:11px;min-height:14px;margin-bottom:7px"></div><div class=modal-btns><button onclick='closeM("lock-modal")'>Cancel</button><button onclick=saveLock() class=bp>Save</button></div></div></div><script>const SKEY="zenbook_v5";let S={notebooks:[],notes:[],aNB:null,aN:null,appear:{theme:"retro",font:"'Courier Prime',monospace",fontSize:15,lineHeight:1.9,bg:"plain",accentPair:"#8b2e2e,#c4793a",editorWidth:"100%"},lock:{pin:"",enabled:!1},user:{name:"",goalWords:200,onboarded:!1},streak:{log:{},best:0}},svTimer=null,curView="edit",drawOpen=!1,sbHidden=!1,curFlt="all",curET="youtube",mpPlaying=!1,mpIdx=0,mpAudio=null,mpAF=null;const TRACKS=[{name:"Rain on Window",url:"https://assets.mixkit.co/music/preview/mixkit-rain-and-thunder-ambience-2434.mp3",e:"🌧"},{name:"Deep Focus",url:"https://assets.mixkit.co/music/preview/mixkit-relaxing-in-nature-522.mp3",e:"🎯"},{name:"Forest",url:"https://assets.mixkit.co/music/preview/mixkit-forest-birds-ambience-1210.mp3",e:"🌲"},{name:"Ocean Waves",url:"https://assets.mixkit.co/music/preview/mixkit-sea-waves-loop-1196.mp3",e:"🌊"},{name:"Night Crickets",url:"https://assets.mixkit.co/music/preview/mixkit-crickets-and-insects-in-the-wild-ambience-39.mp3",e:"🦗"},{name:"Fireplace",url:"https://assets.mixkit.co/music/preview/mixkit-campfire-crackling-1330.mp3",e:"🔥"},{name:"Soft Piano",url:"https://assets.mixkit.co/music/preview/mixkit-sleepy-cat-135.mp3",e:"🎹"},{name:"Café",url:"https://assets.mixkit.co/music/preview/mixkit-a-very-happy-christmas-897.mp3",e:"☕"}],THEMES=[{id:"retro",label:"Retro",acc:"#8b2e2e"},{id:"dark",label:"Dark",acc:"#c4793a"},{id:"midnight",label:"Night",acc:"#58a6ff"},{id:"forest",label:"Forest",acc:"#2d6a2d"},{id:"ocean",label:"Ocean",acc:"#1a4a7a"},{id:"sepia",label:"Sepia",acc:"#8b5a00"},{id:"rose",label:"Rose",acc:"#c0304a"},{id:"slate",label:"Slate",acc:"#3a5a9a"}];function load(){try{var e=localStorage.getItem(SKEY);e&&(S=JSON.parse(e)),S.notebooks&&S.notebooks.length||(S.notebooks=[{id:uid(),name:"Journal",icon:"📔"},{id:uid(),name:"Ideas",icon:"💡"},{id:uid(),name:"Research",icon:"🔬"}],S.notes=[],S.aNB=S.notebooks[0].id),S.appear||(S.appear={theme:"retro",font:"'Courier Prime',monospace",fontSize:15,lineHeight:1.9,bg:"plain",accentPair:"#8b2e2e,#c4793a",editorWidth:"100%"}),S.lock||(S.lock={pin:"",enabled:!1}),S.user||(S.user={name:"",goalWords:200,onboarded:!1}),S.streak||(S.streak={log:{},best:0})}catch(e){console.error(e)}}function sv(){try{localStorage.setItem(SKEY,JSON.stringify(S))}catch(e){}}function uid(){return Date.now().toString(36)+Math.random().toString(36).slice(2,7)}function todayKey(){const e=new Date;return`${e.getFullYear()}-${e.getMonth()}-${e.getDate()}`}let obStep=1,obGoal=200,obTheme="retro";function initOnboard(){if(S.user&&S.user.onboarded)return document.getElementById("onboard-screen").style.display="none",void updateGreeting();buildObDots(),buildObThemes(),document.getElementById("onboard-screen").style.display="flex"}function buildObDots(){document.getElementById("ob-dots").innerHTML=[1,2,3,4].map(e=>`<div class="ob-dot${e===obStep?" active":""}"></div>`).join("")}function buildObThemes(){document.getElementById("ob-theme-grid").innerHTML=THEMES.map(e=>`
<div class="ob-ts${e.id===obTheme?" active":""}" onclick="obPickTheme('${e.id}',this)" data-tid="${e.id}">
<div class="ob-ts-dot" style="background:${e.acc}"></div>${e.label}
</div>`).join("")}function obPickTheme(t,e){obTheme=t,document.querySelectorAll(".ob-ts").forEach(e=>e.classList.toggle("active",e.dataset.tid===t)),document.body.setAttribute("data-theme",t)}function obNext(e){if(1===e){var t=document.getElementById("ob-name").value.trim();if(!t)return void document.getElementById("ob-name").focus();S.user.name=t}2===e&&(S.user.goalWords=obGoal),3===e&&(S.appear.theme=obTheme),obStep=e+1,document.querySelectorAll(".ob-step").forEach(e=>e.classList.remove("active")),document.getElementById("ob-s"+obStep)?.classList.add("active"),4===obStep&&(document.getElementById("ob-ready-title").textContent=`All set, ${S.user.name}!`,document.getElementById("ob-ready-msg").textContent=`Your notebook is ready. Write ${obGoal||"as much as you like"} words today to start your streak.`),buildObDots()}function obBack(e){obStep=e-1,document.querySelectorAll(".ob-step").forEach(e=>e.classList.remove("active")),document.getElementById("ob-s"+obStep)?.classList.add("active"),buildObDots()}function obFinish(){S.user.onboarded=!0,sv(),document.getElementById("onboard-screen").style.display="none",document.body.setAttribute("data-theme",S.appear.theme),applyAppear(),updateGreeting()}function updateGreeting(){(new Date).getHours();var e=S.user?.name||"";const t=document.getElementById("empty-greeting");t&&(t.textContent=`— ${e?`Welcome back, ${e}!`:"Your notebook awaits —"}`)}function logWritingDay(){var e=todayKey();S.streak.log||(S.streak.log={});var t=getTotalWordsToday();S.streak.log[e]={words:t,ts:Date.now()};let n=0,o=new Date;for(let e=0;e<365;e++){var a=`${o.getFullYear()}-${o.getMonth()}-${o.getDate()}`;if(S.streak.log[a]&&(0===S.user.goalWords||S.streak.log[a].words>=(S.user.goalWords||200)))n++;else if(0<e)break;o.setDate(o.getDate()-1)}n>S.streak.best&&(S.streak.best=n),sv(),document.getElementById("streak-badge").textContent=`🔥 ${n} day${1!==n?"s":""}`}function getTotalWordsToday(){const n=todayKey();return S.notes.filter(e=>{const t=new Date(e.upd||e.cre||0);return`${t.getFullYear()}-${t.getMonth()}-${t.getDate()}`===n}).reduce((e,t)=>{return e+(t.body||"").trim().split(/\s+/).filter(Boolean).length},0)}function calcCurrentStreak(){let t=0,n=new Date;for(let e=0;e<365;e++){var o=`${n.getFullYear()}-${n.getMonth()}-${n.getDate()}`;if(S.streak.log&&S.streak.log[o]&&(0===S.user.goalWords||S.streak.log[o].words>=(S.user.goalWords||200)))t++;else if(0<e)break;n.setDate(n.getDate()-1)}return t}function toggleStreak(){const e=document.getElementById("streak-panel");e.classList.toggle("open"),e.classList.contains("open")&&buildStreakPanel()}function buildStreakPanel(){var e=calcCurrentStreak(),t=getTotalWordsToday(),n=S.user.goalWords||200,o=Object.keys(S.streak.log||{}).length,a=S.notes.reduce((e,t)=>e+(t.body||"").trim().split(/\s+/).filter(Boolean).length,0);document.getElementById("sp-streak").textContent=e,document.getElementById("sp-best").textContent=S.streak.best||0,document.getElementById("sp-total").textContent=o,document.getElementById("sp-notes").textContent=S.notes.filter(e=>!e.archived).length,document.getElementById("sp-words").textContent=999<a?Math.round(a/1e3)+"k":a;t=0<n?Math.min(100,Math.round(t/n*100)):100;document.getElementById("sp-goal-pct").textContent=t+"%",document.getElementById("sp-goal-fill").style.width=t+"%";const i=document.getElementById("sp-cal");i.innerHTML="";var l=new Date;for(let e=27;0<=e;e--){const r=new Date(l);r.setDate(r.getDate()-e);var d=`${r.getFullYear()}-${r.getMonth()}-${r.getDate()}`,s=S.streak.log&&S.streak.log[d]&&(0===n||S.streak.log[d].words>=n),c=0===e;const m=document.createElement("div");m.className="sc-day"+(s?" wrote":"")+(c?" today":""),m.title=r.toLocaleDateString("en-GB",{day:"2-digit",month:"short"})+(s?` · ${S.streak.log[d].words} words`:""),i.appendChild(m)}document.getElementById("streak-badge").textContent=`🔥 ${e} day${1!==e?"s":""}`}function initLock(){S.lock&&S.lock.enabled&&S.lock.pin&&(document.getElementById("lock-screen").style.display="flex",document.getElementById("lock-pin-input").focus())}function tryUnlock(){document.getElementById("lock-pin-input").value===S.lock.pin?(document.getElementById("lock-screen").style.display="none",document.getElementById("lock-pin-input").value="",document.getElementById("lock-err").textContent=""):(document.getElementById("lock-err").textContent="Incorrect PIN.",document.getElementById("lock-pin-input").value="",document.getElementById("lock-pin-input").focus())}function forgotPin(){confirm("Reset PIN?")&&(S.lock={pin:"",enabled:!1},sv(),document.getElementById("lock-screen").style.display="none")}function openLockSettings(){document.getElementById("lock-pin-set").value="",document.getElementById("lock-pin-confirm").value="",document.getElementById("lock-modal-err").textContent="",openM("lock-modal")}function saveLock(){var e=document.getElementById("lock-pin-set").value.trim(),t=document.getElementById("lock-pin-confirm").value.trim();const n=document.getElementById("lock-modal-err");if(!e)return S.lock={pin:"",enabled:!1},sv(),closeM("lock-modal"),void alert("Lock disabled.");e.length<4?n.textContent="PIN must be at least 4 digits.":e===t?(S.lock={pin:e,enabled:!0},sv(),closeM("lock-modal"),alert("Lock enabled!")):n.textContent="PINs do not match."}function buildThemeGrid(){document.getElementById("theme-grid").innerHTML=THEMES.map(e=>`<div class="ts${e.id===S.appear.theme?" active":""}" onclick="setTheme('${e.id}')" data-tid="${e.id}"><div class="ts-dot" style="background:${e.acc}"></div>${e.label}</div>`).join("")}function setTheme(t){S.appear.theme=t,document.body.setAttribute("data-theme",t),document.querySelectorAll(".ts").forEach(e=>e.classList.toggle("active",e.dataset.tid===t)),sv()}function setAccent(e){var t=e.dataset.ac.split(",");document.documentElement.style.setProperty("--accent",t[0]),document.documentElement.style.setProperty("--accent2",t[1]),S.appear.accentPair=e.dataset.ac,document.querySelectorAll(".ac-sw").forEach(e=>e.classList.remove("active")),e.classList.add("active"),sv()}function setCustomAccent(e){document.documentElement.style.setProperty("--accent",e),document.documentElement.style.setProperty("--accent2",e),S.appear.accentPair=e+","+e,document.querySelectorAll(".ac-sw").forEach(e=>e.classList.remove("active")),sv()}function applyFont(e){S.appear.font=e,document.getElementById("editor").style.fontFamily=e,sv()}function applyFontSize(e){S.appear.fontSize=+e,document.getElementById("editor").style.fontSize=e+"px",document.getElementById("fs-val").textContent=e+"px",sv()}function applyLineHeight(e){e=(e/10).toFixed(1);S.appear.lineHeight=+e,document.getElementById("editor").style.lineHeight=e,document.getElementById("lh-val").textContent=e,sv()}function setEWidth(e,t){S.appear.editorWidth=e,document.documentElement.style.setProperty("--max-editor",e),document.querySelectorAll(".aw-btn").forEach(e=>e.classList.remove("active")),t.classList.add("active"),sv()}function setBg(e,t){S.appear.bg=e,document.querySelectorAll(".bg-opt").forEach(e=>e.classList.remove("active")),t.classList.add("active"),document.body.className=document.body.className.replace(/bg-\w+/g,"").trim(),"plain"!==e&&document.body.classList.add("bg-"+e),sv()}function applyAppear(){const e=S.appear;var t;document.body.setAttribute("data-theme",e.theme||"retro"),e.accentPair&&(t=e.accentPair.split(","),document.documentElement.style.setProperty("--accent",t[0]),document.documentElement.style.setProperty("--accent2",t[1]||t[0]));const n=document.getElementById("editor");n.style.fontFamily=e.font||"'Courier Prime',monospace",n.style.fontSize=(e.fontSize||15)+"px",n.style.lineHeight=(e.lineHeight||1.9)+"",document.documentElement.style.setProperty("--max-editor",e.editorWidth||"100%"),e.bg&&"plain"!==e.bg&&document.body.classList.add("bg-"+e.bg),document.getElementById("font-sel").value=e.font||"'Courier Prime',monospace",document.getElementById("fs-sl").value=e.fontSize||15,document.getElementById("lh-sl").value=10*(e.lineHeight||1.9),document.getElementById("fs-val").textContent=(e.fontSize||15)+"px",document.getElementById("lh-val").textContent=(e.lineHeight||1.9)+""}function toggleAppear(){const e=document.getElementById("appear-panel");e.classList.toggle("open"),e.classList.contains("open")&&buildThemeGrid()}document.querySelectorAll(".ob-goal").forEach(e=>{e.addEventListener("click",function(){document.querySelectorAll(".ob-goal").forEach(e=>e.classList.remove("active")),this.classList.add("active"),obGoal=+this.dataset.g})}),document.getElementById("lock-pin-input").addEventListener("keydown",e=>{"Enter"===e.key&&tryUnlock()});let zenOn=!1;function toggleZen(){zenOn=!zenOn,document.body.classList.toggle("zen-mode",zenOn),document.getElementById("appear-panel").classList.remove("open")}function toggleSidebar(){window.innerWidth<=700?document.getElementById("sidebar").classList.toggle("mobile-open"):(sbHidden=!sbHidden,document.getElementById("sidebar").classList.toggle("hidden",sbHidden))}function closeMobSb(){document.getElementById("sidebar").classList.remove("mobile-open")}function render(){rNBs(),rNotes(),rEditor()}function rNBs(){const o=document.getElementById("nb-list");o.innerHTML="",S.notebooks.forEach(t=>{var e=S.notes.filter(e=>e.nbId===t.id&&!e.archived).length;const n=document.createElement("div");n.className="nb-item"+(t.id===S.aNB?" active":""),n.innerHTML=`<span>${t.icon||"📔"}</span><span class="nb-n">${x(t.name)}</span><span class="nb-c">${e}</span><div class="nb-acts"><button class="nb-ab" onclick="renNB('${t.id}',event)">✎</button><button class="nb-ab" onclick="delNB('${t.id}',event)">×</button></div>`,n.addEventListener("click",e=>{e.target.closest(".nb-acts")||selNB(t.id)}),o.appendChild(n)}),document.getElementById("nb-st").textContent=(S.notebooks.find(e=>e.id===S.aNB)||{}).name||""}function rNotes(){const t=document.getElementById("search").value.trim().toLowerCase();var e=document.getElementById("sort-sel").value;let n=S.notes.filter(e=>e.nbId===S.aNB);n="pinned"===curFlt?n.filter(e=>e.pinned):"archived"===curFlt?n.filter(e=>e.archived):n.filter(e=>!e.archived),t&&(n=S.notes.filter(e=>(e.title||"").toLowerCase().includes(t)||(e.body||"").toLowerCase().includes(t)||(e.tags||[]).some(e=>e.toLowerCase().includes(t))),n="archived"===curFlt?n.filter(e=>e.archived):"pinned"===curFlt?n.filter(e=>e.pinned):n.filter(e=>!e.archived)),document.getElementById("notes-lbl").textContent=t?`Results (${n.length})`:"Notes",n="alpha"===e?n.sort((e,t)=>(e.title||"").localeCompare(t.title||"")):"cre"===e?n.sort((e,t)=>(t.cre||0)-(e.cre||0)):n.sort((e,t)=>!!e.pinned!=!!t.pinned?e.pinned?-1:1:(t.upd||0)-(e.upd||0));const s=document.getElementById("notes-list");s.innerHTML="",n.forEach(e=>{const t=document.createElement("div");let n="note-item";e.id===S.aN&&(n+=" active"),e.pinned&&(n+=" pinned"),e.archived&&(n+=" archived"),t.className=n;const o=new Date(e.upd||e.cre||Date.now());var a=o.toLocaleDateString("en-GB",{day:"2-digit",month:"short",year:"2-digit"}),i=(e.body||"").replace(/[#*`>_~\[\]!]/g,"").replace(/\n/g," ").slice(0,50),l=(e.tags||[]).slice(0,3).map(e=>`<span class="tag-pill">${x(e)}</span>`).join(""),d=e.color?`<span class="n-cdot nc-${e.color}"></span>`:"";t.innerHTML=`<div class="n-ti">${d}${x(e.title)||'<em style="opacity:.4">Untitled</em>'}</div><div class="n-me">${a}</div>${i?`<div class="n-pv">${x(i)}…</div>`:""} ${l?`<div class="n-tg">${l}</div>`:""}`,t.addEventListener("click",()=>selNote(e.id)),s.appendChild(t)})}function rEditor(){const t=S.notes.find(e=>e.id===S.aN);if(document.getElementById("empty-state").style.display=t?"none":"flex",document.getElementById("note-area").style.display=t?"flex":"none",t){document.getElementById("note-title").value=t.title||"",document.getElementById("editor").value=t.body||"",rTags(t.tags||[]);const e=new Date(t.upd||t.cre||Date.now());document.getElementById("note-date").textContent="Edited: "+e.toLocaleString("en-GB",{day:"2-digit",month:"short",year:"numeric",hour:"2-digit",minute:"2-digit"});const n=document.getElementById("note-cbar");t.color?(n.style.background=colorHex(t.color),n.classList.add("vis")):n.classList.remove("vis"),document.querySelectorAll(".nc-sw").forEach(e=>e.classList.toggle("active",e.dataset.nc===(t.color||""))),document.getElementById("pin-btn").classList.toggle("on",!!t.pinned),document.getElementById("pin-btn").textContent=t.pinned?"📌 Unpin":"📌 Pin",document.getElementById("arch-btn").textContent=t.archived?"🗃 Unarchive":"🗃",updPrev(),updCounts(),updateWordGoalBar()}}function colorHex(e){return{red:"#c0392b",orange:"#e67e22",yellow:"#f1c40f",green:"#27ae60",blue:"#2980b9",purple:"#8e44ad"}[e]||"transparent"}function rTags(e){document.getElementById("tags-disp").innerHTML=e.map(e=>`<span class="tag-pill-e">${x(e)}<span class="tag-rm" onclick="rmTag('${x(e)}')">×</span></span>`).join("")}function selNB(e){S.aNB=e,S.aN=null,sv(),render()}function selNote(e){S.aN=e,sv(),rNotes(),rEditor(),window.innerWidth<=700&&closeMobSb()}function setFlt(e){curFlt=e,["f-all","f-pin","f-arch"].forEach(e=>document.getElementById(e).classList.remove("active")),document.getElementById({all:"f-all",pinned:"f-pin",archived:"f-arch"}[e]).classList.add("active"),rNotes()}function newNote(){var e;!S.aNB&&S.notebooks.length&&(S.aNB=S.notebooks[0].id),S.aNB?(e={id:uid(),nbId:S.aNB,title:"",body:"",tags:[],color:"",pinned:!1,archived:!1,cre:Date.now(),upd:Date.now()},S.notes.unshift(e),S.aN=e.id,sv(),render(),setTimeout(()=>document.getElementById("note-title").focus(),50)):openM("nb-modal")}function deleteNote(){S.aN&&confirm("Delete this note?")&&(S.notes=S.notes.filter(e=>e.id!==S.aN),S.aN=null,sv(),render())}function togglePin(){const e=S.notes.find(e=>e.id===S.aN);e&&(e.pinned=!e.pinned,e.upd=Date.now(),scheduleSv(),rNotes(),rEditor())}function toggleArchive(){const e=S.notes.find(e=>e.id===S.aN);e&&(e.archived=!e.archived,e.upd=Date.now(),scheduleSv(),rNotes(),rEditor())}function setNColor(e){const t=S.notes.find(e=>e.id===S.aN);t&&(t.color=e,t.upd=Date.now(),scheduleSv(),rNotes(),rEditor())}function onTitleInput(){const e=S.notes.find(e=>e.id===S.aN);e&&(e.title=document.getElementById("note-title").value,e.upd=Date.now(),scheduleSv(),rNotes())}function onEditorInput(){const e=S.notes.find(e=>e.id===S.aN);e&&(e.body=document.getElementById("editor").value,e.upd=Date.now(),updPrev(),updCounts(),scheduleSv(),rNotes(),updateWordGoalBar(),logWritingDay())}function scheduleSv(){const e=document.getElementById("save-st");e.textContent="Unsaved…",e.className="si",svTimer&&clearTimeout(svTimer),svTimer=setTimeout(()=>{sv(),e.textContent="✓ Saved",e.className="si ok",setTimeout(()=>{e.textContent="—",e.className="si"},2e3)},700)}function updPrev(){if("undefined"!=typeof marked){let e=marked.parse(document.getElementById("editor").value||"");if(e=e.replace(/<li>\s*\[ \]/g,'<li><input type="checkbox" disabled>').replace(/<li>\s*\[x\]/gi,'<li><input type="checkbox" checked disabled>'),document.getElementById("preview").innerHTML=e,"undefined"!=typeof renderMathInElement)try{renderMathInElement(document.getElementById("preview"),{delimiters:[{left:"$$",right:"$$",display:!0},{left:"$",right:"$",display:!1},{left:"\\(",right:"\\)",display:!1},{left:"\\[",right:"\\]",display:!0}],throwOnError:!1})}catch(e){}}}function updCounts(){const e=document.getElementById("editor").value,t=e.trim()?e.trim().split(/\s+/).length:0;document.getElementById("wc").textContent=t+" word"+(1!==t?"s":""),document.getElementById("cc").textContent=e.length+" chars";var n=Math.max(1,Math.round(t/200));document.getElementById("reading-time").textContent=50<t?`· ~${n} min read`:""}function updateWordGoalBar(){var e=S.user?.goalWords||0;const t=document.getElementById("wg-bar-wrap");if(e){t.style.display="block";const o=S.notes.find(e=>e.id===S.aN);var n=o?(o.body||"").trim().split(/\s+/).filter(Boolean).length:0,e=Math.min(100,Math.round(n/e*100));document.getElementById("wg-fill").style.width=e+"%"}else t.style.display="none"}function rmTag(t){const e=S.notes.find(e=>e.id===S.aN);e&&(e.tags=(e.tags||[]).filter(e=>e!==t),e.upd=Date.now(),scheduleSv(),rTags(e.tags),rNotes())}function openM(e){document.getElementById(e).classList.add("open")}function closeM(e){document.getElementById(e).classList.remove("open")}function openNBModal(){document.getElementById("nb-inp").value="",openM("nb-modal"),setTimeout(()=>document.getElementById("nb-inp").focus(),50)}function createNB(){var e,t=document.getElementById("nb-inp").value.trim();t&&(e=["📔","📓","📒","📕","📗","📘","📙","🗒️","📑","🗃️"],S.notebooks.push({id:uid(),name:t,icon:e[Math.floor(Math.random()*e.length)]}),S.aNB=S.notebooks[S.notebooks.length-1].id,S.aN=null,sv(),closeM("nb-modal"),render())}function delNB(t,e){e.stopPropagation(),S.notebooks.length<=1?alert("Need at least one notebook."):confirm("Delete notebook and all its notes?")&&(S.notebooks=S.notebooks.filter(e=>e.id!==t),S.notes=S.notes.filter(e=>e.nbId!==t),S.aNB===t&&(S.aNB=S.notebooks[0]?.id||null,S.aN=null),sv(),render())}function renNB(t,e){e.stopPropagation();const n=S.notebooks.find(e=>e.id===t);if(n){const o=prompt("Rename:",n.name);o&&o.trim()&&(n.name=o.trim(),sv(),rNBs())}}function setView(e){curView=e;const t=document.getElementById("editor-wrap"),n=document.getElementById("editor"),o=document.getElementById("preview");if(t&&n&&o)if(["vt-edit","vt-split","vt-prev"].forEach(e=>{const t=document.getElementById(e);t&&t.classList.remove("active")}),t.classList.remove("split-on"),n.style.display="",o.style.display="","edit"===e){const a=document.getElementById("vt-edit");a&&a.classList.add("active"),n.style.display="block",o.style.display="none"}else if("split"===e)if(window.innerWidth<600)setView("preview");else{const i=document.getElementById("vt-split");i&&i.classList.add("active"),t.classList.add("split-on"),n.style.display="block",o.style.display="block"}else{const l=document.getElementById("vt-prev");l&&l.classList.add("active"),n.style.display="none",o.style.display="block",updPrev()}}function fmt(e){const t=document.getElementById("editor");t.focus();var n=t.selectionStart,o=t.selectionEnd,a=t.value.slice(n,o),[i,e]={bold:["**","**"],italic:["*","*"]}[e];t.setRangeText(i+a+e,n,o,"select"),onEditorInput()}function fmtMd(e,t){const n=document.getElementById("editor");n.focus();var o=n.selectionStart,a=n.selectionEnd,i=n.value.slice(o,a);n.setRangeText(e+i+t,o,a,"end"),i||(n.selectionStart=o+e.length,n.selectionEnd=o+e.length),onEditorInput()}function fmtLine(e){const t=document.getElementById("editor");t.focus();const n=t.selectionStart,o=t.value;var a=o.lastIndexOf("\n",n-1)+1,i=o.indexOf("\n",n),i=-1===i?o.length:i;const l=o.slice(a,i);t.setRangeText(l.startsWith(e)?l.slice(e.length):e+l,a,i,"end"),onEditorInput()}function insertLink(){const e=document.getElementById("editor");e.focus();var t=e.selectionStart,n=e.selectionEnd,o=e.value.slice(t,n)||"link text";e.setRangeText(`[${o}](url)`,t,n,"end"),onEditorInput()}function insertHr(){const e=document.getElementById("editor");e.focus(),e.setRangeText("\n\n---\n\n",e.selectionStart,e.selectionStart,"end"),onEditorInput()}function insertMath(){const e=document.getElementById("editor");e.focus();var t=e.selectionStart,n=e.selectionEnd,o=e.value.slice(t,n);o?e.setRangeText(`$$${o}$$`,t,n,"end"):(n="$E = mc^2$",e.setRangeText(n,t,t,"end"),e.selectionStart=t+1,e.selectionEnd=t+n.length-1),onEditorInput()}window.addEventListener("resize",()=>{700<window.innerWidth&&document.getElementById("sidebar").classList.remove("mobile-open")}),document.getElementById("tag-input").addEventListener("keydown",function(e){if("Enter"===e.key||","===e.key){e.preventDefault();var t=this.value.trim().replace(/,/g,"");if(!t)return;const n=S.notes.find(e=>e.id===S.aN);if(!n)return;n.tags||(n.tags=[]),n.tags.includes(t)||(n.tags.push(t),n.upd=Date.now(),scheduleSv(),rTags(n.tags),rNotes()),this.value=""}if("Backspace"===e.key&&""===this.value){const o=S.notes.find(e=>e.id===S.aN);o&&o.tags&&o.tags.length&&(o.tags.pop(),scheduleSv(),rTags(o.tags),rNotes())}}),document.getElementById("nb-inp").addEventListener("keydown",e=>{"Enter"===e.key&&createNB()}),document.querySelectorAll(".modal-ov").forEach(t=>t.addEventListener("click",e=>{e.target===e.currentTarget&&t.classList.remove("open")})),document.getElementById("search").addEventListener("input",()=>rNotes()),document.getElementById("editor").addEventListener("paste",e=>{var t=e.clipboardData?.items;if(t)for(const n of t)if(n.type.startsWith("image/")){e.preventDefault();const o=new FileReader;return o.onload=e=>{const t=document.getElementById("editor");t.setRangeText(`\n\n\n\n`,t.selectionStart,t.selectionStart,"end"),onEditorInput()},void o.readAsDataURL(n.getAsFile())}});const EM_HINTS={youtube:"YouTube URL or Video ID",map:"Location or Google Maps URL",spotify:"Spotify URL",codepen:"CodePen URL",web:"Any webpage URL"};function openEmbedModal(){if(!S.aN)return newNote(),void setTimeout(openEmbedModal,200);document.getElementById("em-url").value="",document.getElementById("em-cap").value="",openM("embed-modal")}function setET(e){curET=e.dataset.et,document.querySelectorAll(".et-btn").forEach(e=>e.classList.remove("active")),e.classList.add("active"),document.getElementById("em-url-lbl").textContent=EM_HINTS[curET]||"URL"}function doEmbed(){const n=document.getElementById("em-url").value.trim(),o=document.getElementById("em-cap").value.trim();if(n){let t="";if("youtube"===curET){var e=n.match(/(?:v=|youtu\.be\/|embed\/)([A-Za-z0-9_-]{11})/),e=e?e[1]:n;t=`\n\n<iframe width="100%" height="315" src="https://www.youtube.com/embed/${e}" frameborder="0" allowfullscreen></iframe>${o?`\n\n*${o}*`:""}\n\n`}else if("map"===curET){var a=encodeURIComponent(n);t=`\n\n<iframe width="100%" height="300" src="https://maps.google.com/maps?q=${a}&output=embed" frameborder="0" allowfullscreen></iframe>${o?`\n\n*${o}*`:""}\n\n`}else if("spotify"===curET){let e=n.replace("open.spotify.com/","open.spotify.com/embed/");e.includes("/embed/")||(e=e.replace("open.spotify.com/","open.spotify.com/embed/")),t=`\n\n<iframe src="${e}" width="100%" height="152" frameborder="0" allow="encrypted-media"></iframe>${o?`\n\n*${o}*`:""}\n\n`}else if("codepen"===curET){a=n.match(/codepen\.io\/([\w-]+)\/pen\/([\w]+)/);if(!a)return void alert("Enter full CodePen URL.");t=`\n\n<iframe height="400" src="https://codepen.io/${a[1]}/embed/${a[2]}?default-tab=result" frameborder="no" allowfullscreen width="100%"></iframe>${o?`\n\n*${o}*`:""}\n\n`}else t=`\n\n<iframe src="${n}" width="100%" height="400" frameborder="0"></iframe>${o?`\n\n*${o}*`:""}\n\n`;const i=document.getElementById("editor");i.setRangeText(t,i.selectionStart,i.selectionStart,"end"),onEditorInput(),closeM("embed-modal"),setView("preview")}else alert("Please enter a URL.")}let calDate=new Date;function openSpecial(e){document.getElementById("special-view").classList.add("open"),"calendar"===e?(document.getElementById("sv-title").textContent="📅 Calendar",buildCal()):(document.getElementById("sv-title").textContent="◎ Tag Graph",buildGraph())}function closeSpecial(){document.getElementById("special-view").classList.remove("open")}function buildCal(){const e=document.getElementById("sv-body");var t=calDate.getFullYear(),n=calDate.getMonth();const o=new Date(t,n,1).getDay(),a=new Date(t,n+1,0).getDate(),i=new Date,l={};S.notes.filter(e=>e.nbId===S.aNB&&!e.archived).forEach(e=>{const t=new Date(e.upd||e.cre||Date.now());var n=`${t.getFullYear()}-${t.getMonth()}-${t.getDate()}`;l[n]||(l[n]=[]),l[n].push(e)});let d=`<div id="cal-nav"><button onclick="calMove(-1)">◀</button><div id="cal-month">${calDate.toLocaleString("en-GB",{month:"long",year:"numeric"})}</div><button onclick="calMove(1)">▶</button></div><div id="cal-grid"><div class="cal-dow">Su</div><div class="cal-dow">Mo</div><div class="cal-dow">Tu</div><div class="cal-dow">We</div><div class="cal-dow">Th</div><div class="cal-dow">Fr</div><div class="cal-dow">Sa</div>`;var s=new Date(t,n,0).getDate();for(let e=(o||7)-1;0<=e;e--)d+=`<div class="cal-day other-month"><div class="cal-dn">${s-e}</div></div>`;for(let e=1;e<=a;e++){var c=i.getFullYear()===t&&i.getMonth()===n&&i.getDate()===e,r=`${t}-${n}-${e}`;const u=l[r]||[];d+=`<div class="cal-day${c?" today":""}"><div class="cal-dn">${e}</div>${u.slice(0,3).map(e=>`<div class="cal-nd" onclick="selNote('${e.id}')">${x((e.title||"Untitled").slice(0,12))}</div>`).join("")}</div>`}var m=(7-(o+a)%7)%7;for(let e=1;e<=m;e++)d+=`<div class="cal-day other-month"><div class="cal-dn">${e}</div></div>`;d+="</div>",e.innerHTML=d}function calMove(e){calDate=new Date(calDate.getFullYear(),calDate.getMonth()+e,1),buildCal()}function buildGraph(){const e=document.getElementById("sv-body"),o=S.notes.filter(e=>e.nbId===S.aNB&&!e.archived);if(o.length){e.innerHTML='<canvas id="graph-canvas" style="width:100%;height:400px"></canvas><div id="graph-legend">Nodes = notes · Lines = shared tags · Click to open</div>';const i=document.getElementById("graph-canvas"),l=i.offsetWidth||600;i.width=l,i.height=400;const n=i.getContext("2d"),d=o.map((e,t)=>{var n=t/o.length*Math.PI*2,t=.3*Math.min(l,400);return{id:e.id,title:e.title||"Untitled",tags:e.tags||[],x:l/2+t*Math.cos(n)*(.6+.7*Math.random()),y:200+t*Math.sin(n)*(.6+.7*Math.random()),r:11+Math.min(3*(e.tags||[]).length,16),color:e.color?colorHex(e.color):null}}),a=[];for(let e=0;e<d.length;e++)for(let t=e+1;t<d.length;t++)(d[e].tags||[]).filter(e=>(d[t].tags||[]).includes(e)).length&&a.push({a:e,b:t});n.clearRect(0,0,l,400),a.forEach(e=>{var t=d[e.a],e=d[e.b];n.beginPath(),n.moveTo(t.x,t.y),n.lineTo(e.x,e.y),n.strokeStyle="rgba(150,120,80,.2)",n.lineWidth=1.5,n.stroke()}),d.forEach(e=>{n.beginPath(),n.arc(e.x,e.y,e.r,0,2*Math.PI),n.fillStyle=e.color||"var(--accent2,#c4793a)",n.globalAlpha=.85,n.fill(),n.globalAlpha=1,n.strokeStyle="rgba(255,255,255,.35)",n.lineWidth=2,n.stroke(),n.fillStyle="rgba(44,24,16,.8)",n.font="10px 'Courier Prime',monospace",n.textAlign="center",n.textBaseline="middle";var t=10<e.title.length?e.title.slice(0,10)+"…":e.title;13<e.r?n.fillText(t,e.x,e.y):(n.fillStyle="rgba(44,24,16,.65)",n.fillText(t,e.x,e.y+e.r+8))}),i.addEventListener("mousemove",e=>{var t=i.getBoundingClientRect();const n=(e.clientX-t.left)*(l/t.width),o=(e.clientY-t.top)*(400/t.height);let a=null;d.forEach(e=>{Math.hypot(n-e.x,o-e.y)<e.r+4&&(a=e)}),i.title=a?a.title:"",i.style.cursor=a?"pointer":"default"}),i.addEventListener("click",e=>{var t=i.getBoundingClientRect();const n=(e.clientX-t.left)*(l/t.width),o=(e.clientY-t.top)*(400/t.height);d.forEach(e=>{Math.hypot(n-e.x,o-e.y)<e.r+4&&(selNote(e.id),closeSpecial())})})}else e.innerHTML="<p style=\"color:var(--ink3);font-family:'Courier Prime',monospace;padding:20px;\">No notes yet.</p>"}function buildMusicPlayer(){document.getElementById("mp-tracks").innerHTML=TRACKS.map((e,t)=>`<button class="mp-tb${t===mpIdx?" active":""}" onclick="mpLoad(${t})">${e.e} ${e.name}</button>`).join("")}function toggleMusic(){const e=document.getElementById("music-player");e.classList.toggle("open"),e.classList.contains("open")&&buildMusicPlayer()}function mpLoad(n){mpIdx=n,mpAudio&&(mpAudio.pause(),mpAudio=null),mpAudio=new Audio(TRACKS[n].url),mpAudio.loop=!0,mpAudio.volume=document.getElementById("mp-vol").value/100,mpAudio.play().catch(()=>{}),mpPlaying=!0,document.getElementById("mp-track").textContent=TRACKS[n].e+" "+TRACKS[n].name,document.getElementById("mp-play-btn").textContent="⏸ Pause",document.querySelectorAll(".mp-tb").forEach((e,t)=>e.classList.toggle("active",t===n)),startVis()}function mpToggle(){mpAudio?mpPlaying?(mpAudio.pause(),mpPlaying=!1,document.getElementById("mp-play-btn").textContent="▶ Play",stopVis()):(mpAudio.play().catch(()=>{}),mpPlaying=!0,document.getElementById("mp-play-btn").textContent="⏸ Pause",startVis()):mpLoad(mpIdx)}function mpPrev(){mpLoad((mpIdx-1+TRACKS.length)%TRACKS.length)}function mpNext(){mpLoad((mpIdx+1)%TRACKS.length)}function mpVol(e){mpAudio&&(mpAudio.volume=e/100)}function startVis(){mpAF&&cancelAnimationFrame(mpAF);const t=Array.from({length:8},(e,t)=>document.getElementById("mpb"+t));!function e(){t.forEach(e=>{e&&(e.style.height=2+13*Math.random()+"px")}),mpAF=requestAnimationFrame(e)}()}function stopVis(){mpAF&&(cancelAnimationFrame(mpAF),mpAF=null),Array.from({length:8},(e,t)=>document.getElementById("mpb"+t)).forEach(e=>{e&&(e.style.height="3px")})}function openShare(){S.aN?(document.getElementById("qr-wrap").style.display="none",document.getElementById("share-panel").classList.add("open")):alert("Select a note first.")}function closeShare(){document.getElementById("share-panel").classList.remove("open")}function getNote(){return S.notes.find(e=>e.id===S.aN)}function dlFile(e,t,n){const o=document.createElement("a");o.href=URL.createObjectURL(new Blob([e],{type:n})),o.download=t,o.click()}function exportMD(){const e=getNote();if(e){const o=e.title||"Untitled";var t=(e.tags||[]).length?`\ntags: [${e.tags.join(", ")}]`:"",n=new Date(e.cre||Date.now()).toISOString().split("T")[0];dlFile(`---\ntitle: ${o}\ndate: ${n}${t}\n---\n\n`+(e.body||""),`${o.replace(/[^a-z0-9]/gi,"_")}.md`,"text/markdown")}}function exportTXT(){const e=getNote();e&&dlFile(`${e.title||"Untitled"}\n${"=".repeat((e.title||"Untitled").length)}\n\n${e.body||""}`,`${(e.title||"note").replace(/[^a-z0-9]/gi,"_")}.txt`,"text/plain")}function exportHTML(){const e=getNote();var t;e&&(t="undefined"!=typeof marked?marked.parse(e.body||""):"<pre>"+x(e.body||"")+"</pre>",dlFile(`<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>${x(e.title||"Note")}</title><style>body{font-family:Georgia,serif;max-width:700px;margin:40px auto;padding:20px;line-height:1.8;color:#2c1810;background:#faf7f2;}h1,h2,h3{font-family:'Palatino Linotype',serif;}code{background:#f0ebe0;padding:2px 5px;border-radius:3px;}pre{background:#2c1810;color:#f5f0e8;padding:16px;border-radius:5px;}blockquote{border-left:3px solid #c4793a;margin:1em 0;padding:4px 16px;color:#5c3d2e;font-style:italic;background:#ede7d9;}</style></head><body><h1>${x(e.title||"Untitled")}</h1>${t}</body></html>`,`${(e.title||"note").replace(/[^a-z0-9]/gi,"_")}.html`,"text/html"))}function printNote(){var e=getNote();if(e){var t="undefined"!=typeof marked?marked.parse(e.body||""):"<pre>"+x(e.body||"")+"</pre>";const n=window.open("","_blank");n.document.write(`<!DOCTYPE html><html><head><meta charset="UTF-8"><title>${x(e.title||"Note")}</title><style>body{font-family:Georgia,serif;max-width:700px;margin:30px auto;padding:20px;line-height:1.8;color:#111;}h1{font-size:26px;border-bottom:1px solid #ccc;padding-bottom:8px;}code{background:#f5f5f5;padding:1px 4px;}pre{background:#f0f0f0;padding:12px;border-radius:4px;}@media print{body{margin:0;}}</style></head><body><h1>${x(e.title||"Untitled")}</h1>${t}</body></html>`),n.document.close(),n.focus(),setTimeout(()=>{n.print(),n.close()},400)}}function copyMarkdown(){const t=getNote();t&&navigator.clipboard.writeText(`# ${t.title||"Untitled"}\n\n${t.body||""}`).then(()=>alert("Copied to clipboard!")).catch(()=>{const e=document.createElement("textarea");e.value=`# ${t.title||"Untitled"}\n\n${t.body||""}`,document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e),alert("Copied!")})}function exportAllZip(){const e=S.notes.filter(e=>!e.archived);if(e.length){let o="The Zenbook — Full Export\n"+"=".repeat(40)+"\n";o+=`Exported: ${(new Date).toLocaleString()}\n`,o+=`Total notes: ${e.length}\n\n`,e.forEach((t,e)=>{var n=(S.notebooks.find(e=>e.id===t.nbId)||{}).name||"Unknown";o+=`${"=".repeat(50)}\nNote ${e+1}: ${t.title||"Untitled"}\nNotebook: ${n}\nDate: ${new Date(t.cre||Date.now()).toLocaleDateString()}\nTags: ${(t.tags||[]).join(", ")||"none"}\n${"—".repeat(30)}\n${t.body||""}\n\n`}),dlFile(o,"zenbook-export-"+Date.now()+".txt","text/plain"),alert(`Exported ${e.length} notes as a single text file.`)}else alert("No notes to export.")}function copyShareLink(){var e=getNote();e&&(e=btoa(encodeURIComponent(JSON.stringify({title:e.title,body:e.body,tags:e.tags}))),e=window.location.href.split("#")[0]+"#note="+e,navigator.clipboard.writeText(e).then(()=>alert("Link copied! Anyone with this link can view the note content encoded in the URL.")).catch(()=>alert("Could not access clipboard.")))}function showQR(){const e=getNote();if(e){const t=document.getElementById("qr-wrap");t.style.display="block";const n=document.getElementById("qr-canvas"),o=n.getContext("2d");o.fillStyle="#fff",o.fillRect(0,0,160,160),o.fillStyle="#2c1810",o.font="11px 'Courier Prime',monospace",o.textAlign="center",o.fillText("QR for note:",80,60),o.fillText('"'+(e.title||"Untitled").slice(0,20)+'"',80,80),o.fillText("(Copy Link for full QR)",80,110),o.fillStyle="#c4793a",o.fillText('Use "Copy Link" then',80,130),o.fillText("paste into qr.io",80,145)}}document.getElementById("share-panel").addEventListener("click",e=>{e.target===e.currentTarget&&closeShare()});let touchStartX=0,touchStartY=0;document.getElementById("editor-panel").addEventListener("touchstart",e=>{touchStartX=e.touches[0].clientX,touchStartY=e.touches[0].clientY},{passive:!0}),document.getElementById("editor-panel").addEventListener("touchend",e=>{var t=e.changedTouches[0].clientX-touchStartX,e=e.changedTouches[0].clientY-touchStartY;60<Math.abs(t)&&Math.abs(t)>1.5*Math.abs(e)&&0<t&&toggleSidebar()},{passive:!0});let touchNoteStart=0;document.getElementById("notes-list").addEventListener("touchstart",e=>{touchNoteStart=e.touches[0].clientX},{passive:!0});let canvas2,ctx2,isD=!1,dT="pen",bC="#2c1810",bSz=3,bOp=1,lX=0,lY=0,undoSt=[],redoSt2=[];function initDraw(){canvas2=document.getElementById("draw-canvas"),ctx2=canvas2.getContext("2d"),resizeCv(),canvas2.addEventListener("mousedown",e=>{startD(getP(e))}),canvas2.addEventListener("mousemove",e=>{isD&&doDraw(getP(e))}),canvas2.addEventListener("mouseup",endD),canvas2.addEventListener("mouseleave",endD),canvas2.addEventListener("touchstart",e=>{e.preventDefault(),startD(getP(e.touches[0]))},{passive:!1}),canvas2.addEventListener("touchmove",e=>{e.preventDefault(),isD&&doDraw(getP(e.touches[0]))},{passive:!1}),canvas2.addEventListener("touchend",e=>{e.preventDefault(),endD()},{passive:!1})}function resizeCv(){if(canvas2){var t=document.getElementById("cv-sz").value.split(","),n=+t[0],t=+t[1];let e=null;if(ctx2&&0<canvas2.width&&(e=canvas2.toDataURL()),canvas2.width=n,canvas2.height=t,canvas2.style.width=n+"px",canvas2.style.height=t+"px",ctx2=canvas2.getContext("2d"),fillBg(),e){const o=new Image;o.onload=()=>ctx2.drawImage(o,0,0),o.src=e}}}function fillBg(){ctx2.save(),ctx2.globalCompositeOperation="source-over",ctx2.globalAlpha=1,ctx2.fillStyle="#faf7f2",ctx2.fillRect(0,0,canvas2.width,canvas2.height),ctx2.restore()}function getP(e){var t=canvas2.getBoundingClientRect();return{x:(e.clientX-t.left)*(canvas2.width/t.width),y:(e.clientY-t.top)*(canvas2.height/t.height)}}function snapSave(){undoSt.push(canvas2.toDataURL()),40<undoSt.length&&undoSt.shift(),redoSt2=[],updUndoCt()}function startD(e){isD=!0,snapSave(),lX=e.x,lY=e.y,applyDS(),ctx2.beginPath(),ctx2.arc(e.x,e.y,effSz()/2,0,2*Math.PI),ctx2.fill(),ctx2.beginPath(),ctx2.moveTo(e.x,e.y)}function doDraw(e){applyDS(),ctx2.beginPath(),ctx2.moveTo(lX,lY),ctx2.lineTo(e.x,e.y),ctx2.stroke(),lX=e.x,lY=e.y}function endD(){isD=!1,ctx2&&ctx2.beginPath()}function applyDS(){"er"===dT?(ctx2.globalCompositeOperation="destination-out",ctx2.strokeStyle="rgba(0,0,0,1)",ctx2.fillStyle="rgba(0,0,0,1)",ctx2.lineWidth=5*bSz,ctx2.lineCap="round",ctx2.lineJoin="round",ctx2.globalAlpha=1):"hl"===dT?(ctx2.globalCompositeOperation="multiply",ctx2.strokeStyle=bC,ctx2.fillStyle=bC,ctx2.lineWidth=7*bSz,ctx2.lineCap="square",ctx2.lineJoin="round",ctx2.globalAlpha=Math.min(bOp,.4)):(ctx2.globalCompositeOperation="source-over",ctx2.strokeStyle=bC,ctx2.fillStyle=bC,ctx2.lineWidth=bSz,ctx2.lineCap="round",ctx2.lineJoin="round",ctx2.globalAlpha=bOp)}function effSz(){return"er"===dT?5*bSz:"hl"===dT?7*bSz:bSz}function setDT(e){dT=e,document.querySelectorAll(".dtool").forEach(e=>e.classList.remove("active")),document.getElementById("dt-"+e).classList.add("active"),document.getElementById("cv-wrap").className="cur-"+("er"===e?"e":"hl"===e?"h":"p")}function pickSw(e){bC=e.dataset.c,document.querySelectorAll(".sw").forEach(e=>e.classList.remove("active")),e.classList.add("active"),document.getElementById("color-picker").value=bC,"er"===dT&&setDT("pen")}function pickCustom(e){bC=e,document.querySelectorAll(".sw").forEach(e=>e.classList.remove("active")),"er"===dT&&setDT("pen")}function onSz(){bSz=+document.getElementById("brush-sz").value;var e=Math.min(Math.max(bSz,2),22);const t=document.getElementById("sz-dot");t.style.width=e+"px",t.style.height=e+"px"}function onOp(){var e=+document.getElementById("brush-op").value;bOp=e/100,document.getElementById("op-val").textContent=e+"%"}function undoDraw(){if(undoSt.length){redoSt2.push(canvas2.toDataURL());const e=new Image;e.onload=()=>{fillBg(),ctx2.drawImage(e,0,0)},e.src=undoSt.pop(),updUndoCt()}}function redoDraw(){if(redoSt2.length){undoSt.push(canvas2.toDataURL());const e=new Image;e.onload=()=>{fillBg(),ctx2.drawImage(e,0,0)},e.src=redoSt2.pop(),updUndoCt()}}function updUndoCt(){document.getElementById("undo-ct").textContent=undoSt.length?`(${undoSt.length})`:" "}function clearCanvas(){confirm("Clear?")&&(snapSave(),fillBg())}function dlDraw(){if(canvas2){const e=document.createElement("a");e.download="drawing-"+Date.now()+".png",e.href=canvas2.toDataURL("image/png"),e.click()}}function insertDrawing(){if(canvas2&&S.aN){var e=canvas2.toDataURL("image/png");const t=S.notes.find(e=>e.id===S.aN);if(t){const n=document.getElementById("editor");n.setRangeText(`\n\n\n\n`,n.selectionStart,n.selectionStart,"end"),t.body=n.value,t.upd=Date.now(),scheduleSv(),updPrev(),updCounts(),rNotes(),toggleDraw()}}}function toggleDraw(){if(!S.aN)return newNote(),void setTimeout(toggleDraw,200);drawOpen=!drawOpen,document.getElementById("draw-panel").classList.toggle("open",drawOpen),document.getElementById("draw-btn").classList.toggle("on",drawOpen),drawOpen&&!canvas2&&initDraw()}function x(e){return String(e||"").replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}document.addEventListener("keydown",e=>{var t=e.ctrlKey||e.metaKey;t&&"b"===e.key&&(e.preventDefault(),fmt("bold")),t&&"i"===e.key&&(e.preventDefault(),fmt("italic")),t&&"n"===e.key&&(e.preventDefault(),newNote()),t&&"k"===e.key&&(e.preventDefault(),document.getElementById("search").focus()),t&&"z"===e.key&&drawOpen&&(e.preventDefault(),undoDraw()),t&&e.shiftKey&&"Z"===e.key&&drawOpen&&(e.preventDefault(),redoDraw()),t&&"p"===e.key&&(e.preventDefault(),printNote()),t&&e.shiftKey&&"E"===e.key&&(e.preventDefault(),exportMD()),"Escape"===e.key&&(document.getElementById("appear-panel").classList.remove("open"),document.getElementById("streak-panel").classList.remove("open"),closeMobSb(),document.getElementById("md-help").classList.remove("open"),zenOn&&toggleZen())});let dragSrcId=null;function enableDrag(i,n){i.setAttribute("draggable","true");const e=document.createElement("div");e.className="drag-handle",e.textContent="⠿",i.style.position="relative",i.style.paddingLeft="18px",i.insertBefore(e,i.firstChild),i.addEventListener("dragstart",e=>{dragSrcId=n,e.dataTransfer.effectAllowed="move",setTimeout(()=>i.classList.add("dragging"),0)}),i.addEventListener("dragend",()=>{i.classList.remove("dragging"),document.querySelectorAll(".note-item").forEach(e=>e.classList.remove("drag-over"))}),i.addEventListener("dragover",e=>{e.preventDefault(),e.dataTransfer.dropEffect="move",document.querySelectorAll(".note-item").forEach(e=>e.classList.remove("drag-over")),i.classList.add("drag-over")}),i.addEventListener("dragleave",()=>i.classList.remove("drag-over")),i.addEventListener("drop",e=>{var t;e.preventDefault(),i.classList.remove("drag-over"),dragSrcId!==n&&(t=S.notes.findIndex(e=>e.id===dragSrcId),e=S.notes.findIndex(e=>e.id===n),-1!==t&&-1!==e&&([t]=S.notes.splice(t,1),S.notes.splice(e,0,t),sv(),rNotes()))});let t,l=!1;e.addEventListener("touchstart",e=>{l=!0,dragSrcId=n,t=e.touches[0].clientY,i.classList.add("dragging"),e.stopPropagation()},{passive:!0}),document.addEventListener("touchmove",t=>{if(l){var e=t.touches[0].clientY;const n=document.elementsFromPoint(t.touches[0].clientX,e),o=n.find(e=>e.classList.contains("note-item")&&e!==t.target);document.querySelectorAll(".note-item").forEach(e=>e.classList.remove("drag-over")),o&&o.classList.add("drag-over")}},{passive:!0}),document.addEventListener("touchend",e=>{if(l){l=!1,i.classList.remove("dragging");const o=document.querySelector(".note-item.drag-over");if(o){const a=o.dataset.nid;var t,n;a&&a!==dragSrcId&&(n=S.notes.findIndex(e=>e.id===dragSrcId),t=S.notes.findIndex(e=>e.id===a),-1<n&&-1<t&&([n]=S.notes.splice(n,1),S.notes.splice(t,0,n),sv())),o.classList.remove("drag-over")}rNotes()}},{passive:!0})}const _rNotesOrig=rNotes,_rNotesPatch=function(){_rNotesOrig(),"upd"===document.getElementById("sort-sel").value&&document.querySelectorAll(".note-item").forEach(e=>{var t=e.dataset.nid;t&&enableDrag(e,t)})};function rNotes(){const t=document.getElementById("search").value.trim().toLowerCase(),s=document.getElementById("sort-sel").value;let e=S.notes.filter(e=>e.nbId===S.aNB);e="pinned"===curFlt?e.filter(e=>e.pinned):"archived"===curFlt?e.filter(e=>e.archived):e.filter(e=>!e.archived),t&&(e=S.notes.filter(e=>(e.title||"").toLowerCase().includes(t)||(e.body||"").toLowerCase().includes(t)||(e.tags||[]).some(e=>e.toLowerCase().includes(t))),e="archived"===curFlt?e.filter(e=>e.archived):"pinned"===curFlt?e.filter(e=>e.pinned):e.filter(e=>!e.archived)),document.getElementById("notes-lbl").textContent=t?`Results (${e.length})`:"Notes",e="alpha"===s?e.sort((e,t)=>(e.title||"").localeCompare(t.title||"")):"cre"===s?e.sort((e,t)=>(t.cre||0)-(e.cre||0)):e.sort((e,t)=>!!e.pinned!=!!t.pinned?e.pinned?-1:1:(t.upd||0)-(e.upd||0));const c=document.getElementById("notes-list");c.innerHTML="",e.forEach(t=>{const e=document.createElement("div");let n="note-item";t.id===S.aN&&(n+=" active"),t.pinned&&(n+=" pinned"),t.archived&&(n+=" archived"),e.className=n,e.dataset.nid=t.id;const o=new Date(t.upd||t.cre||Date.now());var a=o.toLocaleDateString("en-GB",{day:"2-digit",month:"short",year:"2-digit"}),i=(t.body||"").replace(/[#*`>_~\[\]!]/g,"").replace(/\n/g," ").slice(0,50),l=(t.tags||[]).slice(0,3).map(e=>`<span class="tag-pill">${x(e)}</span>`).join(""),d=t.color?`<span class="n-cdot nc-${t.color}"></span>`:"";e.innerHTML=`<div class="n-ti">${d}${x(t.title)||'<em style="opacity:.4">Untitled</em>'}</div><div class="n-me">${a}</div>${i?`<div class="n-pv">${x(i)}…</div>`:""} ${l?`<div class="n-tg">${l}</div>`:""}`,e.addEventListener("click",e=>{e.target.classList.contains("drag-handle")||selNote(t.id)}),"upd"===s&&enableDrag(e,t.id),c.appendChild(e)})}function initOffline(){var e;window.addEventListener("online",()=>{document.getElementById("offline-badge").classList.remove("show")}),window.addEventListener("offline",()=>{document.getElementById("offline-badge").classList.add("show"),setTimeout(()=>document.getElementById("offline-badge").classList.remove("show"),4e3)}),navigator.onLine||(document.getElementById("offline-badge").classList.add("show"),setTimeout(()=>document.getElementById("offline-badge").classList.remove("show"),4e3)),"serviceWorker"in navigator&&(e=new Blob([`
const CACHE='zenbook-v1';
const ASSETS=[
'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Lora:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500&family=Merriweather:ital,wght@0,300;0,700;1,300&display=swap',
'https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css',
'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/contrib/auto-render.min.js',
];
self.addEventListener('install',e=>{
e.waitUntil(caches.open(CACHE).then(c=>c.addAll(ASSETS).catch(()=>{})));
self.skipWaiting();
});
self.addEventListener('activate',e=>{
e.waitUntil(caches.keys().then(keys=>Promise.all(keys.filter(k=>k!==CACHE).map(k=>caches.delete(k)))));
self.clients.claim();
});
self.addEventListener('fetch',e=>{
if(e.request.method!=='GET')return;
e.respondWith(
caches.match(e.request).then(cached=>{
if(cached)return cached;
return fetch(e.request).then(resp=>{
if(resp&&resp.status===200){
const clone=resp.clone();
caches.open(CACHE).then(c=>c.put(e.request,clone));
}
return resp;
}).catch(()=>cached||new Response('Offline',{status:503}));
})
);
});`],{type:"application/javascript"}),e=URL.createObjectURL(e),navigator.serviceWorker.register(e,{scope:"./"}).then(()=>console.log("SW registered — offline ready")).catch(e=>console.log("SW skipped:",e.message)))}load();const fn=S.notes.find(e=>e.nbId===S.aNB&&!e.archived);fn&&!S.aN&&(S.aN=fn.id),render(),applyAppear(),updateGreeting(),initOnboard(),initLock(),initOffline();const initStreak=calcCurrentStreak();document.getElementById("streak-badge").textContent=`🔥 ${initStreak} day${1!==initStreak?"s":""}`,0<getTotalWordsToday()&&logWritingDay()</script>