/* A note to Daniel: glass where you touch, and a small ground of warm light that settles while the note travels. */
.note{padding:26px 26px 22px;text-align:left;max-width:640px;margin:0 auto}
.note .n-q{font:500 14px var(--sans);color:var(--ink2);margin:0 0 12px;display:block}
.n-kinds{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.n-k{font:500 14px var(--sans);color:var(--ink);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:9px 15px;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.n-k:hover{background:rgba(255,255,255,.09)}
.n-k[aria-pressed="true"]{background:var(--ink);color:#0b0d10;border-color:var(--ink)}
.note textarea,.note input{width:100%;font:16px/1.5 var(--sans);color:var(--ink);background:rgba(7,9,13,.35);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:13px 14px;outline:none;transition:border-color .3s,background .3s}
.note textarea{resize:vertical;min-height:110px}
.note textarea:focus,.note input:focus{border-color:rgba(243,201,154,.55);background:rgba(7,9,13,.5)}
.note ::placeholder{color:var(--ink3)}
.n-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.n-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.n-foot{display:flex;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap}
.n-hint{margin:0;font-size:14px;color:var(--copper)}
.n-or{margin:16px 0 0;font-size:13.5px;color:var(--ink3)}.n-or a{color:var(--ink2)}
/* sending and sent */
.n-done{display:none;text-align:center;padding:16px 6px 10px}
.note.sending .n-write,.note.sent .n-write{display:none}.note.sending .n-done,.note.sent .n-done{display:block}
.n-h{font:600 clamp(24px,2.4vw,32px)/1.15 var(--sans);letter-spacing:-.025em;margin:18px 0 8px}
.n-p{color:var(--ink2);margin:0 auto;max-width:28em;font-size:16.5px}.n-p a{color:var(--copper)}
/* the ground: three rings of warm light; while the note travels they ripple, once it arrives they settle and glow */
.n-ground{position:relative;width:120px;height:120px;margin:0 auto}
.n-ground i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(243,201,154,.5);opacity:0}
.n-ground b{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:radial-gradient(circle,#fff,var(--warm) 50%,rgba(243,201,154,0) 75%);box-shadow:0 0 22px 6px rgba(243,201,154,.4)}
.note.sending .n-ground i{animation:ripple 2.2s cubic-bezier(.2,.7,.2,1) infinite}
.note.sending .n-ground i:nth-child(2){animation-delay:.7s}.note.sending .n-ground i:nth-child(3){animation-delay:1.4s}
@keyframes ripple{0%{transform:scale(.1);opacity:.9}100%{transform:scale(1);opacity:0}}
.note.sent .n-ground i{opacity:1;transition:transform 1.4s var(--ease),opacity 1s}
.note.sent .n-ground i:nth-child(1){transform:scale(.38)}.note.sent .n-ground i:nth-child(2){transform:scale(.64);opacity:.6}.note.sent .n-ground i:nth-child(3){transform:scale(.9);opacity:.3}
.note.sent .n-ground b{animation:glow 3s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 34px 10px rgba(243,201,154,.55)}}
.note.fallback .n-ground i{border-color:rgba(255,255,255,.3)}
/* the sheet, from anywhere on the site */
.n-sheet{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;background:rgba(5,7,10,.55);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);opacity:0;transition:opacity .45s var(--ease)}
.n-sheet.open{opacity:1}
.n-card{position:relative;width:min(680px,100%);max-height:calc(100dvh - 48px);overflow:auto;padding:34px 30px 30px;border-radius:30px;
 background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),rgba(10,13,18,.82);box-shadow:0 60px 140px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.14);
 transform:translateY(18px) scale(.985);transition:transform .55s var(--ease)}
.n-sheet.open .n-card{transform:none}
.n-card .note{padding:22px 0 0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;max-width:none}
.n-card .note::before,.n-card .note::after{display:none}
.n-title{font-size:clamp(28px,3vw,40px);margin-top:12px}
.n-x{position:absolute;right:18px;top:18px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.06);cursor:pointer}
.n-x i{position:absolute;left:12px;right:12px;top:19.5px;height:1.5px;background:var(--ink);border-radius:2px;transform:rotate(45deg)}.n-x i+i{transform:rotate(-45deg)}
@media (max-width:700px){ .n-sheet{align-items:end;padding:0}.n-card{border-radius:26px 26px 0 0;padding:28px 20px calc(24px + env(safe-area-inset-bottom));max-height:92dvh}.n-row{grid-template-columns:1fr} .note{padding:20px 16px 18px} }
@media (prefers-reduced-motion:reduce){ .note.sending .n-ground i{animation:none;opacity:.6} .note.sent .n-ground b{animation:none} }
.n-wrap,.n-wrap *{text-shadow:none}
.n-sheet[hidden]{display:none}
.plate .in-copy .n-wrap p.n-q{font-size:14px;margin:0 0 12px;color:var(--ink2);max-width:none}.plate .in-copy .n-wrap p.n-or{font-size:13.5px;margin:16px 0 0;color:var(--ink3);max-width:none}.plate .in-copy .n-wrap .n-hint{font-size:14px;margin:0}.plate .in-copy .n-wrap .n-p{font-size:16.5px;margin:0 auto}