/* 首杀 · 艺人的家 ·「记一笔」的即时反馈（Fable 11-14）
   回路：她的笔从本子飞到你那句话上 → 落笔盖章（加 / 扣 / 没记）→ 章飞回本子 → 分数跳、名牌蹦、下一条线的格子亮。
   所有时长乘 --fxk（慢放截图用，平时是 1）。

   这一块能整块搬走：样式只认 .hm-two（对话框 .hm-chat + 本子 .hm-book + 特效层 .hm-fx），不认页面外框。搬的时候外面要给它：
   · 颜色和字：tokens.css 的 --fb-*、--font-*；艺人色 --her / --her-glow / --her-ink（home.css 的 .cs-profile 上定的）；像素切角 .fb-px（firstblood.css）
   · 单栏的时候某一层祖先上有 .cs--m（现在是 home.js 的 fit() 按宽度加的）
   · 两栏时本子要钉在屏幕里：祖先不能是滚动容器（下面第一条规则把 .cs.cs-profile 的 overflow:hidden 换成 clip）
   · 名次的名牌和它旁边那句是 account.css / account.js 的 rk-（FBRank），这里只管记分条里那块小牌 */
.hm-two { --fxk: 1; --up: var(--fb-neon-green); --up-ink: var(--fb-on-green); --up-key: var(--fb-green-key); --down: var(--fb-rust); --down-ink: #fff; --down-key: #6e2c0b; }
.hm-two [hidden] { display: none !important; }

/* ── 版式：两栏时本子钉在屏幕里（聊天框比屏幕高的时候，输入框在下面、本子的分数也还看得见）；单栏时照原样排在下面。
      钉住要求外层不是滚动容器，所以把装着这一块的页面外框的 overflow:hidden 换成 clip（照样裁掉出界的背景，只是不再算滚动容器） ── */
.cs.cs-profile:has(.hm-fx) { overflow: clip; }
.hm-two:has(> .hm-fx) { align-items: start; }
.hm-two > .hm-book { position: sticky; top: 12px; height: 100%; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); scroll-margin-top: 12px; }
.cs--m .hm-two > .hm-book { position: relative; top: auto; height: auto; max-height: none; }
.hm-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.hm-fx > * { position: absolute; left: 0; top: 0; will-change: transform, opacity; }

/* ── 她的笔：像素小铅笔，笔杆是她的颜色。平时搁在两块面板之间；她看哪句，笔就在哪句上 ── */
.hm-pen { position: relative; display: inline-block; flex: none; width: 32px; height: 10px; }
.hm-pen::before, .hm-pen::after { content: ""; position: absolute; inset: 0; -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; }
.hm-pen::before { --m: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 5%22 shape-rendering=%22crispEdges%22%3E%3Cpath d=%22M5 0h7v5h-7z%22/%3E%3C/svg%3E"); background: linear-gradient(180deg, var(--her-glow, var(--her)) 0 40%, var(--her) 40%); }
.hm-pen::after { --m: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 5%22 shape-rendering=%22crispEdges%22%3E%3Cpath d=%22M0 2h3v1h-3zM2 1h3v3h-3zM12 0h4v5h-4z%22/%3E%3C/svg%3E"); background: linear-gradient(90deg, #fff 0 6.25%, #ffe2c4 6.25% 31.25%, #fff 31.25% 87.5%, var(--fb-neon-cyan) 87.5%); }
.hm-dock { position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 16px; }
.hm-dock::before { content: ""; position: absolute; inset: 2px 1px; border: 1px dashed color-mix(in srgb, var(--her-glow) 60%, transparent); border-radius: 3px; opacity: 0; transition: opacity calc(var(--fxk) * 160ms); }
.hm-dock.is-away::before { opacity: 1; }
.hm-dock.is-away .hm-pen { visibility: hidden; }
.hm-dock--book { position: absolute; left: -31px; top: 31px; z-index: 3; filter: drop-shadow(0 2px 0 rgba(0,0,0,.55)); }
.cs--m .hm-two .hm-dock--book { display: none; }
.hm-fx__pen { width: 48px; height: 15px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); }

/* 小图标（单色，颜色跟文字走）：锁 = 只有你看得到；合上的本子 = 没记；墨滴 = 墨还没干 */
.hm-ico { display: inline-block; flex: none; width: 10px; height: 10px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.hm-ico--lock { --m: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 7 8%22 shape-rendering=%22crispEdges%22%3E%3Cpath d=%22M1 0h5v1h-5zM1 1h1v2h-1zM5 1h1v2h-1zM0 3h7v1h-7zM0 4h3v2h-3zM4 4h3v2h-3zM0 6h7v2h-7z%22/%3E%3C/svg%3E"); }
.hm-ico--shut { --m: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 9 8%22 shape-rendering=%22crispEdges%22%3E%3Cpath d=%22M0 0h2v8h-2zM3 0h6v8h-6z%22/%3E%3C/svg%3E"); }
.hm-ico--drop { --m: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 5 8%22 shape-rendering=%22crispEdges%22%3E%3Cpath d=%22M2 0h1v2h-1zM1 2h3v2h-3zM0 4h5v3h-5zM1 7h3v1h-3z%22/%3E%3C/svg%3E"); }

/* ── 每句话的落点（.hm-vd）：贴在客人那句话下面。每一句都有，结果只有这几种 ── */
.hm-two .hm-vd { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; margin-top: 7px; padding: 0; border: 0; background: none; color: var(--fb-ink-2); font: 400 12px/18px var(--font-body); text-align: right; max-width: 100%; flex-wrap: wrap; justify-content: flex-end; }
.hm-two button.hm-vd { cursor: pointer; }
/* 章：像素切角、厚底，游戏物件。实心 = 当众记的；空心带锁 = 悄悄记的 */
.hm-chip { --face: var(--fb-surface-3); --txt: var(--fb-ink); --key: #070b0c; display: inline-block; flex: none; rotate: -4deg; filter: drop-shadow(0 3px 0 var(--key)); }
.hm-chip__in { --fb-n: 3px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 5px; background: var(--face); color: var(--txt); }
.hm-chip__in i { display: grid; place-items: center; width: 18px; height: 18px; background: var(--fb-night); color: var(--her-glow); font: 700 11px/1 var(--font-body); font-style: normal; }
.hm-chip__in b { font-family: var(--font-latin); font-weight: 400; font-size: 15px; line-height: 28px; letter-spacing: .02em; }
.hm-chip.is-up { --face: var(--up); --txt: var(--up-ink); --key: var(--up-key); }
.hm-chip.is-down { --face: var(--down); --txt: var(--down-ink); --key: var(--down-key); rotate: 3deg; }
.hm-chip.is-zero b { font-family: var(--font-body); font-weight: 700; font-size: 12px; }
.hm-chip.is-hollow { filter: none; }
.hm-chip.is-hollow .hm-chip__in { background: var(--fb-night); box-shadow: inset 0 0 0 2px var(--face); color: var(--face); padding-left: 9px; }
.hm-chip.is-hollow .hm-chip__in i { width: 10px; height: 10px; background: currentColor; }
.hm-chip.is-hollow.is-down .hm-chip__in { color: var(--fb-rust-text); box-shadow: inset 0 0 0 2px var(--fb-rust-text); }
.hm-chip.is-hollow.is-zero .hm-chip__in { color: var(--fb-ink-2); box-shadow: inset 0 0 0 2px var(--fb-line-strong); }
.hm-vd__only { display: inline-flex; align-items: center; gap: 5px; color: var(--fb-ink-3); font-size: 11px; }
.hm-vd.is-other .hm-chip { rotate: 0deg; filter: none; opacity: .92; }
.hm-vd.is-other .hm-chip__in { height: 22px; padding: 0 8px 0 3px; gap: 5px; }
.hm-vd.is-other .hm-chip__in i { width: 16px; height: 16px; font-size: 10px; }
.hm-vd.is-other .hm-chip__in b { font-size: 12px; line-height: 22px; }
.hm-two .hm-vd.is-other { min-height: 22px; margin-top: 6px; }
button.hm-vd:hover .hm-chip, button.hm-vd:focus-visible .hm-chip { filter: drop-shadow(0 3px 0 var(--key)) drop-shadow(0 0 10px color-mix(in srgb, var(--face) 60%, transparent)); }
/* 还在等她判断：虚线框、笔在动、点在跳 */
.hm-two .hm-vd.is-judging { padding: 0 10px 0 4px; border: 1px dashed color-mix(in srgb, var(--her-glow) 65%, transparent); border-radius: var(--fb-radius-sm); background: var(--fb-night); color: var(--fb-ink); }
.hm-vd.is-judging .hm-pen { width: 48px; height: 15px; rotate: -38deg; margin: 0 -8px 0 -8px; animation: hm-scribble calc(var(--fxk) * .72s) steps(4, end) infinite; }
.hm-vd.is-judging.is-arriving .hm-pen { animation: hm-pen-in 1ms linear calc(var(--fxk) * 400ms) both, hm-scribble calc(var(--fxk) * .72s) steps(4, end) infinite; }
/* 三个像素点，一个一个冒出来 */
.hm-dots { display: inline-block; flex: none; width: 16px; height: 4px; margin-left: -2px; background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 6px, currentColor 6px 10px, transparent 10px 12px, currentColor 12px 16px); animation: hm-dots calc(var(--fxk) * 1.2s) steps(4, end) infinite; }
/* 判完了，这句不记：实线、不动、过去时 */
.hm-two .hm-vd.is-passed, .hm-two .hm-vd.is-resting, .hm-two .hm-vd.is-late { padding: 0 10px 0 8px; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-sm); background: color-mix(in srgb, var(--fb-night) 72%, transparent); }
.hm-vd.is-fresh.is-passed, .hm-vd.is-fresh.is-resting { border-color: color-mix(in srgb, var(--her) 45%, var(--fb-line)); color: var(--fb-ink); }
.hm-vd__hook { color: var(--her-glow); }
.hm-two .hm-vd.is-none { min-height: 16px; margin-top: 4px; color: var(--fb-ink-3); font-size: 11px; line-height: 16px; }
/* 两边对上：点章或点条目，那句话和那一笔一起亮一下 */
.hm-msg.is-linked .hm-msg__bubble, .hm-entry.is-linked { animation: hm-linked calc(var(--fxk) * 1.6s) var(--fb-ease-out) 1; }
/* 那句话被盖章的一下 */
.hm-msg.is-hit-up .hm-msg__bubble { animation: hm-hit-up calc(var(--fxk) * .7s) var(--fb-ease-out) 1; }
.hm-msg.is-hit-down .hm-msg__bubble { animation: hm-hit-down calc(var(--fxk) * .5s) var(--fb-ease-out) 1; }
.hm-msg.is-hit-quiet .hm-msg__bubble { animation: hm-hit-quiet calc(var(--fxk) * .9s) var(--fb-ease-out) 1; }

/* ── 本子这一头 ── */
.hm-two .hm-you { position: relative; }
.hm-two .hm-you__num { grid-row: 1 / 3; display: flex; align-items: center; }
.hm-two .hm-you__n { display: inline-block; min-width: 1.2em; transform-origin: 50% 70%; }
.hm-two .hm-you b.hm-you__label { display: flex; align-items: center; gap: 8px; }
.hm-two .hm-delta { --fb-n: 2px; display: inline-grid; place-items: center; height: 20px; padding: 0 6px; font: 400 12px/20px var(--font-latin); font-style: normal; rotate: -4deg; }
.hm-two .hm-delta.is-up { background: var(--up); color: var(--up-ink); }
.hm-two .hm-delta.is-down { background: var(--down); color: var(--down-ink); rotate: 3deg; }
.hm-two .hm-you__n.is-up, .hm-two .hm-hud__n.is-up { color: var(--up); text-shadow: 0 0 14px color-mix(in srgb, var(--up) 60%, transparent); }
.hm-two .hm-you__n.is-down, .hm-two .hm-hud__n.is-down { color: var(--fb-rust-text); }
/* 记分条里的小名次牌（本子上「你那一页」用的是 account.css 的名牌 rk-）。占位：只定位置、最大尺寸（高 28、宽不超过 96）和变化时的动作 */
.hm-two :is(.hm-book, .hm-hud) .hm-plate { --fb-n: 3px; display: inline-flex; align-items: baseline; justify-content: center; gap: 3px; height: 28px; min-width: 62px; padding: 0 10px; background: var(--fb-surface-3); color: var(--fb-ink-2); font: 500 12px/28px var(--font-body); white-space: nowrap; transform-origin: 50% 50%; }
.hm-two :is(.hm-book, .hm-hud) .hm-plate b { font-family: var(--font-latin); font-weight: 400; font-size: 16px; line-height: 28px; color: var(--her-glow); }
.hm-two :is(.hm-book, .hm-hud) .hm-plate small { font-size: 11px; }
.hm-two :is(.hm-book, .hm-hud) .hm-plate[data-rank="1"] { background: var(--fb-gold); color: var(--fb-on-gold); } .hm-two :is(.hm-book, .hm-hud) .hm-plate[data-rank="1"] b { color: var(--fb-on-gold); }
.hm-two :is(.hm-book, .hm-hud) .hm-plate[data-rank="2"] { background: #c9d3d9; color: #10171a; } .hm-two :is(.hm-book, .hm-hud) .hm-plate[data-rank="2"] b { color: #10171a; }
.hm-two :is(.hm-book, .hm-hud) .hm-plate[data-rank="3"] { background: #cf8f58; color: #1d1404; } .hm-two :is(.hm-book, .hm-hud) .hm-plate[data-rank="3"] b { color: #1d1404; }
.hm-two :is(.hm-book, .hm-hud) .hm-plate.is-none { clip-path: none; border: 1px dashed var(--fb-line-strong); border-radius: 4px; background: none; color: var(--fb-ink-3); }
.hm-two .hm-move { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: 3px; font: 700 11px/18px var(--font-body); font-style: normal; white-space: nowrap; }
.hm-two .hm-move.is-up { background: var(--fb-green-tint); color: var(--up); }
.hm-two .hm-move.is-down { background: var(--fb-rust-tint); color: var(--fb-rust-text); }
.hm-two .hm-move::before { content: ""; border: 4px solid transparent; }
.hm-two .hm-move.is-up::before { border-bottom-color: currentColor; border-top: 0; }
.hm-two .hm-move.is-down::before { border-top-color: currentColor; border-bottom: 0; }
/* 下一条线还差几分（名次那句在名牌旁边）。没记的时候它会闪：差的就是这几格 */
.hm-two .hm-goal { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 5px 12px; border: 1px dashed color-mix(in srgb, var(--her) 42%, var(--fb-line)); border-radius: var(--fb-radius-md); color: var(--fb-ink-2); font: 400 12px/18px var(--font-body); }
.hm-two .hm-goal__text { min-width: 0; text-wrap: pretty; }
.hm-two .hm-now { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 20px; padding: 0 7px; border-radius: 3px; background: var(--fb-surface-3); color: var(--fb-ink); font: 700 11px/20px var(--font-body); white-space: nowrap; }
.hm-two .hm-now.is-up { background: var(--fb-green-tint); color: var(--up); }
.hm-two .hm-now.is-down { background: var(--fb-rust-tint); color: var(--fb-rust-text); }
.hm-two .hm-pips { display: inline-flex; flex: none; gap: 3px; margin-left: auto; }
.hm-two .hm-pips i { width: 9px; height: 9px; border: 1px solid var(--her-glow); }
.hm-two .hm-pips i.is-on { background: var(--her-glow); box-shadow: 0 0 8px color-mix(in srgb, var(--her-glow) 70%, transparent); }
/* 过线：占位，名分的牌子等名牌那位设计师定 */
.hm-two .hm-line { --fb-n: 3px; display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 5px 12px 5px 6px; background: var(--fb-gold); color: var(--fb-on-gold); font: 700 13px/20px var(--font-body); }
.hm-two .hm-line i { display: grid; place-items: center; flex: none; height: 22px; padding: 0 7px; background: var(--fb-on-gold); color: var(--fb-gold); font: 700 11px/1 var(--font-body); font-style: normal; }
/* 条目：新的一笔、悄悄记的一笔、是哪句话换来的 */
.hm-two .hm-entry { position: relative; }
.hm-two .hm-entry__meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hm-two .hm-entry__meta > * { flex: none; }
.hm-two .hm-quote { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; border: 0; background: none; color: var(--fb-ink-3); font: inherit; text-align: left; cursor: pointer; }
.hm-two .hm-quote::before { content: "· "; }
.hm-two .hm-quote:hover, .hm-two .hm-quote:focus-visible { color: var(--her-glow); }
.hm-two .hm-entries { margin-left: -10px; padding-left: 10px; }
.hm-two .hm-entry.is-fresh { margin-left: -10px; padding-left: 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--her) 24%, transparent), transparent 78%); box-shadow: inset 3px 0 0 var(--her-glow); }
.hm-two .hm-entry.is-private .hm-entry__text { color: color-mix(in srgb, var(--fb-ink) 88%, var(--her)); }
.hm-two .hm-entry.is-private .hm-stamp { background: var(--fb-night); box-shadow: inset 0 0 0 2px currentColor; }
.hm-two .hm-entry.is-private .hm-stamp.is-up { color: var(--up); } .hm-two .hm-entry.is-private .hm-stamp.is-down { color: var(--fb-rust-text); }
.hm-two .hm-entry__only { display: inline-flex; align-items: center; gap: 4px; color: color-mix(in srgb, var(--her-glow) 70%, var(--fb-ink-3)); }
.hm-two .hm-entry--wait { grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 8px; margin-bottom: 2px; padding: 9px 10px; border: 1px dashed color-mix(in srgb, var(--her-glow) 65%, transparent); border-radius: var(--fb-radius-md); color: var(--fb-ink); font: 400 13px/20px var(--font-body); background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--her) 22%, transparent) 50%, transparent 70%) 0 0 / 300% 100%; animation: hm-wait calc(var(--fxk) * 1.6s) linear infinite; }
.hm-two .hm-entry--wait .hm-ico { color: var(--her-glow); }
.hm-two .hm-tabs button { position: relative; }
.hm-two .hm-tabs button[data-badge]::after { content: attr(data-badge); position: absolute; right: -6px; top: -8px; padding: 0 5px; border-radius: 3px; background: var(--up); color: var(--up-ink); font: 400 10px/16px var(--font-latin); }
.hm-two .hm-tabs button[data-badge^="−"]::after { background: var(--down); color: var(--down-ink); }
.hm-book.is-hit-up { animation: hm-book-up calc(var(--fxk) * .8s) var(--fb-ease-out) 1; }
.hm-book.is-hit-down { animation: hm-book-down calc(var(--fxk) * .5s) var(--fb-ease-out) 1; }
.hm-two .hm-snd { margin-left: auto; align-self: center; height: 24px; padding: 0 9px; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-pill); color: var(--fb-ink-3); font: 400 11px/22px var(--font-body); white-space: nowrap; }
.hm-two .hm-snd[aria-pressed="true"] { border-color: var(--her); color: var(--her-glow); }

/* ── 记分条：单栏（手机竖屏）时本子在下面看不见，分数、名次、下一步就摆在对话和输入框之间，眼睛不用离开 ── */
.hm-two .hm-hud { display: none; }
.cs--m .hm-two .hm-hud { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto; grid-template-areas: "dock score plate move open" "goal goal goal goal goal"; align-items: center; gap: 6px 8px; padding: 9px 12px 10px; border-top: 1px solid color-mix(in srgb, var(--her) 38%, var(--fb-line)); background: linear-gradient(180deg, color-mix(in srgb, var(--her) 16%, var(--fb-night)), color-mix(in srgb, var(--her) 5%, var(--fb-night))); }
.hm-two .hm-hud > .hm-dock { grid-area: dock; width: 30px; height: 26px; margin-left: -4px; }
.hm-two .hm-hud > .hm-dock .hm-pen { rotate: -38deg; }
.hm-two .hm-hud__score { grid-area: score; display: flex; align-items: baseline; gap: 5px; }
.hm-two .hm-hud__n { display: inline-block; font: 400 24px/28px var(--font-latin); color: var(--her-glow); transform-origin: 50% 70%; }
.hm-two .hm-hud__score small { color: var(--fb-ink-3); font-size: 11px; }
.hm-two .hm-hud__score .hm-delta { align-self: center; }
.hm-two .hm-hud > .hm-plate { grid-area: plate; height: 26px; line-height: 26px; }
.hm-two .hm-hud > .hm-move { grid-area: move; justify-self: start; }
.hm-two .hm-hud__score:has(.hm-delta:not([hidden])) small { display: none; }
.hm-two .hm-hud > .hm-plate b { line-height: 26px; }
.hm-two .hm-hud__goal { grid-area: goal; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--fb-ink-2); font: 400 12px/18px var(--font-body); }
.hm-two .hm-hud__line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hm-two .hm-hud__line > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-two .hm-hud__open { grid-area: open; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-pill); color: var(--fb-ink-2); font-size: 12px; }
.hm-two .hm-hud__open::after { content: ""; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; }
.hm-hud.is-hit-up { animation: hm-hud-up calc(var(--fxk) * .8s) var(--fb-ease-out) 1; }
.hm-hud.is-hit-down { animation: hm-hud-down calc(var(--fxk) * .5s) var(--fb-ease-out) 1; }

/* ── 特效层里的小东西 ── */
.hm-spark { width: 6px; height: 6px; background: var(--up); }
.hm-spark.is-her { background: var(--her-glow); } .hm-spark.is-w { background: #fff; width: 4px; height: 4px; }
.hm-spark.is-down { background: var(--down); } .hm-spark.is-down.is-her { background: var(--fb-rust-text); } .hm-spark.is-down.is-w { background: #3a1a0c; }
.hm-spark.is-gold { background: var(--fb-gold); }
.hm-dot { width: 4px; height: 4px; background: var(--her-glow); box-shadow: 0 0 6px var(--her-glow); opacity: 0; }
.hm-float { font: 400 20px/24px var(--font-latin); color: var(--up); text-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 12px color-mix(in srgb, var(--up) 60%, transparent); font-style: normal; white-space: nowrap; }
.hm-float.is-down { color: var(--fb-rust-text); text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.hm-ring { width: 44px; height: 44px; border: 1px dashed var(--her-glow); border-radius: 50%; }
.hm-fx .hm-chip { rotate: 0deg; }

@keyframes hm-scribble { 0%, 100% { translate: 0 0; } 25% { translate: 3px -1px; } 50% { translate: 1px 1px; } 75% { translate: 4px 0; } }
@keyframes hm-pen-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hm-dots { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -33.4% 0 0); } }
@keyframes hm-wait { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes hm-linked { 0%, 45% { box-shadow: 0 0 0 2px var(--her-glow), 0 0 22px color-mix(in srgb, var(--her-glow) 55%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes hm-hit-up { 0% { box-shadow: 0 0 0 2px var(--up), 0 0 26px color-mix(in srgb, var(--up) 60%, transparent); border-color: var(--up); translate: 0 -2px; } 100% { box-shadow: 0 0 0 0 transparent; translate: 0 0; } }
@keyframes hm-hit-down { 0% { box-shadow: 0 0 0 2px var(--down); border-color: var(--down); translate: 0 3px; } 20% { translate: -5px 1px; } 40% { translate: 4px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } 100% { box-shadow: 0 0 0 0 transparent; translate: 0 0; } }
@keyframes hm-hit-quiet { 0% { box-shadow: 0 0 0 1px var(--her-glow), 0 0 18px color-mix(in srgb, var(--her-glow) 40%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes hm-book-up { 0% { box-shadow: 0 5px 0 var(--f-deep, transparent), 0 0 0 2px var(--up), 0 0 44px color-mix(in srgb, var(--up) 55%, transparent); } 100% { box-shadow: 0 5px 0 var(--f-deep, transparent), 0 0 0 0 transparent, 0 0 0 transparent; } }
@keyframes hm-book-down { 0% { box-shadow: 0 5px 0 var(--f-deep, transparent), 0 0 0 2px var(--down); translate: 0 4px; } 35% { translate: 0 -1px; } 100% { box-shadow: 0 5px 0 var(--f-deep, transparent), 0 0 0 0 transparent; translate: 0 0; } }
@keyframes hm-hud-up { 0% { box-shadow: inset 0 0 0 2px var(--up), inset 0 0 26px color-mix(in srgb, var(--up) 40%, transparent); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
@keyframes hm-hud-down { 0% { box-shadow: inset 0 0 0 2px var(--down); translate: 0 3px; } 100% { box-shadow: inset 0 0 0 0 transparent; translate: 0 0; } }