:root{color:#1e293b;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f8fafc;font-family:Inter,Segoe UI,Roboto,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(circle at top,#a78bfa29,#0000 25%),linear-gradient(135deg,#f8fafc 0%,#eef2ff 48%,#fdf2f8 100%);min-height:100vh;margin:0}button,input,textarea{font:inherit}#root{justify-content:center;align-items:center;min-height:100vh;display:flex}h1,p{margin:0}.app-shell{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffc2;border:1px solid #94a3b838;border-radius:28px;width:min(760px,100% - 32px);margin:48px auto;padding:32px 28px 20px;box-shadow:0 30px 60px #0f172a1f}.app-header{text-align:left;margin-bottom:28px}.app-kicker{letter-spacing:.18em;text-transform:uppercase;color:#7c3aed;margin:0 0 10px;font-size:.78rem;font-weight:700}.app-header h1{letter-spacing:-.06em;color:#0f172a;margin:0;font-size:clamp(2.2rem,4vw,3.5rem);line-height:1.05}.note-form{flex-direction:column;gap:16px;padding:20px 0 18px;display:flex}.form-input,.form-textarea{color:#0f172a;width:100%;font:inherit;background:#ffffffb8;border:1px solid #94a3b880;border-radius:16px;padding:14px 16px;transition:border-color .2s,box-shadow .2s,transform .2s}.form-input:focus,.form-textarea:focus{border-color:#7c3aedcc;outline:none;box-shadow:0 0 0 4px #7c3aed1f}.form-input{min-height:54px}.form-textarea{resize:vertical;min-height:140px}.form-button{color:#fff;letter-spacing:.02em;cursor:pointer;background:linear-gradient(135deg,#8b5cf6 0%,#ec4899 100%);border:none;border-radius:999px;align-self:flex-start;padding:12px 22px;font-weight:700;transition:transform .2s,box-shadow .2s;box-shadow:0 16px 28px #7c3aed40}.form-button:hover{transform:translateY(-1px);box-shadow:0 18px 30px #7c3aed4d}.form-button:active{transform:translateY(0)}.notes-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;margin:8px 0 24px;display:grid}.note-card{overflow-wrap:anywhere;background:linear-gradient(145deg,#fff 0%,#faf7ff 100%);border:1px solid #94a3b847;border-radius:20px;min-width:0;min-height:160px;padding:22px 20px 50px;transition:transform .2s,box-shadow .2s;position:relative;box-shadow:0 12px 24px #0f172a12}.note-card:hover{transform:translateY(-3px);box-shadow:0 18px 30px #0f172a1f}.note-title{color:#1e1b4b;overflow-wrap:anywhere;margin:0 36px 10px 0;font-size:1.15rem;line-height:1.35}.note-content{color:#475569;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65}.note-delete{color:#be123c;cursor:pointer;background:#fff1f2;border:1px solid #e11d4833;border-radius:50%;place-items:center;width:34px;height:34px;font-size:1.35rem;line-height:1;transition:background-color .2s,color .2s,transform .2s;display:grid;position:absolute;bottom:14px;right:16px}.note-delete:hover{color:#fff;background:#e11d48;border-color:#0000;transform:scale(1.08)}.note-delete:focus-visible{outline-offset:3px;outline:3px solid #e11d4859}.app-footer{text-align:center;border-top:1px solid #94a3b847;margin-top:8px;padding-top:18px}.app-footer p{color:#475569;margin:0;font-size:.95rem}@media (width<=640px){.app-shell{border-radius:22px;margin:20px auto;padding:24px 18px 16px}.app-header{margin-bottom:20px}.form-button{width:100%}.notes-grid{grid-template-columns:1fr;gap:12px}.note-card{border-radius:18px;min-height:140px}}