*{box-sizing:border-box;margin:0;padding:0}:root{--background:#fcfcfb;--foreground:#242424;--muted:#f4f4f2;--muted-hover:#eeeeeb;--muted-foreground:#969696;--card:#fff;--border:#e9e9e6;--primary:#242424;--primary-hover:#3d3d3d;--primary-foreground:#fff;--input:transparent;--danger:#b42318;--danger-muted:#fff1f0;--icon-filter:none;--sidebar-width:320px;--editor-width:680px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-pill:999px;--transition:.16s ease}html[data-theme=dark]{--background:#121212;--foreground:#e9e9e7;--muted:#1c1c1b;--muted-hover:#252524;--muted-foreground:#7d7d78;--card:#161616;--border:#292927;--primary:#ededeb;--primary-hover:#d3d3cf;--primary-foreground:#151515;--input:transparent;--danger:#ff7b72;--danger-muted:#2d1918;--icon-filter:invert(1)}html,body,#root{width:100%;height:100%}body{background:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.5}button,input,textarea{font:inherit}button{color:inherit}textarea{resize:none}.main{background:var(--background);width:100dvw;height:100dvh;color:var(--foreground);display:flex;overflow:hidden}.sideBar{width:var(--sidebar-width);min-width:var(--sidebar-width);background:var(--background);border-right:1px solid var(--border);height:100%;transition:transform var(--transition),background-color var(--transition);flex-direction:column;display:flex;overflow:hidden}.header-sideBar{justify-content:space-between;align-items:center;height:88px;padding:24px 20px 12px;display:flex}.app-logo{object-fit:contain;width:170px;max-height:36px;filter:var(--icon-filter)}.arrowIcon,.optionsIcon,.themeToggle{cursor:pointer;opacity:.55;transition:opacity var(--transition),background-color var(--transition)}.arrowIcon:hover,.optionsIcon:hover,.themeToggle:hover{opacity:1}.addNoteButton{border-radius:var(--radius-pill);background:var(--primary);width:calc(100% - 32px);color:var(--primary-foreground);cursor:pointer;transition:background-color var(--transition),transform var(--transition);border:none;margin:8px 16px 18px;padding:11px 16px;font-size:14px;font-weight:500}.addNoteButton:hover{background:var(--primary-hover)}.addNoteButton:active{transform:scale(.985)}.notesList{scrollbar-width:none;flex:1;margin:0;padding:4px 10px 20px;overflow:hidden auto}.notesList::-webkit-scrollbar{display:none}.noteItem{align-items:center;width:100%;display:flex;position:relative}.noteCard{border-radius:var(--radius-sm);width:100%;color:var(--foreground);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;transition:background-color var(--transition),color var(--transition);background:0 0;border:none;margin:1px 0;padding:9px 11px;font-size:14px;line-height:1.4;display:block;overflow:hidden}.noteCard:first-letter{text-transform:uppercase}.noteCard:hover{background:var(--muted)}.noteCard:focus-visible{outline:1px solid var(--muted-foreground);outline-offset:-1px}.noteOptions{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--card);gap:6px;padding:5px;display:flex}.noteOptions .editNote,.noteOptions .deleteNote{border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--transition);border:none;padding:7px 10px;font-size:13px}.noteOptions .editNote{background:var(--muted);color:var(--foreground)}.noteOptions .editNote:hover{background:var(--muted-hover)}.noteOptions .deleteNote{color:var(--danger);background:0 0}.noteOptions .deleteNote:hover{background:var(--danger-muted)}.logout{border-radius:var(--radius-sm);width:calc(100% - 32px);color:var(--muted-foreground);cursor:pointer;transition:color var(--transition),background-color var(--transition);background:0 0;border:none;margin:16px;padding:10px 12px;font-size:13px}.logout:hover{color:var(--danger);background:var(--danger-muted)}.mainArea{background:var(--background);flex-direction:column;flex:1;min-width:0;padding:0 32px;display:flex;overflow:hidden}.topBar{flex-shrink:0;justify-content:space-between;align-items:center;width:100%;height:64px;padding:0 8px;font-size:13px;display:flex}.topbar-logo{filter:var(--icon-filter)}.saveStatus{color:var(--muted-foreground);letter-spacing:.01em;font-size:12px}.themeToggle{border-radius:var(--radius-pill);justify-content:center;align-items:center;padding:8px;display:flex}.themeToggle:hover{background:var(--muted)}.showArea{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.formNote{flex-direction:column;width:100%;max-width:900px;height:100%;min-height:0;margin:0 auto;display:flex}.newContent{width:100%;max-width:var(--editor-width);resize:none;background:var(--input);min-height:0;color:var(--foreground);scrollbar-width:none;letter-spacing:-.012em;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;caret-color:var(--foreground);border:none;outline:none;flex:1;margin:0 auto;padding:48px 12px 120px;font-family:Charter,Bitstream Charter,Sitka Text,Georgia,serif;font-size:20px;font-weight:400;line-height:1.65;overflow-y:auto}.newContent::-webkit-scrollbar{display:none}.newContent::placeholder{color:var(--muted-foreground);opacity:.65}.formSubmit{border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--background);width:auto;min-width:150px;color:var(--muted-foreground);cursor:pointer;transition:background-color var(--transition),color var(--transition),border-color var(--transition);flex-shrink:0;margin:20px auto 28px;padding:10px 20px;font-size:13px;font-weight:500}.formSubmit:hover:not(:disabled){background:var(--muted);color:var(--foreground);border-color:var(--muted-foreground)}.formSubmit:disabled{opacity:.45;cursor:default}@media screen and (max-width:700px){.mainArea{padding:0 18px}.sidebarClose{display:none}.sideBar{z-index:20;border-right:none;width:100dvw;min-width:100%;height:100dvh;position:absolute;inset:0}.header-sideBar{justify-content:center;height:72px;padding:18px}.app-logo{width:160px}.topBar{height:56px;padding:0}.newContent{letter-spacing:-.008em;max-width:100%;padding:28px 2px 100px;font-size:18px;line-height:1.65}.formSubmit{margin-bottom:18px}}