.cmk-chrome,.cmk-chrome *{box-sizing:border-box}
.cmk-chrome{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:13px;line-height:1}
/* .cmk-chrome is on the pill itself, which IS an anchor, so the reset has to
   cover the element as well as its descendants. Without the first selector the
   UA underline strikes straight through the CK mark. */
.cmk-chrome,.cmk-chrome a{color:inherit;text-decoration:none}
.cmk-chrome a:hover,a.cmk-chrome:hover{color:#89b4fa}
.cmk-chrome a:focus-visible{outline:2px solid #89b4fa;outline-offset:2px;border-radius:3px}
a.cmk-chrome:focus-visible{outline:2px solid #89b4fa;outline-offset:2px}
.cmk-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:14px 24px;background:#11111b;color:#cdd6f4;
  background-image:radial-gradient(rgba(137,180,250,.07) 1px,transparent 1px);background-size:22px 22px}
.cmk-brand{display:inline-flex;align-items:center;gap:12px;font-weight:500}
/* Caleb's mark, same /favicon.png the site header uses — one file, one cached
   download. No border box: the CK monogram it replaced needed a frame to read
   as a mark; a logo does not. */
.cmk-mark{display:block;width:30px;height:30px;flex-shrink:0}
.cmk-nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cmk-nav a{display:inline-flex;align-items:center;min-height:24px;color:#a6adc8}
.cmk-nav a:hover{color:#cdd6f4}
.cmk-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:20px 24px;border-top:1px solid rgba(205,214,244,.11);color:#a6adc8;font-size:12px}
.cmk-foot a{display:inline-flex;align-items:center;min-height:24px;color:#89b4fa}
/* Top-left, not bottom-left: life-calendar parks its own "add calendar" button
   at [24,748,48,48] and its overflow menu down the right edge, so the bottom
   corners are taken. z-index sits below the app's own 100 — if these ever move,
   the app's controls should win rather than be covered by our badge. */
.cmk-pill{position:fixed;left:16px;top:16px;z-index:90;display:inline-flex;align-items:center;gap:9px;
  min-height:24px;padding:9px 14px;border-radius:999px;background:rgba(17,17,27,.86);color:#cdd6f4;
  border:1px solid rgba(205,214,244,.22);backdrop-filter:blur(6px);font-weight:500}
.cmk-pill:hover{border-color:#89b4fa}
@media (max-width:560px){.cmk-bar{padding:12px 16px}.cmk-nav{gap:16px}}
@media (prefers-reduced-motion:reduce){.cmk-chrome *{transition:none!important}}