/* Floating note after a mailto click on a computer. Fixed above the page, so it never shifts the layout. */
.contact-note{position:fixed;left:50%;bottom:1.5rem;z-index:60;width:max-content;max-width:calc(100% - 2rem);transform:translateX(-50%);pointer-events:none}
.contact-note-box{display:flex;align-items:center;gap:.5rem;padding:.5rem .5rem .5rem 1.1rem;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink-2);box-shadow:0 30px 60px -36px rgba(40,59,84,.45),0 2px 8px rgba(40,59,84,.06);font-family:var(--font-body);font-size:.9375rem;line-height:1.4;pointer-events:auto;animation:contactNoteIn .2s ease}
.contact-note-box p{margin:0 .5rem 0 0}
.contact-note-box b{font-weight:600;color:var(--ink);user-select:all}
.contact-note-copy{min-height:36px;padding:.4rem .85rem;border:0;border-radius:8px;background:var(--ink);color:#fff;font:500 .8125rem/1.2 var(--font-display);cursor:pointer;transition:background-color .18s ease}
.contact-note-copy:hover{background:var(--ink-2)}
.contact-note-close{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer;transition:background-color .18s ease,color .18s ease}
.contact-note-close:hover{background:var(--tile);color:var(--ink)}
.contact-note-close svg{width:18px;height:18px}
@keyframes contactNoteIn{from{opacity:0;transform:translateY(.5rem)}}
@media(prefers-reduced-motion:reduce){.contact-note-box{animation:none}}