/* 她的「今日小屏」(10-31):左上角小熊 + 点开的像素小卡片。白天 = 她那张参考图的薄荷方格屏 + 粉框;
   夜里 = Day5 小王子那片夜空的深蓝屏 + 暗紫框。图标是 her-todo.js 里画的像素块,颜色走 --ht-ink。
   字(10-31 下午她挑的「方舟吧」):卡片里全用方舟像素 12px(TakWolf,OFL,协议原文在 fonts/ 里);方舟没画的字(比如「潮汐」的「汐」)
   从缝合像素借,同一作者拿方舟补全的版本,两边都有的字一笔不差。像素字只在 12px / 24px 上清楚,也没有粗体:卡片里别加粗、别加字距。 */
@font-face { font-family: "HTPX"; src: url(/static/fonts/ark-pixel-12px.woff2?v=1) format("woff2"); font-display: swap; }
@font-face { font-family: "HTPX-fill"; src: url(/static/fonts/fusion-pixel-12px-fill.woff2?v=1) format("woff2"); font-display: swap; }

/* 11-01:小熊层级压到侧栏(21)和各种弹层(思考链底卡 / 选项 / 看图…)下面 —— 原来 60,侧栏一开它就浮在上面挡住「心里」 */
.ht-bear { position: fixed; left: 10px; top: 72px; z-index: 19; width: 54px; height: 54px; padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.ht-bear img { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .28)); }
.ht-badge { position: absolute; right: -5px; top: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; box-sizing: border-box;
  background: #e0679b; color: #fff; font: 700 10.5px/17px ui-monospace, "SF Mono", Menlo, monospace; text-align: center; box-shadow: 0 0 0 2px #fff7fb; }
.ht-bear.has { animation: ht-bob 3.4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes ht-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-2px) rotate(-5deg); } }

.ht-card { position: fixed; left: 10px; top: 120px; z-index: 61; width: min(332px, calc(100vw - 20px)); max-height: calc(100vh - 140px); overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-sizing: border-box; padding: 9px; border-radius: 22px;
  --ht-ink: #f3e9d2; --ht-sub: #c9b8ef; --ht-screen: #1f2a4a; --ht-grid: rgba(255, 255, 255, .055); --ht-frame: #3a3366; --ht-dot: #f49ac1; --ht-chip: #2c3763;
  background: var(--ht-frame); box-shadow: 0 16px 36px rgba(0, 0, 0, .34), inset 0 0 0 2px rgba(255, 255, 255, .14);
  transform-origin: 27px -24px; transform: scale(.9); opacity: 0; pointer-events: none; transition: transform .22s cubic-bezier(.2, .9, .3, 1.2), opacity .16s ease; }
.ht-card.on { transform: none; opacity: 1; pointer-events: auto; }
.ht-card[data-theme="day"] { --ht-ink: #4d3f7a; --ht-sub: #7a6aa6; --ht-screen: #e6f3ea; --ht-grid: rgba(110, 150, 130, .17); --ht-frame: #f6c1d3; --ht-dot: #f08fb6; --ht-chip: #f9dbe7;
  box-shadow: 0 16px 36px rgba(120, 60, 90, .22), inset 0 0 0 2px rgba(255, 255, 255, .55); }

.ht-screen { border-radius: 14px; padding: 10px 12px 12px; color: var(--ht-ink); background-color: var(--ht-screen);
  background-image: linear-gradient(var(--ht-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ht-grid) 1px, transparent 1px); background-size: 8px 8px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ht-ink) 75%, transparent);
  font: 400 12px/1.5 "HTPX", "HTPX-fill", -apple-system, "PingFang SC", "Noto Sans SC", sans-serif; font-synthesis: none; letter-spacing: 0; }
.ht-px { display: inline-block; height: 12px; width: auto; vertical-align: -1px; }
.ht-px.xs { height: 9px; }
.ht-px.sm { height: 13px; flex: 0 0 auto; }
.ht-px.md { height: 26px; flex: 0 0 auto; }
.ht-px.lg { height: 20px; }
.ht-pxbear { height: 20px; width: auto; image-rendering: pixelated; }

.ht-top { display: flex; align-items: center; gap: 8px; }
.ht-hearts { display: inline-flex; gap: 2px; }
.ht-top .ht-day, .ht-top .ht-time { font-size: 24px; line-height: 1; }
.ht-top .ht-day { margin-left: auto; }
.ht-top .ht-time { margin-left: 4px; }
.ht-sep { margin: 8px 0; border-bottom: 3px dotted var(--ht-dot); }
/* 11-05 记忆经验条(代替上面那条点点线):左边「记忆」,中间十格,右边 攒了几条 / 满多少条写一次;满了右边冒一颗小星 */
.ht-exp { display: flex; align-items: center; gap: 7px; margin: 7px 0 8px; }
.ht-exp .lb { color: var(--ht-sub); }
.ht-exp .bar { flex: 1; display: grid; grid-template-columns: repeat(10, 1fr); align-items: stretch; gap: 2px; height: 12px; padding: 3px; box-sizing: border-box;
  box-shadow: inset 0 0 0 2px var(--ht-ink); }
.ht-exp .bar i { display: block; height: 6px; background: color-mix(in srgb, var(--ht-ink) 13%, transparent); }
.ht-exp .bar i.on { background: var(--ht-dot); }
.ht-exp .num { white-space: nowrap; }
.ht-who { display: flex; align-items: center; gap: 9px; }
.ht-who .sub { color: var(--ht-sub); margin-top: 2px; }
.ht-who .dt { margin-left: auto; text-align: right; }
.ht-pic { position: relative; margin: 9px 0 8px; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 2px var(--ht-ink); line-height: 0; }
.ht-pic img { width: 100%; height: auto; image-rendering: pixelated; }
.ht-pic i { position: absolute; width: 3px; height: 3px; background: #fff3a8; box-shadow: 3px 0 #fff3a8, -3px 0 #fff3a8, 0 3px #fff3a8, 0 -3px #fff3a8; }
.ht-pic .s1 { left: 14%; top: 18%; } .ht-pic .s2 { left: 62%; top: 12%; } .ht-pic .s3 { left: 86%; top: 30%; }
.ht-mood { display: flex; align-items: center; gap: 12px; }
.ht-say { margin: 9px 0 0; padding: 7px 10px; border-radius: 6px; background: color-mix(in srgb, var(--ht-screen) 55%, #ffffff 12%);
  box-shadow: 0 0 0 2px var(--ht-ink); }
.ht-card[data-theme="day"] .ht-say { background: #fbfff9; }
.ht-say .ht-line { display: flex; margin: 0; align-items: center; gap: 8px; padding: 4px 0; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.ht-say .ht-line + .ht-line { border-top: 2px dotted color-mix(in srgb, var(--ht-dot) 60%, transparent); }
.ht-say .ht-line span { flex: 1; min-width: 0; }
.ht-say .ht-line i { font-style: normal; color: var(--ht-dot); }
.ht-done { margin: 4px 0; text-align: center; }
.ht-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 11px; }
.ht-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 6px; border-radius: 9px; text-decoration: none;
  color: var(--ht-ink); background: var(--ht-chip); box-shadow: inset 0 0 0 2px var(--ht-ink), 0 2px 0 color-mix(in srgb, var(--ht-ink) 30%, transparent);
  -webkit-tap-highlight-color: transparent; }
.ht-btn.idle { opacity: .5; }
.ht-btn:active { transform: translateY(1px); box-shadow: inset 0 0 0 2px var(--ht-ink); }
.ht-n { position: absolute; right: -6px; top: -7px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 10px; box-sizing: border-box;
  background: #e0679b; color: #fff; font-weight: 400; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--ht-screen); }
.ht-foot { margin: 10px 0 0; text-align: center; color: var(--ht-sub); }
@media (prefers-reduced-motion: reduce) {
  .ht-bear.has { animation: none; }
  .ht-card { transition: none; }
}