:root{--bg: #1C1E21;--surface: #24262A;--surface-hover: #2E3136;--text: #FFFFFF;--text-secondary: #E4E6EB;--text-muted: #B0B3B8;--focus: #00D4FF;--focus-glow: rgba(0, 212, 255, .4);--accent: #00D4FF}*{margin:0;padding:0;box-sizing:border-box}html,body{width:600px;height:600px;overflow:hidden;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.app-root{width:600px;height:600px;padding:8px;display:flex;flex-direction:column}.header{padding:16px 16px 8px;flex:0 0 auto}.header h1{font-size:28px;font-weight:700;letter-spacing:-.01em}.header p{margin-top:4px;font-size:14px;color:var(--text-muted)}.header-row{display:flex;align-items:center;gap:12px}.badge{font-size:13px;font-weight:600;background:var(--surface);color:var(--text-muted);padding:2px 10px;border-radius:12px}.content{flex:1 1 auto;overflow-y:auto;padding:8px 8px 0;display:flex;flex-direction:column;gap:10px;position:relative}.content:after{content:"";position:sticky;bottom:0;left:0;right:0;height:32px;background:linear-gradient(to top,var(--bg) 0%,transparent 100%);pointer-events:none;flex-shrink:0}.focusable{transition:transform 475ms cubic-bezier(.6,0,.4,1),border-color .3s cubic-bezier(.4,.04,.5,1),box-shadow .3s cubic-bezier(.4,.04,.5,1),background .3s cubic-bezier(.4,.04,.5,1),opacity .3s cubic-bezier(.4,.04,.5,1)}.focusable:focus{outline:none;border-color:var(--focus);box-shadow:0 0 20px var(--focus-glow)}.focusable:active{transform:scale(.96);transition-duration:.1s;transition-timing-function:cubic-bezier(.68,0,.29,1)}.toolbar{display:flex;gap:8px;padding:4px 8px 8px;flex-shrink:0}.toolbar-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--accent);font-size:14px;font-weight:600;background:var(--surface);border:2px solid transparent;border-radius:12px;padding:10px 18px;cursor:pointer}.toolbar-btn:focus{background:var(--surface-hover);transform:scale(calc(1 - 8 / 88))}.note-card{display:block;text-decoration:none;color:inherit;background:var(--surface);border:2px solid transparent;border-radius:16px;padding:16px 20px}.note-card:focus{background:var(--surface-hover);transform:scale(calc(1 - 8 / 88))}.note-card .note-card-preview,.note-card .note-card-date,.note-card .note-card-tag{opacity:.8;transition:opacity .3s cubic-bezier(.4,.04,.5,1)}.note-card:focus .note-card-preview,.note-card:focus .note-card-date,.note-card:focus .note-card-tag{opacity:1}.note-card-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}.note-card-title{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;margin-right:12px}.note-card-tag{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);flex-shrink:0}.note-card-preview{font-size:13px;color:var(--text-muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.note-card-date{font-size:11px;color:var(--text-muted);margin-top:8px}.note-body{font-size:16px;line-height:1.7;color:var(--text-secondary);padding:8px 8px 16px}.nav-link{display:block;text-decoration:none;color:inherit;background:var(--surface);border:2px solid transparent;border-radius:16px;padding:20px;min-height:88px}.nav-link:focus{background:var(--surface-hover);transform:scale(calc(1 - 8 / 88))}.nav-link .link-title{font-size:20px;font-weight:600;margin-bottom:4px;opacity:.8;transition:opacity .3s cubic-bezier(.4,.04,.5,1)}.nav-link .link-desc{font-size:13px;color:var(--text-muted);line-height:1.4;opacity:.8;transition:opacity .3s cubic-bezier(.4,.04,.5,1)}.nav-link:focus .link-title,.nav-link:focus .link-desc{opacity:1}.field-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);padding:0 4px}.field-input,.field-textarea{background:var(--surface);color:var(--text);border:2px solid transparent;border-radius:12px;padding:14px 16px;font-size:16px;font-family:inherit;resize:none}.field-input::placeholder,.field-textarea::placeholder{color:var(--text-muted);opacity:.6}.field-input:focus,.field-textarea:focus{background:var(--surface-hover);transform:none}.tag-picker{background:var(--surface);color:var(--accent);border:2px solid transparent;border-radius:12px;padding:14px 16px;font-size:16px;font-weight:600;font-family:inherit;cursor:pointer;text-align:left}.tag-picker:focus{background:var(--surface-hover);transform:scale(calc(1 - 8 / 88))}.save-btn{background:var(--accent);color:var(--bg);border:2px solid transparent;border-radius:16px;padding:18px 20px;font-size:18px;font-weight:700;font-family:inherit;cursor:pointer;min-height:88px;margin-top:4px}.save-btn:focus{background:#33dfff;border-color:var(--text);box-shadow:0 0 24px var(--focus-glow);transform:scale(calc(1 - 8 / 88))}.tag-row{display:flex;justify-content:space-between;align-items:center;background:var(--surface);color:inherit;border:2px solid transparent;border-radius:16px;padding:20px;min-height:88px;font-size:18px;font-weight:600;font-family:inherit;cursor:pointer;text-align:left}.tag-row:focus{background:var(--surface-hover);transform:scale(calc(1 - 8 / 88))}.tag-row .tag-row-name{opacity:.8;transition:opacity .3s cubic-bezier(.4,.04,.5,1)}.tag-row:focus .tag-row-name{opacity:1}.tag-row-count{font-size:14px;font-weight:400;color:var(--text-muted)}.tag-active{border-color:var(--accent)}.tag-active .tag-row-name{color:var(--accent)}.empty-state{display:flex;align-items:center;justify-content:center;height:200px;font-size:16px;color:var(--text-muted)}.loading{display:flex;align-items:center;justify-content:center;height:100%;font-size:20px;color:var(--text-muted)}