@import "https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap";
:root{--canvas:#131313;--surface-slate:#2d2d2d;--surface-raised:#1c1c1c;--image-frame:#313131;--mint:#3cffd0;--mint-border:#309875;--ultraviolet:#5200ff;--purple-rule:#3d00bf;--text-primary:#fff;--text-secondary:#949494;--text-muted:#e9e9e9;--text-inverted:#131313;--link-hover:#3860be;--focus-cyan:#1eaedb;--font-display:"Bebas Neue", Impact, Helvetica, sans-serif;--font-body:"Space Grotesk", Helvetica, Arial, sans-serif;--font-mono:"Space Mono", "Courier New", monospace;--r-xs:2px;--r-sm:4px;--r-md:20px;--r-lg:24px;--r-xl:30px;--r-pill:40px;--r-full:50%;--sidebar-w:240px}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--canvas);height:100%;color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none;font-size:15px;line-height:1.6}::selection{background:var(--mint);color:var(--text-inverted)}:focus-visible{outline:1px solid var(--focus-cyan);outline-offset:2px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--surface-slate);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#444}a{color:inherit;text-decoration:none}button{font-family:var(--font-body);cursor:pointer;color:inherit;background:0 0;border:none}input,textarea{font-family:var(--font-body)}.app-shell{height:100dvh;display:flex;position:relative;overflow:hidden}.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--canvas);border-right:1px solid var(--surface-slate);z-index:20;flex-direction:column;height:100%;transition:transform .2s,width .2s;display:flex;overflow:hidden}.sidebar-brand{border-bottom:1px solid var(--surface-slate);align-items:center;gap:10px;padding:16px 14px 14px;display:flex;position:relative}.sidebar-brand:after{content:"";background:linear-gradient(90deg, var(--mint) 0%, var(--ultraviolet) 60%, transparent 100%);opacity:.6;height:1px;position:absolute;bottom:0;left:14px;right:14px}.sidebar-brand-mark{flex-shrink:0;align-items:center;display:flex}.sidebar-brand-text{letter-spacing:2px;flex-direction:column;line-height:.85;display:flex}.sidebar-brand-to{font-family:var(--font-display);color:var(--text-secondary);letter-spacing:4px;font-size:13px}.sidebar-brand-do{font-family:var(--font-display);color:var(--mint);letter-spacing:3px;text-decoration:underline;-webkit-text-decoration-color:var(--ultraviolet);text-decoration-color:var(--ultraviolet);text-underline-offset:2px;font-size:26px;text-decoration-thickness:2px}.sidebar-actions{gap:4px;display:flex}.icon-btn{border-radius:var(--r-full);width:28px;height:28px;color:var(--text-secondary);justify-content:center;align-items:center;font-size:14px;transition:background .15s,color .15s;display:flex}.icon-btn:hover{background:var(--surface-slate);color:var(--text-primary)}.sidebar-scroll{flex:1;padding:8px 0;overflow:hidden auto}.sidebar-section-label{font-family:var(--font-mono);letter-spacing:1.8px;text-transform:uppercase;color:var(--text-secondary);padding:8px 16px 4px;font-size:10px;font-weight:600}.page-tree-item{border-radius:var(--r-xs);cursor:pointer;-webkit-tap-highlight-color:transparent;align-items:center;gap:4px;min-height:30px;padding:4px 8px 4px 12px;transition:background .1s;display:flex;position:relative}.page-tree-item:hover{background:var(--surface-slate)}.page-tree-item.active{background:#3cffd01a}.page-tree-item.active:before{content:"";background:var(--mint);border-radius:1px;width:2px;position:absolute;top:4px;bottom:4px;left:0}.page-tree-toggle{width:18px;height:18px;color:var(--text-secondary);border-radius:2px;flex-shrink:0;justify-content:center;align-items:center;font-size:10px;transition:transform .15s,color .15s;display:flex}.page-tree-toggle:hover{color:var(--text-primary);background:#ffffff14}.page-tree-toggle.open{transform:rotate(90deg)}.page-tree-toggle.leaf{opacity:0;pointer-events:none}.page-tree-icon{width:18px;color:var(--text-secondary);flex-shrink:0;justify-content:center;align-items:center;display:flex}.page-tree-item.active .page-tree-icon{color:var(--mint)}.page-tree-item:hover .page-tree-icon{color:var(--text-primary)}.page-tree-title{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:13px;font-weight:400;transition:color .1s;overflow:hidden}.page-tree-item.active .page-tree-title,.page-tree-item:hover .page-tree-title{color:var(--text-primary)}.page-tree-add{border-radius:var(--r-xs);width:20px;height:20px;color:var(--text-secondary);opacity:0;justify-content:center;align-items:center;font-size:12px;transition:opacity .1s,background .1s,color .1s;display:flex}.page-tree-item:hover .page-tree-add{opacity:1}.page-tree-add:hover{color:var(--mint);background:#ffffff1a}.page-tree-children{border-left:1px solid var(--surface-slate);margin-left:12px}.sidebar-new-page{border:1px solid var(--surface-slate);border-radius:var(--r-lg);font-family:var(--font-mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--text-secondary);align-items:center;gap:8px;margin:8px 12px;padding:8px 12px;font-size:11px;font-weight:600;transition:border-color .15s,color .15s,background .15s;display:flex}.sidebar-new-page:hover{border-color:var(--mint);color:var(--mint);background:#3cffd00d}.main-content{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.topbar{border-bottom:1px solid var(--surface-slate);flex-shrink:0;align-items:center;gap:12px;height:48px;padding:0 24px;display:flex}.topbar-hamburger{border-radius:var(--r-xs);width:32px;height:32px;color:var(--text-secondary);justify-content:center;align-items:center;transition:background .15s,color .15s;display:none}.topbar-hamburger:hover{background:var(--surface-slate);color:var(--text-primary)}.breadcrumb{flex:1;align-items:center;gap:6px;display:flex;overflow:hidden}.breadcrumb-item{font-family:var(--font-mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;cursor:pointer;font-size:11px;font-weight:600;transition:color .1s;overflow:hidden}.breadcrumb-item:hover{color:var(--link-hover)}.breadcrumb-item.current{color:var(--text-primary);cursor:default}.breadcrumb-sep{color:var(--text-secondary);flex-shrink:0;font-size:12px}.topbar-kbd{font-family:var(--font-mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--text-secondary);border:1px solid var(--surface-slate);border-radius:var(--r-xs);cursor:pointer;flex-shrink:0;align-items:center;gap:4px;padding:3px 8px;font-size:10px;font-weight:600;transition:border-color .15s,color .15s;display:flex}.topbar-kbd:hover{border-color:var(--mint);color:var(--mint)}.editor-area{flex:1;overflow:hidden auto}.editor-inner{max-width:720px;margin:0 auto;padding:48px 24px 120px}.page-header{margin-bottom:32px}.page-icon-btn{cursor:pointer;border-radius:var(--r-sm);width:56px;height:56px;color:var(--text-secondary);border:1px solid #0000;justify-content:center;align-items:center;margin-bottom:12px;transition:background .1s,border-color .1s,color .1s;display:flex}.page-icon-btn:hover{background:var(--surface-slate);border-color:var(--surface-slate);color:var(--text-primary)}.page-title-input{width:100%;font-family:var(--font-display);letter-spacing:1.5px;color:var(--text-primary);resize:none;caret-color:var(--mint);-webkit-user-select:text;user-select:text;touch-action:manipulation;background:0 0;border:none;outline:none;font-size:52px;font-weight:400;line-height:1.05}.page-title-input::placeholder{color:#0000}.page-title-input:focus::placeholder{color:var(--text-secondary)}.block-wrapper{border-radius:var(--r-xs);align-items:flex-start;gap:6px;padding:1px 0;display:flex;position:relative}.block-drag-handle{width:18px;height:24px;color:var(--text-secondary);opacity:0;cursor:grab;flex-shrink:0;justify-content:center;align-items:center;margin-top:2px;font-size:12px;transition:opacity .1s,color .1s;display:flex}.block-wrapper:hover .block-drag-handle{opacity:1}.block-drag-handle:hover{color:var(--mint)}.block-drag-handle:active{cursor:grabbing}.block-content{flex:1;min-width:0}.block-editable{width:100%;color:var(--text-primary);font-family:var(--font-body);resize:none;caret-color:var(--mint);white-space:pre-wrap;word-break:break-word;-webkit-user-select:text;user-select:text;touch-action:manipulation;background:0 0;border:none;outline:none;font-size:16px;line-height:1.7}.block-editable::placeholder{color:#0000}.block-editable:focus::placeholder{color:var(--text-secondary);opacity:.6}.block-h1{font-family:var(--font-display);letter-spacing:1.2px;font-size:36px;font-weight:400;line-height:1.1}.block-h2{font-family:var(--font-body);font-size:26px;font-weight:700;line-height:1.2}.block-h3{font-family:var(--font-body);font-size:20px;font-weight:700;line-height:1.3}.block-quote{border-left:3px solid var(--mint);color:var(--text-muted);padding-left:16px;font-style:italic}.block-code{font-family:var(--font-mono);background:var(--surface-slate);border:1px solid var(--image-frame);border-radius:var(--r-sm);tab-size:2;padding:12px 16px;font-size:13px;line-height:1.6}.block-divider{background:var(--surface-slate);cursor:default;border:none;outline:none;width:100%;height:1px;margin:12px 0}.block-todo-wrap{align-items:flex-start;gap:8px;display:flex}.block-todo-check{border:1px solid var(--text-secondary);border-radius:var(--r-xs);cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;width:16px;height:16px;margin-top:4px;transition:border-color .15s,background .15s;display:flex}.block-todo-check.checked{background:var(--mint);border-color:var(--mint);color:var(--text-inverted)}.block-todo-check.checked:after{content:"✓";font-size:10px;font-weight:700}.block-todo-text.checked{color:var(--text-secondary);text-decoration:line-through}.block-bullet-wrap{align-items:flex-start;gap:8px;display:flex}.block-bullet-dot{background:var(--mint);border-radius:50%;flex-shrink:0;width:6px;height:6px;margin-top:8px}.block-numbered-wrap{align-items:flex-start;gap:8px;display:flex}.block-numbered-num{font-family:var(--font-mono);color:var(--mint);text-align:right;flex-shrink:0;min-width:20px;padding-top:3px;font-size:12px}.slash-menu{background:var(--surface-raised);border:1px solid var(--surface-slate);border-radius:var(--r-md);z-index:100;min-width:220px;padding:6px;animation:.1s menu-in;position:fixed;overflow:hidden}@keyframes menu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.slash-menu-item{border-radius:var(--r-sm);cursor:pointer;align-items:center;gap:10px;padding:8px 10px;transition:background .1s;display:flex}.slash-menu-item:hover,.slash-menu-item.selected{background:var(--surface-slate)}.slash-menu-icon{border-radius:var(--r-xs);background:var(--surface-slate);border:1px solid var(--image-frame);flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:13px;display:flex}.slash-menu-label{color:var(--text-primary);font-size:13px;font-weight:500}.slash-menu-desc{color:var(--text-secondary);font-size:11px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.8px}.cmd-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200;background:#0009;justify-content:center;align-items:flex-start;padding-top:18vh;animation:.12s fade-in;display:flex;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.cmd-panel{background:var(--surface-raised);border:1px solid var(--surface-slate);border-radius:var(--r-lg);width:100%;max-width:560px;margin:0 16px;animation:.15s panel-in;overflow:hidden}@keyframes panel-in{0%{opacity:0;transform:scale(.96)translateY(-8px)}to{opacity:1;transform:scale(1)translateY(0)}}.cmd-input-wrap{border-bottom:1px solid var(--surface-slate);align-items:center;gap:10px;padding:14px 16px;display:flex}.cmd-input-icon{color:var(--text-secondary);font-size:14px}.cmd-input{color:var(--text-primary);font-size:16px;font-family:var(--font-body);caret-color:var(--mint);-webkit-user-select:text;user-select:text;background:0 0;border:none;outline:none;flex:1}.cmd-input::placeholder{color:var(--text-secondary)}.cmd-results{max-height:360px;padding:6px;overflow-y:auto}.cmd-section-label{font-family:var(--font-mono);letter-spacing:1.8px;text-transform:uppercase;color:var(--text-secondary);padding:8px 10px 4px;font-size:10px;font-weight:600}.cmd-item{border-radius:var(--r-sm);cursor:pointer;align-items:center;gap:10px;padding:8px 10px;transition:background .1s;display:flex}.cmd-item:hover,.cmd-item.selected{background:var(--surface-slate)}.cmd-item.selected{outline:1px solid #3cffd04d}.cmd-item-emoji{text-align:center;flex-shrink:0;width:24px;font-size:16px}.cmd-item-icon{border-radius:var(--r-xs);background:var(--surface-slate);border:1px solid var(--image-frame);width:24px;height:24px;color:var(--text-secondary);flex-shrink:0;justify-content:center;align-items:center;font-size:12px;display:flex}.cmd-item-text{flex:1;min-width:0}.cmd-item-label{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500;overflow:hidden}.cmd-item-desc{color:var(--text-secondary);font-size:11px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.8px}.cmd-kbd{font-family:var(--font-mono);color:var(--text-secondary);border:1px solid var(--surface-slate);border-radius:var(--r-xs);letter-spacing:.5px;padding:2px 6px;font-size:10px}.cmd-footer{border-top:1px solid var(--surface-slate);align-items:center;gap:16px;padding:8px 16px;display:flex}.cmd-footer-hint{font-family:var(--font-mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--text-secondary);align-items:center;gap:4px;font-size:10px;display:flex}.sidebar-overlay{z-index:15;background:#00000080;display:none;position:fixed;inset:0}.empty-state{height:100%;color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex}.empty-state-icon{font-family:var(--font-display);letter-spacing:2px;color:var(--surface-slate);font-size:80px}.empty-state-text{font-family:var(--font-mono);letter-spacing:1.8px;text-transform:uppercase;color:var(--text-secondary);font-size:11px}.empty-state-btn{background:var(--mint);color:var(--text-inverted);font-family:var(--font-mono);letter-spacing:1.5px;text-transform:uppercase;border-radius:var(--r-lg);cursor:pointer;border:none;padding:10px 24px;font-size:11px;font-weight:600;transition:opacity .15s}.empty-state-btn:hover{opacity:.85}.icon-picker{background:var(--surface-raised);border:1px solid var(--surface-slate);border-radius:var(--r-md);z-index:50;grid-template-columns:repeat(6,34px);gap:4px;padding:8px;animation:.1s menu-in;display:grid;position:absolute;top:calc(100% + 6px);left:0}.icon-picker-item{border-radius:var(--r-xs);width:34px;height:34px;color:var(--text-secondary);border:1px solid #0000;justify-content:center;align-items:center;transition:background .1s,color .1s;display:flex}.icon-picker-item:hover{background:var(--surface-slate);color:var(--text-primary)}.icon-picker-item.active{border-color:var(--mint);color:var(--mint);background:#3cffd01f}.child-pages-section{margin-top:40px}.child-pages-label{font-family:var(--font-mono);letter-spacing:1.8px;text-transform:uppercase;color:var(--text-secondary);margin-bottom:12px;font-size:10px;font-weight:600}.child-pages-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;display:grid}.child-page-card{border:1px solid var(--surface-slate);border-radius:var(--r-md);cursor:pointer;padding:16px;transition:border-color .15s,background .15s}.child-page-card:hover{border-color:var(--mint);background:#3cffd00a}.child-page-card-icon{color:var(--text-secondary);margin-bottom:8px}.child-page-card-title{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500;overflow:hidden}.block-wrapper.dragging{opacity:.4}.block-wrapper.drag-over{border-top:2px solid var(--mint)}@media (max-width:768px){.sidebar{z-index:50;height:100%;position:fixed;top:0;left:0;transform:translate(-100%)}.sidebar.mobile-open{transform:translate(0);box-shadow:4px 0 24px #00000080}.sidebar-overlay.visible{display:block}.topbar-hamburger{display:flex}.editor-inner{padding:32px 16px 80px}.page-title-input{font-size:36px}.cmd-overlay{align-items:flex-start;padding-top:8vh}}