:root{font-family:Avenir Next,Segoe UI,sans-serif;color:#f2f5f3;background:#101517;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--muted: #909b99;--mint: #a6e2c9}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(ellipse at 49% -25%,#253331 0,#101517 54rem)}button,input,textarea{font:inherit}button{color:inherit}.app-shell{min-height:100vh}.topbar{height:78px;border-bottom:1px solid rgba(226,238,232,.08);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(28px,6vw,88px)}.brand{display:flex;align-items:center;gap:12px;color:#eff6f1;text-decoration:none;font:700 17px Avenir Next,Segoe UI,sans-serif;letter-spacing:-.4px}.brand-mark{width:28px;height:28px;display:grid;place-items:center;border:1px solid #79bda0;border-radius:9px;transform:rotate(-8deg)}.brand-mark span{width:10px;height:10px;display:block;border-radius:3px;background:var(--mint)}.connection{display:flex;align-items:center;gap:9px;color:#b4c0bb;font-size:14px}.connection-dot,.live-pulse{position:relative;width:8px;height:8px;border-radius:50%;background:#84d3a6;box-shadow:0 0 12px #84d3a677}.content{width:min(100% - 56px,1080px);margin:0 auto;padding:64px 0 36px}.heading-row{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:54px}.eyebrow{margin:0 0 12px;color:var(--mint);font-size:12px;font-weight:700;letter-spacing:1.7px}h1,h2,p{margin-top:0}h1{margin-bottom:9px;font:700 clamp(38px,4vw,48px)/1.08 "Avenir Next","Segoe UI",sans-serif;letter-spacing:-1.9px}.subtitle{margin-bottom:0;color:#a6b0ac;font-size:17px}.simulate-button{display:inline-flex;min-height:49px;align-items:center;justify-content:center;gap:9px;padding:0 19px;border:1px solid #b5e6cf;border-radius:9px;background:var(--mint);color:#14211b;font-size:15px;font-weight:700;cursor:pointer;transition:transform .16s,background .16s;white-space:nowrap}.simulate-button:hover{background:#b9efd6;transform:translateY(-1px)}.simulate-button:active{transform:translateY(0)}.simulate-button span{font-size:21px;font-weight:400;line-height:1}.list-heading{display:flex;align-items:center;gap:12px;margin-bottom:17px}.list-heading h2{margin:0;color:#d9e1dd;font:600 16px Avenir Next,Segoe UI,sans-serif}.note-count{border:1px solid #303b39;border-radius:20px;padding:4px 9px;color:#aeb9b4;font-size:12px}.notes-list{display:grid;gap:13px}.note-card{display:flex;justify-content:space-between;gap:24px;padding:23px 22px 18px 25px;border:1px solid #303a38;border-radius:12px;background:linear-gradient(115deg,#222b29f7,#1a2221f7);box-shadow:0 6px 20px #00000014;animation:card-enter .35s cubic-bezier(.2,.8,.2,1) both;transition:border-color .2s,opacity .24s,transform .24s,max-height .24s,padding .24s,margin .24s}.note-card:hover{border-color:#53635e}.note-card--leaving{opacity:0;transform:translate(18px) scale(.985);max-height:0;padding-top:0;padding-bottom:0;margin-top:-13px;overflow:hidden}.card-main{min-width:0;flex:1}.note-title,.note-body{display:block;width:100%;border:0;outline:none;color:#edf2ef;background:transparent;resize:none}.note-title{padding:0;margin:0 0 8px;font:600 20px/1.35 Avenir Next,Segoe UI,sans-serif;letter-spacing:-.35px}.note-title:focus,.note-body:focus{border-radius:3px;box-shadow:0 2px #a6e2c9}.note-body{min-height:27px;color:#b8c2bd;font-size:16px;line-height:1.55}.note-title::placeholder,.note-body::placeholder{color:#77827d}.note-meta{display:flex;align-items:center;gap:12px;margin-top:17px;color:#8e9a95;font-size:13px}.note-id{color:#a9cbbb;font-size:12px;font-weight:600;letter-spacing:.35px}.note-id:after{content:"";display:inline-block;height:12px;border-left:1px solid #49534f;margin-left:12px;vertical-align:-2px}.delete-button{width:42px;height:42px;flex:0 0 42px;margin-top:1px;border:1px solid transparent;border-radius:9px;background:transparent;color:#94a09b;cursor:pointer;transition:color .15s,background .15s,border .15s}.delete-button:hover{color:#ffc2b6;border-color:#634a45;background:#452f2c}.delete-button span{font-size:28px;font-weight:300;line-height:1}.empty-state{display:grid;justify-items:center;text-align:center;padding:72px 24px;border:1px dashed #394542;border-radius:12px;background:#1b2322aa}.empty-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:17px;border-radius:15px;background:#293b34;color:var(--mint);font-size:24px}.empty-state h2{margin-bottom:7px;font:600 20px Avenir Next,Segoe UI,sans-serif}.empty-state p{margin-bottom:20px;color:#a6b0ac;font-size:15px}.list-footer{display:flex;align-items:center;justify-content:center;gap:9px;padding:29px 0 0;color:#77837e;font-size:13px}.live-pulse{width:6px;height:6px;animation:pulse 1.8s ease-out infinite}@keyframes card-enter{0%{opacity:0;transform:translateY(13px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulse{0%,to{box-shadow:0 0 #84d3a600}50%{box-shadow:0 0 0 5px #84d3a622}}@media(max-width:700px){.topbar{height:66px;padding-inline:22px}.content{width:min(100% - 36px,560px);padding-top:42px}.heading-row{align-items:flex-start;flex-direction:column;gap:23px;margin-bottom:38px}.subtitle{max-width:410px;font-size:16px}.note-card{padding:18px 14px 15px 18px;gap:10px}.note-title{font-size:18px}.note-body{font-size:15px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}