.hp-root{--hp-chord: #B4530A;--hp-text: var(--ink,#2a1f1a);--hp-muted: var(--muted,#7b6b60);--hp-bg: var(--bg,#fbf6ee);--hp-surface: var(--surface,#ffffff);--hp-card: var(--soft,#f6ecdc);--hp-line: var(--line,#eadfce);--hp-accent: var(--red,#a61e22);--hp-accent-ink: var(--red-ink,#ffffff);--hp-danger: var(--off,#c0262c);color: var(--hp-text);box-sizing: border-box;font-family: inherit}@media (prefers-color-scheme: dark){.hp-root{--hp-chord: #F59E4B}}.hp-root *,.hp-root *::before,.hp-root *::after{box-sizing: border-box}.hp-root h2{font-size: 1.05rem;font-weight: 700;margin: 8px 0}.hp-root h3{font-size: .95rem;font-weight: 700;margin: 20px 0 8px}.hp-btn{min-height: 44px;padding: 0 14px;border: 1px solid var(--hp-line);border-radius: 12px;background: var(--hp-card);color: var(--hp-text);font: inherit;font-size: .92rem;font-weight: 600;cursor: pointer}.hp-btn:active{transform: scale(.98)}.hp-primary{background: var(--hp-accent);border-color: var(--hp-accent);color: var(--hp-accent-ink)}.hp-danger{color: var(--hp-danger)}.hp-sq{min-width: 44px;padding: 0 8px}.hp-val{min-width: 64px;font-weight: 500}.hp-search,.hp-in,.hp-ta{width: 100%;border: 1px solid var(--hp-line);border-radius: 12px;padding: 10px 12px;background: var(--hp-surface);color: var(--hp-text);font: inherit;font-size: 16px}.hp-search{margin: 8px 0 12px;min-height: 44px}.hp-ta{font-family: ui-monospace,Menlo,Consolas,monospace;font-size: 15px;line-height: 1.5;resize: vertical}.hp-row,.hp-bar{display: flex;flex-wrap: wrap;gap: 8px;margin-bottom: 12px}.hp-bar{justify-content: space-between}.hp-items{display: flex;flex-direction: column;border-top: 1px solid var(--hp-line)}.hp-item{display: block;width: 100%;text-align: left;padding: 12px 4px;border: 0;border-bottom: 1px solid var(--hp-line);background: transparent;color: inherit;font: inherit;cursor: pointer;min-height: 44px}.hp-it{display: block;font-size: 16px;font-weight: 500}.hp-im{display: block;font-size: 13px;color: var(--hp-muted);margin-top: 2px}.hp-tag{margin-left: 8px;padding: 1px 8px;border-radius: 10px;background: var(--hp-card);font-size: 12px}.hp-empty,.hp-hint,.hp-meta{color: var(--hp-muted);font-size: 14px}.hp-msg{padding: 8px 12px;background: var(--hp-card);border-radius: 8px;font-size: 14px}.hp-err{color: var(--hp-danger);font-size: 14px}.hp-hint code{background: var(--hp-card);padding: 1px 5px;border-radius: 4px}.hp-title{margin-bottom: 0}.hp-tools{position: sticky;top: calc(46px + env(safe-area-inset-top));z-index: 4;display: flex;flex-wrap: wrap;gap: 8px 16px;align-items: center;padding: 8px 0;margin: 8px 0 12px;background: var(--hp-bg);border-bottom: 1px solid var(--hp-line)}.hp-grp{display: flex;align-items: center;gap: 6px}.hp-lbl{font-size: 13px;color: var(--hp-muted)}.hp-grp input[type=range]{width: 96px}.hp-body{line-height: 1.2}.hp-ln{margin: 0 0 .5em}.hp-cw{display: inline-flex;flex-direction: column;vertical-align: bottom}.hp-c{color: var(--hp-chord);font-weight: 500;font-size: .9em;min-height: 1.3em;padding-right: .5em;cursor: pointer;white-space: pre}.hp-c:empty::before{content: '\00a0'}.hp-l{white-space: pre-wrap}.hp-plain .hp-c{display: none}.hp-sec{margin: 1.1em 0 .4em;font-size: .75em;color: var(--hp-muted)}.hp-gap{height: .6em}.hp-fl{display: block;margin: 0 0 12px;font-size: 13px;color: var(--hp-muted)}.hp-fl .hp-in,.hp-fl .hp-ta{margin-top: 4px;color: var(--hp-text)}.hp-grid{display: grid;grid-template-columns: repeat(auto-fill,minmax(104px,1fr));gap: 12px}.hp-cc{background: var(--hp-card);border-radius: 12px;padding: 8px 6px 4px;text-align: center}.hp-cn{font-weight: 500;font-size: 16px;color: var(--hp-chord)}.hp-svg{width: 100%;max-width: 120px;height: auto;color: var(--hp-text)}.hp-dot{fill: var(--hp-chord)}.hp-ov{position: fixed;inset: 0;z-index: 50;background: rgba(0,0,0,.45);display: flex;align-items: flex-end;justify-content: center}.hp-card{width: 100%;max-width: 360px;margin: 0 12px 24px;padding: 16px;background: var(--hp-bg);border-radius: 16px;text-align: center;color: var(--hp-text)}.hp-card .hp-cn{font-size: 22px}.hp-card .hp-svg{max-width: 200px;display: block;margin: 8px auto 12px}