/* /print-from-this-computer: How it works scene. */
.hub-anim.ha-print-from-this-computer .ha-stage { min-height: 0; }
.hub-anim.ha-print-from-this-computer .sc-arrow { color: #0f0f12; flex: 0 0 auto; } .hub-anim.ha-print-from-this-computer .sc-arrow svg { width: 64px; height: 32px; display: block; }
.hub-anim.ha-print-from-this-computer .sc { display: flex; align-items: center; justify-content: center; gap: 1.6rem; min-height: 250px; }
.hub-anim.ha-print-from-this-computer .sc-tag { display: inline-block; margin: 0; padding: 0.4rem 0.72rem; border-radius: 999px; font: 800 0.8rem/1 Manrope, Inter, sans-serif; white-space: nowrap; box-shadow: 3px 3px 0 #0f0f12; }
@media (max-width: 640px) { .hub-anim.ha-print-from-this-computer .sc { flex-direction: column; gap: 0.9rem; } .hub-anim.ha-print-from-this-computer .sc-arrow { transform: rotate(90deg); } .hub-anim.ha-print-from-this-computer .ha-stage { padding-bottom: 3.4rem; } }
.hub-anim.ha-print-from-this-computer .ha-stage { border: 1px solid #c7d2fe; background: linear-gradient(180deg, #eef0ff, #dfe4fd); }
.hub-anim.ha-print-from-this-computer .pc-dlg { width: 250px; padding: 1rem; background: #fff; border: 2px solid #0f0f12; border-radius: 12px; box-shadow: 5px 6px 0 #0f0f12; box-sizing: border-box; flex: 0 0 auto; }
.hub-anim.ha-print-from-this-computer .pc-dlg small { display: block; margin-bottom: .7rem; font: 800 .72rem/1 Manrope, Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #71717a; }
.hub-anim.ha-print-from-this-computer .pc-dlg p { position: relative; display: flex; justify-content: space-between; margin: 0 0 .55rem; padding: .55rem .65rem; background: #f4f5fb; border-radius: 8px; font: 600 .86rem/1 Inter, system-ui, sans-serif; color: #3f3f46; } .hub-anim.ha-print-from-this-computer .pc-dlg p b { font-weight: 800; color: #0f0f12; }
.hub-anim.ha-print-from-this-computer .pc-scale b { position: absolute; right: .65rem; } .hub-anim.ha-print-from-this-computer .pc-a { opacity: 0; color: #b91c1c !important; } .hub-anim.ha-print-from-this-computer .pc-b { color: #15803d !important; }
.hub-anim.ha-print-from-this-computer .pc-go { display: block; width: 100%; margin-top: .3rem; padding: .55rem; background: #4338ca; color: #fff; border: 0; border-radius: 8px; font: 800 .86rem/1 Manrope, Inter, sans-serif; }
.hub-anim.ha-print-from-this-computer .pc-pr { position: relative; width: 200px; height: 250px; flex: 0 0 auto; }
.hub-anim.ha-print-from-this-computer .pc-unit { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 70px; background: linear-gradient(180deg, #f8fafc, #cbd5e1); border: 2.5px solid #0f0f12; border-radius: 12px 12px 6px 6px; box-sizing: border-box; } .hub-anim.ha-print-from-this-computer .pc-unit i { position: absolute; left: 20px; right: 20px; bottom: 9px; height: 7px; border-radius: 4px; background: #0f172a; }
.hub-anim.ha-print-from-this-computer .pc-feed { position: absolute; left: 26px; right: 26px; top: 60px; height: 190px; overflow: hidden; } .hub-anim.ha-print-from-this-computer .pc-lab { height: 186px; padding: 16px 12px 10px; background: #fff; border: 2px solid #0f0f12; border-top: 0; border-radius: 0 0 8px 8px; box-sizing: border-box; }
.hub-anim.ha-print-from-this-computer .pc-lab small { display: block; margin-bottom: 9px; font: 800 .66rem/1 Manrope, Inter, sans-serif; letter-spacing: .1em; color: #0f0f12; } .hub-anim.ha-print-from-this-computer .pc-lab i { display: block; height: 6px; margin-bottom: 7px; border-radius: 3px; background: #0f0f12; } .hub-anim.ha-print-from-this-computer .pc-lab i + i { width: 62%; } .hub-anim.ha-print-from-this-computer .pc-lab span { display: block; height: 76px; margin-top: 16px; background: repeating-linear-gradient(90deg, #0f0f12 0 3px, transparent 3px 5px, #0f0f12 5px 6px, transparent 6px 10px, #0f0f12 10px 14px, transparent 14px 16px); }
@media (max-width: 640px) { .hub-anim.ha-print-from-this-computer .pc-dlg { width: 100%; max-width: 230px; } .hub-anim.ha-print-from-this-computer .pc-pr { width: 180px; height: 230px; } }
@media (prefers-reduced-motion: no-preference) {
 .hub-anim.ha-print-from-this-computer .pc-a { animation: pc-a 9s ease infinite both; } .hub-anim.ha-print-from-this-computer .pc-b { animation: pc-b 9s ease infinite both; } .hub-anim.ha-print-from-this-computer .pc-go { animation: pc-go 9s ease infinite both; } .hub-anim.ha-print-from-this-computer .pc-lab { animation: pc-lab 9s ease infinite both; }
 @keyframes pc-a { 0%, 16% { opacity: 1; } 22%, 96% { opacity: 0; } 100% { opacity: 1; } }
 @keyframes pc-b { 0%, 18% { opacity: 0; } 24%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
 @keyframes pc-go { 0%, 34% { background: #4338ca; transform: none; } 37% { background: #312e81; transform: scale(.96); } 41%, 100% { background: #4338ca; transform: none; } }
 @keyframes pc-lab { 0%, 40% { transform: translateY(-100%); } 66%, 94% { transform: none; opacity: 1; } 99%, 100% { transform: none; opacity: 0; } }
}