:root{color-scheme:dark;--bg:#0b0b0d;--surface:#131316;--border:#27272a;--fg:#f4f4f5;--fg-subtle:#a1a1aa;--accent:#7dd3a8}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--fg);min-height:100vh}main{max-width:640px;margin:0 auto;padding:48px 20px 96px}h1{font-size:28px;margin:0 0 4px}.subtitle{color:var(--fg-subtle);margin:0 0 32px}form{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--border);border-radius:10px;background:var(--surface);margin-bottom:32px}input,textarea{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:8px 10px}textarea{resize:vertical;min-height:64px}button{font:600 14px system-ui,sans-serif;align-self:flex-start;padding:8px 16px;border-radius:6px;border:none;background:var(--accent);color:#0b0b0d;cursor:pointer}button:disabled{opacity:.6;cursor:default}.error{color:#f87171;font-size:14px;margin:0}ul.notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}ul.notes li{border:1px solid var(--border);border-radius:10px;background:var(--surface);padding:14px 16px}.note-meta{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--fg-subtle);margin-bottom:6px}.note-author{color:var(--accent);font-weight:600}.note-body{margin:0;white-space:pre-wrap;word-break:break-word}.empty{color:var(--fg-subtle);border:1px dashed var(--border);border-radius:10px;padding:24px;text-align:center}