/* Phomemo page: on a lilac desk, a 2 x 1 in design (Fig jam, Batch 12, QR) sits on the left with its
   size tag; "Print from this computer" draws an arrow to a small generic thermal printer whose tag
   says 2 x 1 in roll; the printed label feeds out of the slot at exactly the design's size and a
   check pill confirms it fits. Sizes in cqw of .pm-scene so both labels stay the same size.
   Reduced motion: the printed label is already out, both notes showing. */
.hub-anim.ha-labels-phomemo .ha-stage { border: 1px solid #ddd3f1; background-color: #ece6f8;
    background-image: repeating-linear-gradient(0deg, rgba(76, 52, 140, 0.07) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(76, 52, 140, 0.07) 0 1px, transparent 1px 22px); }
.hub-anim.ha-labels-phomemo .pm-scene { position: relative; container-type: inline-size; aspect-ratio: 2.3; max-width: 920px; margin: 0 auto;
    --pm-lw: 21cqw; font-family: Inter, system-ui, sans-serif; color: #17131f; }
.hub-anim.ha-labels-phomemo .pm-scene p { margin: 0; }

/* the 2 x 1 label (same size in the design and on the roll) */
.hub-anim.ha-labels-phomemo .pm-lab { position: relative; box-sizing: border-box; width: var(--pm-lw); aspect-ratio: 2; display: flex; align-items: center; justify-content: space-between;
    gap: calc(var(--pm-lw) * 0.05); padding: 0 calc(var(--pm-lw) * 0.08); background: #fff; border-radius: calc(var(--pm-lw) * 0.05); }
.hub-anim.ha-labels-phomemo .pm-txt { display: flex; flex-direction: column; gap: calc(var(--pm-lw) * 0.02); min-width: 0; }
.hub-anim.ha-labels-phomemo .pm-txt b { font: 800 calc(var(--pm-lw) * 0.115)/1.05 Manrope, Inter, sans-serif; color: #111; white-space: nowrap; letter-spacing: -0.01em; }
.hub-anim.ha-labels-phomemo .pm-txt span { font: 600 calc(var(--pm-lw) * 0.07)/1.1 Inter, system-ui, sans-serif; color: #333; white-space: nowrap; }
.hub-anim.ha-labels-phomemo .pm-qr { flex: none; position: relative; display: block; width: calc(var(--pm-lw) * 0.3); aspect-ratio: 1; background:
    linear-gradient(#111, #111) 11.36% 11.36% / 12% 12% no-repeat, linear-gradient(#fff, #fff) 6.4% 6.4% / 22% 22% no-repeat, linear-gradient(#111, #111) 0 0 / 32% 32% no-repeat,
    linear-gradient(#111, #111) 88.64% 11.36% / 12% 12% no-repeat, linear-gradient(#fff, #fff) 93.6% 6.4% / 22% 22% no-repeat, linear-gradient(#111, #111) 100% 0 / 32% 32% no-repeat,
    linear-gradient(#111, #111) 11.36% 88.64% / 12% 12% no-repeat, linear-gradient(#fff, #fff) 6.4% 93.6% / 22% 22% no-repeat, linear-gradient(#111, #111) 0 100% / 32% 32% no-repeat,
    linear-gradient(#111, #111) 50% 4% / 10% 10% no-repeat, linear-gradient(#111, #111) 46% 26% / 10% 10% no-repeat, linear-gradient(#111, #111) 4% 46% / 10% 10% no-repeat,
    linear-gradient(#111, #111) 30% 54% / 10% 10% no-repeat, linear-gradient(#111, #111) 60% 96% / 10% 10% no-repeat; }
.hub-anim.ha-labels-phomemo .pm-qr::after { content: ""; position: absolute; left: 44%; top: 44%; right: 0; bottom: 0; background: conic-gradient(#111 25%, transparent 0 50%, #111 0 75%, transparent 0) 0 0 / 40% 40%; }

/* size tags */
.hub-anim.ha-labels-phomemo .pm-tag { display: inline-block; padding: 0.5cqw 1.1cqw; border-radius: 999px; background: #fff; border: 1.5px solid #17131f; color: #17131f;
    font: 800 clamp(0.72rem, 1.45cqw, 0.9rem)/1 Manrope, Inter, sans-serif; white-space: nowrap; }

/* design card */
.hub-anim.ha-labels-phomemo .pm-card { position: absolute; left: 3cqw; top: 9cqw; width: 31cqw; box-sizing: border-box; padding: 2.4cqw 0 3.2cqw; display: flex; flex-direction: column; align-items: center; gap: 2cqw;
    background: #fbfaff; border: 2px solid #17131f; border-radius: 1.6cqw; box-shadow: 4px 5px 0 #17131f; transform: rotate(-2deg); }
.hub-anim.ha-labels-phomemo .pm-card .pm-lab { box-shadow: 0 0 0 1.5px #8f7fc0, 0 0 0 4px rgba(143, 127, 192, 0.18); }

/* print arrow */
.hub-anim.ha-labels-phomemo .pm-way { position: absolute; left: 36.5cqw; top: 17cqw; width: 22cqw; display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; }
.hub-anim.ha-labels-phomemo .pm-note { position: relative; z-index: 4; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem; border-radius: 999px; background: #3b2a75; color: #fff;
    font: 800 clamp(0.74rem, 1.5cqw, 0.92rem)/1.1 Manrope, Inter, sans-serif; white-space: nowrap; box-shadow: 3px 4px 0 #17131f; }
.hub-anim.ha-labels-phomemo .pm-n1 { transform: rotate(-3deg); }
.hub-anim.ha-labels-phomemo .pm-arrow { position: relative; display: block; width: 100%; height: 14px; }
.hub-anim.ha-labels-phomemo .pm-arrow::before { content: ""; position: absolute; left: 0; right: 8px; top: 50%; border-top: 3px dashed #3b2a75; }
.hub-anim.ha-labels-phomemo .pm-arrow::after { content: ""; position: absolute; right: 2px; top: 50%; width: 10px; height: 10px; margin-top: -6px; border: solid #3b2a75; border-width: 3px 3px 0 0; transform: rotate(45deg); }

/* printer + feed */
.hub-anim.ha-labels-phomemo .pm-dev { position: absolute; left: 61cqw; top: 2cqw; width: 34cqw; height: 40cqw; }
.hub-anim.ha-labels-phomemo .pm-printer { position: absolute; z-index: 3; left: 3cqw; top: 0; width: 28cqw; height: 15cqw; box-sizing: border-box; border-radius: 4cqw 4cqw 2cqw 2cqw;
    background: linear-gradient(#fffaf2, #efe6d8); border: 2px solid #17131f; box-shadow: inset 0 -1.2cqw 0 rgba(23, 19, 31, 0.06), 0 1.6cqw 2cqw -1.2cqw rgba(23, 19, 31, 0.5); }
.hub-anim.ha-labels-phomemo .pm-printer::before { content: ""; position: absolute; left: 2.4cqw; right: 2.4cqw; top: 1.6cqw; height: 4.6cqw; border-radius: 2.4cqw; background: #d9cdf3; border: 1.5px solid rgba(23, 19, 31, 0.25); }
.hub-anim.ha-labels-phomemo .pm-btn { position: absolute; z-index: 1; left: 4cqw; top: 2.9cqw; width: 2cqw; height: 2cqw; border-radius: 50%; background: #fff; border: 1.5px solid #17131f; }
.hub-anim.ha-labels-phomemo .pm-led { position: absolute; z-index: 1; right: 4.2cqw; top: 3.4cqw; width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #6fd08a; box-shadow: 0 0 0 0.5cqw rgba(111, 208, 138, 0.25); }
.hub-anim.ha-labels-phomemo .pm-tag2 { position: absolute; left: 50%; top: 7.4cqw; transform: translateX(-50%); }
.hub-anim.ha-labels-phomemo .pm-slot { position: absolute; left: 3.5cqw; right: 3.5cqw; bottom: 1.2cqw; height: 0.8cqw; border-radius: 1cqw; background: #17131f; }
.hub-anim.ha-labels-phomemo .pm-feed { position: absolute; z-index: 2; left: 5cqw; top: 13.6cqw; width: 24cqw; height: 26cqw; overflow: hidden; }
.hub-anim.ha-labels-phomemo .pm-strip { position: absolute; left: 50%; top: 0; width: calc(var(--pm-lw) + 2cqw); margin-left: calc(var(--pm-lw) / -2 - 1cqw); box-sizing: border-box; padding: 1cqw;
    display: flex; flex-direction: column-reverse; gap: 1.4cqw; background: #f4ecd9; border: 1.5px solid #cdbf9f; border-top: 0; border-radius: 0 0 0.8cqw 0.8cqw; }
.hub-anim.ha-labels-phomemo .pm-strip .pm-lab { box-shadow: 0 0 0 1px #d7ccb2; }
.hub-anim.ha-labels-phomemo .pm-strip .pm-next { height: 6cqw; aspect-ratio: auto; border-radius: 0 0 calc(var(--pm-lw) * 0.05) calc(var(--pm-lw) * 0.05); }
.hub-anim.ha-labels-phomemo .pm-n2 { position: absolute; left: -15cqw; top: 30cqw; transform: rotate(2deg); background: #fff; color: #3b2a75; border: 2px solid #17131f; }
.hub-anim.ha-labels-phomemo .pm-n2 i { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%; background: #2f9e5b; color: #fff; }
.hub-anim.ha-labels-phomemo .pm-n2 svg { width: 0.8em; height: 0.8em; }

@media (max-width: 880px) {
    .hub-anim.ha-labels-phomemo .pm-scene { max-width: 460px; aspect-ratio: 0.63; --pm-lw: 56cqw; }
    .hub-anim.ha-labels-phomemo .pm-tag { padding: 1.4cqw 3cqw; font-size: 3.4cqw; }
    .hub-anim.ha-labels-phomemo .pm-note { font-size: 3.6cqw; }
    .hub-anim.ha-labels-phomemo .pm-card { left: 10cqw; top: 2cqw; width: 80cqw; padding: 5cqw 0 6cqw; gap: 4cqw; border-radius: 4cqw; transform: rotate(-1.5deg); }
    .hub-anim.ha-labels-phomemo .pm-way { left: 10cqw; top: 59.5cqw; width: 80cqw; flex-direction: row; justify-content: center; gap: 3cqw; }
    .hub-anim.ha-labels-phomemo .pm-arrow { width: 14px; height: 9cqw; flex: none; }
    .hub-anim.ha-labels-phomemo .pm-arrow::before { left: 50%; right: auto; top: 0; bottom: 6px; border-top: 0; border-left: 3px dashed #3b2a75; margin-left: -1.5px; }
    .hub-anim.ha-labels-phomemo .pm-arrow::after { right: auto; left: 50%; top: auto; bottom: 2px; margin: 0 0 0 -5px; border-width: 0 3px 3px 0; }
    .hub-anim.ha-labels-phomemo .pm-dev { left: 0; top: 75.5cqw; width: 100cqw; height: 80cqw; }
    .hub-anim.ha-labels-phomemo .pm-printer { left: 16cqw; width: 68cqw; height: 30cqw; border-radius: 8cqw 8cqw 4cqw 4cqw; }
    .hub-anim.ha-labels-phomemo .pm-printer::before { left: 5cqw; right: 5cqw; top: 3.4cqw; height: 9.6cqw; border-radius: 5cqw; }
    .hub-anim.ha-labels-phomemo .pm-btn { left: 8.5cqw; top: 6cqw; width: 4.4cqw; height: 4.4cqw; }
    .hub-anim.ha-labels-phomemo .pm-led { right: 9cqw; top: 7cqw; width: 2.4cqw; height: 2.4cqw; }
    .hub-anim.ha-labels-phomemo .pm-tag2 { top: 15.6cqw; }
    .hub-anim.ha-labels-phomemo .pm-slot { left: 8cqw; right: 8cqw; bottom: 2.4cqw; height: 1.6cqw; }
    .hub-anim.ha-labels-phomemo .pm-feed { left: 18cqw; top: 27.5cqw; width: 64cqw; height: 52cqw; }
    .hub-anim.ha-labels-phomemo .pm-strip { padding: 2.5cqw; gap: 3cqw; width: calc(var(--pm-lw) + 5cqw); margin-left: calc(var(--pm-lw) / -2 - 2.5cqw); }
    .hub-anim.ha-labels-phomemo .pm-strip .pm-next { height: 14cqw; }
    .hub-anim.ha-labels-phomemo .pm-n2 { left: auto; right: 4cqw; top: 73cqw; }
}
@media (prefers-reduced-motion: reduce) { .hub-anim.ha-labels-phomemo .ba-toggle { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
    .hub-anim.ha-labels-phomemo .pm-card, .hub-anim.ha-labels-phomemo .pm-n1, .hub-anim.ha-labels-phomemo .pm-arrow, .hub-anim.ha-labels-phomemo .pm-strip,
    .hub-anim.ha-labels-phomemo .pm-led, .hub-anim.ha-labels-phomemo .pm-n2 { animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: ease; animation-fill-mode: both; }
    .hub-anim.ha-labels-phomemo .pm-card { animation-name: hapm-card; }
    @keyframes hapm-card { 0% { opacity: 0; transform: rotate(-2deg) translateY(1.5cqw); } 6%, 93% { opacity: 1; transform: rotate(-2deg); } 99%, 100% { opacity: 0; transform: rotate(-2deg); } }
    .hub-anim.ha-labels-phomemo .pm-n1 { animation-name: hapm-n1; }
    @keyframes hapm-n1 { 0%, 12% { opacity: 0; transform: rotate(-3deg) translateY(6px); } 17%, 93% { opacity: 1; transform: rotate(-3deg); } 99%, 100% { opacity: 0; transform: rotate(-3deg); } }
    .hub-anim.ha-labels-phomemo .pm-arrow { animation-name: hapm-arrow; }
    @keyframes hapm-arrow { 0%, 16% { clip-path: inset(0 100% 0 0); opacity: 1; } 26%, 93% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
    .hub-anim.ha-labels-phomemo .pm-strip { animation-name: hapm-feed; }
    @keyframes hapm-feed { 0%, 28% { transform: translateY(-100%); opacity: 1; } 31% { transform: translateY(-78%); } 34% { transform: translateY(-78%); }
        37% { transform: translateY(-52%); } 40% { transform: translateY(-52%); } 43% { transform: translateY(-26%); } 46% { transform: translateY(-26%); }
        51%, 93% { transform: translateY(0); opacity: 1; } 99%, 100% { transform: translateY(0); opacity: 0; } }
    .hub-anim.ha-labels-phomemo .pm-led { animation-name: hapm-led; }
    @keyframes hapm-led { 0%, 27% { background: #6fd08a; } 29%, 33%, 37%, 41%, 45%, 49% { background: #ffb547; } 31%, 35%, 39%, 43%, 47% { background: #6fd08a; } 52%, 100% { background: #6fd08a; } }
    .hub-anim.ha-labels-phomemo .pm-n2 { animation-name: hapm-n2; }
    @keyframes hapm-n2 { 0%, 54% { opacity: 0; transform: rotate(2deg) scale(0.85); } 58% { opacity: 1; transform: rotate(2deg) scale(1.06); } 61%, 93% { opacity: 1; transform: rotate(2deg); } 99%, 100% { opacity: 0; transform: rotate(2deg); } }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 880px) {
    @keyframes hapm-arrow { 0%, 16% { clip-path: inset(0 0 100% 0); opacity: 1; } 26%, 93% { clip-path: inset(0 0 0 0); opacity: 1; } 99%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
}