:root{--bg-1:#0f0c29;--bg-2:#302b63;--bg-3:#24243e;--accent-pink:#ff2e9a;--accent-cyan:#00e5ff;--accent-violet:#8a2be2;--accent-yellow:#ffd93d;--glass-bg:#ffffff14;--glass-border:#ffffff2e;--glass-shadow:0 8px 32px #00000059;--text:#ffffffeb;--text-dim:#fff9;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0;padding:0}body{color:var(--text);background:linear-gradient(135deg, var(--bg-1), var(--bg-2), var(--bg-3));background-attachment:fixed;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Hiragino Sans,Hiragino Kaku Gothic ProN,Meiryo,sans-serif;overflow-x:hidden}button{cursor:pointer;font-family:inherit}input,textarea{font-family:inherit}.app{isolation:isolate;min-height:100vh;position:relative;overflow-x:hidden}.container{z-index:1;max-width:960px;margin:0 auto;padding:48px 20px 96px;position:relative}.bg-blobs{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.blob{filter:blur(90px);opacity:.55;mix-blend-mode:screen;border-radius:50%;width:520px;height:520px;animation:18s ease-in-out infinite float;position:absolute}.blob-1{background:var(--accent-pink);top:-120px;left:-120px}.blob-2{background:var(--accent-cyan);animation-delay:-6s;top:30%;right:-160px}.blob-3{background:var(--accent-violet);animation-delay:-12s;bottom:-160px;left:20%}.blob-4{background:var(--accent-yellow);opacity:.25;width:340px;height:340px;animation-delay:-3s;top:50%;left:40%}@keyframes float{0%,to{transform:translate(0)scale(1)}33%{transform:translate(60px,-40px)scale(1.1)}66%{transform:translate(-40px,50px)scale(.95)}}.glass{background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(20px)saturate(160%);box-shadow:var(--glass-shadow);border-radius:20px}.header{justify-content:space-between;align-items:center;margin-bottom:28px;display:flex}.app-title{letter-spacing:.08em;align-items:center;gap:12px;margin:0;font-size:clamp(36px,6vw,56px);font-weight:900;display:flex}.sparkle{filter:drop-shadow(0 0 12px var(--accent-yellow));animation:6s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.gradient-text{background:linear-gradient(90deg, var(--accent-pink), var(--accent-cyan), var(--accent-violet));color:#0000;background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:5s linear infinite shimmer}@keyframes shimmer{to{background-position:-200% 0}}.count-pill{background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--text-dim);border-radius:999px;align-items:center;gap:8px;margin:0;padding:8px 16px;font-size:14px;display:inline-flex}.count-dot{background:var(--accent-cyan);width:8px;height:8px;box-shadow:0 0 10px var(--accent-cyan);border-radius:50%;animation:1.6s ease-in-out infinite pulse-dot}@keyframes pulse-dot{50%{opacity:.4;transform:scale(.85)}}.note-form{flex-direction:column;gap:16px;margin-bottom:40px;padding:24px;transition:transform .3s,box-shadow .3s;display:flex}.note-form.pulse{animation:.5s form-pulse}@keyframes form-pulse{0%{box-shadow:var(--glass-shadow);transform:scale(1)}50%{transform:scale(1.01);box-shadow:0 0 40px #ff2e9a73}to{box-shadow:var(--glass-shadow);transform:scale(1)}}.field{position:relative}.input{width:100%;color:var(--text);caret-color:var(--accent-pink);background:#ffffff0a;border:1px solid #ffffff26;border-radius:14px;outline:none;padding:18px 16px 10px;font-size:16px;transition:border-color .25s,background .25s,box-shadow .25s}.textarea{resize:vertical;min-height:84px}.floating-label{color:var(--text-dim);pointer-events:none;background:0 0;padding:0 4px;font-size:14px;transition:transform .2s,color .2s,font-size .2s;position:absolute;top:16px;left:16px}.input:focus+.floating-label,.input:not(:placeholder-shown)+.floating-label{color:var(--accent-cyan);font-size:11px;transform:translateY(-18px)}.input:focus{border-color:var(--accent-cyan);background:#ffffff14;box-shadow:0 0 0 3px #00e5ff2e,0 0 24px #00e5ff40}.field-glow{pointer-events:none;background:linear-gradient(90deg, var(--accent-pink), var(--accent-cyan));opacity:0;z-index:-1;filter:blur(14px);border-radius:16px;transition:opacity .3s;position:absolute;inset:-2px}.field:focus-within .field-glow{opacity:.55}.add-btn{background:0 0;border:none;border-radius:14px;align-self:flex-end;padding:0;transition:transform .15s,filter .2s;position:relative;overflow:hidden}.add-btn-inner{color:#fff;letter-spacing:.08em;background:linear-gradient(135deg, var(--accent-pink), var(--accent-violet), var(--accent-cyan));background-size:200% 200%;border-radius:14px;padding:14px 28px;font-size:15px;font-weight:700;transition:background-position .4s;display:inline-block;box-shadow:0 8px 24px #ff2e9a59}.add-btn:hover:not(:disabled) .add-btn-inner{background-position:100% 100%}.add-btn:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-2px)}.add-btn:active:not(:disabled){transform:scale(.97)}.add-btn:disabled{opacity:.4;cursor:not-allowed}.note-list{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;display:grid}.empty{text-align:center;color:var(--text-dim);padding:60px 20px}.empty-emoji{margin-bottom:12px;font-size:48px;animation:3s ease-in-out infinite floaty;display:block}@keyframes floaty{50%{transform:translateY(-10px)}}.note-card{padding:20px 20px 16px;transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden}.note-card.entering{animation:.45s cubic-bezier(.22,1.5,.36,1) pop-in}.note-card.leaving{pointer-events:none;animation:.4s cubic-bezier(.4,0,1,1) forwards pop-out}.note-card.delete-hover{border:2px solid var(--accent-pink);box-shadow:var(--glass-shadow), 0 0 20px #ff2e9a66}@keyframes pop-in{0%{opacity:0;filter:blur(6px);transform:scale(.8)translateY(16px)}to{opacity:1;filter:blur();transform:scale(1)translateY(0)}}@keyframes pop-out{0%{opacity:1;filter:blur();transform:scale(1)rotate(0)translateY(0)}to{opacity:0;filter:blur(8px);transform:scale(0)rotate(8deg)translateY(-20px)}}.note-card:hover{box-shadow:0 14px 40px #ff2e9a40, var(--glass-shadow);transform:translateY(-6px)}.card-accent{background:linear-gradient(90deg, var(--accent-pink), var(--accent-cyan));height:3px;position:absolute;top:0;left:0;right:0}.card-head{justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px;display:flex}.card-title{word-break:break-word;margin:0;font-size:17px;font-weight:700;line-height:1.4}.card-body{color:var(--text-dim);white-space:pre-wrap;word-break:break-word;margin:0 0 14px;font-size:14px;line-height:1.6}.card-date{color:var(--text-dim);letter-spacing:.05em;font-size:11px}.delete-btn{width:28px;height:28px;color:var(--text-dim);background:#ffffff0d;border:1px solid #fff3;border-radius:50%;flex:none;place-items:center;font-size:16px;transition:all .2s;display:grid;transform:translateY(-2px)}.delete-btn:hover{background:var(--accent-pink);color:#fff;box-shadow:0 0 20px var(--accent-pink), inset 0 0 10px #ff2e9a99, 0 0 30px #ff2e9a66;border-color:#0000;animation:.6s ease-in-out infinite button-pulse;transform:scale(1.15)}@keyframes button-pulse{0%,to{box-shadow:0 0 20px var(--accent-pink), inset 0 0 10px #ff2e9a99, 0 0 30px #ff2e9a66}50%{box-shadow:0 0 30px var(--accent-pink), inset 0 0 15px #ff2e9acc, 0 0 40px #ff2e9a99}}@media (width<=480px){.container{padding:32px 16px 80px}.note-form{padding:18px}.note-list{grid-template-columns:1fr}}