[data-demo="ai-usage"] {
  background: #fff9f7 url("pastel-gradient.png") center / 100% 100% no-repeat;
}
.stats {
  position: absolute; left: 50%; top: 50%; width: 318px; height: 318px;
  transform: translate(-50%, -50%) scale(2.222222);
  overflow: hidden; isolation: isolate; border-radius: 28px;
  background: rgb(249 250 252 / 58%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 68%), 0 6px 20px -12px rgb(57 47 65 / 17%);
  color: #212121; font: 500 15px/1.25 Inter, "PingFang SC", system-ui, sans-serif;
}
.stats button, .stats input { font: inherit; color: inherit; }
.stats button, .stats label { cursor: pointer; touch-action: manipulation; }
.stats button:focus-visible, .plot:focus-visible { outline: 2px solid #476791; outline-offset: -2px; }
.stats header { position: absolute; inset: 17px 18px auto; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.stats svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.view-control { position: relative; width: 65px; height: 42px; border-radius: 12px; }
.view-control button { display: flex; align-items: center; justify-content: center; gap: 13px; }
.view-symbol { transform-origin: 12px 12px; }
.filter {
  display: flex; gap: 6px; align-items: center; justify-content: center;
  min-width: 98px; height: 42px; border: 1px solid #dbdbdb; border-radius: 13px;
  background: transparent;
}
.filter:hover, .filter[aria-expanded="true"] { background: #e8e8e8; }
.stats fieldset {
  position: absolute; top: 46px; right: 0; min-width: 110px; padding: 5px;
  margin: 0; border: 1px solid #e3e3e3; border-radius: 12px; background: white; box-shadow: 0 5px 18px #0001;
}
.stats legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.stats label { display: flex; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 8px; }
.stats label:hover { background: #f1f1f1; }
.stats input { accent-color: #363636; }
.plot { position: absolute; inset: 76px 0 17px; margin: 0; padding: 0; list-style: none; overflow: visible; }
.stats[data-view="list"]:not([data-moving]) .plot { overflow: hidden auto; scrollbar-width: none; }
.plot::-webkit-scrollbar { display: none; }
.app-tile { position: absolute; top: 0; left: 0; margin: 0; background: #fff; overflow: hidden; }
.app-mark { position: absolute; left: 0; top: 0; width: 22px; height: 22px; object-fit: contain; }
.app-copy { position: absolute; inset: 0 auto auto 47px; width: 222px; height: 52px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.app-name { color: #686868; }
.app-count { margin-left: auto; font-weight: 630; font-variant-numeric: tabular-nums; }
.app-share { min-width: 43px; text-align: center; border-radius: 20px; background: #f1f1f1; padding: 5px 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
.bar-stripes { position: absolute; inset: 2px; border-radius: inherit; background: repeating-linear-gradient(120deg,#f1f1f1 0 3px,transparent 3px 7px); }
.app-tile[data-app="deepseek"] .bar-stripes { bottom: 52%; }
.stats footer { position: absolute; left: 18px; bottom: 18px; display: grid; gap: 2px; pointer-events: none; }
.stats footer span { color: #686868; }
.stats footer strong { font-size: 15px; font-weight: 620; }