@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&display=swap";:root{--bg:#eaf4ff;--card:#ffffff;--accent:#072f6b;--accent-2:#0b60d1;--muted:#4b5b6a;--glass: rgba(255,255,255,.6)}.dark-mode{--bg:#0b1220;--card:#071127;--accent:#7fb3ff;--accent-2:#4aa3ff;--muted:#95a6bf;--glass: rgba(255,255,255,.04);color:#dfeeff}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:Poppins,Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;color:#071130;background:linear-gradient(180deg,#eaf4ff,#eef8ff 60%)}.page{position:relative;min-height:100vh;overflow:hidden}.container{max-width:1100px;margin:0 auto;padding:2rem}.site-header{background:transparent;padding:1.25rem 0}.site-header .container{display:flex;align-items:center;justify-content:space-between}.logo{margin:0;font-weight:700;font-size:1.25rem;color:var(--accent-2);letter-spacing:.6px}.nav a{margin-left:1rem;color:var(--muted);text-decoration:none}.btn{display:inline-block;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;padding:.7rem 1.1rem;border-radius:12px;text-decoration:none;box-shadow:0 10px 34px #0b306324;transition:transform .15s ease,box-shadow .15s ease}.btn:hover{transform:translateY(-3px);box-shadow:0 20px 50px #0b306333}.btn-outline{border:1px solid rgba(0,0,0,.06);padding:.45rem .9rem;border-radius:10px;color:var(--muted);background:transparent}.btn-ghost{background:transparent;color:var(--muted);border:1px solid rgba(0,0,0,.05);padding:.5rem .8rem;border-radius:8px;margin-left:.5rem}.hero{padding:4rem 0}.hero .container{display:flex;align-items:flex-start;gap:1rem}.hero-content{flex:1 1 640px;min-width:0}.hero h2{font-size:2.5rem;color:#04102a;margin:0 0 .5rem}.hero-title{margin:0 0 .5rem;font-size:clamp(2.1rem,4vw,2.55rem);line-height:1.03;font-family:DM Sans,Segoe UI,Roboto,Arial,sans-serif;font-weight:800;letter-spacing:-.04em;color:#04102a;display:flex;flex-direction:column;gap:.05em}.hero-title>span{display:block}.hero-title-accent{color:var(--accent-2)}.lead{color:var(--muted);max-width:48ch;font-size:1.05rem}.hero-art .card{background:var(--card);padding:1rem;border-radius:14px;box-shadow:0 10px 30px #0b11200f}.card pre{margin:0;white-space:pre-wrap}.features{padding:3rem 0}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}.site-footer{padding:2rem 0;color:var(--muted)}@media (max-width:800px){.hero-inner{grid-template-columns:1fr}.site-header .container{flex-direction:column;align-items:flex-start}.nav{margin-top:.5rem}}.page:before,.page:after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.95;transform:translateZ(0);z-index:0}.page:before{width:520px;height:520px;left:-140px;top:-80px;background:radial-gradient(circle at 30% 30%,#0b30631f,#0b4f961f)}.page:after{width:420px;height:420px;right:-120px;bottom:-80px;background:radial-gradient(circle at 70% 70%,#0b30631a,#0b4f961a);animation:float 12s ease-in-out infinite}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#0206170a,#0206170f);display:flex;align-items:center;justify-content:center;z-index:60}.modal{background:linear-gradient(180deg,#fffffffa,#ffffffe6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);max-width:720px;width:94%;border-radius:16px;padding:1.25rem;box-shadow:0 20px 50px #0b112033;z-index:80}.modal .modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.modal .modal-body{display:flex;align-items:center;flex-direction:column;gap:1rem}.modal .modal-body .side{display:none}.modal textarea{width:100%;height:120px;padding:.5rem;border-radius:8px;border:1px solid #e6e9ef}.shared-text{background:#fef6f6;padding:.75rem;border-radius:8px;margin-top:1rem;white-space:pre-wrap}.modal .close-btn{background:transparent;border:none;font-size:1rem;color:var(--muted);cursor:pointer}.muted{color:var(--muted);font-size:.95rem}.hero-illustration{flex:1;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1;margin-left:-6px}.hero-illustration svg{max-width:340px;width:100%;height:auto}.device-illustration{transform:translate(-6px)}.hero-illustration .bubble{transform-origin:center;will-change:transform,opacity}.hero-illustration .bubble1{animation:bubble1 3.6s ease-in-out infinite}.hero-illustration .bubble2{animation:bubble2 3s ease-in-out infinite}.hero-illustration .bubble3{animation:bubble3 2.6s ease-in-out infinite}@keyframes bubble1{0%{transform:translate(0) rotate(-6deg) scale(1);opacity:1}50%{transform:translate(18px,-10px) rotate(-2deg) scale(1.02);opacity:.95}to{transform:translate(0) rotate(-6deg) scale(1);opacity:1}}@keyframes bubble2{0%{transform:translate(0) scale(1);opacity:1}50%{transform:translate(10px,-6px) scale(1.05);opacity:.9}to{transform:translate(0) scale(1);opacity:1}}@keyframes bubble3{0%{transform:translate(0) rotate(8deg) scale(1);opacity:1}50%{transform:translate(14px,-8px) rotate(4deg) scale(1.03);opacity:.92}to{transform:translate(0) rotate(8deg) scale(1);opacity:1}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-20px)}to{transform:translateY(0)}}.env-banner{background:linear-gradient(90deg,#0b3063f2,#0b4f96f2);color:#fff;padding:.5rem 0;z-index:120}.env-banner .muted{color:#ffffffe6;margin:0}.env-banner code{background:#ffffff0f;padding:.12rem .3rem;border-radius:4px}.env-banner .btn-outline{background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff}.env-banner .btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff}@media (max-width:900px){.container{padding:1.25rem}.hero h2{font-size:2rem}.hero-title{font-size:2.15rem}.lead{font-size:1rem}.hero .container{gap:.5rem}.hero-illustration{max-width:260px}}@media (max-width:640px){.hero{padding:2.25rem 0}.hero .container{flex-direction:column;align-items:center;text-align:center;gap:1rem;position:relative;z-index:2}.hero-illustration{display:none}.logo{font-size:1.05rem}.hero h2{font-size:1.6rem}.hero-title{font-size:1.75rem}.lead{max-width:100%;font-size:.98rem}.btn{display:block;width:100%;padding:.85rem 1rem;border-radius:10px}.shared-text{font-size:.95rem}}.start-sharing{position:relative;transition:transform .18s ease,box-shadow .18s ease;border-radius:9999px}.start-sharing:hover{transform:translateY(-4px);box-shadow:0 14px 36px #0b306329}.modal.shrink-to-bottom{animation:modal-shrink .42s cubic-bezier(.2,.9,.3,1) forwards;transform-origin:center bottom}@keyframes modal-shrink{0%{transform:scale(1) translateY(0);opacity:1}60%{transform:scale(.9) translateY(8%);opacity:.95}to{transform:scale(.45) translateY(56%);opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.letter-popup{position:fixed;left:50%;top:36%;transform:translate(-50%);z-index:250;pointer-events:none}.letter-popup .envelope{background:linear-gradient(180deg,#fff,#f6fbff);border-radius:10px;padding:16px 20px;box-shadow:0 18px 40px #0b11201f;display:inline-block}.letter-popup{animation:letter-pop .64s cubic-bezier(.2,.9,.3,1) forwards}@keyframes letter-pop{0%{transform:translate(-50%) translateY(8%) scale(.9);opacity:0}40%{transform:translate(-50%) translateY(-6%) scale(1.06);opacity:1}to{transform:translate(-50%) translateY(-16%) scale(1);opacity:1}}@media (max-width:420px){body{background-position:center top}.container{padding:1rem}.logo{font-size:1rem}.hero h2{font-size:1.4rem}.hero-title{font-size:1.55rem}.lead{font-size:.95rem}.btn{font-size:.98rem;padding:.75rem;border-radius:10px}.modal{width:92%;max-width:420px;height:auto;max-height:66vh;border-radius:12px;padding:.85rem;align-self:center;overflow:auto}.modal .modal-body{padding:.5rem}.modal .modal-header{padding:0 .25rem}}@media (max-width:640px){.hero-illustration{display:block;order:-1;pointer-events:none;margin:0 auto;max-width:260px}.hero-illustration svg{max-width:340px}.hero-content{width:100%;max-width:720px;padding:0 1rem}.start-sharing{position:relative;z-index:3}}.chat-page{height:100vh;display:flex;flex-direction:column}.chat-header{position:sticky;top:0;z-index:30}.chat-messages{flex:1;overflow-y:auto;padding-left:1rem;padding-right:1rem}.chat-input{position:sticky;bottom:0;z-index:20}.chat-page .chat-input{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;box-shadow:0 -8px 24px #0b11200f}.content-spacer{padding-bottom:110px}img,svg{max-width:100%;height:auto}.modal img{max-width:100%;height:auto;display:block}.chat-messages [style]{overflow-wrap:break-word;word-wrap:break-word}@media (max-width:480px){.chat-messages,.chat-header{padding:.75rem}.chat-input{padding:.65rem}}.notes-container{display:block}.notes-card{background:linear-gradient(180deg,#fffdf6,#fff9ee);border:1px solid rgba(11,48,99,.06);padding:.75rem;border-radius:12px;box-shadow:0 6px 18px #0b11200f;position:relative;overflow:visible}.notes-card.is-expanded{animation:balloon-expand .7s cubic-bezier(.2,.9,.3,1) both;transform-origin:center top;box-shadow:0 22px 48px #0b11201f}.notes-heading{font-weight:600;color:var(--accent);margin-bottom:.5rem}.notes-list{display:flex;flex-direction:column;gap:.5rem;max-height:40vh;overflow:auto;padding-right:.25rem}.notes-empty{color:var(--muted);padding:.5rem}.note-row{display:flex;align-items:center;justify-content:space-between;gap:8px;background:transparent;padding:.35rem 0;border-radius:8px}.note-text{background:transparent;padding:6px 8px;border-radius:6px;flex:1;color:#072f6b;margin-right:12px}.note-copy{color:var(--accent-2);text-decoration:none;font-size:.95rem;flex:0 0 auto;text-align:center;align-self:center;padding:4px 6px}.note-copy:hover{text-decoration:underline}.note-anim{position:absolute;left:50%;transform:translate(-50%);top:-48px;pointer-events:none;z-index:40}@keyframes balloon-expand{0%{transform:scale(1);opacity:1}40%{transform:scale(1.06);opacity:1}70%{transform:scale(1.02);opacity:1}to{transform:scale(1);opacity:1}}@media (max-width:640px){.notes-card{max-width:92vw}.note-anim{top:-56px}}.inline-anim{position:absolute;right:104px;top:50%;transform:translateY(-50%);width:36px;height:36px;pointer-events:none;z-index:65}@media (max-width:480px){.inline-anim{right:92px}}.note-row.note-optimistic{opacity:.72}.note-row.note-optimistic .note-text{filter:grayscale(6%)}.note-spinner{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;margin-right:8px}.note-spinner span{width:8px;height:8px;border-radius:50%;background:var(--accent-2);display:block;box-shadow:0 0 #0b306333;animation:note-pulse .9s infinite ease-in-out}@keyframes note-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.6}to{transform:scale(1);opacity:1}}