.hp{max-width:26rem;margin:1.4rem 0 .4rem}.hp-tray{aspect-ratio:100/66;background:#16140f0a;border-radius:18px;padding:6px;position:relative;box-shadow:inset 0 0 0 1px #16140f0f}.hp-canvas{background:var(--paper-hi);width:100%;height:100%;box-shadow:inset 0 0 0 1px var(--hair), 0 1px 0 #fff9;touch-action:none;cursor:crosshair;border-radius:12px;display:block}.hp-k,.hp-s,.hp-ruler{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);pointer-events:none;font-size:10px;position:absolute}.hp-k{color:var(--ink);top:15px;left:18px}.hp-s{text-transform:none;letter-spacing:.04em;top:15px;right:18px}.hp-ruler{text-transform:none;letter-spacing:.04em;align-items:center;gap:.5rem;display:flex;bottom:14px;left:18px}.hp-ruler i{border:1px solid var(--muted);border-top:0;width:10%;min-width:26px;height:5px;display:block}.hp-chips{flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;margin-top:.9rem;display:flex}.hp-seg{background:#16140f0d;border-radius:999px;padding:3px;display:inline-flex;box-shadow:inset 0 0 0 1px #16140f0f}.hp-seg button{font:inherit;letter-spacing:.04em;color:var(--muted);cursor:pointer;transition:background-color .5s var(--out), color .5s var(--out);background:0 0;border:0;border-radius:999px;padding:.35rem .85rem;font-size:12px}.hp-seg button[aria-pressed=true]{background:var(--paper-hi);color:var(--ink);box-shadow:0 1px 2px #16140f14, inset 0 0 0 1px var(--hair)}.hp-seg button:active{transform:scale(.97)}.hp-tog{margin:0}@media (width<=899px){.hp{max-width:none}}@media (prefers-reduced-motion:reduce){.hp-seg button{transition:none}}