clauddy 1.29.1 → 2.0.1

package/renderer/style.css

@@ -1,3758 +0,0 @@
-:root {
-  --coral: #d97757;
-  --coral-soft: #e6a07f;
-  --pixel: #d57658; /* pet terracotta — matches the real Claude logo */
-  --eye: #221b16;
-  --text: #eeeae5;
-  --muted: #a39f98;
-  --hair: rgba(255, 255, 255, 0.075);
-  --track: rgba(255, 255, 255, 0.1);
-  --green: #7ec77d;
-  --panel-bg:
-    radial-gradient(130% 110% at 20% 0%, #89543445, transparent 60%),
-    linear-gradient(158deg, #30241c, #211912 55%, #18120e);
-  --panel-border: #e8bb8e20;
-  --settings-bg: linear-gradient(150deg, #30241d, #211912);
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  user-select: none;
-  -webkit-user-drag: none;
-}
-
-html,
-body {
-  width: 100%;
-  height: 100%;
-  background: transparent;
-  overflow: hidden;
-  font-family: -apple-system, "SF Pro Text", "SF Pro Rounded", system-ui, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-}
-
-#card {
-  position: absolute;
-  top: 12px;
-  left: 12px;
-  width: 280px;
-  background: var(--panel-bg);
-  border: 1px solid var(--panel-border);
-  border-radius: 10px;
-  box-shadow: inset 0 1px 0 #ffffff05;
-  padding: 14px 18px 14px;
-  display: flex;
-  flex-direction: column;
-  -webkit-app-region: drag;
-  cursor: grab;
-  overflow: hidden;
-}
-#card:active {
-  cursor: grabbing;
-}
-
-#controls {
-  position: absolute;
-  top: 0;
-  right: 8px;
-  height: 38px;
-  align-items: center;
-  display: flex;
-  gap: 4px;
-  opacity: 1;
-  z-index: 10;
-  -webkit-app-region: no-drag;
-}
-#controls button {
-  width: 19px;
-  height: 19px;
-  border: 1px solid rgba(255, 255, 255, 0.035);
-  border-radius: 4px;
-  background: #ffffff04;
-  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.03);
-  color: #aaa59d;
-  font-size: 12px;
-  line-height: 1;
-  cursor: pointer;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  -webkit-app-region: no-drag;
-  transition:
-    background 0.2s,
-    color 0.2s;
-}
-#controls button:hover {
-  background: rgba(255, 255, 255, 0.24);
-  color: #fff;
-}
-#controls button {
-  font-size: 12px;
-}
-#min {
-  font-size: 16px;
-}
-#gear {
-  font-size: 10px;
-}
-/* "update available" cue: a soft pulsing coral dot on the gear's corner, so a
-   new version is noticeable without opening Settings */
-body.has-update #gear {
-  position: relative;
-  overflow: visible;
-}
-body.has-update #gear::after {
-  content: "";
-  position: absolute;
-  top: -2px;
-  right: -2px;
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--coral);
-  box-shadow:
-    0 0 0 1.5px #2a1f19,
-    0 0 5px 1px rgba(217, 119, 87, 0.6);
-  animation: upd-badge 1.6s ease-in-out infinite;
-  pointer-events: none;
-}
-@keyframes upd-badge {
-  0%,
-  100% {
-    transform: scale(1);
-    opacity: 0.9;
-  }
-  50% {
-    transform: scale(1.3);
-    opacity: 1;
-  }
-}
-/* inline lucide glyphs: one stroke treatment for the whole control row */
-.ic {
-  width: 9px;
-  height: 9px;
-  pointer-events: none;
-  stroke: currentColor;
-  stroke-width: 2.4;
-  fill: none;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-#gear .ic {
-  width: 10px;
-  height: 10px;
-  stroke-width: 2.2;
-}
-/* minimize icon swaps to an "expand" icon when collapsed */
-.ic-max {
-  display: none;
-}
-body.collapsed #min .ic-min {
-  display: none;
-}
-body.collapsed #min .ic-max {
-  display: block;
-}
-body.collapsed #gear,
-body.collapsed #usage {
-  display: none;
-}
-
-/* logged-in account chip (top-left, mirrors #controls) */
-#account-chip {
-  position: absolute;
-  top: 7px;
-  left: 10px;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  height: 24px;
-  /* #controls starts at ~154px: stop short of it, the pill has padding too */
-  max-width: 164px;
-  font-size: 10px;
-  line-height: 1;
-  color: #c3beb7;
-}
-#account-chip[hidden] {
-  display: none;
-}
-/* with something to switch to, the chip stops being a label and reads as a
-   control: a pill that holds the caret instead of leaving it floating */
-#account-chip {
-  -webkit-app-region: no-drag;
-  cursor: pointer;
-  padding: 0 5px 0 6px;
-  margin-left: -6px; /* the text stays where it has always been */
-  border-radius: 4px;
-  background: transparent;
-  transition:
-    background 0.15s,
-    color 0.15s;
-}
-#account-chip:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--text);
-}
-/* a drawn chevron, not the ▾ glyph: the glyph's ink sits high in its em box, so
-   it never lines up with the dot and the text */
-.ac-caret {
-  flex: none;
-  width: 9px;
-  height: 9px;
-  margin-left: -2px; /* hugs the email rather than drifting off it */
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.6;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-/* a single account still opens the menu — that is how a second one is added */
-/* the chevron stays even with a single account — it is the only hint that the
-   menu exists at all, and that is where another account gets added */
-/* the widget is mostly a drag region, and those swallow clicks before the page
-   ever sees them — so an invisible sheet under the menu catches them instead */
-#acc-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 19;
-  -webkit-app-region: no-drag;
-}
-#acc-backdrop[hidden] {
-  display: none;
-}
-/* dropdown under the chip; it overlays the pet rather than resizing the window */
-#acc-menu {
-  position: absolute;
-  top: 33px;
-  left: 8px;
-  z-index: 20;
-  min-width: 150px;
-  max-width: 190px;
-  max-height: 132px;
-  overflow-y: auto;
-  padding: 7px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 5px;
-  background: #30251e;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.33);
-  -webkit-app-region: no-drag;
-}
-#acc-menu[hidden] {
-  display: none;
-}
-#acc-menu.busy {
-  pointer-events: none; /* one switch at a time */
-}
-/* the add entry closes the list: it belongs to no account */
-#acc-menu .acc-add {
-  margin-top: 3px;
-  padding: 9px 4px 0;
-  border-top: 1px solid var(--hair);
-  border-radius: 0;
-  color: #cb8a67;
-  /* no .who inside this one, so it needs the row font itself */
-  font-size: 10px;
-  white-space: nowrap;
-}
-#acc-menu .acc-add:hover {
-  background: transparent;
-  color: #e3b193;
-}
-#acc-menu .acc-add:hover {
-  background: none;
-  color: var(--coral);
-}
-/* tighter than the dropdown-less list it replaced: it floats over the pet */
-#acc-menu .acc-item {
-  gap: 6px;
-  padding: 5px 4px;
-  border-radius: 3px;
-}
-#acc-menu .acc-item .who {
-  font-size: 10px;
-}
-.ac-dot {
-  flex: none;
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background: #a1b786;
-  box-shadow: 0 0 8px rgba(161, 183, 134, 0.19);
-}
-#ac-email {
-  /* line-height:1 leaves the ascender inside the box, so the text reads a hair
-     lower than the dot next to it — lift it back onto the same line */
-  transform: translateY(-1px);
-  flex: 1; /* claim the leftover width so the ellipsis is not left hanging */
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.plan-badge {
-  flex: none;
-  text-transform: lowercase;
-  padding: 2px 3px;
-  border-radius: 2px;
-  font-size: 8px;
-  font-weight: 400;
-  letter-spacing: 0;
-  color: #c6a385;
-  border: 1px solid rgba(181, 144, 109, 0.15);
-  background: rgba(181, 144, 109, 0.04);
-}
-.plan-badge[hidden] {
-  display: none;
-}
-/* no room for the chip when collapsed */
-body.collapsed #account-chip {
-  display: none;
-}
-/* collapsed: the account rides up on the button line, like the chip does */
-/* collapsed, the buttons share the account's line: centre them on it
-   (top 6px + half its 19px), not on the expanded 38px title band */
-body.collapsed #controls {
-  height: 31px;
-}
-body.collapsed #mini-acct {
-  position: absolute;
-  top: 6px;
-  left: 10px;
-  z-index: 10;
-  height: 19px;
-  margin-bottom: 0;
-  justify-content: flex-start;
-}
-body.collapsed #mini-acct-name {
-  max-width: 62px;
-}
-
-/* settings panel */
-/* stays in flow so the card keeps a height the window can be sized to (pet.js
-   measures #card) — it still reads as an overlay because the stage, the content
-   and the mini line all sit this screen out. The negative margins bleed its
-   background to the card's edges, past the card's own padding. */
-#settings {
-  display: none;
-  margin: 24px -18px -14px;
-  padding: 12px 16px;
-  background: var(--settings-bg);
-  -webkit-app-region: no-drag;
-}
-/* group label above a cluster of rows */
-.settings-label {
-  display: block;
-  font-size: 10px;
-  color: var(--muted);
-  margin-bottom: 6px;
-}
-.threshold-label {
-  margin-top: 15px;
-}
-.settings-segment {
-  height: 28px;
-}
-/* connected account: avatar + who + plan, as one bordered block */
-.connect-block {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 11px 0 13px;
-  padding: 8px;
-  border: 1px solid var(--hair);
-  border-radius: 4px;
-  background: #ffffff03;
-}
-.connect-block > div {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  min-width: 0;
-}
-.cb-out {
-  display: flex;
-  align-items: center;
-  padding: 3px;
-  background: none;
-  border: 0;
-  border-radius: 3px;
-  color: #8d7b6c;
-  cursor: pointer;
-  -webkit-app-region: no-drag;
-  transition:
-    color 0.15s,
-    background 0.15s;
-}
-.cb-out .ic {
-  width: 12px;
-  height: 12px;
-  stroke-width: 1.9;
-}
-.cb-out:hover {
-  color: #e0a184;
-  background: rgba(255, 255, 255, 0.05);
-}
-.connect-block b {
-  font-size: 10px;
-  font-weight: 400;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.connect-block > div > span {
-  font-size: 9px;
-  color: #a28a73;
-}
-.account-avatar {
-  width: 24px;
-  height: 24px;
-  flex: none;
-  display: grid;
-  place-items: center;
-  border-radius: 50%;
-  background: rgba(177, 132, 94, 0.13);
-  font-size: 13px;
-  color: #d5a07b;
-}
-body.settings-open #content,
-body.settings-open #mini {
-  display: none;
-}
-body.settings-open #settings {
-  display: block;
-  animation: set-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
-}
-/* the panel covers the card, so the stage keeps its normal height behind it */
-body.settings-open #stage {
-  display: none;
-}
-/* the window eases to the panel's size meanwhile (main.js), so the panel only
-   fades and settles into place instead of sliding across */
-@keyframes set-in {
-  from {
-    opacity: 0;
-    transform: translateY(10px) scale(0.98);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-/* leaving settings: the panel fades out over the card. It goes absolute for
-   those frames so the card is already at its home height while it plays. */
-body.settings-closing #settings {
-  display: block;
-  position: absolute;
-  inset: 38px 0 0;
-  margin: 0;
-  z-index: 6;
-  overflow: hidden;
-  pointer-events: none;
-  animation: set-out 0.2s ease-in forwards;
-}
-@keyframes set-out {
-  from {
-    opacity: 1;
-    transform: none;
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.98);
-  }
-}
-/* home settles back in as the panel goes */
-body.settings-closing #content,
-body.settings-closing #stage {
-  animation: home-in 0.36s cubic-bezier(0.22, 1, 0.36, 1) 0.06s backwards;
-}
-@keyframes home-in {
-  from {
-    opacity: 0;
-    transform: translateY(-6px);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-/* tabs: Accounts · Alerts · Appearance */
-#set-tabs {
-  display: flex;
-  gap: 4px;
-  margin: 4px 0 12px;
-  padding: 3px;
-  border-radius: 8px;
-  background: rgba(0, 0, 0, 0.22);
-  box-shadow: inset 0 0 0 1px var(--hair);
-}
-.set-tab {
-  flex: 1;
-  padding: 6px 0;
-  border: 0;
-  border-radius: 6px;
-  background: none;
-  color: var(--muted);
-  font: inherit;
-  font-size: 11px;
-  cursor: pointer;
-  transition:
-    background 0.18s,
-    color 0.18s;
-}
-.set-tab:hover {
-  color: var(--text);
-}
-.set-tab.on {
-  background: rgba(255, 255, 255, 0.08);
-  color: var(--text);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-}
-.set-tab:focus-visible {
-  outline: 1px solid var(--coral-soft);
-  outline-offset: 1px;
-}
-/* one pane at a time, at its own height: the window eases to fit (pet.js) */
-.set-pane {
-  display: none;
-  min-width: 0;
-}
-.set-pane.on {
-  display: block;
-  animation: pane-in 0.26s cubic-bezier(0.22, 1, 0.36, 1);
-}
-@keyframes pane-in {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-#pane-accounts #conn-tiles {
-  margin-top: 0;
-}
-/* the shared row pattern: a rounded group, rows of one height split by a
-   hairline, controls trimmed to one compact size so they read as a set */
-.set-pane > .settings-label {
-  margin: 14px 0 6px;
-}
-.set-pane > .settings-label:first-child {
-  margin-top: 0;
-}
-.set-group {
-  padding: 0 10px;
-  border: 1px solid var(--hair);
-  border-radius: 9px;
-  background: rgba(255, 255, 255, 0.025);
-}
-.set-group > .set-row,
-.set-group > .set-row:has(.num),
-.set-group > .set-row.set-sub {
-  min-height: 36px;
-  margin: 0;
-  padding: 0;
-  border-bottom: 0;
-}
-.set-group > .set-row + .set-row {
-  border-top: 1px solid var(--hair);
-}
-.set-group .set-row-label,
-.set-group .set-row.set-sub .set-row-label {
-  font-size: 11px;
-  color: #cdb49b;
-}
-.set-group .set-row.set-sub .set-row-label {
-  color: var(--muted);
-}
-.set-group .num {
-  height: 24px;
-  border-radius: 6px;
-}
-.set-group .num-btn {
-  height: 24px;
-}
-.set-group .seg {
-  height: 24px;
-  padding: 2px;
-  border-radius: 6px;
-}
-.set-group .seg-btn {
-  padding: 0 9px;
-  font-size: 10.5px;
-  border-radius: 4px;
-}
-.set-link {
-  padding: 4px 2px;
-  border: 0;
-  background: none;
-  color: var(--coral-soft);
-  font: inherit;
-  font-size: 11px;
-  cursor: pointer;
-}
-.set-link:hover {
-  color: var(--text);
-}
-.set-link::after {
-  content: " ›";
-}
-
-@media (prefers-reduced-motion: reduce) {
-  body.settings-open #settings,
-  body.settings-closing #settings,
-  body.settings-closing #content,
-  body.settings-closing #stage {
-    animation: none;
-  }
-  .set-pane.on {
-    animation: none;
-  }
-}
-.set-hint {
-  font-size: 9px;
-  color: var(--muted);
-  text-align: center;
-  line-height: 1.35;
-  margin-bottom: 10px;
-}
-.set-hint-left {
-  text-align: left;
-  margin: -3px 0 9px;
-}
-/* hide the ugly native number spinners (custom ones below) */
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  appearance: none;
-  margin: 0;
-}
-/* display-mode segmented control (floating pet | menu bar) */
-.seg {
-  display: flex;
-  gap: 3px;
-  height: 31px;
-  padding: 3px;
-  border: 0.5px solid rgba(255, 255, 255, 0.035);
-  background: rgba(15, 16, 23, 0.43);
-  border-radius: 4px;
-}
-.seg-btn {
-  flex: 1;
-  padding: 0 4px;
-  font-size: 11px;
-  color: #938996;
-  background: none;
-  border: 0;
-  border-radius: 3px;
-  cursor: pointer;
-  white-space: nowrap;
-  transition:
-    background 0.15s,
-    color 0.15s,
-    border-color 0.15s;
-}
-.seg-btn:hover {
-  color: var(--text);
-}
-.seg-btn.on {
-  background: rgba(193, 177, 176, 0.1);
-  box-shadow:
-    0 1px 4px rgba(0, 0, 0, 0.13),
-    inset 0 1px 0 rgba(255, 255, 255, 0.04);
-  color: #eadccf;
-}
-/* menu-bar mode: the popover auto-sizes, so the minimize control is redundant */
-body.is-menubar #min {
-  display: none;
-}
-/* Menu-bar mode reads as a native popover: a nib pointing up at the tray icon
-   (--nib-x, from main), a lifted shadow, and it stays put. */
-body.is-menubar #card {
-  box-shadow:
-    inset 0 1px 0 #ffffff08,
-    0 6px 10px rgba(0, 0, 0, 0.35);
-  cursor: default;
-  -webkit-app-region: no-drag;
-}
-body.is-menubar::before {
-  content: "";
-  position: absolute;
-  top: 6px;
-  left: calc(var(--nib-x, 50%) - 8px);
-  width: 16px;
-  height: 16px;
-  z-index: 3; /* over the card, so its top border doesn't cut the nib's base */
-  background: #392a20; /* the card's top edge colour */
-  border: 1px solid var(--panel-border);
-  border-right: 0;
-  border-bottom: 0;
-  border-radius: 3px 0 0;
-  transform: rotate(45deg);
-  clip-path: polygon(0 0, 100% 0, 0 100%); /* only the half above the card */
-}
-body.is-menubar #card {
-  z-index: 2;
-}
-body.is-menubar.collapsed #pet {
-  cursor: default;
-  -webkit-app-region: no-drag;
-}
-/* settings rows: label on the left, control on the right — one setting per
-   line so the screen stays short. Alert thresholds indent under their toggle
-   and dim while alerts are off. */
-#set-rows {
-  margin-bottom: 10px; /* #account above already draws the divider */
-}
-.set-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  font-size: 11px;
-  color: #cdb49b;
-  margin-top: 11px;
-}
-/* the stepper rows stack, so they read as a group at a tighter pitch than the
-   reference's 14px — the steppers already carry their own height */
-.set-row:has(.num) {
-  margin-top: 5px;
-} /* flat,
-but visibly nested: a soft coral guide bar ties the pair to the
-   toggle above {
-  position: relative;
-  padding-left: 14px;
-  border-bottom: 0.5px solid var(--hair);
-  padding-bottom: 3px;
-  transition: opacity 0.15s;
-}
-.set-row-label {
-  font-size: 11px;
-  font-weight: 400;
-  color: #cdb49b;
-}
-.set-row.set-sub {
-  min-height: 31px;
-}
-.set-row.set-sub .set-row-label {
-  font-weight: 400;
-  font-size: 10.5px;
-  color: var(--muted);
-}
-#set-rows.alerts-off .set-sub {
-  opacity: 0.35;
-  pointer-events: none;
-}
-.set-row .seg {
-  margin-top: 0;
-  flex: none;
-}
-.set-row .seg-btn {
-  flex: none;
-  padding: 4px 9px;
-}
-/* alerts on/off pill switch (still an <input type=checkbox> underneath) */
-.set-toggle {
-  appearance: none;
-  -webkit-appearance: none;
-  margin: 0;
-  width: 29px;
-  height: 16px;
-  border-radius: 6px;
-  background: #5c5146;
-  position: relative;
-  cursor: pointer;
-  -webkit-app-region: no-drag;
-  transition: background 0.18s;
-}
-.set-toggle::after {
-  content: "";
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: #fff;
-  opacity: 0.85;
-  transition:
-    left 0.18s,
-    opacity 0.18s;
-}
-.set-toggle:checked {
-  background: #ae7954;
-}
-.set-toggle:checked::after {
-  left: 15px;
-  opacity: 1;
-}
-/* number field: minus / value% / plus */
-.num {
-  display: flex;
-  align-items: center;
-  flex: none;
-  border: 0.5px solid var(--hair);
-  background: rgba(255, 255, 255, 0.012);
-  border-radius: 3px;
-  overflow: hidden;
-}
-.num-val {
-  position: relative;
-  width: 38px;
-}
-.num-val input {
-  width: 100%;
-  background: none;
-  border: 0;
-  color: var(--text);
-  font-size: 11px;
-  font-weight: 400;
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-  padding: 4px 15px 4px 0;
-  outline: none;
-  transition:
-    border-color 0.15s,
-    background 0.15s;
-}
-.num-val input:focus {
-  border-color: var(--coral);
-  background: rgba(255, 255, 255, 0.09);
-}
-.num-val i {
-  position: absolute;
-  right: 3px;
-  top: 50%;
-  transform: translateY(-50%);
-  font-style: normal;
-  font-size: 9px;
-  color: #a1876b;
-  pointer-events: none;
-}
-.num-btn {
-  -webkit-app-region: no-drag;
-  border: none;
-  background: none;
-  color: #ceb194;
-  width: 22px;
-  height: 22px;
-  border-radius: 0;
-  font-size: 12px;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  padding: 0;
-  transition:
-    background 0.15s,
-    color 0.15s;
-}
-.num-btn:hover {
-  background: var(--coral);
-  color: #fff;
-}
-.num-btn:active {
-  transform: scale(0.9);
-}
-.set-actions {
-  display: flex;
-  gap: 8px;
-  margin-top: 14px;
-}
-/* Save only shows up once there is something to save */
-#settings:not(.dirty) #set-save {
-  display: none;
-}
-.set-actions button {
-  flex: 1;
-  border: 1px solid rgba(255, 255, 255, 0.082);
-  border-radius: 6px;
-  padding: 6px;
-  font-size: 11px;
-  font-weight: 400;
-  cursor: pointer;
-  transition:
-    background 0.18s,
-    transform 0.1s;
-}
-.set-actions button:active:not(:disabled) {
-  transform: scale(0.97);
-}
-#set-cancel {
-  background: none;
-  color: var(--text);
-}
-#set-cancel:hover {
-  background: rgba(255, 255, 255, 0.2);
-}
-#set-save {
-  background: #ce926d;
-  border-color: #ce926d;
-  color: #261a12;
-}
-#set-save:disabled {
-  opacity: 0.45;
-  cursor: default;
-}
-#set-save.dirty,
-#set-save.dirty:hover {
-  color: #261a12; /* filled coral now — dark text, not white */
-}
-#set-save.dirty:hover {
-  background: #e2a07f;
-  border-color: #e2a07f;
-}
-/* unsaved changes: light up and pulse so you don't forget to save */
-#set-save.dirty {
-  background: #ce926d;
-  border-color: #ce926d;
-  color: #261a12;
-  animation: save-pulse 1.6s ease-in-out infinite;
-}
-@keyframes save-pulse {
-  0%,
-  100% {
-    box-shadow: 0 0 0 0 rgba(217, 119, 87, 0);
-  }
-  50% {
-    box-shadow: 0 0 9px 2px rgba(217, 119, 87, 0.6);
-  }
-}
-
-/* updates footer */
-.set-updates {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  margin-top: 12px;
-  font-size: 8px;
-  color: #8f755e;
-}
-.upd-ver {
-  font-size: 10px;
-  color: var(--muted);
-}
-.upd-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-#upd-status {
-  font-size: 10px;
-  color: var(--muted);
-}
-#upd-status.ok {
-  color: var(--green);
-}
-#upd-status.err {
-  color: var(--coral);
-}
-/* compact update button — lighter than the full-width .acc-btn */
-/* once an update is offered, the button says it — the check link is redundant
-   and the three of them would not fit the footer on one line */
-body.has-update #upd-check {
-  display: none;
-}
-.set-updates .upd-ver,
-.upd-btn,
-#upd-check {
-  white-space: nowrap;
-}
-.upd-btn {
-  border: 1px solid rgba(206, 146, 109, 0.35);
-  border-radius: 3px;
-  padding: 4px 8px;
-  font-size: 9px;
-  font-weight: 400;
-  color: #e3b193;
-  background: rgba(206, 146, 109, 0.09);
-  cursor: pointer;
-  -webkit-app-region: no-drag;
-  transition:
-    background 0.18s,
-    transform 0.1s;
-}
-.upd-btn:hover {
-  background: rgba(206, 146, 109, 0.2);
-  border-color: rgba(206, 146, 109, 0.55);
-}
-.upd-btn:active {
-  transform: scale(0.97);
-}
-.upd-btn:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-
-/* live tag */
-.live-only {
-  display: none;
-}
-body.live .live-only {
-  display: inline;
-}
-#live-tag {
-  margin-left: auto;
-  font-size: 8px;
-  letter-spacing: 0.4px;
-  font-weight: 400;
-  padding: 3px 5px;
-  color: #abbd96;
-  border: 1px solid rgba(161, 183, 134, 0.13);
-  background: rgba(161, 183, 134, 0.03);
-  border-radius: 2px;
-}
-
-/* account / auth */
-#account {
-  margin-bottom: 0;
-}
-.acc-btn {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  border: 1px solid rgba(206, 146, 109, 0.35);
-  border-radius: 3px;
-  padding: 9px;
-  font-size: 11px;
-  font-weight: 400;
-  cursor: pointer;
-  background: rgba(206, 146, 109, 0.09);
-  color: #e3b193;
-  -webkit-app-region: no-drag;
-  /* the glyph rides at the text's weight, not heavier */
-  stroke-width: 1.8;
-  transition:
-    background 0.18s,
-    transform 0.1s;
-}
-.acc-btn:hover:not(:disabled) {
-  background: rgba(206, 146, 109, 0.2);
-  border-color: rgba(206, 146, 109, 0.55);
-}
-.acc-btn:active:not(:disabled) {
-  transform: scale(0.98);
-}
-.acc-btn:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-#acc-confirm:not(.ready) {
-  background: rgba(255, 255, 255, 0.12);
-  color: var(--muted);
-}
-.acc-link {
-  border: none;
-  background: none;
-  color: var(--muted);
-  font-size: 10px;
-  cursor: pointer;
-  text-decoration: none;
-  -webkit-app-region: no-drag;
-  transition: color 0.15s;
-}
-.acc-link:hover {
-  color: var(--text);
-  text-decoration: underline;
-}
-.acc-ok {
-  color: var(--text);
-  font-size: 9px;
-  font-weight: 400;
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-#acc-connected {
-  display: none;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px; /* the email ellipsizes instead of touching Disconnect */
-  flex-wrap: wrap; /* the success line drops to its own row */
-}
-/* a plain list, not a stack of cards: the panel already has enough boxes */
-.acc-item {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  padding: 5px 6px;
-  border-radius: 4px;
-  cursor: pointer;
-  color: var(--muted);
-  transition:
-    background 0.15s,
-    color 0.15s;
-}
-.acc-item:hover {
-  background: rgba(255, 255, 255, 0.04);
-  color: var(--text);
-}
-.acc-item.active {
-  background: transparent;
-  color: #e7d6c5;
-  cursor: default;
-}
-.acc-item .dot {
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.22); /* logged out: a row with no usage yet */
-  flex: none;
-}
-.acc-item.connected .dot {
-  background: #a1b786;
-  box-shadow: 0 0 8px rgba(161, 183, 134, 0.19);
-}
-.acc-item .who {
-  flex: 1;
-  min-width: 0;
-  font-size: 11px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-/* switching re-reads that account's logs, which takes a beat — say so */
-.acc-item.loading .dot {
-  background: var(--coral);
-  animation: acc-pulse 0.9s ease-in-out infinite;
-}
-.acc-item.loading .who {
-  opacity: 0.6;
-}
-@keyframes acc-pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.2;
-  }
-}
-.acc-item .drop {
-  border: none;
-  background: none;
-  color: var(--muted);
-  font-size: 12px;
-  line-height: 1;
-  padding: 0 2px;
-  cursor: pointer;
-  opacity: 0.3; /* faint until hover: this deletes a token */
-  transition: opacity 0.15s;
-}
-.acc-item:hover .drop {
-  opacity: 0.75;
-}
-.acc-item .drop:hover {
-  opacity: 1;
-  color: var(--text);
-}
-/* armed: the confirm has to be legible whether or not the cursor is on the row */
-.acc-item .drop.armed,
-.acc-item:hover .drop.armed {
-  opacity: 1;
-  font-size: 10px;
-  color: var(--coral);
-}
-#acc-paste {
-  display: none;
-  margin-top: 8px;
-}
-#acc-paste.show {
-  display: block;
-}
-/* while the browser is open, this empty field is the whole flow: make it say so */
-body.awaiting #acc-code:not(.filled) {
-  border-color: var(--coral);
-  animation: code-wait 1.6s ease-in-out infinite;
-}
-@keyframes code-wait {
-  0%,
-  100% {
-    box-shadow: 0 0 0 0 rgba(217, 119, 87, 0);
-  }
-  50% {
-    box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.22);
-  }
-}
-#acc-code {
-  width: 100%;
-  margin: 4px 0 6px;
-  background: rgba(255, 255, 255, 0.08);
-  border: 0.5px solid var(--hair);
-  border-radius: 4px;
-  color: var(--text);
-  font-size: 11px;
-  padding: 5px 8px;
-  outline: none;
-}
-#acc-msg {
-  font-size: 9px;
-  color: var(--muted);
-  margin-top: 4px;
-}
-body.auth-on #acc-disconnected {
-  display: none;
-}
-body.auth-on #acc-connected {
-  display: flex;
-}
-/* the browser is already open on the login page: the button that opens it and
-   the pitch for connecting are both noise now — only the code field matters */
-body.awaiting #acc-connect,
-body.awaiting #acc-intro {
-  display: none;
-}
-#acc-disconnected {
-  margin-top: 8px;
-  margin-bottom: 13px;
-}
-
-/* just logged in: a short-lived green cheer at the top of the home panel */
-#home-success {
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--green);
-  text-align: center;
-  margin-bottom: 8px;
-  animation: set-in 0.18s ease;
-}
-
-/* limits: real meters when connected, a "connect" prompt otherwise */
-/* the connect prompt draws its own frame, so the rules on either side of it
-   would box a box. It is `.live` that decides whether it shows — being logged
-   in is not enough, the usage fetch has to have landed — so that is what these
-   have to key off, not `.auth-on`. */
-body:not(.live) #statusline {
-  border-bottom: 0;
-}
-body:not(.live) #bymodel {
-  border-top: 0;
-}
-#limits-connect {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  width: 100%;
-  text-align: left;
-  border: 1px solid rgba(206, 146, 109, 0.22);
-  border-radius: 4px;
-  background: rgba(206, 146, 109, 0.055);
-  /* the same breathing room the meters get, so it never touches the tabs
-     above it or the Details rule below */
-  margin: 12px 0;
-  padding: 12px 13px;
-  cursor: pointer;
-  -webkit-app-region: no-drag;
-  transition:
-    background 0.2s,
-    border-color 0.2s;
-}
-#limits-connect:hover {
-  background: rgba(206, 146, 109, 0.13);
-  border-color: rgba(206, 146, 109, 0.42);
-}
-.lc-ico {
-  flex: 0 0 auto;
-  width: 14px;
-  height: 14px;
-  stroke: #cb8a67;
-  stroke-width: 1.8;
-  fill: none;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-.lc-text {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  line-height: 1.25;
-}
-.lc-text b {
-  font-size: 11px;
-  font-weight: 400;
-  color: #e3cdb8;
-}
-.lc-text i {
-  font-size: 9px;
-  font-style: normal;
-  color: #a28a73;
-}
-body.live #limits-connect {
-  display: none;
-}
-body:not(.live) #limits-meters {
-  display: none;
-}
-body:not(.live) #mini-pct-row {
-  display: none;
-}
-
-/* collapsed: pet only */
-#mini {
-  display: none;
-  text-align: center;
-  margin-top: 2px;
-}
-/* account name + plan, shown above the status line when collapsed */
-#mini-acct {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  margin-bottom: 3px;
-}
-#mini-acct[hidden] {
-  display: none;
-}
-#mini-acct-name {
-  max-width: 56px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 9.5px;
-  color: var(--muted);
-}
-.mini-line {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-}
-#mini-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: #6b635a;
-}
-#mini-text {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text);
-}
-body.state-working #mini-dot {
-  background: var(--green);
-}
-body.state-working #mini-text {
-  color: var(--green);
-}
-body.state-stressed #mini-dot {
-  background: #e0553f;
-}
-body.state-stressed #mini-text {
-  color: #e08368;
-}
-body.state-tired #mini-dot {
-  background: #b6a99c;
-}
-body.state-tired #mini-text {
-  color: #c2b4a6;
-}
-#mini-pct-row {
-  margin-top: 1px;
-}
-#mini-pct {
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--text);
-  font-variant-numeric: tabular-nums;
-}
-#mini-pct.high {
-  color: #e0553f;
-}
-#mini .lbl {
-  font-size: 8px;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-  color: var(--muted);
-}
-body.collapsed #content {
-  display: none;
-}
-body.collapsed #mini {
-  display: block;
-}
-body.collapsed #card {
-  width: 144px;
-  padding: 12px 12px 13px;
-}
-/* one service: three buttons plus the account need a title band of their
-   own, like the dual dock has, or they sit on the ring's arc */
-body.collapsed:not(.dual):not(.pet-only) #card {
-  width: 146px;
-  padding: 27px 12px 9px;
-}
-body.collapsed:not(.dual):not(.pet-only) #stage {
-  margin-top: 0;
-}
-body.collapsed:not(.dual):not(.pet-only) #mini-acct-name {
-  max-width: 40px;
-}
-body.collapsed #stage {
-  margin-top: 9px;
-}
-/* collapsed: drag the widget by the pet */
-body.collapsed #pet {
-  -webkit-app-region: drag;
-}
-/* hide minimize while settings are open (toggling it bugs the layout) */
-body.settings-open #min {
-  display: none;
-} /* pet */
-body.settings-open .cloud {
-  display: none;
-}
-body.settings-open #pet {
-  zoom: 0.65;
-}
-#stage {
-  position: relative;
-  height: 132px;
-  margin-top: 24px; /* the title band is 38px; the card already pads 14 of it */
-  border-radius: 6px;
-  background: radial-gradient(100% 130% at 50% 30%, #141714, #0d100e);
-  box-shadow: inset 0 0 0 1px #ffffff06;
-  overflow: hidden;
-}
-#scene {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-#pet {
-  position: absolute;
-  left: 26px;
-  bottom: 3px;
-  transition: left 0.35s ease;
-  width: 86px;
-  height: 77px;
-  zoom: 0.8; /* a bit smaller in the scene */
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  transform-origin: 50% 100%; /* gulp squash pivots at the feet */
-  z-index: 2;
-  -webkit-app-region: no-drag; /* only the pet is interactive (poke / eyes) */
-}
-#shadow {
-  display: none;
-}
-
-/* collapsed: just the face, on the warm card (like before) */
-body.collapsed #stage {
-  height: 120px;
-  margin-top: 9px;
-  background: transparent;
-  box-shadow: none;
-  border-radius: 0;
-  overflow: visible;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-body.collapsed #scene {
-  display: none;
-} /* minimized = just the pet's face: hide all activity scenery + props */
-body.collapsed #desk,
-body.collapsed #plant,
-body.collapsed #mug,
-body.collapsed #reading,
-body.collapsed #terminal {
-  display: none;
-}
-/* collapsed: the pet sits a bit high, so the % fits under it inside the ring */
-body.collapsed #pet {
-  position: static;
-  left: auto;
-  bottom: auto;
-  transform: translateY(-8px);
-  zoom: 0.86;
-}
-/* the ring is a fixed frame, so the usual bob reads as jumping in there */
-body.collapsed #claude {
-  animation: bob-mini 3.6s ease-in-out infinite;
-}
-@keyframes bob-mini {
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-1.5px);
-  }
-}
-/* the ring: session % drawn around the pet, only when there's a real % to show */
-#ring {
-  display: none;
-}
-body.collapsed #ring {
-  display: block;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 118px;
-  height: 118px;
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-  z-index: 1;
-}
-.ring-track {
-  fill: none;
-  stroke: var(--track);
-  stroke-width: 3.5;
-}
-#ring-fill {
-  fill: none;
-  stroke: var(--green);
-  stroke-width: 3.5;
-  stroke-linecap: round;
-  transform: rotate(-90deg);
-  transform-origin: 50% 50%;
-  stroke-dasharray: 282.7;
-  stroke-dashoffset: 282.7; /* set from JS */
-  transition:
-    stroke-dashoffset 0.5s ease,
-    stroke 0.3s ease;
-}
-#ring-fill.high {
-  stroke: #e0553f;
-}
-#ring-pct {
-  display: none;
-}
-body.collapsed #ring-pct {
-  display: block;
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 12px;
-  z-index: 3;
-  text-align: center;
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--text);
-  font-variant-numeric: tabular-nums;
-  pointer-events: none;
-}
-#ring-pct.high {
-  color: #e0553f;
-}
-/* the ring already says it — no need to repeat it under the pet */
-body.collapsed #mini-pct-row {
-  display: none;
-}
-body.collapsed #shadow {
-  display: block;
-  position: absolute;
-  /* pinned under the pet's feet, which the ring lifted off the stage floor */
-  top: calc(50% + 23px);
-  left: 50%;
-  width: 48px;
-  height: 8px;
-  /* closest-side keeps the ellipse inside its box: the default reaches the
-     corners and reads as a blurred bar */
-  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
-  border-radius: 50%;
-  transform: translateX(-50%);
-}
-
-#claude {
-  position: relative;
-  z-index: 2;
-  transform-origin: 50% 100%;
-  animation: bob 3.6s ease-in-out infinite;
-  shape-rendering: crispEdges;
-  overflow: visible;
-}
-#body rect {
-  fill: var(--pixel);
-}
-#eyes rect {
-  fill: var(--eye);
-  transform-box: fill-box;
-  transform-origin: center;
-  animation: blink 5.5s infinite;
-} /* mechanic mode (settings): hard hat + screwdriver on the pet {
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-}/* declutter the scene while configuring: mood marks AND activity props —
-   the shortened stage only fits the pet and its gears */
-body.settings-open #zzz,
-body.settings-open #flames,
-body.settings-open #sweat,
-body.settings-open #terminal,
-body.settings-open #reading,
-body.settings-open #mug,
-body.settings-open #desk,
-body.settings-open #plant {
-  display: none;
-}
-/* reading mode: an open book with a magnifying glass scanning the lines */
-#reading {
-  position: absolute;
-  left: 64%;
-  bottom: 3px;
-  width: 66px;
-  height: 63px;
-  z-index: 3;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-}
-body.act-reading #reading {
-  opacity: 1;
-}
-#dc-fname {
-  transition: opacity 0.25s ease;
-}
-/* editing mode: a coding desk (laptop with colorful code, coffee, plant) */
-#desk {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-}
-#mug {
-  position: absolute;
-  left: 36%; /* editing: on the desk, near the laptop */
-  bottom: 3px;
-  width: 44px;
-  height: 42px;
-  z-index: 3; /* the mug sits in front, on the desk */
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-}
-body.act-editing #desk,
-body.act-editing #mug,
-body.act-reading #mug {
-  opacity: 1;
-}
-/* editing: raise the mug onto the desk, level with the plant */
-body.act-editing #mug {
-  bottom: 22px;
-}
-/* the mug shifts right in reading (centered with the doc) */
-body.act-reading #mug {
-  left: 38%;
-}
-/* slide the pet left in editing to open up the full desk */
-body.act-editing:not(.collapsed) #pet {
-  left: 4px;
-}
-/* reading: pet + mug + doc, centered as a group */
-body.act-reading:not(.collapsed) #pet {
-  left: 12px;
-}
-/* running: pet + terminal centered as a pair */
-body.act-running:not(.collapsed) #pet {
-  left: 27px;
-}
-.dk-wisp {
-  fill: none;
-  stroke: #c9c9c9;
-  stroke-width: 1.8;
-  stroke-linecap: round;
-  opacity: 0;
-  vector-effect: non-scaling-stroke;
-}
-/* shared potted plant (editing + reading desks) */
-#plant {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-}
-body.act-editing #plant {
-  opacity: 1;
-}
-body.act-editing .dk-wisp,
-body.act-reading .dk-wisp {
-  transform-box: view-box;
-  animation: steam 2.6s ease-in-out infinite;
-}
-@keyframes steam {
-  0% {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  35% {
-    opacity: 0.7;
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(-7px);
-  }
-}
-#mouth {
-  fill: var(--eye);
-  transform-box: fill-box;
-  transform-origin: center top;
-  transform: scaleY(0); /* closed/hidden until chomping */
-}
-
-#zzz {
-  position: absolute;
-  top: -10px;
-  right: -4px;
-  opacity: 0;
-  z-index: 3;
-  overflow: visible;
-}
-body.state-sleeping #zzz {
-  opacity: 1;
-}
-#zzz text {
-  fill: #b3d2ff;
-  font-weight: 800;
-  font-family: -apple-system, system-ui, sans-serif;
-  opacity: 0;
-  filter: drop-shadow(0 0 4px rgba(120, 170, 255, 0.95));
-}
-.z1 {
-  font-size: 19px;
-}
-.z2 {
-  font-size: 14px;
-}
-.z3 {
-  font-size: 10px;
-}
-body.state-sleeping .z1 {
-  animation: floatz 3s ease-in-out infinite;
-}
-body.state-sleeping .z2 {
-  animation: floatz 3s ease-in-out infinite 1s;
-}
-body.state-sleeping .z3 {
-  animation: floatz 3s ease-in-out infinite 2s;
-}
-
-#dropzone {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 5; /* coins fly in front of the pet (not behind it) */
-}
-.coin {
-  position: absolute;
-  width: 7px;
-  height: 7px;
-  border-radius: 2px;
-  background: var(--coral);
-  box-shadow: 0 0 6px rgba(230, 160, 127, 0.7);
-}
-.coin.spark {
-  background: #ffd23f;
-  box-shadow: 0 0 7px rgba(255, 210, 63, 0.8);
-}
-.confetti {
-  position: absolute;
-  border-radius: 1.5px;
-  box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
-  will-change: transform, opacity;
-}
-.crumb {
-  position: absolute;
-  width: 3px;
-  height: 3px;
-  border-radius: 1px;
-  background: var(--coral-soft);
-}
-.heart {
-  position: absolute;
-  font-size: 17px;
-  line-height: 1;
-  color: #ff5d86;
-  pointer-events: none;
-  text-shadow:
-    0 0 8px rgba(255, 93, 134, 0.95),
-    0 0 2px rgba(255, 255, 255, 0.6);
-}
-
-/* flames (on fire) */
-#flames {
-  position: absolute;
-  top: -10px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: none;
-  gap: 3px;
-  z-index: 3;
-  pointer-events: none;
-}
-body.state-stressed #flames {
-  display: flex;
-}
-#flames i {
-  width: 6px;
-  height: 14px;
-  border-radius: 3px 3px 2px 2px;
-  background: linear-gradient(#ffe08a, #ff6b35);
-  transform-origin: bottom;
-  animation: flick 0.5s ease-in-out infinite;
-}
-#flames i:nth-child(1) {
-  height: 11px;
-  animation-delay: 0.12s;
-}
-#flames i:nth-child(2) {
-  height: 16px;
-  animation-delay: 0s;
-}
-#flames i:nth-child(3) {
-  height: 12px;
-  animation-delay: 0.22s;
-}
-
-/* sweat drops (maxed out / tired) */
-#sweat {
-  position: absolute;
-  top: 22px;
-  right: 32px;
-  display: none;
-  z-index: 3;
-  pointer-events: none;
-}
-body.state-tired #sweat {
-  display: block;
-}
-#sweat i {
-  position: absolute;
-  border-radius: 50% 50% 50% 50% / 68% 68% 42% 42%;
-  background: radial-gradient(circle at 35% 28%, #f2f9ff 0%, #8ec5ff 45%, #5aa6ef 100%);
-  box-shadow: 0 0 6px rgba(120, 180, 255, 0.8);
-  animation: drip 2.2s ease-in infinite;
-}
-#sweat i:nth-child(1) {
-  left: 0;
-  width: 8px;
-  height: 11px;
-}
-#sweat i:nth-child(2) {
-  left: 11px;
-  top: 3px;
-  width: 6px;
-  height: 8px;
-  animation-delay: 1.1s;
-}
-
-/* states */
-body.state-working #claude {
-  animation: hop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
-}
-body.state-stressed #body rect {
-  fill: #cb5642;
-}
-body.state-stressed #claude {
-  animation: shiver 0.2s ease-in-out infinite;
-}
-body.state-sleeping #claude {
-  animation: bob 5.6s ease-in-out infinite;
-  filter: drop-shadow(0 0 7px rgba(120, 160, 255, 0.3));
-}
-body.state-sleeping #body rect {
-  fill: #a87e63;
-}
-body.state-sleeping #eyes rect {
-  animation: none;
-  transform: scaleY(0.18);
-  transform-origin: center;
-}
-/* maxed out: drained, slumped, half-closed eyes, dripping sweat */
-body.state-tired #body rect {
-  fill: #9a8576;
-}
-body.state-tired #claude {
-  animation: slump 3.4s ease-in-out infinite;
-}
-body.state-tired #eyes rect {
-  animation: none;
-  transform: scaleY(0.4) translateY(3px);
-  transform-origin: center;
-}
-body.greet #claude {
-  animation: wave 1.1s ease-in-out;
-}
-
-/* one-shot reactions */
-body.poke #claude {
-  animation: poke 0.85s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-body.wake #claude {
-  animation: wake 0.7s ease;
-}
-body.drowse #claude {
-  animation: drowse 0.7s ease;
-}
-body.celebrate #claude {
-  animation: celebrate 1.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-/* reading/editing/running: calm bob instead of the working hop */
-body.act-reading #claude,
-body.act-editing #claude,
-body.act-running #claude {
-  animation: bob 3.6s ease-in-out infinite;
-}
-/* running mode: a mini terminal with a typing command */
-#terminal {
-  position: absolute;
-  left: 48%;
-  bottom: 3px;
-  width: 88px;
-  height: 68px;
-  z-index: 3;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-}
-body.act-running #terminal {
-  opacity: 1;
-}
-
-/* status */
-#statusline {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 10px 0;
-  border-bottom: 1px solid var(--hair);
-  font-size: 11px;
-  color: #b9b4ad;
-}
-#statusline .sep {
-  opacity: 0.4;
-}
-#status-dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: #6b635a;
-}
-#status-text {
-  font-weight: 600;
-  color: var(--text);
-}
-#rate {
-  font-size: 10px;
-  color: #a39f98;
-  font-variant-numeric: tabular-nums;
-}
-body.state-working #status-dot {
-  background: var(--green);
-  animation: ping 1.3s infinite;
-}
-body.state-working #status-text {
-  color: var(--green);
-}
-body.state-stressed #status-dot {
-  background: #e0553f;
-}
-body.state-stressed #status-text {
-  color: #e08368;
-}
-body.state-tired #status-dot {
-  background: #b6a99c;
-}
-body.state-tired #status-text {
-  color: #c2b4a6;
-}
-
-/* meter subtitle */
-.sub {
-  font-size: 10px;
-  color: #a8a29a;
-  margin-top: 5px;
-  letter-spacing: 0px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* burn-rate projection — calm by default, warm when you'd run out first */
-.sub.proj {
-  margin-top: 2px;
-  font-style: normal;
-  opacity: 0.85;
-}
-.sub.proj.tight {
-  color: var(--coral);
-  font-style: normal;
-  opacity: 1;
-}
-
-/* 30-day map */
-#heat {
-  padding-top: 0; /* #heat-meta draws its own rule and padding, like a .sec */
-}
-#heat-row {
-  display: flex;
-  gap: 2px;
-  height: 7px;
-  margin-top: 7px;
-}
-/* a warm ramp that climbs in lightness AND saturation at once: opacity alone
-   collapses the low steps into one smudge against the dark card, so the busy
-   days and the quiet ones have to differ in colour, not just in strength */
-.sq {
-  flex: 1;
-  border-radius: 1.5px;
-  background: rgba(255, 255, 255, 0.05); /* no activity */
-  transition: background 0.4s;
-}
-.sq.lv1 {
-  background: #6b4430;
-}
-.sq.lv2 {
-  background: #9c6340;
-}
-.sq.lv3 {
-  background: #cf8b52;
-}
-.sq.lv4 {
-  background: #f0b464;
-}
-#heat-meta {
-  display: flex;
-  justify-content: space-between;
-  font-size: 9px;
-  color: #aaa39b;
-  border-top: 1px solid var(--hair);
-  padding-top: 9px;
-  margin-top: 0;
-  letter-spacing: 0;
-}
-#month-total {
-  font-weight: 400;
-  color: #aaa39b;
-  font-variant-numeric: tabular-nums;
-}
-
-/* meters */
-#limits-meters {
-  padding: 0 0 12px;
-}
-.meter {
-  margin-top: 12px;
-}
-.meter + .meter,
-#scoped-meters .meter {
-  margin-top: 12px;
-}
-.meter-top {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 11px;
-  color: #bdb7af;
-  margin-bottom: 0;
-}
-.meter-top i {
-  font-style: italic;
-  opacity: 0.5;
-  font-size: 9px;
-}
-/* the number is plain while there is nothing to worry about — colour is the
-   warning, so spending it at 5% leaves nothing to say at 90% */
-.meter-top span:last-child {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--text);
-  font-variant-numeric: tabular-nums;
-  transition: color 0.6s;
-}
-.track {
-  width: 100%;
-  height: 4px;
-  background: #ffffff0a;
-  border-radius: 3px;
-  overflow: hidden;
-  margin-top: 7px;
-}
-.fill {
-  height: 100%;
-  width: 0%;
-  background: var(--coral);
-  border-radius: 3px;
-  transition:
-    width 0.7s cubic-bezier(0.22, 1, 0.36, 1),
-    background 0.7s;
-}
-.fill.week {
-  background: var(--coral);
-}
-/* the ramp, shared by the bars and their numbers */
-.fill.mid {
-  background: #e5b55d;
-}
-.fill.hot,
-.fill.high.hot {
-  background: #ee705e;
-}
-.meter-top span:last-child.mid {
-  color: #e5b55d;
-}
-.meter-top span:last-child.hot {
-  color: #ee705e;
-}
-
-/* by model / by project — collapsible sections */
-.sec {
-  border-top: 1px solid var(--hair);
-  padding: 9px 0;
-}
-.sec-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 0;
-  margin-bottom: 0;
-  background: none;
-  border: 0;
-  cursor: pointer;
-  font: inherit;
-  font-size: 10px;
-  color: #aaa59d;
-  letter-spacing: 0;
-  -webkit-app-region: no-drag;
-}
-.sec-head:hover {
-  color: var(--text);
-}
-.sec-chev {
-  width: 10px;
-  height: 10px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2.2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  transition: transform 0.22s ease;
-}
-.sec.folded .sec-chev {
-  transform: rotate(-90deg);
-}
-/* 0fr -> 1fr is the only way a height-to-content box can be animated; the inner
-   wrapper is what actually clips, so the rows never reflow mid-slide */
-.sec-body {
-  display: grid;
-  grid-template-rows: 1fr;
-  transition: grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1);
-}
-.sec-body > div {
-  min-height: 0;
-  overflow: hidden;
-}
-.sec.folded .sec-body {
-  grid-template-rows: 0fr;
-}
-.sec.folded .sec-head {
-  margin-bottom: 0;
-}
-.mrow {
-  display: grid;
-  grid-template-columns: 1fr 40px 44px;
-  align-items: center;
-  gap: 7px;
-  font-size: 10px;
-  color: #d0cac2;
-  margin-top: 7px;
-  margin-bottom: 0;
-}
-.mrow .mname {
-  /* the grid now fixes the bar column, so every track starts at the same x
-     without measuring the names */
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  font-weight: 400;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-/* a rank dot, so a row reads as an entry rather than a bare label */
-.mrow .mname::before {
-  content: "";
-  flex: none;
-  width: 3px;
-  height: 3px;
-  border-radius: 50%;
-  background: #b1967c;
-}
-.mrow:nth-child(1) .mname::before {
-  background: var(--coral);
-}
-.mrow:nth-child(2) .mname::before {
-  background: #c8a475;
-}
-.mrow:nth-child(3) .mname::before {
-  background: #807769;
-}
-/* project names are paths, not four-letter families — the grid's first column
-   takes the slack and clips the rest, full name on the row's title attribute */
-.mrow .mbar {
-  height: 3px;
-  background: rgba(255, 255, 255, 0.024);
-  border-radius: 2px;
-  overflow: hidden;
-}
-.mrow .mbar > i {
-  display: block;
-  height: 100%;
-  background: #c2865e;
-  border-radius: 2px;
-  transition: width 0.6s ease;
-}
-.mrow .mval {
-  text-align: right;
-  font-size: 10px;
-  color: #aaa39b;
-  font-variant-numeric: tabular-nums;
-}
-
-/* keyframes */
-@keyframes bob {
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-3px);
-  }
-}
-@keyframes hop {
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-  45% {
-    transform: translateY(-10px);
-  }
-  72% {
-    transform: translateY(0);
-  }
-}
-@keyframes shiver {
-  0%,
-  100% {
-    transform: translateX(0);
-  }
-  25% {
-    transform: translateX(-1.5px);
-  }
-  75% {
-    transform: translateX(1.5px);
-  }
-}
-@keyframes wave {
-  0% {
-    transform: rotate(0);
-  }
-  20% {
-    transform: rotate(-9deg);
-  }
-  45% {
-    transform: rotate(8deg);
-  }
-  70% {
-    transform: rotate(-5deg);
-  }
-  100% {
-    transform: rotate(0);
-  }
-}
-@keyframes blink {
-  0%,
-  92%,
-  100% {
-    transform: scaleY(1);
-  }
-  95% {
-    transform: scaleY(0.1);
-  }
-}
-@keyframes ping {
-  0% {
-    box-shadow: 0 0 0 0 rgba(126, 199, 125, 0.5);
-  }
-  70%,
-  100% {
-    box-shadow: 0 0 0 5px rgba(126, 199, 125, 0);
-  }
-}
-@keyframes floatz {
-  0% {
-    transform: translate(0, 4px);
-    opacity: 0;
-  }
-  30% {
-    opacity: 1;
-  }
-  100% {
-    transform: translate(5px, -10px);
-    opacity: 0;
-  }
-}
-@keyframes flick {
-  0%,
-  100% {
-    transform: scaleY(1) translateY(0);
-    opacity: 0.85;
-  }
-  50% {
-    transform: scaleY(0.7) translateY(2px);
-    opacity: 1;
-  }
-}
-@keyframes slump {
-  0%,
-  100% {
-    transform: translateY(3px) scaleY(0.9);
-  }
-  50% {
-    transform: translateY(6px) scaleY(0.85);
-  }
-}
-@keyframes drip {
-  0% {
-    transform: translateY(0) scale(0.4);
-    opacity: 0;
-  }
-  18% {
-    opacity: 1;
-  }
-  82% {
-    transform: translateY(20px) scale(1);
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(26px) scale(0.9);
-    opacity: 0;
-  }
-}
-@keyframes poke {
-  0% {
-    transform: scale(1, 1) rotate(0);
-  }
-  22% {
-    transform: scale(1.22, 0.8) rotate(-4deg);
-  }
-  44% {
-    transform: scale(0.85, 1.16) rotate(4deg);
-  }
-  64% {
-    transform: scale(1.1, 0.92) rotate(-2.5deg);
-  }
-  82% {
-    transform: scale(0.97, 1.04) rotate(1deg);
-  }
-  100% {
-    transform: scale(1, 1) rotate(0);
-  }
-}
-@keyframes wake {
-  0% {
-    transform: scaleY(0.8);
-  }
-  35% {
-    transform: scaleY(1.18) translateY(-6px);
-  }
-  70% {
-    transform: scaleY(0.96);
-  }
-  100% {
-    transform: scaleY(1);
-  }
-}
-@keyframes drowse {
-  0% {
-    transform: scaleY(1);
-  }
-  50% {
-    transform: scaleY(0.82) translateY(4px);
-  }
-  100% {
-    transform: scaleY(0.92) translateY(2px);
-  }
-}
-@keyframes celebrate {
-  0% {
-    transform: translateY(0) rotate(0) scale(1, 1);
-  }
-  12% {
-    transform: translateY(-22px) rotate(-9deg) scale(1.04, 0.96);
-  }
-  32% {
-    transform: translateY(0) rotate(7deg) scale(0.95, 1.05);
-  }
-  48% {
-    transform: translateY(-13px) rotate(-5deg) scale(1, 1);
-  }
-  66% {
-    transform: translateY(0) rotate(4deg) scale(0.97, 1.03);
-  }
-  84% {
-    transform: translateY(-5px) rotate(-1.5deg);
-  }
-  100% {
-    transform: translateY(0) rotate(0) scale(1, 1);
-  }
-}
-
-#harness-tabs {
-  display: none;
-  gap: 6px;
-  min-width: 0;
-  margin: 10px 0 0;
-  -webkit-app-region: no-drag;
-}
-body.dual #harness-tabs {
-  display: flex;
-}
-#harness-tabs button {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  gap: 5px;
-  min-width: 0;
-  min-height: 26px;
-  padding: 4px 7px;
-  border: 1px solid #ffffff12;
-  border-radius: 4px;
-  background: #ffffff03;
-  color: var(--muted);
-  font: inherit;
-  font-size: 11px;
-  cursor: pointer;
-}
-#harness-tabs button[aria-selected="true"] {
-  color: var(--text);
-  border-color: #dc997351;
-  background: #d977571c;
-  box-shadow: inset 0 1px 0 #ffffff05;
-}
-#harness-tabs #tab-codex[aria-selected="true"] {
-  border-color: #a7baa14d;
-  background: #a7baa11c;
-}
-#harness-tabs #tab-cursor[aria-selected="true"] {
-  border-color: #a9b8d64d;
-  background: #a9b8d61c;
-}
-#harness-tabs button[hidden] {
-  display: none;
-}
-/* three services: logo and % only; the name stays for screen readers */
-body.trio #harness-tabs button {
-  justify-content: center;
-  gap: 6px;
-}
-body.trio #harness-tabs button > span:not(.tab-value):not(.tab-alert) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-body.trio #harness-tabs .tab-value {
-  margin-left: 0;
-}
-#harness-tabs button:hover {
-  border-color: #ffffff2b;
-  color: var(--text);
-}
-#harness-tabs .tab-logo {
-  width: 12px;
-  height: 12px;
-  flex: none;
-  fill: currentColor;
-  opacity: 0.65;
-}
-#harness-tabs button[aria-selected="true"] .tab-logo {
-  opacity: 1;
-}
-/* brand colours, as in Settings; a working service lights up fully */
-#tab-claude .tab-logo {
-  color: #e4a17c;
-}
-#tab-codex .tab-logo {
-  color: #b9c8b0;
-}
-#tab-cursor .tab-logo {
-  color: #b8c4dc;
-}
-#harness-tabs button.active .tab-logo {
-  opacity: 1;
-}
-#harness-tabs .tab-value {
-  margin-left: auto;
-  font-size: 10px;
-  font-variant-numeric: tabular-nums;
-}
-#harness-tabs button.urgent .tab-value,
-#harness-tabs .tab-alert {
-  color: #f3a38b;
-}
-#harness-tabs .tab-alert[hidden] {
-  display: none;
-}
-#mini-reset {
-  margin-top: 6px;
-  color: #b4a18a;
-  font-size: 9px;
-  line-height: 1.4;
-}
-#mini-reset[hidden] {
-  display: none;
-}
-
-/* the session % is the headline number */
-#limits-meters > .meter:first-child {
-  margin-top: 8px;
-}
-#limits-meters > .meter:first-child .meter-top {
-  align-items: baseline;
-}
-#limits-meters #session-pct {
-  font-size: 27px;
-  letter-spacing: -1px;
-  font-weight: 500;
-  line-height: 1.3;
-}
-#limits-meters > .meter:first-child .track {
-  height: 5px;
-  margin-top: 5px;
-}
-#session-proj:not(.tight) {
-  color: #a6b39c;
-}
-
-/* the Codex view: logs, not a live feed — and its own tint */
-body.view-codex #live-tag {
-  display: none;
-}
-body.view-codex #session-fill,
-body.view-codex #week-fill {
-  background: #a7baa1;
-}
-body.view-codex #session-fill.mid,
-body.view-codex #week-fill.mid {
-  background: #e5b55d;
-}
-body.view-codex #session-fill.hot,
-body.view-codex #week-fill.hot {
-  background: #ee705e;
-}
-body.view-codex .mrow .mbar > i {
-  background: #a7baa1;
-}
-body.view-codex .sq.lv1 {
-  background: #3a503b;
-}
-body.view-codex .sq.lv2 {
-  background: #5b7655;
-}
-body.view-codex .sq.lv3 {
-  background: #8d9f72;
-}
-body.view-codex .sq.lv4 {
-  background: #c2c994;
-}
-
-/* the Cursor view: a monthly budget, read from its dashboard — steel blue */
-body.view-cursor #live-tag,
-body.view-cursor #session-proj,
-body.view-cursor #details-toggle,
-body.view-cursor #usage-details {
-  display: none;
-}
-body.view-cursor #session-fill,
-body.view-cursor #week-fill {
-  background: #9fb2d6;
-}
-body.view-cursor #session-fill.mid,
-body.view-cursor #week-fill.mid {
-  background: #e5b55d;
-}
-body.view-cursor #session-fill.hot,
-body.view-cursor #week-fill.hot {
-  background: #ee705e;
-}
-
-/* collapsed with both: one line per service instead of the ring, never an average */
-#mini-dual {
-  display: none;
-}
-body.collapsed.dual #card {
-  width: 216px;
-  padding: 32px 12px 12px;
-  display: grid;
-  grid-template-columns: 66px minmax(0, 1fr);
-  align-items: center;
-  gap: 8px;
-  border-radius: 9px;
-}
-body.collapsed.dual #stage {
-  height: 70px;
-  width: 66px;
-  margin: 0;
-  background: radial-gradient(ellipse at center, #d9775710, transparent 70%);
-}
-body.collapsed.dual #pet {
-  zoom: 0.7;
-  transform: translateY(-2px);
-}
-body.collapsed.dual #shadow {
-  top: calc(50% + 22px);
-  width: 35px;
-}
-body.collapsed.dual #ring,
-body.collapsed.dual #ring-pct {
-  display: none;
-}
-body.collapsed.dual #mini {
-  min-width: 0;
-  margin: 0;
-}
-body.collapsed.dual #mini-acct-name {
-  max-width: 112px;
-  font-size: 10px;
-}
-
-/* The mood sits beneath the pet, level with the selected source reset. */
-body.collapsed.dual .mini-line {
-  position: absolute;
-  bottom: 12px;
-  left: 12px;
-  width: 66px;
-  justify-content: center;
-  margin: 0;
-  gap: 5px;
-}
-body.collapsed.dual #mini-text {
-  font-size: 9px;
-  font-weight: 400;
-  color: #b9afa3;
-}
-body.collapsed.dual #mini-dot {
-  width: 4px;
-  height: 4px;
-}
-body.collapsed.dual #mini-dual {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 5px;
-}
-.mini-source {
-  --src: #e4a17c;
-  position: relative;
-  display: grid;
-  grid-template-columns: 12px minmax(0, 1fr) auto;
-  align-items: center;
-  column-gap: 5px;
-  row-gap: 4px;
-  min-width: 0;
-  min-height: 29px;
-  padding: 3px 0 3px 5px;
-  border: 0;
-  border-radius: 3px;
-  background: transparent;
-  color: #aaa298;
-  text-align: left;
-  font: inherit;
-  font-size: 10px;
-  cursor: pointer;
-  -webkit-app-region: no-drag;
-  transition: color 0.15s;
-}
-.mini-source[data-provider="codex"] {
-  --src: #b9c8b0;
-}
-.mini-source[data-provider="cursor"] {
-  --src: #b8c4dc;
-}
-.mini-source[hidden] {
-  display: none;
-}
-.mini-logo {
-  grid-column: 1;
-  grid-row: 1;
-  width: 12px;
-  height: 12px;
-  fill: currentColor;
-}
-.mini-source-name {
-  grid-column: 2;
-  grid-row: 1;
-}
-/* Selection uses contrast; urgent readings retain their warning color. */
-.mini-source[aria-pressed="false"] .mini-track i {
-  opacity: 0.55;
-}
-.mini-source[aria-pressed="false"]:hover .mini-track i,
-.mini-source.urgent .mini-track i {
-  opacity: 1;
-}
-.mini-source[aria-pressed="true"] {
-  color: #eee4d9;
-}
-.mini-source[aria-pressed="true"] .mini-logo {
-  color: var(--src);
-}
-.mini-source:hover {
-  color: #fff4e8;
-}
-.mini-source:hover .mini-logo {
-  color: var(--src);
-}
-.mini-source b {
-  grid-column: 3;
-  grid-row: 1;
-  font-size: 15px;
-  line-height: 1.1;
-  letter-spacing: -0.4px;
-  font-weight: 500;
-  color: inherit;
-  font-variant-numeric: tabular-nums;
-}
-.mini-source.urgent b {
-  color: #f3a38b;
-}
-.mini-source.urgent .mini-source-name::after {
-  content: " !";
-  color: #f3a38b;
-}
-.mini-track {
-  grid-column: 2 / -1;
-  grid-row: 2;
-  height: 2px;
-  border-radius: 2px;
-  overflow: hidden;
-  background: #ffffff0d;
-}
-body.collapsed.dual #mini-reset {
-  text-align: right;
-  margin-top: 7px;
-  font-size: 8px;
-  color: #b4a18a;
-}
-
-.mini-track i {
-  display: block;
-  height: 100%;
-  width: 0;
-  background: #d97757;
-}
-#mini-codex-bar {
-  background: #a7baa1;
-}
-#mini-cursor-bar {
-  background: #9fb2d6;
-}
-.mini-track i.hot,
-#mini-codex-bar.hot,
-#mini-cursor-bar.hot {
-  background: #ee705e;
-}
-
-/* Settings → Connections: a row of service tiles; the open one shows its card */
-#conn-tiles {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 6px;
-  margin: 7px 0 4px;
-}
-body:has(#connections > .open) #conn-tiles {
-  margin-bottom: 8px;
-}
-.conn-tile {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-  padding: 8px 4px 7px;
-  border: 1px solid var(--hair);
-  border-radius: 8px;
-  background: #ffffff03;
-  color: var(--muted);
-  font: inherit;
-  cursor: pointer;
-  -webkit-app-region: no-drag;
-  transition:
-    border-color 0.15s,
-    background 0.15s;
-}
-.conn-tile:hover {
-  border-color: #ffffff24;
-  background: #ffffff07;
-}
-.conn-tile[aria-expanded="true"] {
-  border-color: #ffffff38;
-  background: #ffffff0a;
-}
-.conn-tile .connection-avatar {
-  position: relative;
-  display: grid;
-  place-items: center;
-  width: 26px;
-  height: 26px;
-  border-radius: 6px;
-}
-/* not connected yet: the logo waits in grey */
-.conn-tile:not(.on) .connection-avatar {
-  filter: grayscale(1);
-  opacity: 0.6;
-}
-.conn-check {
-  position: absolute;
-  right: -5px;
-  bottom: -5px;
-  display: grid;
-  place-items: center;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: #8fc58a;
-  color: #17201a;
-  font-size: 9px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 1;
-  box-shadow: 0 0 0 2px var(--card-bg, #1e1a17);
-}
-.conn-check[hidden] {
-  display: none;
-}
-.conn-name {
-  font-size: 11px;
-  color: var(--text);
-}
-.conn-state {
-  font-size: 10px;
-  line-height: 1.3;
-}
-.conn-tile.on .conn-state:not(.plan-badge) {
-  color: #a9c7a2;
-}
-#connections > .conn-panel:not(.open) {
-  display: none;
-}
-#connections > .open {
-  margin: 0 0 18px;
-}
-
-/* Settings → Connections: Claude and Codex share one card shape */
-.connections-label {
-  margin-top: 18px;
-  margin-bottom: 0;
-}
-#account .connect-block {
-  margin: 7px 0 8px;
-}
-#codex-settings {
-  display: flex;
-  margin: 0 0 8px;
-}
-.codex-actions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex: none;
-}
-#codex-setup:not([hidden]) {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-.codex-x {
-  display: grid;
-  place-items: center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  border: 0;
-  border-radius: 3px;
-  background: none;
-  color: var(--muted);
-  cursor: pointer;
-}
-.codex-x:hover {
-  color: var(--text);
-  background: #ffffff0d;
-}
-.codex-x .ic {
-  width: 12px;
-  height: 12px;
-}
-/* which pieces show: off, setting up, or on */
-#codex-disconnect,
-body.codex-on #codex-hint,
-body.codex-on #codex-connect,
-body.codex-setup #codex-connect {
-  display: none;
-}
-body.codex-on #codex-disconnect {
-  display: grid;
-}
-#cursor-settings {
-  display: flex;
-  margin: 0 0 18px;
-}
-#cursor-disconnect,
-body.cursor-on #cursor-hint,
-body.cursor-on #cursor-connect,
-body.cursor-setup #cursor-connect {
-  display: none;
-}
-body.cursor-on #cursor-disconnect {
-  display: grid;
-}
-#cursor-setup:not([hidden]) {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-body.view-cursor .ac-caret {
-  display: none;
-}
-body.view-codex .mrow .mname::before {
-  background: #a7baa1;
-}
-/* no account switcher on the Codex side: the chip opens Settings */
-body.view-codex .ac-caret {
-  display: none;
-}
-/* keyboard focus: a soft inner glow in the brand coral rather than a detached
-   cream ring — still visible, but it reads as the control lighting up */
-#card button:focus-visible,
-#card input:focus-visible,
-#account-chip:focus-visible {
-  outline: none;
-  box-shadow:
-    inset 0 0 0 1px #e6a07f8c,
-    0 0 0 3px #d977571f;
-}
-#controls button:focus-visible {
-  background: rgba(255, 255, 255, 0.1);
-  color: #fff;
-}
-@media (prefers-reduced-motion: reduce) {
-  #card,
-  #settings,
-  .fill,
-  .sec-body,
-  .sec-chev {
-    transition: none;
-    animation: none;
-  }
-}
-
-/* the Codex view is tinted sage, even when Codex is the only service */
-body.view-codex {
-  --panel-bg:
-    radial-gradient(130% 110% at 20% 0%, #6c816830, transparent 60%),
-    linear-gradient(158deg, #242b24, #1b211c 55%, #141a15);
-  --panel-border: #b4c6ac20;
-  --settings-bg: linear-gradient(150deg, #283028, #1b211c);
-}
-body.view-cursor {
-  --panel-bg:
-    radial-gradient(130% 110% at 20% 0%, #5f6d8a30, transparent 60%),
-    linear-gradient(158deg, #23262d, #1a1d23 55%, #14161b);
-  --panel-border: #b6c2dc20;
-  --settings-bg: linear-gradient(150deg, #272b33, #1a1d23);
-}
-#details-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  min-height: 32px;
-  padding: 9px 0 1px;
-  border: 0;
-  border-top: 1px solid var(--hair);
-  background: none;
-  color: #c4b9aa;
-  font: inherit;
-  font-size: 11px;
-  cursor: pointer;
-  -webkit-app-region: no-drag;
-}
-#details-toggle:hover {
-  color: var(--text);
-}
-#details-toggle[aria-expanded="true"] .sec-chev {
-  transform: rotate(180deg);
-}
-#usage-details[hidden] {
-  display: none;
-}
-#usage-details {
-  padding-top: 10px;
-}
-#usage-details > .sec:first-child {
-  border-top: 0;
-}
-
-#acc-connected.connection-card,
-#acc-intro.connection-card,
-#codex-settings.connection-card,
-#cursor-settings.connection-card {
-  align-items: center;
-  gap: 10px;
-  min-height: 64px;
-  padding: 10px;
-  border: 1px solid var(--hair);
-  border-radius: 6px;
-  background: #ffffff03;
-}
-#acc-connected.connection-card,
-body.codex-on #codex-settings.connection-card,
-body.cursor-on #cursor-settings.connection-card {
-  height: 64px;
-}
-.connection-card .connection-avatar {
-  display: grid;
-  place-items: center;
-  flex: none;
-  width: 28px;
-  height: 28px;
-  border-radius: 5px;
-}
-.claude-avatar {
-  background: #d9775718;
-  color: #e4a17c;
-}
-.codex-avatar {
-  background: #9eaf9614;
-  color: #b9c8b0;
-}
-.cursor-avatar {
-  background: #a9b8d614;
-  color: #b8c4dc;
-}
-.connection-logo,
-.codex-logo,
-.cursor-logo {
-  fill: currentColor;
-}
-.connection-avatar svg {
-  width: 18px;
-  height: 18px;
-}
-.connection-card .connection-copy {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  flex: 1;
-  gap: 5px;
-}
-.connection-heading {
-  min-height: 17px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-}
-.connection-heading b {
-  font-size: 11px;
-  font-weight: 500;
-  color: var(--text);
-}
-.connection-heading .plan-badge {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  height: 17px;
-  padding: 0 4px;
-  border: 1px solid #cbb3942b;
-  border-radius: 3px;
-  font-size: 9px;
-  line-height: 1;
-  color: #beaa92;
-  text-transform: capitalize;
-}
-.connection-heading .plan-badge[hidden] {
-  display: none;
-}
-.connection-card .connection-caption {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: #ada193;
-  font-size: 10px;
-  font-weight: 400;
-  line-height: 1.3;
-}
-#codex-connected-caption {
-  display: none;
-}
-body.codex-on #codex-connected-caption {
-  display: block;
-}
-#cursor-connected-caption {
-  display: none;
-}
-body.cursor-on #cursor-connected-caption {
-  display: block;
-}
-.connection-card .connection-remove {
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 5px;
-  border: 0;
-  border-radius: 4px;
-  color: #b0a498;
-  background: transparent;
-  cursor: pointer;
-  -webkit-app-region: no-drag;
-}
-.connection-card .connection-remove:hover {
-  background: #ffffff0b;
-  color: #f0bc9b;
-}
-.connection-card .connection-remove .ic {
-  width: 13px;
-  height: 13px;
-  stroke-width: 1.8;
-}
-#acc-intro.connection-card {
-  display: flex;
-}
-body.awaiting #acc-intro.connection-card {
-  display: none;
-}
-.connection-card .connection-hint {
-  white-space: normal;
-  color: var(--muted);
-  font-size: 9px;
-  line-height: 1.35;
-}
-.connection-btn {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  gap: 4px;
-  height: 22px;
-  padding: 0 8px;
-  border: 1px solid #a6b79b42;
-  border-radius: 4px;
-  background: #a6b79b0c;
-  color: #c2d0b8;
-  font: inherit;
-  font-size: 10px;
-  cursor: pointer;
-  -webkit-app-region: no-drag;
-}
-.connection-btn:hover {
-  background: #a6b79b1c;
-}
-.connection-btn svg {
-  width: 12px;
-  height: 12px;
-}
-.claude-connect-btn {
-  border-color: #ce926d59;
-  background: #ce926d17;
-  color: #e3b193;
-}
-.claude-connect-btn:hover {
-  background: #ce926d33;
-}
-
-/* ---- voice: speech bubble + mute ---- */
-/* the bubble speaks the sprite's language: square pixels, a notched 2px
-   outline (no radius), a stepped tail aimed at the pet's head, small type */
-#bubble {
-  --ink: #221b16;
-  --paper: #f1e9dd;
-  position: absolute;
-  left: 84px;
-  top: 16px;
-  z-index: 4;
-  max-width: 148px;
-  padding: 5px 7px 6px;
-  background: var(--paper);
-  color: var(--ink);
-  font:
-    600 9px / 1.35 ui-monospace,
-    "SF Mono",
-    Menlo,
-    monospace;
-  letter-spacing: -0.01em;
-  /* four offset edges instead of a border: the corners stay open, like a sprite */
-  box-shadow:
-    0 -2px 0 0 var(--ink),
-    0 2px 0 0 var(--ink),
-    -2px 0 0 0 var(--ink),
-    2px 0 0 0 var(--ink),
-    2px 4px 0 0 #0006;
-  cursor: pointer;
-  -webkit-app-region: no-drag;
-  transform-origin: 0% 100%;
-  animation: bubble-pop 0.18s steps(3, end);
-}
-#bubble[hidden] {
-  display: none;
-}
-/* the tail: a stepped right triangle hanging off the bottom-left edge, aimed
-   down at the pet. The ink one is the outline; the paper one sits 2px inside it
-   and starts on the outline row, so the bubble opens into the tail */
-#bubble::before,
-#bubble::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-}
-#bubble::before {
-  left: 8px;
-  width: 14px;
-  height: 12px;
-  background: var(--ink);
-  clip-path: polygon(
-    0 0,
-    14px 0,
-    14px 2px,
-    12px 2px,
-    12px 4px,
-    10px 4px,
-    10px 6px,
-    8px 6px,
-    8px 8px,
-    6px 8px,
-    6px 10px,
-    4px 10px,
-    4px 12px,
-    0 12px
-  );
-}
-#bubble::after {
-  left: 10px;
-  width: 10px;
-  height: 10px;
-  background: var(--paper);
-  clip-path: polygon(
-    0 0,
-    10px 0,
-    10px 2px,
-    8px 2px,
-    8px 4px,
-    6px 4px,
-    6px 6px,
-    4px 6px,
-    4px 8px,
-    2px 8px,
-    2px 10px,
-    0 10px
-  );
-}
-#bubble.leaving {
-  animation: bubble-out 0.15s steps(2, end) forwards;
-}
-@keyframes bubble-pop {
-  from {
-    transform: scale(0.5);
-    opacity: 0;
-  }
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-@keyframes bubble-out {
-  to {
-    transform: scale(0.8);
-    opacity: 0;
-  }
-}
-body.settings-open #bubble {
-  display: none;
-}
-/* collapsed: above the pet, in the card's flow, tail pointing straight down */
-body.collapsed #bubble {
-  position: relative;
-  left: auto;
-  top: auto;
-  max-width: none;
-  margin: 6px 2px 14px;
-  grid-column: 1 / -1;
-  transform-origin: 50% 100%;
-}
-/* one service: the card has no title band, so clear the window controls, and
-   hug the short line instead of spanning the whole card */
-body.collapsed:not(.dual) #bubble {
-  align-self: center;
-  margin-top: 26px;
-  text-align: center;
-}
-body.collapsed.dual #bubble {
-  justify-self: start;
-}
-body.collapsed #bubble::before {
-  left: calc(50% - 7px);
-}
-body.collapsed #bubble::after {
-  left: calc(50% - 5px);
-}
-/* with both services the pet sits in the left column: aim there */
-body.collapsed.dual #bubble::before {
-  left: 24px;
-}
-body.collapsed.dual #bubble::after {
-  left: 26px;
-}
-
-#controls button[hidden] {
-  display: none;
-}
-/* a fifth button pushes #controls ~23px left: the account chip gives that up.
-   Minimized is always silent, so the button (and the squeeze) go away there */
-body.has-mute #account-chip {
-  max-width: 141px;
-}
-body.collapsed #mute {
-  display: none;
-}
-#mute .ic-muted,
-#mute.muted .ic-sound {
-  display: none;
-}
-#mute.muted .ic-muted {
-  display: block;
-}
-#mute.muted {
-  color: var(--coral-soft);
-}
-
-.set-row.voice-sub .set-row-label {
-  font-weight: 400;
-  font-size: 10.5px;
-  color: var(--muted);
-}
-#set-rows.talk-off .voice-sub {
-  opacity: 0.35;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  #bubble,
-  #bubble.leaving {
-    animation: none;
-  }
-}
-
-/* Companion controls stay quiet until they are useful. */
-#controls #pet-only-toggle,
-#pet-glance {
-  display: none;
-}
-body.collapsed:not(.pet-only):not(.is-menubar) #controls #pet-only-toggle {
-  display: grid;
-}
-.reminder-toggle {
-  display: inline-flex;
-  align-items: center;
-  min-height: 24px;
-  margin-top: 4px;
-  padding: 2px 6px;
-  border: 1px solid var(--hair);
-  border-radius: 3px;
-  background: #ffffff04;
-  color: #cfc0ac;
-  font: inherit;
-  font-size: 10px;
-  cursor: pointer;
-  -webkit-app-region: no-drag;
-}
-.reminder-toggle[hidden] {
-  display: none;
-}
-.reminder-toggle[aria-pressed="true"] {
-  color: #bed4aa;
-  border-color: #bed4aa33;
-}
-.reminder-toggle:hover {
-  background: #ffffff0c;
-}
-#mini-reminder {
-  font-size: 8px;
-  min-height: 20px;
-}
-body.collapsed.dual #mini-reminder {
-  float: right;
-}
-#companion-notice {
-  grid-column: 1 / -1;
-  padding: 6px 8px;
-  margin-top: 6px;
-  border-radius: 4px;
-  background: #ffffff07;
-  color: #d5c6b6;
-  font-size: 10px;
-  line-height: 1.4;
-  text-align: center;
-  -webkit-app-region: no-drag;
-}
-#companion-notice[data-provider="codex"] {
-  color: #c1d1b8;
-}
-#companion-notice[data-provider="cursor"] {
-  color: #c3cde2;
-}
-#companion-notice[hidden],
-body.settings-open #companion-notice {
-  display: none;
-}
-/* Hover only fades the glance in; neither the window nor the pet moves. */
-body.collapsed.pet-only #card {
-  width: 144px;
-  height: 166px;
-  padding: 0;
-  display: block;
-  background: transparent;
-  border-color: transparent;
-  box-shadow: none;
-  overflow: visible;
-  -webkit-app-region: no-drag;
-}
-body.collapsed.pet-only #stage {
-  position: absolute;
-  width: 100px;
-  height: 102px;
-  right: 21px;
-  bottom: 14px; /* low in the window: the glance bubble sits above the pet */
-  margin: 0;
-  background: none;
-}
-/* three readings need a wider glance: the card grows, the pet stays centred */
-body.collapsed.pet-only.trio #card {
-  width: 188px;
-}
-body.collapsed.pet-only.trio #stage {
-  right: 43px;
-}
-body.collapsed.pet-only.trio #pet-activity:not([hidden]) {
-  right: 22px;
-}
-body.collapsed.pet-only #pet {
-  zoom: 1.05;
-  transform: none;
-  transition: none;
-  cursor: grab;
-  -webkit-app-region: drag;
-}
-body.collapsed.pet-only #pet:active {
-  cursor: grabbing;
-}
-/* the bigger pet sits lower: the floor shadow follows its feet */
-body.collapsed.pet-only #shadow {
-  top: calc(50% + 37px);
-  width: 56px;
-  height: 9px;
-}
-body.collapsed.pet-only :is(#mini, #controls, #ring, #ring-pct, #companion-notice, #bubble) {
-  display: none;
-}
-/* The glance is the pet's own speech bubble, small: the same paper, pixel
-   outline and mono type as #bubble, above the pet with its tail pointing down, so the
-   pet reads as showing you the numbers. One reading per service (logo, %, a
-   green bar that fills with it), then the expand button. */
-body.collapsed.pet-only #pet-glance {
-  --ink: #221b16;
-  --paper: #f1e9dd;
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1px;
-  left: 50%;
-  width: max-content;
-  max-width: calc(100% - 6px);
-  transform: translate(-50%, -4px);
-  top: 10px;
-  min-height: 24px;
-  padding: 1px 2px 1px 3px;
-  background: var(--paper);
-  color: var(--ink);
-  font:
-    600 10px / 1 ui-monospace,
-    "SF Mono",
-    Menlo,
-    monospace;
-  box-shadow:
-    0 -2px 0 0 var(--ink),
-    0 2px 0 0 var(--ink),
-    -2px 0 0 0 var(--ink),
-    2px 0 0 0 var(--ink),
-    2px 4px 0 0 #0006;
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    opacity 160ms ease,
-    transform 200ms steps(3),
-    visibility 160ms;
-  -webkit-app-region: no-drag;
-}
-body.collapsed.pet-only.pet-peek #pet-glance {
-  opacity: 1;
-  visibility: visible;
-  transform: translate(-50%, 0);
-}
-/* the tail, stepped like the bubble's, pointing down at the pet */
-body.collapsed.pet-only #pet-glance::before,
-body.collapsed.pet-only #pet-glance::after {
-  content: "";
-  position: absolute;
-  left: 50%;
-  top: 100%;
-  transform: translateX(-50%);
-}
-body.collapsed.pet-only #pet-glance::before {
-  width: 14px;
-  height: 8px;
-  background: var(--ink);
-  clip-path: polygon(
-    0 0,
-    14px 0,
-    14px 2px,
-    12px 2px,
-    12px 4px,
-    10px 4px,
-    10px 6px,
-    8px 6px,
-    8px 8px,
-    6px 8px,
-    6px 6px,
-    4px 6px,
-    4px 4px,
-    2px 4px,
-    2px 2px,
-    0 2px
-  );
-}
-body.collapsed.pet-only #pet-glance::after {
-  width: 10px;
-  height: 6px;
-  background: var(--paper);
-  clip-path: polygon(
-    0 0,
-    10px 0,
-    10px 2px,
-    8px 2px,
-    8px 4px,
-    6px 4px,
-    6px 6px,
-    4px 6px,
-    4px 4px,
-    2px 4px,
-    2px 2px,
-    0 2px
-  );
-}
-#pet-glance button[data-provider] {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 3px;
-  height: 22px;
-  padding: 0 4px 3px;
-  border: 0;
-  background: transparent;
-  color: var(--ink);
-  font: inherit;
-  cursor: pointer;
-  opacity: 0.5;
-  transition: opacity 0.15s;
-}
-#pet-glance button[data-provider][aria-pressed="true"],
-#pet-glance button[data-provider]:hover {
-  opacity: 1;
-}
-#pet-glance .mini-logo {
-  flex: none;
-  width: 11px;
-  height: 11px;
-  fill: currentColor;
-}
-/* the session % as a pixel bar under the reading */
-#pet-glance .glance-bar {
-  position: absolute;
-  left: 4px;
-  right: 4px;
-  bottom: 2px;
-  height: 2px;
-  background: #221b1622;
-  overflow: hidden;
-}
-#pet-glance .glance-bar::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  width: calc(var(--pct, 0) * 1%);
-  background: #3f9f5a;
-  transition: width 0.4s steps(6);
-}
-#pet-glance .glance-sep {
-  flex: none;
-  width: 2px;
-  height: 12px;
-  margin: 0 2px;
-  background: #221b1633;
-}
-#pet-glance:has(#glance-empty:not([hidden])) .glance-sep {
-  display: none;
-}
-#pet-glance #pet-restore {
-  display: grid;
-  place-items: center;
-  width: 26px;
-  height: 24px;
-  margin-right: -2px;
-  flex-shrink: 0;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--ink);
-  cursor: pointer;
-  opacity: 0.55;
-}
-#pet-glance #pet-restore svg {
-  width: 11px;
-  height: 11px;
-  stroke-width: 2.2;
-}
-#pet-glance #pet-restore:hover,
-#pet-glance #pet-restore:focus-visible {
-  opacity: 1;
-}
-/* Keep provider names available to assistive technology. */
-#pet-glance button > span {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-#pet-glance button[hidden] {
-  display: none;
-}
-#pet-glance button:focus-visible {
-  outline: 2px solid var(--ink);
-  outline-offset: -2px;
-}
-#pet-glance b {
-  font-weight: 700;
-  font-variant-numeric: tabular-nums;
-}
-#pet-glance .urgent b {
-  color: #c0392b;
-}
-/* a reading still waiting for a fresh one: its bar goes dotted */
-#pet-glance .stale-reading .glance-bar::after {
-  background: repeating-linear-gradient(90deg, #3f9f5a 0 2px, transparent 2px 4px);
-}
-#glance-empty {
-  padding: 0 4px;
-  color: var(--ink);
-}
-body.collapsed.pet-only #pet:focus-visible {
-  outline: none;
-}
-@media (prefers-reduced-motion: reduce) {
-  body.collapsed.pet-only #pet-glance,
-  body.collapsed.pet-only #pet-glance > * {
-    transition: none;
-  }
-}
-/* A short reaction temporarily occupies the account label, so the compact
-   widget stays still instead of growing for every activity transition. */
-body.collapsed.dual:not(.pet-only) #companion-notice {
-  position: absolute;
-  top: 12px;
-  left: 12px;
-  right: 78px;
-  margin: 0;
-  padding: 0;
-  background: none;
-  font-size: 8px;
-  text-align: left;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-body.collapsed.dual:has(#companion-notice:not([hidden])) #mini-acct {
-  visibility: hidden;
-}
-
-/* Activity belongs to the pet, independently of the selected usage tab. */
-.activity-logos {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  flex-shrink: 0;
-}
-.activity-logos [data-provider="claude"] {
-  color: #df9777;
-}
-.activity-logos [data-provider="codex"] {
-  color: #b9c8b0;
-}
-.activity-logos [data-provider="cursor"] {
-  color: #b8c4dc;
-}
-.activity-logos svg {
-  display: block;
-  width: 11px;
-  height: 11px;
-  fill: currentColor;
-}
-.activity-logos[hidden],
-.activity-logos [hidden],
-#mini-dot[hidden],
-#pet-activity {
-  display: none;
-}
-body.collapsed.pet-only #pet-activity:not([hidden]) {
-  position: absolute;
-  top: 54px;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  padding: 5px;
-  border-radius: 5px;
-  background: #221e1be6;
-  border: 1px solid #ffffff0d;
-  pointer-events: none;
-}