.page{min-height:100vh;background:#eee;display:flex;justify-content:center}.container{width:min(920px,92vw);padding:28px 0 40px}.title{text-align:center;margin:0 0 16px;font-weight:700;color:#8a8a8a}.search{display:block;width:min(420px,90vw);margin:0 auto 18px;padding:12px 18px;border-radius:999px;border:1px solid #d9d9d9;outline:none;background:#fff;font-size:14px}.editor{background:#fff;border:1px solid #dadada;border-radius:3px;box-shadow:0 2px 6px #00000014;padding:18px}.textarea{width:100%;height:110px;border:none;outline:none;resize:none;font-size:14px}.editorFooter{margin-top:10px;display:flex;align-items:center;justify-content:space-between}.colors{display:flex;align-items:center;gap:10px}.dot{width:22px;height:22px;border-radius:999px;border:none;cursor:pointer;position:relative}.dot:focus{outline:2px solid rgba(0,0,0,.25);outline-offset:2px}.pink{background:#f06292}.purple{background:#ab47bc}.yellow{background:#ffd54f}.blue{background:#4fc3f7}.green{background:#b7d77a}.dot.selected{box-shadow:0 0 0 3px #00000038}.dot.selected:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;text-shadow:0 1px 2px rgba(0,0,0,.55)}.addBtn{background:#2ecc71;color:#fff;border:none;border-radius:999px;padding:10px 28px;font-weight:700;cursor:pointer;box-shadow:0 2px #0000002e}.addBtn:active{transform:translateY(1px)}.notesRow{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.noteCard{border-radius:2px;padding:10px 12px;box-shadow:0 2px #0000002e;font-weight:500;cursor:pointer;position:relative;min-height:72px;overflow:hidden;line-height:1.2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow-wrap:anywhere}.noteText{padding-right:22px}.noteCard.expanded{display:block;-webkit-line-clamp:initial;-webkit-box-orient:initial;overflow:visible;height:auto;min-height:unset}.deleteBtn{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:999px;border:none;background:#ffffff8c;cursor:pointer;display:grid;place-items:center;font-weight:800;font-size:14px;padding:0;line-height:1}.deleteBtn:hover{background:#fffc}.modalOverlay{position:fixed;inset:0;background:#00000059;display:flex;align-items:center;justify-content:center;padding:16px;z-index:999}.modal{width:min(560px,92vw);background:#fff;border-radius:14px;padding:14px 14px 16px;box-shadow:0 18px 60px #00000040}.modalHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.modalTitle{font-weight:700;color:#333}.modalClose{width:24px;height:24px;border:none;background:#eee;border-radius:999px;cursor:pointer;display:grid;place-items:center;font-weight:800;font-size:14px;padding:0;line-height:1}.modalClose:hover{background:#e2e2e2}.modalBody{white-space:pre-wrap;overflow-wrap:anywhere;max-height:60vh;overflow:auto;color:#333;line-height:1.35}.counter{margin-top:6px;font-size:12px;color:#8a8a8a;text-align:right}.modalColorBar{height:10px;width:100%;border-radius:10px;margin-bottom:10px}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}