html { background: #E9ECF1; }
body { display: block; min-height: 100vh; padding: 64px 16px 48px; width: max-content; min-width: 100%; background: #E9ECF1 !important; }
body > div[data-pencil-id] { margin: 0 auto; box-shadow: 0 8px 40px rgba(15, 27, 45, .14); border-radius: 8px; }

.pp-hot { cursor: pointer; transition: box-shadow .15s; }
.pp-hot:hover { box-shadow: 0 0 0 2px rgba(29, 85, 152, .45); border-radius: 6px; }
.pp-show .pp-hot, .pp-flash .pp-hot { box-shadow: 0 0 0 2px #2B6CB0, 0 0 0 9999px rgba(0,0,0,0) !important; background-color: rgba(43, 108, 176, .12) !important; border-radius: 6px; }

.pp-bar { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; background: rgba(15, 27, 45, .92); color: #fff; border-radius: 999px; font: 500 13px/1 "IBM Plex Sans", system-ui, sans-serif;
  box-shadow: 0 6px 24px rgba(0,0,0,.25); max-width: calc(100vw - 24px); white-space: nowrap; }
.pp-btn { color: #fff; text-decoration: none; background: rgba(255,255,255,.12); border: 0; border-radius: 999px; padding: 7px 12px; font: inherit; cursor: pointer; }
.pp-btn:hover { background: rgba(255,255,255,.22); }
.pp-dis { opacity: .3; pointer-events: none; }
.pp-title { padding: 0 6px; overflow: hidden; text-overflow: ellipsis; }
.pp-flow { color: #9FC3F0; }
.pp-sep { width: 1px; height: 18px; background: rgba(255,255,255,.25); }