/* Shared additions for the live Napkin apps: sign-in screen, save status, signed-in user. */
.boot{padding-top:72px;padding-bottom:96px;max-width:720px}
.boot h2{font:700 clamp(26px,4vw,34px)/1.15 "Archivo",Arial,sans-serif;letter-spacing:-.01em}
.boot p{margin:14px 0 22px;color:#4A4D4F;font-size:16.5px;line-height:1.55}
.boot .btn{margin:0 10px 10px 0}
.sync{display:inline-flex;align-items:center;gap:7px;font:500 12px/1 "IBM Plex Mono",Consolas,monospace;color:#4A4D4F;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.sync::before{content:"";width:8px;height:8px;flex:none;background:#DBDBD8;border:1px solid #6E6E6A}
.sync.ok::before{background:#FFFFFF;border-color:#141414}
.sync.busy::before{background:#FFD337;border-color:#141414}
.sync.bad{color:#B3261E}
.sync.bad::before{background:#B3261E;border-color:#B3261E}
.me{font:500 13px/1 "Archivo",Arial,sans-serif;color:#4A4D4F;white-space:nowrap}
.textbtn{background:none;border:0;padding:0;margin-left:6px;font:500 13px/1 "Archivo",Arial,sans-serif;color:#141414;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.site-head .nav{flex-wrap:wrap;row-gap:10px;justify-content:flex-end}
@media (max-width:720px){
  .site-head .wrap{flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
  .site-head .nav{justify-content:flex-start;gap:14px 18px}
  .sync{max-width:100%}
}